@koobiq/components 16.0.0-beta.1

package/fesm2022/koobiq-components-list.mjs

@@ -0,0 +1,800 @@
+import { A11yModule } from '@angular/cdk/a11y';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Attribute, Optional, ContentChildren, Output, Input, Inject, ContentChild, ViewChild, NgModule } from '@angular/core';
+import * as i2 from '@koobiq/components/core';
+import { mixinTabIndex, mixinDisabled, MultipleMode, toBoolean, KBQ_OPTION_ACTION_PARENT, KBQ_TITLE_TEXT_REF, KbqOptionActionComponent, KbqLineSetter, KbqLine, KbqPseudoCheckboxModule, KbqLineModule, KbqOptionModule } from '@koobiq/components/core';
+import * as i1 from '@angular/cdk/clipboard';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { SelectionModel } from '@angular/cdk/collections';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FocusKeyManager } from '@koobiq/cdk/a11y';
+import { SPACE, ENTER, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, TAB, DOWN_ARROW, UP_ARROW, HOME, END, PAGE_UP, PAGE_DOWN, hasModifierKey } from '@koobiq/cdk/keycodes';
+import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import { merge, Subject } from 'rxjs';
+import { takeUntil, startWith, take } from 'rxjs/operators';
+
+/* tslint:disable:no-empty */
+const KBQ_SELECTION_LIST_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => KbqListSelection),
+    multi: true
+};
+class KbqListSelectionChange {
+    constructor(source, option) {
+        this.source = source;
+        this.option = option;
+    }
+}
+class KbqListSelectAllEvent {
+    constructor(source, options) {
+        this.source = source;
+        this.options = options;
+    }
+}
+class KbqListCopyEvent {
+    constructor(source, option) {
+        this.source = source;
+        this.option = option;
+    }
+}
+/** @docs-private */
+class KbqListSelectionBase {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+}
+/** @docs-private */
+const KbqListSelectionMixinBase = mixinTabIndex(mixinDisabled(KbqListSelectionBase));
+class KbqListSelection extends KbqListSelectionMixinBase {
+    get autoSelect() {
+        return this._autoSelect;
+    }
+    set autoSelect(value) {
+        this._autoSelect = coerceBooleanProperty(value);
+    }
+    get noUnselectLast() {
+        return this._noUnselectLast;
+    }
+    set noUnselectLast(value) {
+        this._noUnselectLast = coerceBooleanProperty(value);
+    }
+    get multiple() {
+        return !!this.multipleMode;
+    }
+    get tabIndex() {
+        return this.disabled ? -1 : this._tabIndex;
+    }
+    set tabIndex(value) {
+        this.userTabIndex = value;
+        this._tabIndex = value;
+    }
+    get showCheckbox() {
+        return this.multipleMode === MultipleMode.CHECKBOX;
+    }
+    get optionFocusChanges() {
+        return merge(...this.options.map((option) => option.onFocus));
+    }
+    get optionBlurChanges() {
+        return merge(...this.options.map((option) => option.onBlur));
+    }
+    constructor(elementRef, changeDetectorRef, multiple, clipboard) {
+        super(elementRef);
+        this.changeDetectorRef = changeDetectorRef;
+        this.clipboard = clipboard;
+        this.onSelectAll = new EventEmitter();
+        this.onCopy = new EventEmitter();
+        this._autoSelect = true;
+        this._noUnselectLast = true;
+        this.horizontal = false;
+        this._tabIndex = 0;
+        this.userTabIndex = null;
+        // Emits a change event whenever the selected state of an option changes.
+        this.selectionChange = new EventEmitter();
+        /** Emits whenever the component is destroyed. */
+        this.destroyed = new Subject();
+        /**
+         * 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.
+         */
+        this.compareWith = (a1, a2) => a1 === a2;
+        // View to model callback that should be called if the list or its options lost focus.
+        // tslint:disable-next-line:no-empty
+        this.onTouched = () => { };
+        // View to model callback that should be called whenever the selected options change.
+        this.onChange = (_) => { };
+        if (multiple === MultipleMode.CHECKBOX || multiple === MultipleMode.KEYBOARD) {
+            this.multipleMode = multiple;
+        }
+        else if (multiple !== null) {
+            this.multipleMode = MultipleMode.CHECKBOX;
+        }
+        if (this.multipleMode === MultipleMode.CHECKBOX) {
+            this.autoSelect = false;
+            this.noUnselectLast = false;
+        }
+        this.selectionModel = new SelectionModel(this.multiple);
+    }
+    ngAfterContentInit() {
+        this.horizontal = toBoolean(this.horizontal);
+        this.keyManager = new FocusKeyManager(this.options)
+            .withTypeAhead()
+            .withVerticalOrientation(!this.horizontal)
+            .withHorizontalOrientation(this.horizontal ? 'ltr' : null);
+        this.keyManager.tabOut
+            .pipe(takeUntil(this.destroyed))
+            .subscribe(() => {
+            this._tabIndex = -1;
+            setTimeout(() => {
+                this._tabIndex = this.userTabIndex || 0;
+                this.changeDetectorRef.markForCheck();
+            });
+        });
+        if (this._value) {
+            this.setOptionsFromValues(this._value);
+        }
+        this.selectionModel.changed
+            .pipe(takeUntil(this.destroyed))
+            .subscribe((event) => {
+            for (const item of event.added) {
+                item.selected = true;
+            }
+            for (const item of event.removed) {
+                item.selected = false;
+            }
+        });
+        this.options.changes
+            .pipe(startWith(null), takeUntil(this.destroyed))
+            .subscribe(() => {
+            this.resetOptions();
+            // Check to see if we need to update our tab index
+            this.updateTabIndex();
+        });
+        this.updateScrollSize();
+    }
+    ngOnDestroy() {
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
+    focus() {
+        if (this.options.length === 0) {
+            return;
+        }
+        this.keyManager.setFirstItemActive();
+    }
+    blur() {
+        if (!this.hasFocusedOption()) {
+            this.keyManager.setActiveItem(-1);
+        }
+        this.onTouched();
+        this.changeDetectorRef.markForCheck();
+    }
+    selectAll() {
+        this.options.forEach((option) => option.setSelected(true));
+        this.reportValueChange();
+    }
+    deselectAll() {
+        this.options.forEach((option) => option.setSelected(false));
+        this.reportValueChange();
+    }
+    updateScrollSize() {
+        if (this.horizontal || !this.options.first) {
+            return;
+        }
+        this.keyManager.withScrollSize(Math.floor(this.getHeight() / this.options.first.getHeight()));
+    }
+    setSelectedOptionsByClick(option, shiftKey, ctrlKey) {
+        if (shiftKey && this.multiple) {
+            this.selectActiveOptions();
+        }
+        else if (ctrlKey) {
+            if (!this.canDeselectLast(option)) {
+                return;
+            }
+            this.selectionModel.toggle(option);
+        }
+        else if (this.autoSelect) {
+            this.selectionModel.clear();
+            this.selectionModel.toggle(option);
+        }
+        else {
+            this.selectionModel.toggle(option);
+        }
+        this.emitChangeEvent(option);
+        this.reportValueChange();
+    }
+    setSelectedOptionsByKey(option, shiftKey, ctrlKey) {
+        if (shiftKey && this.multiple) {
+            this.selectActiveOptions();
+        }
+        else if (ctrlKey) {
+            if (!this.canDeselectLast(option)) {
+                return;
+            }
+        }
+        else if (this.autoSelect) {
+            this.options.forEach((item) => item.setSelected(false));
+            option.setSelected(true);
+        }
+        if (shiftKey || ctrlKey || this.autoSelect) {
+            this.emitChangeEvent(option);
+            this.reportValueChange();
+        }
+    }
+    selectActiveOptions() {
+        const options = this.options.toArray();
+        let fromIndex = this.keyManager.previousActiveItemIndex;
+        let toIndex = this.keyManager.previousActiveItemIndex = this.keyManager.activeItemIndex;
+        const selectedOptionState = options[fromIndex].selected;
+        if (toIndex === fromIndex) {
+            return;
+        }
+        if (fromIndex > toIndex) {
+            [fromIndex, toIndex] = [toIndex, fromIndex];
+        }
+        options
+            .slice(fromIndex, toIndex + 1)
+            .filter((item) => !item.disabled)
+            .forEach((renderedOption) => {
+            if (!selectedOptionState && this.noUnselectLast && this.selectionModel.selected.length === 1) {
+                return;
+            }
+            renderedOption.setSelected(selectedOptionState);
+        });
+    }
+    // Implemented as part of ControlValueAccessor.
+    writeValue(values) {
+        this._value = values;
+        if (this.options) {
+            this.setOptionsFromValues(values || []);
+        }
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Implemented as a part of ControlValueAccessor.
+    setDisabledState(isDisabled) {
+        if (this.options) {
+            this.options.forEach((option) => option.disabled = isDisabled);
+        }
+    }
+    getSelectedOptionValues() {
+        return this.options.filter((option) => option.selected).map((option) => option.value);
+    }
+    // Toggles the selected state of the currently focused option.
+    toggleFocusedOption() {
+        const focusedIndex = this.keyManager.activeItemIndex;
+        if (focusedIndex != null && this.isValidIndex(focusedIndex)) {
+            const focusedOption = this.options.toArray()[focusedIndex];
+            if (focusedOption && this.canDeselectLast(focusedOption)) {
+                focusedOption.toggle();
+                // Emit a change event because the focused option changed its state through user interaction.
+                this.emitChangeEvent(focusedOption);
+                this.reportValueChange();
+            }
+        }
+    }
+    canDeselectLast(listOption) {
+        return !(this.noUnselectLast && this.selectionModel.selected.length === 1 && listOption.selected);
+    }
+    getHeight() {
+        const clientRects = this.elementRef.nativeElement.getClientRects();
+        return clientRects.length ? clientRects[0].height : 0;
+    }
+    // Removes an option from the selection list and updates the active item.
+    removeOptionFromList(option) {
+        if (!option.hasFocus) {
+            return;
+        }
+        const optionIndex = this.getOptionIndex(option);
+        // Check whether the option is the last item
+        if (optionIndex > 0) {
+            this.keyManager.setPreviousItemActive();
+        }
+        else if (optionIndex === 0 && this.options.length > 1) {
+            this.keyManager.setNextItemActive();
+        }
+    }
+    onKeyDown(event) {
+        // tslint:disable-next-line: deprecation
+        const keyCode = event.keyCode;
+        if ([SPACE, ENTER, LEFT_ARROW, RIGHT_ARROW].includes(keyCode) || isVerticalMovement(event)) {
+            event.preventDefault();
+        }
+        if (this.multiple && isSelectAll(event)) {
+            this.selectAllOptions();
+            event.preventDefault();
+            return;
+        }
+        else if (isCopy(event)) {
+            this.copyActiveOption();
+            event.preventDefault();
+            return;
+        }
+        else if ([SPACE, ENTER].includes(keyCode)) {
+            this.toggleFocusedOption();
+            return;
+        }
+        else if (keyCode === TAB) {
+            this.keyManager.tabOut.next();
+            return;
+        }
+        else if (keyCode === DOWN_ARROW) {
+            this.keyManager.setNextItemActive();
+        }
+        else if (keyCode === UP_ARROW) {
+            this.keyManager.setPreviousItemActive();
+        }
+        else if (keyCode === HOME) {
+            this.keyManager.setFirstItemActive();
+        }
+        else if (keyCode === END) {
+            this.keyManager.setLastItemActive();
+        }
+        else if (keyCode === PAGE_UP) {
+            this.keyManager.setPreviousPageItemActive();
+        }
+        else if (keyCode === PAGE_DOWN) {
+            this.keyManager.setNextPageItemActive();
+        }
+        if (this.keyManager.activeItem && isVerticalMovement(event)) {
+            this.setSelectedOptionsByKey(this.keyManager.activeItem, hasModifierKey(event, 'shiftKey'), hasModifierKey(event, 'ctrlKey'));
+        }
+    }
+    // Reports a value change to the ControlValueAccessor
+    reportValueChange() {
+        if (this.options) {
+            const value = this.getSelectedOptionValues();
+            this.onChange(value);
+            this._value = value;
+        }
+    }
+    // Emits a change event if the selected state of an option changed.
+    emitChangeEvent(option) {
+        this.selectionChange.emit(new KbqListSelectionChange(this, option));
+    }
+    updateTabIndex() {
+        this._tabIndex = this.userTabIndex || (this.options.length === 0 ? -1 : 0);
+    }
+    onCopyDefaultHandler() {
+        this.clipboard?.copy(this.keyManager.activeItem.value);
+    }
+    resetOptions() {
+        this.dropSubscriptions();
+        this.listenToOptionsFocus();
+    }
+    dropSubscriptions() {
+        if (this.optionFocusSubscription) {
+            this.optionFocusSubscription.unsubscribe();
+            this.optionFocusSubscription = null;
+        }
+        if (this.optionBlurSubscription) {
+            this.optionBlurSubscription.unsubscribe();
+            this.optionBlurSubscription = null;
+        }
+    }
+    listenToOptionsFocus() {
+        this.optionFocusSubscription = this.optionFocusChanges
+            .subscribe((event) => {
+            const index = this.options.toArray().indexOf(event.option);
+            if (this.isValidIndex(index)) {
+                this.keyManager.updateActiveItem(index);
+            }
+        });
+        this.optionBlurSubscription = this.optionBlurChanges
+            .subscribe(() => this.blur());
+    }
+    /** Checks whether any of the options is focused. */
+    hasFocusedOption() {
+        return this.options.some((option) => option.hasFocus);
+    }
+    // Returns the option with the specified value.
+    getOptionByValue(value) {
+        return this.options.find((option) => option.value === value);
+    }
+    // Sets the selected options based on the specified values.
+    setOptionsFromValues(values) {
+        this.options.forEach((option) => option.setSelected(false));
+        values
+            .map((value) => this.getOptionByValue(value))
+            .filter(Boolean)
+            .forEach((option) => option.setSelected(true));
+    }
+    /**
+     * Utility to ensure all indexes are valid.
+     * @param index The index to be checked.
+     * @returns True if the index is valid for our list of options.
+     */
+    isValidIndex(index) {
+        return index >= 0 && index < this.options.length;
+    }
+    // Returns the index of the specified list option.
+    getOptionIndex(option) {
+        return this.options.toArray().indexOf(option);
+    }
+    selectAllOptions() {
+        const optionsToSelect = this.options
+            .filter((option) => !option.disabled);
+        optionsToSelect
+            .forEach((option) => option.setSelected(true));
+        this.onSelectAll.emit(new KbqListSelectAllEvent(this, optionsToSelect));
+    }
+    copyActiveOption() {
+        if (!this.keyManager.activeItem) {
+            return;
+        }
+        const option = this.keyManager.activeItem;
+        option.preventBlur = true;
+        if (this.onCopy.observers.length) {
+            this.onCopy.emit(new KbqListCopyEvent(this, option));
+        }
+        else {
+            this.onCopyDefaultHandler();
+        }
+        option.preventBlur = false;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqListSelection, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: 'multiple', attribute: true }, { token: i1.Clipboard, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqListSelection, selector: "kbq-list-selection", inputs: { disabled: "disabled", autoSelect: "autoSelect", noUnselectLast: "noUnselectLast", horizontal: "horizontal", tabIndex: "tabIndex", compareWith: "compareWith" }, outputs: { onSelectAll: "onSelectAll", onCopy: "onCopy", selectionChange: "selectionChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "window:resize": "updateScrollSize()" }, properties: { "attr.tabindex": "-1", "attr.disabled": "disabled || null" }, classAttribute: "kbq-list-selection" }, providers: [KBQ_SELECTION_LIST_VALUE_ACCESSOR], queries: [{ propertyName: "options", predicate: i0.forwardRef(function () { return KbqListOption; }), descendants: true }], exportAs: ["mcListSelection"], usesInheritance: true, ngImport: i0, template: `
+        <div [attr.tabindex]="tabIndex"
+             (focus)="focus()"
+             (blur)="blur()">
+            <ng-content></ng-content>
+        </div>`, isInline: true, styles: [".kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-list,.kbq-list-selection{display:block;outline:none}.kbq-list-item,.kbq-list-option{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;position:relative;display:flex;align-items:center;box-sizing:border-box;height:var(--kbq-list-size-item-height, 32px);border:2px solid transparent;padding-left:var(--kbq-list-size-horizontal-padding, 12px)}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;padding-right:var(--kbq-list-size-horizontal-padding, 12px);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list-item .kbq-list-text>*,.kbq-list-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-list-item .kbq-list-text:empty,.kbq-list-option .kbq-list-text:empty{display:none}.kbq-list-item .kbq-divider,.kbq-list-option .kbq-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .kbq-list-item .kbq-divider,[dir=rtl] .kbq-list-option .kbq-divider{margin-left:auto;margin-right:0}.kbq-list-item .kbq-divider.kbq-divider_inset,.kbq-list-option .kbq-divider.kbq-divider_inset{position:absolute}.kbq-list-item.kbq-progress:after,.kbq-list-option.kbq-progress:after{inset:-2px}.kbq-list-item .kbq-pseudo-checkbox,.kbq-list-item .kbq-icon,.kbq-list-option .kbq-pseudo-checkbox,.kbq-list-option .kbq-icon{margin-right:var(--kbq-list-size-icon-right-margin, 8px)}.kbq-list-item .kbq-option-action,.kbq-list-option .kbq-option-action{display:none}.kbq-list-item:not([disabled]):hover .kbq-option-action,.kbq-list-item:not([disabled]).kbq-focused .kbq-option-action,.kbq-list-item:not([disabled]).kbq-action-button-focused .kbq-option-action,.kbq-list-option:not([disabled]):hover .kbq-option-action,.kbq-list-option:not([disabled]).kbq-focused .kbq-option-action,.kbq-list-option:not([disabled]).kbq-action-button-focused .kbq-option-action{display:flex}.kbq-list-option:not([disabled]):not(.kbq-disabled){cursor:pointer}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqListSelection, decorators: [{
+            type: Component,
+            args: [{ exportAs: 'mcListSelection', selector: 'kbq-list-selection', template: `
+        <div [attr.tabindex]="tabIndex"
+             (focus)="focus()"
+             (blur)="blur()">
+            <ng-content></ng-content>
+        </div>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['disabled'], host: {
+                        class: 'kbq-list-selection',
+                        '[attr.tabindex]': '-1',
+                        '[attr.disabled]': 'disabled || null',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(window:resize)': 'updateScrollSize()'
+                    }, providers: [KBQ_SELECTION_LIST_VALUE_ACCESSOR], preserveWhitespaces: false, styles: [".kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-list,.kbq-list-selection{display:block;outline:none}.kbq-list-item,.kbq-list-option{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;position:relative;display:flex;align-items:center;box-sizing:border-box;height:var(--kbq-list-size-item-height, 32px);border:2px solid transparent;padding-left:var(--kbq-list-size-horizontal-padding, 12px)}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;padding-right:var(--kbq-list-size-horizontal-padding, 12px);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list-item .kbq-list-text>*,.kbq-list-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-list-item .kbq-list-text:empty,.kbq-list-option .kbq-list-text:empty{display:none}.kbq-list-item .kbq-divider,.kbq-list-option .kbq-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .kbq-list-item .kbq-divider,[dir=rtl] .kbq-list-option .kbq-divider{margin-left:auto;margin-right:0}.kbq-list-item .kbq-divider.kbq-divider_inset,.kbq-list-option .kbq-divider.kbq-divider_inset{position:absolute}.kbq-list-item.kbq-progress:after,.kbq-list-option.kbq-progress:after{inset:-2px}.kbq-list-item .kbq-pseudo-checkbox,.kbq-list-item .kbq-icon,.kbq-list-option .kbq-pseudo-checkbox,.kbq-list-option .kbq-icon{margin-right:var(--kbq-list-size-icon-right-margin, 8px)}.kbq-list-item .kbq-option-action,.kbq-list-option .kbq-option-action{display:none}.kbq-list-item:not([disabled]):hover .kbq-option-action,.kbq-list-item:not([disabled]).kbq-focused .kbq-option-action,.kbq-list-item:not([disabled]).kbq-action-button-focused .kbq-option-action,.kbq-list-option:not([disabled]):hover .kbq-option-action,.kbq-list-option:not([disabled]).kbq-focused .kbq-option-action,.kbq-list-option:not([disabled]).kbq-action-button-focused .kbq-option-action{display:flex}.kbq-list-option:not([disabled]):not(.kbq-disabled){cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.MultipleMode, decorators: [{
+                    type: Attribute,
+                    args: ['multiple']
+                }] }, { type: i1.Clipboard, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { options: [{
+                type: ContentChildren,
+                args: [forwardRef(() => KbqListOption), { descendants: true }]
+            }], onSelectAll: [{
+                type: Output
+            }], onCopy: [{
+                type: Output
+            }], autoSelect: [{
+                type: Input
+            }], noUnselectLast: [{
+                type: Input
+            }], horizontal: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], compareWith: [{
+                type: Input
+            }] } });
+/**
+ * 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.
+ */
+class KbqListOption {
+    get value() { return this._value; }
+    set value(newValue) {
+        if (this.selected && newValue !== this.value && this.inputsInitialized) {
+            this.selected = false;
+        }
+        this._value = newValue;
+    }
+    get disabled() {
+        const listSelectionDisabled = this.listSelection && this.listSelection.disabled;
+        const groupDisabled = this.group && this.group.disabled;
+        return listSelectionDisabled || groupDisabled || this._disabled;
+    }
+    set disabled(value) {
+        const newValue = toBoolean(value);
+        if (newValue !== this._disabled) {
+            this._disabled = newValue;
+            this.changeDetector.markForCheck();
+        }
+    }
+    get showCheckbox() {
+        return this._showCheckbox !== undefined ? this._showCheckbox : this.listSelection.showCheckbox;
+    }
+    set showCheckbox(value) {
+        this._showCheckbox = coerceBooleanProperty(value);
+    }
+    get selected() {
+        return this.listSelection.selectionModel?.isSelected(this) || false;
+    }
+    set selected(value) {
+        const isSelected = toBoolean(value);
+        if (isSelected !== this._selected) {
+            this.setSelected(isSelected);
+        }
+    }
+    get tabIndex() {
+        return this.disabled ? null : -1;
+    }
+    constructor(elementRef, changeDetector, ngZone, listSelection, group) {
+        this.elementRef = elementRef;
+        this.changeDetector = changeDetector;
+        this.ngZone = ngZone;
+        this.listSelection = listSelection;
+        this.group = group;
+        this.hasFocus = false;
+        this.preventBlur = false;
+        this.onFocus = new Subject();
+        this.onBlur = new Subject();
+        /**
+         * This is set to true after the first OnChanges cycle so we don't clear the value of `selected`
+         * in the first cycle.
+         */
+        this.inputsInitialized = false;
+        this._disabled = false;
+        this._selected = false;
+    }
+    ngOnInit() {
+        const list = this.listSelection;
+        if (list._value && list._value.some((value) => list.compareWith(value, this._value))) {
+            this.setSelected(true);
+        }
+        const wasSelected = this._selected;
+        // List options that are selected at initialization can't be reported properly to the form
+        // control. This is because it takes some time until the selection-list knows about all
+        // available options. Also it can happen that the ControlValueAccessor has an initial value
+        // that should be used instead. Deferring the value change report to the next tick ensures
+        // that the form control value is not being overwritten.
+        Promise.resolve().then(() => {
+            if (this._selected || wasSelected) {
+                this.selected = true;
+                this.changeDetector.markForCheck();
+            }
+        });
+        this.inputsInitialized = true;
+    }
+    ngOnDestroy() {
+        if (this.selected) {
+            // We have to delay this until the next tick in order
+            // to avoid changed after checked errors.
+            Promise.resolve().then(() => this.selected = false);
+        }
+        this.listSelection.removeOptionFromList(this);
+    }
+    toggle() {
+        this.selected = !this.selected;
+    }
+    getLabel() {
+        return this.text ? this.text.nativeElement.textContent : '';
+    }
+    setSelected(selected) {
+        if (this._selected === selected || !this.listSelection.selectionModel) {
+            return;
+        }
+        this._selected = selected;
+        if (selected) {
+            this.listSelection.selectionModel.select(this);
+        }
+        else {
+            this.listSelection.selectionModel.deselect(this);
+        }
+        this.changeDetector.markForCheck();
+    }
+    getHeight() {
+        const clientRects = this.elementRef.nativeElement.getClientRects();
+        return clientRects.length ? clientRects[0].height : 0;
+    }
+    handleClick($event) {
+        if (this.disabled) {
+            return;
+        }
+        this.listSelection.setSelectedOptionsByClick(this, hasModifierKey($event, 'shiftKey'), hasModifierKey($event, 'ctrlKey'));
+    }
+    onKeydown($event) {
+        if (!this.actionButton) {
+            return;
+        }
+        if ($event.keyCode === TAB && !$event.shiftKey && !this.actionButton.hasFocus) {
+            this.actionButton.focus();
+            $event.preventDefault();
+        }
+    }
+    focus() {
+        if (this.disabled || this.hasFocus || this.actionButton?.hasFocus) {
+            return;
+        }
+        this.elementRef.nativeElement.focus();
+        this.onFocus.next({ option: this });
+        Promise.resolve().then(() => {
+            this.hasFocus = true;
+            this.changeDetector.markForCheck();
+        });
+    }
+    blur() {
+        if (this.preventBlur) {
+            return;
+        }
+        // When animations are enabled, Angular may end up removing the option from the DOM a little
+        // earlier than usual, causing it to be blurred and throwing off the logic in the list
+        // that moves focus not the next item. To work around the issue, we defer marking the option
+        // as not focused until the next time the zone stabilizes.
+        this.ngZone.onStable
+            .asObservable()
+            .pipe(take(1))
+            .subscribe(() => {
+            this.ngZone.run(() => {
+                this.hasFocus = false;
+                if (this.actionButton?.hasFocus) {
+                    return;
+                }
+                this.onBlur.next({ option: this });
+            });
+        });
+    }
+    getHostElement() {
+        return this.elementRef.nativeElement;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqListOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: forwardRef(() => KbqListSelection) }, { token: i2.KbqOptgroup, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqListOption, selector: "kbq-list-option", inputs: { checkboxPosition: "checkboxPosition", value: "value", disabled: "disabled", showCheckbox: "showCheckbox", selected: "selected" }, host: { listeners: { "focusin": "focus()", "blur": "blur()", "click": "handleClick($event)", "keydown": "onKeydown($event)" }, properties: { "class.kbq-selected": "selected", "class.kbq-disabled": "disabled", "class.kbq-focused": "hasFocus", "class.kbq-action-button-focused": "actionButton?.active", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "kbq-list-option" }, providers: [
+            { provide: KBQ_OPTION_ACTION_PARENT, useExisting: KbqListOption },
+            { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqListOption }
+        ], queries: [{ propertyName: "actionButton", first: true, predicate: KbqOptionActionComponent, descendants: true }, { propertyName: "tooltipTrigger", first: true, predicate: KbqTooltipTrigger, descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: KbqDropdownTrigger, descendants: true }], viewQueries: [{ propertyName: "text", first: true, predicate: ["text"], descendants: true }, { propertyName: "textElement", first: true, predicate: ["mcTitleText"], descendants: true }], exportAs: ["mcListOption"], ngImport: i0, template: "<kbq-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [state]=\"selected ? 'checked' : 'unchecked'\"\n    [disabled]=\"disabled\">\n</kbq-pseudo-checkbox>\n\n<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<div class=\"kbq-list-text\" #text #mcTitleText>\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"kbq-option-action\"></ng-content>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["color", "big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqListOption, decorators: [{
+            type: Component,
+            args: [{ exportAs: 'mcListOption', selector: 'kbq-list-option', host: {
+                        class: 'kbq-list-option',
+                        '[class.kbq-selected]': 'selected',
+                        '[class.kbq-disabled]': 'disabled',
+                        '[class.kbq-focused]': 'hasFocus',
+                        '[class.kbq-action-button-focused]': 'actionButton?.active',
+                        '[attr.tabindex]': 'tabIndex',
+                        '[attr.disabled]': 'disabled || null',
+                        '(focusin)': 'focus()',
+                        '(blur)': 'blur()',
+                        '(click)': 'handleClick($event)',
+                        '(keydown)': 'onKeydown($event)'
+                    }, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: KBQ_OPTION_ACTION_PARENT, useExisting: KbqListOption },
+                        { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqListOption }
+                    ], template: "<kbq-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [state]=\"selected ? 'checked' : 'unchecked'\"\n    [disabled]=\"disabled\">\n</kbq-pseudo-checkbox>\n\n<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<div class=\"kbq-list-text\" #text #mcTitleText>\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"kbq-option-action\"></ng-content>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: KbqListSelection, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => KbqListSelection)]
+                }] }, { type: i2.KbqOptgroup, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { actionButton: [{
+                type: ContentChild,
+                args: [KbqOptionActionComponent]
+            }], tooltipTrigger: [{
+                type: ContentChild,
+                args: [KbqTooltipTrigger]
+            }], dropdownTrigger: [{
+                type: ContentChild,
+                args: [KbqDropdownTrigger]
+            }], text: [{
+                type: ViewChild,
+                args: ['text', { static: false }]
+            }], textElement: [{
+                type: ViewChild,
+                args: ['mcTitleText', { static: false }]
+            }], checkboxPosition: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], showCheckbox: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }] } });
+
+// todo пока не делаем, перенесено из материала, но у нас в доках таких простых списков нет.
+class KbqList {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqList, selector: "kbq-list", host: { classAttribute: "kbq-list" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-list,.kbq-list-selection{display:block;outline:none}.kbq-list-item,.kbq-list-option{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;position:relative;display:flex;align-items:center;box-sizing:border-box;height:var(--kbq-list-size-item-height, 32px);border:2px solid transparent;padding-left:var(--kbq-list-size-horizontal-padding, 12px)}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;padding-right:var(--kbq-list-size-horizontal-padding, 12px);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list-item .kbq-list-text>*,.kbq-list-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-list-item .kbq-list-text:empty,.kbq-list-option .kbq-list-text:empty{display:none}.kbq-list-item .kbq-divider,.kbq-list-option .kbq-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .kbq-list-item .kbq-divider,[dir=rtl] .kbq-list-option .kbq-divider{margin-left:auto;margin-right:0}.kbq-list-item .kbq-divider.kbq-divider_inset,.kbq-list-option .kbq-divider.kbq-divider_inset{position:absolute}.kbq-list-item.kbq-progress:after,.kbq-list-option.kbq-progress:after{inset:-2px}.kbq-list-item .kbq-pseudo-checkbox,.kbq-list-item .kbq-icon,.kbq-list-option .kbq-pseudo-checkbox,.kbq-list-option .kbq-icon{margin-right:var(--kbq-list-size-icon-right-margin, 8px)}.kbq-list-item .kbq-option-action,.kbq-list-option .kbq-option-action{display:none}.kbq-list-item:not([disabled]):hover .kbq-option-action,.kbq-list-item:not([disabled]).kbq-focused .kbq-option-action,.kbq-list-item:not([disabled]).kbq-action-button-focused .kbq-option-action,.kbq-list-option:not([disabled]):hover .kbq-option-action,.kbq-list-option:not([disabled]).kbq-focused .kbq-option-action,.kbq-list-option:not([disabled]).kbq-action-button-focused .kbq-option-action{display:flex}.kbq-list-option:not([disabled]):not(.kbq-disabled){cursor:pointer}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqList, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-list', host: { class: 'kbq-list' }, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-list,.kbq-list-selection{display:block;outline:none}.kbq-list-item,.kbq-list-option{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;position:relative;display:flex;align-items:center;box-sizing:border-box;height:var(--kbq-list-size-item-height, 32px);border:2px solid transparent;padding-left:var(--kbq-list-size-horizontal-padding, 12px)}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;padding-right:var(--kbq-list-size-horizontal-padding, 12px);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list-item .kbq-list-text>*,.kbq-list-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-list-item .kbq-list-text:empty,.kbq-list-option .kbq-list-text:empty{display:none}.kbq-list-item .kbq-divider,.kbq-list-option .kbq-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .kbq-list-item .kbq-divider,[dir=rtl] .kbq-list-option .kbq-divider{margin-left:auto;margin-right:0}.kbq-list-item .kbq-divider.kbq-divider_inset,.kbq-list-option .kbq-divider.kbq-divider_inset{position:absolute}.kbq-list-item.kbq-progress:after,.kbq-list-option.kbq-progress:after{inset:-2px}.kbq-list-item .kbq-pseudo-checkbox,.kbq-list-item .kbq-icon,.kbq-list-option .kbq-pseudo-checkbox,.kbq-list-option .kbq-icon{margin-right:var(--kbq-list-size-icon-right-margin, 8px)}.kbq-list-item .kbq-option-action,.kbq-list-option .kbq-option-action{display:none}.kbq-list-item:not([disabled]):hover .kbq-option-action,.kbq-list-item:not([disabled]).kbq-focused .kbq-option-action,.kbq-list-item:not([disabled]).kbq-action-button-focused .kbq-option-action,.kbq-list-option:not([disabled]):hover .kbq-option-action,.kbq-list-option:not([disabled]).kbq-focused .kbq-option-action,.kbq-list-option:not([disabled]).kbq-action-button-focused .kbq-option-action{display:flex}.kbq-list-option:not([disabled]):not(.kbq-disabled){cursor:pointer}\n"] }]
+        }] });
+class KbqListItem {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngAfterContentInit() {
+        // tslint:disable-next-line:no-unused-expression
+        new KbqLineSetter(this.lines, this.elementRef);
+    }
+    handleFocus() {
+        this.elementRef.nativeElement.classList.add('kbq-focused');
+    }
+    handleBlur() {
+        this.elementRef.nativeElement.classList.remove('kbq-focused');
+    }
+    getHostElement() {
+        return this.elementRef.nativeElement;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqListItem, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqListItem, selector: "kbq-list-item, a[kbq-list-item]", host: { listeners: { "focus": "handleFocus()", "blur": "handleBlur()" }, classAttribute: "kbq-list-item" }, queries: [{ propertyName: "lines", predicate: KbqLine }], ngImport: i0, template: "<ng-content select=\"[kbq-list-icon], [mcListIcon]\"></ng-content>\n\n<div class=\"kbq-list-text\">\n    <ng-content select=\"[kbq-line], [mcLine]\"></ng-content>\n</div>\n\n<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqListItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-list-item, a[kbq-list-item]', host: {
+                        class: 'kbq-list-item',
+                        '(focus)': 'handleFocus()',
+                        '(blur)': 'handleBlur()'
+                    }, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[kbq-list-icon], [mcListIcon]\"></ng-content>\n\n<div class=\"kbq-list-text\">\n    <ng-content select=\"[kbq-line], [mcLine]\"></ng-content>\n</div>\n\n<ng-content></ng-content>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { lines: [{
+                type: ContentChildren,
+                args: [KbqLine]
+            }] } });
+
+class KbqListModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: KbqListModule, declarations: [KbqList,
+            KbqListSelection,
+            KbqListItem,
+            KbqListOption], imports: [CommonModule,
+            A11yModule,
+            KbqPseudoCheckboxModule,
+            KbqLineModule,
+            KbqOptionModule], exports: [KbqList,
+            KbqListSelection,
+            KbqListItem,
+            KbqListOption,
+            KbqOptionModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqListModule, imports: [CommonModule,
+            A11yModule,
+            KbqPseudoCheckboxModule,
+            KbqLineModule,
+            KbqOptionModule, KbqOptionModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        A11yModule,
+                        KbqPseudoCheckboxModule,
+                        KbqLineModule,
+                        KbqOptionModule
+                    ],
+                    exports: [
+                        KbqList,
+                        KbqListSelection,
+                        KbqListItem,
+                        KbqListOption,
+                        KbqOptionModule
+                    ],
+                    declarations: [
+                        KbqList,
+                        KbqListSelection,
+                        KbqListItem,
+                        KbqListOption
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KBQ_SELECTION_LIST_VALUE_ACCESSOR, KbqList, KbqListCopyEvent, KbqListItem, KbqListModule, KbqListOption, KbqListSelectAllEvent, KbqListSelection, KbqListSelectionBase, KbqListSelectionChange, KbqListSelectionMixinBase };
+//# sourceMappingURL=koobiq-components-list.mjs.map