import { ContentObserver } from '@angular/cdk/observers';
import { SharedResizeObserver } from '@angular/cdk/observers/private';
import * as i0 from '@angular/core';
import { inject, Directive, InjectionToken, DestroyRef, EventEmitter, isDevMode, booleanAttribute, numberAttribute, ElementRef, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Host, Self, Inject, ViewChild, ContentChild, ViewChildren, ContentChildren, Input, Output, NgModule } from '@angular/core';
import * as i1 from '@koobiq/components/core';
import { KbqAbstractSelect, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, KbqComponentColors, KBQ_WINDOW, defaultOffsetY, isUndefined, getKbqSelectNonArrayValueError, KbqVirtualOption, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_POPUP, KbqSelectFooter, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KbqOption, KbqOptgroup, kbqSelectAnimations, KbqOptionModule, KbqSelectSearchEmptyResult, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER } from '@koobiq/components/core';
import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
import * as i3 from '@angular/cdk/bidi';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { SelectionModel } from '@angular/cdk/collections';
import * as i2 from '@angular/cdk/overlay';
import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
import { Platform } from '@angular/cdk/platform';
import { CdkVirtualForOf } from '@angular/cdk/scrolling';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i4 from '@angular/forms';
import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, ESCAPE, TAB, HOME, END, PAGE_UP, PAGE_DOWN, A, BACKSPACE, DELETE } from '@koobiq/cdk/keycodes';
import * as i5 from '@koobiq/components/form-field';
import { KbqFormFieldControl, KbqFormFieldModule } from '@koobiq/components/form-field';
import * as i7 from '@koobiq/components/tags';
import { KbqTag, KbqTagsModule } from '@koobiq/components/tags';
import { SizeXxs } from '@koobiq/design-tokens';
import { Subject, defer, merge, Subscription, BehaviorSubject } from 'rxjs';
import { switchMap, take, filter, map, distinctUntilChanged, startWith, delay, takeUntil } from 'rxjs/operators';
import * as i6 from '@koobiq/components/icon';
import { KbqIconModule } from '@koobiq/components/icon';
import * as i8 from '@angular/common';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import * as i9 from '@angular/cdk/a11y';
import { A11yModule } from '@angular/cdk/a11y';

class KbqOptionTooltip extends KbqTooltipTrigger {
    get textElement() {
        return this.option.textElement.nativeElement;
    }
    get isOverflown() {
        return this.textElement.clientWidth < this.textElement.scrollWidth;
    }
    constructor(option) {
        super();
        this.option = option;
        this.resizeObserver = inject(SharedResizeObserver);
        this.resizeObserverSubscription = null;
        this.contentObserver = inject(ContentObserver);
        this.contentObserverSubscription = null;
    }
    ngAfterViewInit() {
        this.content = this.option.viewValue;
        this.contentObserverSubscription = this.contentObserver
            .observe(this.textElement)
            .subscribe(() => (this.content = this.option.viewValue));
    }
    ngOnDestroy() {
        super.ngOnDestroy();
        this.resizeObserverSubscription?.unsubscribe();
        this.contentObserverSubscription?.unsubscribe();
    }
    onMouseEnter() {
        this.resizeObserverSubscription = this.resizeObserver
            .observe(this.textElement)
            .subscribe(() => (this.disabled = !this.isOverflown));
        this.disabled = !this.isOverflown;
    }
    onMouseLeave() {
        this.resizeObserverSubscription?.unsubscribe();
        this.disabled = true;
    }
    onFocus() {
        this.disabled = !this.isOverflown;
        if (!this.disabled) {
            this.show();
        }
    }
    onBlur() {
        this.disabled = true;
        this.hide();
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqOptionTooltip, deps: [{ token: i1.KbqOption }], target: i0.ɵɵFactoryTarget.Directive }); }
    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqOptionTooltip, selector: "kbq-option", host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqOptionTooltip, decorators: [{
            type: Directive,
            args: [{
                    selector: 'kbq-option',
                    host: {
                        '(mouseenter)': 'onMouseEnter()',
                        '(mouseleave)': 'onMouseLeave()',
                        '(focus)': 'onFocus()',
                        '(blur)': 'onBlur()'
                    }
                }]
        }], ctorParameters: () => [{ type: i1.KbqOption }] });

let nextUniqueId = 0;
/** Change event object that is emitted when the select value has changed. */
class KbqSelectChange {
    constructor(source, value) {
        this.source = source;
        this.value = value;
    }
}
/** Injection token that can be used to provide the default options for the `kbq-select`. */
const KBQ_SELECT_OPTIONS = new InjectionToken('KBQ_SELECT_OPTIONS');
/** Utility provider for `KBQ_SELECT_OPTIONS`. */
const kbqSelectOptionsProvider = (options) => {
    return {
        provide: KBQ_SELECT_OPTIONS,
        useValue: options
    };
};
class KbqSelect extends KbqAbstractSelect {
    /**
     * Controls when the search functionality is displayed based on the number of available options.
     *
     * Automatically enables search hiding if value provided, even if `defaultOptions.minOptionsThreshold` is provided.
     * @default undefined
     */
    set searchMinOptionsThreshold(value) {
        this._searchMinOptionsThreshold =
            this.resolveSearchMinOptionsThreshold(value) ??
                this.resolveSearchMinOptionsThreshold(this.defaultOptions?.searchMinOptionsThreshold);
    }
    get searchMinOptionsThreshold() {
        return this._searchMinOptionsThreshold;
    }
    get hasBackdrop() {
        return this._hasBackdrop;
    }
    set hasBackdrop(value) {
        this._hasBackdrop = coerceBooleanProperty(value);
    }
    get placeholder() {
        return this._placeholder;
    }
    set placeholder(value) {
        this._placeholder = value;
        this.stateChanges.next();
    }
    get required() {
        return this._required;
    }
    set required(value) {
        this._required = coerceBooleanProperty(value);
        this.stateChanges.next();
    }
    get multiple() {
        return this._multiple;
    }
    set multiple(value) {
        if (this.selectionModel) {
            throw getKbqSelectDynamicMultipleError();
        }
        this._multiple = value;
    }
    /**
     * Function to compare the option values with the selected values. The first argument
     * is a value from an option. The second is a value from the selection. A boolean
     * should be returned.
     */
    get compareWith() {
        return this._compareWith;
    }
    set compareWith(fn) {
        if (typeof fn !== 'function') {
            throw getKbqSelectNonFunctionValueError();
        }
        this._compareWith = fn;
        if (this.selectionModel) {
            // A different comparator means the selection could change.
            this.initializeSelection();
        }
    }
    /**
     * Function for handling the combination Ctrl + A (select all). By default, the internal handler is used.
     */
    get selectAllHandler() {
        return this._selectAllHandler;
    }
    set selectAllHandler(fn) {
        if (typeof fn !== 'function') {
            throw Error('`selectAllHandler` must be a function.');
        }
        this._selectAllHandler = fn;
    }
    /** Value of the select control. */
    get value() {
        return this._value;
    }
    set value(newValue) {
        if (newValue !== this._value) {
            this.writeValue(newValue);
            this._value = newValue;
        }
    }
    get id() {
        return this._id;
    }
    set id(value) {
        this._id = value || this.uid;
        this.stateChanges.next();
    }
    get tabIndex() {
        return this.disabled ? -1 : this._tabIndex;
    }
    set tabIndex(value) {
        this._tabIndex = value;
    }
    get disabled() {
        return this._disabled;
    }
    set disabled(value) {
        if (value !== this.disabled) {
            this._disabled = value;
            if (this.parentFormField) {
                Promise.resolve().then(() => {
                    this._disabled ? this.parentFormField.stopFocusMonitor() : this.parentFormField.runFocusMonitor();
                });
            }
            // Let the parent form field know to run change detection when the disabled state changes.
            this.stateChanges.next();
        }
    }
    /** Whether the select is focused. */
    get focused() {
        return this._focused || this.panelOpen;
    }
    set focused(value) {
        this._focused = value;
    }
    get isEmptySearchResult() {
        return this.search && this.options.filter((option) => option.selectable).length === 0 && !!this.search.value();
    }
    get canShowCleaner() {
        return !this.disabled && this.cleaner && this.selectionModel.hasValue();
    }
    get selected() {
        return this.multiSelection ? this.selectionModel.selected : this.selectionModel.selected[0];
    }
    get triggerValue() {
        if (this.empty) {
            return '';
        }
        return this.selectionModel.selected[0].viewValue;
    }
    get triggerValues() {
        if (this.empty) {
            return [];
        }
        const selectedOptions = this.selectionModel.selected;
        if (this.isRtl()) {
            selectedOptions.reverse();
        }
        return selectedOptions;
    }
    get empty() {
        return !!this.selectionModel?.isEmpty();
    }
    get firstSelected() {
        return this.selectionModel.selected.filter((option) => !option.disabled)[0] || null;
    }
    get firstFiltered() {
        return !this.options.find((option) => option === this.firstSelected);
    }
    /** @docs-private */
    get colorForState() {
        const hasLegacyValidateDirective = this.elementRef.nativeElement.classList.contains('kbq-control_has-validate-directive');
        return (hasLegacyValidateDirective && this.ngControl?.invalid) || this.errorState
            ? KbqComponentColors.Error
            : KbqComponentColors.ContrastFade;
    }
    /** Whether multiple choice is enabled or not. True if multiple or multiline */
    get multiSelection() {
        return this.multiple || this.multiline;
    }
    constructor(_changeDetectorRef, _ngZone, _renderer, defaultErrorStateMatcher, elementRef, overlayContainer, _dir, parentForm, parentFormGroup, parentFormField, ngControl, scrollStrategyFactory, localeService) {
        super();
        this._changeDetectorRef = _changeDetectorRef;
        this._ngZone = _ngZone;
        this._renderer = _renderer;
        this.defaultErrorStateMatcher = defaultErrorStateMatcher;
        this.elementRef = elementRef;
        this.overlayContainer = overlayContainer;
        this._dir = _dir;
        this.parentForm = parentForm;
        this.parentFormGroup = parentFormGroup;
        this.parentFormField = parentFormField;
        this.ngControl = ngControl;
        this.scrollStrategyFactory = scrollStrategyFactory;
        this.localeService = localeService;
        /** @docs-private */
        this.destroyRef = inject(DestroyRef);
        this.isBrowser = inject(Platform).isBrowser;
        this.defaultOptions = inject(KBQ_SELECT_OPTIONS, { optional: true });
        this.window = inject(KBQ_WINDOW);
        /** Whether the component is in an error state. */
        this.errorState = false;
        /**
         * Emits whenever the component state changes and should cause the parent
         * form-field to update. Implemented as part of `KbqFormFieldControl`.
         * @docs-private
         */
        this.stateChanges = new Subject();
        /** A name for this control that can be used by `kbq-form-field`. */
        this.controlType = 'select';
        this.hiddenItems = 0;
        /** The cached font-size of the trigger element. */
        this.triggerFontSize = 0;
        this.previousSelectionModelSelected = [];
        /** The value of the select panel's transform-origin property. */
        this.transformOrigin = 'top';
        /** Emits when the panel element is finished transforming in. */
        this.panelDoneAnimatingStream = new Subject();
        /** Strategy that will be used to handle scrolling while the select panel is open. */
        this.scrollStrategy = this.scrollStrategyFactory();
        /**
         * The y-offset of the overlay panel in relation to the trigger's top start corner.
         * This must be adjusted to align the selected option text over the trigger text.
         * when the panel opens. Will change based on the y-position of the selected option.
         */
        this.offsetY = defaultOffsetY;
        /**
         * This position config ensures that the top "start" corner of the overlay
         * is aligned with the top "start" of the origin by default (overlapping
         * the trigger completely). If the panel cannot fit below the trigger, it
         * will fall back to a position above the trigger.
         */
        this.positions = [
            {
                originX: 'start',
                originY: 'bottom',
                overlayX: 'start',
                overlayY: 'top',
                offsetY: this.offsetY
            },
            {
                originX: 'start',
                originY: 'top',
                overlayX: 'start',
                overlayY: 'bottom',
                offsetY: -this.offsetY
            }
        ];
        this.hiddenItemsText = 'еще {{ number }}';
        this.backdropClass = 'cdk-overlay-transparent-backdrop';
        /**
         * Whether to use a multiline matcher or not. Default is false
         */
        this.multiline = false;
        this._searchMinOptionsThreshold = this.resolveSearchMinOptionsThreshold(this.defaultOptions?.searchMinOptionsThreshold);
        /** Combined stream of all of the child options' change events. */
        this.optionSelectionChanges = defer(() => {
            if (this.options) {
                return merge(...this.options.map((option) => option.onSelectionChange), ...this.selectionModel.selected.map((option) => option.onSelectionChange), this.options.changes.pipe(switchMap((list) => merge(...list.map((option) => option.onSelectionChange)))));
            }
            return this._ngZone.onStable.asObservable().pipe(take(1), switchMap(() => this.optionSelectionChanges));
        });
        /** Event emitted when the select panel has been toggled. */
        this.openedChange = new EventEmitter();
        /** Event emitted when the select has been opened. */
        this.openedStream = this.openedChange.pipe(filter((o) => o), map(() => { }));
        /** Event emitted when the select has been closed. */
        this.closedStream = this.openedChange.pipe(filter((o) => !o), map(() => { }));
        /** Event emitted when the selected value has been changed by the user. */
        this.selectionChange = new EventEmitter();
        /**
         * Event that emits whenever the raw value of the select changes. This is here primarily
         * to facilitate the two-way binding for the `value` input.
         * @docs-private
         */
        this.valueChange = new EventEmitter();
        this._hasBackdrop = false;
        this._required = false;
        this._multiple = false;
        /**
         * Width of the panel. If set to `auto`, the panel will match the trigger width.
         * If set to null or an empty string, the panel will grow to match the longest option's text.
         */
        this.panelWidth = this.defaultOptions?.panelWidth || null;
        /**
         * Minimum width of the panel.
         * If minWidth is larger than window width, it will be ignored.
         */
        this.panelMinWidth = this.defaultOptions?.panelMinWidth ?? 200;
        this._tabIndex = 0;
        this._disabled = false;
        this.panelOpen = false;
        this._focused = false;
        this.closeSubscription = Subscription.EMPTY;
        /** The scroll position of the overlay panel, calculated to center the selected option. */
        this.scrollTop = 0;
        /** Unique id for this input. */
        this.uid = `kbq-select-${nextUniqueId++}`;
        this.visibleChanges = new BehaviorSubject(false);
        /** `View -> model callback called when value changes` */
        this.onChange = () => { };
        /** `View -> model callback called when select has been touched` */
        this.onTouched = () => { };
        this.updateLocaleParams = () => {
            this.hiddenItemsText = this.localeService?.getParams('select').hiddenItemsText;
            this._changeDetectorRef.markForCheck();
        };
        /** Comparison function to specify which option is displayed. Defaults to object equality. */
        this._compareWith = (o1, o2) => o1 === o2;
        this.localeService?.changes.subscribe(this.updateLocaleParams);
        if (this.ngControl) {
            // Note: we provide the value accessor through here, instead of
            // the `providers` to avoid running into a circular import.
            this.ngControl.valueAccessor = this;
        }
        // Force setter to be called in case id was not specified.
        this.id = this.id;
    }
    ngOnInit() {
        this.selectionModel = new SelectionModel(this.multiSelection);
        this.stateChanges.next();
        // We need `distinctUntilChanged` here, because some browsers will
        // fire the animation end event twice for the same animation. See:
        // https://github.com/angular/angular/issues/24084
        this.panelDoneAnimatingStream
            .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
            .subscribe(() => {
            if (this.panelOpen) {
                this.scrollTop = 0;
                if (this.search) {
                    this.search.focus();
                }
                this.openedChange.emit(true);
            }
            else {
                this.openedChange.emit(false);
                this._changeDetectorRef.markForCheck();
            }
        });
        merge(this.optionSelectionChanges, this.visibleChanges)
            .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
            .subscribe(() => setTimeout(() => {
            this.calculateHiddenItems();
            if (this.multiline) {
                this.setOverlayPosition();
            }
        }, 0));
    }
    ngDoCheck() {
        this.visibleChanges.next(this.isVisible());
        if (this.ngControl) {
            this.updateErrorState();
        }
    }
    ngAfterContentInit() {
        this.withVirtualScroll = !!this.cdkVirtualForOf;
        this.initKeyManager();
        this.selectionModel.changed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
            event.added.forEach((option) => option.select());
            event.removed.forEach((option) => option.deselect());
        });
        this.options.changes.pipe(startWith(null), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
            this.resetOptions();
            this.initializeSelection();
        });
        this.search?.changes
            .pipe(takeUntilDestroyed(this.destroyRef), delay(0), filter(() => !this.keyManager.activeItem))
            .subscribe(() => this.keyManager.updateActiveItem(0));
    }
    ngAfterViewInit() {
        this.tags.changes.subscribe(() => {
            setTimeout(() => this.calculateHiddenItems(), 0);
        });
    }
    ngOnDestroy() {
        this.stateChanges.complete();
        this.closeSubscription.unsubscribe();
    }
    updateErrorState() {
        const oldState = this.errorState;
        const parent = this.parentFormGroup || this.parentForm;
        const matcher = this.errorStateMatcher || this.defaultErrorStateMatcher;
        const control = this.ngControl ? this.ngControl.control : null;
        const newState = matcher.isErrorState(control, parent);
        if (newState !== oldState) {
            this.errorState = newState;
            this.stateChanges.next();
        }
    }
    hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) {
        return hiddenItemsText.replace('{{ number }}', hiddenItems.toString());
    }
    clearValue($event) {
        // need to prevent opening
        $event.stopPropagation();
        // need to prevent scrolling
        $event.preventDefault();
        this.selectionModel.clear();
        this.keyManager.setActiveItem(-1);
        this.propagateChanges();
        this.focus();
    }
    resetSearch() {
        if (!this.search) {
            return;
        }
        this.search.reset();
        /*
        todo the incorrect behaviour of keyManager is possible here
        to avoid first item selection (to provide correct options flipping on closed select)
        we should process options update like it is the first options appearance
        */
        this.search.isSearchChanged = false;
    }
    /** Toggles the overlay panel open or closed. */
    toggle() {
        if (this.panelOpen) {
            this.close();
        }
        else {
            this.open();
        }
    }
    /** Opens the overlay panel. */
    open() {
        if (this.disabled || !this.options?.length || this.panelOpen) {
            return;
        }
        // add check for form-field bounding rectangles, since it adds extra padding around the trigger
        this.triggerRect = (this.parentFormField?.getConnectedOverlayOrigin().nativeElement || this.trigger.nativeElement).getBoundingClientRect();
        // Note: The computed font-size will be a string pixel value (e.g. "16px").
        // `parseInt` ignores the trailing 'px' and converts this to a number.
        this.triggerFontSize = parseInt(this.window.getComputedStyle(this.trigger.nativeElement)['font-size']);
        // It's important that we read this as late as possible, because doing so earlier will
        // return a different element since it's based on queries in the form field which may
        // not have run yet. Also this needs to be assigned before we measure the overlay width.
        if (this.parentFormField) {
            this.overlayOrigin = this.parentFormField.getConnectedOverlayOrigin();
        }
        this.overlayWidth = this.getOverlayWidth(this.overlayOrigin);
        // set overlayMinWidth to the largest of `panelMinWidth` and `triggerRect.width`
        // only if `overlayWidth` falsy and `panelMinWidth` not provided.
        // This ensures panel isn't narrow.
        this.overlayMinWidth =
            this.panelMinWidth !== null && !this.overlayWidth
                ? Math.max(this.panelMinWidth, this.triggerRect.width)
                : '';
        this.panelOpen = true;
        this.keyManager.withHorizontalOrientation(null);
        this.highlightCorrectOption();
        this._changeDetectorRef.markForCheck();
        // Set the font size on the panel element once it exists.
        this._ngZone.onStable
            .asObservable()
            .pipe(take(1))
            .subscribe(() => {
            this.scrollActiveOptionIntoView();
            if (this.triggerFontSize && this.overlayDir.overlayRef && this.overlayDir.overlayRef.overlayElement) {
                this.overlayDir.overlayRef.overlayElement.style.fontSize = `${this.triggerFontSize}px`;
            }
            const overlayContainer = this.overlayContainer.getContainerElement();
            if (overlayContainer.childNodes.length === 1) {
                this._renderer.addClass(overlayContainer, 'cdk-overlay-container_dropdown');
            }
        });
    }
    /** Closes the overlay panel and focuses the host element. */
    close() {
        if (!this.panelOpen) {
            return;
        }
        // the order of calls is important
        this.resetSearch();
        this.panelOpen = false;
        this.keyManager.withHorizontalOrientation(this.isRtl() ? 'rtl' : 'ltr');
        this._changeDetectorRef.markForCheck();
        this.onTouched();
        this._renderer.removeClass(this.overlayContainer.getContainerElement(), 'cdk-overlay-container_dropdown');
    }
    /**
     * Sets the select's value. Part of the ControlValueAccessor interface
     * required to integrate with Angular's core forms API.
     *
     * @param value New value to be written to the model.
     */
    writeValue(value) {
        if (this.options) {
            this.setSelectionByValue(value);
        }
    }
    /**
     * Saves a callback function to be invoked when the select's value
     * changes from user input. Part of the ControlValueAccessor interface
     * required to integrate with Angular's core forms API.
     *
     * @param fn Callback to be triggered when the value changes.
     */
    registerOnChange(fn) {
        this.onChange = fn;
    }
    /**
     * Saves a callback function to be invoked when the select is blurred
     * by the user. Part of the ControlValueAccessor interface required
     * to integrate with Angular's core forms API.
     *
     * @param fn Callback to be triggered when the component has been touched.
     */
    // eslint-disable-next-line @typescript-eslint/ban-types
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /**
     * Disables the select. Part of the ControlValueAccessor interface required
     * to integrate with Angular's core forms API.
     *
     * @param isDisabled Sets whether the component is disabled.
     */
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
        this._changeDetectorRef.markForCheck();
        this.stateChanges.next();
    }
    isRtl() {
        return this._dir ? this._dir.value === 'rtl' : false;
    }
    handleKeydown(event) {
        if (this.disabled) {
            return;
        }
        if (this.panelOpen) {
            this.handleOpenKeydown(event);
        }
        else {
            this.handleClosedKeydown(event);
        }
    }
    onFocus() {
        if (!this.disabled) {
            this._focused = true;
            this.stateChanges.next();
        }
    }
    /**
     * Calls the touched callback only if the panel is closed. Otherwise, the trigger will
     * "blur" to the panel when it opens, causing a false positive.
     */
    onBlur() {
        this._focused = false;
        if (!this.disabled && !this.panelOpen) {
            this.onTouched();
            this._changeDetectorRef.markForCheck();
            this.stateChanges.next();
            if (this.ngControl?.control) {
                const control = this.ngControl.control;
                control.updateValueAndValidity({ emitEvent: false });
                control.statusChanges.emit(control.status);
            }
        }
    }
    /**
     * Callback that is invoked when the overlay panel has been attached.
     */
    onAttached() {
        this.overlayDir.positionChange.pipe(take(1)).subscribe(() => {
            this._changeDetectorRef.detectChanges();
            this.setOverlayPosition();
            this.optionsContainer.nativeElement.scrollTop = this.scrollTop;
            this.updateScrollSize();
        });
        this.options.changes.pipe(delay(1)).subscribe(() => this.setOverlayPosition());
        this.closeSubscription = this.closingActions().subscribe(() => this.close());
    }
    /** Returns the theme to be used on the panel. */
    getPanelTheme() {
        return this.parentFormField ? `kbq-${this.parentFormField.color}` : '';
    }
    /** Focuses the select element. */
    focus() {
        this.elementRef.nativeElement.focus();
    }
    /**
     * Implemented as part of KbqFormFieldControl.
     * @docs-private
     */
    onContainerClick() {
        this.focus();
    }
    /** Invoked when an option is clicked. */
    onRemoveMatcherItem(option, $event) {
        $event.stopPropagation();
        option.deselect();
    }
    calculateHiddenItems() {
        if (!this.isBrowser ||
            this.customTrigger ||
            this.empty ||
            !this.multiple ||
            this.customMatcher ||
            this.multiline)
            return;
        const totalItemsWidth = this.getTotalItemsWidthInMatcher();
        const [totalVisibleItemsWidth, visibleItems] = this.getTotalVisibleItems();
        this.hiddenItems = this.selected.length - visibleItems;
        this._changeDetectorRef.detectChanges();
        if (this.hiddenItems) {
            const itemsCounter = this.trigger.nativeElement.querySelector('.kbq-select__match-hidden-text');
            const matcherList = this.trigger.nativeElement.querySelector('.kbq-select__match-list');
            const itemsCounterShowed = itemsCounter.offsetTop < itemsCounter.offsetHeight;
            const itemsCounterWidth = Math.floor(itemsCounter.getBoundingClientRect().width);
            const matcherListWidth = Math.floor(matcherList.getBoundingClientRect().width);
            const matcherWidth = matcherListWidth + (itemsCounterShowed ? itemsCounterWidth : 0);
            if (itemsCounterShowed && totalItemsWidth < matcherWidth) {
                this.hiddenItems = 0;
                this._changeDetectorRef.detectChanges();
            }
            if (totalVisibleItemsWidth === matcherListWidth ||
                totalVisibleItemsWidth + itemsCounterWidth < matcherListWidth) {
                this._changeDetectorRef.markForCheck();
                return;
            }
        }
        this._changeDetectorRef.markForCheck();
    }
    getItemHeight() {
        return this.options.first ? this.options.first.getHeight() : 0;
    }
    handleClick($event) {
        if (this.footer?.nativeElement.contains($event.target)) {
            this.close();
        }
    }
    /** @docs-private */
    shouldShowSearch() {
        return isUndefined(this.searchMinOptionsThreshold) || this.options.length >= this.searchMinOptionsThreshold;
    }
    isVisible() {
        return this.elementRef.nativeElement.offsetTop < this.elementRef.nativeElement.offsetHeight;
    }
    currentOverlayPosition() {
        const element = this.overlayDir.overlayRef.hostElement;
        return Array.from(this.overlayContainer.getContainerElement().childNodes).findIndex((node) => {
            return node.firstChild?.['id'] === element.firstChild?.['id'];
        });
    }
    modalOverlayPosition() {
        return Array.from(this.overlayContainer.getContainerElement().childNodes).findIndex((childNode) => childNode.classList.contains('kbq-modal-overlay'));
    }
    closingActions() {
        // used for calling toggle on select from outside of component
        const outsidePointerEvents = this.overlayDir
            .overlayRef.outsidePointerEvents()
            .pipe(delay(0))
            .pipe(filter(() => {
            if (this.overlayContainer.getContainerElement().childElementCount > 1) {
                return this.currentOverlayPosition() > this.modalOverlayPosition();
            }
            return true;
        }));
        return merge(outsidePointerEvents, this.overlayDir.overlayRef.detachments());
    }
    getHeightOfOptionsContainer() {
        return this.optionsContainer.nativeElement.getClientRects()[0]?.height;
    }
    updateScrollSize() {
        if (!this.options.first) {
            return;
        }
        this.keyManager.withScrollSize(Math.floor(this.getHeightOfOptionsContainer() / this.options.first.getHeight()));
    }
    getTotalItemsWidthInMatcher() {
        const triggerClone = this.buildTriggerClone();
        triggerClone.querySelector('.kbq-select__match-hidden-text')?.remove();
        this._renderer.appendChild(this.trigger.nativeElement, triggerClone);
        let totalItemsWidth = 0;
        const selectedItemsViewValueContainers = triggerClone.querySelectorAll('kbq-tag');
        selectedItemsViewValueContainers.forEach((item) => (totalItemsWidth += this.getItemWidth(item)));
        triggerClone.remove();
        return totalItemsWidth;
    }
    getItemWidth(element) {
        const computedStyle = this.window.getComputedStyle(element);
        const width = parseInt(computedStyle.width);
        const marginLeft = parseInt(computedStyle.marginLeft);
        const marginRight = parseInt(computedStyle.marginRight);
        return width + marginLeft + marginRight + parseInt(SizeXxs);
    }
    /** Handles keyboard events while the select is closed. */
    handleClosedKeydown(event) {
        const keyCode = event.keyCode;
        const isArrowKey = [DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW].includes(keyCode);
        const isOpenKey = [ENTER, SPACE].includes(keyCode);
        // Open the select on ALT + arrow key to match the native <select>
        if (isOpenKey || ((this.multiSelection || event.altKey) && isArrowKey)) {
            event.preventDefault(); // prevents the page from scrolling down when pressing space
            this.open();
        }
        else if (!this.multiSelection) {
            this.keyManager.onKeydown(event);
        }
    }
    /** Handles keyboard events when the selected is open. */
    handleOpenKeydown(event) {
        const keyCode = event.keyCode;
        const isArrowKey = keyCode === DOWN_ARROW || keyCode === UP_ARROW;
        if ((isArrowKey && event.altKey) || keyCode === ESCAPE || keyCode === TAB) {
            // Close the select on ALT + arrow key to match the native <select>
            event.preventDefault();
            this.close();
            this.focus();
        }
        else if (keyCode === HOME) {
            event.preventDefault();
            this.keyManager.setFirstItemActive();
        }
        else if (keyCode === END) {
            event.preventDefault();
            this.keyManager.setLastItemActive();
        }
        else if (keyCode === PAGE_UP) {
            event.preventDefault();
            this.keyManager.setPreviousPageItemActive();
        }
        else if (keyCode === PAGE_DOWN) {
            event.preventDefault();
            this.keyManager.setNextPageItemActive();
        }
        else if ((keyCode === ENTER || keyCode === SPACE) && this.keyManager.activeItem) {
            event.preventDefault();
            this.keyManager.activeItem.selectViaInteraction();
        }
        else if (this.multiSelection && keyCode === A && event.ctrlKey) {
            this.selectAllHandler(event, this);
        }
        else {
            const previouslyFocusedIndex = this.keyManager.activeItemIndex;
            this.keyManager.onKeydown(event);
            if (this.multiSelection &&
                isArrowKey &&
                event.shiftKey &&
                this.keyManager.activeItem &&
                this.keyManager.activeItemIndex !== previouslyFocusedIndex) {
                this.keyManager.activeItem.selectViaInteraction();
            }
            if (this.search) {
                this.search.focus();
            }
            if (this.search && (this.keyManager.isTyping() || [BACKSPACE, DELETE].includes(keyCode))) {
                setTimeout(() => this.highlightCorrectOption());
            }
        }
    }
    initializeSelection() {
        // Defer setting the value in order to avoid the "Expression
        // has changed after it was checked" errors from Angular.
        Promise.resolve().then(() => {
            this.setSelectionByValue(this.ngControl ? this.ngControl.value : this._value);
        });
    }
    /**
     * Sets the selected option based on a value. If no option can be
     * found with the designated value, the select trigger is cleared.
     */
    setSelectionByValue(value) {
        this.previousSelectionModelSelected = this.selectionModel.selected;
        if (this.multiSelection && value) {
            if (!Array.isArray(value)) {
                throw getKbqSelectNonArrayValueError();
            }
            this.selectionModel.clear();
            value.forEach((currentValue) => this.selectValue(currentValue));
            this.sortValues();
        }
        else {
            this.selectionModel.clear();
            const correspondingOption = this.selectValue(value);
            // Shift focus to the active item. Note that we shouldn't do this in multiple
            // mode, because we don't know what option the user interacted with last.
            if (correspondingOption) {
                this.keyManager.setActiveItem(correspondingOption);
            }
        }
        this._changeDetectorRef.markForCheck();
    }
    getCorrespondOption(value) {
        return [
            ...this.options.toArray(),
            ...this.previousSelectionModelSelected
        ].find((option) => {
            try {
                // Treat null as a special reset value.
                return option.value != null && this.compareWith(option.value, value);
            }
            catch (error) {
                if (isDevMode()) {
                    // Notify developers of errors in their comparator.
                    // eslint-disable-next-line no-console
                    console.warn(error);
                }
                return false;
            }
        });
    }
    /**
     * Finds and selects and option based on its value.
     * @returns Option that has the corresponding value.
     */
    selectValue(value) {
        const correspondingOption = this.getCorrespondOption(value);
        if (correspondingOption) {
            this.selectionModel.select(correspondingOption);
        }
        else if (this.withVirtualScroll) {
            const source = this.cdkVirtualForOf?.cdkVirtualForOf;
            const correspondingOptionVirtual = source instanceof Array ? source.find((item) => this.compareWith(item, value)) : undefined;
            if (correspondingOptionVirtual) {
                const kbqVirtualOption = new KbqVirtualOption(correspondingOptionVirtual, this.disabled);
                this.selectionModel.select(kbqVirtualOption);
            }
        }
        return correspondingOption;
    }
    /** Sets up a key manager to listen to keyboard events on the overlay panel. */
    initKeyManager() {
        const typeAheadDebounce = 200;
        this.keyManager = new ActiveDescendantKeyManager(this.options)
            .withTypeAhead(typeAheadDebounce, this.search ? -1 : 0)
            .withVerticalOrientation()
            .withHorizontalOrientation(this.isRtl() ? 'rtl' : 'ltr');
        this.keyManager.change.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
            if (this.panelOpen && this.panel) {
                this.scrollActiveOptionIntoView();
            }
            else if (!this.panelOpen && !this.multiSelection && this.keyManager.activeItem) {
                this.keyManager.activeItem.selectViaInteraction();
            }
        });
    }
    /** Drops current option subscriptions and IDs and resets from scratch. */
    resetOptions() {
        this.optionSelectionChanges
            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(this.options.changes))
            .subscribe((event) => {
            this.onSelect(event.source, event.isUserInput);
            if (event.isUserInput && !this.multiSelection && this.panelOpen) {
                this.close();
                this.focus();
            }
        });
        // Listen to changes in the internal state of the options and react accordingly.
        // Handles cases like the labels of the selected options changing.
        merge(...this.options.map((option) => option.stateChanges))
            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(this.options.changes))
            .subscribe(() => {
            this._changeDetectorRef.markForCheck();
            this.stateChanges.next();
        });
    }
    /** Invoked when an option is clicked. */
    onSelect(option, isUserInput) {
        const wasSelected = this.selectionModel.isSelected(option);
        if (option.value == null && !this.multiSelection) {
            option.deselect();
            this.selectionModel.clear();
            this.propagateChanges(option.value);
        }
        else {
            if (option.selected) {
                this.selectionModel.select(option);
            }
            else {
                this.selectionModel.deselect(option);
            }
            if (isUserInput) {
                this.keyManager.setActiveItem(option);
            }
            if (this.multiSelection) {
                this.sortValues();
            }
        }
        if (wasSelected !== this.selectionModel.isSelected(option)) {
            this.propagateChanges();
        }
        this.stateChanges.next();
    }
    /** Sorts the selected values in the selected based on their order in the panel. */
    sortValues() {
        if (this.multiSelection) {
            const options = this.options.toArray();
            this.selectionModel.sort((a, b) => this.sortComparator ? this.sortComparator(a, b, options) : a.value - b.value);
            this.stateChanges.next();
        }
    }
    /** Emits change event to set the model value. */
    propagateChanges(fallbackValue) {
        let valueToEmit;
        if (this.multiSelection) {
            valueToEmit = this.selected.map((option) => option.value);
        }
        else {
            valueToEmit = this.selected ? this.selected.value : fallbackValue;
        }
        this._value = valueToEmit;
        this.valueChange.emit(valueToEmit);
        this.onChange(valueToEmit);
        this.selectionChange.emit(new KbqSelectChange(this, valueToEmit));
        this._changeDetectorRef.markForCheck();
    }
    /**
     * Highlights the selected item. If no option is selected, it will highlight
     * the first item instead.
     */
    highlightCorrectOption() {
        if (this.keyManager) {
            if (this.empty || !this.firstSelected || this.firstFiltered) {
                this.keyManager.setFirstItemActive();
            }
            else {
                this.keyManager.setActiveItem(this.firstSelected);
            }
        }
    }
    /** Scrolls the active option into view. */
    scrollActiveOptionIntoView() {
        this.keyManager.activeItem?.focus();
    }
    /** Gets how wide the overlay panel should be. */
    getOverlayWidth(origin) {
        if (this.panelWidth === 'auto') {
            const elementRef = origin instanceof CdkOverlayOrigin ? origin.elementRef : origin || this.elementRef;
            return elementRef.nativeElement.getBoundingClientRect().width;
        }
        return this.panelWidth ?? '';
    }
    /** Function for handling the combination Ctrl + A (select all). By default, the internal handler is used. */
    _selectAllHandler(event, select) {
        event.preventDefault();
        const hasDeselectedOptions = select.options.some((option) => !option.selected);
        select.options.forEach((option) => {
            if (hasDeselectedOptions && !option.disabled) {
                option.select();
            }
            else {
                option.deselect();
            }
        });
    }
    getTotalVisibleItems() {
        const triggerClone = this.buildTriggerClone();
        this._renderer.setStyle(triggerClone.querySelector('.kbq-select__match-hidden-text'), 'display', 'block');
        this._renderer.appendChild(this.trigger.nativeElement, triggerClone);
        let visibleItemsCount = 0;
        let totalVisibleItemsWidth = 0;
        triggerClone.querySelectorAll('kbq-tag').forEach((item) => {
            if (item.offsetTop < item.offsetHeight) {
                totalVisibleItemsWidth += this.getItemWidth(item);
                visibleItemsCount++;
            }
        });
        triggerClone.remove();
        return [totalVisibleItemsWidth, visibleItemsCount];
    }
    buildTriggerClone() {
        const triggerClone = this.trigger.nativeElement.cloneNode(true);
        this._renderer.setStyle(triggerClone, 'position', 'absolute');
        this._renderer.setStyle(triggerClone, 'visibility', 'hidden');
        this._renderer.setStyle(triggerClone, 'top', '-100%');
        this._renderer.setStyle(triggerClone, 'left', '0');
        return triggerClone;
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSelect, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.ErrorStateMatcher }, { token: i0.ElementRef }, { token: i2.OverlayContainer }, { token: i3.Directionality, optional: true }, { token: i4.NgForm, optional: true }, { token: i4.FormGroupDirective, optional: true }, { token: i5.KbqFormField, host: true, optional: true }, { token: i4.NgControl, optional: true, self: true }, { token: KBQ_SELECT_SCROLL_STRATEGY }, { token: KBQ_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqSelect, selector: "kbq-select", inputs: { hiddenItemsText: "hiddenItemsText", panelClass: "panelClass", backdropClass: "backdropClass", errorStateMatcher: "errorStateMatcher", sortComparator: "sortComparator", multiline: ["multiline", "multiline", booleanAttribute], searchMinOptionsThreshold: "searchMinOptionsThreshold", hasBackdrop: "hasBackdrop", placeholder: "placeholder", required: "required", multiple: ["multiple", "multiple", booleanAttribute], compareWith: "compareWith", selectAllHandler: "selectAllHandler", panelWidth: "panelWidth", panelMinWidth: ["panelMinWidth", "panelMinWidth", numberAttribute], value: "value", id: "id", tabIndex: ["tabIndex", "tabIndex", numberAttribute], disabled: ["disabled", "disabled", booleanAttribute], hiddenItemsTextFormatter: "hiddenItemsTextFormatter" }, outputs: { openedChange: "openedChange", openedStream: "opened", closedStream: "closed", selectionChange: "selectionChange", valueChange: "valueChange" }, host: { listeners: { "click": "toggle()", "keydown": "handleKeydown($event)", "focus": "onFocus()", "blur": "onBlur()", "window:resize": "calculateHiddenItems()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "class.kbq-select_multiple": "multiple", "class.kbq-select_multiline": "multiline", "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState" }, classAttribute: "kbq-select" }, providers: [
            { provide: KbqFormFieldControl, useExisting: KbqSelect },
            { provide: KBQ_OPTION_PARENT_COMPONENT, useExisting: KbqSelect },
            { provide: KBQ_PARENT_POPUP, useExisting: KbqSelect }
        ], queries: [{ propertyName: "footer", first: true, predicate: KbqSelectFooter, descendants: true, read: ElementRef }, { propertyName: "cdkVirtualForOf", first: true, predicate: CdkVirtualForOf, descendants: true }, { propertyName: "customTrigger", first: true, predicate: KbqSelectTrigger, descendants: true }, { propertyName: "customMatcher", first: true, predicate: KbqSelectMatcher, descendants: true }, { propertyName: "customTagTemplateRef", first: true, predicate: ["kbqSelectTagContent"], descendants: true, read: TemplateRef }, { propertyName: "cleaner", first: true, predicate: ["kbqSelectCleaner"], descendants: true, static: true }, { propertyName: "search", first: true, predicate: KbqSelectSearch, descendants: true }, { propertyName: "options", predicate: KbqOption, descendants: true }, { propertyName: "optionGroups", predicate: KbqOptgroup }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true }, { propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqSelect"], usesInheritance: true, ngImport: i0, template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    #trigger\n    cdkOverlayOrigin\n    class=\"kbq-select__trigger\"\n    [class.kbq-select__trigger_empty]=\"empty\"\n    [class.kbq-select__trigger_multiline]=\"multiline\"\n    [class.kbq-select__trigger_multiple]=\"multiple\"\n    [class.kbq-select__trigger_single]=\"!multiple\"\n>\n    @if (!!customMatcher) {\n        <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n    } @else {\n        <div class=\"kbq-select__matcher\">\n            @if (empty) {\n                <span class=\"kbq-select__placeholder\">\n                    {{ placeholder || '\\u00A0' }}\n                </span>\n            } @else {\n                @if (!!customTrigger) {\n                    <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" />\n                } @else {\n                    <div class=\"kbq-select__match-container\">\n                        @if (multiSelection) {\n                            <div\n                                [class.kbq-select__match-list]=\"!multiline\"\n                                [class.kbq-select__multiline-match-list]=\"multiline\"\n                            >\n                                @if (!customTagTemplateRef) {\n                                    @for (option of triggerValues; track option) {\n                                        <kbq-tag\n                                            [color]=\"colorForState\"\n                                            [disabled]=\"option.disabled || disabled\"\n                                            [selectable]=\"false\"\n                                        >\n                                            {{ option.viewValue }}\n                                            @if (!option.disabled && !disabled) {\n                                                <i\n                                                    kbq-icon=\"kbq-xmark-s_16\"\n                                                    kbqTagRemove\n                                                    (click)=\"onRemoveMatcherItem(option, $event)\"\n                                                ></i>\n                                            }\n                                        </kbq-tag>\n                                    }\n                                }\n                                @if (customTagTemplateRef) {\n                                    @for (option of triggerValues; track option) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"$any(customTagTemplateRef)\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                        />\n                                    }\n                                }\n                            </div>\n\n                            @if (!multiline) {\n                                <div\n                                    class=\"kbq-select__match-hidden-text\"\n                                    [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n                                >\n                                    {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n                                </div>\n                            }\n                        } @else {\n                            <span class=\"kbq-select__matcher-text\">\n                                {{ triggerValue }}\n                            </span>\n                        }\n                    </div>\n                }\n            }\n\n            @if (canShowCleaner) {\n                <div\n                    class=\"kbq-select__cleaner\"\n                    (click)=\"clearValue($event)\"\n                    (keydown.enter)=\"clearValue($event)\"\n                    (keydown.space)=\"clearValue($event)\"\n                >\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\" [color]=\"colorForState\"></i>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayLockPosition\n    [cdkConnectedOverlayBackdropClass]=\"backdropClass\"\n    [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n    [cdkConnectedOverlayMinWidth]=\"overlayMinWidth\"\n    [cdkConnectedOverlayOffsetY]=\"offsetY\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    (attach)=\"onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        cdkMonitorSubtreeFocus\n        class=\"kbq-select__panel {{ getPanelTheme() }}\"\n        [ngClass]=\"panelClass\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.transformOrigin]=\"transformOrigin\"\n        (click)=\"handleClick($event)\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        @if (search && shouldShowSearch()) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div\n            #optionsContainer\n            class=\"kbq-select__content kbq-scrollbar\"\n            [@fadeInContent]=\"'showing'\"\n            (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n        >\n            @if (isEmptySearchResult) {\n                <div class=\"kbq-select__no-options-message\">\n                    <ng-content select=\"[kbq-select-search-empty-result]\" />\n                </div>\n            }\n            <ng-content />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;min-height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline){height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline) .kbq-select__matcher{overflow:hidden;white-space:nowrap}.kbq-select .kbq-select__matcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-grow:1;align-items:center}.kbq-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-right) var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-right) var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);max-height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__match-container{flex-direction:column}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__matcher{max-width:100%;padding:calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-right) calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__cleaner,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__arrow-wrapper{align-self:flex-start;align-items:center;height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-s));min-width:var(--kbq-form-field-size-addon-width)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__multiline-match-list{display:flex;flex-direction:row;flex-wrap:wrap;margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));gap:var(--kbq-size-xxs)}.kbq-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-select .kbq-select__match-container .kbq-select__match-hidden-text{flex:0 0 70px;align-self:center;padding-left:4px;padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-select kbq-select-trigger,.kbq-select [kbq-select-trigger]{width:100%}.kbq-select .kbq-select__arrow-wrapper{display:flex;align-self:center;justify-content:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-form-field-appearance-fill .kbq-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-select__panel .kbq-option{font-size:inherit}.kbq-select__panel .kbq-select__no-options-message{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-select__panel .kbq-select__footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-select__content{box-sizing:initial}.kbq-select__content .kbq-option{position:relative}.kbq-select__content .kbq-option:before,.kbq-select__content .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-select__content .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-select__content .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport{min-height:var(--kbq-select-panel-size-max-height, 256px);max-height:var(--kbq-select-panel-size-max-height, 256px)}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{max-width:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-select{color:var(--kbq-foreground-contrast)}.kbq-select.kbq-control_has-validate-directive.ng-invalid,.kbq-select.kbq-invalid{color:var(--kbq-foreground-error)}.kbq-select.kbq-control_has-validate-directive.ng-invalid .kbq-select__placeholder,.kbq-select.kbq-invalid .kbq-select__placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-select.kbq-disabled .kbq-select__placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-form-field-default-placeholder)}.kbq-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__search-container{border-bottom-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__no-options-message{color:var(--kbq-foreground-contrast-secondary)}.kbq-select,.kbq-select__panel{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-select,.kbq-tree-select,.kbq-select__panel{--kbq-select-size-single-padding-left: var(--kbq-form-field-size-infix-padding);--kbq-select-size-single-padding-right: var(--kbq-form-field-size-suffix-padding);--kbq-select-size-single-padding-vertical: var(--kbq-size-xs);--kbq-select-size-single-content-gap: var(--kbq-size-xxs);--kbq-select-size-multiple-padding-left: 0;--kbq-select-size-multiple-padding-right: 0;--kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);--kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);--kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-size-max-height: 256px;--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"], dependencies: [{ kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "component", type: i7.KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: ["editable", "preventEditSubmit", "selected", "value", "selectable", "removable", "tabindex", "disabled"], outputs: ["editChange", "selectionChange", "destroyed", "removed"], exportAs: ["kbqTag"] }, { kind: "directive", type: i7.KbqTagRemove, selector: "[kbqTagRemove]" }, { kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i9.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], animations: [
            kbqSelectAnimations.transformPanel,
            kbqSelectAnimations.fadeInContent
        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSelect, decorators: [{
            type: Component,
            args: [{ selector: 'kbq-select', exportAs: 'kbqSelect', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[attr.tabindex]': 'tabIndex',
                        '[attr.disabled]': 'disabled || null',
                        class: 'kbq-select',
                        '[class.kbq-select_multiple]': 'multiple',
                        '[class.kbq-select_multiline]': 'multiline',
                        '[class.kbq-disabled]': 'disabled',
                        '[class.kbq-invalid]': 'errorState',
                        '(click)': 'toggle()',
                        '(keydown)': 'handleKeydown($event)',
                        '(focus)': 'onFocus()',
                        '(blur)': 'onBlur()',
                        // @TODO: turn event listener only for specific conditions (#DS-4253)
                        '(window:resize)': 'calculateHiddenItems()'
                    }, animations: [
                        kbqSelectAnimations.transformPanel,
                        kbqSelectAnimations.fadeInContent
                    ], providers: [
                        { provide: KbqFormFieldControl, useExisting: KbqSelect },
                        { provide: KBQ_OPTION_PARENT_COMPONENT, useExisting: KbqSelect },
                        { provide: KBQ_PARENT_POPUP, useExisting: KbqSelect }
                    ], template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    #trigger\n    cdkOverlayOrigin\n    class=\"kbq-select__trigger\"\n    [class.kbq-select__trigger_empty]=\"empty\"\n    [class.kbq-select__trigger_multiline]=\"multiline\"\n    [class.kbq-select__trigger_multiple]=\"multiple\"\n    [class.kbq-select__trigger_single]=\"!multiple\"\n>\n    @if (!!customMatcher) {\n        <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n    } @else {\n        <div class=\"kbq-select__matcher\">\n            @if (empty) {\n                <span class=\"kbq-select__placeholder\">\n                    {{ placeholder || '\\u00A0' }}\n                </span>\n            } @else {\n                @if (!!customTrigger) {\n                    <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" />\n                } @else {\n                    <div class=\"kbq-select__match-container\">\n                        @if (multiSelection) {\n                            <div\n                                [class.kbq-select__match-list]=\"!multiline\"\n                                [class.kbq-select__multiline-match-list]=\"multiline\"\n                            >\n                                @if (!customTagTemplateRef) {\n                                    @for (option of triggerValues; track option) {\n                                        <kbq-tag\n                                            [color]=\"colorForState\"\n                                            [disabled]=\"option.disabled || disabled\"\n                                            [selectable]=\"false\"\n                                        >\n                                            {{ option.viewValue }}\n                                            @if (!option.disabled && !disabled) {\n                                                <i\n                                                    kbq-icon=\"kbq-xmark-s_16\"\n                                                    kbqTagRemove\n                                                    (click)=\"onRemoveMatcherItem(option, $event)\"\n                                                ></i>\n                                            }\n                                        </kbq-tag>\n                                    }\n                                }\n                                @if (customTagTemplateRef) {\n                                    @for (option of triggerValues; track option) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"$any(customTagTemplateRef)\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                        />\n                                    }\n                                }\n                            </div>\n\n                            @if (!multiline) {\n                                <div\n                                    class=\"kbq-select__match-hidden-text\"\n                                    [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n                                >\n                                    {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n                                </div>\n                            }\n                        } @else {\n                            <span class=\"kbq-select__matcher-text\">\n                                {{ triggerValue }}\n                            </span>\n                        }\n                    </div>\n                }\n            }\n\n            @if (canShowCleaner) {\n                <div\n                    class=\"kbq-select__cleaner\"\n                    (click)=\"clearValue($event)\"\n                    (keydown.enter)=\"clearValue($event)\"\n                    (keydown.space)=\"clearValue($event)\"\n                >\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\" [color]=\"colorForState\"></i>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayLockPosition\n    [cdkConnectedOverlayBackdropClass]=\"backdropClass\"\n    [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n    [cdkConnectedOverlayMinWidth]=\"overlayMinWidth\"\n    [cdkConnectedOverlayOffsetY]=\"offsetY\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    (attach)=\"onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        cdkMonitorSubtreeFocus\n        class=\"kbq-select__panel {{ getPanelTheme() }}\"\n        [ngClass]=\"panelClass\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.transformOrigin]=\"transformOrigin\"\n        (click)=\"handleClick($event)\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        @if (search && shouldShowSearch()) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div\n            #optionsContainer\n            class=\"kbq-select__content kbq-scrollbar\"\n            [@fadeInContent]=\"'showing'\"\n            (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n        >\n            @if (isEmptySearchResult) {\n                <div class=\"kbq-select__no-options-message\">\n                    <ng-content select=\"[kbq-select-search-empty-result]\" />\n                </div>\n            }\n            <ng-content />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;min-height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline){height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline) .kbq-select__matcher{overflow:hidden;white-space:nowrap}.kbq-select .kbq-select__matcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-grow:1;align-items:center}.kbq-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-right) var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-right) var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);max-height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__match-container{flex-direction:column}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__matcher{max-width:100%;padding:calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-right) calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__cleaner,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__arrow-wrapper{align-self:flex-start;align-items:center;height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-s));min-width:var(--kbq-form-field-size-addon-width)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__multiline-match-list{display:flex;flex-direction:row;flex-wrap:wrap;margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));gap:var(--kbq-size-xxs)}.kbq-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-select .kbq-select__match-container .kbq-select__match-hidden-text{flex:0 0 70px;align-self:center;padding-left:4px;padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-select kbq-select-trigger,.kbq-select [kbq-select-trigger]{width:100%}.kbq-select .kbq-select__arrow-wrapper{display:flex;align-self:center;justify-content:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-form-field-appearance-fill .kbq-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-select__panel .kbq-option{font-size:inherit}.kbq-select__panel .kbq-select__no-options-message{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-select__panel .kbq-select__footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-select__content{box-sizing:initial}.kbq-select__content .kbq-option{position:relative}.kbq-select__content .kbq-option:before,.kbq-select__content .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-select__content .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-select__content .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport{min-height:var(--kbq-select-panel-size-max-height, 256px);max-height:var(--kbq-select-panel-size-max-height, 256px)}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{max-width:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-select{color:var(--kbq-foreground-contrast)}.kbq-select.kbq-control_has-validate-directive.ng-invalid,.kbq-select.kbq-invalid{color:var(--kbq-foreground-error)}.kbq-select.kbq-control_has-validate-directive.ng-invalid .kbq-select__placeholder,.kbq-select.kbq-invalid .kbq-select__placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-select.kbq-disabled .kbq-select__placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-form-field-default-placeholder)}.kbq-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__search-container{border-bottom-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__no-options-message{color:var(--kbq-foreground-contrast-secondary)}.kbq-select,.kbq-select__panel{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-select,.kbq-tree-select,.kbq-select__panel{--kbq-select-size-single-padding-left: var(--kbq-form-field-size-infix-padding);--kbq-select-size-single-padding-right: var(--kbq-form-field-size-suffix-padding);--kbq-select-size-single-padding-vertical: var(--kbq-size-xs);--kbq-select-size-single-content-gap: var(--kbq-size-xxs);--kbq-select-size-multiple-padding-left: 0;--kbq-select-size-multiple-padding-right: 0;--kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);--kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);--kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-size-max-height: 256px;--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ErrorStateMatcher }, { type: i0.ElementRef }, { type: i2.OverlayContainer }, { type: i3.Directionality, decorators: [{
                    type: Optional
                }] }, { type: i4.NgForm, decorators: [{
                    type: Optional
                }] }, { type: i4.FormGroupDirective, decorators: [{
                    type: Optional
                }] }, { type: i5.KbqFormField, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }, { type: i4.NgControl, decorators: [{
                    type: Self
                }, {
                    type: Optional
                }] }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [KBQ_SELECT_SCROLL_STRATEGY]
                }] }, { type: i1.KbqLocaleService, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [KBQ_LOCALE_SERVICE]
                }] }], propDecorators: { trigger: [{
                type: ViewChild,
                args: ['trigger', { static: false }]
            }], panel: [{
                type: ViewChild,
                args: ['panel', { static: false }]
            }], optionsContainer: [{
                type: ViewChild,
                args: ['optionsContainer', { static: false }]
            }], overlayDir: [{
                type: ViewChild,
                args: [CdkConnectedOverlay, { static: false }]
            }], footer: [{
                type: ContentChild,
                args: [KbqSelectFooter, { static: false, read: ElementRef }]
            }], cdkVirtualForOf: [{
                type: ContentChild,
                args: [CdkVirtualForOf, { static: false }]
            }], tags: [{
                type: ViewChildren,
                args: [KbqTag]
            }], customTrigger: [{
                type: ContentChild,
                args: [KbqSelectTrigger, { static: false }]
            }], customMatcher: [{
                type: ContentChild,
                args: [KbqSelectMatcher, { static: false }]
            }], customTagTemplateRef: [{
                type: ContentChild,
                args: ['kbqSelectTagContent', { static: false, read: TemplateRef }]
            }], cleaner: [{
                type: ContentChild,
                args: ['kbqSelectCleaner', { static: true }]
            }], options: [{
                type: ContentChildren,
                args: [KbqOption, { descendants: true }]
            }], optionGroups: [{
                type: ContentChildren,
                args: [KbqOptgroup]
            }], search: [{
                type: ContentChild,
                args: [KbqSelectSearch, { static: false }]
            }], hiddenItemsText: [{
                type: Input
            }], panelClass: [{
                type: Input
            }], backdropClass: [{
                type: Input
            }], errorStateMatcher: [{
                type: Input
            }], sortComparator: [{
                type: Input
            }], multiline: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], searchMinOptionsThreshold: [{
                type: Input
            }], openedChange: [{
                type: Output
            }], openedStream: [{
                type: Output,
                args: ['opened']
            }], closedStream: [{
                type: Output,
                args: ['closed']
            }], selectionChange: [{
                type: Output
            }], valueChange: [{
                type: Output
            }], hasBackdrop: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], required: [{
                type: Input
            }], multiple: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], compareWith: [{
                type: Input
            }], selectAllHandler: [{
                type: Input
            }], panelWidth: [{
                type: Input
            }], panelMinWidth: [{
                type: Input,
                args: [{ transform: numberAttribute }]
            }], value: [{
                type: Input
            }], id: [{
                type: Input
            }], tabIndex: [{
                type: Input,
                args: [{ transform: numberAttribute }]
            }], disabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hiddenItemsTextFormatter: [{
                type: Input
            }] } });

class KbqSelectModule {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: KbqSelectModule, declarations: [KbqSelect,
            KbqOptionTooltip], imports: [OverlayModule,
            KbqOptionModule,
            KbqIconModule,
            KbqTagsModule,
            KbqToolTipModule,
            KbqSelectSearch,
            KbqSelectFooter,
            KbqSelectMatcher,
            KbqSelectTrigger,
            KbqSelectSearchEmptyResult,
            NgClass,
            NgTemplateOutlet,
            A11yModule], exports: [KbqSelect,
            KbqOptionTooltip,
            KbqOptionModule,
            KbqSelectSearch,
            KbqSelectFooter,
            KbqSelectMatcher,
            KbqSelectTrigger,
            KbqSelectSearchEmptyResult,
            KbqFormFieldModule] }); }
    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSelectModule, providers: [KBQ_SELECT_SCROLL_STRATEGY_PROVIDER], imports: [OverlayModule,
            KbqOptionModule,
            KbqIconModule,
            KbqTagsModule,
            KbqToolTipModule,
            A11yModule, KbqOptionModule,
            KbqFormFieldModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSelectModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        OverlayModule,
                        KbqOptionModule,
                        KbqIconModule,
                        KbqTagsModule,
                        KbqToolTipModule,
                        KbqSelectSearch,
                        KbqSelectFooter,
                        KbqSelectMatcher,
                        KbqSelectTrigger,
                        KbqSelectSearchEmptyResult,
                        NgClass,
                        NgTemplateOutlet,
                        A11yModule
                    ],
                    exports: [
                        KbqSelect,
                        KbqOptionTooltip,
                        KbqOptionModule,
                        KbqSelectSearch,
                        KbqSelectFooter,
                        KbqSelectMatcher,
                        KbqSelectTrigger,
                        KbqSelectSearchEmptyResult,
                        KbqFormFieldModule
                    ],
                    declarations: [
                        KbqSelect,
                        KbqOptionTooltip
                    ],
                    providers: [KBQ_SELECT_SCROLL_STRATEGY_PROVIDER]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { KBQ_SELECT_OPTIONS, KbqOptionTooltip, KbqSelect, KbqSelectChange, KbqSelectModule, kbqSelectOptionsProvider };
//# sourceMappingURL=koobiq-components-select.mjs.map
