@koobiq/components 19.8.3 → 20.1.0

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

@@ -1,51 +1,49 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ChangeDetectorRef, DestroyRef, afterNextRender, TemplateRef, Directive, ElementRef, Input, booleanAttribute, ChangeDetectionStrategy, ViewEncapsulation, Component, ContentChild, ContentChildren, viewChild, ViewChild, ViewChildren, EventEmitter, Output, input, numberAttribute, Injector, ViewContainerRef, NgModule } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i6 from '@koobiq/components/core';
-import { isMac, KbqComponentColors, KBQ_TITLE_TEXT_REF, DateAdapter, DateFormatter, PopUpPlacements, KbqFormattersModule, kbqDisableLegacyValidationDirectiveProvider, KbqPseudoCheckboxModule, KbqOption, KbqHighlightModule, ruRULocaleData, PopUpSizes, KbqFormsModule, KBQ_LOCALE_SERVICE, KbqOptionModule } from '@koobiq/components/core';
+import { InjectionToken, inject, ChangeDetectorRef, DestroyRef, ElementRef, afterNextRender, TemplateRef, Directive, effect, input, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChild, viewChildren, output, contentChild, model, computed, forwardRef, signal, Injector, ViewContainerRef, NgModule } from '@angular/core';
+import { takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
+import * as i9$1 from '@koobiq/components/core';
+import { isMac, KbqComponentColors, DateAdapter, DateFormatter, PopUpPlacements, ENTER, KbqFormattersModule, KbqOption, KbqPseudoCheckboxModule, KbqHighlightModule, ruRULocaleData, KbqFormsModule, PopUpSizes, KBQ_LOCALE_SERVICE, KbqOptionModule } from '@koobiq/components/core';
 import * as i4$1 from '@koobiq/components/divider';
 import { KbqDividerModule } from '@koobiq/components/divider';
-import { Subject, merge, Subscription, throttleTime, Observable, of, BehaviorSubject, distinctUntilChanged as distinctUntilChanged$1, debounceTime as debounceTime$1 } from 'rxjs';
+import { Subject, merge, of, BehaviorSubject } from 'rxjs';
 import * as i1$1 from '@angular/forms';
-import { FormGroup, FormControl, ReactiveFormsModule, FormsModule, UntypedFormControl, Validators } from '@angular/forms';
-import { ENTER } from '@koobiq/cdk/keycodes';
+import { FormGroup, FormControl, ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
 import * as i1 from '@koobiq/components/button';
 import { KbqButton, KbqButtonStyles, KbqButtonModule } from '@koobiq/components/button';
 import * as i8 from '@koobiq/components/datepicker';
 import { KbqDatepickerModule } from '@koobiq/components/datepicker';
-import * as i2 from '@koobiq/components/form-field';
-import { KbqFormFieldModule } from '@koobiq/components/form-field';
-import * as i3 from '@koobiq/components/icon';
+import * as i2 from '@koobiq/components/icon';
 import { KbqIconModule, KbqIcon } from '@koobiq/components/icon';
 import * as i4 from '@koobiq/components/input';
-import { KbqInputModule, KbqInput } from '@koobiq/components/input';
+import { KbqInputModule } from '@koobiq/components/input';
 import * as i7 from '@koobiq/components/list';
 import { KbqListSelection, KbqListModule } from '@koobiq/components/list';
-import * as i5 from '@koobiq/components/popover';
+import * as i5$1 from '@koobiq/components/popover';
 import { KbqPopoverModule, KbqPopoverTrigger } from '@koobiq/components/popover';
 import * as i9 from '@koobiq/components/timepicker';
 import { KbqTimepickerModule } from '@koobiq/components/timepicker';
-import * as i5$2 from '@koobiq/components/title';
+import * as i2$1 from '@koobiq/components/title';
 import { KbqTitleModule } from '@koobiq/components/title';
-import { filter, delay, debounceTime, map, distinctUntilChanged } from 'rxjs/operators';
-import * as i2$1 from '@koobiq/components/tooltip';
+import { FocusMonitor, InputModalityDetector } from '@angular/cdk/a11y';
+import { DOCUMENT, NgTemplateOutlet, AsyncPipe } from '@angular/common';
+import { filter, map, distinctUntilChanged } from 'rxjs/operators';
+import * as i1$2 from '@koobiq/components/tooltip';
 import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
-import { NgClass, NgTemplateOutlet, AsyncPipe, NgIf } from '@angular/common';
-import * as i6$1 from '@koobiq/components/badge';
+import * as i5 from '@koobiq/components/form-field';
+import * as i6 from '@koobiq/components/badge';
 import { KbqBadgeModule } from '@koobiq/components/badge';
-import * as i3$1 from '@koobiq/components/select';
-import { KbqSelectModule, KbqSelect } from '@koobiq/components/select';
+import * as i3 from '@koobiq/components/select';
+import { KbqSelect, KbqSelectModule } from '@koobiq/components/select';
 import * as i7$1 from '@koobiq/components/tree';
-import { kbqTreeSelectAllValue, KbqTreeFlattener, FlatTreeControl, KbqTreeFlatDataSource, KbqTreeModule, KbqTreeSelection } from '@koobiq/components/tree';
+import { KbqTreeFlattener, FlatTreeControl, KbqTreeFlatDataSource, kbqTreeSelectAllValue, KbqTreeSelection, KbqTreeModule } from '@koobiq/components/tree';
 import * as i8$1 from '@koobiq/components/tree-select';
-import { KbqTreeSelectModule, KbqTreeSelect } from '@koobiq/components/tree-select';
-import * as i5$1 from '@koobiq/components/textarea';
+import { KbqTreeSelect, KbqTreeSelectModule } from '@koobiq/components/tree-select';
+import * as i5$2 from '@koobiq/components/textarea';
 import { KbqTextareaModule } from '@koobiq/components/textarea';
-import { FocusMonitor } from '@angular/cdk/a11y';
-import * as i10 from '@koobiq/components/alert';
+import * as i3$1 from '@koobiq/components/dropdown';
+import { KbqDropdownTrigger, KbqDropdownModule } from '@koobiq/components/dropdown';
+import * as i6$1 from '@koobiq/components/alert';
 import { KbqAlertModule } from '@koobiq/components/alert';
-import * as i3$2 from '@koobiq/components/dropdown';
-import { KbqDropdownModule, KbqDropdownTrigger } from '@koobiq/components/dropdown';
 
 /** Injection Token for providing configuration of filter-bar */
 const KBQ_PIPE_DATA = new InjectionToken('KBQ_PIPE_DATA');
@@ -65,7 +63,7 @@ class KbqBasePipe {
     /** localized data
      * @docs-private */
     get localeData() {
-        return this.filterBar?.configuration;
+        return this.filterBar?.configuration ?? KBQ_FILTER_BAR_DEFAULT_CONFIGURATION;
     }
     constructor() {
         /** changes of state */
@@ -74,11 +72,25 @@ class KbqBasePipe {
         this.data = inject(KBQ_PIPE_DATA);
         /** KbqFilterBar instance
          * @docs-private */
-        this.filterBar = inject(KbqFilterBar, { optional: true });
+        this.filterBar = inject(KBQ_FILTER_BAR_HOST, { optional: true });
         /** @docs-private */
         this.changeDetectorRef = inject(ChangeDetectorRef);
         /** @docs-private */
         this.destroyRef = inject(DestroyRef);
+        /** @docs-private */
+        this.focusMonitor = inject(FocusMonitor);
+        /** @docs-private */
+        this.elementRef = inject(ElementRef);
+        this.inputModalityDetector = inject(InputModalityDetector);
+        this.document = inject(DOCUMENT);
+        /** Last known focus origin within the pipe. Used to preserve the keyboard focus ring on restore. */
+        this.focusOrigin = null;
+        /**
+         * Whether this pipe has been destroyed. Guards deferred (`setTimeout`) work that could otherwise
+         * read view queries or mutate `data` after the pipe was removed or the filter switched.
+         * @docs-private
+         */
+        this.destroyed = false;
         /**
          * Whether the current platform is a Mac.
          *
@@ -94,10 +106,20 @@ class KbqBasePipe {
             }
         };
         this.$implicit = this;
-        this.stateChanges.subscribe(() => {
+        this.stateChanges.pipe(takeUntilDestroyed()).subscribe(() => {
             this.changeDetectorRef.markForCheck();
         });
         this.filterBar?.internalTemplatesChanges.pipe(takeUntilDestroyed()).subscribe(this.updateTemplates);
+        // Track the focus origin so the trigger's keyboard focus ring can be restored after
+        // a value is chosen. `checkChildren` captures focus on the inner trigger button.
+        this.focusMonitor
+            .monitor(this.elementRef, true)
+            .pipe(filter((origin) => !!origin), takeUntilDestroyed())
+            .subscribe((origin) => (this.focusOrigin = origin));
+        this.destroyRef.onDestroy(() => {
+            this.destroyed = true;
+            this.focusMonitor.stopMonitoring(this.elementRef);
+        });
         afterNextRender(() => {
             this.isMac = isMac();
         });
@@ -131,13 +153,39 @@ class KbqBasePipe {
     onClear() {
         this.data.value = null;
         this.stateChanges.next();
-        this.filterBar?.onClearPipe.next(this.data);
-        this.filterBar?.onChangePipe.next(this.data);
+        this.filterBar?.onClearPipe.emit(this.data);
+        this.filterBar?.onChangePipe.emit(this.data);
+    }
+    /**
+     * Restores focus to the pipe's trigger button after a value is chosen or the panel closes.
+     * Focuses via {@link FocusMonitor} with the captured origin so a keyboard-driven interaction
+     * keeps its focus ring, while a mouse-driven one does not.
+     *
+     * @docs-private
+     */
+    restoreTriggerFocus() {
+        const active = this.document.activeElement;
+        // The panel may have been closed by moving focus to another interactive element
+        // (e.g. an outside click) — stealing focus back would break the user's intent.
+        // Focus inside the pipe or inside a not-yet-detached overlay is fine to take over.
+        if (active &&
+            active !== this.document.body &&
+            !this.elementRef.nativeElement.contains(active) &&
+            !active.closest('.cdk-overlay-container')) {
+            return;
+        }
+        const trigger = this.elementRef.nativeElement.querySelector('button:not(.kbq-pipe__remove-button)');
+        // A pipe opened right after being added from pipe-add never received focus itself,
+        // so `focusOrigin` is unknown there — fall back to the detected input modality.
+        const origin = this.focusOrigin ?? this.inputModalityDetector.mostRecentModality ?? 'program';
+        if (trigger) {
+            this.focusMonitor.focusVia(trigger, origin);
+        }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqBasePipe, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqBasePipe, isStandalone: true, host: { properties: { "class": "\"kbq-pipe__\" + data.type", "class.kbq-pipe_empty": "isEmpty", "class.kbq-pipe_cleanable": "data.cleanable", "class.kbq-pipe_removable": "data.removable", "class.kbq-pipe_disabled": "data.disabled" }, classAttribute: "kbq-pipe" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqBasePipe, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqBasePipe, isStandalone: true, host: { properties: { "class": "\"kbq-pipe__\" + data.type", "class.kbq-pipe_empty": "isEmpty", "class.kbq-pipe_cleanable": "data.cleanable", "class.kbq-pipe_removable": "data.removable", "class.kbq-pipe_disabled": "data.disabled" }, classAttribute: "kbq-pipe" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqBasePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqBasePipe, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -157,7 +205,7 @@ class KbqPipeMinWidth {
     }
     constructor() {
         /** KbqFilterBar instance */
-        this.filterBar = inject(KbqFilterBar, { optional: true });
+        this.filterBar = inject(KBQ_FILTER_BAR_HOST, { optional: true });
         /** @docs-private */
         this.elementRef = inject(ElementRef);
         /** @docs-private */
@@ -168,13 +216,21 @@ class KbqPipeMinWidth {
             this.minWidth = this.textLength < this.maxSymbolsForFitContent ? 'fit-content' : 'unset';
             this.changeDetectorRef.markForCheck();
         };
-        this.filterBar?.changes.pipe(delay(0)).subscribe(this.update);
+        // Recompute the min-width whenever the filter changes. The pipe's text content updates during CD,
+        // so defer the read to the next macrotask (mirrors the old `changes.pipe(delay(0))`). Passing the
+        // `filterBar.filter` read into the scheduler subscribes the effect, replacing the `changes` bus.
+        effect((onCleanup) => onCleanup(this.scheduleMinWidthUpdate(this.filterBar?.filter())));
         afterNextRender({ read: this.update });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeMinWidth, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqPipeMinWidth, isStandalone: true, selector: "[kbqPipeMinWidth]", host: { properties: { "style.min-width": "minWidth" } }, ngImport: i0 }); }
+    /** Schedules a deferred min-width recompute and returns the effect-cleanup that cancels it. */
+    scheduleMinWidthUpdate(_filter) {
+        const timerId = setTimeout(this.update);
+        return () => clearTimeout(timerId);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeMinWidth, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqPipeMinWidth, isStandalone: true, selector: "[kbqPipeMinWidth]", host: { properties: { "style.min-width": "minWidth" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeMinWidth, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeMinWidth, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqPipeMinWidth]',
@@ -186,17 +242,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 
 class KbqPipeState {
     constructor() {
-        /** @docs-private */
-        this.destroyRef = inject(DestroyRef);
         /** @docs-private */
         this.button = inject(KbqButton);
         /** @docs-private */
         this.pipe = inject(KbqBasePipe);
         /** KbqFilterBar instance
          * @docs-private */
-        this.filterBar = inject(KbqFilterBar);
-        this._state = null;
-        this.updateState = () => {
+        this.filterBar = inject(KBQ_FILTER_BAR_HOST);
+        /** Pipe state used to calculate/update the button style. */
+        this.state = input(null, ...(ngDevMode ? [{ debugName: "state", alias: 'kbqPipeState' }] : [{ alias: 'kbqPipeState' }]));
+        this.updateState = (_filter, _state) => {
             this.button.kbqStyle = KbqButtonStyles.Outline;
             this.button.color = KbqComponentColors.ContrastFade;
             if (!this.pipe.isEmpty) {
@@ -204,30 +259,20 @@ class KbqPipeState {
                 this.button.color = KbqComponentColors.ContrastFade;
             }
         };
+        // Re-derive the button style whenever the filter OR the pipe state changes (a pipe's emptiness may
+        // change with either). Passing both reads into `updateState` subscribes this effect to both signals;
+        // the style itself derives from `pipe.isEmpty`.
+        effect(() => this.updateState(this.filterBar.filter(), this.state()));
     }
-    /** calculates and updates styles of button from pipe state */
-    get state() {
-        return this._state;
-    }
-    set state(pipe) {
-        this._state = pipe;
-        this.updateState();
-    }
-    ngOnInit() {
-        this.filterBar.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(this.updateState);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeState, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqPipeState, isStandalone: true, selector: "[kbqPipeState]", inputs: { state: ["kbqPipeState", "state"] }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeState, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqPipeState, isStandalone: true, selector: "[kbqPipeState]", inputs: { state: { classPropertyName: "state", publicName: "kbqPipeState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeState, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeState, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqPipeState]'
                 }]
-        }], propDecorators: { state: [{
-                type: Input,
-                args: [{ alias: 'kbqPipeState' }]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqPipeState", required: false }] }] } });
 
 class KbqPipeButton {
     /** localized data
@@ -239,31 +284,36 @@ class KbqPipeButton {
         /** KbqPipe instance */
         this.pipe = inject(KbqBasePipe);
         /** KbqFilterBar instance */
-        this.filterBar = inject(KbqFilterBar);
+        this.filterBar = inject(KBQ_FILTER_BAR_HOST);
         /** @docs-private */
         this.changeDetectorRef = inject(ChangeDetectorRef);
         /** enables/disables read-only state */
-        this.readonly = false;
-        merge(this.pipe.stateChanges, this.filterBar.changes)
-            .pipe(takeUntilDestroyed())
-            .subscribe(() => this.changeDetectorRef.markForCheck());
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.pipe.stateChanges.pipe(takeUntilDestroyed()).subscribe(() => this.changeDetectorRef.markForCheck());
+        // Reading the filter signal subscribes this effect; the pipe template renders plain `data`
+        // (not signals), so mark it for check whenever the filter changes — replaces the retired `changes` bus.
+        effect(() => {
+            this.filterBar.filter();
+            this.changeDetectorRef.markForCheck();
+        });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: KbqPipeButton, isStandalone: true, selector: "kbq-pipe-button", inputs: { readonly: ["readonly", "readonly", booleanAttribute] }, host: { classAttribute: "kbq-pipe-button" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: KbqPipeButton, isStandalone: true, selector: "kbq-pipe-button", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kbq-pipe-button" }, ngImport: i0, template: `
         <button
             kbqTooltip="{{ pipe.data.cleanable ? localeData.clearButtonTooltip : localeData.removeButtonTooltip }}"
             class="kbq-pipe__remove-button"
             kbq-button
+            [attr.aria-label]="pipe.data.cleanable ? localeData.clearButtonTooltip : localeData.removeButtonTooltip"
             [disabled]="pipe.data.disabled"
             [kbqPipeState]="pipe.data"
             [kbqTooltipDisabled]="pipe.data.disabled"
             (click)="pipe.data.cleanable ? pipe.onClear() : pipe.onRemove()"
         >
-            <i kbq-icon="kbq-xmark-s_16" [color]="pipe.data.disabled ? 'empty' : 'contrast'"></i>
+            <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: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "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: ["forDisabledComponent", "ignoreTooltipPointerEvents", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], 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.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "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: ["forDisabledComponent", "ignoreTooltipPointerEvents", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipModifier", "kbqTooltipHeader"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeButton, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-button', imports: [
                         KbqIconModule,
@@ -275,119 +325,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             kbqTooltip="{{ pipe.data.cleanable ? localeData.clearButtonTooltip : localeData.removeButtonTooltip }}"
             class="kbq-pipe__remove-button"
             kbq-button
+            [attr.aria-label]="pipe.data.cleanable ? localeData.clearButtonTooltip : localeData.removeButtonTooltip"
             [disabled]="pipe.data.disabled"
             [kbqPipeState]="pipe.data"
             [kbqTooltipDisabled]="pipe.data.disabled"
             (click)="pipe.data.cleanable ? pipe.onClear() : pipe.onRemove()"
         >
-            <i kbq-icon="kbq-xmark-s_16" [color]="pipe.data.disabled ? 'empty' : 'contrast'"></i>
+            <i kbq-icon="kbq-xmark-s_16" aria-hidden="true" [color]="pipe.data.disabled ? 'empty' : 'contrast'"></i>
         </button>
-    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-pipe-button'
                     }, styles: [".kbq-pipe-button{display:flex;position:relative}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { readonly: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
-
-// todo DS-3672
-class KbqPipeTitleDirective extends KbqTooltipTrigger {
-    get isOverflown() {
-        return this.childContainer.some(({ nativeElement }) => {
-            return (this.parent?.offsetWidth < nativeElement.scrollWidth ||
-                this.parent?.offsetHeight < nativeElement.scrollHeight);
-        });
-    }
-    get parent() {
-        return this.parentContainer?.nativeElement || this.parentContainer;
-    }
-    get child() {
-        return this.childContainer.first.nativeElement || this.childContainer;
-    }
-    constructor() {
-        super();
-        this.componentInstance = inject(KBQ_TITLE_TEXT_REF, { optional: true, host: true });
-        this.resizeStream = new Subject();
-        this.debounceInterval = 100;
-        this.resizeSubscription = Subscription.EMPTY;
-        this.mutationSubscription = Subscription.EMPTY;
-        this.focusMonitorSubscription = Subscription.EMPTY;
-        afterNextRender(() => {
-            this.listenToMutationObserver();
-        });
-    }
-    ngAfterViewInit() {
-        this.parentContainer = this.parentContainer || this.componentInstance?.parentTextElement || this.elementRef;
-        this.childContainer = this.childContainer || this.componentInstance?.textElement || this.elementRef;
-        this.content = this.viewValue;
-        this.resizeSubscription = this.resizeStream
-            .pipe(debounceTime(this.debounceInterval))
-            .subscribe(() => (this.disabled = !this.isOverflown));
-        this.focusMonitorSubscription = this.focusMonitor
-            .monitor(this.elementRef)
-            .subscribe((origin) => (origin === 'keyboard' ? this.handleElementEnter() : this.hideTooltip()));
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.resizeSubscription.unsubscribe();
-        this.mutationSubscription.unsubscribe();
-        this.focusMonitorSubscription.unsubscribe();
-        this.focusMonitor.stopMonitoring(this.elementRef);
-    }
-    handleElementEnter() {
-        this.disabled = !this.isOverflown;
-    }
-    hideTooltip() {
-        this.disabled = true;
-    }
-    listenToMutationObserver() {
-        this.mutationSubscription = this.createMutationObserver()
-            .pipe(throttleTime(this.debounceInterval))
-            .subscribe(() => {
-            this.disabled = !this.isOverflown;
-            this.content = this.viewValue;
-        });
-    }
-    createMutationObserver() {
-        return new Observable((observer) => {
-            const mutationObserver = new MutationObserver((mutations) => observer.next(mutations));
-            mutationObserver.observe(this.parent, {
-                characterData: true,
-                attributes: false,
-                childList: true,
-                subtree: true
-            });
-            return () => mutationObserver.disconnect();
-        });
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqPipeTitleDirective, isStandalone: true, selector: "[kbqPipeTitle]", inputs: { viewValue: ["kbqPipeTitle", "viewValue"] }, host: { listeners: { "mouseenter": "handleElementEnter()", "mouseleave": "hideTooltip()", "window:resize": "resizeStream.next($event)" } }, queries: [{ propertyName: "parentContainer", first: true, predicate: ["kbqTitleContainer"], descendants: true }, { propertyName: "childContainer", predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqPipeTitle"], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeTitleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kbqPipeTitle]',
-                    exportAs: 'kbqPipeTitle',
-                    host: {
-                        '(mouseenter)': 'handleElementEnter()',
-                        '(mouseleave)': 'hideTooltip()',
-                        '(window:resize)': 'resizeStream.next($event)'
-                    }
-                }]
-        }], ctorParameters: () => [], propDecorators: { viewValue: [{
-                type: Input,
-                args: [{ alias: 'kbqPipeTitle' }]
-            }], childContainer: [{
-                type: ContentChildren,
-                args: ['kbqTitleText', { descendants: true }]
-            }], parentContainer: [{
-                type: ContentChild,
-                args: ['kbqTitleContainer']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
 
-class KbqPipeDateComponent extends KbqBasePipe {
+/**
+ * Shared implementation for the `date` and `datetime` pipes. The two pipes differ only in how a range
+ * is formatted and in their default start/end values, exposed here as the {@link formatRange},
+ * {@link getDefaultStart} and {@link getDefaultEnd} hooks. Everything else — the period list / custom
+ * period flow, calendar handling and form group — is common.
+ */
+class KbqPipeDateBaseComponent extends KbqBasePipe {
     constructor() {
         super(...arguments);
+        // The concrete date type `D` is unconstrained, so the adapter/formatter are used loosely here,
+        // matching the behaviour the `date`/`datetime` pipes had before this base class was extracted.
         this.adapter = inject(DateAdapter);
         this.formatter = inject(DateFormatter);
         /** @docs-private */
@@ -403,14 +364,18 @@ class KbqPipeDateComponent extends KbqBasePipe {
         /** @docs-private */
         this.showEndCalendar = false;
         /** @docs-private */
-        this.listSelection = viewChild.required('listSelection', { read: KbqListSelection });
+        this.popover = viewChild.required('popover');
+        /** @docs-private */
+        // Optional: the list only exists while the popover is open in list mode, and it is read
+        // in deferred callbacks that may fire after the popover has already closed.
+        this.listSelection = viewChild('listSelection', ...(ngDevMode ? [{ debugName: "listSelection", read: KbqListSelection }] : [{ read: KbqListSelection }]));
         /** @docs-private */
         this.returnButton = viewChild.required('returnButton', { read: KbqButton });
     }
     /** formatted value for period */
     get formattedValue() {
         if (this.start && this.end) {
-            return this.formatter.rangeShortDate(this.start, this.end);
+            return this.formatRange(this.start, this.end);
         }
         return this.data.value?.name ?? '';
     }
@@ -429,7 +394,7 @@ class KbqPipeDateComponent extends KbqBasePipe {
         if (this.data.value?.start) {
             return this.adapter.today().plus(this.data.value?.start);
         }
-        return this.adapter.today();
+        return this.getDefaultStart();
     }
     /** parsed end */
     get end() {
@@ -440,7 +405,7 @@ class KbqPipeDateComponent extends KbqBasePipe {
         if (this.data.value?.start) {
             return this.adapter.today();
         }
-        return this.adapter.today().plus({ days: 1 });
+        return this.getDefaultEnd();
     }
     /** Whether the current pipe is empty. */
     get isEmpty() {
@@ -452,9 +417,20 @@ class KbqPipeDateComponent extends KbqBasePipe {
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
-        this.popover.visibleChange
-            .pipe(filter((visible) => !visible), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.filterBar?.onClosePipe.next(this.data));
+        this.popover()
+            .visibleChange.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((visible) => {
+            if (visible) {
+                // Move keyboard focus onto the period list so Enter selects a preset
+                // instead of the focus trap landing on the "custom period" row.
+                if (this.isListMode) {
+                    setTimeout(() => this.listSelection()?.focus());
+                }
+            }
+            else {
+                this.filterBar?.onClosePipe.emit(this.data);
+            }
+        });
     }
     /** keydown handler
      * @docs-private */
@@ -472,14 +448,16 @@ class KbqPipeDateComponent extends KbqBasePipe {
             end: this.formGroup.controls.end.value.toISO()
         };
         this.stateChanges.next();
-        this.filterBar?.onChangePipe.next(this.data);
-        this.popover.hide();
+        this.filterBar?.onChangePipe.emit(this.data);
+        this.popover().hide();
+        setTimeout(() => this.restoreTriggerFocus());
     }
     onSelect(item) {
         this.data.value = item;
         this.stateChanges.next();
-        this.filterBar?.onChangePipe.next(this.data);
-        this.popover.hide();
+        this.filterBar?.onChangePipe.emit(this.data);
+        this.popover().hide();
+        setTimeout(() => this.restoreTriggerFocus());
     }
     showPeriod() {
         this.isListMode = false;
@@ -487,18 +465,22 @@ class KbqPipeDateComponent extends KbqBasePipe {
         this.showEndCalendar = false;
         this.initFormGroup();
         setTimeout(() => {
-            this.popover.updatePosition(true);
-            this.returnButton().focus();
+            if (this.destroyed)
+                return;
+            this.popover().updatePosition(true);
+            // Focus via FocusMonitor (keyboard origin) so the focus ring is preserved; a native
+            // `.focus()` bypasses FocusMonitor and drops the `.cdk-keyboard-focused` ring.
+            this.returnButton().focusViaKeyboard();
         });
     }
     showList() {
         this.isListMode = true;
-        setTimeout(() => this.listSelection().focus());
-        this.popover.updatePosition(true);
+        setTimeout(() => this.listSelection()?.focus());
+        this.popover().updatePosition(true);
     }
     /** opens popover */
     open() {
-        this.popover.show();
+        this.popover().show();
     }
     onSelectStartDate(value) {
         this.formGroup.controls.start.setValue(value);
@@ -509,7 +491,7 @@ class KbqPipeDateComponent extends KbqBasePipe {
     onFocusStartInput() {
         this.showStartCalendar = true;
         this.showEndCalendar = false;
-        this.popover.updatePosition(true);
+        this.popover().updatePosition(true);
     }
     onFocusEndInput() {
         this.showEndCalendar = true;
@@ -525,20 +507,35 @@ class KbqPipeDateComponent extends KbqBasePipe {
             end: new FormControl(this.end || this.defaultEnd)
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqPipeDateComponent, isStandalone: true, selector: "kbq-pipe-date", providers: [
-            kbqDisableLegacyValidationDirectiveProvider(),
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeDateBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.25", type: KbqPipeDateBaseComponent, isStandalone: true, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listSelection", first: true, predicate: ["listSelection"], descendants: true, read: KbqListSelection, isSignal: true }, { propertyName: "returnButton", first: true, predicate: ["returnButton"], descendants: true, read: KbqButton, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeDateBaseComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }], listSelection: [{ type: i0.ViewChild, args: ['listSelection', { ...{ read: KbqListSelection }, isSignal: true }] }], returnButton: [{ type: i0.ViewChild, args: ['returnButton', { ...{ read: KbqButton }, isSignal: true }] }] } });
+
+class KbqPipeDateComponent extends KbqPipeDateBaseComponent {
+    formatRange(start, end) {
+        return this.formatter.rangeShortDate(start, end);
+    }
+    getDefaultStart() {
+        return this.adapter.today();
+    }
+    getDefaultEnd() {
+        return this.adapter.today().plus({ days: 1 });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqPipeDateComponent, isStandalone: true, selector: "kbq-pipe-date", providers: [
             {
                 provide: KbqBasePipe,
                 useExisting: this
             }
-        ], viewQueries: [{ propertyName: "listSelection", first: true, predicate: ["listSelection"], descendants: true, read: KbqListSelection, isSignal: true }, { propertyName: "returnButton", first: true, predicate: ["returnButton"], descendants: true, read: KbqButton, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverOffset]=\"4\"\n    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    (kbqPopoverVisibleChange)=\"isListMode = true\"\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        <div class=\"kbq-date-list\">\n            <kbq-list-selection #listSelection [autoSelect]=\"false\" [ngModel]=\"data.value?.name\">\n                <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                    {{ localeData.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    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\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                    {{ localeData.datePipe.backToPeriodSelection }}\n                </button>\n            </div>\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</label>\n\n                <kbq-form-field class=\"kbq-date-period__date kbq-form__control\" [class.kbq-focused]=\"showStartCalendar\">\n                    <input\n                        formControlName=\"start\"\n                        [kbqCalendar]=\"startDateCalendar\"\n                        [max]=\"formGroup.controls.end.value\"\n                        (focusin)=\"onFocusStartInput()\"\n                        (keydown.tab)=\"hideCalendars()\"\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                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</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                        (focusin)=\"onFocusEndInput()\"\n                        (keydown.tab)=\"hideCalendars()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                @if (formGroup.controls.start.invalid) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeData.datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar\"\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>{{ localeData.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: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.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;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.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,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right: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;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left: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;left:0;top:0;bottom:0;width:1px;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-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-left:var(--kbq-size-xxs);margin-right: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-left:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color)}.kbq-pipe-date__popover .kbq-date-period{width:320px}.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 .kbq-form__label{padding-left:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-right: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:136px}.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-top-right-radius:unset;border-bottom-right-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-left:-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-top-left-radius:unset;border-bottom-left-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-left:var(--kbq-size-m);padding-right: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-states-foreground-disabled);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],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: KbqFormFieldModule }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqSuffix, selector: "[kbqSuffix]" }, { kind: "component", type: i2.KbqHint, selector: "kbq-hint", inputs: ["id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.MaxValidator, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: ["max"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["hideIfNotInViewPort", "kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], 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", "horizontal", "tabIndex", "disabled", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i7.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "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: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { 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    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    (kbqPopoverVisibleChange)=\"isListMode = true\"\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        <div class=\"kbq-date-list\">\n            <kbq-list-selection #listSelection [autoSelect]=\"false\" [ngModel]=\"data.value?.name\">\n                <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                    {{ localeData.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    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\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                    {{ localeData.datePipe.backToPeriodSelection }}\n                </button>\n            </div>\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</label>\n\n                <kbq-form-field class=\"kbq-date-period__date kbq-form__control\" [class.kbq-focused]=\"showStartCalendar\">\n                    <input\n                        formControlName=\"start\"\n                        [kbqCalendar]=\"startDateCalendar\"\n                        [max]=\"formGroup.controls.end.value\"\n                        (focusin)=\"onFocusStartInput()\"\n                        (keydown.tab)=\"hideCalendars()\"\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                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</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                        (focusin)=\"onFocusEndInput()\"\n                        (keydown.tab)=\"hideCalendars()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                @if (formGroup.controls.start.invalid) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeData.datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar\"\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>{{ localeData.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: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-inline-start:-1px;margin-inline-end:0;height:var(--kbq-size-l);align-self:center}.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 .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__separator{color:var(--kbq-line-contrast-less)}.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)}.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 .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],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.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.MaxValidator, 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]" }, { 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: ["hideIfNotInViewPort", "kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], 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", "selectAllToggle", "horizontal", "tabIndex", "disabled", "compareWith", "selectAllHandler"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i7.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "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$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], 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: "19.2.21", ngImport: i0, type: KbqPipeDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-date', imports: [
                         ReactiveFormsModule,
-                        KbqFormFieldModule,
                         KbqIconModule,
                         KbqInputModule,
                         KbqDividerModule,
@@ -551,175 +548,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqFormattersModule,
                         KbqPipeButton,
                         KbqTitleModule,
-                        KbqPipeTitleDirective,
                         FormsModule
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        kbqDisableLegacyValidationDirectiveProvider(),
+                    ], providers: [
                         {
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverOffset]=\"4\"\n    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    (kbqPopoverVisibleChange)=\"isListMode = true\"\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        <div class=\"kbq-date-list\">\n            <kbq-list-selection #listSelection [autoSelect]=\"false\" [ngModel]=\"data.value?.name\">\n                <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                    {{ localeData.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    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\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                    {{ localeData.datePipe.backToPeriodSelection }}\n                </button>\n            </div>\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</label>\n\n                <kbq-form-field class=\"kbq-date-period__date kbq-form__control\" [class.kbq-focused]=\"showStartCalendar\">\n                    <input\n                        formControlName=\"start\"\n                        [kbqCalendar]=\"startDateCalendar\"\n                        [max]=\"formGroup.controls.end.value\"\n                        (focusin)=\"onFocusStartInput()\"\n                        (keydown.tab)=\"hideCalendars()\"\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                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</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                        (focusin)=\"onFocusEndInput()\"\n                        (keydown.tab)=\"hideCalendars()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                @if (formGroup.controls.start.invalid) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeData.datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar\"\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>{{ localeData.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: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.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;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.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,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right: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;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left: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;left:0;top:0;bottom:0;width:1px;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-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-left:var(--kbq-size-xxs);margin-right: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-left:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color)}.kbq-pipe-date__popover .kbq-date-period{width:320px}.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 .kbq-form__label{padding-left:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-right: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:136px}.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-top-right-radius:unset;border-bottom-right-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-left:-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-top-left-radius:unset;border-bottom-left-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-left:var(--kbq-size-m);padding-right: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-states-foreground-disabled);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"] }]
-        }], propDecorators: { popover: [{
-                type: ViewChild,
-                args: ['popover']
-            }] } });
+                    ], 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    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    (kbqPopoverVisibleChange)=\"isListMode = true\"\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        <div class=\"kbq-date-list\">\n            <kbq-list-selection #listSelection [autoSelect]=\"false\" [ngModel]=\"data.value?.name\">\n                <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                    {{ localeData.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    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\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                    {{ localeData.datePipe.backToPeriodSelection }}\n                </button>\n            </div>\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</label>\n\n                <kbq-form-field class=\"kbq-date-period__date kbq-form__control\" [class.kbq-focused]=\"showStartCalendar\">\n                    <input\n                        formControlName=\"start\"\n                        [kbqCalendar]=\"startDateCalendar\"\n                        [max]=\"formGroup.controls.end.value\"\n                        (focusin)=\"onFocusStartInput()\"\n                        (keydown.tab)=\"hideCalendars()\"\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                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</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                        (focusin)=\"onFocusEndInput()\"\n                        (keydown.tab)=\"hideCalendars()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                @if (formGroup.controls.start.invalid) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeData.datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar\"\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>{{ localeData.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: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-inline-start:-1px;margin-inline-end:0;height:var(--kbq-size-l);align-self:center}.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 .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__separator{color:var(--kbq-line-contrast-less)}.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)}.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 .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 KbqBasePipe {
-    constructor() {
-        super(...arguments);
-        this.adapter = inject(DateAdapter);
-        this.formatter = inject(DateFormatter);
-        /** @docs-private */
-        this.placements = PopUpPlacements;
-        /** @docs-private */
-        this.styles = KbqButtonStyles;
-        /** @docs-private */
-        this.colors = KbqComponentColors;
-        /** Whether the current state is list of periods. When false will displayed control for set custom period */
-        this.isListMode = true;
-        /** @docs-private */
-        this.showStartCalendar = false;
-        /** @docs-private */
-        this.showEndCalendar = false;
-        /** @docs-private */
-        this.listSelection = viewChild.required('listSelection', { read: KbqListSelection });
-        /** @docs-private */
-        this.returnButton = viewChild.required('returnButton', { read: KbqButton });
-    }
-    /** formatted value for period */
-    get formattedValue() {
-        if (this.start && this.end) {
-            return this.formatter.rangeShortDateTime(this.start, this.end);
-        }
-        return this.data.value?.name ?? '';
-    }
-    /** Whether the current pipe is disabled. */
-    get disabled() {
-        return (!this.adapter.isDateInstance(this.formGroup.controls.start.value) ||
-            !this.adapter.isDateInstance(this.formGroup.controls.end.value) ||
-            this.formGroup.controls.start.invalid);
+class KbqPipeDatetimeComponent extends KbqPipeDateBaseComponent {
+    formatRange(start, end) {
+        return this.formatter.rangeShortDateTime(start, end);
     }
-    /** parsed start */
-    get start() {
-        return this.adapter.parse(this.data.value?.start, '');
-    }
-    /** default object for start */
-    get defaultStart() {
-        if (this.data.value?.start) {
-            return this.adapter.today().plus(this.data.value?.start);
-        }
+    getDefaultStart() {
         return this.adapter.today().startOf('day');
     }
-    /** parsed end */
-    get end() {
-        return this.adapter.parse(this.data.value?.end, '');
-    }
-    /** default object for end */
-    get defaultEnd() {
-        if (this.data.value?.start) {
-            return this.adapter.today();
-        }
+    getDefaultEnd() {
         return this.adapter.today().endOf('day');
     }
-    /** Whether the current pipe is empty. */
-    get isEmpty() {
-        if (this.data.value === null)
-            return true;
-        if (this.data.value?.name)
-            return false;
-        return !this.adapter.isDateInstance(this.start) || !this.adapter.isDateInstance(this.end);
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        this.popover.visibleChange
-            .pipe(filter((visible) => !visible), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.filterBar?.onClosePipe.next(this.data));
-    }
-    /** keydown handler
-     * @docs-private */
-    onKeydown($event) {
-        if (($event.ctrlKey || $event.metaKey) && $event.keyCode === ENTER) {
-            this.onApplyPeriod();
-        }
-        if ($event.keyCode === ENTER) {
-            $event.preventDefault();
-        }
-    }
-    /** @docs-private */
-    onApplyPeriod() {
-        this.data.value = {
-            start: this.formGroup.controls.start.value.toISO(),
-            end: this.formGroup.controls.end.value.toISO()
-        };
-        this.stateChanges.next();
-        this.filterBar?.onChangePipe.next(this.data);
-        this.popover.hide();
-    }
-    onSelect(item) {
-        this.data.value = item;
-        this.stateChanges.next();
-        this.filterBar?.onChangePipe.next(this.data);
-        this.popover.hide();
-    }
-    showPeriod() {
-        this.isListMode = false;
-        this.showStartCalendar = false;
-        this.showEndCalendar = false;
-        this.initFormGroup();
-        setTimeout(() => {
-            this.popover.updatePosition(true);
-            this.returnButton().focus();
-        });
-    }
-    showList() {
-        this.isListMode = true;
-        setTimeout(() => this.listSelection().focus());
-        this.popover.updatePosition(true);
-    }
-    /** opens popover */
-    open() {
-        this.popover.show();
-    }
-    onSelectStartDate(value) {
-        this.formGroup.controls.start.setValue(value);
-    }
-    onSelectEndDate(value) {
-        this.formGroup.controls.end.setValue(value);
-    }
-    onFocusStartInput() {
-        this.showStartCalendar = true;
-        this.showEndCalendar = false;
-        this.popover.updatePosition(true);
-    }
-    onFocusEndInput() {
-        this.showEndCalendar = true;
-        this.showStartCalendar = false;
-    }
-    hideCalendars() {
-        this.showStartCalendar = false;
-        this.showEndCalendar = false;
-    }
-    initFormGroup() {
-        this.formGroup = new FormGroup({
-            start: new FormControl(this.start || this.defaultStart),
-            end: new FormControl(this.end || this.defaultEnd)
-        });
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeDatetimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqPipeDatetimeComponent, isStandalone: true, selector: "kbq-pipe-datetime", providers: [
-            kbqDisableLegacyValidationDirectiveProvider(),
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeDatetimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqPipeDatetimeComponent, isStandalone: true, selector: "kbq-pipe-datetime", providers: [
             {
                 provide: KbqBasePipe,
                 useExisting: this
             }
-        ], viewQueries: [{ propertyName: "listSelection", first: true, predicate: ["listSelection"], descendants: true, read: KbqListSelection, isSignal: true }, { propertyName: "returnButton", first: true, predicate: ["returnButton"], descendants: true, read: KbqButton, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverOffset]=\"4\"\n    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    (kbqPopoverVisibleChange)=\"isListMode = true\"\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        <div class=\"kbq-date-list\">\n            <kbq-list-selection #listSelection [autoSelect]=\"false\" [ngModel]=\"data.value?.name\">\n                <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                    {{ localeData.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    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\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                    {{ localeData.datePipe.backToPeriodSelection }}\n                </button>\n            </div>\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</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                            formControlName=\"start\"\n                            [kbqCalendar]=\"startDateCalendar\"\n                            [max]=\"formGroup.controls.end.value\"\n                            (focusin)=\"onFocusStartInput()\"\n                            (keydown.tab)=\"hideCalendars()\"\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 formControlName=\"start\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n                    </kbq-form-field>\n                </div>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</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                            (focusin)=\"onFocusEndInput()\"\n                            (keydown.tab)=\"hideCalendars()\"\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 formControlName=\"end\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n                    </kbq-form-field>\n                </div>\n\n                @if (formGroup.controls.start.invalid) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeData.datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar\"\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>{{ localeData.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: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.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;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.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,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right: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;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left: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;left:0;top:0;bottom:0;width:1px;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-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-left:var(--kbq-size-xxs);margin-right: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-left:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color)}.kbq-pipe-date__popover .kbq-date-period{width:320px}.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 .kbq-form__label{padding-left:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-right: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:136px}.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-top-right-radius:unset;border-bottom-right-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-left:-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-top-left-radius:unset;border-bottom-left-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-left:var(--kbq-size-m);padding-right: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-states-foreground-disabled);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],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: KbqFormFieldModule }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i2.KbqSuffix, selector: "[kbqSuffix]" }, { kind: "component", type: i2.KbqHint, selector: "kbq-hint", inputs: ["id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "directive", type: i2.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.MaxValidator, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: ["max"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["hideIfNotInViewPort", "kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], 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", "horizontal", "tabIndex", "disabled", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i7.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "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.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: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { 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    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    (kbqPopoverVisibleChange)=\"isListMode = true\"\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        <div class=\"kbq-date-list\">\n            <kbq-list-selection #listSelection [autoSelect]=\"false\" [ngModel]=\"data.value?.name\">\n                <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                    {{ localeData.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    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\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                    {{ localeData.datePipe.backToPeriodSelection }}\n                </button>\n            </div>\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</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                            formControlName=\"start\"\n                            [kbqCalendar]=\"startDateCalendar\"\n                            [max]=\"formGroup.controls.end.value\"\n                            (focusin)=\"onFocusStartInput()\"\n                            (keydown.tab)=\"hideCalendars()\"\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 formControlName=\"start\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n                    </kbq-form-field>\n                </div>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</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                            (focusin)=\"onFocusEndInput()\"\n                            (keydown.tab)=\"hideCalendars()\"\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 formControlName=\"end\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n                    </kbq-form-field>\n                </div>\n\n                @if (formGroup.controls.start.invalid) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeData.datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar\"\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>{{ localeData.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: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-inline-start:-1px;margin-inline-end:0;height:var(--kbq-size-l);align-self:center}.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 .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__separator{color:var(--kbq-line-contrast-less)}.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)}.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 .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],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.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.MaxValidator, 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]" }, { 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: ["hideIfNotInViewPort", "kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], 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", "selectAllToggle", "horizontal", "tabIndex", "disabled", "compareWith", "selectAllHandler"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i7.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "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.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$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], 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: "19.2.21", ngImport: i0, type: KbqPipeDatetimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeDatetimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-datetime', imports: [
                         ReactiveFormsModule,
-                        KbqFormFieldModule,
                         KbqIconModule,
                         KbqInputModule,
                         KbqDividerModule,
@@ -732,60 +591,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqFormattersModule,
                         KbqPipeButton,
                         KbqTitleModule,
-                        KbqPipeTitleDirective,
                         FormsModule
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        kbqDisableLegacyValidationDirectiveProvider(),
+                    ], providers: [
                         {
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverOffset]=\"4\"\n    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    (kbqPopoverVisibleChange)=\"isListMode = true\"\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        <div class=\"kbq-date-list\">\n            <kbq-list-selection #listSelection [autoSelect]=\"false\" [ngModel]=\"data.value?.name\">\n                <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                    {{ localeData.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    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\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                    {{ localeData.datePipe.backToPeriodSelection }}\n                </button>\n            </div>\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</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                            formControlName=\"start\"\n                            [kbqCalendar]=\"startDateCalendar\"\n                            [max]=\"formGroup.controls.end.value\"\n                            (focusin)=\"onFocusStartInput()\"\n                            (keydown.tab)=\"hideCalendars()\"\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 formControlName=\"start\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n                    </kbq-form-field>\n                </div>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</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                            (focusin)=\"onFocusEndInput()\"\n                            (keydown.tab)=\"hideCalendars()\"\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 formControlName=\"end\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n                    </kbq-form-field>\n                </div>\n\n                @if (formGroup.controls.start.invalid) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeData.datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar\"\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>{{ localeData.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: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.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;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.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,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right: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;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left: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;left:0;top:0;bottom:0;width:1px;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-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-left:var(--kbq-size-xxs);margin-right: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-left:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color)}.kbq-pipe-date__popover .kbq-date-period{width:320px}.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 .kbq-form__label{padding-left:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-right: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:136px}.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-top-right-radius:unset;border-bottom-right-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-left:-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-top-left-radius:unset;border-bottom-left-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-left:var(--kbq-size-m);padding-right: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-states-foreground-disabled);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"] }]
-        }], propDecorators: { popover: [{
-                type: ViewChild,
-                args: ['popover']
-            }] } });
+                    ], 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    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    (kbqPopoverVisibleChange)=\"isListMode = true\"\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        <div class=\"kbq-date-list\">\n            <kbq-list-selection #listSelection [autoSelect]=\"false\" [ngModel]=\"data.value?.name\">\n                <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                    {{ localeData.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    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\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                    {{ localeData.datePipe.backToPeriodSelection }}\n                </button>\n            </div>\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</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                            formControlName=\"start\"\n                            [kbqCalendar]=\"startDateCalendar\"\n                            [max]=\"formGroup.controls.end.value\"\n                            (focusin)=\"onFocusStartInput()\"\n                            (keydown.tab)=\"hideCalendars()\"\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 formControlName=\"start\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n                    </kbq-form-field>\n                </div>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</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                            (focusin)=\"onFocusEndInput()\"\n                            (keydown.tab)=\"hideCalendars()\"\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 formControlName=\"end\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n                    </kbq-form-field>\n                </div>\n\n                @if (formGroup.controls.start.invalid) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeData.datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar\"\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>{{ localeData.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: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-inline-start:-1px;margin-inline-end:0;height:var(--kbq-size-l);align-self:center}.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 .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__separator{color:var(--kbq-line-contrast-less)}.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)}.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 .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"] }]
+        }] });
+
+/**
+ * Shared "select all = select nothing" state for the multi-select pipes (`kbq-pipe-multi-select`,
+ * `kbq-pipe-multi-tree-select`). Extracted as a plain composition helper — not a base class — because the
+ * two pipes have different bases (`KbqBasePipe` vs `KbqTreeSelectPipeBase`) and cannot share a single
+ * `@Directive()` base (the diamond), while a mixin would risk breaking AOT view-query inheritance.
+ */
+class KbqMultiSelectPipeState {
+    constructor(host) {
+        this.host = host;
+        /** Snapshot of the committed selection, preserved across the "all selected → []" collapse. */
+        this.internalSelected = null;
+    }
+    /** Whether selecting every option is treated as selecting nothing. */
+    get selectedAllEqualsSelectedNothing() {
+        return (this.host.data.selectedAllEqualsSelectedNothing ??
+            this.host.filterBar?.selectedAllEqualsSelectedNothing() ??
+            true);
+    }
+    /** Value to display: the preserved snapshot under "all = nothing", otherwise the raw value. */
+    get selected() {
+        return this.selectedAllEqualsSelectedNothing ? this.internalSelected : this.host.data.value;
+    }
+    /** Refreshes the snapshot from the current value (only under "all = nothing"). */
+    updateInternalSelected() {
+        if (this.selectedAllEqualsSelectedNothing) {
+            this.internalSelected = this.host.data.value?.slice() || [];
+        }
+    }
+    /** Emits the change, collapsing the value to `[]` when everything is selected under "all = nothing". */
+    emitChangePipeEvent() {
+        if (this.selectedAllEqualsSelectedNothing && this.host.allOptionsSelected()) {
+            this.host.filterBar?.onChangePipe.emit({ ...this.host.data, value: [] });
+        }
+        else {
+            this.host.filterBar?.onChangePipe.emit(this.host.data);
+        }
+    }
+    /** Whether the pipe reads as empty, given the base pipe's own emptiness. */
+    isEmpty(baseIsEmpty) {
+        return (baseIsEmpty ||
+            (Array.isArray(this.host.data.value) && !this.host.data.value.length) ||
+            (this.selectedAllEqualsSelectedNothing && this.host.allOptionsSelected()));
+    }
+}
 
 class KbqPipeMultiSelectComponent extends KbqBasePipe {
     constructor() {
         super(...arguments);
         /** control for search options */
-        this.searchControl = new UntypedFormControl();
+        this.searchControl = new FormControl(null);
+        /** @docs-private */
+        this.select = viewChild.required(KbqSelect);
+        /** @docs-private */
+        this.options = viewChildren(KbqOption, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.selectionAllInProgress = false;
-        /** Comparator of selected options */
-        this.compareByValue = (o1, o2) => o1?.id === o2?.id;
+        this.multiSelect = new KbqMultiSelectPipeState({
+            data: this.data,
+            filterBar: this.filterBar,
+            allOptionsSelected: () => this.allOptionsSelected
+        });
+        /** Comparator of selected options. Two null/absent values never match (aligned with the select pipe). */
+        this.compareByValue = (o1, o2) => !!o1 && !!o2 && o1.id === o2.id;
         /** handler for select all options in select */
         this.selectAllHandler = (event) => {
             event.preventDefault();
             this.toggleSelectionAll();
         };
         this.getFilteredOptions = () => {
-            return this.searchControl.value
-                ? this.values.filter((item) => item.name.toLowerCase().includes(this.searchControl.value.toLowerCase()))
+            const search = this.searchControl.value;
+            return search
+                ? this.values.filter((item) => item.name.toLowerCase().includes(search.toLowerCase()))
                 : this.values;
         };
     }
     /** selected value */
     get selected() {
-        if (this.selectedAllEqualsSelectedNothing) {
-            return this.internalSelected;
-        }
-        return this.data.value;
+        return this.multiSelect.selected;
     }
     /** Whether the current pipe is empty. */
     get isEmpty() {
-        return (super.isEmpty ||
-            (Array.isArray(this.data.value) && !this.data.value.length) ||
-            (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected));
+        return this.multiSelect.isEmpty(super.isEmpty);
     }
     /** state for checkbox 'select all'. */
     get checkboxState() {
-        if (!this.options)
+        if (!this.options())
+            return 'unchecked';
+        const select = this.select();
+        if (!select?.selectionModel)
             return 'unchecked';
-        if (this.select.selectionModel.selected.length === this.values.length) {
+        if (select.selectionModel.selected.length === this.values.length) {
             return 'checked';
         }
-        else if (!this.select.selectionModel.selected.length) {
+        else if (!select.selectionModel.selected.length) {
             return 'unchecked';
         }
         return 'indeterminate';
@@ -796,24 +703,27 @@ class KbqPipeMultiSelectComponent extends KbqBasePipe {
     }
     /** true if all options selected */
     get allOptionsSelected() {
-        return this.select?.triggerValues.length === this.values?.length;
+        const select = this.select();
+        if (!select?.selectionModel)
+            return false;
+        return select.triggerValues.length === this.values?.length;
     }
     get selectedAllEqualsSelectedNothing() {
-        return this.data.selectedAllEqualsSelectedNothing ?? this.filterBar.selectedAllEqualsSelectedNothing;
+        return this.multiSelect.selectedAllEqualsSelectedNothing;
     }
     get visibleOptions() {
-        return this.options?.filter((option) => option.selectable);
+        return this.options()?.filter((option) => option.selectable());
     }
     /** @docs-private */
     ngOnInit() {
-        this.updateInternalSelected();
+        this.multiSelect.updateInternalSelected();
         this.filteredOptions = merge(this.filterBar.internalTemplatesChanges, this.searchControl.valueChanges).pipe(map(this.getFilteredOptions), takeUntilDestroyed(this.destroyRef));
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
-        this.select.closedStream
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.filterBar?.onClosePipe.next(this.data));
+        this.select()
+            .closedStream.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.filterBar?.onClosePipe.emit(this.data));
     }
     /** @docs-private */
     onSelect(item) {
@@ -825,20 +735,20 @@ class KbqPipeMultiSelectComponent extends KbqBasePipe {
         else {
             this.data.value = item;
         }
-        this.emitChangePipeEvent();
+        this.multiSelect.emitChangePipeEvent();
         this.stateChanges.next();
     }
     /** @docs-private */
     onClear() {
         this.data.value = [];
-        this.updateInternalSelected();
+        this.multiSelect.updateInternalSelected();
         this.filterBar?.onClearPipe.emit(this.data);
         this.filterBar?.onChangePipe.emit(this.data);
         this.stateChanges.next();
     }
     /** @docs-private */
     toggleSelectionAllByEnterKey() {
-        if (this.data.selectAll && this.select.keyManager.activeItemIndex === 0) {
+        if (this.data.selectAll && this.select().keyManager.activeItemIndex === 0) {
             this.toggleSelectionAll();
         }
     }
@@ -856,131 +766,182 @@ class KbqPipeMultiSelectComponent extends KbqBasePipe {
             this.data.value = [];
         }
         else {
-            this.data.value = [...this.select.value];
+            this.data.value = [...this.select().value];
         }
         if (emitEvent) {
-            this.emitChangePipeEvent();
+            this.multiSelect.emitChangePipeEvent();
         }
         this.stateChanges.next();
     }
     /** @docs-private */
     onClose() {
         if (this.allOptionsSelected) {
-            this.updateInternalSelected();
+            this.multiSelect.updateInternalSelected();
         }
+        setTimeout(() => this.restoreTriggerFocus());
     }
     /** opens select */
     open() {
-        this.select.open();
+        this.select().open();
     }
-    updateInternalSelected() {
-        if (this.selectedAllEqualsSelectedNothing) {
-            this.internalSelected = this.data.value?.slice() || [];
-        }
-    }
-    emitChangePipeEvent() {
-        if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
-            this.filterBar?.onChangePipe.emit({ ...this.data, value: [] });
-        }
-        else {
-            this.filterBar?.onChangePipe.emit(this.data);
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqPipeMultiSelectComponent, isStandalone: true, selector: "kbq-pipe-multi-select", providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqPipeMultiSelectComponent, isStandalone: true, selector: "kbq-pipe-multi-select", providers: [
             {
                 provide: KbqBasePipe,
                 useExisting: this
             }
-        ], viewQueries: [{ propertyName: "select", first: true, predicate: KbqSelect, descendants: true }, { propertyName: "options", predicate: KbqOption, descendants: true }], usesInheritance: true, ngImport: i0, template: "<kbq-select\n    #select=\"kbqSelect\"\n    multiple\n    [compareWith]=\"compareByValue\"\n    [disabled]=\"data.disabled\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n    [panelClass]=\"'kbq-pipe-multiselect__panel'\"\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        [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n        @if (select.triggerValues.length === 1) {\n            <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n                {{ select.triggerValue }}\n            </span>\n        } @else if (\n            select.triggerValues.length > 1 &&\n            (!selectedAllEqualsSelectedNothing || (selectedAllEqualsSelectedNothing && !allOptionsSelected))\n        ) {\n            <kbq-badge [badgeColor]=\"'contrast'\" [compact]=\"true\">\n                {{ select.triggerValues.length }}\n            </kbq-badge>\n        }\n    </button>\n    @if (data.search) {\n        <kbq-form-field kbqFormFieldWithoutBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [formControl]=\"searchControl\"\n                (keydown.enter)=\"toggleSelectionAllByEnterKey()\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @if (data.selectAll && !select.isEmptySearchResult) {\n        <kbq-option\n            [class.kbq-selected]=\"allVisibleOptionsSelected\"\n            [selectable]=\"false\"\n            (click)=\"toggleSelectionAll()\"\n            (keydown.enter)=\"toggleSelectionAll()\"\n        >\n            <kbq-pseudo-checkbox [state]=\"checkboxState\" />\n            {{ localeData.pipe.selectAll }}\n        </kbq-option>\n    }\n\n    @for (item of filteredOptions | async; track item) {\n        <kbq-option [value]=\"item\">\n            @if (isTemplateRef(valueTemplate)) {\n                <ng-container\n                    [ngTemplateOutlet]=\"$any(valueTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n                />\n            } @else {\n                {{ item.name }}\n            }\n        </kbq-option>\n    }\n</kbq-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.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;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.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,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right: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;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left: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;left:0;top:0;bottom:0;width:1px;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-left:var(--kbq-size-xxs)}.kbq-pipe__multiselect .kbq-badge{align-self:center;margin-left:var(--kbq-size-xs)}.kbq-pipe-multiselect__panel .kbq-select__content{max-height:404px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3$1.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$1.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i6.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i6.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i6.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i6.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "component", type: i2.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i2.KbqFormFieldWithoutBorders, selector: "kbq-form-field[kbqFormFieldWithoutBorders]", exportAs: ["kbqFormFieldWithoutBorders"] }, { kind: "directive", type: i2.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "directive", type: i2.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.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: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: i6.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]=\"compareByValue\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [panelClass]=\"'kbq-pipe-multiselect__panel'\"\n    [selectAllHandler]=\"selectAllHandler\"\n    [tabIndex]=\"-1\"\n    [value]=\"selected\"\n    (closed)=\"onClose()\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n        @if (select.triggerValues.length === 1) {\n            <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n                {{ select.triggerValue }}\n            </span>\n        } @else if (\n            select.triggerValues.length > 1 &&\n            (!selectedAllEqualsSelectedNothing || (selectedAllEqualsSelectedNothing && !allOptionsSelected))\n        ) {\n            <kbq-badge [badgeColor]=\"'contrast'\" [compact]=\"true\">\n                {{ select.triggerValues.length }}\n            </kbq-badge>\n        }\n    </button>\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n                (keydown.enter)=\"toggleSelectionAllByEnterKey()\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @if (data.selectAll && !select.isEmptySearchResult) {\n        <kbq-option\n            [class.kbq-selected]=\"allVisibleOptionsSelected\"\n            [selectable]=\"false\"\n            (click)=\"toggleSelectionAll()\"\n            (keydown.enter)=\"toggleSelectionAll()\"\n        >\n            <kbq-pseudo-checkbox [state]=\"checkboxState\" />\n            {{ localeData.pipe.selectAll }}\n        </kbq-option>\n    }\n\n    @for (item of filteredOptions | async; track item) {\n        <kbq-option [value]=\"item\">\n            @if (isTemplateRef(valueTemplate)) {\n                <ng-container\n                    [ngTemplateOutlet]=\"$any(valueTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n                />\n            } @else {\n                {{ item.name }}\n            }\n        </kbq-option>\n    }\n</kbq-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-inline-start:-1px;margin-inline-end:0;height:var(--kbq-size-l);align-self:center}.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 .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__separator{color:var(--kbq-line-contrast-less)}.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)}.kbq-pipe-multiselect__panel .kbq-select__content{max-height:404px}\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.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "selectAllToggle", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i9$1.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i9$1.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9$1.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "component", type: i5.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "component", type: i6.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i6.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: i9$1.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeMultiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeMultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-multi-select', imports: [
                         FormsModule,
                         KbqButtonModule,
                         KbqDividerModule,
                         KbqSelectModule,
-                        NgClass,
                         KbqPipeState,
                         KbqBadgeModule,
                         KbqPipeButton,
                         KbqTitleModule,
-                        KbqPipeTitleDirective,
                         NgTemplateOutlet,
-                        KbqFormFieldModule,
                         KbqIconModule,
                         KbqInputModule,
                         ReactiveFormsModule,
                         AsyncPipe,
                         KbqPseudoCheckboxModule
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                    ], providers: [
                         {
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], template: "<kbq-select\n    #select=\"kbqSelect\"\n    multiple\n    [compareWith]=\"compareByValue\"\n    [disabled]=\"data.disabled\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n    [panelClass]=\"'kbq-pipe-multiselect__panel'\"\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        [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n        @if (select.triggerValues.length === 1) {\n            <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n                {{ select.triggerValue }}\n            </span>\n        } @else if (\n            select.triggerValues.length > 1 &&\n            (!selectedAllEqualsSelectedNothing || (selectedAllEqualsSelectedNothing && !allOptionsSelected))\n        ) {\n            <kbq-badge [badgeColor]=\"'contrast'\" [compact]=\"true\">\n                {{ select.triggerValues.length }}\n            </kbq-badge>\n        }\n    </button>\n    @if (data.search) {\n        <kbq-form-field kbqFormFieldWithoutBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [formControl]=\"searchControl\"\n                (keydown.enter)=\"toggleSelectionAllByEnterKey()\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @if (data.selectAll && !select.isEmptySearchResult) {\n        <kbq-option\n            [class.kbq-selected]=\"allVisibleOptionsSelected\"\n            [selectable]=\"false\"\n            (click)=\"toggleSelectionAll()\"\n            (keydown.enter)=\"toggleSelectionAll()\"\n        >\n            <kbq-pseudo-checkbox [state]=\"checkboxState\" />\n            {{ localeData.pipe.selectAll }}\n        </kbq-option>\n    }\n\n    @for (item of filteredOptions | async; track item) {\n        <kbq-option [value]=\"item\">\n            @if (isTemplateRef(valueTemplate)) {\n                <ng-container\n                    [ngTemplateOutlet]=\"$any(valueTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n                />\n            } @else {\n                {{ item.name }}\n            }\n        </kbq-option>\n    }\n</kbq-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.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;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.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,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right: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;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left: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;left:0;top:0;bottom:0;width:1px;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-left:var(--kbq-size-xxs)}.kbq-pipe__multiselect .kbq-badge{align-self:center;margin-left:var(--kbq-size-xs)}.kbq-pipe-multiselect__panel .kbq-select__content{max-height:404px}\n"] }]
-        }], propDecorators: { select: [{
-                type: ViewChild,
-                args: [KbqSelect]
-            }], options: [{
-                type: ViewChildren,
-                args: [KbqOption]
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<kbq-select\n    #select=\"kbqSelect\"\n    multiple\n    [compareWith]=\"compareByValue\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [panelClass]=\"'kbq-pipe-multiselect__panel'\"\n    [selectAllHandler]=\"selectAllHandler\"\n    [tabIndex]=\"-1\"\n    [value]=\"selected\"\n    (closed)=\"onClose()\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [class]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n        @if (select.triggerValues.length === 1) {\n            <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!select.triggerValue\">\n                {{ select.triggerValue }}\n            </span>\n        } @else if (\n            select.triggerValues.length > 1 &&\n            (!selectedAllEqualsSelectedNothing || (selectedAllEqualsSelectedNothing && !allOptionsSelected))\n        ) {\n            <kbq-badge [badgeColor]=\"'contrast'\" [compact]=\"true\">\n                {{ select.triggerValues.length }}\n            </kbq-badge>\n        }\n    </button>\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n                (keydown.enter)=\"toggleSelectionAllByEnterKey()\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @if (data.selectAll && !select.isEmptySearchResult) {\n        <kbq-option\n            [class.kbq-selected]=\"allVisibleOptionsSelected\"\n            [selectable]=\"false\"\n            (click)=\"toggleSelectionAll()\"\n            (keydown.enter)=\"toggleSelectionAll()\"\n        >\n            <kbq-pseudo-checkbox [state]=\"checkboxState\" />\n            {{ localeData.pipe.selectAll }}\n        </kbq-option>\n    }\n\n    @for (item of filteredOptions | async; track item) {\n        <kbq-option [value]=\"item\">\n            @if (isTemplateRef(valueTemplate)) {\n                <ng-container\n                    [ngTemplateOutlet]=\"$any(valueTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n                />\n            } @else {\n                {{ item.name }}\n            }\n        </kbq-option>\n    }\n</kbq-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-inline-start:-1px;margin-inline-end:0;height:var(--kbq-size-l);align-self:center}.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 .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__separator{color:var(--kbq-line-contrast-less)}.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)}.kbq-pipe-multiselect__panel .kbq-select__content{max-height:404px}\n"] }]
+        }], propDecorators: { select: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqSelect), { isSignal: true }] }], options: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KbqOption), { isSignal: true }] }] } });
 
-class KbqPipeMultiTreeSelectComponent extends KbqBasePipe {
-    /** selected value */
-    get selected() {
-        if (this.selectedAllEqualsSelectedNothing) {
-            return this.internalSelected;
-        }
-        return this.data.value;
+/**
+ * Shared scaffolding for the tree-based select pipes (`kbq-pipe-tree-select`,
+ * `kbq-pipe-multi-tree-select`): the flat-tree control / flattener / data source, the node accessors,
+ * search-driven filtering and open handling. Subclasses provide the value-specific pieces (`selected`,
+ * `isEmpty`, `onSelect`, `updateTemplates`).
+ *
+ * The `internalTemplatesChanges` subscription is intentionally left in each subclass constructor: it must
+ * be set up after the subclass's `updateTemplates` field initializer runs, so the initial `BehaviorSubject`
+ * replay dispatches to the subclass override (which writes `dataSource.data`) rather than the base one.
+ */
+class KbqTreeSelectPipeBase extends KbqBasePipe {
+    constructor() {
+        super();
+        /** control for search options */
+        this.searchControl = new FormControl(null);
+        /** @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.parent = parent ?? undefined;
+            flatNode.level = level;
+            flatNode.expandable = !!node.children;
+            return flatNode;
+        };
+        this.getLevel = (node) => node.level;
+        this.isExpandable = (node) => node.expandable;
+        this.getChildren = (node) => node.children;
+        this.getValue = (node) => node.value;
+        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);
+        this.dataSource = new KbqTreeFlatDataSource(this.treeControl, this.treeFlattener);
+    }
+    ngOnInit() {
+        this.searchControl.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => this.treeControl.filterNodes(value));
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.select()
+            .closedStream.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.filterBar?.onClosePipe.emit(this.data));
+    }
+    /** tree-node predicate: whether the node has children */
+    hasChild(_, nodeData) {
+        return nodeData.expandable;
+    }
+    /** opens the tree-select panel */
+    open() {
+        setTimeout(() => {
+            if (this.destroyed)
+                return;
+            this.select().open();
+        });
+    }
+    /** @docs-private */
+    onOpen() {
+        this.treeControl.expandAll();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTreeSelectPipeBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.25", type: KbqTreeSelectPipeBase, isStandalone: true, viewQueries: [{ propertyName: "select", first: true, predicate: KbqTreeSelect, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTreeSelectPipeBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { select: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqTreeSelect), { isSignal: true }] }] } });
+
+class KbqPipeMultiTreeSelectComponent extends KbqTreeSelectPipeBase {
+    /** selected value */
+    get selected() {
+        return this.multiSelect.selected;
     }
     /** Whether the current pipe is empty. */
     get isEmpty() {
-        return (super.isEmpty ||
-            (Array.isArray(this.data.value) && !this.data.value.length) ||
-            (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected));
+        return this.multiSelect.isEmpty(super.isEmpty);
     }
     get selectAllCheckboxState() {
-        if (!this.select)
+        const select = this.select();
+        if (!select)
             return 'unchecked';
         if (this.allOptionsSelected) {
             return 'checked';
         }
-        else if (this.select.selected.length > 0) {
+        else if (select.selected?.length > 0) {
             return 'indeterminate';
         }
         return 'unchecked';
     }
     get numberOfSelectedLeaves() {
-        return this.select.selected.filter(({ value }) => value !== kbqTreeSelectAllValue).length;
+        return this.select().selected.filter(({ value }) => value !== kbqTreeSelectAllValue).length;
     }
     /** true if all options selected */
     get allOptionsSelected() {
         const dataNodesLength = this.treeControl?.dataNodes?.length;
         const dataNodesForSelect = this.data.selectAll ? dataNodesLength - 1 : dataNodesLength;
-        return this.select?.triggerValues?.length === dataNodesForSelect;
+        return this.select()?.triggerValues?.length === dataNodesForSelect;
     }
     get selectedAllEqualsSelectedNothing() {
-        return this.data.selectedAllEqualsSelectedNothing ?? this.filterBar.selectedAllEqualsSelectedNothing;
+        return this.multiSelect.selectedAllEqualsSelectedNothing;
     }
     /** true if all visible options selected */
     get allVisibleOptionsSelected() {
-        return this.tree.renderedOptions
-            .filter((option) => option.value !== kbqTreeSelectAllValue)
+        return this.tree()
+            .renderedOptions.filter((option) => option.value !== kbqTreeSelectAllValue)
             .every((option) => option.selected);
     }
     constructor() {
         super();
-        /** control for search options */
-        this.searchControl = new UntypedFormControl();
-        /** updates values for selection and value template */
+        /** @docs-private */
+        this.tree = viewChild.required(KbqTreeSelection);
+        this.multiSelect = new KbqMultiSelectPipeState({
+            data: this.data,
+            filterBar: this.filterBar,
+            allOptionsSelected: () => this.allOptionsSelected
+        });
+        /**
+         * Populates the tree data source from the pipe template. The shared `values`/`valueTemplate`
+         * assignment is already performed by the base subscription, so this override only does the
+         * tree-specific work and avoids a redundant double assignment.
+         */
         this.updateTemplates = (templates) => {
-            const template = templates?.find((template) => getId(template) === getId(this.data));
+            const template = templates?.find((item) => getId(item) === getId(this.data));
             if (template?.values) {
-                this.values = template.values;
-                this.valueTemplate = template.valueTemplate;
                 const values = [...template.values];
                 if (this.data.selectAll) {
                     values.unshift({
@@ -997,47 +958,13 @@ class KbqPipeMultiTreeSelectComponent extends KbqBasePipe {
             event.preventDefault();
             this.toggleSelectAllNode();
         };
-        this.transformer = (node, level, parent) => {
-            const flatNode = new KbqTreeSelectFlatNode();
-            flatNode.name = node.name;
-            flatNode.value = node.value;
-            flatNode.parent = parent;
-            flatNode.level = level;
-            flatNode.expandable = !!node.children;
-            return flatNode;
-        };
-        this.getLevel = (node) => {
-            return node.level;
-        };
-        this.isExpandable = (node) => {
-            return node.expandable;
-        };
-        this.getChildren = (node) => {
-            return node.children;
-        };
-        this.getValue = (node) => {
-            return node.value;
-        };
-        this.getViewValue = (node) => {
-            return `${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);
-        this.dataSource = new KbqTreeFlatDataSource(this.treeControl, this.treeFlattener);
+        // See the field-init note in `KbqTreeSelectPipeBase`: subscribing here (after this class's
+        // `updateTemplates` initializer) ensures the initial replay writes `dataSource.data`.
         this.filterBar?.internalTemplatesChanges.pipe(takeUntilDestroyed()).subscribe(this.updateTemplates);
     }
     ngOnInit() {
-        this.updateInternalSelected();
-        this.searchControl.valueChanges.subscribe((value) => this.treeControl.filterNodes(value));
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        this.select.closedStream
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.filterBar?.onClosePipe.next(this.data));
-    }
-    isNodeHasChild(_, nodeData) {
-        return nodeData.expandable;
+        super.ngOnInit();
+        this.multiSelect.updateInternalSelected();
     }
     isNodeSelectAll(_, nodeData) {
         return nodeData.value === kbqTreeSelectAllValue;
@@ -1045,29 +972,32 @@ class KbqPipeMultiTreeSelectComponent extends KbqBasePipe {
     onSelect({ value: option }) {
         if (!option)
             return;
-        if (this.tree.treeControl.isExpandable(option.data)) {
-            this.tree.setStateChildren(option, !option.selected);
+        const tree = this.tree();
+        if (tree.treeControl.isExpandable(option.data)) {
+            tree.setStateChildren(option, !option.selected);
         }
         this.toggleParents(option.data.parent);
         setTimeout(() => {
+            if (this.destroyed)
+                return;
             if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
                 this.data.value = [];
             }
             else {
-                this.data.value = this.select.selectedValues;
+                this.data.value = this.select().selectedValues;
             }
-            this.emitChangePipeEvent();
+            this.multiSelect.emitChangePipeEvent();
             this.stateChanges.next();
         });
     }
     searchKeydownHandler() {
-        if (this.data.selectAll && this.tree.keyManager.activeItemIndex === 0) {
+        if (this.data.selectAll && this.tree().keyManager.activeItemIndex === 0) {
             this.toggleSelectAllNode();
         }
     }
     toggleSelectAllNode(emitEvent = true) {
-        if (this.select.search?.ngControl.value) {
-            const renderedOptions = this.tree.renderedOptions.filter(({ value }) => value !== kbqTreeSelectAllValue);
+        if (this.select().search()?.ngControl.value) {
+            const renderedOptions = this.tree().renderedOptions.filter(({ value }) => value !== kbqTreeSelectAllValue);
             if (this.allVisibleOptionsSelected) {
                 renderedOptions.forEach((option) => option.setSelected(false));
             }
@@ -1077,127 +1007,100 @@ class KbqPipeMultiTreeSelectComponent extends KbqBasePipe {
         }
         else {
             if (this.allOptionsSelected) {
-                this.tree.selectionModel.clear();
+                this.tree().selectionModel.clear();
             }
             else {
                 const [, ...dataNodesForSelect] = this.treeControl.dataNodes;
                 // @todo DS-3827
-                this.tree.selectionModel.select(...dataNodesForSelect);
+                this.tree().selectionModel.select(...dataNodesForSelect);
             }
         }
         setTimeout(() => {
+            if (this.destroyed)
+                return;
             if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
                 this.data.value = [];
             }
             else {
-                this.data.value = [...this.select.selectedValues];
+                this.data.value = [...this.select().selectedValues];
             }
             if (emitEvent) {
-                this.emitChangePipeEvent();
+                this.multiSelect.emitChangePipeEvent();
             }
             this.stateChanges.next();
         });
     }
-    /** opens select */
-    open() {
-        setTimeout(() => this.select.open());
-    }
     onClear() {
         super.onClear();
-        this.updateInternalSelected();
-    }
-    /** @docs-private */
-    onOpen() {
-        this.treeControl.expandAll();
+        this.multiSelect.updateInternalSelected();
     }
     /** @docs-private */
     onClose() {
         if (this.allOptionsSelected) {
-            this.updateInternalSelected();
-        }
-    }
-    updateInternalSelected() {
-        if (this.selectedAllEqualsSelectedNothing) {
-            this.internalSelected = this.data.value?.slice() || [];
-        }
-    }
-    emitChangePipeEvent() {
-        if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
-            this.filterBar?.onChangePipe.emit({ ...this.data, value: [] });
-        }
-        else {
-            this.filterBar?.onChangePipe.emit(this.data);
+            this.multiSelect.updateInternalSelected();
         }
+        setTimeout(() => this.restoreTriggerFocus());
     }
     toggleParents(parent) {
         if (!parent) {
             return;
         }
         const descendants = this.treeControl.getDescendants(parent);
-        const isParentSelected = this.select.selectionModel.selected.includes(parent);
-        if (!isParentSelected && descendants.every((d) => this.select.selectionModel.selected.includes(d))) {
-            this.select.selectionModel.select(parent);
+        const isParentSelected = this.select().selectionModel.selected.includes(parent);
+        if (!isParentSelected &&
+            descendants.every((d) => this.select().selectionModel.selected.includes(d))) {
+            this.select().selectionModel.select(parent);
             this.toggleParents(parent.parent);
         }
         else if (isParentSelected) {
-            this.select.selectionModel.deselect(parent);
+            this.select().selectionModel.deselect(parent);
             this.toggleParents(parent.parent);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeMultiTreeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqPipeMultiTreeSelectComponent, isStandalone: true, selector: "kbq-pipe-multi-tree-select", providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeMultiTreeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqPipeMultiTreeSelectComponent, isStandalone: true, selector: "kbq-pipe-multi-tree-select", providers: [
             {
                 provide: KbqBasePipe,
                 useExisting: this
             }
-        ], viewQueries: [{ propertyName: "select", first: true, predicate: KbqTreeSelect, descendants: true }, { propertyName: "tree", first: true, predicate: KbqTreeSelection, descendants: true }], usesInheritance: true, ngImport: i0, template: "<kbq-tree-select\n    #select\n    [autoSelect]=\"false\"\n    [disabled]=\"data.disabled\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [multiple]=\"true\"\n    [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n    [ngModel]=\"selected\"\n    [panelClass]=\"'kbq-pipe-multi-tree-select__panel'\"\n    [selectAllHandler]=\"selectAllHandler\"\n    [tabIndex]=\"-1\"\n    (closed)=\"onClose()\"\n    (opened)=\"onOpen()\"\n    (selectionChange)=\"onSelect($event)\"\n>\n    <!-- eslint-disable-next-line @angular-eslint/template/prefer-control-flow -->\n    <kbq-form-field *ngIf=\"data.search\" kbqFormFieldWithoutBorders kbqSelectSearch>\n        <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n        <input\n            placeholder=\"{{ localeData.search.placeholder }}\"\n            autocomplete=\"off\"\n            kbqInput\n            type=\"text\"\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"searchKeydownHandler()\"\n        />\n        <kbq-cleaner />\n    </kbq-form-field>\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    <kbq-cleaner #kbqSelectCleaner />\n\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText kbqPipeMinWidth 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) | mcHighlight: treeControl.filterValue.value\"></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option *kbqTreeNodeDef=\"let node\" kbqTreeNodePadding [checkboxThirdState]=\"true\">\n            <span [innerHTML]=\"treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value\"></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option\n            *kbqTreeNodeDef=\"let node; when: isNodeHasChild\"\n            kbqTreeNodePadding\n            [checkboxThirdState]=\"true\"\n        >\n            <kbq-tree-node-toggle [node]=\"node\" />\n            <span [innerHTML]=\"treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value\"></span>\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.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;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.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,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right: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;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left: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;left:0;top:0;bottom:0;width:1px;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-left:var(--kbq-size-xxs)}.kbq-pipe__multi-tree-select .kbq-badge{align-self:center;margin-left:var(--kbq-size-xs)}.kbq-pipe__multi-tree-select .kbq-tree-select .kbq-select__trigger{height:unset}.kbq-pipe-multi-tree-select__panel .kbq-select__content{max-height:404px}\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "directive", type: KbqPipeMinWidth, selector: "[kbqPipeMinWidth]" }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i2.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i2.KbqFormFieldWithoutBorders, selector: "kbq-form-field[kbqFormFieldWithoutBorders]", exportAs: ["kbqFormFieldWithoutBorders"] }, { kind: "directive", type: i2.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "directive", type: i2.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqHighlightModule }, { kind: "pipe", type: i6.KbqHighlightPipe, name: "mcHighlight" }, { kind: "ngmodule", type: KbqTreeModule }, { kind: "directive", type: i7$1.KbqTreeNodeDef, selector: "[kbqTreeNodeDef]", inputs: ["kbqTreeNodeDefWhen", "kbqTreeNode"] }, { kind: "directive", type: i7$1.KbqTreeNodePadding, selector: "[kbqTreeNodePadding]", inputs: ["kbqTreeNodePaddingIndent"], exportAs: ["kbqTreeNodePadding"] }, { kind: "component", type: i7$1.KbqTreeSelection, selector: "kbq-tree-selection", inputs: ["treeControl", "autoSelect", "noUnselectLast", "disabled", "tabIndex"], outputs: ["navigationChange", "selectionChange", "onSelectAll", "onCopy"], exportAs: ["kbqTreeSelection"] }, { kind: "component", type: i7$1.KbqTreeOption, selector: "kbq-tree-option", inputs: ["checkboxThirdState", "disabled", "selectable", "showCheckbox"], outputs: ["onSelectionChange"], exportAs: ["kbqTreeOption"] }, { kind: "component", type: i7$1.KbqTreeNodeToggleComponent, selector: "kbq-tree-node-toggle", exportAs: ["kbqTreeNodeToggle"] }, { kind: "ngmodule", type: KbqTreeSelectModule }, { kind: "component", type: i8$1.KbqTreeSelect, selector: "kbq-tree-select", inputs: ["hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "placeholder", "required", "multiple", "autoSelect", "id", "hasBackdrop", "tabIndex", "disabled", "selectAllHandler", "panelMinWidth", "panelWidth", "searchMinOptionsThreshold", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["kbqTreeSelect"] }, { kind: "directive", type: i6.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i6.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i6.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i6.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "tree", first: true, predicate: KbqTreeSelection, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<kbq-tree-select\n    #select\n    [autoSelect]=\"false\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [multiple]=\"true\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [ngModel]=\"selected\"\n    [panelClass]=\"'kbq-pipe-multi-tree-select__panel'\"\n    [selectAllHandler]=\"selectAllHandler\"\n    [tabIndex]=\"-1\"\n    (closed)=\"onClose()\"\n    (opened)=\"onOpen()\"\n    (selectionChange)=\"onSelect($event)\"\n>\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n                (keydown.enter)=\"searchKeydownHandler()\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    <kbq-cleaner #kbqSelectCleaner />\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 kbqPipeMinWidth 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) | mcHighlight: treeControl.filterValue.value\"></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option *kbqTreeNodeDef=\"let node\" kbqTreeNodePadding [checkboxThirdState]=\"true\">\n            <span [innerHTML]=\"treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value\"></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 [innerHTML]=\"treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value\"></span>\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-inline-start:-1px;margin-inline-end:0;height:var(--kbq-size-l);align-self:center}.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 .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__separator{color:var(--kbq-line-contrast-less)}.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}.kbq-pipe-multi-tree-select__panel .kbq-select__content{max-height:404px}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "directive", type: KbqPipeMinWidth, selector: "[kbqPipeMinWidth]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "component", type: i5.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqHighlightModule }, { kind: "ngmodule", type: KbqTreeModule }, { kind: "directive", type: i7$1.KbqTreeNodeDef, selector: "[kbqTreeNodeDef]", inputs: ["kbqTreeNodeDefWhen", "kbqTreeNode"] }, { kind: "directive", type: i7$1.KbqTreeNodePadding, selector: "[kbqTreeNodePadding]", inputs: ["kbqTreeNodePaddingIndent"], exportAs: ["kbqTreeNodePadding"] }, { kind: "component", type: i7$1.KbqTreeSelection, selector: "kbq-tree-selection", inputs: ["treeControl", "autoSelect", "noUnselectLast", "selectAllToggle", "disabled", "tabIndex", "selectAllHandler"], outputs: ["navigationChange", "selectionChange", "onSelectAll", "onCopy"], exportAs: ["kbqTreeSelection"] }, { kind: "component", type: i7$1.KbqTreeOption, selector: "kbq-tree-option", inputs: ["checkboxThirdState", "disabled", "selectable", "showCheckbox"], outputs: ["onSelectionChange"], exportAs: ["kbqTreeOption"] }, { kind: "component", type: i7$1.KbqTreeNodeToggleComponent, selector: "kbq-tree-node-toggle", exportAs: ["kbqTreeNodeToggle"] }, { kind: "ngmodule", type: KbqTreeSelectModule }, { kind: "component", type: i8$1.KbqTreeSelect, selector: "kbq-tree-select", inputs: ["hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "placeholder", "required", "multiple", "autoSelect", "selectAllToggle", "id", "hasBackdrop", "tabIndex", "disabled", "selectAllHandler", "panelMinWidth", "panelWidth", "searchMinOptionsThreshold", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "onSelectAll", "valueChange"], exportAs: ["kbqTreeSelect"] }, { kind: "directive", type: i9$1.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9$1.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "component", type: i6.KbqBadge, selector: "kbq-badge", inputs: ["compact", "outline", "badgeColor"] }, { kind: "directive", type: i6.KbqBadgeCssStyler, selector: "kbq-badge" }, { kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: i9$1.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }, { kind: "pipe", type: i9$1.KbqHighlightPipe, name: "mcHighlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeMultiTreeSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeMultiTreeSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-multi-tree-select', imports: [
                         KbqButtonModule,
                         KbqDividerModule,
-                        NgClass,
                         KbqPipeState,
                         KbqPipeButton,
                         KbqTitleModule,
-                        KbqPipeTitleDirective,
                         KbqPipeMinWidth,
-                        KbqFormFieldModule,
                         KbqIconModule,
                         KbqInputModule,
                         ReactiveFormsModule,
                         KbqHighlightModule,
                         KbqTreeModule,
                         KbqTreeSelectModule,
-                        NgIf,
                         FormsModule,
                         KbqBadgeModule,
                         KbqPseudoCheckboxModule
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                    ], providers: [
                         {
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], template: "<kbq-tree-select\n    #select\n    [autoSelect]=\"false\"\n    [disabled]=\"data.disabled\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [multiple]=\"true\"\n    [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n    [ngModel]=\"selected\"\n    [panelClass]=\"'kbq-pipe-multi-tree-select__panel'\"\n    [selectAllHandler]=\"selectAllHandler\"\n    [tabIndex]=\"-1\"\n    (closed)=\"onClose()\"\n    (opened)=\"onOpen()\"\n    (selectionChange)=\"onSelect($event)\"\n>\n    <!-- eslint-disable-next-line @angular-eslint/template/prefer-control-flow -->\n    <kbq-form-field *ngIf=\"data.search\" kbqFormFieldWithoutBorders kbqSelectSearch>\n        <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n        <input\n            placeholder=\"{{ localeData.search.placeholder }}\"\n            autocomplete=\"off\"\n            kbqInput\n            type=\"text\"\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"searchKeydownHandler()\"\n        />\n        <kbq-cleaner />\n    </kbq-form-field>\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    <kbq-cleaner #kbqSelectCleaner />\n\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText kbqPipeMinWidth 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) | mcHighlight: treeControl.filterValue.value\"></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option *kbqTreeNodeDef=\"let node\" kbqTreeNodePadding [checkboxThirdState]=\"true\">\n            <span [innerHTML]=\"treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value\"></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option\n            *kbqTreeNodeDef=\"let node; when: isNodeHasChild\"\n            kbqTreeNodePadding\n            [checkboxThirdState]=\"true\"\n        >\n            <kbq-tree-node-toggle [node]=\"node\" />\n            <span [innerHTML]=\"treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value\"></span>\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.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;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.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,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right: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;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left: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;left:0;top:0;bottom:0;width:1px;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-left:var(--kbq-size-xxs)}.kbq-pipe__multi-tree-select .kbq-badge{align-self:center;margin-left:var(--kbq-size-xs)}.kbq-pipe__multi-tree-select .kbq-tree-select .kbq-select__trigger{height:unset}.kbq-pipe-multi-tree-select__panel .kbq-select__content{max-height:404px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { select: [{
-                type: ViewChild,
-                args: [KbqTreeSelect]
-            }], tree: [{
-                type: ViewChild,
-                args: [KbqTreeSelection]
-            }] } });
+                    ], 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    [selectAllHandler]=\"selectAllHandler\"\n    [tabIndex]=\"-1\"\n    (closed)=\"onClose()\"\n    (opened)=\"onOpen()\"\n    (selectionChange)=\"onSelect($event)\"\n>\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n                (keydown.enter)=\"searchKeydownHandler()\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    <kbq-cleaner #kbqSelectCleaner />\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 kbqPipeMinWidth 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) | mcHighlight: treeControl.filterValue.value\"></span>\n        </kbq-tree-option>\n\n        <kbq-tree-option *kbqTreeNodeDef=\"let node\" kbqTreeNodePadding [checkboxThirdState]=\"true\">\n            <span [innerHTML]=\"treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value\"></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 [innerHTML]=\"treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value\"></span>\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-inline-start:-1px;margin-inline-end:0;height:var(--kbq-size-l);align-self:center}.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 .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__separator{color:var(--kbq-line-contrast-less)}.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}.kbq-pipe-multi-tree-select__panel .kbq-select__content{max-height:404px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqTreeSelection), { isSignal: true }] }] } });
 
 class KbqPipeReadonlyComponent extends KbqBasePipe {
     open() { }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeReadonlyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqPipeReadonlyComponent, isStandalone: true, selector: "kbq-pipe-readonly", providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeReadonlyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqPipeReadonlyComponent, isStandalone: true, selector: "kbq-pipe-readonly", providers: [
             {
                 provide: KbqBasePipe,
                 useExisting: this
             }
         ], usesInheritance: true, ngImport: i0, template: `
-        <button kbq-button [disabled]="data.disabled" [kbqPipeState]="data" [kbqPipeTitle]="pipeTooltip">
+        <button kbq-button [disabled]="data.disabled" [kbqPipeState]="data" [kbq-title]="pipeTooltip">
             <span #kbqTitleText class="kbq-pipe__name" kbqPipeMinWidth>{{ data.name }}</span>
             <span #kbqTitleText class="kbq-pipe__value" kbqPipeMinWidth [class.kbq-pipe__value_empty]="!data.value">
                 {{ data.value }}
@@ -1212,19 +1115,18 @@ 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: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.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;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.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,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right: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;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left: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;left:0;top:0;bottom:0;width:1px;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: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "directive", type: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "directive", type: KbqPipeMinWidth, selector: "[kbqPipeMinWidth]" }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-inline-start:-1px;margin-inline-end:0;height:var(--kbq-size-l);align-self:center}.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 .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__separator{color:var(--kbq-line-contrast-less)}.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$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "directive", type: KbqPipeMinWidth, selector: "[kbqPipeMinWidth]" }, { 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: "19.2.21", ngImport: i0, type: KbqPipeReadonlyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeReadonlyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-readonly', imports: [
                         KbqButtonModule,
                         KbqTitleModule,
                         KbqPipeState,
-                        KbqPipeTitleDirective,
                         KbqPipeMinWidth,
                         KbqPipeButton
                     ], template: `
-        <button kbq-button [disabled]="data.disabled" [kbqPipeState]="data" [kbqPipeTitle]="pipeTooltip">
+        <button kbq-button [disabled]="data.disabled" [kbqPipeState]="data" [kbq-title]="pipeTooltip">
             <span #kbqTitleText class="kbq-pipe__name" kbqPipeMinWidth>{{ data.name }}</span>
             <span #kbqTitleText class="kbq-pipe__value" kbqPipeMinWidth [class.kbq-pipe__value_empty]="!data.value">
                 {{ data.value }}
@@ -1239,21 +1141,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             <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>
-    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+    `, providers: [
                         {
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.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;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.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,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right: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;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left: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;left:0;top:0;bottom:0;width:1px;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: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-inline-start:-1px;margin-inline-end:0;height:var(--kbq-size-l);align-self:center}.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 .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__separator{color:var(--kbq-line-contrast-less)}.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"] }]
         }] });
 
 class KbqPipeSelectComponent extends KbqBasePipe {
     constructor() {
         super(...arguments);
         /** control for search options */
-        this.searchControl = new UntypedFormControl();
+        this.searchControl = new FormControl(null);
+        /** @docs-private */
+        this.select = viewChild.required(KbqSelect);
         /** Comparator of selected options */
-        this.compareByValue = (o1, o2) => o1 && o2 && o1.id === o2.id;
+        this.compareByValue = (o1, o2) => !!o1 && !!o2 && o1.id === o2.id;
+        this.getFilteredOptions = () => {
+            const search = this.searchControl.value;
+            return search
+                ? this.values.filter((item) => item.name.toLowerCase().includes(search.toLowerCase()))
+                : this.values;
+        };
     }
     /** selected value */
     get selected() {
@@ -1265,69 +1175,64 @@ class KbqPipeSelectComponent extends KbqBasePipe {
     }
     /** @docs-private */
     ngOnInit() {
-        this.filteredOptions = merge(of(this.values), this.searchControl.valueChanges.pipe(map((value) => this.getFilteredOptions(value))));
+        // Merge the live template stream (re-emits when `pipeTemplates` changes after init) with the
+        // search input, so options render on first open even when templates are supplied late
+        // (e.g. a parent assigning `pipeTemplates` in ngAfterViewInit for a viewChild valueTemplate).
+        this.filteredOptions = merge(this.filterBar.internalTemplatesChanges, this.searchControl.valueChanges).pipe(map(this.getFilteredOptions), takeUntilDestroyed(this.destroyRef));
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
-        this.select.closedStream
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.filterBar?.onClosePipe.next(this.data));
+        this.select()
+            .closedStream.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.filterBar?.onClosePipe.emit(this.data));
     }
     onSelect(item) {
         this.data.value = item;
         this.filterBar?.onChangePipe.emit(this.data);
         this.stateChanges.next();
+        setTimeout(() => this.restoreTriggerFocus());
     }
     /** opens select */
     open() {
-        this.select.open();
-    }
-    getFilteredOptions(value) {
-        return value
-            ? this.values.filter((item) => item.name.toLowerCase().includes(value.toLowerCase()))
-            : this.values;
+        this.select().open();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqPipeSelectComponent, isStandalone: true, selector: "kbq-pipe-select", providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqPipeSelectComponent, isStandalone: true, selector: "kbq-pipe-select", providers: [
             {
                 provide: KbqBasePipe,
                 useExisting: this
             }
-        ], viewQueries: [{ propertyName: "select", first: true, predicate: KbqSelect, descendants: true }], usesInheritance: true, ngImport: i0, template: "<kbq-select\n    #select\n    [compareWith]=\"compareByValue\"\n    [disabled]=\"data.disabled\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n    [panelClass]=\"'kbq-pipe-select__panel'\"\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        [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n        <span\n            #kbqTitleText\n            kbqPipeMinWidth\n            class=\"kbq-pipe__value\"\n            [class.kbq-pipe__value_empty]=\"!select.triggerValue\"\n        >\n            {{ select.triggerValue }}\n        </span>\n    </button>\n\n    @if (data.search) {\n        <kbq-form-field kbqFormFieldWithoutBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                kbqInput\n                type=\"text\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @for (item of filteredOptions | async; track item) {\n        <kbq-option [value]=\"item\">\n            @if (isTemplateRef(valueTemplate)) {\n                <ng-container\n                    [ngTemplateOutlet]=\"$any(valueTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n                />\n            } @else {\n                {{ item.name }}\n            }\n        </kbq-option>\n    }\n</kbq-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.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;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.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,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right: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;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left: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;left:0;top:0;bottom:0;width:1px;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-select__panel .kbq-select__content{max-height:404px}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3$1.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$1.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i6.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i6.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i6.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i6.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "component", type: i2.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i2.KbqFormFieldWithoutBorders, selector: "kbq-form-field[kbqFormFieldWithoutBorders]", exportAs: ["kbqFormFieldWithoutBorders"] }, { kind: "directive", type: i2.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "directive", type: i2.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "directive", type: KbqPipeMinWidth, selector: "[kbqPipeMinWidth]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "select", first: true, predicate: KbqSelect, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<kbq-select\n    #select\n    [compareWith]=\"compareByValue\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [panelClass]=\"'kbq-pipe-select__panel'\"\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 kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n        <span\n            #kbqTitleText\n            kbqPipeMinWidth\n            class=\"kbq-pipe__value\"\n            [class.kbq-pipe__value_empty]=\"!select.triggerValue\"\n        >\n            {{ select.triggerValue }}\n        </span>\n    </button>\n\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @for (item of filteredOptions | async; track item) {\n        <kbq-option [value]=\"item\">\n            @if (isTemplateRef(valueTemplate)) {\n                <ng-container\n                    [ngTemplateOutlet]=\"$any(valueTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n                />\n            } @else {\n                {{ item.name }}\n            }\n        </kbq-option>\n    }\n</kbq-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-inline-start:-1px;margin-inline-end:0;height:var(--kbq-size-l);align-self:center}.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 .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__separator{color:var(--kbq-line-contrast-less)}.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-select__panel .kbq-select__content{max-height:404px}\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.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "selectAllToggle", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i9$1.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i9$1.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9$1.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "component", type: i5.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "directive", type: KbqPipeMinWidth, selector: "[kbqPipeMinWidth]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-select', imports: [
                         KbqButtonModule,
                         KbqDividerModule,
                         KbqSelectModule,
-                        NgClass,
                         KbqPipeState,
                         KbqPipeButton,
                         KbqTitleModule,
-                        KbqPipeTitleDirective,
                         KbqPipeMinWidth,
                         NgTemplateOutlet,
-                        KbqFormFieldModule,
                         KbqIcon,
                         KbqInputModule,
                         ReactiveFormsModule,
                         AsyncPipe
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                    ], providers: [
                         {
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], template: "<kbq-select\n    #select\n    [compareWith]=\"compareByValue\"\n    [disabled]=\"data.disabled\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n    [panelClass]=\"'kbq-pipe-select__panel'\"\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        [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n        <span\n            #kbqTitleText\n            kbqPipeMinWidth\n            class=\"kbq-pipe__value\"\n            [class.kbq-pipe__value_empty]=\"!select.triggerValue\"\n        >\n            {{ select.triggerValue }}\n        </span>\n    </button>\n\n    @if (data.search) {\n        <kbq-form-field kbqFormFieldWithoutBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                kbqInput\n                type=\"text\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @for (item of filteredOptions | async; track item) {\n        <kbq-option [value]=\"item\">\n            @if (isTemplateRef(valueTemplate)) {\n                <ng-container\n                    [ngTemplateOutlet]=\"$any(valueTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n                />\n            } @else {\n                {{ item.name }}\n            }\n        </kbq-option>\n    }\n</kbq-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.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;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.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,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right: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;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left: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;left:0;top:0;bottom:0;width:1px;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-select__panel .kbq-select__content{max-height:404px}\n"] }]
-        }], propDecorators: { select: [{
-                type: ViewChild,
-                args: [KbqSelect]
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<kbq-select\n    #select\n    [compareWith]=\"compareByValue\"\n    [disabled]=\"data.disabled\"\n    [kbq-title]=\"pipeTooltip\"\n    [class]=\"{ 'kbq-active': select.panelOpen }\"\n    [panelClass]=\"'kbq-pipe-select__panel'\"\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 kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n        <span\n            #kbqTitleText\n            kbqPipeMinWidth\n            class=\"kbq-pipe__value\"\n            [class.kbq-pipe__value_empty]=\"!select.triggerValue\"\n        >\n            {{ select.triggerValue }}\n        </span>\n    </button>\n\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    @for (item of filteredOptions | async; track item) {\n        <kbq-option [value]=\"item\">\n            @if (isTemplateRef(valueTemplate)) {\n                <ng-container\n                    [ngTemplateOutlet]=\"$any(valueTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit, option: item }\"\n                />\n            } @else {\n                {{ item.name }}\n            }\n        </kbq-option>\n    }\n</kbq-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-inline-start:-1px;margin-inline-end:0;height:var(--kbq-size-l);align-self:center}.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 .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__separator{color:var(--kbq-line-contrast-less)}.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-select__panel .kbq-select__content{max-height:404px}\n"] }]
+        }], propDecorators: { select: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqSelect), { isSignal: true }] }] } });
 
 class KbqPipeTextComponent extends KbqBasePipe {
     constructor() {
         super(...arguments);
         this.placements = PopUpPlacements;
+        /** @docs-private */
+        this.popover = viewChild.required(KbqPopoverTrigger);
         /** textarea control */
         this.control = new FormControl('');
     }
@@ -1340,10 +1245,12 @@ class KbqPipeTextComponent extends KbqBasePipe {
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
-        this.popover.visibleChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((visible) => {
+        this.popover()
+            .visibleChange.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((visible) => {
             this.stateChanges.next();
             if (!visible) {
-                this.filterBar?.onClosePipe.next(this.data);
+                this.filterBar?.onClosePipe.emit(this.data);
             }
         });
     }
@@ -1351,8 +1258,9 @@ class KbqPipeTextComponent extends KbqBasePipe {
         this.data.value = this.control.value;
         this.stateChanges.next();
         this.control.markAsPristine();
-        this.popover.hide();
-        this.filterBar?.onChangePipe.next(this.data);
+        this.popover().hide();
+        this.filterBar?.onChangePipe.emit(this.data);
+        setTimeout(() => this.restoreTriggerFocus());
     }
     /** @docs-private */
     onKeydown($event) {
@@ -1367,45 +1275,39 @@ class KbqPipeTextComponent extends KbqBasePipe {
     }
     /** opens popover */
     open() {
-        this.popover.show();
+        this.popover().show();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqPipeTextComponent, isStandalone: true, selector: "kbq-pipe-text", providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqPipeTextComponent, isStandalone: true, selector: "kbq-pipe-text", providers: [
             {
                 provide: KbqBasePipe,
                 useExisting: this
             }
-        ], viewQueries: [{ propertyName: "popover", first: true, predicate: KbqPopoverTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<button\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverFooter]=\"footer\"\n    [kbqPopoverOffset]=\"4\"\n    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [ngClass]=\"{ 'kbq-active': popover?.isOpen }\"\n>\n    <span #kbqTitleText kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText kbqPipeMinWidth 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>{{ localeData.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: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.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;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.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,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right: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;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left: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;left:0;top:0;bottom:0;width:1px;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: KbqFormFieldModule }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "directive", type: i2.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["hideIfNotInViewPort", "kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { kind: "ngmodule", type: KbqInputModule }, { 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$1.KbqTextarea, selector: "textarea[kbqTextarea]", inputs: ["canGrow", "maxRows", "errorStateMatcher", "disabled", "id", "placeholder", "freeRowsHeight", "required", "value"], exportAs: ["kbqTextarea"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "directive", type: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "directive", type: KbqPipeMinWidth, selector: "[kbqPipeMinWidth]" }], 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    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [class]=\"{ 'kbq-active': popover()?.isOpen }\"\n>\n    <span #kbqTitleText kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText kbqPipeMinWidth 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>{{ localeData.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: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-inline-start:-1px;margin-inline-end:0;height:var(--kbq-size-l);align-self:center}.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 .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__separator{color:var(--kbq-line-contrast-less)}.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: ["hideIfNotInViewPort", "kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], 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$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "directive", type: KbqPipeMinWidth, selector: "[kbqPipeMinWidth]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-text', imports: [
                         KbqButtonModule,
-                        KbqFormFieldModule,
                         KbqPopoverModule,
                         KbqInputModule,
                         KbqDividerModule,
                         FormsModule,
                         KbqTextareaModule,
-                        NgClass,
                         KbqPipeButton,
                         ReactiveFormsModule,
                         KbqTitleModule,
                         KbqPipeState,
-                        KbqPipeTitleDirective,
                         KbqPipeMinWidth
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                    ], providers: [
                         {
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], template: "<button\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverFooter]=\"footer\"\n    [kbqPopoverOffset]=\"4\"\n    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [ngClass]=\"{ 'kbq-active': popover?.isOpen }\"\n>\n    <span #kbqTitleText kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText kbqPipeMinWidth 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>{{ localeData.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: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.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;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.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,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right: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;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left: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;left:0;top:0;bottom:0;width:1px;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: ViewChild,
-                args: [KbqPopoverTrigger]
-            }] } });
+                    ], 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    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [class]=\"{ 'kbq-active': popover()?.isOpen }\"\n>\n    <span #kbqTitleText kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText kbqPipeMinWidth 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>{{ localeData.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: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-inline-start:-1px;margin-inline-end:0;height:var(--kbq-size-l);align-self:center}.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 .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__separator{color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{background:var(--kbq-line-contrast-less)}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n"] }]
+        }], propDecorators: { popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqPopoverTrigger), { isSignal: true }] }] } });
 
-class KbqPipeTreeSelectComponent extends KbqBasePipe {
+class KbqPipeTreeSelectComponent extends KbqTreeSelectPipeBase {
     /** selected value */
     get selected() {
         return this.data.value;
@@ -1416,115 +1318,74 @@ class KbqPipeTreeSelectComponent extends KbqBasePipe {
     }
     constructor() {
         super();
-        /** control for search options */
-        this.searchControl = new UntypedFormControl();
-        /** updates values for selection and value template */
+        /**
+         * Populates the tree data source from the pipe template. The shared `values`/`valueTemplate`
+         * assignment is already performed by the base subscription, so this override only does the
+         * tree-specific work and avoids a redundant double assignment.
+         */
         this.updateTemplates = (templates) => {
-            const template = templates?.find((template) => getId(template) === getId(this.data));
+            const template = templates?.find((item) => getId(item) === getId(this.data));
             if (template?.values) {
-                this.values = template.values;
-                this.valueTemplate = template.valueTemplate;
                 this.dataSource.data = template.values;
             }
         };
-        this.transformer = (node, level, parent) => {
-            const flatNode = new KbqTreeSelectFlatNode();
-            flatNode.name = node.name;
-            flatNode.value = node.value;
-            flatNode.parent = parent;
-            flatNode.level = level;
-            flatNode.expandable = !!node.children;
-            return flatNode;
-        };
-        this.getLevel = (node) => {
-            return node.level;
-        };
-        this.isExpandable = (node) => {
-            return node.expandable;
-        };
-        this.getChildren = (node) => {
-            return node.children;
-        };
-        this.getValue = (node) => {
-            return node.value;
-        };
-        this.getViewValue = (node) => {
-            return `${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);
-        this.dataSource = new KbqTreeFlatDataSource(this.treeControl, this.treeFlattener);
+        // See the field-init note in `KbqTreeSelectPipeBase`: subscribing here (after this class's
+        // `updateTemplates` initializer) ensures the initial replay writes `dataSource.data`.
         this.filterBar?.internalTemplatesChanges.pipe(takeUntilDestroyed()).subscribe(this.updateTemplates);
     }
-    ngOnInit() {
-        this.searchControl.valueChanges.subscribe((value) => this.treeControl.filterNodes(value));
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-        this.select.closedStream
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.filterBar?.onClosePipe.next(this.data));
-    }
-    hasChild(_, nodeData) {
-        return nodeData.expandable;
-    }
     onSelect(item) {
         this.data.value = item.value;
         this.filterBar?.onChangePipe.emit(this.data);
-        this.select.close();
-        setTimeout(() => this.select.focus());
+        this.select().close();
+        setTimeout(() => this.restoreTriggerFocus());
         this.stateChanges.next();
     }
-    /** opens select */
-    open() {
-        setTimeout(() => this.select.open());
-    }
-    onOpen() {
-        this.treeControl.expandAll();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeTreeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqPipeTreeSelectComponent, isStandalone: true, selector: "kbq-pipe-tree-select", providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeTreeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqPipeTreeSelectComponent, isStandalone: true, selector: "kbq-pipe-tree-select", providers: [
             {
                 provide: KbqBasePipe,
                 useExisting: this
             }
-        ], viewQueries: [{ propertyName: "select", first: true, predicate: KbqTreeSelect, descendants: true }], usesInheritance: true, ngImport: i0, template: "<kbq-tree-select\n    #select\n    [autoSelect]=\"false\"\n    [disabled]=\"data.disabled\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n    [ngModel]=\"selected\"\n    [panelClass]=\"'kbq-pipe-tree-select__panel'\"\n    [tabIndex]=\"-1\"\n    (opened)=\"onOpen()\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    <!-- eslint-disable-next-line @angular-eslint/template/prefer-control-flow -->\n    <kbq-form-field *ngIf=\"data.search\" kbqFormFieldWithoutBorders kbqSelectSearch>\n        <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n        <input\n            placeholder=\"{{ localeData.search.placeholder }}\"\n            autocomplete=\"off\"\n            kbqInput\n            type=\"text\"\n            [formControl]=\"searchControl\"\n        />\n        <kbq-cleaner />\n    </kbq-form-field>\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    <kbq-cleaner #kbqSelectCleaner />\n\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n        <span\n            #kbqTitleText\n            kbqPipeMinWidth\n            class=\"kbq-pipe__value\"\n            [class.kbq-pipe__value_empty]=\"!select.triggerValue\"\n        >\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 [innerHTML]=\"treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value\"></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 [innerHTML]=\"treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value\"></span>\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.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;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.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,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right: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;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left: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;left:0;top:0;bottom:0;width:1px;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__panel .kbq-tree-select__content{max-height:404px}.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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "directive", type: KbqPipeMinWidth, selector: "[kbqPipeMinWidth]" }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i2.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i2.KbqFormFieldWithoutBorders, selector: "kbq-form-field[kbqFormFieldWithoutBorders]", exportAs: ["kbqFormFieldWithoutBorders"] }, { kind: "directive", type: i2.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "directive", type: i2.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqHighlightModule }, { kind: "pipe", type: i6.KbqHighlightPipe, name: "mcHighlight" }, { kind: "ngmodule", type: KbqTreeModule }, { kind: "directive", type: i7$1.KbqTreeNodeDef, selector: "[kbqTreeNodeDef]", inputs: ["kbqTreeNodeDefWhen", "kbqTreeNode"] }, { kind: "directive", type: i7$1.KbqTreeNodePadding, selector: "[kbqTreeNodePadding]", inputs: ["kbqTreeNodePaddingIndent"], exportAs: ["kbqTreeNodePadding"] }, { kind: "component", type: i7$1.KbqTreeSelection, selector: "kbq-tree-selection", inputs: ["treeControl", "autoSelect", "noUnselectLast", "disabled", "tabIndex"], outputs: ["navigationChange", "selectionChange", "onSelectAll", "onCopy"], exportAs: ["kbqTreeSelection"] }, { kind: "component", type: i7$1.KbqTreeOption, selector: "kbq-tree-option", inputs: ["checkboxThirdState", "disabled", "selectable", "showCheckbox"], outputs: ["onSelectionChange"], exportAs: ["kbqTreeOption"] }, { kind: "component", type: i7$1.KbqTreeNodeToggleComponent, selector: "kbq-tree-node-toggle", exportAs: ["kbqTreeNodeToggle"] }, { kind: "ngmodule", type: KbqTreeSelectModule }, { kind: "component", type: i8$1.KbqTreeSelect, selector: "kbq-tree-select", inputs: ["hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "placeholder", "required", "multiple", "autoSelect", "id", "hasBackdrop", "tabIndex", "disabled", "selectAllHandler", "panelMinWidth", "panelWidth", "searchMinOptionsThreshold", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["kbqTreeSelect"] }, { kind: "directive", type: i6.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i6.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i6.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "<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    [tabIndex]=\"-1\"\n    (opened)=\"onOpen()\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    <kbq-cleaner #kbqSelectCleaner />\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 kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n        <span\n            #kbqTitleText\n            kbqPipeMinWidth\n            class=\"kbq-pipe__value\"\n            [class.kbq-pipe__value_empty]=\"!select.triggerValue\"\n        >\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 [innerHTML]=\"treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value\"></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 [innerHTML]=\"treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value\"></span>\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-inline-start:-1px;margin-inline-end:0;height:var(--kbq-size-l);align-self:center}.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 .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__separator{color:var(--kbq-line-contrast-less)}.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__panel .kbq-tree-select__content{max-height:404px}.kbq-pipe__tree-select .kbq-select__trigger{height:unset}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "directive", type: KbqPipeMinWidth, selector: "[kbqPipeMinWidth]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "component", type: i5.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i5.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i5.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqHighlightModule }, { kind: "ngmodule", type: KbqTreeModule }, { kind: "directive", type: i7$1.KbqTreeNodeDef, selector: "[kbqTreeNodeDef]", inputs: ["kbqTreeNodeDefWhen", "kbqTreeNode"] }, { kind: "directive", type: i7$1.KbqTreeNodePadding, selector: "[kbqTreeNodePadding]", inputs: ["kbqTreeNodePaddingIndent"], exportAs: ["kbqTreeNodePadding"] }, { kind: "component", type: i7$1.KbqTreeSelection, selector: "kbq-tree-selection", inputs: ["treeControl", "autoSelect", "noUnselectLast", "selectAllToggle", "disabled", "tabIndex", "selectAllHandler"], outputs: ["navigationChange", "selectionChange", "onSelectAll", "onCopy"], exportAs: ["kbqTreeSelection"] }, { kind: "component", type: i7$1.KbqTreeOption, selector: "kbq-tree-option", inputs: ["checkboxThirdState", "disabled", "selectable", "showCheckbox"], outputs: ["onSelectionChange"], exportAs: ["kbqTreeOption"] }, { kind: "component", type: i7$1.KbqTreeNodeToggleComponent, selector: "kbq-tree-node-toggle", exportAs: ["kbqTreeNodeToggle"] }, { kind: "ngmodule", type: KbqTreeSelectModule }, { kind: "component", type: i8$1.KbqTreeSelect, selector: "kbq-tree-select", inputs: ["hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "placeholder", "required", "multiple", "autoSelect", "selectAllToggle", "id", "hasBackdrop", "tabIndex", "disabled", "selectAllHandler", "panelMinWidth", "panelWidth", "searchMinOptionsThreshold", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "onSelectAll", "valueChange"], exportAs: ["kbqTreeSelect"] }, { kind: "directive", type: i9$1.KbqSelectSearch, selector: "[kbqSelectSearch]", exportAs: ["kbqSelectSearch"] }, { kind: "directive", type: i9$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i9$1.KbqSelectSearchEmptyResult, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i9$1.KbqHighlightPipe, name: "mcHighlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeTreeSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeTreeSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-tree-select', imports: [
                         KbqButtonModule,
                         KbqDividerModule,
-                        NgClass,
                         KbqPipeState,
                         KbqPipeButton,
                         KbqTitleModule,
-                        KbqPipeTitleDirective,
                         KbqPipeMinWidth,
-                        KbqFormFieldModule,
                         KbqIconModule,
                         KbqInputModule,
                         ReactiveFormsModule,
                         KbqHighlightModule,
                         KbqTreeModule,
                         KbqTreeSelectModule,
-                        NgIf,
                         FormsModule
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                    ], providers: [
                         {
                             provide: KbqBasePipe,
                             useExisting: this
                         }
-                    ], template: "<kbq-tree-select\n    #select\n    [autoSelect]=\"false\"\n    [disabled]=\"data.disabled\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n    [ngModel]=\"selected\"\n    [panelClass]=\"'kbq-pipe-tree-select__panel'\"\n    [tabIndex]=\"-1\"\n    (opened)=\"onOpen()\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    <!-- eslint-disable-next-line @angular-eslint/template/prefer-control-flow -->\n    <kbq-form-field *ngIf=\"data.search\" kbqFormFieldWithoutBorders kbqSelectSearch>\n        <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n        <input\n            placeholder=\"{{ localeData.search.placeholder }}\"\n            autocomplete=\"off\"\n            kbqInput\n            type=\"text\"\n            [formControl]=\"searchControl\"\n        />\n        <kbq-cleaner />\n    </kbq-form-field>\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    <kbq-cleaner #kbqSelectCleaner />\n\n    <button\n        kbq-button\n        kbq-select-matcher\n        [disabled]=\"data.disabled\"\n        [kbqPipeState]=\"data\"\n        [ngClass]=\"{ 'kbq-active': select.panelOpen }\"\n    >\n        <span #kbqTitleText kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n        <span\n            #kbqTitleText\n            kbqPipeMinWidth\n            class=\"kbq-pipe__value\"\n            [class.kbq-pipe__value_empty]=\"!select.triggerValue\"\n        >\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 [innerHTML]=\"treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value\"></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 [innerHTML]=\"treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value\"></span>\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.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;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.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,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right: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;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left: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;left:0;top:0;bottom:0;width:1px;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__panel .kbq-tree-select__content{max-height:404px}.kbq-pipe__tree-select .kbq-select__trigger{height:unset}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { select: [{
-                type: ViewChild,
-                args: [KbqTreeSelect]
-            }] } });
+                    ], 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    [tabIndex]=\"-1\"\n    (opened)=\"onOpen()\"\n    (selectionChange)=\"onSelect($event.value)\"\n>\n    @if (data.search) {\n        <kbq-form-field noBorders kbqSelectSearch>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n            <input\n                placeholder=\"{{ localeData.search.placeholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                type=\"text\"\n                [attr.aria-label]=\"localeData.search.placeholder\"\n                [formControl]=\"searchControl\"\n            />\n            <kbq-cleaner />\n        </kbq-form-field>\n    }\n\n    <div kbq-select-search-empty-result>{{ localeData.pipe.emptySearchResult }}</div>\n\n    <kbq-cleaner #kbqSelectCleaner />\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 kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n        <span\n            #kbqTitleText\n            kbqPipeMinWidth\n            class=\"kbq-pipe__value\"\n            [class.kbq-pipe__value_empty]=\"!select.triggerValue\"\n        >\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 [innerHTML]=\"treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value\"></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 [innerHTML]=\"treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value\"></span>\n        </kbq-tree-option>\n    </kbq-tree-selection>\n</kbq-tree-select>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ select.triggerValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:var(--kbq-filter-bar-pipe-max-width, 320px)}.kbq-pipe .kbq-pipe__name,.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-inline-start:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-inline-start:-1px;margin-inline-end:0;height:var(--kbq-size-l);align-self:center}.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 .kbq-pipe__name{color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__separator{color:var(--kbq-line-contrast-less)}.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__panel .kbq-tree-select__content{max-height:404px}.kbq-pipe__tree-select .kbq-select__trigger{height:unset}\n"] }]
+        }], ctorParameters: () => [] });
 
-/**default configuration of filter-bar */
+/**
+ * Default localized strings for the filter-bar, used when no `KBQ_LOCALE_SERVICE` (nor an explicit
+ * `KBQ_FILTER_BAR_CONFIGURATION`) is provided. These are the Russian (`ru-RU`) strings, matching the
+ * library-wide default-locale convention (every `KBQ_*_DEFAULT_CONFIGURATION` resolves to `ruRULocaleData`).
+ * Provide `KBQ_LOCALE_SERVICE` at the application root to localize the filter-bar for other locales.
+ */
 const KBQ_FILTER_BAR_DEFAULT_CONFIGURATION = ruRULocaleData.filterBar;
 /** Injection Token for providing configuration of filter-bar */
 const KBQ_FILTER_BAR_CONFIGURATION = new InjectionToken('KbqFilterBarConfiguration');
+/**
+ * Injection token exposing the {@link KbqFilterBarHost} seam. `KbqFilterBar` provides itself via
+ * `useExisting`, so pipes `inject(KBQ_FILTER_BAR_HOST)` instead of depending on the concrete bar.
+ */
+const KBQ_FILTER_BAR_HOST = new InjectionToken('KBQ_FILTER_BAR_HOST');
 /** Injection Token for providing pipes in filter-bar */
 const KBQ_FILTER_BAR_PIPES = new InjectionToken('kbq-filter-bar-pipes');
 /** Utility provider for `KBQ_FILTER_BAR_PIPES`. */
@@ -1574,10 +1435,11 @@ class KbqTreeSelectFlatNode {
 function kbqBuildTree(value, level) {
     const data = [];
     for (const [k, v] of Object.entries(value)) {
+        const isBranch = typeof v === 'object' && v !== null && !v['value'];
         data.push({
             name: k.toString(),
             value: v,
-            children: typeof v === 'object' && v && !v['value'] ? kbqBuildTree(v, level + 1) : null
+            children: isBranch ? kbqBuildTree(v, level + 1) : null
         });
     }
     return data;
@@ -1585,10 +1447,10 @@ function kbqBuildTree(value, level) {
 
 class KbqFilterReset {
     constructor() {
-        /** KbqFilterBar instance */
-        this.filterBar = inject(KbqFilterBar);
+        /** KbqFilterBar host seam */
+        this.filterBar = inject(KBQ_FILTER_BAR_HOST);
         /** Event that is generated whenever the user reset a filter. */
-        this.onResetFilter = new EventEmitter();
+        this.onResetFilter = output();
     }
     /** localized data
      * @docs-private */
@@ -1596,18 +1458,17 @@ class KbqFilterReset {
         return this.filterBar.configuration.reset.buttonName;
     }
     resetFilter() {
-        this.onResetFilter.emit(this.filterBar.filter);
-        this.filterBar.changes.next();
+        this.onResetFilter.emit(this.filterBar.filter());
         this.filterBar.onResetFilter.next(true);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFilterReset, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqFilterReset, isStandalone: true, selector: "kbq-filter-reset", outputs: { onResetFilter: "onResetFilter" }, host: { classAttribute: "kbq-filter-reset" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFilterReset, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: KbqFilterReset, isStandalone: true, selector: "kbq-filter-reset", outputs: { onResetFilter: "onResetFilter" }, host: { classAttribute: "kbq-filter-reset" }, ngImport: i0, template: `
         <button kbq-button [color]="'theme'" [kbqStyle]="'transparent'" (click)="resetFilter()">
             <ng-content>{{ localeData }}</ng-content>
         </button>
     `, isInline: true, 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFilterReset, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFilterReset, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-filter-reset',
@@ -1622,21 +1483,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         class: 'kbq-filter-reset'
                     }
                 }]
-        }], propDecorators: { onResetFilter: [{
-                type: Output
-            }] } });
+        }], propDecorators: { onResetFilter: [{ type: i0.Output, args: ["onResetFilter"] }] } });
 
 class KbqFilterBarButton {
     constructor() {
         this.button = inject(KbqButton);
-        /** KbqFilterBar instance */
-        this.filterBar = inject(KbqFilterBar);
+        /** KbqFilterBar host seam */
+        this.filterBar = inject(KBQ_FILTER_BAR_HOST);
         /** KbqFilters instance */
         this.filters = inject(KbqFilters);
-        this.filterBar.changes.pipe(takeUntilDestroyed()).subscribe(() => {
+        // Reflect the current filter's saved/changed state in the button style. Reading `filterBar.filter`
+        // (a signal-backed accessor) subscribes this effect, replacing the retired `changes` bus.
+        effect(() => {
+            const filter = this.filterBar.filter();
             this.button.kbqStyle = KbqButtonStyles.Outline;
             this.button.color = KbqComponentColors.ContrastFade;
-            if (this.filterBar.filter?.changed || this.filterBar.filter?.saved) {
+            if (filter?.changed || filter?.saved) {
                 this.button.kbqStyle = 'changed-filter';
                 this.button.color = KbqComponentColors.Empty;
             }
@@ -1646,10 +1508,10 @@ class KbqFilterBarButton {
     saveFocusedElement() {
         this.filters.saveFocusedElement(this.button);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFilterBarButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqFilterBarButton, isStandalone: true, selector: "[kbqFilterBarButton]", host: { listeners: { "click": "saveFocusedElement()", "keydown": "saveFocusedElement()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFilterBarButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqFilterBarButton, isStandalone: true, selector: "[kbqFilterBarButton]", host: { listeners: { "click": "saveFocusedElement()", "keydown": "saveFocusedElement()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFilterBarButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFilterBarButton, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqFilterBarButton]',
@@ -1660,37 +1522,278 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-class KbqFilters {
+/**
+ * The "save / rename filter" popover, extracted from `KbqFilters` (SRP). Owns the save form state, the
+ * name control, validation/error display and the save/rename flow. It declares the popover's header,
+ * content and footer templates and pushes them imperatively onto the trigger it is given (via the
+ * `popoverTrigger` input), so there is no cross-component template binding on the parent (which would
+ * otherwise risk `ExpressionChangedAfterItHasBeenCheckedError`). `KbqFilters` keeps the trigger (on its
+ * main button), focus management and the public `filterSavedSuccessfully`/`filterSavedUnsuccessfully` API,
+ * delegating to this component.
+ *
+ * @docs-private
+ */
+class KbqFilterSavePopover {
+    constructor() {
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        /** Popover trigger owned by the parent (`KbqFilters` main button). */
+        this.popoverTrigger = input.required(...(ngDevMode ? [{ debugName: "popoverTrigger" }] : []));
+        /** Filter bar, used for the save payload, the current filter and localized strings. */
+        this.filterBar = input.required(...(ngDevMode ? [{ debugName: "filterBar" }] : []));
+        /** Emits when the user saves/renames a filter. */
+        this.save = output();
+        /** Emits when the popover closes; the boolean requests focus restoration by the parent. */
+        this.closed = output();
+        /** @docs-private */
+        this.headerTemplate = viewChild.required('header');
+        /** @docs-private */
+        this.contentTemplate = viewChild.required('content');
+        /** @docs-private */
+        this.footerTemplate = viewChild.required('footer');
+        this.newFilterName = viewChild.required('newFilterName');
+        this.saveFilterButton = viewChild.required('saveFilterButton');
+        /** new filter name for saving */
+        this.filterName = new FormControl(null);
+        /** true if saving a new filter, false if saving changes in filter */
+        this.saveNewFilter = false;
+        this.showFilterSavingError = false;
+        this.filterSavingErrorText = '';
+        this.isSaving = false;
+        this.close = (restoreFocus = true) => {
+            this.popoverTrigger().hide();
+            this.closed.emit(restoreFocus);
+            setTimeout(() => this.changeDetectorRef.detectChanges());
+            this.showFilterSavingError = false;
+        };
+    }
+    /** localized data
+     * @docs-private */
+    get localeData() {
+        return this.filterBar().configuration.filters;
+    }
     /** header of popover. Depends on the mode */
     get popoverHeader() {
         return this.saveNewFilter ? this.localeData.saveAsNew : this.localeData.saveChanges;
     }
-    /** Component state. true if opened dropdown or popup */
-    get opened() {
-        return this.popover?.isOpen || this.dropdown?.opened;
+    ngAfterViewInit() {
+        // Push the templates onto the parent's trigger imperatively (no parent-side binding).
+        const trigger = this.popoverTrigger();
+        trigger.header = this.headerTemplate();
+        trigger.content = this.contentTemplate();
+        trigger.footer = this.footerTemplate();
     }
-    /** Component state. true if opened dropdown or popup of filterActions */
-    get filterActionsOpened() {
-        return this.popover?.isOpen || this.filterActionsDropdown?.opened;
+    openSaveAsNewFilterPopover() {
+        this.saveNewFilter = true;
+        this.preparePopover();
     }
-    /** Selected filter */
-    get filter() {
-        return this.filterBar.filter;
+    openChangeFilterNamePopover() {
+        this.saveNewFilter = false;
+        this.preparePopover();
     }
-    /** Component state. True if 'filters' input contains no elements. */
-    get isEmpty() {
-        return this.filters.length === 0;
+    saveAsNew(event) {
+        if (this.filterName.invalid)
+            return;
+        const name = this.filterName.value || '';
+        // @todo default filter
+        // Shallow structural copy (new filter + new pipes array + per-pipe shallow copy), mirroring
+        // `KbqFilters.selectFilter`. Avoids `structuredClone` so non-cloneable custom pipe `value`
+        // payloads survive a save; every pipe writes `value` by reassignment, never in place.
+        const current = this.filterBar().filter();
+        const filter = current
+            ? { ...current, pipes: current.pipes.map((pipe) => ({ ...pipe })) }
+            : { pipes: [] };
+        filter.name = name;
+        filter.saved = true;
+        filter.changed = false;
+        this.isSaving = true;
+        this.popoverTrigger().preventClose = true;
+        this.filterName.disable();
+        if (this.saveNewFilter) {
+            this.save.emit({ filter, filterBar: this.filterBar(), status: KbqSaveFilterStatuses.NewFilter });
+        }
+        else {
+            this.save.emit({ filter, filterBar: this.filterBar(), status: KbqSaveFilterStatuses.NewName });
+        }
+        event?.preventDefault();
     }
-    /** localized data
-     * @docs-private */
-    get localeData() {
-        return this.filterBar.configuration.filters;
+    showError(error) {
+        if (error?.nameAlreadyExists) {
+            this.filterName.setErrors({ filterNameAlreadyExist: true });
+        }
+        this.showFilterSavingError = true;
+        this.filterSavingErrorText = error?.text ?? this.filterBar().configuration.filters.errorHint;
     }
-    /** Current focus origin state.
-     * @docs-private */
-    get focusOrigin() {
-        return this._focusOrigin;
+    /** Hide the popover on a successful save. Focus restoration is handled by the parent. */
+    savedSuccessfully() {
+        this.isSaving = false;
+        this.popoverTrigger().preventClose = false;
+        this.popoverTrigger().hide();
+        this.changeDetectorRef.markForCheck();
     }
+    /** Release the saving state after a failed save (the error itself is shown by the host via `showError`). */
+    savedUnsuccessfully() {
+        this.isSaving = false;
+        this.popoverTrigger().preventClose = false;
+        this.filterName.enable();
+        // Focus via FocusMonitor (keyboard origin) so the focus ring is preserved on the retry path.
+        setTimeout(() => this.saveFilterButton().focusViaKeyboard());
+        this.changeDetectorRef.markForCheck();
+    }
+    preparePopover() {
+        this.filterName = new FormControl(this.filterBar().filter()?.name || '', Validators.required);
+        const trigger = this.popoverTrigger();
+        trigger.show();
+        // Tie to the popover instance (recreated each open) so this per-open control's subscription
+        // doesn't accumulate across open/close cycles.
+        this.filterName.valueChanges
+            .pipe(distinctUntilChanged(), takeUntilDestroyed(trigger.instanceDestroyRef))
+            .subscribe(() => (this.showFilterSavingError = false));
+        merge(...trigger.defaultClosingActions())
+            .pipe(filter(() => !this.isSaving), takeUntilDestroyed(trigger.instanceDestroyRef))
+            .subscribe(() => this.close(false));
+        trigger.visibleChange
+            .pipe(filter((state) => !state), takeUntilDestroyed(trigger.instanceDestroyRef))
+            .subscribe(this.close);
+        setTimeout(() => {
+            this.newFilterName().nativeElement.focus();
+            this.filterName.setErrors(null);
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFilterSavePopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqFilterSavePopover, isStandalone: true, selector: "kbq-filter-save-popover", inputs: { popoverTrigger: { classPropertyName: "popoverTrigger", publicName: "popoverTrigger", isSignal: true, isRequired: true, transformFunction: null }, filterBar: { classPropertyName: "filterBar", publicName: "filterBar", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { save: "save", closed: "closed" }, viewQueries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "newFilterName", first: true, predicate: ["newFilterName"], descendants: true, isSignal: true }, { propertyName: "saveFilterButton", first: true, predicate: ["saveFilterButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
+        <ng-template #header>{{ popoverHeader }}</ng-template>
+
+        <ng-template #content>
+            @if (showFilterSavingError) {
+                <kbq-alert
+                    class="layout-margin-bottom-m"
+                    role="alert"
+                    [alertColor]="'error'"
+                    [alertStyle]="'colored'"
+                    [compact]="true"
+                >
+                    {{ filterSavingErrorText }}
+                </kbq-alert>
+            }
+            <div class="kbq-form-vertical">
+                <div class="kbq-form__row">
+                    <label class="kbq-form__label">{{ localeData.name }}</label>
+
+                    <kbq-form-field class="kbq-form__control">
+                        <input
+                            #newFilterName
+                            kbqInput
+                            type="text"
+                            [attr.aria-label]="localeData.name"
+                            [formControl]="filterName"
+                            (keydown.enter)="saveAsNew($event)"
+                        />
+
+                        @if (filterName.hasError('filterNameAlreadyExist')) {
+                            <kbq-error>{{ localeData.error }}</kbq-error>
+                        }
+                    </kbq-form-field>
+                </div>
+            </div>
+        </ng-template>
+
+        <ng-template #footer>
+            <button
+                #saveFilterButton
+                kbq-button
+                class="layout-margin-right-l"
+                [class.kbq-progress]="isSaving"
+                [disabled]="isSaving"
+                [color]="'contrast'"
+                [kbqStyle]="'filled'"
+                (click)="saveAsNew()"
+            >
+                {{ localeData.saveButton }}
+            </button>
+            <button
+                kbq-button
+                [color]="'contrast-fade'"
+                [kbqStyle]="'filled'"
+                [disabled]="isSaving"
+                (click)="close(true)"
+            >
+                {{ localeData.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$1.KbqForm, selector: ".kbq-form-vertical, .kbq-form-horizontal", exportAs: ["kbqForm"] }, { kind: "directive", type: i9$1.KbqFormElement, selector: ".kbq-form__row, .kbq-form__fieldset, .kbq-form__legend", exportAs: ["kbqFormElement"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.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: "component", type: i5.KbqError, selector: "kbq-error", exportAs: ["kbqError"] }, { kind: "directive", type: i5.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqAlertModule }, { kind: "component", type: i6$1.KbqAlert, selector: "kbq-alert", inputs: ["compact", "alertStyle", "alertColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFilterSavePopover, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-filter-save-popover',
+                    imports: [ReactiveFormsModule, KbqButtonModule, KbqFormsModule, KbqInputModule, KbqAlertModule],
+                    template: `
+        <ng-template #header>{{ popoverHeader }}</ng-template>
+
+        <ng-template #content>
+            @if (showFilterSavingError) {
+                <kbq-alert
+                    class="layout-margin-bottom-m"
+                    role="alert"
+                    [alertColor]="'error'"
+                    [alertStyle]="'colored'"
+                    [compact]="true"
+                >
+                    {{ filterSavingErrorText }}
+                </kbq-alert>
+            }
+            <div class="kbq-form-vertical">
+                <div class="kbq-form__row">
+                    <label class="kbq-form__label">{{ localeData.name }}</label>
+
+                    <kbq-form-field class="kbq-form__control">
+                        <input
+                            #newFilterName
+                            kbqInput
+                            type="text"
+                            [attr.aria-label]="localeData.name"
+                            [formControl]="filterName"
+                            (keydown.enter)="saveAsNew($event)"
+                        />
+
+                        @if (filterName.hasError('filterNameAlreadyExist')) {
+                            <kbq-error>{{ localeData.error }}</kbq-error>
+                        }
+                    </kbq-form-field>
+                </div>
+            </div>
+        </ng-template>
+
+        <ng-template #footer>
+            <button
+                #saveFilterButton
+                kbq-button
+                class="layout-margin-right-l"
+                [class.kbq-progress]="isSaving"
+                [disabled]="isSaving"
+                [color]="'contrast'"
+                [kbqStyle]="'filled'"
+                (click)="saveAsNew()"
+            >
+                {{ localeData.saveButton }}
+            </button>
+            <button
+                kbq-button
+                [color]="'contrast-fade'"
+                [kbqStyle]="'filled'"
+                [disabled]="isSaving"
+                (click)="close(true)"
+            >
+                {{ localeData.cancelButton }}
+            </button>
+        </ng-template>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { popoverTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverTrigger", required: true }] }], filterBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBar", required: true }] }], save: [{ type: i0.Output, args: ["save"] }], closed: [{ type: i0.Output, args: ["closed"] }], headerTemplate: [{ type: i0.ViewChild, args: ['header', { isSignal: true }] }], contentTemplate: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], footerTemplate: [{ type: i0.ViewChild, args: ['footer', { isSignal: true }] }], newFilterName: [{ type: i0.ViewChild, args: ['newFilterName', { isSignal: true }] }], saveFilterButton: [{ type: i0.ViewChild, args: ['saveFilterButton', { isSignal: true }] }] } });
+
+class KbqFilters {
     constructor() {
         /** @docs-private */
         this.elementRef = inject(ElementRef);
@@ -1708,39 +1811,75 @@ class KbqFilters {
         this.filterBar = inject(KbqFilterBar);
         /** @docs-private */
         this.changeDetectorRef = inject(ChangeDetectorRef);
+        /** @docs-private */
+        this.mainButton = viewChild.required('mainButton');
+        /** @docs-private */
+        this.saveNewFilterButton = viewChild.required('saveNewFilterButton');
+        /** @docs-private */
+        this.filterActionsButton = viewChild.required('filterActionsButton');
+        /** @docs-private */
+        this.popover = viewChild.required(KbqPopoverTrigger);
+        /** @docs-private */
+        this.dropdown = viewChild.required(KbqDropdownTrigger);
+        /** @docs-private */
+        this.filterActionsDropdown = viewChild('filterActionsButton', ...(ngDevMode ? [{ debugName: "filterActionsDropdown" }] : []));
+        /** @docs-private */
+        this.savePopover = viewChild.required(KbqFilterSavePopover);
+        this.search = viewChild.required('search');
         /** control for search filter */
-        this.searchControl = new UntypedFormControl();
+        this.searchControl = new FormControl(null);
         /** @docs-private */
         this.popoverSize = PopUpSizes.Medium;
         /** @docs-private */
         this.popoverOffset = 4;
-        this.showFilterSavingError = false;
-        this.isSaving = false;
+        this.filters = input.required(...(ngDevMode ? [{ debugName: "filters" }] : []));
         /** Event that is generated whenever the user selects a filter. */
-        this.onSelectFilter = new EventEmitter();
-        /** Event that is generated whenever the user save a filter. */
-        this.onSave = new EventEmitter();
+        this.onSelectFilter = output();
+        /**
+         * Event that is generated whenever the user save a filter.
+         *
+         * The emitted `filter` shares its pipe objects with the live filter by design (so the rendered pipes keep
+         * their identity across a save instead of being destroyed and recreated). Consumers that persist
+         * `event.filter` as an immutable record should snapshot it first (e.g. via `KbqFilterBar.saveFilterState`
+         * or a structural copy) — otherwise later in-place pipe edits will mutate the stored reference.
+         */
+        this.onSave = output();
         /** Event that is generated whenever the user change a filter. */
-        this.onChangeFilter = new EventEmitter();
-        /** Event that is generated whenever the user saves a filter as new.
-         * @deprecated use onSave with status = newFilter. */
-        this.onSaveAsNew = new EventEmitter();
+        this.onChangeFilter = output();
         /** Event that is generated whenever the user remove a filter. */
-        this.onRemoveFilter = new EventEmitter();
+        this.onRemoveFilter = output();
         /** Event that is generated whenever the user reset a filter changes. */
-        this.onResetFilterChanges = new EventEmitter();
+        this.onResetFilterChanges = output();
         this._focusOrigin = null;
-        this.closePopover = (restoreFocus = true) => {
-            this.popover.hide();
-            if (restoreFocus)
-                this.restoreFocus();
-            setTimeout(() => this.changeDetectorRef.detectChanges());
-            this.showFilterSavingError = false;
-        };
-        this.filterBar.changes.subscribe(() => this.changeDetectorRef.markForCheck());
+    }
+    /** Component state. true if opened dropdown or popup */
+    get opened() {
+        return !!(this.popover()?.isOpen || this.dropdown()?.opened);
+    }
+    /** Component state. true if opened dropdown or popup of filterActions */
+    get filterActionsOpened() {
+        return !!(this.popover()?.isOpen || this.filterActionsDropdown()?.opened);
+    }
+    /** Selected filter. Kept as a plain getter facade over the bar's `filter` model. */
+    get filter() {
+        return this.filterBar.filter();
+    }
+    /** Component state. True if 'filters' input contains no elements. */
+    get isEmpty() {
+        return this.filters().length === 0;
+    }
+    /** localized data
+     * @docs-private */
+    get localeData() {
+        return this.filterBar.configuration.filters;
+    }
+    /** Current focus origin state.
+     * @docs-private */
+    get focusOrigin() {
+        return this._focusOrigin;
     }
     ngOnInit() {
-        this.filteredOptions = merge(of(this.filters), this.searchControl.valueChanges.pipe(map((value) => this.getFilteredOptions(value))));
+        this.filteredOptions = merge(of(this.filters()), this.searchControl.valueChanges.pipe(map((value) => this.getFilteredOptions(value))));
         this.focusMonitor
             .monitor(this.elementRef, true)
             .pipe(filter((origin) => !!origin), takeUntilDestroyed(this.destroyRef))
@@ -1751,82 +1890,48 @@ class KbqFilters {
         return this.focusedElementBeforeOpen === button;
     }
     selectFilter(filter) {
-        this.filterBar.internalFilterChanges.next(structuredClone(filter));
-        this.onSelectFilter.next(filter);
+        // Isolate the active filter from the saved source with a shallow structural copy (new filter object
+        // + new pipes array + per-pipe shallow copy) instead of a deep `structuredClone`. Every pipe writes
+        // its `value` by reassignment (never in-place mutation), so this fully isolates subsequent edits
+        // while preserving any non-cloneable payload inside `value`. `structuredClone` (P2-20) is reserved
+        // for the explicit save/restore boundary (`KbqFilterBar.saveFilterState`/`restoreFilterState`).
+        this.filterBar.internalFilterChanges.next({ ...filter, pipes: filter.pipes.map((pipe) => ({ ...pipe })) });
+        this.onSelectFilter.emit(filter);
     }
     saveChanges() {
-        if (!this.filterBar.filter)
+        const current = this.filterBar.filter();
+        if (!current)
             return;
-        this.filterBar.filter.saved = true;
-        this.filterBar.filter.changed = false;
-        this.filterBar.internalFilterChanges.next(this.filterBar.filter);
+        // Immutable update (new reference) so the `filter` signal reacts; `internalFilterChanges` sets the
+        // signal and emits `filterChange`.
+        const updated = { ...current, saved: true, changed: false };
+        this.filterBar.internalFilterChanges.next(updated);
         this.onSave.emit({
-            filter: this.filterBar.filter,
+            filter: updated,
             filterBar: this.filterBar,
             status: KbqSaveFilterStatuses.OnlyChanges
         });
     }
-    saveAsNew(event) {
-        if (this.filterName.invalid)
-            return;
-        const name = this.filterName.value || '';
-        // @todo default filter
-        const filter = structuredClone(this.filter) || { pipes: [] };
-        filter.name = name;
-        filter.saved = true;
-        filter.changed = false;
-        this.isSaving = true;
-        this.popover.preventClose = true;
-        this.filterName.disable();
-        if (this.saveNewFilter) {
-            this.onSaveAsNew.emit({ filter, filterBar: this.filterBar });
-            this.onSave.emit({ filter, filterBar: this.filterBar, status: KbqSaveFilterStatuses.NewFilter });
-        }
-        else {
-            this.onSave.emit({ filter, filterBar: this.filterBar, status: KbqSaveFilterStatuses.NewName });
-        }
-        event?.preventDefault();
-    }
-    showError(error) {
-        if (error?.nameAlreadyExists) {
-            this.filterName.setErrors({ filterNameAlreadyExist: true });
-        }
-        this.showFilterSavingError = true;
-        this.filterSavingErrorText = error?.text ?? this.filterBar.configuration.filters.errorHint;
-    }
     restoreFocus() {
-        if (this.focusedElementBeforeOpen && !this.focusedElementBeforeOpen.disabled) {
-            this.focusMonitor.focusVia(this.focusedElementBeforeOpen.elementRef, this.focusOrigin);
-            this.focusedElementBeforeOpen = null;
+        // The popover can be opened from the dropdown item or programmatically, paths that never
+        // capture a trigger via `saveFocusedElement`. Fall back to the main button so focus returns
+        // to the filters control instead of being dropped on `<body>` (WCAG 2.4.3).
+        const target = this.focusedElementBeforeOpen ?? this.mainButton();
+        if (target && !target.disabled) {
+            this.focusMonitor.focusVia(target.elementRef, this.focusOrigin);
         }
-    }
-    preparePopover() {
-        this.filterName = new FormControl(this.filter?.name || '', Validators.required);
-        this.filterName.valueChanges.pipe(distinctUntilChanged()).subscribe(() => (this.showFilterSavingError = false));
-        this.popover.show();
-        merge(...this.popover.defaultClosingActions())
-            .pipe(filter(() => !this.isSaving), takeUntilDestroyed(this.popover.instanceDestroyRef))
-            .subscribe(() => this.closePopover(false));
-        this.popover.visibleChange
-            .pipe(filter((state) => !state), takeUntilDestroyed(this.popover.instanceDestroyRef))
-            .subscribe(this.closePopover);
-        setTimeout(() => {
-            this.newFilterName.nativeElement.focus();
-            this.filterName.setErrors(null);
-        });
-    }
-    openSaveAsNewFilterPopover() {
-        this.saveNewFilter = true;
-        this.preparePopover();
-    }
-    openChangeFilterNamePopover() {
-        this.saveNewFilter = false;
-        this.preparePopover();
+        this.focusedElementBeforeOpen = null;
     }
     /** @docs-private */
     saveFocusedElement(button) {
         this.focusedElementBeforeOpen = button || null;
     }
+    /** Restore focus when the save popover reports it closed. @docs-private */
+    onSavePopoverClosed(restoreFocus) {
+        if (restoreFocus)
+            this.restoreFocus();
+        this.changeDetectorRef.markForCheck();
+    }
     /** @docs-private */
     stopEventPropagation(event) {
         event.stopPropagation();
@@ -1843,44 +1948,100 @@ class KbqFilters {
     /** @docs-private */
     onDropdownOpen() {
         this.searchControl.setValue(null);
-        setTimeout(() => this.search.nativeElement.focus());
+        setTimeout(() => this.search().nativeElement.focus());
     }
     resetFilterChanges() {
         this.filterBar.resetFilterChangedState();
         this.onResetFilterChanges.emit(this.filter);
     }
     removeFilter() {
-        this.onRemoveFilter.next(this.filter);
-        setTimeout(() => this.focusMonitor.focusVia(this.mainButton.elementRef, this.focusOrigin), 0);
+        this.onRemoveFilter.emit(this.filter);
+        setTimeout(() => this.focusMonitor.focusVia(this.mainButton().elementRef, this.focusOrigin), 0);
     }
     /** Hide the popup and restore focus.
-     * Use this method in the onSave, onSaveAsNew, or onChangeFilter events after the data has been successfully saved. */
+     * Use this method in the onSave or onChangeFilter events after the data has been successfully saved. */
     filterSavedSuccessfully() {
-        this.isSaving = false;
-        this.popover.preventClose = false;
-        this.popover.hide();
+        this.savePopover().savedSuccessfully();
         setTimeout(() => this.restoreFocus(), 0);
         this.changeDetectorRef.markForCheck();
     }
-    /** Shows an error. Use this method in the onSave, onSaveAsNew, or onChangeFilter events if saving data failed. */
+    /** Shows an error. Use this method in the onSave or onChangeFilter events if saving data failed. */
     filterSavedUnsuccessfully(error) {
-        this.isSaving = false;
-        this.popover.preventClose = false;
+        // Re-enable the name control FIRST: `enable()` re-runs the control's validators and would wipe a
+        // custom `filterNameAlreadyExist` error set beforehand, so apply the error AFTER re-enabling —
+        // otherwise the inline "name already exists" message never renders.
+        this.savePopover().savedUnsuccessfully();
         this.showError(error);
-        this.filterName.enable();
-        setTimeout(() => this.saveFilterButton.focus());
         this.changeDetectorRef.markForCheck();
     }
+    // Delegating facade to the extracted `KbqFilterSavePopover`: the save-popover state, templates and
+    // logic live in that child; these members keep `KbqFilters`' public surface for callers and the template.
+    /** @docs-private */
+    get filterName() {
+        return this.savePopover().filterName;
+    }
+    /** @docs-private */
+    get saveNewFilter() {
+        return this.savePopover().saveNewFilter;
+    }
+    /** @docs-private */
+    set saveNewFilter(value) {
+        this.savePopover().saveNewFilter = value;
+    }
+    /** @docs-private */
+    get isSaving() {
+        return this.savePopover().isSaving;
+    }
+    /** @docs-private */
+    set isSaving(value) {
+        this.savePopover().isSaving = value;
+    }
+    /** @docs-private */
+    get showFilterSavingError() {
+        return this.savePopover().showFilterSavingError;
+    }
+    /** @docs-private */
+    set showFilterSavingError(value) {
+        this.savePopover().showFilterSavingError = value;
+    }
+    /** @docs-private */
+    get filterSavingErrorText() {
+        return this.savePopover().filterSavingErrorText;
+    }
+    /** header of popover. Depends on the mode
+     * @docs-private */
+    get popoverHeader() {
+        return this.savePopover().popoverHeader;
+    }
+    /** @docs-private */
+    openSaveAsNewFilterPopover() {
+        this.savePopover().openSaveAsNewFilterPopover();
+    }
+    /** @docs-private */
+    openChangeFilterNamePopover() {
+        this.savePopover().openChangeFilterNamePopover();
+    }
+    /** @docs-private */
+    saveAsNew(event) {
+        this.savePopover().saveAsNew(event);
+    }
+    /** @docs-private */
+    showError(error) {
+        this.savePopover().showError(error);
+    }
+    /** @docs-private */
+    closePopover(restoreFocus = true) {
+        this.savePopover().close(restoreFocus);
+    }
     getFilteredOptions(value) {
-        const searchFilter = value && value.new ? value.value : value;
-        return searchFilter
-            ? this.filters.filter((filter) => filter.name.toLowerCase().includes(searchFilter.toLowerCase()))
-            : this.filters;
+        return value
+            ? this.filters().filter((filter) => filter.name.toLowerCase().includes(value.toLowerCase()))
+            : this.filters();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFilters, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqFilters, isStandalone: true, selector: "kbq-filters", inputs: { filters: "filters" }, outputs: { onSelectFilter: "onSelectFilter", onSave: "onSave", onChangeFilter: "onChangeFilter", onSaveAsNew: "onSaveAsNew", onRemoveFilter: "onRemoveFilter", onResetFilterChanges: "onResetFilterChanges" }, host: { classAttribute: "kbq-filters" }, viewQueries: [{ propertyName: "mainButton", first: true, predicate: ["mainButton"], descendants: true }, { propertyName: "saveNewFilterButton", first: true, predicate: ["saveNewFilterButton"], descendants: true }, { propertyName: "filterActionsButton", first: true, predicate: ["filterActionsButton"], descendants: true }, { propertyName: "popover", first: true, predicate: KbqPopoverTrigger, descendants: true }, { propertyName: "dropdown", first: true, predicate: KbqDropdownTrigger, descendants: true }, { propertyName: "filterActionsDropdown", first: true, predicate: ["filterActionsButton"], descendants: true }, { propertyName: "search", first: true, predicate: ["search"], descendants: true }, { propertyName: "newFilterName", first: true, predicate: ["newFilterName"], descendants: true }, { propertyName: "saveFilterButton", first: true, predicate: ["saveFilterButton"], descendants: true }], exportAs: ["kbqFilters"], ngImport: i0, template: "<button\n    #mainButton\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    [kbqPopoverContent]=\"saveAsNewPopoverContent\"\n    [kbqPopoverFooter]=\"saveAsNewPopoverFooter\"\n    [kbqPopoverHeader]=\"saveAsNewPopoverHeader\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    [kbqPopoverSize]=\"popoverSize\"\n    [kbqTrigger]=\"'manual'\"\n    [disabled]=\"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                {{ localeData.defaultName }}\n            </ng-content>\n        }\n    </span>\n</button>\n\n@if (filterBar.isChanged && !filterBar.isSaved) {\n    <button\n        #saveNewFilterButton\n        kbqTooltip=\"{{ localeData.saveNewFilterTooltip }}\"\n        kbq-button\n        kbqFilterBarButton\n        class=\"kbq-button_action\"\n        [class.kbq-active]=\"focusedElementBeforeIs(saveNewFilterButton) && opened\"\n        [color]=\"colors.Empty\"\n        [disabled]=\"isSaving\"\n        (click)=\"openSaveAsNewFilterPopover()\"\n    >\n        <i kbq-icon=\"kbq-floppy-disk_16\"></i>\n    </button>\n}\n\n@if (filterBar.isSaved) {\n    <button\n        #filterActionsButton\n        kbq-button\n        kbqFilterBarButton\n        class=\"kbq-button_action\"\n        [color]=\"colors.Empty\"\n        [kbqDropdownTriggerFor]=\"filterActions\"\n        [disabled]=\"isSaving\"\n        [class.kbq-active]=\"focusedElementBeforeIs(filterActionsButton) && filterActionsOpened\"\n        [ngClass]=\"{ 'kbq-button_changed-saved-filter': filterBar.isSavedAndChanged }\"\n    >\n        <i kbq-icon=\"kbq-ellipsis-vertical_16\"></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 kbqFormFieldWithoutBorders>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n\n            <input\n                #search\n                placeholder=\"{{ localeData.searchPlaceholder }}\"\n                autocomplete=\"off\"\n                kbqInput\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 | async; 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                {{ localeData.searchEmptyResult }}\n            </button>\n        }\n\n        <kbq-divider />\n    </div>\n\n    <button kbq-dropdown-item (click)=\"openSaveAsNewFilterPopover()\">\n        <i kbq-icon=\"kbq-plus_16\"></i>\n        {{ localeData.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            [ngClass]=\"{ 'kbq-button_changed-saved-filter': filterBar.isSavedAndChanged }\"\n            (click)=\"saveChanges()\"\n        >\n            <i kbq-icon=\"kbq-floppy-disk_16\"></i>\n            {{ localeData.saveChanges }}\n            @if (filterBar.isSavedAndChanged) {\n                <i kbq-icon=\"kbq-circle-xs_16\" class=\"kbq-icon-button kbq-warning layout-margin-left-xs\"></i>\n            }\n        </button>\n    }\n    <button kbq-dropdown-item (click)=\"openSaveAsNewFilterPopover()\">\n        <i kbq-icon=\"kbq-plus_16\"></i>\n        {{ localeData.saveAsNew }}\n    </button>\n\n    @if (!filterBar.isReadOnly) {\n        <button kbq-dropdown-item (click)=\"openChangeFilterNamePopover()\">\n            <i kbq-icon=\"kbq-pencil_16\"></i>\n            {{ localeData.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            {{ localeData.resetChanges }}\n        </button>\n    }\n    @if (!filterBar.isReadOnly) {\n        <button kbq-dropdown-item (click)=\"removeFilter()\">\n            <i kbq-icon=\"kbq-trash_16\"></i>\n            {{ localeData.remove }}\n        </button>\n    }\n</kbq-dropdown>\n\n<ng-template #saveAsNewPopoverHeader>{{ popoverHeader }}</ng-template>\n\n<ng-template #saveAsNewPopoverContent>\n    @if (showFilterSavingError) {\n        <kbq-alert class=\"layout-margin-bottom-m\" [alertColor]=\"'error'\" [alertStyle]=\"'colored'\" [compact]=\"true\">\n            {{ filterSavingErrorText }}\n        </kbq-alert>\n    }\n    <div class=\"kbq-form-vertical\">\n        <div class=\"kbq-form__row\">\n            <label class=\"kbq-form__label\">{{ localeData.name }}</label>\n\n            <kbq-form-field class=\"kbq-form__control\">\n                <input\n                    #newFilterName\n                    kbqInput\n                    type=\"text\"\n                    [formControl]=\"filterName\"\n                    (keydown.enter)=\"saveAsNew($event)\"\n                />\n\n                @if (filterName.hasError('filterNameAlreadyExist')) {\n                    <kbq-error>{{ localeData.error }}</kbq-error>\n                }\n            </kbq-form-field>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #saveAsNewPopoverFooter>\n    <button\n        #saveFilterButton\n        kbq-button\n        class=\"layout-margin-right-l\"\n        [class.kbq-progress]=\"isSaving\"\n        [disabled]=\"isSaving\"\n        [color]=\"'contrast'\"\n        [kbqStyle]=\"'filled'\"\n        (click)=\"saveAsNew()\"\n    >\n        {{ localeData.saveButton }}\n    </button>\n    <button\n        kbq-button\n        [color]=\"'contrast-fade'\"\n        [kbqStyle]=\"'filled'\"\n        [disabled]=\"isSaving\"\n        (click)=\"closePopover(true)\"\n    >\n        {{ localeData.cancelButton }}\n    </button>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-filters{display:flex}.kbq-filters>.kbq-button{max-width:320px}.kbq-filters>.kbq-button .kbq-button-wrapper{width:100%}.kbq-filters>.kbq-button .kbq-icon{margin-right: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-left:calc(var(--kbq-size-s) + var(--kbq-size-xs))!important;margin-right:var(--kbq-size-xs)!important}.kbq-filters .kbq-filter-bar__arrow{align-self:center;margin-left:var(--kbq-size-s)}.kbq-filters .kbq-button.kbq-button_changed-filter{border-bottom-right-radius:unset;border-top-right-radius:unset}.kbq-filters .kbq-button-icon{margin-left:-1px;border-bottom-left-radius:unset;border-top-left-radius:unset}.kbq-filters .kbq-button_changed-saved-filter:before{content:\"\";position:absolute;right:-4px;top:-4px;width:var(--kbq-size-s);height:var(--kbq-size-s);border:2px solid var(--kbq-background-bg);border-radius:var(--kbq-size-xs);background:var(--kbq-icon-warning)}.kbq-filters .kbq-button:not(:hover,.kbq-active)+.kbq-button_action:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:10px;width:1px;height:var(--kbq-size-m);background:var(--kbq-line-contrast-less)}.kbq-filters__save-as-new-filter-popover .kbq-popover__container{width:400px}.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-right:var(--kbq-size-s)}\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$2.KbqDropdown, selector: "kbq-dropdown", inputs: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i3$2.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled"], exportAs: ["kbqDropdownItem"] }, { kind: "directive", type: i3$2.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "demoteOverlay", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i4$1.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "inset", "paddings"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i5$2.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i2.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "component", type: i2.KbqError, selector: "kbq-error", exportAs: ["kbqError"] }, { kind: "directive", type: i2.KbqFormFieldWithoutBorders, selector: "kbq-form-field[kbqFormFieldWithoutBorders]", exportAs: ["kbqFormFieldWithoutBorders"] }, { kind: "directive", type: i2.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "directive", type: i2.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KbqFilterBarButton, selector: "[kbqFilterBarButton]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["forDisabledComponent", "ignoreTooltipPointerEvents", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["hideIfNotInViewPort", "kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: KbqFormsModule }, { kind: "directive", type: i6.KbqForm, selector: ".kbq-form-vertical, .kbq-form-horizontal", exportAs: ["kbqForm"] }, { kind: "directive", type: i6.KbqFormElement, selector: ".kbq-form__row, .kbq-form__fieldset, .kbq-form__legend", exportAs: ["kbqFormElement"] }, { kind: "ngmodule", type: KbqAlertModule }, { kind: "component", type: i10.KbqAlert, selector: "kbq-alert", inputs: ["compact", "alertStyle", "alertColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFilters, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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" }, 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: "<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                {{ localeData.defaultName }}\n            </ng-content>\n        }\n    </span>\n</button>\n\n@if (filterBar.isChanged() && !filterBar.isSaved()) {\n    <button\n        #saveNewFilterButton\n        kbqTooltip=\"{{ localeData.saveNewFilterTooltip }}\"\n        kbq-button\n        kbqFilterBarButton\n        class=\"kbq-button_action\"\n        [attr.aria-label]=\"localeData.saveNewFilterTooltip\"\n        [class.kbq-active]=\"focusedElementBeforeIs(saveNewFilterButton) && opened\"\n        [color]=\"colors.Empty\"\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]=\"localeData.actionsTooltip\"\n        [color]=\"colors.Empty\"\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=\"{{ localeData.searchPlaceholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                [attr.aria-label]=\"localeData.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 | async; 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                {{ localeData.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        {{ localeData.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            {{ localeData.saveChanges }}\n            @if (filterBar.isSavedAndChanged()) {\n                <i kbq-icon=\"kbq-circle-xs_16\" class=\"kbq-icon-button kbq-warning layout-margin-left-xs\"></i>\n            }\n        </button>\n    }\n    <button kbq-dropdown-item (click)=\"savePopover.openSaveAsNewFilterPopover()\">\n        <i kbq-icon=\"kbq-plus_16\"></i>\n        {{ localeData.saveAsNew }}\n    </button>\n\n    @if (!filterBar.isReadOnly()) {\n        <button kbq-dropdown-item (click)=\"savePopover.openChangeFilterNamePopover()\">\n            <i kbq-icon=\"kbq-pencil_16\"></i>\n            {{ localeData.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            {{ localeData.resetChanges }}\n        </button>\n    }\n    @if (!filterBar.isReadOnly()) {\n        <button kbq-dropdown-item (click)=\"removeFilter()\">\n            <i kbq-icon=\"kbq-trash_16\"></i>\n            {{ localeData.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: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-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-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{margin-inline-start:-1px;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: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i3$1.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled"], exportAs: ["kbqDropdownItem"] }, { kind: "directive", type: i3$1.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "demoteOverlay", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i4$1.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "paddings"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i2$1.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.KbqInput, selector: "input[kbqInput],input[kbqNumberInput]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "type", "value"], exportAs: ["kbqInput"] }, { kind: "component", type: i5.KbqCleaner, selector: "kbq-cleaner", 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: ["forDisabledComponent", "ignoreTooltipPointerEvents", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipModifier", "kbqTooltipHeader"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5$1.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["hideIfNotInViewPort", "kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], 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"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFilters, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFilters, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-filters', imports: [
                         ReactiveFormsModule,
@@ -1889,132 +2050,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqDividerModule,
                         KbqIcon,
                         KbqTitleModule,
-                        KbqFormFieldModule,
                         KbqInputModule,
-                        NgClass,
                         KbqFilterBarButton,
                         AsyncPipe,
                         KbqTooltipTrigger,
                         KbqPopoverModule,
                         FormsModule,
                         KbqFormsModule,
-                        KbqAlertModule
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqFilters', host: {
+                        KbqFilterSavePopover
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-filters'
-                    }, template: "<button\n    #mainButton\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    [kbqPopoverContent]=\"saveAsNewPopoverContent\"\n    [kbqPopoverFooter]=\"saveAsNewPopoverFooter\"\n    [kbqPopoverHeader]=\"saveAsNewPopoverHeader\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    [kbqPopoverSize]=\"popoverSize\"\n    [kbqTrigger]=\"'manual'\"\n    [disabled]=\"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                {{ localeData.defaultName }}\n            </ng-content>\n        }\n    </span>\n</button>\n\n@if (filterBar.isChanged && !filterBar.isSaved) {\n    <button\n        #saveNewFilterButton\n        kbqTooltip=\"{{ localeData.saveNewFilterTooltip }}\"\n        kbq-button\n        kbqFilterBarButton\n        class=\"kbq-button_action\"\n        [class.kbq-active]=\"focusedElementBeforeIs(saveNewFilterButton) && opened\"\n        [color]=\"colors.Empty\"\n        [disabled]=\"isSaving\"\n        (click)=\"openSaveAsNewFilterPopover()\"\n    >\n        <i kbq-icon=\"kbq-floppy-disk_16\"></i>\n    </button>\n}\n\n@if (filterBar.isSaved) {\n    <button\n        #filterActionsButton\n        kbq-button\n        kbqFilterBarButton\n        class=\"kbq-button_action\"\n        [color]=\"colors.Empty\"\n        [kbqDropdownTriggerFor]=\"filterActions\"\n        [disabled]=\"isSaving\"\n        [class.kbq-active]=\"focusedElementBeforeIs(filterActionsButton) && filterActionsOpened\"\n        [ngClass]=\"{ 'kbq-button_changed-saved-filter': filterBar.isSavedAndChanged }\"\n    >\n        <i kbq-icon=\"kbq-ellipsis-vertical_16\"></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 kbqFormFieldWithoutBorders>\n            <i kbq-icon=\"kbq-magnifying-glass_16\" kbqPrefix></i>\n\n            <input\n                #search\n                placeholder=\"{{ localeData.searchPlaceholder }}\"\n                autocomplete=\"off\"\n                kbqInput\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 | async; 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                {{ localeData.searchEmptyResult }}\n            </button>\n        }\n\n        <kbq-divider />\n    </div>\n\n    <button kbq-dropdown-item (click)=\"openSaveAsNewFilterPopover()\">\n        <i kbq-icon=\"kbq-plus_16\"></i>\n        {{ localeData.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            [ngClass]=\"{ 'kbq-button_changed-saved-filter': filterBar.isSavedAndChanged }\"\n            (click)=\"saveChanges()\"\n        >\n            <i kbq-icon=\"kbq-floppy-disk_16\"></i>\n            {{ localeData.saveChanges }}\n            @if (filterBar.isSavedAndChanged) {\n                <i kbq-icon=\"kbq-circle-xs_16\" class=\"kbq-icon-button kbq-warning layout-margin-left-xs\"></i>\n            }\n        </button>\n    }\n    <button kbq-dropdown-item (click)=\"openSaveAsNewFilterPopover()\">\n        <i kbq-icon=\"kbq-plus_16\"></i>\n        {{ localeData.saveAsNew }}\n    </button>\n\n    @if (!filterBar.isReadOnly) {\n        <button kbq-dropdown-item (click)=\"openChangeFilterNamePopover()\">\n            <i kbq-icon=\"kbq-pencil_16\"></i>\n            {{ localeData.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            {{ localeData.resetChanges }}\n        </button>\n    }\n    @if (!filterBar.isReadOnly) {\n        <button kbq-dropdown-item (click)=\"removeFilter()\">\n            <i kbq-icon=\"kbq-trash_16\"></i>\n            {{ localeData.remove }}\n        </button>\n    }\n</kbq-dropdown>\n\n<ng-template #saveAsNewPopoverHeader>{{ popoverHeader }}</ng-template>\n\n<ng-template #saveAsNewPopoverContent>\n    @if (showFilterSavingError) {\n        <kbq-alert class=\"layout-margin-bottom-m\" [alertColor]=\"'error'\" [alertStyle]=\"'colored'\" [compact]=\"true\">\n            {{ filterSavingErrorText }}\n        </kbq-alert>\n    }\n    <div class=\"kbq-form-vertical\">\n        <div class=\"kbq-form__row\">\n            <label class=\"kbq-form__label\">{{ localeData.name }}</label>\n\n            <kbq-form-field class=\"kbq-form__control\">\n                <input\n                    #newFilterName\n                    kbqInput\n                    type=\"text\"\n                    [formControl]=\"filterName\"\n                    (keydown.enter)=\"saveAsNew($event)\"\n                />\n\n                @if (filterName.hasError('filterNameAlreadyExist')) {\n                    <kbq-error>{{ localeData.error }}</kbq-error>\n                }\n            </kbq-form-field>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #saveAsNewPopoverFooter>\n    <button\n        #saveFilterButton\n        kbq-button\n        class=\"layout-margin-right-l\"\n        [class.kbq-progress]=\"isSaving\"\n        [disabled]=\"isSaving\"\n        [color]=\"'contrast'\"\n        [kbqStyle]=\"'filled'\"\n        (click)=\"saveAsNew()\"\n    >\n        {{ localeData.saveButton }}\n    </button>\n    <button\n        kbq-button\n        [color]=\"'contrast-fade'\"\n        [kbqStyle]=\"'filled'\"\n        [disabled]=\"isSaving\"\n        (click)=\"closePopover(true)\"\n    >\n        {{ localeData.cancelButton }}\n    </button>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-filters{display:flex}.kbq-filters>.kbq-button{max-width:320px}.kbq-filters>.kbq-button .kbq-button-wrapper{width:100%}.kbq-filters>.kbq-button .kbq-icon{margin-right: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-left:calc(var(--kbq-size-s) + var(--kbq-size-xs))!important;margin-right:var(--kbq-size-xs)!important}.kbq-filters .kbq-filter-bar__arrow{align-self:center;margin-left:var(--kbq-size-s)}.kbq-filters .kbq-button.kbq-button_changed-filter{border-bottom-right-radius:unset;border-top-right-radius:unset}.kbq-filters .kbq-button-icon{margin-left:-1px;border-bottom-left-radius:unset;border-top-left-radius:unset}.kbq-filters .kbq-button_changed-saved-filter:before{content:\"\";position:absolute;right:-4px;top:-4px;width:var(--kbq-size-s);height:var(--kbq-size-s);border:2px solid var(--kbq-background-bg);border-radius:var(--kbq-size-xs);background:var(--kbq-icon-warning)}.kbq-filters .kbq-button:not(:hover,.kbq-active)+.kbq-button_action:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:10px;width:1px;height:var(--kbq-size-m);background:var(--kbq-line-contrast-less)}.kbq-filters__save-as-new-filter-popover .kbq-popover__container{width:400px}.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-right:var(--kbq-size-s)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { mainButton: [{
-                type: ViewChild,
-                args: ['mainButton']
-            }], saveNewFilterButton: [{
-                type: ViewChild,
-                args: ['saveNewFilterButton']
-            }], filterActionsButton: [{
-                type: ViewChild,
-                args: ['filterActionsButton']
-            }], popover: [{
-                type: ViewChild,
-                args: [KbqPopoverTrigger]
-            }], dropdown: [{
-                type: ViewChild,
-                args: [KbqDropdownTrigger]
-            }], filterActionsDropdown: [{
-                type: ViewChild,
-                args: ['filterActionsButton']
-            }], search: [{
-                type: ViewChild,
-                args: ['search']
-            }], newFilterName: [{
-                type: ViewChild,
-                args: ['newFilterName']
-            }], saveFilterButton: [{
-                type: ViewChild,
-                args: ['saveFilterButton']
-            }], filters: [{
-                type: Input
-            }], onSelectFilter: [{
-                type: Output
-            }], onSave: [{
-                type: Output
-            }], onChangeFilter: [{
-                type: Output
-            }], onSaveAsNew: [{
-                type: Output
-            }], onRemoveFilter: [{
-                type: Output
-            }], onResetFilterChanges: [{
-                type: Output
-            }] } });
+                    }, exportAs: 'kbqFilters', template: "<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                {{ localeData.defaultName }}\n            </ng-content>\n        }\n    </span>\n</button>\n\n@if (filterBar.isChanged() && !filterBar.isSaved()) {\n    <button\n        #saveNewFilterButton\n        kbqTooltip=\"{{ localeData.saveNewFilterTooltip }}\"\n        kbq-button\n        kbqFilterBarButton\n        class=\"kbq-button_action\"\n        [attr.aria-label]=\"localeData.saveNewFilterTooltip\"\n        [class.kbq-active]=\"focusedElementBeforeIs(saveNewFilterButton) && opened\"\n        [color]=\"colors.Empty\"\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]=\"localeData.actionsTooltip\"\n        [color]=\"colors.Empty\"\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=\"{{ localeData.searchPlaceholder }}\"\n                autocomplete=\"off\"\n                kbqInput\n                [attr.aria-label]=\"localeData.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 | async; 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                {{ localeData.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        {{ localeData.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            {{ localeData.saveChanges }}\n            @if (filterBar.isSavedAndChanged()) {\n                <i kbq-icon=\"kbq-circle-xs_16\" class=\"kbq-icon-button kbq-warning layout-margin-left-xs\"></i>\n            }\n        </button>\n    }\n    <button kbq-dropdown-item (click)=\"savePopover.openSaveAsNewFilterPopover()\">\n        <i kbq-icon=\"kbq-plus_16\"></i>\n        {{ localeData.saveAsNew }}\n    </button>\n\n    @if (!filterBar.isReadOnly()) {\n        <button kbq-dropdown-item (click)=\"savePopover.openChangeFilterNamePopover()\">\n            <i kbq-icon=\"kbq-pencil_16\"></i>\n            {{ localeData.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            {{ localeData.resetChanges }}\n        </button>\n    }\n    @if (!filterBar.isReadOnly()) {\n        <button kbq-dropdown-item (click)=\"removeFilter()\">\n            <i kbq-icon=\"kbq-trash_16\"></i>\n            {{ localeData.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: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}@media(prefers-reduced-motion:reduce){.kbq-progress:after{animation:none}}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-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-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{margin-inline-start:-1px;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"] }]
+        }], propDecorators: { mainButton: [{ type: i0.ViewChild, args: ['mainButton', { isSignal: true }] }], saveNewFilterButton: [{ type: i0.ViewChild, args: ['saveNewFilterButton', { isSignal: true }] }], filterActionsButton: [{ type: i0.ViewChild, args: ['filterActionsButton', { isSignal: true }] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqPopoverTrigger), { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqDropdownTrigger), { isSignal: true }] }], filterActionsDropdown: [{ type: i0.ViewChild, args: ['filterActionsButton', { isSignal: true }] }], savePopover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqFilterSavePopover), { isSignal: true }] }], search: [{ type: i0.ViewChild, args: ['search', { isSignal: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: true }] }], onSelectFilter: [{ type: i0.Output, args: ["onSelectFilter"] }], onSave: [{ type: i0.Output, args: ["onSave"] }], onChangeFilter: [{ type: i0.Output, args: ["onChangeFilter"] }], onRemoveFilter: [{ type: i0.Output, args: ["onRemoveFilter"] }], onResetFilterChanges: [{ type: i0.Output, args: ["onResetFilterChanges"] }] } });
 
 class KbqFilterBar {
-    /** Filter that is currently selected */
-    get filter() {
-        return this._filter;
-    }
-    set filter(value) {
-        if (this._filter === value)
-            return;
-        this._filter = value;
-        this.changes.next();
-    }
-    /** An array of templates that are used when adding a pipe. Also contains lists of options to select (values). */
-    get pipeTemplates() {
-        return this._templates;
-    }
-    set pipeTemplates(value) {
-        this._templates = value;
-        this.internalTemplatesChanges.next(this._templates);
-    }
-    /** Whether the current filter is saved and changed */
-    get isSavedAndChanged() {
-        return this.isSaved && this.isChanged;
-    }
-    /** Whether the current filter is saved */
-    get isSaved() {
-        return !!this.filter?.saved;
-    }
-    /** Whether the current filter is changed */
-    get isChanged() {
-        return !!this.filter?.changed;
-    }
-    /** Whether the current filter is readonly */
-    get isReadOnly() {
-        return !!this.filter?.readonly;
-    }
-    /** Whether the current filter is disabled */
-    get isDisabled() {
-        return !!this.filter?.disabled;
-    }
     constructor() {
         /** @docs-private */
         this.changeDetectorRef = inject(ChangeDetectorRef);
         /** @docs-private */
         this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
         this.externalConfiguration = inject(KBQ_FILTER_BAR_CONFIGURATION, { optional: true });
+        /** Localized strings and configuration for the filter-bar and its pipes. */
+        this.configuration = KBQ_FILTER_BAR_DEFAULT_CONFIGURATION;
+        /** @docs-private */
+        this.filters = contentChild(KbqFilters, ...(ngDevMode ? [{ debugName: "filters" }] : []));
+        /** @docs-private */
+        this.filterReset = contentChild(KbqFilterReset, ...(ngDevMode ? [{ debugName: "filterReset" }] : []));
         /**
          * This is special logic that unselect all items when all selected because "all selected = nothing selected".
          * Default is true
          * */
-        this.selectedAllEqualsSelectedNothing = true;
-        this._templates = [];
+        this.selectedAllEqualsSelectedNothing = input(true, ...(ngDevMode ? [{ debugName: "selectedAllEqualsSelectedNothing", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /**
-         * Event that emits whenever the raw value of the filter changes. This is here primarily
-         * to facilitate the two-way binding for the `filter` input.
-         * @docs-private
+         * Filter that is currently selected. A two-way-bindable `model()`: derived state (`isSaved`/`isChanged`/…)
+         * is exposed via `computed()` off it and change detection is driven by signal reactivity. `model()`
+         * auto-provides the `filterChange` output for `[(filter)]` two-way binding.
          */
-        this.filterChange = new EventEmitter();
+        this.filter = model(null, ...(ngDevMode ? [{ debugName: "filter" }] : []));
+        /** An array of templates that are used when adding a pipe. Also contains lists of options to select (values). */
+        this.pipeTemplates = input([], ...(ngDevMode ? [{ debugName: "pipeTemplates" }] : []));
         /** Event that emits whenever the value of the pipe changes. */
-        this.onChangePipe = new EventEmitter();
+        this.onChangePipe = output();
         /** Event that emits whenever the pipe deleted. */
-        this.onRemovePipe = new EventEmitter();
+        this.onRemovePipe = output();
         /** Event that emits whenever the pipe cleared. */
-        this.onClearPipe = new EventEmitter();
+        this.onClearPipe = output();
         /** Event that emits whenever the select or multiselect pipe closed. */
-        this.onClosePipe = new EventEmitter();
+        this.onClosePipe = output();
+        /** Whether the current filter is saved */
+        this.isSaved = computed(() => !!this.filter()?.saved, ...(ngDevMode ? [{ debugName: "isSaved" }] : []));
+        /** Whether the current filter is changed */
+        this.isChanged = computed(() => !!this.filter()?.changed, ...(ngDevMode ? [{ debugName: "isChanged" }] : []));
+        /** Whether the current filter is saved and changed */
+        this.isSavedAndChanged = computed(() => this.isSaved() && this.isChanged(), ...(ngDevMode ? [{ debugName: "isSavedAndChanged" }] : []));
+        /** Whether the current filter is readonly */
+        this.isReadOnly = computed(() => !!this.filter()?.readonly, ...(ngDevMode ? [{ debugName: "isReadOnly" }] : []));
+        /** Whether the current filter is disabled */
+        this.isDisabled = computed(() => !!this.filter()?.disabled, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
         this.savedFilter = null;
+        /**
+         * All changes.
+         * @deprecated noop. Reactivity is driven by the `filter` signal now; this never emits and will be
+         * removed in the next major.
+         */
+        this.changes = new BehaviorSubject(undefined);
         /** Event that emits whenever the filter is reset. */
         this.onResetFilter = new BehaviorSubject(false);
-        /** all changes */
-        this.changes = new BehaviorSubject(undefined);
         /** internal filter changes */
         this.internalFilterChanges = new BehaviorSubject(null);
         /** internal changes in templates */
@@ -2026,52 +2127,76 @@ class KbqFilterBar {
             this.configuration = this.externalConfiguration || this.localeService?.getParams('filterBar');
             this.changeDetectorRef.markForCheck();
         };
+        // Push template changes into the internal stream — replaces the retired `pipeTemplates` accessor
+        // setter side effect now that `pipeTemplates` is a signal `input()`.
+        effect(() => this.internalTemplatesChanges.next(this.pipeTemplates()));
         this.internalFilterChanges.pipe(takeUntilDestroyed()).subscribe((filter) => {
-            this._filter = filter;
-            this.filterChange.emit(this.filter);
+            // `model.set(...)` auto-emits `filterChange` for the two-way binding.
+            this.filter.set(filter);
         });
         this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
         if (!this.localeService) {
             this.initDefaultParams();
         }
-        merge(this.onChangePipe, this.onRemovePipe)
+        // A pipe value change marks the current filter as "changed". Produce a new filter reference (not an
+        // in-place mutation) so the `filter` model — and every `computed()`/`effect()` reading it — reacts.
+        // `removePipe` owns its own `changed` flag in a single `set` (one `filterChange` emission), so only
+        // `onChangePipe` feeds this subscriber. `model.set(...)` auto-emits `filterChange` for the binding.
+        outputToObservable(this.onChangePipe)
             .pipe(takeUntilDestroyed())
             .subscribe(() => {
-            if (this.filter) {
-                this.filter.changed = true;
-                this.filterChange.emit(this.filter);
+            const current = this.filter();
+            if (current) {
+                this.filter.set({ ...current, changed: true });
             }
         });
-        merge(this.filterChange, this.onChangePipe, this.onRemovePipe, this.internalFilterChanges)
-            .pipe(takeUntilDestroyed())
-            .subscribe(() => {
-            this.changes.next();
-            this.changeDetectorRef.markForCheck();
-        });
     }
     /** Remove pipe from current filter and emit event */
     removePipe(pipe) {
-        this.filter?.pipes.splice(this.filter?.pipes.indexOf(pipe), 1);
-        this.onRemovePipe.next(pipe);
-        this.changes.next();
+        const current = this.filter();
+        if (!current?.pipes.includes(pipe))
+            return;
+        // Replace the filter (and its `pipes` array) with new references instead of mutating in place, so the
+        // `filter` signal reacts; unknown pipes are left untouched. Fold in `changed: true` here — the removal
+        // IS the change — so it happens in a single `set` (one `filterChange` emission) rather than relying on
+        // `onRemovePipe` to trigger a second update.
+        this.filter.set({ ...current, changed: true, pipes: current.pipes.filter((item) => item !== pipe) });
+        this.onRemovePipe.emit(pipe);
     }
-    /** Save current state of filter */
+    /**
+     * Save current state of filter.
+     *
+     * Deep-clones the filter via `structuredClone`, so any pipe `value` payload handed to save/restore must be
+     * structured-cloneable (plain data — no functions, DOM nodes, class instances or `TemplateRef`s), otherwise
+     * `structuredClone` throws `DataCloneError`. All built-in pipes produce cloneable values.
+     */
     saveFilterState(filter) {
-        this.savedFilter = structuredClone(filter ?? this.filter);
+        this.savedFilter = structuredClone(filter ?? this.filter());
     }
-    /** Restore previously saved filter state */
+    /**
+     * Restore previously saved filter state.
+     *
+     * @see `saveFilterState` — pipe `value` payloads must be structured-cloneable.
+     */
     restoreFilterState(filter) {
-        this.filter = structuredClone(filter ?? this.savedFilter);
+        const state = filter ?? this.savedFilter;
+        // Nothing to restore — bail out instead of wiping the current filter with `structuredClone(null)`.
+        if (!state)
+            return;
+        this.filter.set(structuredClone(state));
     }
     /** Set the filter state "changed" to false */
     resetFilterChangedState() {
-        this.filter.changed = false;
+        const current = this.filter();
+        if (!current)
+            return;
+        this.filter.set({ ...current, changed: false });
     }
     initDefaultParams() {
         this.configuration = KBQ_FILTER_BAR_DEFAULT_CONFIGURATION;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFilterBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: KbqFilterBar, isStandalone: true, selector: "kbq-filter-bar, [kbq-filter-bar]", inputs: { selectedAllEqualsSelectedNothing: ["selectedAllEqualsSelectedNothing", "selectedAllEqualsSelectedNothing", booleanAttribute], filter: "filter", pipeTemplates: "pipeTemplates" }, outputs: { filterChange: "filterChange", onChangePipe: "onChangePipe", onRemovePipe: "onRemovePipe", onClearPipe: "onClearPipe", onClosePipe: "onClosePipe" }, host: { classAttribute: "kbq-filter-bar" }, queries: [{ propertyName: "filters", first: true, predicate: KbqFilters, descendants: true }, { propertyName: "filterReset", first: true, predicate: KbqFilterReset, descendants: true }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFilterBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqFilterBar, isStandalone: true, selector: "kbq-filter-bar, [kbq-filter-bar]", inputs: { selectedAllEqualsSelectedNothing: { classPropertyName: "selectedAllEqualsSelectedNothing", publicName: "selectedAllEqualsSelectedNothing", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, pipeTemplates: { classPropertyName: "pipeTemplates", publicName: "pipeTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "filterChange", onChangePipe: "onChangePipe", onRemovePipe: "onRemovePipe", onClearPipe: "onClearPipe", onClosePipe: "onClosePipe" }, host: { classAttribute: "kbq-filter-bar" }, providers: [{ provide: KBQ_FILTER_BAR_HOST, useExisting: forwardRef((() => KbqFilterBar)) }], queries: [{ propertyName: "filters", first: true, predicate: KbqFilters, descendants: true, isSignal: true }, { propertyName: "filterReset", first: true, predicate: KbqFilterReset, descendants: true, isSignal: true }], ngImport: i0, template: `
         <div class="kbq-filter-bar__left">
             <ng-content select="kbq-filters" />
 
@@ -2083,13 +2208,13 @@ class KbqFilterBar {
         </div>
 
         <div class="kbq-filter-bar__right">
-            <ng-content select="kbq-filter-search, [kbq-filter-search], kbq-search-expandable" />
+            <ng-content select="kbq-search-expandable" />
 
             <ng-content select="kbq-filter-refresher, [kbq-filter-refresher]" />
         </div>
-    `, isInline: true, styles: [".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-right: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-left:var(--kbq-size-3xl)}.kbq-pipe__popover .kbq-popover__container{min-width:320px;max-width:320px}.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-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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFilterBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFilterBar, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-filter-bar, [kbq-filter-bar]', imports: [KbqDividerModule], template: `
         <div class="kbq-filter-bar__left">
@@ -2103,255 +2228,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         </div>
 
         <div class="kbq-filter-bar__right">
-            <ng-content select="kbq-filter-search, [kbq-filter-search], kbq-search-expandable" />
+            <ng-content select="kbq-search-expandable" />
 
             <ng-content select="kbq-filter-refresher, [kbq-filter-refresher]" />
         </div>
-    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+    `, providers: [{ provide: KBQ_FILTER_BAR_HOST, useExisting: forwardRef((() => KbqFilterBar)) }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-filter-bar'
-                    }, styles: [".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-right: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-left:var(--kbq-size-3xl)}.kbq-pipe__popover .kbq-popover__container{min-width:320px;max-width:320px}.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"] }]
-        }], ctorParameters: () => [], propDecorators: { filters: [{
-                type: ContentChild,
-                args: [KbqFilters]
-            }], filterReset: [{
-                type: ContentChild,
-                args: [KbqFilterReset]
-            }], selectedAllEqualsSelectedNothing: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], filter: [{
-                type: Input
-            }], pipeTemplates: [{
-                type: Input
-            }], filterChange: [{
-                type: Output
-            }], onChangePipe: [{
-                type: Output
-            }], onRemovePipe: [{
-                type: Output
-            }], onClearPipe: [{
-                type: Output
-            }], onClosePipe: [{
-                type: Output
-            }] } });
-
-class KbqFilterBarRefresher {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFilterBarRefresher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqFilterBarRefresher, isStandalone: true, selector: "kbq-filter-refresher, [kbq-filter-refresher]", host: { classAttribute: "kbq-filter-refresher" }, ngImport: i0, template: `
-        <button kbq-button [color]="'contrast'" [kbqStyle]="'transparent'">
-            <i kbq-icon="kbq-arrow-rotate-right_16"></i>
-        </button>
-        <button kbq-button [color]="'contrast'" [kbqStyle]="'transparent'">
-            <i kbq-icon="kbq-chevron-down_16"></i>
-        </button>
-    `, isInline: true, styles: [".kbq-filter-refresher{display:flex;align-items:center;min-width:64px}\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: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFilterBarRefresher, decorators: [{
-            type: Component,
-            args: [{ selector: 'kbq-filter-refresher, [kbq-filter-refresher]', imports: [
-                        KbqButtonModule,
-                        KbqIconModule
-                    ], template: `
-        <button kbq-button [color]="'contrast'" [kbqStyle]="'transparent'">
-            <i kbq-icon="kbq-arrow-rotate-right_16"></i>
-        </button>
-        <button kbq-button [color]="'contrast'" [kbqStyle]="'transparent'">
-            <i kbq-icon="kbq-chevron-down_16"></i>
-        </button>
-    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'kbq-filter-refresher'
-                    }, styles: [".kbq-filter-refresher{display:flex;align-items:center;min-width:64px}\n"] }]
-        }] });
+                    }, styles: [".kbq-filter-bar{--kbq-filter-bar-pipe-max-width: 320px;--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"] }]
+        }], 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"] }] } });
 
-const defaultOnSearchTimeout = 0;
-/** @deprecated Will be removed in next major release. Use `kbq-search-expandable` instead. */
-class KbqFilterBarSearch {
+class KbqFilterRefresher {
     constructor() {
-        /** KbqFilterBar instance */
-        this.filterBar = inject(KbqFilterBar);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.destroyRef = inject(DestroyRef);
-        /** control for search */
-        this.searchControl = new UntypedFormControl();
-        /** Whether the search active */
-        this.isSearchActive = false;
-        /**
-        /** Timeout in milliseconds for emit event. The default value is taken from defaultOnSearchTimeout
-         * @default 0
-         */
-        this.onSearchTimeout = input(defaultOnSearchTimeout, { transform: numberAttribute });
-        /** Emit event by enter or not. Default is false */
-        this.emitValueByEnter = input(false, { transform: booleanAttribute });
-        /** Value of the field after initialization */
-        this.initialValue = input();
-        /** Custom tooltip text. When set, overrides localeData.tooltip */
-        this.customTooltip = input('', { alias: 'tooltip' });
-        /** Custom placeholder text. When set, overrides localeData.placeholder */
-        this.customPlaceholder = input('', { alias: 'placeholder' });
-        /** event that is generated whenever a user performs a search. */
-        this.onSearch = new EventEmitter();
-        /** @docs-private */
-        this.onReset = () => {
-            this.changeDetectorRef.markForCheck();
-        };
+        /** KbqFilterBar host seam */
+        this.filterBar = inject(KBQ_FILTER_BAR_HOST, { optional: true });
     }
     /** localized data
      * @docs-private */
     get localeData() {
-        return this.filterBar.configuration.search;
-    }
-    /** @docs-private */
-    get resolvedTooltip() {
-        return this.customTooltip() || this.localeData.tooltip;
-    }
-    /** @docs-private */
-    get resolvedPlaceholder() {
-        return this.customPlaceholder() || this.localeData.placeholder;
-    }
-    ngAfterViewInit() {
-        this.filterBar.filterReset?.onResetFilter.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(this.onReset);
-        if (this.initialValue()) {
-            this.searchControl.setValue(this.initialValue(), { emitEvent: false });
-        }
-        this.searchControl.valueChanges
-            .pipe(distinctUntilChanged$1(), filter(() => !this.emitValueByEnter()), debounceTime$1(this.onSearchTimeout()), takeUntilDestroyed(this.destroyRef))
-            .subscribe(this.onSearch);
-    }
-    openSearch() {
-        this.isSearchActive = true;
-        setTimeout(() => this.input.focus());
-    }
-    /** @docs-private */
-    onBlur() {
-        if (this.searchControl.value)
-            return;
-        this.onEscape();
-    }
-    /** @docs-private */
-    onEscape() {
-        this.isSearchActive = false;
-        this.button.focusViaKeyboard();
-        this.tooltip.hide();
-    }
-    /** @docs-private */
-    onEnter() {
-        if (this.emitValueByEnter()) {
-            this.onSearch.emit(this.searchControl.value);
-        }
-    }
-    /** @docs-private */
-    onClear() {
-        this.isSearchActive = false;
-        setTimeout(() => {
-            this.button.focus();
-            this.tooltip.hide();
-        });
+        return this.filterBar?.configuration ?? KBQ_FILTER_BAR_DEFAULT_CONFIGURATION;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFilterBarSearch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: KbqFilterBarSearch, isStandalone: true, selector: "kbq-filter-search, [kbq-filter-search]", inputs: { onSearchTimeout: { classPropertyName: "onSearchTimeout", publicName: "onSearchTimeout", isSignal: true, isRequired: false, transformFunction: null }, emitValueByEnter: { classPropertyName: "emitValueByEnter", publicName: "emitValueByEnter", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, customTooltip: { classPropertyName: "customTooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, customPlaceholder: { classPropertyName: "customPlaceholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "onSearch" }, host: { classAttribute: "kbq-filter-search" }, viewQueries: [{ propertyName: "input", first: true, predicate: KbqInput, descendants: true }, { propertyName: "button", first: true, predicate: KbqButton, descendants: true }, { propertyName: "tooltip", first: true, predicate: KbqTooltipTrigger, descendants: true }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFilterRefresher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: KbqFilterRefresher, isStandalone: true, selector: "kbq-filter-refresher, [kbq-filter-refresher]", host: { classAttribute: "kbq-filter-refresher" }, ngImport: i0, template: `
         <button
             kbq-button
-            [kbqTooltip]="resolvedTooltip"
-            [class.kbq-filter_hidden]="isSearchActive"
             [color]="'contrast'"
             [kbqStyle]="'transparent'"
-            (click)="openSearch()"
+            [attr.aria-label]="localeData.refresher.refresh"
         >
-            <i kbq-icon="kbq-magnifying-glass_16"></i>
+            <i kbq-icon="kbq-arrow-rotate-right_16" aria-hidden="true"></i>
         </button>
-
-        <kbq-form-field [class.kbq-filter_hidden]="!isSearchActive">
-            <i kbq-icon="kbq-magnifying-glass_16" kbqPrefix></i>
-
-            <input
-                autocomplete="off"
-                kbqInput
-                [placeholder]="resolvedPlaceholder"
-                [formControl]="searchControl"
-                (blur)="onBlur()"
-                (keydown.escape)="onEscape()"
-                (keydown.enter)="onEnter()"
-            />
-
-            <kbq-cleaner (click)="onClear()" />
-        </kbq-form-field>
-    `, isInline: true, styles: [".kbq-filter-search{display:flex;align-items:start}.kbq-filter-search .kbq-form-field{width:260px}.kbq-filter-search .kbq-filter_hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: KbqDividerModule }, { 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: KbqToolTipModule }, { kind: "directive", type: i2$1.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["forDisabledComponent", "ignoreTooltipPointerEvents", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i2.KbqCleaner, selector: "kbq-cleaner", exportAs: ["kbqCleaner"] }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i2.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "directive", type: i2.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.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 }); }
+        <button
+            kbq-button
+            [color]="'contrast'"
+            [kbqStyle]="'transparent'"
+            [attr.aria-label]="localeData.refresher.settings"
+        >
+            <i kbq-icon="kbq-chevron-down_16" aria-hidden="true"></i>
+        </button>
+    `, isInline: true, styles: [".kbq-filter-refresher{display:flex;align-items:center;min-width:var(--kbq-filter-bar-refresher-min-width, 64px)}\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: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFilterBarSearch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFilterRefresher, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-filter-search, [kbq-filter-search]', imports: [
-                        KbqDividerModule,
+            args: [{ selector: 'kbq-filter-refresher, [kbq-filter-refresher]', imports: [
                         KbqButtonModule,
-                        KbqToolTipModule,
-                        KbqIconModule,
-                        KbqFormFieldModule,
-                        KbqInputModule,
-                        ReactiveFormsModule
+                        KbqIconModule
                     ], template: `
         <button
             kbq-button
-            [kbqTooltip]="resolvedTooltip"
-            [class.kbq-filter_hidden]="isSearchActive"
             [color]="'contrast'"
             [kbqStyle]="'transparent'"
-            (click)="openSearch()"
+            [attr.aria-label]="localeData.refresher.refresh"
         >
-            <i kbq-icon="kbq-magnifying-glass_16"></i>
+            <i kbq-icon="kbq-arrow-rotate-right_16" aria-hidden="true"></i>
         </button>
-
-        <kbq-form-field [class.kbq-filter_hidden]="!isSearchActive">
-            <i kbq-icon="kbq-magnifying-glass_16" kbqPrefix></i>
-
-            <input
-                autocomplete="off"
-                kbqInput
-                [placeholder]="resolvedPlaceholder"
-                [formControl]="searchControl"
-                (blur)="onBlur()"
-                (keydown.escape)="onEscape()"
-                (keydown.enter)="onEnter()"
-            />
-
-            <kbq-cleaner (click)="onClear()" />
-        </kbq-form-field>
-    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'kbq-filter-search'
-                    }, styles: [".kbq-filter-search{display:flex;align-items:start}.kbq-filter-search .kbq-form-field{width:260px}.kbq-filter-search .kbq-filter_hidden{display:none}\n"] }]
-        }], propDecorators: { input: [{
-                type: ViewChild,
-                args: [KbqInput]
-            }], button: [{
-                type: ViewChild,
-                args: [KbqButton]
-            }], tooltip: [{
-                type: ViewChild,
-                args: [KbqTooltipTrigger]
-            }], onSearch: [{
-                type: Output
-            }] } });
+        <button
+            kbq-button
+            [color]="'contrast'"
+            [kbqStyle]="'transparent'"
+            [attr.aria-label]="localeData.refresher.settings"
+        >
+            <i kbq-icon="kbq-chevron-down_16" aria-hidden="true"></i>
+        </button>
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'kbq-filter-refresher'
+                    }, styles: [".kbq-filter-refresher{display:flex;align-items:center;min-width:var(--kbq-filter-bar-refresher-min-width, 64px)}\n"] }]
+        }] });
 
 class KbqPipeAdd {
     constructor() {
         /** KbqFilterBar instance */
-        this.filterBar = inject(KbqFilterBar);
+        this.filterBar = inject(KBQ_FILTER_BAR_HOST);
+        /** @docs-private */
+        this.select = viewChild.required(KbqSelect);
         /** Event that is generated after add pipe. */
-        this.onAddPipe = new EventEmitter();
+        this.onAddPipe = output();
         /** template of filter */
-        this.filterTemplate = {
+        this.filterTemplate = input({
             name: '',
             pipes: [],
             readonly: false,
             disabled: false,
             changed: false,
             saved: false
-        };
-        /** already added pipes. Used to open an already added pipe. */
-        this.addedPipes = [];
-        this.filterBar.changes.pipe(takeUntilDestroyed()).subscribe(() => {
-            if (this.filterBar?.filter) {
-                this.addedPipes = this.filterBar.filter.pipes.map((pipe) => getId(pipe));
-            }
-        });
+        }, ...(ngDevMode ? [{ debugName: "filterTemplate" }] : []));
+        /**
+         * Ids of the pipes already added to the current filter. Used to open an already-added pipe.
+         * Derived from the `filter` signal so it stays in sync without the retired `changes` bus.
+         */
+        this.addedPipes = computed(() => this.filterBar.filter()?.pipes.map((pipe) => getId(pipe)) ?? [], ...(ngDevMode ? [{ debugName: "addedPipes" }] : []));
+        /**
+         * Visually-hidden live-region text announcing a newly-added pipe to assistive tech (WCAG 4.1.3).
+         * @docs-private
+         */
+        this.announcement = signal('', ...(ngDevMode ? [{ debugName: "announcement" }] : []));
     }
     addPipeFromTemplate(option) {
         if (option.selected) {
@@ -2359,15 +2328,27 @@ class KbqPipeAdd {
         }
         else {
             option.select();
-            if (!this.filterBar.filter) {
-                this.filterBar.filter = structuredClone(this.filterTemplate);
-            }
-            this.filterBar.filter.changed = true;
-            this.filterBar.filter.pipes.push(Object.assign({}, option.value, { values: undefined, valueTemplate: undefined, openOnAdd: true }));
-            this.onAddPipe.next(option.value);
-            this.filterBar.filterChange.emit(this.filterBar.filter);
+            const current = this.filterBar.filter() ?? structuredClone(this.filterTemplate());
+            // Build a new filter reference (immutable add) so the `filter` model reacts; keep `pipes` on a
+            // new-reference-on-change model instead of an in-place push. `model.set(...)` auto-emits
+            // `filterChange` for the two-way binding.
+            this.filterBar.filter.set({
+                ...current,
+                changed: true,
+                pipes: [
+                    ...current.pipes,
+                    Object.assign({}, option.value, { values: undefined, valueTemplate: undefined, openOnAdd: true })
+                ]
+            });
+            this.onAddPipe.emit(option.value);
+            const message = this.filterBar.configuration.add.addedAnnouncement.replace('{{ name }}', option.value.name);
+            // Empty then re-fill on the next tick so an identical consecutive message still changes the
+            // live-region text node and is re-announced (a same-string `set` would be an `Object.is` no-op
+            // that assistive tech never picks up).
+            this.announcement.set('');
+            setTimeout(() => this.announcement.set(message));
         }
-        this.select.close();
+        this.select().close();
     }
     /**
      * Function to compare the option values with the selected values. The first argument
@@ -2377,35 +2358,41 @@ class KbqPipeAdd {
     compareWith(o1, o2) {
         return getId(o1) === o2;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeAdd, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqPipeAdd, isStandalone: true, selector: "kbq-pipe-add", inputs: { filterTemplate: "filterTemplate" }, outputs: { onAddPipe: "onAddPipe" }, host: { classAttribute: "kbq-pipe-add" }, viewQueries: [{ propertyName: "select", first: true, predicate: KbqSelect, descendants: true }], ngImport: i0, template: `
-        <kbq-select #select [tabIndex]="-1" [multiple]="true" [value]="addedPipes" [compareWith]="compareWith">
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeAdd, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqPipeAdd, isStandalone: true, selector: "kbq-pipe-add", inputs: { filterTemplate: { classPropertyName: "filterTemplate", publicName: "filterTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAddPipe: "onAddPipe" }, host: { classAttribute: "kbq-pipe-add" }, viewQueries: [{ propertyName: "select", first: true, predicate: KbqSelect, descendants: true, isSignal: true }], ngImport: i0, template: `
+        <kbq-select #select [tabIndex]="-1" [multiple]="true" [value]="addedPipes()" [compareWith]="compareWith">
             <button
                 kbqTooltip="{{ filterBar.configuration.add.tooltip }}"
                 kbq-button
                 kbq-select-matcher
+                [attr.aria-label]="filterBar.configuration.add.tooltip"
                 [color]="'contrast-fade'"
                 [kbqStyle]="'outline'"
-                [ngClass]="{ 'kbq-active': select.panelOpen }"
+                [class]="{ 'kbq-active': select.panelOpen }"
             >
-                <i kbq-icon="kbq-plus_16"></i>
+                <i kbq-icon="kbq-plus_16" aria-hidden="true"></i>
             </button>
 
-            @for (template of filterBar.pipeTemplates; track template) {
+            @for (template of filterBar.pipeTemplates(); track template) {
                 <kbq-option
                     #option
                     [userSelect]="true"
                     [value]="template"
                     [showCheckbox]="false"
                     (click)="addPipeFromTemplate(option)"
+                    (keydown.enter)="addPipeFromTemplate(option)"
+                    (keydown.space)="addPipeFromTemplate(option)"
                 >
                     {{ template.name }}
                 </kbq-option>
             }
         </kbq-select>
-    `, 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: i2$1.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["forDisabledComponent", "ignoreTooltipPointerEvents", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], 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: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqOptionModule }, { kind: "component", type: i6.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3$1.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3$1.KbqOptionTooltip, selector: "kbq-option" }, { kind: "directive", type: i6.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i2.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+
+        <!-- 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: ["forDisabledComponent", "ignoreTooltipPointerEvents", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipModifier", "kbqTooltipHeader"], 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: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqOptionModule }, { kind: "component", type: i9$1.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "selectAllToggle", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3.KbqOptionTooltip, selector: "kbq-option" }, { kind: "directive", type: i9$1.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: "19.2.21", ngImport: i0, type: KbqPipeAdd, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeAdd, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-add', imports: [
                         KbqDropdownModule,
@@ -2413,57 +2400,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqButtonModule,
                         KbqIcon,
                         KbqOptionModule,
-                        KbqSelectModule,
-                        NgClass
+                        KbqSelectModule
                     ], template: `
-        <kbq-select #select [tabIndex]="-1" [multiple]="true" [value]="addedPipes" [compareWith]="compareWith">
+        <kbq-select #select [tabIndex]="-1" [multiple]="true" [value]="addedPipes()" [compareWith]="compareWith">
             <button
                 kbqTooltip="{{ filterBar.configuration.add.tooltip }}"
                 kbq-button
                 kbq-select-matcher
+                [attr.aria-label]="filterBar.configuration.add.tooltip"
                 [color]="'contrast-fade'"
                 [kbqStyle]="'outline'"
-                [ngClass]="{ 'kbq-active': select.panelOpen }"
+                [class]="{ 'kbq-active': select.panelOpen }"
             >
-                <i kbq-icon="kbq-plus_16"></i>
+                <i kbq-icon="kbq-plus_16" aria-hidden="true"></i>
             </button>
 
-            @for (template of filterBar.pipeTemplates; track template) {
+            @for (template of filterBar.pipeTemplates(); track template) {
                 <kbq-option
                     #option
                     [userSelect]="true"
                     [value]="template"
                     [showCheckbox]="false"
                     (click)="addPipeFromTemplate(option)"
+                    (keydown.enter)="addPipeFromTemplate(option)"
+                    (keydown.space)="addPipeFromTemplate(option)"
                 >
                     {{ template.name }}
                 </kbq-option>
             }
         </kbq-select>
-    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+
+        <!-- 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>
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-pipe-add'
                     }, styles: [".kbq-pipe-add .kbq-select .kbq-select__trigger{height:unset}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { select: [{
-                type: ViewChild,
-                args: [KbqSelect]
-            }], onAddPipe: [{
-                type: Output
-            }], filterTemplate: [{
-                type: Input
-            }] } });
+        }], propDecorators: { select: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqSelect), { isSignal: true }] }], onAddPipe: [{ type: i0.Output, args: ["onAddPipe"] }], filterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTemplate", required: false }] }] } });
 
 class KbqPipeDirective {
     constructor() {
         this.injector = inject(Injector);
         this.pipes = inject(KBQ_FILTER_BAR_PIPES);
         this.viewContainerRef = inject(ViewContainerRef);
+        this.pipe = input(undefined, ...(ngDevMode ? [{ debugName: "pipe", alias: 'kbqPipe' }] : [{ alias: 'kbqPipe' }]));
     }
     ngAfterContentInit() {
-        const component = this.pipes.get(this.pipe.type);
+        const component = this.pipes.get(this.pipe().type);
         if (!component) {
-            throw new Error(`Can't find component for this type: ${this.pipe.type}`);
+            throw new Error(`Can't find component for this type: ${this.pipe().type}`);
         }
-        this.viewContainerRef.createComponent(component, { injector: this.getInjector(this.pipe) });
+        this.viewContainerRef.createComponent(component, { injector: this.getInjector(this.pipe()) });
     }
     getInjector(pipe) {
         return Injector.create({
@@ -2471,69 +2457,59 @@ class KbqPipeDirective {
             parent: this.injector
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqPipeDirective, isStandalone: true, selector: "[kbqPipe]", inputs: { pipe: ["kbqPipe", "pipe"] }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqPipeDirective, isStandalone: true, selector: "[kbqPipe]", inputs: { pipe: { classPropertyName: "pipe", publicName: "kbqPipe", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPipeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqPipe]'
                 }]
-        }], propDecorators: { pipe: [{
-                type: Input,
-                args: [{ alias: 'kbqPipe' }]
-            }] } });
+        }], propDecorators: { pipe: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqPipe", required: false }] }] } });
 
 const COMPONENTS = [
     KbqFilterBar,
     KbqFilters,
-    KbqFilterBarRefresher,
+    KbqFilterRefresher,
     KbqFilterBarButton,
     KbqFilterReset,
     KbqPipeAdd,
     KbqPipeDirective,
     KbqPipeButton,
-    KbqFilterBarSearch,
-    KbqPipeTitleDirective,
     KbqPipeState
 ];
 class KbqFilterBarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFilterBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqFilterBarModule, imports: [KbqFilterBar,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFilterBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqFilterBarModule, imports: [KbqFilterBar,
             KbqFilters,
-            KbqFilterBarRefresher,
+            KbqFilterRefresher,
             KbqFilterBarButton,
             KbqFilterReset,
             KbqPipeAdd,
             KbqPipeDirective,
             KbqPipeButton,
-            KbqFilterBarSearch,
-            KbqPipeTitleDirective,
             KbqPipeState], exports: [KbqFilterBar,
             KbqFilters,
-            KbqFilterBarRefresher,
+            KbqFilterRefresher,
             KbqFilterBarButton,
             KbqFilterReset,
             KbqPipeAdd,
             KbqPipeDirective,
             KbqPipeButton,
-            KbqFilterBarSearch,
-            KbqPipeTitleDirective,
             KbqPipeState] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFilterBarModule, providers: [kbqFilterBarPipesProvider()], imports: [KbqFilterBar,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFilterBarModule, providers: [kbqFilterBarPipesProvider()], imports: [KbqFilterBar,
             KbqFilters,
-            KbqFilterBarRefresher,
+            KbqFilterRefresher,
             KbqFilterReset,
             KbqPipeAdd,
-            KbqPipeButton,
-            KbqFilterBarSearch] }); }
+            KbqPipeButton] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFilterBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFilterBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,
-                    exports: COMPONENTS,
-                    providers: [kbqFilterBarPipesProvider()]
+                    providers: [kbqFilterBarPipesProvider()],
+                    exports: COMPONENTS
                 }]
         }] });
 
@@ -2541,5 +2517,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_FILTER_BAR_CONFIGURATION, KBQ_FILTER_BAR_DEFAULT_CONFIGURATION, KBQ_FILTER_BAR_PIPES, KBQ_PIPE_DATA, KbqBasePipe, KbqFilterBar, KbqFilterBarButton, KbqFilterBarModule, KbqFilterBarRefresher, KbqFilterBarSearch, KbqFilterReset, KbqFilters, KbqPipeAdd, KbqPipeButton, KbqPipeDateComponent, KbqPipeDatetimeComponent, KbqPipeDirective, KbqPipeMinWidth, KbqPipeMultiSelectComponent, KbqPipeReadonlyComponent, KbqPipeSelectComponent, KbqPipeState, KbqPipeTextComponent, KbqPipeTitleDirective, KbqPipeTreeSelectComponent, KbqPipeTypes, KbqSaveFilterStatuses, KbqTreeSelectFlatNode, defaultFilterBarPipes, defaultOnSearchTimeout, getId, kbqBuildTree, kbqFilterBarPipesProvider };
+export { KBQ_FILTER_BAR_CONFIGURATION, KBQ_FILTER_BAR_DEFAULT_CONFIGURATION, KBQ_FILTER_BAR_HOST, KBQ_FILTER_BAR_PIPES, KBQ_PIPE_DATA, KbqBasePipe, KbqFilterBar, KbqFilterBarButton, KbqFilterBarModule, KbqFilterRefresher as KbqFilterBarRefresher, KbqFilterRefresher, KbqFilterReset, KbqFilterSavePopover, KbqFilters, KbqPipeAdd, KbqPipeButton, KbqPipeDateBaseComponent, KbqPipeDateComponent, KbqPipeDatetimeComponent, KbqPipeDirective, KbqPipeMinWidth, KbqPipeMultiSelectComponent, KbqPipeMultiTreeSelectComponent, KbqPipeReadonlyComponent, KbqPipeSelectComponent, KbqPipeState, KbqPipeTextComponent, KbqPipeTreeSelectComponent, KbqPipeTypes, KbqSaveFilterStatuses, KbqTreeSelectFlatNode, KbqTreeSelectPipeBase, defaultFilterBarPipes, getId, kbqBuildTree, kbqFilterBarPipesProvider };
 //# sourceMappingURL=koobiq-components-filter-bar.mjs.map