import { KbqInlineEditModule } from '@koobiq/components/inline-edit';Directive for easy using styles of inline edit placeholder publicly.
Selector: [kbqInlineEditPlaceholder]
Exported as: kbqInlineEditPlaceholderThis directive enhances element acting as dropdown trigger, visually indicating the active state with the `kbq-active` class. Also, it prevents click/keydown events from being propagated to disable mode toggling of parent component.
Selector: [kbqInlineEditMenu]
Exported as: kbqInlineEditMenuCustomizable component that enables edit-in-place logic for specified control and it's view. This component is projecting edit/view mode templates and adds keyboard/pointer handlers. Edit mode opens in a positioned overlay that matches the view mode width or can be customized.
Selector: kbq-inline-edit
Exported as: kbqInlineEdit| Name | Description |
|---|---|
@Input() canSaveOnEnter: InputSignal<(event: KeyboardEvent) => boolean>
|
Customizable function that checks if saving on enter available. |
@Input() compareWith: InputSignal<(a: any, b: any) => boolean>
|
Whether the value still equals the one the editor opened with, in which case `saveHandler` is not called. The default suits text and numbers; bind your own for arrays and objects, or `null` to send every time. A failed save is always retried, however the values compare. |
@Input() disabled: InputSignalWithTransform |
Disables the component, preventing interaction and mode switching. Only allows menu dropdown. |
@Input() editModeWidth: InputSignalWithTransform |
Custom width in pixels for the edit mode overlay. Auto-calculated if not set. |
@Input() getValueHandler: InputSignal<() => unknown>
|
Handler function to retrieve the current value |
@Input() interactiveSelectors: InputSignal |
CSS selectors for elements in view mode that should handle clicks instead of opening edit mode. Override to replace or extend the default list. |
@Input() overlayPanelClass: InputSignal |
Classes to be passed to the inline edit panel. |
@Input() saveErrorHandler: InputSignal |
Reaction to a failed save for this inline edit alone. Defaults to `KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER`; bind `null` to leave it without one. |
@Input() saveHandler: InputSignal |
Saves a valid value in the background: edit mode closes right away and view mode reports how the request went. Without it, a valid value is saved immediately. |
@Input() setValueHandler: InputSignal<(value: any) => void>
|
Handler function to update the value |
@Input() showActions: InputSignalWithTransform |
Whether to show save/cancel action buttons in edit mode. |
@Input() showTooltipOnError: InputSignalWithTransform |
Whether to automatically show validation error tooltips on save attempts. |
@Input() tooltipPlacement: InputSignal |
User-defined tooltip placement |
@Input() validationTooltip: InputSignal |
Custom validation tooltip message. |
@Output('canceled')
canceled: OutputEmitterRef |
Emitted when the inline edit is canceled and changes are discarded. |
@Output('modeChange')
modeChange: OutputEmitterRef |
Emitted when mode switched to edit/view |
@Output('saveError')
saveError: OutputEmitterRef |
Emitted when a `saveHandler` request fails. Silent once the row is destroyed; `saveErrorHandler` is not. |
@Output('saved')
saved: OutputEmitterRef |
Emitted when the inline edit is saved successfully. |
| a11yLocaleConfiguration: Signal |
Texts of the save status announcements. |
| elementRef: ElementRef |
|
| saveStatus: Signal |
State of the background save started by `saveHandler`. |
Recovery a failed-save notification can offer: retry, edit again, discard the unsaved value.
Failed save, reported through `saveError` and `KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER`.
| Name | Description |
|---|---|
| error: E | Parameterise the interface to type this. |
| inlineEdit: KbqInlineEditSaveRecovery | Inline edit whose save failed. |
type KbqInlineEditMode = 'view' | 'edit';
Saves the edited value, e.g. sends it to a server. Only the first emission counts, and the observable must emit or complete: destroying the row does not cancel it, so one that never settles keeps the row in memory. Called without a receiver, so bind an arrow function rather than a method that relies on `this`.
type KbqInlineEditSaveHandler = () => Observable<unknown>;
State of the save request started by `saveHandler`. `progress` is `pending` past the indicator delay.
type KbqInlineEditSaveStatus = 'idle' | 'pending' | 'progress' | 'error';
Reaction to a failed save, e.g. opening a toast.
type KbqInlineEditSaveErrorHandler = (context: KbqInlineEditSaveErrorContext) => void;
Delay before the save progress state appears, so a fast response causes no flicker.
const kbqInlineEditSaveProgressDelay: number;
Minimum time the save progress state stays once it has appeared.
const kbqInlineEditSaveProgressMinimumDuration: number;
Reports every failed save the same way across the application. Declare it in the root injector.
const KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER: InjectionToken<KbqInlineEditSaveErrorHandler>;