@siemens/ix-docs 4.3.0 → 4.4.0

package/build/static/demo/v2/preview/html/assets/ix-pane.entry-DXPL3IT-.js

@@ -1,437 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-X2k8gwUL.js";
-import { E as iconDoubleChevronDown, F as iconDoubleChevronRight, G as iconDoubleChevronUp, H as iconDoubleChevronLeft, q as iconClose } from "./index-8HpPmDK_-DinFJk0z.js";
-import { a as animate } from "./anime.esm-DhE1t8Qh-cS95-bBh.js";
-import { A as Animation } from "./animation-C5MWUgDN-BXCJNYHu.js";
-import { a as applicationLayoutService } from "./service-Da0kv8hS-ChZKlHDF.js";
-import { m as matchBreakpoint } from "./breakpoints-D_Hmobxf-DBbixPq4.js";
-import { a as addDisposableEventListener } from "./disposable-event-listener-CKoABG1h-D5kNsG5G.js";
-import { a as a11yBoolean } from "./a11y-Bb7pDeaQ-DNI84lDX.js";
-import "./typed-event-BdCnOrqW-CWsLM0S_.js";
-const paneCss = ":host(.floating-pane){--ix-pane--background:var(--theme-pane-floating--background);--ix-pane--border-color:var(--theme-pane-floating--border-color);--ix-pane--color:var(--theme-pane-floating--color);--ix-pane--box-shadow:var(--theme-pane-floating--box-shadow)}:host(.inline-pane){--ix-pane--background:var(--theme-pane-inline--background);--ix-pane--border-color:var(--theme-pane-inline--border-color);--ix-pane--color:var(--theme-pane-inline--color);--ix-pane--box-shadow:var(--theme-pane-inline--box-shadow)}:host{display:flex;position:relative;overflow:hidden;box-sizing:border-box;box-shadow:var(--ix-pane--box-shadow);background-color:var(--ix-pane--background)}: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 aside{width:100%;height:100%}:host .pane-icon{color:var(--ix-pane--color)}:host .slot-header-content{display:inline-block;position:relative;max-height:2rem}:host .title-text{display:flex;align-items:center;gap:var(--theme-space-1);overflow:hidden}:host .title-text .title-text-overflow{width:100%;height:100%;display:contents}:host .title-text .title-text-overflow *{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .header-gap{gap:var(--theme-space-1)}:host .top-bottom-pane{display:flex;flex-direction:column;flex-grow:1}:host .top-bottom-pane .title{display:flex;flex-direction:row;align-items:center;margin:var(--theme-space--1) var(--theme-space-2) var(--theme-space--1) var(--theme-space-2)}:host .top-bottom-pane .title-finished{padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .top-bottom-pane .title-expanded{display:flex;flex-direction:row}:host .top-bottom-pane .title-hide-on-collapse{display:flex;flex-direction:row-reverse;justify-content:space-between;padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane{display:flex;flex-grow:1}:host .left-right-pane .title{display:flex;flex-direction:column;align-items:center;margin:var(--theme-space-2) var(--theme-space--1) var(--theme-space-2) var(--theme-space--1)}:host .left-right-pane .title .title-text{flex-direction:row-reverse;justify-content:start;flex-direction:row}:host .left-right-pane .title .rotate{writing-mode:vertical-lr;text-orientation:mixed;transform:rotate(180deg);flex-direction:row-reverse}:host .left-right-pane .title .rotate ix-icon{transform:rotate(90deg)}:host .left-right-pane .title-finished{padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane .title-expanded{display:flex;flex-direction:row}:host .left-right-pane .title-hide-on-collapse{display:flex;flex-direction:row-reverse;justify-content:space-between;padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane.expanded{flex-direction:column}:host .mobile-pane{display:flex;flex-direction:column;flex-grow:1}:host .mobile-pane .title-mobile{display:flex;flex-direction:row-reverse;justify-content:space-between;margin:var(--theme-space-1) var(--theme-space-2)}:host .side-pane-content{padding:var(--theme-space-1) var(--theme-space-2) var(--theme-space-3) var(--theme-space-2);overflow:auto;height:100%;width:100%}:host .slot-header{max-height:2rem;max-width:unset}:host .slot-header.rotate{max-height:unset;max-width:2rem}:host(.not-visible){display:none}:host(.nav-left-border){border-left:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.left-pane-border){border-right:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.right-pane-border){border-left:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.top-pane-border){border-bottom:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.bottom-pane-border){border-top:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.mobile-overlay){width:100%;position:absolute;z-index:100 !important}:host(.mobile-overlay) .side-pane-content{height:calc(100% - 2.5rem)}:host(.mobile-border-top){border-bottom:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.mobile-border-bottom){border-top:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.top-expanded){top:0}:host(.bottom-expanded){bottom:0}:host(.left-right-pane){height:100%}:host(.top-bottom-pane){width:100%}";
-const Pane = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.expandedChanged = createEvent(this, "expandedChanged", 7);
-    this.variantChanged = createEvent(this, "variantChanged", 7);
-    this.borderlessChanged = createEvent(this, "borderlessChanged", 7);
-    this.hideOnCollapseChanged = createEvent(this, "hideOnCollapseChanged", 7);
-    this.slotChanged = createEvent(this, "slotChanged", 7);
-    this.variant = "inline";
-    this.hideOnCollapse = false;
-    this.size = "240px";
-    this.borderless = false;
-    this.expanded = false;
-    this.composition = "top";
-    this.closeOnClickOutside = false;
-    this.ignoreLayoutSettings = false;
-    this.isMobile = false;
-    this.expandIcon = "";
-    this.showContent = false;
-    this.minimizeIcon = "";
-    this.floating = false;
-    this.parentWidthPx = 0;
-    this.parentHeightPx = 0;
-    this.animations = /* @__PURE__ */ new Map();
-    this.animationCounter = 0;
-  }
-  get currentSlot() {
-    return this.hostElement.getAttribute("slot");
-  }
-  get isBottomTopPane() {
-    return this.composition === "bottom" || this.composition === "top";
-  }
-  get isLeftRightPane() {
-    return this.composition === "left" || this.composition === "right";
-  }
-  get isMobileTop() {
-    return this.composition === "top" || this.composition === "left";
-  }
-  disconnectedCallback() {
-    var _a, _b, _c;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-    (_c = this.disposableWindowClick) === null || _c === void 0 ? void 0 : _c.call(this);
-  }
-  onExpandedChange() {
-    var _a;
-    if (!this.closeOnClickOutside || !this.expanded) {
-      (_a = this.disposableWindowClick) === null || _a === void 0 ? void 0 : _a.call(this);
-      return;
-    }
-    this.disposableWindowClick = addDisposableEventListener(window, "click", (event) => {
-      var _a2;
-      const path = ((_a2 = event.composedPath) === null || _a2 === void 0 ? void 0 : _a2.call(event)) || [];
-      if (!path.includes(this.hostElement)) {
-        this.dispatchExpandedChangedEvent();
-      }
-    });
-  }
-  componentWillLoad() {
-    this.onExpandedChange();
-    this.setIcons();
-    this.floating = this.variant === "floating";
-    if (this.expanded) {
-      this.onParentSizeChange();
-    }
-    this.isMobile = matchBreakpoint("sm");
-    applicationLayoutService.onChange.on(() => {
-      this.isMobile = matchBreakpoint("sm");
-    });
-    if (this.currentSlot) {
-      this.setPosition(this.currentSlot);
-    }
-    this.mutationObserver = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === "attributes" && mutation.attributeName === "slot") {
-          const newSlot = this.currentSlot;
-          const oldSlot = mutation.oldValue;
-          if (newSlot !== oldSlot) {
-            this.slotChanged.emit({
-              slot: oldSlot !== null && oldSlot !== void 0 ? oldSlot : "",
-              newSlot: newSlot !== null && newSlot !== void 0 ? newSlot : ""
-            });
-            if (newSlot) {
-              this.setPosition(newSlot);
-            }
-          }
-        }
-      });
-    });
-    this.mutationObserver.observe(this.hostElement, {
-      attributes: true,
-      attributeOldValue: true
-    });
-    const parentElement = this.hostElement.parentElement;
-    this.resizeObserver = new ResizeObserver((entries) => {
-      this.parentWidthPx = entries[0].borderBoxSize[0].inlineSize;
-      this.parentHeightPx = entries[0].borderBoxSize[0].blockSize;
-    });
-    if (parentElement)
-      this.resizeObserver.observe(parentElement);
-  }
-  setPosition(value) {
-    if (Pane.validPositions.includes(value)) {
-      this.composition = value;
-    }
-  }
-  getExpandPaneSize() {
-    let expandPaneSize;
-    if (this.isBottomTopPane) {
-      if (this.size.includes("px")) {
-        const referenceValue = Math.round(this.parentHeightPx / 2);
-        const currentValue = Number(this.size.replace("px", ""));
-        if (referenceValue && referenceValue < currentValue) {
-          expandPaneSize = `${referenceValue}px`;
-        } else {
-          expandPaneSize = `${currentValue}px`;
-        }
-      } else {
-        if (this.size === "50%") {
-          expandPaneSize = `${Math.round(this.parentHeightPx / 2)}px`;
-        } else {
-          expandPaneSize = `${Math.round(this.parentHeightPx / 3)}px`;
-        }
-      }
-    } else {
-      if (this.size.includes("px")) {
-        const referenceValue = Math.round(this.parentWidthPx / 2);
-        const currentValue = Number(this.size.replace("px", ""));
-        if (referenceValue && referenceValue < currentValue) {
-          expandPaneSize = `${referenceValue}px`;
-        } else {
-          expandPaneSize = `${currentValue}px`;
-        }
-      } else {
-        if (this.size === "50%") {
-          expandPaneSize = `${Math.round(this.parentWidthPx / 2)}px`;
-        } else {
-          expandPaneSize = `${Math.round(this.parentWidthPx / 3)}px`;
-        }
-      }
-    }
-    return expandPaneSize;
-  }
-  setIcons() {
-    const { expandIcon, minimizeIcon } = this.getIconNames();
-    this.expandIcon = expandIcon;
-    this.minimizeIcon = minimizeIcon;
-  }
-  getIconNames() {
-    let expandIcon = "";
-    let minimizeIcon = "";
-    switch (this.composition) {
-      case "left":
-        expandIcon = this.isMobile ? iconDoubleChevronUp : iconDoubleChevronLeft;
-        minimizeIcon = this.isMobile ? iconDoubleChevronDown : iconDoubleChevronRight;
-        break;
-      case "right":
-        expandIcon = this.isMobile ? iconDoubleChevronDown : iconDoubleChevronRight;
-        minimizeIcon = this.isMobile ? iconDoubleChevronUp : iconDoubleChevronLeft;
-        break;
-      case "bottom":
-        expandIcon = iconDoubleChevronDown;
-        minimizeIcon = iconDoubleChevronUp;
-        break;
-      case "top":
-        expandIcon = iconDoubleChevronUp;
-        minimizeIcon = iconDoubleChevronDown;
-        break;
-    }
-    return { expandIcon, minimizeIcon };
-  }
-  getKey() {
-    return (this.animationCounter++).toString();
-  }
-  animateVerticalFadeIn(size) {
-    let key = this.getKey();
-    let animation = animate(this.hostElement, {
-      duration: Animation.mediumTime,
-      width: size,
-      easing: "easeInOutSine",
-      delay: 0,
-      begin: () => {
-        if (!this.expanded) {
-          this.showContent = false;
-          this.animateVerticalPadding("0px");
-        } else {
-          this.animateVerticalPadding("8px");
-        }
-      },
-      complete: () => {
-        if (this.expanded) {
-          this.showContent = true;
-        }
-        this.animations.delete(key);
-      }
-    });
-    this.animations.set(key, animation);
-  }
-  animateHorizontalFadeIn(size) {
-    let key = this.getKey();
-    let animation = animate(this.hostElement, {
-      duration: Animation.mediumTime,
-      height: size,
-      easing: "easeInOutSine",
-      delay: 0,
-      onBegin: () => {
-        if (!this.expanded) {
-          this.showContent = false;
-          if (!this.isMobile)
-            this.animateHorizontalPadding("0px");
-        } else {
-          if (!this.isMobile)
-            this.animateHorizontalPadding("8px");
-        }
-      },
-      onComplete: () => {
-        if (this.expanded) {
-          this.showContent = true;
-        }
-        this.animations.delete(key);
-      }
-    });
-    this.animations.set(key, animation);
-  }
-  removePadding() {
-    animate(this.hostElement.shadowRoot.querySelector("#title-div"), {
-      duration: 0,
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingLeft: 0,
-      paddingRight: 0,
-      delay: 0
-    });
-  }
-  animateHorizontalPadding(size, duration = Animation.mediumTime) {
-    let key = this.getKey();
-    let animation = animate(this.hostElement.shadowRoot.querySelector("#title-div"), {
-      duration,
-      paddingTop: size,
-      paddingBottom: size,
-      easing: "easeInOutSine",
-      delay: 0,
-      onComplete: () => {
-        this.animations.delete(key);
-      }
-    });
-    this.animations.set(key, animation);
-  }
-  animateVerticalPadding(size, duration = Animation.mediumTime) {
-    let key = this.getKey();
-    let animation = animate(this.hostElement.shadowRoot.querySelector("#title-div"), {
-      duration,
-      paddingLeft: size,
-      paddingRight: size,
-      easing: "easeInOutSine",
-      delay: 0,
-      onComplete: () => {
-        this.animations.delete(key);
-      }
-    });
-    this.animations.set(key, animation);
-  }
-  clearAnimations() {
-    this.animations.forEach((animation) => animation.pause());
-    this.animations.clear();
-    this.animationCounter = 0;
-  }
-  onMobileChange() {
-    this.setIcons();
-    this.hostElement.style.removeProperty("width");
-    this.hostElement.style.removeProperty("height");
-    this.hostElement.style.removeProperty("min-height");
-    this.onParentSizeChange();
-  }
-  onPositionChange() {
-    this.setIcons();
-    this.hostElement.style.removeProperty("width");
-    this.hostElement.style.removeProperty("height");
-    this.onParentSizeChange();
-  }
-  onHideOnCollapseChange(value) {
-    var _a;
-    this.onParentSizeChange();
-    this.hideOnCollapseChanged.emit({
-      slot: (_a = this.currentSlot) !== null && _a !== void 0 ? _a : "",
-      hideOnCollapse: value
-    });
-  }
-  onVariantChange(value) {
-    var _a;
-    this.floating = value === "floating";
-    this.variantChanged.emit({
-      slot: (_a = this.currentSlot) !== null && _a !== void 0 ? _a : "",
-      variant: value
-    });
-  }
-  onBorderlessChange(value) {
-    var _a;
-    this.borderlessChanged.emit({
-      slot: (_a = this.currentSlot) !== null && _a !== void 0 ? _a : "",
-      borderless: value
-    });
-  }
-  dispatchExpandedChangedEvent() {
-    var _a;
-    const event = this.expandedChanged.emit({
-      slot: (_a = this.currentSlot) !== null && _a !== void 0 ? _a : "",
-      expanded: !this.expanded
-    });
-    if (!event.defaultPrevented) {
-      this.expanded = !this.expanded;
-    }
-  }
-  onParentSizeChange() {
-    this.clearAnimations();
-    this.removePadding();
-    if (this.expanded) {
-      if (this.isMobile) {
-        this.hostElement.style.height = "100%";
-      } else {
-        const expandPaneSize = this.getExpandPaneSize();
-        if (this.isBottomTopPane) {
-          this.hostElement.style.height = expandPaneSize;
-          this.animateHorizontalPadding("8px", 0);
-        } else {
-          this.hostElement.style.width = expandPaneSize;
-          this.animateVerticalPadding("8px", 0);
-        }
-      }
-      this.showContent = true;
-    } else {
-      this.showContent = false;
-      if (this.isMobile) {
-        this.hostElement.style.height = this.hideOnCollapse ? "0" : Pane.collapsedPaneMobile;
-      } else {
-        if (this.isBottomTopPane) {
-          this.hostElement.style.height = this.hideOnCollapse ? "0" : Pane.collapsedPane;
-        } else {
-          this.hostElement.style.width = this.hideOnCollapse ? "0" : Pane.collapsedPane;
-        }
-      }
-    }
-  }
-  onSizeChange() {
-    if (this.expanded) {
-      if (this.isMobile) {
-        this.hostElement.style.minHeight = this.hideOnCollapse ? "0" : Pane.collapsedPaneMobile;
-        this.animateHorizontalFadeIn("100%");
-      } else {
-        const expandPaneSize = this.getExpandPaneSize();
-        if (this.isBottomTopPane) {
-          this.hostElement.style.height = this.hideOnCollapse ? "0" : Pane.collapsedPane;
-          this.animateHorizontalFadeIn(expandPaneSize);
-        } else {
-          this.hostElement.style.width = this.hideOnCollapse ? "0" : Pane.collapsedPane;
-          this.animateVerticalFadeIn(expandPaneSize);
-        }
-      }
-    } else {
-      this.showContent = false;
-      if (this.isMobile) {
-        this.hostElement.style.height = Pane.collapsedPaneMobile;
-      } else {
-        if (this.isBottomTopPane) {
-          this.animateHorizontalFadeIn(Pane.collapsedPane);
-        } else {
-          this.animateVerticalFadeIn(Pane.collapsedPane);
-        }
-      }
-    }
-  }
-  render() {
-    const rotate = !this.expanded && !this.isMobile && this.isLeftRightPane;
-    return h(Host, { key: "5655829a1a9d23b744cde83c51912a44c297c0be", class: {
-      "floating-pane": this.floating,
-      "inline-pane": !this.floating,
-      "mobile-overlay": this.expanded && this.isMobile,
-      "top-expanded": this.expanded && this.isMobileTop && this.isMobile,
-      "bottom-expanded": this.expanded && !this.isMobileTop && this.isMobile,
-      "top-bottom-pane": this.isBottomTopPane && !this.isMobile,
-      "left-right-pane": this.isLeftRightPane && !this.isMobile,
-      [`${this.composition}-pane-border`]: !this.borderless && !this.isMobile && !this.floating,
-      "nav-left-border": !this.borderless && !this.isMobile && this.composition !== "right" && this.floating,
-      "mobile-border-top": !this.borderless && this.isMobileTop && this.isMobile && !this.expanded && !this.floating,
-      "mobile-border-bottom": !this.borderless && !this.isMobileTop && this.isMobile && !this.expanded && !this.floating,
-      "not-visible": this.hideOnCollapse && !this.expanded
-    }, "aria-expanded": a11yBoolean(this.expanded) }, h("aside", { key: "c354042a5d5c30be1e13602b26be9c59c9d6e293", id: `pane-${this.composition}`, class: {
-      "top-bottom-pane": this.isBottomTopPane && !this.isMobile,
-      "left-right-pane": this.isLeftRightPane && !this.isMobile,
-      "mobile-pane": this.isMobile,
-      expanded: this.expanded
-    } }, h("div", { key: "7b5115f90b02f1eeb4086e9a39abaf7f3a9f2301", id: "title-div", class: {
-      title: !this.isMobile && !this.hideOnCollapse && !this.showContent,
-      "title-finished": !this.isMobile && !this.hideOnCollapse && this.showContent,
-      "title-expanded": !this.isMobile && !this.hideOnCollapse && this.expanded,
-      "title-hide-on-collapse": !this.isMobile && this.hideOnCollapse,
-      "title-mobile": this.isMobile,
-      "header-gap": !this.isMobile && !this.hideOnCollapse
-    } }, h("ix-icon-button", { key: "b10c65e60762410373d745a4514fe7bc0a774b7c", class: "title-icon", size: "24", icon: this.expanded ? this.isMobile || this.hideOnCollapse ? iconClose : this.expandIcon : this.minimizeIcon, iconColor: this.expanded && (this.isMobile || this.hideOnCollapse) ? "color-soft-text" : void 0, variant: "subtle-tertiary", onClick: () => this.dispatchExpandedChangedEvent(), "aria-controls": `pane-${this.composition}`, "aria-label": this.ariaLabelCollapseCloseButton }), h("div", { key: "7b0a88701252662ad99b0f2d133d4ac64a0259dd", class: {
-      "title-text": true,
-      rotate
-    } }, this.icon && h("ix-icon", { key: "d3b0c6002271434c710d3e2bf93fc7c6fb95f466", class: "pane-icon", size: "24", name: this.icon, "aria-label": this.ariaLabelIcon }), h("div", { key: "971a85390b48c8259bdb5931fe89ebc61f2e14ca", class: "title-text-overflow" }, h("ix-typography", { key: "8e164a15a3176e56d1f43123f9fd4ac216af7abf", format: "h4" }, this.heading)), this.expanded && h("div", { key: "85e105570a86dc944969aa9036eb5f332c51096d", class: "slot-header" }, h("slot", { key: "84b8c75d01ba8ae5b3a97e4bc6391fb5e3812f94", name: "header" })))), h("div", { key: "3f6fe81218741df36010b2b0743dae4fba7ee729", class: "side-pane-content", hidden: !this.showContent }, h("slot", { key: "1b2c198261c7ec9f960a1be4773626408029c943" }))));
-  }
-  get hostElement() {
-    return getElement(this);
-  }
-  static get watchers() {
-    return {
-      "expanded": ["onExpandedChange", "onSizeChange"],
-      "isMobile": ["onMobileChange"],
-      "composition": ["onPositionChange"],
-      "hideOnCollapse": ["onHideOnCollapseChange"],
-      "variant": ["onVariantChange"],
-      "borderless": ["onBorderlessChange"],
-      "parentHeightPx": ["onParentSizeChange"],
-      "parentWidthPx": ["onParentSizeChange"],
-      "size": ["onSizeChange"]
-    };
-  }
-};
-Pane.validPositions = ["top", "left", "bottom", "right"];
-Pane.collapsedPane = "40px";
-Pane.collapsedPaneMobile = "48px";
-Pane.style = paneCss;
-export {
-  Pane as ix_pane
-};

package/build/static/demo/v2/preview/html/assets/ix-pill.entry-6Eif6jKe.js

@@ -1,68 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from "./global-X2k8gwUL.js";
-import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
-const pillCss = ":host{display:inline-block;position:relative;height:1.25rem;max-height:1.25rem;margin-left:0.25rem}: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}.container{display:inline-flex;width:inherit;max-width:100%;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;vertical-align:top;height:2rem;max-height:2rem;cursor:default}.container .content-wrapper{display:inline-flex;align-items:center;flex:1;min-width:0}.container .with-icon{margin-right:0.25rem}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.centerContent .content-wrapper{justify-content:center;text-align:center}.container.outline.icon{padding-left:calc(0.75rem - 1px)}.container.outline.icon.alarm .with-icon{color:var(--theme-color-alarm)}.container.outline.icon.critical .with-icon{color:var(--theme-color-critical)}.container.outline.icon.warning .with-icon{color:var(--theme-color-warning-text)}.container.outline.icon.info .with-icon{color:var(--theme-color-info)}.container.outline.icon.neutral .with-icon{color:var(--theme-color-neutral)}.container.outline.icon.success .with-icon{color:var(--theme-color-success)}.container.outline:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-primary-outline--background);border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-outline--color);--ix-icon-button-color:var(--theme-chip-outline--color)}.container.primary.outline .with-icon{color:var(--theme-color-primary)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-alarm)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-critical)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-warning)}.container.info{color:var(--theme-color-info--contrast)}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-info)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-neutral)}.container.success{color:var(--theme-color-success--contrast)}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-success)}:host .container{height:100%;justify-content:center}:host .container .with-icon{margin-right:0}:host .container.outline{background-color:var(--theme-pill-outline--background)}:host .container.outline.icon{padding-left:0.4375rem;padding-right:0.4375rem}:host .container:not(.outline).icon{padding-left:0.5rem;padding-right:0.5rem}:host .with-gap{gap:0.25rem}:host(.align-left) .container{justify-content:flex-start}";
-const Pill = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.variant = "primary";
-    this.outline = false;
-    this.alignLeft = false;
-    this.tooltipText = false;
-    this.iconOnly = false;
-    this.containerElementRef = makeRef();
-  }
-  componentWillLoad() {
-    this.checkIfContentAvailable();
-  }
-  checkIfContentAvailable() {
-    const hasChildren = this.hostElement.children.length > 0;
-    const hasTextContent = !!this.hostElement.textContent;
-    this.iconOnly = !hasChildren && !hasTextContent;
-  }
-  getTooltip() {
-    var _a;
-    if (!this.tooltipText && !this.hostElement.hasAttribute("tooltip-text")) {
-      return null;
-    }
-    const text = typeof this.tooltipText === "string" && this.tooltipText.trim() ? this.tooltipText : (_a = this.hostElement.textContent) === null || _a === void 0 ? void 0 : _a.trim();
-    return h("ix-tooltip", { for: this.containerElementRef.waitForCurrent() }, text);
-  }
-  render() {
-    let customStyle = {};
-    if (this.variant === "custom") {
-      customStyle = {
-        color: this.pillColor,
-        [this.outline ? "borderColor" : "backgroundColor"]: this.background
-      };
-    }
-    return h(Host, { key: "92cc7c2458f3bbf26a62fb641a6a69c279aca3d4", style: this.variant === "custom" ? {
-      "--ix-icon-button-color": this.pillColor
-    } : {}, class: {
-      "align-left": this.alignLeft
-    } }, h("div", { key: "4b6a3abf6c93b8d8705e9e95738b0e2f1b270465", ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
-      container: true,
-      outline: this.outline,
-      inactive: false,
-      alarm: this.variant === "alarm",
-      critical: this.variant === "critical",
-      info: this.variant === "info",
-      neutral: this.variant === "neutral",
-      primary: this.variant === "primary",
-      success: this.variant === "success",
-      warning: this.variant === "warning",
-      custom: this.variant === "custom",
-      closable: false,
-      icon: !!this.icon,
-      "with-gap": !this.iconOnly
-    } }, this.icon && h("ix-icon", { key: "4739a22536b12b5124fc11a6f72f664539c2b662", class: {
-      "with-icon": true
-    }, name: this.icon, size: "16", "aria-label": this.ariaLabelIcon }), h("span", { key: "90457e143210a0f070b775ba176aa35946e910c6", class: "slot-container" }, h("slot", { key: "bd7e9da045b7536b65a4c92ec37197bbfda0b478", onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip());
-  }
-  get hostElement() {
-    return getElement(this);
-  }
-};
-Pill.style = pillCss;
-export {
-  Pill as ix_pill
-};

package/build/static/demo/v2/preview/html/assets/ix-progress-indicator.entry-rHozb0Tl.js

@@ -1,108 +0,0 @@
-import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from "./global-X2k8gwUL.js";
-import { U as iconCirclePause, c as iconSuccess, a as iconWarning, i as iconInfo, b as iconError } from "./index-8HpPmDK_-DinFJk0z.js";
-function LinearBar({ value, status }) {
-  return h("div", { class: `linear-progress-container ${status}` }, h("div", { class: "progress", role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { class: {
-    "progress-bar": true
-  }, style: { width: `${value}%` }, "data-value": value })));
-}
-function getCircularSize(size) {
-  switch (size) {
-    case "xs":
-      return 16;
-    case "sm":
-      return 24;
-    case "md":
-      return 32;
-    case "lg":
-      return 48;
-    case "xl":
-      return 64;
-    default:
-      return 32;
-  }
-}
-const CircularProgress = (props, children) => {
-  const { value, size, alignment } = props;
-  const sizeInPixel = getCircularSize(size);
-  const radius = sizeInPixel / 2;
-  const circumference = 2 * Math.PI * radius;
-  const percentage = Math.round(circumference * ((100 - value) / 100));
-  const slotInsideCircular = size === "lg" || size === "xl";
-  return h("div", { class: {
-    "circular-progress-container": true,
-    [`align-${alignment}`]: !!alignment,
-    [props.status]: true
-  } }, h("svg", { width: sizeInPixel, height: sizeInPixel, viewBox: `-${sizeInPixel * 0.125} -${sizeInPixel * 0.125} ${sizeInPixel * 1.25} ${sizeInPixel * 1.25}`, version: "1.1", xmlns: "http://www.w3.org/2000/svg", style: { transform: "rotate(-90deg)" } }, h("circle", { r: radius, cx: radius, cy: radius, fill: "transparent", stroke: "var(--ix-progress-indicator-track-color)", "stroke-width": `3px` }), percentage > 0 && h("circle", { r: radius, cx: radius, cy: radius, stroke: "var(--ix-progress-indicator-color)", "stroke-width": "3px", "stroke-dashoffset": `${percentage}px`, fill: "transparent", "stroke-dasharray": `${circumference}px` }), h("foreignObject", { x: `0px`, y: `0px`, width: `${sizeInPixel}px`, height: `${sizeInPixel}px`, style: {
-    transform: `rotate(90deg) translate(0px, -${sizeInPixel}px)`
-  } }, slotInsideCircular && h("div", { class: "slotted-container slotted-container-inside" }, children))), !slotInsideCircular && h("div", { class: "slotted-container" }, children));
-};
-const progressIndicatorCss = ":host{display:block;position:relative;width:24rem;height:-moz-fit-content;height:fit-content}:host .progress-container{display:flex;width:100%;align-items:center;gap:0.25rem;flex-wrap:nowrap}:host .label{margin:0.5rem 0 0.25rem 0}:host .helper-text{display:flex;align-items:center;margin:0.25rem 0px;gap:0.25rem;color:var(--theme-progress-indicator-helper--color)}:host .helper-text ix-icon{margin:0.125rem;color:var(--theme-progress-indicator-helper-icon--color)}:host .helper-text.success{color:var(--theme-progress-indicator-helper-success--color)}:host .helper-text.success ix-icon{color:var(--theme-progress-indicator-helper-icon-success--color)}:host .helper-text.error{color:var(--theme-progress-indicator-helper-error--color)}:host .helper-text.error ix-icon{color:var(--theme-progress-indicator-helper-icon-error--color)}:host .helper-text.info{color:var(--theme-progress-indicator-helper-info--color)}:host .helper-text.info ix-icon{color:var(--theme-progress-indicator-helper-icon-info--color)}:host .helper-text.warning{color:var(--theme-progress-indicator-helper-warning--color)}:host .helper-text.warning ix-icon{color:var(--theme-progress-indicator-helper-icon-warning--color)}:host .helper-text.paused{color:var(--theme-progress-indicator-helper-paused--color)}:host .helper-text.paused ix-icon{color:var(--theme-progress-indicator-helper-icon-paused--color)}:host .helper-text .text.align-left{text-align:start}:host .helper-text .text.align-right{text-align:end}:host .helper-text .text.align-center{text-align:center}:host .progress-indicator{display:flex;flex-direction:column}:host .progress-indicator.text-center{align-items:center}:host .progress-indicator.text-left{align-items:flex-start}:host .progress-indicator.text-right{align-items:flex-end}:host .progress-indicator{--ix-progress-indicator-margin:0.5rem 0;height:100%}:host .progress-indicator.xs{--ix-progress-indicator-height:0.125rem;--ix-progress-indicator-margin:0.25rem 0}:host .progress-indicator.sm{--ix-progress-indicator-height:0.25rem;--ix-progress-indicator-margin:0.375rem 0}:host .progress-indicator.md{--ix-progress-indicator-height:0.5rem}:host .progress-indicator.lg{--ix-progress-indicator-height:1rem}:host .progress-indicator.xl{--ix-progress-indicator-height:1.5rem}:host .progress-indicator{--ix-progress-indicator-color:var(\n    --theme-progress-indicator-fill--background\n  )}:host .progress-indicator.success{--ix-progress-indicator-color:var(\n    --theme-progress-indicator-fill-success--background\n  )}:host .progress-indicator.error{--ix-progress-indicator-color:var(\n    --theme-progress-indicator-fill-error--background\n  )}:host .progress-indicator.info{--ix-progress-indicator-color:var(\n    --theme-progress-indicator-fill-info--background\n  )}:host .progress-indicator.warning{--ix-progress-indicator-color:var(\n    --theme-progress-indicator-fill-warning--background\n  )}:host .progress-indicator.paused{--ix-progress-indicator-color:var(\n    --theme-progress-indicator-fill-paused--background\n  )}:host(.linear) .progress-indicator.xs{--ix-progress-indicator-height:0.125rem}:host(.linear) .progress-indicator.sm{--ix-progress-indicator-height:0.25rem}:host(.linear) .progress-indicator.md{--ix-progress-indicator-height:0.5rem}:host(.linear) .progress-indicator.lg{--ix-progress-indicator-height:1rem}:host(.linear) .progress-indicator.xl{--ix-progress-indicator-height:1.5rem}:host(.linear) .linear-progress-container{width:100%;height:var(--ix-progress-indicator-height);background-color:var(--theme-progress-indicator-track--background);border-radius:2px;overflow:hidden;margin:var(--ix-progress-indicator-margin, 0.5rem 0)}:host(.linear) .linear-progress-container.success{background-color:var(--theme-progress-indicator-track-success--background)}:host(.linear) .linear-progress-container.error{background-color:var(--theme-progress-indicator-track-error--background)}:host(.linear) .linear-progress-container.info{background-color:var(--theme-progress-indicator-track-info--background)}:host(.linear) .linear-progress-container.warning{background-color:var(--theme-progress-indicator-track-warning--background)}:host(.linear) .linear-progress-container.paused{background-color:var(--theme-progress-indicator-track-paused--background)}:host(.linear) .progress{width:100%;height:100%;position:relative}:host(.linear) .progress-bar{height:100%;background-color:var(--ix-progress-indicator-color);transition:width 0.3s ease}:host(.linear) .linear-slot{min-width:2.25rem}:host(.circular) .circular-progress-container{--ix-progress-indicator-track-color:var(\n    --theme-progress-indicator-track--background\n  );display:flex;align-items:center;width:100%;gap:0.25rem;margin:var(--ix-progress-indicator-margin, 0.5rem 0)}:host(.circular) .circular-progress-container.align-left{justify-content:flex-start}:host(.circular) .circular-progress-container.align-center{justify-content:center}:host(.circular) .circular-progress-container.align-right{justify-content:flex-end}:host(.circular) .circular-progress-container.success{--ix-progress-indicator-track-color:var(\n    --theme-progress-indicator-track-success--background\n  )}:host(.circular) .circular-progress-container.error{--ix-progress-indicator-track-color:var(\n    --theme-progress-indicator-track-error--background\n  )}:host(.circular) .circular-progress-container.info{--ix-progress-indicator-track-color:var(\n    --theme-progress-indicator-track-info--background\n  )}:host(.circular) .circular-progress-container.warning{--ix-progress-indicator-track-color:var(\n    --theme-progress-indicator-track-warning--background\n  )}:host(.circular) .circular-progress-container.paused{--ix-progress-indicator-track-color:var(\n    --theme-progress-indicator-track-paused--background\n  )}:host(.circular) .slotted-container{height:100%}:host(.circular) .slotted-container.slotted-container-inside{display:flex;align-items:center;justify-content:center;width:100%;height:100%}";
-const ProgressIndicator = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.type = "linear";
-    this.size = "md";
-    this.value = 0;
-    this.min = 0;
-    this.max = 100;
-    this.status = "default";
-    this.textAlignment = "left";
-    this.showTextAsTooltip = false;
-  }
-  getHelperText() {
-    let icon = null;
-    switch (this.status) {
-      case "error":
-        icon = iconError;
-        break;
-      case "info":
-        icon = iconInfo;
-        break;
-      case "warning":
-        icon = iconWarning;
-        break;
-      case "success":
-        icon = iconSuccess;
-        break;
-      case "paused":
-        icon = iconCirclePause;
-        break;
-      default:
-        icon = null;
-    }
-    if (!this.helperText) {
-      return h("slot", { name: "helper-text" });
-    }
-    return h("div", { class: {
-      "helper-text": true,
-      [this.status]: true
-    } }, icon && h("ix-icon", { name: icon, size: "16" }), h("div", { class: {
-      text: true,
-      "align-left": this.textAlignment === "left",
-      "align-center": this.textAlignment === "center",
-      "align-right": this.textAlignment === "right"
-    } }, this.helperText), h("slot", { name: "helper-text" }));
-  }
-  render() {
-    const normalizedValue = (this.value - this.min) / (this.max - this.min) * 100;
-    const clampedValue = Math.max(0, Math.min(normalizedValue, 100));
-    return h(Host, { key: "2b61ee201b404c74d94b27b1bc8e847525df16f3", class: {
-      linear: this.type === "linear",
-      circular: this.type === "circular"
-    }, tabIndex: -1 }, h("div", { key: "24dfa287f33f59b789e8903a9a57dc77150446ab", class: {
-      "progress-indicator": true,
-      [this.size]: true,
-      [this.status]: true,
-      ["text-center"]: this.textAlignment === "center",
-      ["text-left"]: this.textAlignment === "left",
-      ["text-right"]: this.textAlignment === "right"
-    } }, this.label && h("ix-typography", { key: "fc63404e36273a9c29b4b9827ac43db007ffe0da", format: "label", textColor: this.status === "error" ? "alarm" : "soft", class: "label" }, this.label), h("div", { key: "5289e307d4488eee7494809b478fdb86077b666c", class: "progress-container" }, this.type === "linear" ? h(Fragment, null, h(LinearBar, { value: clampedValue, status: this.status }), h("div", { class: "linear-slot" }, h("slot", null))) : h(CircularProgress, { status: this.status, alignment: this.textAlignment, value: clampedValue, size: this.size }, h("slot", null))), this.showTextAsTooltip === true && this.helperText ? h("ix-tooltip", { for: this.hostElement, showDelay: 500, placement: "bottom" }, this.getHelperText()) : this.getHelperText()));
-  }
-  get hostElement() {
-    return getElement(this);
-  }
-};
-ProgressIndicator.style = progressIndicatorCss;
-export {
-  ProgressIndicator as ix_progress_indicator
-};

package/build/static/demo/v2/preview/html/assets/ix-push-card.entry-C2R2veCB.js

@@ -1,18 +0,0 @@
-import { r as registerInstance, h, H as Host } from "./global-X2k8gwUL.js";
-const pushCardCss = ":host{display:block;position:relative}:host ix-card{cursor:default}:host ix-card-accordion{cursor:pointer}:host .icon{height:2.5rem;width:2.5rem}:host ix-card-title{height:2.5rem}:host ix-card-content{height:11rem}:host(.card-outline) ix-card-content{border-bottom:var(--theme-push-card--border-width) solid var(--theme-push-card-outline-accordion--border-color)}:host(.card-filled) ix-card-content{border-bottom:var(--theme-push-card--border-width) solid var(--theme-push-card-filled-accordion--border-color)}:host(.card-alarm) ix-card-content{border-bottom:var(--theme-push-card--border-width) solid var(--theme-push-card-alarm-accordion--border-color)}:host(.card-critical) ix-card-content{border-bottom:var(--theme-push-card--border-width) solid var(--theme-push-card-critical-accordion--border-color)}:host(.card-warning) ix-card-content{border-bottom:var(--theme-push-card--border-width) solid var(--theme-push-card-warning-accordion--border-color)}:host(.card-success) ix-card-content{border-bottom:var(--theme-push-card--border-width) solid var(--theme-push-card-success-accordion--border-color)}:host(.card-info) ix-card-content{border-bottom:var(--theme-push-card--border-width) solid var(--theme-push-card-info-accordion--border-color)}:host(.card-neutral) ix-card-content{border-bottom:var(--theme-push-card--border-width) solid var(--theme-push-card-neutral-accordion--border-color)}:host(.card-primary) ix-card-content{border-bottom:var(--theme-push-card--border-width) solid var(--theme-push-card-primary-accordion--border-color)}";
-const PushCard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.variant = "outline";
-    this.expanded = false;
-    this.passive = false;
-  }
-  render() {
-    var _a;
-    return h(Host, { key: "b5d6c4c34598670f4e8ae1228843b9afde2ef241", class: `card-${this.variant}` }, h("ix-card", { key: "a62c8dfd617a8c141dd6ccf3c95da7877d44f7b7", variant: this.variant, passive: this.passive }, h("ix-card-content", { key: "4367ef2c91bf7b5ee9adef7c42b1a3f801b83bf9" }, h("ix-card-title", { key: "e17700e10181981d14e90c83f7f7e400a618df6e" }, this.icon ? h("ix-icon", { class: "icon", name: this.icon, size: "32", "aria-label": this.ariaLabelIcon }) : null, h("ix-typography", { key: "d10982fa32f721d09a4bb829dbf4ce7980ad1572", format: "display-xxl" }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: "2c5ba728f0ed723750fd3daa37c0c849ef791e52", name: "title-action" })), h("ix-typography", { key: "b74801e57b670bdf5f1bfcfd3404502e118c00a5", format: "h4" }, this.heading), h("ix-typography", { key: "4869e7565d8e301551efae7ca8679bfb1df02d75" }, this.subheading)), h("ix-card-accordion", { key: "5fda212d77b6c8e1664d0c1a855b7b2e6a2ba26a", collapse: !this.expanded, variant: this.variant }, h("slot", { key: "9cfe767d08c2c49811d7d6f8ee1cba049606977b" }))));
-  }
-};
-PushCard.style = pushCardCss;
-export {
-  PushCard as ix_push_card
-};