import * as i0 from '@angular/core';
import { input, booleanAttribute, output, inject, ElementRef, Injector, runInInjectionContext, effect, ChangeDetectionStrategy, Component } from '@angular/core';
import '@ui5/webcomponents/dist/DatePicker.js';
import * as i1 from '@fundamental-ngx/ui5-webcomponents/utils';
import { GenericControlValueAccessor } from '@fundamental-ngx/ui5-webcomponents/utils';

class DatePicker {
    constructor() {
        /**
         * Defines a formatted date value.
         */
        this.value = input("", ...(ngDevMode ? [{ debugName: "value" }] : []));
        /**
         * Defines the value state of the component.
         */
        this.valueState = input("None", ...(ngDevMode ? [{ debugName: "valueState" }] : []));
        /**
         * Defines whether the component is required.
         */
        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Determines whether the component is displayed as disabled.
         */
        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Determines whether the component is displayed as read-only.
         */
        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Defines a short hint, intended to aid the user with data entry when the
      component has no value.
      
      **Note:** When no placeholder is set, the format pattern is displayed as a placeholder.
      Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.
         */
        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
        /**
         * Determines the name by which the component will be identified upon submission in an HTML form.
      
      **Note:** This property is only applicable within the context of an HTML Form element.
         */
        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
        /**
         * Defines the visibility of the week numbers column.
      
      **Note:** For calendars other than Gregorian,
      the week numbers are not displayed regardless of what is set.
         */
        this.hideWeekNumbers = input(false, ...(ngDevMode ? [{ debugName: "hideWeekNumbers", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Defines the open or closed state of the popover.
         */
        this.open = input(false, ...(ngDevMode ? [{ debugName: "open", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
        /**
         * Defines the aria-label attribute for the component.
         */
        this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : []));
        /**
         * Receives id(or many ids) of the elements that label the component.
         */
        this.accessibleNameRef = input(...(ngDevMode ? [undefined, { debugName: "accessibleNameRef" }] : []));
        /**
         * Defines the accessible description of the component.
         */
        this.accessibleDescription = input(...(ngDevMode ? [undefined, { debugName: "accessibleDescription" }] : []));
        /**
         * Receives id(or many ids) of the elements that describe the input.
         */
        this.accessibleDescriptionRef = input(...(ngDevMode ? [undefined, { debugName: "accessibleDescriptionRef" }] : []));
        /**
         * Sets a calendar type used for display.
      If not set, the calendar type of the global configuration is used.
         */
        this.primaryCalendarType = input(...(ngDevMode ? [undefined, { debugName: "primaryCalendarType" }] : []));
        /**
         * Defines the secondary calendar type.
      If not set, the calendar will only show the primary calendar type.
         */
        this.secondaryCalendarType = input(...(ngDevMode ? [undefined, { debugName: "secondaryCalendarType" }] : []));
        /**
         * Determines the format, displayed in the input field.
         */
        this.formatPattern = input(...(ngDevMode ? [undefined, { debugName: "formatPattern" }] : []));
        /**
         * Determines the format, displayed in the input field.
         */
        this.displayFormat = input(...(ngDevMode ? [undefined, { debugName: "displayFormat" }] : []));
        /**
         * Determines the format, used for the value attribute.
         */
        this.valueFormat = input(...(ngDevMode ? [undefined, { debugName: "valueFormat" }] : []));
        /**
         * Determines the minimum date available for selection.
      
      **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).
         */
        this.minDate = input("", ...(ngDevMode ? [{ debugName: "minDate" }] : []));
        /**
         * Determines the maximum date available for selection.
      
      **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).
         */
        this.maxDate = input("", ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
        /**
         * Defines how to calculate calendar weeks and first day of the week.
      If not set, the calendar will be displayed according to the currently set global configuration.
         */
        this.calendarWeekNumbering = input("Default", ...(ngDevMode ? [{ debugName: "calendarWeekNumbering" }] : [])); // className is now passed
        /**
         * Fired when the input operation has finished by pressing Enter or on focusout.
         */
        this.ui5Change = output();
        /**
         * Fired when the value of the component is changed at each key stroke.
         */
        this.ui5Input = output();
        /**
         * Fired before the value state of the component is updated internally.
      The event is preventable, meaning that if it's default action is
      prevented, the component will not update the value state.
         */
        this.ui5ValueStateChange = output();
        /**
         * Fired after the component's picker is opened.
         */
        this.ui5Open = output();
        /**
         * Fired after the component's picker is closed.
         */
        this.ui5Close = output();
        /**
         * Available slots for content projection in this component.
         *
         * Slots allow you to insert custom content into predefined areas of the web component.
         * Use the `slot` attribute on child elements to target specific slots.
         *
         * - **valueStateMessage**: Defines the value state message that will be displayed as pop up under the component.
      
      **Note:** If not specified, a default text (in the respective language) will be displayed.
      
      **Note:** The `valueStateMessage` would be displayed,
      when the component is in `Information`, `Critical` or `Negative` value state.
         *
         * @example
         * ```html
         * <ui5-date-picker>
         *   <div slot="header">Custom header content</div>
         *   <p>Default slot content</p>
         * </ui5-date-picker>
         * ```
         *
         * @readonly
         * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
         */
        this.slots = [
            {
                "name": "valueStateMessage",
                "description": "Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
                "since": "1.0.0-rc.7"
            }
        ];
        this.elementRef = inject(ElementRef);
        this.injector = inject(Injector);
    }
    /**
     * Currently selected date represented as a Local JavaScript Date instance.
     * @readonly This property is managed by the web component.
     */
    get dateValue() {
        return this.element?.dateValue ?? null;
    }
    get element() {
        return this.elementRef.nativeElement;
    }
    ngAfterViewInit() {
        const wcElement = this.element;
        const inputsToSync = [
            'value',
            'valueState',
            'required',
            'disabled',
            'readonly',
            'placeholder',
            'name',
            'hideWeekNumbers',
            'open',
            'accessibleName',
            'accessibleNameRef',
            'accessibleDescription',
            'accessibleDescriptionRef',
            'primaryCalendarType',
            'secondaryCalendarType',
            'formatPattern',
            'displayFormat',
            'valueFormat',
            'minDate',
            'maxDate',
            'calendarWeekNumbering',
        ];
        // Synchronize inputs (properties)
        for (const inputName of inputsToSync) {
            // Find the corresponding camelCase signal property on the Angular component
            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
            // Use the Injector to run the effect in the correct context
            if (this[signalName] && typeof this[signalName] === 'function') {
                runInInjectionContext(this.injector, () => {
                    effect(() => {
                        // Read the signal value
                        const value = this[signalName]();
                        if (wcElement) {
                            // Write the value to the Web Component's property
                            wcElement[inputName] = value;
                        }
                    });
                });
            }
        }
        const outputsToSync = [
            'ui5Change',
            'ui5Input',
            'ui5ValueStateChange',
            'ui5Open',
            'ui5Close',
        ];
        // Synchronize outputs (events)
        for (const outputName of outputsToSync) {
            // Map Angular output name to UI5 web component event name
            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
            // Ensure the output property exists and has an emit function before adding listener
            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
                // Cast the listener to the correct type to satisfy TypeScript
                wcElement.addEventListener(eventName, (e) => {
                    this[outputName].emit(e);
                });
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: DatePicker, isStandalone: true, selector: "ui5-date-picker, [ui5-date-picker]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueState: { classPropertyName: "valueState", publicName: "valueState", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, hideWeekNumbers: { classPropertyName: "hideWeekNumbers", publicName: "hideWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null }, accessibleDescription: { classPropertyName: "accessibleDescription", publicName: "accessibleDescription", isSignal: true, isRequired: false, transformFunction: null }, accessibleDescriptionRef: { classPropertyName: "accessibleDescriptionRef", publicName: "accessibleDescriptionRef", isSignal: true, isRequired: false, transformFunction: null }, primaryCalendarType: { classPropertyName: "primaryCalendarType", publicName: "primaryCalendarType", isSignal: true, isRequired: false, transformFunction: null }, secondaryCalendarType: { classPropertyName: "secondaryCalendarType", publicName: "secondaryCalendarType", isSignal: true, isRequired: false, transformFunction: null }, formatPattern: { classPropertyName: "formatPattern", publicName: "formatPattern", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, calendarWeekNumbering: { classPropertyName: "calendarWeekNumbering", publicName: "calendarWeekNumbering", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Change: "ui5Change", ui5Input: "ui5Input", ui5ValueStateChange: "ui5ValueStateChange", ui5Open: "ui5Open", ui5Close: "ui5Close" }, exportAs: ["ui5DatePicker"], hostDirectives: [{ directive: i1.GenericControlValueAccessor }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DatePicker, decorators: [{
            type: Component,
            args: [{
                    standalone: true,
                    selector: 'ui5-date-picker, [ui5-date-picker]',
                    template: '<ng-content></ng-content>',
                    exportAs: 'ui5DatePicker',
                    hostDirectives: [GenericControlValueAccessor],
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }] });

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

export { DatePicker };
//# sourceMappingURL=fundamental-ngx-ui5-webcomponents-date-picker.mjs.map
