@siemens/ix 1.6.2 → 2.0.0-beta.0

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

@@ -35,7 +35,15 @@
  * 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 {
+/*
+ * 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 {
   position: relative;
   display: flex;
   align-items: center;
@@ -48,16 +56,12 @@ ix-tab-item {
   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;
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
 }
-ix-tab-item::after {
+:host ::after {
   content: "";
   position: absolute;
   background-color: var(--theme-tab-indicator--background);
@@ -65,105 +69,50 @@ ix-tab-item::after {
   height: var(--theme-tab-indicator--height);
   left: 0;
 }
-ix-tab-item.stretched {
-  flex-basis: 100%;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-ix-tab-item .text {
+:host .text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   vertical-align: middle;
 }
-ix-tab-item .text span,
-ix-tab-item .text span::before {
+:host .text span,
+:host .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 {
+:host .circle {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 48px;
-  width: 48px;
+  height: 3rem;
+  width: 3rem;
   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) {
+:host .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 {
+:host .circle.selected:not(.disabled):hover {
   background-color: var(--theme-animated-tab-circle--background--selected);
 }
-ix-tab-item .circle:hover {
+:host .circle:hover {
   background-color: var(--theme-animated-tab-circle--background--hover);
 }
-ix-tab-item .circle:active {
+:host .circle:active {
   background-color: var(--theme-animated-tab-circle--background--active);
 }
-ix-tab-item .circle:active {
+:host .circle:active {
   background-color: var(--theme-animated-tab-circle--background--active);
 }
-ix-tab-item .circle.disabled {
+:host .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 {
+:host .counter {
   position: absolute;
   z-index: 1;
   height: 16px;
@@ -178,16 +127,100 @@ ix-tab-item .counter {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
   font-size: 12px;
-  line-height: 16px;
+  line-height: 14px;
   color: var(--theme-pill-outline--color);
   cursor: pointer;
 }
-ix-tab-item .counter.selected {
+:host .counter.selected {
   border-color: var(--theme-tab-pill--border-color--selected);
 }
-ix-tab-item .counter.disabled {
+:host .counter.selected::after {
+  display: none;
+}
+:host .counter.disabled {
   border-color: var(--theme-tab-pill--border-color--disabled);
 }
-ix-tab-item .hidden {
+:host .counter::after {
   display: none;
+}
+:host .hidden {
+  display: none;
+}
+
+:host(.circle) {
+  height: 72px;
+}
+
+:host(.top) ::after {
+  top: 0;
+}
+
+:host(.bottom) ::after {
+  bottom: 0;
+}
+
+:host(.stretched) {
+  flex-basis: 100%;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:host(:hover:not(.circle)) {
+  background-color: var(--theme-tab--background--hover);
+  color: var(--theme-tab-color-hover);
+  cursor: pointer;
+}
+:host(:hover:not(.circle)) ::after {
+  background-color: var(--theme-tab-indicator--background--hover);
+}
+
+:host(:active:not(.circle)) {
+  background-color: var(--theme-tab--background--active);
+  color: var(--theme-tab-color--active);
+}
+:host(:active:not(.circle)) ::after {
+  background-color: var(--theme-tab-indicator--background--active);
+}
+
+:host(:focus-visible) {
+  outline: 0px solid var(--focus--border-color);
+}
+:host(:focus-visible) .circle {
+  outline: 1px solid var(--focus--border-color);
+}
+
+:host(:focus-visible:not(.circle)) {
+  outline: 1px solid var(--focus--border-color);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+  color: var(--theme-tab--color--disabled);
+  background-color: var(--theme-tab--background--disabled);
+}
+:host(.disabled) ::after {
+  background-color: var(--theme-tab-indicator--background--disabled);
+}
+
+:host(.selected:not(.disabled)) {
+  background-color: var(--theme-tab--background--selected);
+  color: var(--theme-tab--color--selected);
+}
+:host(.selected:not(.disabled)) ::after {
+  background-color: var(--theme-tab-indicator--background--selected);
+}
+
+:host(.icon) {
+  padding: 1.5rem 0.5rem;
+}
+
+:host(.small-tab) {
+  height: 32px;
+  padding: 1rem;
+}
+
+:host(.small-tab.icon) {
+  padding: 1rem 0.25rem;
 }

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

@@ -52,6 +52,7 @@ export class TabItem {
       } }, this.counter)));
   }
   static get is() { return "ix-tab-item"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["tab-item.scss"]

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

@@ -1 +1 @@
-{"version":3,"file":"tab-item.js","sourceRoot":"","sources":["../../../src/components/tab-item/tab-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,OAAO;;oBAIC,KAAK;oBAKL,KAAK;iBAKR,KAAK;gBAKN,KAAK;mBAKF,KAAK;;kBAUgB,MAAM;qBAKP,QAAQ;;EAEtC,cAAc,CAAC,KAQtB;IACC,OAAO;MACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,WAAW,EAAE,KAAK,CAAC,KAAK;MACxB,IAAI,EAAE,KAAK,CAAC,KAAK;MACjB,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;MACvC,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;MACpC,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;MAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;KACrB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;QACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,MAAM,EAAE,IAAI,CAAC,OAAO;OACrB,CAAC,EACF,QAAQ,EAAE,CAAC;MAEX,WACE,KAAK,EAAE;UACL,MAAM,EAAE,IAAI,CAAC,OAAO;UACpB,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;UACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;QAED,eAAa,CACT;MACN,WACE,KAAK,EAAE;UACL,OAAO,EAAE,IAAI;UACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;UACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,IAEA,IAAI,CAAC,OAAO,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-tab-item',\n  styleUrl: 'tab-item.scss',\n  scoped: false,\n})\nexport class TabItem {\n  /**\n   * Set selected tab\n   */\n  @Prop() selected = false;\n\n  /**\n   * Set disabled tab\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set small size tab\n   */\n  @Prop() small = false;\n\n  /**\n   * Set icon only tab\n   */\n  @Prop() icon = false;\n\n  /**\n   * Set rounded tab\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set counter value\n   */\n  @Prop() counter: number;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set selected placement\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  private tabItemClasses(props: {\n    selected: boolean;\n    disabled: boolean;\n    small: boolean;\n    icon: boolean;\n    circle: boolean;\n    layout: 'auto' | 'stretched';\n    placement: 'bottom' | 'top';\n  }) {\n    return {\n      selected: props.selected,\n      disabled: props.disabled,\n      'small-tab': props.small,\n      icon: props.small,\n      stretched: props.layout === 'stretched',\n      bottom: props.placement === 'bottom',\n      top: props.placement === 'top',\n      circle: props.circle,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.tabItemClasses({\n          selected: this.selected,\n          disabled: this.disabled,\n          small: this.small,\n          icon: this.icon,\n          layout: this.layout,\n          placement: this.placement,\n          circle: this.rounded,\n        })}\n        tabIndex={0}\n      >\n        <div\n          class={{\n            circle: this.rounded,\n            text: !this.rounded,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            counter: true,\n            selected: this.selected,\n            hidden: !(this.rounded && this.counter !== undefined),\n            disabled: this.disabled,\n          }}\n        >\n          {this.counter}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"tab-item.js","sourceRoot":"","sources":["../../../src/components/tab-item/tab-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,OAAO;;oBAIC,KAAK;oBAKL,KAAK;iBAKR,KAAK;gBAKN,KAAK;mBAKF,KAAK;;kBAUgB,MAAM;qBAKP,QAAQ;;EAEtC,cAAc,CAAC,KAQtB;IACC,OAAO;MACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,WAAW,EAAE,KAAK,CAAC,KAAK;MACxB,IAAI,EAAE,KAAK,CAAC,KAAK;MACjB,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;MACvC,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;MACpC,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;MAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;KACrB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;QACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,MAAM,EAAE,IAAI,CAAC,OAAO;OACrB,CAAC,EACF,QAAQ,EAAE,CAAC;MAEX,WACE,KAAK,EAAE;UACL,MAAM,EAAE,IAAI,CAAC,OAAO;UACpB,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;UACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;QAED,eAAa,CACT;MACN,WACE,KAAK,EAAE;UACL,OAAO,EAAE,IAAI;UACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;UACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,IAEA,IAAI,CAAC,OAAO,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-tab-item',\n  styleUrl: 'tab-item.scss',\n  shadow: true,\n})\nexport class TabItem {\n  /**\n   * Set selected tab\n   */\n  @Prop() selected = false;\n\n  /**\n   * Set disabled tab\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set small size tab\n   */\n  @Prop() small = false;\n\n  /**\n   * Set icon only tab\n   */\n  @Prop() icon = false;\n\n  /**\n   * Set rounded tab\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set counter value\n   */\n  @Prop() counter: number;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set selected placement\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  private tabItemClasses(props: {\n    selected: boolean;\n    disabled: boolean;\n    small: boolean;\n    icon: boolean;\n    circle: boolean;\n    layout: 'auto' | 'stretched';\n    placement: 'bottom' | 'top';\n  }) {\n    return {\n      selected: props.selected,\n      disabled: props.disabled,\n      'small-tab': props.small,\n      icon: props.small,\n      stretched: props.layout === 'stretched',\n      bottom: props.placement === 'bottom',\n      top: props.placement === 'top',\n      circle: props.circle,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.tabItemClasses({\n          selected: this.selected,\n          disabled: this.disabled,\n          small: this.small,\n          icon: this.icon,\n          layout: this.layout,\n          placement: this.placement,\n          circle: this.rounded,\n        })}\n        tabIndex={0}\n      >\n        <div\n          class={{\n            circle: this.rounded,\n            text: !this.rounded,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            counter: true,\n            selected: this.selected,\n            hidden: !(this.rounded && this.counter !== undefined),\n            disabled: this.disabled,\n          }}\n        >\n          {this.counter}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -26,22 +26,35 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-ix-tabs {
+/*
+ * 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 {
   width: auto;
   display: flex;
   align-items: center;
   position: relative;
 }
-ix-tabs .tab-items {
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host .tab-items {
   overflow: hidden;
   scroll-behavior: smooth;
   width: 100%;
 }
-ix-tabs .tab-items .items-content {
+:host .tab-items .items-content {
   display: flex;
   align-items: center;
 }
-ix-tabs .arrow {
+:host .arrow {
   position: absolute;
   display: flex;
   align-items: center;
@@ -57,29 +70,34 @@ ix-tabs .arrow {
   background-color: var(--theme-btn-invisible-primary--background);
   z-index: 2;
 }
-ix-tabs .arrow:hover {
+:host .arrow:hover {
   color: var(--theme-btn-invisible-primary--color--hover);
   background-color: var(--theme-btn-invisible-primary--background--hover);
 }
-ix-tabs .arrow:active {
+:host .arrow:active {
   color: var(--theme-btn-invisible-primary--color--active);
   background-color: var(--theme-btn-invisible-primary--background--active);
 }
-ix-tabs .arrow.right {
+:host .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;
+:host .overflow-shadow {
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  pointer-events: all;
 }
-ix-tabs .overflow-shadow.right {
-  left: auto;
-  right: 0;
-  background: linear-gradient(90deg, transparent, var(--theme-color-1) 50%);
+:host .overflow-shadow.shadow-left {
+  -webkit-mask-image: linear-gradient(90deg, transparent 0px, black 45px);
+          mask-image: linear-gradient(90deg, transparent 0px, black 45px);
+}
+:host .overflow-shadow.shadow-right {
+  -webkit-mask-image: linear-gradient(90deg, black calc(100% - 45px), transparent 100%);
+          mask-image: linear-gradient(90deg, black calc(100% - 45px), transparent 100%);
+}
+:host .overflow-shadow.shadow-both {
+  -webkit-mask-image: linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);
+          mask-image: linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);
 }

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

@@ -41,7 +41,7 @@ export class Tabs {
     return this.getTabs()[tabIndex];
   }
   getTabsWrapper() {
-    return this.hostElement.getElementsByClassName('items-content')[0];
+    return this.hostElement.shadowRoot.querySelector('.items-content');
   }
   showArrows() {
     try {
@@ -156,8 +156,10 @@ export class Tabs {
   }
   componentWillRender() {
     requestAnimationFrame(() => {
-      this.styleNextArrow = this.getArrowStyle(this.showNextArrow());
-      this.stylePreviousArrow = this.getArrowStyle(this.showPreviousArrow());
+      const showNextArrow = this.showNextArrow();
+      const previousArrow = this.showPreviousArrow();
+      this.styleNextArrow = this.getArrowStyle(showNextArrow);
+      this.stylePreviousArrow = this.getArrowStyle(previousArrow);
     });
   }
   componentDidLoad() {
@@ -170,9 +172,16 @@ export class Tabs {
     });
   }
   render() {
-    return (h(Host, null, h("div", { class: "overflow-shadow", style: this.stylePreviousArrow }), h("div", { class: "arrow", style: this.stylePreviousArrow, onClick: () => this.move(this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-left-small" })), h("div", { class: "tab-items" }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "overflow-shadow right", style: this.styleNextArrow }), h("div", { class: "arrow right", style: this.styleNextArrow, onClick: () => this.move(-this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-right-small" }))));
+    return (h(Host, null, h("div", { class: "arrow", style: this.stylePreviousArrow, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { name: "chevron-left-small" })), h("div", { class: {
+        'tab-items': true,
+        'overflow-shadow': true,
+        'shadow-left': this.showPreviousArrow(),
+        'shadow-right': this.showNextArrow(),
+        'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
+      } }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "arrow right", style: this.styleNextArrow, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { name: "chevron-right-small" }))));
   }
   static get is() { return "ix-tabs"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["tabs.scss"]

package/dist/collection/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\n\nlet windowStartSize = window.innerWidth;\n\n@Component({\n  tag: 'ix-tabs',\n  styleUrl: 'tabs.scss',\n  scoped: false,\n})\nexport class Tabs {\n  @Element() hostElement!: HTMLIxTabsElement;\n\n  /**\n   * Set tab items to small size\n   */\n  @Prop() small = false;\n\n  /**\n   * Set rounded tabs\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set default selected tab by index\n   */\n  @Prop({ mutable: true }) selected = 0;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set placement style\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  @State() totalItems = 0;\n  @State() currentScrollAmount = 0;\n  @State() scrollAmount = 100;\n  @State() styleNextArrow = {};\n  @State() stylePreviousArrow = {};\n\n  @State() scrollActionAmount = 0;\n  private clickAction: {\n    timeout: NodeJS.Timeout;\n    isClick: boolean;\n  } = {\n    timeout: null,\n    isClick: true,\n  };\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.totalItems = 0;\n    this.totalItems = this.getTabs().length;\n\n    if (windowStartSize === 0) return (windowStartSize = window.innerWidth);\n    this.move(windowStartSize - window.innerWidth);\n    windowStartSize = window.innerWidth;\n  }\n\n  private getTabs() {\n    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n  }\n\n  private getTab(tabIndex: number) {\n    return this.getTabs()[tabIndex];\n  }\n\n  private getTabsWrapper() {\n    return this.hostElement.getElementsByClassName('items-content')[0];\n  }\n\n  private showArrows() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      return (\n        tabWrapper.scrollWidth >\n          Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n        this.layout === 'auto'\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showPreviousArrow() {\n    try {\n      return this.showArrows() && this.scrollActionAmount < 0;\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showNextArrow() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n      return (\n        this.showArrows() &&\n        this.scrollActionAmount >\n          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private getArrowStyle(condition: boolean) {\n    return {\n      opacity: condition ? '1' : '0',\n      zIndex: condition ? '1' : '-1',\n    };\n  }\n\n  private move(amount: number, click = false) {\n    const tabWrapper = this.getTabsWrapper();\n    const maxScrollWidth =\n      (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;\n\n    amount = this.currentScrollAmount + amount;\n    amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;\n\n    const styles = [\n      `transform: translateX(${amount}px);`,\n      click ? 'transition: all ease-in-out 400ms;' : '',\n    ].join('');\n\n    tabWrapper.setAttribute('style', styles);\n\n    if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n    else this.scrollActionAmount = amount;\n  }\n\n  private moveTabToView(tabIndex: number) {\n    if (!this.showArrows()) return;\n\n    const tab = this.getTab(tabIndex).getBoundingClientRect();\n    const amount = tab.x * -1;\n    this.move(amount, true);\n  }\n\n  private setSelected(index: number) {\n    this.selected = index;\n  }\n\n  private clickTab(index: number) {\n    if (this.dragStop()) return;\n\n    this.setSelected(index);\n    this.moveTabToView(index);\n  }\n\n  private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n    if (!this.showArrows()) return;\n    if (event.button > 0) return;\n\n    this.clickAction.timeout =\n      this.clickAction.timeout === null\n        ? setTimeout(() => (this.clickAction.isClick = false), 300)\n        : null;\n\n    const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n    const mousedownPositionX = event.clientX;\n    const move = (event: MouseEvent) =>\n      this.dragMove(event, tabPositionX, mousedownPositionX);\n\n    window.addEventListener('mouseup', () => {\n      window.removeEventListener('mousemove', move, false);\n      this.dragStop();\n    });\n    window.addEventListener('mousemove', move, false);\n  }\n\n  private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n    this.move(event.clientX + tabX - mousedownX);\n  }\n\n  private dragStop() {\n    clearTimeout(this.clickAction.timeout);\n    this.clickAction.timeout = null;\n\n    if (this.clickAction.isClick) return false;\n\n    this.currentScrollAmount = this.scrollActionAmount;\n    this.clickAction.isClick = true;\n\n    return true;\n  }\n\n  componentDidRender() {\n    const tabs = this.getTabs();\n    this.totalItems = tabs.length;\n\n    tabs.forEach((element, index) => {\n      if (this.small) element.setAttribute('small', 'true');\n\n      if (this.rounded) element.setAttribute('rounded', 'true');\n\n      element.setAttribute('layout', this.layout);\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n      element.setAttribute('placement', this.placement);\n    });\n  }\n\n  componentWillRender() {\n    requestAnimationFrame(() => {\n      this.styleNextArrow = this.getArrowStyle(this.showNextArrow());\n      this.stylePreviousArrow = this.getArrowStyle(this.showPreviousArrow());\n    });\n  }\n\n  componentDidLoad() {\n    const tabs = this.getTabs();\n    tabs.forEach((element, index) => {\n      const isDisabled = element.getAttribute('disabled') !== null;\n      if (!isDisabled)\n        element.addEventListener('click', () => this.clickTab(index));\n\n      element.addEventListener('mousedown', (event) =>\n        this.dragStart(element, event)\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"overflow-shadow\" style={this.stylePreviousArrow}></div>\n        <div\n          class=\"arrow\"\n          style={this.stylePreviousArrow}\n          onClick={() => this.move(this.scrollAmount, true)}\n        >\n          <span class=\"glyph glyph-chevron-left-small\"></span>\n        </div>\n        <div class=\"tab-items\">\n          <div class=\"items-content\">\n            <slot></slot>\n          </div>\n        </div>\n        <div class=\"overflow-shadow right\" style={this.styleNextArrow}></div>\n        <div\n          class=\"arrow right\"\n          style={this.styleNextArrow}\n          onClick={() => this.move(-this.scrollAmount, true)}\n        >\n          <span class=\"glyph glyph-chevron-right-small\"></span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\n\nlet windowStartSize = window.innerWidth;\n\n@Component({\n  tag: 'ix-tabs',\n  styleUrl: 'tabs.scss',\n  shadow: true,\n})\nexport class Tabs {\n  @Element() hostElement!: HTMLIxTabsElement;\n\n  /**\n   * Set tab items to small size\n   */\n  @Prop() small = false;\n\n  /**\n   * Set rounded tabs\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set default selected tab by index\n   */\n  @Prop({ mutable: true }) selected = 0;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set placement style\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  @State() totalItems = 0;\n  @State() currentScrollAmount = 0;\n  @State() scrollAmount = 100;\n  @State() styleNextArrow = {};\n  @State() stylePreviousArrow = {};\n\n  @State() scrollActionAmount = 0;\n  private clickAction: {\n    timeout: NodeJS.Timeout;\n    isClick: boolean;\n  } = {\n    timeout: null,\n    isClick: true,\n  };\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.totalItems = 0;\n    this.totalItems = this.getTabs().length;\n\n    if (windowStartSize === 0) return (windowStartSize = window.innerWidth);\n    this.move(windowStartSize - window.innerWidth);\n    windowStartSize = window.innerWidth;\n  }\n\n  private getTabs() {\n    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n  }\n\n  private getTab(tabIndex: number) {\n    return this.getTabs()[tabIndex];\n  }\n\n  private getTabsWrapper() {\n    return this.hostElement.shadowRoot.querySelector('.items-content');\n  }\n\n  private showArrows() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      return (\n        tabWrapper.scrollWidth >\n          Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n        this.layout === 'auto'\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showPreviousArrow() {\n    try {\n      return this.showArrows() && this.scrollActionAmount < 0;\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showNextArrow() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n      return (\n        this.showArrows() &&\n        this.scrollActionAmount >\n          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private getArrowStyle(condition: boolean) {\n    return {\n      opacity: condition ? '1' : '0',\n      zIndex: condition ? '1' : '-1',\n    };\n  }\n\n  private move(amount: number, click = false) {\n    const tabWrapper = this.getTabsWrapper();\n    const maxScrollWidth =\n      (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;\n\n    amount = this.currentScrollAmount + amount;\n    amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;\n\n    const styles = [\n      `transform: translateX(${amount}px);`,\n      click ? 'transition: all ease-in-out 400ms;' : '',\n    ].join('');\n\n    tabWrapper.setAttribute('style', styles);\n\n    if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n    else this.scrollActionAmount = amount;\n  }\n\n  private moveTabToView(tabIndex: number) {\n    if (!this.showArrows()) return;\n\n    const tab = this.getTab(tabIndex).getBoundingClientRect();\n    const amount = tab.x * -1;\n    this.move(amount, true);\n  }\n\n  private setSelected(index: number) {\n    this.selected = index;\n  }\n\n  private clickTab(index: number) {\n    if (this.dragStop()) return;\n\n    this.setSelected(index);\n    this.moveTabToView(index);\n  }\n\n  private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n    if (!this.showArrows()) return;\n    if (event.button > 0) return;\n\n    this.clickAction.timeout =\n      this.clickAction.timeout === null\n        ? setTimeout(() => (this.clickAction.isClick = false), 300)\n        : null;\n\n    const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n    const mousedownPositionX = event.clientX;\n    const move = (event: MouseEvent) =>\n      this.dragMove(event, tabPositionX, mousedownPositionX);\n\n    window.addEventListener('mouseup', () => {\n      window.removeEventListener('mousemove', move, false);\n      this.dragStop();\n    });\n    window.addEventListener('mousemove', move, false);\n  }\n\n  private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n    this.move(event.clientX + tabX - mousedownX);\n  }\n\n  private dragStop() {\n    clearTimeout(this.clickAction.timeout);\n    this.clickAction.timeout = null;\n\n    if (this.clickAction.isClick) return false;\n\n    this.currentScrollAmount = this.scrollActionAmount;\n    this.clickAction.isClick = true;\n\n    return true;\n  }\n\n  componentDidRender() {\n    const tabs = this.getTabs();\n    this.totalItems = tabs.length;\n\n    tabs.forEach((element, index) => {\n      if (this.small) element.setAttribute('small', 'true');\n\n      if (this.rounded) element.setAttribute('rounded', 'true');\n\n      element.setAttribute('layout', this.layout);\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n      element.setAttribute('placement', this.placement);\n    });\n  }\n\n  componentWillRender() {\n    requestAnimationFrame(() => {\n      const showNextArrow = this.showNextArrow();\n      const previousArrow = this.showPreviousArrow();\n      this.styleNextArrow = this.getArrowStyle(showNextArrow);\n      this.stylePreviousArrow = this.getArrowStyle(previousArrow);\n    });\n  }\n\n  componentDidLoad() {\n    const tabs = this.getTabs();\n    tabs.forEach((element, index) => {\n      const isDisabled = element.getAttribute('disabled') !== null;\n      if (!isDisabled)\n        element.addEventListener('click', () => this.clickTab(index));\n\n      element.addEventListener('mousedown', (event) =>\n        this.dragStart(element, event)\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"arrow\"\n          style={this.stylePreviousArrow}\n          onClick={() => this.move(this.scrollAmount, true)}\n        >\n          <ix-icon name=\"chevron-left-small\"></ix-icon>\n        </div>\n        <div\n          class={{\n            'tab-items': true,\n            'overflow-shadow': true,\n            'shadow-left': this.showPreviousArrow(),\n            'shadow-right': this.showNextArrow(),\n            'shadow-both': this.showNextArrow() && this.showPreviousArrow(),\n          }}\n        >\n          <div class=\"items-content\">\n            <slot></slot>\n          </div>\n        </div>\n        <div\n          class=\"arrow right\"\n          style={this.styleNextArrow}\n          onClick={() => this.move(-this.scrollAmount, true)}\n        >\n          <ix-icon name=\"chevron-right-small\"></ix-icon>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tile/tile.css

@@ -18,6 +18,22 @@
 /* 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.
+ */
+/*
+ * 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.
+ */
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -38,40 +54,33 @@
   color: var(--theme-color-std-text);
   box-shadow: var(--theme-tile--box-shadow);
 }
-:host.tile-small {
-  height: 2.5rem;
-  min-height: 2.5rem;
-  max-height: 2.5rem;
-}
-:host.tile-medium {
-  height: 5rem;
-  min-height: 5rem;
-  max-height: 5rem;
-}
-:host.tile-big {
-  height: 10rem;
-  min-height: 10rem;
-  max-height: 10rem;
-}
-:host:active, :host:focus-visible, :host:visited {
-  outline: none;
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
 }
 :host .tile-header {
   display: flex;
   align-items: center;
+  -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 .tile-header:not(:empty),
-:host .tile-subheader:not(:empty),
-:host .tile-content:not(:empty),
-:host .tile-footer:not(:empty) {
+:host .tile-header,
+:host .tile-subheader,
+:host .tile-content,
+:host .tile-footer {
   padding: 0 1rem;
 }
 :host .tile-header,
-:host .tile-subheader,
 :host .tile-content {
   flex-grow: 1;
 }
-:host .tile-header:not(:empty) {
+:host .tile-header.has-content {
   display: flex;
   height: 2.5rem;
   max-height: 2.5rem;
@@ -82,11 +91,32 @@
   color: var(--theme-btn-invisible-secondary--color);
   flex-grow: 0;
 }
-:host .tile-content {
-  flex-grow: 1;
-}
-:host .tile-footer:not(:empty) {
+:host .tile-footer.has-content {
   -webkit-border-before: 1px solid var(--theme-color-1);
           border-block-start: 1px solid var(--theme-color-1);
   height: 2.5rem;
+}
+
+:host(.tile-small) {
+  height: 2.5rem;
+  min-height: 2.5rem;
+  max-height: 2.5rem;
+}
+
+:host(.tile-medium) {
+  height: 5rem;
+  min-height: 5rem;
+  max-height: 5rem;
+}
+
+:host(.tile-big) {
+  height: 10rem;
+  min-height: 10rem;
+  max-height: 10rem;
+}
+
+:host(:active),
+:host(:focus-visible),
+:host(:visited) {
+  outline: none;
 }

package/dist/collection/components/tile/tile.js

@@ -10,16 +10,30 @@ import { h, Host } from '@stencil/core';
 export class Tile {
   constructor() {
     this.size = 'medium';
+    this.hasHeaderSlot = false;
+    this.hasFooterSlot = false;
+  }
+  handleHeaderSlotChange() {
+    this.hasHeaderSlot = !!this.hostElement.querySelector('[slot="header"]');
+  }
+  handleFooterSlotChange() {
+    this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
   }
   render() {
     return (h(Host, { class: {
         'tile-small': this.size === 'small',
         'tile-medium': this.size === 'medium',
         'tile-big': this.size === 'big',
-      } }, h("div", { class: "tile-header text-l-title" }, h("slot", { name: "header" })), h("div", { class: "tile-subheader" }, h("slot", { name: "subheader" })), h("div", { class: "tile-content" }, h("slot", null)), h("div", { class: "tile-footer" }, h("slot", { name: "footer" }))));
+      } }, h("div", { class: {
+        'tile-header': true,
+        'has-content': this.hasHeaderSlot,
+      } }, h("slot", { name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { class: "tile-subheader" }, h("slot", { name: "subheader" })), h("div", { class: "tile-content" }, h("slot", null)), h("div", { class: {
+        'tile-footer': true,
+        'has-content': this.hasFooterSlot,
+      } }, h("slot", { name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
   }
   static get is() { return "ix-tile"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["tile.scss"]
@@ -52,5 +66,12 @@ export class Tile {
       }
     };
   }
+  static get states() {
+    return {
+      "hasHeaderSlot": {},
+      "hasFooterSlot": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=tile.js.map

package/dist/collection/components/tile/tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/components/tile/tile.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,IAAI;;gBAI4B,QAAQ;;EAEnD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;OAChC;MAED,WAAK,KAAK,EAAC,0BAA0B;QACnC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;MACN,WAAK,KAAK,EAAC,gBAAgB;QACzB,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;MACN,WAAK,KAAK,EAAC,cAAc;QACvB,eAAa,CACT;MACN,WAAK,KAAK,EAAC,aAAa;QACtB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-tile',\n  styleUrl: 'tile.scss',\n  scoped: true,\n})\nexport class Tile {\n  /**\n   * Size of the tile - one of 'small', 'medium' or 'large'\n   */\n  @Prop() size: 'small' | 'medium' | 'big' = 'medium';\n\n  render() {\n    return (\n      <Host\n        class={{\n          'tile-small': this.size === 'small',\n          'tile-medium': this.size === 'medium',\n          'tile-big': this.size === 'big',\n        }}\n      >\n        <div class=\"tile-header text-l-title\">\n          <slot name=\"header\"></slot>\n        </div>\n        <div class=\"tile-subheader\">\n          <slot name=\"subheader\"></slot>\n        </div>\n        <div class=\"tile-content\">\n          <slot></slot>\n        </div>\n        <div class=\"tile-footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/components/tile/tile.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,IAAI;;gBAM4B,QAAQ;yBAEjB,KAAK;yBACL,KAAK;;EAEvC,sBAAsB;IACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;EAC3E,CAAC;EAED,sBAAsB;IACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;EAC3E,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;OAChC;MAED,WACE,KAAK,EAAE;UACL,aAAa,EAAE,IAAI;UACnB,aAAa,EAAE,IAAI,CAAC,aAAa;SAClC;QAED,YACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ;MACN,WAAK,KAAK,EAAC,gBAAgB;QACzB,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;MACN,WAAK,KAAK,EAAC,cAAc;QACvB,eAAa,CACT;MACN,WACE,KAAK,EAAE;UACL,aAAa,EAAE,IAAI;UACnB,aAAa,EAAE,IAAI,CAAC,aAAa;SAClC;QAED,YACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ix-tile',\n  styleUrl: 'tile.scss',\n  shadow: true,\n})\nexport class Tile {\n  @Element() hostElement: HTMLIxTileElement;\n\n  /**\n   * Size of the tile - one of 'small', 'medium' or 'large'\n   */\n  @Prop() size: 'small' | 'medium' | 'big' = 'medium';\n\n  @State() hasHeaderSlot: boolean = false;\n  @State() hasFooterSlot: boolean = false;\n\n  handleHeaderSlotChange() {\n    this.hasHeaderSlot = !!this.hostElement.querySelector('[slot=\"header\"]');\n  }\n\n  handleFooterSlotChange() {\n    this.hasFooterSlot = !!this.hostElement.querySelector('[slot=\"footer\"]');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'tile-small': this.size === 'small',\n          'tile-medium': this.size === 'medium',\n          'tile-big': this.size === 'big',\n        }}\n      >\n        <div\n          class={{\n            'tile-header': true,\n            'has-content': this.hasHeaderSlot,\n          }}\n        >\n          <slot\n            name=\"header\"\n            onSlotchange={() => this.handleHeaderSlotChange()}\n          ></slot>\n        </div>\n        <div class=\"tile-subheader\">\n          <slot name=\"subheader\"></slot>\n        </div>\n        <div class=\"tile-content\">\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            'tile-footer': true,\n            'has-content': this.hasFooterSlot,\n          }}\n        >\n          <slot\n            name=\"footer\"\n            onSlotchange={() => this.handleFooterSlotChange()}\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}