@siemens/ix 2.6.1 → 2.7.0

package/dist/collection/components/dropdown-button/dropdown-button.js

@@ -136,7 +136,7 @@ export class DropdownButton {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -153,7 +153,7 @@ export class DropdownButton {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -191,7 +191,7 @@ export class DropdownButton {
                 "mutable": false,
                 "complexType": {
                     "original": "AlignedPlacement",
-                    "resolved": "\"bottom-end\" | \"bottom-start\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"top-end\" | \"top-start\"",
+                    "resolved": "\"bottom-end\" | \"bottom-start\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"top-end\" | \"top-start\" | undefined",
                     "references": {
                         "AlignedPlacement": {
                             "location": "import",

package/dist/collection/components/dropdown-header/dropdown-header.js

@@ -15,7 +15,7 @@ export class DropdownHeader {
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: '7532adf5a41a91f4d60927e1ef8756216fac8dfb' }, h("ix-typography", { key: 'b9222fc010a499d6a2493e43ea0212da2d14c664', class: 'category-text', format: 'h5' }, this.label)));
+        return (h(Host, { key: '0e1242771eaad701539d47e6953308d3d8fb2d77' }, h("ix-typography", { key: 'b8e5875946afbd41ebff44cf304e7652141c655b', class: 'category-text', format: 'h5' }, this.label)));
     }
     static get is() { return "ix-dropdown-header"; }
     static get encapsulation() { return "shadow"; }
@@ -36,11 +36,11 @@ export class DropdownHeader {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Display name of the header"

package/dist/collection/components/dropdown-header/dropdown-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-header.js","sourceRoot":"","sources":["../../../src/components/dropdown-header/dropdown-header.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,cAAc;;;;IAMzB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,sEAAe,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,IAAI,IAChD,IAAI,CAAC,KAAK,CACG,CACX,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-dropdown-header',\n  styleUrl: 'dropdown-header.scss',\n  shadow: true,\n})\nexport class DropdownHeader {\n  /**\n   * Display name of the header\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <Host>\n        <ix-typography class={'category-text'} format={'h5'}>\n          {this.label}\n        </ix-typography>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"dropdown-header.js","sourceRoot":"","sources":["../../../src/components/dropdown-header/dropdown-header.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,cAAc;;;;IAMzB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,sEAAe,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,IAAI,IAChD,IAAI,CAAC,KAAK,CACG,CACX,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-dropdown-header',\n  styleUrl: 'dropdown-header.scss',\n  shadow: true,\n})\nexport class DropdownHeader {\n  /**\n   * Display name of the header\n   */\n  @Prop() label?: string;\n\n  render() {\n    return (\n      <Host>\n        <ix-typography class={'category-text'} format={'h5'}>\n          {this.label}\n        </ix-typography>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -33,15 +33,15 @@ export class DropdownItem {
             this.icon !== undefined);
     }
     render() {
-        return (h(Host, { key: 'a3bb371da7e04f07da99bcd2e675152cba162c9c', class: {
+        return (h(Host, { key: '7b2135346336a1240640cc084f98ebeac8ac5828', class: {
                 hover: this.hover,
                 'icon-only': this.isIconOnly(),
                 disabled: this.disabled,
                 submenu: this.isSubMenu,
-            }, role: "listitem" }, h("button", { key: 'fe8d07d5524ca68d92599f1f67bebf4728e9d55c', type: "button", tabIndex: 0, class: {
+            }, role: "listitem" }, h("button", { key: 'ec9ff70fcfbea969ebfe133575585f970f4caa98', type: "button", tabIndex: 0, class: {
                 'dropdown-item': true,
                 'no-checked-field': this.suppressChecked,
-            }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { class: "checkmark", name: 'single-check', size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, h("div", { key: '30d9ed8400a979bd463182b1914fb6a13554fcd3', class: "dropdown-item-text" }, this.label, h("slot", { key: 'd69eeb6bdb5633331415cebf3e3170809c2cc291' })), this.isSubMenu ? (h("ix-icon", { name: 'chevron-right-small', class: 'submenu-icon' })) : null)));
+            }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { class: "checkmark", name: 'single-check', size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, h("div", { key: '582689eb920e8e79f285ba9cdb8d70920b5ae589', class: "dropdown-item-text" }, this.label, h("slot", { key: 'bda7606e512795bc30fafa31bd824aa3e29ecbf8' })), this.isSubMenu ? (h("ix-icon", { name: 'chevron-right-small', class: 'submenu-icon' })) : null)));
     }
     static get is() { return "ix-dropdown-item"; }
     static get encapsulation() { return "shadow"; }
@@ -62,7 +62,7 @@ export class DropdownItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -79,7 +79,7 @@ export class DropdownItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/dropdown-quick-actions/dropdown-quick-actions.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class DropdownQuickActions {
     render() {
-        return (h(Host, { key: 'bbad443b6f484e4506c28c2ced3f4b5f94b18b89' }, h("slot", { key: 'a0cfe7e14ee73671413eab21b71bac7494a75536' })));
+        return (h(Host, { key: 'd32c5fecd63fab51431f7d8c9bf5c026437b7206' }, h("slot", { key: '9abc872450d1567cdf3ee5882677182cd6ddf9b6' })));
     }
     static get is() { return "ix-dropdown-quick-actions"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/empty-state/empty-state.js

@@ -19,7 +19,7 @@ export class EmptyState {
         this.action = undefined;
     }
     render() {
-        return (h(Host, { key: '724769e68ca03e809c7c1b520fd27ddf0f851e00', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { key: '30038117755c9f30e0a90a6c4e2ab03fb559fa2d', class: "emptyState__icon" }, h("ix-icon", { key: '96c477d16bec8a73843981731ff6cb8830c27d39', name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text" }))), h("div", { key: 'eac1e4371be1427d7126f134bee2f74550f09fe9', class: "emptyState__content" }, h("div", { key: '462298153f1e35f9fcc43fe7d42e15fe6efa2351', class: "content__label" }, h("ix-typography", { key: 'd52a79a4e27938d59231a3e39cc38b53a5799a5f', format: this.layout === 'large' ? 'h3' : 'body' }, this.header), this.subHeader && (h("div", { key: '9667dc6eaba88a1ce663e66deda0d447f91db7f0', class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { key: '6b435724ffb7e2cc758b43cd76e452b241aab028', class: "content__action" }, h("ix-button", { key: 'a6257e01ae753fee88b61de3b9ffccdc68596485', onClick: () => this.actionClick.emit() }, this.action))))));
+        return (h(Host, { key: 'cb312e54bc903b7f3d59faed9850e9500847869e', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { key: 'c901252f66e6f97ef42808c1e881bac76b40674a', class: "emptyState__icon" }, h("ix-icon", { key: '1ee24a795580830a364f8b541b94e230d7797365', name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text" }))), h("div", { key: 'ab641cce5937da8014ec76af23349dd629575a2e', class: "emptyState__content" }, h("div", { key: '8d6340d04768a47ccd1333d628342bb894d7387a', class: "content__label" }, h("ix-typography", { key: 'f27adb6c7a93e36117022dd2294b46a34b0f4c79', format: this.layout === 'large' ? 'h3' : 'body' }, this.header), this.subHeader && (h("div", { key: 'ca49901be387ce044c5aa6da90fab8d8f2dc06a1', class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { key: '76755b670cae1926e6d976244a81f1b3c9eca76b', class: "content__action" }, h("ix-button", { key: '937d705608063a0e586d112f7c848883abd361fb', onClick: () => this.actionClick.emit() }, this.action))))));
     }
     static get is() { return "ix-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -64,11 +64,11 @@ export class EmptyState {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Optional empty state icon"
@@ -98,11 +98,11 @@ export class EmptyState {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Optional empty state sub header"
@@ -115,11 +115,11 @@ export class EmptyState {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Optional empty state action"

package/dist/collection/components/empty-state/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","sourceRoot":"","sources":["../../../src/components/empty-state/empty-state.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI9E;;GAEG;AAMH,MAAM,OAAO,UAAU;;sBAIc,OAAO;;;;;;IA2B1C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,0BAA0B,IAAI,CAAC,MAAM,EAAE;YACjD,IAAI,CAAC,IAAI,IAAI,CACZ,4DAAK,KAAK,EAAC,kBAAkB;gBAE3B,gEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAC3C,KAAK,EAAC,iBAAiB,GACvB,CACE,CACP;YAED,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,sEAAe,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,IAC3D,IAAI,CAAC,MAAM,CACE;oBAEf,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,SAAS,CAAO,CACrD,CACG;gBAEL,IAAI,CAAC,MAAM,IAAI,CACd,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,kEAAW,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,IAC9C,IAAI,CAAC,MAAM,CACF,CACR,CACP,CACG,CACD,CACR,CAAC;IACJ,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, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type EmptyStateLayout = 'large' | 'compact' | 'compactBreak';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-empty-state',\n  styleUrl: 'empty-state.scss',\n  shadow: true,\n})\nexport class EmptyState {\n  /**\n   * Optional empty state layout - one of 'large', 'compact' or 'compactBreak'\n   */\n  @Prop() layout: EmptyStateLayout = 'large';\n\n  /**\n   * Optional empty state icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Empty state header\n   */\n  @Prop() header!: string;\n\n  /**\n   * Optional empty state sub header\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Optional empty state action\n   */\n  @Prop() action: string;\n\n  /**\n   * Empty state action click event\n   */\n  @Event() actionClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host class={`emptyState emptyState--${this.layout}`}>\n        {this.icon && (\n          <div class=\"emptyState__icon\">\n            {/* TODO: replace size for large layout with '56' if available */}\n            <ix-icon\n              name={this.icon}\n              size={this.layout === 'large' ? '32' : '32'}\n              color=\"color-soft-text\"\n            />\n          </div>\n        )}\n\n        <div class=\"emptyState__content\">\n          <div class=\"content__label\">\n            <ix-typography format={this.layout === 'large' ? 'h3' : 'body'}>\n              {this.header}\n            </ix-typography>\n\n            {this.subHeader && (\n              <div class=\"label__subHeader\">{this.subHeader}</div>\n            )}\n          </div>\n\n          {this.action && (\n            <div class=\"content__action\">\n              <ix-button onClick={() => this.actionClick.emit()}>\n                {this.action}\n              </ix-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"empty-state.js","sourceRoot":"","sources":["../../../src/components/empty-state/empty-state.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI9E;;GAEG;AAMH,MAAM,OAAO,UAAU;;sBAIc,OAAO;;;;;;IA2B1C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,0BAA0B,IAAI,CAAC,MAAM,EAAE;YACjD,IAAI,CAAC,IAAI,IAAI,CACZ,4DAAK,KAAK,EAAC,kBAAkB;gBAE3B,gEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAC3C,KAAK,EAAC,iBAAiB,GACvB,CACE,CACP;YAED,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,sEAAe,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,IAC3D,IAAI,CAAC,MAAM,CACE;oBAEf,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,SAAS,CAAO,CACrD,CACG;gBAEL,IAAI,CAAC,MAAM,IAAI,CACd,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,kEAAW,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,IAC9C,IAAI,CAAC,MAAM,CACF,CACR,CACP,CACG,CACD,CACR,CAAC;IACJ,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, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type EmptyStateLayout = 'large' | 'compact' | 'compactBreak';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-empty-state',\n  styleUrl: 'empty-state.scss',\n  shadow: true,\n})\nexport class EmptyState {\n  /**\n   * Optional empty state layout - one of 'large', 'compact' or 'compactBreak'\n   */\n  @Prop() layout: EmptyStateLayout = 'large';\n\n  /**\n   * Optional empty state icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Empty state header\n   */\n  @Prop() header!: string;\n\n  /**\n   * Optional empty state sub header\n   */\n  @Prop() subHeader?: string;\n\n  /**\n   * Optional empty state action\n   */\n  @Prop() action?: string;\n\n  /**\n   * Empty state action click event\n   */\n  @Event() actionClick!: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host class={`emptyState emptyState--${this.layout}`}>\n        {this.icon && (\n          <div class=\"emptyState__icon\">\n            {/* TODO: replace size for large layout with '56' if available */}\n            <ix-icon\n              name={this.icon}\n              size={this.layout === 'large' ? '32' : '32'}\n              color=\"color-soft-text\"\n            />\n          </div>\n        )}\n\n        <div class=\"emptyState__content\">\n          <div class=\"content__label\">\n            <ix-typography format={this.layout === 'large' ? 'h3' : 'body'}>\n              {this.header}\n            </ix-typography>\n\n            {this.subHeader && (\n              <div class=\"label__subHeader\">{this.subHeader}</div>\n            )}\n          </div>\n\n          {this.action && (\n            <div class=\"content__action\">\n              <ix-button onClick={() => this.actionClick.emit()}>\n                {this.action}\n              </ix-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/event-list/event-list.js

@@ -105,11 +105,11 @@ export class EventList {
         });
     }
     render() {
-        return (h(Host, { key: 'afbcb3c51aded017ee320ab60af64603e6bd8a2f', class: {
+        return (h(Host, { key: 'db8588c2f01a73b66bab3bde310f67800fcf0c99', class: {
                 'item-size-s': this.itemHeight === 'S',
                 'item-size-l': this.itemHeight === 'L',
                 compact: this.compact,
-            } }, h("div", { key: '0448c9fb55930d4eb421c759586e3bfc2685320d', role: "list" }, h("slot", { key: '2a268bd668077c76f5a598b42aa4fc63fa27414b' }))));
+            } }, h("div", { key: '89447c10a095bfdf95567ff00be599933b85e1bd', role: "list" }, h("slot", { key: '7e129d93b1d9aadf17bdc9aafff241ff7da84eb1' }))));
     }
     static get is() { return "ix-event-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/event-list-item/event-list-item.js

@@ -29,16 +29,16 @@ export class EventListItem {
                 ? `var(${this.color})`
                 : `var(--theme-${this.color})`;
         }
-        return (h(Host, { key: 'ccae724ec628564a8efc0c4afb57b174c145d29f', class: {
+        return (h(Host, { key: 'dfeb360410eecdc5bd5881287a41106e1de5a81d', class: {
                 disabled: this.disabled,
-            } }, h("div", { key: 'd3f47109cda6e26444f2f68db37d4d6548691c3a', role: "listitem", "aria-disabled": a11yBoolean(this.disabled), class: {
+            } }, h("div", { key: '8ed103397f1e99a7e5bb59e9a8b90585c5e2263f', role: "listitem", "aria-disabled": a11yBoolean(this.disabled), class: {
                 'event-list-item': true,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, h("div", { key: 'd4ad4478255f1f6b7d32d5791c0af2b7fffdb85a', class: `indicator ${!((_c = this.itemColor) !== null && _c !== void 0 ? _c : this.color) ? 'indicator-empty' : ''}`, style: {
+            } }, h("div", { key: '0af7281c4f49763a0a9b879afd2bc58153b0ad20', class: `indicator ${!((_c = this.itemColor) !== null && _c !== void 0 ? _c : this.color) ? 'indicator-empty' : ''}`, style: {
                 'background-color': ((_d = this.itemColor) !== null && _d !== void 0 ? _d : this.color) ? color : 'inherit',
                 opacity: `${this.disabled ? 0.4 : 1}`,
-            } }), h("div", { key: '4d8551ff9c4630506cd30dbdaf87b13d7b89d21b', class: "event-list-item-container" }, h("div", { key: '6df7f1111a621be7d8f7b1bb176c81d94427d59f', class: "event-content" }, h("slot", { key: '83c7f28de4ec57e39695e0e7f62c01fa56845dc5' })), this.chevron && (h("ix-icon", { key: '0b63dc539e42f2bd16088466168a60ae10909303', name: 'chevron-right', size: "16", class: "chevron-icon" }))))));
+            } }), h("div", { key: '470463df5f6c660c22492a8aac3ef7eceb130e17', class: "event-list-item-container" }, h("div", { key: '1e6a1104620b4284d86e81ad2d5e946044b395fb', class: "event-content" }, h("slot", { key: 'a13ac6b4c205d7ce2b10ba9a29e62175c61544ec' })), this.chevron && (h("ix-icon", { key: '0da6f24ce7c83bb8c144c8ac3170fb344954b2c2', name: 'chevron-right', size: "16", class: "chevron-icon" }))))));
     }
     static get is() { return "ix-event-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -59,7 +59,7 @@ export class EventListItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -82,7 +82,7 @@ export class EventListItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,

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

@@ -36,6 +36,9 @@ export class ExpandingSearch {
         this.placeholder = 'Enter text here';
         this.value = '';
         this.fullWidth = false;
+        this.variant = 'primary';
+        this.outline = false;
+        this.ghost = true;
         this.isFieldChanged = false;
         this.expanded = false;
         this.hasFocus = false;
@@ -52,20 +55,20 @@ export class ExpandingSearch {
         this.valueChange.emit(this.value);
     }
     render() {
-        return (h(Host, { key: 'a95e8e89feb4d738194ac5d709ed0e41a06870d0', class: {
+        return (h(Host, { key: 'f1981aaa35a3437b84b131f32ba2c5e5c29e363d', class: {
                 expanded: this.expanded,
                 'right-position': this.expanded,
                 fullWidth: this.fullWidth,
-            } }, h("ix-icon-button", { key: 'e8640b3f3362adca9b820190a47a91a66cd634e6', size: this.expanded ? '16' : '24', icon: this.icon, ghost: true, variant: "primary", "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
+            } }, h("ix-icon-button", { key: 'e9dab8436d9e74ed8c4e434c689e6b59af4fdf29', size: this.expanded ? '16' : '24', icon: this.icon, variant: this.expanded ? 'primary' : this.variant, ghost: this.ghost || this.expanded, outline: this.outline && !this.expanded, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
                 'btn-search': true,
                 'btn-search--expanded': this.expanded,
-            } }), h("div", { key: '5cfe2e19c1e9ffc2e061b530aeb8801c3f52b6aa', class: {
+            } }), h("div", { key: 'e5c9c707728595451c33efbdce5973884bfdf81e', class: {
                 expanded: this.expanded,
                 fullWidth: this.fullWidth,
                 collapsed: !this.expanded,
                 'disable-pointer': !this.expanded,
                 'input-container': true,
-            }, "data-testid": "input-wrapper" }, h("input", { key: 'ed0e943c5fc6860a0687f4ea950642146be5623f', class: {
+            }, "data-testid": "input-wrapper" }, h("input", { key: '93edc9d89807125a7de4ed7d40eaa7945534fd6a', class: {
                 'form-control': true,
                 input: this.expanded,
                 'disable-pointer': !this.expanded,
@@ -164,6 +167,66 @@ export class ExpandingSearch {
                 "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonVariant",
+                    "resolved": "\"danger\" | \"primary\" | \"secondary\"",
+                    "references": {
+                        "ButtonVariant": {
+                            "location": "import",
+                            "path": "../button/button",
+                            "id": "src/components/button/button.tsx::ButtonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "button variant"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "outline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Outline button"
+                },
+                "attribute": "outline",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "ghost": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button with no background or outline"
+                },
+                "attribute": "ghost",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }

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  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"]}
+{"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';\nimport { ButtonVariant } from '../button/button';\nimport { IxButtonComponent } from '../button/button-component';\n\n@Component({\n  tag: 'ix-expanding-search',\n  styleUrl: 'expanding-search.scss',\n  shadow: true,\n})\nexport class ExpandingSearch\n  implements Omit<IxButtonComponent, 'type' | 'icon' | 'disabled' | 'loading'>\n{\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  /**\n   * button variant\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = true;\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          variant={this.expanded ? 'primary' : this.variant}\n          ghost={this.ghost || this.expanded}\n          outline={this.outline && !this.expanded}\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.spec.js

@@ -19,10 +19,11 @@ describe('ix-expanding-search', () => {
             html: '<ix-expanding-search></ix-expanding-search>',
         });
         expandingSearch = page.doc.querySelector('ix-expanding-search');
-        expandingSearch.shadowRoot.querySelector('[data-testid="button"]');
-        input = expandingSearch.shadowRoot.querySelector('[data-testid="input"]');
-        expandingSearch.shadowRoot.querySelector('[data-testid="input-wrapper"]');
-        expandingSearch.shadowRoot.querySelector('input').focus = jest.fn();
+        const shadowRoot = expandingSearch.shadowRoot;
+        shadowRoot.querySelector('[data-testid="button"]');
+        input = shadowRoot.querySelector('[data-testid="input"]');
+        shadowRoot.querySelector('[data-testid="input-wrapper"]');
+        shadowRoot.querySelector('input').focus = jest.fn();
     });
     it("emits an event on change and returns 'this.value'", async () => {
         let callbackSpy = jest.fn();

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

@@ -1 +1 @@
-{"version":3,"file":"expanding-search.spec.js","sourceRoot":"","sources":["../../../../src/components/expanding-search/test/expanding-search.spec.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,IAAI,IAAS,CAAC;IACd,IAAI,eAA6C,CAAC;IAClD,IAAI,KAAU,CAAC;IAEf,UAAU,CAAC,KAAK,IAAI,EAAE;QACpB,IAAI,GAAG,MAAM,WAAW,CAAC;YACvB,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,6CAA6C;SACpD,CAAC,CAAC;QACH,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QAChE,eAAe,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QACnE,KAAK,GAAG,eAAe,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAC1E,eAAe,CAAC,UAAU,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAC;QAC1E,eAAe,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,IAAI,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC5B,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;QAEtD,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC;QAC3D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,WAAW,CAAC,CAAC,gBAAgB,EAAE,CAAC;QACvC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;AACL,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 */\n\nimport { newSpecPage } from '@stencil/core/testing';\nimport { fireEvent } from '@testing-library/dom';\nimport { ExpandingSearch } from '../expanding-search';\n\ndescribe('ix-expanding-search', () => {\n  let page: any;\n  let expandingSearch: HTMLIxExpandingSearchElement;\n  let input: any;\n\n  beforeEach(async () => {\n    page = await newSpecPage({\n      components: [ExpandingSearch],\n      html: '<ix-expanding-search></ix-expanding-search>',\n    });\n    expandingSearch = page.doc.querySelector('ix-expanding-search');\n    expandingSearch.shadowRoot.querySelector('[data-testid=\"button\"]');\n    input = expandingSearch.shadowRoot.querySelector('[data-testid=\"input\"]');\n    expandingSearch.shadowRoot.querySelector('[data-testid=\"input-wrapper\"]');\n    expandingSearch.shadowRoot.querySelector('input').focus = jest.fn();\n  });\n\n  it(\"emits an event on change and returns 'this.value'\", async () => {\n    let callbackSpy = jest.fn();\n    page.win.addEventListener('valueChange', callbackSpy);\n\n    fireEvent.input(input, { target: { value: 'new input' } });\n    await page.waitForChanges();\n\n    expect(callbackSpy).toHaveBeenCalled();\n    expect(callbackSpy.mock.calls[0][0].detail).toEqual(expandingSearch.value);\n  });\n});\n"]}
+{"version":3,"file":"expanding-search.spec.js","sourceRoot":"","sources":["../../../../src/components/expanding-search/test/expanding-search.spec.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,IAAI,IAAS,CAAC;IACd,IAAI,eAA6C,CAAC;IAClD,IAAI,KAAU,CAAC;IAEf,UAAU,CAAC,KAAK,IAAI,EAAE;QACpB,IAAI,GAAG,MAAM,WAAW,CAAC;YACvB,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,6CAA6C;SACpD,CAAC,CAAC;QACH,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,qBAAqB,CAAE,CAAC;QACjE,MAAM,UAAU,GAAG,eAAe,CAAC,UAAW,CAAC;QAC/C,UAAU,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QACnD,KAAK,GAAG,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAC1D,UAAU,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAC;QAC1D,UAAU,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IACvD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,IAAI,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC5B,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;QAEtD,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC;QAC3D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,WAAW,CAAC,CAAC,gBAAgB,EAAE,CAAC;QACvC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;AACL,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 */\n\nimport { newSpecPage } from '@stencil/core/testing';\nimport { fireEvent } from '@testing-library/dom';\nimport { ExpandingSearch } from '../expanding-search';\n\ndescribe('ix-expanding-search', () => {\n  let page: any;\n  let expandingSearch: HTMLIxExpandingSearchElement;\n  let input: any;\n\n  beforeEach(async () => {\n    page = await newSpecPage({\n      components: [ExpandingSearch],\n      html: '<ix-expanding-search></ix-expanding-search>',\n    });\n    expandingSearch = page.doc.querySelector('ix-expanding-search')!;\n    const shadowRoot = expandingSearch.shadowRoot!;\n    shadowRoot.querySelector('[data-testid=\"button\"]');\n    input = shadowRoot.querySelector('[data-testid=\"input\"]');\n    shadowRoot.querySelector('[data-testid=\"input-wrapper\"]');\n    shadowRoot.querySelector('input')!.focus = jest.fn();\n  });\n\n  it(\"emits an event on change and returns 'this.value'\", async () => {\n    let callbackSpy = jest.fn();\n    page.win.addEventListener('valueChange', callbackSpy);\n\n    fireEvent.input(input, { target: { value: 'new input' } });\n    await page.waitForChanges();\n\n    expect(callbackSpy).toHaveBeenCalled();\n    expect(callbackSpy.mock.calls[0][0].detail).toEqual(expandingSearch.value);\n  });\n});\n"]}

package/dist/collection/components/field-label/field-label.js

@@ -115,7 +115,7 @@ export class FormFieldLabel {
         }
     }
     render() {
-        return (h(Host, { key: 'bef5f15183b60646f3092ef0c9d8ca1172a4d149', onClick: () => this.focusOnClick() }, h("label", Object.assign({ key: '1203a82e14cca571098ce7dacd2ce71d7bd674fd', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), h("ix-typography", { key: '9e6b76080bc45ca0f46667e4c6610002f64ae884', color: this.isInvalid ? 'alarm' : 'soft', format: "label" }, h("slot", { key: 'a80749a45eb26b4655b9b0c13855980d2ef35323' }), this.required && h("span", { key: '54f33771b6cace5a63dd82b9813f8fbb6425536e' }, "\u00A0*")))));
+        return (h(Host, { key: 'e20b9e4a647437545261a447bfabae219b79c821', onClick: () => this.focusOnClick() }, h("label", Object.assign({ key: '2a1e377f586175847579db74d63d76718bf372cf', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), h("ix-typography", { key: 'f3ce54d183798930a542966a7fa640cc40c917fc', color: this.isInvalid ? 'alarm' : 'soft', format: "label" }, h("slot", { key: '23e03980339f7ba6730ff08864214b8f4134e053' }), this.required && h("span", { key: '720768cbb9d0efbb1137d8b25482900069ca8722' }, "\u00A0*")))));
     }
     static get is() { return "ix-field-label"; }
     static get encapsulation() { return "shadow"; }
@@ -136,7 +136,7 @@ export class FormFieldLabel {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -153,7 +153,7 @@ export class FormFieldLabel {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -170,7 +170,7 @@ export class FormFieldLabel {
                 "mutable": false,
                 "complexType": {
                     "original": "| MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>",
-                    "resolved": "{ (ref: HTMLElement): void; current: HTMLElement; waitForCurrent(): Promise<HTMLElement>; } | { (ref: HTMLInputElement): void; current: HTMLInputElement; waitForCurrent(): Promise<HTMLInputElement>; } | { (ref: HTMLTextAreaElement): void; current: HTMLTextAreaElement; waitForCurrent(): Promise<HTMLTextAreaElement>; }",
+                    "resolved": "undefined | { (ref: HTMLElement | null | undefined): void; current: HTMLElement | null; waitForCurrent(): Promise<HTMLElement>; } | { (ref: HTMLInputElement | null | undefined): void; current: HTMLInputElement | null; waitForCurrent(): Promise<HTMLInputElement>; } | { (ref: HTMLTextAreaElement | null | undefined): void; current: HTMLTextAreaElement | null; waitForCurrent(): Promise<HTMLTextAreaElement>; }",
                     "references": {
                         "MakeRef": {
                             "location": "import",

package/dist/collection/components/field-label/tests/field-label.ct.js

@@ -103,11 +103,11 @@ test('valid color with valid textarea field', async ({ mount, page }) => {
 });
 test('invalid color with invalid textarea field', async ({ mount, page }) => {
     await mount(`
-    <ix-textarea label="invalid label text" required>valid field</ix-textarea>
+    <ix-textarea label="invalid label text" required>invalid field</ix-textarea>
   `);
     const fieldElement = page.locator('ix-textarea');
     const labelElement = page.locator('ix-field-label');
-    await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);
+    await expect(fieldElement).toHaveClass(/ix-invalid--required/);
     await expect(labelElement.locator('ix-typography')).toHaveAttribute('style', 'color: var(--theme-color-alarm-text);');
 });
 //# sourceMappingURL=field-label.ct.js.map

package/dist/collection/components/field-label/tests/field-label.ct.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-label.ct.js","sourceRoot":"","sources":["../../../../src/components/field-label/tests/field-label.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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-field-label>My Label</ix-field-label>`);\n  const fieldLabelElement = page.locator('ix-field-label');\n  await expect(fieldLabelElement).toHaveClass(/hydrated/);\n  await expect(\n    fieldLabelElement.locator('label').locator('ix-typography')\n  ).toHaveClass(/typography-label/);\n  await expect(fieldLabelElement.filter({ hasText: 'My Label' })).toHaveText(\n    'My Label'\n  );\n});\n\ntest('required', async ({ mount, page }) => {\n  await mount(`<ix-field-label required>MyLabel</ix-field-label>`);\n  const labelElement = page.locator('ix-field-label');\n  await expect(labelElement).toHaveText('MyLabel *');\n});\n\ntest('focus native input by label click', async ({ mount, page }) => {\n  await mount(`\n    <ix-field-label html-for=\"input\">MyLabel</ix-field-label>\n    <input data-testid=\"input\" id=\"input\" />\n  `);\n  const labelElement = page.locator('ix-field-label');\n  await labelElement.click();\n\n  const inputElement = page.getByTestId('input');\n  await expect(inputElement).toBeFocused();\n});\n\ntest.describe('click label', () => {\n  ['ix-input', 'ix-number-input', 'ix-date-input', 'ix-textarea'].forEach(\n    (selector) => {\n      test(`focus ${selector} by external label click`, async ({\n        mount,\n        page,\n      }) => {\n        await mount(`\n        <ix-field-label html-for=\"input\">MyLabel</ix-field-label>\n        <${selector} id=\"input\"></${selector}>\n      `);\n        const labelElement = page.locator('ix-field-label');\n        await labelElement.click();\n\n        const component = page.locator(selector);\n        const focusElement =\n          selector !== 'ix-textarea'\n            ? component.locator('input')\n            : component.locator('textarea');\n        await expect(focusElement).toBeFocused();\n      });\n\n      test(`focus ${selector} by embedded label click`, async ({\n        mount,\n        page,\n      }) => {\n        await mount(`\n        <${selector} label=\"MyLabel\"></${selector}>\n      `);\n\n        const component = page.locator(selector);\n        await expect(component).toHaveClass(/hydrated/);\n\n        const labelElement = component\n          .locator('ix-field-wrapper')\n          .locator('ix-field-label');\n\n        await labelElement.click();\n\n        const focusElement =\n          selector !== 'ix-textarea'\n            ? component.locator('input')\n            : component.locator('textarea');\n\n        await expect(focusElement).toBeFocused();\n      });\n    }\n  );\n});\n\ntest('valid color', async ({ mount, page }) => {\n  await mount(`<ix-field-label>LabelValid</ix-field-label>`);\n\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(labelElement).not.toHaveAttribute('is-invalid');\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\ntest('invalid color', async ({ mount, page }) => {\n  await mount(`<ix-field-label is-invalid>LabelInvalid</ix-field-label>`);\n\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(labelElement).toHaveAttribute('is-invalid');\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n\ntest('valid color with valid text field', async ({ mount, page }) => {\n  await mount(`\n    <ix-input label=\"label text\">valid field</ix-input>\n  `);\n\n  const fieldElement = page.locator('ix-input');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\ntest('invalid color with invalid text field', async ({ mount, page }) => {\n  await mount(`\n    <ix-input label=\"invalid label text\" required>invalid field</ix-input>\n  `);\n\n  const fieldElement = page.locator('ix-input');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n\ntest('valid color with valid textarea field', async ({ mount, page }) => {\n  await mount(`\n    <ix-textarea label=\"label text\">valid field</ix-textarea>\n  `);\n\n  const fieldElement = page.locator('ix-textarea');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\ntest('invalid color with invalid textarea field', async ({ mount, page }) => {\n  await mount(`\n    <ix-textarea label=\"invalid label text\" required>valid field</ix-textarea>\n  `);\n\n  const fieldElement = page.locator('ix-textarea');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n"]}
+{"version":3,"file":"field-label.ct.js","sourceRoot":"","sources":["../../../../src/components/field-label/tests/field-label.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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-field-label>My Label</ix-field-label>`);\n  const fieldLabelElement = page.locator('ix-field-label');\n  await expect(fieldLabelElement).toHaveClass(/hydrated/);\n  await expect(\n    fieldLabelElement.locator('label').locator('ix-typography')\n  ).toHaveClass(/typography-label/);\n  await expect(fieldLabelElement.filter({ hasText: 'My Label' })).toHaveText(\n    'My Label'\n  );\n});\n\ntest('required', async ({ mount, page }) => {\n  await mount(`<ix-field-label required>MyLabel</ix-field-label>`);\n  const labelElement = page.locator('ix-field-label');\n  await expect(labelElement).toHaveText('MyLabel *');\n});\n\ntest('focus native input by label click', async ({ mount, page }) => {\n  await mount(`\n    <ix-field-label html-for=\"input\">MyLabel</ix-field-label>\n    <input data-testid=\"input\" id=\"input\" />\n  `);\n  const labelElement = page.locator('ix-field-label');\n  await labelElement.click();\n\n  const inputElement = page.getByTestId('input');\n  await expect(inputElement).toBeFocused();\n});\n\ntest.describe('click label', () => {\n  ['ix-input', 'ix-number-input', 'ix-date-input', 'ix-textarea'].forEach(\n    (selector) => {\n      test(`focus ${selector} by external label click`, async ({\n        mount,\n        page,\n      }) => {\n        await mount(`\n        <ix-field-label html-for=\"input\">MyLabel</ix-field-label>\n        <${selector} id=\"input\"></${selector}>\n      `);\n        const labelElement = page.locator('ix-field-label');\n        await labelElement.click();\n\n        const component = page.locator(selector);\n        const focusElement =\n          selector !== 'ix-textarea'\n            ? component.locator('input')\n            : component.locator('textarea');\n        await expect(focusElement).toBeFocused();\n      });\n\n      test(`focus ${selector} by embedded label click`, async ({\n        mount,\n        page,\n      }) => {\n        await mount(`\n        <${selector} label=\"MyLabel\"></${selector}>\n      `);\n\n        const component = page.locator(selector);\n        await expect(component).toHaveClass(/hydrated/);\n\n        const labelElement = component\n          .locator('ix-field-wrapper')\n          .locator('ix-field-label');\n\n        await labelElement.click();\n\n        const focusElement =\n          selector !== 'ix-textarea'\n            ? component.locator('input')\n            : component.locator('textarea');\n\n        await expect(focusElement).toBeFocused();\n      });\n    }\n  );\n});\n\ntest('valid color', async ({ mount, page }) => {\n  await mount(`<ix-field-label>LabelValid</ix-field-label>`);\n\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(labelElement).not.toHaveAttribute('is-invalid');\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\ntest('invalid color', async ({ mount, page }) => {\n  await mount(`<ix-field-label is-invalid>LabelInvalid</ix-field-label>`);\n\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(labelElement).toHaveAttribute('is-invalid');\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n\ntest('valid color with valid text field', async ({ mount, page }) => {\n  await mount(`\n    <ix-input label=\"label text\">valid field</ix-input>\n  `);\n\n  const fieldElement = page.locator('ix-input');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\ntest('invalid color with invalid text field', async ({ mount, page }) => {\n  await mount(`\n    <ix-input label=\"invalid label text\" required>invalid field</ix-input>\n  `);\n\n  const fieldElement = page.locator('ix-input');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n\ntest('valid color with valid textarea field', async ({ mount, page }) => {\n  await mount(`\n    <ix-textarea label=\"label text\">valid field</ix-textarea>\n  `);\n\n  const fieldElement = page.locator('ix-textarea');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-soft-text);'\n  );\n});\n\ntest('invalid color with invalid textarea field', async ({ mount, page }) => {\n  await mount(`\n    <ix-textarea label=\"invalid label text\" required>invalid field</ix-textarea>\n  `);\n\n  const fieldElement = page.locator('ix-textarea');\n  const labelElement = page.locator('ix-field-label');\n\n  await expect(fieldElement).toHaveClass(/ix-invalid--required/);\n\n  await expect(labelElement.locator('ix-typography')).toHaveAttribute(\n    'style',\n    'color: var(--theme-color-alarm-text);'\n  );\n});\n"]}