@siemens/ix-docs 4.3.0 → 4.4.0

package/build/static/demo/v2/preview/html/assets/ix-tooltip.entry-Ck2sYYcQ.js

@@ -0,0 +1,323 @@
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { c as computePosition, s as shift, o as offset, b as arrow, f as flip, h as hide, a as autoUpdate } from "./floating-ui.dom-CAqtPJ4--DFASu3km.js";
+import { r as resolveSelector } from "./find-element-CFRrPFxi-BfUKzqCM.js";
+import { m as makeRef } from "./make-ref-bcj7UEIC-BX_OSyqv.js";
+import { g as getSlottedElements } from "./shadow-dom-i60z1FJC-Cx4XiL3F.js";
+import { b as addDisposableEventListenerAsArray } from "./disposable-event-listener-CKoABG1h-D5kNsG5G.js";
+const tooltipCss = () => `.dialog{margin:0;padding:0;border:none;max-width:18.25rem;width:-moz-max-content;width:max-content;background-color:transparent;overflow-wrap:break-word;box-shadow:none;overflow:visible}.tooltip-container{display:block;position:relative;width:auto;height:-moz-fit-content;height:fit-content;background:var(--theme-tootlip--background);color:var(--theme-color-std-text);padding:0.375rem 0.75rem;box-shadow:var(--theme-shadow-4);border-radius:0.25rem}.content-wrapper{overflow:auto}.tooltip-title{display:flex}.tooltip-title ::slotted(ix-icon){margin:0.125rem 0.25rem 0.125rem 0}.arrow,.arrow::before{position:absolute;width:12px;height:12px;background:inherit}.arrow{visibility:hidden}.arrow::before{visibility:visible;content:"";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}`;
+const ARROW_OFFSET = -6;
+const numberToPixel = (value) => value !== null ? `${value}px` : "";
+let tooltipInstance = 0;
+const Tooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.interactive = false;
+    this.placement = "top";
+    this.showDelay = 0;
+    this.hideDelay = 50;
+    this.animationFrame = false;
+    this.visible = false;
+    this.instance = tooltipInstance++;
+    this.dialogRef = makeRef();
+  }
+  get arrowElement() {
+    return this.hostElement.shadowRoot.querySelector(".arrow");
+  }
+  /** @internal */
+  async showTooltip(anchorElement) {
+    this.clearTimeouts();
+    if (this.showTooltipTimeout || this.visibleFor === anchorElement) {
+      return;
+    }
+    const dialog = await this.dialogRef.waitForCurrent();
+    this.showTooltipTimeout = setTimeout(() => {
+      this.setAnchorElement(anchorElement);
+      dialog.showPopover();
+      this.applyTooltipPosition(anchorElement, dialog);
+      this.registerTooltipListener(dialog);
+    }, this.showDelay);
+  }
+  /** @internal */
+  async hideTooltip(hideDelay = this.hideDelay) {
+    this.clearTimeouts();
+    if (this.hideTooltipTimeout || !this.visible) {
+      return;
+    }
+    if (this.interactive && hideDelay === 50) {
+      hideDelay = 150;
+    }
+    const dialog = await this.dialogRef.waitForCurrent();
+    this.hideTooltipTimeout = setTimeout(() => {
+      var _a, _b;
+      this.setAnchorElement();
+      dialog.hidePopover();
+      (_a = this.disposeAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+      (_b = this.disposeTooltipListener) === null || _b === void 0 ? void 0 : _b.call(this);
+    }, hideDelay);
+  }
+  setAnchorElement(anchorElement) {
+    if (!anchorElement) {
+      this.visibleFor = void 0;
+      this.visible = false;
+    } else {
+      this.visibleFor = anchorElement;
+      this.visible = true;
+    }
+  }
+  computeArrowPosition({ placement, middlewareData }) {
+    let { x, y } = middlewareData.arrow;
+    const resetPosition = {
+      top: "unset",
+      right: "unset",
+      bottom: "unset",
+      left: "unset"
+    };
+    if (placement.startsWith("top")) {
+      return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(x), bottom: numberToPixel(ARROW_OFFSET) });
+    }
+    if (placement.startsWith("right")) {
+      return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(ARROW_OFFSET), top: numberToPixel(y) });
+    }
+    if (placement.startsWith("bottom")) {
+      return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(x), top: numberToPixel(ARROW_OFFSET) });
+    }
+    if (placement.startsWith("left")) {
+      return Object.assign(Object.assign({}, resetPosition), { right: numberToPixel(ARROW_OFFSET), top: numberToPixel(y) });
+    }
+  }
+  async computeTooltipPosition(target, dialog) {
+    return computePosition(target, dialog, {
+      strategy: "fixed",
+      placement: this.placement,
+      middleware: [
+        shift(),
+        offset(12),
+        arrow({
+          element: this.arrowElement
+        }),
+        flip({
+          fallbackStrategy: "initialPlacement",
+          fallbackAxisSideDirection: "end",
+          padding: 10
+        }),
+        hide()
+      ]
+    });
+  }
+  applyTooltipArrowPosition(computeResponse) {
+    const arrowPosition = this.computeArrowPosition(computeResponse);
+    Object.assign(this.arrowElement.style, arrowPosition);
+  }
+  async applyTooltipPosition(target, dialog) {
+    if (!target) {
+      return;
+    }
+    return new Promise((resolve) => {
+      var _a;
+      (_a = this.disposeAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+      this.disposeAutoUpdate = autoUpdate(target, dialog, async () => {
+        var _a2;
+        const computeResponse = await this.computeTooltipPosition(target, dialog);
+        const isHidden = (_a2 = computeResponse.middlewareData.hide) === null || _a2 === void 0 ? void 0 : _a2.referenceHidden;
+        if (isHidden) {
+          this.hideTooltip(0);
+          resolve(computeResponse);
+        }
+        if (computeResponse.middlewareData.arrow) {
+          this.applyTooltipArrowPosition(computeResponse);
+        }
+        const { x, y } = computeResponse;
+        Object.assign(dialog.style, {
+          left: numberToPixel(x),
+          top: numberToPixel(y)
+        });
+        resolve(computeResponse);
+      }, {
+        ancestorResize: true,
+        ancestorScroll: true,
+        elementResize: true,
+        animationFrame: this.animationFrame
+      });
+    });
+  }
+  async queryAnchorElements() {
+    if (this.for) {
+      if (Array.isArray(this.for)) {
+        return this.resolveElements(this.for);
+      } else {
+        return this.resolveElements([this.for]);
+      }
+    }
+  }
+  async resolveElements(references) {
+    const elements = [];
+    await Promise.all(references.map(async (reference) => {
+      if (typeof reference === "string") {
+        const resolvedElements = await resolveSelector(reference, this.hostElement);
+        if (resolvedElements) {
+          elements.push(...resolvedElements);
+        }
+      } else if (reference instanceof HTMLElement) {
+        elements.push(reference);
+      } else if (reference instanceof Promise) {
+        elements.push(await reference);
+      }
+    }));
+    return elements;
+  }
+  async registerTriggerListener() {
+    var _a;
+    (_a = this.disposeTriggerListener) === null || _a === void 0 ? void 0 : _a.call(this);
+    const triggerElementList = await this.queryAnchorElements();
+    if (!triggerElementList) {
+      return;
+    }
+    const listeners = [];
+    triggerElementList.forEach((element) => {
+      listeners.push(...[
+        {
+          element,
+          eventType: "mouseenter",
+          callback: () => {
+            this.showTooltip(element);
+          }
+        },
+        {
+          element,
+          eventType: "mouseleave",
+          callback: () => {
+            this.hideTooltip();
+          }
+        },
+        {
+          element,
+          eventType: "focus",
+          callback: () => {
+            this.showTooltip(element);
+          }
+        },
+        {
+          element,
+          eventType: "focusout",
+          callback: () => {
+            this.hideTooltip();
+          }
+        }
+      ]);
+    });
+    this.disposeTriggerListener = addDisposableEventListenerAsArray(listeners);
+  }
+  registerTooltipListener(dialog) {
+    var _a;
+    (_a = this.disposeTooltipListener) === null || _a === void 0 ? void 0 : _a.call(this);
+    this.disposeTooltipListener = addDisposableEventListenerAsArray([
+      {
+        element: dialog,
+        eventType: "mouseenter",
+        callback: () => {
+          if (this.interactive) {
+            this.clearHideTimeout();
+          }
+        }
+      },
+      {
+        element: dialog,
+        eventType: "focus",
+        callback: () => {
+          if (this.interactive) {
+            this.clearHideTimeout();
+          }
+        }
+      },
+      {
+        element: dialog,
+        eventType: "mouseleave",
+        callback: () => {
+          this.hideTooltip();
+        }
+      },
+      {
+        element: dialog,
+        eventType: "focusout",
+        callback: () => {
+          this.hideTooltip();
+        }
+      },
+      {
+        element: dialog,
+        eventType: "click",
+        callback: (event) => {
+          event.stopPropagation();
+        }
+      },
+      {
+        element: document,
+        eventType: "keydown",
+        callback: (event) => {
+          if (event.key === "Escape") {
+            this.hideTooltip();
+          }
+        }
+      }
+    ]);
+  }
+  registerDomChangeListener() {
+    const observer = new MutationObserver(() => {
+      this.registerTriggerListener();
+    });
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["data-ix-tooltip"],
+      childList: true,
+      subtree: true
+    });
+    this.disposeDomChangeListener = () => {
+      observer.disconnect();
+    };
+  }
+  clearHideTimeout() {
+    clearTimeout(this.hideTooltipTimeout);
+    this.hideTooltipTimeout = void 0;
+  }
+  clearShowTimeout() {
+    clearTimeout(this.showTooltipTimeout);
+    this.showTooltipTimeout = void 0;
+  }
+  clearTimeouts() {
+    this.clearHideTimeout();
+    this.clearShowTimeout();
+  }
+  componentWillLoad() {
+    this.registerTriggerListener();
+  }
+  componentDidLoad() {
+    this.registerDomChangeListener();
+  }
+  disconnectedCallback() {
+    var _a, _b, _c, _d;
+    this.clearTimeouts();
+    (_a = this.disposeAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+    (_b = this.disposeTriggerListener) === null || _b === void 0 ? void 0 : _b.call(this);
+    (_c = this.disposeTooltipListener) === null || _c === void 0 ? void 0 : _c.call(this);
+    (_d = this.disposeDomChangeListener) === null || _d === void 0 ? void 0 : _d.call(this);
+  }
+  handleTitleIconSlotChange(e) {
+    const slot = e.target;
+    const elements = getSlottedElements(slot);
+    for (const element of elements) {
+      if (element.tagName.toLowerCase() === "ix-icon") {
+        element.size = "16";
+      }
+    }
+  }
+  render() {
+    return h(Host, { key: "0c5234ef90749fc655fcfe1b207ff07a56542c9a", role: "tooltip", class: { visible: this.visible } }, h("dialog", { key: "0d47ccccc273824891784dea6985f8d465bbb97a", ref: this.dialogRef, id: "tooltip-" + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, h("div", { key: "3c2b83f9d07786a69d8defe6942eb47e2c92bf72", class: "tooltip-container" }, h("div", { key: "799cc98634dcded6644c8b556d5f9dbc58bea809", class: "content-wrapper" }, h("div", { key: "760197461d8959ae1a04f827435f925359f54e04", class: "tooltip-title" }, h("slot", { key: "f5316e309883dac441181c3ffe05594e1a2a9034", name: "title-icon", onSlotchange: (e) => this.handleTitleIconSlotChange(e) }), h("ix-typography", { key: "9e9b3a4390f4e586b91ae2ce1bbd94bc53d432c1", format: "h5" }, this.titleContent, h("slot", { key: "1e05a5984ce3638bdea2bdbea322e505b8211495", name: "title-content" }))), h("slot", { key: "b74f4b6142b68920fc74029d751521b6c4faf706" }), h("div", { key: "26a4a736c0f1dbedaf788472a7232cefc095c8a8", class: "arrow" })))));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+Tooltip.style = tooltipCss();
+export {
+  Tooltip as ix_tooltip
+};

package/build/static/demo/v2/preview/html/assets/ix-tree-item.entry-DpVjUHR3.js

@@ -0,0 +1,29 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from "./global-7ZbTfMw3.js";
+import { w as iconChevronRightSmall } from "./index-BBzEV-f4-ChQfUIyc.js";
+const treeItemCss = () => `:host{display:flex;align-items:center;height:32px;width:100%;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tree-node-container{display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .tree-node-container .tree-node-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .icon-toggle-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-width:2rem}:host .icon-toggle-container ix-icon{transition:transform var(--theme-default-time) ease-in-out}:host .icon-toggle-container ix-icon.icon-toggle-down{transform:rotate(90deg)}:host(:not(.disabled):not(:disabled):not(.selected).hover),:host(:not(.disabled):not(:disabled):not(.selected):hover){background-color:var(--theme-tree-item--background--hover)}:host(:not(.disabled):not(:disabled):not(.selected).active),:host(:not(.disabled):not(:disabled):not(.selected):active){background-color:var(--theme-tree-item--background--active)}:host(.selected){background-color:var(--theme-tree-item--background--selected)}:host(.selected.hover),:host(.selected:hover){background-color:var(--theme-tree-item--background--selected-hover)}:host(.selected.active),:host(.selected:active){background-color:var(--theme-tree-item--background--selected-active)}`;
+const TreeItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.toggle = createEvent(this, "toggle", 7);
+    this.itemClick = createEvent(this, "itemClick", 7);
+    this.hasChildren = false;
+  }
+  render() {
+    var _a, _b, _c, _d;
+    return h(Host, { key: "d7bab1c02de111458ef484818bcec12c940f1bc4", class: {
+      selected: !!((_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected)
+    } }, h("div", { key: "43a86c7b782a881ee712d2950b6730fd3badebf9", class: "icon-toggle-container" }, this.hasChildren ? h("ix-icon", { name: iconChevronRightSmall, size: "24", class: {
+      ["icon-toggle-down"]: !!((_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded)
+    }, color: "color-std-text", onClick: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.toggle.emit();
+    }, "aria-label": (_c = this.ariaLabelChevronIcon) !== null && _c !== void 0 ? _c : ((_d = this.context) === null || _d === void 0 ? void 0 : _d.isExpanded) ? "Collapse tree item" : "Expand tree item" }) : null), h("div", { key: "b738b82fde5fe41ecc72b0cd765b2acdb17a6328", class: "tree-node-container", onClick: () => {
+      this.itemClick.emit();
+    } }, h("div", { key: "a0deb8a582d9b63c8832d9ad1bec89a5bdd83af8", class: "tree-node-text" }, this.text), h("slot", { key: "8c71cde365667568a7c67448f0588690cd91b9ce" })));
+  }
+};
+TreeItem.style = treeItemCss();
+export {
+  TreeItem as ix_tree_item
+};