@siemens/ix-docs 4.3.0 → 4.4.0

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

@@ -0,0 +1,49 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from "./global-7ZbTfMw3.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}:host .row-separator,:host .col-separator{border-bottom:0.0625rem solid var(--theme-datepicker-separator--background)}:host .col-separator{border-right:none}@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 .col-separator{border-right:0.0625rem solid var(--theme-datepicker-separator--background);border-bottom:none}}:host .individual{box-shadow:none;border:none}:host .btn-select-date-container{padding: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.ariaLabelPreviousMonthButton = "Previous month";
+    this.ariaLabelNextMonthButton = "Next month";
+    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: "b9d86c0b546ff3dd211233be90f45cf340904392" }, h("ix-layout-grid", { key: "70904c2a642e1365186ce7e7d4b9bf5adb79eefb", class: "no-padding" }, h("ix-row", { key: "434f29448c882e9699b36f5f6556a685d9c62b94", class: "row-separator" }, h("ix-col", { key: "869ff4df2ee82fd9d5e852b466b7a82f56dd5cf4", class: "col-separator" }, h("ix-date-picker", { key: "2f5de1e8d151e03d09c57c365a7cfa25e3c8beb1", 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: "118da04fff83d0c5980dddf257e9065b73d48e6e" }, h("ix-time-picker", { key: "93683737b572f841bc3b5e0158013cff8f0c0015", class: "min-width", ref: (ref) => this.timePickerElement = ref, embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), h("ix-row", { key: "d2b71237c70c8305ba5ccf7026d03e7b32445bae" }, h("ix-col", { key: "5da543ff42da3110b1cdfdd1690c0ccd5612e3de" }, h("div", { key: "1fc6d77082b8dd7469ab417a9837007b46efcdf0", class: "btn-select-date-container" }, h("ix-button", { key: "35678b604a1f84eeeea63d0566c3f51895956a1f", 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-miuSysZr.js

@@ -0,0 +1,14 @@
+import { r as registerInstance, h, H as Host } from "./global-7ZbTfMw3.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: "ca814e8d386105be46954dfba6ae6f9a0c8ba4a9" });
+  }
+};
+Divider.style = dividerCss();
+export {
+  Divider as ix_divider
+};

package/build/static/demo/v2/preview/html/assets/ix-drawer.entry-C5d5BIrF.js

@@ -0,0 +1,135 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from "./global-7ZbTfMw3.js";
+import { q as iconClose } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { a as animate } from "./anime.esm-DhE1t8Qh-cS95-bBh.js";
+import { A as Animation } from "./animation-BLaucX4x-BWLd_Wig.js";
+const drawerCss = () => `:host{top:0;right:0;display:block;position:absolute;justify-content:flex-start;align-items:center;opacity:0;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;box-shadow:var(--theme-box-shadow-level-3)}: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 .drawer-container{z-index:100}:host .header{display:flex;position:relative;align-items:center;justify-content:flex-end;padding:0.5rem;width:100%;order:1}:host .header .header-content{flex-grow:1;margin-right:1rem}:host .content{position:relative;flex:1;order:2;height:100%;width:100%;overflow-y:auto}:host(.display-none){display:none}`;
+const Drawer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.open = createEvent(this, "open", 7);
+    this.drawerClose = createEvent(this, "drawerClose", 7);
+    this.show = false;
+    this.closeOnClickOutside = true;
+    this.fullHeight = false;
+    this.minWidth = 16;
+    this.maxWidth = 28;
+    this.width = this.minWidth;
+    this.ariaLabelCloseButton = "Close drawer";
+    this.toggle = false;
+    this.callback = this.clickedOutside.bind(this);
+    this.showContent = true;
+  }
+  onShowChanged(newValue, oldValue) {
+    if (newValue === oldValue) {
+      return;
+    }
+    this.toggleDrawer(newValue);
+  }
+  /**
+   * Toggle or define show state of drawer
+   * @param show Overwrite toggle state with boolean
+   */
+  async toggleDrawer(show) {
+    show = show !== null && show !== void 0 ? show : !this.show;
+    if (show) {
+      const { defaultPrevented } = this.open.emit();
+      if (defaultPrevented) {
+        return;
+      }
+      this.show = true;
+      if (!this.toggle && this.divElement) {
+        this.slideInRight(this.divElement);
+        setTimeout(() => {
+          window.addEventListener("mousedown", this.callback);
+        }, Animation.mediumTime);
+      }
+    } else {
+      const { defaultPrevented } = this.drawerClose.emit();
+      if (defaultPrevented) {
+        return;
+      }
+      this.show = false;
+      if (this.toggle && this.divElement) {
+        this.slideOutRight(this.divElement);
+      }
+      window.removeEventListener("mousedown", this.callback);
+    }
+    this.toggle = this.show;
+    return Promise.resolve();
+  }
+  onCloseClicked() {
+    this.show = false;
+  }
+  clickedOutside(evt) {
+    if (!this.closeOnClickOutside) {
+      return;
+    }
+    const target = evt.target;
+    const closestElement = target.closest("#div-container");
+    const btn = target.closest("#drawer-btn");
+    if (evt.target.type !== "button" && closestElement !== this.divElement && target !== btn) {
+      this.show = false;
+    }
+  }
+  getConstrainedWidth(width) {
+    return Math.min(Math.max(width, this.minWidth), this.maxWidth);
+  }
+  slideOutRight(el) {
+    const initialWidth = `${this.getConstrainedWidth(this.width === "auto" ? this.minWidth : this.width)}rem`;
+    animate(el, {
+      duration: Animation.mediumTime,
+      width: [initialWidth, 0],
+      opacity: [1, 0],
+      easing: "easeInSine",
+      onComplete: () => {
+        el.classList.add("display-none");
+      }
+    });
+  }
+  slideInRight(el) {
+    const targetWidth = `${this.getConstrainedWidth(this.width === "auto" ? this.minWidth : this.width)}rem`;
+    animate(el, {
+      duration: Animation.mediumTime,
+      width: [0, targetWidth],
+      opacity: [0, 1],
+      easing: "easeOutSine",
+      onBegin: () => {
+        el.classList.remove("display-none");
+      },
+      onComplete: () => {
+        this.showContent = true;
+      }
+    });
+  }
+  componentDidLoad() {
+    this.toggleDrawer(this.show);
+  }
+  render() {
+    return h(Host, { key: "a02782f51fdf141ff257988beec49cdaff3f0050", class: {
+      "drawer-container": true,
+      "display-none": true
+    }, style: {
+      width: "0",
+      "max-width": `${this.maxWidth}rem`,
+      height: this.fullHeight ? "100%" : "auto",
+      overflow: "hidden"
+    }, ref: (el) => this.divElement = el, "data-testid": "container", id: "div-container" }, h("div", { key: "6b7464b407c72c9b7afe3b1b9fa61b1603bb40d8", style: {
+      width: this.width === "auto" ? "auto" : `${this.getConstrainedWidth(this.width)}rem`
+    } }, h("div", { key: "c25f79cde5e320e7e5f8aab9b87aca34fff4bdae", class: "header" }, h("div", { key: "413490aaef2405978027796a7bb49a410640bd53", class: "header-content" }, h("slot", { key: "89fe41129f30752f5057b6f73d8232599c1aae9b", name: "header" })), h("ix-icon-button", { key: "eef54b3d59ebf9db5d96f0f3241f14d16a0c6064", class: "close-button", style: {
+      display: this.showContent ? "block" : "none"
+    }, icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.onCloseClicked(), "data-testid": "close-button", "aria-label": this.ariaLabelCloseButton })), h("div", { key: "3f77f8e65f38c19cf06b1cae288f9cf257a094c1", class: "content", style: {
+      display: this.showContent ? "block" : "none"
+    } }, h("slot", { key: "a12cc29a8ad94ae58295361bf781df4068d01403" }))));
+  }
+  static get watchers() {
+    return {
+      "show": [{
+        "onShowChanged": 0
+      }]
+    };
+  }
+};
+Drawer.style = drawerCss();
+export {
+  Drawer as ix_drawer
+};

package/build/static/demo/v2/preview/html/assets/ix-dropdown-button.entry-C284Le09.js

@@ -0,0 +1,43 @@
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { r as iconChevronUpSmall, h as iconChevronDownSmall } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { a as a11yBoolean } from "./a11y-DAzBNVe7-CO1Uj69l.js";
+import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
+const dropdownButtonCss = () => `:host{display:inline-block;position:relative;height:2rem;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 .hide{display:none}:host .dropdown-button{display:block;position:relative;width:100%;height:100%}:host .dropdown-button>ix-button{width:100%;height:100%}:host .dropdown-button .button-label{margin-right:auto;min-width:0px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .dropdown-button .dropdown-icon{margin-right:0.25rem}:host .triangle{position:absolute;margin-inline-start:1.5625rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary{color:var(--theme-btn-primary--color)}:host .triangle.secondary{color:var(--theme-btn-secondary--color)}:host .triangle.tertiary{color:var(--theme-btn-tertiary--color)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .triangle.tertiary.disabled{color:var(--theme-btn-tertiary--color--disabled)}:host .triangle.subtle-primary{color:var(--theme-btn-subtle-primary--color)}:host .triangle.subtle-secondary{color:var(--theme-btn-subtle-secondary--color)}:host .triangle.subtle-tertiary{color:var(--theme-btn-subtle-tertiary--color)}:host .triangle.subtle-primary.disabled{color:var(--theme-btn-subtle-primary--color--disabled)}:host .triangle.subtle-secondary.disabled{color:var(--theme-btn-subtle-secondary--color--disabled)}:host .triangle.subtle-tertiary.disabled{color:var(--theme-btn-subtle-tertiary--color--disabled)}:host .triangle.danger-primary{color:var(--theme-btn-danger-primary--color)}:host .triangle.danger-secondary{color:var(--theme-btn-danger-secondary--color)}:host .triangle.danger-tertiary{color:var(--theme-btn-danger-tertiary--color)}:host .triangle.danger-primary.disabled{color:var(--theme-btn-danger-primary--color--disabled)}:host .triangle.danger-secondary.disabled{color:var(--theme-btn-danger-secondary--color--disabled)}:host .triangle.danger-tertiary.disabled{color:var(--theme-btn-danger-tertiary--color--disabled)}:host .content{display:flex;align-items:center}:host(.disabled){pointer-events:none}`;
+const DropdownButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = "primary";
+    this.disabled = false;
+    this.closeBehavior = "both";
+    this.enableTopLayer = false;
+    this.dropdownShow = false;
+    this.dropdownAnchor = makeRef();
+    this.onDropdownShowChanged = (event) => {
+      if (this.disabled && event.detail) {
+        return;
+      }
+      this.dropdownShow = event.detail;
+    };
+  }
+  getTriangle() {
+    return h("div", { class: {
+      triangle: true,
+      [this.variant]: true,
+      hide: !!this.label,
+      disabled: this.disabled
+    } });
+  }
+  render() {
+    var _a, _b;
+    return h(Host, { key: "2232add1b732f43028df1725baa05a08ce025b69", "aria-disabled": a11yBoolean(this.disabled), class: {
+      disabled: this.disabled
+    }, ref: this.dropdownAnchor }, h("div", { key: "0bbbbef21fd826b770c8231e449dd5beb9d799e1", class: "dropdown-button" }, this.label ? h("ix-button", { variant: this.variant, disabled: this.disabled, alignment: "start", ariaLabelButton: (_a = this.ariaLabelDropdownButton) !== null && _a !== void 0 ? _a : this.dropdownShow ? "Close dropdown" : "Open dropdown", tabIndex: this.disabled ? -1 : 0 }, h("div", { class: "content" }, this.icon ? h("ix-icon", { name: this.icon, size: "24", class: "dropdown-icon" }) : null, h("div", { class: "button-label" }, this.label), h("ix-icon", { name: this.dropdownShow ? iconChevronUpSmall : iconChevronDownSmall, size: "24" }))) : h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, disabled: this.disabled, tabIndex: this.disabled ? -1 : 0, "aria-label": (_b = this.ariaLabelDropdownButton) !== null && _b !== void 0 ? _b : this.dropdownShow ? "Close dropdown" : "Open dropdown" }), this.getTriangle())), h("ix-dropdown", { key: "656053246dbf11c11da0cd70114b2fdb107cc320", class: "dropdown", trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior, enableTopLayer: this.enableTopLayer, onShowChanged: this.onDropdownShowChanged }, h("slot", { key: "feeae55a471643b170804911b9fdf5107a70ec7e" })));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+DropdownButton.style = dropdownButtonCss();
+export {
+  DropdownButton as ix_dropdown_button
+};

package/build/static/demo/v2/preview/html/assets/ix-dropdown-header.entry-B-_ACd4S.js

@@ -0,0 +1,14 @@
+import { r as registerInstance, h, H as Host } from "./global-7ZbTfMw3.js";
+const dropdownHeaderCss = () => `:host{display:flex;align-items:center;position:relative;height:2.5rem;width:auto;padding:0.25rem 1rem;overflow:hidden;cursor:default;color:var(--theme-color-soft-text)}: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}`;
+const DropdownHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h(Host, { key: "6ec911ed6360d3e523a5a871007d874d67cf1334" }, h("ix-typography", { key: "f1a8142ff1d8212a389649a6b7cc31495ccb9fa0", class: "category-text", format: "h5" }, this.label));
+  }
+};
+DropdownHeader.style = dropdownHeaderCss();
+export {
+  DropdownHeader as ix_dropdown_header
+};

package/build/static/demo/v2/preview/html/assets/ix-dropdown-item.entry-B_af2CtU.js

@@ -0,0 +1,49 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { O as iconSingleCheck, w as iconChevronRightSmall } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { a as a11yBoolean } from "./a11y-DAzBNVe7-CO1Uj69l.js";
+const dropdownItemCss = () => `:host{--ix-dropdown-item-checked-color:var(--theme-color-primary);display:flex;flex-direction:row;position:relative;height:2.5rem;width:auto;overflow:hidden;cursor:pointer}: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 .dropdown-item{all:unset;display:flex;flex-direction:row;align-items:center;position:relative;height:calc(100% - 2px);border:0.0625rem solid transparent;white-space:nowrap;width:calc(100% - 0.5rem - 1.5rem);padding:0 0.5rem;padding-right:1.5rem}:host .dropdown-item.no-checked-field{width:calc(100% - 1rem - 1.5rem);padding:0 1rem;padding-right:1.5rem}:host .dropdown-item:focus-visible{border-color:var(--theme-color-focus-bdr)}:host .dropdown-item-checked{display:flex;align-items:center;justify-content:center;position:relative;height:100%;width:1rem;min-width:1rem;margin-right:0.5rem;color:var(--ix-dropdown-item-checked-color)}:host .dropdown-item-icon{margin-right:0.5rem;color:var(--theme-color-std-text)}:host .dropdown-item-text{display:block;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:pre}:host .submenu-icon{margin-left:auto}:host(.icon-only) .dropdown-item-icon{margin-right:0px}:host(.icon-only) .dropdown-item-checked{display:none}:host(.icon-only) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(.submenu) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(:not(.disabled):not(:disabled).hover),:host(:not(.disabled):not(:disabled):hover){background-color:var(--theme-ghost--background--hover)}:host(:not(.disabled):not(:disabled).active),:host(:not(.disabled):not(:disabled):active){background-color:var(--theme-ghost--background--active)}:host(.disabled){pointer-events:none;color:var(--theme-color-weak-text) !important}:host(.disabled) .dropdown-item-icon{color:var(--theme-color-weak-text) !important}`;
+const DropdownItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.itemClick = createEvent(this, "itemClick", 7);
+    this.hover = false;
+    this.disabled = false;
+    this.checked = false;
+    this.isSubMenu = false;
+    this.suppressChecked = false;
+  }
+  /** @internal */
+  async emitItemClick() {
+    this.itemClick.emit(this.hostElement);
+  }
+  /** @internal */
+  async getDropdownItemElement() {
+    return this.hostElement;
+  }
+  isIconOnly() {
+    return this.label === void 0 && this.hostElement.innerText === "" && this.icon !== void 0;
+  }
+  render() {
+    return h(Host, { key: "6792db1dd356481085735838df4cfcdf11cee1ba", class: {
+      hover: this.hover,
+      "icon-only": this.isIconOnly(),
+      disabled: this.disabled,
+      submenu: this.isSubMenu
+    }, role: "listitem" }, h("button", { key: "878eed19e5127942f10f561db2205930a7bb01ef", type: "button", tabIndex: this.disabled ? -1 : 0, class: {
+      "dropdown-item": true,
+      "no-checked-field": this.suppressChecked,
+      disabled: this.disabled
+    }, onClick: () => {
+      if (!this.disabled) {
+        this.emitItemClick();
+      }
+    }, "aria-label": this.ariaLabelButton, "aria-disabled": a11yBoolean(this.disabled), disabled: this.disabled }, !this.suppressChecked ? h("div", { class: "dropdown-item-checked" }, this.checked ? h("ix-icon", { "aria-hidden": "true", class: "checkmark", name: iconSingleCheck, size: "16" }) : null) : null, this.icon ? h("ix-icon", { class: "dropdown-item-icon", name: this.icon, "aria-label": this.ariaLabelIcon }) : null, h("div", { key: "e5eec4768210d2934ae45c3658dfa2008d10fdc0", class: "dropdown-item-text" }, this.label, h("slot", { key: "2545b062f3f2e58cd6021585a613accadce3536f" })), this.isSubMenu ? h("ix-icon", { name: iconChevronRightSmall, class: "submenu-icon" }) : null));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+DropdownItem.style = dropdownItemCss();
+export {
+  DropdownItem as ix_dropdown_item
+};

package/build/static/demo/v2/preview/html/assets/ix-dropdown-quick-actions.entry-CijKaukT.js

@@ -0,0 +1,14 @@
+import { r as registerInstance, h, H as Host } from "./global-7ZbTfMw3.js";
+const dropdownQuickActionsCss = () => `:host{display:flex;justify-content:center;align-items:center;margin-inline-start:1.5rem;margin-inline-end:1.5rem;margin-block-end:0.25rem}:host slot::slotted(*){display:flex;margin-inline-end:0.625rem}`;
+const DropdownQuickActions = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h(Host, { key: "5b9938da726bfe31dffe1667ff81c1b3a5935e1e" }, h("slot", { key: "a3f04dc61e5896ede45c0484506b3ee611b413c8" }));
+  }
+};
+DropdownQuickActions.style = dropdownQuickActionsCss();
+export {
+  DropdownQuickActions as ix_dropdown_quick_actions
+};