@koobiq/components 18.29.0 → 18.31.0

package/fesm2022/koobiq-components-datepicker.mjs

@@ -1,19 +1,19 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Injectable, Optional, ViewChild, InjectionToken, inject, Inject, forwardRef, Directive, ContentChild, NgModule } from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Injectable, Optional, ViewChild, InjectionToken, inject, Inject, forwardRef, Directive, DestroyRef, ChangeDetectorRef, ContentChild, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, NgClass, TitleCasePipe } from '@angular/common';
 import * as i1$1 from '@koobiq/components/core';
-import { defaultOffsetY, validationTooltipShowDelay, validationTooltipHideDelay, KBQ_DATE_FORMATS, KBQ_LOCALE_SERVICE } from '@koobiq/components/core';
+import { defaultOffsetY, ErrorStateMatcher, validationTooltipShowDelay, validationTooltipHideDelay, KbqErrorStateTracker, KBQ_DATE_FORMATS, KBQ_LOCALE_SERVICE } from '@koobiq/components/core';
 import * as i2 from '@koobiq/components/button';
 import { KbqButtonModule } from '@koobiq/components/button';
 import * as i3 from '@koobiq/components/select';
 import { KbqSelectModule } from '@koobiq/components/select';
-import * as i4 from '@koobiq/components/icon';
+import * as i1$2 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { Subject, Subscription, merge, of } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, FormGroupDirective, NgForm } from '@angular/forms';
 import { TAB, SPACE, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, HOME, PAGE_UP, END, PAGE_DOWN, ESCAPE, isLetterKey, hasModifierKey, isVerticalMovement, isHorizontalMovement, DELETE, BACKSPACE } from '@koobiq/cdk/keycodes';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
 import '@koobiq/components/tooltip';
@@ -24,6 +24,7 @@ import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
 import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import { take } from 'rxjs/operators';
 import { A11yModule } from '@angular/cdk/a11y';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 /**
  * An internal class that represents the data corresponding to a single calendar cell.
@@ -240,7 +241,7 @@ class KbqCalendarHeader {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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.13", 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: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i3.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "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", "selectable", "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: ["small", "autoColor", "kbq-icon"] }, { 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.13", 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: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i3.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i1$1.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i1$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]" }, { kind: "component", type: i1$2.KbqIcon, selector: "[kbq-icon]", inputs: ["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.13", ngImport: i0, type: KbqCalendarHeader, decorators: [{
             type: Component,
@@ -1110,6 +1111,29 @@ const KBQ_DATEPICKER_VALIDATORS = {
     useExisting: forwardRef(() => KbqDatepickerInput),
     multi: true
 };
+/**
+ * @TODO: Remove after kbq-form-field and kbq-form-field-experimental will be merged. (#DS-3463)
+ * Used to sync control's errorState and icon's errorState, since now datepicker-input is validating on initial.
+ * After merging form-fields, default error-state matcher will be used
+ */
+class KbqDatepickerErrorStateMatcher {
+    isErrorState(control) {
+        return !!control?.invalid;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqDatepickerErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqDatepickerErrorStateMatcher }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqDatepickerErrorStateMatcher, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * @TODO: Remove after kbq-form-field and kbq-form-field-experimental will be merged. (#DS-3463)
+ * After merging form-fields, default error-state matcher will be used
+ */
+const KBQ_DATEPICKER_ERROR_STATE_MATCHER = {
+    provide: ErrorStateMatcher,
+    useClass: KbqDatepickerErrorStateMatcher
+};
 /**
  * An event used for datepicker input and change events. We don't always have access to a native
  * input or change event because the event may have been triggered by the user clicking on the
@@ -1129,6 +1153,13 @@ class KbqDatepickerInputEvent {
 let uniqueComponentIdSuffix = 0;
 /** Directive used to connect an input to a KbqDatepicker. */
 class KbqDatepickerInput {
+    /** Object used to control when error messages are shown. */
+    get errorStateMatcher() {
+        return this.errorStateTracker.errorStateMatcher;
+    }
+    set errorStateMatcher(value) {
+        this.errorStateTracker.errorStateMatcher = value;
+    }
     get placeholder() {
         return this._placeholder;
     }
@@ -1257,6 +1288,12 @@ class KbqDatepickerInput {
     get dateInputFormat() {
         return this.dateFormats?.dateInput || this.adapter.config.dateInput;
     }
+    get errorState() {
+        return this.errorStateTracker.errorState;
+    }
+    set errorState(value) {
+        this.errorStateTracker.errorState = value;
+    }
     get readyForParse() {
         return !!(this.firstDigit && this.secondDigit && this.thirdDigit);
     }
@@ -1408,9 +1445,20 @@ class KbqDatepickerInput {
         if (!this.adapter) {
             throw createMissingDateImplError('DateAdapter');
         }
+        this.errorStateTracker = new KbqErrorStateTracker(inject(ErrorStateMatcher), 
+        // update ngControl later, so it will be initialized
+        null, inject(FormGroupDirective, { optional: true }), inject(NgForm, { optional: true }), this.stateChanges);
         this.setFormat(this.dateInputFormat);
         this.localeSubscription = adapter.localeChanges.subscribe(this.updateLocaleParams);
     }
+    ngDoCheck() {
+        if (this.ngControl) {
+            // We need to re-evaluate this on every change detection cycle, because there are some
+            // error triggers that we can't subscribe to (e.g. parent form submissions). This means
+            // that whatever logic is in here has to be super lean or we risk destroying the performance.
+            this.updateErrorState();
+        }
+    }
     onContainerClick() {
         this.focus();
     }
@@ -1424,6 +1472,9 @@ class KbqDatepickerInput {
             this.stateChanges.next();
         }
     }
+    ngAfterContentInit() {
+        this.updateErrorState();
+    }
     ngOnDestroy() {
         this.datepickerSubscription.unsubscribe();
         this.localeSubscription.unsubscribe();
@@ -1544,6 +1595,10 @@ class KbqDatepickerInput {
     toISO8601(value) {
         return this.adapter.toIso8601(value);
     }
+    /** Refreshes the error state of the input. */
+    updateErrorState() {
+        this.errorStateTracker.updateErrorState();
+    }
     saveTimePart(selected) {
         if (!this.value) {
             return selected;
@@ -1935,6 +1990,8 @@ class KbqDatepickerInput {
         }
         this.control = control;
         this.control.valueChanges.subscribe((value) => (this._value = value));
+        // @TODO resolve types
+        this.errorStateTracker.ngControl = { control };
     }
     /**
      * @param obj The object to check.
@@ -1984,9 +2041,10 @@ class KbqDatepickerInput {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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.13", 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: [
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqDatepickerInput, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: { errorStateMatcher: "errorStateMatcher", 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,
+            KBQ_DATEPICKER_ERROR_STATE_MATCHER,
             { provide: KbqFormFieldControl, useExisting: KbqDatepickerInput }
         ], exportAs: ["kbqDatepickerInput"], ngImport: i0 }); }
 }
@@ -1998,6 +2056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     providers: [
                         KBQ_DATEPICKER_VALUE_ACCESSOR,
                         KBQ_DATEPICKER_VALIDATORS,
+                        KBQ_DATEPICKER_ERROR_STATE_MATCHER,
                         { provide: KbqFormFieldControl, useExisting: KbqDatepickerInput }
                     ],
                     host: {
@@ -2027,7 +2086,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }, {
                     type: Inject,
                     args: [KBQ_LOCALE_SERVICE]
-                }] }], propDecorators: { placeholder: [{
+                }] }], propDecorators: { errorStateMatcher: [{
+                type: Input
+            }], placeholder: [{
                 type: Input
             }], required: [{
                 type: Input
@@ -2068,6 +2129,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     selector: '[kbqDatepickerToggleIcon]'
                 }]
         }] });
+class KbqDatepickerToggleIconComponent {
+    constructor() {
+        this._disabled = false;
+        this.destroyRef = inject(DestroyRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.stateChangesSubscription = Subscription.EMPTY;
+    }
+    /** Whether the toggle button is disabled. */
+    get disabled() {
+        return this.datepicker.disabled || this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+    }
+    ngOnChanges(changes) {
+        if (changes.datepicker && !changes.datepicker.firstChange) {
+            this.watchStateChanges();
+        }
+    }
+    ngAfterContentInit() {
+        this.watchStateChanges();
+    }
+    ngOnDestroy() {
+        this.stateChangesSubscription.unsubscribe();
+    }
+    /** Open datepicker */
+    open($event) {
+        if (this.datepicker && !this.disabled) {
+            this.datepicker.open();
+            $event.stopPropagation();
+        }
+    }
+    watchStateChanges() {
+        this.stateChangesSubscription.unsubscribe();
+        if (!this.datepicker)
+            return;
+        this.stateChangesSubscription = merge(this.datepicker.disabledChange, this.datepicker.datepickerInput.disabledChange, this.datepicker.openedStream, this.datepicker.closedStream)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.cdr.markForCheck());
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqDatepickerToggleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KbqDatepickerToggleIconComponent, isStandalone: true, selector: "kbq-datepicker-toggle-icon", inputs: { disabled: "disabled", datepicker: ["for", "datepicker"] }, host: { listeners: { "click": "open($event)" }, properties: { "attr.aria-expanded": "datepicker.opened", "attr.aria-disabled": "disabled" }, classAttribute: "kbq-datepicker-toggle-icon" }, usesOnChanges: true, ngImport: i0, template: `
+        <ng-content select="[kbqDatepickerToggleIcon]">
+            <i
+                [tabindex]="-1"
+                [class.kbq-active]="datepicker && datepicker.opened"
+                [disabled]="disabled"
+                [autoColor]="true"
+                color="contrast-fade"
+                kbq-icon-button="kbq-calendar-o_16"
+            ></i>
+        </ng-content>
+    `, isInline: true, styles: [".kbq-datepicker-toggle-icon{display:inline-flex;justify-content:center;align-items:center}.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: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1$2.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["small", "kbq-icon-button", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqDatepickerToggleIconComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'kbq-datepicker-toggle-icon', imports: [KbqIconModule], template: `
+        <ng-content select="[kbqDatepickerToggleIcon]">
+            <i
+                [tabindex]="-1"
+                [class.kbq-active]="datepicker && datepicker.opened"
+                [disabled]="disabled"
+                [autoColor]="true"
+                color="contrast-fade"
+                kbq-icon-button="kbq-calendar-o_16"
+            ></i>
+        </ng-content>
+    `, host: {
+                        class: 'kbq-datepicker-toggle-icon',
+                        '[attr.aria-expanded]': 'datepicker.opened',
+                        '[attr.aria-disabled]': 'disabled',
+                        '(click)': 'open($event)'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-datepicker-toggle-icon{display:inline-flex;justify-content:center;align-items:center}.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"] }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], datepicker: [{
+                type: Input,
+                args: ['for']
+            }] } });
+/**
+ * @deprecated Use `KbqDatepickerToggleIconComponent` instead
+ */
 class KbqDatepickerToggle {
     /** Whether the toggle button is disabled. */
     get disabled() {
@@ -2110,14 +2253,14 @@ 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.13", 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.13", 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: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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\n            color=\"contrast-fade\"\n            kbq-icon-button=\"kbq-calendar-o_16\"\n            class=\"kbq-datepicker-toggle__default-icon\"\n            [tabindex]=\"-1\"\n        ></i>\n    }\n\n    <ng-content select=\"[kbqDatepickerToggleIcon]\" />\n</button>\n", styles: [".kbq-datepicker-toggle-icon{display:inline-flex;justify-content:center;align-items:center}.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: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i1$2.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["small", "kbq-icon-button", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqDatepickerToggle, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-datepicker-toggle', host: {
                         class: 'kbq-datepicker-toggle',
                         '[class.kbq-active]': 'datepicker && datepicker.opened'
-                    }, exportAs: 'kbqDatepickerToggle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+                    }, exportAs: 'kbqDatepickerToggle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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\n            color=\"contrast-fade\"\n            kbq-icon-button=\"kbq-calendar-o_16\"\n            class=\"kbq-datepicker-toggle__default-icon\"\n            [tabindex]=\"-1\"\n        ></i>\n    }\n\n    <ng-content select=\"[kbqDatepickerToggleIcon]\" />\n</button>\n", styles: [".kbq-datepicker-toggle-icon{display:inline-flex;justify-content:center;align-items:center}.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"] }]
         }], ctorParameters: () => [{ type: KbqDatepickerIntl }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: Input
             }], datepicker: [{
@@ -2149,6 +2292,7 @@ class KbqDatepickerModule {
             PortalModule,
             KbqSelectModule,
             KbqIconModule,
+            KbqDatepickerToggleIconComponent,
             NgClass,
             TitleCasePipe], exports: [KbqCalendar,
             KbqCalendarBody,
@@ -2157,6 +2301,7 @@ class KbqDatepickerModule {
             KbqDatepickerInput,
             KbqDatepickerToggle,
             KbqDatepickerToggleIcon,
+            KbqDatepickerToggleIconComponent,
             KbqMonthView,
             KbqCalendarHeader] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqDatepickerModule, providers: [
@@ -2167,7 +2312,8 @@ class KbqDatepickerModule {
             A11yModule,
             PortalModule,
             KbqSelectModule,
-            KbqIconModule] }); }
+            KbqIconModule,
+            KbqDatepickerToggleIconComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqDatepickerModule, decorators: [{
             type: NgModule,
@@ -2179,6 +2325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         PortalModule,
                         KbqSelectModule,
                         KbqIconModule,
+                        KbqDatepickerToggleIconComponent,
                         NgClass,
                         TitleCasePipe
                     ],
@@ -2190,6 +2337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         KbqDatepickerInput,
                         KbqDatepickerToggle,
                         KbqDatepickerToggleIcon,
+                        KbqDatepickerToggleIconComponent,
                         KbqMonthView,
                         KbqCalendarHeader
                     ],
@@ -2215,5 +2363,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_DATEPICKER_SCROLL_STRATEGY, KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY, KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, KBQ_DATEPICKER_VALIDATORS, KBQ_DATEPICKER_VALUE_ACCESSOR, KbqCalendar, KbqCalendarBody, KbqCalendarCell, KbqCalendarHeader, KbqDatepicker, KbqDatepickerContent, KbqDatepickerInput, KbqDatepickerInputEvent, KbqDatepickerIntl, KbqDatepickerModule, KbqDatepickerToggle, KbqDatepickerToggleIcon, KbqMonthView, MAX_YEAR, kbqDatepickerAnimations };
+export { KBQ_DATEPICKER_SCROLL_STRATEGY, KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY, KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, KBQ_DATEPICKER_VALIDATORS, KBQ_DATEPICKER_VALUE_ACCESSOR, KbqCalendar, KbqCalendarBody, KbqCalendarCell, KbqCalendarHeader, KbqDatepicker, KbqDatepickerContent, KbqDatepickerInput, KbqDatepickerInputEvent, KbqDatepickerIntl, KbqDatepickerModule, KbqDatepickerToggle, KbqDatepickerToggleIcon, KbqDatepickerToggleIconComponent, KbqMonthView, MAX_YEAR, kbqDatepickerAnimations };
 //# sourceMappingURL=koobiq-components-datepicker.mjs.map