@siemens/ix 1.1.0-beta.1 → 1.1.0-beta.2

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

@@ -1,9 +0,0 @@
-/*
- * 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

@@ -1,9 +0,0 @@
-/*
- * 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

@@ -1,33 +0,0 @@
-/*
- * 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

@@ -1,37 +0,0 @@
-/*
- * 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

@@ -1,24 +0,0 @@
-/*
- * 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

@@ -1,42 +0,0 @@
-/*
- * 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

@@ -1,236 +0,0 @@
-/*
- * 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: var(--theme-tooltip--color);
-  padding: 5px 10px;
-  border-radius: 4px;
-  font-size: 13px;
-  border: 1px solid var(--theme-tooltip--border-color);
-  box-shadow: 0 0 2px 0 rgba(0, 0, 40, 0.1), 0 4px 8px 0 rgba(0, 0, 40, 0.1), 0 12px 18px 0 rgba(0, 0, 40, 0.1);
-}
-: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

@@ -1,167 +0,0 @@
-/*
- * 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

@@ -1,131 +0,0 @@
-/*
- * 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);
-}