@koobiq/components 19.5.0 → 19.7.0

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

@@ -134,10 +134,10 @@ class KbqBasePipe {
         this.filterBar?.onClearPipe.next(this.data);
         this.filterBar?.onChangePipe.next(this.data);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqBasePipe, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", 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: "19.2.20", ngImport: i0, type: KbqBasePipe, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", 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.19", ngImport: i0, type: KbqBasePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqBasePipe, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -171,10 +171,10 @@ class KbqPipeMinWidth {
         this.filterBar?.changes.pipe(delay(0)).subscribe(this.update);
         afterNextRender({ read: this.update });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeMinWidth, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: KbqPipeMinWidth, isStandalone: true, selector: "[kbqPipeMinWidth]", host: { properties: { "style.min-width": "minWidth" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeMinWidth, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: KbqPipeMinWidth, isStandalone: true, selector: "[kbqPipeMinWidth]", host: { properties: { "style.min-width": "minWidth" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeMinWidth, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeMinWidth, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqPipeMinWidth]',
@@ -216,10 +216,10 @@ class KbqPipeState {
     ngOnInit() {
         this.filterBar.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(this.updateState);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeState, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: KbqPipeState, isStandalone: true, selector: "[kbqPipeState]", inputs: { state: ["kbqPipeState", "state"] }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeState, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: KbqPipeState, isStandalone: true, selector: "[kbqPipeState]", inputs: { state: ["kbqPipeState", "state"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeState, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeState, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqPipeState]'
@@ -248,8 +248,8 @@ class KbqPipeButton {
             .pipe(takeUntilDestroyed())
             .subscribe(() => this.changeDetectorRef.markForCheck());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.19", 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: "19.2.20", ngImport: i0, type: KbqPipeButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.20", type: KbqPipeButton, isStandalone: true, selector: "kbq-pipe-button", inputs: { readonly: ["readonly", "readonly", booleanAttribute] }, host: { classAttribute: "kbq-pipe-button" }, ngImport: i0, template: `
         <button
             kbqTooltip="{{ pipe.data.cleanable ? localeData.clearButtonTooltip : localeData.removeButtonTooltip }}"
             class="kbq-pipe__remove-button"
@@ -261,9 +261,9 @@ class KbqPipeButton {
         >
             <i kbq-icon="kbq-xmark-s_16" [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: ["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: 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeButton, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-button', imports: [
                         KbqIconModule,
@@ -360,10 +360,10 @@ class KbqPipeTitleDirective extends KbqTooltipTrigger {
             return () => mutationObserver.disconnect();
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", 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.19", ngImport: i0, type: KbqPipeTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqPipeTitle]',
@@ -525,16 +525,16 @@ class KbqPipeDateComponent extends KbqBasePipe {
             end: new FormControl(this.end || this.defaultEnd)
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: KbqPipeDateComponent, isStandalone: true, selector: "kbq-pipe-date", providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: KbqPipeDateComponent, isStandalone: true, selector: "kbq-pipe-date", providers: [
             kbqDisableLegacyValidationDirectiveProvider(),
             {
                 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    [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                    <i class=\"kbq kbq-icon kbq-chevron-right_16 kbq-contrast-fade\"></i>\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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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{min-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{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"], 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: ["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 }); }
+        ], 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    [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                    <i class=\"kbq kbq-icon kbq-chevron-right_16 kbq-contrast-fade\"></i>\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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-date', imports: [
                         ReactiveFormsModule,
@@ -559,7 +559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                             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    [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                    <i class=\"kbq kbq-icon kbq-chevron-right_16 kbq-contrast-fade\"></i>\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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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{min-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{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"] }]
+                    ], template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\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                    <i class=\"kbq kbq-icon kbq-chevron-right_16 kbq-contrast-fade\"></i>\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']
@@ -706,16 +706,16 @@ class KbqPipeDatetimeComponent extends KbqBasePipe {
             end: new FormControl(this.end || this.defaultEnd)
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeDatetimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: KbqPipeDatetimeComponent, isStandalone: true, selector: "kbq-pipe-datetime", providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeDatetimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: KbqPipeDatetimeComponent, isStandalone: true, selector: "kbq-pipe-datetime", providers: [
             kbqDisableLegacyValidationDirectiveProvider(),
             {
                 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    [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                    <i class=\"kbq kbq-icon kbq-chevron-right_16 kbq-contrast-fade\"></i>\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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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{min-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{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"], 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: ["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 }); }
+        ], 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    [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                    <i class=\"kbq kbq-icon kbq-chevron-right_16 kbq-contrast-fade\"></i>\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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeDatetimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeDatetimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-datetime', imports: [
                         ReactiveFormsModule,
@@ -740,7 +740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                             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    [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                    <i class=\"kbq kbq-icon kbq-chevron-right_16 kbq-contrast-fade\"></i>\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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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{min-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{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"] }]
+                    ], template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\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                    <i class=\"kbq kbq-icon kbq-chevron-right_16 kbq-contrast-fade\"></i>\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']
@@ -819,7 +819,7 @@ class KbqPipeMultiSelectComponent extends KbqBasePipe {
     onSelect(item) {
         if (this.selectionAllInProgress)
             return;
-        if (this.selectedAllEqualsSelectedNothing && this.allVisibleOptionsSelected) {
+        if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
             this.data.value = [];
         }
         else {
@@ -886,15 +886,15 @@ class KbqPipeMultiSelectComponent extends KbqBasePipe {
             this.filterBar?.onChangePipe.emit(this.data);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: KbqPipeMultiSelectComponent, isStandalone: true, selector: "kbq-pipe-multi-select", providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], 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"], 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 }, { 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", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "valueChange"], 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeMultiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeMultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-multi-select', imports: [
                         FormsModule,
@@ -919,7 +919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                             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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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"] }]
+                    ], 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]
@@ -945,14 +945,13 @@ class KbqPipeMultiTreeSelectComponent extends KbqBasePipe {
     get selectAllCheckboxState() {
         if (!this.select)
             return 'unchecked';
-        const arrayOfOptions = this.select.options.toArray().filter((option) => option.value !== kbqTreeSelectAllValue);
-        if (arrayOfOptions.every((option) => option.selected)) {
+        if (this.allOptionsSelected) {
             return 'checked';
         }
-        else if (arrayOfOptions.every((option) => !option.selected)) {
-            return 'unchecked';
+        else if (this.select.selected.length > 0) {
+            return 'indeterminate';
         }
-        return 'indeterminate';
+        return 'unchecked';
     }
     get numberOfSelectedLeaves() {
         return this.select.selected.filter(({ value }) => value !== kbqTreeSelectAllValue).length;
@@ -1145,15 +1144,15 @@ class KbqPipeMultiTreeSelectComponent extends KbqBasePipe {
             this.toggleParents(parent.parent);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeMultiTreeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: KbqPipeMultiTreeSelectComponent, isStandalone: true, selector: "kbq-pipe-multi-tree-select", providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeMultiTreeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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"], 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeMultiTreeSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeMultiTreeSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-multi-tree-select', imports: [
                         KbqButtonModule,
@@ -1180,7 +1179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                             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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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"] }]
+                    ], 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]
@@ -1191,8 +1190,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
 
 class KbqPipeReadonlyComponent extends KbqBasePipe {
     open() { }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeReadonlyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: KbqPipeReadonlyComponent, isStandalone: true, selector: "kbq-pipe-readonly", providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeReadonlyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: KbqPipeReadonlyComponent, isStandalone: true, selector: "kbq-pipe-readonly", providers: [
             {
                 provide: KbqBasePipe,
                 useExisting: this
@@ -1213,9 +1212,9 @@ 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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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}.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeReadonlyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeReadonlyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-readonly', imports: [
                         KbqButtonModule,
@@ -1245,7 +1244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                             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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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"] }]
+                    ], 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"] }]
         }] });
 
 class KbqPipeSelectComponent extends KbqBasePipe {
@@ -1288,15 +1287,15 @@ class KbqPipeSelectComponent extends KbqBasePipe {
             ? this.values.filter((item) => item.name.toLowerCase().includes(value.toLowerCase()))
             : this.values;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: KbqPipeSelectComponent, isStandalone: true, selector: "kbq-pipe-select", providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], 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"], 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 }], 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", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "valueChange"], 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-select', imports: [
                         KbqButtonModule,
@@ -1319,7 +1318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                             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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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"] }]
+                    ], 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]
@@ -1370,15 +1369,15 @@ class KbqPipeTextComponent extends KbqBasePipe {
     open() {
         this.popover.show();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: KbqPipeTextComponent, isStandalone: true, selector: "kbq-pipe-text", providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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    [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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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"], 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: ["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 }], 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    [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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-text', imports: [
                         KbqButtonModule,
@@ -1400,7 +1399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                             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    [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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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"] }]
+                    ], template: "<button\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\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]
@@ -1483,15 +1482,15 @@ class KbqPipeTreeSelectComponent extends KbqBasePipe {
     onOpen() {
         this.treeControl.expandAll();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeTreeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: KbqPipeTreeSelectComponent, isStandalone: true, selector: "kbq-pipe-tree-select", providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeTreeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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"], 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 }); }
+        ], 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeTreeSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeTreeSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-tree-select', imports: [
                         KbqButtonModule,
@@ -1516,7 +1515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                             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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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"] }]
+                    ], 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]
@@ -1601,14 +1600,14 @@ class KbqFilterReset {
         this.filterBar.changes.next();
         this.filterBar.onResetFilter.next(true);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqFilterReset, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", 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: "19.2.20", ngImport: i0, type: KbqFilterReset, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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.19", ngImport: i0, type: KbqFilterReset, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqFilterReset, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-filter-reset',
@@ -1647,10 +1646,10 @@ class KbqFilterBarButton {
     saveFocusedElement() {
         this.filters.saveFocusedElement(this.button);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqFilterBarButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", 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: "19.2.20", ngImport: i0, type: KbqFilterBarButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: KbqFilterBarButton, isStandalone: true, selector: "[kbqFilterBarButton]", host: { listeners: { "click": "saveFocusedElement()", "keydown": "saveFocusedElement()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqFilterBarButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqFilterBarButton, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqFilterBarButton]',
@@ -1878,10 +1877,10 @@ class KbqFilters {
             ? this.filters.filter((filter) => filter.name.toLowerCase().includes(searchFilter.toLowerCase()))
             : this.filters;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqFilters, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", 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 class=\"kbq kbq-icon kbq-icon-button kbq-circle-xs_16 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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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", "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"], 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: ["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: ["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: "19.2.20", ngImport: i0, type: KbqFilters, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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 class=\"kbq kbq-icon kbq-icon-button kbq-circle-xs_16 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", "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqFilters, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqFilters, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-filters', imports: [
                         ReactiveFormsModule,
@@ -1902,7 +1901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                         KbqAlertModule
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqFilters', 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 class=\"kbq kbq-icon kbq-icon-button kbq-circle-xs_16 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 .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: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){border-bottom-left-radius:0;border-top-left-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){border-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: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){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: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){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.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"] }]
+                    }, 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 class=\"kbq kbq-icon kbq-icon-button kbq-circle-xs_16 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']
@@ -2071,8 +2070,8 @@ class KbqFilterBar {
     initDefaultParams() {
         this.configuration = KBQ_FILTER_BAR_DEFAULT_CONFIGURATION;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqFilterBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.19", 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: "19.2.20", ngImport: i0, type: KbqFilterBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.20", 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: `
         <div class="kbq-filter-bar__left">
             <ng-content select="kbq-filters" />
 
@@ -2090,7 +2089,7 @@ class KbqFilterBar {
         </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-overlay{display:none}.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.19", ngImport: i0, type: KbqFilterBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqFilterBar, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-filter-bar, [kbq-filter-bar]', imports: [KbqDividerModule], template: `
         <div class="kbq-filter-bar__left">
@@ -2137,8 +2136,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
             }] } });
 
 class KbqFilterBarRefresher {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqFilterBarRefresher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: KbqFilterBarRefresher, isStandalone: true, selector: "kbq-filter-refresher, [kbq-filter-refresher]", host: { classAttribute: "kbq-filter-refresher" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqFilterBarRefresher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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>
@@ -2147,7 +2146,7 @@ class KbqFilterBarRefresher {
         </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.19", ngImport: i0, type: KbqFilterBarRefresher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqFilterBarRefresher, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-filter-refresher, [kbq-filter-refresher]', imports: [
                         KbqButtonModule,
@@ -2165,6 +2164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
         }] });
 
 const defaultOnSearchTimeout = 0;
+/** @deprecated Will be removed in next major release. Use `kbq-search-expandable` instead. */
 class KbqFilterBarSearch {
     constructor() {
         /** KbqFilterBar instance */
@@ -2184,6 +2184,10 @@ class KbqFilterBarSearch {
         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 */
@@ -2196,6 +2200,14 @@ class KbqFilterBarSearch {
     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()) {
@@ -2235,11 +2247,11 @@ class KbqFilterBarSearch {
             this.tooltip.hide();
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqFilterBarSearch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.19", 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 } }, 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: "19.2.20", ngImport: i0, type: KbqFilterBarSearch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", 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: `
         <button
-            kbqTooltip="{{ localeData.tooltip }}"
             kbq-button
+            [kbqTooltip]="resolvedTooltip"
             [class.kbq-filter_hidden]="isSearchActive"
             [color]="'contrast'"
             [kbqStyle]="'transparent'"
@@ -2252,9 +2264,9 @@ class KbqFilterBarSearch {
             <i kbq-icon="kbq-magnifying-glass_16" kbqPrefix></i>
 
             <input
-                placeholder="{{ localeData.placeholder }}"
                 autocomplete="off"
                 kbqInput
+                [placeholder]="resolvedPlaceholder"
                 [formControl]="searchControl"
                 (blur)="onBlur()"
                 (keydown.escape)="onEscape()"
@@ -2263,9 +2275,9 @@ class KbqFilterBarSearch {
 
             <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: ["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"], 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 }); }
+    `, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqFilterBarSearch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqFilterBarSearch, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-filter-search, [kbq-filter-search]', imports: [
                         KbqDividerModule,
@@ -2277,8 +2289,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                         ReactiveFormsModule
                     ], template: `
         <button
-            kbqTooltip="{{ localeData.tooltip }}"
             kbq-button
+            [kbqTooltip]="resolvedTooltip"
             [class.kbq-filter_hidden]="isSearchActive"
             [color]="'contrast'"
             [kbqStyle]="'transparent'"
@@ -2291,9 +2303,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
             <i kbq-icon="kbq-magnifying-glass_16" kbqPrefix></i>
 
             <input
-                placeholder="{{ localeData.placeholder }}"
                 autocomplete="off"
                 kbqInput
+                [placeholder]="resolvedPlaceholder"
                 [formControl]="searchControl"
                 (blur)="onBlur()"
                 (keydown.escape)="onEscape()"
@@ -2365,8 +2377,8 @@ class KbqPipeAdd {
     compareWith(o1, o2) {
         return getId(o1) === o2;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeAdd, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", 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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeAdd, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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">
             <button
                 kbqTooltip="{{ filterBar.configuration.add.tooltip }}"
@@ -2391,9 +2403,9 @@ class KbqPipeAdd {
                 </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: ["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", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], 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 }); }
+    `, 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", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "valueChange"], 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeAdd, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeAdd, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-pipe-add', imports: [
                         KbqDropdownModule,
@@ -2459,10 +2471,10 @@ class KbqPipeDirective {
             parent: this.injector
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: KbqPipeDirective, isStandalone: true, selector: "[kbqPipe]", inputs: { pipe: ["kbqPipe", "pipe"] }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: KbqPipeDirective, isStandalone: true, selector: "[kbqPipe]", inputs: { pipe: ["kbqPipe", "pipe"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqPipeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqPipeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqPipe]'
@@ -2486,8 +2498,8 @@ const COMPONENTS = [
     KbqPipeState
 ];
 class KbqFilterBarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqFilterBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: KbqFilterBarModule, imports: [KbqFilterBar,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqFilterBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: KbqFilterBarModule, imports: [KbqFilterBar,
             KbqFilters,
             KbqFilterBarRefresher,
             KbqFilterBarButton,
@@ -2508,7 +2520,7 @@ class KbqFilterBarModule {
             KbqFilterBarSearch,
             KbqPipeTitleDirective,
             KbqPipeState] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqFilterBarModule, providers: [kbqFilterBarPipesProvider()], imports: [KbqFilterBar,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqFilterBarModule, providers: [kbqFilterBarPipesProvider()], imports: [KbqFilterBar,
             KbqFilters,
             KbqFilterBarRefresher,
             KbqFilterReset,
@@ -2516,7 +2528,7 @@ class KbqFilterBarModule {
             KbqPipeButton,
             KbqFilterBarSearch] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqFilterBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqFilterBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,