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]

Properties
Name Description
lines: QueryList
Methods
getHostElement
handleBlur
handleFocus

Selector: kbq-list-selection

Exported as: kbqListSelection
Properties
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 | readonly (string | KbqListSelection)[]>
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('selectAll')
selectAllEnabled: InputSignalWithTransform
Whether to render the "select all" master checkbox above the options. `multiple="checkbox"` only — a vertical list, since the row is a full-width heading of the column it governs. The row acts on every option the user can toggle, disabled ones excluded. Enabling it also makes Ctrl/Cmd + A a two-way toggle, so the shortcut and the checkbox never disagree ({@link selectAllToggle} is implied). Aliased rather than named `selectAll`, which is already taken by the imperative method of that name.
@Input()
selectAllHandler: (event: KeyboardEvent, list: KbqListSelection) => void
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>
allOptionsSelected: boolean Whether every option "select all" can act on is selected.
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>
selectAllOption: Signal> Reference to the built-in "select all" row, rendered only while `selectAll` is on. Located by template reference rather than by the `KbqListOption` type: that class is declared below this one in the same file, and a query locator is evaluated while this class is being defined, which would read it in its temporal dead zone.
selectAllState: KbqPseudoCheckboxState State of the "select all" master checkbox.
selectAllText: string Label of the "select all" row. Follows the active locale.
selectionModel: SelectionModel>
showCheckbox: boolean
showSelectAll: boolean Whether the "select all" row is currently rendered. Suppressed inside a `cdk-virtual-scroll-viewport`: `options` then holds only the options currently rendered, so the checkbox would report "everything selected" after touching a fraction of the data — the same reason `kbq-select` refuses the row under `withVirtualScroll`. Suppressed on an empty list too: a master checkbox over nothing has nothing to say.
userTabIndex: number
Methods
blur
Clears the active key-manager item (unless an option is still focused) and marks the list as touched.
canDeselectLast
Whether `listOption` is allowed to be deselected, given {@link noUnselectLast}.
deselectAll
Deselects every option, disabled ones included, and reports the new value. See {@link selectAll}.
emitChangeEvent
focus
getSelectedOptionValues
Values of the currently selected options.
onKeyDown
Handles keydown events on the list.
removeOptionFromList
reportValueChange
selectActiveOptions
selectAll
Selects every option and reports the new value to the `ControlValueAccessor`. Unlike the `selectAll` attribute and Ctrl/Cmd + A, this acts on disabled options as well — it is an imperative command, not something the user performed. See {@link toggleSelectAll} for the behaviour the master checkbox has.
setSelectedOptionsByClick
setSelectedOptionsByKey
toggleFocusedOption
toggleSelectAll
Selects every option "select all" can act on, or deselects them all when they are already selected. Backs both the master checkbox and Ctrl/Cmd + A, so the two can never disagree. Reports the value once for the whole batch instead of once per option.
updateScrollSize
updateTabIndex

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
Properties
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
ariaChecked: string Tri-state of the "select all" row, `mixed` included. `null` for an ordinary option, which reports `aria-selected` instead.
ariaSelected: boolean `aria-selected` of the row. The "select all" row reports `aria-checked` instead.
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
Methods
blur
Marks this option as blurred once the zone stabilizes, unless {@link preventBlur} is set.
focus
Moves DOM focus to this option, unless it is disabled or already focused.
getHostElement
The option's host DOM element.
getLabel
handleClick
Handles click events on the list option.
onKeydown
Handles keydown events on the list option.
setSelected
Sets the selected state directly on the list's `SelectionModel`, bypassing the `selected` input setter.
toggle
Toggles the selected state of this option.
Properties
Name Description
option: KbqListOption
source: KbqListSelection
Properties
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.

Properties
Name Description
event: KeyboardEvent
option: T
source: KbqListSelection
Properties
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;
Suggestions for improvement
If you found a mistake or want to improve the article, create an issue on GitHub.