@koobiq/components 21.0.0 → 21.1.0

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

@@ -2,10 +2,10 @@ import * as i0 from '@angular/core';
 import { InjectionToken, inject, output, computed, ChangeDetectionStrategy, Component, effect, Directive, ChangeDetectorRef, input, viewChild, ViewEncapsulation, ElementRef, DestroyRef, untracked, forwardRef, afterNextRender, TemplateRef, contentChild, booleanAttribute, model, signal, viewChildren, Injector, ViewContainerRef, NgModule } from '@angular/core';
 import { takeUntilDestroyed, toSignal, outputToObservable } from '@angular/core/rxjs-interop';
 import * as i9 from '@koobiq/components/core';
-import { ruRULocaleData, kbqLocaleConfigurationOverrideProvider, KbqComponentColors, KbqFormsModule, PopUpPlacements, PopUpSizes, isMac, KbqLocaleOverridesDirective, KbqStateSaving, DateAdapter, DateFormatter, ENTER, KbqFormattersModule, createSearchPredicate, KbqOption, KbqPseudoCheckboxModule, KbqHighlightModule, KbqOptionModule } from '@koobiq/components/core';
+import { ruRULocaleData, kbqLocaleConfigurationOverrideProvider, KbqComponentColors, KbqFormsModule, PopUpPlacements, PopUpSizes, isMac, KbqLocaleOverridesDirective, KbqStateSaving, DateAdapter, DateFormatter, ENTER, KbqFormattersModule, createSearchPredicate, tokenizeSearchQuery, KbqOption, KbqPseudoCheckboxModule, KbqHighlightModule, KbqOptionModule } from '@koobiq/components/core';
 import * as i4 from '@koobiq/components/divider';
 import { KbqDividerModule } from '@koobiq/components/divider';
-import { merge, Subject, BehaviorSubject, timer } from 'rxjs';
+import { merge, Subject, BehaviorSubject, timer, startWith } from 'rxjs';
 import * as i1 from '@koobiq/components/button';
 import { KbqButtonModule, KbqButton, KbqButtonStyles } from '@koobiq/components/button';
 import { FocusMonitor, InputModalityDetector, _IdGenerator } from '@angular/cdk/a11y';
@@ -39,7 +39,7 @@ import { KbqBadgeModule } from '@koobiq/components/badge';
 import * as i3$2 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 { KbqTreeFlattener, FlatTreeControl, FilterByViewValue, FilterParentsForNodes, KbqTreeFlatDataSource, kbqTreeSelectAllValue, KbqTreeSelection, KbqTreeModule } from '@koobiq/components/tree';
 import * as i8$1 from '@koobiq/components/tree-select';
 import { KbqTreeSelect, KbqTreeSelectModule } from '@koobiq/components/tree-select';
 import * as i5$2 from '@koobiq/components/textarea';
@@ -413,7 +413,7 @@ class KbqFilterSavePopover {
                 {{ strings.cancelButton }}
             </button>
         </ng-template>
-    `, isInline: true, dependencies: [{ 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: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqFormsModule }, { kind: "directive", type: i9.KbqForm, selector: ".kbq-form-vertical, .kbq-form-horizontal", exportAs: ["kbqForm"] }, { kind: "directive", type: i9.KbqFormElement, selector: ".kbq-form__row, .kbq-form__fieldset, .kbq-form__legend", exportAs: ["kbqFormElement"] }, { 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.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqAlertModule }, { kind: "component", type: i6.KbqAlert, selector: "kbq-alert", inputs: ["compact", "alertStyle", "alertColor"], outputs: ["closed"], exportAs: ["kbqAlert"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, dependencies: [{ 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: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqFormsModule }, { kind: "directive", type: i9.KbqForm, selector: ".kbq-form-vertical, .kbq-form-horizontal", exportAs: ["kbqForm"] }, { kind: "directive", type: i9.KbqFormElement, selector: ".kbq-form__row, .kbq-form__fieldset, .kbq-form__legend", exportAs: ["kbqFormElement"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "readonly", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass", "showRequiredMarker"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqAlertModule }, { kind: "component", type: i6.KbqAlert, selector: "kbq-alert", inputs: ["compact", "alertStyle", "alertColor"], outputs: ["closed"], exportAs: ["kbqAlert"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqFilterSavePopover, decorators: [{
             type: Component,
@@ -740,7 +740,7 @@ class KbqFilters {
             : this.filters();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqFilters, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqFilters, isStandalone: true, selector: "kbq-filters", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSelectFilter: "onSelectFilter", onSave: "onSave", onChangeFilter: "onChangeFilter", onRemoveFilter: "onRemoveFilter", onResetFilterChanges: "onResetFilterChanges" }, host: { classAttribute: "kbq-filters" }, providers: [{ provide: KBQ_FILTERS, useExisting: forwardRef((() => KbqFilters)) }], viewQueries: [{ propertyName: "mainButton", first: true, predicate: ["mainButton"], descendants: true, isSignal: true }, { propertyName: "saveNewFilterButton", first: true, predicate: ["saveNewFilterButton"], descendants: true, isSignal: true }, { propertyName: "filterActionsButton", first: true, predicate: ["filterActionsButton"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: KbqPopoverTrigger, descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: KbqDropdownTrigger, descendants: true, isSignal: true }, { propertyName: "filterActionsDropdown", first: true, predicate: ["filterActionsButton"], descendants: true, isSignal: true }, { propertyName: "savePopover", first: true, predicate: KbqFilterSavePopover, descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: ["search"], descendants: true, isSignal: true }], exportAs: ["kbqFilters"], ngImport: i0, template: "@let strings = filterBar.localeConfiguration().filters;\n\n<button\n    #mainButton\n    #popoverRef=\"kbqPopover\"\n    kbq-button\n    kbq-title\n    kbqFilterBarButton\n    kbqPopover\n    [kbqDropdownTriggerFor]=\"savedFilters\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverOffset]=\"popoverOffset\"\n    [kbqPopoverClass]=\"'kbq-filters__save-as-new-filter-popover'\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    [kbqPopoverSize]=\"popoverSize\"\n    [kbqTrigger]=\"'manual'\"\n    [disabled]=\"savePopover.isSaving\"\n    [class.kbq-active]=\"focusedElementBeforeIs(mainButton) && opened\"\n    (dropdownClosed)=\"searchControl.setValue('')\"\n    (dropdownOpened)=\"onDropdownOpen()\"\n>\n    <span #kbqTitleText class=\"kbq-filters__filter-name\">\n        @if (filter?.name) {\n            {{ filter!.name }}\n        } @else {\n            <ng-content>\n                <i kbq-icon=\"kbq-list_16\"></i>\n                {{ strings.defaultName }}\n            </ng-content>\n        }\n    </span>\n</button>\n\n@if (filterBar.isChanged() && !filterBar.isSaved()) {\n    <button\n        #saveNewFilterButton\n        kbqTooltip=\"{{ strings.saveNewFilterTooltip }}\"\n        kbq-button\n        kbqFilterBarButton\n        class=\"kbq-button_action\"\n        [attr.aria-label]=\"strings.saveNewFilterTooltip\"\n        [class.kbq-active]=\"focusedElementBeforeIs(saveNewFilterButton) && opened\"\n        [disabled]=\"savePopover.isSaving\"\n        (click)=\"savePopover.openSaveAsNewFilterPopover()\"\n    >\n        <i kbq-icon=\"kbq-floppy-disk_16\" aria-hidden=\"true\"></i>\n    </button>\n}\n\n@if (filterBar.isSaved()) {\n    <button\n        #filterActionsButton\n        kbq-button\n        kbqFilterBarButton\n        class=\"kbq-button_action\"\n        [attr.aria-label]=\"strings.actionsTooltip\"\n        [kbqDropdownTriggerFor]=\"filterActions\"\n        [disabled]=\"savePopover.isSaving\"\n        [class.kbq-active]=\"focusedElementBeforeIs(filterActionsButton) && filterActionsOpened\"\n        [class]=\"{ 'kbq-button_changed-saved-filter': filterBar.isSavedAndChanged() }\"\n    >\n        <i kbq-icon=\"kbq-ellipsis-vertical_16\" aria-hidden=\"true\"></i>\n    </button>\n\n    <i kbq-icon=\"kbq-chevron-right-s_16\" class=\"kbq-filter-bar__arrow\" [color]=\"'theme'\"></i>\n} @else {\n    <kbq-divider class=\"kbq-filter-bar__separator\" [vertical]=\"true\" />\n}\n\n<kbq-dropdown #savedFilters=\"kbqDropdown\" [class]=\"'kbq-filters__dropdown'\">\n    <div [style.display]=\"isEmpty ? 'none' : 'initial'\">\n        <kbq-form-field noBorders>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n\n            <input\n                #search\n                placeholder=\"{{ strings.searchPlaceholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                [attr.aria-label]=\"strings.searchPlaceholder\"\n                [formControl]=\"searchControl\"\n                (click)=\"stopEventPropagation($event)\"\n                (keydown)=\"searchKeydownHandler($event)\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n\n        <kbq-divider />\n\n        @for (filter of filteredOptions(); track filter) {\n            <button\n                kbq-dropdown-item\n                kbq-title\n                [class.kbq-selected]=\"filterBar.filter()?.name === filter.name\"\n                (click)=\"selectFilter(filter)\"\n            >\n                {{ filter.name }}\n            </button>\n        } @empty {\n            <button kbq-dropdown-item [disabled]=\"true\">\n                {{ strings.searchEmptyResult }}\n            </button>\n        }\n\n        <kbq-divider />\n    </div>\n\n    <button kbq-dropdown-item (click)=\"savePopover.openSaveAsNewFilterPopover()\">\n        <i kbq-icon=\"kbq-plus_16\"></i>\n        {{ strings.saveAsNewFilter }}\n    </button>\n</kbq-dropdown>\n\n<kbq-dropdown #filterActions=\"kbqDropdown\" [class]=\"'kbq-filters__dropdown'\">\n    @if (filterBar.isSavedAndChanged() && !filterBar.isReadOnly()) {\n        <button\n            kbq-dropdown-item\n            [class]=\"{ 'kbq-button_changed-saved-filter': filterBar.isSavedAndChanged() }\"\n            (click)=\"saveChanges()\"\n        >\n            <i kbq-icon=\"kbq-floppy-disk_16\"></i>\n            {{ strings.saveChangesButton }}\n            @if (filterBar.isSavedAndChanged()) {\n                <i class=\"kbq kbq-icon kbq-icon-button kbq-warning layout-margin-left-xs kbq-circle-xs_16\"></i>\n            }\n        </button>\n    }\n    <button kbq-dropdown-item (click)=\"savePopover.openSaveAsNewFilterPopover()\">\n        <i kbq-icon=\"kbq-plus_16\"></i>\n        {{ strings.saveAsNewButton }}\n    </button>\n\n    @if (!filterBar.isReadOnly()) {\n        <button kbq-dropdown-item (click)=\"savePopover.openChangeFilterNamePopover()\">\n            <i kbq-icon=\"kbq-pencil_16\"></i>\n            {{ strings.change }}\n        </button>\n    }\n\n    @if (filterBar.isSavedAndChanged() || !filterBar.isReadOnly()) {\n        <kbq-divider />\n    }\n\n    @if (filterBar.isSavedAndChanged()) {\n        <button kbq-dropdown-item (click)=\"resetFilterChanges()\">\n            <i kbq-icon=\"kbq-circle-xmark_16\"></i>\n            {{ strings.resetChanges }}\n        </button>\n    }\n    @if (!filterBar.isReadOnly()) {\n        <button kbq-dropdown-item (click)=\"removeFilter()\">\n            <i kbq-icon=\"kbq-trash_16\"></i>\n            {{ strings.remove }}\n        </button>\n    }\n</kbq-dropdown>\n\n<kbq-filter-save-popover\n    #savePopover\n    [popoverTrigger]=\"popoverRef\"\n    [filterBar]=\"filterBar\"\n    (save)=\"onSave.emit($event)\"\n    (closed)=\"onSavePopoverClosed($event)\"\n/>\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-filters{display:flex}.kbq-filters>.kbq-button{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-filters>.kbq-button .kbq-button-wrapper{width:100%}.kbq-filters>.kbq-button .kbq-button-text{display:flex;align-items:center}.kbq-filters>.kbq-button .kbq-icon{margin-inline-end:var(--kbq-size-xxs)}.kbq-filters .kbq-filters__filter-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-filters .kbq-filters__filter-name .kbq-icon{margin-bottom:var(--kbq-size-3xs)}.kbq-filters .kbq-filter-bar__separator{align-self:center;height:var(--kbq-size-m)!important;margin-inline-start:calc(var(--kbq-size-s) + var(--kbq-size-xs))!important;margin-inline-end:var(--kbq-size-xs)!important}.kbq-filters .kbq-filter-bar__arrow{align-self:center;margin-inline-start:var(--kbq-size-s)}.kbq-filters .kbq-button.kbq-button_changed-filter{border-end-end-radius:unset;border-start-end-radius:unset}.kbq-filters .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset}.kbq-filters .kbq-button_changed-saved-filter:before{content:\"\";position:absolute;inset-inline-end:-4px;top:-4px;width:var(--kbq-size-s);height:var(--kbq-size-s);border-width:2px;border-style:solid;border-radius:var(--kbq-size-xs)}.kbq-filters .kbq-button:not(:hover,.kbq-active)+.kbq-button_action:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:10px;width:1px;height:var(--kbq-size-m)}.kbq-filters__save-as-new-filter-popover{--kbq-filter-bar-save-popover-width: 400px}.kbq-filters__save-as-new-filter-popover .kbq-popover__container{width:var(--kbq-filter-bar-save-popover-width)}.kbq-filters__save-as-new-filter-popover .kbq-popover__content{padding:var(--kbq-size-s) var(--kbq-size-xxl)}.kbq-filters__dropdown .kbq-dropdown-item{padding-inline-end:var(--kbq-size-s)}.kbq-filters .kbq-button_changed-saved-filter:before{border-color:var(--kbq-background-bg);background:var(--kbq-icon-warning)}.kbq-filters .kbq-button:not(:hover,.kbq-active)+.kbq-button_action:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}\n"], dependencies: [{ 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: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i1.KbqButtonDropdownTrigger, selector: "[kbq-button][kbqDropdownTriggerFor]" }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i3$1.KbqDropdown, selector: "kbq-dropdown", inputs: ["activeDescendantNavigation", "navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass", "panelWidth", "panelMinWidth", "panelMaxWidth", "safeArea"], outputs: ["xPositionChange", "yPositionChange", "overlapTriggerYChange", "overlapTriggerXChange", "closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i3$1.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled", "progress"], exportAs: ["kbqDropdownItem"] }, { kind: "directive", type: i3$1.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "kbqDropdownTriggerOrigin", "kbqDropdownTriggerAutoFocus", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["offsetXChange", "openByArrowDownChange", "kbqDropdownTriggerRestoreFocusChange", "dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i4.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "paddings", "decorative", "length"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { 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: "directive", type: KbqFilterBarButton, selector: "[kbqFilterBarButton]" }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5$1.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["kbqPopoverHideIfNotInViewPort", "kbqTrigger", "kbqLeaveDelay", "kbqEnterDelay", "kbqPopoverPreventClose", "kbqPopoverStickToWindow", "kbqPopoverContainer", "kbqPopoverHasBackdrop", "kbqPopoverBackdropClass", "kbqPopoverDefaultPaddings", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverContext", "kbqPopoverAriaLabel", "kbqPopoverHasCloseButton", "kbqPopoverCloseOnScroll", "kbqPopoverArrow", "kbqPopoverOffset", "kbqPopoverAutoFocus", "kbqPopoverOrigin", "kbqPopoverDisabled", "kbqPopoverPlacementPriority", "kbqPopoverPlacement", "kbqPopoverVisible"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: KbqFormsModule }, { kind: "component", type: KbqFilterSavePopover, selector: "kbq-filter-save-popover", inputs: ["popoverTrigger", "filterBar"], outputs: ["save", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqFilters, isStandalone: true, selector: "kbq-filters", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSelectFilter: "onSelectFilter", onSave: "onSave", onChangeFilter: "onChangeFilter", onRemoveFilter: "onRemoveFilter", onResetFilterChanges: "onResetFilterChanges" }, host: { classAttribute: "kbq-filters" }, providers: [{ provide: KBQ_FILTERS, useExisting: forwardRef((() => KbqFilters)) }], viewQueries: [{ propertyName: "mainButton", first: true, predicate: ["mainButton"], descendants: true, isSignal: true }, { propertyName: "saveNewFilterButton", first: true, predicate: ["saveNewFilterButton"], descendants: true, isSignal: true }, { propertyName: "filterActionsButton", first: true, predicate: ["filterActionsButton"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: KbqPopoverTrigger, descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: KbqDropdownTrigger, descendants: true, isSignal: true }, { propertyName: "filterActionsDropdown", first: true, predicate: ["filterActionsButton"], descendants: true, isSignal: true }, { propertyName: "savePopover", first: true, predicate: KbqFilterSavePopover, descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: ["search"], descendants: true, isSignal: true }], exportAs: ["kbqFilters"], ngImport: i0, template: "@let strings = filterBar.localeConfiguration().filters;\n\n<button\n    #mainButton\n    #popoverRef=\"kbqPopover\"\n    kbq-button\n    kbq-title\n    kbqFilterBarButton\n    kbqPopover\n    [kbqDropdownTriggerFor]=\"savedFilters\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverOffset]=\"popoverOffset\"\n    [kbqPopoverClass]=\"'kbq-filters__save-as-new-filter-popover'\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    [kbqPopoverSize]=\"popoverSize\"\n    [kbqTrigger]=\"'manual'\"\n    [disabled]=\"savePopover.isSaving\"\n    [class.kbq-active]=\"focusedElementBeforeIs(mainButton) && opened\"\n    (dropdownClosed)=\"searchControl.setValue('')\"\n    (dropdownOpened)=\"onDropdownOpen()\"\n>\n    <span #kbqTitleText class=\"kbq-filters__filter-name\">\n        @if (filter?.name) {\n            {{ filter!.name }}\n        } @else {\n            <ng-content>\n                <i kbq-icon=\"kbq-list_16\"></i>\n                {{ strings.defaultName }}\n            </ng-content>\n        }\n    </span>\n</button>\n\n@if (filterBar.isChanged() && !filterBar.isSaved()) {\n    <button\n        #saveNewFilterButton\n        kbqTooltip=\"{{ strings.saveNewFilterTooltip }}\"\n        kbq-button\n        kbqFilterBarButton\n        class=\"kbq-button_action\"\n        [attr.aria-label]=\"strings.saveNewFilterTooltip\"\n        [class.kbq-active]=\"focusedElementBeforeIs(saveNewFilterButton) && opened\"\n        [disabled]=\"savePopover.isSaving\"\n        (click)=\"savePopover.openSaveAsNewFilterPopover()\"\n    >\n        <i kbq-icon=\"kbq-floppy-disk_16\" aria-hidden=\"true\"></i>\n    </button>\n}\n\n@if (filterBar.isSaved()) {\n    <button\n        #filterActionsButton\n        kbq-button\n        kbqFilterBarButton\n        class=\"kbq-button_action\"\n        [attr.aria-label]=\"strings.actionsTooltip\"\n        [kbqDropdownTriggerFor]=\"filterActions\"\n        [disabled]=\"savePopover.isSaving\"\n        [class.kbq-active]=\"focusedElementBeforeIs(filterActionsButton) && filterActionsOpened\"\n        [class]=\"{ 'kbq-button_changed-saved-filter': filterBar.isSavedAndChanged() }\"\n    >\n        <i kbq-icon=\"kbq-ellipsis-vertical_16\" aria-hidden=\"true\"></i>\n    </button>\n\n    <i kbq-icon=\"kbq-chevron-right-s_16\" class=\"kbq-filter-bar__arrow\" [color]=\"'theme'\"></i>\n} @else {\n    <kbq-divider class=\"kbq-filter-bar__separator\" [vertical]=\"true\" />\n}\n\n<kbq-dropdown #savedFilters=\"kbqDropdown\" [class]=\"'kbq-filters__dropdown'\">\n    <div [style.display]=\"isEmpty ? 'none' : 'initial'\">\n        <kbq-form-field noBorders>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n\n            <input\n                #search\n                placeholder=\"{{ strings.searchPlaceholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                [attr.aria-label]=\"strings.searchPlaceholder\"\n                [formControl]=\"searchControl\"\n                (click)=\"stopEventPropagation($event)\"\n                (keydown)=\"searchKeydownHandler($event)\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n\n        <kbq-divider />\n\n        @for (filter of filteredOptions(); track filter) {\n            <button\n                kbq-dropdown-item\n                kbq-title\n                [class.kbq-selected]=\"filterBar.filter()?.name === filter.name\"\n                (click)=\"selectFilter(filter)\"\n            >\n                {{ filter.name }}\n            </button>\n        } @empty {\n            <button kbq-dropdown-item [disabled]=\"true\">\n                {{ strings.searchEmptyResult }}\n            </button>\n        }\n\n        <kbq-divider />\n    </div>\n\n    <button kbq-dropdown-item (click)=\"savePopover.openSaveAsNewFilterPopover()\">\n        <i kbq-icon=\"kbq-plus_16\"></i>\n        {{ strings.saveAsNewFilter }}\n    </button>\n</kbq-dropdown>\n\n<kbq-dropdown #filterActions=\"kbqDropdown\" [class]=\"'kbq-filters__dropdown'\">\n    @if (filterBar.isSavedAndChanged() && !filterBar.isReadOnly()) {\n        <button\n            kbq-dropdown-item\n            [class]=\"{ 'kbq-button_changed-saved-filter': filterBar.isSavedAndChanged() }\"\n            (click)=\"saveChanges()\"\n        >\n            <i kbq-icon=\"kbq-floppy-disk_16\"></i>\n            {{ strings.saveChangesButton }}\n            @if (filterBar.isSavedAndChanged()) {\n                <i class=\"kbq kbq-icon kbq-icon-button kbq-warning layout-margin-left-xs kbq-circle-xs_16\"></i>\n            }\n        </button>\n    }\n    <button kbq-dropdown-item (click)=\"savePopover.openSaveAsNewFilterPopover()\">\n        <i kbq-icon=\"kbq-plus_16\"></i>\n        {{ strings.saveAsNewButton }}\n    </button>\n\n    @if (!filterBar.isReadOnly()) {\n        <button kbq-dropdown-item (click)=\"savePopover.openChangeFilterNamePopover()\">\n            <i kbq-icon=\"kbq-pencil_16\"></i>\n            {{ strings.change }}\n        </button>\n    }\n\n    @if (filterBar.isSavedAndChanged() || !filterBar.isReadOnly()) {\n        <kbq-divider />\n    }\n\n    @if (filterBar.isSavedAndChanged()) {\n        <button kbq-dropdown-item (click)=\"resetFilterChanges()\">\n            <i kbq-icon=\"kbq-circle-xmark_16\"></i>\n            {{ strings.resetChanges }}\n        </button>\n    }\n    @if (!filterBar.isReadOnly()) {\n        <button kbq-dropdown-item (click)=\"removeFilter()\">\n            <i kbq-icon=\"kbq-trash_16\"></i>\n            {{ strings.remove }}\n        </button>\n    }\n</kbq-dropdown>\n\n<kbq-filter-save-popover\n    #savePopover\n    [popoverTrigger]=\"popoverRef\"\n    [filterBar]=\"filterBar\"\n    (save)=\"onSave.emit($event)\"\n    (closed)=\"onSavePopoverClosed($event)\"\n/>\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-filters{display:flex}.kbq-filters>.kbq-button{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-filters>.kbq-button .kbq-button-wrapper{width:100%}.kbq-filters>.kbq-button .kbq-button-text{display:flex;align-items:center}.kbq-filters>.kbq-button .kbq-icon{margin-inline-end:var(--kbq-size-xxs)}.kbq-filters .kbq-filters__filter-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-filters .kbq-filters__filter-name .kbq-icon{margin-bottom:var(--kbq-size-3xs)}.kbq-filters .kbq-filter-bar__separator{align-self:center;height:var(--kbq-size-m)!important;margin-inline-start:calc(var(--kbq-size-s) + var(--kbq-size-xs))!important;margin-inline-end:var(--kbq-size-xs)!important}.kbq-filters .kbq-filter-bar__arrow{align-self:center;margin-inline-start:var(--kbq-size-s)}.kbq-filters .kbq-button.kbq-button_changed-filter{border-end-end-radius:unset;border-start-end-radius:unset}.kbq-filters .kbq-button-icon{border-end-start-radius:unset;border-start-start-radius:unset}.kbq-filters .kbq-button_changed-saved-filter:before{content:\"\";position:absolute;inset-inline-end:-4px;top:-4px;width:var(--kbq-size-s);height:var(--kbq-size-s);border-width:2px;border-style:solid;border-radius:var(--kbq-size-xs)}.kbq-filters .kbq-button:not(:hover,.kbq-active)+.kbq-button_action:not(:hover,.kbq-active):after{content:\"\";position:absolute;inset-inline-start:0;top:10px;width:1px;height:var(--kbq-size-m)}.kbq-filters__save-as-new-filter-popover{--kbq-filter-bar-save-popover-width: 400px}.kbq-filters__save-as-new-filter-popover .kbq-popover__container{width:var(--kbq-filter-bar-save-popover-width)}.kbq-filters__save-as-new-filter-popover .kbq-popover__content{padding:var(--kbq-size-s) var(--kbq-size-xxl)}.kbq-filters__dropdown .kbq-dropdown-item{padding-inline-end:var(--kbq-size-s)}.kbq-filters .kbq-button_changed-saved-filter:before{border-color:var(--kbq-background-bg);background:var(--kbq-icon-warning)}.kbq-filters .kbq-button:not(:hover,.kbq-active)+.kbq-button_action:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}\n"], dependencies: [{ 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: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i1.KbqButtonDropdownTrigger, selector: "[kbq-button][kbqDropdownTriggerFor]" }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i3$1.KbqDropdown, selector: "kbq-dropdown", inputs: ["activeDescendantNavigation", "navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass", "panelWidth", "panelMinWidth", "panelMaxWidth", "safeArea"], outputs: ["xPositionChange", "yPositionChange", "overlapTriggerYChange", "overlapTriggerXChange", "closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i3$1.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled", "progress"], exportAs: ["kbqDropdownItem"] }, { kind: "directive", type: i3$1.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "kbqDropdownTriggerOrigin", "kbqDropdownTriggerAutoFocus", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["offsetXChange", "openByArrowDownChange", "kbqDropdownTriggerRestoreFocusChange", "dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i4.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "paddings", "decorative", "length"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "readonly", "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", "showRequiredMarker"], 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: KbqFilterBarButton, selector: "[kbqFilterBarButton]" }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipArrowCentered", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5$1.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["kbqPopoverHideIfNotInViewPort", "kbqTrigger", "kbqLeaveDelay", "kbqEnterDelay", "kbqPopoverPreventClose", "kbqPopoverStickToWindow", "kbqPopoverContainer", "kbqPopoverHasBackdrop", "kbqPopoverBackdropClass", "kbqPopoverDefaultPaddings", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverContext", "kbqPopoverAriaLabel", "kbqPopoverHasCloseButton", "kbqPopoverCloseOnScroll", "kbqPopoverArrow", "kbqPopoverArrowCentered", "kbqPopoverOffset", "kbqPopoverAutoFocus", "kbqRelativeToPointer", "kbqPopoverOrigin", "kbqPopoverDisabled", "kbqPopoverPlacementPriority", "kbqPopoverPlacement", "kbqPopoverVisible"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: KbqFormsModule }, { kind: "component", type: KbqFilterSavePopover, selector: "kbq-filter-save-popover", inputs: ["popoverTrigger", "filterBar"], outputs: ["save", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqFilters, decorators: [{
             type: Component,
@@ -834,14 +834,14 @@ class KbqBasePipe {
             const template = templates?.find((template) => getId(template) === getId(this.data));
             if (template?.values) {
                 this.values = template.values;
-                this.valueTemplate = template.valueTemplate;
             }
             // 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`, `multilineOptions` and `noOptionsText` are synced on the same
-            // terms, and for the same reason.
+            // `valueTemplate`, `lockedValues`, `panelMaxHeight`, `multilineOptions` and `noOptionsText` are synced
+            // on the same terms, and for the same reason.
             if (template) {
+                this.valueTemplate = template.valueTemplate;
                 this.optionCompareWith = template.compareWith;
                 this.lockedValues = template.lockedValues;
                 this.panelMaxHeight = template.panelMaxHeight;
@@ -1305,7 +1305,7 @@ class KbqFilterBar {
 
             <ng-content select="kbq-filter-refresher, [kbq-filter-refresher]" />
         </div>
-    `, isInline: true, styles: [".kbq-filter-bar{--kbq-filter-bar-pipe-max-width: 320px;--kbq-filter-bar-pipe-input-width: 240px;--kbq-filter-bar-refresher-min-width: 64px}\n", ".kbq-filter-bar{display:flex;flex-direction:row;justify-content:space-between;width:100%}.kbq-filter-bar .kbq-filter-bar__left{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--kbq-size-s)}.kbq-filter-bar .kbq-filter-bar__left .kbq-button>.kbq-icon{margin-inline-end:var(--kbq-size-xxs)}.kbq-filter-bar .kbq-filter-bar__left>.kbq-icon{align-self:center}.kbq-filter-bar .kbq-filter-bar__right{display:flex;flex-direction:row;margin-inline-start:var(--kbq-size-3xl)}.kbq-pipe__popover{--kbq-filter-bar-popover-width: 320px}.kbq-pipe__popover .kbq-popover__container{min-width:var(--kbq-filter-bar-popover-width);max-width:var(--kbq-filter-bar-popover-width)}.kbq-pipe__popover .kbq-popover__content{padding:var(--kbq-size-m) var(--kbq-size-m) 1px!important}.kbq-pipe__popover .kbq-popover__footer{padding:var(--kbq-size-xxs)}.kbq-pipe__popover .kbq-popover__footer .kbq-button:not(.kbq-disabled){display:flex;flex-direction:row;width:100%;justify-content:flex-start}.kbq-pipe__popover .kbq-popover__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-button,.kbq-button-icon{-webkit-font-smoothing:antialiased}.kbq-button.kbq-button_changed-filter,.kbq-button-icon.kbq-button_changed-filter{color:var(--kbq-foreground-theme);background:var(--kbq-states-background-theme-less-active)}.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty,.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-icon-theme)}.kbq-button.kbq-button_changed-filter:hover:not(.kbq-disabled),.kbq-button.kbq-button_changed-filter.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter.kbq-hover:not(.kbq-disabled){background:var(--kbq-states-background-theme-less-hover)}.kbq-button.kbq-button_changed-filter:active:not(.kbq-disabled),.kbq-button.kbq-button_changed-filter.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter.kbq-active:not(.kbq-disabled){background:var(--kbq-states-background-theme-fade-active)}.kbq-button.kbq-button_changed-filter.cdk-keyboard-focused,.kbq-button-icon.kbq-button_changed-filter.cdk-keyboard-focused{outline:1px solid var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-button.kbq-button_changed-filter.kbq-disabled,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled{color:var(--kbq-states-foreground-disabled);background:var(--kbq-states-background-disabled)}.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-states-icon-disabled)}.kbq-hint.kbq-date-period__hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: KbqDividerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-filter-bar{--kbq-filter-bar-pipe-max-width: 320px;--kbq-filter-bar-pipe-input-width: 240px;--kbq-filter-bar-refresher-min-width: 64px}\n", ".kbq-filter-bar{display:flex;flex-direction:row;justify-content:space-between;width:100%}.kbq-filter-bar .kbq-filter-bar__left{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--kbq-size-s)}.kbq-filter-bar .kbq-filter-bar__left .kbq-button>.kbq-icon{margin-inline-end:var(--kbq-size-xxs)}.kbq-filter-bar .kbq-filter-bar__left>.kbq-icon{align-self:center}.kbq-filter-bar .kbq-filter-bar__right{display:flex;flex-direction:row;margin-inline-start:var(--kbq-size-3xl)}.kbq-pipe__popover{--kbq-filter-bar-popover-width: 320px}.kbq-pipe__popover .kbq-popover__container{min-width:var(--kbq-filter-bar-popover-width);max-width:var(--kbq-filter-bar-popover-width)}.kbq-pipe__popover .kbq-popover__content{padding:var(--kbq-size-m) var(--kbq-size-m) 1px!important}.kbq-pipe__popover .kbq-popover__footer{padding:var(--kbq-size-xxs)}.kbq-pipe__popover .kbq-popover__footer .kbq-button:not(.kbq-disabled){display:flex;flex-direction:row;width:100%;justify-content:flex-start}.kbq-pipe__popover .kbq-popover__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-button,.kbq-button-icon{-webkit-font-smoothing:antialiased}.kbq-button.kbq-button_changed-filter,.kbq-button-icon.kbq-button_changed-filter{color:var(--kbq-foreground-theme);background:var(--kbq-states-background-theme-less-active)}.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty,.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-icon-theme)}.kbq-button.kbq-button_changed-filter:hover:not(.kbq-disabled),.kbq-button.kbq-button_changed-filter.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter.kbq-hover:not(.kbq-disabled){background:var(--kbq-states-background-theme-less-hover)}.kbq-button.kbq-button_changed-filter:active:not(.kbq-disabled),.kbq-button.kbq-button_changed-filter.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter.kbq-active:not(.kbq-disabled){background:var(--kbq-states-background-theme-fade-active)}.kbq-button.kbq-button_changed-filter.cdk-keyboard-focused,.kbq-button-icon.kbq-button_changed-filter.cdk-keyboard-focused{outline:1px solid var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-button.kbq-button_changed-filter.kbq-disabled,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled{color:var(--kbq-states-foreground-disabled);background:var(--kbq-states-background-disabled)}.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-states-icon-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: KbqDividerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqFilterBar, decorators: [{
             type: Component,
@@ -1330,7 +1330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                     }, hostDirectives: [
                         { directive: KbqStateSaving, inputs: ['useStateSaving', 'stateSavingKey'] },
                         { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
-                    ], styles: [".kbq-filter-bar{--kbq-filter-bar-pipe-max-width: 320px;--kbq-filter-bar-pipe-input-width: 240px;--kbq-filter-bar-refresher-min-width: 64px}\n", ".kbq-filter-bar{display:flex;flex-direction:row;justify-content:space-between;width:100%}.kbq-filter-bar .kbq-filter-bar__left{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--kbq-size-s)}.kbq-filter-bar .kbq-filter-bar__left .kbq-button>.kbq-icon{margin-inline-end:var(--kbq-size-xxs)}.kbq-filter-bar .kbq-filter-bar__left>.kbq-icon{align-self:center}.kbq-filter-bar .kbq-filter-bar__right{display:flex;flex-direction:row;margin-inline-start:var(--kbq-size-3xl)}.kbq-pipe__popover{--kbq-filter-bar-popover-width: 320px}.kbq-pipe__popover .kbq-popover__container{min-width:var(--kbq-filter-bar-popover-width);max-width:var(--kbq-filter-bar-popover-width)}.kbq-pipe__popover .kbq-popover__content{padding:var(--kbq-size-m) var(--kbq-size-m) 1px!important}.kbq-pipe__popover .kbq-popover__footer{padding:var(--kbq-size-xxs)}.kbq-pipe__popover .kbq-popover__footer .kbq-button:not(.kbq-disabled){display:flex;flex-direction:row;width:100%;justify-content:flex-start}.kbq-pipe__popover .kbq-popover__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-button,.kbq-button-icon{-webkit-font-smoothing:antialiased}.kbq-button.kbq-button_changed-filter,.kbq-button-icon.kbq-button_changed-filter{color:var(--kbq-foreground-theme);background:var(--kbq-states-background-theme-less-active)}.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty,.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-icon-theme)}.kbq-button.kbq-button_changed-filter:hover:not(.kbq-disabled),.kbq-button.kbq-button_changed-filter.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter.kbq-hover:not(.kbq-disabled){background:var(--kbq-states-background-theme-less-hover)}.kbq-button.kbq-button_changed-filter:active:not(.kbq-disabled),.kbq-button.kbq-button_changed-filter.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter.kbq-active:not(.kbq-disabled){background:var(--kbq-states-background-theme-fade-active)}.kbq-button.kbq-button_changed-filter.cdk-keyboard-focused,.kbq-button-icon.kbq-button_changed-filter.cdk-keyboard-focused{outline:1px solid var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-button.kbq-button_changed-filter.kbq-disabled,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled{color:var(--kbq-states-foreground-disabled);background:var(--kbq-states-background-disabled)}.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-states-icon-disabled)}.kbq-hint.kbq-date-period__hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"] }]
+                    ], styles: [".kbq-filter-bar{--kbq-filter-bar-pipe-max-width: 320px;--kbq-filter-bar-pipe-input-width: 240px;--kbq-filter-bar-refresher-min-width: 64px}\n", ".kbq-filter-bar{display:flex;flex-direction:row;justify-content:space-between;width:100%}.kbq-filter-bar .kbq-filter-bar__left{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--kbq-size-s)}.kbq-filter-bar .kbq-filter-bar__left .kbq-button>.kbq-icon{margin-inline-end:var(--kbq-size-xxs)}.kbq-filter-bar .kbq-filter-bar__left>.kbq-icon{align-self:center}.kbq-filter-bar .kbq-filter-bar__right{display:flex;flex-direction:row;margin-inline-start:var(--kbq-size-3xl)}.kbq-pipe__popover{--kbq-filter-bar-popover-width: 320px}.kbq-pipe__popover .kbq-popover__container{min-width:var(--kbq-filter-bar-popover-width);max-width:var(--kbq-filter-bar-popover-width)}.kbq-pipe__popover .kbq-popover__content{padding:var(--kbq-size-m) var(--kbq-size-m) 1px!important}.kbq-pipe__popover .kbq-popover__footer{padding:var(--kbq-size-xxs)}.kbq-pipe__popover .kbq-popover__footer .kbq-button:not(.kbq-disabled){display:flex;flex-direction:row;width:100%;justify-content:flex-start}.kbq-pipe__popover .kbq-popover__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-button,.kbq-button-icon{-webkit-font-smoothing:antialiased}.kbq-button.kbq-button_changed-filter,.kbq-button-icon.kbq-button_changed-filter{color:var(--kbq-foreground-theme);background:var(--kbq-states-background-theme-less-active)}.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty,.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-icon-theme)}.kbq-button.kbq-button_changed-filter:hover:not(.kbq-disabled),.kbq-button.kbq-button_changed-filter.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter.kbq-hover:not(.kbq-disabled){background:var(--kbq-states-background-theme-less-hover)}.kbq-button.kbq-button_changed-filter:active:not(.kbq-disabled),.kbq-button.kbq-button_changed-filter.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter.kbq-active:not(.kbq-disabled){background:var(--kbq-states-background-theme-fade-active)}.kbq-button.kbq-button_changed-filter.cdk-keyboard-focused,.kbq-button-icon.kbq-button_changed-filter.cdk-keyboard-focused{outline:1px solid var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-button.kbq-button_changed-filter.kbq-disabled,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled{color:var(--kbq-states-foreground-disabled);background:var(--kbq-states-background-disabled)}.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-states-icon-disabled)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { filters: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqFilters), { isSignal: true }] }], filterReset: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqFilterReset), { isSignal: true }] }], selectedAllEqualsSelectedNothing: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedAllEqualsSelectedNothing", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }, { type: i0.Output, args: ["filterChange"] }], pipeTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "pipeTemplates", required: false }] }], onChangePipe: [{ type: i0.Output, args: ["onChangePipe"] }], onRemovePipe: [{ type: i0.Output, args: ["onRemovePipe"] }], onClearPipe: [{ type: i0.Output, args: ["onClearPipe"] }], onClosePipe: [{ type: i0.Output, args: ["onClosePipe"] }] } });
 
 class KbqPipeState {
@@ -1417,7 +1417,7 @@ class KbqPipeButton {
         >
             <i kbq-icon="kbq-xmark-s_16" aria-hidden="true" [color]="pipe.data.disabled ? 'empty' : 'contrast'"></i>
         </button>
-    `, isInline: true, styles: [".kbq-pipe-button{display:flex;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2$1.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { 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: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-pipe-button{display:flex;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2$1.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { 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: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipArrowCentered", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqPipeButton, decorators: [{
             type: Component,
@@ -1881,7 +1881,7 @@ class KbqPipeDateComponent extends KbqPipeDateBaseComponent {
                 provide: KbqBasePipe,
                 useExisting: this
             }
-        ], usesInheritance: true, ngImport: i0, template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbq-title]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverOffset]=\"4\"\n    [kbqPopoverDefaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    [kbqPopoverAriaLabel]=\"data.name\"\n>\n    <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!formattedValue\">\n        {{ formattedValue }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    @if (isListMode()) {\n        @if (!noOptions) {\n            <div class=\"kbq-date-list\">\n                <kbq-list-selection\n                    #listSelection\n                    [autoSelect]=\"false\"\n                    [attr.aria-label]=\"data.name\"\n                    [ngModel]=\"data.value?.name\"\n                >\n                    <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                        {{ localeConfiguration().datePipe.customPeriod }}\n                        <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->\n                        <ng-container>\n                            <i kbq-icon=\"kbq-chevron-right_16\" color=\"contrast-fade\"></i>\n                        </ng-container>\n                    </kbq-list-option>\n\n                    @for (item of values; track item) {\n                        <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n                            {{ item.name }}\n                        </kbq-list-option>\n                    }\n                </kbq-list-selection>\n            </div>\n        }\n    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n            @if (!noOptions) {\n                <div class=\"kbq-date-period__header\">\n                    <button\n                        #returnButton\n                        kbq-button\n                        [color]=\"colors.Theme\"\n                        [kbqStyle]=\"styles.Transparent\"\n                        (click)=\"showList()\"\n                    >\n                        <i kbq-icon=\"kbq-chevron-left_16\"></i>\n                        {{ localeConfiguration().datePipe.backToPeriodSelection }}\n                    </button>\n                </div>\n            }\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\" [id]=\"fromLabelId\">\n                    {{ localeConfiguration().datePipe.customPeriodFrom }}\n                </label>\n\n                <kbq-form-field\n                    class=\"kbq-date-period__date kbq-form__control\"\n                    [class.kbq-focused]=\"showStartCalendar()\"\n                >\n                    <input\n                        #periodStartInput\n                        formControlName=\"start\"\n                        [kbqCalendar]=\"startDateCalendar\"\n                        [min]=\"min\"\n                        [max]=\"startMax\"\n                        [attr.aria-labelledby]=\"fromLabelId\"\n                        (focusin)=\"onFocusStartInput()\"\n                        (keydown.tab)=\"onDateInputTab()\"\n                        (keydown.shift.tab)=\"onDateInputTab()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar()\"\n                    [minDate]=\"min\"\n                    [maxDate]=\"startMax\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\" [id]=\"toLabelId\">\n                    {{ localeConfiguration().datePipe.customPeriodTo }}\n                </label>\n\n                <kbq-form-field class=\"kbq-date-period__date kbq-form__control\" [class.kbq-focused]=\"showEndCalendar()\">\n                    <input\n                        formControlName=\"end\"\n                        [kbqCalendar]=\"endDateCalendar\"\n                        [min]=\"min\"\n                        [max]=\"max\"\n                        [attr.aria-labelledby]=\"toLabelId\"\n                        (focusin)=\"onFocusEndInput()\"\n                        (keydown.tab)=\"onDateInputTab()\"\n                        (keydown.shift.tab)=\"onDateInputTab()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                @if (isPeriodInverted) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeConfiguration().datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                } @else if (formGroup.errors?.kbqDateIntervalMin) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ minIntervalErrorHint }}\n                    </kbq-hint>\n                } @else if (formGroup.errors?.kbqDateIntervalMax) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ maxIntervalErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar()\"\n                    [minDate]=\"min\"\n                    [maxDate]=\"max\"\n                    (selectedChange)=\"onSelectEndDate($event)\"\n                />\n            </form>\n\n            <div class=\"kbq-date-period__footer\">\n                <button\n                    kbq-button\n                    [color]=\"'theme'\"\n                    [disabled]=\"disabled\"\n                    [kbqStyle]=\"'transparent'\"\n                    (click)=\"onApplyPeriod()\"\n                >\n                    <span>{{ localeConfiguration().pipe.applyButton }}</span>\n                    &nbsp;\n                    <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n                </button>\n            </div>\n        </div>\n    }\n</ng-template>\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\">{{ formattedValue }}</div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover{--kbq-filter-bar-date-period-width: 320px;--kbq-filter-bar-date-field-width: 136px}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-inline:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-inline-start:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color, var(--kbq-icon-contrast-fade))}.kbq-pipe-date__popover .kbq-date-period{width:var(--kbq-filter-bar-date-period-width)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding:var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content minmax(min-content,1fr);padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content:first-child{padding-block-start:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-inline-start:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-inline-end:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{width:auto}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{width:var(--kbq-filter-bar-date-field-width)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-start-end-radius:unset;border-end-end-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{flex:1;margin-inline-start:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-start-start-radius:unset;border-end-start-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-inline:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-datepicker-grid-cell-states-disabled-text);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2$1.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqMinValidator, selector: "[min][formControlName],[min][formControl],[min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.KbqMaxValidator, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: ["max"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqSuffix, selector: "[kbqSuffix]", exportAs: ["kbqSuffix"] }, { kind: "component", type: i5.KbqHint, selector: "kbq-hint", inputs: ["id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5$1.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["kbqPopoverHideIfNotInViewPort", "kbqTrigger", "kbqLeaveDelay", "kbqEnterDelay", "kbqPopoverPreventClose", "kbqPopoverStickToWindow", "kbqPopoverContainer", "kbqPopoverHasBackdrop", "kbqPopoverBackdropClass", "kbqPopoverDefaultPaddings", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverContext", "kbqPopoverAriaLabel", "kbqPopoverHasCloseButton", "kbqPopoverCloseOnScroll", "kbqPopoverArrow", "kbqPopoverOffset", "kbqPopoverAutoFocus", "kbqPopoverOrigin", "kbqPopoverDisabled", "kbqPopoverPlacementPriority", "kbqPopoverPlacement", "kbqPopoverVisible"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { 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: KbqListModule }, { kind: "component", type: i7.KbqListSelection, selector: "kbq-list-selection", inputs: ["autoSelect", "noUnselectLast", "draggable", "connectedTo", "dragPreview", "dragCursor", "selectAllToggle", "selectAll", "multiple", "horizontal", "tabIndex", "disabled", "compareWith", "selectAllHandler"], outputs: ["onSelectAll", "onCopy", "dropped", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i7.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "selectAllRow", "value", "disabled", "draggable", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "ngmodule", type: KbqDatepickerModule }, { kind: "component", type: i8.KbqCalendar, selector: "kbq-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "monthSelected", "userSelection"], exportAs: ["kbqCalendar"] }, { kind: "directive", type: i8.KbqDatepickerInput, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: ["errorStateMatcher", "placeholder", "required", "kbqDatepicker", "kbqCalendar", "kbqDatepickerFilter", "value", "min", "max", "disabled", "id", "kbqValidationTooltip"], outputs: ["incorrectInput", "dateChange", "dateInput"], exportAs: ["kbqDatepickerInput"] }, { kind: "ngmodule", type: KbqTimepickerModule }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqFormattersModule }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbq-title]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverOffset]=\"4\"\n    [kbqPopoverDefaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    [kbqPopoverAriaLabel]=\"data.name\"\n>\n    <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!formattedValue\">\n        {{ formattedValue }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    @if (isListMode()) {\n        @if (!noOptions) {\n            <div class=\"kbq-date-list\">\n                <kbq-list-selection\n                    #listSelection\n                    [autoSelect]=\"false\"\n                    [attr.aria-label]=\"data.name\"\n                    [ngModel]=\"data.value?.name\"\n                >\n                    <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                        {{ localeConfiguration().datePipe.customPeriod }}\n                        <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->\n                        <ng-container>\n                            <i kbq-icon=\"kbq-chevron-right_16\" color=\"contrast-fade\"></i>\n                        </ng-container>\n                    </kbq-list-option>\n\n                    @for (item of values; track item) {\n                        <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n                            {{ item.name }}\n                        </kbq-list-option>\n                    }\n                </kbq-list-selection>\n            </div>\n        }\n    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n            @if (!noOptions) {\n                <div class=\"kbq-date-period__header\">\n                    <button\n                        #returnButton\n                        kbq-button\n                        [color]=\"colors.Theme\"\n                        [kbqStyle]=\"styles.Transparent\"\n                        (click)=\"showList()\"\n                    >\n                        <i kbq-icon=\"kbq-chevron-left_16\"></i>\n                        {{ localeConfiguration().datePipe.backToPeriodSelection }}\n                    </button>\n                </div>\n            }\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\" [id]=\"fromLabelId\">\n                    {{ localeConfiguration().datePipe.customPeriodFrom }}\n                </label>\n\n                <kbq-form-field\n                    class=\"kbq-date-period__date kbq-form__control\"\n                    [class.kbq-focused]=\"showStartCalendar()\"\n                >\n                    <input\n                        #periodStartInput\n                        formControlName=\"start\"\n                        [kbqCalendar]=\"startDateCalendar\"\n                        [min]=\"min\"\n                        [max]=\"startMax\"\n                        [attr.aria-labelledby]=\"fromLabelId\"\n                        (focusin)=\"onFocusStartInput()\"\n                        (keydown.tab)=\"onDateInputTab()\"\n                        (keydown.shift.tab)=\"onDateInputTab()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar()\"\n                    [minDate]=\"min\"\n                    [maxDate]=\"startMax\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\" [id]=\"toLabelId\">\n                    {{ localeConfiguration().datePipe.customPeriodTo }}\n                </label>\n\n                <kbq-form-field class=\"kbq-date-period__date kbq-form__control\" [class.kbq-focused]=\"showEndCalendar()\">\n                    <input\n                        formControlName=\"end\"\n                        [kbqCalendar]=\"endDateCalendar\"\n                        [min]=\"min\"\n                        [max]=\"max\"\n                        [attr.aria-labelledby]=\"toLabelId\"\n                        (focusin)=\"onFocusEndInput()\"\n                        (keydown.tab)=\"onDateInputTab()\"\n                        (keydown.shift.tab)=\"onDateInputTab()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                @if (isPeriodInverted) {\n                    <kbq-hint compact class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeConfiguration().datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                } @else if (formGroup.errors?.kbqDateIntervalMin) {\n                    <kbq-hint compact class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ minIntervalErrorHint }}\n                    </kbq-hint>\n                } @else if (formGroup.errors?.kbqDateIntervalMax) {\n                    <kbq-hint compact class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ maxIntervalErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar()\"\n                    [minDate]=\"min\"\n                    [maxDate]=\"max\"\n                    (selectedChange)=\"onSelectEndDate($event)\"\n                />\n            </form>\n\n            <div class=\"kbq-date-period__footer\">\n                <button\n                    kbq-button\n                    [color]=\"'theme'\"\n                    [disabled]=\"disabled\"\n                    [kbqStyle]=\"'transparent'\"\n                    (click)=\"onApplyPeriod()\"\n                >\n                    <span>{{ localeConfiguration().pipe.applyButton }}</span>\n                    &nbsp;\n                    <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n                </button>\n            </div>\n        </div>\n    }\n</ng-template>\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\">{{ formattedValue }}</div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover{--kbq-filter-bar-date-period-width: 320px;--kbq-filter-bar-date-field-width: 136px}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-inline:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-inline-start:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color, var(--kbq-icon-contrast-fade))}.kbq-pipe-date__popover .kbq-date-period{width:var(--kbq-filter-bar-date-period-width)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding:var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content minmax(min-content,1fr);padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content:first-child{padding-block-start:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-inline-start:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-inline-end:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{width:auto}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{width:var(--kbq-filter-bar-date-field-width)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-start-end-radius:unset;border-end-end-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{flex:1;margin-inline-start:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-start-start-radius:unset;border-end-start-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-inline:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-datepicker-grid-cell-states-disabled-text);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2$1.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqMinValidator, selector: "[min][formControlName],[min][formControl],[min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.KbqMaxValidator, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: ["max"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass", "showRequiredMarker"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqSuffix, selector: "[kbqSuffix]", exportAs: ["kbqSuffix"] }, { kind: "component", type: i5.KbqHint, selector: "kbq-hint", inputs: ["id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5$1.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["kbqPopoverHideIfNotInViewPort", "kbqTrigger", "kbqLeaveDelay", "kbqEnterDelay", "kbqPopoverPreventClose", "kbqPopoverStickToWindow", "kbqPopoverContainer", "kbqPopoverHasBackdrop", "kbqPopoverBackdropClass", "kbqPopoverDefaultPaddings", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverContext", "kbqPopoverAriaLabel", "kbqPopoverHasCloseButton", "kbqPopoverCloseOnScroll", "kbqPopoverArrow", "kbqPopoverArrowCentered", "kbqPopoverOffset", "kbqPopoverAutoFocus", "kbqRelativeToPointer", "kbqPopoverOrigin", "kbqPopoverDisabled", "kbqPopoverPlacementPriority", "kbqPopoverPlacement", "kbqPopoverVisible"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { 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: KbqListModule }, { kind: "component", type: i7.KbqListSelection, selector: "kbq-list-selection", inputs: ["autoSelect", "noUnselectLast", "draggable", "connectedTo", "dragPreview", "dragCursor", "selectAllToggle", "selectAll", "multiple", "horizontal", "tabIndex", "disabled", "compareWith", "selectAllHandler"], outputs: ["onSelectAll", "onCopy", "dropped", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i7.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "selectAllRow", "value", "disabled", "draggable", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "ngmodule", type: KbqDatepickerModule }, { kind: "component", type: i8.KbqCalendar, selector: "kbq-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "monthSelected", "userSelection"], exportAs: ["kbqCalendar"] }, { kind: "directive", type: i8.KbqDatepickerInput, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: ["errorStateMatcher", "placeholder", "required", "kbqDatepicker", "kbqCalendar", "kbqDatepickerFilter", "value", "min", "max", "disabled", "id", "kbqValidationTooltip"], outputs: ["incorrectInput", "dateChange", "dateInput"], exportAs: ["kbqDatepickerInput"] }, { kind: "ngmodule", type: KbqTimepickerModule }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqFormattersModule }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqPipeDateComponent, decorators: [{
             type: Component,
@@ -1905,7 +1905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbq-title]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverOffset]=\"4\"\n    [kbqPopoverDefaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    [kbqPopoverAriaLabel]=\"data.name\"\n>\n    <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!formattedValue\">\n        {{ formattedValue }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    @if (isListMode()) {\n        @if (!noOptions) {\n            <div class=\"kbq-date-list\">\n                <kbq-list-selection\n                    #listSelection\n                    [autoSelect]=\"false\"\n                    [attr.aria-label]=\"data.name\"\n                    [ngModel]=\"data.value?.name\"\n                >\n                    <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                        {{ localeConfiguration().datePipe.customPeriod }}\n                        <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->\n                        <ng-container>\n                            <i kbq-icon=\"kbq-chevron-right_16\" color=\"contrast-fade\"></i>\n                        </ng-container>\n                    </kbq-list-option>\n\n                    @for (item of values; track item) {\n                        <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n                            {{ item.name }}\n                        </kbq-list-option>\n                    }\n                </kbq-list-selection>\n            </div>\n        }\n    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n            @if (!noOptions) {\n                <div class=\"kbq-date-period__header\">\n                    <button\n                        #returnButton\n                        kbq-button\n                        [color]=\"colors.Theme\"\n                        [kbqStyle]=\"styles.Transparent\"\n                        (click)=\"showList()\"\n                    >\n                        <i kbq-icon=\"kbq-chevron-left_16\"></i>\n                        {{ localeConfiguration().datePipe.backToPeriodSelection }}\n                    </button>\n                </div>\n            }\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\" [id]=\"fromLabelId\">\n                    {{ localeConfiguration().datePipe.customPeriodFrom }}\n                </label>\n\n                <kbq-form-field\n                    class=\"kbq-date-period__date kbq-form__control\"\n                    [class.kbq-focused]=\"showStartCalendar()\"\n                >\n                    <input\n                        #periodStartInput\n                        formControlName=\"start\"\n                        [kbqCalendar]=\"startDateCalendar\"\n                        [min]=\"min\"\n                        [max]=\"startMax\"\n                        [attr.aria-labelledby]=\"fromLabelId\"\n                        (focusin)=\"onFocusStartInput()\"\n                        (keydown.tab)=\"onDateInputTab()\"\n                        (keydown.shift.tab)=\"onDateInputTab()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar()\"\n                    [minDate]=\"min\"\n                    [maxDate]=\"startMax\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\" [id]=\"toLabelId\">\n                    {{ localeConfiguration().datePipe.customPeriodTo }}\n                </label>\n\n                <kbq-form-field class=\"kbq-date-period__date kbq-form__control\" [class.kbq-focused]=\"showEndCalendar()\">\n                    <input\n                        formControlName=\"end\"\n                        [kbqCalendar]=\"endDateCalendar\"\n                        [min]=\"min\"\n                        [max]=\"max\"\n                        [attr.aria-labelledby]=\"toLabelId\"\n                        (focusin)=\"onFocusEndInput()\"\n                        (keydown.tab)=\"onDateInputTab()\"\n                        (keydown.shift.tab)=\"onDateInputTab()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                @if (isPeriodInverted) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeConfiguration().datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                } @else if (formGroup.errors?.kbqDateIntervalMin) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ minIntervalErrorHint }}\n                    </kbq-hint>\n                } @else if (formGroup.errors?.kbqDateIntervalMax) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ maxIntervalErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar()\"\n                    [minDate]=\"min\"\n                    [maxDate]=\"max\"\n                    (selectedChange)=\"onSelectEndDate($event)\"\n                />\n            </form>\n\n            <div class=\"kbq-date-period__footer\">\n                <button\n                    kbq-button\n                    [color]=\"'theme'\"\n                    [disabled]=\"disabled\"\n                    [kbqStyle]=\"'transparent'\"\n                    (click)=\"onApplyPeriod()\"\n                >\n                    <span>{{ localeConfiguration().pipe.applyButton }}</span>\n                    &nbsp;\n                    <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n                </button>\n            </div>\n        </div>\n    }\n</ng-template>\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\">{{ formattedValue }}</div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover{--kbq-filter-bar-date-period-width: 320px;--kbq-filter-bar-date-field-width: 136px}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-inline:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-inline-start:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color, var(--kbq-icon-contrast-fade))}.kbq-pipe-date__popover .kbq-date-period{width:var(--kbq-filter-bar-date-period-width)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding:var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content minmax(min-content,1fr);padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content:first-child{padding-block-start:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-inline-start:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-inline-end:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{width:auto}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{width:var(--kbq-filter-bar-date-field-width)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-start-end-radius:unset;border-end-end-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{flex:1;margin-inline-start:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-start-start-radius:unset;border-end-start-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-inline:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-datepicker-grid-cell-states-disabled-text);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbq-title]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverOffset]=\"4\"\n    [kbqPopoverDefaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    [kbqPopoverAriaLabel]=\"data.name\"\n>\n    <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!formattedValue\">\n        {{ formattedValue }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    @if (isListMode()) {\n        @if (!noOptions) {\n            <div class=\"kbq-date-list\">\n                <kbq-list-selection\n                    #listSelection\n                    [autoSelect]=\"false\"\n                    [attr.aria-label]=\"data.name\"\n                    [ngModel]=\"data.value?.name\"\n                >\n                    <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                        {{ localeConfiguration().datePipe.customPeriod }}\n                        <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->\n                        <ng-container>\n                            <i kbq-icon=\"kbq-chevron-right_16\" color=\"contrast-fade\"></i>\n                        </ng-container>\n                    </kbq-list-option>\n\n                    @for (item of values; track item) {\n                        <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n                            {{ item.name }}\n                        </kbq-list-option>\n                    }\n                </kbq-list-selection>\n            </div>\n        }\n    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n            @if (!noOptions) {\n                <div class=\"kbq-date-period__header\">\n                    <button\n                        #returnButton\n                        kbq-button\n                        [color]=\"colors.Theme\"\n                        [kbqStyle]=\"styles.Transparent\"\n                        (click)=\"showList()\"\n                    >\n                        <i kbq-icon=\"kbq-chevron-left_16\"></i>\n                        {{ localeConfiguration().datePipe.backToPeriodSelection }}\n                    </button>\n                </div>\n            }\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\" [id]=\"fromLabelId\">\n                    {{ localeConfiguration().datePipe.customPeriodFrom }}\n                </label>\n\n                <kbq-form-field\n                    class=\"kbq-date-period__date kbq-form__control\"\n                    [class.kbq-focused]=\"showStartCalendar()\"\n                >\n                    <input\n                        #periodStartInput\n                        formControlName=\"start\"\n                        [kbqCalendar]=\"startDateCalendar\"\n                        [min]=\"min\"\n                        [max]=\"startMax\"\n                        [attr.aria-labelledby]=\"fromLabelId\"\n                        (focusin)=\"onFocusStartInput()\"\n                        (keydown.tab)=\"onDateInputTab()\"\n                        (keydown.shift.tab)=\"onDateInputTab()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar()\"\n                    [minDate]=\"min\"\n                    [maxDate]=\"startMax\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\" [id]=\"toLabelId\">\n                    {{ localeConfiguration().datePipe.customPeriodTo }}\n                </label>\n\n                <kbq-form-field class=\"kbq-date-period__date kbq-form__control\" [class.kbq-focused]=\"showEndCalendar()\">\n                    <input\n                        formControlName=\"end\"\n                        [kbqCalendar]=\"endDateCalendar\"\n                        [min]=\"min\"\n                        [max]=\"max\"\n                        [attr.aria-labelledby]=\"toLabelId\"\n                        (focusin)=\"onFocusEndInput()\"\n                        (keydown.tab)=\"onDateInputTab()\"\n                        (keydown.shift.tab)=\"onDateInputTab()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                @if (isPeriodInverted) {\n                    <kbq-hint compact class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeConfiguration().datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                } @else if (formGroup.errors?.kbqDateIntervalMin) {\n                    <kbq-hint compact class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ minIntervalErrorHint }}\n                    </kbq-hint>\n                } @else if (formGroup.errors?.kbqDateIntervalMax) {\n                    <kbq-hint compact class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ maxIntervalErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar()\"\n                    [minDate]=\"min\"\n                    [maxDate]=\"max\"\n                    (selectedChange)=\"onSelectEndDate($event)\"\n                />\n            </form>\n\n            <div class=\"kbq-date-period__footer\">\n                <button\n                    kbq-button\n                    [color]=\"'theme'\"\n                    [disabled]=\"disabled\"\n                    [kbqStyle]=\"'transparent'\"\n                    (click)=\"onApplyPeriod()\"\n                >\n                    <span>{{ localeConfiguration().pipe.applyButton }}</span>\n                    &nbsp;\n                    <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n                </button>\n            </div>\n        </div>\n    }\n</ng-template>\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\">{{ formattedValue }}</div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover{--kbq-filter-bar-date-period-width: 320px;--kbq-filter-bar-date-field-width: 136px}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-inline:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-inline-start:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color, var(--kbq-icon-contrast-fade))}.kbq-pipe-date__popover .kbq-date-period{width:var(--kbq-filter-bar-date-period-width)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding:var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content minmax(min-content,1fr);padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content:first-child{padding-block-start:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-inline-start:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-inline-end:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{width:auto}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{width:var(--kbq-filter-bar-date-field-width)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-start-end-radius:unset;border-end-end-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{flex:1;margin-inline-start:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-start-start-radius:unset;border-end-start-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-inline:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-datepicker-grid-cell-states-disabled-text);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"] }]
         }] });
 
 class KbqPipeDatetimeComponent extends KbqPipeDateBaseComponent {
@@ -1927,7 +1927,7 @@ class KbqPipeDatetimeComponent extends KbqPipeDateBaseComponent {
                 provide: KbqBasePipe,
                 useExisting: this
             }
-        ], usesInheritance: true, ngImport: i0, template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbq-title]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverOffset]=\"4\"\n    [kbqPopoverDefaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    [kbqPopoverAriaLabel]=\"data.name\"\n>\n    <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!formattedValue\">\n        {{ formattedValue }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    @if (isListMode()) {\n        @if (!noOptions) {\n            <div class=\"kbq-date-list\">\n                <kbq-list-selection\n                    #listSelection\n                    [autoSelect]=\"false\"\n                    [attr.aria-label]=\"data.name\"\n                    [ngModel]=\"data.value?.name\"\n                >\n                    <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                        {{ localeConfiguration().datePipe.customPeriod }}\n                        <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->\n                        <ng-container>\n                            <i kbq-icon=\"kbq-chevron-right_16\" color=\"contrast-fade\"></i>\n                        </ng-container>\n                    </kbq-list-option>\n\n                    @for (item of values; track item) {\n                        <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n                            {{ item.name }}\n                        </kbq-list-option>\n                    }\n                </kbq-list-selection>\n            </div>\n        }\n    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n            @if (!noOptions) {\n                <div class=\"kbq-date-period__header\">\n                    <button\n                        #returnButton\n                        kbq-button\n                        [color]=\"colors.Theme\"\n                        [kbqStyle]=\"styles.Transparent\"\n                        (click)=\"showList()\"\n                    >\n                        <i kbq-icon=\"kbq-chevron-left_16\"></i>\n                        {{ localeConfiguration().datePipe.backToPeriodSelection }}\n                    </button>\n                </div>\n            }\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\" [id]=\"fromLabelId\">\n                    {{ localeConfiguration().datePipe.customPeriodFrom }}\n                </label>\n\n                <div class=\"kbq-form__row_with-time kbq-form__control\">\n                    <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showStartCalendar()\">\n                        <input\n                            #periodStartInput\n                            formControlName=\"start\"\n                            [kbqCalendar]=\"startDateCalendar\"\n                            [min]=\"min\"\n                            [max]=\"startMax\"\n                            [attr.aria-labelledby]=\"fromLabelId\"\n                            (focusin)=\"onFocusStartInput()\"\n                            (keydown.tab)=\"onDateInputTab()\"\n                            (keydown.shift.tab)=\"onDateInputTab()\"\n                        />\n                        <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                    </kbq-form-field>\n\n                    <kbq-form-field class=\"kbq-date-period__time\">\n                        <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n                        <input\n                            formControlName=\"start\"\n                            kbqTimepicker\n                            [min]=\"min\"\n                            [max]=\"startMax\"\n                            [attr.aria-labelledby]=\"fromLabelId\"\n                            (focusin)=\"hideCalendars()\"\n                        />\n                    </kbq-form-field>\n                </div>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar()\"\n                    [minDate]=\"min\"\n                    [maxDate]=\"startMax\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\" [id]=\"toLabelId\">\n                    {{ localeConfiguration().datePipe.customPeriodTo }}\n                </label>\n\n                <div class=\"kbq-form__row_with-time kbq-form__control\">\n                    <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showEndCalendar()\">\n                        <input\n                            formControlName=\"end\"\n                            [kbqCalendar]=\"endDateCalendar\"\n                            [min]=\"min\"\n                            [max]=\"max\"\n                            [attr.aria-labelledby]=\"toLabelId\"\n                            (focusin)=\"onFocusEndInput()\"\n                            (keydown.tab)=\"onDateInputTab()\"\n                            (keydown.shift.tab)=\"onDateInputTab()\"\n                        />\n                        <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                    </kbq-form-field>\n\n                    <kbq-form-field class=\"kbq-date-period__time\">\n                        <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n                        <input\n                            formControlName=\"end\"\n                            kbqTimepicker\n                            [min]=\"min\"\n                            [max]=\"max\"\n                            [attr.aria-labelledby]=\"toLabelId\"\n                            (focusin)=\"hideCalendars()\"\n                        />\n                    </kbq-form-field>\n                </div>\n\n                @if (isPeriodInverted) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeConfiguration().datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                } @else if (formGroup.errors?.kbqDateIntervalMin) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ minIntervalErrorHint }}\n                    </kbq-hint>\n                } @else if (formGroup.errors?.kbqDateIntervalMax) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ maxIntervalErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar()\"\n                    [minDate]=\"min\"\n                    [maxDate]=\"max\"\n                    (selectedChange)=\"onSelectEndDate($event)\"\n                />\n            </form>\n\n            <div class=\"kbq-date-period__footer\">\n                <button\n                    kbq-button\n                    [color]=\"'theme'\"\n                    [disabled]=\"disabled\"\n                    [kbqStyle]=\"'transparent'\"\n                    (click)=\"onApplyPeriod()\"\n                >\n                    <span>{{ localeConfiguration().pipe.applyButton }}</span>\n                    &nbsp;\n                    <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n                </button>\n            </div>\n        </div>\n    }\n</ng-template>\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\">{{ formattedValue }}</div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover{--kbq-filter-bar-date-period-width: 320px;--kbq-filter-bar-date-field-width: 136px}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-inline:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-inline-start:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color, var(--kbq-icon-contrast-fade))}.kbq-pipe-date__popover .kbq-date-period{width:var(--kbq-filter-bar-date-period-width)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding:var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content minmax(min-content,1fr);padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content:first-child{padding-block-start:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-inline-start:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-inline-end:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{width:auto}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{width:var(--kbq-filter-bar-date-field-width)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-start-end-radius:unset;border-end-end-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{flex:1;margin-inline-start:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-start-start-radius:unset;border-end-start-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-inline:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-datepicker-grid-cell-states-disabled-text);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2$1.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqMinValidator, selector: "[min][formControlName],[min][formControl],[min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.KbqMaxValidator, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: ["max"] }, { 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.KbqSuffix, selector: "[kbqSuffix]", exportAs: ["kbqSuffix"] }, { kind: "component", type: i5.KbqHint, selector: "kbq-hint", inputs: ["id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5$1.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["kbqPopoverHideIfNotInViewPort", "kbqTrigger", "kbqLeaveDelay", "kbqEnterDelay", "kbqPopoverPreventClose", "kbqPopoverStickToWindow", "kbqPopoverContainer", "kbqPopoverHasBackdrop", "kbqPopoverBackdropClass", "kbqPopoverDefaultPaddings", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverContext", "kbqPopoverAriaLabel", "kbqPopoverHasCloseButton", "kbqPopoverCloseOnScroll", "kbqPopoverArrow", "kbqPopoverOffset", "kbqPopoverAutoFocus", "kbqPopoverOrigin", "kbqPopoverDisabled", "kbqPopoverPlacementPriority", "kbqPopoverPlacement", "kbqPopoverVisible"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { 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: KbqListModule }, { kind: "component", type: i7.KbqListSelection, selector: "kbq-list-selection", inputs: ["autoSelect", "noUnselectLast", "draggable", "connectedTo", "dragPreview", "dragCursor", "selectAllToggle", "selectAll", "multiple", "horizontal", "tabIndex", "disabled", "compareWith", "selectAllHandler"], outputs: ["onSelectAll", "onCopy", "dropped", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i7.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "selectAllRow", "value", "disabled", "draggable", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "ngmodule", type: KbqDatepickerModule }, { kind: "component", type: i8.KbqCalendar, selector: "kbq-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "monthSelected", "userSelection"], exportAs: ["kbqCalendar"] }, { kind: "directive", type: i8.KbqDatepickerInput, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: ["errorStateMatcher", "placeholder", "required", "kbqDatepicker", "kbqCalendar", "kbqDatepickerFilter", "value", "min", "max", "disabled", "id", "kbqValidationTooltip"], outputs: ["incorrectInput", "dateChange", "dateInput"], exportAs: ["kbqDatepickerInput"] }, { kind: "ngmodule", type: KbqTimepickerModule }, { kind: "directive", type: i9$1.KbqTimepicker, selector: "input[kbqTimepicker]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "format", "min", "max", "value", "kbqValidationTooltip"], outputs: ["incorrectInput"], exportAs: ["kbqTimepicker"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqFormattersModule }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbq-title]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverOffset]=\"4\"\n    [kbqPopoverDefaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    [kbqPopoverAriaLabel]=\"data.name\"\n>\n    <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!formattedValue\">\n        {{ formattedValue }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    @if (isListMode()) {\n        @if (!noOptions) {\n            <div class=\"kbq-date-list\">\n                <kbq-list-selection\n                    #listSelection\n                    [autoSelect]=\"false\"\n                    [attr.aria-label]=\"data.name\"\n                    [ngModel]=\"data.value?.name\"\n                >\n                    <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                        {{ localeConfiguration().datePipe.customPeriod }}\n                        <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->\n                        <ng-container>\n                            <i kbq-icon=\"kbq-chevron-right_16\" color=\"contrast-fade\"></i>\n                        </ng-container>\n                    </kbq-list-option>\n\n                    @for (item of values; track item) {\n                        <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n                            {{ item.name }}\n                        </kbq-list-option>\n                    }\n                </kbq-list-selection>\n            </div>\n        }\n    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n            @if (!noOptions) {\n                <div class=\"kbq-date-period__header\">\n                    <button\n                        #returnButton\n                        kbq-button\n                        [color]=\"colors.Theme\"\n                        [kbqStyle]=\"styles.Transparent\"\n                        (click)=\"showList()\"\n                    >\n                        <i kbq-icon=\"kbq-chevron-left_16\"></i>\n                        {{ localeConfiguration().datePipe.backToPeriodSelection }}\n                    </button>\n                </div>\n            }\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\" [id]=\"fromLabelId\">\n                    {{ localeConfiguration().datePipe.customPeriodFrom }}\n                </label>\n\n                <div class=\"kbq-form__row_with-time kbq-form__control\">\n                    <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showStartCalendar()\">\n                        <input\n                            #periodStartInput\n                            formControlName=\"start\"\n                            [kbqCalendar]=\"startDateCalendar\"\n                            [min]=\"min\"\n                            [max]=\"startMax\"\n                            [attr.aria-labelledby]=\"fromLabelId\"\n                            (focusin)=\"onFocusStartInput()\"\n                            (keydown.tab)=\"onDateInputTab()\"\n                            (keydown.shift.tab)=\"onDateInputTab()\"\n                        />\n                        <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                    </kbq-form-field>\n\n                    <kbq-form-field class=\"kbq-date-period__time\">\n                        <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n                        <input\n                            formControlName=\"start\"\n                            kbqTimepicker\n                            [min]=\"min\"\n                            [max]=\"startMax\"\n                            [attr.aria-labelledby]=\"fromLabelId\"\n                            (focusin)=\"hideCalendars()\"\n                        />\n                    </kbq-form-field>\n                </div>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar()\"\n                    [minDate]=\"min\"\n                    [maxDate]=\"startMax\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\" [id]=\"toLabelId\">\n                    {{ localeConfiguration().datePipe.customPeriodTo }}\n                </label>\n\n                <div class=\"kbq-form__row_with-time kbq-form__control\">\n                    <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showEndCalendar()\">\n                        <input\n                            formControlName=\"end\"\n                            [kbqCalendar]=\"endDateCalendar\"\n                            [min]=\"min\"\n                            [max]=\"max\"\n                            [attr.aria-labelledby]=\"toLabelId\"\n                            (focusin)=\"onFocusEndInput()\"\n                            (keydown.tab)=\"onDateInputTab()\"\n                            (keydown.shift.tab)=\"onDateInputTab()\"\n                        />\n                        <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                    </kbq-form-field>\n\n                    <kbq-form-field class=\"kbq-date-period__time\">\n                        <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n                        <input\n                            formControlName=\"end\"\n                            kbqTimepicker\n                            [min]=\"min\"\n                            [max]=\"max\"\n                            [attr.aria-labelledby]=\"toLabelId\"\n                            (focusin)=\"hideCalendars()\"\n                        />\n                    </kbq-form-field>\n                </div>\n\n                @if (isPeriodInverted) {\n                    <kbq-hint compact class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeConfiguration().datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                } @else if (formGroup.errors?.kbqDateIntervalMin) {\n                    <kbq-hint compact class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ minIntervalErrorHint }}\n                    </kbq-hint>\n                } @else if (formGroup.errors?.kbqDateIntervalMax) {\n                    <kbq-hint compact class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ maxIntervalErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar()\"\n                    [minDate]=\"min\"\n                    [maxDate]=\"max\"\n                    (selectedChange)=\"onSelectEndDate($event)\"\n                />\n            </form>\n\n            <div class=\"kbq-date-period__footer\">\n                <button\n                    kbq-button\n                    [color]=\"'theme'\"\n                    [disabled]=\"disabled\"\n                    [kbqStyle]=\"'transparent'\"\n                    (click)=\"onApplyPeriod()\"\n                >\n                    <span>{{ localeConfiguration().pipe.applyButton }}</span>\n                    &nbsp;\n                    <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n                </button>\n            </div>\n        </div>\n    }\n</ng-template>\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\">{{ formattedValue }}</div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover{--kbq-filter-bar-date-period-width: 320px;--kbq-filter-bar-date-field-width: 136px}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-inline:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-inline-start:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color, var(--kbq-icon-contrast-fade))}.kbq-pipe-date__popover .kbq-date-period{width:var(--kbq-filter-bar-date-period-width)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding:var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content minmax(min-content,1fr);padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content:first-child{padding-block-start:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-inline-start:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-inline-end:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{width:auto}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{width:var(--kbq-filter-bar-date-field-width)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-start-end-radius:unset;border-end-end-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{flex:1;margin-inline-start:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-start-start-radius:unset;border-end-start-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-inline:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-datepicker-grid-cell-states-disabled-text);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2$1.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqMinValidator, selector: "[min][formControlName],[min][formControl],[min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.KbqMaxValidator, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: ["max"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass", "showRequiredMarker"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i5.KbqSuffix, selector: "[kbqSuffix]", exportAs: ["kbqSuffix"] }, { kind: "component", type: i5.KbqHint, selector: "kbq-hint", inputs: ["id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5$1.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["kbqPopoverHideIfNotInViewPort", "kbqTrigger", "kbqLeaveDelay", "kbqEnterDelay", "kbqPopoverPreventClose", "kbqPopoverStickToWindow", "kbqPopoverContainer", "kbqPopoverHasBackdrop", "kbqPopoverBackdropClass", "kbqPopoverDefaultPaddings", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverContext", "kbqPopoverAriaLabel", "kbqPopoverHasCloseButton", "kbqPopoverCloseOnScroll", "kbqPopoverArrow", "kbqPopoverArrowCentered", "kbqPopoverOffset", "kbqPopoverAutoFocus", "kbqRelativeToPointer", "kbqPopoverOrigin", "kbqPopoverDisabled", "kbqPopoverPlacementPriority", "kbqPopoverPlacement", "kbqPopoverVisible"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { 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: KbqListModule }, { kind: "component", type: i7.KbqListSelection, selector: "kbq-list-selection", inputs: ["autoSelect", "noUnselectLast", "draggable", "connectedTo", "dragPreview", "dragCursor", "selectAllToggle", "selectAll", "multiple", "horizontal", "tabIndex", "disabled", "compareWith", "selectAllHandler"], outputs: ["onSelectAll", "onCopy", "dropped", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i7.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "selectAllRow", "value", "disabled", "draggable", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "ngmodule", type: KbqDatepickerModule }, { kind: "component", type: i8.KbqCalendar, selector: "kbq-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "monthSelected", "userSelection"], exportAs: ["kbqCalendar"] }, { kind: "directive", type: i8.KbqDatepickerInput, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: ["errorStateMatcher", "placeholder", "required", "kbqDatepicker", "kbqCalendar", "kbqDatepickerFilter", "value", "min", "max", "disabled", "id", "kbqValidationTooltip"], outputs: ["incorrectInput", "dateChange", "dateInput"], exportAs: ["kbqDatepickerInput"] }, { kind: "ngmodule", type: KbqTimepickerModule }, { kind: "directive", type: i9$1.KbqTimepicker, selector: "input[kbqTimepicker]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "format", "min", "max", "value", "kbqValidationTooltip"], outputs: ["incorrectInput"], exportAs: ["kbqTimepicker"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqFormattersModule }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqPipeDatetimeComponent, decorators: [{
             type: Component,
@@ -1951,7 +1951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbq-title]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverOffset]=\"4\"\n    [kbqPopoverDefaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    [kbqPopoverAriaLabel]=\"data.name\"\n>\n    <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!formattedValue\">\n        {{ formattedValue }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    @if (isListMode()) {\n        @if (!noOptions) {\n            <div class=\"kbq-date-list\">\n                <kbq-list-selection\n                    #listSelection\n                    [autoSelect]=\"false\"\n                    [attr.aria-label]=\"data.name\"\n                    [ngModel]=\"data.value?.name\"\n                >\n                    <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                        {{ localeConfiguration().datePipe.customPeriod }}\n                        <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->\n                        <ng-container>\n                            <i kbq-icon=\"kbq-chevron-right_16\" color=\"contrast-fade\"></i>\n                        </ng-container>\n                    </kbq-list-option>\n\n                    @for (item of values; track item) {\n                        <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n                            {{ item.name }}\n                        </kbq-list-option>\n                    }\n                </kbq-list-selection>\n            </div>\n        }\n    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n            @if (!noOptions) {\n                <div class=\"kbq-date-period__header\">\n                    <button\n                        #returnButton\n                        kbq-button\n                        [color]=\"colors.Theme\"\n                        [kbqStyle]=\"styles.Transparent\"\n                        (click)=\"showList()\"\n                    >\n                        <i kbq-icon=\"kbq-chevron-left_16\"></i>\n                        {{ localeConfiguration().datePipe.backToPeriodSelection }}\n                    </button>\n                </div>\n            }\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\" [id]=\"fromLabelId\">\n                    {{ localeConfiguration().datePipe.customPeriodFrom }}\n                </label>\n\n                <div class=\"kbq-form__row_with-time kbq-form__control\">\n                    <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showStartCalendar()\">\n                        <input\n                            #periodStartInput\n                            formControlName=\"start\"\n                            [kbqCalendar]=\"startDateCalendar\"\n                            [min]=\"min\"\n                            [max]=\"startMax\"\n                            [attr.aria-labelledby]=\"fromLabelId\"\n                            (focusin)=\"onFocusStartInput()\"\n                            (keydown.tab)=\"onDateInputTab()\"\n                            (keydown.shift.tab)=\"onDateInputTab()\"\n                        />\n                        <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                    </kbq-form-field>\n\n                    <kbq-form-field class=\"kbq-date-period__time\">\n                        <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n                        <input\n                            formControlName=\"start\"\n                            kbqTimepicker\n                            [min]=\"min\"\n                            [max]=\"startMax\"\n                            [attr.aria-labelledby]=\"fromLabelId\"\n                            (focusin)=\"hideCalendars()\"\n                        />\n                    </kbq-form-field>\n                </div>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar()\"\n                    [minDate]=\"min\"\n                    [maxDate]=\"startMax\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\" [id]=\"toLabelId\">\n                    {{ localeConfiguration().datePipe.customPeriodTo }}\n                </label>\n\n                <div class=\"kbq-form__row_with-time kbq-form__control\">\n                    <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showEndCalendar()\">\n                        <input\n                            formControlName=\"end\"\n                            [kbqCalendar]=\"endDateCalendar\"\n                            [min]=\"min\"\n                            [max]=\"max\"\n                            [attr.aria-labelledby]=\"toLabelId\"\n                            (focusin)=\"onFocusEndInput()\"\n                            (keydown.tab)=\"onDateInputTab()\"\n                            (keydown.shift.tab)=\"onDateInputTab()\"\n                        />\n                        <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                    </kbq-form-field>\n\n                    <kbq-form-field class=\"kbq-date-period__time\">\n                        <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n                        <input\n                            formControlName=\"end\"\n                            kbqTimepicker\n                            [min]=\"min\"\n                            [max]=\"max\"\n                            [attr.aria-labelledby]=\"toLabelId\"\n                            (focusin)=\"hideCalendars()\"\n                        />\n                    </kbq-form-field>\n                </div>\n\n                @if (isPeriodInverted) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeConfiguration().datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                } @else if (formGroup.errors?.kbqDateIntervalMin) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ minIntervalErrorHint }}\n                    </kbq-hint>\n                } @else if (formGroup.errors?.kbqDateIntervalMax) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ maxIntervalErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar()\"\n                    [minDate]=\"min\"\n                    [maxDate]=\"max\"\n                    (selectedChange)=\"onSelectEndDate($event)\"\n                />\n            </form>\n\n            <div class=\"kbq-date-period__footer\">\n                <button\n                    kbq-button\n                    [color]=\"'theme'\"\n                    [disabled]=\"disabled\"\n                    [kbqStyle]=\"'transparent'\"\n                    (click)=\"onApplyPeriod()\"\n                >\n                    <span>{{ localeConfiguration().pipe.applyButton }}</span>\n                    &nbsp;\n                    <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n                </button>\n            </div>\n        </div>\n    }\n</ng-template>\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\">{{ formattedValue }}</div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover{--kbq-filter-bar-date-period-width: 320px;--kbq-filter-bar-date-field-width: 136px}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-inline:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-inline-start:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color, var(--kbq-icon-contrast-fade))}.kbq-pipe-date__popover .kbq-date-period{width:var(--kbq-filter-bar-date-period-width)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding:var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content minmax(min-content,1fr);padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content:first-child{padding-block-start:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-inline-start:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-inline-end:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{width:auto}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{width:var(--kbq-filter-bar-date-field-width)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-start-end-radius:unset;border-end-end-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{flex:1;margin-inline-start:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-start-start-radius:unset;border-end-start-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-inline:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-datepicker-grid-cell-states-disabled-text);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbq-title]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverOffset]=\"4\"\n    [kbqPopoverDefaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    [kbqPopoverAriaLabel]=\"data.name\"\n>\n    <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!formattedValue\">\n        {{ formattedValue }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    @if (isListMode()) {\n        @if (!noOptions) {\n            <div class=\"kbq-date-list\">\n                <kbq-list-selection\n                    #listSelection\n                    [autoSelect]=\"false\"\n                    [attr.aria-label]=\"data.name\"\n                    [ngModel]=\"data.value?.name\"\n                >\n                    <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                        {{ localeConfiguration().datePipe.customPeriod }}\n                        <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->\n                        <ng-container>\n                            <i kbq-icon=\"kbq-chevron-right_16\" color=\"contrast-fade\"></i>\n                        </ng-container>\n                    </kbq-list-option>\n\n                    @for (item of values; track item) {\n                        <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n                            {{ item.name }}\n                        </kbq-list-option>\n                    }\n                </kbq-list-selection>\n            </div>\n        }\n    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n            @if (!noOptions) {\n                <div class=\"kbq-date-period__header\">\n                    <button\n                        #returnButton\n                        kbq-button\n                        [color]=\"colors.Theme\"\n                        [kbqStyle]=\"styles.Transparent\"\n                        (click)=\"showList()\"\n                    >\n                        <i kbq-icon=\"kbq-chevron-left_16\"></i>\n                        {{ localeConfiguration().datePipe.backToPeriodSelection }}\n                    </button>\n                </div>\n            }\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\" [id]=\"fromLabelId\">\n                    {{ localeConfiguration().datePipe.customPeriodFrom }}\n                </label>\n\n                <div class=\"kbq-form__row_with-time kbq-form__control\">\n                    <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showStartCalendar()\">\n                        <input\n                            #periodStartInput\n                            formControlName=\"start\"\n                            [kbqCalendar]=\"startDateCalendar\"\n                            [min]=\"min\"\n                            [max]=\"startMax\"\n                            [attr.aria-labelledby]=\"fromLabelId\"\n                            (focusin)=\"onFocusStartInput()\"\n                            (keydown.tab)=\"onDateInputTab()\"\n                            (keydown.shift.tab)=\"onDateInputTab()\"\n                        />\n                        <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                    </kbq-form-field>\n\n                    <kbq-form-field class=\"kbq-date-period__time\">\n                        <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n                        <input\n                            formControlName=\"start\"\n                            kbqTimepicker\n                            [min]=\"min\"\n                            [max]=\"startMax\"\n                            [attr.aria-labelledby]=\"fromLabelId\"\n                            (focusin)=\"hideCalendars()\"\n                        />\n                    </kbq-form-field>\n                </div>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar()\"\n                    [minDate]=\"min\"\n                    [maxDate]=\"startMax\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\" [id]=\"toLabelId\">\n                    {{ localeConfiguration().datePipe.customPeriodTo }}\n                </label>\n\n                <div class=\"kbq-form__row_with-time kbq-form__control\">\n                    <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showEndCalendar()\">\n                        <input\n                            formControlName=\"end\"\n                            [kbqCalendar]=\"endDateCalendar\"\n                            [min]=\"min\"\n                            [max]=\"max\"\n                            [attr.aria-labelledby]=\"toLabelId\"\n                            (focusin)=\"onFocusEndInput()\"\n                            (keydown.tab)=\"onDateInputTab()\"\n                            (keydown.shift.tab)=\"onDateInputTab()\"\n                        />\n                        <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                    </kbq-form-field>\n\n                    <kbq-form-field class=\"kbq-date-period__time\">\n                        <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n                        <input\n                            formControlName=\"end\"\n                            kbqTimepicker\n                            [min]=\"min\"\n                            [max]=\"max\"\n                            [attr.aria-labelledby]=\"toLabelId\"\n                            (focusin)=\"hideCalendars()\"\n                        />\n                    </kbq-form-field>\n                </div>\n\n                @if (isPeriodInverted) {\n                    <kbq-hint compact class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeConfiguration().datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                } @else if (formGroup.errors?.kbqDateIntervalMin) {\n                    <kbq-hint compact class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ minIntervalErrorHint }}\n                    </kbq-hint>\n                } @else if (formGroup.errors?.kbqDateIntervalMax) {\n                    <kbq-hint compact class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ maxIntervalErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar()\"\n                    [minDate]=\"min\"\n                    [maxDate]=\"max\"\n                    (selectedChange)=\"onSelectEndDate($event)\"\n                />\n            </form>\n\n            <div class=\"kbq-date-period__footer\">\n                <button\n                    kbq-button\n                    [color]=\"'theme'\"\n                    [disabled]=\"disabled\"\n                    [kbqStyle]=\"'transparent'\"\n                    (click)=\"onApplyPeriod()\"\n                >\n                    <span>{{ localeConfiguration().pipe.applyButton }}</span>\n                    &nbsp;\n                    <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n                </button>\n            </div>\n        </div>\n    }\n</ng-template>\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\">{{ formattedValue }}</div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover{--kbq-filter-bar-date-period-width: 320px;--kbq-filter-bar-date-field-width: 136px}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-inline:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-inline-start:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color, var(--kbq-icon-contrast-fade))}.kbq-pipe-date__popover .kbq-date-period{width:var(--kbq-filter-bar-date-period-width)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding:var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content minmax(min-content,1fr);padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content:first-child{padding-block-start:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-inline-start:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-inline-end:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{width:auto}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{width:var(--kbq-filter-bar-date-field-width)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-start-end-radius:unset;border-end-end-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{flex:1;margin-inline-start:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-start-start-radius:unset;border-end-start-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-inline:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-datepicker-grid-cell-states-disabled-text);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"] }]
         }] });
 
 class KbqPipeInputComponent extends KbqBasePipe {
@@ -2065,7 +2065,7 @@ class KbqPipeInputComponent extends KbqBasePipe {
                 <kbq-cleaner />
             }
         </kbq-form-field>
-    `, isInline: true, styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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.kbq-pipe__input{width:var(--kbq-filter-bar-pipe-input-width, 240px);max-width:none;flex:none}.kbq-pipe.kbq-pipe__input .kbq-form-field{width:100%}\n"], dependencies: [{ 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.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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.kbq-pipe__input{width:var(--kbq-filter-bar-pipe-input-width, 240px);max-width:none;flex:none}.kbq-pipe.kbq-pipe__input .kbq-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "readonly", "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", "showRequiredMarker"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqPipeInputComponent, decorators: [{
             type: Component,
@@ -2091,7 +2091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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.kbq-pipe__input{width:var(--kbq-filter-bar-pipe-input-width, 240px);max-width:none;flex:none}.kbq-pipe.kbq-pipe__input .kbq-form-field{width:100%}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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.kbq-pipe__input{width:var(--kbq-filter-bar-pipe-input-width, 240px);max-width:none;flex:none}.kbq-pipe.kbq-pipe__input .kbq-form-field{width:100%}\n"] }]
         }], propDecorators: { input: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqInput), { isSignal: true }] }] } });
 
 /**
@@ -2262,6 +2262,11 @@ class KbqPipeMultiSelectComponent extends KbqBasePipe {
         }
         return 'indeterminate';
     }
+    /** Number of options the "select all" action would toggle right now — template-only. */
+    get selectAllCount() {
+        const options = this.searchControl.value ? this.filteredOptions() : this.values;
+        return options?.filter((option) => !this.isLocked(option)).length ?? 0;
+    }
     /** true if all visible options selected */
     get allVisibleOptionsSelected() {
         const visible = this.visibleOptions;
@@ -2300,6 +2305,8 @@ class KbqPipeMultiSelectComponent extends KbqBasePipe {
         super();
         /** control for search options */
         this.searchControl = new FormControl(null);
+        /** Query tokens for option highlighting: tokenized like the filter, so every matched token is marked. */
+        this.searchTokens = toSignal(this.searchControl.valueChanges.pipe(startWith(this.searchControl.value), map((value) => tokenizeSearchQuery(value ?? ''))), { initialValue: [] });
         /** @docs-private */
         this.select = viewChild.required(KbqSelect);
         /** @docs-private */
@@ -2424,7 +2431,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    [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=\"{{ localeConfiguration().search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeConfiguration().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>{{ localeConfiguration().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            {{ localeConfiguration().pipe.selectAll }}\n        </kbq-option>\n    }\n\n    @for (item of filteredOptions(); 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: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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$2.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "hiddenItemsTextFormatter", "aria-label", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "clearPredicate", "selectAllToggle", "selectAll", "selectAllHandler", "panelWidth", "panelMinWidth", "panelMaxWidth", "panelMaxHeight", "value", "id", "tabIndex", "disabled"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$2.KbqOptionTooltip, selector: "kbq-option", inputs: ["ignoreTooltipPointerEvents"] }, { kind: "component", type: i9.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i9.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9.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$2.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$1.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i6$1.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2$1.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "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.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], 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=\"{{ localeConfiguration().search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeConfiguration().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>{{ localeConfiguration().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            <!-- A span, not a bare interpolation: the compiler strips the whitespace-only text node\n                 between elements, so the counter's margin is the only gap, same as in the tree pipe. -->\n            <span>{{ localeConfiguration().pipe.selectAll }}</span>\n            @if (data.selectAllCounter) {\n                <span class=\"kbq-pipe-select-all__counter\">{{ selectAllCount }}</span>\n            }\n        </kbq-option>\n    }\n\n    @for (item of filteredOptions(); 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\n                    [class.kbq-truncate-line]=\"!multilineOptions\"\n                    [innerHTML]=\"item.name | kbqHighlightBackground: searchTokens() : true\"\n                ></div>\n                <div\n                    class=\"kbq-option-caption\"\n                    [class.kbq-truncate-line]=\"!multilineOptions\"\n                    [innerHTML]=\"caption | kbqHighlightBackground: searchTokens() : true\"\n                ></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: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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$2.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "hiddenItemsTextFormatter", "aria-label", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "multilineOptions", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "clearPredicate", "selectAllToggle", "selectAll", "selectAllHandler", "panelWidth", "panelMinWidth", "panelMaxWidth", "panelMaxHeight", "value", "id", "tabIndex", "disabled"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$2.KbqOptionTooltip, selector: "kbq-option", inputs: ["ignoreTooltipPointerEvents"] }, { kind: "component", type: i9.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i9.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9.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", "showRequiredMarker"], 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$2.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$1.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i6$1.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2$1.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "readonly", "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.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }, { kind: "ngmodule", type: KbqHighlightModule }, { kind: "pipe", type: i9.KbqHighlightBackgroundPipe, name: "kbqHighlightBackground" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqPipeMultiSelectComponent, decorators: [{
             type: Component,
@@ -2441,13 +2448,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                         KbqIconModule,
                         KbqInputModule,
                         ReactiveFormsModule,
-                        KbqPseudoCheckboxModule
+                        KbqPseudoCheckboxModule,
+                        KbqHighlightModule
                     ], providers: [
                         {
                             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    [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=\"{{ localeConfiguration().search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeConfiguration().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>{{ localeConfiguration().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            {{ localeConfiguration().pipe.selectAll }}\n        </kbq-option>\n    }\n\n    @for (item of filteredOptions(); 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: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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=\"{{ localeConfiguration().search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeConfiguration().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>{{ localeConfiguration().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            <!-- A span, not a bare interpolation: the compiler strips the whitespace-only text node\n                 between elements, so the counter's margin is the only gap, same as in the tree pipe. -->\n            <span>{{ localeConfiguration().pipe.selectAll }}</span>\n            @if (data.selectAllCounter) {\n                <span class=\"kbq-pipe-select-all__counter\">{{ selectAllCount }}</span>\n            }\n        </kbq-option>\n    }\n\n    @for (item of filteredOptions(); 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\n                    [class.kbq-truncate-line]=\"!multilineOptions\"\n                    [innerHTML]=\"item.name | kbqHighlightBackground: searchTokens() : true\"\n                ></div>\n                <div\n                    class=\"kbq-option-caption\"\n                    [class.kbq-truncate-line]=\"!multilineOptions\"\n                    [innerHTML]=\"caption | kbqHighlightBackground: searchTokens() : true\"\n                ></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: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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 }] }] } });
 
 /**
@@ -2465,15 +2473,18 @@ class KbqTreeSelectPipeBase extends KbqBasePipe {
         super();
         /** control for search options */
         this.searchControl = new FormControl(null);
+        this.sourceNodes = new WeakMap();
         /** @docs-private */
         this.select = viewChild.required(KbqTreeSelect);
         this.transformer = (node, level, parent) => {
             const flatNode = new KbqTreeSelectFlatNode();
             flatNode.name = node.name;
             flatNode.value = node.value;
+            flatNode.caption = node.caption;
             flatNode.parent = parent ?? undefined;
             flatNode.level = level;
             flatNode.expandable = !!node.children;
+            this.sourceNodes.set(flatNode, node);
             return flatNode;
         };
         this.getLevel = (node) => node.level;
@@ -2483,6 +2494,12 @@ class KbqTreeSelectPipeBase extends KbqBasePipe {
         this.getViewValue = (node) => node.name;
         this.treeFlattener = new KbqTreeFlattener(this.transformer, this.getLevel, this.isExpandable, this.getChildren);
         this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable, this.getValue, this.getViewValue);
+        const filterByViewValue = new FilterByViewValue(this.treeControl, 
+        // A `valueTemplate` replaces the caption, so a captioned node is matched by its name only.
+        (node, query) => !this.isTemplateRef(this.valueTemplate) &&
+            !!node.caption &&
+            this.treeControl.compareViewValues(node.caption, query));
+        this.treeControl.setFilters(filterByViewValue, new FilterParentsForNodes(this.treeControl));
         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.
@@ -2491,7 +2508,7 @@ class KbqTreeSelectPipeBase extends KbqBasePipe {
     ngOnInit() {
         this.searchControl.valueChanges
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((value) => this.treeControl.filterNodes(value));
+            .subscribe((value) => this.treeControl.applyFilter(value));
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
@@ -2517,7 +2534,33 @@ class KbqTreeSelectPipeBase extends KbqBasePipe {
     }
     /** @docs-private */
     onOpen() {
-        this.treeControl.expandAll();
+        if (this.data.defaultExpanded === false) {
+            this.treeControl.collapseAll();
+            this.expandSelectedNodeAncestors();
+        }
+        else {
+            this.treeControl.expandAll();
+        }
+    }
+    /**
+     * Expands the ancestors of every selected node. Selected values are matched against the current
+     * `dataNodes` by `compareValues`, not by flat-node reference: re-assigning `dataSource.data` rebuilds
+     * the flat nodes, so a stale node reference would miss.
+     */
+    expandSelectedNodeAncestors() {
+        const selectedValues = this.getSelectedValues();
+        const selectedNodes = this.treeControl.dataNodes.filter((node) => selectedValues.some((value) => this.treeControl.compareValues(node.value, value)));
+        for (const node of selectedNodes) {
+            let current = node.parent;
+            while (current) {
+                this.treeControl.expand(current);
+                current = current.parent;
+            }
+        }
+    }
+    /** @docs-private */
+    getSourceNode(node) {
+        return this.sourceNodes.get(node);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeSelectPipeBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.25", type: KbqTreeSelectPipeBase, isStandalone: true, viewQueries: [{ propertyName: "select", first: true, predicate: KbqTreeSelect, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
@@ -2544,6 +2587,19 @@ class KbqPipeMultiTreeSelectComponent extends KbqTreeSelectPipeBase {
         const tally = this.unlockedTally;
         return tally && tally.selected > 0 ? 'indeterminate' : 'unchecked';
     }
+    /**
+     * Number of leaf nodes "select all" would toggle right now — template-only. Searching counts only
+     * the matching leaves among the rendered options; the group ancestors shown for context are not
+     * leaves and drop out of the count by construction.
+     */
+    get selectAllCount() {
+        if (!this.select())
+            return 0;
+        if (this.select().search()?.ngControl?.value) {
+            return this.tree().renderedOptions.filter((option) => option.value !== kbqTreeSelectAllValue && !option.data.expandable && !option.disabled).length;
+        }
+        return (this.treeControl.dataNodes ?? []).filter((node) => node.value !== kbqTreeSelectAllValue && !node.expandable && !this.isLockedNode(node)).length;
+    }
     get numberOfSelectedLeaves() {
         return this.select().selectionModel.selected.filter(({ value }) => value !== kbqTreeSelectAllValue).length;
     }
@@ -2671,6 +2727,20 @@ class KbqPipeMultiTreeSelectComponent extends KbqTreeSelectPipeBase {
     isNodeSelectAll(_, nodeData) {
         return nodeData.value === kbqTreeSelectAllValue;
     }
+    /**
+     * The committed value rather than `multiSelect.selected`: that snapshot is only refreshed on
+     * initialization, clearing and a full selection, so a user-made partial selection would leave
+     * the ancestors of the current value collapsed on reopen.
+     *
+     * @docs-private
+     */
+    getSelectedValues() {
+        return this.data.value ?? [];
+    }
+    /** @docs-private */
+    getValueTemplateContext(node) {
+        return { $implicit: this, option: this.getSourceNode(node), search: this.searchControl.value };
+    }
     onSelect({ value: option }) {
         if (!option)
             return;
@@ -2705,14 +2775,18 @@ class KbqPipeMultiTreeSelectComponent extends KbqTreeSelectPipeBase {
         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);
+            // The model does not consult `disabled`, so the locked options are filtered out here rather than
+            // relying on the tree's own guards.
+            const visibleNodes = this.tree()
+                .renderedOptions.filter((option) => option.value !== kbqTreeSelectAllValue && !option.disabled)
+                .map((option) => option.data);
+            // Same model the tree owns, written once rather than once per row.
+            const { selectionModel } = this.select();
             if (this.allVisibleOptionsSelected) {
-                renderedOptions.forEach((option) => option.setSelected(false));
+                selectionModel.deselect(...visibleNodes);
             }
             else {
-                renderedOptions.forEach((option) => option.setSelected(true));
+                selectionModel.select(...visibleNodes);
             }
         }
         else {
@@ -2793,7 +2867,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    [searchMinOptionsThreshold]=\"noOptions ? 1 : undefined\"\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=\"{{ localeConfiguration().search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeConfiguration().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>{{ localeConfiguration().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: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2$1.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "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: ["aria-label", "aria-labelledby", "autoSelect", "multiple", "noUnselectLast", "typeAhead", "selectAllToggle", "selectAll", "disabled", "tabIndex", "selectAllHandler"], outputs: ["navigationChange", "selectionChange", "selectAllChange", "onSelectAll", "copyChange", "onCopy"], exportAs: ["kbqTreeSelection"] }, { kind: "component", type: i7$1.KbqTreeOption, selector: "kbq-tree-option", inputs: ["checkboxThirdState", "disabled", "selectable", "selectAllRow", "showCheckbox"], outputs: ["selectionChange", "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", "hiddenItemsTextFormatter", "panelClass", "backdropClass", "aria-label", "aria-labelledby", "errorStateMatcher", "sortComparator", "clearPredicate", "multiline", "placeholder", "required", "multiple", "autoSelect", "selectAllToggle", "selectAll", "id", "hasBackdrop", "tabIndex", "disabled", "selectAllHandler", "panelMinWidth", "panelWidth", "panelMaxWidth", "panelMaxHeight", "searchMinOptionsThreshold"], outputs: ["openedChange", "opened", "closed", "selectionChange", "onSelectAll"], exportAs: ["kbqTreeSelect"] }, { kind: "directive", type: i9.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "component", type: i3$2.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$1.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i6$1.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: i9.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }, { kind: "pipe", type: i9.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${isTemplateRef(valueTemplate) ? ' kbq-pipe-multi-tree-select__panel_custom-value' : ''}${multilineOptions ? ' kbq-pipe-multi-tree-select__panel_multiline' : ''}`\"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [searchMinOptionsThreshold]=\"noOptions ? 1 : undefined\"\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=\"{{ localeConfiguration().search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeConfiguration().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>{{ localeConfiguration().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 [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterQuery\"></span>\n            @if (data.selectAllCounter) {\n                <span class=\"kbq-pipe-select-all__counter\">{{ selectAllCount }}</span>\n            }\n        </kbq-tree-option>\n\n        <kbq-tree-option\n            *kbqTreeNodeDef=\"let node\"\n            kbqTreeNodePadding\n            [checkboxThirdState]=\"true\"\n            [viewValue]=\"treeControl.getViewValue(node)\"\n        >\n            <ng-container [ngTemplateOutlet]=\"nodeContent\" [ngTemplateOutletContext]=\"{ $implicit: node }\" />\n        </kbq-tree-option>\n\n        <kbq-tree-option\n            *kbqTreeNodeDef=\"let node; when: hasChild\"\n            kbqTreeNodePadding\n            [checkboxThirdState]=\"true\"\n            [viewValue]=\"treeControl.getViewValue(node)\"\n        >\n            <kbq-tree-node-toggle [node]=\"node\" />\n            <ng-container [ngTemplateOutlet]=\"nodeContent\" [ngTemplateOutletContext]=\"{ $implicit: node }\" />\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n<ng-template #nodeContent let-node>\n    @if (isTemplateRef(valueTemplate)) {\n        <ng-container\n            [ngTemplateOutlet]=\"$any(valueTemplate)\"\n            [ngTemplateOutletContext]=\"getValueTemplateContext(node)\"\n        />\n    } @else {\n        <div\n            [class.kbq-truncate-line]=\"!multilineOptions\"\n            [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterQuery\"\n        ></div>\n        @if (node.caption) {\n            <div\n                class=\"kbq-option-caption\"\n                [class.kbq-truncate-line]=\"!multilineOptions\"\n                [innerHTML]=\"node.caption | kbqHighlightBackground: treeControl.filterQuery\"\n            ></div>\n        }\n    }\n</ng-template>\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: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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}.kbq-pipe-multi-tree-select__panel_custom-value .kbq-tree-option{align-items:flex-start}.kbq-pipe-multi-tree-select__panel_custom-value .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_custom-value .kbq-tree-option>kbq-checkbox{margin-top:var(--kbq-size-3xs)}.kbq-pipe-multi-tree-select__panel_custom-value .kbq-tree-option>.kbq-tree-node-toggle{height:var(--kbq-typography-text-normal-line-height);margin-top:0}.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:break-word;text-overflow:clip}\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.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2$1.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "readonly", "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", "showRequiredMarker"], 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: ["aria-label", "aria-labelledby", "autoSelect", "multiple", "noUnselectLast", "typeAhead", "selectAllToggle", "selectAll", "disabled", "tabIndex", "selectAllHandler"], outputs: ["navigationChange", "selectionChange", "selectAllChange", "onSelectAll", "copyChange", "onCopy"], exportAs: ["kbqTreeSelection"] }, { kind: "component", type: i7$1.KbqTreeOption, selector: "kbq-tree-option", inputs: ["checkboxThirdState", "viewValue", "disabled", "selectable", "selectAllRow", "showCheckbox"], outputs: ["selectionChange", "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", "hiddenItemsTextFormatter", "panelClass", "backdropClass", "aria-label", "aria-labelledby", "errorStateMatcher", "sortComparator", "clearPredicate", "multiline", "placeholder", "required", "multiple", "autoSelect", "selectAllToggle", "selectAll", "id", "hasBackdrop", "tabIndex", "disabled", "selectAllHandler", "panelMinWidth", "panelWidth", "panelMaxWidth", "panelMaxHeight", "searchMinOptionsThreshold"], outputs: ["openedChange", "opened", "closed", "selectionChange", "onSelectAll"], exportAs: ["kbqTreeSelect"] }, { kind: "directive", type: i9.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "component", type: i3$2.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$1.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i6$1.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: i9.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i9.KbqHighlightBackgroundPipe, name: "kbqHighlightBackground" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqPipeMultiTreeSelectComponent, decorators: [{
             type: Component,
@@ -2812,13 +2886,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                         FormsModule,
                         KbqBadgeModule,
                         KbqPseudoCheckboxModule,
-                        KbqSelectNoOptions
+                        KbqSelectNoOptions,
+                        NgTemplateOutlet
                     ], 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    [searchMinOptionsThreshold]=\"noOptions ? 1 : undefined\"\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=\"{{ localeConfiguration().search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeConfiguration().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>{{ localeConfiguration().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: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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${isTemplateRef(valueTemplate) ? ' kbq-pipe-multi-tree-select__panel_custom-value' : ''}${multilineOptions ? ' kbq-pipe-multi-tree-select__panel_multiline' : ''}`\"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [searchMinOptionsThreshold]=\"noOptions ? 1 : undefined\"\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=\"{{ localeConfiguration().search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeConfiguration().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>{{ localeConfiguration().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 [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterQuery\"></span>\n            @if (data.selectAllCounter) {\n                <span class=\"kbq-pipe-select-all__counter\">{{ selectAllCount }}</span>\n            }\n        </kbq-tree-option>\n\n        <kbq-tree-option\n            *kbqTreeNodeDef=\"let node\"\n            kbqTreeNodePadding\n            [checkboxThirdState]=\"true\"\n            [viewValue]=\"treeControl.getViewValue(node)\"\n        >\n            <ng-container [ngTemplateOutlet]=\"nodeContent\" [ngTemplateOutletContext]=\"{ $implicit: node }\" />\n        </kbq-tree-option>\n\n        <kbq-tree-option\n            *kbqTreeNodeDef=\"let node; when: hasChild\"\n            kbqTreeNodePadding\n            [checkboxThirdState]=\"true\"\n            [viewValue]=\"treeControl.getViewValue(node)\"\n        >\n            <kbq-tree-node-toggle [node]=\"node\" />\n            <ng-container [ngTemplateOutlet]=\"nodeContent\" [ngTemplateOutletContext]=\"{ $implicit: node }\" />\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n<ng-template #nodeContent let-node>\n    @if (isTemplateRef(valueTemplate)) {\n        <ng-container\n            [ngTemplateOutlet]=\"$any(valueTemplate)\"\n            [ngTemplateOutletContext]=\"getValueTemplateContext(node)\"\n        />\n    } @else {\n        <div\n            [class.kbq-truncate-line]=\"!multilineOptions\"\n            [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterQuery\"\n        ></div>\n        @if (node.caption) {\n            <div\n                class=\"kbq-option-caption\"\n                [class.kbq-truncate-line]=\"!multilineOptions\"\n                [innerHTML]=\"node.caption | kbqHighlightBackground: treeControl.filterQuery\"\n            ></div>\n        }\n    }\n</ng-template>\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: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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}.kbq-pipe-multi-tree-select__panel_custom-value .kbq-tree-option{align-items:flex-start}.kbq-pipe-multi-tree-select__panel_custom-value .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_custom-value .kbq-tree-option>kbq-checkbox{margin-top:var(--kbq-size-3xs)}.kbq-pipe-multi-tree-select__panel_custom-value .kbq-tree-option>.kbq-tree-node-toggle{height:var(--kbq-typography-text-normal-line-height);margin-top:0}.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:break-word;text-overflow:clip}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqTreeSelection), { isSignal: true }] }] } });
 
 class KbqPipeReadonlyComponent extends KbqBasePipe {
@@ -2845,7 +2920,7 @@ class KbqPipeReadonlyComponent extends KbqBasePipe {
             <div class="kbq-pipe-tooltip__name kbq-text-compact">{{ data.name }}</div>
             <div class="kbq-pipe-tooltip__value kbq-text-compact">{{ data.value }}</div>
         </ng-template>
-    `, isInline: true, styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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.kbq-pipe__readonly .kbq-button{cursor:default}.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-button-icon.kbq-button_filled:not(:hover),.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-button.kbq-button_filled,.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-button.kbq-button_filled:hover{background:var(--kbq-states-background-disabled)}.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-pipe__name,.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}\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: KbqTitleModule }, { kind: "directive", type: i2.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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.kbq-pipe__readonly .kbq-button{cursor:default}.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-button-icon.kbq-button_filled:not(:hover),.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-button.kbq-button_filled,.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-button.kbq-button_filled:hover{background:var(--kbq-states-background-disabled)}.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-pipe__name,.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}\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: KbqTitleModule }, { kind: "directive", type: i2.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqPipeReadonlyComponent, decorators: [{
             type: Component,
@@ -2875,7 +2950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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.kbq-pipe__readonly .kbq-button{cursor:default}.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-button-icon.kbq-button_filled:not(:hover),.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-button.kbq-button_filled,.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-button.kbq-button_filled:hover{background:var(--kbq-states-background-disabled)}.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-pipe__name,.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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.kbq-pipe__readonly .kbq-button{cursor:default}.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-button-icon.kbq-button_filled:not(:hover),.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-button.kbq-button_filled,.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-button.kbq-button_filled:hover{background:var(--kbq-states-background-disabled)}.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-pipe__name,.kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}\n"] }]
         }] });
 
 class KbqPipeSelectComponent extends KbqBasePipe {
@@ -2883,6 +2958,8 @@ class KbqPipeSelectComponent extends KbqBasePipe {
         super(...arguments);
         /** control for search options */
         this.searchControl = new FormControl(null);
+        /** Query tokens for option highlighting: tokenized like the filter, so every matched token is marked. */
+        this.searchTokens = toSignal(this.searchControl.valueChanges.pipe(startWith(this.searchControl.value), map((value) => tokenizeSearchQuery(value ?? ''))), { initialValue: [] });
         /**
          * Options of the pipe template that match the search query. Follows the templates too, so options
          * supplied after initialization render on first open.
@@ -2932,7 +3009,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    [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=\"{{ localeConfiguration().search.placeholder }}\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeConfiguration().search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeConfiguration().pipe.emptySearchResult }}</div>\n\n    @if (noOptions) {\n        <kbq-select-no-options>{{ noOptionsMessage }}</kbq-select-no-options>\n    }\n\n    @for (item of filteredOptions(); 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: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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$2.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "hiddenItemsTextFormatter", "aria-label", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "clearPredicate", "selectAllToggle", "selectAll", "selectAllHandler", "panelWidth", "panelMinWidth", "panelMaxWidth", "panelMaxHeight", "value", "id", "tabIndex", "disabled"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$2.KbqOptionTooltip, selector: "kbq-option", inputs: ["ignoreTooltipPointerEvents"] }, { kind: "component", type: i9.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i9.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9.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$2.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.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "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"] }], 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=\"{{ localeConfiguration().search.placeholder }}\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeConfiguration().search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeConfiguration().pipe.emptySearchResult }}</div>\n\n    @if (noOptions) {\n        <kbq-select-no-options>{{ noOptionsMessage }}</kbq-select-no-options>\n    }\n\n    @for (item of filteredOptions(); 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\n                    [class.kbq-truncate-line]=\"!multilineOptions\"\n                    [innerHTML]=\"item.name | kbqHighlightBackground: searchTokens() : true\"\n                ></div>\n                <div\n                    class=\"kbq-option-caption\"\n                    [class.kbq-truncate-line]=\"!multilineOptions\"\n                    [innerHTML]=\"caption | kbqHighlightBackground: searchTokens() : true\"\n                ></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: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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$2.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "hiddenItemsTextFormatter", "aria-label", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "multilineOptions", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "clearPredicate", "selectAllToggle", "selectAll", "selectAllHandler", "panelWidth", "panelMinWidth", "panelMaxWidth", "panelMaxHeight", "value", "id", "tabIndex", "disabled"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$2.KbqOptionTooltip, selector: "kbq-option", inputs: ["ignoreTooltipPointerEvents"] }, { kind: "component", type: i9.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i9.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9.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", "showRequiredMarker"], 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$2.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.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "readonly", "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: "ngmodule", type: KbqHighlightModule }, { kind: "pipe", type: i9.KbqHighlightBackgroundPipe, name: "kbqHighlightBackground" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqPipeSelectComponent, decorators: [{
             type: Component,
@@ -2946,13 +3023,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                         NgTemplateOutlet,
                         KbqIcon,
                         KbqInputModule,
-                        ReactiveFormsModule
+                        ReactiveFormsModule,
+                        KbqHighlightModule
                     ], providers: [
                         {
                             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    [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=\"{{ localeConfiguration().search.placeholder }}\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeConfiguration().search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeConfiguration().pipe.emptySearchResult }}</div>\n\n    @if (noOptions) {\n        <kbq-select-no-options>{{ noOptionsMessage }}</kbq-select-no-options>\n    }\n\n    @for (item of filteredOptions(); 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: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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=\"{{ localeConfiguration().search.placeholder }}\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeConfiguration().search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeConfiguration().pipe.emptySearchResult }}</div>\n\n    @if (noOptions) {\n        <kbq-select-no-options>{{ noOptionsMessage }}</kbq-select-no-options>\n    }\n\n    @for (item of filteredOptions(); 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\n                    [class.kbq-truncate-line]=\"!multilineOptions\"\n                    [innerHTML]=\"item.name | kbqHighlightBackground: searchTokens() : true\"\n                ></div>\n                <div\n                    class=\"kbq-option-caption\"\n                    [class.kbq-truncate-line]=\"!multilineOptions\"\n                    [innerHTML]=\"caption | kbqHighlightBackground: searchTokens() : true\"\n                ></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: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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 {
@@ -3011,7 +3089,7 @@ class KbqPipeTextComponent extends KbqBasePipe {
                 provide: KbqBasePipe,
                 useExisting: this
             }
-        ], viewQueries: [{ propertyName: "popover", first: true, predicate: KbqPopoverTrigger, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbq-title]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverFooter]=\"footer\"\n    [kbqPopoverOffset]=\"4\"\n    [kbqPopoverDefaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [class]=\"{ 'kbq-active': popover().isOpen }\"\n>\n    <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!data.value\">\n        {{ data.value }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    <kbq-form-field (keydown)=\"onKeydown($event)\">\n        <textarea kbqTextarea rows=\"1\" [formControl]=\"control\" [freeRowsHeight]=\"0\" [maxRows]=\"5\"></textarea>\n    </kbq-form-field>\n</ng-template>\n\n<ng-template #footer>\n    <button kbq-button [color]=\"'theme'\" [disabled]=\"disabled\" [kbqStyle]=\"'transparent'\" (click)=\"onApply()\">\n        <span>{{ localeConfiguration().pipe.applyButton }}</span>\n        &nbsp;\n        <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n    </button>\n</ng-template>\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\">{{ data.value }}</div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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: KbqPopoverModule }, { kind: "directive", type: i5$1.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["kbqPopoverHideIfNotInViewPort", "kbqTrigger", "kbqLeaveDelay", "kbqEnterDelay", "kbqPopoverPreventClose", "kbqPopoverStickToWindow", "kbqPopoverContainer", "kbqPopoverHasBackdrop", "kbqPopoverBackdropClass", "kbqPopoverDefaultPaddings", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverContext", "kbqPopoverAriaLabel", "kbqPopoverHasCloseButton", "kbqPopoverCloseOnScroll", "kbqPopoverArrow", "kbqPopoverOffset", "kbqPopoverAutoFocus", "kbqPopoverOrigin", "kbqPopoverDisabled", "kbqPopoverPlacementPriority", "kbqPopoverPlacement", "kbqPopoverVisible"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqDividerModule }, { 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: KbqTextareaModule }, { kind: "directive", type: i5$2.KbqTextarea, selector: "textarea[kbqTextarea]", inputs: ["canGrow", "maxRows", "errorStateMatcher", "disabled", "id", "placeholder", "freeRowsHeight", "required", "value"], exportAs: ["kbqTextarea"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "popover", first: true, predicate: KbqPopoverTrigger, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbq-title]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverFooter]=\"footer\"\n    [kbqPopoverOffset]=\"4\"\n    [kbqPopoverDefaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [class]=\"{ 'kbq-active': popover().isOpen }\"\n>\n    <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!data.value\">\n        {{ data.value }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    <kbq-form-field (keydown)=\"onKeydown($event)\">\n        <textarea kbqTextarea rows=\"1\" [formControl]=\"control\" [freeRowsHeight]=\"0\" [maxRows]=\"5\"></textarea>\n    </kbq-form-field>\n</ng-template>\n\n<ng-template #footer>\n    <button kbq-button [color]=\"'theme'\" [disabled]=\"disabled\" [kbqStyle]=\"'transparent'\" (click)=\"onApply()\">\n        <span>{{ localeConfiguration().pipe.applyButton }}</span>\n        &nbsp;\n        <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n    </button>\n</ng-template>\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\">{{ data.value }}</div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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: KbqPopoverModule }, { kind: "directive", type: i5$1.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["kbqPopoverHideIfNotInViewPort", "kbqTrigger", "kbqLeaveDelay", "kbqEnterDelay", "kbqPopoverPreventClose", "kbqPopoverStickToWindow", "kbqPopoverContainer", "kbqPopoverHasBackdrop", "kbqPopoverBackdropClass", "kbqPopoverDefaultPaddings", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverContext", "kbqPopoverAriaLabel", "kbqPopoverHasCloseButton", "kbqPopoverCloseOnScroll", "kbqPopoverArrow", "kbqPopoverArrowCentered", "kbqPopoverOffset", "kbqPopoverAutoFocus", "kbqRelativeToPointer", "kbqPopoverOrigin", "kbqPopoverDisabled", "kbqPopoverPlacementPriority", "kbqPopoverPlacement", "kbqPopoverVisible"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass", "showRequiredMarker"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqDividerModule }, { 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: KbqTextareaModule }, { kind: "directive", type: i5$2.KbqTextarea, selector: "textarea[kbqTextarea]", inputs: ["canGrow", "maxRows", "errorStateMatcher", "disabled", "readonly", "id", "placeholder", "freeRowsHeight", "required", "value"], exportAs: ["kbqTextarea"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqPipeTextComponent, decorators: [{
             type: Component,
@@ -3031,7 +3109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<button\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbq-title]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverFooter]=\"footer\"\n    [kbqPopoverOffset]=\"4\"\n    [kbqPopoverDefaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [class]=\"{ 'kbq-active': popover().isOpen }\"\n>\n    <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!data.value\">\n        {{ data.value }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    <kbq-form-field (keydown)=\"onKeydown($event)\">\n        <textarea kbqTextarea rows=\"1\" [formControl]=\"control\" [freeRowsHeight]=\"0\" [maxRows]=\"5\"></textarea>\n    </kbq-form-field>\n</ng-template>\n\n<ng-template #footer>\n    <button kbq-button [color]=\"'theme'\" [disabled]=\"disabled\" [kbqStyle]=\"'transparent'\" (click)=\"onApply()\">\n        <span>{{ localeConfiguration().pipe.applyButton }}</span>\n        &nbsp;\n        <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n    </button>\n</ng-template>\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\">{{ data.value }}</div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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: "<button\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbq-title]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverFooter]=\"footer\"\n    [kbqPopoverOffset]=\"4\"\n    [kbqPopoverDefaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [class]=\"{ 'kbq-active': popover().isOpen }\"\n>\n    <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!data.value\">\n        {{ data.value }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    <kbq-form-field (keydown)=\"onKeydown($event)\">\n        <textarea kbqTextarea rows=\"1\" [formControl]=\"control\" [freeRowsHeight]=\"0\" [maxRows]=\"5\"></textarea>\n    </kbq-form-field>\n</ng-template>\n\n<ng-template #footer>\n    <button kbq-button [color]=\"'theme'\" [disabled]=\"disabled\" [kbqStyle]=\"'transparent'\" (click)=\"onApply()\">\n        <span>{{ localeConfiguration().pipe.applyButton }}</span>\n        &nbsp;\n        <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n    </button>\n</ng-template>\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\">{{ data.value }}</div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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: { popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqPopoverTrigger), { isSignal: true }] }] } });
 
 class KbqPipeTreeSelectComponent extends KbqTreeSelectPipeBase {
@@ -3060,6 +3138,10 @@ class KbqPipeTreeSelectComponent extends KbqTreeSelectPipeBase {
         // `updateTemplates` initializer) ensures the initial replay writes `dataSource.data`.
         this.filterBar?.internalTemplatesChanges.pipe(takeUntilDestroyed()).subscribe(this.updateTemplates);
     }
+    /** @docs-private */
+    getSelectedValues() {
+        return this.data.value == null ? [] : [this.data.value];
+    }
     onSelect(item) {
         this.data.value = item.value;
         this.filterBar?.onChangePipe.emit(this.data);
@@ -3073,7 +3155,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    [searchMinOptionsThreshold]=\"noOptions ? 1 : undefined\"\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=\"{{ localeConfiguration().search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeConfiguration().search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeConfiguration().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: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2$1.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "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: ["aria-label", "aria-labelledby", "autoSelect", "multiple", "noUnselectLast", "typeAhead", "selectAllToggle", "selectAll", "disabled", "tabIndex", "selectAllHandler"], outputs: ["navigationChange", "selectionChange", "selectAllChange", "onSelectAll", "copyChange", "onCopy"], exportAs: ["kbqTreeSelection"] }, { kind: "component", type: i7$1.KbqTreeOption, selector: "kbq-tree-option", inputs: ["checkboxThirdState", "disabled", "selectable", "selectAllRow", "showCheckbox"], outputs: ["selectionChange", "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", "hiddenItemsTextFormatter", "panelClass", "backdropClass", "aria-label", "aria-labelledby", "errorStateMatcher", "sortComparator", "clearPredicate", "multiline", "placeholder", "required", "multiple", "autoSelect", "selectAllToggle", "selectAll", "id", "hasBackdrop", "tabIndex", "disabled", "selectAllHandler", "panelMinWidth", "panelWidth", "panelMaxWidth", "panelMaxHeight", "searchMinOptionsThreshold"], outputs: ["openedChange", "opened", "closed", "selectionChange", "onSelectAll"], exportAs: ["kbqTreeSelect"] }, { kind: "directive", type: i9.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "component", type: i3$2.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.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]=\"\n        multilineOptions\n            ? 'kbq-pipe-tree-select__panel kbq-pipe-tree-select__panel_multiline'\n            : 'kbq-pipe-tree-select__panel'\n    \"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [searchMinOptionsThreshold]=\"noOptions ? 1 : undefined\"\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=\"{{ localeConfiguration().search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeConfiguration().search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeConfiguration().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 [viewValue]=\"treeControl.getViewValue(node)\">\n            <ng-container [ngTemplateOutlet]=\"nodeContent\" [ngTemplateOutletContext]=\"{ $implicit: node }\" />\n        </kbq-tree-option>\n\n        <kbq-tree-option\n            *kbqTreeNodeDef=\"let node; when: hasChild\"\n            kbqTreeNodePadding\n            [selectable]=\"false\"\n            [viewValue]=\"treeControl.getViewValue(node)\"\n        >\n            <kbq-tree-node-toggle [node]=\"node\" />\n            <ng-container [ngTemplateOutlet]=\"nodeContent\" [ngTemplateOutletContext]=\"{ $implicit: node }\" />\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n<ng-template #nodeContent let-node>\n    @if (isTemplateRef(valueTemplate)) {\n        <ng-container\n            [ngTemplateOutlet]=\"$any(valueTemplate)\"\n            [ngTemplateOutletContext]=\"{ $implicit: this, option: getSourceNode(node), search: searchControl.value }\"\n        />\n    } @else {\n        <div\n            [class.kbq-truncate-line]=\"!multilineOptions\"\n            [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterQuery\"\n        ></div>\n        @if (node.caption) {\n            <div\n                class=\"kbq-option-caption\"\n                [class.kbq-truncate-line]=\"!multilineOptions\"\n                [innerHTML]=\"node.caption | kbqHighlightBackground: treeControl.filterQuery\"\n            ></div>\n        }\n    }\n</ng-template>\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: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2$1.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i3.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "readonly", "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", "showRequiredMarker"], 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: ["aria-label", "aria-labelledby", "autoSelect", "multiple", "noUnselectLast", "typeAhead", "selectAllToggle", "selectAll", "disabled", "tabIndex", "selectAllHandler"], outputs: ["navigationChange", "selectionChange", "selectAllChange", "onSelectAll", "copyChange", "onCopy"], exportAs: ["kbqTreeSelection"] }, { kind: "component", type: i7$1.KbqTreeOption, selector: "kbq-tree-option", inputs: ["checkboxThirdState", "viewValue", "disabled", "selectable", "selectAllRow", "showCheckbox"], outputs: ["selectionChange", "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", "hiddenItemsTextFormatter", "panelClass", "backdropClass", "aria-label", "aria-labelledby", "errorStateMatcher", "sortComparator", "clearPredicate", "multiline", "placeholder", "required", "multiple", "autoSelect", "selectAllToggle", "selectAll", "id", "hasBackdrop", "tabIndex", "disabled", "selectAllHandler", "panelMinWidth", "panelWidth", "panelMaxWidth", "panelMaxHeight", "searchMinOptionsThreshold"], outputs: ["openedChange", "opened", "closed", "selectionChange", "onSelectAll"], exportAs: ["kbqTreeSelect"] }, { kind: "directive", type: i9.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "component", type: i3$2.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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i9.KbqHighlightBackgroundPipe, name: "kbqHighlightBackground" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqPipeTreeSelectComponent, decorators: [{
             type: Component,
@@ -3090,13 +3172,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                         KbqTreeModule,
                         KbqTreeSelectModule,
                         KbqSelectNoOptions,
-                        FormsModule
+                        FormsModule,
+                        NgTemplateOutlet
                     ], 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    [searchMinOptionsThreshold]=\"noOptions ? 1 : undefined\"\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=\"{{ localeConfiguration().search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeConfiguration().search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeConfiguration().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: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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]=\"\n        multilineOptions\n            ? 'kbq-pipe-tree-select__panel kbq-pipe-tree-select__panel_multiline'\n            : 'kbq-pipe-tree-select__panel'\n    \"\n    [panelMaxHeight]=\"panelMaxHeight\"\n    [searchMinOptionsThreshold]=\"noOptions ? 1 : undefined\"\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=\"{{ localeConfiguration().search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeConfiguration().search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeConfiguration().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 [viewValue]=\"treeControl.getViewValue(node)\">\n            <ng-container [ngTemplateOutlet]=\"nodeContent\" [ngTemplateOutletContext]=\"{ $implicit: node }\" />\n        </kbq-tree-option>\n\n        <kbq-tree-option\n            *kbqTreeNodeDef=\"let node; when: hasChild\"\n            kbqTreeNodePadding\n            [selectable]=\"false\"\n            [viewValue]=\"treeControl.getViewValue(node)\"\n        >\n            <kbq-tree-node-toggle [node]=\"node\" />\n            <ng-container [ngTemplateOutlet]=\"nodeContent\" [ngTemplateOutletContext]=\"{ $implicit: node }\" />\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n<ng-template #nodeContent let-node>\n    @if (isTemplateRef(valueTemplate)) {\n        <ng-container\n            [ngTemplateOutlet]=\"$any(valueTemplate)\"\n            [ngTemplateOutletContext]=\"{ $implicit: this, option: getSourceNode(node), search: searchControl.value }\"\n        />\n    } @else {\n        <div\n            [class.kbq-truncate-line]=\"!multilineOptions\"\n            [innerHTML]=\"treeControl.getViewValue(node) | kbqHighlightBackground: treeControl.filterQuery\"\n        ></div>\n        @if (node.caption) {\n            <div\n                class=\"kbq-option-caption\"\n                [class.kbq-truncate-line]=\"!multilineOptions\"\n                [innerHTML]=\"node.caption | kbqHighlightBackground: treeControl.filterQuery\"\n            ></div>\n        }\n    }\n</ng-template>\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: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-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-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-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-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.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-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-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-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-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-option-text,.kbq-pipe-multiselect__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-option-text,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option .kbq-option-text{white-space:normal;overflow-wrap:break-word}.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter{margin-inline-start:var(--kbq-size-xxs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-pseudo-checkbox,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>kbq-checkbox{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-pipe-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle,.kbq-pipe-multi-tree-select__panel_multiline .kbq-tree-option>.kbq-tree-node-toggle{align-self:flex-start;height:var(--kbq-typography-text-normal-line-height);margin-top:0}.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-multiselect__panel .kbq-pipe-select-all__counter,.kbq-pipe-multi-tree-select__panel .kbq-pipe-select-all__counter{color:var(--kbq-foreground-contrast-secondary)}.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: () => [] });
 
 /** list of pipes available out of the box. */
@@ -3285,7 +3368,7 @@ class KbqPipeAdd {
 
         <!-- Announces a newly-added pipe to assistive tech (WCAG 4.1.3). -->
         <div class="cdk-visually-hidden" aria-live="polite" aria-atomic="true">{{ announcement() }}</div>
-    `, isInline: true, styles: [".kbq-pipe-add .kbq-select .kbq-select__trigger{height:unset}\n"], dependencies: [{ kind: "ngmodule", type: KbqDropdownModule }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i1$2.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { 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: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqOptionModule }, { kind: "component", type: i9.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3$2.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "hiddenItemsTextFormatter", "aria-label", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "clearPredicate", "selectAllToggle", "selectAll", "selectAllHandler", "panelWidth", "panelMinWidth", "panelMaxWidth", "panelMaxHeight", "value", "id", "tabIndex", "disabled"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$2.KbqOptionTooltip, selector: "kbq-option", inputs: ["ignoreTooltipPointerEvents"] }, { kind: "directive", type: i9.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-pipe-add .kbq-select .kbq-select__trigger{height:unset}\n"], dependencies: [{ kind: "ngmodule", type: KbqDropdownModule }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i1$2.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipArrowCentered", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { 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: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqOptionModule }, { kind: "component", type: i9.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3$2.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "hiddenItemsTextFormatter", "aria-label", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "multilineOptions", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "clearPredicate", "selectAllToggle", "selectAll", "selectAllHandler", "panelWidth", "panelMinWidth", "panelMaxWidth", "panelMaxHeight", "value", "id", "tabIndex", "disabled"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$2.KbqOptionTooltip, selector: "kbq-option", inputs: ["ignoreTooltipPointerEvents"] }, { kind: "directive", type: i9.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqPipeAdd, decorators: [{
             type: Component,