@koobiq/components 18.18.0 → 18.19.0

package/fesm2022/koobiq-components-datepicker.mjs

@@ -240,7 +240,7 @@ class KbqCalendarHeader {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqCalendarHeader, deps: [{ token: i1$1.DateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqCalendarHeader, selector: "kbq-calendar-header", inputs: { activeDate: "activeDate", maxDate: "maxDate", minDate: "minDate" }, outputs: { activeDateChange: "activeDateChange", monthSelected: "monthSelected", yearSelected: "yearSelected" }, host: { classAttribute: "kbq-calendar-header" }, exportAs: ["kbqCalendarHeader"], ngImport: i0, template: "<div class=\"kbq-calendar-header__select-group\">\n    <kbq-select\n        #monthSelect=\"kbqSelect\"\n        class=\"kbq-calendar-header__select\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        [value]=\"selectedMonth\"\n        (selectionChange)=\"onMonthSelected($event.value)\"\n    >\n        <button\n            kbq-button\n            kbq-select-matcher\n            class=\"layout-padding-right-xs\"\n            [class.kbq-active]=\"monthSelect.panelOpen\"\n            [color]=\"'contrast'\"\n            [kbqStyle]=\"'transparent'\"\n            [tabindex]=\"-1\"\n        >\n            {{ monthNames[selectedMonth].nameShort | titlecase }}\n\n            <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\" [color]=\"'contrast'\"></i>\n        </button>\n\n        @for (month of monthNames; track month.nameShort) {\n            <kbq-option [disabled]=\"month.disabled\" [kbqTooltipDisabled]=\"true\" [value]=\"month.value\">\n                {{ month.name }}\n            </kbq-option>\n        }\n    </kbq-select>\n\n    <kbq-select\n        #yearSelect=\"kbqSelect\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        [value]=\"selectedYear\"\n        (selectionChange)=\"onYearSelected($event.value)\"\n    >\n        <button\n            kbq-button\n            kbq-select-matcher\n            class=\"layout-padding-right-xs\"\n            [class.kbq-active]=\"yearSelect.panelOpen\"\n            [color]=\"'contrast'\"\n            [kbqStyle]=\"'transparent'\"\n            [tabindex]=\"-1\"\n        >\n            {{ selectedYear }}\n\n            <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\"></i>\n        </button>\n\n        @for (year of years; track year) {\n            <kbq-option [kbqTooltipDisabled]=\"true\" [value]=\"year\">\n                {{ year }}\n            </kbq-option>\n        }\n    </kbq-select>\n</div>\n\n<div class=\"kbq-calendar-header__button-group\">\n    <button\n        kbq-button\n        class=\"kbq-calendar-header__previous-button\"\n        [color]=\"'contrast'\"\n        [disabled]=\"previousDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectPreviousMonth()\"\n    >\n        <i kbq-icon=\"kbq-chevron-left_16\"></i>\n    </button>\n\n    <button\n        kbq-button\n        [color]=\"'contrast'\"\n        [disabled]=\"currentDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectCurrentDate()\"\n    >\n        <i kbq-icon=\"kbq-circle-xs_16\"></i>\n    </button>\n\n    <button\n        kbq-button\n        class=\"kbq-calendar-header__next-button\"\n        [color]=\"'contrast'\"\n        [disabled]=\"nextDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectNextMonth()\"\n    >\n        <i kbq-icon=\"kbq-chevron-right_16\"></i>\n    </button>\n</div>\n", styles: [".kbq-calendar-header{display:flex;flex-direction:row;justify-content:space-between;padding-right:var(--kbq-datepicker-size-header-padding-horizontal);padding-left:var(--kbq-datepicker-size-header-padding-horizontal);margin-bottom:var(--kbq-datepicker-size-header-margin-bottom)}.kbq-calendar-header__select{width:auto!important}.kbq-calendar-header__button-group,.kbq-calendar-header__select-group{display:flex;flex-direction:row}.kbq-calendar-select-panel{margin-top:2px;min-width:98%!important}.kbq-calendar-select-panel .kbq-select__content{max-height:384px;overflow-x:hidden;scrollbar-gutter:auto}.kbq-calendar-select-panel .kbq-select__content .kbq-option{min-width:65px}\n"], dependencies: [{ kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i3.KbqSelect, selector: "kbq-select", inputs: ["disabled", "tabIndex", "hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "panelWidth", "panelMinWidth", "value", "id", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i1$1.KbqOption, selector: "kbq-option", inputs: ["value", "showCheckbox", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i1$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]" }, { kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqCalendarHeader, selector: "kbq-calendar-header", inputs: { activeDate: "activeDate", maxDate: "maxDate", minDate: "minDate" }, outputs: { activeDateChange: "activeDateChange", monthSelected: "monthSelected", yearSelected: "yearSelected" }, host: { classAttribute: "kbq-calendar-header" }, exportAs: ["kbqCalendarHeader"], ngImport: i0, template: "<div class=\"kbq-calendar-header__select-group\">\n    <kbq-select\n        #monthSelect=\"kbqSelect\"\n        class=\"kbq-calendar-header__select\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        [value]=\"selectedMonth\"\n        (selectionChange)=\"onMonthSelected($event.value)\"\n    >\n        <button\n            kbq-button\n            kbq-select-matcher\n            class=\"layout-padding-right-xs\"\n            [class.kbq-active]=\"monthSelect.panelOpen\"\n            [color]=\"'contrast'\"\n            [kbqStyle]=\"'transparent'\"\n            [tabindex]=\"-1\"\n        >\n            {{ monthNames[selectedMonth].nameShort | titlecase }}\n\n            <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\" [color]=\"'contrast'\"></i>\n        </button>\n\n        @for (month of monthNames; track month.nameShort) {\n            <kbq-option [disabled]=\"month.disabled\" [kbqTooltipDisabled]=\"true\" [value]=\"month.value\">\n                {{ month.name }}\n            </kbq-option>\n        }\n    </kbq-select>\n\n    <kbq-select\n        #yearSelect=\"kbqSelect\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        [value]=\"selectedYear\"\n        (selectionChange)=\"onYearSelected($event.value)\"\n    >\n        <button\n            kbq-button\n            kbq-select-matcher\n            class=\"layout-padding-right-xs\"\n            [class.kbq-active]=\"yearSelect.panelOpen\"\n            [color]=\"'contrast'\"\n            [kbqStyle]=\"'transparent'\"\n            [tabindex]=\"-1\"\n        >\n            {{ selectedYear }}\n\n            <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\"></i>\n        </button>\n\n        @for (year of years; track year) {\n            <kbq-option [kbqTooltipDisabled]=\"true\" [value]=\"year\">\n                {{ year }}\n            </kbq-option>\n        }\n    </kbq-select>\n</div>\n\n<div class=\"kbq-calendar-header__button-group\">\n    <button\n        kbq-button\n        class=\"kbq-calendar-header__previous-button\"\n        [color]=\"'contrast'\"\n        [disabled]=\"previousDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectPreviousMonth()\"\n    >\n        <i kbq-icon=\"kbq-chevron-left_16\"></i>\n    </button>\n\n    <button\n        kbq-button\n        [color]=\"'contrast'\"\n        [disabled]=\"currentDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectCurrentDate()\"\n    >\n        <i kbq-icon=\"kbq-circle-xs_16\"></i>\n    </button>\n\n    <button\n        kbq-button\n        class=\"kbq-calendar-header__next-button\"\n        [color]=\"'contrast'\"\n        [disabled]=\"nextDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectNextMonth()\"\n    >\n        <i kbq-icon=\"kbq-chevron-right_16\"></i>\n    </button>\n</div>\n", styles: [".kbq-calendar-header{display:flex;flex-direction:row;justify-content:space-between;padding-right:var(--kbq-datepicker-size-header-padding-horizontal);padding-left:var(--kbq-datepicker-size-header-padding-horizontal);margin-bottom:var(--kbq-datepicker-size-header-margin-bottom)}.kbq-calendar-header__select{width:auto!important}.kbq-calendar-header__button-group,.kbq-calendar-header__select-group{display:flex;flex-direction:row}.kbq-calendar-select-panel{margin-top:2px;min-width:98%!important}.kbq-calendar-select-panel .kbq-select__content{max-height:384px;overflow-x:hidden;scrollbar-gutter:auto}.kbq-calendar-select-panel .kbq-select__content .kbq-option{min-width:65px}\n"], dependencies: [{ kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i3.KbqSelect, selector: "kbq-select", inputs: ["disabled", "tabIndex", "hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "panelWidth", "panelMinWidth", "value", "id", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i1$1.KbqOption, selector: "kbq-option", inputs: ["value", "userSelect", "showCheckbox", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i1$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]" }, { kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor", "kbq-icon"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqCalendarHeader, decorators: [{
             type: Component,
@@ -514,6 +514,8 @@ class KbqCalendar {
          * Emits whenever there is a state change that the header may need to respond to.
          */
         this.stateChanges = new Subject();
+        /** Subscription to value changes in the associated input element. */
+        this.inputSubscription = Subscription.EMPTY;
         if (!this.adapter) {
             throw createMissingDateImplError('DateAdapter');
         }
@@ -527,6 +529,7 @@ class KbqCalendar {
     }
     ngOnDestroy() {
         this.intlChanges.unsubscribe();
+        this.inputSubscription.unsubscribe();
         this.stateChanges.complete();
     }
     ngOnChanges(changes) {
@@ -541,6 +544,21 @@ class KbqCalendar {
         }
         this.stateChanges.next();
     }
+    /**
+     * Register an input with this calendar.
+     * @param input The calendar input to register with this calendar.
+     */
+    registerInput(input) {
+        if (this.datepickerInput) {
+            throw Error('A KbqDatepicker can only be associated with a single input.');
+        }
+        this.datepickerInput = input;
+        this.inputSubscription = this.datepickerInput.valueChange.subscribe((value) => {
+            this.selected = value;
+            this.monthView?.init();
+            this.activeDate = value;
+        });
+    }
     /** Updates today's date after an update of the active date */
     updateTodaysDate() {
         this.monthView.ngAfterContentInit();
@@ -1139,6 +1157,14 @@ class KbqDatepickerInput {
             this.dateChange.emit(new KbqDatepickerInputEvent(this, this.elementRef.nativeElement));
         });
     }
+    /** The calendar that this input is associated with. */
+    set kbqCalendar(value) {
+        if (!value) {
+            return;
+        }
+        this.calendar = value;
+        this.calendar.registerInput(this);
+    }
     /** Function that can be used to filter out dates within the datepicker. */
     set kbqDatepickerFilter(value) {
         this.dateFilter = value;
@@ -1443,10 +1469,10 @@ class KbqDatepickerInput {
         }
         else if (this.isKeyForClose(event)) {
             event.preventDefault();
-            this.datepicker.close();
+            this.datepicker?.close();
         }
         else if (keyCode === TAB) {
-            this.datepicker.close(false);
+            this.datepicker?.close(false);
         }
         else if (this.isKeyForByPass(event)) {
             return;
@@ -1680,37 +1706,37 @@ class KbqDatepickerInput {
         return this.adapter.getYear(date) === this.getMinYear();
     }
     getMaxDate(date) {
-        if (this.datepicker.maxDate && this.isMaxYear(date) && this.isMaxMonth(date)) {
+        if (this.datepicker?.maxDate && this.isMaxYear(date) && this.isMaxMonth(date)) {
             return this.adapter.getDate(this.datepicker.maxDate);
         }
         return this.adapter.getNumDaysInMonth(date);
     }
     getMinDate(date) {
-        if (this.datepicker.minDate && this.isMinYear(date) && this.isMinMonth(date)) {
+        if (this.datepicker?.minDate && this.isMinYear(date) && this.isMinMonth(date)) {
             return this.adapter.getDate(this.datepicker.minDate);
         }
         return 1;
     }
     getMaxMonth(date) {
-        if (this.datepicker.maxDate && this.isMaxYear(date)) {
+        if (this.datepicker?.maxDate && this.isMaxYear(date)) {
             return this.adapter.getMonth(this.datepicker.maxDate);
         }
         return 11;
     }
     getMinMonth(date) {
-        if (this.datepicker.minDate && this.isMinYear(date)) {
+        if (this.datepicker?.minDate && this.isMinYear(date)) {
             return this.adapter.getMonth(this.datepicker.minDate);
         }
         return 0;
     }
     getMaxYear() {
-        if (this.datepicker.maxDate) {
+        if (this.datepicker?.maxDate) {
             return this.adapter.getYear(this.datepicker.maxDate);
         }
         return MAX_YEAR;
     }
     getMinYear() {
-        if (this.datepicker.minDate) {
+        if (this.datepicker?.minDate) {
             return this.adapter.getYear(this.datepicker.minDate);
         }
         return 1;
@@ -1957,7 +1983,7 @@ class KbqDatepickerInput {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqDatepickerInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.DateAdapter, optional: true }, { token: KBQ_DATE_FORMATS, optional: true }, { token: KBQ_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqDatepickerInput, selector: "input[kbqDatepicker]", inputs: { placeholder: "placeholder", required: "required", kbqDatepicker: "kbqDatepicker", kbqDatepickerFilter: "kbqDatepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled", id: "id", kbqValidationTooltip: "kbqValidationTooltip" }, outputs: { incorrectInput: "incorrectInput", dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "paste": "onPaste($event)", "change": "onChange()", "focus": "focusChanged(true)", "blur": "onBlur()", "keydown": "onKeyDown($event)" }, properties: { "attr.placeholder": "placeholder", "attr.required": "required", "attr.disabled": "disabled || null", "attr.min": "min ? toISO8601(min) : null", "attr.max": "max ? toISO8601(max) : null", "attr.autocomplete": "\"off\"" }, classAttribute: "kbq-input kbq-datepicker" }, providers: [
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqDatepickerInput, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: { placeholder: "placeholder", required: "required", kbqDatepicker: "kbqDatepicker", kbqCalendar: "kbqCalendar", kbqDatepickerFilter: "kbqDatepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled", id: "id", kbqValidationTooltip: "kbqValidationTooltip" }, outputs: { incorrectInput: "incorrectInput", dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "paste": "onPaste($event)", "change": "onChange()", "focus": "focusChanged(true)", "blur": "onBlur()", "keydown": "onKeyDown($event)" }, properties: { "attr.placeholder": "placeholder", "attr.required": "required", "attr.disabled": "disabled || null", "attr.min": "min ? toISO8601(min) : null", "attr.max": "max ? toISO8601(max) : null", "attr.autocomplete": "\"off\"" }, classAttribute: "kbq-input kbq-datepicker" }, providers: [
             KBQ_DATEPICKER_VALUE_ACCESSOR,
             KBQ_DATEPICKER_VALIDATORS,
             { provide: KbqFormFieldControl, useExisting: KbqDatepickerInput }
@@ -1966,7 +1992,7 @@ class KbqDatepickerInput {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqDatepickerInput, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'input[kbqDatepicker]',
+                    selector: 'input[kbqDatepicker], input[kbqCalendar]',
                     exportAs: 'kbqDatepickerInput',
                     providers: [
                         KBQ_DATEPICKER_VALUE_ACCESSOR,
@@ -2006,6 +2032,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
                 type: Input
             }], kbqDatepicker: [{
                 type: Input
+            }], kbqCalendar: [{
+                type: Input
             }], kbqDatepickerFilter: [{
                 type: Input
             }], value: [{
@@ -2081,7 +2109,7 @@ class KbqDatepickerToggle {
         this.stateChanges = merge(this.intl.changes, datepickerDisabled, inputDisabled, datepickerToggled).subscribe(() => this.changeDetectorRef.markForCheck());
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqDatepickerToggle, deps: [{ token: KbqDatepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqDatepickerToggle, selector: "kbq-datepicker-toggle", inputs: { disabled: "disabled", datepicker: ["for", "datepicker"], tabIndex: "tabIndex" }, host: { properties: { "class.kbq-active": "datepicker && datepicker.opened" }, classAttribute: "kbq-datepicker-toggle" }, queries: [{ propertyName: "customIcon", first: true, predicate: KbqDatepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], exportAs: ["kbqDatepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<!--todo need simplify this-->\n<button\n    #button\n    aria-haspopup=\"true\"\n    kbq-button\n    type=\"button\"\n    class=\"kbq-datepicker-toggle__button\"\n    [attr.aria-label]=\"intl.openCalendarLabel\"\n    [disabled]=\"disabled\"\n    [tabIndex]=\"tabIndex\"\n    (click)=\"open($event)\"\n>\n    @if (!customIcon) {\n        <i kbq-icon=\"kbq-calendar-o_16\" class=\"kbq-datepicker-toggle__default-icon\"></i>\n    }\n\n    <ng-content select=\"[kbqDatepickerToggleIcon]\" />\n</button>\n", styles: [".kbq-datepicker-toggle:focus{outline:0}.kbq-datepicker-toggle__button.kbq-button-icon{width:var(--kbq-datepicker-toggle-size-width);height:var(--kbq-datepicker-toggle-size-height);margin-left:2px}.kbq-form-field-appearance-legacy .kbq-form-field-prefix .kbq-datepicker-toggle__default-icon,.kbq-form-field-appearance-legacy .kbq-form-field-suffix .kbq-datepicker-toggle__default-icon{width:1em}.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-prefix .kbq-datepicker-toggle__default-icon,.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-suffix .kbq-datepicker-toggle__default-icon{display:block;width:1.5em;height:1.5em}.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-prefix .kbq-button-icon .kbq-datepicker-toggle__default-icon,.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-suffix .kbq-button-icon .kbq-datepicker-toggle__default-icon{margin:auto}\n"], dependencies: [{ kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqDatepickerToggle, selector: "kbq-datepicker-toggle", inputs: { disabled: "disabled", datepicker: ["for", "datepicker"], tabIndex: "tabIndex" }, host: { properties: { "class.kbq-active": "datepicker && datepicker.opened" }, classAttribute: "kbq-datepicker-toggle" }, queries: [{ propertyName: "customIcon", first: true, predicate: KbqDatepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], exportAs: ["kbqDatepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<!--todo need simplify this-->\n<button\n    #button\n    aria-haspopup=\"true\"\n    kbq-button\n    type=\"button\"\n    class=\"kbq-datepicker-toggle__button\"\n    [attr.aria-label]=\"intl.openCalendarLabel\"\n    [disabled]=\"disabled\"\n    [tabIndex]=\"tabIndex\"\n    (click)=\"open($event)\"\n>\n    @if (!customIcon) {\n        <i kbq-icon=\"kbq-calendar-o_16\" class=\"kbq-datepicker-toggle__default-icon\"></i>\n    }\n\n    <ng-content select=\"[kbqDatepickerToggleIcon]\" />\n</button>\n", styles: [".kbq-datepicker-toggle:focus{outline:0}.kbq-datepicker-toggle__button.kbq-button-icon{width:var(--kbq-datepicker-toggle-size-width);height:var(--kbq-datepicker-toggle-size-height);margin-left:2px}.kbq-form-field-appearance-legacy .kbq-form-field-prefix .kbq-datepicker-toggle__default-icon,.kbq-form-field-appearance-legacy .kbq-form-field-suffix .kbq-datepicker-toggle__default-icon{width:1em}.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-prefix .kbq-datepicker-toggle__default-icon,.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-suffix .kbq-datepicker-toggle__default-icon{display:block;width:1.5em;height:1.5em}.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-prefix .kbq-button-icon .kbq-datepicker-toggle__default-icon,.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-suffix .kbq-button-icon .kbq-datepicker-toggle__default-icon{margin:auto}\n"], dependencies: [{ kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqDatepickerToggle, decorators: [{
             type: Component,