npm - @siemens/ix - Versions diffs - 2.6.0 → 2.7.0 - Mend

@siemens/ix 2.6.0 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1228) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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"]}

package/dist/collection/components/dropdown-item/dropdown-item.css CHANGED Viewed

@@ -122,9 +122,6 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-:host .dropdown-item:focus-visible {
-  outline: 1px solid yellow;
-}
 :host .submenu-icon {
   margin-left: auto;
 }

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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"]}

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"expanding-search.js","sourceRoot":"","sources":["../../../src/components/expanding-search/expanding-search.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;~~AAOvB~~,MAAM,OAAO,eAAe;~~IA+BlB~~,WAAW;QACjB,UAAU,CAAC,IAAI,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC;QACrC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC1C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACxB,CAAC;IACH,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC9B,CAAC;IAEO,QAAQ,CAAC,CAAa;QAC5B,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QAClD,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;YAC7C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC9B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC7B,CAAC;QAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAID;~~oBAxDe~~,QAAQ;2BAKD,iBAAiB;qBAKN,EAAE;yBAMf,KAAK;~~8BAEC~~,KAAK;wBACX,KAAK;wBACL,KAAK;QAqCvB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtD;IAEO,cAAc;;QACpB,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;IAC1B,CAAC;IAEO,YAAY;;QAClB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,gBAAgB,EAAE,IAAI,CAAC,QAAQ;gBAC/B,SAAS,EAAE,IAAI,CAAC,SAAS;aAC1B;YAED,uEACE,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,~~QACL~~,OAAO,~~EAAC~~,~~SAAS~~,~~iBACL~~,QAAQ,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,SAAS,EACpE,KAAK,EAAE;oBACL,YAAY,EAAE,IAAI;oBAClB,sBAAsB,EAAE,IAAI,CAAC,QAAQ;iBACtC,GACe;YAElB,4DACE,KAAK,EAAE;oBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,SAAS,EAAE,IAAI,CAAC,SAAS;oBACzB,SAAS,EAAE,CAAC,IAAI,CAAC,QAAQ;oBACzB,iBAAiB,EAAE,CAAC,IAAI,CAAC,QAAQ;oBACjC,iBAAiB,EAAE,IAAI;iBACxB,iBACW,eAAe;gBAE3B,8DACE,KAAK,EAAE;wBACL,cAAc,EAAE,IAAI;wBACpB,KAAK,EAAE,IAAI,CAAC,QAAQ;wBACpB,iBAAiB,EAAE,CAAC,IAAI,CAAC,QAAQ;wBACjC,gBAAgB,EAAE,CAAC,IAAI,CAAC,QAAQ;wBAChC,eAAe,EAAE,IAAI,CAAC,QAAQ;qBAC/B,EACD,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,iBACtB,OAAO,EACnB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,GAAG,EAAE;wBACX,IAAI,CAAC,aAAa,EAAE,CAAC;wBACrB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;oBACxB,CAAC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EACrC,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC5C,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAChC;gBAED,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CACrB,sBACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,IAAI,EACX,IAAI,EAAC,IAAI,iBACG,cAAc,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GAClC,CACH,CAAC,CAAC,CAAC,IAAI,CACJ,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 {\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"]}
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';\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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 CHANGED Viewed

@@ -6,9 +6,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Host, h } from "@stencil/core";
-import { createClassMutationObserver, isIxInputFieldComponent, } from "../utils/input";
+import { h, Host } from "@stencil/core";
 import { a11yHostAttributes } from "../utils/a11y";
+import { createClassMutationObserver, isIxInputFieldComponent, } from "../utils/input";
 import { makeRef } from "../utils/make-ref";
 export class FormFieldLabel {
     constructor() {
@@ -115,7 +115,7 @@ export class FormFieldLabel {
         }
     }
     render() {
-        return (h(Host, { key: '3a62067a0af7847c578459a35bcbd56c54f59bf1', onClick: () => this.focusOnClick() }, h("label", Object.assign({ key: '05aea8c0c5783f8cffb9d3968f1621564203c2ac', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), h("ix-typography", { key: '6285d1624065c691d9beb3a1c4c31268e0a6bde9', color: this.isInvalid ? 'alarm' : 'soft', format: "label" }, h("slot", { key: 'cc8185cb40bf055c6f2e29ee09265acc10719657' }), this.required && h("span", { key: 'b8c6191b6a0fd1314afd21d555268417292b1201' }, "\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,
@@ -169,8 +169,8 @@ export class FormFieldLabel {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "MakeRef<HTMLElement>",
-                    "resolved": "{ (ref: HTMLElement): void; current: HTMLElement; waitForCurrent(): Promise<HTMLElement>; }",
+                    "original": "| MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<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",
@@ -180,6 +180,14 @@ export class FormFieldLabel {
                         "HTMLElement": {
                             "location": "global",
                             "id": "global::HTMLElement"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        },
+                        "HTMLTextAreaElement": {
+                            "location": "global",
+                            "id": "global::HTMLTextAreaElement"
                         }
                     }
                 },

package/dist/collection/components/field-label/field-label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"field-label.js","sourceRoot":"","sources":["../../../src/components/field-label/field-label.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,~~IAAI~~,EAAE,~~IAAI~~,EAAE,~~CAAC~~,EAAE,~~OAAO~~,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;~~AAEzE~~,OAAO,~~EAEL~~,~~2BAA2B~~,~~EAE3B~~,~~uBAAuB,GACxB,~~MAAM,~~gBAAgB~~,CAAC;~~AACxB~~,OAAO,~~EAAkB~~,~~kBAAkB~~,~~EAAE~~,MAAM,~~eAAe~~,CAAC;~~AACnE~~,OAAO,EAAW,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAOrD,MAAM,OAAO,cAAc;;~~QAmBR~~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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","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 /\n\nimport { Component, ~~Host~~, ~~Prop~~, h, ~~Element~~, Watch } from '@stencil/core';\nimport { ~~IxComponent~~ } from '../utils/~~internal~~';\nimport {\n ClassMutationObserver,\n createClassMutationObserver,\n HTMLIxFormComponentElement,\n isIxInputFieldComponent,\n} from '../utils/input';\nimport { ~~A11yAttributes,~~ ~~a11yHostAttributes~~ } from '../utils/~~a11y~~';\nimport { MakeRef, makeRef } from '../utils/make-ref';\n\n@Component({\n tag: 'ix-field-label',\n styleUrl: 'field-label.scss',\n shadow: true,\n})\nexport class FormFieldLabel implements IxComponent {\n @Element() hostElement!: HTMLIxFieldLabelElement;\n\n /\n A value is required or must be checked for the form to be submittable\n /\n @Prop({ reflect: true, mutable: true }) required?: boolean;\n\n /\n The id of the form element that the label is associated with\n /\n @Prop({ reflect: true }) htmlFor?: string;\n\n /* @internal /\n @Prop() controlRef?: MakeRef<HTMLElement>;\n\n /* @internal /\n @Prop({ mutable: true }) isInvalid: boolean = false;\n\n private readonly htmlForObserver = new MutationObserver(() =>\n this.checkForInternalState()\n );\n private htmlForClassObserver?: ClassMutationObserver;\n private controlRefClassObserver?: ClassMutationObserver;\n private a11yAttributes: A11yAttributes = {};\n private readonly labelRef = makeRef<HTMLLabelElement>();\n\n connectedCallback() {\n this.registerHtmlForObserver();\n this.registerControlRefObserver();\n }\n\n disconnectedCallback(): void {\n if (this.htmlForObserver) {\n this.htmlForObserver.disconnect();\n }\n if (this.htmlForClassObserver) {\n this.htmlForClassObserver.destroy();\n }\n if (this.controlRefClassObserver) {\n this.controlRefClassObserver.destroy();\n }\n }\n\n componentWillRender() {\n this.checkForInternalState();\n }\n\n componentWillLoad(): void \| Promise<void> {\n this.a11yAttributes = a11yHostAttributes(this.hostElement);\n }\n\n @Watch('htmlFor')\n private registerHtmlForObserver() {\n if (typeof window === 'undefined') {\n return;\n }\n\n if (this.htmlForObserver) {\n this.htmlForObserver.disconnect();\n }\n\n if (this.htmlFor) {\n this.htmlForObserver.observe(window.document, {\n childList: true,\n subtree: true,\n });\n }\n }\n\n @Watch('controlRef')\n private async registerControlRefObserver() {\n if (typeof window === 'undefined') {\n return;\n }\n\n if (this.controlRefClassObserver) {\n this.controlRefClassObserver.destroy();\n }\n\n if (this.controlRef) {\n const input = await this.controlRef.waitForCurrent();\n\n this.controlRefClassObserver = createClassMutationObserver(input, () =>\n this.checkForInvalidState(input)\n );\n }\n }\n\n private registerHtmlForClassObserver(\n forElement: HTMLIxFormComponentElement<unknown>\n ) {\n if (this.htmlForClassObserver) {\n this.htmlForClassObserver.destroy();\n }\n\n this.htmlForClassObserver = createClassMutationObserver(forElement, () =>\n this.checkForInvalidState(forElement)\n );\n }\n\n private checkForInvalidState(elementToCheck: HTMLElement) {\n this.isInvalid =\n elementToCheck.classList.contains('is-invalid') \|\|\n elementToCheck.classList.contains('ix-invalid');\n }\n\n private async checkForInternalState() {\n if (this.htmlFor) {\n const forElement = document.getElementById(\n this.htmlFor\n ) as HTMLIxFormComponentElement<unknown>;\n if (forElement) {\n if (typeof forElement.required === 'boolean') {\n this.required = forElement.required;\n }\n\n this.registerHtmlForClassObserver(forElement);\n this.checkForInvalidState(forElement);\n }\n }\n\n if (this.controlRef) {\n const input = await this.controlRef.waitForCurrent();\n this.required = (\n input as HTMLInputElement \| HTMLTextAreaElement\n ).required;\n }\n }\n\n private async focusOnClick() {\n if (this.htmlFor) {\n const target = document.getElementById(this.htmlFor);\n if (target) {\n let input: HTMLElement \| null = null;\n if (isIxInputFieldComponent(target)) {\n input = await target.getNativeInputElement();\n } else {\n input = target;\n }\n if (typeof input.focus === 'function') {\n input.focus();\n }\n }\n }\n\n if (this.controlRef) {\n (await this.controlRef.waitForCurrent()).focus();\n }\n }\n\n render() {\n return (\n <Host onClick={() => this.focusOnClick()}>\n <label\n htmlFor={this.htmlFor}\n {...this.a11yAttributes}\n ref={this.labelRef}\n >\n <ix-typography\n color={this.isInvalid ? 'alarm' : 'soft'}\n format=\"label\"\n >\n <slot></slot>\n {this.required && <span> </span>}\n </ix-typography>\n </label>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"field-label.js","sourceRoot":"","sources":["../../../src/components/field-label/field-label.tsx"],"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 /\n\nimport { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport {\n ClassMutationObserver,\n createClassMutationObserver,\n HTMLIxFormComponentElement,\n isIxInputFieldComponent,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\nimport { MakeRef, makeRef } from '../utils/make-ref';\n\n@Component({\n tag: 'ix-field-label',\n styleUrl: 'field-label.scss',\n shadow: true,\n})\nexport class FormFieldLabel implements IxComponent {\n @Element() hostElement!: HTMLIxFieldLabelElement;\n\n /\n A value is required or must be checked for the form to be submittable\n /\n @Prop({ reflect: true, mutable: true }) required?: boolean;\n\n /\n The id of the form element that the label is associated with\n /\n @Prop({ reflect: true }) htmlFor?: string;\n\n /* @internal /\n @Prop() controlRef?:\n \| MakeRef<HTMLElement>\n \| MakeRef<HTMLInputElement>\n \| MakeRef<HTMLTextAreaElement>;\n\n /* @internal /\n @Prop({ mutable: true }) isInvalid: boolean = false;\n\n private readonly htmlForObserver = new MutationObserver(() =>\n this.checkForInternalState()\n );\n private htmlForClassObserver?: ClassMutationObserver;\n private controlRefClassObserver?: ClassMutationObserver;\n private a11yAttributes: A11yAttributes = {};\n private readonly labelRef = makeRef<HTMLLabelElement>();\n\n connectedCallback() {\n this.registerHtmlForObserver();\n this.registerControlRefObserver();\n }\n\n disconnectedCallback(): void {\n if (this.htmlForObserver) {\n this.htmlForObserver.disconnect();\n }\n if (this.htmlForClassObserver) {\n this.htmlForClassObserver.destroy();\n }\n if (this.controlRefClassObserver) {\n this.controlRefClassObserver.destroy();\n }\n }\n\n componentWillRender() {\n this.checkForInternalState();\n }\n\n componentWillLoad(): void \| Promise<void> {\n this.a11yAttributes = a11yHostAttributes(this.hostElement);\n }\n\n @Watch('htmlFor')\n private registerHtmlForObserver() {\n if (typeof window === 'undefined') {\n return;\n }\n\n if (this.htmlForObserver) {\n this.htmlForObserver.disconnect();\n }\n\n if (this.htmlFor) {\n this.htmlForObserver.observe(window.document, {\n childList: true,\n subtree: true,\n });\n }\n }\n\n @Watch('controlRef')\n private async registerControlRefObserver() {\n if (typeof window === 'undefined') {\n return;\n }\n\n if (this.controlRefClassObserver) {\n this.controlRefClassObserver.destroy();\n }\n\n if (this.controlRef) {\n const input = await this.controlRef.waitForCurrent();\n\n this.controlRefClassObserver = createClassMutationObserver(input, () =>\n this.checkForInvalidState(input)\n );\n }\n }\n\n private registerHtmlForClassObserver(\n forElement: HTMLIxFormComponentElement<unknown>\n ) {\n if (this.htmlForClassObserver) {\n this.htmlForClassObserver.destroy();\n }\n\n this.htmlForClassObserver = createClassMutationObserver(forElement, () =>\n this.checkForInvalidState(forElement)\n );\n }\n\n private checkForInvalidState(elementToCheck: HTMLElement) {\n this.isInvalid =\n elementToCheck.classList.contains('is-invalid') \|\|\n elementToCheck.classList.contains('ix-invalid');\n }\n\n private async checkForInternalState() {\n if (this.htmlFor) {\n const forElement = document.getElementById(\n this.htmlFor\n ) as HTMLIxFormComponentElement<unknown>;\n if (forElement) {\n if (typeof forElement.required === 'boolean') {\n this.required = forElement.required;\n }\n\n this.registerHtmlForClassObserver(forElement);\n this.checkForInvalidState(forElement);\n }\n }\n\n if (this.controlRef) {\n const input = await this.controlRef.waitForCurrent();\n this.required = (\n input as HTMLInputElement \| HTMLTextAreaElement\n ).required;\n }\n }\n\n private async focusOnClick() {\n if (this.htmlFor) {\n const target = document.getElementById(this.htmlFor);\n if (target) {\n let input: HTMLElement \| null = null;\n if (isIxInputFieldComponent(target)) {\n input = await target.getNativeInputElement();\n } else {\n input = target;\n }\n if (typeof input.focus === 'function') {\n input.focus();\n }\n }\n }\n\n if (this.controlRef) {\n (await this.controlRef.waitForCurrent()).focus();\n }\n }\n\n render() {\n return (\n <Host onClick={() => this.focusOnClick()}>\n <label\n htmlFor={this.htmlFor}\n {...this.a11yAttributes}\n ref={this.labelRef}\n >\n <ix-typography\n color={this.isInvalid ? 'alarm' : 'soft'}\n format=\"label\"\n >\n <slot></slot>\n {this.required && <span> </span>}\n </ix-typography>\n </label>\n </Host>\n );\n }\n}\n"]}

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

@@ -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