@koobiq/components 20.4.4 → 20.4.5

package/fesm2022/koobiq-components-filter-bar.mjs

@@ -33,7 +33,7 @@ import * as i5 from '@koobiq/components/form-field';
 import * as i6 from '@koobiq/components/badge';
 import { KbqBadgeModule } from '@koobiq/components/badge';
 import * as i3$1 from '@koobiq/components/select';
-import { KbqSelect, KbqSelectModule } from '@koobiq/components/select';
+import { KbqSelect, KbqSelectModule, KbqSelectNoOptions } from '@koobiq/components/select';
 import * as i7$1 from '@koobiq/components/tree';
 import { KbqTreeFlattener, FlatTreeControl, KbqTreeFlatDataSource, kbqTreeSelectAllValue, KbqTreeSelection, KbqTreeModule } from '@koobiq/components/tree';
 import * as i8$1 from '@koobiq/components/tree-select';
@@ -65,6 +65,20 @@ class KbqBasePipe {
     get localeData() {
         return this.filterBar?.configuration ?? KBQ_FILTER_BAR_DEFAULT_CONFIGURATION;
     }
+    /**
+     * Whether the pipe template provides no values to choose from. Only consumed by the select-family pipe
+     * components, which then show `noOptionsMessage` instead of the list.
+     */
+    get noOptions() {
+        return !this.values?.length;
+    }
+    /**
+     * Message the select-family pipe components show when there are no options. A consumer-supplied
+     * configuration may predate `pipe.noOptions`, so the default configuration backs it up.
+     */
+    get noOptionsMessage() {
+        return (this.noOptionsText || this.localeData.pipe.noOptions || KBQ_FILTER_BAR_DEFAULT_CONFIGURATION.pipe.noOptions);
+    }
     constructor() {
         /** changes of state */
         this.stateChanges = new Subject();
@@ -105,13 +119,14 @@ class KbqBasePipe {
             // Sync the comparator whenever a matching template is present, independently of `values`, so a
             // template that sets/updates/removes `compareWith` (or omits `values`) is never left with a stale
             // comparator. Absent `compareWith` resets to the pipe's default id-based `compareByValue`.
-            // `lockedValues`, `panelMaxHeight` and `multilineOptions` are synced on the same terms, and for
-            // the same reason.
+            // `lockedValues`, `panelMaxHeight`, `multilineOptions` and `noOptionsText` are synced on the same
+            // terms, and for the same reason.
             if (template) {
                 this.optionCompareWith = template.compareWith;
                 this.lockedValues = template.lockedValues;
                 this.panelMaxHeight = template.panelMaxHeight;
                 this.multilineOptions = template.multilineOptions;
+                this.noOptionsText = template.noOptionsText;
             }
         };
         this.$implicit = this;
@@ -217,6 +232,14 @@ class KbqBasePipe {
             !active.closest('.cdk-overlay-container')) {
             return;
         }
+        this.focusTrigger();
+    }
+    /**
+     * Focuses the pipe's trigger button with `currentFocusOrigin`, unconditionally.
+     *
+     * @docs-private
+     */
+    focusTrigger() {
         const trigger = this.elementRef.nativeElement.querySelector('button:not(.kbq-pipe__remove-button)');
         if (trigger) {
             this.focusMonitor.focusVia(trigger, this.currentFocusOrigin);
@@ -1257,6 +1280,9 @@ class KbqPipeMultiSelectComponent extends KbqBasePipe {
     }
     /** @docs-private */
     toggleSelectionAll(emitEvent = true) {
+        // With nothing to toggle, the toggle would still commit an empty value and announce a change.
+        if (this.noOptions)
+            return;
         this.selectionAllInProgress = true;
         if (this.allVisibleOptionsSelected) {
             this.visibleOptions.forEach((option) => option.deselect());
@@ -1285,6 +1311,10 @@ class KbqPipeMultiSelectComponent extends KbqBasePipe {
     }
     /** opens select */
     open() {
+        // Without options the search is hidden and nothing in the panel takes the focus: the trigger has to,
+        // or Escape never reaches the select.
+        if (this.noOptions)
+            this.focusTrigger();
         this.select().open();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPipeMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -1293,7 +1323,7 @@ class KbqPipeMultiSelectComponent extends KbqBasePipe {
                 provide: KbqBasePipe,
                 useExisting: this
             }
-        ], viewQueries: [{ propertyName: "select", first: true, predicate: KbqSelect, descendants: true, isSignal: true }, { propertyName: "options", predicate: KbqOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<kbq-select\n    #select=\"kbqSelect\"\n    multiple\n    [compareWith]=\"optionCompareWith ?? compareByValue\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [panelClass]=\"\n        multilineOptions\n            ? 'kbq-pipe-multiselect__panel kbq-pipe-multiselect__panel_multiline'\n            : 'kbq-pipe-multiselect__panel'\n    \"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [selectAllHandler]=\"selectAllHandler\"\n    [tabIndex]=\"-1\"\n    [value]=\"selected\"\n    (closed)=\"onClose()\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n        @if (select.triggerValues.length === 1) {\n            <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n                {{ select.triggerValue }}\n            </span>\n        } @else if (\n            select.triggerValues.length > 1 &&\n            (!selectedAllEqualsSelectedNothing || (selectedAllEqualsSelectedNothing && !allOptionsSelected))\n        ) {\n            <kbq-badge [badgeColor]=\"'contrast'\" [compact]=\"true\">\n                {{ select.triggerValues.length }}\n            </kbq-badge>\n        }\n    </button>\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n                (keydown.enter)=\"toggleSelectionAllByEnterKey()\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @if (data.selectAll && !select.isEmptySearchResult) {\n        <kbq-option\n            [class.kbq-selected]=\"allVisibleOptionsSelected\"\n            [selectable]=\"false\"\n            (click)=\"toggleSelectionAll()\"\n            (keydown.enter)=\"toggleSelectionAll()\"\n        >\n            <kbq-pseudo-checkbox [state]=\"checkboxState\" />\n            {{ localeData.pipe.selectAll }}\n        </kbq-option>\n    }\n\n    @for (item of filteredOptions | async; track item) {\n        <!-- Declared inside the loop: an `@let` among projected content fails the prerender with NG0502. -->\n        @let optionTemplate = isTemplateRef(valueTemplate) ? $any(valueTemplate) : null;\n        @let caption = optionTemplate ? null : item.caption;\n\n        <!-- Without `viewValue` a captioned option derives it from `textContent`, gluing the two lines. -->\n        <kbq-option [value]=\"item\" [disabled]=\"isLocked(item)\" [viewValue]=\"caption ? item.name : ''\">\n            @if (optionTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"optionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n                />\n            } @else if (caption) {\n                <!-- Each line has to clip itself, and must not stay `nowrap` under `multilineOptions`. -->\n                <div [class.kbq-truncate-line]=\"!multilineOptions\">{{ item.name }}</div>\n                <div class=\"kbq-option-caption\" [class.kbq-truncate-line]=\"!multilineOptions\">{{ caption }}</div>\n            } @else {\n                <!-- Deliberately a bare text node: `text-overflow` does not reach a nested block box. -->\n                {{ item.name }}\n            }\n        </kbq-option>\n    }\n</kbq-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-width:var(--kbq-filter-bar-pipe-max-width, 320px);max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button .kbq-button-text{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);align-items:center}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-end-end-radius:unset;border-start-end-radius:unset;border-inline-end:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset;border-inline-start:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px}.kbq-pipe-select__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe__multiselect .kbq-pipe__value{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe__multiselect .kbq-badge{align-self:center;margin-inline-start:var(--kbq-size-xs)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3$1.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "selectAllToggle", "selectAll", "selectAllHandler", "panelWidth", "panelMinWidth", "panelMaxWidth", "panelMaxHeight", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$1.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i9$1.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i9$1.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9$1.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "component", type: i5.KbqCleaner, selector: "kbq-cleaner", inputs: ["aria-label"], exportAs: ["kbqCleaner"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "component", type: i6.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i6.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: i9$1.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "select", first: true, predicate: KbqSelect, descendants: true, isSignal: true }, { propertyName: "options", predicate: KbqOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<kbq-select\n    #select=\"kbqSelect\"\n    multiple\n    [compareWith]=\"optionCompareWith ?? compareByValue\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [panelClass]=\"\n        multilineOptions\n            ? 'kbq-pipe-multiselect__panel kbq-pipe-multiselect__panel_multiline'\n            : 'kbq-pipe-multiselect__panel'\n    \"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [searchMinOptionsThreshold]=\"noOptions ? 1 : undefined\"\n    [selectAllHandler]=\"selectAllHandler\"\n    [tabIndex]=\"-1\"\n    [value]=\"selected\"\n    (closed)=\"onClose()\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n        @if (select.triggerValues.length === 1) {\n            <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n                {{ select.triggerValue }}\n            </span>\n        } @else if (\n            select.triggerValues.length > 1 &&\n            (!selectedAllEqualsSelectedNothing || (selectedAllEqualsSelectedNothing && !allOptionsSelected))\n        ) {\n            <kbq-badge [badgeColor]=\"'contrast'\" [compact]=\"true\">\n                {{ select.triggerValues.length }}\n            </kbq-badge>\n        }\n    </button>\n    <!-- Stays rendered without options, hidden by `searchMinOptionsThreshold`: the select wires its search up once. -->\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n                (keydown.enter)=\"toggleSelectionAllByEnterKey()\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @if (noOptions) {\n        <kbq-select-no-options>{{ noOptionsMessage }}</kbq-select-no-options>\n    }\n\n    @if (data.selectAll && !noOptions && !select.isEmptySearchResult) {\n        <kbq-option\n            [class.kbq-selected]=\"allVisibleOptionsSelected\"\n            [selectable]=\"false\"\n            (click)=\"toggleSelectionAll()\"\n            (keydown.enter)=\"toggleSelectionAll()\"\n        >\n            <kbq-pseudo-checkbox [state]=\"checkboxState\" />\n            {{ localeData.pipe.selectAll }}\n        </kbq-option>\n    }\n\n    @for (item of filteredOptions | async; track item) {\n        <!-- Declared inside the loop: an `@let` among projected content fails the prerender with NG0502. -->\n        @let optionTemplate = isTemplateRef(valueTemplate) ? $any(valueTemplate) : null;\n        @let caption = optionTemplate ? null : item.caption;\n\n        <!-- Without `viewValue` a captioned option derives it from `textContent`, gluing the two lines. -->\n        <kbq-option [value]=\"item\" [disabled]=\"isLocked(item)\" [viewValue]=\"caption ? item.name : ''\">\n            @if (optionTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"optionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n                />\n            } @else if (caption) {\n                <!-- Each line has to clip itself, and must not stay `nowrap` under `multilineOptions`. -->\n                <div [class.kbq-truncate-line]=\"!multilineOptions\">{{ item.name }}</div>\n                <div class=\"kbq-option-caption\" [class.kbq-truncate-line]=\"!multilineOptions\">{{ caption }}</div>\n            } @else {\n                <!-- Deliberately a bare text node: `text-overflow` does not reach a nested block box. -->\n                {{ item.name }}\n            }\n        </kbq-option>\n    }\n</kbq-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-width:var(--kbq-filter-bar-pipe-max-width, 320px);max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button .kbq-button-text{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);align-items:center}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-end-end-radius:unset;border-start-end-radius:unset;border-inline-end:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset;border-inline-start:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px}.kbq-pipe-select__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe__multiselect .kbq-pipe__value{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe__multiselect .kbq-badge{align-self:center;margin-inline-start:var(--kbq-size-xs)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3$1.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "selectAllToggle", "selectAll", "selectAllHandler", "panelWidth", "panelMinWidth", "panelMaxWidth", "panelMaxHeight", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$1.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i9$1.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i9$1.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9$1.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "component", type: i5.KbqCleaner, selector: "kbq-cleaner", inputs: ["aria-label"], exportAs: ["kbqCleaner"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "component", type: i3$1.KbqSelectNoOptions, selector: "kbq-select-no-options, [kbq-select-no-options]", exportAs: ["kbqSelectNoOptions"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "component", type: i6.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i6.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: i9$1.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPipeMultiSelectComponent, decorators: [{
             type: Component,
@@ -1317,7 +1347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<kbq-select\n    #select=\"kbqSelect\"\n    multiple\n    [compareWith]=\"optionCompareWith ?? compareByValue\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [panelClass]=\"\n        multilineOptions\n            ? 'kbq-pipe-multiselect__panel kbq-pipe-multiselect__panel_multiline'\n            : 'kbq-pipe-multiselect__panel'\n    \"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [selectAllHandler]=\"selectAllHandler\"\n    [tabIndex]=\"-1\"\n    [value]=\"selected\"\n    (closed)=\"onClose()\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n        @if (select.triggerValues.length === 1) {\n            <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n                {{ select.triggerValue }}\n            </span>\n        } @else if (\n            select.triggerValues.length > 1 &&\n            (!selectedAllEqualsSelectedNothing || (selectedAllEqualsSelectedNothing && !allOptionsSelected))\n        ) {\n            <kbq-badge [badgeColor]=\"'contrast'\" [compact]=\"true\">\n                {{ select.triggerValues.length }}\n            </kbq-badge>\n        }\n    </button>\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n                (keydown.enter)=\"toggleSelectionAllByEnterKey()\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @if (data.selectAll && !select.isEmptySearchResult) {\n        <kbq-option\n            [class.kbq-selected]=\"allVisibleOptionsSelected\"\n            [selectable]=\"false\"\n            (click)=\"toggleSelectionAll()\"\n            (keydown.enter)=\"toggleSelectionAll()\"\n        >\n            <kbq-pseudo-checkbox [state]=\"checkboxState\" />\n            {{ localeData.pipe.selectAll }}\n        </kbq-option>\n    }\n\n    @for (item of filteredOptions | async; track item) {\n        <!-- Declared inside the loop: an `@let` among projected content fails the prerender with NG0502. -->\n        @let optionTemplate = isTemplateRef(valueTemplate) ? $any(valueTemplate) : null;\n        @let caption = optionTemplate ? null : item.caption;\n\n        <!-- Without `viewValue` a captioned option derives it from `textContent`, gluing the two lines. -->\n        <kbq-option [value]=\"item\" [disabled]=\"isLocked(item)\" [viewValue]=\"caption ? item.name : ''\">\n            @if (optionTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"optionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n                />\n            } @else if (caption) {\n                <!-- Each line has to clip itself, and must not stay `nowrap` under `multilineOptions`. -->\n                <div [class.kbq-truncate-line]=\"!multilineOptions\">{{ item.name }}</div>\n                <div class=\"kbq-option-caption\" [class.kbq-truncate-line]=\"!multilineOptions\">{{ caption }}</div>\n            } @else {\n                <!-- Deliberately a bare text node: `text-overflow` does not reach a nested block box. -->\n                {{ item.name }}\n            }\n        </kbq-option>\n    }\n</kbq-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-width:var(--kbq-filter-bar-pipe-max-width, 320px);max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button .kbq-button-text{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);align-items:center}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-end-end-radius:unset;border-start-end-radius:unset;border-inline-end:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset;border-inline-start:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px}.kbq-pipe-select__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe__multiselect .kbq-pipe__value{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe__multiselect .kbq-badge{align-self:center;margin-inline-start:var(--kbq-size-xs)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<kbq-select\n    #select=\"kbqSelect\"\n    multiple\n    [compareWith]=\"optionCompareWith ?? compareByValue\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [panelClass]=\"\n        multilineOptions\n            ? 'kbq-pipe-multiselect__panel kbq-pipe-multiselect__panel_multiline'\n            : 'kbq-pipe-multiselect__panel'\n    \"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [searchMinOptionsThreshold]=\"noOptions ? 1 : undefined\"\n    [selectAllHandler]=\"selectAllHandler\"\n    [tabIndex]=\"-1\"\n    [value]=\"selected\"\n    (closed)=\"onClose()\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n        @if (select.triggerValues.length === 1) {\n            <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n                {{ select.triggerValue }}\n            </span>\n        } @else if (\n            select.triggerValues.length > 1 &&\n            (!selectedAllEqualsSelectedNothing || (selectedAllEqualsSelectedNothing && !allOptionsSelected))\n        ) {\n            <kbq-badge [badgeColor]=\"'contrast'\" [compact]=\"true\">\n                {{ select.triggerValues.length }}\n            </kbq-badge>\n        }\n    </button>\n    <!-- Stays rendered without options, hidden by `searchMinOptionsThreshold`: the select wires its search up once. -->\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n                (keydown.enter)=\"toggleSelectionAllByEnterKey()\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @if (noOptions) {\n        <kbq-select-no-options>{{ noOptionsMessage }}</kbq-select-no-options>\n    }\n\n    @if (data.selectAll && !noOptions && !select.isEmptySearchResult) {\n        <kbq-option\n            [class.kbq-selected]=\"allVisibleOptionsSelected\"\n            [selectable]=\"false\"\n            (click)=\"toggleSelectionAll()\"\n            (keydown.enter)=\"toggleSelectionAll()\"\n        >\n            <kbq-pseudo-checkbox [state]=\"checkboxState\" />\n            {{ localeData.pipe.selectAll }}\n        </kbq-option>\n    }\n\n    @for (item of filteredOptions | async; track item) {\n        <!-- Declared inside the loop: an `@let` among projected content fails the prerender with NG0502. -->\n        @let optionTemplate = isTemplateRef(valueTemplate) ? $any(valueTemplate) : null;\n        @let caption = optionTemplate ? null : item.caption;\n\n        <!-- Without `viewValue` a captioned option derives it from `textContent`, gluing the two lines. -->\n        <kbq-option [value]=\"item\" [disabled]=\"isLocked(item)\" [viewValue]=\"caption ? item.name : ''\">\n            @if (optionTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"optionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n                />\n            } @else if (caption) {\n                <!-- Each line has to clip itself, and must not stay `nowrap` under `multilineOptions`. -->\n                <div [class.kbq-truncate-line]=\"!multilineOptions\">{{ item.name }}</div>\n                <div class=\"kbq-option-caption\" [class.kbq-truncate-line]=\"!multilineOptions\">{{ caption }}</div>\n            } @else {\n                <!-- Deliberately a bare text node: `text-overflow` does not reach a nested block box. -->\n                {{ item.name }}\n            }\n        </kbq-option>\n    }\n</kbq-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-width:var(--kbq-filter-bar-pipe-max-width, 320px);max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button .kbq-button-text{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);align-items:center}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-end-end-radius:unset;border-start-end-radius:unset;border-inline-end:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset;border-inline-start:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px}.kbq-pipe-select__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe__multiselect .kbq-pipe__value{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe__multiselect .kbq-badge{align-self:center;margin-inline-start:var(--kbq-size-xs)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { select: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqSelect), { isSignal: true }] }], options: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KbqOption), { isSignal: true }] }] } });
 
 /**
@@ -1354,6 +1384,9 @@ class KbqTreeSelectPipeBase extends KbqBasePipe {
         this.treeFlattener = new KbqTreeFlattener(this.transformer, this.getLevel, this.isExpandable, this.getChildren);
         this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable, this.getValue, this.getViewValue);
         this.dataSource = new KbqTreeFlatDataSource(this.treeControl, this.treeFlattener);
+        // Seeds `treeControl.dataNodes`, which `expandAll()` and the search filter read: a template without
+        // `values` never assigns the data, and the panel still opens onto the "no options" message.
+        this.dataSource.data = [];
     }
     ngOnInit() {
         this.searchControl.valueChanges
@@ -1375,6 +1408,10 @@ class KbqTreeSelectPipeBase extends KbqBasePipe {
         setTimeout(() => {
             if (this.destroyed)
                 return;
+            // Without options the search is hidden and nothing in the panel takes the focus: the trigger has
+            // to, or Escape never reaches the select.
+            if (this.noOptions)
+                this.focusTrigger();
             this.select().open();
         });
     }
@@ -1470,7 +1507,7 @@ class KbqPipeMultiTreeSelectComponent extends KbqTreeSelectPipeBase {
             const template = templates?.find((item) => getId(item) === getId(this.data));
             if (template?.values) {
                 const values = [...template.values];
-                if (this.data.selectAll) {
+                if (this.data.selectAll && values.length) {
                     values.unshift({
                         name: this.localeData.pipe.selectAll,
                         value: kbqTreeSelectAllValue,
@@ -1564,7 +1601,10 @@ class KbqPipeMultiTreeSelectComponent extends KbqTreeSelectPipeBase {
         }
     }
     toggleSelectAllNode(emitEvent = true) {
-        if (this.select().search()?.ngControl.value) {
+        // With nothing to toggle, the toggle would still commit an empty value and announce a change.
+        if (this.noOptions)
+            return;
+        if (this.select().search()?.ngControl?.value) {
             // `KbqTreeOption.setSelected()` does not consult `disabled`, so the locked options are filtered
             // out here rather than relying on the tree's own guards.
             const renderedOptions = this.tree().renderedOptions.filter((option) => option.value !== kbqTreeSelectAllValue && !option.disabled);
@@ -1655,7 +1695,7 @@ class KbqPipeMultiTreeSelectComponent extends KbqTreeSelectPipeBase {
                 provide: KbqBasePipe,
                 useExisting: this
             }
-        ], viewQueries: [{ propertyName: "tree", first: true, predicate: KbqTreeSelection, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<kbq-tree-select\n    #select\n    [autoSelect]=\"false\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [multiple]=\"true\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [ngModel]=\"selected\"\n    [panelClass]=\"'kbq-pipe-multi-tree-select__panel'\"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [selectAllHandler]=\"selectAllHandler\"\n    [tabIndex]=\"-1\"\n    (closed)=\"onClose()\"\n    (opened)=\"onOpen()\"\n    (selectionChange)=\"onSelect($event)\"\n>\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n                (keydown.enter)=\"searchKeydownHandler()\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n\n        @if (select.selected?.length === 1) {\n            <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n                {{ select.selected[0].name }}\n            </span>\n        } @else if (\n            select.selected?.length > 1 &&\n            (!selectedAllEqualsSelectedNothing || (selectedAllEqualsSelectedNothing && !allOptionsSelected))\n        ) {\n            <kbq-badge [badgeColor]=\"'contrast'\" [compact]=\"true\">\n                {{ numberOfSelectedLeaves }}\n            </kbq-badge>\n        }\n    </button>\n\n    <kbq-tree-selection [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <kbq-tree-option\n            *kbqTreeNodeDef=\"let node; when: isNodeSelectAll\"\n            kbqTreeNodePadding\n            [class.kbq-selected]=\"allOptionsSelected\"\n            [selectable]=\"false\"\n            (click)=\"toggleSelectAllNode()\"\n        >\n            <kbq-pseudo-checkbox [state]=\"selectAllCheckboxState\" />\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option *kbqTreeNodeDef=\"let node\" kbqTreeNodePadding [checkboxThirdState]=\"true\">\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option *kbqTreeNodeDef=\"let node; when: hasChild\" kbqTreeNodePadding [checkboxThirdState]=\"true\">\n            <kbq-tree-node-toggle [node]=\"node\" />\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-width:var(--kbq-filter-bar-pipe-max-width, 320px);max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button .kbq-button-text{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);align-items:center}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-end-end-radius:unset;border-start-end-radius:unset;border-inline-end:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset;border-inline-start:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px}.kbq-pipe-select__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe__multi-tree-select .kbq-pipe__value{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe__multi-tree-select .kbq-badge{align-self:center;margin-inline-start:var(--kbq-size-xs)}.kbq-pipe__multi-tree-select .kbq-tree-select .kbq-select__trigger{height:unset}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "component", type: i5.KbqCleaner, selector: "kbq-cleaner", inputs: ["aria-label"], exportAs: ["kbqCleaner"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqHighlightModule }, { kind: "ngmodule", type: KbqTreeModule }, { kind: "directive", type: i7$1.KbqTreeNodeDef, selector: "[kbqTreeNodeDef]", inputs: ["kbqTreeNodeDefWhen", "kbqTreeNode"] }, { kind: "directive", type: i7$1.KbqTreeNodePadding, selector: "[kbqTreeNodePadding]", inputs: ["kbqTreeNodePaddingIndent"], exportAs: ["kbqTreeNodePadding"] }, { kind: "component", type: i7$1.KbqTreeSelection, selector: "kbq-tree-selection", inputs: ["treeControl", "autoSelect", "noUnselectLast", "selectAllToggle", "selectAll", "disabled", "tabIndex", "selectAllHandler"], outputs: ["navigationChange", "selectionChange", "onSelectAll", "onCopy"], exportAs: ["kbqTreeSelection"] }, { kind: "component", type: i7$1.KbqTreeOption, selector: "kbq-tree-option", inputs: ["checkboxThirdState", "disabled", "selectable", "selectAllRow", "showCheckbox"], outputs: ["onSelectionChange"], exportAs: ["kbqTreeOption"] }, { kind: "component", type: i7$1.KbqTreeNodeToggleComponent, selector: "kbq-tree-node-toggle", exportAs: ["kbqTreeNodeToggle"] }, { kind: "ngmodule", type: KbqTreeSelectModule }, { kind: "component", type: i8$1.KbqTreeSelect, selector: "kbq-tree-select", inputs: ["hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "placeholder", "required", "multiple", "autoSelect", "selectAllToggle", "selectAll", "id", "hasBackdrop", "tabIndex", "disabled", "selectAllHandler", "panelMinWidth", "panelWidth", "panelMaxWidth", "panelMaxHeight", "searchMinOptionsThreshold", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "onSelectAll", "valueChange"], exportAs: ["kbqTreeSelect"] }, { kind: "directive", type: i9$1.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9$1.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "component", type: i6.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i6.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: i9$1.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }, { kind: "pipe", type: i9$1.KbqHighlightBackgroundPipe, name: "kbqHighlightBackground" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "tree", first: true, predicate: KbqTreeSelection, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<kbq-tree-select\n    #select\n    [autoSelect]=\"false\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [multiple]=\"true\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [ngModel]=\"selected\"\n    [panelClass]=\"'kbq-pipe-multi-tree-select__panel'\"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [searchMinOptionsThreshold]=\"noOptions ? 1 : 0\"\n    [selectAllHandler]=\"selectAllHandler\"\n    [tabIndex]=\"-1\"\n    (closed)=\"onClose()\"\n    (opened)=\"onOpen()\"\n    (selectionChange)=\"onSelect($event)\"\n>\n    <!-- Stays rendered without options, hidden by `searchMinOptionsThreshold`: the select wires its search up once. -->\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n                (keydown.enter)=\"searchKeydownHandler()\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @if (noOptions) {\n        <kbq-select-no-options>{{ noOptionsMessage }}</kbq-select-no-options>\n    }\n\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n\n        @if (select.selected?.length === 1) {\n            <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n                {{ select.selected[0].name }}\n            </span>\n        } @else if (\n            select.selected?.length > 1 &&\n            (!selectedAllEqualsSelectedNothing || (selectedAllEqualsSelectedNothing && !allOptionsSelected))\n        ) {\n            <kbq-badge [badgeColor]=\"'contrast'\" [compact]=\"true\">\n                {{ numberOfSelectedLeaves }}\n            </kbq-badge>\n        }\n    </button>\n\n    <kbq-tree-selection [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <kbq-tree-option\n            *kbqTreeNodeDef=\"let node; when: isNodeSelectAll\"\n            kbqTreeNodePadding\n            [class.kbq-selected]=\"allOptionsSelected\"\n            [selectable]=\"false\"\n            (click)=\"toggleSelectAllNode()\"\n        >\n            <kbq-pseudo-checkbox [state]=\"selectAllCheckboxState\" />\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option *kbqTreeNodeDef=\"let node\" kbqTreeNodePadding [checkboxThirdState]=\"true\">\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option *kbqTreeNodeDef=\"let node; when: hasChild\" kbqTreeNodePadding [checkboxThirdState]=\"true\">\n            <kbq-tree-node-toggle [node]=\"node\" />\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-width:var(--kbq-filter-bar-pipe-max-width, 320px);max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button .kbq-button-text{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);align-items:center}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-end-end-radius:unset;border-start-end-radius:unset;border-inline-end:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset;border-inline-start:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px}.kbq-pipe-select__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe__multi-tree-select .kbq-pipe__value{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe__multi-tree-select .kbq-badge{align-self:center;margin-inline-start:var(--kbq-size-xs)}.kbq-pipe__multi-tree-select .kbq-tree-select .kbq-select__trigger{height:unset}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "component", type: i5.KbqCleaner, selector: "kbq-cleaner", inputs: ["aria-label"], exportAs: ["kbqCleaner"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqHighlightModule }, { kind: "ngmodule", type: KbqTreeModule }, { kind: "directive", type: i7$1.KbqTreeNodeDef, selector: "[kbqTreeNodeDef]", inputs: ["kbqTreeNodeDefWhen", "kbqTreeNode"] }, { kind: "directive", type: i7$1.KbqTreeNodePadding, selector: "[kbqTreeNodePadding]", inputs: ["kbqTreeNodePaddingIndent"], exportAs: ["kbqTreeNodePadding"] }, { kind: "component", type: i7$1.KbqTreeSelection, selector: "kbq-tree-selection", inputs: ["treeControl", "autoSelect", "noUnselectLast", "selectAllToggle", "selectAll", "disabled", "tabIndex", "selectAllHandler"], outputs: ["navigationChange", "selectionChange", "onSelectAll", "onCopy"], exportAs: ["kbqTreeSelection"] }, { kind: "component", type: i7$1.KbqTreeOption, selector: "kbq-tree-option", inputs: ["checkboxThirdState", "disabled", "selectable", "selectAllRow", "showCheckbox"], outputs: ["onSelectionChange"], exportAs: ["kbqTreeOption"] }, { kind: "component", type: i7$1.KbqTreeNodeToggleComponent, selector: "kbq-tree-node-toggle", exportAs: ["kbqTreeNodeToggle"] }, { kind: "ngmodule", type: KbqTreeSelectModule }, { kind: "component", type: i8$1.KbqTreeSelect, selector: "kbq-tree-select", inputs: ["hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "placeholder", "required", "multiple", "autoSelect", "selectAllToggle", "selectAll", "id", "hasBackdrop", "tabIndex", "disabled", "selectAllHandler", "panelMinWidth", "panelWidth", "panelMaxWidth", "panelMaxHeight", "searchMinOptionsThreshold", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "onSelectAll", "valueChange"], exportAs: ["kbqTreeSelect"] }, { kind: "directive", type: i9$1.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9$1.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "component", type: i3$1.KbqSelectNoOptions, selector: "kbq-select-no-options, [kbq-select-no-options]", exportAs: ["kbqSelectNoOptions"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "component", type: i6.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i6.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: i9$1.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }, { kind: "pipe", type: i9$1.KbqHighlightBackgroundPipe, name: "kbqHighlightBackground" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPipeMultiTreeSelectComponent, decorators: [{
             type: Component,
@@ -1673,13 +1713,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         KbqTreeSelectModule,
                         FormsModule,
                         KbqBadgeModule,
-                        KbqPseudoCheckboxModule
+                        KbqPseudoCheckboxModule,
+                        KbqSelectNoOptions
                     ], providers: [
                         {
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<kbq-tree-select\n    #select\n    [autoSelect]=\"false\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [multiple]=\"true\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [ngModel]=\"selected\"\n    [panelClass]=\"'kbq-pipe-multi-tree-select__panel'\"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [selectAllHandler]=\"selectAllHandler\"\n    [tabIndex]=\"-1\"\n    (closed)=\"onClose()\"\n    (opened)=\"onOpen()\"\n    (selectionChange)=\"onSelect($event)\"\n>\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n                (keydown.enter)=\"searchKeydownHandler()\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n\n        @if (select.selected?.length === 1) {\n            <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n                {{ select.selected[0].name }}\n            </span>\n        } @else if (\n            select.selected?.length > 1 &&\n            (!selectedAllEqualsSelectedNothing || (selectedAllEqualsSelectedNothing && !allOptionsSelected))\n        ) {\n            <kbq-badge [badgeColor]=\"'contrast'\" [compact]=\"true\">\n                {{ numberOfSelectedLeaves }}\n            </kbq-badge>\n        }\n    </button>\n\n    <kbq-tree-selection [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <kbq-tree-option\n            *kbqTreeNodeDef=\"let node; when: isNodeSelectAll\"\n            kbqTreeNodePadding\n            [class.kbq-selected]=\"allOptionsSelected\"\n            [selectable]=\"false\"\n            (click)=\"toggleSelectAllNode()\"\n        >\n            <kbq-pseudo-checkbox [state]=\"selectAllCheckboxState\" />\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option *kbqTreeNodeDef=\"let node\" kbqTreeNodePadding [checkboxThirdState]=\"true\">\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option *kbqTreeNodeDef=\"let node; when: hasChild\" kbqTreeNodePadding [checkboxThirdState]=\"true\">\n            <kbq-tree-node-toggle [node]=\"node\" />\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-width:var(--kbq-filter-bar-pipe-max-width, 320px);max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button .kbq-button-text{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);align-items:center}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-end-end-radius:unset;border-start-end-radius:unset;border-inline-end:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset;border-inline-start:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px}.kbq-pipe-select__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe__multi-tree-select .kbq-pipe__value{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe__multi-tree-select .kbq-badge{align-self:center;margin-inline-start:var(--kbq-size-xs)}.kbq-pipe__multi-tree-select .kbq-tree-select .kbq-select__trigger{height:unset}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<kbq-tree-select\n    #select\n    [autoSelect]=\"false\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [multiple]=\"true\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [ngModel]=\"selected\"\n    [panelClass]=\"'kbq-pipe-multi-tree-select__panel'\"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [searchMinOptionsThreshold]=\"noOptions ? 1 : 0\"\n    [selectAllHandler]=\"selectAllHandler\"\n    [tabIndex]=\"-1\"\n    (closed)=\"onClose()\"\n    (opened)=\"onOpen()\"\n    (selectionChange)=\"onSelect($event)\"\n>\n    <!-- Stays rendered without options, hidden by `searchMinOptionsThreshold`: the select wires its search up once. -->\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n                (keydown.enter)=\"searchKeydownHandler()\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @if (noOptions) {\n        <kbq-select-no-options>{{ noOptionsMessage }}</kbq-select-no-options>\n    }\n\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n\n        @if (select.selected?.length === 1) {\n            <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n                {{ select.selected[0].name }}\n            </span>\n        } @else if (\n            select.selected?.length > 1 &&\n            (!selectedAllEqualsSelectedNothing || (selectedAllEqualsSelectedNothing && !allOptionsSelected))\n        ) {\n            <kbq-badge [badgeColor]=\"'contrast'\" [compact]=\"true\">\n                {{ numberOfSelectedLeaves }}\n            </kbq-badge>\n        }\n    </button>\n\n    <kbq-tree-selection [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <kbq-tree-option\n            *kbqTreeNodeDef=\"let node; when: isNodeSelectAll\"\n            kbqTreeNodePadding\n            [class.kbq-selected]=\"allOptionsSelected\"\n            [selectable]=\"false\"\n            (click)=\"toggleSelectAllNode()\"\n        >\n            <kbq-pseudo-checkbox [state]=\"selectAllCheckboxState\" />\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option *kbqTreeNodeDef=\"let node\" kbqTreeNodePadding [checkboxThirdState]=\"true\">\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option *kbqTreeNodeDef=\"let node; when: hasChild\" kbqTreeNodePadding [checkboxThirdState]=\"true\">\n            <kbq-tree-node-toggle [node]=\"node\" />\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-width:var(--kbq-filter-bar-pipe-max-width, 320px);max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button .kbq-button-text{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);align-items:center}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-end-end-radius:unset;border-start-end-radius:unset;border-inline-end:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset;border-inline-start:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px}.kbq-pipe-select__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe__multi-tree-select .kbq-pipe__value{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe__multi-tree-select .kbq-badge{align-self:center;margin-inline-start:var(--kbq-size-xs)}.kbq-pipe__multi-tree-select .kbq-tree-select .kbq-select__trigger{height:unset}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqTreeSelection), { isSignal: true }] }] } });
 
 class KbqPipeReadonlyComponent extends KbqBasePipe {
@@ -1779,6 +1820,10 @@ class KbqPipeSelectComponent extends KbqBasePipe {
     }
     /** opens select */
     open() {
+        // Without options the search is hidden and nothing in the panel takes the focus: the trigger has to,
+        // or Escape never reaches the select.
+        if (this.noOptions)
+            this.focusTrigger();
         this.select().open();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPipeSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -1787,7 +1832,7 @@ class KbqPipeSelectComponent extends KbqBasePipe {
                 provide: KbqBasePipe,
                 useExisting: this
             }
-        ], viewQueries: [{ propertyName: "select", first: true, predicate: KbqSelect, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<kbq-select\n    #select\n    [compareWith]=\"optionCompareWith ?? compareByValue\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [panelClass]=\"\n        multilineOptions ? 'kbq-pipe-select__panel kbq-pipe-select__panel_multiline' : 'kbq-pipe-select__panel'\n    \"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [tabIndex]=\"-1\"\n    [value]=\"selected\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n        <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n            {{ select.triggerValue }}\n        </span>\n    </button>\n\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @for (item of filteredOptions | async; track item) {\n        <!-- Declared inside the loop: an `@let` among projected content fails the prerender with NG0502. -->\n        @let optionTemplate = isTemplateRef(valueTemplate) ? $any(valueTemplate) : null;\n        @let caption = optionTemplate ? null : item.caption;\n\n        <!-- Without `viewValue` a captioned option derives it from `textContent`, gluing the two lines. -->\n        <kbq-option [value]=\"item\" [viewValue]=\"caption ? item.name : ''\">\n            @if (optionTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"optionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n                />\n            } @else if (caption) {\n                <!-- Each line has to clip itself, and must not stay `nowrap` under `multilineOptions`. -->\n                <div [class.kbq-truncate-line]=\"!multilineOptions\">{{ item.name }}</div>\n                <div class=\"kbq-option-caption\" [class.kbq-truncate-line]=\"!multilineOptions\">{{ caption }}</div>\n            } @else {\n                <!-- Deliberately a bare text node: `text-overflow` does not reach a nested block box. -->\n                {{ item.name }}\n            }\n        </kbq-option>\n    }\n</kbq-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-width:var(--kbq-filter-bar-pipe-max-width, 320px);max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button .kbq-button-text{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);align-items:center}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-end-end-radius:unset;border-start-end-radius:unset;border-inline-end:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset;border-inline-start:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px}.kbq-pipe-select__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3$1.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "selectAllToggle", "selectAll", "selectAllHandler", "panelWidth", "panelMinWidth", "panelMaxWidth", "panelMaxHeight", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$1.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i9$1.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i9$1.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9$1.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "component", type: i5.KbqCleaner, selector: "kbq-cleaner", inputs: ["aria-label"], exportAs: ["kbqCleaner"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "select", first: true, predicate: KbqSelect, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<kbq-select\n    #select\n    [compareWith]=\"optionCompareWith ?? compareByValue\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [panelClass]=\"\n        multilineOptions ? 'kbq-pipe-select__panel kbq-pipe-select__panel_multiline' : 'kbq-pipe-select__panel'\n    \"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [searchMinOptionsThreshold]=\"noOptions ? 1 : undefined\"\n    [tabIndex]=\"-1\"\n    [value]=\"selected\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n        <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n            {{ select.triggerValue }}\n        </span>\n    </button>\n\n    <!-- Stays rendered without options, hidden by `searchMinOptionsThreshold`: the select wires its search up once. -->\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @if (noOptions) {\n        <kbq-select-no-options>{{ noOptionsMessage }}</kbq-select-no-options>\n    }\n\n    @for (item of filteredOptions | async; track item) {\n        <!-- Declared inside the loop: an `@let` among projected content fails the prerender with NG0502. -->\n        @let optionTemplate = isTemplateRef(valueTemplate) ? $any(valueTemplate) : null;\n        @let caption = optionTemplate ? null : item.caption;\n\n        <!-- Without `viewValue` a captioned option derives it from `textContent`, gluing the two lines. -->\n        <kbq-option [value]=\"item\" [viewValue]=\"caption ? item.name : ''\">\n            @if (optionTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"optionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n                />\n            } @else if (caption) {\n                <!-- Each line has to clip itself, and must not stay `nowrap` under `multilineOptions`. -->\n                <div [class.kbq-truncate-line]=\"!multilineOptions\">{{ item.name }}</div>\n                <div class=\"kbq-option-caption\" [class.kbq-truncate-line]=\"!multilineOptions\">{{ caption }}</div>\n            } @else {\n                <!-- Deliberately a bare text node: `text-overflow` does not reach a nested block box. -->\n                {{ item.name }}\n            }\n        </kbq-option>\n    }\n</kbq-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-width:var(--kbq-filter-bar-pipe-max-width, 320px);max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button .kbq-button-text{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);align-items:center}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-end-end-radius:unset;border-start-end-radius:unset;border-inline-end:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset;border-inline-start:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px}.kbq-pipe-select__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3$1.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "selectAllToggle", "selectAll", "selectAllHandler", "panelWidth", "panelMinWidth", "panelMaxWidth", "panelMaxHeight", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$1.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i9$1.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i9$1.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9$1.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "component", type: i5.KbqCleaner, selector: "kbq-cleaner", inputs: ["aria-label"], exportAs: ["kbqCleaner"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "component", type: i3$1.KbqSelectNoOptions, selector: "kbq-select-no-options, [kbq-select-no-options]", exportAs: ["kbqSelectNoOptions"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPipeSelectComponent, decorators: [{
             type: Component,
@@ -1808,7 +1853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<kbq-select\n    #select\n    [compareWith]=\"optionCompareWith ?? compareByValue\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [panelClass]=\"\n        multilineOptions ? 'kbq-pipe-select__panel kbq-pipe-select__panel_multiline' : 'kbq-pipe-select__panel'\n    \"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [tabIndex]=\"-1\"\n    [value]=\"selected\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n        <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n            {{ select.triggerValue }}\n        </span>\n    </button>\n\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @for (item of filteredOptions | async; track item) {\n        <!-- Declared inside the loop: an `@let` among projected content fails the prerender with NG0502. -->\n        @let optionTemplate = isTemplateRef(valueTemplate) ? $any(valueTemplate) : null;\n        @let caption = optionTemplate ? null : item.caption;\n\n        <!-- Without `viewValue` a captioned option derives it from `textContent`, gluing the two lines. -->\n        <kbq-option [value]=\"item\" [viewValue]=\"caption ? item.name : ''\">\n            @if (optionTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"optionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n                />\n            } @else if (caption) {\n                <!-- Each line has to clip itself, and must not stay `nowrap` under `multilineOptions`. -->\n                <div [class.kbq-truncate-line]=\"!multilineOptions\">{{ item.name }}</div>\n                <div class=\"kbq-option-caption\" [class.kbq-truncate-line]=\"!multilineOptions\">{{ caption }}</div>\n            } @else {\n                <!-- Deliberately a bare text node: `text-overflow` does not reach a nested block box. -->\n                {{ item.name }}\n            }\n        </kbq-option>\n    }\n</kbq-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-width:var(--kbq-filter-bar-pipe-max-width, 320px);max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button .kbq-button-text{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);align-items:center}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-end-end-radius:unset;border-start-end-radius:unset;border-inline-end:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset;border-inline-start:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px}.kbq-pipe-select__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<kbq-select\n    #select\n    [compareWith]=\"optionCompareWith ?? compareByValue\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [panelClass]=\"\n        multilineOptions ? 'kbq-pipe-select__panel kbq-pipe-select__panel_multiline' : 'kbq-pipe-select__panel'\n    \"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [searchMinOptionsThreshold]=\"noOptions ? 1 : undefined\"\n    [tabIndex]=\"-1\"\n    [value]=\"selected\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n        <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n            {{ select.triggerValue }}\n        </span>\n    </button>\n\n    <!-- Stays rendered without options, hidden by `searchMinOptionsThreshold`: the select wires its search up once. -->\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @if (noOptions) {\n        <kbq-select-no-options>{{ noOptionsMessage }}</kbq-select-no-options>\n    }\n\n    @for (item of filteredOptions | async; track item) {\n        <!-- Declared inside the loop: an `@let` among projected content fails the prerender with NG0502. -->\n        @let optionTemplate = isTemplateRef(valueTemplate) ? $any(valueTemplate) : null;\n        @let caption = optionTemplate ? null : item.caption;\n\n        <!-- Without `viewValue` a captioned option derives it from `textContent`, gluing the two lines. -->\n        <kbq-option [value]=\"item\" [viewValue]=\"caption ? item.name : ''\">\n            @if (optionTemplate) {\n                <ng-container\n                    [ngTemplateOutlet]=\"optionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n                />\n            } @else if (caption) {\n                <!-- Each line has to clip itself, and must not stay `nowrap` under `multilineOptions`. -->\n                <div [class.kbq-truncate-line]=\"!multilineOptions\">{{ item.name }}</div>\n                <div class=\"kbq-option-caption\" [class.kbq-truncate-line]=\"!multilineOptions\">{{ caption }}</div>\n            } @else {\n                <!-- Deliberately a bare text node: `text-overflow` does not reach a nested block box. -->\n                {{ item.name }}\n            }\n        </kbq-option>\n    }\n</kbq-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-width:var(--kbq-filter-bar-pipe-max-width, 320px);max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button .kbq-button-text{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);align-items:center}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-end-end-radius:unset;border-start-end-radius:unset;border-inline-end:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset;border-inline-start:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px}.kbq-pipe-select__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n"] }]
         }], propDecorators: { select: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqSelect), { isSignal: true }] }] } });
 
 class KbqPipeTextComponent extends KbqBasePipe {
@@ -1929,7 +1974,7 @@ class KbqPipeTreeSelectComponent extends KbqTreeSelectPipeBase {
                 provide: KbqBasePipe,
                 useExisting: this
             }
-        ], usesInheritance: true, ngImport: i0, template: "<kbq-tree-select\n    #select\n    [autoSelect]=\"false\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [ngModel]=\"selected\"\n    [panelClass]=\"'kbq-pipe-tree-select__panel'\"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [tabIndex]=\"-1\"\n    (opened)=\"onOpen()\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    <kbq-cleaner />\n\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n        <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n            {{ select.triggerValue }}\n        </span>\n    </button>\n\n    <kbq-tree-selection [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <kbq-tree-option *kbqTreeNodeDef=\"let node\" kbqTreeNodePadding>\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option *kbqTreeNodeDef=\"let node; when: hasChild\" kbqTreeNodePadding [selectable]=\"false\">\n            <kbq-tree-node-toggle [node]=\"node\" />\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-width:var(--kbq-filter-bar-pipe-max-width, 320px);max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button .kbq-button-text{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);align-items:center}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-end-end-radius:unset;border-start-end-radius:unset;border-inline-end:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset;border-inline-start:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px}.kbq-pipe-select__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe__tree-select .kbq-select__trigger{height:unset}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "component", type: i5.KbqCleaner, selector: "kbq-cleaner", inputs: ["aria-label"], exportAs: ["kbqCleaner"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqHighlightModule }, { kind: "ngmodule", type: KbqTreeModule }, { kind: "directive", type: i7$1.KbqTreeNodeDef, selector: "[kbqTreeNodeDef]", inputs: ["kbqTreeNodeDefWhen", "kbqTreeNode"] }, { kind: "directive", type: i7$1.KbqTreeNodePadding, selector: "[kbqTreeNodePadding]", inputs: ["kbqTreeNodePaddingIndent"], exportAs: ["kbqTreeNodePadding"] }, { kind: "component", type: i7$1.KbqTreeSelection, selector: "kbq-tree-selection", inputs: ["treeControl", "autoSelect", "noUnselectLast", "selectAllToggle", "selectAll", "disabled", "tabIndex", "selectAllHandler"], outputs: ["navigationChange", "selectionChange", "onSelectAll", "onCopy"], exportAs: ["kbqTreeSelection"] }, { kind: "component", type: i7$1.KbqTreeOption, selector: "kbq-tree-option", inputs: ["checkboxThirdState", "disabled", "selectable", "selectAllRow", "showCheckbox"], outputs: ["onSelectionChange"], exportAs: ["kbqTreeOption"] }, { kind: "component", type: i7$1.KbqTreeNodeToggleComponent, selector: "kbq-tree-node-toggle", exportAs: ["kbqTreeNodeToggle"] }, { kind: "ngmodule", type: KbqTreeSelectModule }, { kind: "component", type: i8$1.KbqTreeSelect, selector: "kbq-tree-select", inputs: ["hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "placeholder", "required", "multiple", "autoSelect", "selectAllToggle", "selectAll", "id", "hasBackdrop", "tabIndex", "disabled", "selectAllHandler", "panelMinWidth", "panelWidth", "panelMaxWidth", "panelMaxHeight", "searchMinOptionsThreshold", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "onSelectAll", "valueChange"], exportAs: ["kbqTreeSelect"] }, { kind: "directive", type: i9$1.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9$1.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i9$1.KbqHighlightBackgroundPipe, name: "kbqHighlightBackground" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<kbq-tree-select\n    #select\n    [autoSelect]=\"false\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [ngModel]=\"selected\"\n    [panelClass]=\"'kbq-pipe-tree-select__panel'\"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [searchMinOptionsThreshold]=\"noOptions ? 1 : 0\"\n    [tabIndex]=\"-1\"\n    (opened)=\"onOpen()\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    <!-- Stays rendered without options, hidden by `searchMinOptionsThreshold`: the select wires its search up once. -->\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @if (noOptions) {\n        <kbq-select-no-options>{{ noOptionsMessage }}</kbq-select-no-options>\n    }\n\n    <kbq-cleaner />\n\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n        <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n            {{ select.triggerValue }}\n        </span>\n    </button>\n\n    <kbq-tree-selection [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <kbq-tree-option *kbqTreeNodeDef=\"let node\" kbqTreeNodePadding>\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option *kbqTreeNodeDef=\"let node; when: hasChild\" kbqTreeNodePadding [selectable]=\"false\">\n            <kbq-tree-node-toggle [node]=\"node\" />\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-width:var(--kbq-filter-bar-pipe-max-width, 320px);max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button .kbq-button-text{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);align-items:center}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-end-end-radius:unset;border-start-end-radius:unset;border-inline-end:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset;border-inline-start:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px}.kbq-pipe-select__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe__tree-select .kbq-select__trigger{height:unset}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "component", type: i5.KbqCleaner, selector: "kbq-cleaner", inputs: ["aria-label"], exportAs: ["kbqCleaner"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqHighlightModule }, { kind: "ngmodule", type: KbqTreeModule }, { kind: "directive", type: i7$1.KbqTreeNodeDef, selector: "[kbqTreeNodeDef]", inputs: ["kbqTreeNodeDefWhen", "kbqTreeNode"] }, { kind: "directive", type: i7$1.KbqTreeNodePadding, selector: "[kbqTreeNodePadding]", inputs: ["kbqTreeNodePaddingIndent"], exportAs: ["kbqTreeNodePadding"] }, { kind: "component", type: i7$1.KbqTreeSelection, selector: "kbq-tree-selection", inputs: ["treeControl", "autoSelect", "noUnselectLast", "selectAllToggle", "selectAll", "disabled", "tabIndex", "selectAllHandler"], outputs: ["navigationChange", "selectionChange", "onSelectAll", "onCopy"], exportAs: ["kbqTreeSelection"] }, { kind: "component", type: i7$1.KbqTreeOption, selector: "kbq-tree-option", inputs: ["checkboxThirdState", "disabled", "selectable", "selectAllRow", "showCheckbox"], outputs: ["onSelectionChange"], exportAs: ["kbqTreeOption"] }, { kind: "component", type: i7$1.KbqTreeNodeToggleComponent, selector: "kbq-tree-node-toggle", exportAs: ["kbqTreeNodeToggle"] }, { kind: "ngmodule", type: KbqTreeSelectModule }, { kind: "component", type: i8$1.KbqTreeSelect, selector: "kbq-tree-select", inputs: ["hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "placeholder", "required", "multiple", "autoSelect", "selectAllToggle", "selectAll", "id", "hasBackdrop", "tabIndex", "disabled", "selectAllHandler", "panelMinWidth", "panelWidth", "panelMaxWidth", "panelMaxHeight", "searchMinOptionsThreshold", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "onSelectAll", "valueChange"], exportAs: ["kbqTreeSelect"] }, { kind: "directive", type: i9$1.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9$1.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "component", type: i3$1.KbqSelectNoOptions, selector: "kbq-select-no-options, [kbq-select-no-options]", exportAs: ["kbqSelectNoOptions"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i9$1.KbqHighlightBackgroundPipe, name: "kbqHighlightBackground" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqPipeTreeSelectComponent, decorators: [{
             type: Component,
@@ -1945,13 +1990,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         KbqHighlightModule,
                         KbqTreeModule,
                         KbqTreeSelectModule,
+                        KbqSelectNoOptions,
                         FormsModule
                     ], providers: [
                         {
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<kbq-tree-select\n    #select\n    [autoSelect]=\"false\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [ngModel]=\"selected\"\n    [panelClass]=\"'kbq-pipe-tree-select__panel'\"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [tabIndex]=\"-1\"\n    (opened)=\"onOpen()\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    <kbq-cleaner />\n\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n        <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n            {{ select.triggerValue }}\n        </span>\n    </button>\n\n    <kbq-tree-selection [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <kbq-tree-option *kbqTreeNodeDef=\"let node\" kbqTreeNodePadding>\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option *kbqTreeNodeDef=\"let node; when: hasChild\" kbqTreeNodePadding [selectable]=\"false\">\n            <kbq-tree-node-toggle [node]=\"node\" />\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-width:var(--kbq-filter-bar-pipe-max-width, 320px);max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button .kbq-button-text{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);align-items:center}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-end-end-radius:unset;border-start-end-radius:unset;border-inline-end:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset;border-inline-start:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px}.kbq-pipe-select__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe__tree-select .kbq-select__trigger{height:unset}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<kbq-tree-select\n    #select\n    [autoSelect]=\"false\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [ngModel]=\"selected\"\n    [panelClass]=\"'kbq-pipe-tree-select__panel'\"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [searchMinOptionsThreshold]=\"noOptions ? 1 : 0\"\n    [tabIndex]=\"-1\"\n    (opened)=\"onOpen()\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    <!-- Stays rendered without options, hidden by `searchMinOptionsThreshold`: the select wires its search up once. -->\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @if (noOptions) {\n        <kbq-select-no-options>{{ noOptionsMessage }}</kbq-select-no-options>\n    }\n\n    <kbq-cleaner />\n\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n        <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n            {{ select.triggerValue }}\n        </span>\n    </button>\n\n    <kbq-tree-selection [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <kbq-tree-option *kbqTreeNodeDef=\"let node\" kbqTreeNodePadding>\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option *kbqTreeNodeDef=\"let node; when: hasChild\" kbqTreeNodePadding [selectable]=\"false\">\n            <kbq-tree-node-toggle [node]=\"node\" />\n            <span\n                [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterValue.value\"\n            ></span>\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-width:var(--kbq-filter-bar-pipe-max-width, 320px);max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button .kbq-button-text{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);align-items:center}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-end-end-radius:unset;border-start-end-radius:unset;border-inline-end:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset;border-inline-start:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px}.kbq-pipe-select__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-pipe__tree-select .kbq-select__trigger{height:unset}\n"] }]
         }], ctorParameters: () => [] });
 
 /**