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()
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>
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
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 and reports the new value to the `ControlValueAccessor`.
emitChangeEvent
focus
getSelectedOptionValues
Values of the currently selected options.
onKeyDown
Handles keydown events on the list.
removeOptionFromList
reportValueChange
selectActiveOptions
selectAll
Selects every non-disabled option and reports the new value to the `ControlValueAccessor`.
setSelectedOptionsByClick
setSelectedOptionsByKey
toggleFocusedOption
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
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;
Предложения по улучшению
Если вы нашли ошибку или хотите доработать статью, создайте запрос на GitHub.