@siemens/ix 2.0.0-beta.0 → 2.0.0

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: "", value: `${this.itemCount}`, onValueChange: (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              value={`${this.itemCount}`}\n              onValueChange={(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/pagination/test/pagination.ct.js

@@ -0,0 +1,40 @@
+/*
+ * 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.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+test('renders', async ({ mount, page }) => {
+  await mount(`
+    <ix-pagination>
+    </ix-pagination>
+  `);
+  const element = page.locator('ix-pagination');
+  await expect(element).toHaveClass(/hydrated/);
+});
+test('advanced', async ({ mount, page }) => {
+  await mount(`
+    <ix-pagination advanced>
+    </ix-pagination>
+  `);
+  const element = page.locator('ix-pagination[advanced]');
+  await expect(element).toHaveClass(/hydrated/);
+});
+test('open show number of page dropdown', async ({ mount, page }) => {
+  await mount(`
+    <ix-pagination advanced>
+    </ix-pagination>
+  `);
+  const element = page.locator('ix-pagination[advanced]');
+  await element
+    .getByRole('button')
+    .filter({ hasText: 'chevron-down-small' })
+    .click();
+  const dropdown = element.locator('ix-dropdown');
+  await expect(dropdown).toBeVisible();
+});
+//# sourceMappingURL=pagination.ct.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.ct.js","sourceRoot":"","sources":["../../../../src/components/pagination/test/pagination.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxC,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;EACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;EAE9C,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAChD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACzC,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;EACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;EAExD,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAChD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,mCAAmC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EAClE,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;EACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;EAExD,MAAM,OAAO;KACV,SAAS,CAAC,QAAQ,CAAC;KACnB,MAAM,CAAC,EAAE,OAAO,EAAE,oBAAoB,EAAE,CAAC;KACzC,KAAK,EAAE,CAAC;EAEX,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;EAEhD,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,WAAW,EAAE,CAAC;AACvC,CAAC,CAAC,CAAC","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 */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n    <ix-pagination>\n    </ix-pagination>\n  `);\n  const element = page.locator('ix-pagination');\n\n  await expect(element).toHaveClass(/hydrated/);\n});\n\ntest('advanced', async ({ mount, page }) => {\n  await mount(`\n    <ix-pagination advanced>\n    </ix-pagination>\n  `);\n  const element = page.locator('ix-pagination[advanced]');\n\n  await expect(element).toHaveClass(/hydrated/);\n});\n\ntest('open show number of page dropdown', async ({ mount, page }) => {\n  await mount(`\n    <ix-pagination advanced>\n    </ix-pagination>\n  `);\n  const element = page.locator('ix-pagination[advanced]');\n\n  await element\n    .getByRole('button')\n    .filter({ hasText: 'chevron-down-small' })\n    .click();\n\n  const dropdown = element.locator('ix-dropdown');\n\n  await expect(dropdown).toBeVisible();\n});\n"]}

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

@@ -30,6 +30,14 @@
  * 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 */
@@ -43,6 +51,10 @@
  * 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;
@@ -54,6 +66,30 @@
 :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;
@@ -71,6 +107,7 @@
   margin-right: 0.25rem;
 }
 .container .hidden {
+  display: none;
   width: 0px;
   margin-right: 0px;
 }

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

@@ -16,11 +16,8 @@
 :host .notification {
   font-size: 40px;
 }
-:host ix-card-title {
-  height: 3rem;
-}
 :host ix-card-content {
-  height: 7.875rem;
+  height: 11rem;
 }
 
 :host(:hover) ix-card.card-insight:hover {
@@ -47,6 +44,9 @@
 :host(:hover) ix-card.card-neutral:hover {
   --ix-card-background: var(--theme-color-neutral--hover);
 }
+:host(:hover) ix-card.card-primary:hover {
+  --ix-card-background: var(--theme-color-primary--hover);
+}
 
 :host(:active) ix-card.card-insight:active {
   --ix-card-background: var(--theme-color-ghost--active);
@@ -71,4 +71,7 @@
 }
 :host(:active) ix-card.card-neutral:active {
   --ix-card-background: var(--theme-color-neutral--active);
+}
+:host(:active) ix-card.card-primary:active {
+  --ix-card-background: var(--theme-color-primary--active);
 }

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-content", null, 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-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"; }
@@ -110,7 +113,7 @@ export class PushCard {
         "mutable": false,
         "complexType": {
           "original": "PushCardVariant",
-          "resolved": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"success\" | \"warning\"",
+          "resolved": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"",
           "references": {
             "PushCardVariant": {
               "location": "local",

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

@@ -1 +1 @@
-{"version":3,"file":"push-card.js","sourceRoot":"","sources":["../../../src/components/push-card/push-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD;;GAEG;AAMH,MAAM,OAAO,QAAQ;;gBAIgB,SAAS;;;;mBAoBT,SAAS;;EAE5C,MAAM;;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO;QAC5B;UACG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,CAC9D,CAAC,CAAC,CAAC,IAAI;UACR,YAAM,KAAK,EAAE,cAAc,IAAG,MAAA,IAAI,CAAC,YAAY,mCAAI,CAAC,CAAQ;UAC5D,YAAM,IAAI,EAAC,cAAc,GAAQ,CACnB;QAChB;UACE,qBAAe,OAAO,EAAC,sBAAsB,IAC1C,IAAI,CAAC,OAAO,CACC;UAChB,yBAAgB,IAAI,CAAC,UAAU,CAAiB,CAChC;QAClB;UACE,eAAa,CACK,CACZ,CACL,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';\nimport { CardVariant } from '../card/card';\n\nexport type PushCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-push-card',\n  styleUrl: 'push-card.scss',\n  shadow: true,\n})\nexport class PushCard {\n  /**\n   * Card icon\n   */\n  @Prop() icon: string | undefined = undefined;\n\n  /**\n   * Card KPI value\n   */\n  @Prop() notification: string;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading: string;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: PushCardVariant = 'insight';\n\n  render() {\n    return (\n      <Host>\n        <ix-card variant={this.variant}>\n          <ix-card-title>\n            {this.icon ? (\n              <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n            ) : null}\n            <span class={'notification'}>{this.notification ?? 0}</span>\n            <slot name=\"title-action\"></slot>\n          </ix-card-title>\n          <ix-card-content>\n            <ix-typography variant=\"default-title-single\">\n              {this.heading}\n            </ix-typography>\n            <ix-typography>{this.subheading}</ix-typography>\n          </ix-card-content>\n          <ix-card-accordion>\n            <slot></slot>\n          </ix-card-accordion>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"push-card.js","sourceRoot":"","sources":["../../../src/components/push-card/push-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD;;GAEG;AAMH,MAAM,OAAO,QAAQ;;gBAIgB,SAAS;;;;mBAoBT,SAAS;;EAE5C,MAAM;;IACJ,MAAM,KAAK,GACT,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,cAAc;MAC3D,CAAC,CAAC,KAAK;MACP,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,EAAC,IAAI;MACH,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO;QAC5B;UACE;YACG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,CAC9D,CAAC,CAAC,CAAC,IAAI;YACR,YAAM,KAAK,EAAE,cAAc,IAAG,MAAA,IAAI,CAAC,YAAY,mCAAI,CAAC,CAAQ;YAC5D,YAAM,IAAI,EAAC,cAAc,GAAQ,CACnB;UAChB,qBAAe,KAAK,EAAE,KAAK,EAAE,MAAM,EAAC,IAAI,IACrC,IAAI,CAAC,OAAO,CACC;UAChB,qBAAe,KAAK,EAAE,KAAK,IAAG,IAAI,CAAC,UAAU,CAAiB,CAC9C;QAClB;UACE,eAAa,CACK,CACZ,CACL,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';\nimport { CardVariant } from '../card/card';\nimport { TypographyColors } from '../typography/typography';\n\nexport type PushCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-push-card',\n  styleUrl: 'push-card.scss',\n  shadow: true,\n})\nexport class PushCard {\n  /**\n   * Card icon\n   */\n  @Prop() icon: string | undefined = undefined;\n\n  /**\n   * Card KPI value\n   */\n  @Prop() notification: string;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading: string;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: PushCardVariant = 'insight';\n\n  render() {\n    const color: TypographyColors =\n      this.variant === 'insight' || this.variant === 'notification'\n        ? 'std'\n        : undefined;\n\n    return (\n      <Host>\n        <ix-card variant={this.variant}>\n          <ix-card-content>\n            <ix-card-title>\n              {this.icon ? (\n                <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n              ) : null}\n              <span class={'notification'}>{this.notification ?? 0}</span>\n              <slot name=\"title-action\"></slot>\n            </ix-card-title>\n            <ix-typography color={color} format=\"h4\">\n              {this.heading}\n            </ix-typography>\n            <ix-typography color={color}>{this.subheading}</ix-typography>\n          </ix-card-content>\n          <ix-card-accordion>\n            <slot></slot>\n          </ix-card-accordion>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/row/row.css

@@ -0,0 +1,17 @@
+/*
+ * 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 {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+:host(:not(:first-of-type)) {
+  -webkit-margin-before: var(--ix-layout-grid-row-margin, 0);
+          margin-block-start: var(--ix-layout-grid-row-margin, 0);
+}

package/dist/collection/components/row/row.js

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+import { h, Host } from '@stencil/core';
+/**
+ * @since 2.0.0
+ */
+export class Row {
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "ix-row"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["row.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["row.css"]
+    };
+  }
+}
+//# sourceMappingURL=row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../src/components/row/row.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,GAAG;EACd,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAa,CACR,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 } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-row',\n  styleUrl: 'row.scss',\n  shadow: true,\n})\nexport class Row {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/select/select.css

@@ -42,12 +42,62 @@
  * 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.
+ */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: inline-block;
   position: relative;
+  min-height: 2rem;
   height: auto;
   border-radius: var(--theme-input--border-radius);
 }
+: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;
+}
 :host .d-none {
   display: none;
 }
@@ -55,7 +105,6 @@
   position: relative;
   display: flex;
   align-items: center;
-  height: auto;
   background-color: var(--theme-input--background);
   border: var(--theme-input--border-thickness) solid var(--theme-input--border-color);
   border-radius: var(--theme-input--border-radius);
@@ -65,18 +114,34 @@
 :host .select:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .select:not(.disabled):not(:disabled):hover {
+:host .select:not(.disabled):not(:disabled):hover, :host .select:not(.disabled):not(:disabled):hover {
   background-color: var(--theme-input--background--hover);
   border-color: var(--theme-input--border-color--hover);
 }
 :host .select:focus-within {
   background-color: var(--theme-input--background--focus);
   border-color: var(--theme-input--border-color--focus);
-  outline: 1px solid #119fff !important;
+  outline: 1px solid #119fff;
   outline-offset: var(--theme-input--focus--outline-offset);
 }
 :host .select.readonly {
   box-shadow: none !important;
+  border: none;
+  border-radius: 0px;
+  border-bottom: var(--theme-input--border-thickness) solid var(--theme-color-weak-bdr);
+}
+:host .select.readonly, :host .select.readonly:hover, :host .select.readonly:active {
+  background-color: transparent !important;
+}
+:host .select.readonly:focus, :host .select.readonly:focus-within, :host .select.readonly:focus-visible {
+  outline: none;
+}
+:host .select.readonly input {
+  color: var(--theme-color-weak-text);
+}
+:host .select.readonly input:focus,
+:host .select.readonly input:focus-visible {
+  outline: none;
 }
 :host .hidden {
   display: none !important;
@@ -92,6 +157,7 @@
   position: relative;
   align-items: flex-start;
   width: 100%;
+  height: 100%;
 }
 :host .input-container .chips {
   position: relative;
@@ -137,39 +203,8 @@
 :host .input-container input.hide-placeholder::placeholder {
   opacity: 0;
 }
-:host .chevron-down-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  min-width: 2rem;
-  height: 2rem;
-}
-:host .chevron-down-container:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .chevron-down-container:not(.disabled):not(:disabled):hover {
-  color: var(--theme-color-dynamic--hover);
-}
-:host .chevron-down-container:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .chevron-down-container:not(.disabled):not(:disabled):active {
-  color: var(--theme-color-dynamic--hover);
-}
-:host .editable .chevron-down-container:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .editable .chevron-down-container:not(.disabled):not(:disabled):hover {
-  color: var(--theme-color-std-text);
-  background-color: var(--theme-btn-invisible-secondary--background--hover);
-}
-:host .editable .chevron-down-container:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .editable .chevron-down-container:not(.disabled):not(:disabled):active {
-  color: var(--theme-color-std-text);
-  background-color: var(--theme-btn-invisible-secondary--background--active);
+:host .dropdown-visible {
+  --ix-icon-button-color: var(--theme-color-dynamic--hover);
 }
 :host .add-item {
   display: flex;