@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/cjs/ix-date-input.cjs.entry.js

@@ -0,0 +1,287 @@
+'use strict';
+
+var index = require('./index-DUl1Kp3_.js');
+var index$1 = require('./index-DIFIjYrm.js');
+var datetime = require('./datetime-Dvtv5O8f.js');
+var dropdownController = require('./dropdown-controller-BLOjtc6w.js');
+var input_util = require('./input.util-DKYtpTVn.js');
+var validation = require('./validation-CAJ2gTIK.js');
+var makeRef = require('./make-ref-BaH6_YJk.js');
+require('./a11y-B_6chCvu.js');
+require('./mutation-observer-DE0YMfYu.js');
+require('./rwd.util-GTn-vgCJ.js');
+require('./anime.es-CgS5X9-e.js');
+
+const dateInputCss = "input{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled,input.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,input.disabled::placeholder{color:transparent}textarea{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea[type=number]{text-align:right}textarea[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled,textarea.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,textarea.disabled::placeholder{color:transparent}textarea{min-height:2rem;height:3.25rem;padding:calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness))}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),input.ix-info:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .input-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%}:host input{width:100%;height:100%}:host .start-container,:host .end-container{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1}:host .start-container{left:0}:host .end-container{right:0}:host .start-container ::slotted(*){margin-left:0.5rem}:host .start-container ::slotted(ix-icon.size-24),:host .start-container ::slotted(ix-icon-button.btn-icon-16){margin-left:0.25rem}:host .start-container ::slotted(ix-icon-button.btn-icon-32){margin-left:0}:host .end-container ::slotted(*){margin-right:0.5rem}:host .end-container ::slotted(ix-icon.size-24),:host .end-container ::slotted(ix-icon-button.btn-icon-16){margin-right:0.25rem}:host .end-container ::slotted(ix-icon-button.btn-icon-32){margin-right:0}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}:host(.disabled){pointer-events:none}:host(.disabled) input,:host(.disabled) textarea{pointer-events:none}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input{background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input{width:100%;height:100%}:host .calendar-hidden{display:none}:host(.readonly) input{pointer-events:none}";
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var __decorate = (undefined && undefined.__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;
+};
+const DateInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange", 6);
+        this.validityStateChange = index.createEvent(this, "validityStateChange", 7);
+        this.ixFocus = index.createEvent(this, "ixFocus", 7);
+        this.ixBlur = index.createEvent(this, "ixBlur", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.formInternals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.formInternals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.formInternals;
+        }
+        /**
+         * value of the input element
+         */
+        this.value = '';
+        /**
+         * Date format string.
+         * See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
+         */
+        this.format = 'yyyy/LL/dd';
+        /**
+         * readonly attribute
+         */
+        this.readonly = false;
+        /**
+         * disabled attribute
+         */
+        this.disabled = false;
+        /**
+         * i18n string for the error message when the date is not parsable
+         */
+        this.i18nErrorDateUnparsable = 'Date is not valid';
+        /**
+         * Shows week numbers displayed on the left side of the date picker
+         *
+         * @since 3.0.0
+         */
+        this.showWeekNumbers = false;
+        this.show = false;
+        this.from = null;
+        this.isInputInvalid = false;
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
+        this.focus = false;
+        this.slotStartRef = makeRef.makeRef();
+        this.slotEndRef = makeRef.makeRef();
+        this.datepickerRef = makeRef.makeRef();
+        this.inputElementRef = makeRef.makeRef();
+        this.dropdownElementRef = makeRef.makeRef();
+        this.touched = false;
+    }
+    updateFormInternalValue(value) {
+        this.formInternals.setFormValue(value);
+        this.value = value;
+    }
+    connectedCallback() {
+        this.classObserver = validation.createClassMutationObserver(this.hostElement, () => this.checkClassList());
+        this.disposableChangesAndVisibilityObservers =
+            input_util.addDisposableChangesAndVisibilityObservers(this.hostElement, this.updatePaddings.bind(this));
+    }
+    componentWillLoad() {
+        this.onInput(this.value);
+        if (this.isInputInvalid) {
+            this.from = null;
+        }
+        else {
+            this.watchValue();
+        }
+        this.checkClassList();
+        this.updateFormInternalValue(this.value);
+    }
+    updatePaddings() {
+        input_util.adjustPaddingForStartAndEnd(this.slotStartRef.current, this.slotEndRef.current, this.inputElementRef.current);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.classObserver) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.disposableChangesAndVisibilityObservers) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
+    watchValue() {
+        this.from = this.value;
+    }
+    /** @internal */
+    hasValidValue() {
+        return Promise.resolve(!!this.value);
+    }
+    /** @internal */
+    getAssociatedFormElement() {
+        return Promise.resolve(this.formInternals.form);
+    }
+    async onInput(value) {
+        this.value = value;
+        if (!value) {
+            this.valueChange.emit(value);
+            return;
+        }
+        if (!this.format) {
+            return;
+        }
+        const date = datetime.DateTime.fromFormat(value, this.format);
+        if (date.isValid) {
+            this.isInputInvalid = false;
+            this.updateFormInternalValue(value);
+            this.closeDropdown();
+        }
+        else {
+            this.isInputInvalid = true;
+            this.invalidReason = date.invalidReason;
+        }
+        this.valueChange.emit(value);
+    }
+    onCalenderClick(event) {
+        if (!this.show) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.openDropdown();
+        }
+        if (this.inputElementRef.current) {
+            this.inputElementRef.current.focus();
+        }
+    }
+    async openDropdown() {
+        const dropdownElement = await this.dropdownElementRef.waitForCurrent();
+        const id = dropdownElement.getAttribute('data-ix-dropdown');
+        dropdownController.dropdownController.dismissAll();
+        if (!id) {
+            return;
+        }
+        const dropdown = dropdownController.dropdownController.getDropdownById(id);
+        if (!dropdown) {
+            return;
+        }
+        dropdownController.dropdownController.present(dropdown);
+    }
+    async closeDropdown() {
+        const dropdownElement = await this.dropdownElementRef.waitForCurrent();
+        const id = dropdownElement.getAttribute('data-ix-dropdown');
+        if (!id) {
+            return;
+        }
+        const dropdown = dropdownController.dropdownController.getDropdownById(id);
+        if (!dropdown) {
+            return;
+        }
+        dropdownController.dropdownController.dismiss(dropdown);
+    }
+    checkClassList() {
+        this.isInvalid = this.hostElement.classList.contains('ix-invalid');
+    }
+    renderInput() {
+        var _a;
+        return (index.h("div", { class: "input-wrapper" }, index.h(input_util.SlotStart, { slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), index.h("input", { autoComplete: "off", class: {
+                'is-invalid': this.isInputInvalid,
+            }, disabled: this.disabled, readOnly: this.readonly, readonly: this.readonly, required: this.required, ref: this.inputElementRef, type: "text", value: (_a = this.value) !== null && _a !== void 0 ? _a : '', onInput: (event) => {
+                const target = event.target;
+                this.onInput(target.value);
+            }, onClick: (event) => {
+                if (this.show) {
+                    event.stopPropagation();
+                    event.preventDefault();
+                }
+            }, onFocus: async () => {
+                this.openDropdown();
+                this.ixFocus.emit();
+            }, onBlur: () => {
+                this.ixBlur.emit();
+                this.touched = true;
+            } }), index.h(input_util.SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, index.h("ix-icon-button", { "data-testid": "open-calendar", class: { 'calendar-hidden': this.disabled || this.readonly }, ghost: true, icon: index$1.iconCalendar, onClick: (event) => this.onCalenderClick(event) }))));
+    }
+    hookValidationLifecycle({ isInfo, isInvalid, isInvalidByRequired, isValid, isWarning, }) {
+        this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;
+        this.isInfo = isInfo;
+        this.isValid = isValid;
+        this.isWarning = isWarning;
+    }
+    async onInputValidationChange() {
+        const state = await this.getValidityState();
+        this.validityStateChange.emit({
+            patternMismatch: state.patternMismatch,
+            invalidReason: this.invalidReason,
+        });
+    }
+    /** @internal */
+    getValidityState() {
+        return Promise.resolve({
+            badInput: false,
+            customError: false,
+            patternMismatch: this.isInputInvalid,
+            rangeOverflow: false,
+            rangeUnderflow: false,
+            stepMismatch: false,
+            tooLong: false,
+            tooShort: false,
+            typeMismatch: false,
+            valid: !this.isInputInvalid,
+            valueMissing: !!this.required && !this.value,
+        });
+    }
+    /**
+     * Get the native input element
+     */
+    getNativeInputElement() {
+        return this.inputElementRef.waitForCurrent();
+    }
+    /**
+     * Focuses the input field
+     */
+    async focusInput() {
+        return (await this.getNativeInputElement()).focus();
+    }
+    /**
+     * Returns whether the text field has been touched.
+     * @internal
+     */
+    isTouched() {
+        return Promise.resolve(this.touched);
+    }
+    render() {
+        var _a;
+        const invalidText = this.isInputInvalid
+            ? this.i18nErrorDateUnparsable
+            : this.invalidText;
+        return (index.h(index.Host, { key: '00b8af0c46dfa5c581dc27596ceb082120e1649b', class: {
+                disabled: this.disabled,
+                readonly: this.readonly,
+            } }, index.h("ix-field-wrapper", { key: '129204bab237fb58a44422fcdb99b31dc5d3a210', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), index.h("ix-dropdown", { key: 'c8a1e5af9f6bf52119ff74f2259f51add13d1376', "data-testid": "date-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
+                this.show = event.detail;
+            } }, index.h("ix-date-picker", { key: '8761eb33e961f273437bfe9d4ecc416ec953744c', ref: this.datepickerRef, format: this.format, locale: this.locale, range: false, from: (_a = this.from) !== null && _a !== void 0 ? _a : '', onDateChange: (event) => {
+                const { from } = event.detail;
+                this.onInput(from);
+            }, showWeekNumbers: this.showWeekNumbers }))));
+    }
+    static get formAssociated() { return true; }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["watchValue"],
+        "isInputInvalid": ["onInputValidationChange"]
+    }; }
+};
+__decorate([
+    validation.HookValidationLifecycle()
+], DateInput.prototype, "hookValidationLifecycle", null);
+DateInput.style = dateInputCss;
+
+exports.ix_date_input = DateInput;
+//# sourceMappingURL=ix-date-input.entry.cjs.js.map
+
+//# sourceMappingURL=ix-date-input.cjs.entry.js.map

package/dist/cjs/ix-date-input.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-date-input.entry.cjs.js","mappings":"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","names":["makeRef","createClassMutationObserver","addDisposableChangesAndVisibilityObservers","adjustPaddingForStartAndEnd","DateTime","dropdownController","h","SlotStart","SlotEnd","iconCalendar","Host","HookValidationLifecycle"],"sources":["src/components/date-input/date-input.scss?tag=ix-date-input&encapsulation=shadow","src/components/date-input/date-input.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'mixins/input';\n@import './../input/input.mixins.scss';\n\n@include input-field;\n\n:host {\n  @include ix-component;\n\n  display: inline-block;\n  position: relative;\n\n  input {\n    width: 100%;\n    height: 100%;\n  }\n\n  .calendar-hidden {\n    display: none;\n  }\n}\n\n:host(.readonly) {\n  input {\n    pointer-events: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { iconCalendar } from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { dropdownController } from '../dropdown/dropdown-controller';\nimport { SlotEnd, SlotStart } from '../input/input.fc';\nimport {\n  DisposableChangesAndVisibilityObservers,\n  addDisposableChangesAndVisibilityObservers,\n  adjustPaddingForStartAndEnd,\n} from '../input/input.util';\nimport {\n  ClassMutationObserver,\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n  createClassMutationObserver,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\n\nexport type DateInputValidityState = {\n  patternMismatch: boolean;\n  invalidReason?: string;\n};\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n */\n@Component({\n  tag: 'ix-date-input',\n  styleUrl: 'date-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DateInput implements IxInputFieldComponent<string | undefined> {\n  @Element() hostElement!: HTMLIxDateInputElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * name of the input element\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * placeholder of the input element\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * value of the input element\n   */\n  @Prop({ reflect: true, mutable: true }) value?: string = '';\n\n  /**\n   * Locale identifier (e.g. 'en' or 'de').\n   *\n   * @since 2.6.0\n   */\n  @Prop() locale?: string;\n\n  /**\n   * Date format string.\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   */\n  @Prop() format: string = 'yyyy/LL/dd';\n\n  /**\n   * required attribute\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * helper text below the input field\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * label of the input field\n   */\n  @Prop() label?: string;\n\n  /**\n   * error text below the input field\n   */\n  @Prop({ reflect: true }) invalidText?: string;\n\n  /**\n   * readonly attribute\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * disabled attribute\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * info text below the input field\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * warning text below the input field\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * valid text below the input field\n   */\n  @Prop() validText?: string;\n\n  /**\n   * show text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * i18n string for the error message when the date is not parsable\n   */\n  @Prop({ attribute: 'i18n-error-date-unparsable' }) i18nErrorDateUnparsable =\n    'Date is not valid';\n\n  /**\n   * Shows week numbers displayed on the left side of the date picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() showWeekNumbers = false;\n\n  /**\n   * Input change event.\n   */\n  @Event({ cancelable: false }) valueChange!: EventEmitter<string | undefined>;\n\n  /**\n   * Validation state change event.\n   */\n  @Event() validityStateChange!: EventEmitter<DateInputValidityState>;\n\n  /** @internal */\n  @Event() ixFocus!: EventEmitter<void>;\n\n  /** @internal */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() show = false;\n  @State() from: string | null = null;\n  @State() isInputInvalid = false;\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() focus = false;\n\n  private readonly slotStartRef = makeRef<HTMLDivElement>();\n  private readonly slotEndRef = makeRef<HTMLDivElement>();\n\n  private readonly datepickerRef = makeRef<HTMLIxDatePickerElement>();\n\n  private readonly inputElementRef = makeRef<HTMLInputElement>();\n  private readonly dropdownElementRef = makeRef<HTMLIxDropdownElement>();\n  private classObserver?: ClassMutationObserver;\n  private invalidReason?: string;\n  private touched = false;\n\n  private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;\n\n  updateFormInternalValue(value: string | undefined): void {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  connectedCallback(): void {\n    this.classObserver = createClassMutationObserver(this.hostElement, () =>\n      this.checkClassList()\n    );\n\n    this.disposableChangesAndVisibilityObservers =\n      addDisposableChangesAndVisibilityObservers(\n        this.hostElement,\n        this.updatePaddings.bind(this)\n      );\n  }\n\n  componentWillLoad(): void {\n    this.onInput(this.value);\n    if (this.isInputInvalid) {\n      this.from = null;\n    } else {\n      this.watchValue();\n    }\n\n    this.checkClassList();\n    this.updateFormInternalValue(this.value);\n  }\n\n  private updatePaddings() {\n    adjustPaddingForStartAndEnd(\n      this.slotStartRef.current,\n      this.slotEndRef.current,\n      this.inputElementRef.current\n    );\n  }\n\n  disconnectedCallback(): void {\n    this.classObserver?.destroy();\n    this.disposableChangesAndVisibilityObservers?.();\n  }\n\n  @Watch('value')\n  watchValue() {\n    this.from = this.value;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  async onInput(value: string | undefined) {\n    this.value = value;\n    if (!value) {\n      this.valueChange.emit(value);\n      return;\n    }\n\n    if (!this.format) {\n      return;\n    }\n\n    const date = DateTime.fromFormat(value, this.format);\n    if (date.isValid) {\n      this.isInputInvalid = false;\n\n      this.updateFormInternalValue(value);\n      this.closeDropdown();\n    } else {\n      this.isInputInvalid = true;\n      this.invalidReason = date.invalidReason;\n    }\n\n    this.valueChange.emit(value);\n  }\n\n  onCalenderClick(event: Event) {\n    if (!this.show) {\n      event.stopPropagation();\n      event.preventDefault();\n      this.openDropdown();\n    }\n\n    if (this.inputElementRef.current) {\n      this.inputElementRef.current.focus();\n    }\n  }\n\n  async openDropdown() {\n    const dropdownElement = await this.dropdownElementRef.waitForCurrent();\n    const id = dropdownElement.getAttribute('data-ix-dropdown');\n\n    dropdownController.dismissAll();\n    if (!id) {\n      return;\n    }\n\n    const dropdown = dropdownController.getDropdownById(id);\n    if (!dropdown) {\n      return;\n    }\n    dropdownController.present(dropdown);\n  }\n\n  async closeDropdown() {\n    const dropdownElement = await this.dropdownElementRef.waitForCurrent();\n    const id = dropdownElement.getAttribute('data-ix-dropdown');\n\n    if (!id) {\n      return;\n    }\n\n    const dropdown = dropdownController.getDropdownById(id);\n    if (!dropdown) {\n      return;\n    }\n    dropdownController.dismiss(dropdown);\n  }\n\n  private checkClassList() {\n    this.isInvalid = this.hostElement.classList.contains('ix-invalid');\n  }\n\n  private renderInput() {\n    return (\n      <div class=\"input-wrapper\">\n        <SlotStart\n          slotStartRef={this.slotStartRef}\n          onSlotChange={() => this.updatePaddings()}\n        ></SlotStart>\n        <input\n          autoComplete=\"off\"\n          class={{\n            'is-invalid': this.isInputInvalid,\n          }}\n          disabled={this.disabled}\n          readOnly={this.readonly}\n          readonly={this.readonly}\n          required={this.required}\n          ref={this.inputElementRef}\n          type=\"text\"\n          value={this.value ?? ''}\n          onInput={(event) => {\n            const target = event.target as HTMLInputElement;\n            this.onInput(target.value);\n          }}\n          onClick={(event) => {\n            if (this.show) {\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onFocus={async () => {\n            this.openDropdown();\n            this.ixFocus.emit();\n          }}\n          onBlur={() => {\n            this.ixBlur.emit();\n            this.touched = true;\n          }}\n        ></input>\n        <SlotEnd\n          slotEndRef={this.slotEndRef}\n          onSlotChange={() => this.updatePaddings()}\n        >\n          <ix-icon-button\n            data-testid=\"open-calendar\"\n            class={{ 'calendar-hidden': this.disabled || this.readonly }}\n            ghost\n            icon={iconCalendar}\n            onClick={(event) => this.onCalenderClick(event)}\n          ></ix-icon-button>\n        </SlotEnd>\n      </div>\n    );\n  }\n\n  @HookValidationLifecycle()\n  hookValidationLifecycle({\n    isInfo,\n    isInvalid,\n    isInvalidByRequired,\n    isValid,\n    isWarning,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;\n    this.isInfo = isInfo;\n    this.isValid = isValid;\n    this.isWarning = isWarning;\n  }\n\n  @Watch('isInputInvalid')\n  async onInputValidationChange() {\n    const state = await this.getValidityState();\n    this.validityStateChange.emit({\n      patternMismatch: state.patternMismatch,\n      invalidReason: this.invalidReason,\n    });\n  }\n\n  /** @internal */\n  @Method()\n  getValidityState(): Promise<ValidityState> {\n    return Promise.resolve({\n      badInput: false,\n      customError: false,\n      patternMismatch: this.isInputInvalid,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n      valid: !this.isInputInvalid,\n      valueMissing: !!this.required && !this.value,\n    });\n  }\n\n  /**\n   * Get the native input element\n   */\n  @Method()\n  getNativeInputElement(): Promise<HTMLInputElement> {\n    return this.inputElementRef.waitForCurrent();\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    return (await this.getNativeInputElement()).focus();\n  }\n\n  /**\n   * Returns whether the text field has been touched.\n   * @internal\n   */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  render() {\n    const invalidText = this.isInputInvalid\n      ? this.i18nErrorDateUnparsable\n      : this.invalidText;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          label={this.label}\n          helperText={this.helperText}\n          isInvalid={this.isInvalid}\n          invalidText={invalidText}\n          infoText={this.infoText}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          warningText={this.warningText}\n          isValid={this.isValid}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          required={this.required}\n          controlRef={this.inputElementRef}\n        >\n          {this.renderInput()}\n        </ix-field-wrapper>\n        <ix-dropdown\n          data-testid=\"date-dropdown\"\n          trigger={this.inputElementRef.waitForCurrent()}\n          ref={this.dropdownElementRef}\n          closeBehavior=\"outside\"\n          suppressOverflowBehavior={true}\n          show={this.show}\n          onShowChanged={(event) => {\n            this.show = event.detail;\n          }}\n        >\n          <ix-date-picker\n            ref={this.datepickerRef}\n            format={this.format}\n            locale={this.locale}\n            range={false}\n            from={this.from ?? ''}\n            onDateChange={(event) => {\n              const { from } = event.detail;\n              this.onInput(from);\n            }}\n            showWeekNumbers={this.showWeekNumbers}\n          ></ix-date-picker>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-date-input.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-date-input.entry.cjs.js","sources":["src/components/date-input/date-input.scss?tag=ix-date-input&encapsulation=shadow","src/components/date-input/date-input.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'mixins/input';\n@import './../input/input.mixins.scss';\n\n@include input-field;\n\n:host {\n  @include ix-component;\n\n  display: inline-block;\n  position: relative;\n\n  input {\n    width: 100%;\n    height: 100%;\n  }\n\n  .calendar-hidden {\n    display: none;\n  }\n}\n\n:host(.readonly) {\n  input {\n    pointer-events: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { iconCalendar } from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { dropdownController } from '../dropdown/dropdown-controller';\nimport { SlotEnd, SlotStart } from '../input/input.fc';\nimport {\n  DisposableChangesAndVisibilityObservers,\n  addDisposableChangesAndVisibilityObservers,\n  adjustPaddingForStartAndEnd,\n} from '../input/input.util';\nimport {\n  ClassMutationObserver,\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n  createClassMutationObserver,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\n\nexport type DateInputValidityState = {\n  patternMismatch: boolean;\n  invalidReason?: string;\n};\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n */\n@Component({\n  tag: 'ix-date-input',\n  styleUrl: 'date-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DateInput implements IxInputFieldComponent<string | undefined> {\n  @Element() hostElement!: HTMLIxDateInputElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * name of the input element\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * placeholder of the input element\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * value of the input element\n   */\n  @Prop({ reflect: true, mutable: true }) value?: string = '';\n\n  /**\n   * Locale identifier (e.g. 'en' or 'de').\n   *\n   * @since 2.6.0\n   */\n  @Prop() locale?: string;\n\n  /**\n   * Date format string.\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   */\n  @Prop() format: string = 'yyyy/LL/dd';\n\n  /**\n   * required attribute\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * helper text below the input field\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * label of the input field\n   */\n  @Prop() label?: string;\n\n  /**\n   * error text below the input field\n   */\n  @Prop({ reflect: true }) invalidText?: string;\n\n  /**\n   * readonly attribute\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * disabled attribute\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * info text below the input field\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * warning text below the input field\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * valid text below the input field\n   */\n  @Prop() validText?: string;\n\n  /**\n   * show text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * i18n string for the error message when the date is not parsable\n   */\n  @Prop({ attribute: 'i18n-error-date-unparsable' }) i18nErrorDateUnparsable =\n    'Date is not valid';\n\n  /**\n   * Shows week numbers displayed on the left side of the date picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() showWeekNumbers = false;\n\n  /**\n   * Input change event.\n   */\n  @Event({ cancelable: false }) valueChange!: EventEmitter<string | undefined>;\n\n  /**\n   * Validation state change event.\n   */\n  @Event() validityStateChange!: EventEmitter<DateInputValidityState>;\n\n  /** @internal */\n  @Event() ixFocus!: EventEmitter<void>;\n\n  /** @internal */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() show = false;\n  @State() from: string | null = null;\n  @State() isInputInvalid = false;\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() focus = false;\n\n  private readonly slotStartRef = makeRef<HTMLDivElement>();\n  private readonly slotEndRef = makeRef<HTMLDivElement>();\n\n  private readonly datepickerRef = makeRef<HTMLIxDatePickerElement>();\n\n  private readonly inputElementRef = makeRef<HTMLInputElement>();\n  private readonly dropdownElementRef = makeRef<HTMLIxDropdownElement>();\n  private classObserver?: ClassMutationObserver;\n  private invalidReason?: string;\n  private touched = false;\n\n  private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;\n\n  updateFormInternalValue(value: string | undefined): void {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  connectedCallback(): void {\n    this.classObserver = createClassMutationObserver(this.hostElement, () =>\n      this.checkClassList()\n    );\n\n    this.disposableChangesAndVisibilityObservers =\n      addDisposableChangesAndVisibilityObservers(\n        this.hostElement,\n        this.updatePaddings.bind(this)\n      );\n  }\n\n  componentWillLoad(): void {\n    this.onInput(this.value);\n    if (this.isInputInvalid) {\n      this.from = null;\n    } else {\n      this.watchValue();\n    }\n\n    this.checkClassList();\n    this.updateFormInternalValue(this.value);\n  }\n\n  private updatePaddings() {\n    adjustPaddingForStartAndEnd(\n      this.slotStartRef.current,\n      this.slotEndRef.current,\n      this.inputElementRef.current\n    );\n  }\n\n  disconnectedCallback(): void {\n    this.classObserver?.destroy();\n    this.disposableChangesAndVisibilityObservers?.();\n  }\n\n  @Watch('value')\n  watchValue() {\n    this.from = this.value;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  async onInput(value: string | undefined) {\n    this.value = value;\n    if (!value) {\n      this.valueChange.emit(value);\n      return;\n    }\n\n    if (!this.format) {\n      return;\n    }\n\n    const date = DateTime.fromFormat(value, this.format);\n    if (date.isValid) {\n      this.isInputInvalid = false;\n\n      this.updateFormInternalValue(value);\n      this.closeDropdown();\n    } else {\n      this.isInputInvalid = true;\n      this.invalidReason = date.invalidReason;\n    }\n\n    this.valueChange.emit(value);\n  }\n\n  onCalenderClick(event: Event) {\n    if (!this.show) {\n      event.stopPropagation();\n      event.preventDefault();\n      this.openDropdown();\n    }\n\n    if (this.inputElementRef.current) {\n      this.inputElementRef.current.focus();\n    }\n  }\n\n  async openDropdown() {\n    const dropdownElement = await this.dropdownElementRef.waitForCurrent();\n    const id = dropdownElement.getAttribute('data-ix-dropdown');\n\n    dropdownController.dismissAll();\n    if (!id) {\n      return;\n    }\n\n    const dropdown = dropdownController.getDropdownById(id);\n    if (!dropdown) {\n      return;\n    }\n    dropdownController.present(dropdown);\n  }\n\n  async closeDropdown() {\n    const dropdownElement = await this.dropdownElementRef.waitForCurrent();\n    const id = dropdownElement.getAttribute('data-ix-dropdown');\n\n    if (!id) {\n      return;\n    }\n\n    const dropdown = dropdownController.getDropdownById(id);\n    if (!dropdown) {\n      return;\n    }\n    dropdownController.dismiss(dropdown);\n  }\n\n  private checkClassList() {\n    this.isInvalid = this.hostElement.classList.contains('ix-invalid');\n  }\n\n  private renderInput() {\n    return (\n      <div class=\"input-wrapper\">\n        <SlotStart\n          slotStartRef={this.slotStartRef}\n          onSlotChange={() => this.updatePaddings()}\n        ></SlotStart>\n        <input\n          autoComplete=\"off\"\n          class={{\n            'is-invalid': this.isInputInvalid,\n          }}\n          disabled={this.disabled}\n          readOnly={this.readonly}\n          readonly={this.readonly}\n          required={this.required}\n          ref={this.inputElementRef}\n          type=\"text\"\n          value={this.value ?? ''}\n          onInput={(event) => {\n            const target = event.target as HTMLInputElement;\n            this.onInput(target.value);\n          }}\n          onClick={(event) => {\n            if (this.show) {\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onFocus={async () => {\n            this.openDropdown();\n            this.ixFocus.emit();\n          }}\n          onBlur={() => {\n            this.ixBlur.emit();\n            this.touched = true;\n          }}\n        ></input>\n        <SlotEnd\n          slotEndRef={this.slotEndRef}\n          onSlotChange={() => this.updatePaddings()}\n        >\n          <ix-icon-button\n            data-testid=\"open-calendar\"\n            class={{ 'calendar-hidden': this.disabled || this.readonly }}\n            ghost\n            icon={iconCalendar}\n            onClick={(event) => this.onCalenderClick(event)}\n          ></ix-icon-button>\n        </SlotEnd>\n      </div>\n    );\n  }\n\n  @HookValidationLifecycle()\n  hookValidationLifecycle({\n    isInfo,\n    isInvalid,\n    isInvalidByRequired,\n    isValid,\n    isWarning,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;\n    this.isInfo = isInfo;\n    this.isValid = isValid;\n    this.isWarning = isWarning;\n  }\n\n  @Watch('isInputInvalid')\n  async onInputValidationChange() {\n    const state = await this.getValidityState();\n    this.validityStateChange.emit({\n      patternMismatch: state.patternMismatch,\n      invalidReason: this.invalidReason,\n    });\n  }\n\n  /** @internal */\n  @Method()\n  getValidityState(): Promise<ValidityState> {\n    return Promise.resolve({\n      badInput: false,\n      customError: false,\n      patternMismatch: this.isInputInvalid,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n      valid: !this.isInputInvalid,\n      valueMissing: !!this.required && !this.value,\n    });\n  }\n\n  /**\n   * Get the native input element\n   */\n  @Method()\n  getNativeInputElement(): Promise<HTMLInputElement> {\n    return this.inputElementRef.waitForCurrent();\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    return (await this.getNativeInputElement()).focus();\n  }\n\n  /**\n   * Returns whether the text field has been touched.\n   * @internal\n   */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  render() {\n    const invalidText = this.isInputInvalid\n      ? this.i18nErrorDateUnparsable\n      : this.invalidText;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          label={this.label}\n          helperText={this.helperText}\n          isInvalid={this.isInvalid}\n          invalidText={invalidText}\n          infoText={this.infoText}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          warningText={this.warningText}\n          isValid={this.isValid}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          required={this.required}\n          controlRef={this.inputElementRef}\n        >\n          {this.renderInput()}\n        </ix-field-wrapper>\n        <ix-dropdown\n          data-testid=\"date-dropdown\"\n          trigger={this.inputElementRef.waitForCurrent()}\n          ref={this.dropdownElementRef}\n          closeBehavior=\"outside\"\n          suppressOverflowBehavior={true}\n          show={this.show}\n          onShowChanged={(event) => {\n            this.show = event.detail;\n          }}\n        >\n          <ix-date-picker\n            ref={this.datepickerRef}\n            format={this.format}\n            locale={this.locale}\n            range={false}\n            from={this.from ?? ''}\n            onDateChange={(event) => {\n              const { from } = event.detail;\n              this.onInput(from);\n            }}\n            showWeekNumbers={this.showWeekNumbers}\n          ></ix-date-picker>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"names":["makeRef","createClassMutationObserver","addDisposableChangesAndVisibilityObservers","adjustPaddingForStartAndEnd","DateTime","dropdownController","h","SlotStart","SlotEnd","iconCalendar","Host","HookValidationLifecycle"],"mappings":"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"}

package/dist/cjs/ix-date-time-card.cjs.entry.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var index = require('./index-DUl1Kp3_.js');
+
+const dateTimeCardCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .card{background-color:var(--theme-menu--background);width:100%;box-shadow:none;border:none;border-radius:unset;display:flex;flex-direction:column}:host .card.standaloneAppearance{box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 12px 18px 0 rgba(0, 0, 0, 0.1);border-radius:4px}:host .card.rounded{border-radius:4px}:host .card.left{border-radius:4px 0 0 4px;height:100%}:host .card.right{border-radius:0 4px 4px 0;height:100%}:host .card .header{padding:1rem;flex:0 1 auto}:host .card .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;flex:0 1 auto}:host .card .content{padding:0 1rem 1rem 1rem;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}";
+
+const DateTimeCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * set styles
+         */
+        this.individual = true;
+        /**
+         * Set corners style
+         */
+        this.corners = 'rounded';
+    }
+    cardClasses() {
+        var _a;
+        return {
+            card: true,
+            standaloneAppearance: (_a = this.standaloneAppearance) !== null && _a !== void 0 ? _a : this.individual,
+            rounded: this.corners === 'rounded',
+            left: this.corners === 'left',
+            right: this.corners === 'right',
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: '9310b246c56469a92bf77d955c88bb4005d6c5a1' }, index.h("div", { key: '041094bc9a9a9049bbcdc5f24f4987ee547bb7b0', class: this.cardClasses() }, index.h("div", { key: '80c76215cebf46bb7cb9cb3caf0ff74e9dc6cbda', class: "header" }, index.h("slot", { key: 'e1844c4fb35169db3a9077bc6dcabd260a99629f', name: "header" })), index.h("div", { key: '49cbbfa20d3a2e2751a974152efb03ecaa74b128', class: "separator" }), index.h("div", { key: '6583ffd0762ad265b6e2c8ba2a536af743669abe', class: "content" }, index.h("slot", { key: 'ee6202f5162c4972ee04cf548aa0e541e62f994d' })))));
+    }
+};
+DateTimeCard.style = dateTimeCardCss;
+
+exports.ix_date_time_card = DateTimeCard;
+//# sourceMappingURL=ix-date-time-card.entry.cjs.js.map
+
+//# sourceMappingURL=ix-date-time-card.cjs.entry.js.map

package/dist/cjs/ix-date-time-card.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-date-time-card.entry.cjs.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,g+CAAg+C;;MCqB3+C,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AASE;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,IAAI;AAElC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAwB,SAAS;AA6BjD;IA3BS,WAAW,GAAA;;QACjB,OAAO;AACL,YAAA,IAAI,EAAE,IAAI;YACV,oBAAoB,EAAE,MAAA,IAAI,CAAC,oBAAoB,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,IAAI,CAAC,UAAU;AAClE,YAAA,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;AACnC,YAAA,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;AAC7B,YAAA,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAChC;;IAGH,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAA,EAC5BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,EAENA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAO,CAAA,EAE7BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","src/components/date-time-card/date-time-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .card {\n    background-color: var(--theme-menu--background);\n    width: 100%;\n    box-shadow: none;\n    border: none;\n    border-radius: unset;\n    display: flex;\n    flex-direction: column;\n\n    &.standaloneAppearance {\n      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),\n        0 12px 18px 0 rgba(0, 0, 0, 0.1);\n      border-radius: 4px;\n    }\n\n    &.rounded {\n      border-radius: 4px;\n    }\n\n    &.left {\n      border-radius: 4px 0 0 4px;\n      height: 100%;\n    }\n\n    &.right {\n      border-radius: 0 4px 4px 0;\n      height: 100%;\n    }\n\n    .header {\n      padding: $default-space;\n      flex: 0 1 auto;\n    }\n\n    .separator {\n      border: 1px solid var(--theme-datepicker-separator--background);\n      width: 100%;\n      flex: 0 1 auto;\n    }\n\n    .content {\n      padding: 0 $default-space $default-space $default-space;\n      flex: 1 1 auto;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /** @internal */\n  @Prop() standaloneAppearance?: boolean;\n\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      standaloneAppearance: this.standaloneAppearance ?? this.individual,\n      rounded: this.corners === 'rounded',\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          <div class=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n\n          <div class=\"separator\"></div>\n\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-date-time-card.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-date-time-card.entry.cjs.js","sources":["src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","src/components/date-time-card/date-time-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .card {\n    background-color: var(--theme-menu--background);\n    width: 100%;\n    box-shadow: none;\n    border: none;\n    border-radius: unset;\n    display: flex;\n    flex-direction: column;\n\n    &.standaloneAppearance {\n      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),\n        0 12px 18px 0 rgba(0, 0, 0, 0.1);\n      border-radius: 4px;\n    }\n\n    &.rounded {\n      border-radius: 4px;\n    }\n\n    &.left {\n      border-radius: 4px 0 0 4px;\n      height: 100%;\n    }\n\n    &.right {\n      border-radius: 0 4px 4px 0;\n      height: 100%;\n    }\n\n    .header {\n      padding: $default-space;\n      flex: 0 1 auto;\n    }\n\n    .separator {\n      border: 1px solid var(--theme-datepicker-separator--background);\n      width: 100%;\n      flex: 0 1 auto;\n    }\n\n    .content {\n      padding: 0 $default-space $default-space $default-space;\n      flex: 1 1 auto;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /** @internal */\n  @Prop() standaloneAppearance?: boolean;\n\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      standaloneAppearance: this.standaloneAppearance ?? this.individual,\n      rounded: this.corners === 'rounded',\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          <div class=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n\n          <div class=\"separator\"></div>\n\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,g+CAAg+C;;MCqB3+C,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AASE;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,IAAI;AAElC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAwB,SAAS;AA6BjD;IA3BS,WAAW,GAAA;;QACjB,OAAO;AACL,YAAA,IAAI,EAAE,IAAI;YACV,oBAAoB,EAAE,MAAA,IAAI,CAAC,oBAAoB,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,IAAI,CAAC,UAAU;AAClE,YAAA,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;AACnC,YAAA,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;AAC7B,YAAA,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAChC;;IAGH,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAA,EAC5BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,EAENA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAO,CAAA,EAE7BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;"}

package/dist/cjs/ix-datetime-picker.cjs.entry.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var index = require('./index-DUl1Kp3_.js');
+
+const datetimePickerCss = ":host{display:block;background-color:var(--theme-menu--background);border-radius:4px;position:relative;width:-moz-min-content;width:min-content}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .no-padding{padding:0}:host ix-col{display:flex;flex-direction:column;padding:0}:host .flex{display:flex;justify-content:center;flex-direction:column}@media (min-width: 576px){:host{min-width:-moz-max-content;min-width:max-content}:host .btn-select-date-container{display:inline-flex;flex-grow:1}:host .btn-select-date-container ix-button{margin-left:auto;margin-top:auto}:host .min-width{width:-moz-min-content;width:min-content}}:host .individual{box-shadow:none;border:none}:host .btn-select-date-container{padding:0 1rem 1rem}@media (max-width: 576px){:host .btn-select-date-container .btn-select-date{width:100%}}";
+
+const DatetimePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.timeChange = index.createEvent(this, "timeChange", 7);
+        this.dateChange = index.createEvent(this, "dateChange", 7);
+        this.dateSelect = index.createEvent(this, "dateSelect", 7);
+        /**
+         * If true a date-range can be selected (from/to).
+         */
+        this.range = true;
+        /**
+         * Show hour input
+         */
+        this.showHour = true;
+        /**
+         * Show minutes input
+         */
+        this.showMinutes = true;
+        /**
+         * Show seconds input
+         */
+        this.showSeconds = true;
+        /**
+         * Date format string.
+         * See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
+         *
+         * @since 1.1.0
+         */
+        this.dateFormat = 'yyyy/LL/dd';
+        /**
+         * Time format string.
+         * See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
+         *
+         * @since 1.1.0
+         */
+        this.timeFormat = 'HH:mm:ss';
+        /**
+         * Show time reference input
+         * Time reference is default aligned with @see {this.timeFormat}
+         *
+         * @since 1.1.0
+         */
+        this.showTimeReference = false;
+        /**
+         * Text of date select button
+         *
+         * @since 2.1.0
+         */
+        this.i18nDone = 'Done';
+        /**
+         * Top label of time picker
+         *
+         * @since 3.0.0
+         */
+        this.i18nTime = 'Time';
+        /**
+         * The index of which day to start the week on, based on the Locale#weekdays array.
+         * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.
+         *
+         * @since 2.1.0
+         */
+        this.weekStartIndex = 0;
+        /**
+         * Shows week numbers displayed on the left side of the date picker
+         *
+         * @since 3.0.0
+         */
+        this.showWeekNumbers = false;
+    }
+    async onDone() {
+        var _a, _b, _c, _d;
+        const date = await ((_a = this.datePickerElement) === null || _a === void 0 ? void 0 : _a.getCurrentDate());
+        const time = await ((_b = this.timePickerElement) === null || _b === void 0 ? void 0 : _b.getCurrentTime());
+        this.dateSelect.emit({
+            from: (_c = date === null || date === void 0 ? void 0 : date.from) !== null && _c !== void 0 ? _c : '',
+            to: (_d = date === null || date === void 0 ? void 0 : date.to) !== null && _d !== void 0 ? _d : '',
+            time: time !== null && time !== void 0 ? time : '',
+        });
+    }
+    async onDateChange(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const { detail: date } = event;
+        this.dateChange.emit(date);
+    }
+    async onTimeChange(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const { detail: time } = event;
+        this.timeChange.emit(time);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'dd665870ff9bffac05640617ded60ca70bfb4060' }, index.h("ix-layout-grid", { key: 'b67a7dfbfad4383ece3a69c6da13c2fd76a48d60', class: "no-padding" }, index.h("ix-row", { key: '7e5f0d44bdb53dd28ceb5d2389f389d582d2a7d4' }, index.h("ix-col", { key: 'aa9c25a9dc54da2d99f486c127980105287bfb0c' }, index.h("ix-date-picker", { key: '0627d2e1c77a29fec14cc79fea96945626881313', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale, showWeekNumbers: this.showWeekNumbers })), index.h("ix-col", { key: '86804434e7b28a88011f93a37f33ed01cc9699d7' }, index.h("ix-time-picker", { key: 'b68dd97d4d0fbbdc1e52f72c27eb975f52a60402', class: "min-width", ref: (ref) => (this.timePickerElement = ref), standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, textTime: this.i18nTime, time: this.time }), index.h("div", { key: 'd2d929c1c7bcca8326d2b7d1ba94ffb1be7f5b39', class: "btn-select-date-container" }, index.h("ix-button", { key: '5052d32b58dfaafb5e5f0038df5ea8aa3c1752e3', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))))));
+    }
+};
+DatetimePicker.style = datetimePickerCss;
+
+exports.ix_datetime_picker = DatetimePicker;
+//# sourceMappingURL=ix-datetime-picker.entry.cjs.js.map
+
+//# sourceMappingURL=ix-datetime-picker.cjs.entry.js.map

package/dist/cjs/ix-datetime-picker.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-datetime-picker.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/datetime-picker/datetime-picker.scss?tag=ix-datetime-picker&encapsulation=shadow","src/components/datetime-picker/datetime-picker.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  background-color: var(--theme-menu--background);\n  border-radius: 4px;\n  position: relative;\n  width: min-content;\n\n  .no-padding {\n    padding: 0;\n  }\n\n  ix-col {\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n  }\n\n  @media (min-width: 576px) {\n    min-width: max-content;\n\n    .btn-select-date-container {\n      display: inline-flex;\n      flex-grow: 1;\n\n      ix-button {\n        margin-left: auto;\n        margin-top: auto;\n      }\n    }\n\n    .min-width {\n      width: min-content;\n    }\n  }\n\n  .individual {\n    box-shadow: none;\n    border: none;\n  }\n\n  .btn-select-date-container {\n    padding: 0 $default-space $default-space;\n\n    @media (max-width: 576px) {\n      & .btn-select-date {\n        width: 100%;\n      }\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { DateChangeEvent } from '../date-picker/date-picker';\nimport { IxDatePickerComponent } from '../date-picker/date-picker-component';\n\nexport type DateTimeSelectEvent = {\n  from?: string;\n  to?: string;\n  time: string;\n};\n\nexport type DateTimeDateChangeEvent =\n  | string\n  | Omit<DateTimeSelectEvent, 'time'>;\n\n@Component({\n  tag: 'ix-datetime-picker',\n  styleUrl: 'datetime-picker.scss',\n  shadow: true,\n})\nexport class DatetimePicker\n  implements Omit<IxDatePickerComponent, 'corners' | 'format'>\n{\n  /**\n   * If true a date-range can be selected (from/to).\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = true;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = true;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = true;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate?: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate?: string;\n\n  /**\n   * Date format string.\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n  /**\n   * Time format string.\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() timeFormat: string = 'HH:mm:ss';\n\n  /**\n   * The selected starting date. If the picker is not in range mode this is the selected date.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() from?: string;\n\n  /**\n   * The selected end date. If the the picker is not in range mode this property has no impact.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() to?: string;\n\n  /**\n   * Select time with format string\n   *\n   * @since 1.1.0\n   */\n  @Prop() time?: string;\n\n  /**\n   * Show time reference input\n   * Time reference is default aligned with @see {this.timeFormat}\n   *\n   * @since 1.1.0\n   */\n  @Prop() showTimeReference: boolean = false;\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference?: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 2.1.0\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone: string = 'Done';\n\n  /**\n   * Top label of time picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() i18nTime: string = 'Time';\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   *\n   * @since 2.1.0\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * Format of time string\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   *\n   * @since 2.1.0\n   */\n  @Prop() locale?: string;\n\n  /**\n   * Shows week numbers displayed on the left side of the date picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() showWeekNumbers = false;\n\n  /**\n\n   * Time change\n   *\n   * @since 1.1.0\n   */\n  @Event() timeChange!: EventEmitter<string>;\n\n  /**\n   * Date change\n   *\n   * @since 1.1.0\n   */\n  @Event() dateChange!: EventEmitter<DateTimeDateChangeEvent>;\n\n  /**\n   * Datetime selection event is fired after confirm button is pressed\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect!: EventEmitter<DateTimeSelectEvent>;\n\n  private datePickerElement?: HTMLIxDatePickerElement;\n  private timePickerElement?: HTMLIxTimePickerElement;\n\n  private async onDone() {\n    const date = await this.datePickerElement?.getCurrentDate();\n    const time = await this.timePickerElement?.getCurrentTime();\n\n    this.dateSelect.emit({\n      from: date?.from ?? '',\n      to: date?.to ?? '',\n      time: time ?? '',\n    });\n  }\n\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-layout-grid class=\"no-padding\">\n          <ix-row>\n            <ix-col>\n              <ix-date-picker\n                ref={(ref) => (this.datePickerElement = ref)}\n                corners=\"left\"\n                range={this.range}\n                onDateChange={(event) => this.onDateChange(event)}\n                from={this.from}\n                to={this.to}\n                format={this.dateFormat}\n                minDate={this.minDate}\n                maxDate={this.maxDate}\n                weekStartIndex={this.weekStartIndex}\n                standaloneAppearance={false}\n                locale={this.locale}\n                showWeekNumbers={this.showWeekNumbers}\n              ></ix-date-picker>\n            </ix-col>\n\n            <ix-col>\n              <ix-time-picker\n                class=\"min-width\"\n                ref={(ref) => (this.timePickerElement = ref)}\n                standaloneAppearance={false}\n                showHour={this.showHour}\n                showMinutes={this.showMinutes}\n                showSeconds={this.showSeconds}\n                onTimeChange={(event) => this.onTimeChange(event)}\n                format={this.timeFormat}\n                textTime={this.i18nTime}\n                time={this.time}\n              ></ix-time-picker>\n              <div class=\"btn-select-date-container\">\n                <ix-button\n                  class=\"btn-select-date\"\n                  onClick={() => this.onDone()}\n                >\n                  {this.i18nDone}\n                </ix-button>\n              </div>\n            </ix-col>\n          </ix-row>\n        </ix-layout-grid>\n      </Host>\n    );\n  }\n}\n"],"version":3}