@siemens/ix-docs 4.3.0 → 4.4.0

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

@@ -0,0 +1,466 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { E as iconDoubleChevronDown, F as iconDoubleChevronRight, G as iconDoubleChevronUp, H as iconDoubleChevronLeft, q as iconClose } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { a as animate } from "./anime.esm-DhE1t8Qh-cS95-bBh.js";
+import { A as Animation } from "./animation-BLaucX4x-BWLd_Wig.js";
+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-DAzBNVe7-CO1Uj69l.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.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.setIcons();
+    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 newExpandedValue = !this.expanded;
+    const event = this.expandedChanged.emit({
+      slot: (_a = this.currentSlot) !== null && _a !== void 0 ? _a : "",
+      expanded: newExpandedValue
+    });
+    if (!event.defaultPrevented) {
+      this.expanded = newExpandedValue;
+    }
+  }
+  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;
+    let paneButtonAriaLabel;
+    if (this.ariaLabelCollapseCloseButton) {
+      paneButtonAriaLabel = this.ariaLabelCollapseCloseButton;
+    } else if (this.expanded) {
+      paneButtonAriaLabel = this.isMobile || this.hideOnCollapse ? "Close pane" : "Collapse pane";
+    } else {
+      paneButtonAriaLabel = "Expand pane";
+    }
+    return h(Host, { key: "721b37ecf81c48cf26977b3e2db0f76541632096", 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: "206a7094a94dcb5156b1ed407dd7db20838352bc", 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: "1ecb31589789658568a199f696876aac4dfdbd96", 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: "bfa93a835e4920d11630a71c1a0b39f92df350ab", 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": paneButtonAriaLabel }), h("div", { key: "3b44fd29336d3f5c101a5d686980b2393a1f2c40", class: {
+      "title-text": true,
+      rotate
+    } }, this.icon && h("ix-icon", { key: "d34df615df28f1ae6914c0a857735116d77502bc", class: "pane-icon", size: "24", name: this.icon, "aria-label": this.ariaLabelIcon }), h("div", { key: "4d02fb8581426e62c241a2c1e6c5540831a367be", class: "title-text-overflow" }, h("ix-typography", { key: "203fa19a4972dc9c3ed8654c8c6d176fd168437d", format: "h4" }, this.heading)), this.expanded && h("div", { key: "d0aca67aed9c641414da008290ad12371561a569", class: "slot-header" }, h("slot", { key: "0ec16f51b61c80b66eb9e1b17045888db8be7d2c", name: "header" })))), h("div", { key: "fa06f41c546340e08a249774fbe9fea9aa8513b7", class: "side-pane-content", hidden: !this.showContent }, h("slot", { key: "7cca7b8b2c9198fbd1921ab7ff58ef2d31548f1e" }))));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "expanded": [{
+        "onExpandedChange": 0
+      }, {
+        "onSizeChange": 0
+      }],
+      "isMobile": [{
+        "onMobileChange": 0
+      }],
+      "composition": [{
+        "onPositionChange": 0
+      }],
+      "hideOnCollapse": [{
+        "onHideOnCollapseChange": 0
+      }],
+      "variant": [{
+        "onVariantChange": 0
+      }],
+      "borderless": [{
+        "onBorderlessChange": 0
+      }],
+      "parentHeightPx": [{
+        "onParentSizeChange": 0
+      }],
+      "parentWidthPx": [{
+        "onParentSizeChange": 0
+      }],
+      "size": [{
+        "onSizeChange": 0
+      }]
+    };
+  }
+};
+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-DUMPV7Bo.js

@@ -0,0 +1,68 @@
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-7ZbTfMw3.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: "d64b7e45e9f690b80b59564736333c613ffd786e", style: this.variant === "custom" ? {
+      "--ix-icon-button-color": this.pillColor
+    } : {}, class: {
+      "align-left": this.alignLeft
+    } }, h("div", { key: "cd9093442c7177383e0796d5158fa52f795db5e9", 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: "a6432d7c46e88eff87d2242365f671ae87763c85", class: {
+      "with-icon": true
+    }, name: this.icon, size: "16", "aria-label": this.ariaLabelIcon }), h("span", { key: "c39e4e53da038bdb84952460d9e7892eff4878ce", class: "slot-container" }, h("slot", { key: "78d71f68580f57baf9ba4458ede78c65a5f9cb2c", 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-D67NJI5O.js

@@ -0,0 +1,108 @@
+import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { U as iconCirclePause, c as iconSuccess, a as iconWarning, i as iconInfo, b as iconError } from "./index-BBzEV-f4-ChQfUIyc.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(     --theme-progress-indicator-fill--background   )}:host .progress-indicator.success{--ix-progress-indicator-color:var(     --theme-progress-indicator-fill-success--background   )}:host .progress-indicator.error{--ix-progress-indicator-color:var(     --theme-progress-indicator-fill-error--background   )}:host .progress-indicator.info{--ix-progress-indicator-color:var(     --theme-progress-indicator-fill-info--background   )}:host .progress-indicator.warning{--ix-progress-indicator-color:var(     --theme-progress-indicator-fill-warning--background   )}:host .progress-indicator.paused{--ix-progress-indicator-color:var(     --theme-progress-indicator-fill-paused--background   )}: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(     --theme-progress-indicator-track--background   );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(     --theme-progress-indicator-track-success--background   )}:host(.circular) .circular-progress-container.error{--ix-progress-indicator-track-color:var(     --theme-progress-indicator-track-error--background   )}:host(.circular) .circular-progress-container.info{--ix-progress-indicator-track-color:var(     --theme-progress-indicator-track-info--background   )}:host(.circular) .circular-progress-container.warning{--ix-progress-indicator-track-color:var(     --theme-progress-indicator-track-warning--background   )}:host(.circular) .circular-progress-container.paused{--ix-progress-indicator-track-color:var(     --theme-progress-indicator-track-paused--background   )}: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: "1fa22efe0aaa4fd247475041aec0a4e57d72a28b", class: {
+      linear: this.type === "linear",
+      circular: this.type === "circular"
+    }, tabIndex: -1 }, h("div", { key: "0d07a0c09ec868ea911d5af377c6b48d76abedce", 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: "66c9ca8ed64378b519dc5dbe4919d58f484ba6e3", format: "label", textColor: this.status === "error" ? "alarm" : "soft", class: "label" }, this.label), h("div", { key: "2476c1e1b1ded03f35bd8a506c1f17c50ece18ca", 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
+};