@siemens/ix 1.0.0-beta.2

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

@@ -0,0 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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 const createMutationObserver = (callback) => new MutationObserver(callback);

package/dist/collection/components/utils/notification-color.js

@@ -0,0 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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 {};

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

@@ -0,0 +1,33 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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 { convertToRemString } from './rwd.util';
+export class Popover {
+  constructor(hostElement, popoverElement, outsideCallback) {
+    this.hostElement = hostElement;
+    this.popoverElement = popoverElement;
+    this.outsideCallback = outsideCallback;
+  }
+  outside(e) {
+    var _a;
+    if (!((_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+      this.outsideCallback(e);
+    }
+  }
+  open(maxWidth = 256) {
+    this.popoverElement.style.transform = `
+      translateX(${this.hostElement.offsetLeft + this.hostElement.offsetWidth}px)
+      translateY(-${this.hostElement.offsetHeight}px)
+    `;
+    this.popoverElement.style.maxWidth = convertToRemString(maxWidth);
+    document.body.addEventListener('click', this.outside.bind(this));
+  }
+  destroy() {
+    document.body.removeEventListener('click', this.outside.bind(this));
+  }
+}

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

@@ -0,0 +1,37 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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 const convertToRemString = (value) => {
+  const valueRem = value / 16;
+  return `${valueRem}rem`;
+};
+export const convertToAbbreviationString = (num) => {
+  if (isNaN(num) || num === null || num === undefined) {
+    return '';
+  }
+  let unit = '';
+  // Metric Units
+  const units = [
+    { unit: 'q', value: Math.pow(10, 15) },
+    { unit: 't', value: Math.pow(10, 12) },
+    { unit: 'B', value: Math.pow(10, 9) },
+    { unit: 'M', value: Math.pow(10, 6) },
+    { unit: 'K', value: Math.pow(10, 3) }, // 1000
+  ];
+  units.some(pow => {
+    let formattedNum = Math.abs(num);
+    if (formattedNum >= pow.value) {
+      formattedNum /= pow.value;
+      num = Math.round(formattedNum * 10) / 10;
+      unit = pow.unit;
+      return true;
+    }
+    return false;
+  });
+  return num + unit;
+};

package/dist/collection/components/utils/toggle-theme.js

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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 const toggleVariant = () => {
+  let currentTheme = Array.from(document.body.classList).find((className) => className.includes('theme-'));
+  if (!currentTheme) {
+    currentTheme = 'theme-classic-dark';
+  }
+  const isDark = currentTheme.endsWith('-dark');
+  let newTheme = currentTheme;
+  if (isDark) {
+    newTheme = currentTheme.replace(/-dark$/g, '-light');
+  }
+  else {
+    newTheme = currentTheme.replace(/-light$/g, '-dark');
+  }
+  document.body.classList.remove(currentTheme);
+  document.body.classList.add(newTheme);
+};

package/dist/collection/components/utils/typed-event.js

@@ -0,0 +1,42 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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 class TypedEvent {
+  constructor() {
+    this.listeners = [];
+    this.listenersOncer = [];
+    this.on = (listener) => {
+      this.listeners.push(listener);
+      return {
+        dispose: () => this.off(listener),
+      };
+    };
+    this.once = (listener) => {
+      this.listenersOncer.push(listener);
+    };
+    this.off = (listener) => {
+      const callbackIndex = this.listeners.indexOf(listener);
+      if (callbackIndex > -1) {
+        this.listeners.splice(callbackIndex, 1);
+      }
+    };
+    this.emit = (event) => {
+      /** Update any general listeners */
+      this.listeners.forEach(listener => listener(event));
+      /** Clear the `once` queue */
+      if (this.listenersOncer.length > 0) {
+        const toCall = this.listenersOncer;
+        this.listenersOncer = [];
+        toCall.forEach(listener => listener(event));
+      }
+    };
+    this.pipe = (te) => {
+      return this.on(e => te.emit(e));
+    };
+  }
+}

package/dist/collection/components/validation-tooltip/validation-tooltip.css

@@ -0,0 +1,235 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2022 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: 2022 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2022 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.
+ */
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+a {
+  color: var(--theme-color-primary);
+}
+
+:host {
+  display: block;
+}
+:host .validation-tooltip {
+  background-color: var(--theme-tootlip--background);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 13px;
+  border: 1px solid var(--theme-tooltip--border-color);
+}
+:host .validation-tooltip #arrow,
+:host .validation-tooltip #arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+:host .validation-tooltip #arrow {
+  visibility: hidden;
+}
+:host .validation-tooltip #arrow::before {
+  visibility: visible;
+  content: "";
+  transform: rotate(45deg);
+  background-color: var(--theme-tootlip--background);
+}
+:host .validation-tooltip[data-popper-placement^=top] > #arrow {
+  bottom: -5px;
+}
+:host .validation-tooltip[data-popper-placement^=top] > #arrow::before {
+  border-right: 1px solid var(--theme-tooltip--border-color);
+  border-bottom: 1px solid var(--theme-tooltip--border-color);
+}
+:host .validation-tooltip[data-popper-placement^=bottom] > #arrow {
+  top: -5px;
+}
+:host .validation-tooltip[data-popper-placement^=bottom] > #arrow::before {
+  border-left: 1px solid var(--theme-tooltip--border-color);
+  border-top: 1px solid var(--theme-tooltip--border-color);
+}
+:host .validation-tooltip[data-popper-placement^=left] > #arrow {
+  right: -5px;
+}
+:host .validation-tooltip[data-popper-placement^=left] > #arrow::before {
+  border-right: 1px solid var(--theme-tooltip--border-color);
+  border-top: 1px solid var(--theme-tooltip--border-color);
+}
+:host .validation-tooltip[data-popper-placement^=right] > #arrow {
+  left: -5px;
+}
+:host .validation-tooltip[data-popper-placement^=right] > #arrow::before {
+  border-left: 1px solid var(--theme-tooltip--border-color);
+  border-bottom: 1px solid var(--theme-tooltip--border-color);
+}

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

@@ -0,0 +1,167 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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 '@popperjs/core';
+import { createPopper } from '@popperjs/core';
+import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
+/**
+ * @slot tooltip-message - Custom tooltip message with html support
+ */
+export class ValidationTooltip {
+  constructor() {
+    /**
+     * Placement of the tooltip
+     */
+    this.placement = 'top';
+    this.isInputValid = true;
+    this.onSubmitBind = this.onSubmit.bind(this);
+    this.onInputFocusBind = this.onInputFocus.bind(this);
+  }
+  get arrow() {
+    return this.hostElement.querySelector('#arrow');
+  }
+  get inputElement() {
+    return this.hostElement.querySelector('input');
+  }
+  get formElement() {
+    return this.inputElement.form;
+  }
+  get tooltipElement() {
+    return this.hostElement.querySelector('.validation-tooltip');
+  }
+  componentDidLoad() {
+    if (!this.inputElement) {
+      throw Error('Validation tooltip is only working with an direct input child.');
+    }
+    if (!this.formElement) {
+      throw Error('Validation tooltip is only working with an form element.');
+    }
+    this.formElement.addEventListener('submit', this.onSubmitBind);
+    this.inputElement.addEventListener('focus', this.onInputFocusBind);
+    this.observer = new MutationObserver(() => {
+      if (this.inputElement.classList.contains('is-invalid')) {
+        this.isInputValid = false;
+        this.validationChanged();
+      }
+    });
+    this.observer.observe(this.inputElement, {
+      childList: false,
+      subtree: false,
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+  }
+  onInputFocus() {
+    this.isInputValid = true;
+  }
+  onSubmit() {
+    if (this.formElement.classList.contains('needs-validation')) {
+      this.isInputValid = this.inputElement.validity.valid;
+    }
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this.popper) === null || _b === void 0 ? void 0 : _b.destroy();
+    this.formElement.removeEventListener('submit', this.onSubmitBind);
+    this.inputElement.removeEventListener('focus', this.onInputFocusBind);
+  }
+  validationChanged() {
+    if (!this.isInputValid) {
+      this.tooltipElement.style.display = 'block';
+      this.popper = createPopper(this.inputElement, this.tooltipElement, {
+        placement: this.placement,
+        strategy: 'absolute',
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 8],
+            },
+          },
+          {
+            name: 'arrow',
+            options: {
+              element: this.arrow,
+            },
+          },
+        ],
+      });
+    }
+    else {
+      this.tooltipElement.style.display = 'none';
+      this.popper.destroy();
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", null),
+      h("div", { role: "tooltip", style: { display: 'none' }, class: "validation-tooltip text-default" },
+        this.message,
+        h("slot", { name: "tooltip-message" }),
+        h("div", { id: "arrow", "data-popper-arrow": true }))));
+  }
+  static get is() { return "ix-validation-tooltip"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["validation-tooltip.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["validation-tooltip.css"]
+  }; }
+  static get properties() { return {
+    "message": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Message of the tooltip"
+      },
+      "attribute": "message",
+      "reflect": false
+    },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Placement",
+        "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {
+          "Placement": {
+            "location": "import",
+            "path": "@popperjs/core"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Placement of the tooltip"
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'top'"
+    }
+  }; }
+  static get states() { return {
+    "isInputValid": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "isInputValid",
+      "methodName": "validationChanged"
+    }]; }
+}

package/dist/collection/components/workflow-step/workflow-step.css

@@ -0,0 +1,131 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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.
+ */
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
+ */
+/*
+ * SPDX-FileCopyrightText: 2022 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 */
+:host .step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--theme-workflow-step--background);
+  border-radius: var(--theme-workflow--border-radius);
+  width: auto;
+  padding: 1.125rem 0 0.5rem 0;
+  height: 4rem;
+  width: 12.75rem;
+}
+:host .step .wrapper {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+:host .step .wrapper .line {
+  width: 100%;
+  height: 0.125rem;
+  background-color: var(--theme-workflow-step-icon-default--color);
+}
+:host .step .wrapper .line.first, :host .step .wrapper .line.last {
+  width: 50%;
+  margin: 0 0 0 auto;
+}
+:host .step .wrapper .line.last {
+  margin: 0 auto 0 0;
+}
+:host .step .wrapper .line.selected {
+  background-color: var(--theme-workflow-step-icon-default--color--selected);
+}
+:host .step .wrapper .line.done {
+  background-color: var(--theme-workflow-step-icon-done--color);
+}
+:host .step .wrapper .line.done.selected {
+  background-color: var(--theme-workflow-step-icon-done--color--selected);
+}
+:host .step .wrapper .line.warning {
+  background-color: var(--theme-color-warning);
+}
+:host .step .wrapper .line.success {
+  background-color: var(--theme-color-success);
+}
+:host .step .wrapper .line.error {
+  background-color: var(--theme-color-alarm);
+}
+:host .step .wrapper .iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+}
+:host .step .wrapper .iconWrapper .absolute {
+  position: absolute;
+}
+:host .step .text {
+  margin-top: 1rem;
+  width: auto;
+  padding: 0 0.5rem;
+}
+:host .step.vertical {
+  flex-direction: row;
+  padding: 0;
+}
+:host .step.vertical .wrapper {
+  width: auto;
+  padding-left: 1.125rem;
+  height: 4rem;
+}
+:host .step.vertical .wrapper .line {
+  width: 0.125rem;
+  height: 100%;
+}
+:host .step.vertical .wrapper .line.first, :host .step.vertical .wrapper .line.last {
+  height: 50%;
+  margin: auto 0 0 0;
+}
+:host .step.vertical .wrapper .line.last {
+  margin: 0 0 auto 0;
+}
+:host .step.vertical .text {
+  margin-top: 0;
+  margin-left: 1rem;
+  padding: 0;
+}
+:host .step:hover {
+  background-color: var(--theme-workflow-step--background--hover);
+}
+:host .step:active {
+  background-color: var(--theme-workflow-step--background--active);
+}
+:host .step:focus-visible {
+  outline: 1px solid var(--focus--border-color);
+  border-radius: 0;
+}
+:host .step.selected {
+  background-color: var(--theme-workflow-step--background--selected);
+}
+:host .step.disabled {
+  background-color: var(--theme-workflow-step--background--disabled);
+}
+:host .step.disabled .line {
+  background-color: var(--theme-workflow-step-icon-default--color--disabled) !important;
+}
+:host .step.disabled .text {
+  color: var(--theme-workflow-step--color--disabled);
+}