@koobiq/components 18.17.0 → 18.18.0

package/fesm2022/koobiq-components-overflow-items.mjs

@@ -1,10 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, input, signal, viewChildren, ElementRef, contentChildren, contentChild, viewChild, computed, booleanAttribute, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import { ContentObserver } from '@angular/cdk/observers';
+import { inject, TemplateRef, Directive, input, viewChildren, ElementRef, contentChildren, contentChild, viewChild, computed, signal, booleanAttribute, numberAttribute, ChangeDetectorRef, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { SharedResizeObserver } from '@angular/cdk/observers/private';
 import { NgTemplateOutlet } from '@angular/common';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { skip, merge, debounceTime } from 'rxjs';
+import { merge, skip, debounceTime } from 'rxjs';
 
 /**
  * Directive for providing `KbqOverflowItemsResultContext` to the `KbqOverflowItems` component.
@@ -44,7 +43,7 @@ class KbqOverflowItem {
          *
          * @docs-private
          */
-        this.hidden = signal(false);
+        this.hidden = false;
         /**
          * TemplateRef for the item.
          *
@@ -87,20 +86,19 @@ class KbqOverflowItems {
          * @docs-private
          */
         this.resultTemplateContext = computed(() => {
-            const hiddenItemIDs = new Set(this.items()
-                .filter(({ hidden }) => hidden())
-                .map(({ id }) => id()));
+            const hiddenItemIDs = this.hiddenItemIDs();
             return {
                 $implicit: hiddenItemIDs,
                 hiddenItemIDs: hiddenItemIDs
             };
         });
+        this.hiddenItemIDs = signal(new Set([]));
         /**
          * Whether the overflow result is hidden.
          *
          * @docs-private
          */
-        this.resultHidden = computed(() => !this.items().some(({ hidden }) => hidden()));
+        this.resultHidden = computed(() => this.hiddenItemIDs().size === 0);
         /**
          * Whether the overflow order should be reversed.
          * Also changes the position of the `resultTemplateRef`.
@@ -108,102 +106,70 @@ class KbqOverflowItems {
          * @default false
          */
         this.reverseOverflowOrder = input(false, { transform: booleanAttribute });
+        /**
+         * Debounce time for recalculating items visibility.
+         *
+         * @default 100
+         */
+        this.debounceTime = input(100, { transform: numberAttribute });
         this.elementRef = inject(ElementRef);
         this.resizeObserver = inject(SharedResizeObserver);
-        this.contentObserver = inject(ContentObserver);
-        toObservable(this.reverseOverflowOrder)
-            .pipe(skip(1), takeUntilDestroyed())
-            .subscribe(() => {
-            this.items().forEach(({ hidden }) => hidden.set(false));
-        });
-        merge(toObservable(this.items), this.resizeObserver.observe(this.elementRef.nativeElement), this.contentObserver.observe(this.elementRef.nativeElement).pipe(debounceTime(0)))
-            .pipe(takeUntilDestroyed())
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        /**
+         * Determines if the given item is hidden.
+         */
+        this.isHiddenItem = ({ hidden }) => hidden;
+        merge(toObservable(this.items), toObservable(this.reverseOverflowOrder).pipe(skip(1)), this.resizeObserver.observe(this.elementRef.nativeElement))
+            .pipe(debounceTime(this.debounceTime()), takeUntilDestroyed())
             .subscribe(() => {
-            this.updateItemsVisibility();
+            const items = this.items();
+            this.updateItemsVisibility(items, this.itemElementRefs(), this.reverseOverflowOrder(), this.resultElementRef(), this.elementRef.nativeElement);
+            this.hiddenItemIDs.set(new Set(items.filter(this.isHiddenItem).map(({ id }) => id())));
+            this.changeDetectorRef.markForCheck();
         });
     }
     /**
-     * Updates the visibility of items based on the container width.
-     *
-     * This method calculates whether items should be hidden or shown by comparing the scroll width of the container
-     * with its visible width. It determines which items are visible and which are hidden, and applies the hiding logic
-     * based on the `reverseOverflowOrder` flag.
-     *
-     * The function operates recursively to adjust the visibility of items until the overflow condition is resolved.
-     *
-     * - If the container is overflown, it hides the last visible item from the end (or start if `reverseOverflowOrder`)
-     * and checks if further adjustments are needed.
-     * - If the container is not overflown, it reveals the first hidden item from the start
-     * (or end if `reverseOverflowOrder`), ensuring it fits within the visible area.
+     * Updates items visibility, based on the container width and the `reverseOverflowOrder` flag.
      */
-    updateItemsVisibility() {
-        const itemElementRefs = this.itemElementRefs();
-        const items = this.items().map(({ hidden }, index, _items) => {
-            return {
-                hidden,
-                isFirst: index === 0,
-                isLast: index === _items.length - 1,
-                elementRef: itemElementRefs[index]
-            };
+    updateItemsVisibility(items, itemElementRefs, reverseOverflowOrder, resultElementRef, { offsetWidth: totalWidth }) {
+        items.forEach((item) => {
+            item.hidden = false;
         });
-        const reverseOverflowOrder = this.reverseOverflowOrder();
-        const isEdgeItem = ({ isFirst, isLast }) => (reverseOverflowOrder ? isFirst : isLast);
-        const { offsetWidth: totalWidth, scrollWidth } = this.elementRef.nativeElement;
-        const isOverflown = scrollWidth > totalWidth;
-        if (isOverflown) {
-            const isVisibleItem = ({ hidden }) => !hidden();
-            const lastVisibleItem = !reverseOverflowOrder
-                ? this.findLast(items, isVisibleItem)
-                : items.find(isVisibleItem);
-            if (lastVisibleItem) {
-                lastVisibleItem.hidden.set(true);
-                if (!isEdgeItem(lastVisibleItem)) {
-                    this.updateItemsVisibility();
-                }
+        let itemsWidth = items.reduce((width, _, index) => width + itemElementRefs[index].nativeElement.offsetWidth, 0);
+        const startIndex = reverseOverflowOrder ? 0 : items.length - 1;
+        const endIndex = reverseOverflowOrder ? items.length : -1;
+        const step = reverseOverflowOrder ? 1 : -1;
+        const resultWidth = resultElementRef?.nativeElement.offsetWidth || 0;
+        for (let index = startIndex; index !== endIndex; index += step) {
+            const current = items[index];
+            const currentWidth = itemElementRefs[index].nativeElement.offsetWidth;
+            const _resultWidth = items.some(this.isHiddenItem) ? resultWidth : 0;
+            if (itemsWidth + _resultWidth > totalWidth) {
+                current.hidden = true;
+                itemsWidth -= currentWidth;
             }
-        }
-        else {
-            const isHiddenItem = ({ hidden }) => hidden();
-            const firstHiddenItem = !reverseOverflowOrder
-                ? items.find(isHiddenItem)
-                : this.findLast(items, isHiddenItem);
-            if (firstHiddenItem) {
-                const firstHiddenItemWidth = firstHiddenItem.elementRef.nativeElement.offsetWidth;
-                const visibleItemsTotalWidth = items
-                    .filter(({ hidden }) => !hidden())
-                    .reduce((width, { elementRef }) => width + elementRef.nativeElement.offsetWidth, 0);
-                const _isEdgeItem = isEdgeItem(firstHiddenItem);
-                const resultWidth = _isEdgeItem ? 0 : this.resultElementRef()?.nativeElement.offsetWidth || 0;
-                if (firstHiddenItemWidth + visibleItemsTotalWidth + resultWidth <= totalWidth) {
-                    firstHiddenItem.hidden.set(false);
-                    if (!_isEdgeItem) {
-                        this.updateItemsVisibility();
-                    }
+            else {
+                const isEdgeElement = reverseOverflowOrder ? index === 0 : index === items.length - 1;
+                const _resultWidth = isEdgeElement ? 0 : resultWidth;
+                if (itemsWidth + currentWidth + _resultWidth <= totalWidth) {
+                    current.hidden = false;
+                    itemsWidth += currentWidth;
                 }
             }
         }
     }
-    /** @TODO Should use `Array.prototype.findLast` after migrating to ES2023 */
-    findLast(array, predicate) {
-        for (let i = array.length - 1; i >= 0; i--) {
-            if (predicate(array[i], i, array)) {
-                return array[i];
-            }
-        }
-        return undefined;
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqOverflowItems, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqOverflowItems, isStandalone: true, selector: "kbq-overflow-items", inputs: { reverseOverflowOrder: { classPropertyName: "reverseOverflowOrder", publicName: "reverseOverflowOrder", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kbq-overflow-items" }, queries: [{ propertyName: "items", predicate: KbqOverflowItem, isSignal: true }, { propertyName: "result", first: true, predicate: KbqOverflowItemsResult, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "itemElementRefs", predicate: ["itemRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "resultElementRef", first: true, predicate: ["resultRef"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqOverflowItems, isStandalone: true, selector: "kbq-overflow-items", inputs: { reverseOverflowOrder: { classPropertyName: "reverseOverflowOrder", publicName: "reverseOverflowOrder", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kbq-overflow-items" }, queries: [{ propertyName: "items", predicate: KbqOverflowItem, isSignal: true }, { propertyName: "result", first: true, predicate: KbqOverflowItemsResult, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "itemElementRefs", predicate: ["itemRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "resultElementRef", first: true, predicate: ["resultRef"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
         @if (reverseOverflowOrder()) {
             <ng-container [ngTemplateOutlet]="template" />
         }
 
-        @for (item of items(); track item.id()) {
+        @for (item of items(); track item) {
             <div
                 class="kbq-overflow-items__item"
                 #itemRef
-                [attr.aria-hidden]="item.hidden()"
-                [class.kbq-overflow-items__item_hidden]="item.hidden()"
+                [attr.aria-hidden]="item.hidden"
+                [class.kbq-overflow-items__item_hidden]="item.hidden"
             >
                 <ng-container [ngTemplateOutlet]="item.templateRef" />
             </div>
@@ -235,12 +201,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
             <ng-container [ngTemplateOutlet]="template" />
         }
 
-        @for (item of items(); track item.id()) {
+        @for (item of items(); track item) {
             <div
                 class="kbq-overflow-items__item"
                 #itemRef
-                [attr.aria-hidden]="item.hidden()"
-                [class.kbq-overflow-items__item_hidden]="item.hidden()"
+                [attr.aria-hidden]="item.hidden"
+                [class.kbq-overflow-items__item_hidden]="item.hidden"
             >
                 <ng-container [ngTemplateOutlet]="item.templateRef" />
             </div>

package/fesm2022/koobiq-components-overflow-items.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-overflow-items.mjs","sources":["../../../packages/components/overflow-items/overflow-items.ts","../../../packages/components/overflow-items/module.ts","../../../packages/components/overflow-items/koobiq-components-overflow-items.ts"],"sourcesContent":["import { ContentObserver } from '@angular/cdk/observers';\nimport { SharedResizeObserver } from '@angular/cdk/observers/private';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChild,\n    contentChildren,\n    Directive,\n    ElementRef,\n    inject,\n    input,\n    signal,\n    TemplateRef,\n    viewChild,\n    viewChildren\n} from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { debounceTime, merge, skip } from 'rxjs';\n\n/**\n * Template context for the `KbqOverflowItemsResult` directive.\n *\n * @see `KbqOverflowItemsResult`\n */\nexport type KbqOverflowItemsResultContext = {\n    /**\n     * Set of hidden item ID's.\n     *\n     * Example:\n     *\n     * ```html\n     * <ng-template kbqOverflowItemsResult let-hiddenItemIDs>\n     *  {{ hiddenItemIDs.size }}\n     * </ng-template>\n     * ````\n     */\n    $implicit: ReadonlySet<unknown>;\n    /**\n     * Set of hidden item ID's.\n     *\n     * Example:\n     *\n     * ```html\n     * <ng-template kbqOverflowItemsResult let-hiddenItemIDs=\"hiddenItemIDs\">\n     *  @if (hiddenItemIDs.has(SOME_ID)) {...}\n     * </ng-template>\n     * ````\n     */\n    hiddenItemIDs: ReadonlySet<unknown>;\n};\n\n/**\n * Directive for providing `KbqOverflowItemsResultContext` to the `KbqOverflowItems` component.\n *\n * @see `KbqOverflowItemsResultContext`\n */\n@Directive({\n    standalone: true,\n    selector: 'ng-template[kbqOverflowItemsResult]'\n})\nexport class KbqOverflowItemsResult {\n    /**\n     * TemplateRef for the overflow result.\n     *\n     * @docs-private\n     */\n    readonly templateRef = inject<TemplateRef<KbqOverflowItemsResultContext>>(TemplateRef);\n}\n\n/**\n * Structure directive for providing items to the `KbqOverflowItems`.\n */\n@Directive({\n    standalone: true,\n    selector: '[kbqOverflowItem]'\n})\nexport class KbqOverflowItem {\n    /**\n     * Identifier for the item.\n     */\n    readonly id = input.required({ alias: 'kbqOverflowItem' });\n\n    /**\n     * Whether the item is hidden.\n     *\n     * @docs-private\n     */\n    readonly hidden = signal<boolean>(false);\n\n    /**\n     * TemplateRef for the item.\n     *\n     * @docs-private\n     */\n    readonly templateRef = inject(TemplateRef);\n}\n\n/**\n * Component for automatically hiding elements with dynamic adaptation to the container width.\n */\n@Component({\n    standalone: true,\n    selector: 'kbq-overflow-items',\n    imports: [NgTemplateOutlet],\n    template: `\n        @if (reverseOverflowOrder()) {\n            <ng-container [ngTemplateOutlet]=\"template\" />\n        }\n\n        @for (item of items(); track item.id()) {\n            <div\n                class=\"kbq-overflow-items__item\"\n                #itemRef\n                [attr.aria-hidden]=\"item.hidden()\"\n                [class.kbq-overflow-items__item_hidden]=\"item.hidden()\"\n            >\n                <ng-container [ngTemplateOutlet]=\"item.templateRef\" />\n            </div>\n        }\n\n        @if (!reverseOverflowOrder()) {\n            <ng-container [ngTemplateOutlet]=\"template\" />\n        }\n\n        <ng-template #template>\n            <div\n                class=\"kbq-overflow-items__result\"\n                #resultRef\n                [attr.aria-hidden]=\"resultHidden()\"\n                [class.kbq-overflow-items__result_hidden]=\"resultHidden()\"\n            >\n                <ng-container\n                    [ngTemplateOutlet]=\"result()?.templateRef || null\"\n                    [ngTemplateOutletContext]=\"resultTemplateContext()\"\n                />\n            </div>\n        </ng-template>\n    `,\n    styleUrl: './overflow-items.scss',\n    host: {\n        class: 'kbq-overflow-items'\n    },\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class KbqOverflowItems {\n    private readonly itemElementRefs = viewChildren<string, ElementRef<HTMLElement>>('itemRef', { read: ElementRef });\n\n    /**\n     * `KbqOverflowItem` directive references.\n     *\n     * @docs-private\n     */\n    protected readonly items = contentChildren(KbqOverflowItem);\n\n    /**\n     * `KbqOverflowItemsResult` directive reference.\n     *\n     * @docs-private\n     */\n    protected readonly result = contentChild(KbqOverflowItemsResult);\n\n    private readonly resultElementRef = viewChild<string, ElementRef<HTMLElement>>('resultRef', { read: ElementRef });\n\n    /**\n     * Template context for the `KbqOverflowItemsResult` directive.\n     *\n     * @docs-private\n     */\n    protected readonly resultTemplateContext = computed<KbqOverflowItemsResultContext>(() => {\n        const hiddenItemIDs = new Set(\n            this.items()\n                .filter(({ hidden }) => hidden())\n                .map(({ id }) => id())\n        );\n        return {\n            $implicit: hiddenItemIDs,\n            hiddenItemIDs: hiddenItemIDs\n        };\n    });\n\n    /**\n     * Whether the overflow result is hidden.\n     *\n     * @docs-private\n     */\n    protected readonly resultHidden = computed(() => !this.items().some(({ hidden }) => hidden()));\n\n    /**\n     * Whether the overflow order should be reversed.\n     * Also changes the position of the `resultTemplateRef`.\n     *\n     * @default false\n     */\n    readonly reverseOverflowOrder = input(false, { transform: booleanAttribute });\n\n    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n    private readonly resizeObserver = inject(SharedResizeObserver);\n    private readonly contentObserver = inject(ContentObserver);\n\n    constructor() {\n        toObservable(this.reverseOverflowOrder)\n            .pipe(skip(1), takeUntilDestroyed())\n            .subscribe(() => {\n                this.items().forEach(({ hidden }) => hidden.set(false));\n            });\n\n        merge(\n            toObservable(this.items),\n            this.resizeObserver.observe(this.elementRef.nativeElement),\n            this.contentObserver.observe(this.elementRef.nativeElement).pipe(debounceTime(0))\n        )\n            .pipe(takeUntilDestroyed())\n            .subscribe(() => {\n                this.updateItemsVisibility();\n            });\n    }\n\n    /**\n     * Updates the visibility of items based on the container width.\n     *\n     * This method calculates whether items should be hidden or shown by comparing the scroll width of the container\n     * with its visible width. It determines which items are visible and which are hidden, and applies the hiding logic\n     * based on the `reverseOverflowOrder` flag.\n     *\n     * The function operates recursively to adjust the visibility of items until the overflow condition is resolved.\n     *\n     * - If the container is overflown, it hides the last visible item from the end (or start if `reverseOverflowOrder`)\n     * and checks if further adjustments are needed.\n     * - If the container is not overflown, it reveals the first hidden item from the start\n     * (or end if `reverseOverflowOrder`), ensuring it fits within the visible area.\n     */\n    private updateItemsVisibility(): void {\n        const itemElementRefs = this.itemElementRefs();\n        const items = this.items().map(({ hidden }, index, _items) => {\n            return {\n                hidden,\n                isFirst: index === 0,\n                isLast: index === _items.length - 1,\n                elementRef: itemElementRefs[index]\n            };\n        });\n        const reverseOverflowOrder = this.reverseOverflowOrder();\n        const isEdgeItem = ({ isFirst, isLast }: (typeof items)[number]) => (reverseOverflowOrder ? isFirst : isLast);\n        const { offsetWidth: totalWidth, scrollWidth } = this.elementRef.nativeElement;\n        const isOverflown = scrollWidth > totalWidth;\n        if (isOverflown) {\n            const isVisibleItem = ({ hidden }: (typeof items)[number]) => !hidden();\n            const lastVisibleItem = !reverseOverflowOrder\n                ? this.findLast(items, isVisibleItem)\n                : items.find(isVisibleItem);\n            if (lastVisibleItem) {\n                lastVisibleItem.hidden.set(true);\n                if (!isEdgeItem(lastVisibleItem)) {\n                    this.updateItemsVisibility();\n                }\n            }\n        } else {\n            const isHiddenItem = ({ hidden }: (typeof items)[number]) => hidden();\n            const firstHiddenItem = !reverseOverflowOrder\n                ? items.find(isHiddenItem)\n                : this.findLast(items, isHiddenItem);\n            if (firstHiddenItem) {\n                const firstHiddenItemWidth = firstHiddenItem.elementRef.nativeElement.offsetWidth;\n                const visibleItemsTotalWidth = items\n                    .filter(({ hidden }) => !hidden())\n                    .reduce((width, { elementRef }) => width + elementRef.nativeElement.offsetWidth, 0);\n                const _isEdgeItem = isEdgeItem(firstHiddenItem);\n                const resultWidth = _isEdgeItem ? 0 : this.resultElementRef()?.nativeElement.offsetWidth || 0;\n                if (firstHiddenItemWidth + visibleItemsTotalWidth + resultWidth <= totalWidth) {\n                    firstHiddenItem.hidden.set(false);\n                    if (!_isEdgeItem) {\n                        this.updateItemsVisibility();\n                    }\n                }\n            }\n        }\n    }\n\n    /** @TODO Should use `Array.prototype.findLast` after migrating to ES2023 */\n    private findLast<T>(array: T[], predicate: (value: T, index: number, array: T[]) => boolean): T | undefined {\n        for (let i = array.length - 1; i >= 0; i--) {\n            if (predicate(array[i], i, array)) {\n                return array[i];\n            }\n        }\n        return undefined;\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { KbqOverflowItem, KbqOverflowItems, KbqOverflowItemsResult } from './overflow-items';\n\nconst COMPONENTS = [\n    KbqOverflowItems,\n    KbqOverflowItem,\n    KbqOverflowItemsResult\n];\n\n@NgModule({\n    imports: COMPONENTS,\n    exports: COMPONENTS\n})\nexport class KbqOverflowItemsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"koobiq-components-overflow-items.mjs","sources":["../../../packages/components/overflow-items/overflow-items.ts","../../../packages/components/overflow-items/module.ts","../../../packages/components/overflow-items/koobiq-components-overflow-items.ts"],"sourcesContent":["import { SharedResizeObserver } from '@angular/cdk/observers/private';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    computed,\n    contentChild,\n    contentChildren,\n    Directive,\n    ElementRef,\n    inject,\n    input,\n    numberAttribute,\n    signal,\n    TemplateRef,\n    viewChild,\n    viewChildren\n} from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { debounceTime, merge, skip } from 'rxjs';\n\n/**\n * Template context for the `KbqOverflowItemsResult` directive.\n *\n * @see `KbqOverflowItemsResult`\n */\nexport type KbqOverflowItemsResultContext = {\n    /**\n     * Set of hidden item ID's.\n     *\n     * Example:\n     *\n     * ```html\n     * <ng-template kbqOverflowItemsResult let-hiddenItemIDs>\n     *  {{ hiddenItemIDs.size }}\n     * </ng-template>\n     * ````\n     */\n    $implicit: ReadonlySet<unknown>;\n    /**\n     * Set of hidden item ID's.\n     *\n     * Example:\n     *\n     * ```html\n     * <ng-template kbqOverflowItemsResult let-hiddenItemIDs=\"hiddenItemIDs\">\n     *  @if (hiddenItemIDs.has(SOME_ID)) {...}\n     * </ng-template>\n     * ````\n     */\n    hiddenItemIDs: ReadonlySet<unknown>;\n};\n\n/**\n * Directive for providing `KbqOverflowItemsResultContext` to the `KbqOverflowItems` component.\n *\n * @see `KbqOverflowItemsResultContext`\n */\n@Directive({\n    standalone: true,\n    selector: 'ng-template[kbqOverflowItemsResult]'\n})\nexport class KbqOverflowItemsResult {\n    /**\n     * TemplateRef for the overflow result.\n     *\n     * @docs-private\n     */\n    readonly templateRef = inject<TemplateRef<KbqOverflowItemsResultContext>>(TemplateRef);\n}\n\n/**\n * Structure directive for providing items to the `KbqOverflowItems`.\n */\n@Directive({\n    standalone: true,\n    selector: '[kbqOverflowItem]'\n})\nexport class KbqOverflowItem {\n    /**\n     * Identifier for the item.\n     */\n    readonly id = input.required({ alias: 'kbqOverflowItem' });\n\n    /**\n     * Whether the item is hidden.\n     *\n     * @docs-private\n     */\n    hidden: boolean = false;\n\n    /**\n     * TemplateRef for the item.\n     *\n     * @docs-private\n     */\n    readonly templateRef = inject(TemplateRef);\n}\n\n/**\n * Component for automatically hiding elements with dynamic adaptation to the container width.\n */\n@Component({\n    standalone: true,\n    selector: 'kbq-overflow-items',\n    imports: [NgTemplateOutlet],\n    template: `\n        @if (reverseOverflowOrder()) {\n            <ng-container [ngTemplateOutlet]=\"template\" />\n        }\n\n        @for (item of items(); track item) {\n            <div\n                class=\"kbq-overflow-items__item\"\n                #itemRef\n                [attr.aria-hidden]=\"item.hidden\"\n                [class.kbq-overflow-items__item_hidden]=\"item.hidden\"\n            >\n                <ng-container [ngTemplateOutlet]=\"item.templateRef\" />\n            </div>\n        }\n\n        @if (!reverseOverflowOrder()) {\n            <ng-container [ngTemplateOutlet]=\"template\" />\n        }\n\n        <ng-template #template>\n            <div\n                class=\"kbq-overflow-items__result\"\n                #resultRef\n                [attr.aria-hidden]=\"resultHidden()\"\n                [class.kbq-overflow-items__result_hidden]=\"resultHidden()\"\n            >\n                <ng-container\n                    [ngTemplateOutlet]=\"result()?.templateRef || null\"\n                    [ngTemplateOutletContext]=\"resultTemplateContext()\"\n                />\n            </div>\n        </ng-template>\n    `,\n    styleUrl: './overflow-items.scss',\n    host: {\n        class: 'kbq-overflow-items'\n    },\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class KbqOverflowItems {\n    private readonly itemElementRefs = viewChildren<string, ElementRef<HTMLElement>>('itemRef', { read: ElementRef });\n\n    /**\n     * `KbqOverflowItem` directive references.\n     *\n     * @docs-private\n     */\n    protected readonly items = contentChildren(KbqOverflowItem);\n\n    /**\n     * `KbqOverflowItemsResult` directive reference.\n     *\n     * @docs-private\n     */\n    protected readonly result = contentChild(KbqOverflowItemsResult);\n\n    private readonly resultElementRef = viewChild<string, ElementRef<HTMLElement>>('resultRef', { read: ElementRef });\n\n    /**\n     * Template context for the `KbqOverflowItemsResult` directive.\n     *\n     * @docs-private\n     */\n    protected readonly resultTemplateContext = computed<KbqOverflowItemsResultContext>(() => {\n        const hiddenItemIDs = this.hiddenItemIDs();\n        return {\n            $implicit: hiddenItemIDs,\n            hiddenItemIDs: hiddenItemIDs\n        };\n    });\n\n    private readonly hiddenItemIDs = signal<ReadonlySet<unknown>>(new Set([]));\n\n    /**\n     * Whether the overflow result is hidden.\n     *\n     * @docs-private\n     */\n    protected readonly resultHidden = computed(() => this.hiddenItemIDs().size === 0);\n\n    /**\n     * Whether the overflow order should be reversed.\n     * Also changes the position of the `resultTemplateRef`.\n     *\n     * @default false\n     */\n    readonly reverseOverflowOrder = input(false, { transform: booleanAttribute });\n\n    /**\n     * Debounce time for recalculating items visibility.\n     *\n     * @default 100\n     */\n    readonly debounceTime = input(100, { transform: numberAttribute });\n\n    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n    private readonly resizeObserver = inject(SharedResizeObserver);\n    private readonly changeDetectorRef = inject(ChangeDetectorRef);\n\n    constructor() {\n        merge(\n            toObservable(this.items),\n            toObservable(this.reverseOverflowOrder).pipe(skip(1)),\n            this.resizeObserver.observe(this.elementRef.nativeElement)\n        )\n            .pipe(debounceTime(this.debounceTime()), takeUntilDestroyed())\n            .subscribe(() => {\n                const items = this.items();\n                this.updateItemsVisibility(\n                    items,\n                    this.itemElementRefs(),\n                    this.reverseOverflowOrder(),\n                    this.resultElementRef(),\n                    this.elementRef.nativeElement\n                );\n                this.hiddenItemIDs.set(new Set(items.filter(this.isHiddenItem).map(({ id }) => id())));\n                this.changeDetectorRef.markForCheck();\n            });\n    }\n\n    /**\n     * Updates items visibility, based on the container width and the `reverseOverflowOrder` flag.\n     */\n    private updateItemsVisibility(\n        items: readonly KbqOverflowItem[],\n        itemElementRefs: readonly ElementRef<HTMLElement>[],\n        reverseOverflowOrder: boolean,\n        resultElementRef: ElementRef<HTMLElement> | undefined,\n        { offsetWidth: totalWidth }: HTMLElement\n    ): void {\n        items.forEach((item) => {\n            item.hidden = false;\n        });\n        let itemsWidth = items.reduce((width, _, index) => width + itemElementRefs[index].nativeElement.offsetWidth, 0);\n        const startIndex = reverseOverflowOrder ? 0 : items.length - 1;\n        const endIndex = reverseOverflowOrder ? items.length : -1;\n        const step = reverseOverflowOrder ? 1 : -1;\n        const resultWidth = resultElementRef?.nativeElement.offsetWidth || 0;\n        for (let index = startIndex; index !== endIndex; index += step) {\n            const current = items[index];\n            const currentWidth = itemElementRefs[index].nativeElement.offsetWidth;\n            const _resultWidth = items.some(this.isHiddenItem) ? resultWidth : 0;\n            if (itemsWidth + _resultWidth > totalWidth) {\n                current.hidden = true;\n                itemsWidth -= currentWidth;\n            } else {\n                const isEdgeElement = reverseOverflowOrder ? index === 0 : index === items.length - 1;\n                const _resultWidth = isEdgeElement ? 0 : resultWidth;\n                if (itemsWidth + currentWidth + _resultWidth <= totalWidth) {\n                    current.hidden = false;\n                    itemsWidth += currentWidth;\n                }\n            }\n        }\n    }\n\n    /**\n     * Determines if the given item is hidden.\n     */\n    private isHiddenItem = ({ hidden }: KbqOverflowItem) => hidden;\n}\n","import { NgModule } from '@angular/core';\nimport { KbqOverflowItem, KbqOverflowItems, KbqOverflowItemsResult } from './overflow-items';\n\nconst COMPONENTS = [\n    KbqOverflowItems,\n    KbqOverflowItem,\n    KbqOverflowItemsResult\n];\n\n@NgModule({\n    imports: COMPONENTS,\n    exports: COMPONENTS\n})\nexport class KbqOverflowItemsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAuDA;;;;AAIG;MAKU,sBAAsB,CAAA;AAJnC,IAAA,WAAA,GAAA;AAKI;;;;AAIG;AACM,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAA6C,WAAW,CAAC,CAAC;AAC1F,KAAA;iIAPY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;qHAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qCAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAJlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,qCAAqC;AAClD,iBAAA,CAAA;;AAUD;;AAEG;MAKU,eAAe,CAAA;AAJ5B,IAAA,WAAA,GAAA;AAKI;;AAEG;QACM,IAAE,CAAA,EAAA,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC,CAAC;AAE3D;;;;AAIG;QACH,IAAM,CAAA,MAAA,GAAY,KAAK,CAAC;AAExB;;;;AAIG;AACM,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;AAC9C,KAAA;iIAnBY,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;qHAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,mBAAmB;AAChC,iBAAA,CAAA;;AAsBD;;AAEG;MA6CU,gBAAgB,CAAA;AA4DzB,IAAA,WAAA,GAAA;QA3DiB,IAAe,CAAA,eAAA,GAAG,YAAY,CAAkC,SAAS,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;AAElH;;;;AAIG;AACgB,QAAA,IAAA,CAAA,KAAK,GAAG,eAAe,CAAC,eAAe,CAAC,CAAC;AAE5D;;;;AAIG;AACgB,QAAA,IAAA,CAAA,MAAM,GAAG,YAAY,CAAC,sBAAsB,CAAC,CAAC;QAEhD,IAAgB,CAAA,gBAAA,GAAG,SAAS,CAAkC,WAAW,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;AAElH;;;;AAIG;AACgB,QAAA,IAAA,CAAA,qBAAqB,GAAG,QAAQ,CAAgC,MAAK;AACpF,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAC3C,OAAO;AACH,gBAAA,SAAS,EAAE,aAAa;AACxB,gBAAA,aAAa,EAAE,aAAa;aAC/B,CAAC;AACN,SAAC,CAAC,CAAC;QAEc,IAAa,CAAA,aAAA,GAAG,MAAM,CAAuB,IAAI,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;AAE3E;;;;AAIG;AACgB,QAAA,IAAA,CAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC;AAElF;;;;;AAKG;QACM,IAAoB,CAAA,oBAAA,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,CAAC;AAE9E;;;;AAIG;QACM,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC,CAAC;AAElD,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC;AACzD,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC;AAC9C,QAAA,IAAA,CAAA,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;AA2D/D;;AAEG;QACK,IAAY,CAAA,YAAA,GAAG,CAAC,EAAE,MAAM,EAAmB,KAAK,MAAM,CAAC;AA3D3D,QAAA,KAAK,CACD,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,EACxB,YAAY,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EACrD,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,CAC7D;aACI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,kBAAkB,EAAE,CAAC;aAC7D,SAAS,CAAC,MAAK;AACZ,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,qBAAqB,CACtB,KAAK,EACL,IAAI,CAAC,eAAe,EAAE,EACtB,IAAI,CAAC,oBAAoB,EAAE,EAC3B,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,UAAU,CAAC,aAAa,CAChC,CAAC;AACF,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;AACvF,YAAA,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,CAAC;AAC1C,SAAC,CAAC,CAAC;KACV;AAED;;AAEG;AACK,IAAA,qBAAqB,CACzB,KAAiC,EACjC,eAAmD,EACnD,oBAA6B,EAC7B,gBAAqD,EACrD,EAAE,WAAW,EAAE,UAAU,EAAe,EAAA;AAExC,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACnB,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AACxB,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;AAChH,QAAA,MAAM,UAAU,GAAG,oBAAoB,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;AAC/D,QAAA,MAAM,QAAQ,GAAG,oBAAoB,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AAC1D,QAAA,MAAM,IAAI,GAAG,oBAAoB,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAC3C,MAAM,WAAW,GAAG,gBAAgB,EAAE,aAAa,CAAC,WAAW,IAAI,CAAC,CAAC;AACrE,QAAA,KAAK,IAAI,KAAK,GAAG,UAAU,EAAE,KAAK,KAAK,QAAQ,EAAE,KAAK,IAAI,IAAI,EAAE;AAC5D,YAAA,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;YAC7B,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC;AACtE,YAAA,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,WAAW,GAAG,CAAC,CAAC;AACrE,YAAA,IAAI,UAAU,GAAG,YAAY,GAAG,UAAU,EAAE;AACxC,gBAAA,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;gBACtB,UAAU,IAAI,YAAY,CAAC;aAC9B;iBAAM;AACH,gBAAA,MAAM,aAAa,GAAG,oBAAoB,GAAG,KAAK,KAAK,CAAC,GAAG,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;gBACtF,MAAM,YAAY,GAAG,aAAa,GAAG,CAAC,GAAG,WAAW,CAAC;gBACrD,IAAI,UAAU,GAAG,YAAY,GAAG,YAAY,IAAI,UAAU,EAAE;AACxD,oBAAA,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC;oBACvB,UAAU,IAAI,YAAY,CAAC;iBAC9B;aACJ;SACJ;KACJ;iIAnHQ,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;qHAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,oBAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,OAAA,EAAA,SAAA,EAQkB,eAAe,EAOjB,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,sBAAsB,0IAdqC,UAAU,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAgBV,UAAU,EAzDpG,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCT,IAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,mdAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAlCS,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAyCjB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBA5C5B,SAAS;AACM,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,YACN,oBAAoB,EAAA,OAAA,EACrB,CAAC,gBAAgB,CAAC,EACjB,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCT,EAEK,IAAA,EAAA;AACF,wBAAA,KAAK,EAAE,oBAAoB;qBAC9B,EACgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,mdAAA,CAAA,EAAA,CAAA;;;AC/InD,MAAM,UAAU,GAAG;IACf,gBAAgB;IAChB,eAAe;IACf,sBAAsB;CACzB,CAAC;MAMW,sBAAsB,CAAA;iIAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAtB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,sBAAsB,YAT/B,gBAAgB;YAChB,eAAe;AACf,YAAA,sBAAsB,aAFtB,gBAAgB;YAChB,eAAe;YACf,sBAAsB,CAAA,EAAA,CAAA,CAAA,EAAA;kIAOb,sBAAsB,EAAA,CAAA,CAAA,EAAA;;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAJlC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE,UAAU;AACnB,oBAAA,OAAO,EAAE,UAAU;AACtB,iBAAA,CAAA;;;ACZD;;AAEG;;;;"}

package/fesm2022/koobiq-components-tree-select.mjs

@@ -788,7 +788,7 @@ class KbqTreeSelect extends KbqTreeSelectMixinBase {
             { provide: KbqFormFieldControl, useExisting: KbqTreeSelect },
             { provide: KbqTree, useExisting: KbqTreeSelect },
             { provide: KBQ_PARENT_POPUP, useExisting: KbqTreeSelect }
-        ], queries: [{ propertyName: "cleaner", first: true, predicate: ["kbqSelectCleaner"], descendants: true, static: 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: "tree", first: true, predicate: KbqTreeSelection, descendants: true }, { propertyName: "search", first: true, predicate: KbqSelectSearch, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqTreeSelect"], usesInheritance: true, usesOnChanges: 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_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            }\n            @if (!empty) {\n                <span>\n                    @if (!!customTrigger) {\n                        <ng-content select=\"kbq-select-trigger\" />\n                    } @else {\n                        <div class=\"kbq-select__match-container\">\n                            @if (multiple) {\n                                <div class=\"kbq-select__match-list\">\n                                    @if (!customTagTemplateRef) {\n                                        @for (option of triggerValues; track option) {\n                                            <kbq-tag\n                                                [class.kbq-error]=\"errorState\"\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)=\"onRemoveSelectedOption(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]=\"customTagTemplateRef\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                            />\n                                        }\n                                    }\n                                </div>\n                            } @else {\n                                <span class=\"kbq-select__matcher-text\">\n                                    {{ triggerValue }}\n                                </span>\n                            }\n                            <div\n                                class=\"kbq-select__match-hidden-text\"\n                                [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n                            >\n                                {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n                            </div>\n                        </div>\n                    }\n                </span>\n            }\n\n            @if (canShowCleaner) {\n                <div class=\"kbq-select__cleaner\" (click)=\"clearValue($event)\">\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i color=\"contrast-fade\" kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\"></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>\n    <div\n        #panel\n        cdkMonitorSubtreeFocus\n        class=\"kbq-tree-select__panel {{ getPanelTheme() }}\"\n        [ngClass]=\"panelClass\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.transformOrigin]=\"transformOrigin\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        @if (search) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div\n            #optionsContainer\n            class=\"kbq-tree-select__content kbq-scrollbar\"\n            (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n            [@fadeInContent]=\"'showing'\"\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\n            <ng-content select=\"kbq-tree-selection\" />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-tree-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-tree-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-tree-select .kbq-select__matcher{display:flex;align-items:center;width:100%;overflow:hidden;white-space:nowrap}.kbq-tree-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-tree-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-size-border-width) * 2)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-left, var(--kbq-size-m)) - var(--kbq-size-border-width))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:calc(var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-left, var(--kbq-size-xxs)) - var(--kbq-size-border-width))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-tree-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-size-3xl)) - var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 2);max-height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 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-tree-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-tree-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-tree-select .kbq-select__arrow-wrapper{display:flex;align-self:center;padding:4px}.kbq-form-field-appearance-fill .kbq-tree-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-tree-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-tree-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-tree-select__panel .kbq-optgroup-label,.kbq-tree-select__panel .kbq-option{font-size:inherit}.kbq-tree-select__panel .kbq-select__no-options-message{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-tree-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-tree-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-tree-select__panel .kbq-select__footer{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-tree-select__content .kbq-tree-selection{height:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-tree-select{color:var(--kbq-foreground-contrast)}.kbq-tree-select.ng-invalid{color:var(--kbq-error-default)}.kbq-tree-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-states-foreground-disabled)}.kbq-tree-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-tree-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-tree-select,.kbq-tree-select__panel{font-size:var(--kbq-typography-text-normal-font-size);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-tree-select__panel{--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}.kbq-tree-select__panel .kbq-tree-selection{--kbq-tree-option-border-radius: var(--kbq-size-xs)}\n"], dependencies: [{ kind: "directive", type: i5.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: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i7.KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: ["color", "selected", "value", "selectable", "removable", "tabindex", "disabled"], outputs: ["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: [
+        ], queries: [{ propertyName: "cleaner", first: true, predicate: ["kbqSelectCleaner"], descendants: true, static: 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: "tree", first: true, predicate: KbqTreeSelection, descendants: true }, { propertyName: "search", first: true, predicate: KbqSelectSearch, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqTreeSelect"], usesInheritance: true, usesOnChanges: 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_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            }\n            @if (!empty) {\n                <span>\n                    @if (!!customTrigger) {\n                        <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" />\n                    } @else {\n                        <div class=\"kbq-select__match-container\">\n                            @if (multiple) {\n                                <div class=\"kbq-select__match-list\">\n                                    @if (!customTagTemplateRef) {\n                                        @for (option of triggerValues; track option) {\n                                            <kbq-tag\n                                                [class.kbq-error]=\"errorState\"\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)=\"onRemoveSelectedOption(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]=\"customTagTemplateRef\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                            />\n                                        }\n                                    }\n                                </div>\n                            } @else {\n                                <span class=\"kbq-select__matcher-text\">\n                                    {{ triggerValue }}\n                                </span>\n                            }\n                            <div\n                                class=\"kbq-select__match-hidden-text\"\n                                [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n                            >\n                                {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n                            </div>\n                        </div>\n                    }\n                </span>\n            }\n\n            @if (canShowCleaner) {\n                <div class=\"kbq-select__cleaner\" (click)=\"clearValue($event)\">\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i color=\"contrast-fade\" kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\"></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>\n    <div\n        #panel\n        cdkMonitorSubtreeFocus\n        class=\"kbq-tree-select__panel {{ getPanelTheme() }}\"\n        [ngClass]=\"panelClass\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.transformOrigin]=\"transformOrigin\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        @if (search) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div\n            #optionsContainer\n            class=\"kbq-tree-select__content kbq-scrollbar\"\n            (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n            [@fadeInContent]=\"'showing'\"\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\n            <ng-content select=\"kbq-tree-selection\" />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-tree-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-tree-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-tree-select .kbq-select__matcher{display:flex;align-items:center;width:100%;overflow:hidden;white-space:nowrap}.kbq-tree-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-tree-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-size-border-width) * 2)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-left, var(--kbq-size-m)) - var(--kbq-size-border-width))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:calc(var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-left, var(--kbq-size-xxs)) - var(--kbq-size-border-width))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-tree-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-size-3xl)) - var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 2);max-height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 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-tree-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-tree-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-tree-select .kbq-select__arrow-wrapper{display:flex;align-self:center;padding:4px}.kbq-form-field-appearance-fill .kbq-tree-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-tree-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-tree-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-tree-select__panel .kbq-optgroup-label,.kbq-tree-select__panel .kbq-option{font-size:inherit}.kbq-tree-select__panel .kbq-select__no-options-message{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-tree-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-tree-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-tree-select__panel .kbq-select__footer{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-tree-select__content .kbq-tree-selection{height:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-tree-select{color:var(--kbq-foreground-contrast)}.kbq-tree-select.ng-invalid{color:var(--kbq-error-default)}.kbq-tree-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-states-foreground-disabled)}.kbq-tree-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-tree-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-tree-select,.kbq-tree-select__panel{font-size:var(--kbq-typography-text-normal-font-size);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-tree-select__panel{--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}.kbq-tree-select__panel .kbq-tree-selection{--kbq-tree-option-border-radius: var(--kbq-size-xs)}\n"], dependencies: [{ kind: "directive", type: i5.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: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i7.KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: ["color", "selected", "value", "selectable", "removable", "tabindex", "disabled"], outputs: ["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 }); }
@@ -813,7 +813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
                         { provide: KbqFormFieldControl, useExisting: KbqTreeSelect },
                         { provide: KbqTree, useExisting: KbqTreeSelect },
                         { provide: KBQ_PARENT_POPUP, useExisting: KbqTreeSelect }
-                    ], 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_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            }\n            @if (!empty) {\n                <span>\n                    @if (!!customTrigger) {\n                        <ng-content select=\"kbq-select-trigger\" />\n                    } @else {\n                        <div class=\"kbq-select__match-container\">\n                            @if (multiple) {\n                                <div class=\"kbq-select__match-list\">\n                                    @if (!customTagTemplateRef) {\n                                        @for (option of triggerValues; track option) {\n                                            <kbq-tag\n                                                [class.kbq-error]=\"errorState\"\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)=\"onRemoveSelectedOption(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]=\"customTagTemplateRef\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                            />\n                                        }\n                                    }\n                                </div>\n                            } @else {\n                                <span class=\"kbq-select__matcher-text\">\n                                    {{ triggerValue }}\n                                </span>\n                            }\n                            <div\n                                class=\"kbq-select__match-hidden-text\"\n                                [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n                            >\n                                {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n                            </div>\n                        </div>\n                    }\n                </span>\n            }\n\n            @if (canShowCleaner) {\n                <div class=\"kbq-select__cleaner\" (click)=\"clearValue($event)\">\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i color=\"contrast-fade\" kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\"></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>\n    <div\n        #panel\n        cdkMonitorSubtreeFocus\n        class=\"kbq-tree-select__panel {{ getPanelTheme() }}\"\n        [ngClass]=\"panelClass\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.transformOrigin]=\"transformOrigin\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        @if (search) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div\n            #optionsContainer\n            class=\"kbq-tree-select__content kbq-scrollbar\"\n            (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n            [@fadeInContent]=\"'showing'\"\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\n            <ng-content select=\"kbq-tree-selection\" />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-tree-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-tree-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-tree-select .kbq-select__matcher{display:flex;align-items:center;width:100%;overflow:hidden;white-space:nowrap}.kbq-tree-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-tree-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-size-border-width) * 2)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-left, var(--kbq-size-m)) - var(--kbq-size-border-width))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:calc(var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-left, var(--kbq-size-xxs)) - var(--kbq-size-border-width))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-tree-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-size-3xl)) - var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 2);max-height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 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-tree-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-tree-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-tree-select .kbq-select__arrow-wrapper{display:flex;align-self:center;padding:4px}.kbq-form-field-appearance-fill .kbq-tree-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-tree-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-tree-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-tree-select__panel .kbq-optgroup-label,.kbq-tree-select__panel .kbq-option{font-size:inherit}.kbq-tree-select__panel .kbq-select__no-options-message{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-tree-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-tree-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-tree-select__panel .kbq-select__footer{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-tree-select__content .kbq-tree-selection{height:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-tree-select{color:var(--kbq-foreground-contrast)}.kbq-tree-select.ng-invalid{color:var(--kbq-error-default)}.kbq-tree-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-states-foreground-disabled)}.kbq-tree-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-tree-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-tree-select,.kbq-tree-select__panel{font-size:var(--kbq-typography-text-normal-font-size);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-tree-select__panel{--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}.kbq-tree-select__panel .kbq-tree-selection{--kbq-tree-option-border-radius: var(--kbq-size-xs)}\n"] }]
+                    ], 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_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            }\n            @if (!empty) {\n                <span>\n                    @if (!!customTrigger) {\n                        <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" />\n                    } @else {\n                        <div class=\"kbq-select__match-container\">\n                            @if (multiple) {\n                                <div class=\"kbq-select__match-list\">\n                                    @if (!customTagTemplateRef) {\n                                        @for (option of triggerValues; track option) {\n                                            <kbq-tag\n                                                [class.kbq-error]=\"errorState\"\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)=\"onRemoveSelectedOption(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]=\"customTagTemplateRef\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                            />\n                                        }\n                                    }\n                                </div>\n                            } @else {\n                                <span class=\"kbq-select__matcher-text\">\n                                    {{ triggerValue }}\n                                </span>\n                            }\n                            <div\n                                class=\"kbq-select__match-hidden-text\"\n                                [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n                            >\n                                {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n                            </div>\n                        </div>\n                    }\n                </span>\n            }\n\n            @if (canShowCleaner) {\n                <div class=\"kbq-select__cleaner\" (click)=\"clearValue($event)\">\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i color=\"contrast-fade\" kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\"></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>\n    <div\n        #panel\n        cdkMonitorSubtreeFocus\n        class=\"kbq-tree-select__panel {{ getPanelTheme() }}\"\n        [ngClass]=\"panelClass\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.transformOrigin]=\"transformOrigin\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        @if (search) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div\n            #optionsContainer\n            class=\"kbq-tree-select__content kbq-scrollbar\"\n            (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n            [@fadeInContent]=\"'showing'\"\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\n            <ng-content select=\"kbq-tree-selection\" />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-tree-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-tree-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-tree-select .kbq-select__matcher{display:flex;align-items:center;width:100%;overflow:hidden;white-space:nowrap}.kbq-tree-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-tree-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-size-border-width) * 2)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-left, var(--kbq-size-m)) - var(--kbq-size-border-width))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:calc(var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-left, var(--kbq-size-xxs)) - var(--kbq-size-border-width))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-tree-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-size-3xl)) - var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 2);max-height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 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-tree-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-tree-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-tree-select .kbq-select__arrow-wrapper{display:flex;align-self:center;padding:4px}.kbq-form-field-appearance-fill .kbq-tree-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-tree-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-tree-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-tree-select__panel .kbq-optgroup-label,.kbq-tree-select__panel .kbq-option{font-size:inherit}.kbq-tree-select__panel .kbq-select__no-options-message{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-tree-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-tree-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-tree-select__panel .kbq-select__footer{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-tree-select__content .kbq-tree-selection{height:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-tree-select{color:var(--kbq-foreground-contrast)}.kbq-tree-select.ng-invalid{color:var(--kbq-error-default)}.kbq-tree-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-states-foreground-disabled)}.kbq-tree-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-tree-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-tree-select,.kbq-tree-select__panel{font-size:var(--kbq-typography-text-normal-font-size);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-tree-select__panel{--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}.kbq-tree-select__panel .kbq-tree-selection{--kbq-tree-option-border-radius: var(--kbq-size-xs)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ErrorStateMatcher }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [KBQ_SELECT_SCROLL_STRATEGY]