@siemens/ix 4.4.0 → 5.1.0

package/dist/collection/components/datetime-input/datetime-input.js

@@ -0,0 +1,1372 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Siemens AG
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { iconCalendar } from "@siemens/ix-icons/icons";
+import { Host, Mixin, h, } from "@stencil/core";
+import { DateTime } from "luxon";
+import { SlotEnd, SlotStart } from "../input/input.fc";
+import { addDisposableChangesAndVisibilityObservers, adjustPaddingForStartAndEnd, createPickerValidityStateTracker, emitPickerValidityState, handleSubmitOnEnterKeydown, onInputBlurWithChange, onInputFocus, } from "../input/input.util";
+import { getTimePickerConstraintBounds, isWithinTimePickerConstraints, } from "../time-picker/time-picker-constraints";
+import { HookValidationLifecycle, createClassMutationObserver, getValidationText, } from "../utils/input";
+import { closeDropdown as closeDropdownUtil, createValidityState, handleIconClick, openDropdown as openDropdownUtil, } from "../utils/input/picker-input.util";
+import { makeRef } from "../utils/make-ref";
+import { getLuxonDateOnlyFormatMask, getLuxonTimeFormatMask, } from "../utils/luxon-datetime-format-masks";
+import { DefaultMixins } from "../utils/internal/component";
+import { InputPickerMixin, } from "../utils/internal/mixins/input/input-picker.mixin";
+/**
+ * @since 5.0.0
+ * @form-ready
+ *
+ * @slot start - Element will be displayed at the start of the input
+ * @slot end - Element will be displayed at the end of the input
+ */
+export class DatetimeInput extends Mixin(...DefaultMixins, InputPickerMixin) {
+    constructor() {
+        super();
+    }
+    hostElement;
+    formInternals;
+    /** Name of the form control for form submission */
+    name;
+    /** Placeholder text when input is empty */
+    placeholder;
+    /** Value in display format (e.g., "2026/01/21 13:07:04" for default format) */
+    value = '';
+    /**
+     * Luxon date and time format for display (e.g., 'yyyy/LL/dd HH:mm:ss' → "2026/01/20 13:07:04").
+     *
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     */
+    format = 'yyyy/LL/dd HH:mm:ss';
+    /** Locale for date/time formatting (e.g., 'en-US', 'de-DE') */
+    locale;
+    /** Whether the field is required */
+    required = false;
+    /** Whether the input is disabled */
+    disabled = false;
+    /** Whether the input is read-only (calendar icon hidden) */
+    readonly = false;
+    /** Minimum allowed date (matching format or date-only, e.g., "2026/01/20") */
+    minDate;
+    /** Maximum allowed date (matching format or date-only, e.g., "2026/12/31") */
+    maxDate;
+    /**
+     * Earliest selectable time (tokens matching the time portion of `format`). Invalid non-empty values are ignored.
+     *
+     * @since 5.0.0
+     */
+    minTime;
+    /**
+     * Latest selectable time (tokens matching the time portion of `format`). Invalid non-empty values are ignored.
+     *
+     * @since 5.0.0
+     */
+    maxTime;
+    /** Label text displayed above the input */
+    label;
+    /** Helper text displayed below the input */
+    helperText;
+    /** Validation message for invalid state */
+    invalidText;
+    /** Informational message */
+    infoText;
+    /** Warning message */
+    warningText;
+    /** Success/valid message */
+    validText;
+    /** Show helper text as tooltip instead of below input */
+    showTextAsTooltip = false;
+    /** Error message when datetime cannot be parsed */
+    i18nErrorDateTimeUnparsable = 'Date time is not valid';
+    /** Text for confirm button in picker (prop name matches datetime-picker) */
+    i18nDone = 'Confirm';
+    /** Header text for time picker section */
+    i18nTime = 'Time';
+    /** ARIA label for previous month navigation button */
+    ariaLabelPreviousMonthButton = 'Previous month';
+    /** ARIA label for next month navigation button */
+    ariaLabelNextMonthButton = 'Next month';
+    /**
+     * ARIA label for the calendar icon button
+     * Will be set as aria-label on the nested HTML button element
+     */
+    ariaLabelCalendarButton = 'Toggle calendar';
+    /** Show week numbers in date picker */
+    showWeekNumbers = false;
+    /** First day of week (0=Sunday, 1=Monday, etc.) */
+    weekStartIndex = 0;
+    /** Prevent form submission when Enter is pressed */
+    suppressSubmitOnEnter = false;
+    /** Text alignment within the input field */
+    textAlignment = 'start';
+    /**
+     * Enable Popover API rendering for dropdown.
+     */
+    enableTopLayer = false;
+    /** Emitted when the datetime value changes. Payload is display format or undefined */
+    valueChange;
+    /** Emitted when validation state changes */
+    validityStateChange;
+    /** Emitted when the input receives focus */
+    ixFocus;
+    /** Emitted when the input loses focus */
+    ixBlur;
+    /**
+     * Emitted when the date/time value changes via user interaction.
+     *
+     * Fires in two scenarios:
+     * - When the input loses focus (blur) and the value has changed
+     * - When a new date/time is selected in the picker and confirmed
+     *
+     * Does NOT fire when:
+     * - The picker is opened/closed without confirming a change
+     * - The input is blurred without modifying the value
+     * - The value is changed programmatically via the value property
+     */
+    ixChange;
+    isInputInvalid = false;
+    isInvalid = false;
+    isValid = false;
+    isInfo = false;
+    isWarning = false;
+    slotStartRef = makeRef();
+    slotEndRef = makeRef();
+    inputElementRef = makeRef();
+    dropdownElementRef = makeRef();
+    datetimePickerRef = makeRef();
+    show = false;
+    from = null;
+    time = null;
+    classObserver;
+    initialValue;
+    invalidReason;
+    touched = false;
+    validityTracker = createPickerValidityStateTracker();
+    disposableChangesAndVisibilityObservers;
+    watchValuePropHandler(newValue) {
+        this.onInput(newValue);
+    }
+    watchMinTimePropHandler() {
+        this.revalidateCurrentValue();
+    }
+    watchMaxTimePropHandler() {
+        this.revalidateCurrentValue();
+    }
+    get combinedFormat() {
+        return this.format;
+    }
+    get dateOnlyFormat() {
+        return getLuxonDateOnlyFormatMask(this.format);
+    }
+    get timeOnlyFormat() {
+        return getLuxonTimeFormatMask(this.format);
+    }
+    syncPickerState() {
+        if (!this.value) {
+            this.from = null;
+            this.time = null;
+            return;
+        }
+        const dateTime = DateTime.fromFormat(this.value, this.combinedFormat, {
+            locale: this.locale,
+        });
+        if (dateTime.isValid) {
+            this.from = dateTime.toFormat(this.dateOnlyFormat);
+            this.time = dateTime.toFormat(this.timeOnlyFormat);
+        }
+        else {
+            this.from = null;
+            this.time = null;
+        }
+    }
+    async onInput(value) {
+        this.value = value;
+        if (!value) {
+            this.isInputInvalid = false;
+            this.invalidReason = undefined;
+            this.from = null;
+            this.time = null;
+            this.emitValidityStateChangeIfChanged();
+            this.formInternals.setFormValue(null);
+            this.valueChange.emit(value);
+            return;
+        }
+        if (!this.format) {
+            return;
+        }
+        const dateTime = DateTime.fromFormat(value, this.combinedFormat, {
+            locale: this.locale,
+        });
+        const validationResult = this.computeConstraintValidation(dateTime);
+        this.isInputInvalid = validationResult.isInvalid;
+        this.invalidReason = validationResult.reason;
+        if (dateTime.isValid) {
+            this.from = dateTime.toFormat(this.dateOnlyFormat);
+            this.time = dateTime.toFormat(this.timeOnlyFormat);
+        }
+        else {
+            this.from = null;
+            this.time = null;
+        }
+        if (this.isInputInvalid) {
+            this.formInternals.setFormValue(null);
+        }
+        else {
+            this.formInternals.setFormValue(value);
+        }
+        this.emitValidityStateChangeIfChanged();
+        this.valueChange.emit(value);
+    }
+    parseConstraintDate(dateString, boundary) {
+        if (!dateString) {
+            return null;
+        }
+        const localeOpts = { locale: this.locale };
+        let parsed = DateTime.fromFormat(dateString, this.format, localeOpts);
+        if (!parsed.isValid) {
+            parsed = DateTime.fromFormat(dateString, this.dateOnlyFormat, localeOpts);
+        }
+        if (!parsed.isValid) {
+            return null;
+        }
+        return boundary === 'start' ? parsed.startOf('day') : parsed.endOf('day');
+    }
+    validateConstraints(dateTime, minDateTime, maxDateTime, minTime, maxTime) {
+        const isFormatInvalid = !dateTime.isValid;
+        const isBeforeMin = !!(minDateTime?.isValid &&
+            dateTime.isValid &&
+            dateTime < minDateTime);
+        const isAfterMax = !!(maxDateTime?.isValid &&
+            dateTime.isValid &&
+            dateTime > maxDateTime);
+        const isOutsideTimeWindow = dateTime.isValid &&
+            !isWithinTimePickerConstraints(dateTime, minTime, maxTime);
+        const isInvalid = isFormatInvalid || isBeforeMin || isAfterMax || isOutsideTimeWindow;
+        let reason;
+        if (isBeforeMin) {
+            reason = 'rangeUnderflow';
+        }
+        else if (isAfterMax) {
+            reason = 'rangeOverflow';
+        }
+        else if (isOutsideTimeWindow) {
+            reason = 'customError';
+        }
+        else if (isFormatInvalid) {
+            reason = dateTime.invalidReason || undefined;
+        }
+        return { isInvalid, reason };
+    }
+    getTimeConstraintBoundsForDate(dateTime, minDateTime, maxDateTime) {
+        if (!dateTime.isValid) {
+            return { min: null, max: null };
+        }
+        const bounds = getTimePickerConstraintBounds(this.minTime, this.maxTime, this.timeOnlyFormat, dateTime.startOf('day'));
+        const hasDateBounds = !!(minDateTime?.isValid || maxDateTime?.isValid);
+        if (!hasDateBounds) {
+            return bounds;
+        }
+        const applyMinTime = !!minDateTime?.isValid && dateTime.hasSame(minDateTime, 'day');
+        const applyMaxTime = !!maxDateTime?.isValid && dateTime.hasSame(maxDateTime, 'day');
+        return {
+            min: applyMinTime ? bounds.min : null,
+            max: applyMaxTime ? bounds.max : null,
+        };
+    }
+    computeConstraintValidation(dateTime) {
+        const minDateTime = this.parseConstraintDate(this.minDate, 'start');
+        const maxDateTime = this.parseConstraintDate(this.maxDate, 'end');
+        const { min: minTime, max: maxTime } = this.getTimeConstraintBoundsForDate(dateTime, minDateTime, maxDateTime);
+        return this.validateConstraints(dateTime, minDateTime, maxDateTime, minTime, maxTime);
+    }
+    revalidateCurrentValue() {
+        if (!this.value || !this.format) {
+            return;
+        }
+        const dateTime = DateTime.fromFormat(this.value, this.combinedFormat, {
+            locale: this.locale,
+        });
+        if (!dateTime.isValid) {
+            return;
+        }
+        const validationResult = this.computeConstraintValidation(dateTime);
+        this.isInputInvalid = validationResult.isInvalid;
+        this.invalidReason = validationResult.reason;
+        this.emitValidityStateChangeIfChanged();
+    }
+    handleInputKeyDown(event) {
+        handleSubmitOnEnterKeydown(event, this.suppressSubmitOnEnter, this.formInternals.form);
+    }
+    initPickerValues() {
+        this.syncPickerState();
+        // If no value is set, initialize picker to current datetime for better UX
+        // (shows current time scrolled into view, but nothing is selected until user clicks)
+        if (!this.value) {
+            const now = DateTime.now();
+            if (now.isValid) {
+                this.from = now.toFormat(this.dateOnlyFormat);
+                this.time = now.toFormat(this.timeOnlyFormat);
+            }
+        }
+    }
+    onCalendarClick(event) {
+        handleIconClick(event, this.show, () => this.openDropdown(), this.inputElementRef);
+    }
+    async openDropdown() {
+        this.initPickerValues();
+        return openDropdownUtil(this.dropdownElementRef);
+    }
+    async closeDropdown() {
+        return closeDropdownUtil(this.dropdownElementRef);
+    }
+    updateFormInternalValue(value) {
+        if (value) {
+            this.formInternals.setFormValue(value);
+        }
+        else {
+            this.formInternals.setFormValue(null);
+        }
+    }
+    /**
+     * Returns whether the input has a value.
+     * @internal
+     */
+    hasValidValue() {
+        return Promise.resolve(!!this.value);
+    }
+    /**
+     * Returns the associated HTML form element.
+     * @internal
+     */
+    getAssociatedFormElement() {
+        return Promise.resolve(this.formInternals.form);
+    }
+    /**
+     * Get the native input element
+     * @internal
+     */
+    getNativeInputElement() {
+        return this.inputElementRef.waitForCurrent();
+    }
+    /**
+     * Focus the native input element
+     * @internal
+     */
+    async focusInput() {
+        return (await this.getNativeInputElement()).focus();
+    }
+    /**
+     * Returns whether the input field has been touched.
+     * @internal
+     */
+    isTouched() {
+        return Promise.resolve(this.touched);
+    }
+    /**
+     * Returns the validity state of the input.
+     * @internal
+     */
+    getValidityState() {
+        return Promise.resolve(createValidityState(this.isInputInvalid, !!this.required, this.value));
+    }
+    async onInputValidationChange() {
+        this.isInvalid = this.isInputInvalid;
+        const state = await this.getValidityState();
+        const validityState = {
+            valid: state.valid,
+            valueMissing: state.valueMissing,
+            rangeUnderflow: this.invalidReason === 'rangeUnderflow',
+            rangeOverflow: this.invalidReason === 'rangeOverflow',
+            typeMismatch: !!(this.invalidReason &&
+                this.invalidReason !== 'rangeUnderflow' &&
+                this.invalidReason !== 'rangeOverflow'),
+            customError: state.customError,
+            badInput: state.badInput,
+            patternMismatch: false,
+            stepMismatch: state.stepMismatch,
+            tooLong: state.tooLong,
+            tooShort: state.tooShort,
+            invalidReason: this.invalidReason,
+        };
+        this.validityStateChange.emit(validityState);
+    }
+    hookValidationLifecycle({ isInfo, isInvalid, isInvalidByRequired, isValid, isWarning, }) {
+        this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;
+        this.isInfo = isInfo;
+        this.isValid = isValid;
+        this.isWarning = isWarning;
+    }
+    emitValidityStateChangeIfChanged() {
+        return emitPickerValidityState(this);
+    }
+    emitChange(value) {
+        if (this.initialValue !== value) {
+            this.ixChange.emit(value);
+            this.initialValue = value;
+        }
+    }
+    connectedCallback() {
+        this.classObserver = createClassMutationObserver(this.hostElement, () => this.checkClassList());
+        this.disposableChangesAndVisibilityObservers =
+            addDisposableChangesAndVisibilityObservers(this.hostElement, this.updatePaddings.bind(this));
+    }
+    componentWillLoad() {
+        this.onInput(this.value);
+        this.checkClassList();
+        this.updateFormInternalValue(this.value);
+        this.initialValue = this.value;
+    }
+    updatePaddings() {
+        adjustPaddingForStartAndEnd(this.slotStartRef.current, this.slotEndRef.current, this.inputElementRef.current);
+    }
+    disconnectedCallback() {
+        this.classObserver?.destroy();
+        this.disposableChangesAndVisibilityObservers?.();
+    }
+    checkClassList() {
+        this.isInvalid = this.hostElement.classList.contains('ix-invalid');
+    }
+    handleDateSelect = (event) => {
+        const { from, time } = event.detail;
+        if (!from || !time) {
+            return;
+        }
+        const dateOnly = DateTime.fromFormat(from, this.dateOnlyFormat, {
+            locale: this.locale,
+        });
+        const timeOnly = DateTime.fromFormat(time, this.timeOnlyFormat, {
+            locale: this.locale,
+        });
+        if (!dateOnly.isValid || !timeOnly.isValid) {
+            return;
+        }
+        const dateTimeCombined = dateOnly.set({
+            hour: timeOnly.hour,
+            minute: timeOnly.minute,
+            second: timeOnly.second,
+            millisecond: timeOnly.millisecond,
+        });
+        const displayValue = dateTimeCombined.toFormat(this.format);
+        this.onInput(displayValue);
+        this.emitChange(displayValue);
+        this.closeDropdown();
+    };
+    getPickerElement() {
+        return this.dropdownElementRef;
+    }
+    renderInput() {
+        return (h("div", { class: "input-wrapper" }, h(SlotStart, { slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h("input", { autoComplete: "off", class: {
+                'is-invalid': this.isInputInvalid,
+            }, disabled: this.disabled, name: this.name, placeholder: this.placeholder, readonly: this.readonly, ref: this.inputElementRef, required: this.required, style: {
+                textAlign: this.textAlignment,
+            }, type: "text", value: this.value ?? '', onBlur: () => {
+                onInputBlurWithChange(this, this.inputElementRef.current, this.value);
+                this.touched = true;
+                this.emitValidityStateChangeIfChanged();
+            }, onClick: (event) => {
+                if (this.show) {
+                    event.stopPropagation();
+                    event.preventDefault();
+                }
+            }, onFocus: () => {
+                onInputFocus(this, this.value);
+                this.ixFocus.emit();
+            }, onInput: (event) => {
+                const target = event.target;
+                this.onInput(target.value);
+            }, onKeyDown: (event) => this.handleInputKeyDown(event) }), h(SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { "aria-label": this.ariaLabelCalendarButton, tabindex: -1, class: { 'calendar-hidden': this.disabled || this.readonly }, variant: "subtle-tertiary", icon: iconCalendar, size: "16", onClick: (event) => this.onCalendarClick(event) }))));
+    }
+    render() {
+        const invalidText = getValidationText(this.isInputInvalid, this.invalidText, this.i18nErrorDateTimeUnparsable);
+        return (h(Host, { key: 'e3798b039b41158b1cf0c93f82f5aae2394b60b8', class: {
+                disabled: this.disabled,
+                readonly: this.readonly,
+            } }, h("ix-field-wrapper", { key: '42e309eb2cab84b15a3053afb1d66018b62110cf', controlRef: this.inputElementRef, helperText: this.helperText, infoText: this.infoText, invalidText: invalidText, isInfo: this.isInfo, isInvalid: this.isInvalid, isValid: this.isValid, isWarning: this.isWarning, label: this.label, required: this.required, showTextAsTooltip: this.showTextAsTooltip, validText: this.validText, warningText: this.warningText }, this.renderInput()), h("ix-dropdown", { key: '5451e2a2275efe4558db30041b49b78ac203305a', class: "datetime-dropdown", closeBehavior: "outside", "data-testid": "datetime-dropdown", enableTopLayer: this.enableTopLayer, ref: this.dropdownElementRef, show: this.show, suppressOverflowBehavior: true, trigger: this.inputElementRef.waitForCurrent(), onShowChanged: (event) => {
+                this.show = event.detail;
+            }, focusTrapOptions: {
+                targetElement: this.datetimePickerRef,
+                trapFocusInShadowDom: true,
+            }, callbackFocusElement: async () => {
+                const datetimePicker = this.datetimePickerRef.current;
+                if (datetimePicker) {
+                    const datePickerElement = await datetimePicker.getDatepickerElement();
+                    datePickerElement?.focusActiveDay();
+                }
+                return true;
+            }, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'] }, h("ix-datetime-picker", { key: '3a469a3a476293d90dc7133feb94e9967c6d54bd', ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, dateFormat: this.dateOnlyFormat, embedded: true, from: this.from ?? '', i18nDone: this.i18nDone, i18nTime: this.i18nTime, locale: this.locale, maxDate: this.maxDate, maxTime: this.maxTime, minDate: this.minDate, minTime: this.minTime, ref: this.datetimePickerRef, showWeekNumbers: this.showWeekNumbers, singleSelection: true, time: this.time ?? '', timeFormat: this.timeOnlyFormat, weekStartIndex: this.weekStartIndex, onDateSelect: this.handleDateSelect }))));
+    }
+    static get is() { return "ix-datetime-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["datetime-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["datetime-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the form control for form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text when input is empty"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placeholder"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Value in display format (e.g., \"2026/01/21 13:07:04\" for default format)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Luxon date and time format for display (e.g., 'yyyy/LL/dd HH:mm:ss' \u2192 \"2026/01/20 13:07:04\").\n\nSee {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "format",
+                "defaultValue": "'yyyy/LL/dd HH:mm:ss'"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Locale for date/time formatting (e.g., 'en-US', 'de-DE')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is read-only (calendar icon hidden)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "minDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum allowed date (matching format or date-only, e.g., \"2026/01/20\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-date"
+            },
+            "maxDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum allowed date (matching format or date-only, e.g., \"2026/12/31\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-date"
+            },
+            "minTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Earliest selectable time (tokens matching the time portion of `format`). Invalid non-empty values are ignored."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-time"
+            },
+            "maxTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Latest selectable time (tokens matching the time portion of `format`). Invalid non-empty values are ignored."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-time"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text displayed above the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text displayed below the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "invalidText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation message for invalid state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "invalid-text"
+            },
+            "infoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Informational message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "info-text"
+            },
+            "warningText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Warning message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "warning-text"
+            },
+            "validText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Success/valid message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "valid-text"
+            },
+            "showTextAsTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show helper text as tooltip instead of below input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-text-as-tooltip",
+                "defaultValue": "false"
+            },
+            "i18nErrorDateTimeUnparsable": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message when datetime cannot be parsed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "i-1-8n-error-date-time-unparsable",
+                "defaultValue": "'Date time is not valid'"
+            },
+            "i18nDone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for confirm button in picker (prop name matches datetime-picker)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "i-1-8n-done",
+                "defaultValue": "'Confirm'"
+            },
+            "i18nTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header text for time picker section"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "i-1-8n-time",
+                "defaultValue": "'Time'"
+            },
+            "ariaLabelPreviousMonthButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label for previous month navigation button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-previous-month-button",
+                "defaultValue": "'Previous month'"
+            },
+            "ariaLabelNextMonthButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label for next month navigation button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-next-month-button",
+                "defaultValue": "'Next month'"
+            },
+            "ariaLabelCalendarButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label for the calendar icon button\nWill be set as aria-label on the nested HTML button element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-calendar-button",
+                "defaultValue": "'Toggle calendar'"
+            },
+            "showWeekNumbers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show week numbers in date picker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-week-numbers",
+                "defaultValue": "false"
+            },
+            "weekStartIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "First day of week (0=Sunday, 1=Monday, etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "week-start-index",
+                "defaultValue": "0"
+            },
+            "suppressSubmitOnEnter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prevent form submission when Enter is pressed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "suppress-submit-on-enter",
+                "defaultValue": "false"
+            },
+            "textAlignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text alignment within the input field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-alignment",
+                "defaultValue": "'start'"
+            },
+            "enableTopLayer": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable Popover API rendering for dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-top-layer",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isInputInvalid": {},
+            "isInvalid": {},
+            "isValid": {},
+            "isInfo": {},
+            "isWarning": {},
+            "show": {},
+            "from": {},
+            "time": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the datetime value changes. Payload is display format or undefined"
+                },
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                }
+            }, {
+                "method": "validityStateChange",
+                "name": "validityStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when validation state changes"
+                },
+                "complexType": {
+                    "original": "DateTimeInputValidityState",
+                    "resolved": "DateTimeInputValidityState",
+                    "references": {
+                        "DateTimeInputValidityState": {
+                            "location": "import",
+                            "path": "./datetime-input.types",
+                            "id": "src/components/datetime-input/datetime-input.types.ts::DateTimeInputValidityState",
+                            "referenceLocation": "DateTimeInputValidityState"
+                        }
+                    }
+                }
+            }, {
+                "method": "ixFocus",
+                "name": "ixFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input receives focus"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "ixBlur",
+                "name": "ixBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "ixChange",
+                "name": "ixChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the date/time value changes via user interaction.\n\nFires in two scenarios:\n- When the input loses focus (blur) and the value has changed\n- When a new date/time is selected in the picker and confirmed\n\nDoes NOT fire when:\n- The picker is opened/closed without confirming a change\n- The input is blurred without modifying the value\n- The value is changed programmatically via the value property"
+                },
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "hasValidValue": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns whether the input has a value.",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getAssociatedFormElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLFormElement | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLFormElement": {
+                            "location": "global",
+                            "id": "global::HTMLFormElement"
+                        }
+                    },
+                    "return": "Promise<HTMLFormElement | null>"
+                },
+                "docs": {
+                    "text": "Returns the associated HTML form element.",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getNativeInputElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLInputElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    },
+                    "return": "Promise<HTMLInputElement>"
+                },
+                "docs": {
+                    "text": "Get the native input element",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "focusInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focus the native input element",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "isTouched": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns whether the input field has been touched.",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getValidityState": {
+                "complexType": {
+                    "signature": "() => Promise<ValidityState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ValidityState": {
+                            "location": "global",
+                            "id": "global::ValidityState"
+                        }
+                    },
+                    "return": "Promise<ValidityState>"
+                },
+                "docs": {
+                    "text": "Returns the validity state of the input.",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchValuePropHandler"
+            }, {
+                "propName": "minTime",
+                "methodName": "watchMinTimePropHandler"
+            }, {
+                "propName": "maxTime",
+                "methodName": "watchMaxTimePropHandler"
+            }, {
+                "propName": "isInputInvalid",
+                "methodName": "onInputValidationChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "formInternals"; }
+}
+__decorate([
+    HookValidationLifecycle()
+], DatetimeInput.prototype, "hookValidationLifecycle", null);