import { __esDecorate, __runInitializers } from "tslib";
import { LitElement, html } from 'lit';
import { customElement, property, state, query } from 'lit/decorators.js';
import { inputStyles } from './internals/DatePicker.styles.js';
import { formatDate, parseDate } from './internals/DatePickerUtils.js';
import './internals/DatePickerCalendar.js';
import '../../md/text-field/ui-outlined-text-field.js';
import '../../md/icons/ui-icon.js';
/**
 * A docked date picker that opens from a text field input.
 * Ideal for forms and date selection in medium to large layouts.
 *
 * ## Features
 * - Text field input with calendar dropdown
 * - Keyboard navigation support (Arrow Down, Enter, Escape)
 * - Custom date formatting
 * - Input validation and error handling
 * - Min/max date constraints
 * - Disabled dates support
 * - Accessible design with proper ARIA attributes
 * - CSS Anchor Positioning API for dropdown placement
 *
 * ## Events
 *
 * ### `change`
 * Fired when the selected date changes.
 *
 * **Detail:**
 * ```typescript
 * {
 *   value: Date | null,
 *   formattedValue: string
 * }
 * ```
 *
 * ## Usage
 *
 * ### Basic usage
 * ```html
 * <ui-date-picker-input
 *   label="Select date"
 *   name="birthDate"
 *   placeholder="MM/DD/YYYY"
 *   .value=${new Date()}
 *   @change=${this.handleDateChange}
 * ></ui-date-picker-input>
 * ```
 *
 * ### With validation
 * ```html
 * <ui-date-picker-input
 *   label="Birth date"
 *   name="birthDate"
 *   required
 *   .error=${this.hasError}
 *   .errorMessage=${"Please select a valid date"}
 *   .minDate=${new Date('1900-01-01')}
 *   .maxDate=${new Date()}
 * ></ui-date-picker-input>
 * ```
 *
 * ### Custom date format
 * ```html
 * <ui-date-picker-input
 *   label="Birth date"
 *   .dateFormat=${date => date.toLocaleDateString('en-GB')}
 * ></ui-date-picker-input>
 * ```
 *
 * ### With disabled dates
 * ```html
 * <ui-date-picker-input
 *   label="Appointment date"
 *   .disabledDates=${[new Date('2024-12-25'), new Date('2024-01-01')]}
 * ></ui-date-picker-input>
 * ```
 */
let UiDatePickerInput = (() => {
    let _classDecorators = [customElement('ui-date-picker-input')];
    let _classDescriptor;
    let _classExtraInitializers = [];
    let _classThis;
    let _classSuper = LitElement;
    let _label_decorators;
    let _label_initializers = [];
    let _label_extraInitializers = [];
    let _name_decorators;
    let _name_initializers = [];
    let _name_extraInitializers = [];
    let _placeholder_decorators;
    let _placeholder_initializers = [];
    let _placeholder_extraInitializers = [];
    let _value_decorators;
    let _value_initializers = [];
    let _value_extraInitializers = [];
    let _disabled_decorators;
    let _disabled_initializers = [];
    let _disabled_extraInitializers = [];
    let _required_decorators;
    let _required_initializers = [];
    let _required_extraInitializers = [];
    let _errorMessage_decorators;
    let _errorMessage_initializers = [];
    let _errorMessage_extraInitializers = [];
    let _error_decorators;
    let _error_initializers = [];
    let _error_extraInitializers = [];
    let _minDate_decorators;
    let _minDate_initializers = [];
    let _minDate_extraInitializers = [];
    let _maxDate_decorators;
    let _maxDate_initializers = [];
    let _maxDate_extraInitializers = [];
    let _disabledDates_decorators;
    let _disabledDates_initializers = [];
    let _disabledDates_extraInitializers = [];
    let _locale_decorators;
    let _locale_initializers = [];
    let _locale_extraInitializers = [];
    let _dateFormat_decorators;
    let _dateFormat_initializers = [];
    let _dateFormat_extraInitializers = [];
    let _isOpen_decorators;
    let _isOpen_initializers = [];
    let _isOpen_extraInitializers = [];
    let _inputValue_decorators;
    let _inputValue_initializers = [];
    let _inputValue_extraInitializers = [];
    let _textField_decorators;
    let _textField_initializers = [];
    let _textField_extraInitializers = [];
    var UiDatePickerInput = class extends _classSuper {
        static { _classThis = this; }
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _label_decorators = [property({ type: String })];
            _name_decorators = [property({ type: String })];
            _placeholder_decorators = [property({ type: String })];
            _value_decorators = [property({ type: Object })];
            _disabled_decorators = [property({ type: Boolean })];
            _required_decorators = [property({ type: Boolean })];
            _errorMessage_decorators = [property({ type: String })];
            _error_decorators = [property({ type: Boolean })];
            _minDate_decorators = [property({ type: Object })];
            _maxDate_decorators = [property({ type: Object })];
            _disabledDates_decorators = [property({ type: Array })];
            _locale_decorators = [property({ type: String })];
            _dateFormat_decorators = [property({ type: Object })];
            _isOpen_decorators = [state()];
            _inputValue_decorators = [state()];
            _textField_decorators = [query('ui-outlined-text-field')];
            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
            __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
            __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
            __esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
            __esDecorate(this, null, _errorMessage_decorators, { kind: "accessor", name: "errorMessage", static: false, private: false, access: { has: obj => "errorMessage" in obj, get: obj => obj.errorMessage, set: (obj, value) => { obj.errorMessage = value; } }, metadata: _metadata }, _errorMessage_initializers, _errorMessage_extraInitializers);
            __esDecorate(this, null, _error_decorators, { kind: "accessor", name: "error", static: false, private: false, access: { has: obj => "error" in obj, get: obj => obj.error, set: (obj, value) => { obj.error = value; } }, metadata: _metadata }, _error_initializers, _error_extraInitializers);
            __esDecorate(this, null, _minDate_decorators, { kind: "accessor", name: "minDate", static: false, private: false, access: { has: obj => "minDate" in obj, get: obj => obj.minDate, set: (obj, value) => { obj.minDate = value; } }, metadata: _metadata }, _minDate_initializers, _minDate_extraInitializers);
            __esDecorate(this, null, _maxDate_decorators, { kind: "accessor", name: "maxDate", static: false, private: false, access: { has: obj => "maxDate" in obj, get: obj => obj.maxDate, set: (obj, value) => { obj.maxDate = value; } }, metadata: _metadata }, _maxDate_initializers, _maxDate_extraInitializers);
            __esDecorate(this, null, _disabledDates_decorators, { kind: "accessor", name: "disabledDates", static: false, private: false, access: { has: obj => "disabledDates" in obj, get: obj => obj.disabledDates, set: (obj, value) => { obj.disabledDates = value; } }, metadata: _metadata }, _disabledDates_initializers, _disabledDates_extraInitializers);
            __esDecorate(this, null, _locale_decorators, { kind: "accessor", name: "locale", static: false, private: false, access: { has: obj => "locale" in obj, get: obj => obj.locale, set: (obj, value) => { obj.locale = value; } }, metadata: _metadata }, _locale_initializers, _locale_extraInitializers);
            __esDecorate(this, null, _dateFormat_decorators, { kind: "accessor", name: "dateFormat", static: false, private: false, access: { has: obj => "dateFormat" in obj, get: obj => obj.dateFormat, set: (obj, value) => { obj.dateFormat = value; } }, metadata: _metadata }, _dateFormat_initializers, _dateFormat_extraInitializers);
            __esDecorate(this, null, _isOpen_decorators, { kind: "accessor", name: "isOpen", static: false, private: false, access: { has: obj => "isOpen" in obj, get: obj => obj.isOpen, set: (obj, value) => { obj.isOpen = value; } }, metadata: _metadata }, _isOpen_initializers, _isOpen_extraInitializers);
            __esDecorate(this, null, _inputValue_decorators, { kind: "accessor", name: "inputValue", static: false, private: false, access: { has: obj => "inputValue" in obj, get: obj => obj.inputValue, set: (obj, value) => { obj.inputValue = value; } }, metadata: _metadata }, _inputValue_initializers, _inputValue_extraInitializers);
            __esDecorate(this, null, _textField_decorators, { kind: "accessor", name: "textField", static: false, private: false, access: { has: obj => "textField" in obj, get: obj => obj.textField, set: (obj, value) => { obj.textField = value; } }, metadata: _metadata }, _textField_initializers, _textField_extraInitializers);
            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
            UiDatePickerInput = _classThis = _classDescriptor.value;
            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        static styles = inputStyles;
        static shadowRootOptions = {
            mode: 'open',
            delegatesFocus: true,
        };
        #label_accessor_storage = __runInitializers(this, _label_initializers, ''
        /**
         * The name attribute for the input field (for form handling)
         */
        );
        /**
         * The label for the input field
         */
        get label() { return this.#label_accessor_storage; }
        set label(value) { this.#label_accessor_storage = value; }
        #name_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _name_initializers, ''
        /**
         * Placeholder text for the input
         */
        ));
        /**
         * The name attribute for the input field (for form handling)
         */
        get name() { return this.#name_accessor_storage; }
        set name(value) { this.#name_accessor_storage = value; }
        #placeholder_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _placeholder_initializers, 'MM/DD/YYYY'
        /**
         * The currently selected date
         */
        ));
        /**
         * Placeholder text for the input
         */
        get placeholder() { return this.#placeholder_accessor_storage; }
        set placeholder(value) { this.#placeholder_accessor_storage = value; }
        #value_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _value_initializers, null
        /**
         * Whether the date picker is disabled
         */
        ));
        /**
         * The currently selected date
         */
        get value() { return this.#value_accessor_storage; }
        set value(value) { this.#value_accessor_storage = value; }
        #disabled_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _disabled_initializers, false
        /**
         * Whether the input is required
         */
        ));
        /**
         * Whether the date picker is disabled
         */
        get disabled() { return this.#disabled_accessor_storage; }
        set disabled(value) { this.#disabled_accessor_storage = value; }
        #required_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _required_initializers, false
        /**
         * Error message to display
         */
        ));
        /**
         * Whether the input is required
         */
        get required() { return this.#required_accessor_storage; }
        set required(value) { this.#required_accessor_storage = value; }
        #errorMessage_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _errorMessage_initializers, ''
        /**
         * Whether the input has an error state
         */
        ));
        /**
         * Error message to display
         */
        get errorMessage() { return this.#errorMessage_accessor_storage; }
        set errorMessage(value) { this.#errorMessage_accessor_storage = value; }
        #error_accessor_storage = (__runInitializers(this, _errorMessage_extraInitializers), __runInitializers(this, _error_initializers, false
        /**
         * Minimum selectable date
         */
        ));
        /**
         * Whether the input has an error state
         */
        get error() { return this.#error_accessor_storage; }
        set error(value) { this.#error_accessor_storage = value; }
        #minDate_accessor_storage = (__runInitializers(this, _error_extraInitializers), __runInitializers(this, _minDate_initializers, undefined
        /**
         * Maximum selectable date
         */
        ));
        /**
         * Minimum selectable date
         */
        get minDate() { return this.#minDate_accessor_storage; }
        set minDate(value) { this.#minDate_accessor_storage = value; }
        #maxDate_accessor_storage = (__runInitializers(this, _minDate_extraInitializers), __runInitializers(this, _maxDate_initializers, undefined
        /**
         * Array of disabled dates
         */
        ));
        /**
         * Maximum selectable date
         */
        get maxDate() { return this.#maxDate_accessor_storage; }
        set maxDate(value) { this.#maxDate_accessor_storage = value; }
        #disabledDates_accessor_storage = (__runInitializers(this, _maxDate_extraInitializers), __runInitializers(this, _disabledDates_initializers, undefined
        /**
         * Locale for date formatting
         */
        ));
        /**
         * Array of disabled dates
         */
        get disabledDates() { return this.#disabledDates_accessor_storage; }
        set disabledDates(value) { this.#disabledDates_accessor_storage = value; }
        #locale_accessor_storage = (__runInitializers(this, _disabledDates_extraInitializers), __runInitializers(this, _locale_initializers, undefined
        /**
         * Custom date format function
         */
        ));
        /**
         * Locale for date formatting
         */
        get locale() { return this.#locale_accessor_storage; }
        set locale(value) { this.#locale_accessor_storage = value; }
        #dateFormat_accessor_storage = (__runInitializers(this, _locale_extraInitializers), __runInitializers(this, _dateFormat_initializers, undefined));
        /**
         * Custom date format function
         */
        get dateFormat() { return this.#dateFormat_accessor_storage; }
        set dateFormat(value) { this.#dateFormat_accessor_storage = value; }
        #isOpen_accessor_storage = (__runInitializers(this, _dateFormat_extraInitializers), __runInitializers(this, _isOpen_initializers, false));
        get isOpen() { return this.#isOpen_accessor_storage; }
        set isOpen(value) { this.#isOpen_accessor_storage = value; }
        #inputValue_accessor_storage = (__runInitializers(this, _isOpen_extraInitializers), __runInitializers(this, _inputValue_initializers, ''));
        get inputValue() { return this.#inputValue_accessor_storage; }
        set inputValue(value) { this.#inputValue_accessor_storage = value; }
        #textField_accessor_storage = (__runInitializers(this, _inputValue_extraInitializers), __runInitializers(this, _textField_initializers, void 0));
        get textField() { return this.#textField_accessor_storage; }
        set textField(value) { this.#textField_accessor_storage = value; }
        constructor() {
            super();
            __runInitializers(this, _textField_extraInitializers);
            // Initialize boolean properties to false as per Lit best practices
            this.disabled = false;
            this.required = false;
            this.error = false;
        }
        connectedCallback() {
            super.connectedCallback();
            this.updateInputValue();
            document.addEventListener('click', this.handleDocumentClick.bind(this));
        }
        disconnectedCallback() {
            super.disconnectedCallback();
            document.removeEventListener('click', this.handleDocumentClick.bind(this));
        }
        willUpdate(changedProperties) {
            if (changedProperties.has('value')) {
                this.updateInputValue();
            }
        }
        updated(changedProperties) {
            if (changedProperties.has('isOpen') && this.isOpen) {
                // Set anchor name on text field for CSS Anchor Positioning API
                if (this.textField) {
                    // Using setProperty since anchorName is not in TypeScript types yet
                    this.textField.style.setProperty('anchor-name', '--ui-date-picker-anchor');
                }
            }
        }
        updateInputValue() {
            if (this.value) {
                this.inputValue = this.dateFormat ? this.dateFormat(this.value) : formatDate(this.value, this.locale);
            }
            else {
                this.inputValue = '';
            }
        }
        handleDocumentClick(event) {
            if (!this.contains(event.target)) {
                this.isOpen = false;
            }
        }
        handleInputClick() {
            if (!this.disabled) {
                this.isOpen = !this.isOpen;
            }
        }
        handleInputChange(event) {
            const target = event.target;
            this.inputValue = target.value;
            const parsedDate = parseDate(this.inputValue);
            if (parsedDate) {
                this.value = parsedDate;
                this.dispatchChangeEvent();
            }
        }
        handleCalendarDateSelect(event) {
            this.value = event.detail.date;
            this.isOpen = false;
            this.dispatchChangeEvent();
        }
        handleCalendarDateCancel() {
            this.isOpen = false;
        }
        handleKeyDown(event) {
            switch (event.key) {
                case 'Escape':
                    this.isOpen = false;
                    break;
                case 'ArrowDown':
                    if (!this.isOpen) {
                        event.preventDefault();
                        this.isOpen = true;
                    }
                    break;
                case 'Enter':
                    if (this.isOpen) {
                        event.preventDefault();
                        this.isOpen = false;
                    }
                    break;
            }
        }
        dispatchChangeEvent() {
            this.dispatchEvent(new CustomEvent('change', {
                detail: {
                    value: this.value,
                    formattedValue: this.inputValue,
                },
                bubbles: true,
                composed: true,
            }));
        }
        renderCalendarIcon() {
            return html `
      <ui-icon slot="suffix" icon="calendarToday" @click=${this.handleInputClick} class="calendar-icon"></ui-icon>
    `;
        }
        renderDropdown() {
            if (!this.isOpen)
                return null;
            const currentDate = this.value || new Date();
            return html `
      <div class="dropdown-container">
        <ui-date-picker-calendar
          .year=${currentDate.getFullYear()}
          .month=${currentDate.getMonth()}
          .selectedDate=${this.value}
          .minDate=${this.minDate}
          .maxDate=${this.maxDate}
          .disabledDates=${this.disabledDates}
          .locale=${this.locale}
          showActions
          @date-select=${this.handleCalendarDateSelect}
          @date-cancel=${this.handleCalendarDateCancel}
        ></ui-date-picker-calendar>
      </div>
    `;
        }
        render() {
            return html `
      <div class="input-container">
        ${this.isOpen ? html `<div class="backdrop" @click=${() => (this.isOpen = false)}></div>` : ''}
        <ui-outlined-text-field
          .label=${this.label}
          .name=${this.name}
          .placeholder=${this.placeholder}
          .value=${this.inputValue}
          .disabled=${this.disabled}
          .required=${this.required}
          ?invalid=${this.error}
          .invalidText=${this.errorMessage}
          readonly
          @click=${this.handleInputClick}
          @input=${this.handleInputChange}
          @keydown=${this.handleKeyDown}
        >
          ${this.renderCalendarIcon()}
        </ui-outlined-text-field>
        ${this.renderDropdown()}
      </div>
    `;
        }
        static {
            __runInitializers(_classThis, _classExtraInitializers);
        }
    };
    return UiDatePickerInput = _classThis;
})();
export { UiDatePickerInput };
//# sourceMappingURL=ui-date-picker-input.js.map