@siemens/ix-docs 4.3.0 → 4.4.0

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

@@ -0,0 +1,82 @@
+import { r as registerInstance, h, H as Host } from "./global-7ZbTfMw3.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-DvGSJggv.js

@@ -0,0 +1,44 @@
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { H as HookValidationLifecycle } from "./validation-CTBekLDe-sG9H3Ujv.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-Bt709rSL.js

@@ -0,0 +1,181 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { o as iconHistory } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { D as DateTime } from "./datetime-D1WplX1z-grPSvmS5.js";
+import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.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.enableTopLayer = false;
+    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: "34b878eb8221b6c13f235d1b42ec63d3b6dce25c" }, h("ix-button", { key: "6f442e0178a7aabdf35321780d95414ab80af0cb", "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ariaLabelButton: this.ariaLabelDropdownButton }, this.getButtonLabel()), h("ix-dropdown", { key: "13e442c5143981a0436675ce43541a6a48f6e597", "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", enableTopLayer: this.enableTopLayer, onShowChanged: ({ detail: show }) => {
+      if (!show && this.selectedDateRangeId === "custom" && this.datePickerTouched && this.currentRangeValue) {
+        this.onDateSelect(this.currentRangeValue);
+      }
+    } }, h("ix-layout-grid", { key: "49291819c2c01fce81097c562651fddbd0e97c79", noMargin: true }, h("ix-row", { key: "94e2c60aef9145b53d522359712ba589cbfa927f" }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && h("ix-col", { key: "1c1b7ad6422fb90575d4296f47cabfdc68d0e8cc", 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: "fb98566476232ec358a720a96eb0df980d7ee415", hidden: this.customRangeDisabled }, h("ix-dropdown-item", { key: "366f32a5f783616fc89b33e813d9641822c493a0", label: this.i18nCustomItem, checked: this.selectedDateRangeId === "custom", onClick: () => this.onRangeListSelect("custom") }))), h("ix-col", { key: "d4fa12da77f51f05146fbebc123881df059f4d45", class: "no-margin" }, this.selectedDateRangeId === "custom" && h(Fragment, { key: "89266fc7d1998258fe343694402b95a6a1242f50" }, h("ix-date-picker", { key: "8a98c0ad64816ec791215762874c0f3b36ddf41c", 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: "bc7248eefd41cec82a1b5098ddb02e15b4c56898", class: "pull-right" }, h("ix-button", { key: "d9a0d55379527f733c80627d3f16c5f22704688f", onClick: () => {
+      if (this.currentRangeValue) {
+        this.onDateSelect(this.currentRangeValue);
+      }
+    } }, this.i18nDone))))))));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "dateRangeId": [{
+        "onDateRangeIdChange": 0
+      }],
+      "to": [{
+        "onDateRangeIdChange": 0
+      }],
+      "from": [{
+        "onDateRangeIdChange": 0
+      }],
+      "dateRangeOptions": [{
+        "onDateRangeOptionsChange": 0
+      }],
+      "disabled": [{
+        "onDisabledChange": 0
+      }]
+    };
+  }
+};
+DateDropdown.style = dateDropdownCss();
+export {
+  DateDropdown as ix_date_dropdown
+};

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

@@ -0,0 +1,253 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { p as iconCalendar } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { D as DateTime } from "./datetime-D1WplX1z-grPSvmS5.js";
+import { c as createPickerValidityStateTracker, a as addDisposableChangesAndVisibilityObservers, b as adjustPaddingForStartAndEnd, o as onEnterKeyChangeEmit, h as handleSubmitOnEnterKeydown, S as SlotEnd, d as onInputBlurWithChange, e as SlotStart, f as emitPickerValidityState } from "./input.fc-C1ytwpkt-bTPpCuNQ.js";
+import { c as createClassMutationObserver, g as getValidationText, H as HookValidationLifecycle } from "./validation-CTBekLDe-sG9H3Ujv.js";
+import { h as handleIconClick, o as openDropdown, c as closeDropdown, a as createValidityState } from "./picker-input.util-D1uMJUKN-o8S09pI3.js";
+import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
+import "./anime.esm-DhE1t8Qh-cS95-bBh.js";
+import "./animation-BLaucX4x-BWLd_Wig.js";
+import "./a11y-DAzBNVe7-CO1Uj69l.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: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:calc(var(--theme-input--border-thickness) + 0.125rem)}: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 .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}`;
+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);
+    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;
+    }
+    this.value = "";
+    this.minDate = "";
+    this.maxDate = "";
+    this.format = "yyyy/LL/dd";
+    this.ariaLabelCalendarButton = "Open calendar";
+    this.readonly = false;
+    this.disabled = false;
+    this.i18nErrorDateUnparsable = "Date is not valid";
+    this.showWeekNumbers = false;
+    this.weekStartIndex = 0;
+    this.ariaLabelPreviousMonthButton = "Previous month";
+    this.ariaLabelNextMonthButton = "Next month";
+    this.suppressSubmitOnEnter = false;
+    this.textAlignment = "start";
+    this.enableTopLayer = false;
+    this.show = false;
+    this.from = null;
+    this.isInputInvalid = false;
+    this.isInvalid = false;
+    this.isValid = false;
+    this.isInfo = false;
+    this.isWarning = false;
+    this.focus = false;
+    this.slotStartRef = makeRef();
+    this.slotEndRef = makeRef();
+    this.datepickerRef = makeRef();
+    this.inputElementRef = makeRef();
+    this.dropdownElementRef = makeRef();
+    this.touched = false;
+    this.validityTracker = createPickerValidityStateTracker();
+  }
+  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) {
+    var _a;
+    this.value = value;
+    if (!value) {
+      this.isInputInvalid = false;
+      this.invalidReason = void 0;
+      this.emitValidityStateChangeIfChanged();
+      this.updateFormInternalValue(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 = (_a = date.invalidReason) !== null && _a !== void 0 ? _a : void 0;
+      this.from = void 0;
+    } else {
+      this.updateFormInternalValue(value);
+      this.closeDropdown();
+    }
+    this.emitValidityStateChangeIfChanged();
+    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");
+  }
+  handleInputKeyDown(event) {
+    onEnterKeyChangeEmit(event, this, this.value);
+    handleSubmitOnEnterKeydown(event, this.suppressSubmitOnEnter, this.formInternals.form);
+  }
+  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.initialValue = this.value;
+      this.openDropdown();
+      this.ixFocus.emit();
+    }, onBlur: () => {
+      onInputBlurWithChange(this, this.inputElementRef.current, this.value);
+      this.touched = true;
+      this.emitValidityStateChangeIfChanged();
+    }, onKeyDown: (event) => this.handleInputKeyDown(event), style: {
+      textAlign: this.textAlignment
+    } }), 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", size: "16", 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;
+  }
+  emitValidityStateChangeIfChanged() {
+    return emitPickerValidityState(this);
+  }
+  /** @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 = getValidationText(this.isInputInvalid, this.invalidText, this.i18nErrorDateUnparsable);
+    return h(Host, { key: "a188d09b1e24447e3fbc5a7a09c6e34042548a8c", class: {
+      disabled: this.disabled,
+      readonly: this.readonly
+    } }, h("ix-field-wrapper", { key: "c50fde9b3aee7a2645a70fd3bb090471f633d6a9", 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: "7a95a993e629b158905a32c1538e96a2d6275799", "data-testid": "date-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
+      this.show = event.detail;
+    } }, h("ix-date-picker", { key: "7375826a1d3df9751f387422db39206bc4fd4837", 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);
+      if (this.initialValue !== from) {
+        this.ixChange.emit(from);
+        this.initialValue = 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": 0
+      }, {
+        "watchValue": 0
+      }]
+    };
+  }
+};
+__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-BbuiNfpo.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, h, H as Host } from "./global-7ZbTfMw3.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 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
+};