@siemens/ix-docs 4.4.0 → 5.0.0

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

@@ -1,403 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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
-};