@siemens/ix 1.6.3 → 2.0.0-beta.1

package/dist/collection/components/expanding-search/expanding-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"expanding-search.js","sourceRoot":"","sources":["../../../src/components/expanding-search/expanding-search.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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-expanding-search',\n  styleUrl: 'expanding-search.scss',\n  scoped: true,\n})\nexport class ExpandingSearch {\n  /**\n   * Search icon\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder = 'Enter text here';\n\n  /**\n   * Default value\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /**\n   * If true the search field will fill all available horizontal space of it's parent container when expanded.\n   * @since 1.6.0\n   */\n  @Prop() fullWidth = false;\n\n  @State() isFieldChanged = false;\n\n  @State() expanded = false;\n\n  @State() hasFocus = false;\n\n  /**\n   * Value changed\n   */\n  @Event() valueChange: EventEmitter<string>;\n\n  private expandInput() {\n    setTimeout(this.focusTextInput, 300);\n    this.expanded = true;\n  }\n\n  private collapseInput() {\n    if (!this.isFieldChanged && this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private clearInput() {\n    this.value = '';\n    this.isFieldChanged = false;\n  }\n\n  private onChange(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement).value;\n    if (this.isFieldChanged && this.value === '') {\n      this.isFieldChanged = false;\n    } else {\n      this.isFieldChanged = true;\n    }\n\n    this.valueChange.emit(this.value);\n  }\n\n  private textInput?: HTMLInputElement;\n\n  constructor() {\n    this.focusTextInput = this.focusTextInput.bind(this);\n  }\n\n  private focusTextInput() {\n    this.textInput?.focus();\n  }\n\n  private clearClicked() {\n    this.clearInput();\n    this.textInput?.focus();\n    this.valueChange.emit(this.value);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          'right-position': this.expanded,\n          fullWidth: this.fullWidth,\n        }}\n      >\n        <button\n          class={{\n            btn: true,\n            'btn-invisible-primary': true,\n            'btn-icon': true,\n            'btn-search': true,\n            'disable-pointer': this.expanded,\n          }}\n          data-testid=\"button\"\n          onClick={() => this.expandInput()}\n          tabindex={this.expanded ? -1 : 0}\n        >\n          <ix-icon\n            class=\"btn-search-icon\"\n            name={this.icon}\n            size={this.expanded ? '16' : '24'}\n            color={\n              this.hasFocus ? 'input-search-icon--color--focus' : undefined\n            }\n          ></ix-icon>\n        </button>\n\n        <div\n          class={{\n            expanded: this.expanded,\n            fullWidth: this.fullWidth,\n            collapsed: !this.expanded,\n            'disable-pointer': !this.expanded,\n            'input-container': true,\n          }}\n          data-testid=\"input-wrapper\"\n        >\n          <input\n            class={{\n              'form-control': true,\n              input: this.expanded,\n              'disable-pointer': !this.expanded,\n              'opacity-before': !this.expanded,\n              'opacity-after': this.expanded,\n            }}\n            ref={(el) => (this.textInput = el)}\n            data-testid=\"input\"\n            placeholder={this.placeholder}\n            type=\"text\"\n            value={this.value}\n            onBlur={() => {\n              this.collapseInput();\n              this.hasFocus = false;\n            }}\n            onFocus={() => (this.hasFocus = true)}\n            onInput={(e: InputEvent) => this.onChange(e)}\n            tabindex={this.expanded ? 0 : -1}\n          />\n\n          {this.isFieldChanged ? (\n            <ix-icon-button\n              class=\"btn-clear\"\n              icon=\"clear\"\n              ghost={true}\n              size=\"16\"\n              data-testid=\"clear-button\"\n              onClick={() => this.clearClicked()}\n            />\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"expanding-search.js","sourceRoot":"","sources":["../../../src/components/expanding-search/expanding-search.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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-expanding-search',\n  styleUrl: 'expanding-search.scss',\n  shadow: true,\n})\nexport class ExpandingSearch {\n  /**\n   * Search icon\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder = 'Enter text here';\n\n  /**\n   * Default value\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /**\n   * If true the search field will fill all available horizontal space of it's parent container when expanded.\n   * @since 1.6.0\n   */\n  @Prop() fullWidth = false;\n\n  @State() isFieldChanged = false;\n  @State() expanded = false;\n  @State() hasFocus = false;\n\n  /**\n   * Value changed\n   */\n  @Event() valueChange: EventEmitter<string>;\n\n  private expandInput() {\n    setTimeout(this.focusTextInput, 300);\n    this.expanded = true;\n  }\n\n  private collapseInput() {\n    if (!this.isFieldChanged && this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private clearInput() {\n    this.value = '';\n    this.isFieldChanged = false;\n  }\n\n  private onChange(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement).value;\n    if (this.isFieldChanged && this.value === '') {\n      this.isFieldChanged = false;\n    } else {\n      this.isFieldChanged = true;\n    }\n\n    this.valueChange.emit(this.value);\n  }\n\n  private textInput?: HTMLInputElement;\n\n  constructor() {\n    this.focusTextInput = this.focusTextInput.bind(this);\n  }\n\n  private focusTextInput() {\n    this.textInput?.focus();\n  }\n\n  private clearClicked() {\n    this.clearInput();\n    this.textInput?.focus();\n    this.valueChange.emit(this.value);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          'right-position': this.expanded,\n          fullWidth: this.fullWidth,\n        }}\n      >\n        <ix-icon-button\n          size={this.expanded ? '16' : '24'}\n          icon={this.icon}\n          ghost\n          variant=\"primary\"\n          data-testid=\"button\"\n          onClick={() => this.expandInput()}\n          tabindex={this.expanded ? -1 : 0}\n          color={this.hasFocus ? 'input-search-icon--color--focus' : undefined}\n          class={{\n            'btn-search': true,\n            'btn-search--expanded': this.expanded,\n          }}\n        ></ix-icon-button>\n\n        <div\n          class={{\n            expanded: this.expanded,\n            fullWidth: this.fullWidth,\n            collapsed: !this.expanded,\n            'disable-pointer': !this.expanded,\n            'input-container': true,\n          }}\n          data-testid=\"input-wrapper\"\n        >\n          <input\n            class={{\n              'form-control': true,\n              input: this.expanded,\n              'disable-pointer': !this.expanded,\n              'opacity-before': !this.expanded,\n              'opacity-after': this.expanded,\n            }}\n            ref={(el) => (this.textInput = el)}\n            data-testid=\"input\"\n            placeholder={this.placeholder}\n            type=\"text\"\n            value={this.value}\n            onBlur={() => {\n              this.collapseInput();\n              this.hasFocus = false;\n            }}\n            onFocus={() => (this.hasFocus = true)}\n            onInput={(e: InputEvent) => this.onChange(e)}\n            tabindex={this.expanded ? 0 : -1}\n          />\n\n          {this.isFieldChanged ? (\n            <ix-icon-button\n              class=\"btn-clear\"\n              icon=\"clear\"\n              ghost={true}\n              size=\"16\"\n              data-testid=\"clear-button\"\n              onClick={() => this.clearClicked()}\n            />\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/expanding-search/test/expanding-search.ct.js

@@ -0,0 +1,56 @@
+/*
+ * 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-expanding-search></ix-expanding-search>`);
+  const button = page.locator('ix-expanding-search');
+  await expect(button).toHaveClass(/hydrated/);
+});
+test('expands input', async ({ mount, page }) => {
+  await mount(`<ix-expanding-search></ix-expanding-search>`);
+  const element = page.locator('ix-expanding-search');
+  const button = page.locator('button');
+  await button.click();
+  await expect(element).toHaveClass(/expanded/);
+});
+test('collapse input', async ({ mount, page }) => {
+  await mount(`<ix-expanding-search></ix-expanding-search>`);
+  const element = page.locator('ix-expanding-search');
+  const button = page.locator('button');
+  const input = page.locator('input');
+  await button.click();
+  await input.click();
+  await input.blur();
+  await expect(element).not.toHaveClass(/expanded/);
+});
+test('changes input', async ({ mount, page }) => {
+  await mount(`<ix-expanding-search></ix-expanding-search>`);
+  const element = page.locator('ix-expanding-search');
+  const button = page.locator('button');
+  const input = page.locator('input');
+  await button.click();
+  await input.fill('new input');
+  await input.blur();
+  await expect(element).toHaveClass(/expanded/);
+});
+test('erases the input when clear button is clicked', async ({ mount, page, }) => {
+  await mount(`<ix-expanding-search></ix-expanding-search>`);
+  const element = page.locator('ix-expanding-search');
+  const button = page.locator('button');
+  const clearButton = page.locator('[data-testid="clear-button"]');
+  const input = page.locator('input');
+  await button.click();
+  await input.fill('new input');
+  await clearButton.click();
+  await input.blur();
+  await expect(input).toHaveValue('');
+  await expect(element).not.toHaveClass(/expanded/);
+});
+//# sourceMappingURL=expanding-search.ct.js.map

package/dist/collection/components/expanding-search/test/expanding-search.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expanding-search.ct.js","sourceRoot":"","sources":["../../../../src/components/expanding-search/test/expanding-search.ct.ts"],"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 */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-expanding-search></ix-expanding-search>`);\n  const button = page.locator('ix-expanding-search');\n  await expect(button).toHaveClass(/hydrated/);\n});\n\ntest('expands input', async ({ mount, page }) => {\n  await mount(`<ix-expanding-search></ix-expanding-search>`);\n  const element = page.locator('ix-expanding-search');\n  const button = page.locator('button');\n\n  await button.click();\n  await expect(element).toHaveClass(/expanded/);\n});\n\ntest('collapse input', async ({ mount, page }) => {\n  await mount(`<ix-expanding-search></ix-expanding-search>`);\n  const element = page.locator('ix-expanding-search');\n  const button = page.locator('button');\n  const input = page.locator('input');\n\n  await button.click();\n  await input.click();\n  await input.blur();\n  await expect(element).not.toHaveClass(/expanded/);\n});\n\ntest('changes input', async ({ mount, page }) => {\n  await mount(`<ix-expanding-search></ix-expanding-search>`);\n  const element = page.locator('ix-expanding-search');\n  const button = page.locator('button');\n  const input = page.locator('input');\n\n  await button.click();\n  await input.fill('new input');\n\n  await input.blur();\n  await expect(element).toHaveClass(/expanded/);\n});\n\ntest('erases the input when clear button is clicked', async ({\n  mount,\n  page,\n}) => {\n  await mount(`<ix-expanding-search></ix-expanding-search>`);\n  const element = page.locator('ix-expanding-search');\n  const button = page.locator('button');\n  const clearButton = page.locator('[data-testid=\"clear-button\"]');\n  const input = page.locator('input');\n\n  await button.click();\n  await input.fill('new input');\n\n  await clearButton.click();\n  await input.blur();\n\n  await expect(input).toHaveValue('');\n  await expect(element).not.toHaveClass(/expanded/);\n});\n"]}

package/dist/collection/components/filter-chip/filter-chip.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
  *
@@ -35,7 +51,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 :host {
-  display: flex;
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: inline-flex;
   align-items: center;
   justify-content: space-between;
   height: 1.5rem;
@@ -45,25 +65,34 @@
   background-color: var(--theme-color-ghost);
   color: var(--theme-chip-primary-outline--color);
 }
-:host:not(.disabled):not(:disabled) {
-  cursor: pointer;
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
 }
-:host:not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-color-ghost-primary--hover);
-  border-color: var(--theme-chip-primary-outline--border-color--hover);
-  color: var(--theme-chip-primary-outline--color--hover);
+:host ::-webkit-scrollbar-button {
+  display: none;
 }
-:host:not(.disabled):not(:disabled) {
-  cursor: pointer;
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
 }
-:host:not(.disabled):not(:disabled):active {
-  background-color: var(--theme-color-ghost-primary--active);
-  border-color: var(--theme-chip-primary-outline--border-color--active);
-  color: var(--theme-chip-primary-outline--color--active);
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
 }
-:host:not(.disabled):not(:disabled):focus-visible {
-  outline: var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);
-  outline-offset: -0.125rem;
+: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 .slot-container {
   overflow: hidden;
@@ -75,15 +104,46 @@
   border-color: var(--theme-color-component-4);
   color: var(--theme-color-weak-text);
 }
-:host .btn-oval {
+:host ix-icon-button {
   height: 1.5rem;
-  width: 1.5rem;
-  min-width: 1.5rem;
   margin-left: 0.25rem;
-  padding: 0;
-  vertical-align: top;
 }
-:host .btn-oval:not(.disabled):not(:disabled):focus-visible {
+:host ix-icon-button:not(.disabled):not(:disabled):focus-visible {
   outline: none;
-  border-color: #199fff;
+}
+
+:host(.disabled) {
+  border: var(--theme-focus--border-thickness) solid var(--theme-color-component-4);
+  color: var(--theme-color-weak-text);
+  padding-right: 0.5rem;
+  cursor: default;
+}
+
+:host(.readonly) {
+  padding-right: 0.5rem;
+}
+
+:host(:not(.disabled):not(:disabled)) {
+  cursor: pointer;
+}
+
+:host(:hover:not(.disabled):not(:disabled)) {
+  background-color: var(--theme-color-ghost-primary--hover);
+  border-color: var(--theme-chip-primary-outline--border-color--hover);
+  color: var(--theme-chip-primary-outline--color--hover);
+}
+
+:host(:not(.disabled):not(:disabled)) {
+  cursor: pointer;
+}
+
+:host(:active:not(.disabled):not(:disabled)) {
+  background-color: var(--theme-color-ghost-primary--active);
+  border-color: var(--theme-chip-primary-outline--border-color--active);
+  color: var(--theme-chip-primary-outline--color--active);
+}
+
+:host(:focus-visible:not(.disabled):not(:disabled)) {
+  outline: var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);
+  outline-offset: -0.125rem;
 }

package/dist/collection/components/filter-chip/filter-chip.js

@@ -10,6 +10,7 @@ import { h, Host, } from '@stencil/core';
 export class FilterChip {
   constructor() {
     this.disabled = false;
+    this.readonly = false;
   }
   onCloseClick(event) {
     event.preventDefault();
@@ -17,10 +18,10 @@ export class FilterChip {
     this.closeClick.emit();
   }
   render() {
-    return (h(Host, { class: { disabled: this.disabled }, title: this.el.textContent }, h("div", { class: "slot-container" }, h("slot", null)), h("button", { disabled: this.disabled, class: "btn btn-invisible-primary btn-oval", onClick: (e) => this.onCloseClick(e) }, h("ix-icon", { name: "close-small", size: "16" }))));
+    return (h(Host, { class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, h("div", { class: "slot-container" }, h("slot", null)), !this.disabled && !this.readonly ? (h("ix-icon-button", { ghost: true, oval: true, icon: "close-small", size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
   }
   static get is() { return "ix-filter-chip"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["filter-chip.scss"]
@@ -50,6 +51,27 @@ export class FilterChip {
         "attribute": "disabled",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "If true the filter chip will be in readonly mode"
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/filter-chip/filter-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["../../../src/components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,UAAU;;oBAMF,KAAK;;EAOhB,YAAY,CAAC,KAAY;IAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;EACzB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW;MAClE,WAAK,KAAK,EAAC,gBAAgB;QACzB,eAAa,CACT;MACN,cACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,oCAAoC,EAC1C,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;QAEpC,eAAS,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,GAAW,CACzC,CACJ,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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-filter-chip',\n  styleUrl: 'filter-chip.scss',\n  scoped: true,\n})\nexport class FilterChip {\n  @Element() el: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Close clicked\n   */\n  @Event() closeClick: EventEmitter<void>;\n\n  private onCloseClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeClick.emit();\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }} title={this.el.textContent}>\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        <button\n          disabled={this.disabled}\n          class=\"btn btn-invisible-primary btn-oval\"\n          onClick={(e) => this.onCloseClick(e)}\n        >\n          <ix-icon name=\"close-small\" size=\"16\"></ix-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["../../../src/components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,UAAU;;oBAMF,KAAK;oBAML,KAAK;;EAOhB,YAAY,CAAC,KAAY;IAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;EACzB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAC3D,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW;MAE1B,WAAK,KAAK,EAAC,gBAAgB;QACzB,eAAa,CACT;MACL,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAClC,sBACE,KAAK,QACL,IAAI,QACJ,IAAI,EAAC,aAAa,EAClB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACpB,CACnB,CAAC,CAAC,CAAC,IAAI,CACH,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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-filter-chip',\n  styleUrl: 'filter-chip.scss',\n  shadow: true,\n})\nexport class FilterChip {\n  @Element() el: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the filter chip will be in readonly mode\n   * @since 2.0.0\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Close clicked\n   */\n  @Event() closeClick: EventEmitter<void>;\n\n  private onCloseClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeClick.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ disabled: this.disabled, readonly: this.readonly }}\n        title={this.el.textContent}\n      >\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        {!this.disabled && !this.readonly ? (\n          <ix-icon-button\n            ghost\n            oval\n            icon=\"close-small\"\n            size=\"16\"\n            tabindex={this.disabled ? -1 : 0}\n            variant=\"primary\"\n            disabled={this.disabled}\n            onClick={(e) => this.onCloseClick(e)}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-tile/flip-tile-state.js

@@ -8,10 +8,10 @@
  */
 export var FlipTileState;
 (function (FlipTileState) {
-  FlipTileState["None"] = "None";
-  FlipTileState["Info"] = "Info";
-  FlipTileState["Warning"] = "Warning";
-  FlipTileState["Alarm"] = "Alarm";
-  FlipTileState["Primary"] = "Primary";
+  FlipTileState["None"] = "none";
+  FlipTileState["Info"] = "info";
+  FlipTileState["Warning"] = "warning";
+  FlipTileState["Alarm"] = "alarm";
+  FlipTileState["Primary"] = "primary";
 })(FlipTileState || (FlipTileState = {}));
 //# sourceMappingURL=flip-tile-state.js.map

package/dist/collection/components/flip-tile/flip-tile-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"flip-tile-state.js","sourceRoot":"","sources":["../../../src/components/flip-tile/flip-tile-state.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,CAAN,IAAY,aAMX;AAND,WAAY,aAAa;EACvB,8BAAa,CAAA;EACb,8BAAa,CAAA;EACb,oCAAmB,CAAA;EACnB,gCAAe,CAAA;EACf,oCAAmB,CAAA;AACrB,CAAC,EANW,aAAa,KAAb,aAAa,QAMxB","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\nexport enum FlipTileState {\n  None = 'None',\n  Info = 'Info',\n  Warning = 'Warning',\n  Alarm = 'Alarm',\n  Primary = 'Primary',\n}\n"]}
+{"version":3,"file":"flip-tile-state.js","sourceRoot":"","sources":["../../../src/components/flip-tile/flip-tile-state.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,CAAN,IAAY,aAMX;AAND,WAAY,aAAa;EACvB,8BAAa,CAAA;EACb,8BAAa,CAAA;EACb,oCAAmB,CAAA;EACnB,gCAAe,CAAA;EACf,oCAAmB,CAAA;AACrB,CAAC,EANW,aAAa,KAAb,aAAa,QAMxB","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\nexport enum FlipTileState {\n  None = 'none',\n  Info = 'info',\n  Warning = 'warning',\n  Alarm = 'alarm',\n  Primary = 'primary',\n}\n"]}

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

@@ -34,6 +34,181 @@
  * 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.
+ */
+/*
+ * 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.
+ */
+.text-xs {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
+  line-height: 1.4em;
+  color: var(--theme-color-std-text);
+}
+
+.text-s {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+
+.text-caption {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+
+.text-caption-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1em;
+  color: var(--theme-color-std-text);
+}
+
+.text-default {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.429em;
+  color: var(--theme-color-std-text);
+}
+
+.text-default-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.143em;
+  color: var(--theme-color-std-text);
+}
+
+.text-default-title {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.429em;
+  color: var(--theme-color-std-text);
+}
+
+.text-default-title-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.143em;
+  color: var(--theme-color-std-text);
+}
+
+.text-l {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+
+.text-l-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.25em;
+  color: var(--theme-color-std-text);
+}
+
+.text-l-title {
+  -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);
+}
+
+.text-l-title-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.25em;
+  color: var(--theme-color-std-text);
+}
+
+.text-h2 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1.375rem;
+  font-weight: 700;
+  line-height: 1.455em;
+  color: var(--theme-color-std-text);
+}
+
+.text-xl {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1.375rem;
+  font-weight: 400;
+  line-height: 1.091em;
+  color: var(--theme-color-std-text);
+}
+
+a {
+  color: var(--theme-color-primary);
+}
 @keyframes flip-animation {
   0% {
     transform: rotateY(0);
@@ -49,10 +224,43 @@
   }
 }
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: flex;
   flex-direction: column;
   perspective: 1000px;
 }
+: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 .flip-tile-header {
   display: flex;
   align-items: center;

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

@@ -7,43 +7,52 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from '@stencil/core';
+import { createMutationObserver } from '../utils/mutation-observer';
 import { FlipTileState } from './flip-tile-state';
 export class FlipTile {
   constructor() {
     this.ANIMATION_DURATION = 150;
-    this.index = 0;
-    this.isFlipAnimationActive = undefined;
     this.state = undefined;
-    this.footer = undefined;
     this.height = 15.125;
     this.width = 16;
+    this.index = 0;
+    this.isFlipAnimationActive = undefined;
   }
   componentDidLoad() {
-    this.contentItems = this.contentContainerElement.querySelectorAll('ix-flip-tile-content');
-    this.contentItems.forEach((_, index) => {
-      if (index !== this.index) {
-        this.toggleContentItem(index);
-      }
+    this.observer = createMutationObserver(() => this.updateContentItems());
+    this.observer.observe(this.hostElement, {
+      childList: true,
     });
   }
+  componentWillLoad() {
+    this.updateContentItems();
+    this.updateContentVisibility(this.index);
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  updateContentItems() {
+    this.contentItems = Array.from(this.hostElement.querySelectorAll('ix-flip-tile-content'));
+  }
+  updateContentVisibility(indexVisible) {
+    this.contentItems.forEach((content, index) => (content.contentVisible = index === indexVisible));
+  }
   toggleIndex() {
     this.doFlipAnimation();
   }
-  toggleContentItem(index) {
-    const item = this.contentItems[index];
-    item.classList.toggle('d-none');
-  }
   doFlipAnimation() {
     this.isFlipAnimationActive = true;
     setTimeout(() => {
-      this.toggleContentItem(this.index);
+      this.updateContentVisibility(this.index);
       if (this.index >= this.contentItems.length - 1) {
         this.index = 0;
       }
       else {
         this.index++;
       }
-      this.toggleContentItem(this.index);
+      this.updateContentVisibility(this.index);
     }, this.ANIMATION_DURATION);
     setTimeout(() => {
       this.isFlipAnimationActive = false;
@@ -64,7 +73,7 @@ export class FlipTile {
         alarm: this.state === FlipTileState.Alarm,
         primary: this.state === FlipTileState.Primary,
         'flip-animation-active': this.isFlipAnimationActive,
-      } }, h("div", { class: "flip-tile-header" }, h("div", { class: "header-slot-container text-l-title" }, h("slot", { name: "header" })), h("ix-icon-button", { icon: "eye", variant: "Primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { class: "content-container", ref: (el) => (this.contentContainerElement = el) }, h("slot", null)), h("div", { class: {
+      } }, h("div", { class: "flip-tile-header" }, h("div", { class: "header-slot-container text-l-title" }, h("slot", { name: "header" })), h("ix-icon-button", { icon: "eye", variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { class: "content-container" }, h("slot", null)), h("div", { class: {
         footer: true,
         'contrast-light': this.state === FlipTileState.Warning,
         'contrast-dark': this.state === FlipTileState.Info ||
@@ -72,7 +81,7 @@ export class FlipTile {
       } }, h("slot", { name: "footer" })))));
   }
   static get is() { return "ix-flip-tile"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["flip-tile.scss"]
@@ -107,26 +116,6 @@ export class FlipTile {
         "attribute": "state",
         "reflect": false
       },
-      "footer": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Will be removed in 2.0.0. Setting this property has no effect"
-            }],
-          "text": "Tmp property name"
-        },
-        "attribute": "footer",
-        "reflect": false
-      },
       "height": {
         "type": "any",
         "mutable": false,