@siemens/ix-docs 4.4.0 → 5.0.0

package/build/static/demo/v2/preview/html/assets/ix-content-header.entry-BTl4-TKy.js

@@ -0,0 +1,42 @@
+import { a as registerInstance, c as createEvent, h, H as Host } from "./global-DjWMysHf.js";
+import { b as iconArrowLeft } from "./index-Cl7fhG1I-C77BCFLW.js";
+const contentHeaderCss = () => `:host{display:flex;flex-direction:row;align-items:flex-start;padding:0}:host .titleGroup{display:flex;flex-direction:column;flex:1 1 0;min-width:0;white-space:nowrap;margin-right:0.5rem}:host .titleGroup .titleOverflow{overflow:hidden;text-overflow:ellipsis}:host .titleGroup .headerTitleRow{display:flex}:host .titleGroup .headerTitleRow .headerSlot{display:inline-flex;margin-left:0.5rem}:host .titleGroup .secondary{padding:0.25rem 0}:host .subtitle{margin-top:-0.125rem}:host .backButton{margin-right:0.5rem}:host .buttons{flex:0 0 auto}`;
+const ContentHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.backButtonClick = createEvent(this, "backButtonClick", 7);
+  }
+  /**
+   * Variant of content header
+   */
+  variant = "primary";
+  /**
+   * Title of Header
+   */
+  headerTitle;
+  /**
+   * Subtitle of Header
+   */
+  headerSubtitle = void 0;
+  /**
+   * Display a back button
+   */
+  hasBackButton = false;
+  /**
+   * Triggered when back button is clicked
+   */
+  backButtonClick;
+  render() {
+    return h(Host, { key: "08d49655e0c6990b14505b590d2ba0e94a295db6" }, this.hasBackButton ? h("ix-icon-button", { class: "backButton", variant: "tertiary", icon: iconArrowLeft, onClick: () => this.backButtonClick.emit() }) : null, h("div", { key: "8afb44c00a90916824175200dd536e56eb949624", class: "titleGroup" }, h("div", { key: "2a27fa1f4b31d9114dfebc9a8aff5729f906b1c8", class: "headerTitleRow" }, h("ix-typography", { key: "d901bfeee7f8abc8e5007e53c21105f5c79b0a56", format: this.variant === "secondary" ? "h4" : "h3", class: {
+      secondary: this.variant === "secondary",
+      titleOverflow: true
+    } }, this.headerTitle), h("div", { key: "1a846985aeb4a94d9524d1666a271c9c145095a6", class: "headerSlot" }, h("slot", { key: "25543ed73b45c08a9b50912362376fb9fc1906cd", name: "header" }))), !!this.headerSubtitle && h("ix-typography", { key: "288fe9e598a20b6dac48f0a2024c094b6680dbb3", format: "h6", "text-color": "soft", class: {
+      subtitle: this.variant === "secondary",
+      titleOverflow: true
+    }, title: this.headerSubtitle }, this.headerSubtitle)), h("div", { key: "8e393c872c9332878140746709d4ec57cd3f2a8d", class: "buttons" }, h("slot", { key: "be658a281dd351bb609ef0f347da991288672fb7" })));
+  }
+};
+ContentHeader.style = contentHeaderCss();
+export {
+  ContentHeader as ix_content_header
+};

package/build/static/demo/v2/preview/html/assets/ix-content.entry-Bzo89JzA.js

@@ -0,0 +1,27 @@
+import { a as registerInstance, g as getElement, h, H as Host } from "./global-DjWMysHf.js";
+import { h as hasSlottedElements } from "./shadow-dom-BIe8Nw9M-DxOF84uP.js";
+const contentCss = () => `:host{display:flex;flex-direction:column;position:relative;padding:1.5rem 2rem 0.25rem 2rem;width:100%;height:100%;overflow:hidden}: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 .content{flex-grow:1;overflow:auto;position:relative}:host .content-header.slotted{margin-bottom:1rem}`;
+const Content = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  isContentHeaderSlotted = false;
+  get contentHeaderSlot() {
+    return this.hostElement.shadowRoot.querySelector(".content-header slot");
+  }
+  render() {
+    return h(Host, { key: "c55017944f9bae7571742eace9f6e7c741e736e3" }, h("div", { key: "42bb2691481a6e55ec4ad1f1e1e075e96cedd0df", class: {
+      "content-header": true,
+      slotted: this.isContentHeaderSlotted
+    } }, h("slot", { key: "ea93135ea0b4a1e7a20a159446280ceb24aa4b01", name: "header", onSlotchange: () => {
+      this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
+    } })), h("div", { key: "90c0076e390d2a7b9a5c7be22ba05fba1e2302bf", class: "content" }, h("slot", { key: "aff4024b33c30f527a951df5656d105847c87fe6" })));
+  }
+};
+Content.style = contentCss();
+export {
+  Content as ix_content
+};

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

@@ -0,0 +1,20 @@
+import { a as registerInstance, h, H as Host } from "./global-DjWMysHf.js";
+const cssGridItemCss = () => `:host{display:block;position:relative}:host ::slotted(*){height:100%;width:100%}`;
+const CssGridItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  /**
+   * Grid item name
+   */
+  itemName;
+  render() {
+    const style = {};
+    style["grid-area"] = this.itemName;
+    return h(Host, { key: "5b0d3b6ab2e0f7fc79378a854c60e3635e8ab692", style }, h("slot", { key: "fc224d72d60566ddb1ba52ae6457e7458a56cccf" }));
+  }
+};
+CssGridItem.style = cssGridItemCss();
+export {
+  CssGridItem as ix_css_grid_item
+};

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

@@ -0,0 +1,90 @@
+import { a as registerInstance, h, H as Host } from "./global-DjWMysHf.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);
+  }
+  /**
+   * Define css grid template
+   */
+  templates;
+  currentTemplate;
+  disposeMediaQueryListener = [];
+  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 {
+        ...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: "90eb8b6d89365b75ca151c8f8aa06e8c0ca8d8e9", style }, h("slot", { key: "bbaf70a779b756872793a86ae24e247909ef0b96" }));
+  }
+};
+CssGrid.style = cssGridCss();
+export {
+  CssGrid as ix_css_grid
+};

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

@@ -0,0 +1,76 @@
+import { a as registerInstance, g as getElement, h, H as Host } from "./global-DjWMysHf.js";
+import { H as HookValidationLifecycle } from "./validation-BT5aAuSO-CbQmWD6n.js";
+import "./index-XBTykBKS-D8xrYMLu.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);
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  /**
+   * A value is required or must be checked for the form to be submittable
+   */
+  required = false;
+  /**
+   * Label for the field component
+   */
+  label;
+  /**
+   * Show text below the field component which show additional information
+   */
+  helperText;
+  /**
+   * Info text for the field component
+   */
+  infoText;
+  /**
+   * Warning text for the field component
+   */
+  warningText;
+  /**
+   * Error text for the field component
+   */
+  invalidText;
+  /**
+   * Valid text for the field component
+   */
+  validText;
+  /**
+   * Show helper, info, warning, error and valid text as tooltip
+   */
+  showTextAsTooltip;
+  isInvalid = false;
+  isValid = false;
+  isInfo = false;
+  isWarning = false;
+  updateValidationState({ isInvalid, isValid, isInfo, isWarning }) {
+    this.isInvalid = isInvalid;
+    this.isValid = isValid;
+    this.isInfo = isInfo;
+    this.isWarning = isWarning;
+  }
+  render() {
+    return h(Host, { key: "58b6b1c90f21d49345286996f1089fb9f0f383f9" }, h("ix-field-wrapper", { key: "13f416719110d2ed029164837d67c01cf81e782e", 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: "94fa34d216ef723f2d8c5d685c359233eb10fb93" })));
+  }
+};
+__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-D8oKiAg5.js

@@ -0,0 +1,290 @@
+import { M as Mixin, a as registerInstance, c as createEvent, g as getElement, h, H as Host } from "./global-DjWMysHf.js";
+import { D as iconHistory } from "./index-Cl7fhG1I-C77BCFLW.js";
+import { D as DateTime } from "./datetime-D1WplX1z-grPSvmS5.js";
+import { D as DefaultMixins, h as hasKeyboardMode } from "./component-Chfbghog-DFMCI9TH.js";
+import { m as makeRef } from "./make-ref-Djkc69iv-BpP6uHEs.js";
+import { r as requestAnimationFrameNoNgZone } from "./requestAnimationFrame-BEuV0Xpe-CBtvTq-Q.js";
+import { B as BaseButton } from "./base-button-hppF0uUM-BayQ2Iat.js";
+import { b as a11yHostAttributes, a as a11yBoolean } from "./a11y-B5k8YVR0-BOSd6BQK.js";
+import { T as TRAP_FOCUS_EXCLUDE_ATTRIBUTE } from "./focus-trap-DDLHqzV2-Cft0_sds.js";
+import "./focus-utilities-DnaItyVQ-Degzwldb.js";
+import "./shadow-dom-BIe8Nw9M-DxOF84uP.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}:host .pull-right{position:relative;float:right;padding:1rem}:host .quick-selection{display:inline-flex;flex-direction:column;gap:0.25rem;border-right:var(--theme-x-weak-bdr-1);overflow:auto;padding:0.5rem}:host .quick-selection ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host .quick-selection *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host .quick-selection{}:host .quick-selection ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host .quick-selection{}:host .quick-selection ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host .quick-selection ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host .quick-selection{}:host .quick-selection ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host .quick-selection{}:host .quick-selection ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host .quick-selection ::-webkit-scrollbar-corner{display:none}:host .quick-selection .btn{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem;min-width:8rem;min-height:2rem;max-height:2rem;justify-content:flex-start}:host .quick-selection .btn:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .quick-selection .btn-subtle-tertiary{text-align:start;border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .quick-selection .btn-subtle-tertiary{background-color:var(--theme-btn-subtle-tertiary--background);color:var(--theme-btn-subtle-tertiary--color);--ix-button-color:var(--theme-btn-subtle-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-tertiary--border-color);border-style:solid}:host .quick-selection .btn-subtle-tertiary.selected{background-color:var(--theme-btn-subtle-tertiary--background--pressed);color:var(--theme-btn-subtle-tertiary--color--pressed)}:host .quick-selection .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .quick-selection .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):hover,:host .quick-selection .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-hover)}:host .quick-selection .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .quick-selection .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):active,:host .quick-selection .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-active)}:host .quick-selection .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .quick-selection .btn-subtle-tertiary:not(.disabled):not(:disabled):hover,:host .quick-selection .btn-subtle-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-tertiary--border-color--hover);background-color:var(--theme-btn-subtle-tertiary--background--hover);color:var(--theme-btn-subtle-tertiary--color--hover)}:host .quick-selection .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .quick-selection .btn-subtle-tertiary:not(.disabled):not(:disabled):active,:host .quick-selection .btn-subtle-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-subtle-tertiary--border-color--active);background-color:var(--theme-btn-subtle-tertiary--background--active);color:var(--theme-btn-subtle-tertiary--color--active)}:host .container{display:flex;flex-direction:row;height:25rem;max-height:25rem;flex-wrap:nowrap}:host .picker-wrapper{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}:host .picker-wrapper ix-date-picker{height:21rem}:host ix-dropdown{padding:0px}@media only screen and (max-width: 48em){:host .container{flex-direction:column;max-height:unset;height:unset}:host .quick-selection{max-height:12rem}}`;
+const DateDropdown = class extends Mixin(...DefaultMixins) {
+  constructor(hostRef) {
+    super();
+    registerInstance(this, hostRef);
+    this.dateRangeChange = createEvent(this, "dateRangeChange", 7);
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  /**
+   * Disable the button that opens the dropdown containing the date picker.
+   */
+  disabled = false;
+  /**
+   * Date format string.
+   * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+   */
+  format = "yyyy/LL/dd";
+  /**
+   * If true disables date range selection (from/to).
+   */
+  singleSelection = false;
+  /**
+   * Picker date. If the picker is in range mode this property is the start date.
+   * If set to `null` no default start date will be pre-selected.
+   *
+   * Format is based on `format`
+   */
+  from = "";
+  /**
+   * Picker date. If the picker is in range mode this property is the end date.
+   * If the picker is not in range mode leave this value `null`
+   *
+   * Format is based on `format`
+   */
+  to = "";
+  /**
+   * The earliest date that can be selected by the date picker.
+   * If not set there will be no restriction.
+   */
+  minDate = "";
+  /**
+   * The latest date that can be selected by the date picker.
+   * If not set there will be no restriction.
+   */
+  maxDate = "";
+  /**
+   * Used to set the initial select date range as well as the button name,
+   * if not set or no according date range label is found, nothing will be selected
+   */
+  dateRangeId = "custom";
+  /**
+   * Button variant
+   */
+  variant = "primary";
+  /**
+   * Loading button
+   */
+  loading = false;
+  /**
+   * Shows week numbers displayed on the left side of the date picker
+   *
+   * @since 3.0.0
+   */
+  showWeekNumbers = 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
+    });
+  }
+  /**
+   * An array of predefined date range options for the date picker.
+   * Each option is an object with a label describing the range and a function
+   * that returns the start and end dates of the range as a DateRangeOption object.
+   *
+   * Example format:
+   *   {
+   *     id: 'some unique id',
+   *     label: 'Name of the range',
+   *     from: undefined, to: '2023/03/29'
+   *   },
+   *   // ... other predefined date range options ...
+   */
+  dateRangeOptions = [];
+  onDateRangeOptionsChange() {
+    this.initialize();
+    this.onDateRangeIdChange();
+  }
+  /**
+   * Locale identifier (e.g. 'en' or 'de').
+   */
+  locale;
+  /**
+   * The index of which day to start the week on, based on the Locale#weekdays array.
+   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.
+   */
+  weekStartIndex = 0;
+  /**
+   * Text for the done button. Will be used for translation.
+   */
+  i18nDone = "Done";
+  /**
+   * Text for the done button. Will be used for translation.
+   */
+  i18nNoRange = "No range set";
+  /** @internal */
+  today = DateTime.now().toISO();
+  /**
+   * Enable Popover API rendering for dropdown.
+   *
+   * @default false
+   * @since 4.3.0
+   */
+  enableTopLayer = false;
+  /**
+   * EventEmitter for date range change events.
+   *
+   * This event is emitted when the date range changes within the component.
+   * The event payload contains information about the selected date range.
+   */
+  dateRangeChange;
+  selectedDateRangeId = "";
+  currentRangeValue;
+  show = false;
+  triggerRef = makeRef();
+  onDisabledChange() {
+    if (this.disabled) {
+      this.closeDropdown();
+    }
+  }
+  datePickerRef = makeRef();
+  inheritAriaAttributes = {};
+  componentWillLoad() {
+    this.initialize();
+    this.setDateRangeSelection(this.dateRangeId);
+    this.inheritAriaAttributes = a11yHostAttributes(this.hostElement);
+  }
+  /**
+   * 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.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) {
+    this.dateRangeChange.emit(rangeValue);
+  }
+  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) {
+      if (option.from && option?.from === this.currentRangeValue?.from) {
+        const formattedDate = DateTime.fromFormat(option.from, this.format);
+        this.datePickerRef.current?.updateSelectedYearMonth(formattedDate);
+      } else {
+        this.currentRangeValue = option;
+      }
+    }
+    return option;
+  }
+  closeDropdown() {
+    const dropdown = this.hostElement.shadowRoot.querySelector("ix-dropdown");
+    if (dropdown) {
+      dropdown.show = false;
+    }
+  }
+  getButtonLabel() {
+    if (this.currentRangeValue?.from) {
+      let range = this.currentRangeValue.from;
+      if (this.currentRangeValue.to === this.currentRangeValue.from) {
+        return range;
+      }
+      if (this.currentRangeValue.to) {
+        range += ` - ${this.currentRangeValue.to}`;
+      }
+      return range;
+    }
+    return this.i18nNoRange;
+  }
+  render() {
+    const ariaLabel = this.inheritAriaAttributes["aria-label"] || this.getButtonLabel();
+    return h(Host, { key: "04bd340613c20abbe3b836dab11637d7991fd295", onFocusout: (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (!relatedTarget) {
+        return;
+      }
+      this.closeDropdown();
+    }, role: "presentation" }, h("ix-button", { key: "a95f89b7d276e96aebd318e2d8ca100d113d599a", "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ...this.inheritAriaAttributes, "aria-haspopup": "true", "aria-expanded": a11yBoolean(this.show), "aria-controls": "date-dropdown", "aria-label": ariaLabel, [TRAP_FOCUS_EXCLUDE_ATTRIBUTE]: true }, this.getButtonLabel()), h("ix-dropdown", { key: "45614c12ee610cda3ddf8cbc740a0df76ed33cc0", focusTrapOptions: {
+      excludeElements: true,
+      trapFocusInShadowDom: true
+    }, focusHost: this.hostElement, id: "date-dropdown", "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, suppressOverflowBehavior: true, onShowChanged: async ({ detail: show }) => {
+      this.show = show;
+      if (!show && this.currentRangeValue) {
+        this.onDateSelect(this.currentRangeValue);
+      }
+      if (show && hasKeyboardMode()) {
+        requestAnimationFrameNoNgZone(() => {
+          const datePicker = this.datePickerRef.current;
+          datePicker?.focus();
+        });
+      }
+    } }, h("div", { key: "074b28feb93dea7482763f380870b0755a752419", class: "container" }, this.dateRangeOptions?.length > 1 && h("div", { key: "25983a11b1ac61f12b4bbd140871bae70b3a813f", class: {
+      "quick-selection": true,
+      "border-right": this.selectedDateRangeId === "custom"
+    } }, this.dateRangeOptions.map((dateRangeOption) => h(BaseButton, { disabled: false, iconOnly: false, iconOval: false, selected: false, loading: false, type: "button", variant: "subtle-tertiary", onClick: () => this.onRangeListSelect(dateRangeOption.id), ariaAttributes: {
+      "aria-label": `${dateRangeOption.label}: ${dateRangeOption.from} to ${dateRangeOption.to}`
+    } }, dateRangeOption.label))), h("div", { key: "1090e03e941d7a3914e3d4e3f3850bebe195f2ec", class: "picker-wrapper" }, h("ix-date-picker", { key: "fd864d0454c857db7016e3d2ed9322617fbc79eb", ref: this.datePickerRef, embedded: true, locale: this.locale, onDateChange: (e) => {
+      e.stopPropagation();
+      this.currentRangeValue = {
+        ...e.detail,
+        id: "custom"
+      };
+    }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, singleSelection: this.singleSelection, from: this.from || this.currentRangeValue?.from, to: this.to || this.currentRangeValue?.to, minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), h("div", { key: "bdd9ca166ed48d1e0599e5e9b0da38ac6f3c1b18", class: "pull-right" }, h("ix-button", { key: "3fd556de5401f53c83804665669c0c9f42ce6821", onClick: () => {
+      if (this.currentRangeValue) {
+        this.onDateSelect(this.currentRangeValue);
+        this.closeDropdown();
+      }
+    } }, this.i18nDone))))));
+  }
+  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
+};