@siemens/ix 1.6.3 → 2.0.0-beta.1

package/dist/collection/components/pagination/pagination.js

@@ -7,11 +7,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host, } from '@stencil/core';
+import { BaseButton } from '../button/base-button';
+import { a11yBoolean } from '../utils/a11y';
 /**
  * @since 1.5.0
  */
 export class Pagination {
   constructor() {
+    this.baseButtonConfig = {
+      variant: 'secondary',
+      outline: false,
+      ghost: true,
+      iconOnly: true,
+      iconOval: false,
+      disabled: false,
+      icon: '',
+      loading: false,
+      selected: false,
+      type: 'button',
+      extraClasses: {
+        ['w-auto']: true,
+      },
+    };
     this.maxCountPages = 7;
     this.advanced = undefined;
     this.itemCount = 15;
@@ -22,9 +39,6 @@ export class Pagination {
     this.i18nOf = 'of';
     this.i18nItems = 'Items';
   }
-  get pageInput() {
-    return this.hostElement.querySelector('.advanced-pagination input.form-control');
-  }
   selectPage(index) {
     if (index < 0) {
       this.selectedPage = 0;
@@ -50,9 +64,10 @@ export class Pagination {
     this.selectPage(this.selectedPage - 1);
   }
   getPageButton(index) {
-    return (h("ix-index-button", { variant: "Primary", onClick: () => {
-        this.selectPage(index);
-      }, selected: this.selectedPage === index }, index + 1));
+    const baseButtonProps = Object.assign(Object.assign({}, this.baseButtonConfig), { onClick: () => this.selectPage(index), selected: this.selectedPage === index, ariaAttributes: {
+        'aria-pressed': a11yBoolean(this.selectedPage === index),
+      } });
+    return h(BaseButton, Object.assign({}, baseButtonProps), index + 1);
   }
   renderPageButtons() {
     const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);
@@ -64,15 +79,16 @@ export class Pagination {
     let end = Math.min(this.count, this.maxCountPages);
     let pageCount = Math.floor((this.maxCountPages - 4) / 2);
     if (hasOverflowStart) {
-      pageButtons.push(this.getPageButton(0));
-      pageButtons.push(h("ix-index-button", { variant: "Secondary", onClick: () => {
+      const baseButtonProps = Object.assign(Object.assign({}, this.baseButtonConfig), { onClick: () => {
           if (hasOverflowEnd) {
             this.selectPage(this.selectedPage - Math.max(0, 2 * pageCount + 1));
           }
           else {
             this.selectPage(this.count - this.maxCountPages);
           }
-        } }, "..."));
+        } });
+      pageButtons.push(this.getPageButton(0));
+      pageButtons.push(h(BaseButton, Object.assign({}, baseButtonProps), "..."));
       if (hasOverflowEnd) {
         start = this.count - this.maxCountPages + 2;
       }
@@ -94,29 +110,30 @@ export class Pagination {
       pageButtons.push(this.getPageButton(i));
     }
     if (hasOverflowEnd) {
-      pageButtons.push(h("ix-index-button", { variant: "Secondary", onClick: () => {
+      const baseButtonProps = Object.assign(Object.assign({}, this.baseButtonConfig), { onClick: () => {
           if (hasOverflowStart) {
             this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));
           }
           else {
             this.selectPage(this.maxCountPages - 1);
           }
-        } }, "..."));
+        } });
+      pageButtons.push(h(BaseButton, Object.assign({}, baseButtonProps), "..."));
       pageButtons.push(this.getPageButton(this.count - 1));
     }
     return h("span", { class: "page-buttons" }, pageButtons);
   }
   render() {
-    return (h(Host, null, h("ix-icon-button", { disabled: this.selectedPage === 0, ghost: true, icon: "chevron-left-small", onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, this.i18nPage, h("input", { class: "form-control", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
+    return (h(Host, null, h("ix-icon-button", { disabled: this.selectedPage === 0, ghost: true, icon: "chevron-left-small", onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { variant: "default" }, this.i18nPage), h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
         const index = Number.parseInt(e.target['value']);
         this.selectPage(index - 1);
-      } }), h("span", { class: "total-count" }, this.i18nOf, " ", this.count))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { disabled: this.selectedPage === this.count - 1, ghost: true, icon: "chevron-right-small", onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, this.i18nItems, h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", "selected-indices": this.itemCount, onItemSelectionChange: (e) => {
+      } }), h("span", { class: "total-count" }, h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { disabled: this.selectedPage === this.count - 1, ghost: true, icon: "chevron-right-small", onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, h("ix-typography", { variant: "default" }, this.i18nItems), h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", "selected-indices": this.itemCount, onItemSelectionChange: (e) => {
         const count = Number.parseInt(e.detail[0]);
         this.itemCountChanged.emit(count);
       } }, h("ix-select-item", { label: "10", value: "10" }), h("ix-select-item", { label: "15", value: "15" }), h("ix-select-item", { label: "20", value: "20" }), h("ix-select-item", { label: "40", value: "40" }), h("ix-select-item", { label: "100", value: "100" })))) : ('')));
   }
   static get is() { return "ix-pagination"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["pagination.scss"]

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2022 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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n/**\n * @since 1.5.0\n */\n@Component({\n  tag: 'ix-pagination',\n  styleUrl: 'pagination.scss',\n  scoped: true,\n})\nexport class Pagination {\n  private readonly maxCountPages = 7;\n\n  @Element() hostElement!: HTMLIxPaginationElement;\n\n  /**\n   * Advanced mode\n   */\n  @Prop() advanced: boolean;\n\n  /**\n   * Number of items shown at once.\n   * Can only be changed in advaced mode.\n   */\n  @Prop() itemCount = 15;\n\n  /**\n   * Show item count in advanced mode\n   */\n  @Prop() showItemCount = true;\n\n  /**\n   * Total number of pages\n   */\n  @Prop() count: number;\n\n  /**\n   * Zero based index of currently selected page\n   */\n  @Prop({ mutable: true }) selectedPage = 0;\n\n  /**\n   * i18n\n   */\n  @Prop() i18nPage = 'Page';\n\n  /**\n   * i18n\n   */\n  @Prop() i18nOf = 'of';\n\n  /**\n  /**\n   * i18n\n   */\n  @Prop() i18nItems = 'Items';\n\n  /**\n   * Page selection event\n   */\n  @Event() pageSelected: EventEmitter<number>;\n\n  /**\n   * Item count change event\n   */\n  @Event() itemCountChanged: EventEmitter<number>;\n\n  get pageInput() {\n    return this.hostElement.querySelector(\n      '.advanced-pagination input.form-control'\n    );\n  }\n\n  private selectPage(index: number) {\n    if (index < 0) {\n      this.selectedPage = 0;\n    } else if (index > this.count - 1) {\n      this.selectedPage = this.count - 1;\n    } else {\n      this.selectedPage = index;\n    }\n\n    this.pageSelected.emit(this.selectedPage);\n  }\n\n  private increase() {\n    if (this.selectedPage === this.count - 1) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage + 1);\n  }\n\n  private decrease() {\n    if (this.selectedPage === 0) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage - 1);\n  }\n\n  private getPageButton(index: number) {\n    return (\n      <ix-index-button\n        variant=\"Primary\"\n        onClick={() => {\n          this.selectPage(index);\n        }}\n        selected={this.selectedPage === index}\n      >\n        {index + 1}\n      </ix-index-button>\n    );\n  }\n\n  private renderPageButtons() {\n    const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n    const hasOverflow = this.count > this.maxCountPages;\n    const hasOverflowStart =\n      hasOverflow && this.selectedPage > pagesBeforeOverflow;\n    const hasOverflowEnd =\n      hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n    const pageButtons = [];\n\n    let start = 0;\n    let end = Math.min(this.count, this.maxCountPages);\n    let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n    if (hasOverflowStart) {\n      pageButtons.push(this.getPageButton(0));\n      pageButtons.push(\n        <ix-index-button\n          variant=\"Secondary\"\n          onClick={() => {\n            if (hasOverflowEnd) {\n              this.selectPage(\n                this.selectedPage - Math.max(0, 2 * pageCount + 1)\n              );\n            } else {\n              this.selectPage(this.count - this.maxCountPages);\n            }\n          }}\n        >\n          ...\n        </ix-index-button>\n      );\n\n      if (hasOverflowEnd) {\n        start = this.count - this.maxCountPages + 2;\n      } else {\n        start = this.count - this.maxCountPages + 2;\n        end = this.count;\n      }\n    }\n\n    if (hasOverflowEnd) {\n      if (hasOverflowStart) {\n        start = this.selectedPage - pageCount;\n        end = this.selectedPage + pageCount + 1;\n      } else {\n        end = this.maxCountPages - 2;\n      }\n    }\n\n    for (let i = start; i < end; i++) {\n      pageButtons.push(this.getPageButton(i));\n    }\n\n    if (hasOverflowEnd) {\n      pageButtons.push(\n        <ix-index-button\n          variant=\"Secondary\"\n          onClick={() => {\n            if (hasOverflowStart) {\n              this.selectPage(\n                this.selectedPage + Math.max(0, 2 * pageCount + 1)\n              );\n            } else {\n              this.selectPage(this.maxCountPages - 1);\n            }\n          }}\n        >\n          ...\n        </ix-index-button>\n      );\n      pageButtons.push(this.getPageButton(this.count - 1));\n    }\n\n    return <span class=\"page-buttons\">{pageButtons}</span>;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          disabled={this.selectedPage === 0}\n          ghost\n          icon=\"chevron-left-small\"\n          onClick={() => this.decrease()}\n        ></ix-icon-button>\n\n        {this.advanced ? (\n          <div class=\"advanced-pagination\">\n            {this.i18nPage}\n            <input\n              class=\"form-control\"\n              type=\"number\"\n              min=\"1\"\n              max={this.count}\n              value={this.selectedPage + 1}\n              onChange={(e) => {\n                const index = Number.parseInt(e.target['value']);\n                this.selectPage(index - 1);\n              }}\n            />\n            <span class=\"total-count\">\n              {this.i18nOf} {this.count}\n            </span>\n          </div>\n        ) : (\n          <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n        )}\n\n        <ix-icon-button\n          disabled={this.selectedPage === this.count - 1}\n          ghost\n          icon=\"chevron-right-small\"\n          onClick={() => this.increase()}\n        ></ix-icon-button>\n\n        {this.advanced && this.showItemCount ? (\n          <span class=\"item-count\">\n            {this.i18nItems}\n            <ix-select\n              hideListHeader\n              i18nPlaceholder=\"\"\n              i18nSelectListHeader=\"\"\n              selected-indices={this.itemCount}\n              onItemSelectionChange={(e) => {\n                const count = Number.parseInt(e.detail[0]);\n                this.itemCountChanged.emit(count);\n              }}\n            >\n              <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n              <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n              <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n              <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n              <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n            </ix-select>\n          </span>\n        ) : (\n          ''\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2022 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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 1.5.0\n */\n@Component({\n  tag: 'ix-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true,\n})\nexport class Pagination {\n  private readonly baseButtonConfig: BaseButtonProps = {\n    variant: 'secondary',\n    outline: false,\n    ghost: true,\n    iconOnly: true,\n    iconOval: false,\n    disabled: false,\n    icon: '',\n    loading: false,\n    selected: false,\n    type: 'button',\n    extraClasses: {\n      ['w-auto']: true,\n    },\n  };\n\n  private readonly maxCountPages = 7;\n\n  @Element() hostElement!: HTMLIxPaginationElement;\n\n  /**\n   * Advanced mode\n   */\n  @Prop() advanced: boolean;\n\n  /**\n   * Number of items shown at once.\n   * Can only be changed in advaced mode.\n   */\n  @Prop() itemCount = 15;\n\n  /**\n   * Show item count in advanced mode\n   */\n  @Prop() showItemCount = true;\n\n  /**\n   * Total number of pages\n   */\n  @Prop() count: number;\n\n  /**\n   * Zero based index of currently selected page\n   */\n  @Prop({ mutable: true }) selectedPage = 0;\n\n  /**\n   * i18n\n   */\n  @Prop() i18nPage = 'Page';\n\n  /**\n   * i18n\n   */\n  @Prop() i18nOf = 'of';\n\n  /**\n  /**\n   * i18n\n   */\n  @Prop() i18nItems = 'Items';\n\n  /**\n   * Page selection event\n   */\n  @Event() pageSelected: EventEmitter<number>;\n\n  /**\n   * Item count change event\n   */\n  @Event() itemCountChanged: EventEmitter<number>;\n\n  private selectPage(index: number) {\n    if (index < 0) {\n      this.selectedPage = 0;\n    } else if (index > this.count - 1) {\n      this.selectedPage = this.count - 1;\n    } else {\n      this.selectedPage = index;\n    }\n\n    this.pageSelected.emit(this.selectedPage);\n  }\n\n  private increase() {\n    if (this.selectedPage === this.count - 1) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage + 1);\n  }\n\n  private decrease() {\n    if (this.selectedPage === 0) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage - 1);\n  }\n\n  private getPageButton(index: number) {\n    const baseButtonProps: BaseButtonProps = {\n      ...this.baseButtonConfig,\n      onClick: () => this.selectPage(index),\n      selected: this.selectedPage === index,\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.selectedPage === index),\n      },\n    };\n\n    return <BaseButton {...baseButtonProps}>{index + 1}</BaseButton>;\n  }\n\n  private renderPageButtons() {\n    const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n    const hasOverflow = this.count > this.maxCountPages;\n    const hasOverflowStart =\n      hasOverflow && this.selectedPage > pagesBeforeOverflow;\n    const hasOverflowEnd =\n      hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n    const pageButtons = [];\n\n    let start = 0;\n    let end = Math.min(this.count, this.maxCountPages);\n    let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n    if (hasOverflowStart) {\n      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowEnd) {\n            this.selectPage(this.selectedPage - Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.count - this.maxCountPages);\n          }\n        },\n      };\n      pageButtons.push(this.getPageButton(0));\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n\n      if (hasOverflowEnd) {\n        start = this.count - this.maxCountPages + 2;\n      } else {\n        start = this.count - this.maxCountPages + 2;\n        end = this.count;\n      }\n    }\n\n    if (hasOverflowEnd) {\n      if (hasOverflowStart) {\n        start = this.selectedPage - pageCount;\n        end = this.selectedPage + pageCount + 1;\n      } else {\n        end = this.maxCountPages - 2;\n      }\n    }\n\n    for (let i = start; i < end; i++) {\n      pageButtons.push(this.getPageButton(i));\n    }\n\n    if (hasOverflowEnd) {\n      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowStart) {\n            this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.maxCountPages - 1);\n          }\n        },\n      };\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n      pageButtons.push(this.getPageButton(this.count - 1));\n    }\n\n    return <span class=\"page-buttons\">{pageButtons}</span>;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          disabled={this.selectedPage === 0}\n          ghost\n          icon=\"chevron-left-small\"\n          onClick={() => this.decrease()}\n        ></ix-icon-button>\n\n        {this.advanced ? (\n          <div class=\"advanced-pagination\">\n            <ix-typography variant=\"default\">{this.i18nPage}</ix-typography>\n            <input\n              class=\"form-control page-selection\"\n              type=\"number\"\n              min=\"1\"\n              max={this.count}\n              value={this.selectedPage + 1}\n              onChange={(e) => {\n                const index = Number.parseInt(e.target['value']);\n                this.selectPage(index - 1);\n              }}\n            />\n            <span class=\"total-count\">\n              <ix-typography variant=\"default\">\n                {this.i18nOf} {this.count}\n              </ix-typography>\n            </span>\n          </div>\n        ) : (\n          <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n        )}\n\n        <ix-icon-button\n          disabled={this.selectedPage === this.count - 1}\n          ghost\n          icon=\"chevron-right-small\"\n          onClick={() => this.increase()}\n        ></ix-icon-button>\n\n        {this.advanced && this.showItemCount ? (\n          <span class=\"item-count\">\n            <ix-typography variant=\"default\">{this.i18nItems}</ix-typography>\n            <ix-select\n              hideListHeader\n              i18nPlaceholder=\"\"\n              i18nSelectListHeader=\"\"\n              selected-indices={this.itemCount}\n              onItemSelectionChange={(e) => {\n                const count = Number.parseInt(e.detail[0]);\n                this.itemCountChanged.emit(count);\n              }}\n            >\n              <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n              <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n              <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n              <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n              <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n            </ix-select>\n          </span>\n        ) : (\n          ''\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pill/pill.css

@@ -22,6 +22,22 @@
  * 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
+ *
+ * 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 */
@@ -35,245 +51,201 @@
  * LICENSE file in the root directory of this source tree.
  */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: inline-block;
+  position: relative;
+  height: 1.25rem;
+  max-height: 1.25rem;
+  margin-left: 0.25rem;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+
+.container {
   display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
+  width: inherit;
+  box-sizing: border-box;
   position: relative;
   align-items: center;
-  justify-content: center;
   border-radius: 100px;
-  padding: 0px 6px;
-  margin-left: 0.25rem;
-  min-width: 1.5rem;
-  height: 1.25rem;
-  min-height: 1.25rem;
-  max-height: 1.25rem;
-  cursor: auto;
+  padding: 0.5rem;
+  height: 2rem;
+  max-height: 2rem;
+  cursor: default;
 }
-:host .with-icon {
+.container .with-icon {
   margin-right: 0.25rem;
 }
-:host.align-left {
-  justify-content: flex-start;
+.container .hidden {
+  width: 0px;
+  margin-right: 0px;
+}
+.container .close-button-container {
+  display: inline-flex;
+  margin-left: auto;
+  padding-left: 0.5rem;
+}
+.container .slot-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.container.icon {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.container.closable {
+  padding-right: 0.25rem;
 }
-:host[variant=primary] {
+
+.container.primary {
   background-color: var(--theme-color-primary);
   color: var(--theme-chip-primary--color);
 }
-:host[variant=primary] .close-button {
+.container.primary .close-button {
   color: var(--theme-chip-primary--color);
+  --ix-icon-button-color: var(--theme-chip-primary--color);
   pointer-events: auto;
 }
-:host[variant=primary].outline {
+
+.container.primary.outline {
   color: var(--theme-chip-primary-outline--color);
   background-color: transparent;
   border: solid 1px var(--theme-chip-primary-outline--border-color);
 }
-:host[variant=primary].outline .close-button {
+.container.primary.outline .close-button {
   color: var(--theme-chip-primary-outline--color);
+  --ix-icon-button-color: var(--theme-chip-primary-outline--color);
 }
-:host[variant=alarm] {
+
+.container.alarm {
   color: var(--theme-color-alarm--contrast);
 }
-:host[variant=alarm]:not(.outline) {
+.container.alarm:not(.outline) {
   background-color: var(--theme-color-alarm);
 }
-:host[variant=alarm]:not(.outline) .close-button {
+.container.alarm:not(.outline) .close-button {
   color: var(--theme-color-alarm--contrast);
+  --ix-icon-button-color: var(--theme-color-alarm--contrast);
 }
-:host[variant=alarm]:not(.outline):hover::after {
-  content: "";
-  background-color: rgba(0, 0, 0, 0.05);
-}
-:host[variant=alarm]:not(.outline).active::after, :host[variant=alarm]:not(.outline):active::after {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-:host[variant=alarm].outline {
+.container.alarm.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-alarm);
 }
-:host[variant=alarm].outline:hover::after {
-  display: none;
-}
-:host[variant=alarm].outline:hover {
-  background-color: var(--theme-chip-outline--background--hover);
-}
-:host[variant=alarm].outline.active::after, :host[variant=alarm].outline:active::after {
-  display: none;
-}
-:host[variant=alarm].outline.active, :host[variant=alarm].outline:active {
-  background-color: var(--theme-chip-outline--background--active);
-}
-:host[variant=critical] {
+
+.container.critical {
   color: var(--theme-color-critical--contrast);
 }
-:host[variant=critical]:not(.outline) {
+.container.critical:not(.outline) {
   background-color: var(--theme-color-critical);
 }
-:host[variant=critical]:not(.outline) .close-button {
+.container.critical:not(.outline) .close-button {
   color: var(--theme-color-critical--contrast);
+  --ix-icon-button-color: var(--theme-color-critical--contrast);
 }
-:host[variant=critical]:not(.outline):hover::after {
-  content: "";
-  background-color: rgba(0, 0, 0, 0.05);
-}
-:host[variant=critical]:not(.outline).active::after, :host[variant=critical]:not(.outline):active::after {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-:host[variant=critical].outline {
+.container.critical.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-critical);
 }
-:host[variant=critical].outline:hover::after {
-  display: none;
-}
-:host[variant=critical].outline:hover {
-  background-color: var(--theme-chip-outline--background--hover);
-}
-:host[variant=critical].outline.active::after, :host[variant=critical].outline:active::after {
-  display: none;
-}
-:host[variant=critical].outline.active, :host[variant=critical].outline:active {
-  background-color: var(--theme-chip-outline--background--active);
-}
-:host[variant=warning] {
+
+.container.warning {
   color: var(--theme-color-warning--contrast);
 }
-:host[variant=warning]:not(.outline) {
+.container.warning:not(.outline) {
   background-color: var(--theme-color-warning);
 }
-:host[variant=warning]:not(.outline) .close-button {
+.container.warning:not(.outline) .close-button {
   color: var(--theme-color-warning--contrast);
+  --ix-icon-button-color: var(--theme-color-warning--contrast);
 }
-:host[variant=warning]:not(.outline):hover::after {
-  content: "";
-  background-color: rgba(0, 0, 0, 0.05);
-}
-:host[variant=warning]:not(.outline).active::after, :host[variant=warning]:not(.outline):active::after {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-:host[variant=warning].outline {
+.container.warning.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-warning);
 }
-:host[variant=warning].outline:hover::after {
-  display: none;
-}
-:host[variant=warning].outline:hover {
-  background-color: var(--theme-chip-outline--background--hover);
-}
-:host[variant=warning].outline.active::after, :host[variant=warning].outline:active::after {
-  display: none;
-}
-:host[variant=warning].outline.active, :host[variant=warning].outline:active {
-  background-color: var(--theme-chip-outline--background--active);
-}
-:host[variant=info] {
+
+.container.info {
   color: var(--theme-color-info--contrast);
 }
-:host[variant=info]:not(.outline) {
+.container.info:not(.outline) {
   background-color: var(--theme-color-info);
 }
-:host[variant=info]:not(.outline) .close-button {
+.container.info:not(.outline) .close-button {
   color: var(--theme-color-info--contrast);
+  --ix-icon-button-color: var(--theme-color-info--contrast);
 }
-:host[variant=info]:not(.outline):hover::after {
-  content: "";
-  background-color: rgba(0, 0, 0, 0.05);
-}
-:host[variant=info]:not(.outline).active::after, :host[variant=info]:not(.outline):active::after {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-:host[variant=info].outline {
+.container.info.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-info);
 }
-:host[variant=info].outline:hover::after {
-  display: none;
-}
-:host[variant=info].outline:hover {
-  background-color: var(--theme-chip-outline--background--hover);
-}
-:host[variant=info].outline.active::after, :host[variant=info].outline:active::after {
-  display: none;
-}
-:host[variant=info].outline.active, :host[variant=info].outline:active {
-  background-color: var(--theme-chip-outline--background--active);
-}
-:host[variant=neutral] {
+
+.container.neutral {
   color: var(--theme-color-neutral--contrast);
 }
-:host[variant=neutral]:not(.outline) {
+.container.neutral:not(.outline) {
   background-color: var(--theme-color-neutral);
 }
-:host[variant=neutral]:not(.outline) .close-button {
+.container.neutral:not(.outline) .close-button {
   color: var(--theme-color-neutral--contrast);
+  --ix-icon-button-color: var(--theme-color-neutral--contrast);
 }
-:host[variant=neutral]:not(.outline):hover::after {
-  content: "";
-  background-color: rgba(0, 0, 0, 0.05);
-}
-:host[variant=neutral]:not(.outline).active::after, :host[variant=neutral]:not(.outline):active::after {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-:host[variant=neutral].outline {
+.container.neutral.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-neutral);
 }
-:host[variant=neutral].outline:hover::after {
-  display: none;
-}
-:host[variant=neutral].outline:hover {
-  background-color: var(--theme-chip-outline--background--hover);
-}
-:host[variant=neutral].outline.active::after, :host[variant=neutral].outline:active::after {
-  display: none;
-}
-:host[variant=neutral].outline.active, :host[variant=neutral].outline:active {
-  background-color: var(--theme-chip-outline--background--active);
-}
-:host[variant=success] {
+
+.container.success {
   color: var(--theme-color-success--contrast);
 }
-:host[variant=success]:not(.outline) {
+.container.success:not(.outline) {
   background-color: var(--theme-color-success);
 }
-:host[variant=success]:not(.outline) .close-button {
+.container.success:not(.outline) .close-button {
   color: var(--theme-color-success--contrast);
+  --ix-icon-button-color: var(--theme-color-success--contrast);
 }
-:host[variant=success]:not(.outline):hover::after {
-  content: "";
-  background-color: rgba(0, 0, 0, 0.05);
-}
-:host[variant=success]:not(.outline).active::after, :host[variant=success]:not(.outline):active::after {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-:host[variant=success].outline {
+.container.success.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-success);
 }
-:host[variant=success].outline:hover::after {
-  display: none;
-}
-:host[variant=success].outline:hover {
-  background-color: var(--theme-chip-outline--background--hover);
-}
-:host[variant=success].outline.active::after, :host[variant=success].outline:active::after {
-  display: none;
-}
-:host[variant=success].outline.active, :host[variant=success].outline:active {
-  background-color: var(--theme-chip-outline--background--active);
-}
-:host[variant=custom].outline {
-  border: solid 1px transparent;
-  background-color: transparent;
-}
-:host .slot {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+:host .container {
+  height: 100%;
+  justify-content: center;
+  padding-right: 0.5rem;
 }
-:host .hidden {
-  width: 0px;
-  margin-right: 0px;
+
+:host(.align-left) .container {
+  justify-content: flex-start;
 }

package/dist/collection/components/pill/pill.js

@@ -17,21 +17,39 @@ export class Pill {
     this.alignLeft = false;
   }
   render() {
-    return (h(Host, { class: {
-        outline: this.outline,
-        'align-left': this.alignLeft,
-      }, style: this.variant === 'custom'
+    let customStyle = {};
+    if (this.variant === 'custom') {
+      customStyle = {
+        color: this.color,
+        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
+      };
+    }
+    return (h(Host, { style: this.variant === 'custom'
         ? {
-          color: this.color,
-          backgroundColor: this.background,
+          '--ix-icon-button-color': this.color,
         }
-        : {}, title: this.el.textContent }, h("ix-icon", { class: {
+        : {}, title: this.el.textContent, class: {
+        'align-left': this.alignLeft,
+      } }, h("div", { style: Object.assign({}, customStyle), class: {
+        container: true,
+        outline: this.outline,
+        inactive: false,
+        alarm: this.variant === 'alarm',
+        critical: this.variant === 'critical',
+        info: this.variant === 'info',
+        neutral: this.variant === 'neutral',
+        primary: this.variant === 'primary',
+        success: this.variant === 'success',
+        warning: this.variant === 'warning',
+        closable: false,
+        icon: !!this.icon,
+      } }, h("ix-icon", { class: {
         'with-icon': true,
         hidden: this.icon === undefined || this.icon === '',
-      }, name: this.icon, size: '16' }), h("div", { class: "slot" }, h("slot", null))));
+      }, name: this.icon, size: '16' }), h("span", { class: "slot-container" }, h("slot", null)))));
   }
   static get is() { return "ix-pill"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["pill.scss"]

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

@@ -1 +1 @@
-{"version":3,"file":"pill.js","sourceRoot":"","sources":["../../../src/components/pill/pill.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,IAAI;;mBAcA,SAAS;mBAKN,KAAK;;;;qBAoBH,KAAK;;EAEzB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,YAAY,EAAE,IAAI,CAAC,SAAS;OAC7B,EACD,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;QACvB,CAAC,CAAC;UACE,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,eAAe,EAAE,IAAI,CAAC,UAAU;SACjC;QACH,CAAC,CAAC,EAAE,EAER,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW;MAE1B,eACE,KAAK,EAAE;UACL,WAAW,EAAE,IAAI;UACjB,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;SACpD,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV;MACF,WAAK,KAAK,EAAC,MAAM;QACf,eAAa,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, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-pill',\n  styleUrl: 'pill.scss',\n  scoped: true,\n})\nexport class Pill {\n  @Element() el: HTMLIxPillElement;\n\n  /**\n   * Pill variant\n   */\n  @Prop({ reflect: true }) variant:\n    | 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom' = 'primary';\n\n  /**\n   * Show pill as outline\n   */\n  @Prop() outline = false;\n\n  /**\n   * Show icon\n   */\n  @Prop() icon: string | undefined;\n\n  /**\n   * Custom color for pill. Only working for `variant='custom'`\n   */\n  @Prop() background: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   */\n  @Prop() color: string | undefined;\n\n  /**\n   * Align pill content left\n   */\n  @Prop() alignLeft = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          outline: this.outline,\n          'align-left': this.alignLeft,\n        }}\n        style={\n          this.variant === 'custom'\n            ? {\n                color: this.color,\n                backgroundColor: this.background,\n              }\n            : {}\n        }\n        title={this.el.textContent}\n      >\n        <ix-icon\n          class={{\n            'with-icon': true,\n            hidden: this.icon === undefined || this.icon === '',\n          }}\n          name={this.icon}\n          size={'16'}\n        />\n        <div class=\"slot\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pill.js","sourceRoot":"","sources":["../../../src/components/pill/pill.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,IAAI;;mBAcA,SAAS;mBAKN,KAAK;;;;qBAoBH,KAAK;;EAEzB,MAAM;IACJ,IAAI,WAAW,GAAG,EAAE,CAAC;IAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;MAC7B,WAAW,GAAG;QACZ,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,UAAU;OACpE,CAAC;KACH;IACD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;QACvB,CAAC,CAAC;UACE,wBAAwB,EAAE,IAAI,CAAC,KAAK;SACrC;QACH,CAAC,CAAC,EAAE,EAER,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,EAC1B,KAAK,EAAE;QACL,YAAY,EAAE,IAAI,CAAC,SAAS;OAC7B;MAED,WACE,KAAK,oBAAO,WAAW,GACvB,KAAK,EAAE;UACL,SAAS,EAAE,IAAI;UACf,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,QAAQ,EAAE,KAAK;UACf,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;UAC/B,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;UACrC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;UAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;UACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;UACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;UACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;UACnC,QAAQ,EAAE,KAAK;UACf,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SAClB;QAED,eACE,KAAK,EAAE;YACL,WAAW,EAAE,IAAI;YACjB,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;WACpD,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV;QACF,YAAM,KAAK,EAAC,gBAAgB;UAC1B,eAAa,CACR,CACH,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 } from '@stencil/core';\n\n@Component({\n  tag: 'ix-pill',\n  styleUrl: 'pill.scss',\n  shadow: true,\n})\nexport class Pill {\n  @Element() el: HTMLIxPillElement;\n\n  /**\n   * Pill variant\n   */\n  @Prop({ reflect: true }) variant:\n    | 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom' = 'primary';\n\n  /**\n   * Show pill as outline\n   */\n  @Prop() outline = false;\n\n  /**\n   * Show icon\n   */\n  @Prop() icon: string | undefined;\n\n  /**\n   * Custom color for pill. Only working for `variant='custom'`\n   */\n  @Prop() background: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   */\n  @Prop() color: string | undefined;\n\n  /**\n   * Align pill content left\n   */\n  @Prop() alignLeft = false;\n\n  render() {\n    let customStyle = {};\n\n    if (this.variant === 'custom') {\n      customStyle = {\n        color: this.color,\n        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n      };\n    }\n    return (\n      <Host\n        style={\n          this.variant === 'custom'\n            ? {\n                '--ix-icon-button-color': this.color,\n              }\n            : {}\n        }\n        title={this.el.textContent}\n        class={{\n          'align-left': this.alignLeft,\n        }}\n      >\n        <div\n          style={{ ...customStyle }}\n          class={{\n            container: true,\n            outline: this.outline,\n            inactive: false,\n            alarm: this.variant === 'alarm',\n            critical: this.variant === 'critical',\n            info: this.variant === 'info',\n            neutral: this.variant === 'neutral',\n            primary: this.variant === 'primary',\n            success: this.variant === 'success',\n            warning: this.variant === 'warning',\n            closable: false,\n            icon: !!this.icon,\n          }}\n        >\n          <ix-icon\n            class={{\n              'with-icon': true,\n              hidden: this.icon === undefined || this.icon === '',\n            }}\n            name={this.icon}\n            size={'16'}\n          />\n          <span class=\"slot-container\">\n            <slot></slot>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/push-card/push-card.js

@@ -20,7 +20,10 @@ export class PushCard {
   }
   render() {
     var _a;
-    return (h(Host, null, h("ix-card", { variant: this.variant }, h("ix-card-title", null, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("span", { class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { name: "title-action" })), h("ix-card-content", null, h("ix-typography", { variant: "default-title-single" }, this.heading), h("ix-typography", null, this.subheading)), h("ix-card-accordion", null, h("slot", null)))));
+    const color = this.variant === 'insight' || this.variant === 'notification'
+      ? 'std'
+      : undefined;
+    return (h(Host, null, h("ix-card", { variant: this.variant }, h("ix-card-title", null, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("span", { class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { name: "title-action" })), h("ix-card-content", null, h("ix-typography", { color: color, format: "h4" }, this.heading), h("ix-typography", { color: color }, this.subheading)), h("ix-card-accordion", null, h("slot", null)))));
   }
   static get is() { return "ix-push-card"; }
   static get encapsulation() { return "shadow"; }