import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, DestroyRef, Directive, inject, Input, ViewChild, ViewEncapsulation } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { KbqButton } from '@koobiq/components/button';
import { KbqIconModule } from '@koobiq/components/icon';
import { merge, of as observableOf, Subscription } from 'rxjs';
import { KbqDatepickerIntl } from './datepicker-intl';
import { KbqDatepicker } from './datepicker.component';
import * as i0 from "@angular/core";
import * as i1 from "@koobiq/components/icon";
import * as i2 from "./datepicker-intl";
import * as i3 from "@koobiq/components/button";
/** Can be used to override the icon of a `kbqDatepickerToggle`. */
export class KbqDatepickerToggleIcon {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqDatepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqDatepickerToggleIcon, selector: "[kbqDatepickerToggleIcon]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqDatepickerToggleIcon, decorators: [{
            type: Directive,
            args: [{
                    selector: '[kbqDatepickerToggleIcon]'
                }]
        }] });
export 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.14", ngImport: i0, type: KbqDatepickerToggleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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
                color="contrast-fade"
                kbq-icon-button="kbq-calendar-o_16"
                [tabindex]="-1"
                [class.kbq-active]="datepicker && datepicker.opened"
                [disabled]="disabled"
                [autoColor]="true"
            ></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.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.14", ngImport: i0, type: KbqDatepickerToggleIconComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'kbq-datepicker-toggle-icon', imports: [KbqIconModule], template: `
        <ng-content select="[kbqDatepickerToggleIcon]">
            <i
                color="contrast-fade"
                kbq-icon-button="kbq-calendar-o_16"
                [tabindex]="-1"
                [class.kbq-active]="datepicker && datepicker.opened"
                [disabled]="disabled"
                [autoColor]="true"
            ></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
 */
export class KbqDatepickerToggle {
    /** Whether the toggle button is disabled. */
    get disabled() {
        return this._disabled === undefined ? this.datepicker.disabled : this._disabled;
    }
    set disabled(value) {
        this._disabled = coerceBooleanProperty(value);
    }
    constructor(intl, changeDetectorRef) {
        this.intl = intl;
        this.changeDetectorRef = changeDetectorRef;
        this.stateChanges = Subscription.EMPTY;
    }
    ngOnChanges(changes) {
        if (changes.datepicker) {
            this.watchStateChanges();
        }
    }
    ngAfterContentInit() {
        this.watchStateChanges();
    }
    ngOnDestroy() {
        this.stateChanges.unsubscribe();
    }
    open(event) {
        if (this.datepicker && !this.disabled) {
            this.datepicker.open();
            event.stopPropagation();
        }
    }
    watchStateChanges() {
        const datepickerDisabled = this.datepicker ? this.datepicker.disabledChange : observableOf();
        const inputDisabled = this.datepicker && this.datepicker.datepickerInput
            ? this.datepicker.datepickerInput.disabledChange
            : observableOf();
        const datepickerToggled = this.datepicker
            ? merge(this.datepicker.openedStream, this.datepicker.closedStream)
            : observableOf();
        this.stateChanges.unsubscribe();
        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.14", ngImport: i0, type: KbqDatepickerToggle, deps: [{ token: i2.KbqDatepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: i3.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i1.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.14", 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\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: i2.KbqDatepickerIntl }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                type: Input
            }], datepicker: [{
                type: Input,
                args: ['for']
            }], tabIndex: [{
                type: Input
            }], customIcon: [{
                type: ContentChild,
                args: [KbqDatepickerToggleIcon, { static: false }]
            }], button: [{
                type: ViewChild,
                args: ['button', { static: false }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 