@siemens/ix-docs 0.0.0-pr-2238-20251103095443 → 4.0.0

package/build/static/demo/v2/preview/html/assets/ix-css-grid.entry-DFdqszTd.js

@@ -0,0 +1,82 @@
+import { r as registerInstance, h, H as Host } from "./global-CTsFSACc.js";
+function templateBuilder(inputTemplate) {
+  let templateString = "";
+  inputTemplate.forEach((row) => {
+    templateString += '"';
+    templateString = row.reduce((pV, cV) => {
+      return `${pV} ${cV}`;
+    }, templateString);
+    templateString += '"\n';
+  });
+  return templateString;
+}
+const cssGridCss = ":host{display:grid;position:relative;row-gap:1.5rem;-moz-column-gap:1.5rem;column-gap:1.5rem}";
+const smQuery = "only screen and (max-width: 576px)";
+const mdQuery = "only screen and (max-width: 768px)";
+const lgQuery = "only screen and (max-width: 992px)";
+const mediaQueryCollection = [
+  { name: "sm", query: smQuery },
+  { name: "md", query: mdQuery },
+  { name: "lg", query: lgQuery }
+];
+const CssGrid = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.disposeMediaQueryListener = [];
+    this.mediaQueries = [];
+  }
+  componentWillRender() {
+    this.mediaQueries = mediaQueryCollection.map((query) => {
+      const mediaQuery = window.matchMedia(query.query);
+      const callback = () => {
+        this.applyTemplate();
+      };
+      this.disposeMediaQueryListener.push(callback);
+      mediaQuery.addEventListener("change", callback);
+      return Object.assign(Object.assign({}, query), { mediaQuery });
+    });
+    this.applyTemplate();
+  }
+  disconnectedCallback() {
+    this.mediaQueries.forEach((mq, index) => {
+      mq.mediaQuery.removeEventListener("change", this.disposeMediaQueryListener[index]);
+    });
+  }
+  findNextTemplate(type) {
+    if (!this.templates) {
+      return [];
+    }
+    const typeIndex = this.mediaQueries.findIndex((mq) => mq.name === type);
+    const nextTemplate = this.templates[this.mediaQueries[typeIndex + 1].name];
+    if (!nextTemplate) {
+      return this.findNextTemplate(this.mediaQueries[typeIndex + 1].name);
+    }
+    return nextTemplate;
+  }
+  applyTemplate() {
+    if (!this.templates) {
+      return;
+    }
+    let active = this.mediaQueries.find((mq) => mq.mediaQuery.matches);
+    if (!active) {
+      active = this.mediaQueries[this.mediaQueries.length - 1];
+    }
+    const template = this.templates[active.name];
+    if (template) {
+      this.currentTemplate = template;
+    } else {
+      this.currentTemplate = this.findNextTemplate(active.name);
+    }
+  }
+  render() {
+    const style = {};
+    if (this.currentTemplate && this.currentTemplate.length !== 0) {
+      style["grid-template-areas"] = templateBuilder(this.currentTemplate);
+    }
+    return h(Host, { key: "470c3da8301e7d99e603b78cfd9c2883e4801c76", style }, h("slot", { key: "64f7e86981ba37aeb20223bd672bc1190dba4619" }));
+  }
+};
+CssGrid.style = cssGridCss;
+export {
+  CssGrid as ix_css_grid
+};

package/build/static/demo/v2/preview/html/assets/ix-custom-field.entry-DDzDRFN8.js

@@ -0,0 +1,44 @@
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-CTsFSACc.js";
+import { H as HookValidationLifecycle } from "./validation-D_dk-JqT-CRNNydA9.js";
+const customFieldCss = ":host{display:block;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}";
+var __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 CustomField = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.required = false;
+    this.isInvalid = false;
+    this.isValid = false;
+    this.isInfo = false;
+    this.isWarning = false;
+  }
+  updateValidationState({ isInvalid, isValid, isInfo, isWarning }) {
+    this.isInvalid = isInvalid;
+    this.isValid = isValid;
+    this.isInfo = isInfo;
+    this.isWarning = isWarning;
+  }
+  render() {
+    return h(Host, { key: "732dae3e5ba3f37b5eac745ce48338cae5397d9e" }, h("ix-field-wrapper", { key: "5df555252c2de619f3dd5daa082632695a88e3f6", label: this.label, helperText: this.helperText, infoText: this.infoText, warningText: this.warningText, invalidText: this.invalidText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, required: this.required }, h("slot", { key: "81d169fce11d76b04876eb3483909bf163c44370" })));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+__decorate([
+  HookValidationLifecycle({
+    includeChildren: true
+  })
+], CustomField.prototype, "updateValidationState", null);
+CustomField.style = customFieldCss;
+export {
+  CustomField as ix_custom_field
+};

package/build/static/demo/v2/preview/html/assets/ix-date-dropdown.entry-CPnMTXQR.js

@@ -0,0 +1,170 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from "./global-CTsFSACc.js";
+import { D as DateTime } from "./datetime-bDicGJUN-Rk09H-45.js";
+import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
+import { o as iconHistory } from "./index-8HpPmDK_-DinFJk0z.js";
+const dateDropdownCss = ":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}@media (max-width: 48em){:host .min-width{width:-moz-min-content;width:min-content}}@media (min-width: 48em){:host .border-right{border-right:var(--theme-x-weak-bdr-2)}}:host ix-button{width:100%}:host .max-height{max-height:-moz-max-content;max-height:max-content}:host .no-margin{margin:0;padding:0}:host .pull-right{float:right;padding:0 1rem 0.75rem 1rem}";
+const DateDropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.dateRangeChange = createEvent(this, "dateRangeChange", 7);
+    this.disabled = false;
+    this.format = "yyyy/LL/dd";
+    this.singleSelection = false;
+    this.from = "";
+    this.to = "";
+    this.minDate = "";
+    this.maxDate = "";
+    this.dateRangeId = "custom";
+    this.variant = "primary";
+    this.loading = false;
+    this.showWeekNumbers = false;
+    this.customRangeDisabled = false;
+    this.dateRangeOptions = [];
+    this.weekStartIndex = 0;
+    this.i18nCustomItem = "Custom...";
+    this.i18nDone = "Done";
+    this.i18nNoRange = "No range set";
+    this.today = DateTime.now().toISO();
+    this.selectedDateRangeId = "";
+    this.triggerRef = makeRef();
+    this.datePickerTouched = false;
+  }
+  onDateRangeIdChange() {
+    this.onRangeListSelect(this.dateRangeId);
+    this.updateCurrentDate();
+    this.setDateRangeSelection(this.dateRangeId);
+    if (!this.currentRangeValue) {
+      return;
+    }
+    this.onDateSelect({
+      from: this.currentRangeValue.from,
+      to: this.currentRangeValue.to,
+      id: this.currentRangeValue.id
+    });
+  }
+  onDateRangeOptionsChange() {
+    this.initialize();
+    this.onDateRangeIdChange();
+  }
+  onDisabledChange() {
+    if (this.disabled) {
+      this.closeDropdown();
+    }
+  }
+  componentWillLoad() {
+    this.initialize();
+    this.setDateRangeSelection(this.dateRangeId);
+  }
+  /**
+   * Retrieves the currently selected date range from the component.
+   * This method returns the selected date range as a `DateChangeEvent` object.
+   */
+  async getDateRange() {
+    return this.currentRangeValue || { id: "", from: "", to: "" };
+  }
+  initialize() {
+    const isCustomRange = this.dateRangeId === "custom" || !this.dateRangeId && !!this.from && !!this.to;
+    if (isCustomRange && !this.customRangeDisabled) {
+      this.selectedDateRangeId = "custom";
+      this.updateCurrentDate();
+      return;
+    }
+    const isValidConfiguration = !isCustomRange && !this.from;
+    if (!isValidConfiguration) {
+      console.warn('"from" and "range-date-id" is provided this is an invalid combination. Using "custom".');
+      this.selectedDateRangeId = "custom";
+      this.updateCurrentDate();
+      return;
+    }
+  }
+  updateCurrentDate() {
+    this.currentRangeValue = {
+      id: this.selectedDateRangeId,
+      from: this.from,
+      to: this.to
+    };
+  }
+  onDateSelect(rangeValue, preserveDropdown = true) {
+    this.dateRangeChange.emit(rangeValue);
+    if (preserveDropdown) {
+      this.closeDropdown();
+    }
+    this.datePickerTouched = false;
+  }
+  onRangeListSelect(id) {
+    if (this.setDateRangeSelection(id) && this.currentRangeValue) {
+      this.onDateSelect(this.currentRangeValue);
+    }
+  }
+  setDateRangeSelection(id) {
+    this.selectedDateRangeId = id;
+    const option = this.dateRangeOptions.find((range) => range.id === id);
+    if (option) {
+      this.currentRangeValue = option;
+    }
+    return option;
+  }
+  closeDropdown() {
+    const dropdown = this.hostElement.shadowRoot.querySelector("ix-dropdown");
+    if (dropdown) {
+      dropdown.show = false;
+    }
+  }
+  getButtonLabel() {
+    var _a, _b;
+    if (this.selectedDateRangeId === "custom" && ((_a = this.currentRangeValue) === null || _a === void 0 ? void 0 : _a.from)) {
+      let range = this.currentRangeValue.from;
+      if (this.currentRangeValue.to) {
+        range += ` - ${this.currentRangeValue.to}`;
+      }
+      return range;
+    }
+    if (!this.selectedDateRangeId) {
+      return this.i18nNoRange;
+    }
+    if (!this.dateRangeOptions || ((_b = this.dateRangeOptions) === null || _b === void 0 ? void 0 : _b.length) === 0) {
+      return this.i18nNoRange;
+    }
+    const option = this.dateRangeOptions.find((option2) => option2.id === this.selectedDateRangeId);
+    if (!option) {
+      console.error(`Cannot find range option with id ${this.selectedDateRangeId}`);
+      return this.i18nNoRange;
+    }
+    return option.label;
+  }
+  render() {
+    var _a, _b, _c;
+    return h(Host, { key: "2cad55fd1448a2a553abb8bdf50f9245d2cc71bf" }, h("ix-button", { key: "77bd4e5f89d500b0323c5a2771cb2268601a87d3", "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ariaLabel: this.ariaLabelDropdownButton }, this.getButtonLabel()), h("ix-dropdown", { key: "e1108d1cdac327961e3147d10f380f8d9850449c", "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", onShowChanged: ({ detail: show }) => {
+      if (!show && this.selectedDateRangeId === "custom" && this.datePickerTouched && this.currentRangeValue) {
+        this.onDateSelect(this.currentRangeValue);
+      }
+    } }, h("ix-layout-grid", { key: "fd7ece26cbcda9da063b1832ca7c010fd508ae8b", noMargin: true }, h("ix-row", { key: "8854518f7534f9c52be1d74373c8a6d822983bca" }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && h("ix-col", { key: "8e7e4d96a0e91d91cee20f961b37da7645e0a28e", class: {
+      "no-margin": true,
+      "border-right": this.selectedDateRangeId === "custom"
+    } }, this.dateRangeOptions.map((dateRangeOption) => h("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id })), h("div", { key: "f9e7879a9f2e00c5bbcd7ab454cf491345a2f1ee", hidden: this.customRangeDisabled }, h("ix-dropdown-item", { key: "e373366109b1ac41af77fc4fcab8aeb4a5cf7a29", label: this.i18nCustomItem, checked: this.selectedDateRangeId === "custom", onClick: () => this.onRangeListSelect("custom") }))), h("ix-col", { key: "4e4ad3072863235f5dda814f24811e982f407c9b", class: "no-margin" }, this.selectedDateRangeId === "custom" && h(Fragment, { key: "a9c540a66333322c54cf7814231f6213806b86db" }, h("ix-date-picker", { key: "7e59d29e3a49bee9098879b51b23d9c6fbec5c6b", embedded: true, locale: this.locale, onDateChange: (e) => {
+      e.stopPropagation();
+      this.currentRangeValue = Object.assign(Object.assign({}, e.detail), { id: "custom" });
+      this.datePickerTouched = true;
+    }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, singleSelection: this.singleSelection, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), h("div", { key: "837f09d7b578640927e904f4adc2aef7fda7e65e", class: "pull-right" }, h("ix-button", { key: "09e9fbdf94d44bc52832d6787206aaded06a3aeb", onClick: () => {
+      if (this.currentRangeValue) {
+        this.onDateSelect(this.currentRangeValue);
+      }
+    } }, this.i18nDone))))))));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "dateRangeId": ["onDateRangeIdChange"],
+      "to": ["onDateRangeIdChange"],
+      "from": ["onDateRangeIdChange"],
+      "dateRangeOptions": ["onDateRangeOptionsChange"],
+      "disabled": ["onDisabledChange"]
+    };
+  }
+};
+DateDropdown.style = dateDropdownCss;
+export {
+  DateDropdown as ix_date_dropdown
+};

package/build/static/demo/v2/preview/html/assets/ix-date-input.entry-DGYKruVG.js

@@ -0,0 +1,228 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-CTsFSACc.js";
+import { p as iconCalendar } from "./index-8HpPmDK_-DinFJk0z.js";
+import { D as DateTime } from "./datetime-bDicGJUN-Rk09H-45.js";
+import { a as addDisposableChangesAndVisibilityObservers, b as adjustPaddingForStartAndEnd, S as SlotEnd, c as SlotStart } from "./input.util-VHrSuCP7-Be3hd2n8.js";
+import { c as createClassMutationObserver, H as HookValidationLifecycle } from "./validation-D_dk-JqT-CRNNydA9.js";
+import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
+import { h as handleIconClick, o as openDropdown, c as closeDropdown, a as createValidityState } from "./picker-input.util-D1uMJUKN-o8S09pI3.js";
+import "./anime.esm-DhE1t8Qh-B6Ygv72Z.js";
+import "./animation-C5MWUgDN-BXCJNYHu.js";
+import "./a11y-Bb7pDeaQ-DNI84lDX.js";
+import "./mutation-observer-CX81WQtk-DFcmhOTk.js";
+import "./rwd.util-pXYAoEyc-B7dE3uhl.js";
+import "./dropdown-controller-D3K9vmFp-CeqyAJWH.js";
+const dateInputCss = '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: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{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: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]){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]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):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]):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{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]):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{}: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: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{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])) input:hover{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])) 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{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])) 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{}: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}';
+var __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) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "valueChange", 6);
+    this.validityStateChange = createEvent(this, "validityStateChange", 7);
+    this.ixFocus = createEvent(this, "ixFocus", 7);
+    this.ixBlur = 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;
+    }
+    this.value = "";
+    this.minDate = "";
+    this.maxDate = "";
+    this.format = "yyyy/LL/dd";
+    this.readonly = false;
+    this.disabled = false;
+    this.i18nErrorDateUnparsable = "Date is not valid";
+    this.showWeekNumbers = false;
+    this.weekStartIndex = 0;
+    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();
+    this.slotEndRef = makeRef();
+    this.datepickerRef = makeRef();
+    this.inputElementRef = makeRef();
+    this.dropdownElementRef = makeRef();
+    this.touched = false;
+  }
+  watchValuePropHandler(newValue) {
+    this.onInput(newValue);
+  }
+  updateFormInternalValue(value) {
+    if (value) {
+      this.formInternals.setFormValue(value);
+    } else {
+      this.formInternals.setFormValue(null);
+    }
+    this.value = value;
+  }
+  connectedCallback() {
+    this.classObserver = createClassMutationObserver(this.hostElement, () => this.checkClassList());
+    this.disposableChangesAndVisibilityObservers = 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() {
+    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.fromFormat(value, this.format);
+    const minDate = DateTime.fromFormat(this.minDate, this.format);
+    const maxDate = DateTime.fromFormat(this.maxDate, this.format);
+    this.isInputInvalid = !date.isValid || date < minDate || date > maxDate;
+    if (this.isInputInvalid) {
+      this.invalidReason = date.invalidReason || void 0;
+      this.from = void 0;
+    } else {
+      this.updateFormInternalValue(value);
+      this.closeDropdown();
+    }
+    this.valueChange.emit(value);
+  }
+  onCalenderClick(event) {
+    handleIconClick(event, this.show, () => this.openDropdown(), this.inputElementRef);
+  }
+  async openDropdown() {
+    return openDropdown(this.dropdownElementRef);
+  }
+  async closeDropdown() {
+    return closeDropdown(this.dropdownElementRef);
+  }
+  checkClassList() {
+    this.isInvalid = this.hostElement.classList.contains("ix-invalid");
+  }
+  renderInput() {
+    var _a;
+    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, readOnly: this.readonly, readonly: this.readonly, required: this.required, ref: this.inputElementRef, type: "text", value: (_a = this.value) !== null && _a !== void 0 ? _a : "", placeholder: this.placeholder, name: this.name, 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;
+    } }), h(SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { "data-testid": "open-calendar", class: { "calendar-hidden": this.disabled || this.readonly }, variant: "subtle-tertiary", icon: iconCalendar, onClick: (event) => this.onCalenderClick(event), "aria-label": this.ariaLabelCalendarButton })));
+  }
+  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(createValidityState(this.isInputInvalid, !!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 h(Host, { key: "33f5063a7f848dfe2666c0c03420c577e29da00c", class: {
+      disabled: this.disabled,
+      readonly: this.readonly
+    } }, h("ix-field-wrapper", { key: "703e6fc7546f7fb0087ef593f365b10c6b30eb2b", label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, 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()), h("ix-dropdown", { key: "1bbe34f940ebe260e73f145be770f624a023644e", "data-testid": "date-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
+      this.show = event.detail;
+    } }, h("ix-date-picker", { key: "c9b60191ec638e2aacef51bf9973622dfbce5424", ref: this.datepickerRef, format: this.format, locale: this.locale, singleSelection: true, from: (_a = this.from) !== null && _a !== void 0 ? _a : "", minDate: this.minDate, maxDate: this.maxDate, onDateChange: (event) => {
+      const { from } = event.detail;
+      this.onInput(from);
+    }, showWeekNumbers: this.showWeekNumbers, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, embedded: true })));
+  }
+  static get formAssociated() {
+    return true;
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "value": ["watchValuePropHandler", "watchValue"],
+      "isInputInvalid": ["onInputValidationChange"]
+    };
+  }
+};
+__decorate([
+  HookValidationLifecycle()
+], DateInput.prototype, "hookValidationLifecycle", null);
+DateInput.style = dateInputCss;
+export {
+  DateInput as ix_date_input
+};

package/build/static/demo/v2/preview/html/assets/ix-date-time-card.entry-CupDlroM.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, h, H as Host } from "./global-CTsFSACc.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: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}:host .card .content--time-picker{padding:0 1rem}:host .card .footer-container{width:100%}:host .card .footer-container .footer{padding:1rem}";
+const DateTimeCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.timePickerAppearance = false;
+    this.hideHeader = false;
+    this.hasFooter = false;
+    this.corners = "rounded";
+  }
+  cardClasses() {
+    return {
+      card: true,
+      standaloneAppearance: this.embedded === false,
+      rounded: this.corners === "rounded",
+      left: this.corners === "left",
+      right: this.corners === "right",
+      straight: this.corners === "straight"
+    };
+  }
+  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: {
+      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" })))));
+  }
+};
+DateTimeCard.style = dateTimeCardCss;
+export {
+  DateTimeCard as ix_date_time_card
+};

package/build/static/demo/v2/preview/html/assets/ix-datetime-picker.entry-DGipqkTm.js

@@ -0,0 +1,47 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from "./global-CTsFSACc.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{}: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 ix-layout-grid{border-radius:0.25rem;box-shadow:var(--theme-shadow-4)}:host ix-time-picker{width:100%}: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 ix-time-picker{width:initial}}: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) {
+    registerInstance(this, hostRef);
+    this.timeChange = createEvent(this, "timeChange", 7);
+    this.dateChange = createEvent(this, "dateChange", 7);
+    this.dateSelect = createEvent(this, "dateSelect", 7);
+    this.singleSelection = false;
+    this.dateFormat = "yyyy/LL/dd";
+    this.timeFormat = "HH:mm:ss";
+    this.showTimeReference = false;
+    this.i18nDone = "Done";
+    this.i18nTime = "Time";
+    this.weekStartIndex = 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 h(Host, { key: "2b4812deec9408836a8187c3a520cd69b846e935" }, h("ix-layout-grid", { key: "610fad916eb544d6687bcbfb3543b926f7521b9e", class: "no-padding" }, h("ix-row", { key: "e3aacceefb73ee04f1887da04d0b5e339daba649" }, h("ix-col", { key: "64b8c1c44a131fd546d54197031664b3c8270c28" }, h("ix-date-picker", { key: "926ca6fe6e4f17e80c83987598b374137a623a10", ref: (ref) => this.datePickerElement = ref, corners: "left", singleSelection: this.singleSelection, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, embedded: true, locale: this.locale, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton })), h("ix-col", { key: "d27915a37d4d47bd11a066038adf59372f345296" }, h("ix-time-picker", { key: "bc70ef23493d0c501be37d4425be5021c211e53b", class: "min-width", ref: (ref) => this.timePickerElement = ref, embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }), h("div", { key: "75f619c34b11412349017bed0013b41f7f947033", class: "btn-select-date-container" }, h("ix-button", { key: "dc9602b6ed9e4406cb8ffee0168d41c7cc8d9763", class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone))))));
+  }
+};
+DatetimePicker.style = datetimePickerCss;
+export {
+  DatetimePicker as ix_datetime_picker
+};

package/build/static/demo/v2/preview/html/assets/ix-divider.entry-DNIBjjXr.js

@@ -0,0 +1,14 @@
+import { r as registerInstance, h, H as Host } from "./global-CTsFSACc.js";
+const dividerCss = ":host{display:block;position:relative;width:100%;border-bottom:0.0625rem solid var(--theme-color-x-weak-bdr);margin:0.25rem 0px}";
+const Divider = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h(Host, { key: "265222b022fa8d13e4f07e6fe7e19abc7ae2b6c0" });
+  }
+};
+Divider.style = dividerCss;
+export {
+  Divider as ix_divider
+};