@siemens/ix-docs 4.3.0 → 4.4.0

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

@@ -0,0 +1,403 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { f as flip, i as inline, s as shift, o as offset, a as autoUpdate, c as computePosition } from "./floating-ui.dom-CAqtPJ4--DFASu3km.js";
+import { a as addDisposableEventListener } from "./disposable-event-listener-CKoABG1h-D5kNsG5G.js";
+import { f as findElement } from "./find-element-CFRrPFxi-BfUKzqCM.js";
+import { A as ArrowFocusController } from "./focus-BAKpVknt-BX94nhwN.js";
+import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
+import { r as requestAnimationFrameNoNgZone } from "./requestAnimationFrame-BEuV0Xpe-CBtvTq-Q.js";
+import { d as dropdownController, h as hasDropdownItemWrapperImplemented } from "./dropdown-controller-D3K9vmFp-CeqyAJWH.js";
+const dropdownCss = () => `:host{background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);min-width:0px;z-index:var(--theme-z-index-dropdown);box-shadow:var(--theme-shadow-4);padding:0.25rem 0px}: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-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}:host(.overflow){max-height:calc(50vh - 3rem);overflow-y:auto}:host(:not(.show)){display:none}.dialog{margin:0;border:none;outline:none;padding:0.25rem 0px;min-width:0;max-width:100vw;width:-moz-max-content;width:max-content;height:-moz-fit-content;height:fit-content;background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);box-shadow:var(--theme-shadow-4);overflow-x:visible;overflow-y:visible;inset:unset;color-scheme:inherit;color:var(--theme-color-std-text);box-sizing:border-box}.dialog *,.dialog *::after,.dialog *::before{box-sizing:border-box}.dialog .dropdown-container{display:block;position:relative}.dialog .dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}.dialog.overflow{max-height:calc(50vh - 3rem);overflow-y:auto}`;
+let sequenceId = 0;
+const Dropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.showChanged = createEvent(this, "showChanged", 7);
+    this.suppressAutomaticPlacement = false;
+    this.show = false;
+    this.closeBehavior = "both";
+    this.placement = "bottom-start";
+    this.positioningStrategy = "fixed";
+    this.discoverAllSubmenus = false;
+    this.ignoreRelatedSubmenu = false;
+    this.suppressOverflowBehavior = false;
+    this.enableTopLayer = false;
+    this.dialogRef = makeRef();
+    this.localUId = `dropdown-${sequenceId++}`;
+    this.assignedSubmenu = [];
+    this.itemObserver = new MutationObserver(() => {
+      if (this.arrowFocusController) {
+        this.arrowFocusController.items = this.dropdownItems;
+      }
+    });
+  }
+  connectedCallback() {
+    dropdownController.connected(this);
+    if (this.trigger != void 0) {
+      this.registerListener(this.trigger);
+    }
+  }
+  cacheSubmenuId(event) {
+    event.stopImmediatePropagation();
+    event.preventDefault();
+    const { detail } = event;
+    if (this.assignedSubmenu.indexOf(detail) === -1) {
+      this.assignedSubmenu.push(detail);
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    dropdownController.dismiss(this);
+    dropdownController.disconnected(this);
+    if (this.arrowFocusController) {
+      (_a = this.arrowFocusController) === null || _a === void 0 ? void 0 : _a.disconnect();
+      this.arrowFocusController = void 0;
+    }
+    if (this.itemObserver) {
+      this.itemObserver.disconnect();
+      this.itemObserver = void 0;
+    }
+    if (this.disposeClickListener) {
+      this.disposeClickListener();
+      this.disposeClickListener = void 0;
+    }
+    if (this.disposeKeyListener) {
+      this.disposeKeyListener();
+      this.disposeKeyListener = void 0;
+    }
+    if (this.autoUpdateCleanup) {
+      this.autoUpdateCleanup();
+      this.autoUpdateCleanup = void 0;
+    }
+  }
+  getAssignedSubmenuIds() {
+    return this.assignedSubmenu;
+  }
+  isPresent() {
+    return this.show;
+  }
+  present() {
+    this.show = true;
+  }
+  dismiss() {
+    this.show = false;
+  }
+  getId() {
+    return this.localUId;
+  }
+  willDismiss() {
+    const { defaultPrevented } = this.showChanged.emit(false);
+    return !defaultPrevented;
+  }
+  willPresent() {
+    const { defaultPrevented } = this.showChanged.emit(true);
+    return !defaultPrevented;
+  }
+  get dropdownItems() {
+    return Array.from(this.hostElement.querySelectorAll("ix-dropdown-item"));
+  }
+  get slotElement() {
+    return this.hostElement.shadowRoot.querySelector("slot");
+  }
+  addEventListenersFor() {
+    var _a, _b, _c;
+    (_a = this.disposeClickListener) === null || _a === void 0 ? void 0 : _a.call(this);
+    (_b = this.disposeKeyListener) === null || _b === void 0 ? void 0 : _b.call(this);
+    const toggleController = () => {
+      if (!this.isPresent()) {
+        dropdownController.present(this);
+      } else {
+        dropdownController.dismiss(this);
+      }
+      dropdownController.dismissOthers(this.getId());
+    };
+    if (!this.triggerElement) {
+      return;
+    }
+    this.disposeClickListener = addDisposableEventListener(this.triggerElement, "click", (event) => {
+      if (!event.defaultPrevented) {
+        toggleController();
+      }
+    });
+    (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.setAttribute("data-ix-dropdown-trigger", this.localUId);
+  }
+  /** @internal */
+  async discoverSubmenu() {
+    var _a;
+    (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent("ix-assign-sub-menu", {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      detail: this.localUId
+    }));
+  }
+  registerKeyListener() {
+    if (!this.triggerElement) {
+      return;
+    }
+    this.disposeKeyListener = addDisposableEventListener(this.triggerElement, "keydown", ((event) => {
+      if (event.key !== "ArrowDown") {
+        return;
+      }
+      if (document.activeElement !== this.triggerElement) {
+        return;
+      }
+      dropdownController.present(this);
+      setTimeout(() => {
+        this.focusDropdownItem(0);
+      });
+    }));
+  }
+  async registerListener(element) {
+    this.triggerElement = await this.resolveElement(element);
+    if (this.triggerElement) {
+      this.addEventListenersFor();
+      this.discoverSubmenu();
+    }
+  }
+  async resolveElement(element) {
+    const el = await findElement(element);
+    return this.checkForSubmenuAnchor(el);
+  }
+  async checkForSubmenuAnchor(element) {
+    if (!element) {
+      return void 0;
+    }
+    if (hasDropdownItemWrapperImplemented(element)) {
+      const dropdownItem = await element.getDropdownItemElement();
+      dropdownItem.isSubMenu = true;
+      this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;
+    }
+    if (element.tagName === "IX-DROPDOWN-ITEM") {
+      element.isSubMenu = true;
+      this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;
+    }
+    return element;
+  }
+  async resolveAnchorElement() {
+    if (this.anchor) {
+      this.anchorElement = await this.resolveElement(this.anchor);
+    } else if (this.trigger) {
+      this.anchorElement = await this.resolveElement(this.trigger);
+    }
+  }
+  async changedShow(newShow) {
+    var _a;
+    if (!newShow) {
+      this.cleanupOnHide();
+      if (this.enableTopLayer) {
+        await this.hideDropdownAsync();
+      }
+      return;
+    }
+    this.arrowFocusController = new ArrowFocusController(this.dropdownItems, this.hostElement, (index) => this.focusDropdownItem(index));
+    (_a = this.itemObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostElement, {
+      childList: true,
+      subtree: true
+    });
+    this.registerKeyListener();
+    if (this.enableTopLayer) {
+      await this.showDropdownAsync();
+      return;
+    }
+    await this.resolveAnchorElement();
+    if (this.anchorElement) {
+      this.applyDropdownPosition();
+    }
+  }
+  changedTrigger(newTriggerValue) {
+    this.registerListener(newTriggerValue);
+  }
+  destroyAutoUpdate() {
+    if (this.autoUpdateCleanup) {
+      this.autoUpdateCleanup();
+      this.autoUpdateCleanup = void 0;
+    }
+  }
+  isAnchorSubmenu() {
+    var _a;
+    if (!hasDropdownItemWrapperImplemented(this.anchorElement)) {
+      return !!((_a = this.anchorElement) === null || _a === void 0 ? void 0 : _a.closest("ix-dropdown-item"));
+    }
+    return true;
+  }
+  async showDropdownAsync() {
+    const popover = await this.dialogRef.waitForCurrent();
+    if (!popover) {
+      return;
+    }
+    popover.showPopover();
+    await this.resolveAnchorElement();
+    if (this.anchorElement) {
+      this.applyDropdownPosition();
+    } else {
+      requestAnimationFrameNoNgZone(() => {
+        const referenceElement = this.hostElement.parentElement || this.hostElement;
+        const refRect = referenceElement.getBoundingClientRect();
+        const transform = `translate(${Math.round(refRect.left)}px, ${Math.round(refRect.top)}px)`;
+        Object.assign(popover.style, {
+          top: "0",
+          left: "0",
+          transform
+        });
+      });
+    }
+  }
+  async hideDropdownAsync() {
+    const popover = await this.dialogRef.waitForCurrent();
+    if (popover === null || popover === void 0 ? void 0 : popover.matches(":popover-open")) {
+      popover.hidePopover();
+    }
+  }
+  cleanupOnHide() {
+    var _a, _b, _c;
+    this.destroyAutoUpdate();
+    (_a = this.arrowFocusController) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this.itemObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    (_c = this.disposeKeyListener) === null || _c === void 0 ? void 0 : _c.call(this);
+  }
+  async applyDropdownPosition() {
+    var _a, _b;
+    if (!this.show) {
+      return;
+    }
+    if (!this.anchorElement) {
+      return;
+    }
+    const referenceElement = this.anchorElement;
+    const isSubmenu = this.isAnchorSubmenu();
+    let targetElement = this.hostElement;
+    let strategy = this.positioningStrategy;
+    if (this.enableTopLayer) {
+      const dialog = await this.dialogRef.waitForCurrent();
+      if (!dialog) {
+        return;
+      }
+      targetElement = dialog;
+      strategy = "fixed";
+    }
+    let positionConfig = {
+      strategy,
+      middleware: []
+    };
+    if (!this.suppressAutomaticPlacement) {
+      (_a = positionConfig.middleware) === null || _a === void 0 ? void 0 : _a.push(flip({ fallbackStrategy: "initialPlacement" }));
+    }
+    positionConfig.placement = isSubmenu ? "right-start" : this.placement;
+    positionConfig.middleware = [
+      ...((_b = positionConfig.middleware) === null || _b === void 0 ? void 0 : _b.filter(Boolean)) || [],
+      inline(),
+      shift()
+    ];
+    if (this.offset) {
+      positionConfig.middleware.push(offset(this.offset));
+    }
+    this.destroyAutoUpdate();
+    this.autoUpdateCleanup = autoUpdate(referenceElement, targetElement, async () => {
+      const computeResponse = await computePosition(referenceElement, targetElement, positionConfig);
+      Object.assign(targetElement.style, {
+        top: "0",
+        left: "0",
+        transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(computeResponse.y)}px)`
+      });
+      if (this.overwriteDropdownStyle) {
+        const overwriteStyle = await this.overwriteDropdownStyle({
+          dropdownRef: targetElement,
+          triggerRef: this.triggerElement
+        });
+        Object.assign(targetElement.style, overwriteStyle);
+      }
+    }, {
+      ancestorResize: true,
+      ancestorScroll: true,
+      elementResize: true
+    });
+  }
+  focusDropdownItem(index) {
+    requestAnimationFrameNoNgZone(() => {
+      var _a, _b;
+      const button = (_b = (_a = this.dropdownItems[index]) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("button");
+      if (button) {
+        button.focus();
+      }
+    });
+  }
+  async componentDidLoad() {
+    if (this.show) {
+      this.changedShow(true);
+    }
+    if (!this.trigger) {
+      return;
+    }
+    this.changedTrigger(this.trigger);
+  }
+  async componentDidRender() {
+    await this.applyDropdownPosition();
+    await this.resolveAnchorElement();
+  }
+  isTriggerElement(element) {
+    const trigger = !!element.hasAttribute("data-ix-dropdown-trigger");
+    return trigger;
+  }
+  onDropdownClick(event) {
+    const target = dropdownController.pathIncludesTrigger(event.composedPath());
+    if (target) {
+      if (target !== this.triggerElement) {
+        event.preventDefault();
+      }
+      if (this.isTriggerElement(target)) {
+        if (this.closeBehavior === "outside") {
+          event.preventDefault();
+        }
+        return;
+      }
+    }
+    if (!event.defaultPrevented && (this.closeBehavior === "inside" || this.closeBehavior === "both")) {
+      dropdownController.dismissAll([this.getId()], this.ignoreRelatedSubmenu);
+      return;
+    }
+    dropdownController.dismissOthers(this.getId());
+  }
+  /**
+   * Update position of dropdown
+   */
+  async updatePosition() {
+    this.applyDropdownPosition();
+  }
+  render() {
+    if (this.enableTopLayer) {
+      return h(Host, { "data-ix-dropdown": this.localUId, class: {
+        "dropdown-menu": true,
+        show: this.show
+      } }, h("dialog", { ref: this.dialogRef, class: {
+        dialog: true,
+        overflow: !this.suppressOverflowBehavior
+      }, popover: "manual", "aria-modal": "true", "aria-label": this.header, tabindex: -1, onClick: (event) => this.onDropdownClick(event) }, h("div", { class: "dropdown-container" }, this.header && h("div", { class: "dropdown-header" }, this.header), this.show && h("slot", null))));
+    }
+    return h(Host, { "data-ix-dropdown": this.localUId, class: {
+      "dropdown-menu": true,
+      show: this.show,
+      overflow: !this.suppressOverflowBehavior
+    }, style: {
+      margin: "0",
+      minWidth: "0px",
+      position: this.positioningStrategy
+    }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { style: { display: "contents" } }, this.header && h("div", { class: "dropdown-header" }, this.header), this.show && h("slot", null)));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "show": [{
+        "changedShow": 0
+      }],
+      "trigger": [{
+        "changedTrigger": 0
+      }]
+    };
+  }
+};
+Dropdown.style = dropdownCss();
+export {
+  Dropdown as ix_dropdown
+};

package/build/static/demo/v2/preview/html/assets/ix-empty-state.entry-gdnvcMA0.js

@@ -0,0 +1,16 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from "./global-7ZbTfMw3.js";
+const emptyStateCss = () => `: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 .label__subHeader{color:var(--theme-color-soft-text)}:host(.emptyState.emptyState--large){display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--large) .emptyState__icon{width:3.5rem;height:3.5rem;display:flex;justify-content:center;align-items:center}:host(.emptyState.emptyState--large) .emptyState__icon ix-icon{transform:scale(1.75)}:host(.emptyState.emptyState--large) .emptyState__content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem}:host(.emptyState.emptyState--large) .emptyState__content .content__label{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0.5rem}:host(.emptyState.emptyState--large) .label__subHeader,:host(.emptyState.emptyState--large) ix-typography{text-align:center}:host(.emptyState.emptyState--compact){display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compact) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compact) .emptyState__content{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compactBreak){display:flex;flex-direction:row;align-items:flex-start;gap:1rem}:host(.emptyState.emptyState--compactBreak) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compactBreak) .emptyState__content{display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem}`;
+const EmptyState = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.actionClick = createEvent(this, "actionClick", 7);
+    this.layout = "large";
+  }
+  render() {
+    return h(Host, { key: "f87d35f9c8ae39f3ed46f8ebf0fe1b0487d91108", class: `emptyState emptyState--${this.layout}` }, this.icon && h("div", { key: "41eb63bad03958baeb5f683895ea196f883b5312", class: "emptyState__icon" }, h("ix-icon", { key: "3bd1032f996cdf7c046f767ac9fec79756a7b8e5", name: this.icon, size: this.layout === "large" ? "32" : "32", color: "color-soft-text", "aria-label": this.ariaLabelEmptyStateIcon })), h("div", { key: "1a287d69a879f7dd52e9801e9fd0a973849fc244", class: "emptyState__content" }, h("div", { key: "8e2ff9b6f189e732dd16bf943922b09f32b9adfc", class: "content__label" }, h("ix-typography", { key: "74bc4394d9b94c2d3161091b71fbeb8ca091d6d8", format: this.layout === "large" ? "h3" : "body" }, this.header), this.subHeader && h("div", { key: "43e21aec14323f18a4df1116c7841702a945bcfe", class: "label__subHeader" }, this.subHeader)), this.action && h("div", { key: "d80c01f388e99df9affc47086ac2f67ef89ca8ca", class: "content__action" }, h("ix-button", { key: "0ba60803afb761fbae046546ed06f6ab07bc728c", onClick: () => this.actionClick.emit() }, this.action))));
+  }
+};
+EmptyState.style = emptyStateCss();
+export {
+  EmptyState as ix_empty_state
+};

package/build/static/demo/v2/preview/html/assets/ix-event-list-item.entry-Dzl_GcXp.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from "./global-7ZbTfMw3.js";
+import { s as iconChevronRight } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { a as a11yBoolean } from "./a11y-DAzBNVe7-CO1Uj69l.js";
+const eventListItemCss = () => `:host(.event-list-item-outline) .event-list-item{--ix-event-list-item--color-border:var(     --theme-event-item-outline--border   );--ix-event-list-item--background:var(     --theme-event-item-outline--background   );--ix-event-list-item--background--hover:var(     --theme-event-item-outline--background--hover   );--ix-event-list-item--background--active:var(     --theme-event-item-outline--background--active   );--ix-event-list-item--background--selected:var(     --theme-event-item-outline--background--selected   );--ix-event-list-item--border--hover:var(     --theme-event-item-outline--border--hover   );--ix-event-list-item--border--active:var(     --theme-event-item-outline--border--active   );--ix-event-list-item--border--selected:var(     --theme-event-item-outline--border--selected   );--ix-event-list-item--border--disabled:var(     --theme-event-item-outline--border--disabled   )}:host(.event-list-item-filled) .event-list-item{--ix-event-list-item--color-border:var(     --theme-event-item-filled--border   );--ix-event-list-item--background:var(     --theme-event-item-filled--background   );--ix-event-list-item--background--hover:var(     --theme-event-item-filled--background--hover   );--ix-event-list-item--background--active:var(     --theme-event-item-filled--background--active   );--ix-event-list-item--background--selected:var(     --theme-event-item-filled--background--selected   );--ix-event-list-item--border--hover:var(     --theme-event-item-filled--border--hover   );--ix-event-list-item--border--active:var(     --theme-event-item-filled--border--active   );--ix-event-list-item--border--selected:var(     --theme-event-item-filled--border--selected   );--ix-event-list-item--border--disabled:var(     --theme-event-item-filled--border--disabled   )}: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 .event-list-item{display:flex;align-items:center;position:relative;height:var(--event-list-item-height, 2.5rem);max-height:var(--event-list-item-height, 2.5rem);border-radius:var(--event-list-item-border-radius, 0.25rem);background-color:var(--ix-event-list-item--background);overflow:hidden;transition:var(--theme-default-time);cursor:pointer;margin-bottom:var(--event-list-item-margin-bottom, 0.5rem)}:host .event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:var(--event-list-item-border-radius, 0.25rem);border-bottom-left-radius:var(--event-list-item-border-radius, 0.25rem)}:host .event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}:host .event-list-item .event-list-item-container{display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--ix-event-list-item--color-border);border-top-left-radius:0;border-top-right-radius:var(--event-list-item-border-radius, 0.25rem);border-bottom-left-radius:0;border-bottom-right-radius:var(--event-list-item-border-radius, 0.25rem);border-left:none;padding-left:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .event-list-item .event-content{display:flex;align-items:center;width:100%;height:var(--event-list-item-height, 100%);max-height:var(--event-list-item-height, 100%);white-space:var(--event-list-item-content-white-space, inherit);overflow:hidden;padding-inline-end:0.5rem}:host .event-list-item .chevron-icon{margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}:host .event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected):not(.disabled):not(:disabled):hover,:host .event-list-item:not(.selected):not(.disabled):not(:disabled).hover{background-color:var(--ix-event-list-item--background--hover)}:host .event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected):not(.disabled):not(:disabled):active,:host .event-list-item:not(.selected):not(.disabled):not(:disabled).active{background-color:var(--ix-event-list-item--background--active)}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):hover,:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled).hover{border-color:var(--ix-event-list-item--border--hover)}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):active,:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled).active{border-color:var(--ix-event-list-item--border--active)}:host .event-list-item.selected .event-list-item-container{background-color:var(--ix-event-list-item--background--selected);border-color:var(--ix-event-list-item--border--selected)}:host .event-list-item[disabled],:host .event-list-item.disabled{pointer-events:none}:host .event-list-item[disabled] .event-list-item-container,:host .event-list-item.disabled .event-list-item-container{background-color:var(--ix-event-list-item--background--disabled);border-color:var(--ix-event-list-item--border--disabled)}:host(.disabled){pointer-events:none}`;
+const EventListItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.itemClick = createEvent(this, "itemClick", 7);
+    this.variant = "outline";
+    this.selected = false;
+    this.disabled = false;
+    this.chevron = false;
+  }
+  handleItemClick() {
+    this.itemClick.emit();
+  }
+  render() {
+    var _a;
+    let color = ((_a = this.itemColor) === null || _a === void 0 ? void 0 : _a.startsWith("--theme")) ? `var(${this.itemColor})` : `var(--theme-${this.itemColor})`;
+    return h(Host, { key: "3fa7304c0d114cd65b572e6d7e1a7362d3f63950", class: {
+      disabled: this.disabled,
+      [`event-list-item-${this.variant}`]: true
+    } }, h("div", { key: "9dc5734ea43068e74efc45d89a6fda3bad040cd1", role: "listitem", "aria-disabled": a11yBoolean(this.disabled), class: {
+      "event-list-item": true,
+      selected: this.selected,
+      disabled: this.disabled
+    } }, h("div", { key: "5fc29826643c430d3f0c82826142b461395d5075", class: `indicator ${!this.itemColor ? "indicator-empty" : ""}`, style: {
+      "background-color": this.itemColor ? color : "inherit",
+      opacity: `${this.disabled ? 0.4 : 1}`
+    } }), h("div", { key: "c53b6ea99b0744dc6a0d57024853d0627a3963e2", class: "event-list-item-container" }, h("div", { key: "22a50db11d9997caa9df67fea550e1f58224344c", class: "event-content" }, h("slot", { key: "6361d1b0c326919f46ed7eb1b6bcb4b17421258e" })), this.chevron && h("ix-icon", { key: "edd5d1e1ef0fa1c85b319f9bdccdf1e2cbe8183a", name: iconChevronRight, size: "16", class: "chevron-icon", "aria-hidden": "true" }))));
+  }
+};
+EventListItem.style = eventListItemCss();
+export {
+  EventListItem as ix_event_list_item
+};

package/build/static/demo/v2/preview/html/assets/ix-event-list.entry-BWbe0iXR.js

@@ -0,0 +1,129 @@
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { c as createMutationObserver } from "./mutation-observer-CX81WQtk-DFcmhOTk.js";
+import { c as convertToRemString } from "./rwd.util-pXYAoEyc-B7dE3uhl.js";
+import { a as animate } from "./anime.esm-DhE1t8Qh-cS95-bBh.js";
+const eventListCss = () => `:host{display: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(.item-size-l){--event-list-item-height:6.5rem;--event-list-item-content-white-space:normal}:host(.compact){--event-list-item-border-radius:0;--event-list-item-margin-bottom:0}`;
+const EventList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.mutationObserver = createMutationObserver(this.onMutation.bind(this));
+    this.itemHeight = "S";
+    this.compact = false;
+    this.animated = false;
+    this.chevron = false;
+  }
+  watchChevron(chevron) {
+    this.handleChevron(chevron);
+  }
+  componentDidLoad() {
+    if (this.animated) {
+      this.triggerFadeIn();
+    }
+    if (!Number.isNaN(Number(this.itemHeight))) {
+      const height = convertToRemString(this.itemHeight);
+      this.hostElement.querySelectorAll("ix-event-list-item").forEach((item) => {
+        this.setCustomHeight(item, height);
+      });
+    }
+    this.handleChevron(this.chevron);
+    this.mutationObserver.observe(this.hostElement, {
+      childList: true,
+      subtree: true
+    });
+  }
+  onMutation(mutationRecords) {
+    this.triggerFadeOut().then(() => {
+      if (!Number.isNaN(Number(this.itemHeight))) {
+        const height = convertToRemString(this.itemHeight);
+        const eventListItems = this.findEventListItems(mutationRecords);
+        eventListItems.forEach((item) => this.setCustomHeight(item, height));
+      }
+      this.handleChevron(this.chevron);
+      this.triggerFadeIn();
+    });
+  }
+  findEventListItems(mutationRecords) {
+    const eventListItems = [];
+    mutationRecords.forEach((mutation) => {
+      if (mutation.type !== "childList") {
+        return;
+      }
+      mutation.addedNodes.forEach((node) => {
+        const element = node;
+        if (element.tagName === "IX-EVENT-LIST-ITEM") {
+          eventListItems.push(element);
+        }
+      });
+    });
+    return eventListItems;
+  }
+  setCustomHeight(item, height) {
+    item.style.setProperty("--event-list-item-height", height);
+  }
+  triggerFadeOut() {
+    return new Promise((resolve) => {
+      if (!this.animated) {
+        resolve();
+      }
+      const listElement = this.hostElement.shadowRoot.querySelector("ul");
+      animate(listElement, {
+        opacity: [{ opacity: 1, easing: "easeInSine" }, { opacity: 0 }],
+        duration: EventList.fadeOutDuration,
+        onComplete: () => {
+          resolve();
+        }
+      });
+    });
+  }
+  triggerFadeIn() {
+    if (!this.animated) {
+      return;
+    }
+    const listItems = this.hostElement.querySelectorAll("ix-event-list-item");
+    listItems.forEach((e, i) => {
+      const delay = i * 80;
+      const offset = delay / (delay + EventList.fadeInDuration);
+      animate(e, {
+        offset,
+        duration: EventList.fadeInDuration + delay,
+        opacity: [0, 1],
+        easing: "easeInOutSine",
+        delay,
+        autoplay: true
+      });
+    });
+  }
+  handleChevron(chevron) {
+    const listItems = this.hostElement.querySelectorAll("ix-event-list-item");
+    listItems.forEach((e) => {
+      if (chevron) {
+        e.setAttribute("chevron", "true");
+      } else if (chevron !== void 0) {
+        e.removeAttribute("chevron");
+      }
+    });
+  }
+  render() {
+    return h(Host, { key: "a21a4d23666ba43d7d10bd569c7a9feb01423b1f", class: {
+      "item-size-s": this.itemHeight === "S",
+      "item-size-l": this.itemHeight === "L",
+      compact: this.compact
+    } }, h("div", { key: "cbb5ffb72ce1a393c99df6624ffc3e36a3d6a4b5", role: "list" }, h("slot", { key: "50ca67f2071b058ee4e43bfcad1bf23d5fc623d3" })));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "chevron": [{
+        "watchChevron": 0
+      }]
+    };
+  }
+};
+EventList.fadeOutDuration = 50;
+EventList.fadeInDuration = 150;
+EventList.style = eventListCss();
+export {
+  EventList as ix_event_list
+};