@koobiq/components 19.8.1 → 19.8.3

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

@@ -532,7 +532,7 @@ class KbqPipeDateComponent extends KbqBasePipe {
                 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                    <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->\n                    <ng-container>\n                        <i kbq-icon=\"kbq-chevron-right_16\" color=\"contrast-fade\"></i>\n                    </ng-container>\n                </kbq-list-option>\n\n                @for (item of values; track item) {\n                    <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n                        {{ item.name }}\n                    </kbq-list-option>\n                }\n            </kbq-list-selection>\n        </div>\n    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n            <div class=\"kbq-date-period__header\">\n                <button\n                    #returnButton\n                    kbq-button\n                    [color]=\"colors.Theme\"\n                    [kbqStyle]=\"styles.Transparent\"\n                    (click)=\"showList()\"\n                >\n                    <i kbq-icon=\"kbq-chevron-left_16\"></i>\n                    {{ localeData.datePipe.backToPeriodSelection }}\n                </button>\n            </div>\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</label>\n\n                <kbq-form-field class=\"kbq-date-period__date kbq-form__control\" [class.kbq-focused]=\"showStartCalendar\">\n                    <input\n                        formControlName=\"start\"\n                        [kbqCalendar]=\"startDateCalendar\"\n                        [max]=\"formGroup.controls.end.value\"\n                        (focusin)=\"onFocusStartInput()\"\n                        (keydown.tab)=\"hideCalendars()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</label>\n\n                <kbq-form-field class=\"kbq-date-period__date kbq-form__control\" [class.kbq-focused]=\"showEndCalendar\">\n                    <input\n                        formControlName=\"end\"\n                        [kbqCalendar]=\"endDateCalendar\"\n                        (focusin)=\"onFocusEndInput()\"\n                        (keydown.tab)=\"hideCalendars()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                @if (formGroup.controls.start.invalid) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeData.datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar\"\n                    (selectedChange)=\"onSelectEndDate($event)\"\n                />\n            </form>\n\n            <div class=\"kbq-date-period__footer\">\n                <button\n                    kbq-button\n                    [color]=\"'theme'\"\n                    [disabled]=\"disabled\"\n                    [kbqStyle]=\"'transparent'\"\n                    (click)=\"onApplyPeriod()\"\n                >\n                    <span>{{ localeData.pipe.applyButton }}</span>\n                    &nbsp;\n                    <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n                </button>\n            </div>\n        </div>\n    }\n</ng-template>\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ formattedValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-left:var(--kbq-size-xxs);margin-right:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-left:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color)}.kbq-pipe-date__popover .kbq-date-period{width:320px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding:var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content minmax(min-content,1fr);padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-left:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-right:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{width:auto}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{width:136px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-top-right-radius:unset;border-bottom-right-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{flex:1;margin-left:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-left:var(--kbq-size-m);padding-right:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-states-foreground-disabled);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqSuffix, selector: "[kbqSuffix]" }, { kind: "component", type: i2.KbqHint, selector: "kbq-hint", inputs: ["id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.MaxValidator, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: ["max"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["hideIfNotInViewPort", "kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqListModule }, { kind: "component", type: i7.KbqListSelection, selector: "kbq-list-selection", inputs: ["autoSelect", "noUnselectLast", "horizontal", "tabIndex", "disabled", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i7.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "ngmodule", type: KbqDatepickerModule }, { kind: "component", type: i8.KbqCalendar, selector: "kbq-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "monthSelected", "userSelection"], exportAs: ["kbqCalendar"] }, { kind: "directive", type: i8.KbqDatepickerInput, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: ["errorStateMatcher", "placeholder", "required", "kbqDatepicker", "kbqCalendar", "kbqDatepickerFilter", "value", "min", "max", "disabled", "id", "kbqValidationTooltip"], outputs: ["incorrectInput", "dateChange", "dateInput"], exportAs: ["kbqDatepickerInput"] }, { kind: "ngmodule", type: KbqTimepickerModule }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqFormattersModule }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "listSelection", first: true, predicate: ["listSelection"], descendants: true, read: KbqListSelection, isSignal: true }, { propertyName: "returnButton", first: true, predicate: ["returnButton"], descendants: true, read: KbqButton, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverOffset]=\"4\"\n    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    (kbqPopoverVisibleChange)=\"isListMode = true\"\n>\n    <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!formattedValue\">\n        {{ formattedValue }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    @if (isListMode) {\n        <div class=\"kbq-date-list\">\n            <kbq-list-selection #listSelection [autoSelect]=\"false\" [ngModel]=\"data.value?.name\">\n                <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                    {{ localeData.datePipe?.customPeriod }}\n                    <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->\n                    <ng-container>\n                        <i kbq-icon=\"kbq-chevron-right_16\" color=\"contrast-fade\"></i>\n                    </ng-container>\n                </kbq-list-option>\n\n                @for (item of values; track item) {\n                    <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n                        {{ item.name }}\n                    </kbq-list-option>\n                }\n            </kbq-list-selection>\n        </div>\n    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n            <div class=\"kbq-date-period__header\">\n                <button\n                    #returnButton\n                    kbq-button\n                    [color]=\"colors.Theme\"\n                    [kbqStyle]=\"styles.Transparent\"\n                    (click)=\"showList()\"\n                >\n                    <i kbq-icon=\"kbq-chevron-left_16\"></i>\n                    {{ localeData.datePipe.backToPeriodSelection }}\n                </button>\n            </div>\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</label>\n\n                <kbq-form-field class=\"kbq-date-period__date kbq-form__control\" [class.kbq-focused]=\"showStartCalendar\">\n                    <input\n                        formControlName=\"start\"\n                        [kbqCalendar]=\"startDateCalendar\"\n                        [max]=\"formGroup.controls.end.value\"\n                        (focusin)=\"onFocusStartInput()\"\n                        (keydown.tab)=\"hideCalendars()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</label>\n\n                <kbq-form-field class=\"kbq-date-period__date kbq-form__control\" [class.kbq-focused]=\"showEndCalendar\">\n                    <input\n                        formControlName=\"end\"\n                        [kbqCalendar]=\"endDateCalendar\"\n                        (focusin)=\"onFocusEndInput()\"\n                        (keydown.tab)=\"hideCalendars()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                @if (formGroup.controls.start.invalid) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeData.datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar\"\n                    (selectedChange)=\"onSelectEndDate($event)\"\n                />\n            </form>\n\n            <div class=\"kbq-date-period__footer\">\n                <button\n                    kbq-button\n                    [color]=\"'theme'\"\n                    [disabled]=\"disabled\"\n                    [kbqStyle]=\"'transparent'\"\n                    (click)=\"onApplyPeriod()\"\n                >\n                    <span>{{ localeData.pipe.applyButton }}</span>\n                    &nbsp;\n                    <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n                </button>\n            </div>\n        </div>\n    }\n</ng-template>\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ formattedValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-left:var(--kbq-size-xxs);margin-right:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-left:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color)}.kbq-pipe-date__popover .kbq-date-period{width:320px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding:var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content minmax(min-content,1fr);padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-left:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-right:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{width:auto}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{width:136px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-top-right-radius:unset;border-bottom-right-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{flex:1;margin-left:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-left:var(--kbq-size-m);padding-right:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-states-foreground-disabled);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqSuffix, selector: "[kbqSuffix]" }, { kind: "component", type: i2.KbqHint, selector: "kbq-hint", inputs: ["id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.MaxValidator, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: ["max"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["hideIfNotInViewPort", "kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqListModule }, { kind: "component", type: i7.KbqListSelection, selector: "kbq-list-selection", inputs: ["autoSelect", "noUnselectLast", "horizontal", "tabIndex", "disabled", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i7.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "ngmodule", type: KbqDatepickerModule }, { kind: "component", type: i8.KbqCalendar, selector: "kbq-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "monthSelected", "userSelection"], exportAs: ["kbqCalendar"] }, { kind: "directive", type: i8.KbqDatepickerInput, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: ["errorStateMatcher", "placeholder", "required", "kbqDatepicker", "kbqCalendar", "kbqDatepickerFilter", "value", "min", "max", "disabled", "id", "kbqValidationTooltip"], outputs: ["incorrectInput", "dateChange", "dateInput"], exportAs: ["kbqDatepickerInput"] }, { kind: "ngmodule", type: KbqTimepickerModule }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqFormattersModule }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeDateComponent, decorators: [{
             type: Component,
@@ -559,7 +559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", 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                    <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->\n                    <ng-container>\n                        <i kbq-icon=\"kbq-chevron-right_16\" color=\"contrast-fade\"></i>\n                    </ng-container>\n                </kbq-list-option>\n\n                @for (item of values; track item) {\n                    <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n                        {{ item.name }}\n                    </kbq-list-option>\n                }\n            </kbq-list-selection>\n        </div>\n    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n            <div class=\"kbq-date-period__header\">\n                <button\n                    #returnButton\n                    kbq-button\n                    [color]=\"colors.Theme\"\n                    [kbqStyle]=\"styles.Transparent\"\n                    (click)=\"showList()\"\n                >\n                    <i kbq-icon=\"kbq-chevron-left_16\"></i>\n                    {{ localeData.datePipe.backToPeriodSelection }}\n                </button>\n            </div>\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</label>\n\n                <kbq-form-field class=\"kbq-date-period__date kbq-form__control\" [class.kbq-focused]=\"showStartCalendar\">\n                    <input\n                        formControlName=\"start\"\n                        [kbqCalendar]=\"startDateCalendar\"\n                        [max]=\"formGroup.controls.end.value\"\n                        (focusin)=\"onFocusStartInput()\"\n                        (keydown.tab)=\"hideCalendars()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</label>\n\n                <kbq-form-field class=\"kbq-date-period__date kbq-form__control\" [class.kbq-focused]=\"showEndCalendar\">\n                    <input\n                        formControlName=\"end\"\n                        [kbqCalendar]=\"endDateCalendar\"\n                        (focusin)=\"onFocusEndInput()\"\n                        (keydown.tab)=\"hideCalendars()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                @if (formGroup.controls.start.invalid) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeData.datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar\"\n                    (selectedChange)=\"onSelectEndDate($event)\"\n                />\n            </form>\n\n            <div class=\"kbq-date-period__footer\">\n                <button\n                    kbq-button\n                    [color]=\"'theme'\"\n                    [disabled]=\"disabled\"\n                    [kbqStyle]=\"'transparent'\"\n                    (click)=\"onApplyPeriod()\"\n                >\n                    <span>{{ localeData.pipe.applyButton }}</span>\n                    &nbsp;\n                    <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n                </button>\n            </div>\n        </div>\n    }\n</ng-template>\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ formattedValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-left:var(--kbq-size-xxs);margin-right:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-left:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color)}.kbq-pipe-date__popover .kbq-date-period{width:320px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding:var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content minmax(min-content,1fr);padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-left:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-right:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{width:auto}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{width:136px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-top-right-radius:unset;border-bottom-right-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{flex:1;margin-left:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-left:var(--kbq-size-m);padding-right:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-states-foreground-disabled);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"] }]
+                    ], template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverOffset]=\"4\"\n    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    (kbqPopoverVisibleChange)=\"isListMode = true\"\n>\n    <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!formattedValue\">\n        {{ formattedValue }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    @if (isListMode) {\n        <div class=\"kbq-date-list\">\n            <kbq-list-selection #listSelection [autoSelect]=\"false\" [ngModel]=\"data.value?.name\">\n                <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                    {{ localeData.datePipe?.customPeriod }}\n                    <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->\n                    <ng-container>\n                        <i kbq-icon=\"kbq-chevron-right_16\" color=\"contrast-fade\"></i>\n                    </ng-container>\n                </kbq-list-option>\n\n                @for (item of values; track item) {\n                    <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n                        {{ item.name }}\n                    </kbq-list-option>\n                }\n            </kbq-list-selection>\n        </div>\n    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n            <div class=\"kbq-date-period__header\">\n                <button\n                    #returnButton\n                    kbq-button\n                    [color]=\"colors.Theme\"\n                    [kbqStyle]=\"styles.Transparent\"\n                    (click)=\"showList()\"\n                >\n                    <i kbq-icon=\"kbq-chevron-left_16\"></i>\n                    {{ localeData.datePipe.backToPeriodSelection }}\n                </button>\n            </div>\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</label>\n\n                <kbq-form-field class=\"kbq-date-period__date kbq-form__control\" [class.kbq-focused]=\"showStartCalendar\">\n                    <input\n                        formControlName=\"start\"\n                        [kbqCalendar]=\"startDateCalendar\"\n                        [max]=\"formGroup.controls.end.value\"\n                        (focusin)=\"onFocusStartInput()\"\n                        (keydown.tab)=\"hideCalendars()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</label>\n\n                <kbq-form-field class=\"kbq-date-period__date kbq-form__control\" [class.kbq-focused]=\"showEndCalendar\">\n                    <input\n                        formControlName=\"end\"\n                        [kbqCalendar]=\"endDateCalendar\"\n                        (focusin)=\"onFocusEndInput()\"\n                        (keydown.tab)=\"hideCalendars()\"\n                    />\n                    <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                </kbq-form-field>\n\n                @if (formGroup.controls.start.invalid) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeData.datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar\"\n                    (selectedChange)=\"onSelectEndDate($event)\"\n                />\n            </form>\n\n            <div class=\"kbq-date-period__footer\">\n                <button\n                    kbq-button\n                    [color]=\"'theme'\"\n                    [disabled]=\"disabled\"\n                    [kbqStyle]=\"'transparent'\"\n                    (click)=\"onApplyPeriod()\"\n                >\n                    <span>{{ localeData.pipe.applyButton }}</span>\n                    &nbsp;\n                    <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n                </button>\n            </div>\n        </div>\n    }\n</ng-template>\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ formattedValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-left:var(--kbq-size-xxs);margin-right:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-left:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color)}.kbq-pipe-date__popover .kbq-date-period{width:320px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding:var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content minmax(min-content,1fr);padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-left:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-right:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{width:auto}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{width:136px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-top-right-radius:unset;border-bottom-right-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{flex:1;margin-left:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-left:var(--kbq-size-m);padding-right:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-states-foreground-disabled);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"] }]
         }], propDecorators: { popover: [{
                 type: ViewChild,
                 args: ['popover']
@@ -713,7 +713,7 @@ class KbqPipeDatetimeComponent extends KbqBasePipe {
                 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                    <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->\n                    <ng-container>\n                        <i kbq-icon=\"kbq-chevron-right_16\" color=\"contrast-fade\"></i>\n                    </ng-container>\n                </kbq-list-option>\n\n                @for (item of values; track item) {\n                    <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n                        {{ item.name }}\n                    </kbq-list-option>\n                }\n            </kbq-list-selection>\n        </div>\n    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n            <div class=\"kbq-date-period__header\">\n                <button\n                    #returnButton\n                    kbq-button\n                    [color]=\"colors.Theme\"\n                    [kbqStyle]=\"styles.Transparent\"\n                    (click)=\"showList()\"\n                >\n                    <i kbq-icon=\"kbq-chevron-left_16\"></i>\n                    {{ localeData.datePipe.backToPeriodSelection }}\n                </button>\n            </div>\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</label>\n\n                <div class=\"kbq-form__row_with-time kbq-form__control\">\n                    <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showStartCalendar\">\n                        <input\n                            formControlName=\"start\"\n                            [kbqCalendar]=\"startDateCalendar\"\n                            [max]=\"formGroup.controls.end.value\"\n                            (focusin)=\"onFocusStartInput()\"\n                            (keydown.tab)=\"hideCalendars()\"\n                        />\n                        <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                    </kbq-form-field>\n\n                    <kbq-form-field class=\"kbq-date-period__time\">\n                        <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n                        <input formControlName=\"start\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n                    </kbq-form-field>\n                </div>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</label>\n\n                <div class=\"kbq-form__row_with-time kbq-form__control\">\n                    <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showEndCalendar\">\n                        <input\n                            formControlName=\"end\"\n                            [kbqCalendar]=\"endDateCalendar\"\n                            (focusin)=\"onFocusEndInput()\"\n                            (keydown.tab)=\"hideCalendars()\"\n                        />\n                        <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                    </kbq-form-field>\n\n                    <kbq-form-field class=\"kbq-date-period__time\">\n                        <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n                        <input formControlName=\"end\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n                    </kbq-form-field>\n                </div>\n\n                @if (formGroup.controls.start.invalid) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeData.datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar\"\n                    (selectedChange)=\"onSelectEndDate($event)\"\n                />\n            </form>\n\n            <div class=\"kbq-date-period__footer\">\n                <button\n                    kbq-button\n                    [color]=\"'theme'\"\n                    [disabled]=\"disabled\"\n                    [kbqStyle]=\"'transparent'\"\n                    (click)=\"onApplyPeriod()\"\n                >\n                    <span>{{ localeData.pipe.applyButton }}</span>\n                    &nbsp;\n                    <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n                </button>\n            </div>\n        </div>\n    }\n</ng-template>\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ formattedValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-left:var(--kbq-size-xxs);margin-right:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-left:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color)}.kbq-pipe-date__popover .kbq-date-period{width:320px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding:var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content minmax(min-content,1fr);padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-left:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-right:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{width:auto}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{width:136px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-top-right-radius:unset;border-bottom-right-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{flex:1;margin-left:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-left:var(--kbq-size-m);padding-right:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-states-foreground-disabled);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i2.KbqSuffix, selector: "[kbqSuffix]" }, { kind: "component", type: i2.KbqHint, selector: "kbq-hint", inputs: ["id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "directive", type: i2.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.MaxValidator, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: ["max"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["hideIfNotInViewPort", "kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqListModule }, { kind: "component", type: i7.KbqListSelection, selector: "kbq-list-selection", inputs: ["autoSelect", "noUnselectLast", "horizontal", "tabIndex", "disabled", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i7.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "ngmodule", type: KbqDatepickerModule }, { kind: "component", type: i8.KbqCalendar, selector: "kbq-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "monthSelected", "userSelection"], exportAs: ["kbqCalendar"] }, { kind: "directive", type: i8.KbqDatepickerInput, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: ["errorStateMatcher", "placeholder", "required", "kbqDatepicker", "kbqCalendar", "kbqDatepickerFilter", "value", "min", "max", "disabled", "id", "kbqValidationTooltip"], outputs: ["incorrectInput", "dateChange", "dateInput"], exportAs: ["kbqDatepickerInput"] }, { kind: "ngmodule", type: KbqTimepickerModule }, { kind: "directive", type: i9.KbqTimepicker, selector: "input[kbqTimepicker]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "format", "min", "max", "value", "kbqValidationTooltip"], outputs: ["incorrectInput"], exportAs: ["kbqTimepicker"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqFormattersModule }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "listSelection", first: true, predicate: ["listSelection"], descendants: true, read: KbqListSelection, isSignal: true }, { propertyName: "returnButton", first: true, predicate: ["returnButton"], descendants: true, read: KbqButton, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverOffset]=\"4\"\n    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    (kbqPopoverVisibleChange)=\"isListMode = true\"\n>\n    <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!formattedValue\">\n        {{ formattedValue }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    @if (isListMode) {\n        <div class=\"kbq-date-list\">\n            <kbq-list-selection #listSelection [autoSelect]=\"false\" [ngModel]=\"data.value?.name\">\n                <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                    {{ localeData.datePipe?.customPeriod }}\n                    <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->\n                    <ng-container>\n                        <i kbq-icon=\"kbq-chevron-right_16\" color=\"contrast-fade\"></i>\n                    </ng-container>\n                </kbq-list-option>\n\n                @for (item of values; track item) {\n                    <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n                        {{ item.name }}\n                    </kbq-list-option>\n                }\n            </kbq-list-selection>\n        </div>\n    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n            <div class=\"kbq-date-period__header\">\n                <button\n                    #returnButton\n                    kbq-button\n                    [color]=\"colors.Theme\"\n                    [kbqStyle]=\"styles.Transparent\"\n                    (click)=\"showList()\"\n                >\n                    <i kbq-icon=\"kbq-chevron-left_16\"></i>\n                    {{ localeData.datePipe.backToPeriodSelection }}\n                </button>\n            </div>\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</label>\n\n                <div class=\"kbq-form__row_with-time kbq-form__control\">\n                    <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showStartCalendar\">\n                        <input\n                            formControlName=\"start\"\n                            [kbqCalendar]=\"startDateCalendar\"\n                            [max]=\"formGroup.controls.end.value\"\n                            (focusin)=\"onFocusStartInput()\"\n                            (keydown.tab)=\"hideCalendars()\"\n                        />\n                        <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                    </kbq-form-field>\n\n                    <kbq-form-field class=\"kbq-date-period__time\">\n                        <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n                        <input formControlName=\"start\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n                    </kbq-form-field>\n                </div>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</label>\n\n                <div class=\"kbq-form__row_with-time kbq-form__control\">\n                    <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showEndCalendar\">\n                        <input\n                            formControlName=\"end\"\n                            [kbqCalendar]=\"endDateCalendar\"\n                            (focusin)=\"onFocusEndInput()\"\n                            (keydown.tab)=\"hideCalendars()\"\n                        />\n                        <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                    </kbq-form-field>\n\n                    <kbq-form-field class=\"kbq-date-period__time\">\n                        <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n                        <input formControlName=\"end\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n                    </kbq-form-field>\n                </div>\n\n                @if (formGroup.controls.start.invalid) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeData.datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar\"\n                    (selectedChange)=\"onSelectEndDate($event)\"\n                />\n            </form>\n\n            <div class=\"kbq-date-period__footer\">\n                <button\n                    kbq-button\n                    [color]=\"'theme'\"\n                    [disabled]=\"disabled\"\n                    [kbqStyle]=\"'transparent'\"\n                    (click)=\"onApplyPeriod()\"\n                >\n                    <span>{{ localeData.pipe.applyButton }}</span>\n                    &nbsp;\n                    <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n                </button>\n            </div>\n        </div>\n    }\n</ng-template>\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ formattedValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-left:var(--kbq-size-xxs);margin-right:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-left:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color)}.kbq-pipe-date__popover .kbq-date-period{width:320px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding:var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content minmax(min-content,1fr);padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-left:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-right:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{width:auto}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{width:136px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-top-right-radius:unset;border-bottom-right-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{flex:1;margin-left:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-left:var(--kbq-size-m);padding-right:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-states-foreground-disabled);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i2.KbqSuffix, selector: "[kbqSuffix]" }, { kind: "component", type: i2.KbqHint, selector: "kbq-hint", inputs: ["id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "directive", type: i2.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "directive", type: i4.MaxValidator, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: ["max"] }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["hideIfNotInViewPort", "kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqListModule }, { kind: "component", type: i7.KbqListSelection, selector: "kbq-list-selection", inputs: ["autoSelect", "noUnselectLast", "horizontal", "tabIndex", "disabled", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i7.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "ngmodule", type: KbqDatepickerModule }, { kind: "component", type: i8.KbqCalendar, selector: "kbq-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "monthSelected", "userSelection"], exportAs: ["kbqCalendar"] }, { kind: "directive", type: i8.KbqDatepickerInput, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: ["errorStateMatcher", "placeholder", "required", "kbqDatepicker", "kbqCalendar", "kbqDatepickerFilter", "value", "min", "max", "disabled", "id", "kbqValidationTooltip"], outputs: ["incorrectInput", "dateChange", "dateInput"], exportAs: ["kbqDatepickerInput"] }, { kind: "ngmodule", type: KbqTimepickerModule }, { kind: "directive", type: i9.KbqTimepicker, selector: "input[kbqTimepicker]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "format", "min", "max", "value", "kbqValidationTooltip"], outputs: ["incorrectInput"], exportAs: ["kbqTimepicker"] }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "ngmodule", type: KbqFormattersModule }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeDatetimeComponent, decorators: [{
             type: Component,
@@ -740,7 +740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", 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                    <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->\n                    <ng-container>\n                        <i kbq-icon=\"kbq-chevron-right_16\" color=\"contrast-fade\"></i>\n                    </ng-container>\n                </kbq-list-option>\n\n                @for (item of values; track item) {\n                    <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n                        {{ item.name }}\n                    </kbq-list-option>\n                }\n            </kbq-list-selection>\n        </div>\n    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n            <div class=\"kbq-date-period__header\">\n                <button\n                    #returnButton\n                    kbq-button\n                    [color]=\"colors.Theme\"\n                    [kbqStyle]=\"styles.Transparent\"\n                    (click)=\"showList()\"\n                >\n                    <i kbq-icon=\"kbq-chevron-left_16\"></i>\n                    {{ localeData.datePipe.backToPeriodSelection }}\n                </button>\n            </div>\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</label>\n\n                <div class=\"kbq-form__row_with-time kbq-form__control\">\n                    <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showStartCalendar\">\n                        <input\n                            formControlName=\"start\"\n                            [kbqCalendar]=\"startDateCalendar\"\n                            [max]=\"formGroup.controls.end.value\"\n                            (focusin)=\"onFocusStartInput()\"\n                            (keydown.tab)=\"hideCalendars()\"\n                        />\n                        <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                    </kbq-form-field>\n\n                    <kbq-form-field class=\"kbq-date-period__time\">\n                        <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n                        <input formControlName=\"start\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n                    </kbq-form-field>\n                </div>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</label>\n\n                <div class=\"kbq-form__row_with-time kbq-form__control\">\n                    <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showEndCalendar\">\n                        <input\n                            formControlName=\"end\"\n                            [kbqCalendar]=\"endDateCalendar\"\n                            (focusin)=\"onFocusEndInput()\"\n                            (keydown.tab)=\"hideCalendars()\"\n                        />\n                        <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                    </kbq-form-field>\n\n                    <kbq-form-field class=\"kbq-date-period__time\">\n                        <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n                        <input formControlName=\"end\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n                    </kbq-form-field>\n                </div>\n\n                @if (formGroup.controls.start.invalid) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeData.datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar\"\n                    (selectedChange)=\"onSelectEndDate($event)\"\n                />\n            </form>\n\n            <div class=\"kbq-date-period__footer\">\n                <button\n                    kbq-button\n                    [color]=\"'theme'\"\n                    [disabled]=\"disabled\"\n                    [kbqStyle]=\"'transparent'\"\n                    (click)=\"onApplyPeriod()\"\n                >\n                    <span>{{ localeData.pipe.applyButton }}</span>\n                    &nbsp;\n                    <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n                </button>\n            </div>\n        </div>\n    }\n</ng-template>\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ formattedValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-left:var(--kbq-size-xxs);margin-right:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-left:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color)}.kbq-pipe-date__popover .kbq-date-period{width:320px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding:var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content minmax(min-content,1fr);padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-left:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-right:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{width:auto}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{width:136px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-top-right-radius:unset;border-bottom-right-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{flex:1;margin-left:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-left:var(--kbq-size-m);padding-right:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-states-foreground-disabled);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"] }]
+                    ], template: "<button\n    #popover=\"kbqPopover\"\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe-date__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverOffset]=\"4\"\n    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [kbqPopoverPlacementPriority]=\"[placements.BottomLeft, placements.TopLeft]\"\n    (kbqPopoverVisibleChange)=\"isListMode = true\"\n>\n    <span #kbqTitleText class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!formattedValue\">\n        {{ formattedValue }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    @if (isListMode) {\n        <div class=\"kbq-date-list\">\n            <kbq-list-selection #listSelection [autoSelect]=\"false\" [ngModel]=\"data.value?.name\">\n                <kbq-list-option (click)=\"showPeriod()\" (keydown.enter)=\"showPeriod()\">\n                    {{ localeData.datePipe?.customPeriod }}\n                    <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->\n                    <ng-container>\n                        <i kbq-icon=\"kbq-chevron-right_16\" color=\"contrast-fade\"></i>\n                    </ng-container>\n                </kbq-list-option>\n\n                @for (item of values; track item) {\n                    <kbq-list-option [value]=\"item.name\" (click)=\"onSelect(item)\" (keydown.enter)=\"onSelect(item)\">\n                        {{ item.name }}\n                    </kbq-list-option>\n                }\n            </kbq-list-selection>\n        </div>\n    } @else {\n        <div class=\"kbq-date-period kbq-datepicker__content\" (keydown)=\"onKeydown($event)\">\n            <div class=\"kbq-date-period__header\">\n                <button\n                    #returnButton\n                    kbq-button\n                    [color]=\"colors.Theme\"\n                    [kbqStyle]=\"styles.Transparent\"\n                    (click)=\"showList()\"\n                >\n                    <i kbq-icon=\"kbq-chevron-left_16\"></i>\n                    {{ localeData.datePipe.backToPeriodSelection }}\n                </button>\n            </div>\n\n            <form class=\"kbq-date-period__content kbq-form-horizontal\" [formGroup]=\"formGroup\">\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodFrom }}</label>\n\n                <div class=\"kbq-form__row_with-time kbq-form__control\">\n                    <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showStartCalendar\">\n                        <input\n                            formControlName=\"start\"\n                            [kbqCalendar]=\"startDateCalendar\"\n                            [max]=\"formGroup.controls.end.value\"\n                            (focusin)=\"onFocusStartInput()\"\n                            (keydown.tab)=\"hideCalendars()\"\n                        />\n                        <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                    </kbq-form-field>\n\n                    <kbq-form-field class=\"kbq-date-period__time\">\n                        <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n                        <input formControlName=\"start\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n                    </kbq-form-field>\n                </div>\n\n                <kbq-calendar\n                    #startDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showStartCalendar\"\n                    (selectedChange)=\"onSelectStartDate($event)\"\n                />\n\n                <label class=\"kbq-form__label\">{{ localeData.datePipe.customPeriodTo }}</label>\n\n                <div class=\"kbq-form__row_with-time kbq-form__control\">\n                    <kbq-form-field class=\"kbq-date-period__date\" [class.kbq-focused]=\"showEndCalendar\">\n                        <input\n                            formControlName=\"end\"\n                            [kbqCalendar]=\"endDateCalendar\"\n                            (focusin)=\"onFocusEndInput()\"\n                            (keydown.tab)=\"hideCalendars()\"\n                        />\n                        <i kbq-icon=\"kbq-calendar-o_16\" kbqSuffix></i>\n                    </kbq-form-field>\n\n                    <kbq-form-field class=\"kbq-date-period__time\">\n                        <i kbq-icon=\"kbq-clock_16\" kbqPrefix></i>\n                        <input formControlName=\"end\" kbqTimepicker (focusin)=\"hideCalendars()\" />\n                    </kbq-form-field>\n                </div>\n\n                @if (formGroup.controls.start.invalid) {\n                    <kbq-hint class=\"kbq-date-period__hint\" [color]=\"'error'\">\n                        {{ localeData.datePipe.customPeriodErrorHint }}\n                    </kbq-hint>\n                }\n\n                <kbq-calendar\n                    #endDateCalendar\n                    [class.kbq-calendar_hidden]=\"!showEndCalendar\"\n                    (selectedChange)=\"onSelectEndDate($event)\"\n                />\n            </form>\n\n            <div class=\"kbq-date-period__footer\">\n                <button\n                    kbq-button\n                    [color]=\"'theme'\"\n                    [disabled]=\"disabled\"\n                    [kbqStyle]=\"'transparent'\"\n                    (click)=\"onApplyPeriod()\"\n                >\n                    <span>{{ localeData.pipe.applyButton }}</span>\n                    &nbsp;\n                    <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n                </button>\n            </div>\n        </div>\n    }\n</ng-template>\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ formattedValue }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n", ".kbq-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}.kbq-pipe-date__popover .kbq-popover__container{max-height:unset}.kbq-pipe-date__popover .kbq-popover__content{padding:0}.kbq-pipe-date__popover .kbq-date-list{margin:var(--kbq-size-xxs) 0}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option{margin-left:var(--kbq-size-xxs);margin-right:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-list-text{display:flex;flex-direction:row}.kbq-pipe-date__popover .kbq-date-list .kbq-list-option .kbq-icon{margin-left:var(--kbq-size-s);align-self:center;color:var(--kbq-icon-fade-contrast-color)}.kbq-pipe-date__popover .kbq-date-period{width:320px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header{padding:var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__header .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-divider{margin:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content{display:grid;grid-auto-columns:minmax(min-content,1fr);grid-template-columns:min-content minmax(min-content,1fr);padding:0;gap:var(--kbq-size-s)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__label{padding-left:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__control{padding-right:var(--kbq-size-l)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__date,.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-date-period__time{width:auto}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time{display:flex}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date{width:136px}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__date .kbq-form-field__container{border-top-right-radius:unset;border-bottom-right-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker{flex:1;margin-left:-1px;width:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-form__row_with-time .kbq-date-period__time.kbq-form-field-type-timepicker .kbq-form-field__container{border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar{position:relative;grid-column:2 span;padding:var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);background-color:var(--kbq-background-bg-tertiary)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-calendar.kbq-calendar_hidden{display:none}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__content .kbq-hint{grid-column:2 span;padding-left:var(--kbq-size-m);padding-right:var(--kbq-size-m)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer{padding:var(--kbq-size-xxs)}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button{width:100%;justify-content:flex-start}.kbq-pipe-date__popover .kbq-date-period .kbq-date-period__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-states-foreground-disabled);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n"] }]
         }], propDecorators: { popover: [{
                 type: ViewChild,
                 args: ['popover']
@@ -1375,7 +1375,7 @@ class KbqPipeTextComponent extends KbqBasePipe {
                 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_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "directive", type: i2.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["hideIfNotInViewPort", "kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: KbqTextareaModule }, { kind: "directive", type: i5$1.KbqTextarea, selector: "textarea[kbqTextarea]", inputs: ["canGrow", "maxRows", "errorStateMatcher", "disabled", "id", "placeholder", "freeRowsHeight", "required", "value"], exportAs: ["kbqTextarea"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "directive", type: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "directive", type: KbqPipeMinWidth, selector: "[kbqPipeMinWidth]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "popover", first: true, predicate: KbqPopoverTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<button\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverFooter]=\"footer\"\n    [kbqPopoverOffset]=\"4\"\n    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [ngClass]=\"{ 'kbq-active': popover?.isOpen }\"\n>\n    <span #kbqTitleText kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText kbqPipeMinWidth class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!data.value\">\n        {{ data.value }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    <kbq-form-field (keydown)=\"onKeydown($event)\">\n        <textarea kbqTextarea rows=\"1\" [formControl]=\"control\" [freeRowsHeight]=\"0\" [maxRows]=\"5\"></textarea>\n    </kbq-form-field>\n</ng-template>\n\n<ng-template #footer>\n    <button kbq-button [color]=\"'theme'\" [disabled]=\"disabled\" [kbqStyle]=\"'transparent'\" (click)=\"onApply()\">\n        <span>{{ localeData.pipe.applyButton }}</span>\n        &nbsp;\n        <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n    </button>\n</ng-template>\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ data.value }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqFormFieldModule }, { kind: "component", type: i2.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i2.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "directive", type: i2.KbqTrim, selector: "[kbqInput], [kbqTextarea]", exportAs: ["KbqTrim"] }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i5.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["hideIfNotInViewPort", "kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { kind: "ngmodule", type: KbqInputModule }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: KbqTextareaModule }, { kind: "directive", type: i5$1.KbqTextarea, selector: "textarea[kbqTextarea]", inputs: ["canGrow", "maxRows", "errorStateMatcher", "disabled", "id", "placeholder", "freeRowsHeight", "required", "value"], exportAs: ["kbqTextarea"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KbqPipeButton, selector: "kbq-pipe-button", inputs: ["readonly"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: KbqPipeState, selector: "[kbqPipeState]", inputs: ["kbqPipeState"] }, { kind: "directive", type: KbqPipeTitleDirective, selector: "[kbqPipeTitle]", inputs: ["kbqPipeTitle"], exportAs: ["kbqPipeTitle"] }, { kind: "directive", type: KbqPipeMinWidth, selector: "[kbqPipeMinWidth]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPipeTextComponent, decorators: [{
             type: Component,
@@ -1399,7 +1399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", 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_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"] }]
+                    ], template: "<button\n    kbq-button\n    kbqPopover\n    [disabled]=\"data.disabled\"\n    [kbqPipeState]=\"data\"\n    [kbqPipeTitle]=\"pipeTooltip\"\n    [kbqPopoverArrow]=\"false\"\n    [kbqPopoverSize]=\"'custom'\"\n    [kbqPopoverClass]=\"'kbq-pipe__popover'\"\n    [kbqPopoverContent]=\"content\"\n    [kbqPopoverFooter]=\"footer\"\n    [kbqPopoverOffset]=\"4\"\n    [defaultPaddings]=\"false\"\n    [kbqPopoverPlacement]=\"placements.BottomLeft\"\n    [ngClass]=\"{ 'kbq-active': popover?.isOpen }\"\n>\n    <span #kbqTitleText kbqPipeMinWidth class=\"kbq-pipe__name\">{{ data.name }}</span>\n    <span #kbqTitleText kbqPipeMinWidth class=\"kbq-pipe__value\" [class.kbq-pipe__value_empty]=\"!data.value\">\n        {{ data.value }}\n    </span>\n</button>\n\n@if (showRemoveButton) {\n    <kbq-pipe-button />\n}\n\n<ng-template #content>\n    <kbq-form-field (keydown)=\"onKeydown($event)\">\n        <textarea kbqTextarea rows=\"1\" [formControl]=\"control\" [freeRowsHeight]=\"0\" [maxRows]=\"5\"></textarea>\n    </kbq-form-field>\n</ng-template>\n\n<ng-template #footer>\n    <button kbq-button [color]=\"'theme'\" [disabled]=\"disabled\" [kbqStyle]=\"'transparent'\" (click)=\"onApply()\">\n        <span>{{ localeData.pipe.applyButton }}</span>\n        &nbsp;\n        <span class=\"kbq-button_hot-key\">{{ isMac ? '\u2318\u2009' : 'Ctrl + ' }}Enter</span>\n    </button>\n</ng-template>\n\n<ng-template #pipeTooltip>\n    <div class=\"kbq-pipe-tooltip__name kbq-text-compact\">{{ data.name }}</div>\n    <div class=\"kbq-pipe-tooltip__value kbq-text-compact\">{{ data.value }}</div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-pipe{display:flex;flex-direction:row;max-height:32px}.kbq-pipe .kbq-select .kbq-select__trigger{height:unset}.kbq-pipe .kbq-button-wrapper{max-width:320px}.kbq-pipe .kbq-pipe__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;color:var(--kbq-foreground-contrast-secondary)}.kbq-pipe .kbq-pipe__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.kbq-pipe .kbq-pipe__value:not(.kbq-pipe__value_empty){margin-left:4px}.kbq-pipe .kbq-pipe__separator{z-index:1;margin-left:-1px;margin-right:0;height:var(--kbq-size-l);align-self:center;color:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-tree-select:not(:hover,.kbq-active)+.kbq-pipe-button:not(:hover,.kbq-active):after,.kbq-pipe .kbq-button:not(:hover,.kbq-active,[disabled])+.kbq-pipe-button:not(:hover,.kbq-active):after{content:\"\";position:absolute;left:0;top:var(--kbq-size-s);width:1px;height:var(--kbq-size-l);background:var(--kbq-line-contrast-less)}.kbq-pipe .kbq-button.cdk-keyboard-focused{z-index:1}.kbq-pipe.kbq-pipe_disabled .kbq-pipe__name,.kbq-pipe.kbq-pipe_disabled .kbq-pipe__value{color:var(--kbq-states-foreground-disabled)}.kbq-pipe.kbq-pipe_removable .kbq-button,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button{border-bottom-right-radius:unset;border-top-right-radius:unset;border-right:none}.kbq-pipe.kbq-pipe_removable .kbq-button.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button.cdk-keyboard-focused:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe.kbq-pipe_removable .kbq-button-icon,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon{border-bottom-left-radius:unset;border-top-left-radius:unset;border-left:none}.kbq-pipe.kbq-pipe_removable .kbq-button-icon.cdk-keyboard-focused:after,.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) .kbq-button-icon.cdk-keyboard-focused:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--kbq-states-line-focus-theme)}.kbq-pipe-tooltip__name{color:var(--kbq-foreground-white-secondary)}.kbq-pipe-tooltip__value{color:var(--kbq-foreground-white)}\n"] }]
         }], propDecorators: { popover: [{
                 type: ViewChild,
                 args: [KbqPopoverTrigger]
@@ -2087,7 +2087,7 @@ class KbqFilterBar {
 
             <ng-content select="kbq-filter-refresher, [kbq-filter-refresher]" />
         </div>
-    `, isInline: true, styles: [".kbq-filter-bar{display:flex;flex-direction:row;justify-content:space-between;width:100%}.kbq-filter-bar .kbq-filter-bar__left{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--kbq-size-s)}.kbq-filter-bar .kbq-filter-bar__left .kbq-button>.kbq-icon{margin-right:var(--kbq-size-xxs)}.kbq-filter-bar .kbq-filter-bar__left>.kbq-icon{align-self:center}.kbq-filter-bar .kbq-filter-bar__right{display:flex;flex-direction:row;margin-left:var(--kbq-size-3xl)}.kbq-pipe__popover .kbq-popover__container{min-width:320px;max-width:320px}.kbq-pipe__popover .kbq-popover__content{padding:var(--kbq-size-m) var(--kbq-size-m) 1px!important}.kbq-pipe__popover .kbq-popover__footer{padding:var(--kbq-size-xxs)}.kbq-pipe__popover .kbq-popover__footer .kbq-button:not(.kbq-disabled){display:flex;flex-direction:row;width:100%;justify-content:flex-start}.kbq-pipe__popover .kbq-popover__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-button-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 }); }
+    `, isInline: true, styles: [".kbq-filter-bar{display:flex;flex-direction:row;justify-content:space-between;width:100%}.kbq-filter-bar .kbq-filter-bar__left{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--kbq-size-s)}.kbq-filter-bar .kbq-filter-bar__left .kbq-button>.kbq-icon{margin-right:var(--kbq-size-xxs)}.kbq-filter-bar .kbq-filter-bar__left>.kbq-icon{align-self:center}.kbq-filter-bar .kbq-filter-bar__right{display:flex;flex-direction:row;margin-left:var(--kbq-size-3xl)}.kbq-pipe__popover .kbq-popover__container{min-width:320px;max-width:320px}.kbq-pipe__popover .kbq-popover__content{padding:var(--kbq-size-m) var(--kbq-size-m) 1px!important}.kbq-pipe__popover .kbq-popover__footer{padding:var(--kbq-size-xxs)}.kbq-pipe__popover .kbq-popover__footer .kbq-button:not(.kbq-disabled){display:flex;flex-direction:row;width:100%;justify-content:flex-start}.kbq-pipe__popover .kbq-popover__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-button,.kbq-button-icon{-webkit-font-smoothing:antialiased}.kbq-button.kbq-button_changed-filter,.kbq-button-icon.kbq-button_changed-filter{color:var(--kbq-foreground-theme);background:var(--kbq-states-background-theme-less-active)}.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty,.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-icon-theme)}.kbq-button.kbq-button_changed-filter:hover:not(.kbq-disabled),.kbq-button.kbq-button_changed-filter.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter.kbq-hover:not(.kbq-disabled){background:var(--kbq-states-background-theme-less-hover)}.kbq-button.kbq-button_changed-filter:active:not(.kbq-disabled),.kbq-button.kbq-button_changed-filter.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter.kbq-active:not(.kbq-disabled){background:var(--kbq-states-background-theme-fade-active)}.kbq-button.kbq-button_changed-filter.cdk-keyboard-focused,.kbq-button-icon.kbq-button_changed-filter.cdk-keyboard-focused{outline:1px solid var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-button.kbq-button_changed-filter.kbq-disabled,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled{color:var(--kbq-states-foreground-disabled);background:var(--kbq-states-background-disabled)}.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-states-icon-disabled)}.kbq-hint.kbq-date-period__hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: KbqDividerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFilterBar, decorators: [{
             type: Component,
@@ -2109,7 +2109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         </div>
     `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'kbq-filter-bar'
-                    }, styles: [".kbq-filter-bar{display:flex;flex-direction:row;justify-content:space-between;width:100%}.kbq-filter-bar .kbq-filter-bar__left{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--kbq-size-s)}.kbq-filter-bar .kbq-filter-bar__left .kbq-button>.kbq-icon{margin-right:var(--kbq-size-xxs)}.kbq-filter-bar .kbq-filter-bar__left>.kbq-icon{align-self:center}.kbq-filter-bar .kbq-filter-bar__right{display:flex;flex-direction:row;margin-left:var(--kbq-size-3xl)}.kbq-pipe__popover .kbq-popover__container{min-width:320px;max-width:320px}.kbq-pipe__popover .kbq-popover__content{padding:var(--kbq-size-m) var(--kbq-size-m) 1px!important}.kbq-pipe__popover .kbq-popover__footer{padding:var(--kbq-size-xxs)}.kbq-pipe__popover .kbq-popover__footer .kbq-button:not(.kbq-disabled){display:flex;flex-direction:row;width:100%;justify-content:flex-start}.kbq-pipe__popover .kbq-popover__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-button-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"] }]
+                    }, styles: [".kbq-filter-bar{display:flex;flex-direction:row;justify-content:space-between;width:100%}.kbq-filter-bar .kbq-filter-bar__left{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--kbq-size-s)}.kbq-filter-bar .kbq-filter-bar__left .kbq-button>.kbq-icon{margin-right:var(--kbq-size-xxs)}.kbq-filter-bar .kbq-filter-bar__left>.kbq-icon{align-self:center}.kbq-filter-bar .kbq-filter-bar__right{display:flex;flex-direction:row;margin-left:var(--kbq-size-3xl)}.kbq-pipe__popover .kbq-popover__container{min-width:320px;max-width:320px}.kbq-pipe__popover .kbq-popover__content{padding:var(--kbq-size-m) var(--kbq-size-m) 1px!important}.kbq-pipe__popover .kbq-popover__footer{padding:var(--kbq-size-xxs)}.kbq-pipe__popover .kbq-popover__footer .kbq-button:not(.kbq-disabled){display:flex;flex-direction:row;width:100%;justify-content:flex-start}.kbq-pipe__popover .kbq-popover__footer .kbq-button:not(.kbq-disabled) .kbq-button_hot-key{color:var(--kbq-foreground-contrast-secondary)}.kbq-button,.kbq-button-icon{-webkit-font-smoothing:antialiased}.kbq-button.kbq-button_changed-filter,.kbq-button-icon.kbq-button_changed-filter{color:var(--kbq-foreground-theme);background:var(--kbq-states-background-theme-less-active)}.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty,.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_changed-filter .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-icon-theme)}.kbq-button.kbq-button_changed-filter:hover:not(.kbq-disabled),.kbq-button.kbq-button_changed-filter.kbq-hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter:hover:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter.kbq-hover:not(.kbq-disabled){background:var(--kbq-states-background-theme-less-hover)}.kbq-button.kbq-button_changed-filter:active:not(.kbq-disabled),.kbq-button.kbq-button_changed-filter.kbq-active:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter:active:not(.kbq-disabled),.kbq-button-icon.kbq-button_changed-filter.kbq-active:not(.kbq-disabled){background:var(--kbq-states-background-theme-fade-active)}.kbq-button.kbq-button_changed-filter.cdk-keyboard-focused,.kbq-button-icon.kbq-button_changed-filter.cdk-keyboard-focused{outline:1px solid var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-button.kbq-button_changed-filter.kbq-disabled,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled{color:var(--kbq-states-foreground-disabled);background:var(--kbq-states-background-disabled)}.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty,.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_left,.kbq-button.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right,.kbq-button-icon.kbq-button_changed-filter.kbq-disabled .kbq-icon.kbq-empty.kbq-icon_right{color:var(--kbq-states-icon-disabled)}.kbq-hint.kbq-date-period__hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { filters: [{
                 type: ContentChild,
                 args: [KbqFilters]