@koobiq/components 19.8.1 → 20.0.0

package/fesm2022/koobiq-components-time-range.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, input, computed, viewChildren, ChangeDetectionStrategy, ViewEncapsulation, Component, Injector, booleanAttribute, output, signal, Directive, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, input, computed, viewChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, booleanAttribute, output, signal, Directive, NgModule } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
@@ -12,7 +12,7 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i2 from '@koobiq/components/datepicker';
 import { KbqDatepickerModule } from '@koobiq/components/datepicker';
 import * as i3 from '@koobiq/components/form-field';
-import { KbqFieldset, KbqFieldsetItem, KbqFormFieldModule, KbqFormFieldControl } from '@koobiq/components/form-field';
+import { KbqFieldset, KbqFieldsetItem, KbqFormFieldControl } from '@koobiq/components/form-field';
 import * as i2$1 from '@koobiq/components/icon';
 import { KbqIcon, KbqIconModule } from '@koobiq/components/icon';
 import * as i5 from '@koobiq/components/radio';
@@ -180,10 +180,10 @@ class KbqTimeRangeService {
     omitMilliseconds(date) {
         return this.dateAdapter.createDateTime(this.dateAdapter.getYear(date), this.dateAdapter.getMonth(date), this.dateAdapter.getDate(date), this.dateAdapter.getHours(date), this.dateAdapter.getMinutes(date), this.dateAdapter.getSeconds(date), 0);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRangeService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRangeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRangeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRangeService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -197,19 +197,19 @@ class KbqTimeRangeEditor {
     constructor() {
         this.timeRangeService = inject(KbqTimeRangeService);
         /** The maximum selectable date. */
-        this.maxDate = input(null);
+        this.maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
         /** The minimum selectable date. */
-        this.minDate = input(null);
+        this.minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
         /** Preset of selectable ranges */
-        this.availableTimeRangeTypes = input(this.timeRangeService.providedDefaultTimeRangeTypes);
+        this.availableTimeRangeTypes = input(this.timeRangeService.providedDefaultTimeRangeTypes, ...(ngDevMode ? [{ debugName: "availableTimeRangeTypes" }] : []));
         /** Provided value of selected range */
-        this.rangeValue = input(this.timeRangeService.getDefaultRangeValue());
-        this.showRangeAsDefault = input.required();
-        this.localeConfiguration = input.required();
+        this.rangeValue = input(this.timeRangeService.getDefaultRangeValue(), ...(ngDevMode ? [{ debugName: "rangeValue" }] : []));
+        this.showRangeAsDefault = input.required(...(ngDevMode ? [{ debugName: "showRangeAsDefault" }] : []));
+        this.localeConfiguration = input.required(...(ngDevMode ? [{ debugName: "localeConfiguration" }] : []));
         /** Customizable option output */
-        this.optionTemplate = input();
+        this.optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : []));
         /** @docs-private */
-        this.isRangeVisible = computed(() => this.showRangeAsDefault() || this.availableTimeRangeTypes().includes('range'));
+        this.isRangeVisible = computed(() => this.showRangeAsDefault() || this.availableTimeRangeTypes().includes('range'), ...(ngDevMode ? [{ debugName: "isRangeVisible" }] : []));
         /** @docs-private */
         this.timeRangeTypesWithoutRange = computed(() => {
             const localeConfig = this.localeConfiguration();
@@ -221,9 +221,9 @@ class KbqTimeRangeEditor {
                 units: this.timeRangeService.getTimeRangeTypeUnits(type),
                 formattedValue: this.getFormattedOption(type, localeConfig)
             }));
-        });
+        }, ...(ngDevMode ? [{ debugName: "timeRangeTypesWithoutRange" }] : []));
         /** @docs-private */
-        this.timepickerList = viewChildren(KbqTimepicker);
+        this.timepickerList = viewChildren(KbqTimepicker, ...(ngDevMode ? [{ debugName: "timepickerList" }] : []));
         /** @docs-private */
         this.timepickerFormat = TimeFormats.HHmmss;
         /** @docs-private */
@@ -350,8 +350,8 @@ class KbqTimeRangeEditor {
         });
         return result;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRangeEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqTimeRangeEditor, isStandalone: true, selector: "kbq-time-range-editor", inputs: { maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, availableTimeRangeTypes: { classPropertyName: "availableTimeRangeTypes", publicName: "availableTimeRangeTypes", isSignal: true, isRequired: false, transformFunction: null }, rangeValue: { classPropertyName: "rangeValue", publicName: "rangeValue", isSignal: true, isRequired: false, transformFunction: null }, showRangeAsDefault: { classPropertyName: "showRangeAsDefault", publicName: "showRangeAsDefault", isSignal: true, isRequired: true, transformFunction: null }, localeConfiguration: { classPropertyName: "localeConfiguration", publicName: "localeConfiguration", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kbq-time-range__editor" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRangeEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqTimeRangeEditor, isStandalone: true, selector: "kbq-time-range-editor", inputs: { maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, availableTimeRangeTypes: { classPropertyName: "availableTimeRangeTypes", publicName: "availableTimeRangeTypes", isSignal: true, isRequired: false, transformFunction: null }, rangeValue: { classPropertyName: "rangeValue", publicName: "rangeValue", isSignal: true, isRequired: false, transformFunction: null }, showRangeAsDefault: { classPropertyName: "showRangeAsDefault", publicName: "showRangeAsDefault", isSignal: true, isRequired: true, transformFunction: null }, localeConfiguration: { classPropertyName: "localeConfiguration", publicName: "localeConfiguration", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kbq-time-range__editor" }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -362,9 +362,9 @@ class KbqTimeRangeEditor {
                 provide: NG_VALIDATORS,
                 useExisting: KbqTimeRangeEditor
             }
-        ], viewQueries: [{ propertyName: "timepickerList", predicate: KbqTimepicker, descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n    <kbq-radio-group class=\"kbq-time-range-editor__container\" [formControl]=\"form.controls.type\">\n        @let types = timeRangeTypesWithoutRange();\n\n        @if (types.length) {\n            <div class=\"kbq-time-range-editor__predefined\">\n                @for (type of types; track type) {\n                    <kbq-radio-button class=\"kbq-time-range-editor__predefined-option\" [value]=\"type.type\">\n                        <ng-container\n                            *ngTemplateOutlet=\"optionTemplate() || defaultOptionTemplate; context: { $implicit: type }\"\n                        />\n                    </kbq-radio-button>\n                }\n            </div>\n        }\n\n        @if (isRangeVisible()) {\n            @let localeConfig = localeConfiguration();\n\n            <div class=\"kbq-time-range-editor__range\" role=\"group\">\n                @if (types.length) {\n                    <kbq-radio-button [value]=\"'range'\">{{ localeConfig.editor.rangeLabel }}</kbq-radio-button>\n                }\n\n                <div class=\"kbq-time-range-editor__date-time\">\n                    <span class=\"kbq-time-range-editor__date-time-prefix\" [attr.aria-label]=\"localeConfig.editor.from\">\n                        {{ localeConfig.editor.from }}\n                    </span>\n                    <kbq-fieldset>\n                        <kbq-form-field kbqFieldsetItem>\n                            <i kbq-icon=\"kbq-clock_16\" kbqPrefix [autoColor]=\"true\"></i>\n                            <input kbqTimepicker [format]=\"timepickerFormat\" [formControl]=\"form.controls.fromTime\" />\n                        </kbq-form-field>\n\n                        <kbq-form-field>\n                            <input\n                                [min]=\"minDate()\"\n                                [max]=\"maxDate()\"\n                                [kbqDatepicker]=\"datepickerFrom\"\n                                [formControl]=\"form.controls.fromDate\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                            <kbq-datepicker-toggle-icon kbqSuffix [for]=\"datepickerFrom\" />\n                            <kbq-datepicker #datepickerFrom [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" />\n                        </kbq-form-field>\n                    </kbq-fieldset>\n                </div>\n\n                <div class=\"kbq-time-range-editor__date-time\">\n                    <span class=\"kbq-time-range-editor__date-time-prefix\" [attr.aria-label]=\"localeConfig.editor.to\">\n                        {{ localeConfig.editor.to }}\n                    </span>\n                    <kbq-fieldset>\n                        <kbq-form-field kbqFieldsetItem>\n                            <i kbq-icon=\"kbq-clock_16\" kbqPrefix [autoColor]=\"true\"></i>\n                            <input kbqTimepicker [format]=\"timepickerFormat\" [formControl]=\"form.controls.toTime\" />\n                        </kbq-form-field>\n\n                        <kbq-form-field>\n                            <input\n                                [min]=\"minDate()\"\n                                [max]=\"maxDate()\"\n                                [kbqDatepicker]=\"datepickerTo\"\n                                [formControl]=\"form.controls.toDate\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                            <kbq-datepicker-toggle-icon kbqSuffix [for]=\"datepickerTo\" />\n                            <kbq-datepicker #datepickerTo [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" />\n                        </kbq-form-field>\n                    </kbq-fieldset>\n                </div>\n            </div>\n        }\n    </kbq-radio-group>\n</form>\n\n<ng-template #defaultOptionTemplate let-context>\n    @let localeConfig = localeConfiguration();\n    @switch (context.translationType) {\n        @case ('other') {\n            @switch (context.type) {\n                @case ('allTime') {\n                    {{ localeConfig.editor.allTime }}\n                }\n                @case ('currentQuarter') {\n                    {{ localeConfig.editor.currentQuarter }}\n                }\n                @case ('currentYear') {\n                    {{ localeConfig.editor.currentYear }}\n                }\n            }\n        }\n        @default {\n            {{ context.formattedValue }}\n        }\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: KbqFieldset, selector: "kbq-fieldset" }, { kind: "directive", type: KbqFieldsetItem, selector: "[kbqFieldsetItem]" }, { kind: "ngmodule", type: KbqDatepickerModule }, { kind: "component", type: i2.KbqDatepicker, selector: "kbq-datepicker", inputs: ["hasBackdrop", "startAt", "disabled", "opened", "minDate", "maxDate", "panelClass", "dateClass", "backdropClass"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["kbqDatepicker"] }, { kind: "directive", type: i2.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: "component", type: i2.KbqDatepickerToggleIconComponent, selector: "kbq-datepicker-toggle-icon", inputs: ["disabled", "for"] }, { kind: "component", type: i3.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i3.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i3.KbqSuffix, selector: "[kbqSuffix]" }, { kind: "directive", type: i3.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: KbqFormFieldModule }, { kind: "ngmodule", type: KbqTimepickerModule }, { kind: "directive", type: i4.KbqTimepicker, selector: "input[kbqTimepicker]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "format", "min", "max", "value", "kbqValidationTooltip"], outputs: ["incorrectInput"], exportAs: ["kbqTimepicker"] }, { kind: "ngmodule", type: KbqRadioModule }, { kind: "directive", type: i5.KbqRadioGroup, selector: "kbq-radio-group", inputs: ["big", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["kbqRadioGroup"] }, { kind: "component", type: i5.KbqRadioButton, selector: "kbq-radio-button", inputs: ["checked", "value", "disabled", "tabIndex", "required", "labelPosition", "name", "isFocused", "id"], outputs: ["change"], exportAs: ["kbqRadioButton"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "timepickerList", predicate: KbqTimepicker, descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n    <kbq-radio-group class=\"kbq-time-range-editor__container\" [formControl]=\"form.controls.type\">\n        @let types = timeRangeTypesWithoutRange();\n\n        @if (types.length) {\n            <div class=\"kbq-time-range-editor__predefined\">\n                @for (type of types; track type) {\n                    <kbq-radio-button class=\"kbq-time-range-editor__predefined-option\" [value]=\"type.type\">\n                        <ng-container\n                            *ngTemplateOutlet=\"optionTemplate() || defaultOptionTemplate; context: { $implicit: type }\"\n                        />\n                    </kbq-radio-button>\n                }\n            </div>\n        }\n\n        @if (isRangeVisible()) {\n            @let localeConfig = localeConfiguration();\n\n            <div class=\"kbq-time-range-editor__range\" role=\"group\">\n                @if (types.length) {\n                    <kbq-radio-button [value]=\"'range'\">{{ localeConfig.editor.rangeLabel }}</kbq-radio-button>\n                }\n\n                <div class=\"kbq-time-range-editor__date-time\">\n                    <span class=\"kbq-time-range-editor__date-time-prefix\" [attr.aria-label]=\"localeConfig.editor.from\">\n                        {{ localeConfig.editor.from }}\n                    </span>\n                    <kbq-fieldset>\n                        <kbq-form-field kbqFieldsetItem>\n                            <i kbq-icon=\"kbq-clock_16\" kbqPrefix [autoColor]=\"true\"></i>\n                            <input kbqTimepicker [format]=\"timepickerFormat\" [formControl]=\"form.controls.fromTime\" />\n                        </kbq-form-field>\n\n                        <kbq-form-field>\n                            <input\n                                [min]=\"minDate()\"\n                                [max]=\"maxDate()\"\n                                [kbqDatepicker]=\"datepickerFrom\"\n                                [formControl]=\"form.controls.fromDate\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                            <kbq-datepicker-toggle-icon kbqSuffix [for]=\"datepickerFrom\" />\n                            <kbq-datepicker #datepickerFrom [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" />\n                        </kbq-form-field>\n                    </kbq-fieldset>\n                </div>\n\n                <div class=\"kbq-time-range-editor__date-time\">\n                    <span class=\"kbq-time-range-editor__date-time-prefix\" [attr.aria-label]=\"localeConfig.editor.to\">\n                        {{ localeConfig.editor.to }}\n                    </span>\n                    <kbq-fieldset>\n                        <kbq-form-field kbqFieldsetItem>\n                            <i kbq-icon=\"kbq-clock_16\" kbqPrefix [autoColor]=\"true\"></i>\n                            <input kbqTimepicker [format]=\"timepickerFormat\" [formControl]=\"form.controls.toTime\" />\n                        </kbq-form-field>\n\n                        <kbq-form-field>\n                            <input\n                                [min]=\"minDate()\"\n                                [max]=\"maxDate()\"\n                                [kbqDatepicker]=\"datepickerTo\"\n                                [formControl]=\"form.controls.toDate\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                            <kbq-datepicker-toggle-icon kbqSuffix [for]=\"datepickerTo\" />\n                            <kbq-datepicker #datepickerTo [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" />\n                        </kbq-form-field>\n                    </kbq-fieldset>\n                </div>\n            </div>\n        }\n    </kbq-radio-group>\n</form>\n\n<ng-template #defaultOptionTemplate let-context>\n    @let localeConfig = localeConfiguration();\n    @switch (context.translationType) {\n        @case ('other') {\n            @switch (context.type) {\n                @case ('allTime') {\n                    {{ localeConfig.editor.allTime }}\n                }\n                @case ('currentQuarter') {\n                    {{ localeConfig.editor.currentQuarter }}\n                }\n                @case ('currentYear') {\n                    {{ localeConfig.editor.currentYear }}\n                }\n            }\n        }\n        @default {\n            {{ context.formattedValue }}\n        }\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: KbqFieldset, selector: "kbq-fieldset" }, { kind: "directive", type: KbqFieldsetItem, selector: "[kbqFieldsetItem]" }, { kind: "ngmodule", type: KbqDatepickerModule }, { kind: "component", type: i2.KbqDatepicker, selector: "kbq-datepicker", inputs: ["hasBackdrop", "startAt", "disabled", "opened", "minDate", "maxDate", "panelClass", "dateClass", "backdropClass"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["kbqDatepicker"] }, { kind: "directive", type: i2.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: "component", type: i2.KbqDatepickerToggleIconComponent, selector: "kbq-datepicker-toggle-icon", inputs: ["disabled", "for"] }, { kind: "component", type: i3.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i3.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i3.KbqSuffix, selector: "[kbqSuffix]" }, { kind: "ngmodule", type: KbqTimepickerModule }, { kind: "directive", type: i4.KbqTimepicker, selector: "input[kbqTimepicker]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "format", "min", "max", "value", "kbqValidationTooltip"], outputs: ["incorrectInput"], exportAs: ["kbqTimepicker"] }, { kind: "ngmodule", type: KbqRadioModule }, { kind: "directive", type: i5.KbqRadioGroup, selector: "kbq-radio-group", inputs: ["big", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["kbqRadioGroup"] }, { kind: "component", type: i5.KbqRadioButton, selector: "kbq-radio-button", inputs: ["checked", "value", "disabled", "tabIndex", "required", "labelPosition", "name", "isFocused", "id"], outputs: ["change"], exportAs: ["kbqRadioButton"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRangeEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRangeEditor, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-time-range-editor', imports: [
                         NgTemplateOutlet,
@@ -372,13 +372,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqFieldset,
                         KbqFieldsetItem,
                         KbqDatepickerModule,
-                        KbqFormFieldModule,
                         KbqTimepickerModule,
                         KbqRadioModule,
                         KbqIcon
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'kbq-time-range__editor'
-                    }, providers: [
+                    ], providers: [
                         {
                             multi: true,
                             provide: NG_VALUE_ACCESSOR,
@@ -389,8 +386,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                             provide: NG_VALIDATORS,
                             useExisting: KbqTimeRangeEditor
                         }
-                    ], template: "<form [formGroup]=\"form\">\n    <kbq-radio-group class=\"kbq-time-range-editor__container\" [formControl]=\"form.controls.type\">\n        @let types = timeRangeTypesWithoutRange();\n\n        @if (types.length) {\n            <div class=\"kbq-time-range-editor__predefined\">\n                @for (type of types; track type) {\n                    <kbq-radio-button class=\"kbq-time-range-editor__predefined-option\" [value]=\"type.type\">\n                        <ng-container\n                            *ngTemplateOutlet=\"optionTemplate() || defaultOptionTemplate; context: { $implicit: type }\"\n                        />\n                    </kbq-radio-button>\n                }\n            </div>\n        }\n\n        @if (isRangeVisible()) {\n            @let localeConfig = localeConfiguration();\n\n            <div class=\"kbq-time-range-editor__range\" role=\"group\">\n                @if (types.length) {\n                    <kbq-radio-button [value]=\"'range'\">{{ localeConfig.editor.rangeLabel }}</kbq-radio-button>\n                }\n\n                <div class=\"kbq-time-range-editor__date-time\">\n                    <span class=\"kbq-time-range-editor__date-time-prefix\" [attr.aria-label]=\"localeConfig.editor.from\">\n                        {{ localeConfig.editor.from }}\n                    </span>\n                    <kbq-fieldset>\n                        <kbq-form-field kbqFieldsetItem>\n                            <i kbq-icon=\"kbq-clock_16\" kbqPrefix [autoColor]=\"true\"></i>\n                            <input kbqTimepicker [format]=\"timepickerFormat\" [formControl]=\"form.controls.fromTime\" />\n                        </kbq-form-field>\n\n                        <kbq-form-field>\n                            <input\n                                [min]=\"minDate()\"\n                                [max]=\"maxDate()\"\n                                [kbqDatepicker]=\"datepickerFrom\"\n                                [formControl]=\"form.controls.fromDate\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                            <kbq-datepicker-toggle-icon kbqSuffix [for]=\"datepickerFrom\" />\n                            <kbq-datepicker #datepickerFrom [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" />\n                        </kbq-form-field>\n                    </kbq-fieldset>\n                </div>\n\n                <div class=\"kbq-time-range-editor__date-time\">\n                    <span class=\"kbq-time-range-editor__date-time-prefix\" [attr.aria-label]=\"localeConfig.editor.to\">\n                        {{ localeConfig.editor.to }}\n                    </span>\n                    <kbq-fieldset>\n                        <kbq-form-field kbqFieldsetItem>\n                            <i kbq-icon=\"kbq-clock_16\" kbqPrefix [autoColor]=\"true\"></i>\n                            <input kbqTimepicker [format]=\"timepickerFormat\" [formControl]=\"form.controls.toTime\" />\n                        </kbq-form-field>\n\n                        <kbq-form-field>\n                            <input\n                                [min]=\"minDate()\"\n                                [max]=\"maxDate()\"\n                                [kbqDatepicker]=\"datepickerTo\"\n                                [formControl]=\"form.controls.toDate\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                            <kbq-datepicker-toggle-icon kbqSuffix [for]=\"datepickerTo\" />\n                            <kbq-datepicker #datepickerTo [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" />\n                        </kbq-form-field>\n                    </kbq-fieldset>\n                </div>\n            </div>\n        }\n    </kbq-radio-group>\n</form>\n\n<ng-template #defaultOptionTemplate let-context>\n    @let localeConfig = localeConfiguration();\n    @switch (context.translationType) {\n        @case ('other') {\n            @switch (context.type) {\n                @case ('allTime') {\n                    {{ localeConfig.editor.allTime }}\n                }\n                @case ('currentQuarter') {\n                    {{ localeConfig.editor.currentQuarter }}\n                }\n                @case ('currentYear') {\n                    {{ localeConfig.editor.currentYear }}\n                }\n            }\n        }\n        @default {\n            {{ context.formattedValue }}\n        }\n    }\n</ng-template>\n" }]
-        }], ctorParameters: () => [] });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'kbq-time-range__editor'
+                    }, template: "<form [formGroup]=\"form\">\n    <kbq-radio-group class=\"kbq-time-range-editor__container\" [formControl]=\"form.controls.type\">\n        @let types = timeRangeTypesWithoutRange();\n\n        @if (types.length) {\n            <div class=\"kbq-time-range-editor__predefined\">\n                @for (type of types; track type) {\n                    <kbq-radio-button class=\"kbq-time-range-editor__predefined-option\" [value]=\"type.type\">\n                        <ng-container\n                            *ngTemplateOutlet=\"optionTemplate() || defaultOptionTemplate; context: { $implicit: type }\"\n                        />\n                    </kbq-radio-button>\n                }\n            </div>\n        }\n\n        @if (isRangeVisible()) {\n            @let localeConfig = localeConfiguration();\n\n            <div class=\"kbq-time-range-editor__range\" role=\"group\">\n                @if (types.length) {\n                    <kbq-radio-button [value]=\"'range'\">{{ localeConfig.editor.rangeLabel }}</kbq-radio-button>\n                }\n\n                <div class=\"kbq-time-range-editor__date-time\">\n                    <span class=\"kbq-time-range-editor__date-time-prefix\" [attr.aria-label]=\"localeConfig.editor.from\">\n                        {{ localeConfig.editor.from }}\n                    </span>\n                    <kbq-fieldset>\n                        <kbq-form-field kbqFieldsetItem>\n                            <i kbq-icon=\"kbq-clock_16\" kbqPrefix [autoColor]=\"true\"></i>\n                            <input kbqTimepicker [format]=\"timepickerFormat\" [formControl]=\"form.controls.fromTime\" />\n                        </kbq-form-field>\n\n                        <kbq-form-field>\n                            <input\n                                [min]=\"minDate()\"\n                                [max]=\"maxDate()\"\n                                [kbqDatepicker]=\"datepickerFrom\"\n                                [formControl]=\"form.controls.fromDate\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                            <kbq-datepicker-toggle-icon kbqSuffix [for]=\"datepickerFrom\" />\n                            <kbq-datepicker #datepickerFrom [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" />\n                        </kbq-form-field>\n                    </kbq-fieldset>\n                </div>\n\n                <div class=\"kbq-time-range-editor__date-time\">\n                    <span class=\"kbq-time-range-editor__date-time-prefix\" [attr.aria-label]=\"localeConfig.editor.to\">\n                        {{ localeConfig.editor.to }}\n                    </span>\n                    <kbq-fieldset>\n                        <kbq-form-field kbqFieldsetItem>\n                            <i kbq-icon=\"kbq-clock_16\" kbqPrefix [autoColor]=\"true\"></i>\n                            <input kbqTimepicker [format]=\"timepickerFormat\" [formControl]=\"form.controls.toTime\" />\n                        </kbq-form-field>\n\n                        <kbq-form-field>\n                            <input\n                                [min]=\"minDate()\"\n                                [max]=\"maxDate()\"\n                                [kbqDatepicker]=\"datepickerTo\"\n                                [formControl]=\"form.controls.toDate\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                            <kbq-datepicker-toggle-icon kbqSuffix [for]=\"datepickerTo\" />\n                            <kbq-datepicker #datepickerTo [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" />\n                        </kbq-form-field>\n                    </kbq-fieldset>\n                </div>\n            </div>\n        }\n    </kbq-radio-group>\n</form>\n\n<ng-template #defaultOptionTemplate let-context>\n    @let localeConfig = localeConfiguration();\n    @switch (context.translationType) {\n        @case ('other') {\n            @switch (context.type) {\n                @case ('allTime') {\n                    {{ localeConfig.editor.allTime }}\n                }\n                @case ('currentQuarter') {\n                    {{ localeConfig.editor.currentQuarter }}\n                }\n                @case ('currentYear') {\n                    {{ localeConfig.editor.currentYear }}\n                }\n            }\n        }\n        @default {\n            {{ context.formattedValue }}\n        }\n    }\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], availableTimeRangeTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTimeRangeTypes", required: false }] }], rangeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeValue", required: false }] }], showRangeAsDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRangeAsDefault", required: true }] }], localeConfiguration: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeConfiguration", required: true }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], timepickerList: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KbqTimepicker), { isSignal: true }] }] } });
 
 /** @docs-private */
 class KbqTimeRangeTitle {
@@ -398,9 +397,9 @@ class KbqTimeRangeTitle {
         this.timeRangeService = inject(KbqTimeRangeService);
         this.popover = inject(KbqPopoverTrigger, { host: true });
         this.injector = inject(Injector);
-        this.timeRange = input.required();
-        this.localeConfiguration = input.required();
-        this.titleTemplate = input();
+        this.timeRange = input.required(...(ngDevMode ? [{ debugName: "timeRange" }] : []));
+        this.localeConfiguration = input.required(...(ngDevMode ? [{ debugName: "localeConfiguration" }] : []));
+        this.titleTemplate = input(...(ngDevMode ? [undefined, { debugName: "titleTemplate" }] : []));
         this.context = computed(() => {
             const timeRange = this.timeRange();
             if (!timeRange)
@@ -409,7 +408,7 @@ class KbqTimeRangeTitle {
                 ...timeRange,
                 ...this.timeRangeService.getTimeRangeTypeUnits(timeRange.type)
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "context" }] : []));
         this.titleContext = computed(() => {
             const context = this.context();
             const formattedDate = this.formattedDate();
@@ -421,7 +420,7 @@ class KbqTimeRangeTitle {
                 $implicit: customizableTitleContext,
                 ...customizableTitleContext
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "titleContext" }] : []));
         this.formattedDate = computed(() => {
             const context = this.context();
             const localeConfiguration = this.localeConfiguration();
@@ -455,10 +454,10 @@ class KbqTimeRangeTitle {
             return (localeConfiguration.title.for +
                 ' ' +
                 this.timeRangeService.dateFormatter.duration(this.timeRangeService.dateAdapter.deserialize(context.startDateTime), this.timeRangeService.dateAdapter.today(), [timeRangeUnit], false, localeConfiguration.durationTemplate.title));
-        });
+        }, ...(ngDevMode ? [{ debugName: "formattedDate" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRangeTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqTimeRangeTitle, isStandalone: true, selector: "kbq-time-range-title", inputs: { timeRange: { classPropertyName: "timeRange", publicName: "timeRange", isSignal: true, isRequired: true, transformFunction: null }, localeConfiguration: { classPropertyName: "localeConfiguration", publicName: "localeConfiguration", isSignal: true, isRequired: true, transformFunction: null }, titleTemplate: { classPropertyName: "titleTemplate", publicName: "titleTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRangeTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqTimeRangeTitle, isStandalone: true, selector: "kbq-time-range-title", inputs: { timeRange: { classPropertyName: "timeRange", publicName: "timeRange", isSignal: true, isRequired: true, transformFunction: null }, localeConfiguration: { classPropertyName: "localeConfiguration", publicName: "localeConfiguration", isSignal: true, isRequired: true, transformFunction: null }, titleTemplate: { classPropertyName: "titleTemplate", publicName: "titleTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
         @if (titleTemplate()) {
             <ng-container *ngTemplateOutlet="titleTemplate()!; context: titleContext() ?? null; injector: injector" />
         } @else {
@@ -470,7 +469,7 @@ class KbqTimeRangeTitle {
         }
     `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqLinkModule }, { kind: "directive", type: i1$1.KbqLink, selector: "[kbq-link]", inputs: ["disabled", "tabIndex", "pseudo", "noUnderline", "big", "compact", "multiline", "useVisited", "print"], exportAs: ["kbqLink"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2$1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRangeTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRangeTitle, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-time-range-title',
@@ -492,7 +491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { timeRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeRange", required: true }] }], localeConfiguration: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeConfiguration", required: true }] }], titleTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleTemplate", required: false }] }] } });
 
 /** Localization configuration provider. */
 const KBQ_TIME_RANGE_LOCALE_CONFIGURATION = new InjectionToken('KBQ_TIME_RANGE_LOCALE_CONFIGURATION', { factory: () => ruRULocaleData.timeRange });
@@ -508,26 +507,26 @@ class KbqTimeRange {
         /** @docs-private */
         this.ngControl = inject(NgControl, { optional: true, self: true });
         /** The minimum selectable date. */
-        this.minDate = input();
+        this.minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
         /** The maximum selectable date. */
-        this.maxDate = input();
+        this.maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
         /** provided value of selected range */
-        this.defaultRangeValue = input();
+        this.defaultRangeValue = input(...(ngDevMode ? [undefined, { debugName: "defaultRangeValue" }] : []));
         /** Preset of selectable ranges */
-        this.availableTimeRangeTypes = input(this.timeRangeService.providedDefaultTimeRangeTypes);
+        this.availableTimeRangeTypes = input(this.timeRangeService.providedDefaultTimeRangeTypes, ...(ngDevMode ? [{ debugName: "availableTimeRangeTypes" }] : []));
         /** Customizable trigger output */
-        this.titleTemplate = input();
+        this.titleTemplate = input(...(ngDevMode ? [undefined, { debugName: "titleTemplate" }] : []));
         /** Customizable option output */
-        this.optionTemplate = input();
+        this.optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : []));
         /** Whether to show popover with arrow */
-        this.arrow = input(true, { transform: booleanAttribute });
+        this.arrow = input(true, ...(ngDevMode ? [{ debugName: "arrow", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /**
          * Whether to show range in popover if not provided
          * @see availableTimeRangeTypes
          */
-        this.showRangeAsDefault = input(true);
+        this.showRangeAsDefault = input(true, ...(ngDevMode ? [{ debugName: "showRangeAsDefault" }] : []));
         /** Whether component should fallback to default value if null provided */
-        this.nonNullable = input(true, { transform: booleanAttribute });
+        this.nonNullable = input(true, ...(ngDevMode ? [{ debugName: "nonNullable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /** Emit value update if provided value via formControl wasn't valid */
         this.valueCorrected = output();
         /**
@@ -536,13 +535,13 @@ class KbqTimeRange {
         this.normalizedDefaultRangeValue = computed(() => ({
             ...this.timeRangeService.getDefaultRangeValue(),
             ...this.defaultRangeValue()
-        }));
+        }), ...(ngDevMode ? [{ debugName: "normalizedDefaultRangeValue" }] : []));
         /** @docs-private */
         this.popoverSize = PopUpSizes.Medium;
         /** @docs-private */
         this.popupPlacement = PopUpPlacements.BottomLeft;
         /** @docs-private */
-        this.localeConfiguration = signal(inject(KBQ_TIME_RANGE_LOCALE_CONFIGURATION));
+        this.localeConfiguration = signal(inject(KBQ_TIME_RANGE_LOCALE_CONFIGURATION), ...(ngDevMode ? [{ debugName: "localeConfiguration" }] : []));
         /** @docs-private */
         this.onChange = (_value) => { };
         /** @docs-private */
@@ -560,7 +559,7 @@ class KbqTimeRange {
             this.ngControl.valueAccessor = this;
         }
         const defaultValue = this.timeRangeService.getTimeRangeDefaultValue(this.normalizedDefaultRangeValue(), this.availableTimeRangeTypes());
-        this.titleValue = signal(this.nonNullable() ? defaultValue : null);
+        this.titleValue = signal(this.nonNullable() ? defaultValue : null, ...(ngDevMode ? [{ debugName: "titleValue" }] : []));
         this.rangeEditorControl = new FormControl(defaultValue, { nonNullable: true });
         this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(() => {
             this.localeConfiguration.set(this.localeService?.getParams('timeRange') ?? ruRULocaleData.timeRange);
@@ -609,8 +608,8 @@ class KbqTimeRange {
     registerOnTouched(fn) {
         this.onTouch = fn;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRange, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: KbqTimeRange, isStandalone: true, selector: "kbq-time-range", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, defaultRangeValue: { classPropertyName: "defaultRangeValue", publicName: "defaultRangeValue", isSignal: true, isRequired: false, transformFunction: null }, availableTimeRangeTypes: { classPropertyName: "availableTimeRangeTypes", publicName: "availableTimeRangeTypes", isSignal: true, isRequired: false, transformFunction: null }, titleTemplate: { classPropertyName: "titleTemplate", publicName: "titleTemplate", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, showRangeAsDefault: { classPropertyName: "showRangeAsDefault", publicName: "showRangeAsDefault", isSignal: true, isRequired: false, transformFunction: null }, nonNullable: { classPropertyName: "nonNullable", publicName: "nonNullable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueCorrected: "valueCorrected" }, host: { classAttribute: "kbq-time-range" }, providers: [KbqTimeRangeService], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRange, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: KbqTimeRange, isStandalone: true, selector: "kbq-time-range", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, defaultRangeValue: { classPropertyName: "defaultRangeValue", publicName: "defaultRangeValue", isSignal: true, isRequired: false, transformFunction: null }, availableTimeRangeTypes: { classPropertyName: "availableTimeRangeTypes", publicName: "availableTimeRangeTypes", isSignal: true, isRequired: false, transformFunction: null }, titleTemplate: { classPropertyName: "titleTemplate", publicName: "titleTemplate", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, showRangeAsDefault: { classPropertyName: "showRangeAsDefault", publicName: "showRangeAsDefault", isSignal: true, isRequired: false, transformFunction: null }, nonNullable: { classPropertyName: "nonNullable", publicName: "nonNullable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueCorrected: "valueCorrected" }, host: { classAttribute: "kbq-time-range" }, providers: [KbqTimeRangeService], ngImport: i0, template: `
         @let localeConfig = localeConfiguration();
         <kbq-time-range-title
             #popover="kbqPopover"
@@ -657,7 +656,7 @@ class KbqTimeRange {
         </ng-template>
     `, isInline: true, styles: [".kbq-time-range .kbq-time-range__trigger{display:block}.kbq-time-range__popover .kbq-time-range__buttons{display:flex;flex-direction:row;gap:var(--kbq-size-l)}.kbq-time-range__editor{display:block}.kbq-time-range__editor .kbq-time-range-editor__container{width:100%}.kbq-time-range__editor .kbq-time-range-editor__predefined{column-count:2}.kbq-time-range__editor .kbq-time-range-editor__predefined .kbq-time-range-editor__predefined-option{display:block;margin-bottom:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range{display:flex;flex-direction:column;gap:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__predefined{column-count:2}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__predefined .kbq-time-range-editor__predefined-option{display:block}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__date-time{display:flex;flex-direction:row;justify-content:space-between;gap:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__date-time .kbq-time-range-editor__date-time-prefix{align-self:center;width:57px}.kbq-time-range-title-as-form-field{white-space:nowrap;text-overflow:ellipsis;min-height:calc(var(--kbq-form-field-size-height) - 2 * var(--kbq-size-border-width))}.kbq-time-range-title-as-form-field .kbq-time-range-title__placeholder{color:var(--kbq-foreground-contrast-tertiary)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i2$2.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: i3$1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3$1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: KbqTimeRangeEditor, selector: "kbq-time-range-editor", inputs: ["maxDate", "minDate", "availableTimeRangeTypes", "rangeValue", "showRangeAsDefault", "localeConfiguration", "optionTemplate"] }, { kind: "component", type: KbqTimeRangeTitle, selector: "kbq-time-range-title", inputs: ["timeRange", "localeConfiguration", "titleTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRange, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRange, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-time-range', imports: [
                         ReactiveFormsModule,
@@ -710,17 +709,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 <button kbq-button (click)="onCancel(popover)">{{ localeConfig.editor.cancel }}</button>
             </div>
         </ng-template>
-    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+    `, providers: [KbqTimeRangeService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-time-range'
-                    }, providers: [KbqTimeRangeService], styles: [".kbq-time-range .kbq-time-range__trigger{display:block}.kbq-time-range__popover .kbq-time-range__buttons{display:flex;flex-direction:row;gap:var(--kbq-size-l)}.kbq-time-range__editor{display:block}.kbq-time-range__editor .kbq-time-range-editor__container{width:100%}.kbq-time-range__editor .kbq-time-range-editor__predefined{column-count:2}.kbq-time-range__editor .kbq-time-range-editor__predefined .kbq-time-range-editor__predefined-option{display:block;margin-bottom:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range{display:flex;flex-direction:column;gap:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__predefined{column-count:2}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__predefined .kbq-time-range-editor__predefined-option{display:block}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__date-time{display:flex;flex-direction:row;justify-content:space-between;gap:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__date-time .kbq-time-range-editor__date-time-prefix{align-self:center;width:57px}.kbq-time-range-title-as-form-field{white-space:nowrap;text-overflow:ellipsis;min-height:calc(var(--kbq-form-field-size-height) - 2 * var(--kbq-size-border-width))}.kbq-time-range-title-as-form-field .kbq-time-range-title__placeholder{color:var(--kbq-foreground-contrast-tertiary)}\n"] }]
-        }], ctorParameters: () => [] });
+                    }, styles: [".kbq-time-range .kbq-time-range__trigger{display:block}.kbq-time-range__popover .kbq-time-range__buttons{display:flex;flex-direction:row;gap:var(--kbq-size-l)}.kbq-time-range__editor{display:block}.kbq-time-range__editor .kbq-time-range-editor__container{width:100%}.kbq-time-range__editor .kbq-time-range-editor__predefined{column-count:2}.kbq-time-range__editor .kbq-time-range-editor__predefined .kbq-time-range-editor__predefined-option{display:block;margin-bottom:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range{display:flex;flex-direction:column;gap:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__predefined{column-count:2}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__predefined .kbq-time-range-editor__predefined-option{display:block}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__date-time{display:flex;flex-direction:row;justify-content:space-between;gap:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__date-time .kbq-time-range-editor__date-time-prefix{align-self:center;width:57px}.kbq-time-range-title-as-form-field{white-space:nowrap;text-overflow:ellipsis;min-height:calc(var(--kbq-form-field-size-height) - 2 * var(--kbq-size-border-width))}.kbq-time-range-title-as-form-field .kbq-time-range-title__placeholder{color:var(--kbq-foreground-contrast-tertiary)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], defaultRangeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultRangeValue", required: false }] }], availableTimeRangeTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTimeRangeTypes", required: false }] }], titleTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleTemplate", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: false }] }], showRangeAsDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRangeAsDefault", required: false }] }], nonNullable: [{ type: i0.Input, args: [{ isSignal: true, alias: "nonNullable", required: false }] }], valueCorrected: [{ type: i0.Output, args: ["valueCorrected"] }] } });
 
 /** Directive for easy using styles of time-range placeholder publicly. */
 class KbqTimeRangeTitlePlaceholder {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRangeTitlePlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqTimeRangeTitlePlaceholder, isStandalone: true, selector: "[kbqTimeRangeTitlePlaceholder]", host: { classAttribute: "kbq-time-range-title__placeholder" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRangeTitlePlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqTimeRangeTitlePlaceholder, isStandalone: true, selector: "[kbqTimeRangeTitlePlaceholder]", host: { classAttribute: "kbq-time-range-title__placeholder" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRangeTitlePlaceholder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRangeTitlePlaceholder, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTimeRangeTitlePlaceholder]',
@@ -744,8 +743,8 @@ class KbqTimeRangeTitleAsControl {
     onContainerClick(_event) { }
     /** @docs-private */
     focus(_options) { }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRangeTitleAsControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqTimeRangeTitleAsControl, isStandalone: true, selector: "kbq-time-range-title-as-control", host: { properties: { "attr.tabindex": "0" }, classAttribute: "kbq-time-range-title-as-form-field" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRangeTitleAsControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: KbqTimeRangeTitleAsControl, isStandalone: true, selector: "kbq-time-range-title-as-control", host: { properties: { "attr.tabindex": "0" }, classAttribute: "kbq-time-range-title-as-form-field" }, providers: [
             {
                 provide: KbqFormFieldControl,
                 useExisting: KbqTimeRangeTitleAsControl
@@ -754,7 +753,7 @@ class KbqTimeRangeTitleAsControl {
         <ng-content />
     `, isInline: true, styles: [":host{display:flex;align-items:center}:host:focus-visible{outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRangeTitleAsControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRangeTitleAsControl, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-time-range-title-as-control', template: `
         <ng-content />
@@ -763,10 +762,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                             provide: KbqFormFieldControl,
                             useExisting: KbqTimeRangeTitleAsControl
                         }
-                    ], host: {
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.tabindex]': '0',
                         class: 'kbq-time-range-title-as-form-field'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;align-items:center}:host:focus-visible{outline:none}\n"] }]
+                    }, styles: [":host{display:flex;align-items:center}:host:focus-visible{outline:none}\n"] }]
         }] });
 
 const COMPONENTS = [
@@ -777,8 +776,8 @@ const COMPONENTS = [
     KbqTimeRangeTitleAsControl
 ];
 class KbqTimeRangeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRangeModule, imports: [KbqTimeRange,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRangeModule, imports: [KbqTimeRange,
             KbqTimeRangeTitle,
             KbqTimeRangeEditor,
             KbqTimeRangeTitlePlaceholder,
@@ -787,11 +786,11 @@ class KbqTimeRangeModule {
             KbqTimeRangeEditor,
             KbqTimeRangeTitlePlaceholder,
             KbqTimeRangeTitleAsControl] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRangeModule, imports: [KbqTimeRange,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRangeModule, imports: [KbqTimeRange,
             KbqTimeRangeTitle,
             KbqTimeRangeEditor] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTimeRangeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTimeRangeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,