@siemens/ix 0.0.0-pr-1974-20250627114851 → 0.0.0-pr-1974-20250627142646

package/components/p-DkGdSI6e.js.map

@@ -0,0 +1 @@
+{"file":"p-DkGdSI6e.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,s0wCAAs0wC;;MC8Bn1wC,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,GAAA;;;;;;AAmBU,QAAA,IAAK,CAAA,KAAA,GAAY,IAAI;;AAGrB,QAAA,IAAO,CAAA,OAAA,GAAG,IAAI;;AAGd,QAAA,IAAW,CAAA,WAAA,GAAG,IAAI;;AAGlB,QAAA,IAAiB,CAAA,iBAAA,GAAG,KAAK;AAmFlC;IA5EC,gBAAgB,GAAA;QACd,IAAI,CAAC,eAAe,EAAE;;IAGxB,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE;YAC/C,kBAAkB;YAClB,eAAe;YACf,eAAe;AAChB,SAAA,CAAC;;IAGJ,eAAe,GAAA;AACb,QAAAC,KAAO,CAAC;YACN,OAAO,EAAE,IAAI,CAAC,WAAW;AACzB,YAAA,QAAQ,EAAE,GAAG;AACb,YAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACf,YAAA,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;AAC3B,YAAA,MAAM,EAAE,QAAQ;AACjB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAoB;YAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,WAAW;AAC7C,YAAA,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,IAAI,EAAE,QAAQ;YACd,QAAQ,EACN,IAAI,CAAC,WAAW,CAAC,QAAQ,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,CAAC;AAClE,YAAA,YAAY,EAAE;gBACZ,kBAAkB,EAAE,IAAI,CAAC,iBAAiB;AAC3C,aAAA;YACD,cAAc,EAAE,IAAI,CAAC,IAAI;SAC1B;AAED,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,OAAO,EAAC,IAAI,EAAA,EAAC,KAAK,EAAE,WAAW,GAAS;;AAG1C,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,CAAC,IAAI,CAAC,WAAW;aAClC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,EAE9C,CAAA,CAAA,IAAA,EAAA,IAAA,EACE,CAAA,CAAC,UAAU,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACL,KAAK,EAAA,EACT,YAAY,EACV,CAAA,CAAC,QAAQ,EAAA,IAAA,EACN,IAAI,CAAC,WAAW,IACf,CAAA,CAAA,SAAA,EAAA,EACE,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,SAAS,GACP,IACT,IAAI,CACC,EAAA,CAAA,EAGZ,IAAI,CAAC,KAAK,EACX,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACF,CACV,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement","animejs"],"sources":["src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n@import '../button/button-mixin';\n@import '../button/button';\n\n@include all-btn-variants;\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  margin-right: 0.25rem;\n  max-width: 15rem;\n  min-width: 0;\n\n  li {\n    display: contents;\n  }\n\n  .btn {\n    pointer-events: all;\n    width: fit-content;\n    padding-right: 0;\n    padding-left: 0.25rem;\n  }\n\n  .chevron {\n    pointer-events: none;\n    margin-left: 0.5rem;\n    margin-right: 0rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(a[href]) {\n    text-decoration: none !important;\n  }\n\n  ::slotted(a[href]:active) {\n    text-decoration: none !important;\n  }\n}\n\n:host(:last-child) {\n  .btn:not(.dropdown-trigger) {\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.hide-chevron) {\n  cursor: default;\n\n  .btn {\n    padding-right: 0.5rem;\n    pointer-events: none;\n  }\n}\n\n:host(.invisible) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport animejs from 'animejs';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yHostAttributes } from '../utils/a11y';\nimport { iconChevronRightSmall } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BreadcrumbItem {\n  @Element() hostElement!: HTMLIxBreadcrumbItemElement;\n\n  /**\n   * Breadcrumb label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Icon to be displayed next ot the label\n   */\n  @Prop() icon?: string;\n\n  /**@internal */\n  @Prop() ghost: boolean = true;\n\n  /**@internal */\n  @Prop() visible = true;\n\n  /**@internal */\n  @Prop() showChevron = true;\n\n  /** @internal */\n  @Prop() isDropdownTrigger = false;\n\n  /**@internal */\n  @Event() itemClick!: EventEmitter<string>;\n\n  @State() a11y: any;\n\n  componentDidLoad() {\n    this.animationFadeIn();\n  }\n\n  componentWillLoad() {\n    this.a11y = a11yHostAttributes(this.hostElement, [\n      'aria-describedby',\n      'aria-controls',\n      'aria-expanded',\n    ]);\n  }\n\n  animationFadeIn() {\n    animejs({\n      targets: this.hostElement,\n      duration: 150,\n      opacity: [0, 1],\n      translateX: ['-100%', '0%'],\n      easing: 'linear',\n    });\n  }\n\n  render() {\n    const props: BaseButtonProps = {\n      variant: this.ghost ? 'primary' : 'secondary',\n      outline: false,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      disabled: false,\n      icon: this.icon,\n      iconSize: '16',\n      loading: false,\n      selected: false,\n      type: 'button',\n      tabIndex:\n        this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,\n      extraClasses: {\n        'dropdown-trigger': this.isDropdownTrigger,\n      },\n      ariaAttributes: this.a11y,\n    };\n\n    if (!this.visible) {\n      return <Host class={'invisible'}></Host>;\n    }\n\n    return (\n      <Host\n        class={{\n          'hide-chevron': !this.showChevron,\n        }}\n        onClick={() => this.itemClick.emit(this.label)}\n      >\n        <li>\n          <BaseButton\n            {...props}\n            afterContent={\n              <Fragment>\n                {this.showChevron ? (\n                  <ix-icon\n                    name={iconChevronRightSmall}\n                    size=\"16\"\n                    class={'chevron'}\n                  ></ix-icon>\n                ) : null}\n              </Fragment>\n            }\n          >\n            {this.label}\n            <slot></slot>\n          </BaseButton>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-DojBQCbP.js

@@ -0,0 +1,55 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BuJ6BWIi.js';
+import { w as iconChevronRight } from './p-CGwHQeMX.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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tree-node-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center}: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 = /*@__PURE__*/ proxyCustomElement(class TreeItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.toggle = createEvent(this, "toggle", 7);
+        this.itemClick = createEvent(this, "itemClick", 7);
+        /**
+         * Has tree item children
+         */
+        this.hasChildren = false;
+    }
+    render() {
+        var _a, _b, _c;
+        return (h(Host, { key: 'c34661fa80dd866d9aab07331e2c040ef5e28861', class: {
+                selected: !!((_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected),
+            } }, h("div", { key: '610f9a0b666896ffcb5de07e3aa08cb270427f62', class: "icon-toggle-container" }, this.hasChildren ? (h("ix-icon", { name: iconChevronRight, size: "16", class: {
+                ['icon-toggle-down']: !!((_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded),
+            }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}`, onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.toggle.emit();
+            } })) : null), h("div", { key: '7cb128b1d42ab9392459eceeef6cb4d79c45e252', class: "tree-node-container", onClick: () => {
+                this.itemClick.emit();
+            } }, h("div", { key: '3c89226c0672bcf6e8a0d79040ec1552ab74f611', class: "tree-node-text" }, this.text), h("slot", { key: 'cfa62c5788f768a56204aa57c70d9be7f509bb57' }))));
+    }
+    static get style() { return treeItemCss; }
+}, [1, "ix-tree-item", {
+        "text": [1],
+        "hasChildren": [4, "has-children"],
+        "context": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-tree-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-tree-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TreeItem);
+            }
+            break;
+    } });
+}
+
+export { TreeItem as T, defineCustomElement as d };
+//# sourceMappingURL=p-DojBQCbP.js.map
+
+//# sourceMappingURL=p-DojBQCbP.js.map

package/components/p-DojBQCbP.js.map

@@ -0,0 +1 @@
+{"file":"p-DojBQCbP.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,8gEAA8gE;;MCkBrhE,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,GAAA;;;;;;AAWE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAuD5B;IAtCC,MAAM,GAAA;;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,CAAC,EAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAA;AACrC,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,WAAW,IACf,CACE,CAAA,SAAA,EAAA,EAAA,IAAI,EAAE,gBAAgB,EACtB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE;AACL,gBAAA,CAAC,kBAAkB,GAAG,CAAC,EAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAA;aACjD,EACD,KAAK,EAAE,CACL,MAAA,EAAA,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,IAAG,SAAS,GAAG,UACzC,CAAE,CAAA,EACF,OAAO,EAAE,CAAC,CAAQ,KAAI;gBACpB,CAAC,CAAC,cAAc,EAAE;gBAClB,CAAC,CAAC,eAAe,EAAE;AACnB,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;aACnB,GACD,IACA,IAAI,CACJ,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACvB,aAAC,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAO,EAC7C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tree-item/tree-item.scss?tag=ix-tree-item&encapsulation=shadow","src/components/tree-item/tree-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: center;\n\n  height: 32px;\n  width: 100%;\n\n  cursor: pointer;\n\n  .tree-node-container {\n    @include ellipsis;\n    display: flex;\n    align-items: center;\n    height: $x-large-space;\n    flex-grow: 1;\n    align-items: center;\n\n    .tree-node-text {\n      @include ellipsis;\n    }\n  }\n\n  .icon-toggle-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    min-width: 2rem;\n\n    ix-icon {\n      transition: transform var(--theme-default-time) ease-in-out;\n\n      &.icon-toggle-down {\n        transform: rotate(90deg);\n      }\n    }\n  }\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).hover),\n:host(:not(.disabled):not(:disabled):not(.selected):hover) {\n  background-color: var(--theme-tree-item--background--hover);\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).active),\n:host(:not(.disabled):not(:disabled):not(.selected):active) {\n  background-color: var(--theme-tree-item--background--active);\n}\n\n:host(.selected) {\n  background-color: var(--theme-tree-item--background--selected);\n}\n\n:host(.selected.hover),\n:host(.selected:hover) {\n  background-color: var(--theme-tree-item--background--selected-hover);\n}\n\n:host(.selected.active),\n:host(.selected:active) {\n  background-color: var(--theme-tree-item--background--selected-active);\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { TreeItemContext } from '../tree/tree-model';\nimport { iconChevronRight } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-tree-item',\n  styleUrl: 'tree-item.scss',\n  shadow: true,\n})\nexport class TreeItem {\n  /**\n   * Text\n   */\n  @Prop() text?: string;\n\n  /**\n   * Has tree item children\n   */\n  @Prop() hasChildren = false;\n\n  /**\n   * Context\n   */\n  @Prop() context?: TreeItemContext;\n\n  /**\n   * Expand/Collapsed toggled\n   */\n  @Event() toggle!: EventEmitter<void>;\n\n  /**\n   * Click on item not on the expand/collapse icon\n   */\n  @Event() itemClick!: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: !!this.context?.isSelected,\n        }}\n      >\n        <div class=\"icon-toggle-container\">\n          {this.hasChildren ? (\n            <ix-icon\n              name={iconChevronRight}\n              size=\"16\"\n              class={{\n                ['icon-toggle-down']: !!this.context?.isExpanded,\n              }}\n              color={`color-${\n                this.context?.isExpanded ? 'primary' : 'std-text'\n              }`}\n              onClick={(e: Event) => {\n                e.preventDefault();\n                e.stopPropagation();\n                this.toggle.emit();\n              }}\n            />\n          ) : null}\n        </div>\n        <div\n          class=\"tree-node-container\"\n          onClick={() => {\n            this.itemClick.emit();\n          }}\n        >\n          <div class=\"tree-node-text\">{this.text}</div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-Dp15M30K.js

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class Animation {
+}
+Animation.shortTime = 0;
+Animation.defaultTime = 150;
+Animation.mediumTime = 300;
+Animation.slowTime = 500;
+Animation.xSlowTime = 1000;
+
+export { Animation as A };
+//# sourceMappingURL=p-Dp15M30K.js.map
+
+//# sourceMappingURL=p-Dp15M30K.js.map

package/components/p-Dp15M30K.js.map

@@ -0,0 +1 @@
+{"file":"p-Dp15M30K.js","mappings":"AAAA;;;;;;;AAOG;AAEH,MAA8B,SAAS,CAAA;;AACrB,SAAS,CAAA,SAAA,GAAG,CAAC;AACb,SAAW,CAAA,WAAA,GAAG,GAAG;AACjB,SAAU,CAAA,UAAA,GAAG,GAAG;AAChB,SAAQ,CAAA,QAAA,GAAG,GAAG;AACd,SAAS,CAAA,SAAA,GAAG,IAAI;;;;","names":[],"sources":["src/components/utils/animation.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport default abstract class Animation {\n  static readonly shortTime = 0;\n  static readonly defaultTime = 150;\n  static readonly mediumTime = 300;\n  static readonly slowTime = 500;\n  static readonly xSlowTime = 1000;\n}\n"],"version":3}

package/components/p-Dp4RJcgZ.js

@@ -0,0 +1,125 @@
+import { T as TypedEvent } from './p-BdCnOrqW.js';
+
+class ThemeSwitcher {
+    get themeChanged() {
+        return this._themeChanged;
+    }
+    hasVariantSuffix(className) {
+        return (className.endsWith(this.suffixDark) ||
+            className.endsWith(this.suffixLight));
+    }
+    isThemeClass(className) {
+        return (className.startsWith(this.prefixTheme) && this.hasVariantSuffix(className));
+    }
+    setTheme(themeName, systemAppearance = false) {
+        if (!this.isThemeClass(themeName) && systemAppearance === false) {
+            throw Error(`Provided theme name ${themeName} does not match our naming conventions. (theme-<name>-(dark,light))`);
+        }
+        if (systemAppearance) {
+            const currentSystemAppearance = getCurrentSystemAppearance();
+            this.replaceBodyThemeClass(themeName);
+            this.setVariant(currentSystemAppearance);
+            return;
+        }
+        this.replaceBodyThemeClass(themeName);
+    }
+    replaceBodyThemeClass(themeName) {
+        const oldThemes = [];
+        document.body.classList.forEach((className) => {
+            if (this.isThemeClass(className)) {
+                oldThemes.push(className);
+            }
+        });
+        document.body.classList.remove(...oldThemes);
+        document.body.classList.add(themeName);
+    }
+    toggleMode() {
+        const oldThemes = [];
+        document.body.classList.forEach((className) => {
+            if (this.isThemeClass(className)) {
+                oldThemes.push(className);
+            }
+        });
+        if (oldThemes.length === 0) {
+            document.body.classList.add(this.getOppositeMode(this.defaultTheme));
+            return;
+        }
+        oldThemes.forEach((themeName) => {
+            document.body.classList.replace(themeName, this.getOppositeMode(themeName));
+        });
+    }
+    getCurrentTheme() {
+        var _a;
+        return ((_a = Array.from(document.body.classList).find((className) => this.isThemeClass(className))) !== null && _a !== void 0 ? _a : `theme-${window
+            .getComputedStyle(document.body)
+            .getPropertyValue('--ix-theme-name')}`);
+    }
+    setVariant(variant = getCurrentSystemAppearance()) {
+        const currentTheme = this.getCurrentTheme();
+        document.body.classList.remove(currentTheme);
+        if (currentTheme.endsWith(this.suffixDark)) {
+            document.body.classList.add(currentTheme.replace(/-dark$/g, `-${variant}`));
+        }
+        if (currentTheme.endsWith(this.suffixLight)) {
+            document.body.classList.add(currentTheme.replace(/-light$/g, `-${variant}`));
+        }
+    }
+    getOppositeMode(themeName) {
+        if (themeName.endsWith(this.suffixDark)) {
+            return themeName.replace(/-dark$/g, this.suffixLight);
+        }
+        if (themeName.endsWith(this.suffixLight)) {
+            return themeName.replace(/-light$/g, this.suffixDark);
+        }
+        return '';
+    }
+    handleMutations(mutations) {
+        return mutations.forEach((mutation) => {
+            const { target } = mutation;
+            target.classList.forEach((className) => {
+                var _a;
+                if (this.isThemeClass(className) &&
+                    !((_a = mutation.oldValue) === null || _a === void 0 ? void 0 : _a.includes(className))) {
+                    this._themeChanged.emit(className);
+                }
+            });
+        });
+    }
+    registerMutationObserver() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (!('MutationObserver' in window)) {
+            console.warn('ThemeSwitcher not supported by your browser. Missing MutationObserver API');
+            return;
+        }
+        this.mutationObserver = new MutationObserver((mutations) => {
+            this.handleMutations(mutations);
+        });
+        this.mutationObserver.observe(document.body, {
+            attributeFilter: ['class'],
+            attributeOldValue: true,
+        });
+    }
+    constructor() {
+        this.prefixTheme = 'theme-';
+        this.suffixLight = '-light';
+        this.suffixDark = '-dark';
+        this.defaultTheme = 'theme-classic-dark';
+        this._themeChanged = new TypedEvent();
+        this.registerMutationObserver();
+    }
+}
+const getCurrentSystemAppearance = () => {
+    const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+    if (matchMedia.matches) {
+        return 'dark';
+    }
+    return 'light';
+};
+const themeSwitcher = new ThemeSwitcher();
+
+export { getCurrentSystemAppearance as g, themeSwitcher as t };
+//# sourceMappingURL=p-Dp4RJcgZ.js.map
+
+//# sourceMappingURL=p-Dp4RJcgZ.js.map

package/components/p-Dp4RJcgZ.js.map

@@ -0,0 +1 @@
+{"file":"p-Dp4RJcgZ.js","mappings":";;AAKA,MAAM,aAAa,CAAA;AASjB,IAAA,IAAW,YAAY,GAAA;QACrB,OAAO,IAAI,CAAC,aAAa;;AAGpB,IAAA,gBAAgB,CAAC,SAAiB,EAAA;QACvC,QACE,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;YACnC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;;AAIhC,IAAA,YAAY,CAAC,SAAiB,EAAA;AACpC,QAAA,QACE,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC;;AAIvE,IAAA,QAAQ,CAAC,SAAiB,EAAE,gBAAgB,GAAG,KAAK,EAAA;AACzD,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,gBAAgB,KAAK,KAAK,EAAE;AAC/D,YAAA,MAAM,KAAK,CACT,CAAA,oBAAA,EAAuB,SAAS,CAAA,mEAAA,CAAqE,CACtG;;QAGH,IAAI,gBAAgB,EAAE;AACpB,YAAA,MAAM,uBAAuB,GAAG,0BAA0B,EAAE;AAC5D,YAAA,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC;AACrC,YAAA,IAAI,CAAC,UAAU,CAAC,uBAAuB,CAAC;YACxC;;AAGF,QAAA,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC;;AAG/B,IAAA,qBAAqB,CAAC,SAAiB,EAAA;QAC7C,MAAM,SAAS,GAAa,EAAE;QAC9B,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,SAAS,KAAI;AAC5C,YAAA,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE;AAChC,gBAAA,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;;AAE7B,SAAC,CAAC;QAEF,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;QAC5C,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC;;IAGjC,UAAU,GAAA;QACf,MAAM,SAAS,GAAa,EAAE;QAE9B,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,SAAS,KAAI;AAC5C,YAAA,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE;AAChC,gBAAA,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;;AAE7B,SAAC,CAAC;AAEF,QAAA,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;AAC1B,YAAA,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACpE;;AAGF,QAAA,SAAS,CAAC,OAAO,CAAC,CAAC,SAAS,KAAI;AAC9B,YAAA,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAC7B,SAAS,EACT,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAChC;AACH,SAAC,CAAC;;IAGG,eAAe,GAAA;;AACpB,QAAA,QACE,CAAA,EAAA,GAAA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,KACjD,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAC7B,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GACD,SAAS;AACN,aAAA,gBAAgB,CAAC,QAAQ,CAAC,IAAI;AAC9B,aAAA,gBAAgB,CAAC,iBAAiB,CAAC,CAAA,CAAE;;IAIrC,UAAU,CAAC,OAAwB,GAAA,0BAA0B,EAAE,EAAA;AACpE,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE;QAC3C,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC;QAE5C,IAAI,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;AAC1C,YAAA,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CACzB,YAAY,CAAC,OAAO,CAAC,SAAS,EAAE,CAAA,CAAA,EAAI,OAAO,CAAE,CAAA,CAAC,CAC/C;;QAGH,IAAI,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;AAC3C,YAAA,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CACzB,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE,CAAA,CAAA,EAAI,OAAO,CAAE,CAAA,CAAC,CAChD;;;AAIG,IAAA,eAAe,CAAC,SAAiB,EAAA;QACvC,IAAI,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;YACvC,OAAO,SAAS,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC;;QAGvD,IAAI,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YACxC,OAAO,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC;;AAGvD,QAAA,OAAO,EAAE;;AAGH,IAAA,eAAe,CAAC,SAA2B,EAAA;AACjD,QAAA,OAAO,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAI;AACpC,YAAA,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ;YAC1B,MAAsB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,SAAS,KAAI;;AACtD,gBAAA,IACE,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;AAC5B,oBAAA,EAAC,CAAA,EAAA,GAAA,QAAQ,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC,SAAS,CAAC,CAAA,EACvC;AACA,oBAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC;;AAEtC,aAAC,CAAC;AACJ,SAAC,CAAC;;IAGI,wBAAwB,GAAA;AAC9B,QAAA,IAAI,OAAQ,MAAc,KAAK,WAAW,EAAE;YAC1C;;AAGF,QAAA,IAAI,EAAE,kBAAkB,IAAI,MAAM,CAAC,EAAE;AACnC,YAAA,OAAO,CAAC,IAAI,CACV,2EAA2E,CAC5E;YACD;;QAGF,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,KAAI;AACzD,YAAA,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC;AACjC,SAAC,CAAC;QAEF,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;YAC3C,eAAe,EAAE,CAAC,OAAO,CAAC;AAC1B,YAAA,iBAAiB,EAAE,IAAI;AACxB,SAAA,CAAC;;AAGJ,IAAA,WAAA,GAAA;QAxJS,IAAW,CAAA,WAAA,GAAG,QAAQ;QACtB,IAAW,CAAA,WAAA,GAAG,QAAQ;QACtB,IAAU,CAAA,UAAA,GAAG,OAAO;QACpB,IAAY,CAAA,YAAA,GAAG,oBAAoB;AAG5C,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,UAAU,EAAU;QAmJtC,IAAI,CAAC,wBAAwB,EAAE;;AAElC;AAMM,MAAM,0BAA0B,GAAG,MAAmB;IAC3D,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC;AAEpE,IAAA,IAAI,UAAU,CAAC,OAAO,EAAE;AACtB,QAAA,OAAO,MAAM;;AAGf,IAAA,OAAO,OAAO;AAChB;AAEa,MAAA,aAAa,GAAG,IAAI,aAAa;;;;","names":[],"sources":["src/components/utils/theme-switcher.ts"],"sourcesContent":["import { type LiteralStringUnion } from './type-helper';\nimport { TypedEvent } from './typed-event';\n\nexport type ThemeVariant = 'light' | 'dark';\n\nclass ThemeSwitcher {\n  readonly prefixTheme = 'theme-';\n  readonly suffixLight = '-light';\n  readonly suffixDark = '-dark';\n  readonly defaultTheme = 'theme-classic-dark';\n\n  mutationObserver?: MutationObserver;\n  _themeChanged = new TypedEvent<string>();\n\n  public get themeChanged() {\n    return this._themeChanged;\n  }\n\n  public hasVariantSuffix(className: string) {\n    return (\n      className.endsWith(this.suffixDark) ||\n      className.endsWith(this.suffixLight)\n    );\n  }\n\n  private isThemeClass(className: string) {\n    return (\n      className.startsWith(this.prefixTheme) && this.hasVariantSuffix(className)\n    );\n  }\n\n  public setTheme(themeName: string, systemAppearance = false) {\n    if (!this.isThemeClass(themeName) && systemAppearance === false) {\n      throw Error(\n        `Provided theme name ${themeName} does not match our naming conventions. (theme-<name>-(dark,light))`\n      );\n    }\n\n    if (systemAppearance) {\n      const currentSystemAppearance = getCurrentSystemAppearance();\n      this.replaceBodyThemeClass(themeName);\n      this.setVariant(currentSystemAppearance);\n      return;\n    }\n\n    this.replaceBodyThemeClass(themeName);\n  }\n\n  private replaceBodyThemeClass(themeName: string) {\n    const oldThemes: string[] = [];\n    document.body.classList.forEach((className) => {\n      if (this.isThemeClass(className)) {\n        oldThemes.push(className);\n      }\n    });\n\n    document.body.classList.remove(...oldThemes);\n    document.body.classList.add(themeName);\n  }\n\n  public toggleMode() {\n    const oldThemes: string[] = [];\n\n    document.body.classList.forEach((className) => {\n      if (this.isThemeClass(className)) {\n        oldThemes.push(className);\n      }\n    });\n\n    if (oldThemes.length === 0) {\n      document.body.classList.add(this.getOppositeMode(this.defaultTheme));\n      return;\n    }\n\n    oldThemes.forEach((themeName) => {\n      document.body.classList.replace(\n        themeName,\n        this.getOppositeMode(themeName)\n      );\n    });\n  }\n\n  public getCurrentTheme() {\n    return (\n      Array.from(document.body.classList).find((className) =>\n        this.isThemeClass(className)\n      ) ??\n      `theme-${window\n        .getComputedStyle(document.body)\n        .getPropertyValue('--ix-theme-name')}`\n    );\n  }\n\n  public setVariant(variant: ThemeVariant = getCurrentSystemAppearance()) {\n    const currentTheme = this.getCurrentTheme();\n    document.body.classList.remove(currentTheme);\n\n    if (currentTheme.endsWith(this.suffixDark)) {\n      document.body.classList.add(\n        currentTheme.replace(/-dark$/g, `-${variant}`)\n      );\n    }\n\n    if (currentTheme.endsWith(this.suffixLight)) {\n      document.body.classList.add(\n        currentTheme.replace(/-light$/g, `-${variant}`)\n      );\n    }\n  }\n\n  private getOppositeMode(themeName: string) {\n    if (themeName.endsWith(this.suffixDark)) {\n      return themeName.replace(/-dark$/g, this.suffixLight);\n    }\n\n    if (themeName.endsWith(this.suffixLight)) {\n      return themeName.replace(/-light$/g, this.suffixDark);\n    }\n\n    return '';\n  }\n\n  private handleMutations(mutations: MutationRecord[]) {\n    return mutations.forEach((mutation) => {\n      const { target } = mutation;\n      (target as HTMLElement).classList.forEach((className) => {\n        if (\n          this.isThemeClass(className) &&\n          !mutation.oldValue?.includes(className)\n        ) {\n          this._themeChanged.emit(className);\n        }\n      });\n    });\n  }\n\n  private registerMutationObserver() {\n    if (typeof (window as any) === 'undefined') {\n      return;\n    }\n\n    if (!('MutationObserver' in window)) {\n      console.warn(\n        'ThemeSwitcher not supported by your browser. Missing MutationObserver API'\n      );\n      return;\n    }\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      this.handleMutations(mutations);\n    });\n\n    this.mutationObserver.observe(document.body, {\n      attributeFilter: ['class'],\n      attributeOldValue: true,\n    });\n  }\n\n  public constructor() {\n    this.registerMutationObserver();\n  }\n}\n\nexport type IxTheme = LiteralStringUnion<\n  'classic' | 'classic-dark' | 'classic-light'\n>;\n\nexport const getCurrentSystemAppearance = (): ThemeVariant => {\n  const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');\n\n  if (matchMedia.matches) {\n    return 'dark';\n  }\n\n  return 'light';\n};\n\nexport const themeSwitcher = new ThemeSwitcher();\n"],"version":3}

package/components/p-DyHdZRT0.js

@@ -0,0 +1,359 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BuJ6BWIi.js';
+import { c as computePosition, a as autoUpdate, s as shift, o as offset, b as arrow, f as flip, h as hide } from './p-CAqtPJ4-.js';
+import { r as resolveSelector, b as addDisposableEventListenerAsArray } from './p-kY0vP3rC.js';
+import { m as makeRef } from './p-bcj7UEIC.js';
+import { d as defineCustomElement$1 } from './p-DyMgW0fR.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:100%;background:var(--theme-tootlip--background);color:var(--theme-color-std-text);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4);border-radius:0.25rem}.content-wrapper{overflow:auto}.tooltip-title{display:flex;align-items:center}.tooltip-title ::slotted(ix-icon){margin-right:0.35rem}.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 numberToPixel = (value) => value !== null ? `${value}px` : '';
+let tooltipInstance = 0;
+const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Define if the user can access the tooltip via mouse.
+         */
+        this.interactive = false;
+        /**
+         * Initial placement of the tooltip.
+         * If the selected placement doesn't have enough space, the tooltip will be repositioned to another location.
+         */
+        this.placement = 'top';
+        /** @internal */
+        this.showDelay = 0;
+        /** @internal */
+        this.hideDelay = 50;
+        /** @internal */
+        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 = undefined;
+            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), top: numberToPixel(y) });
+        }
+        if (placement.startsWith('right')) {
+            return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(-6), top: numberToPixel(y) });
+        }
+        if (placement.startsWith('bottom')) {
+            return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(x), top: numberToPixel(-6) });
+        }
+        if (placement.startsWith('left')) {
+            return Object.assign(Object.assign({}, resetPosition), { right: numberToPixel(-6), 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 _a;
+                const computeResponse = await this.computeTooltipPosition(target, dialog);
+                const isHidden = (_a = computeResponse.middlewareData.hide) === null || _a === void 0 ? void 0 : _a.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 H) {
+                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: element,
+                    eventType: 'mouseenter',
+                    callback: () => {
+                        this.showTooltip(element);
+                    },
+                },
+                {
+                    element: element,
+                    eventType: 'mouseleave',
+                    callback: () => {
+                        this.hideTooltip();
+                    },
+                },
+                {
+                    element: element,
+                    eventType: 'focus',
+                    callback: () => {
+                        this.showTooltip(element);
+                    },
+                },
+                {
+                    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 = undefined;
+    }
+    clearShowTimeout() {
+        clearTimeout(this.showTooltipTimeout);
+        this.showTooltipTimeout = undefined;
+    }
+    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);
+    }
+    render() {
+        return (h(Host, { key: '5babe56b183883f587a41524d26f8b520b26bcef', role: "tooltip", class: { visible: this.visible } }, h("dialog", { key: '7b5474a818df18c5bba0ba28ff2773b511d4cb97', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, h("div", { key: '367bf6d5097a22a54ec7527096da58a02c5b3700', class: "tooltip-container" }, h("div", { key: '781f6c63f9801026a3c93f950aca03b18f73ac3b', class: "content-wrapper" }, h("div", { key: 'a49b3d1172ef407a37793877fb34c90716b072a0', class: 'tooltip-title' }, h("slot", { key: 'fc4be17999ecc4edb1784c40e5e8b1f04c34a225', name: "title-icon" }), h("ix-typography", { key: '20d10a9c36108b6d88f1fe4ce480f8cbf58b317b', format: "h5" }, this.titleContent, h("slot", { key: '368c9358546fd6e652043319b00986d467b09bde', name: "title-content" }))), h("slot", { key: 'b4f21e40aee222a73c5c43503bbd15c1beb73c57' }), h("div", { key: '4c4eeb5fa43f5f66719b7d1641372783ae7f692b', class: "arrow" }))))));
+    }
+    get hostElement() { return this; }
+    static get style() { return tooltipCss; }
+}, [1, "ix-tooltip", {
+        "for": [1],
+        "titleContent": [1, "title-content"],
+        "interactive": [4],
+        "placement": [1],
+        "showDelay": [2, "show-delay"],
+        "hideDelay": [2, "hide-delay"],
+        "animationFrame": [4, "animation-frame"],
+        "visible": [32],
+        "showTooltip": [64],
+        "hideTooltip": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-tooltip", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Tooltip);
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Tooltip as T, defineCustomElement as d };
+//# sourceMappingURL=p-DyHdZRT0.js.map
+
+//# sourceMappingURL=p-DyHdZRT0.js.map