import { MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXValuableComponent, AXClearableComponent } from '@acorex/cdk/common';
import { MXCalendarBaseComponent } from '@acorex/components/calendar';
import { AXDateTimeInputComponent } from '@acorex/components/datetime-input';
import { AXDateTimePickerComponent } from '@acorex/components/datetime-picker';
import { AXDecoratorGenericComponent } from '@acorex/components/decorators';
import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent } from '@acorex/components/dropdown';
import * as i0 from '@angular/core';
import { EventEmitter, input, signal, linkedSignal, effect, forwardRef, HostBinding, Output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { classes } from 'polytype';

/**
 * Represents a date and time input component that allows user interaction and triggers events.
 *
 * @category Components
 */
class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCalendarBaseComponent, MXDropdownBoxBaseComponent, MXLookComponent, AXDecoratorGenericComponent) {
    constructor() {
        super(...arguments);
        /**
         * Emitted when the format of the component changes.
         *
         * @event
         */
        this.formatChange = new EventEmitter();
        /**
         * Indicates whether typing is allowed in the component.
         *
         * @defaultValue false
         */
        this.allowTyping = input(false, ...(ngDevMode ? [{ debugName: "allowTyping" }] : []));
        this.picker = input('datetime', ...(ngDevMode ? [{ debugName: "picker" }] : []));
        /**
         * @description The calendar type to use for the datetime input.
         */
        this.calendar = input(null, ...(ngDevMode ? [{ debugName: "calendar" }] : []));
        this.weekend = input([], ...(ngDevMode ? [{ debugName: "weekend" }] : []));
        this.weekdays = input([], ...(ngDevMode ? [{ debugName: "weekdays" }] : []));
        /**
         * @deprecated use locale & mode instead
         */
        this.format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : []));
        this._editingDateObj = signal(null, ...(ngDevMode ? [{ debugName: "_editingDateObj" }] : []));
        this._calendarSystem = linkedSignal(() => this.calendar() ?? this.type, ...(ngDevMode ? [{ debugName: "_calendarSystem" }] : []));
        this._format = linkedSignal(() => this.format(), ...(ngDevMode ? [{ debugName: "_format" }] : []));
        this.#effect = effect(() => {
            const profile = this.localeService.activeProfile();
            //
            if (!this.format()) {
                this._format.set(this.format() ?? profile.formats[this.picker()]?.short ?? '');
            }
            //
            if (!this.calendar()) {
                this._calendarSystem.set(profile.calendar.system);
            }
        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
    }
    #effect;
    /**
     *  @ignore
     */
    _handleInputModelChange(value) {
        this.commitValue(value, true);
    }
    /**
     *  @ignore
     */
    _handlePickerModelChange(value) {
        if (this.isOpen) {
            this.commitValue(value, true);
        }
    }
    /**
     *  @ignore
     */
    _handleOnOpenedEvent(e) {
        //this.emitOnFocusEvent(null);
        this.emitOnOpenedEvent();
    }
    /**
     *  @ignore
     */
    _handleOnClosedEvent(e) {
        //this.emitOnBlurEvent(null);
        this.input.focus();
        this.emitOnClosedEvent();
    }
    /**
     *  @ignore
     */
    _handleInputOnFocusEvent(e) {
        this.emitOnFocusEvent(e.nativeEvent);
    }
    /**
     *  @ignore
     */
    _handleInputOnBlurEvent(e) {
        this.emitOnBlurEvent(e.nativeEvent);
    }
    /**
     *  @ignore
     */
    _handleCalendarOnNavigate(e) {
        this.onNavigate.emit(e);
    }
    /**
     * Handles changes to the internal value.
     * @param value The new value that was set.
     * @ignore
     */
    internalValueChanged(value) {
        try {
            if (this.calendarService.isValidDate(value)) {
                this._editingDateObj.set(this.calendarService.create(value, this.calendar()).date);
            }
            else {
                throw new Error();
            }
        }
        catch {
            this._editingDateObj.set(null);
        }
        this.commitValue(this._editingDateObj(), false);
        this.close();
    }
    /**
     *  @ignore
     */
    _handleInputOnClick() {
        if (!this.allowTyping()) {
            this.open();
        }
        else {
            this.close();
        }
    }
    get __hostName() {
        return this.name;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDateTimeBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXDateTimeBoxComponent, isStandalone: true, selector: "ax-datetime-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, holidayDates: { classPropertyName: "holidayDates", publicName: "holidayDates", isSignal: false, isRequired: false, transformFunction: null }, allowTyping: { classPropertyName: "allowTyping", publicName: "allowTyping", isSignal: true, isRequired: false, transformFunction: null }, picker: { classPropertyName: "picker", publicName: "picker", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, weekdays: { classPropertyName: "weekdays", publicName: "weekdays", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", onOpened: "onOpened", onClosed: "onClosed", readonlyChange: "readonlyChange", disabledChange: "disabledChange", formatChange: "formatChange" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "attr.name": "this.__hostName" } }, providers: [
            { provide: AXComponent, useExisting: AXDateTimeBoxComponent },
            { provide: AXFocusableComponent, useExisting: AXDateTimeBoxComponent },
            { provide: AXValuableComponent, useExisting: AXDateTimeBoxComponent },
            { provide: AXClearableComponent, useExisting: AXDateTimeBoxComponent },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXDateTimeBoxComponent),
                multi: true,
            },
        ], viewQueries: [{ propertyName: "input", first: true, predicate: AXDateTimeInputComponent, descendants: true }, { propertyName: "pickerRef", first: true, predicate: AXDateTimePickerComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n  [look]=\"look\"\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <ax-datetime-input\n      dir=\"ltr\"\n      [ngModel]=\"_editingDateObj()\"\n      id=\"{{ id }}-input\"\n      [format]=\"format()\"\n      [picker]=\"picker()\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [allowTyping]=\"allowTyping()\"\n      [calendar]=\"_calendarSystem()\"\n      (onClick)=\"_handleInputOnClick()\"\n      (onBlur)=\"_handleInputOnBlurEvent($event)\"\n      (onFocus)=\"_handleInputOnFocusEvent($event)\"\n    ></ax-datetime-input>\n    @if (value && !disabled && !readonly) {\n      <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" class=\"ax-editor-button\" [tabIndex]=\"-1\" [disabled]=\"disabled\" (click)=\"toggle()\">\n      <span class=\"ax-icon ax-icon-calendar\"></span>\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <ax-datetime-picker\n      #pickerRef\n      [type]=\"type\"\n      [depth]=\"depth\"\n      [ngModel]=\"_editingDateObj()\"\n      [picker]=\"picker()\"\n      [format]=\"format()\"\n      id=\"{{ id }}-picker\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [minValue]=\"minValue\"\n      [maxValue]=\"maxValue\"\n      [weekend]=\"weekend()\"\n      [weekdays]=\"weekdays()\"\n      [holidayDates]=\"holidayDates\"\n      [calendar]=\"_calendarSystem()\"\n      [disabledDates]=\"disabledDates\"\n      (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n      (ngModelChange)=\"_handlePickerModelChange($event)\"\n    ></ax-datetime-picker>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["ax-datetime-input{display:contents}\n"], dependencies: [{ kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: AXDateTimeInputComponent, selector: "ax-datetime-input", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "allowTyping", "calendar", "minValue", "maxValue", "picker", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXDateTimePickerComponent, selector: "ax-datetime-picker", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "weekend", "weekdays", "currentTimeButton", "calendar", "picker", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onClick", "readonlyChange", "disabledChange", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDateTimeBoxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-datetime-box', inputs: [
                        'disabled',
                        'readonly',
                        'tabIndex',
                        'placeholder',
                        'minValue',
                        'maxValue',
                        'value',
                        'state',
                        'name',
                        'depth',
                        'id',
                        'type',
                        'look',
                        'holidayDates',
                    ], outputs: [
                        'valueChange',
                        'stateChange',
                        'onValueChanged',
                        'onBlur',
                        'onFocus',
                        'onOpened',
                        'onClosed',
                        'readonlyChange',
                        'disabledChange',
                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                        { provide: AXComponent, useExisting: AXDateTimeBoxComponent },
                        { provide: AXFocusableComponent, useExisting: AXDateTimeBoxComponent },
                        { provide: AXValuableComponent, useExisting: AXDateTimeBoxComponent },
                        { provide: AXClearableComponent, useExisting: AXDateTimeBoxComponent },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => AXDateTimeBoxComponent),
                            multi: true,
                        },
                    ], host: { ngSkipHydration: 'true' }, imports: [AXDropdownBoxComponent, AXDateTimeInputComponent, FormsModule, AXDateTimePickerComponent], template: "<ax-dropdown-box\n  [look]=\"look\"\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <ax-datetime-input\n      dir=\"ltr\"\n      [ngModel]=\"_editingDateObj()\"\n      id=\"{{ id }}-input\"\n      [format]=\"format()\"\n      [picker]=\"picker()\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [allowTyping]=\"allowTyping()\"\n      [calendar]=\"_calendarSystem()\"\n      (onClick)=\"_handleInputOnClick()\"\n      (onBlur)=\"_handleInputOnBlurEvent($event)\"\n      (onFocus)=\"_handleInputOnFocusEvent($event)\"\n    ></ax-datetime-input>\n    @if (value && !disabled && !readonly) {\n      <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" class=\"ax-editor-button\" [tabIndex]=\"-1\" [disabled]=\"disabled\" (click)=\"toggle()\">\n      <span class=\"ax-icon ax-icon-calendar\"></span>\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <ax-datetime-picker\n      #pickerRef\n      [type]=\"type\"\n      [depth]=\"depth\"\n      [ngModel]=\"_editingDateObj()\"\n      [picker]=\"picker()\"\n      [format]=\"format()\"\n      id=\"{{ id }}-picker\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [minValue]=\"minValue\"\n      [maxValue]=\"maxValue\"\n      [weekend]=\"weekend()\"\n      [weekdays]=\"weekdays()\"\n      [holidayDates]=\"holidayDates\"\n      [calendar]=\"_calendarSystem()\"\n      [disabledDates]=\"disabledDates\"\n      (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n      (ngModelChange)=\"_handlePickerModelChange($event)\"\n    ></ax-datetime-picker>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["ax-datetime-input{display:contents}\n"] }]
        }], propDecorators: { input: [{
                type: ViewChild,
                args: [AXDateTimeInputComponent]
            }], pickerRef: [{
                type: ViewChild,
                args: [AXDateTimePickerComponent]
            }], dropdown: [{
                type: ViewChild,
                args: [AXDropdownBoxComponent]
            }], formatChange: [{
                type: Output
            }], allowTyping: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowTyping", required: false }] }], picker: [{ type: i0.Input, args: [{ isSignal: true, alias: "picker", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], weekend: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekend", required: false }] }], weekdays: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdays", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], __hostName: [{
                type: HostBinding,
                args: ['attr.name']
            }] } });

class AXDateTimeBoxModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDateTimeBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: AXDateTimeBoxModule, imports: [AXDateTimeBoxComponent], exports: [AXDateTimeBoxComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDateTimeBoxModule, imports: [AXDateTimeBoxComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDateTimeBoxModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [AXDateTimeBoxComponent],
                    exports: [AXDateTimeBoxComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { AXDateTimeBoxComponent, AXDateTimeBoxModule };
//# sourceMappingURL=acorex-components-datetime-box.mjs.map
