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

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

@@ -1,195 +0,0 @@
-@charset "UTF-8";
-/*
- * 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.
- */
-ix-tab-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 40px;
-  padding: 10px 1.5rem;
-  line-height: 20px;
-  font-size: 14px;
-  font-weight: bold;
-  background-color: var(--theme-tab--background);
-  color: var(--theme-tab--color);
-}
-ix-tab-item.circle {
-  height: 72px;
-}
-ix-tab-item.top::after {
-  top: 0;
-}
-ix-tab-item.bottom::after {
-  bottom: 0;
-}
-ix-tab-item::after {
-  content: "";
-  position: absolute;
-  background-color: var(--theme-tab-indicator--background);
-  width: 100%;
-  height: var(--theme-tab-indicator--height);
-  left: 0;
-}
-ix-tab-item.stretched {
-  flex-basis: 100%;
-  max-width: -moz-max-content;
-  max-width: max-content;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-ix-tab-item .text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: inline-flex;
-  vertical-align: middle;
-}
-ix-tab-item .text span,
-ix-tab-item .text span::before {
-  pointer-events: none;
-}
-ix-tab-item:hover:not(.circle) {
-  background-color: var(--theme-tab--background--hover);
-  color: var(--theme-tab-color-hover);
-  cursor: pointer;
-}
-ix-tab-item:hover:not(.circle)::after {
-  background-color: var(--theme-tab-indicator--background--hover);
-}
-ix-tab-item:active:not(.circle) {
-  background-color: var(--theme-tab--background--active);
-  color: var(--theme-tab-color--active);
-}
-ix-tab-item:active:not(.circle)::after {
-  background-color: var(--theme-tab-indicator--background--active);
-}
-ix-tab-item:focus-visible {
-  outline: 0px solid var(--focus--border-color);
-}
-ix-tab-item:focus-visible .circle {
-  outline: 1px solid var(--focus--border-color);
-}
-ix-tab-item:focus-visible:not(.circle) {
-  outline: 1px solid var(--focus--border-color);
-}
-ix-tab-item.disabled {
-  color: var(--theme-tab--color--disabled);
-  background-color: var(--theme-tab--background--disabled);
-}
-ix-tab-item.disabled::after {
-  background-color: var(--theme-tab-indicator--background--disabled);
-}
-ix-tab-item.selected:not(.disabled) {
-  background-color: var(--theme-tab--background--selected);
-  color: var(--theme-tab--color--selected);
-}
-ix-tab-item.selected:not(.disabled)::after {
-  background-color: var(--theme-tab-indicator--background--selected);
-}
-ix-tab-item.icon {
-  padding: 1.5rem 0.5rem;
-}
-ix-tab-item.small-tab {
-  height: 32px;
-  padding: 1rem;
-}
-ix-tab-item.small-tab.icon {
-  padding: 1rem 0.25rem;
-}
-ix-tab-item .circle {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 48px;
-  width: 48px;
-  background-color: var(--theme-animated-tab-indicator--background);
-  border-radius: 50%;
-  border: 2px solid var(--theme-animated-tab-circle--border-color);
-  color: var(--theme-an…icon--color);
-  cursor: pointer;
-}
-ix-tab-item .circle.selected:not(.disabled) {
-  background-color: var(--theme-animated-tab-circle--background--selected);
-  color: var(--theme-animated-tab-icon--color--selected);
-  border-color: var(--theme-animated-tab-circle--border-color--selected);
-}
-ix-tab-item .circle.selected:not(.disabled):hover {
-  background-color: var(--theme-animated-tab-circle--background--selected);
-}
-ix-tab-item .circle:hover {
-  background-color: var(--theme-animated-tab-circle--background--hover);
-}
-ix-tab-item .circle:active {
-  background-color: var(--theme-animated-tab-circle--background--active);
-}
-ix-tab-item .circle:active {
-  background-color: var(--theme-animated-tab-circle--background--active);
-}
-ix-tab-item .circle.disabled {
-  background-color: var(--theme-animated-tab-circle--background--disabled);
-  border-color: var(--theme-animated-tab-circle--border-color--disabled);
-}
-ix-tab-item .counter {
-  position: absolute;
-  z-index: 1;
-  height: 16px;
-  width: auto;
-  background-color: var(--theme-pill-outline--background);
-  border: 1px solid var(--theme-tab-pill--border-color);
-  border-radius: 100px;
-  bottom: 6px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--theme-pill-outline--color);
-  cursor: pointer;
-}
-ix-tab-item .counter.selected {
-  border-color: var(--theme-tab-pill--border-color--selected);
-}
-ix-tab-item .counter.disabled {
-  border-color: var(--theme-tab-pill--border-color--disabled);
-}
-ix-tab-item .hidden {
-  display: none;
-}

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

@@ -1,219 +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, h, Host, Prop } from '@stencil/core';
-export class TabItem {
-  constructor() {
-    /**
-     * Set selected tab
-     */
-    this.selected = false;
-    /**
-     * Set disabled tab
-     */
-    this.disabled = false;
-    /**
-     * Set small size tab
-     */
-    this.small = false;
-    /**
-     * Set icon only tab
-     */
-    this.icon = false;
-    /**
-     * Set rounded tab
-     */
-    this.rounded = false;
-    /**
-     * Set layout width style
-     */
-    this.layout = 'auto';
-    /**
-     * Set selected placement
-     */
-    this.placement = 'bottom';
-  }
-  tabItemClasses(props) {
-    return {
-      selected: props.selected,
-      disabled: props.disabled,
-      'small-tab': props.small,
-      icon: props.small,
-      stretched: props.layout === 'stretched',
-      bottom: props.placement === 'bottom',
-      top: props.placement === 'top',
-      circle: props.circle
-    };
-  }
-  render() {
-    return (h(Host, { class: this.tabItemClasses({
-        selected: this.selected,
-        disabled: this.disabled,
-        small: this.small,
-        icon: this.icon,
-        layout: this.layout,
-        placement: this.placement,
-        circle: this.rounded,
-      }), tabIndex: 0 },
-      h("div", { class: { circle: this.rounded, text: !this.rounded, selected: this.selected, disabled: this.disabled } },
-        h("slot", null)),
-      h("div", { class: { counter: true, selected: this.selected, hidden: !(this.rounded && this.counter !== undefined), disabled: this.disabled } }, this.counter)));
-  }
-  static get is() { return "ix-tab-item"; }
-  static get originalStyleUrls() { return {
-    "$": ["tab-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["tab-item.css"]
-  }; }
-  static get properties() { return {
-    "selected": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set selected tab"
-      },
-      "attribute": "selected",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set disabled tab"
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "small": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set small size tab"
-      },
-      "attribute": "small",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "icon": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set icon only tab"
-      },
-      "attribute": "icon",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "rounded": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set rounded tab"
-      },
-      "attribute": "rounded",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "counter": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set counter value"
-      },
-      "attribute": "counter",
-      "reflect": false
-    },
-    "layout": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'auto' | 'stretched'",
-        "resolved": "\"auto\" | \"stretched\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set layout width style"
-      },
-      "attribute": "layout",
-      "reflect": false,
-      "defaultValue": "'auto'"
-    },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'bottom' | 'top'",
-        "resolved": "\"bottom\" | \"top\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set selected placement"
-      },
-      "attribute": "placement",
-      "reflect": false,
-      "defaultValue": "'bottom'"
-    }
-  }; }
-}

package/dist/collection/components/tabs/tabs.css

@@ -1,84 +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.
- */
-ix-tabs {
-  width: auto;
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-ix-tabs .tab-items {
-  overflow: hidden;
-  scroll-behavior: smooth;
-}
-ix-tabs .tab-items .items-content {
-  display: flex;
-  align-items: center;
-}
-ix-tabs .arrow {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  margin: auto 0;
-  border-radius: 4px;
-  color: var(--theme-btn-invisible-primary--color);
-  background-color: var(--theme-btn-invisible-primary--background);
-  z-index: 2;
-}
-ix-tabs .arrow:hover {
-  color: var(--theme-btn-invisible-primary--color--hover);
-  background-color: var(--theme-btn-invisible-primary--background--hover);
-}
-ix-tabs .arrow:active {
-  color: var(--theme-btn-invisible-primary--color--active);
-  background-color: var(--theme-btn-invisible-primary--background--active);
-}
-ix-tabs .arrow.right {
-  left: auto;
-  right: 0;
-}
-ix-tabs .overflow-shadow {
-  width: 50px;
-  height: 40px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  background: linear-gradient(90deg, var(--theme-color-1) 50%, transparent);
-  z-index: 1;
-}
-ix-tabs .overflow-shadow.right {
-  left: auto;
-  right: 0;
-  background: linear-gradient(90deg, transparent, var(--theme-color-1) 50%);
-}