@siemens/ix 1.3.0 → 1.4.0-beta.1

package/dist/collection/components/tooltip/tooltip.js

@@ -0,0 +1,203 @@
+/*
+ * 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.
+ */
+import { arrow, autoPlacement, autoUpdate, computePosition, offset, shift, } from '@floating-ui/dom';
+import { h, Host } from '@stencil/core';
+/**
+ * @slot title-icon - Icon of tooltip title
+ * @slot title-content - Content of tooltip title
+ *
+ * @since 1.3.0
+ */
+export class Tooltip {
+  constructor() {
+    this.onMouseEnterBind = this.showTooltip.bind(this);
+    this.onMouseLeaveBind = this.hideTooltip.bind(this);
+    this.tooltipCloseTimeInMS = 50;
+    this.for = undefined;
+    this.titleContent = undefined;
+    this.interactive = false;
+    this.visible = false;
+  }
+  get arrowElement() {
+    return this.hostElement.shadowRoot.querySelector('.arrow');
+  }
+  destroyAutoUpdate() {
+    if (this.disposeAutoUpdate) {
+      this.disposeAutoUpdate();
+    }
+  }
+  showTooltip(e) {
+    clearTimeout(this.hideTooltipTimeout);
+    this.visible = true;
+    this.computeTooltipPosition(e.target);
+  }
+  hideTooltip() {
+    this.hideTooltipTimeout = setTimeout(() => {
+      this.visible = false;
+    }, this.tooltipCloseTimeInMS);
+    this.destroyAutoUpdate();
+  }
+  async computeTooltipPosition(target) {
+    this.disposeAutoUpdate = autoUpdate(target, this.hostElement, async () => {
+      const computeResponse = await computePosition(target, this.hostElement, {
+        strategy: 'absolute',
+        placement: 'top',
+        middleware: [
+          shift(),
+          offset(8),
+          arrow({
+            element: this.arrowElement,
+          }),
+          autoPlacement({
+            alignment: 'start',
+            allowedPlacements: ['top', 'bottom', 'right', 'left'],
+          }),
+        ],
+      });
+      if (computeResponse.middlewareData.arrow) {
+        const { x, y } = computeResponse.middlewareData.arrow;
+        Object.assign(this.arrowElement.style, {
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+        });
+      }
+      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,
+    });
+  }
+  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.hideTooltip();
+    });
+  }
+  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() {
+    this.observer.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" })));
+  }
+  static get is() { return "ix-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "for": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`"
+        },
+        "attribute": "for",
+        "reflect": false
+      },
+      "titleContent": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Title of the tooltip"
+        },
+        "attribute": "title-content",
+        "reflect": false
+      },
+      "interactive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define if the user can access the tooltip via mouse."
+        },
+        "attribute": "interactive",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "visible": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/tree/tree.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/tree/tree.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/tree-item/default-tree-item.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/tree-item/tree-item.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -15,7 +15,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -27,7 +27,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -35,7 +35,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/tree-item/tree-item.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -22,8 +22,7 @@ export class TreeItem {
         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: (e) => {
-        e.preventDefault();
+      }, 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))));
   }

package/dist/collection/components/typography/types.js

@@ -0,0 +1,14 @@
+export const VariantsMapping = {
+  'x-small': 'text-xs',
+  small: 'text-s',
+  caption: 'text-caption',
+  'caption-single': 'text-caption-single',
+  default: 'text-default',
+  'default-single': 'text-default-single',
+  large: 'text-l',
+  'large-single': 'text-l-single',
+  h2: 'text-h2',
+  'display-large': 'text-xl',
+  'default-title': 'text-default-title',
+  'default-title-single': 'text-default-title-single',
+};

package/dist/collection/components/typography/typography.css

@@ -0,0 +1,146 @@
+/*
+ * 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * 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.
+ */
+:host .text-xs {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
+  line-height: 1.4em;
+  color: var(--theme-color-std-text);
+}
+:host .text-s {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+:host .text-caption {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+:host .text-caption-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1em;
+  color: var(--theme-color-std-text);
+}
+:host .text-default {
+  -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 .text-default-single {
+  -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.143em;
+  color: var(--theme-color-std-text);
+}
+:host .text-default-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.429em;
+  color: var(--theme-color-std-text);
+}
+:host .text-default-title-single {
+  -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);
+}
+:host .text-l {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+:host .text-l-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.25em;
+  color: var(--theme-color-std-text);
+}
+:host .text-l-title {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+:host .text-l-title-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.25em;
+  color: var(--theme-color-std-text);
+}
+:host .text-h2 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1.375rem;
+  font-weight: 700;
+  line-height: 1.455em;
+  color: var(--theme-color-std-text);
+}
+:host .text-xl {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1.375rem;
+  font-weight: 400;
+  line-height: 1.091em;
+  color: var(--theme-color-std-text);
+}

package/dist/collection/components/typography/typography.js

@@ -0,0 +1,63 @@
+/*
+ * 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.
+ */
+import { h } from '@stencil/core';
+import { VariantsMapping } from './types';
+/**
+ * @internal
+ */
+export class IxTypography {
+  constructor() {
+    this.variant = 'default';
+  }
+  render() {
+    const typographyClass = {
+      [VariantsMapping[this.variant]]: true,
+    };
+    return (h("div", { class: typographyClass }, h("slot", null)));
+  }
+  static get is() { return "ix-typography"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["typography.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["typography.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TypographyVariants",
+          "resolved": "\"caption\" | \"caption-single\" | \"default\" | \"default-single\" | \"default-title\" | \"default-title-single\" | \"display-large\" | \"h2\" | \"large\" | \"large-single\" | \"small\" | \"x-small\"",
+          "references": {
+            "TypographyVariants": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Font variant"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'default'"
+      }
+    };
+  }
+}

package/dist/collection/components/upload/upload-file-state.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/upload/upload.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/upload/upload.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/utils/animation.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/utils/menu-service/menu-service.js

@@ -0,0 +1,53 @@
+/*
+ * 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.
+ */
+import { TypedEvent } from '../typed-event';
+class MenuService {
+  constructor() {
+    this.menuElement = null;
+    this.menuExpandChange = new TypedEvent();
+  }
+  register(menuElement) {
+    if (this.menuElement) {
+      console.warn('Menu already defined');
+      return;
+    }
+    this.menuElement = menuElement;
+    this.menuElement.addEventListener('expandChange', (event) => {
+      this.menuExpandChange.emit(event.detail);
+    });
+  }
+  async open() {
+    if (this.menuElement) {
+      this.menuElement.toggleMenu(true);
+      return true;
+    }
+    return false;
+  }
+  async close() {
+    if (this.menuElement) {
+      this.menuElement.toggleMenu(false);
+      return true;
+    }
+    return false;
+  }
+  async toggle() {
+    if (this.menuElement) {
+      this.menuElement.toggleMenu();
+      return true;
+    }
+    return false;
+  }
+  get nativeElement() {
+    return this.menuElement;
+  }
+  get expandChange() {
+    return this.menuExpandChange;
+  }
+}
+export const menuController = new MenuService();

package/dist/collection/components/utils/mutation-observer.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/utils/rwd.util.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/utils/screen/context.js

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+export function isBasicNavigationLayout(element) {
+  return element && element.tagName === 'IX-BASIC-NAVIGATION';
+}
+export const hostContext = (selector, element) => {
+  return element.closest(selector);
+};
+export const isHostedBy = (selector, element) => {
+  return hostContext(selector, element) !== null;
+};
+export const getHostApplicationLayout = (element) => {
+  const [basicNavigation, mapNavigation] = [
+    'ix-basic-navigation',
+    'ix-map-navigation',
+  ].map((selector) => hostContext(selector, element));
+  if (basicNavigation) {
+    return basicNavigation;
+  }
+  if (mapNavigation) {
+    return mapNavigation;
+  }
+};

package/{scss/theme/_define-theme-variable.scss → dist/collection/components/utils/screen/index.js}

@@ -1,12 +1,9 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * 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.
  */
-
-@mixin define-theme-variable($name, $value) {
-  --theme-#{$name}: #{$value};
-}
+export { screenMode } from './service';