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

package/dist/collection/components/animated-tabs/animated-tabs.js

@@ -1,303 +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 { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
-import anime from 'animejs';
-import Animation from '../utils/animation';
-import { convertToAbbreviationString } from '../utils/rwd.util';
-export class AnimatedTabs {
-  constructor() {
-    /**
-     * @deprecated - For debugging purposes only
-     */
-    this.disableAnimations = false;
-    /**
-     * Current selected tab index
-     */
-    this.selectedIndex = 0;
-    /**
-     * Placement of the tabs
-     */
-    this.tabPlacement = 'top';
-    this.easing = 'easeInOutSine';
-    this.firstRender = true;
-  }
-  onTabSelectionChange(newSelectionIndex, oldSelectionIndex) {
-    this.updateTabAnimation(oldSelectionIndex, newSelectionIndex);
-  }
-  onMouseDown() {
-    this.activeIndex = undefined;
-  }
-  get animatedTabs() {
-    return Array.from(this.hostElement.querySelectorAll('ix-animated-tab'));
-  }
-  get tabsContainer() {
-    return this.hostElement.querySelector('.tabs-container');
-  }
-  get contentContainer() {
-    return this.hostElement.querySelector('.content-container');
-  }
-  componentWillLoad() {
-    this.tabs = this.animatedTabs;
-  }
-  componentDidLoad() {
-    this.onTabSelectionChange(this.selectedIndex, -1);
-    this.observer = new MutationObserver(() => {
-      // Will trigger a re-render even if only the count attribute of a child tab changed
-      this.tabs = this.animatedTabs;
-    });
-    this.observer.observe(this.contentContainer, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ['count'],
-    });
-  }
-  //@ts-expect-error
-  disconnectCallback() {
-    var _a;
-    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  isSelected(tab) {
-    return this.tabs.indexOf(tab) === this.selectedIndex;
-  }
-  showTab(tab) {
-    if (this.isSelected(tab)) {
-      tab.classList.remove('d-none');
-    }
-  }
-  hideTab(tab) {
-    if (!this.isSelected(tab)) {
-      tab.classList.add('d-none');
-    }
-  }
-  slideOutLeft(tab) {
-    if (this.disableAnimations) {
-      this.hideTab(tab);
-      return;
-    }
-    anime({
-      targets: tab,
-      duration: Animation.mediumTime,
-      opacity: [1, 0],
-      translateX: [0, '-100%'],
-      easing: this.easing,
-      complete: () => {
-        this.hideTab(tab);
-      },
-    });
-  }
-  slideOutRight(tab) {
-    if (this.disableAnimations) {
-      this.hideTab(tab);
-      return;
-    }
-    anime({
-      targets: tab,
-      duration: Animation.mediumTime,
-      opacity: [1, 0],
-      translateX: [0, '100%'],
-      easing: this.easing,
-      complete: () => {
-        this.hideTab(tab);
-      },
-    });
-  }
-  slideInLeft(tab) {
-    if (this.firstRender) {
-      tab.classList.remove('d-none');
-      this.firstRender = false;
-      return;
-    }
-    if (this.disableAnimations) {
-      this.showTab(tab);
-      return;
-    }
-    anime({
-      targets: tab,
-      duration: Animation.mediumTime,
-      opacity: [0, 1],
-      translateX: ['-100%', 0],
-      easing: this.easing,
-      begin: () => {
-        this.showTab(tab);
-      },
-    });
-  }
-  slideInRight(tab) {
-    if (this.firstRender) {
-      tab.classList.remove('d-none');
-      this.firstRender = false;
-      return;
-    }
-    if (this.disableAnimations) {
-      this.showTab(tab);
-      return;
-    }
-    anime({
-      targets: tab,
-      duration: Animation.mediumTime,
-      opacity: [0, 1],
-      translateX: ['100%', 0],
-      easing: this.easing,
-      begin: () => {
-        this.showTab(tab);
-      },
-    });
-  }
-  updateTabAnimation(oldIndex, newIndex) {
-    var _a;
-    (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab, tabIndex) => {
-      if (tabIndex === oldIndex) {
-        if (tabIndex < newIndex) {
-          this.slideOutLeft(tab);
-        }
-        else if (tabIndex > newIndex) {
-          this.slideOutRight(tab);
-        }
-      }
-      else if (tabIndex === newIndex) {
-        if (tabIndex < oldIndex) {
-          this.slideInLeft(tab);
-        }
-        else if (tabIndex > oldIndex) {
-          this.slideInRight(tab);
-        }
-      }
-      else {
-        tab.classList.add('d-none');
-      }
-    });
-  }
-  onTabClick(index) {
-    this.selectedIndex = index;
-    this.tabClick.emit(index);
-  }
-  onTabMouseDown(index) {
-    this.activeIndex = index;
-  }
-  render() {
-    return (h(Host, { class: { 'flex-column-reverse': this.tabPlacement === 'bottom' } },
-      h("ul", { class: "tabs-container" },
-        this.animatedTabs.map((element, index) => (h("li", { class: { bottom: this.tabPlacement === 'bottom' }, onClick: () => this.onTabClick(index), onMouseDown: () => this.onTabMouseDown(index) },
-          h("div", { class: {
-              'tab-container': true,
-              selected: this.selectedIndex === index,
-            } },
-            h("ix-icon", { name: element.icon }),
-            element.count ? (h("span", { class: {
-                count: true,
-                bottom: this.tabPlacement === 'bottom',
-              } }, convertToAbbreviationString(element.count))) : (''))))),
-        h("div", { class: {
-            'tab-active-underline': true,
-            bottom: this.tabPlacement === 'bottom',
-          }, style: { 'margin-left': `calc(${this.selectedIndex} * 5rem)` } })),
-      h("div", { class: "content-container" },
-        h("slot", null))));
-  }
-  static get is() { return "ix-animated-tabs"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["animated-tabs.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["animated-tabs.css"]
-  }; }
-  static get properties() { return {
-    "disableAnimations": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "- For debugging purposes only"
-          }],
-        "text": ""
-      },
-      "attribute": "disable-animations",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "selectedIndex": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Current selected tab index"
-      },
-      "attribute": "selected-index",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "tabPlacement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'top' | 'bottom'",
-        "resolved": "\"bottom\" | \"top\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Placement of the tabs"
-      },
-      "attribute": "tab-placement",
-      "reflect": false,
-      "defaultValue": "'top'"
-    }
-  }; }
-  static get states() { return {
-    "tabs": {},
-    "activeIndex": {}
-  }; }
-  static get events() { return [{
-      "method": "tabClick",
-      "name": "tabClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Tab navigated"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "selectedIndex",
-      "methodName": "onTabSelectionChange"
-    }]; }
-  static get listeners() { return [{
-      "name": "mouseup",
-      "method": "onMouseDown",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }]; }
-}

package/dist/collection/components/application-header/application-header.css

@@ -1,30 +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.
- */
-:host {
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: 100%;
-  height: 2.75rem;
-  padding-left: 1rem;
-  color: var(--theme-app-header-logo--color);
-  background-color: var(--theme-app-header--background);
-  border-bottom: var(--theme-app-header--border-width) solid var(--theme-app-header--border-color);
-}
-:host .name {
-  margin-left: 2.5rem;
-  margin-right: 2.5rem;
-}
-:host .logo {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  height: 32px;
-  overflow: hidden;
-}

package/dist/collection/components/application-header/application-header.js

@@ -1,56 +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 { Component, Element, h, Host, Prop } from '@stencil/core';
-export class ApplicationHeader {
-  componentDidLoad() {
-    this.attachSiemensLogoIfLoaded();
-  }
-  async attachSiemensLogoIfLoaded() {
-    await window.customElements.whenDefined('ix-siemens-logo');
-    const logoElement = document.createElement('ix-siemens-logo');
-    if (!this.host.querySelector('[slot="logo"]')) {
-      this.host.shadowRoot.querySelector('.logo').appendChild(logoElement);
-    }
-  }
-  render() {
-    return (h(Host, null,
-      h("div", { class: "logo" },
-        h("slot", { name: "logo" })),
-      h("span", { class: "name" }, this.name),
-      h("slot", null)));
-  }
-  static get is() { return "ix-application-header"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["application-header.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["application-header.css"]
-  }; }
-  static get properties() { return {
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Application name"
-      },
-      "attribute": "name",
-      "reflect": false
-    }
-  }; }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/basic-navigation/basic-navigation.css

@@ -1,29 +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.
- */
-:host {
-  display: flex;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-}
-:host ix-application-header {
-  z-index: calc(var(--theme-z-index-sticky) + 1);
-}
-:host .content {
-  display: flex;
-  height: calc(100% - 2.75rem);
-  width: calc(100% - 4rem);
-  position: relative;
-  margin-left: 4rem;
-  overflow: auto;
-}
-:host.hide-header .content {
-  height: 100%;
-}

package/dist/collection/components/basic-navigation/basic-navigation.js

@@ -1,91 +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 { Component, Element, h, Host, Prop } from '@stencil/core';
-export class BasicNavigation {
-  constructor() {
-    /**
-     * Hide application header
-     */
-    this.hideHeader = false;
-  }
-  get menu() {
-    return this.hostElement.querySelector('ix-menu');
-  }
-  componentDidRender() {
-    if (this.menu) {
-      this.appendMenu();
-      this.adjustMenuHeight();
-      this.menu.applicationName = this.applicationName;
-    }
-  }
-  appendMenu() {
-    this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);
-  }
-  adjustMenuHeight() {
-    if (!this.hideHeader) {
-      this.menu.style.height = 'calc(100% - 2.75rem)';
-    }
-  }
-  render() {
-    return (h(Host, { class: {
-        'hide-header': this.hideHeader,
-      } },
-      !this.hideHeader ? (h("ix-application-header", { name: this.applicationName },
-        h("slot", { name: "logo" }))) : null,
-      h("div", { id: "menu-placeholder" }),
-      h("div", { class: "content", onClick: () => this.menu.toggleMenu(false) },
-        h("slot", null))));
-  }
-  static get is() { return "ix-basic-navigation"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["basic-navigation.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["basic-navigation.css"]
-  }; }
-  static get properties() { return {
-    "applicationName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Application name"
-      },
-      "attribute": "application-name",
-      "reflect": false
-    },
-    "hideHeader": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Hide application header"
-      },
-      "attribute": "hide-header",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get elementRef() { return "hostElement"; }
-}

package/dist/collection/components/blind/blind.css

@@ -1,146 +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.
- */
-/*
- * 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.
- */
-:host {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--theme-blind-base--background);
-  border: solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);
-  border-radius: var(--theme-blind--border-radius);
-  overflow: hidden;
-}
-:host .blind-header {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  border: solid var(--theme-blind--border-thickness) transparent;
-  border-radius: var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;
-  padding-right: 1rem;
-  transition: border-radius 150ms;
-  cursor: pointer;
-  z-index: 1;
-  color: var(--theme-blind-header-closed--color);
-  background-color: var(--theme-blind-header-closed--background);
-}
-:host .blind-header .glyph {
-  color: var(--theme-blind-header-icon-closed--color);
-  padding: 0.25rem 0.5rem;
-}
-:host .blind-header .blind-header-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-:host .blind-header .blind-header-title .blind-header-title-default {
-  -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 .blind-header:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .blind-header:not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-blind-header-open--background--hover);
-}
-:host .blind-header:not(.disabled):not(:disabled):hover .glyph {
-  color: var(--theme-blind-header-icon-open--color--hover);
-}
-:host .blind-header:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .blind-header:not(.disabled):not(:disabled):active {
-  background-color: var(--theme-blind-header-open--background--active);
-}
-:host .blind-header:not(.disabled):not(:disabled):active .glyph {
-  color: var(--theme-blind-header-icon-open--color--active);
-}
-:host .blind-header:not(.disabled):not(:disabled):focus-visible {
-  border-color: var(--theme-focus--border-color);
-}
-:host .blind-header.closed {
-  border-radius: var(--theme-blind--border-radius);
-}
-:host .blind-header.closed:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .blind-header.closed:not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-blind-header-open--background--hover);
-}
-:host .blind-header.closed:not(.disabled):not(:disabled):hover .glyph {
-  color: var(--theme-blind-header-icon-closed--color--hover);
-}
-:host .blind-header.closed:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .blind-header.closed:not(.disabled):not(:disabled):active {
-  background-color: var(--theme-blind-header-open--background--active);
-}
-:host .blind-header.closed:not(.disabled):not(:disabled):active .glyph {
-  color: var(--theme-blind-header-icon-closed--color--active);
-}
-:host .blind-custom-header {
-  display: flex;
-  align-items: center;
-}
-:host .blind-content {
-  display: block;
-  padding: 1rem;
-  max-height: 1;
-  transition-property: padding;
-  transition-duration: 150ms;
-  transition-timing-function: ease-in;
-}
-:host .blind-content.hide {
-  max-height: 0;
-  padding-top: 0px;
-  padding-bottom: 0px;
-}