@siemens/ix 4.4.0 → 5.0.0

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

@@ -1,25 +1,31 @@
-import { r as registerInstance, h, H as Host } from './index-BEPo7U1W.js';
+import { r as registerInstance, h, H as Host } from './index-Ca5WUunf.js';
 
-const dateTimeCardCss = () => `: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}: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:var(--theme-shadow-4);border-radius:0.25rem}: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.straight{border-radius:0}:host .card .header-container{width:100%}:host .card .header-container .header{padding:0.75rem 1rem;flex:0 1 auto}:host .card .separator{height:1px;background-color: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}:host .card .content--time-picker{padding:0 1rem}:host .card .footer-container{width:100%}:host .card .footer-container .footer{padding:1rem}`;
+const dateTimeCardCss = () => `: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}: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:var(--theme-shadow-4);border-radius:0.25rem}: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.straight{border-radius:0}:host .card .header-container{width:100%}:host .card .header-container .header{padding:0.75rem 1rem;flex:0 1 auto}:host .card .separator{height:1px;background-color: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}:host .card .content--time-picker{padding:0 1rem}:host .card .content--no-padding{padding:0}:host .card .footer-container{width:100%}:host .card .footer-container .footer{padding:1rem}`;
 
 const DateTimeCard = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /** Timepicker specific styling */
-        this.timePickerAppearance = false;
-        /**
-         * Hide header
-         */
-        this.hideHeader = false;
-        /**
-         * Display footer
-         */
-        this.hasFooter = false;
-        /**
-         * Set corners style
-         */
-        this.corners = 'rounded';
     }
+    /** @internal */
+    embedded;
+    /** Timepicker specific styling */
+    timePickerAppearance = false;
+    /**
+     * Hide header
+     */
+    hideHeader = false;
+    /**
+     * Display footer
+     */
+    hasFooter = false;
+    /**
+     * Set corners style
+     */
+    corners = 'rounded';
+    /**
+     * Remove content padding
+     */
+    noPadding = false;
     cardClasses() {
         return {
             card: true,
@@ -31,10 +37,11 @@ const DateTimeCard = class {
         };
     }
     render() {
-        return (h(Host, { key: 'e4b044b0076f79934f3e561dab684a9aa53ab8c2' }, h("div", { key: '91f00686e9000d71745bca5bb958a401fe265ed2', class: this.cardClasses() }, !this.hideHeader && (h("div", { key: '974c90cd1522069f3e10831b6cec9d80eefc7630', class: "header-container" }, h("div", { key: '64d22e413cf579b3831580040d0921f73e37cbed', class: "header" }, h("slot", { key: 'dadc035aa3e2aad17d16a0b7edb9c1aa83f5b64a', name: "header" })), h("div", { key: '14c6cffd8a0086835c42dca7e5a12a9c569ebc2f', class: "separator" }))), h("div", { key: 'e3150b66b51fd87e5cb62c620d9e46d21a3b9aed', class: {
+        return (h(Host, { key: '9a9b328c1d278112a8e210bdc37985dbe67d48fc' }, h("div", { key: 'bd95d23284c701589095190af6e7d197dec93700', class: this.cardClasses() }, !this.hideHeader && (h("div", { key: '42a727cd5e778e17e889011da459bf81f9242283', class: "header-container" }, h("div", { key: '46144e13fca52e580c252363e5e742d51436371f', class: "header" }, h("slot", { key: '7cad9585fdf33653186f46d22132cf6480356b20', name: "header" })), h("div", { key: '83a64b078b5902764bf08e5b002bcaa5f37d2ce9', class: "separator" }))), h("div", { key: '03ffcb6a96370bf556e57413fca28fad57b2c155', class: {
                 content: true,
                 'content--time-picker': this.timePickerAppearance,
-            } }, h("slot", { key: '6fe2bfb5676a992be3caa5fd134dcb5f595f3ae3' })), this.hasFooter && (h("div", { key: '2c2a1a534b8e71a472e3a7e0bca7e5187322a107', class: "footer-container" }, h("div", { key: '67713b28bbfda3298d8778db37f8ca84d72270f0', class: "separator" }), h("div", { key: '247a0ac8c8fe7ddfa7b2d05c0bd9a1671229469c', class: "footer" }, h("slot", { key: 'b1f5a9ace8a8c69eff1a954850cca8174619dcc8', name: "footer" })))))));
+                'content--no-padding': this.noPadding,
+            } }, h("slot", { key: '2cbfe2f27f5a449adf329a2872cddac1ba8b687d' })), this.hasFooter && (h("div", { key: '13c6595028d939e22eb01cb65190f51a304553a0', class: "footer-container" }, h("div", { key: '626e82bbb3cdc612c8c0769fd98513da7f45968f', class: "separator" }), h("div", { key: '35e2bd253a846915d9fcd4adb1b1d78839614a4c', class: "footer" }, h("slot", { key: '597304726e19fbf3ac6eaa765d4944595cc07c5c', name: "footer" })))))));
     }
 };
 DateTimeCard.style = dateTimeCardCss();

package/dist/esm/ix-datetime-input.entry.js

@@ -0,0 +1,546 @@
+import { M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-Ca5WUunf.js';
+import { q as iconCalendar } from './index-Cl7fhG1I.js';
+import { D as DateTime } from './datetime-D1WplX1z.js';
+import { c as createPickerValidityStateTracker, h as handleSubmitOnEnterKeydown, e as emitPickerValidityState, a as addDisposableChangesAndVisibilityObservers, b as adjustPaddingForStartAndEnd, S as SlotEnd, f as onInputFocus, o as onInputBlurWithChange, d as SlotStart } from './input.fc-DjE-oOZc.js';
+import { g as getTimePickerConstraintBounds, i as isWithinTimePickerConstraints } from './time-picker-constraints-Bsg2RskF.js';
+import { I as InputPickerMixin, h as handleIconClick, o as openDropdown, c as closeDropdown, a as createValidityState } from './input-picker.mixin-Bo_sZpC4.js';
+import { m as makeRef } from './make-ref-Djkc69iv.js';
+import { g as getLuxonDateOnlyFormatMask, a as getLuxonTimeFormatMask } from './luxon-datetime-format-masks-CoQiziG8.js';
+import { D as DefaultMixins } from './component-Chfbghog.js';
+import { c as createClassMutationObserver, g as getValidationText, H as HookValidationLifecycle } from './validation-BT5aAuSO.js';
+import './a11y-B5k8YVR0.js';
+import './mutation-observer-CX81WQtk.js';
+import './rwd.util-JJddxCCh.js';
+import './anime.esm-DhE1t8Qh.js';
+import './animation-DNIQ2C1K.js';
+import './dropdown-controller-D6Wm2E-0.js';
+import './focus-utilities-DnaItyVQ.js';
+import './shadow-dom-BIe8Nw9M.js';
+import './index-XBTykBKS.js';
+
+const datetimeInputCss = () => `input{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);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}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:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--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:var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled)}input:disabled::-moz-placeholder,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,input.disabled::placeholder{color:transparent}textarea{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);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}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:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--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:var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled)}textarea:disabled::-moz-placeholder,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,textarea.disabled::placeholder{color:transparent}textarea{min-height:2rem;padding:calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness))}textarea:not([rows]){height:3.25rem}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]){background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--hover) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]){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]):not(.readonly):not([readonly]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}: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:var(--theme-input--border-thickness)}:host .end-container{right:0.25rem}: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:calc(0.5rem - 0.25rem)}:host .end-container ::slotted(ix-icon.size-24),:host .end-container ::slotted(ix-icon-button.btn-icon-16){margin-right:calc(0.25rem - 0.25rem)}:host .end-container ::slotted(ix-icon-button.btn-icon-32){margin-right:calc(0rem - 0.25rem)}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}:host .input-wrapper:hover input:not(:disabled):not(:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-wrapper:hover input:not(:disabled):not(:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host(.disabled){pointer-events:none}:host(.disabled) input,:host(.disabled) textarea{pointer-events:none}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input{background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) 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]):not(.readonly):not([readonly])) input:hover,:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) 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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}: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: 2025 Siemens AG
+ * SPDX-License-Identifier: MIT
+ */
+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 DatetimeInput = class extends Mixin(...DefaultMixins, InputPickerMixin) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange", 7);
+        this.validityStateChange = createEvent(this, "validityStateChange", 7);
+        this.ixFocus = createEvent(this, "ixFocus", 7);
+        this.ixBlur = createEvent(this, "ixBlur", 7);
+        this.ixChange = createEvent(this, "ixChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.formInternals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.formInternals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.formInternals;
+        }
+    }
+    get hostElement() { return getElement(this); }
+    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 openDropdown(this.dropdownElementRef);
+    }
+    async closeDropdown() {
+        return closeDropdown(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: '71e43042e770959dbc22198d9444e9ea7c6f17fc', class: {
+                disabled: this.disabled,
+                readonly: this.readonly,
+            } }, h("ix-field-wrapper", { key: '3da77d1b86370fd5cd75ecfb4ef3b23694ade8cb', 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: '3a5066da2b6fbd59a90ffe8a818b26a4a0631fa0', 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: '0960ed4b9e3a5f5b5f230de9f2bafad1ea84d6f5', 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 formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "watchValuePropHandler": 0
+            }],
+        "minTime": [{
+                "watchMinTimePropHandler": 0
+            }],
+        "maxTime": [{
+                "watchMaxTimePropHandler": 0
+            }],
+        "isInputInvalid": [{
+                "onInputValidationChange": 0
+            }]
+    }; }
+};
+__decorate([
+    HookValidationLifecycle()
+], DatetimeInput.prototype, "hookValidationLifecycle", null);
+DatetimeInput.style = datetimeInputCss();
+
+export { DatetimeInput as ix_datetime_input };