import { KbqListModule } from '@koobiq/components/list';A plain, non-selectable list container. Intentionally carries no ARIA role: it is used both as a semantic list (consumers add `role="list"` themselves, as `kbq-file-upload` does) and as a purely visual grouping. For a selectable listbox use `kbq-list-selection` instead.
Selector: kbq-list
A single row of a `kbq-list`. Non-selectable — see `kbq-list-option` for the selectable variant.
Selector: kbq-list-item, a[kbq-list-item]
| Name | Description |
|---|---|
| lines: QueryList |
Selector: kbq-list-selection
Exported as: kbqListSelection| Name | Description |
|---|---|
@Input() autoSelect: boolean
|
Whether clicking an option clears the rest of the selection. Stays an accessor input: the constructor turns it off for `multiple="checkbox"`, which a signal `input()` cannot do (inputs are read-only from inside the component). |
@Input() compareWith: InputSignalWithTransform<(o1: T, o2: T) => boolean, (o1: T, o2: T) => boolean>
|
Function used for comparing an option against the selected value when determining which options should appear as selected. The first argument is the value of an options. The second one is a value from the selected value. A boolean must be returned. Bind a stable reference — a field or a bound method. An expression that builds a new function on every change detection pass makes the list re-resolve every value against every option each pass. |
@Input() connectedTo: InputSignal |
Lists that options of this list can be moved into. Accepts `KbqListSelection` instances or the `id` of another list. `cdkDropListGroup` on a common ancestor connects lists automatically. |
@Input() disabled: boolean
|
Whether the list is disabled. Stays an accessor input: `setDisabledState` writes it from the `ControlValueAccessor`, which a signal `input()` cannot do. |
@Input() dragCursor: InputSignal |
Whether a draggable option shows the grab cursor over the whole row. Defaults to `auto`, which leaves the row the cursor it has anyway. Use `grab` where the whole row is meant to read as a handle. An option carrying a projected `cdkDragHandle` ignores this — the handle keeps the grab. |
@Input() dragPreview: InputSignal |
What the option's floating copy looks like while it is dragged. Defaults to `text`: a compact plate carrying the option's label and caption, capped at a readable width. Use `full` to drag a clone of the whole row, checkbox, icons and action button included. |
@Input() draggable: boolean
|
Whether options can be reordered by dragging them. Reordering never mutates the data — handle the `dropped` event and move the item yourself. |
@Input() horizontal: InputSignalWithTransform |
|
@Input() noUnselectLast: boolean
|
Whether the last selected option can be deselected. Stays an accessor input for the same reason as {@link autoSelect}. |
@Input() selectAllHandler: (event: KeyboardEvent, list: KbqListSelection |
Function for handling the combination Ctrl + A (select all). By default, the internal handler is used, which toggles the selection of all non-disabled options. |
@Input() selectAllToggle: InputSignalWithTransform |
When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects). |
@Output('dropped')
dropped: OutputEmitterRef |
Emits when an option changes its position by dragging. |
@Output('onCopy')
onCopy: EventEmitter |
Kept as a decorator `@Output()`/`EventEmitter` on purpose: `copyActiveOption` branches on `onCopy.observed` to decide between the consumer handler and the built-in clipboard copy. `output()` exposes no subscriber introspection, so migrating it would silently run both paths for every existing `(onCopy)` consumer. Mirrors `KbqTreeSelection.onCopy`. |
@Output('onSelectAll')
onSelectAll: OutputEmitterRef |
|
@Output('selectionChange')
selectionChange: OutputEmitterRef |
|
| dropIndicatorOffset: WritableSignal |
Distance from the list's content box to the gap the dragged option would land in, or `null` while no drag is hovering this list. Drives the insertion indicator. |
| focusMonitor: FocusMonitor | |
| keyManager: FocusKeyManager |
|
| multiple: boolean | |
| multipleMode: MultipleMode | |
| onTouched: () => void | |
| optionBlurChanges: Observable |
|
| optionFocusChanges: Observable |
|
| options: QueryList |
|
| selectionModel: SelectionModel |
|
| showCheckbox: boolean | |
| userTabIndex: number |
Marker directive for the secondary line of a `kbq-list-option`. Purely a styling hook: it adds the `kbq-list-option-caption` class the list theme keys its muted caption typography and per-state colors off.
Selector: [kbq-list-option-caption]
Component for list-options of selection-list. Each list-option can automatically generate a checkbox and can put current item into the selectionModel of selection-list if the current item is selected.
Selector: kbq-list-option
Exported as: kbqListOption| Name | Description |
|---|---|
@Input() checkboxPosition: InputSignal<"before" | "after">
|
|
@Input() disabled: boolean
|
Whether the option is disabled. Stays an accessor input: the getter also reports the disabled state inherited from the list and the option group, which a signal `input()` cannot express. |
@Input() draggable: boolean
|
Whether the option can be reordered by dragging. Set it to `false` to pin a single option while the rest of the list stays draggable. Unrelated to `disabled`: the option keeps taking focus and selection. Stays an accessor input: the getter reports the resolved state, which the option can only narrow — the list gates its whole drop list, so an option cannot opt back in on its own. |
@Input() selected: boolean
|
Whether the option is selected. Stays an accessor input: the state lives in the list's `SelectionModel`, not on the option. |
@Input() showCheckbox: boolean
|
Whether the option renders a pseudo-checkbox. Stays an accessor input: when unset the getter falls back to the list's own mode. |
@Input() value: T
|
Value of the option, reported through the list's `ControlValueAccessor`. Stays an accessor input: the setter drops the selection when the value is replaced. |
| actionButton: Signal |
|
| dropdownTrigger: KbqDropdownTrigger | |
| externalPseudoCheckbox: boolean | |
| group: KbqOptgroup | |
| hasFocus: boolean | |
| listSelection: KbqListSelection |
|
| onBlur: Subject |
|
| onFocus: Subject |
|
| preventBlur: boolean | |
| pseudoCheckbox: Signal |
|
| showsGrabCursor: boolean | Whether the row itself advertises the grab. Gated on `draggable` so that a pinned option inside a `dragCursor="grab"` list does not promise a pick-up it would refuse. The handle case is left to CSS, which already hands the grab over to a projected `cdkDragHandle`. |
| text: Signal |
|
| textElement: ElementRef |
Not a duplicate of {@link text}: this is the `KbqTitleTextRef` property that `title.directive.ts` reads through `KBQ_TITLE_TEXT_REF`. The interface is a plain `ElementRef`, so it cannot become a signal query without breaking that contract — same class of constraint as #DS-5079. |
| tooltipTrigger: KbqTooltipTrigger |
| Name | Description |
|---|---|
| option: KbqListOption |
|
| source: KbqListSelection |
| Name | Description |
|---|---|
| options: T[] | |
| source: KbqListSelection |
Event class that occurs when copying an item from the KbqListSelection. Used to pass data about the copied item and copy context.
| Name | Description |
|---|---|
| event: KeyboardEvent | |
| option: T | |
| source: KbqListSelection |
| Name | Description |
|---|---|
| option: KbqListOption |
How the floating copy of an option is rendered while it is dragged. `text` shows a compact plate with the option's own text and nothing else, `full` a clone of the whole row.
type KbqListDragPreview = 'text' | 'full';
Whether a draggable option advertises with the cursor that the whole row can be picked up. `auto` leaves the row the cursor it would have anyway, `grab` turns the row into a visible handle. A projected `cdkDragHandle` takes the grab over either way.
type KbqListDragCursor = 'auto' | 'grab';
Event emitted when an option changes its position by dragging.
type KbqListSelectionDroppedEvent = Pick<CdkDragDrop<KbqListSelection>, 'previousIndex' | 'currentIndex'> & {
/** Option that has been moved. */
option: KbqListOption;
/** List the option has been moved into. */
container: KbqListSelection;
/** List the option has been taken from. Equal to `container` when reordering within a single list. */
previousContainer: KbqListSelection;
/** Pointer event that ended the drag. */
event: MouseEvent | TouchEvent;
};
const KBQ_SELECTION_LIST_VALUE_ACCESSOR: Provider;