@siemens/ix 2.0.0-beta.1 → 2.0.1

package/components/toast.js

@@ -0,0 +1,105 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon-button.js';
+import { d as defineCustomElement$1 } from './spinner.js';
+
+const toastCss = ":host{display:flex;flex-direction:column;position:relative;min-width:17.5rem;max-width:17.5rem;min-height:3.5rem;pointer-events:all;background-color:var(--theme-toast--background);border:var(--theme-toast--border-thickness) solid var(--theme-toast--border-color);border-radius:var(--theme-toast--border-radius);box-shadow:var(--theme-toast--box-shadow);--animate-duration:300ms}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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 .toast-body{display:flex;position:relative;min-height:3.5rem;width:100%;flex-grow:1;padding:0.75rem}:host .toast-body .toast-icon{display:flex;align-items:flex-start;margin-right:1rem}:host .toast-body .toast-content{overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%}:host .toast-body .toast-content .toast-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);margin:0.25rem 0px}:host .toast-body .toast-content .toast-message{min-width:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}:host .toast-body .toast-icon+.toast-content{max-width:10.25rem}:host .toast-close{display:flex;position:relative;pointer-events:all;margin-left:auto;margin-right:0px}:host .toast-progress-bar{position:absolute;bottom:0;height:0.25rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}:host .toast-progress-bar--animated{animation:trackProgress linear 1 forwards}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";
+
+const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.closeToast = createEvent(this, "closeToast", 7);
+    this.type = 'info';
+    this.toastTitle = undefined;
+    this.autoCloseDelay = 5000;
+    this.autoClose = true;
+    this.icon = undefined;
+    this.iconColor = undefined;
+    this.progress = 0;
+    this.touched = false;
+  }
+  getIcon() {
+    if (this.icon) {
+      return h("ix-icon", { name: this.icon, color: this.iconColor, size: "24" });
+    }
+    switch (this.type) {
+      case 'info':
+        return h("ix-icon", { name: 'info', size: "24", color: "color-std-text" });
+      case 'error':
+        return h("ix-icon", { name: 'error', size: "24", color: "color-alarm" });
+      case 'success':
+        return h("ix-icon", { name: 'success', size: "24", color: "color-success" });
+      case 'warning':
+        return h("ix-icon", { name: 'warning', size: "24", color: "color-warning" });
+      default:
+        return '';
+    }
+  }
+  close() {
+    if (this.hostElement) {
+      this.hostElement.classList.add('animate__fadeOut');
+    }
+    setTimeout(() => {
+      this.closeToast.emit();
+    }, 250);
+  }
+  render() {
+    let progressBarStyle = {};
+    const progressBarClass = ['toast-progress-bar'];
+    progressBarStyle = {
+      animationDuration: `${this.autoCloseDelay}ms`,
+      animationPlayState: this.touched ? 'paused' : 'running',
+    };
+    progressBarClass.push('toast-progress-bar--animated');
+    return (h(Host, { class: "animate__animated animate__fadeIn" }, h("div", { class: "toast-body", onPointerLeave: () => {
+        this.touched = false;
+      }, onPointerEnter: () => {
+        this.touched = true;
+      } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title" }, this.toastTitle)) : null, h("div", { class: "toast-message" }, h("slot", null))), h("div", { class: "toast-close" }, h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
+        this.close();
+      }, onTransitionEnd: () => {
+        if (this.progress === 0) {
+          this.close();
+        }
+      } })) : null));
+  }
+  get hostElement() { return this; }
+  static get style() { return toastCss; }
+}, [1, "ix-toast", {
+    "type": [1],
+    "toastTitle": [1, "toast-title"],
+    "autoCloseDelay": [2, "auto-close-delay"],
+    "autoClose": [4, "auto-close"],
+    "icon": [1],
+    "iconColor": [1, "icon-color"],
+    "progress": [32],
+    "touched": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-toast", "ix-icon-button", "ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-toast":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Toast);
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { Toast as T, defineCustomElement as d };
+
+//# sourceMappingURL=toast.js.map

package/components/toast.js.map

@@ -0,0 +1 @@
+{"file":"toast.js","mappings":"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","names":[],"sources":["./src/components/toast/toast.scss?tag=ix-toast&encapsulation=shadow","./src/components/toast/toast.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/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-width: 17.5rem;\n  max-width: 17.5rem;\n  min-height: 3.5rem;\n\n  pointer-events: all;\n\n  background-color: var(--theme-toast--background);\n  border: var(--theme-toast--border-thickness) solid\n    var(--theme-toast--border-color);\n  border-radius: var(--theme-toast--border-radius);\n  box-shadow: var(--theme-toast--box-shadow);\n\n  --animate-duration: #{$medium-time};\n\n  .toast-body {\n    display: flex;\n    position: relative;\n    min-height: 3.5rem;\n    width: 100%;\n    flex-grow: 1;\n    padding: 0.75rem;\n\n    .toast-icon {\n      display: flex;\n      align-items: flex-start;\n      margin-right: $default-space;\n    }\n\n    .toast-content {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-width: 0;\n      width: 100%;\n\n      .toast-title {\n        @include text-default-title-single;\n        margin: 0.25rem 0px;\n      }\n\n      .toast-message {\n        min-width: 0;\n\n        @include text-default;\n      }\n    }\n\n    .toast-icon + .toast-content {\n      max-width: 10.25rem;\n    }\n  }\n\n  .toast-close {\n    display: flex;\n    position: relative;\n    pointer-events: all;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .toast-progress-bar {\n    position: absolute;\n    bottom: 0;\n    height: $tiny-space;\n    width: 100%;\n    background-color: var(--theme-toast-timer-value--background);\n    transform-origin: left;\n\n    &--animated {\n      animation: trackProgress linear 1 forwards;\n    }\n  }\n\n  @keyframes trackProgress {\n    0% {\n      transform: scaleX(1);\n    }\n    100% {\n      transform: scaleX(0);\n    }\n  }\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  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast',\n  styleUrl: 'toast.scss',\n  shadow: true,\n})\nexport class Toast {\n  /**\n   * Toast type\n   */\n  @Prop() type: ToastType = 'info';\n\n  /**\n   * Toast title\n   */\n  @Prop() toastTitle: string;\n\n  /**\n   * Autoclose title after delay\n   */\n  @Prop() autoCloseDelay = 5000;\n\n  /**\n   * Autoclose behavior\n   */\n  @Prop() autoClose = true;\n\n  /**\n   * Icon of toast\n   */\n  @Prop() icon: string;\n\n  /**\n   * Icon color of toast\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Toast closed\n   */\n  @Event() closeToast: EventEmitter;\n\n  @State() progress = 0;\n  @State() touched = false;\n\n  @Element() hostElement!: HTMLIxToastElement;\n\n  private getIcon() {\n    if (this.icon) {\n      return <ix-icon name={this.icon} color={this.iconColor} size=\"24\" />;\n    }\n\n    switch (this.type) {\n      case 'info':\n        return <ix-icon name={'info'} size=\"24\" color=\"color-std-text\" />;\n\n      case 'error':\n        return <ix-icon name={'error'} size=\"24\" color=\"color-alarm\" />;\n\n      case 'success':\n        return <ix-icon name={'success'} size=\"24\" color=\"color-success\" />;\n\n      case 'warning':\n        return <ix-icon name={'warning'} size=\"24\" color=\"color-warning\" />;\n\n      default:\n        return '';\n    }\n  }\n\n  private close() {\n    if (this.hostElement) {\n      this.hostElement.classList.add('animate__fadeOut');\n    }\n    setTimeout(() => {\n      this.closeToast.emit();\n    }, 250);\n  }\n\n  render() {\n    let progressBarStyle: Record<string, string> = {};\n\n    const progressBarClass = ['toast-progress-bar'];\n\n    progressBarStyle = {\n      animationDuration: `${this.autoCloseDelay}ms`,\n      animationPlayState: this.touched ? 'paused' : 'running',\n    };\n\n    progressBarClass.push('toast-progress-bar--animated');\n\n    return (\n      <Host class=\"animate__animated animate__fadeIn\">\n        <div\n          class=\"toast-body\"\n          onPointerLeave={() => {\n            this.touched = false;\n          }}\n          onPointerEnter={() => {\n            this.touched = true;\n          }}\n        >\n          {this.type || this.icon ? (\n            <div class=\"toast-icon\">{this.getIcon()}</div>\n          ) : null}\n          <div class=\"toast-content\">\n            {this.toastTitle ? (\n              <div class=\"toast-title\">{this.toastTitle}</div>\n            ) : null}\n            <div class=\"toast-message\">\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"toast-close\">\n            <ix-icon-button\n              icon={'close'}\n              size=\"24\"\n              ghost\n              onClick={() => this.closeToast.emit()}\n            />\n          </div>\n        </div>\n        {this.autoClose ? (\n          <div\n            class={progressBarClass.join(' ')}\n            style={progressBarStyle}\n            onAnimationEnd={() => {\n              this.close();\n            }}\n            onTransitionEnd={() => {\n              if (this.progress === 0) {\n                this.close();\n              }\n            }}\n          ></div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/tooltip.js

@@ -0,0 +1,197 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as autoUpdate, c as computePosition, s as shift, o as offset, b as arrow, f as flip } from './floating-ui.dom.esm.js';
+import { d as defineCustomElement$1 } from './typography.js';
+
+const tooltipCss = ":host{display:inline-block;position:fixed;left:0px;top:0px;z-index:var(--theme-z-index-tooltip);max-width:18.25rem;opacity:0;visibility:collapse !important;overflow-wrap:break-word;border-radius:0.25rem;background-color:var(--theme-tootlip--background);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4)}:host .tooltip-title{display:flex;align-items:center}:host .tooltip-title ::slotted(ix-icon){margin-right:0.35rem}:host(.visible){opacity:1;visibility:visible !important}:host(.visible) .arrow,:host(.visible) .arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host(.visible) .arrow{visibility:hidden}:host(.visible) .arrow::before{visibility:visible;content:\"\";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}";
+
+const numberToPixel = (value) => (value != null ? `${value}px` : '');
+const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.onMouseEnterBind = this.onTooltipShow.bind(this);
+    this.onMouseLeaveBind = this.onTooltipHide.bind(this);
+    this.tooltipCloseTimeInMS = 50;
+    this.for = undefined;
+    this.titleContent = undefined;
+    this.interactive = false;
+    this.placement = 'top';
+    this.animationFrame = false;
+    this.visible = false;
+  }
+  get arrowElement() {
+    return this.hostElement.shadowRoot.querySelector('.arrow');
+  }
+  destroyAutoUpdate() {
+    if (this.disposeAutoUpdate !== undefined) {
+      this.disposeAutoUpdate();
+    }
+  }
+  onTooltipShow(e) {
+    this.showTooltip(e.target);
+  }
+  onTooltipHide() {
+    this.hideTooltip();
+  }
+  /** @internal */
+  async showTooltip(anchorElement) {
+    clearTimeout(this.hideTooltipTimeout);
+    this.visible = true;
+    this.computeTooltipPosition(anchorElement);
+  }
+  /** @internal */
+  async hideTooltip() {
+    this.hideTooltipTimeout = setTimeout(() => {
+      this.visible = false;
+    }, this.tooltipCloseTimeInMS);
+    this.destroyAutoUpdate();
+  }
+  computeArrowPosition({ placement, middlewareData, }) {
+    let { x, y } = middlewareData.arrow;
+    if (placement.startsWith('top')) {
+      return {
+        left: numberToPixel(x),
+        top: numberToPixel(y),
+      };
+    }
+    if (placement.startsWith('right')) {
+      return {
+        left: numberToPixel(-4),
+        top: numberToPixel(y),
+      };
+    }
+    if (placement.startsWith('bottom')) {
+      return {
+        left: numberToPixel(x),
+        top: numberToPixel(-4),
+      };
+    }
+    if (placement.startsWith('left')) {
+      return {
+        right: numberToPixel(-4),
+        top: numberToPixel(y),
+      };
+    }
+  }
+  async computeTooltipPosition(target) {
+    if (!target) {
+      return;
+    }
+    this.disposeAutoUpdate = autoUpdate(target, this.hostElement, async () => {
+      setTimeout(async () => {
+        const computeResponse = await computePosition(target, this.hostElement, {
+          strategy: 'fixed',
+          placement: this.placement,
+          middleware: [
+            shift(),
+            offset(8),
+            arrow({
+              element: this.arrowElement,
+            }),
+            flip({
+              fallbackStrategy: 'initialPlacement',
+              padding: 10,
+            }),
+          ],
+        });
+        if (computeResponse.middlewareData.arrow) {
+          const arrowPosition = this.computeArrowPosition(computeResponse);
+          Object.assign(this.arrowElement.style, arrowPosition);
+        }
+        const { x, y } = computeResponse;
+        Object.assign(this.hostElement.style, {
+          left: x !== null ? `${x}px` : '',
+          top: y !== null ? `${y}px` : '',
+        });
+      });
+    }, {
+      ancestorResize: true,
+      ancestorScroll: true,
+      elementResize: true,
+      animationFrame: this.animationFrame,
+    });
+  }
+  queryAnchorElements() {
+    return Array.from(document.querySelectorAll(this.for));
+  }
+  registerTriggerListener() {
+    const elements = this.queryAnchorElements();
+    elements.forEach((e) => {
+      e.addEventListener('mouseenter', this.onMouseEnterBind);
+      e.addEventListener('mouseleave', this.onMouseLeaveBind);
+    });
+  }
+  registerTooltipListener() {
+    this.hostElement.addEventListener('mouseenter', () => {
+      if (this.interactive) {
+        clearTimeout(this.hideTooltipTimeout);
+      }
+    });
+    this.hostElement.addEventListener('mouseleave', () => {
+      this.onTooltipHide();
+    });
+  }
+  componentDidLoad() {
+    if (this.interactive) {
+      this.tooltipCloseTimeInMS = 150;
+    }
+    this.observer = new MutationObserver(() => {
+      this.registerTriggerListener();
+    });
+    this.observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['data-ix-tooltip'],
+      childList: true,
+      subtree: true,
+    });
+    this.registerTriggerListener();
+    this.registerTooltipListener();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.destroyAutoUpdate();
+  }
+  render() {
+    const tooltipContentClass = {
+      'tooltip-content': true,
+    };
+    return (h(Host, { class: {
+        visible: this.visible,
+      } }, h("div", { class: 'tooltip-title' }, h("slot", { name: "title-icon" }), h("ix-typography", { variant: "default-title" }, this.titleContent, h("slot", { name: "title-content" }))), h("div", { class: tooltipContentClass }, h("slot", null)), h("div", { class: "arrow" })));
+  }
+  get hostElement() { return this; }
+  static get style() { return tooltipCss; }
+}, [1, "ix-tooltip", {
+    "for": [1],
+    "titleContent": [1, "title-content"],
+    "interactive": [4],
+    "placement": [1],
+    "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=tooltip.js.map

package/components/tooltip.js.map

@@ -0,0 +1 @@
+{"file":"tooltip.js","mappings":"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","names":[],"sources":["./src/components/tooltip/tooltip.scss?tag=ix-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: fixed;\n  left: 0px;\n  top: 0px;\n  z-index: var(--theme-z-index-tooltip);\n\n  max-width: 18.25rem;\n\n  opacity: 0;\n  visibility: collapse !important;\n  overflow-wrap: break-word;\n\n  border-radius: 0.25rem;\n  background-color: var(--theme-tootlip--background);\n  padding: 0.375rem 0.75rem 0.375rem 0.875rem;\n\n  box-shadow: var(--theme-shadow-4);\n\n  .tooltip-title {\n    display: flex;\n    align-items: center;\n\n    ::slotted(ix-icon) {\n      margin-right: 0.35rem;\n    }\n  }\n}\n\n:host(.visible) {\n  opacity: 1;\n  visibility: visible !important;\n}\n\n:host(.visible) {\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n    background-color: var(--theme-tootlip--background);\n  }\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 */\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  ComputePositionReturn,\n  flip,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\n\ntype ArrowPosition = {\n  top?: string;\n  left?: string;\n  right?: string;\n};\n\nconst numberToPixel = (value: number) => (value != null ? `${value}px` : '');\n\n/**\n * @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n *\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  /**\n   * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n   */\n  @Prop() for: string;\n\n  /**\n   * Title of the tooltip\n   */\n  @Prop() titleContent: string;\n\n  /**\n   * Define if the user can access the tooltip via mouse.\n   */\n  @Prop() interactive = false;\n\n  /**\n   * Initial placement of the tooltip. If the placement don\"t have enough space,\n   * the tooltip will placed on another location.\n   *\n   * @since 1.5.0\n   */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n\n  /** @internal */\n  @Prop() animationFrame = false;\n\n  @State() visible = false;\n\n  @Element() hostElement: HTMLIxTooltipElement;\n\n  private observer: MutationObserver;\n  private hideTooltipTimeout: NodeJS.Timeout;\n  private onMouseEnterBind = this.onTooltipShow.bind(this);\n  private onMouseLeaveBind = this.onTooltipHide.bind(this);\n  private disposeAutoUpdate?: () => void;\n  private tooltipCloseTimeInMS = 50;\n\n  private get arrowElement() {\n    return this.hostElement.shadowRoot.querySelector('.arrow') as HTMLElement;\n  }\n\n  private destroyAutoUpdate() {\n    if (this.disposeAutoUpdate !== undefined) {\n      this.disposeAutoUpdate();\n    }\n  }\n\n  private onTooltipShow(e: Event) {\n    this.showTooltip(e.target as Element);\n  }\n\n  private onTooltipHide() {\n    this.hideTooltip();\n  }\n\n  /** @internal */\n  @Method()\n  async showTooltip(anchorElement: any) {\n    clearTimeout(this.hideTooltipTimeout);\n    this.visible = true;\n    this.computeTooltipPosition(anchorElement);\n  }\n\n  /** @internal */\n  @Method()\n  async hideTooltip() {\n    this.hideTooltipTimeout = setTimeout(() => {\n      this.visible = false;\n    }, this.tooltipCloseTimeInMS);\n    this.destroyAutoUpdate();\n  }\n\n  private computeArrowPosition({\n    placement,\n    middlewareData,\n  }: ComputePositionReturn): ArrowPosition {\n    let { x, y } = middlewareData.arrow;\n\n    if (placement.startsWith('top')) {\n      return {\n        left: numberToPixel(x),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('right')) {\n      return {\n        left: numberToPixel(-4),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('bottom')) {\n      return {\n        left: numberToPixel(x),\n        top: numberToPixel(-4),\n      };\n    }\n\n    if (placement.startsWith('left')) {\n      return {\n        right: numberToPixel(-4),\n        top: numberToPixel(y),\n      };\n    }\n  }\n\n  private async computeTooltipPosition(target: Element) {\n    if (!target) {\n      return;\n    }\n    this.disposeAutoUpdate = autoUpdate(\n      target,\n      this.hostElement,\n      async () => {\n        setTimeout(async () => {\n          const computeResponse = await computePosition(\n            target,\n            this.hostElement,\n            {\n              strategy: 'fixed',\n              placement: this.placement,\n              middleware: [\n                shift(),\n                offset(8),\n                arrow({\n                  element: this.arrowElement,\n                }),\n                flip({\n                  fallbackStrategy: 'initialPlacement',\n                  padding: 10,\n                }),\n              ],\n            }\n          );\n\n          if (computeResponse.middlewareData.arrow) {\n            const arrowPosition = this.computeArrowPosition(computeResponse);\n            Object.assign(this.arrowElement.style, arrowPosition);\n          }\n\n          const { x, y } = computeResponse;\n          Object.assign(this.hostElement.style, {\n            left: x !== null ? `${x}px` : '',\n            top: y !== null ? `${y}px` : '',\n          });\n        });\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n        animationFrame: this.animationFrame,\n      }\n    );\n  }\n\n  private queryAnchorElements() {\n    return Array.from(document.querySelectorAll(this.for));\n  }\n\n  private registerTriggerListener() {\n    const elements = this.queryAnchorElements();\n    elements.forEach((e) => {\n      e.addEventListener('mouseenter', this.onMouseEnterBind);\n      e.addEventListener('mouseleave', this.onMouseLeaveBind);\n    });\n  }\n\n  private registerTooltipListener() {\n    this.hostElement.addEventListener('mouseenter', () => {\n      if (this.interactive) {\n        clearTimeout(this.hideTooltipTimeout);\n      }\n    });\n    this.hostElement.addEventListener('mouseleave', () => {\n      this.onTooltipHide();\n    });\n  }\n\n  componentDidLoad() {\n    if (this.interactive) {\n      this.tooltipCloseTimeInMS = 150;\n    }\n\n    this.observer = new MutationObserver(() => {\n      this.registerTriggerListener();\n    });\n\n    this.observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: ['data-ix-tooltip'],\n      childList: true,\n      subtree: true,\n    });\n\n    this.registerTriggerListener();\n    this.registerTooltipListener();\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.destroyAutoUpdate();\n  }\n\n  render() {\n    const tooltipContentClass = {\n      'tooltip-content': true,\n    };\n\n    return (\n      <Host\n        class={{\n          visible: this.visible,\n        }}\n      >\n        <div class={'tooltip-title'}>\n          <slot name=\"title-icon\"></slot>\n          <ix-typography variant=\"default-title\">\n            {this.titleContent}\n            <slot name=\"title-content\"></slot>\n          </ix-typography>\n        </div>\n        <div class={tooltipContentClass}>\n          <slot></slot>\n        </div>\n        <div class=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/tree-item.js

@@ -0,0 +1,51 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+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}: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{display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center}:host .icon-toggle-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem}:host .icon-toggle-container ix-icon{transition:transform 150ms 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 HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.toggle = createEvent(this, "toggle", 7);
+    this.itemClick = createEvent(this, "itemClick", 7);
+    this.text = undefined;
+    this.hasChildren = undefined;
+    this.context = undefined;
+  }
+  render() {
+    var _a, _b, _c;
+    return (h(Host, { class: {
+        selected: (_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected,
+      } }, h("div", { class: "icon-toggle-container", onClick: (e) => {
+        e.preventDefault();
+        this.toggle.emit();
+      } }, this.hasChildren ? (h("ix-icon", { name: 'chevron-right', 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'}` })) : null), h("div", { class: "tree-node-container", onClick: () => {
+        this.itemClick.emit();
+      } }, this.text, h("slot", null))));
+  }
+  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=tree-item.js.map

package/components/tree-item.js.map

@@ -0,0 +1 @@
+{"file":"tree-item.js","mappings":";;AAAA,MAAM,WAAW,GAAG,grDAAgrD;;MCiBvrD,QAAQ;;;;;;;;;;;EA0BnB,MAAM;;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU;OACnC,IAED,WACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,CAAC,CAAC;QACT,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;OACpB,IAEA,IAAI,CAAC,WAAW,IACf,eACE,IAAI,EAAE,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE;QACL,CAAC,kBAAkB,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU;OAC/C,EACD,KAAK,EAAE,SACL,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,IAAG,SAAS,GAAG,UACzC,EAAE,GACF,IACA,IAAI,CACJ,EACN,WACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE;QACP,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;OACvB,IAEA,IAAI,CAAC,IAAI,EACV,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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    display: flex;\n    align-items: center;\n    height: $x-large-space;\n    flex-grow: 1;\n    align-items: center;\n  }\n\n  .icon-toggle-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n\n    ix-icon {\n      transition: transform $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: 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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { TreeItemContext } from '../tree/tree-model';\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: boolean;\n\n  /**\n   * Context\n   */\n  @Prop() context: TreeItemContext;\n\n  /**\n   * Expand/Collapsed toggled\n   */\n  @Event() toggle: EventEmitter<void>;\n\n  /**\n   * Clicked\n   */\n  @Event() itemClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.context?.isSelected,\n        }}\n      >\n        <div\n          class=\"icon-toggle-container\"\n          onClick={(e) => {\n            e.preventDefault();\n            this.toggle.emit();\n          }}\n        >\n          {this.hasChildren ? (\n            <ix-icon\n              name={'chevron-right'}\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            />\n          ) : null}\n        </div>\n        <div\n          class=\"tree-node-container\"\n          onClick={() => {\n            this.itemClick.emit();\n          }}\n        >\n          {this.text}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/_commonjsHelpers-0c557e26.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+exports.commonjsGlobal = commonjsGlobal;
+exports.commonjsRequire = commonjsRequire;
+exports.createCommonjsModule = createCommonjsModule;
+exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
+
+//# sourceMappingURL=_commonjsHelpers-0c557e26.js.map

package/dist/cjs/_commonjsHelpers-0c557e26.js.map

@@ -0,0 +1 @@
+{"file":"_commonjsHelpers-0c557e26.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/a11y-4fdcefb4.js

@@ -0,0 +1,82 @@
+'use strict';
+
+/*
+ * 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.
+ */
+const a11yBoolean = (value) => (value ? 'true' : 'false');
+const a11yHostAttributes = (hostElement, ignoreAttributes = []) => {
+  const attributeObject = {};
+  a11yAttributes.forEach((attr) => {
+    if (hostElement.hasAttribute(attr)) {
+      const value = hostElement.getAttribute(attr);
+      if (value !== null && !ignoreAttributes.includes(attr)) {
+        attributeObject[attr] = hostElement.getAttribute(attr);
+      }
+      hostElement.removeAttribute(attr);
+    }
+  });
+  return attributeObject;
+};
+const a11yAttributes = [
+  'role',
+  'aria-activedescendant',
+  'aria-atomic',
+  'aria-autocomplete',
+  'aria-braillelabel',
+  'aria-brailleroledescription',
+  'aria-busy',
+  'aria-checked',
+  'aria-colcount',
+  'aria-colindex',
+  'aria-colindextext',
+  'aria-colspan',
+  'aria-controls',
+  'aria-current',
+  'aria-describedby',
+  'aria-description',
+  'aria-details',
+  'aria-disabled',
+  'aria-errormessage',
+  'aria-expanded',
+  'aria-flowto',
+  'aria-haspopup',
+  'aria-hidden',
+  'aria-invalid',
+  'aria-keyshortcuts',
+  'aria-label',
+  'aria-labelledby',
+  'aria-level',
+  'aria-live',
+  'aria-multiline',
+  'aria-multiselectable',
+  'aria-orientation',
+  'aria-owns',
+  'aria-placeholder',
+  'aria-posinset',
+  'aria-pressed',
+  'aria-readonly',
+  'aria-relevant',
+  'aria-required',
+  'aria-roledescription',
+  'aria-rowcount',
+  'aria-rowindex',
+  'aria-rowindextext',
+  'aria-rowspan',
+  'aria-selected',
+  'aria-setsize',
+  'aria-sort',
+  'aria-valuemax',
+  'aria-valuemin',
+  'aria-valuenow',
+  'aria-valuetext',
+];
+
+exports.a11yBoolean = a11yBoolean;
+exports.a11yHostAttributes = a11yHostAttributes;
+
+//# sourceMappingURL=a11y-4fdcefb4.js.map

package/dist/cjs/a11y-4fdcefb4.js.map

@@ -0,0 +1 @@
+{"file":"a11y-4fdcefb4.js","mappings":";;AAAA;;;;;;;;MAQa,WAAW,GAAG,CAAC,KAAc,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,EAAE;MAE7D,kBAAkB,GAAG,CAChC,WAAwB,EACxB,mBAAwC,EAAE;EAE1C,MAAM,eAAe,GAAwB,EAAE,CAAC;EAChD,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI;IAC1B,IAAI,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;MAClC,MAAM,KAAK,GAAG,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;MAC7C,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;QACtD,eAAe,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;OACxD;MACD,WAAW,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;KACnC;GACF,CAAC,CAAC;EAEH,OAAO,eAAe,CAAC;AACzB,EAAE;AA4DF,MAAM,cAAc,GAAwB;EAC1C,MAAM;EACN,uBAAuB;EACvB,aAAa;EACb,mBAAmB;EACnB,mBAAmB;EACnB,6BAA6B;EAC7B,WAAW;EACX,cAAc;EACd,eAAe;EACf,eAAe;EACf,mBAAmB;EACnB,cAAc;EACd,eAAe;EACf,cAAc;EACd,kBAAkB;EAClB,kBAAkB;EAClB,cAAc;EACd,eAAe;EACf,mBAAmB;EACnB,eAAe;EACf,aAAa;EACb,eAAe;EACf,aAAa;EACb,cAAc;EACd,mBAAmB;EACnB,YAAY;EACZ,iBAAiB;EACjB,YAAY;EACZ,WAAW;EACX,gBAAgB;EAChB,sBAAsB;EACtB,kBAAkB;EAClB,WAAW;EACX,kBAAkB;EAClB,eAAe;EACf,cAAc;EACd,eAAe;EACf,eAAe;EACf,eAAe;EACf,sBAAsB;EACtB,eAAe;EACf,eAAe;EACf,mBAAmB;EACnB,cAAc;EACd,eAAe;EACf,cAAc;EACd,WAAW;EACX,eAAe;EACf,eAAe;EACf,eAAe;EACf,gBAAgB;CACjB;;;;;","names":[],"sources":["./src/components/utils/a11y.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 */\nexport const a11yBoolean = (value: boolean) => (value ? 'true' : 'false');\n\nexport const a11yHostAttributes = (\n  hostElement: HTMLElement,\n  ignoreAttributes: A11yAttributeName[] = []\n): Record<A11yAttributeName, any> => {\n  const attributeObject: Record<string, any> = {};\n  a11yAttributes.forEach((attr) => {\n    if (hostElement.hasAttribute(attr)) {\n      const value = hostElement.getAttribute(attr);\n      if (value !== null && !ignoreAttributes.includes(attr)) {\n        attributeObject[attr] = hostElement.getAttribute(attr);\n      }\n      hostElement.removeAttribute(attr);\n    }\n  });\n\n  return attributeObject;\n};\n\ntype PartialRecord<K extends keyof any, T> = {\n  [P in K]?: T;\n};\nexport type A11yAttributes = PartialRecord<A11yAttributeName, any>;\n\nexport type A11yAttributeName =\n  | 'role'\n  | 'aria-activedescendant'\n  | 'aria-atomic'\n  | 'aria-autocomplete'\n  | 'aria-braillelabel'\n  | 'aria-brailleroledescription'\n  | 'aria-busy'\n  | 'aria-checked'\n  | 'aria-colcount'\n  | 'aria-colindex'\n  | 'aria-colindextext'\n  | 'aria-colspan'\n  | 'aria-controls'\n  | 'aria-current'\n  | 'aria-describedby'\n  | 'aria-description'\n  | 'aria-details'\n  | 'aria-disabled'\n  | 'aria-errormessage'\n  | 'aria-expanded'\n  | 'aria-flowto'\n  | 'aria-haspopup'\n  | 'aria-hidden'\n  | 'aria-invalid'\n  | 'aria-keyshortcuts'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-level'\n  | 'aria-live'\n  | 'aria-multiline'\n  | 'aria-multiselectable'\n  | 'aria-orientation'\n  | 'aria-owns'\n  | 'aria-placeholder'\n  | 'aria-posinset'\n  | 'aria-pressed'\n  | 'aria-readonly'\n  | 'aria-relevant'\n  | 'aria-required'\n  | 'aria-roledescription'\n  | 'aria-rowcount'\n  | 'aria-rowindex'\n  | 'aria-rowindextext'\n  | 'aria-rowspan'\n  | 'aria-selected'\n  | 'aria-setsize'\n  | 'aria-sort'\n  | 'aria-valuemax'\n  | 'aria-valuemin'\n  | 'aria-valuenow'\n  | 'aria-valuetext';\n\nconst a11yAttributes: A11yAttributeName[] = [\n  'role',\n  'aria-activedescendant',\n  'aria-atomic',\n  'aria-autocomplete',\n  'aria-braillelabel',\n  'aria-brailleroledescription',\n  'aria-busy',\n  'aria-checked',\n  'aria-colcount',\n  'aria-colindex',\n  'aria-colindextext',\n  'aria-colspan',\n  'aria-controls',\n  'aria-current',\n  'aria-describedby',\n  'aria-description',\n  'aria-details',\n  'aria-disabled',\n  'aria-errormessage',\n  'aria-expanded',\n  'aria-flowto',\n  'aria-haspopup',\n  'aria-hidden',\n  'aria-invalid',\n  'aria-keyshortcuts',\n  'aria-label',\n  'aria-labelledby',\n  'aria-level',\n  'aria-live',\n  'aria-multiline',\n  'aria-multiselectable',\n  'aria-orientation',\n  'aria-owns',\n  'aria-placeholder',\n  'aria-posinset',\n  'aria-pressed',\n  'aria-readonly',\n  'aria-relevant',\n  'aria-required',\n  'aria-roledescription',\n  'aria-rowcount',\n  'aria-rowindex',\n  'aria-rowindextext',\n  'aria-rowspan',\n  'aria-selected',\n  'aria-setsize',\n  'aria-sort',\n  'aria-valuemax',\n  'aria-valuemin',\n  'aria-valuenow',\n  'aria-valuetext',\n];\n"],"version":3}

package/dist/cjs/app-globals-1fe10058.js

@@ -0,0 +1,31 @@
+'use strict';
+
+/*
+ * 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.
+ */
+async function setupIcons() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  const iconComponent = window.customElements.get('ix-icon');
+  if (iconComponent) {
+    return;
+  }
+  console.warn('ix-icon web component not loaded. Using local fallback version');
+  const ixIcons = await Promise.resolve().then(function () { return require('./index.es2017-b42376b6.js'); }).then(function (n) { return n.index_es2017; });
+  await ixIcons.defineCustomElements();
+}
+async function appGlobalScript () {
+  await setupIcons();
+}
+
+const globalScripts = appGlobalScript;
+
+exports.globalScripts = globalScripts;
+
+//# sourceMappingURL=app-globals-1fe10058.js.map

package/dist/cjs/app-globals-1fe10058.js.map

@@ -0,0 +1 @@
+{"file":"app-globals-1fe10058.js","mappings":";;AAAA;;;;;;;;AASA;EACE,IAAI,OAAO,MAAM,KAAK;IACpB,OAAO;GACR;EAED;EACA,IAAI,aAAa,EAAE;IACjB,OAAO;GACR;EAED;EAIA,MAAM,OAAO,GAAG,MAAM,oDAAO,4BAA0B,mDAAC,CAAC;EACzD,MAAM,OAAO,CAAC,oBAAoB,EAAE,CAAC;AACvC,CAAC;;EAGC,MAAM,UAAU,EAAE,CAAC;AACrB;;AC5BY,MAAC,aAAa,GAAG;;;;","names":[],"sources":["./src/setup.ts","@stencil/core/internal/app-globals"],"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\nasync function setupIcons() {\n  if (typeof window === 'undefined') {\n    return;\n  }\n\n  const iconComponent = window.customElements.get('ix-icon');\n  if (iconComponent) {\n    return;\n  }\n\n  console.warn(\n    'ix-icon web component not loaded. Using local fallback version'\n  );\n\n  const ixIcons = await import('@siemens/ix-icons/loader');\n  await ixIcons.defineCustomElements();\n}\n\nexport default async function () {\n  await setupIcons();\n}\n","import appGlobalScript from '/__w/ix/ix/packages/core/src/setup.ts';\nexport const globalScripts = appGlobalScript;\n"],"version":3}

package/dist/cjs/breakpoints-7ca69aa8.js

@@ -0,0 +1,27 @@
+'use strict';
+
+/*
+ * 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.
+ */
+// Implementation of scss breakpoints mixins/_break-points.scss
+const mediaQueries = {
+  sm: '(max-width: 48em)',
+  md: '(min-width: 48.0625em) and (max-width: 80em)',
+  lg: '(min-width: 80.0625em)',
+};
+const matchBreakpoint = (breakpoint) => {
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    const mediaQuery = mediaQueries[breakpoint];
+    return window.matchMedia(mediaQuery).matches;
+  }
+  return false;
+};
+
+exports.matchBreakpoint = matchBreakpoint;
+
+//# sourceMappingURL=breakpoints-7ca69aa8.js.map

package/dist/cjs/breakpoints-7ca69aa8.js.map

@@ -0,0 +1 @@
+{"file":"breakpoints-7ca69aa8.js","mappings":";;AAAA;;;;;;;;AASA;AACA,MAAM,YAAY,GAAG;EACnB,EAAE,EAAE,mBAAmB;EACvB,EAAE,EAAE,8CAA8C;EAClD,EAAE,EAAE,wBAAwB;CACpB,CAAC;MAIE,eAAe,GAAG,CAAC,UAAsB;EACpD,IAAI,OAAO,MAAM,KAAK,WAAW,IAAK,MAAc,CAAC,UAAU,EAAE;IAC/D,MAAM,UAAU,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;IAC5C,OAAO,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC;GAC9C;EACD,OAAO,KAAK,CAAC;AACf;;;;","names":[],"sources":["./src/components/utils/breakpoints.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\n// Implementation of scss breakpoints mixins/_break-points.scss\nconst mediaQueries = {\n  sm: '(max-width: 48em)',\n  md: '(min-width: 48.0625em) and (max-width: 80em)',\n  lg: '(min-width: 80.0625em)',\n} as const;\n\nexport type Breakpoint = keyof typeof mediaQueries;\n\nexport const matchBreakpoint = (breakpoint: Breakpoint) => {\n  if (typeof window !== 'undefined' && (window as any).matchMedia) {\n    const mediaQuery = mediaQueries[breakpoint];\n    return window.matchMedia(mediaQuery).matches;\n  }\n  return false;\n};\n"],"version":3}