npm - @siemens/ix - Versions diffs - 2.1.1-beta.0 → 2.1.2-beta.0 - Mend

@siemens/ix 2.1.1-beta.0 → 2.1.2-beta.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 (72) hide show

package/dist/collection/components/blind/blind.js CHANGED Viewed

@@ -71,15 +71,15 @@ export class Blind {
     render() {
         return (h(Host, { key: 'fa737e290302d9121790574a4a88738a0be492a6', class: {
                 [`blind-${this.variant}`]: true,
-            } }, h("div", { key: 'a30152172426864588f8482a8f94f437948c74a4', class: 'blind-header-wrapper' }, h("div", { key: '8ee1a8aa21ff58cb88514fd5e428481b99e10728', class: 'blind-header-content' }, h("ix-icon", { key: '97117ee8008ea0b69e64f2c4a0149ce3b3897f44', class: "collapse-icon", name: 'chevron-right-small', color: this.variant === 'insight' || this.variant === 'outline'
-                ? 'color-primary'
-                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: 'dbe488db7c5a77b5b09927698395a1f18674308a', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'insight' || this.variant === 'outline'
-                ? 'color-std-text'
-                : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null)), h("button", { key: '841d6430b672ee5a325803d69a86794620526cc6', class: {
+            } }, h("div", { key: 'a30152172426864588f8482a8f94f437948c74a4', class: 'blind-header-wrapper' }, h("button", { key: '2d4c31d29ae45a44cb4da28d4671eec4e4293ffe', class: {
                 'blind-header': true,
                 [`blind-${this.variant}`]: true,
                 closed: this.collapsed,
-            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: '96c40a71ba13b7b46d7b3148e2d76f6f69878eb6', name: "custom-header" }))), h("section", { key: '8702342c9b1a0c7bf81e753cdc9b88b76addacb3', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: 'a362c9a6be61160391054fa0cbcb558c0e275a7f', class: {
+            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: '6b43c8e46273edbe85478df6417d0e4814bb96d8', name: "custom-header" })), h("div", { key: 'a8365629f6a68d360959bd5d12cbb56989c1584a', class: 'blind-header-content' }, h("ix-icon", { key: '3f326906e7318a857ca360c3cdbc1e05d7f10d3d', class: "collapse-icon", name: 'chevron-right-small', color: this.variant === 'insight' || this.variant === 'outline'
+                ? 'color-primary'
+                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: '3fd27a4637f4ce37a0d430b2c7b0a0f12fa12539', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'insight' || this.variant === 'outline'
+                ? 'color-std-text'
+                : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null))), h("section", { key: '8702342c9b1a0c7bf81e753cdc9b88b76addacb3', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: 'a362c9a6be61160391054fa0cbcb558c0e275a7f', class: {
                 'blind-content': true,
                 hide: this.collapsed,
             } }, !this.collapsed ? h("slot", null) : null))));

package/dist/collection/components/blind/blind.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"blind.js","sourceRoot":"","sources":["../../../src/components/blind/blind.tsx"],"names":[],"mappings":"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~~;gBAEN,+DACE~~,~~KAAK,EAAE~~;wBACL,cAAc,EAAE,IAAI;wBACpB,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;wBAC/B,MAAM,EAAE,IAAI,CAAC,SAAS;qBACvB,EACD,IAAI,EAAC,QAAQ,qBACI,yBAAyB,IAAI,CAAC,OAAO,EAAE,mBACzC,4BAA4B,IAAI,CAAC,OAAO,EAAE,mBAC1C,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;oBAEnC,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC3B,CACL;YACN,gEACE,EAAE,EAAE,4BAA4B,IAAI,CAAC,OAAO,EAAE,qBAC7B,yBAAyB,IAAI,CAAC,OAAO,EAAE;gBAExD,4DACE,KAAK,EAAE;wBACL,eAAe,EAAE,IAAI;wBACrB,IAAI,EAAE,IAAI,CAAC,SAAS;qBACrB,IAEA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,eAAa,CAAC,CAAC,CAAC,IAAI,CACnC,CACE,CACL,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 Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\n\nexport type BlindVariant = CardVariant \| 'outline';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n tag: 'ix-blind',\n styleUrl: 'blind.scss',\n shadow: true,\n})\nexport class Blind {\n /\n Collapsed state\n /\n @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n /\n Label of blind\n /\n @Prop() label: string;\n\n /\n Secondary label inside blind header\n * @since 2.0.0\n /\n @Prop() sublabel: string;\n\n /\n Optional icon to be displayed next to the header label\n * @since 1.5.0\n /\n @Prop() icon: string;\n\n /\n Blind variant\n * @since 2.0.0\n /\n @Prop() variant: BlindVariant = 'insight';\n\n /\n Collapsed state changed\n */\n @Event() collapsedChange: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxBlindElement;\n\n private chevronRef: HTMLElement;\n private blindId = ++sequentialInstanceId;\n\n constructor() {}\n\n private onHeaderClick() {\n this.collapsed = !this.collapsed;\n this.collapsedChange.emit(this.collapsed);\n }\n\n componentDidLoad() {\n this.animateCollapse(this.collapsed);\n }\n\n get content() {\n return this.hostElement.shadowRoot.querySelector('.blind-content');\n }\n\n @Watch('collapsed')\n animation(isCollapsed: boolean) {\n this.animateCollapse(isCollapsed);\n }\n\n private animateCollapse(isCollapsed: boolean) {\n if (isCollapsed) {\n this.rotateChevronRight();\n } else {\n this.rotateChevronDown();\n }\n }\n\n private rotateChevronDown() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 90,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 1,\n });\n }\n\n private rotateChevronRight() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 0,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 0,\n });\n }\n\n render() {\n return (\n <Host\n class={{\n [`blind-${this.variant}`]: true,\n }}\n >\n <div class={'blind-header-wrapper'}>\n <div class={'blind-header-content'}>\n <ix-icon\n class=\"collapse-icon\"\n name={'chevron-right-small'}\n color={\n this.variant === 'insight' \|\| this.variant === 'outline'\n ? 'color-primary'\n : `color-${this.variant}--contrast`\n }\n ref={(ref) => (this.chevronRef = ref)}\n ></ix-icon>\n <div\n class=\"blind-header-title\"\n id={`ix-blind-header-title-${this.blindId}`}\n >\n {this.label !== undefined ? (\n <Fragment>\n {this.icon && (\n <ix-icon\n class=\"blind-header-title-icon\"\n name={this.icon}\n color={\n this.variant === 'insight' \|\| this.variant === 'outline'\n ? 'color-std-text'\n : `color-${this.variant}--contrast`\n }\n ></ix-icon>\n )}\n <div class={'blind-header-title-row'}>\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.label} format=\"label-lg\" bold>\n <div\n class=\"blind-header-title-label\"\n title={this.label}\n >\n {this.label}\n </div>\n </ix-typography>\n </div>\n\n {this.sublabel && (\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.sublabel}>\n <div class=\"blind-header-title-sublabel\">\n {this.sublabel}\n </div>\n </ix-typography>\n </div>\n )}\n </div>\n <div class=\"header-actions\">\n <slot name=\"header-actions\"></slot>\n </div>\n </Fragment>\n ) : null}\n </div>\n </div>\n\n <button\n class={{\n 'blind-header': true,\n [`blind-${this.variant}`]: true,\n closed: this.collapsed,\n }}\n type=\"button\"\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n aria-controls={`ix-blind-content-section-${this.blindId}`}\n aria-expanded={a11yBoolean(!this.collapsed)}\n onClick={() => this.onHeaderClick()}\n >\n <slot name=\"custom-header\"></slot>\n </button>\n </div>\n <section\n id={`ix-blind-content-section-${this.blindId}`}\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n >\n <div\n class={{\n 'blind-content': true,\n hide: this.collapsed,\n }}\n >\n {!this.collapsed ? <slot></slot> : null}\n </div>\n </section>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"blind.js","sourceRoot":"","sources":["../../../src/components/blind/blind.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 Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\n\nexport type BlindVariant = CardVariant \| 'outline';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n tag: 'ix-blind',\n styleUrl: 'blind.scss',\n shadow: true,\n})\nexport class Blind {\n /\n Collapsed state\n /\n @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n /\n Label of blind\n /\n @Prop() label: string;\n\n /\n Secondary label inside blind header\n * @since 2.0.0\n /\n @Prop() sublabel: string;\n\n /\n Optional icon to be displayed next to the header label\n * @since 1.5.0\n /\n @Prop() icon: string;\n\n /\n Blind variant\n * @since 2.0.0\n /\n @Prop() variant: BlindVariant = 'insight';\n\n /\n Collapsed state changed\n */\n @Event() collapsedChange: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxBlindElement;\n\n private chevronRef: HTMLElement;\n private blindId = ++sequentialInstanceId;\n\n constructor() {}\n\n private onHeaderClick() {\n this.collapsed = !this.collapsed;\n this.collapsedChange.emit(this.collapsed);\n }\n\n componentDidLoad() {\n this.animateCollapse(this.collapsed);\n }\n\n get content() {\n return this.hostElement.shadowRoot.querySelector('.blind-content');\n }\n\n @Watch('collapsed')\n animation(isCollapsed: boolean) {\n this.animateCollapse(isCollapsed);\n }\n\n private animateCollapse(isCollapsed: boolean) {\n if (isCollapsed) {\n this.rotateChevronRight();\n } else {\n this.rotateChevronDown();\n }\n }\n\n private rotateChevronDown() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 90,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 1,\n });\n }\n\n private rotateChevronRight() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 0,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 0,\n });\n }\n\n render() {\n return (\n <Host\n class={{\n [`blind-${this.variant}`]: true,\n }}\n >\n <div class={'blind-header-wrapper'}>\n <button\n class={{\n 'blind-header': true,\n [`blind-${this.variant}`]: true,\n closed: this.collapsed,\n }}\n type=\"button\"\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n aria-controls={`ix-blind-content-section-${this.blindId}`}\n aria-expanded={a11yBoolean(!this.collapsed)}\n onClick={() => this.onHeaderClick()}\n >\n <slot name=\"custom-header\"></slot>\n </button>\n\n <div class={'blind-header-content'}>\n <ix-icon\n class=\"collapse-icon\"\n name={'chevron-right-small'}\n color={\n this.variant === 'insight' \|\| this.variant === 'outline'\n ? 'color-primary'\n : `color-${this.variant}--contrast`\n }\n ref={(ref) => (this.chevronRef = ref)}\n ></ix-icon>\n <div\n class=\"blind-header-title\"\n id={`ix-blind-header-title-${this.blindId}`}\n >\n {this.label !== undefined ? (\n <Fragment>\n {this.icon && (\n <ix-icon\n class=\"blind-header-title-icon\"\n name={this.icon}\n color={\n this.variant === 'insight' \|\| this.variant === 'outline'\n ? 'color-std-text'\n : `color-${this.variant}--contrast`\n }\n ></ix-icon>\n )}\n <div class={'blind-header-title-row'}>\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.label} format=\"label-lg\" bold>\n <div\n class=\"blind-header-title-label\"\n title={this.label}\n >\n {this.label}\n </div>\n </ix-typography>\n </div>\n\n {this.sublabel && (\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.sublabel}>\n <div class=\"blind-header-title-sublabel\">\n {this.sublabel}\n </div>\n </ix-typography>\n </div>\n )}\n </div>\n <div class=\"header-actions\">\n <slot name=\"header-actions\"></slot>\n </div>\n </Fragment>\n ) : null}\n </div>\n </div>\n </div>\n <section\n id={`ix-blind-content-section-${this.blindId}`}\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n >\n <div\n class={{\n 'blind-content': true,\n hide: this.collapsed,\n }}\n >\n {!this.collapsed ? <slot></slot> : null}\n </div>\n </section>\n </Host>\n );\n }\n}\n"]}

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

@@ -116,6 +116,9 @@ export class Dropdown {
         return this.checkForSubmenuAnchor(el);
     }
     async checkForSubmenuAnchor(element) {
+        if (!element) {
+            return null;
+        }
         if (hasDropdownItemWrapperImplemented(element)) {
             const dropdownItem = await element.getDropdownItemElement();
             dropdownItem.isSubMenu = true;
@@ -158,7 +161,6 @@ export class Dropdown {
                 : this.resolveElement(this.trigger));
             if (this.anchorElement) {
                 this.applyDropdownPosition();
-                // await this.checkForSubmenuAnchor();
             }
         }
     }
@@ -254,7 +256,7 @@ export class Dropdown {
         this.applyDropdownPosition();
     }
     render() {
-        return (h(Host, { key: '01a39d73f0427606652393f7344e740bd9ee4a98', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
+        return (h(Host, { key: '704bc3d7987061a7b9835263d45ee11f753ba71b', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
                 'dropdown-menu': true,
                 show: this.show,
                 overflow: true,
@@ -262,7 +264,7 @@ export class Dropdown {
                 margin: '0',
                 minWidth: '0px',
                 position: this.positioningStrategy,
-            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: 'd87f8961f4319f6748685479ccaed5b450868b57', style: { display: 'contents' } }, this.header && h("div", { class: "dropdown-header" }, this.header), h("slot", { key: '274f8d9f89f4b4d92d5d32a32fbbc485964d0e3b' }))));
+            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: '5e0c4a15d72372573f992b86774d52bfa64c72c8', style: { display: 'contents' } }, this.header && h("div", { class: "dropdown-header" }, this.header), h("slot", { key: 'f182bef9568ab69d49a5fb2d2fbccfdd05041c80' }))));
     }
     static get is() { return "ix-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,UAAU,EACV,eAAe,EAEf,IAAI,EACJ,MAAM,EACN,MAAM,EACN,KAAK,GACN,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,0BAA0B,EAE1B,kBAAkB,EAElB,iCAAiC,GAClC,MAAM,uBAAuB,CAAC;AAG/B,IAAI,UAAU,GAAG,CAAC,CAAC;AAOnB,MAAM,OAAO,QAAQ;;QA8EX,sBAAiB,GAAe,IAAI,CAAC;QAMrC,aAAQ,GAAG,YAAY,UAAU,EAAE,EAAE,CAAC;QACtC,oBAAe,GAAa,EAAE,CAAC;0CA7EF,KAAK;oBAKK,KAAK;;;6BAiBb,MAAM;yBAKP,cAAc;mCAKA,OAAO;;;;mCA+B7B,KAAK;;IAgBnC,iBAAiB;QACf,kBAAkB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAGD,cAAc,CAAC,KAA0B;QACvC,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACjC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;QAEzB,IAAI,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;YAChD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,eAAe,oDAAI,CAAC;QACzB,kBAAkB,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACtC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,qBAAqB;QACnB,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAED,SAAS;QACP,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAED,OAAO;QACL,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,OAAO;QACL,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED,KAAK;QACH,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED,WAAW;QACT,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1D,OAAO,CAAC,gBAAgB,CAAC;IAC3B,CAAC;IAED,WAAW;QACT,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzD,OAAO,CAAC,gBAAgB,CAAC;IAC3B,CAAC;IAED,IAAI,aAAa;QACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC3E,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC3D,CAAC;IAIO,oBAAoB;;QAC1B,MAAA,IAAI,CAAC,eAAe,oDAAI,CAAC;QAEzB,MAAM,gBAAgB,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC;gBACtB,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YACnC,CAAC;YAED,kBAAkB,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACjD,CAAC,CAAC;QAEF,IAAI,CAAC,eAAe,GAAG,0BAA0B,CAC/C,IAAI,CAAC,cAAc,EACnB,OAAO,EACP,CAAC,KAAmB,EAAE,EAAE;YACtB,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;gBAC5B,gBAAgB,EAAE,CAAC;YACrB,CAAC;QACH,CAAC,CACF,CAAC;QAEF,MAAA,IAAI,CAAC,cAAc,0CAAE,YAAY,CAC/B,0BAA0B,EAC1B,IAAI,CAAC,QAAQ,CACd,CAAC;IACJ,CAAC;IAED,gBAAgB;IAEhB,KAAK,CAAC,eAAe;;QACnB,MAAA,IAAI,CAAC,cAAc,0CAAE,aAAa,CAChC,IAAI,WAAW,CAAC,oBAAoB,EAAE;YACpC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,KAAK;YACf,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE,IAAI,CAAC,QAAQ;SACtB,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,KAAK,CAAC,gBAAgB,CAC5B,OAAoD;QAEpD,IAAI,CAAC,cAAc,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QACzD,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,cAAc,CAC1B,OAAoD;QAEpD,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAE3C,OAAO,IAAI,CAAC,qBAAqB,CAAC,EAAE,CAAC,CAAC;IACxC,CAAC;IAEO,KAAK,CAAC,qBAAqB,CAAC,OAAgB;QAClD,IAAI,iCAAiC,CAAC,OAAO,CAAC,EAAE,CAAC;YAC/C,MAAM,YAAY,GAAG,MAAM,OAAO,CAAC,sBAAsB,EAAE,CAAC;YAC5D,YAAY,CAAC,SAAS,GAAG,IAAI,CAAC;YAC9B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,+BAA+B,CAAC;QAClE,CAAC;QAED,IAAI,OAAO,CAAC,OAAO,KAAK,kBAAkB,EAAE,CAAC;YAC1C,OAAqC,CAAC,SAAS,GAAG,IAAI,CAAC;YACxD,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,+BAA+B,CAAC;QAClE,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAEO,WAAW,CACjB,OAAoD;QAEpD,IAAI,OAAO,YAAY,OAAO,EAAE,CAAC;YAC/B,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;YAChC,OAAO,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAClC,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,OAAO,EAAE,CAAC;QAC/B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,IAAI,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACrC,OAAO,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnD,CAAC;YAED,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;gBACzC,IAAI,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACrC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;oBAC1C,QAAQ,CAAC,UAAU,EAAE,CAAC;gBACxB,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;gBAC9B,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAGD,KAAK,CAAC,WAAW,CAAC,OAAgB;QAChC,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM;gBACrC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC;gBAClC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;YAEvC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBAC7B,sCAAsC;YACxC,CAAC;QACH,CAAC;IACH,CAAC;IAGD,cAAc,CAAC,eAA4D;QACzE,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IACzC,CAAC;IAEO,eAAe;;QACrB,IAAI,CAAC,iCAAiC,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC;YAC3D,+DAA+D;YAC/D,iCAAiC;YACjC,OAAO,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,kBAAkB,CAAC,CAAA,CAAC;QAC3D,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,KAAK,CAAC,qBAAqB;QACjC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QACD,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAEzC,IAAI,cAAc,GAAmC;YACnD,QAAQ,EAAE,IAAI,CAAC,mBAAmB;YAClC,UAAU,EAAE,EAAE;SACf,CAAC;QAEF,IAAI,CAAC,IAAI,CAAC,0BAA0B,EAAE,CAAC;YACrC,cAAc,CAAC,UAAU,CAAC,IAAI,CAC5B,IAAI,CAAC,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAC,CAC/C,CAAC;QACJ,CAAC;QAED,cAAc,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;QAEtE,cAAc,CAAC,UAAU,GAAG;YAC1B,GAAG,cAAc,CAAC,UAAU;YAC5B,MAAM,EAAE;YACR,KAAK,EAAE;SACR,CAAC;QAEF,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QACtD,CAAC;QAED,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAChC,CAAC;QAED,IAAI,CAAC,iBAAiB,GAAG,UAAU,CACjC,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,WAAW,EAChB,KAAK,IAAI,EAAE;YACT,MAAM,eAAe,GAAG,MAAM,eAAe,CAC3C,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,WAAW,EAChB,cAAc,CACf,CAAC;YAEF,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;gBACpC,GAAG,EAAE,GAAG;gBACR,IAAI,EAAE,GAAG;gBACT,SAAS,EAAE,aAAa,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,KAAK,CACnE,eAAe,CAAC,CAAC,CAClB,KAAK;aACP,CAAC,CAAC;YACH,IAAI,IAAI,CAAC,sBAAsB,EAAE,CAAC;gBAChC,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,sBAAsB,CAAC;oBACvD,WAAW,EAAE,IAAI,CAAC,WAAW;oBAC7B,UAAU,EAAE,IAAI,CAAC,cAA6B;iBAC/C,CAAC,CAAC;gBAEH,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;YACxD,CAAC;QACH,CAAC,EACD;YACE,cAAc,EAAE,IAAI;YACpB,cAAc,EAAE,IAAI;YACpB,aAAa,EAAE,IAAI;SACpB,CACF,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAED,KAAK,CAAC,kBAAkB;QACtB,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACnC,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM;YACrC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC;YAClC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IACzC,CAAC;IAEO,gBAAgB,CAAC,OAAoB;QAC3C,MAAM,OAAO,GAAG,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;QAEnE,OAAO,OAAO,CAAC;IACjB,CAAC;IAEO,eAAe,CAAC,KAAmB;QACzC,IAAI,kBAAkB,CAAC,mBAAmB,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,EAAE,CAAC;YACjE,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAqB,CAAC,EAAE,CAAC;gBACvD,OAAO;YACT,CAAC;QACH,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,EAAE,CAAC;YACrE,kBAAkB,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAChD,CAAC;QAED,kBAAkB,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACjD,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,yEACe,IAAI,CAAC,QAAQ,EAC/B,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,EACtC,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI;aACf,EACD,KAAK,EAAE;gBACL,MAAM,EAAE,GAAG;gBACX,QAAQ,EAAE,KAAK;gBACf,QAAQ,EAAE,IAAI,CAAC,mBAAmB;aACnC,EACD,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,CAAC,KAAmB,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;YAE7D,4DAAK,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;gBAChC,IAAI,CAAC,MAAM,IAAI,WAAK,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,MAAM,CAAO;gBAEhE,8DAAa,CACT,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 autoUpdate,\n computePosition,\n ComputePositionConfig,\n flip,\n inline,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { ComponentInterface } from '@stencil/core/internal';\nimport {\n addDisposableEventListener,\n CloseBehavior,\n dropdownController,\n DropdownInterface,\n hasDropdownItemWrapperImplemented,\n} from './dropdown-controller';\nimport { AlignedPlacement } from './placement';\n\nlet sequenceId = 0;\n\n@Component({\n tag: 'ix-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true,\n})\nexport class Dropdown implements ComponentInterface, DropdownInterface {\n @Element() hostElement!: HTMLIxDropdownElement;\n\n /\n Suppress the automatic placement of the dropdown.\n \n @since 2.0.0\n /\n @Prop() suppressAutomaticPlacement = false;\n\n /\n Show dropdown\n /\n @Prop({ mutable: true, reflect: true }) show = false;\n\n /\n Define an element that triggers the dropdown.\n * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n /\n @Prop() trigger: string \| HTMLElement \| Promise<HTMLElement>;\n\n /\n Define an anchor element\n /\n @Prop() anchor: string \| HTMLElement;\n\n /\n Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n * If the dropdown is a child of another one, it will be closed with the parent, regardless of its own close behavior.\n /\n @Prop() closeBehavior: CloseBehavior = 'both';\n\n /\n Placement of the dropdown\n /\n @Prop() placement: AlignedPlacement = 'bottom-start';\n\n /\n Position strategy\n /\n @Prop() positioningStrategy: 'absolute' \| 'fixed' = 'fixed';\n\n /\n An optional header shown at the top of the dropdown\n /\n @Prop() header?: string;\n\n /\n Move dropdown along main axis of alignment\n \n @internal\n /\n @Prop() offset: {\n mainAxis?: number;\n crossAxis?: number;\n alignmentAxis?: number;\n };\n\n /\n @internal\n /\n @Prop() overwriteDropdownStyle: (delegate: {\n dropdownRef: HTMLElement;\n triggerRef?: HTMLElement;\n }) => Promise<Partial<CSSStyleDeclaration>>;\n\n /\n @internal\n * If initialisation of this dropdown is expected to be defered submenu discovery will have to be re-run globally by the controller.\n * This property indicates the need for that to the controller.\n /\n @Prop() discoverAllSubmenus = false;\n\n /\n Fire event after visibility of dropdown has changed\n /\n @Event() showChanged: EventEmitter<boolean>;\n\n private autoUpdateCleanup: () => void = null;\n\n private triggerElement?: Element;\n private anchorElement?: Element;\n\n private dropdownRef: HTMLElement;\n private localUId = `dropdown-${sequenceId++}`;\n private assignedSubmenu: string[] = [];\n\n connectedCallback(): void {\n dropdownController.connected(this);\n }\n\n @Listen('ix-assign-sub-menu')\n cacheSubmenuId(event: CustomEvent<string>) {\n event.stopImmediatePropagation();\n event.preventDefault();\n\n const { detail } = event;\n\n if (this.assignedSubmenu.indexOf(detail) === -1) {\n this.assignedSubmenu.push(detail);\n }\n }\n\n disconnectedCallback() {\n this.disposeListener?.();\n dropdownController.disconnected(this);\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n }\n }\n\n getAssignedSubmenuIds() {\n return this.assignedSubmenu;\n }\n\n isPresent() {\n return this.show;\n }\n\n present() {\n this.show = true;\n }\n\n dismiss() {\n this.show = false;\n }\n\n getId() {\n return this.localUId;\n }\n\n willDismiss() {\n const { defaultPrevented } = this.showChanged.emit(false);\n return !defaultPrevented;\n }\n\n willPresent() {\n const { defaultPrevented } = this.showChanged.emit(true);\n return !defaultPrevented;\n }\n\n get dropdownItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n }\n\n get slotElement() {\n return this.hostElement.shadowRoot.querySelector('slot');\n }\n\n private disposeListener?: Function;\n\n private addEventListenersFor() {\n this.disposeListener?.();\n\n const toggleController = () => {\n if (!this.isPresent()) {\n dropdownController.present(this);\n } else {\n dropdownController.dismiss(this);\n }\n\n dropdownController.dismissOthers(this.getId());\n };\n\n this.disposeListener = addDisposableEventListener(\n this.triggerElement,\n 'click',\n (event: PointerEvent) => {\n if (!event.defaultPrevented) {\n toggleController();\n }\n }\n );\n\n this.triggerElement?.setAttribute(\n 'data-ix-dropdown-trigger',\n this.localUId\n );\n }\n\n /* @internal /\n @Method()\n async discoverSubmenu() {\n this.triggerElement?.dispatchEvent(\n new CustomEvent('ix-assign-sub-menu', {\n bubbles: true,\n composed: false,\n cancelable: true,\n detail: this.localUId,\n })\n );\n }\n\n private async registerListener(\n element: string \| HTMLElement \| Promise<HTMLElement>\n ) {\n this.triggerElement = await this.resolveElement(element);\n if (this.triggerElement) {\n this.addEventListenersFor();\n this.discoverSubmenu();\n }\n }\n\n private async resolveElement(\n element: string \| HTMLElement \| Promise<HTMLElement>\n ) {\n const el = await this.findElement(element);\n\n return this.checkForSubmenuAnchor(el);\n }\n\n private async checkForSubmenuAnchor(element: Element) {\n if (hasDropdownItemWrapperImplemented(element)) {\n const dropdownItem = await element.getDropdownItemElement();\n dropdownItem.isSubMenu = true;\n this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n }\n\n if (element.tagName === 'IX-DROPDOWN-ITEM') {\n (element as HTMLIxDropdownItemElement).isSubMenu = true;\n this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n }\n\n return element;\n }\n\n private findElement(\n element: string \| HTMLElement \| Promise<HTMLElement>\n ): Promise<Element> {\n if (element instanceof Promise) {\n return element;\n }\n\n if (typeof element === 'object') {\n return Promise.resolve(element);\n }\n\n const selector = `#${element}`;\n return new Promise((resolve) => {\n if (document.querySelector(selector)) {\n return resolve(document.querySelector(selector));\n }\n\n const observer = new MutationObserver(() => {\n if (document.querySelector(selector)) {\n resolve(document.querySelector(selector));\n observer.disconnect();\n }\n });\n\n observer.observe(document.body, {\n childList: true,\n subtree: true,\n });\n });\n }\n\n @Watch('show')\n async changedShow(newShow: boolean) {\n if (newShow) {\n this.anchorElement = await (this.anchor\n ? this.resolveElement(this.anchor)\n : this.resolveElement(this.trigger));\n\n if (this.anchorElement) {\n this.applyDropdownPosition();\n // await this.checkForSubmenuAnchor();\n }\n }\n }\n\n @Watch('trigger')\n changedTrigger(newTriggerValue: string \| HTMLElement \| Promise<HTMLElement>) {\n this.registerListener(newTriggerValue);\n }\n\n private isAnchorSubmenu(): boolean {\n if (!hasDropdownItemWrapperImplemented(this.anchorElement)) {\n // Is no official dropdown-item, but check if any dropdown-item\n // is placed somewhere up the DOM\n return !!this.anchorElement?.closest('ix-dropdown-item');\n }\n\n return true;\n }\n\n private async applyDropdownPosition() {\n if (!this.anchorElement) {\n return;\n }\n if (!this.dropdownRef) {\n return;\n }\n const isSubmenu = this.isAnchorSubmenu();\n\n let positionConfig: Partial<ComputePositionConfig> = {\n strategy: this.positioningStrategy,\n middleware: [],\n };\n\n if (!this.suppressAutomaticPlacement) {\n positionConfig.middleware.push(\n flip({ fallbackStrategy: 'initialPlacement' })\n );\n }\n\n positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n positionConfig.middleware = [\n ...positionConfig.middleware,\n inline(),\n shift(),\n ];\n\n if (this.offset) {\n positionConfig.middleware.push(offset(this.offset));\n }\n\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n this.autoUpdateCleanup = null;\n }\n\n this.autoUpdateCleanup = autoUpdate(\n this.anchorElement,\n this.dropdownRef,\n async () => {\n const computeResponse = await computePosition(\n this.anchorElement,\n this.dropdownRef,\n positionConfig\n );\n\n Object.assign(this.dropdownRef.style, {\n top: '0',\n left: '0',\n transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n computeResponse.y\n )}px)`,\n });\n if (this.overwriteDropdownStyle) {\n const overwriteStyle = await this.overwriteDropdownStyle({\n dropdownRef: this.dropdownRef,\n triggerRef: this.triggerElement as HTMLElement,\n });\n\n Object.assign(this.dropdownRef.style, overwriteStyle);\n }\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n }\n );\n }\n\n async componentDidLoad() {\n this.changedTrigger(this.trigger);\n }\n\n async componentDidRender() {\n await this.applyDropdownPosition();\n this.anchorElement = await (this.anchor\n ? this.resolveElement(this.anchor)\n : this.resolveElement(this.trigger));\n }\n\n private isTriggerElement(element: HTMLElement) {\n const trigger = !!element.hasAttribute('data-ix-dropdown-trigger');\n\n return trigger;\n }\n\n private onDropdownClick(event: PointerEvent) {\n if (dropdownController.pathIncludesTrigger(event.composedPath())) {\n event.preventDefault();\n\n if (this.isTriggerElement(event.target as HTMLElement)) {\n return;\n }\n }\n\n if (this.closeBehavior === 'inside' \|\| this.closeBehavior === 'both') {\n dropdownController.dismissAll([this.getId()]);\n }\n\n dropdownController.dismissOthers(this.getId());\n }\n\n /\n Update position of dropdown\n */\n @Method()\n async updatePosition() {\n this.applyDropdownPosition();\n }\n\n render() {\n return (\n <Host\n data-ix-dropdown={this.localUId}\n ref={(ref) => (this.dropdownRef = ref)}\n class={{\n 'dropdown-menu': true,\n show: this.show,\n overflow: true,\n }}\n style={{\n margin: '0',\n minWidth: '0px',\n position: this.positioningStrategy,\n }}\n role=\"list\"\n onClick={(event: PointerEvent) => this.onDropdownClick(event)}\n >\n <div style={{ display: 'contents' }}>\n {this.header && <div class=\"dropdown-header\">{this.header}</div>}\n\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.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 autoUpdate,\n computePosition,\n ComputePositionConfig,\n flip,\n inline,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { ComponentInterface } from '@stencil/core/internal';\nimport {\n addDisposableEventListener,\n CloseBehavior,\n dropdownController,\n DropdownInterface,\n hasDropdownItemWrapperImplemented,\n} from './dropdown-controller';\nimport { AlignedPlacement } from './placement';\n\nlet sequenceId = 0;\n\n@Component({\n tag: 'ix-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true,\n})\nexport class Dropdown implements ComponentInterface, DropdownInterface {\n @Element() hostElement!: HTMLIxDropdownElement;\n\n /\n Suppress the automatic placement of the dropdown.\n \n @since 2.0.0\n /\n @Prop() suppressAutomaticPlacement = false;\n\n /\n Show dropdown\n /\n @Prop({ mutable: true, reflect: true }) show = false;\n\n /\n Define an element that triggers the dropdown.\n * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n /\n @Prop() trigger: string \| HTMLElement \| Promise<HTMLElement>;\n\n /\n Define an anchor element\n /\n @Prop() anchor: string \| HTMLElement;\n\n /\n Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n * If the dropdown is a child of another one, it will be closed with the parent, regardless of its own close behavior.\n /\n @Prop() closeBehavior: CloseBehavior = 'both';\n\n /\n Placement of the dropdown\n /\n @Prop() placement: AlignedPlacement = 'bottom-start';\n\n /\n Position strategy\n /\n @Prop() positioningStrategy: 'absolute' \| 'fixed' = 'fixed';\n\n /\n An optional header shown at the top of the dropdown\n /\n @Prop() header?: string;\n\n /\n Move dropdown along main axis of alignment\n \n @internal\n /\n @Prop() offset: {\n mainAxis?: number;\n crossAxis?: number;\n alignmentAxis?: number;\n };\n\n /\n @internal\n /\n @Prop() overwriteDropdownStyle: (delegate: {\n dropdownRef: HTMLElement;\n triggerRef?: HTMLElement;\n }) => Promise<Partial<CSSStyleDeclaration>>;\n\n /\n @internal\n * If initialisation of this dropdown is expected to be defered submenu discovery will have to be re-run globally by the controller.\n * This property indicates the need for that to the controller.\n /\n @Prop() discoverAllSubmenus = false;\n\n /\n Fire event after visibility of dropdown has changed\n /\n @Event() showChanged: EventEmitter<boolean>;\n\n private autoUpdateCleanup: () => void = null;\n\n private triggerElement?: Element;\n private anchorElement?: Element;\n\n private dropdownRef: HTMLElement;\n private localUId = `dropdown-${sequenceId++}`;\n private assignedSubmenu: string[] = [];\n\n connectedCallback(): void {\n dropdownController.connected(this);\n }\n\n @Listen('ix-assign-sub-menu')\n cacheSubmenuId(event: CustomEvent<string>) {\n event.stopImmediatePropagation();\n event.preventDefault();\n\n const { detail } = event;\n\n if (this.assignedSubmenu.indexOf(detail) === -1) {\n this.assignedSubmenu.push(detail);\n }\n }\n\n disconnectedCallback() {\n this.disposeListener?.();\n dropdownController.disconnected(this);\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n }\n }\n\n getAssignedSubmenuIds() {\n return this.assignedSubmenu;\n }\n\n isPresent() {\n return this.show;\n }\n\n present() {\n this.show = true;\n }\n\n dismiss() {\n this.show = false;\n }\n\n getId() {\n return this.localUId;\n }\n\n willDismiss() {\n const { defaultPrevented } = this.showChanged.emit(false);\n return !defaultPrevented;\n }\n\n willPresent() {\n const { defaultPrevented } = this.showChanged.emit(true);\n return !defaultPrevented;\n }\n\n get dropdownItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n }\n\n get slotElement() {\n return this.hostElement.shadowRoot.querySelector('slot');\n }\n\n private disposeListener?: Function;\n\n private addEventListenersFor() {\n this.disposeListener?.();\n\n const toggleController = () => {\n if (!this.isPresent()) {\n dropdownController.present(this);\n } else {\n dropdownController.dismiss(this);\n }\n\n dropdownController.dismissOthers(this.getId());\n };\n\n this.disposeListener = addDisposableEventListener(\n this.triggerElement,\n 'click',\n (event: PointerEvent) => {\n if (!event.defaultPrevented) {\n toggleController();\n }\n }\n );\n\n this.triggerElement?.setAttribute(\n 'data-ix-dropdown-trigger',\n this.localUId\n );\n }\n\n /* @internal /\n @Method()\n async discoverSubmenu() {\n this.triggerElement?.dispatchEvent(\n new CustomEvent('ix-assign-sub-menu', {\n bubbles: true,\n composed: false,\n cancelable: true,\n detail: this.localUId,\n })\n );\n }\n\n private async registerListener(\n element: string \| HTMLElement \| Promise<HTMLElement>\n ) {\n this.triggerElement = await this.resolveElement(element);\n if (this.triggerElement) {\n this.addEventListenersFor();\n this.discoverSubmenu();\n }\n }\n\n private async resolveElement(\n element: string \| HTMLElement \| Promise<HTMLElement>\n ) {\n const el = await this.findElement(element);\n\n return this.checkForSubmenuAnchor(el);\n }\n\n private async checkForSubmenuAnchor(element: Element) {\n if (!element) {\n return null;\n }\n\n if (hasDropdownItemWrapperImplemented(element)) {\n const dropdownItem = await element.getDropdownItemElement();\n dropdownItem.isSubMenu = true;\n this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n }\n\n if (element.tagName === 'IX-DROPDOWN-ITEM') {\n (element as HTMLIxDropdownItemElement).isSubMenu = true;\n this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n }\n\n return element;\n }\n\n private findElement(\n element: string \| HTMLElement \| Promise<HTMLElement>\n ): Promise<Element> {\n if (element instanceof Promise) {\n return element;\n }\n\n if (typeof element === 'object') {\n return Promise.resolve(element);\n }\n\n const selector = `#${element}`;\n return new Promise((resolve) => {\n if (document.querySelector(selector)) {\n return resolve(document.querySelector(selector));\n }\n\n const observer = new MutationObserver(() => {\n if (document.querySelector(selector)) {\n resolve(document.querySelector(selector));\n observer.disconnect();\n }\n });\n\n observer.observe(document.body, {\n childList: true,\n subtree: true,\n });\n });\n }\n\n @Watch('show')\n async changedShow(newShow: boolean) {\n if (newShow) {\n this.anchorElement = await (this.anchor\n ? this.resolveElement(this.anchor)\n : this.resolveElement(this.trigger));\n\n if (this.anchorElement) {\n this.applyDropdownPosition();\n }\n }\n }\n\n @Watch('trigger')\n changedTrigger(newTriggerValue: string \| HTMLElement \| Promise<HTMLElement>) {\n this.registerListener(newTriggerValue);\n }\n\n private isAnchorSubmenu(): boolean {\n if (!hasDropdownItemWrapperImplemented(this.anchorElement)) {\n // Is no official dropdown-item, but check if any dropdown-item\n // is placed somewhere up the DOM\n return !!this.anchorElement?.closest('ix-dropdown-item');\n }\n\n return true;\n }\n\n private async applyDropdownPosition() {\n if (!this.anchorElement) {\n return;\n }\n if (!this.dropdownRef) {\n return;\n }\n const isSubmenu = this.isAnchorSubmenu();\n\n let positionConfig: Partial<ComputePositionConfig> = {\n strategy: this.positioningStrategy,\n middleware: [],\n };\n\n if (!this.suppressAutomaticPlacement) {\n positionConfig.middleware.push(\n flip({ fallbackStrategy: 'initialPlacement' })\n );\n }\n\n positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n positionConfig.middleware = [\n ...positionConfig.middleware,\n inline(),\n shift(),\n ];\n\n if (this.offset) {\n positionConfig.middleware.push(offset(this.offset));\n }\n\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n this.autoUpdateCleanup = null;\n }\n\n this.autoUpdateCleanup = autoUpdate(\n this.anchorElement,\n this.dropdownRef,\n async () => {\n const computeResponse = await computePosition(\n this.anchorElement,\n this.dropdownRef,\n positionConfig\n );\n\n Object.assign(this.dropdownRef.style, {\n top: '0',\n left: '0',\n transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n computeResponse.y\n )}px)`,\n });\n if (this.overwriteDropdownStyle) {\n const overwriteStyle = await this.overwriteDropdownStyle({\n dropdownRef: this.dropdownRef,\n triggerRef: this.triggerElement as HTMLElement,\n });\n\n Object.assign(this.dropdownRef.style, overwriteStyle);\n }\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n }\n );\n }\n\n async componentDidLoad() {\n this.changedTrigger(this.trigger);\n }\n\n async componentDidRender() {\n await this.applyDropdownPosition();\n this.anchorElement = await (this.anchor\n ? this.resolveElement(this.anchor)\n : this.resolveElement(this.trigger));\n }\n\n private isTriggerElement(element: HTMLElement) {\n const trigger = !!element.hasAttribute('data-ix-dropdown-trigger');\n\n return trigger;\n }\n\n private onDropdownClick(event: PointerEvent) {\n if (dropdownController.pathIncludesTrigger(event.composedPath())) {\n event.preventDefault();\n\n if (this.isTriggerElement(event.target as HTMLElement)) {\n return;\n }\n }\n\n if (this.closeBehavior === 'inside' \|\| this.closeBehavior === 'both') {\n dropdownController.dismissAll([this.getId()]);\n }\n\n dropdownController.dismissOthers(this.getId());\n }\n\n /\n Update position of dropdown\n */\n @Method()\n async updatePosition() {\n this.applyDropdownPosition();\n }\n\n render() {\n return (\n <Host\n data-ix-dropdown={this.localUId}\n ref={(ref) => (this.dropdownRef = ref)}\n class={{\n 'dropdown-menu': true,\n show: this.show,\n overflow: true,\n }}\n style={{\n margin: '0',\n minWidth: '0px',\n position: this.positioningStrategy,\n }}\n role=\"list\"\n onClick={(event: PointerEvent) => this.onDropdownClick(event)}\n >\n <div style={{ display: 'contents' }}>\n {this.header && <div class=\"dropdown-header\">{this.header}</div>}\n\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/menu-avatar-item/menu-avatar-item.css CHANGED Viewed

@@ -22,11 +22,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-:host { /* width */
+:host {
+  /* width */
   /* Track */
   /* Handle */
   /* Handle on hover */
   display: block;
+  color: var(--theme-color-std-text);
 }
 :host *,
 :host *::after,

package/dist/collection/components/modal/modal.css CHANGED Viewed

@@ -19,6 +19,7 @@
 }
 :host dialog {
   margin: 0;
+  padding: 1rem;
   left: 50%;
 }
 :host dialog::backdrop {
@@ -57,8 +58,8 @@
   width: 95%;
 }
 :host .modal-size-full-screen {
-  left: 0px !important;
-  top: 0px !important;
+  left: 0 !important;
+  top: 0 !important;
   transform: none !important;
   width: calc(100% - 28px);
   min-width: calc(100% - 28px);
@@ -72,8 +73,8 @@
   position: fixed;
   width: 100vw;
   height: 100vh;
-  top: 0px;
-  left: 0px;
+  top: 0;
+  left: 0;
   pointer-events: none;
 }
 :host ::slotted(ix-modal-footer) {

package/dist/collection/components/modal-content/modal-content.css CHANGED Viewed

@@ -30,7 +30,7 @@
   display: block;
   position: relative;
   overflow: auto;
-  padding: 0.125rem 0.625rem 0.125rem 0.625rem;
+  padding: 0.25rem 0.75rem;
 }
 :host *,
 :host *::after,

package/dist/collection/components/modal-footer/modal-footer.css CHANGED Viewed

@@ -28,8 +28,7 @@
   /* Handle */
   /* Handle on hover */
   display: flex;
-  padding: 0.625rem;
-  padding-top: 1.5rem;
+  padding: 0.5rem;
   justify-content: flex-end;
   align-items: center;
   gap: 0.5rem;

package/dist/collection/components/modal-header/modal-header.css CHANGED Viewed

@@ -28,7 +28,7 @@
   /* Handle */
   /* Handle on hover */
   display: flex;
-  padding: 2px 16px 16px 10px;
+  padding: 0.5rem;
   align-items: center;
   align-self: stretch;
 }
@@ -63,7 +63,7 @@
 }
 :host .modal-close {
   margin-left: auto;
-  margin-right: -20px;
+  margin-right: -1rem;
 }
 :host .modal-icon {
   margin-right: 1rem;

package/dist/collection/tests/blind/blind.e2e.js CHANGED Viewed

@@ -32,6 +32,10 @@ regressionTest.describe('blind', () => {
         await page.waitForSelector('ix-dropdown.show');
         expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
     });
+    regressionTest('custom-header', async ({ page }) => {
+        await page.goto('blind/custom-header');
+        expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    });
     test('should no hover on slot', async ({ mount, page }) => {
         await mount(`
     <ix-blind label="Example label" style="width: 25rem">

package/dist/collection/tests/blind/blind.e2e.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"blind.e2e.js","sourceRoot":"","sources":["../../../src/tests/blind/blind.e2e.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnD,cAAc,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IACpC,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACzC,MAAM,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC/B,MAAM,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QACvC,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAChC,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC7C,MAAM,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC/B,MAAM,IAAI;aACP,OAAO,CAAC,eAAe,CAAC;aACxB,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAE,CAAiB,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC1E,MAAM,IAAI,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC;QACnD,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAC/B,MAAM,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClD,MAAM,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;QACxC,MAAM,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,KAAK,EAAE,CAAC;QAC5C,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAC/B,MAAM,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QAC/C,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,yBAAyB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;QACxD,MAAM,KAAK,CAAC;;;;;;;;;;KAUX,CAAC,CAAC;QACH,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAC9C,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAEnD,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAC7C,MAAM,WAAW,CAAC,KAAK,EAAE,CAAC;QAE1B,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAChD,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 { expect } from '@playwright/test';\nimport { regressionTest, test } from '@utils/test';\n\nregressionTest.describe('blind', () => {\n regressionTest('basic', async ({ page }) => {\n await page.goto('blind/basic');\n await page.waitForSelector('ix-blind');\n await page.waitForTimeout(1000);\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n\n regressionTest('collapsed', async ({ page }) => {\n await page.goto('blind/basic');\n await page\n .locator('.blind-header')\n .evaluateAll((list) => list.forEach((e) => (e as HTMLElement).click()));\n await page.waitForSelector('.blind-header.closed');\n await page.waitForTimeout(800);\n await page.waitForSelector('ix-blind');\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n\n regressionTest('header-actions', async ({ page }) => {\n await page.goto('blind/header-actions');\n await page.locator('#context-menu').click();\n await page.waitForTimeout(800);\n await page.waitForSelector('ix-dropdown.show');\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n\n test('should no hover on slot', async ({ mount, page }) => {\n await mount(`\n <ix-blind label=\"Example label\" style=\"width: 25rem\">\n <ix-button\n ghost\n data-testid=\"slot\"\n slot=\"header-actions\"\n icon=\"context-menu\"\n ></ix-button>\n Some content\n </ix-blind>\n `);\n const blindElement = page.locator('ix-blind');\n await expect(blindElement).toHaveClass(/hydrated/);\n\n const slotElement = page.getByTestId('slot');\n await slotElement.hover();\n\n await expect(blindElement).toHaveScreenshot();\n });\n});\n"]}
1	+ {"version":3,"file":"blind.e2e.js","sourceRoot":"","sources":["../../../src/tests/blind/blind.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { expect } from '@playwright/test';\nimport { regressionTest, test } from '@utils/test';\n\nregressionTest.describe('blind', () => {\n regressionTest('basic', async ({ page }) => {\n await page.goto('blind/basic');\n await page.waitForSelector('ix-blind');\n await page.waitForTimeout(1000);\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n\n regressionTest('collapsed', async ({ page }) => {\n await page.goto('blind/basic');\n await page\n .locator('.blind-header')\n .evaluateAll((list) => list.forEach((e) => (e as HTMLElement).click()));\n await page.waitForSelector('.blind-header.closed');\n await page.waitForTimeout(800);\n await page.waitForSelector('ix-blind');\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n\n regressionTest('header-actions', async ({ page }) => {\n await page.goto('blind/header-actions');\n await page.locator('#context-menu').click();\n await page.waitForTimeout(800);\n await page.waitForSelector('ix-dropdown.show');\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n\n regressionTest('custom-header', async ({ page }) => {\n await page.goto('blind/custom-header');\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n\n test('should no hover on slot', async ({ mount, page }) => {\n await mount(`\n <ix-blind label=\"Example label\" style=\"width: 25rem\">\n <ix-button\n ghost\n data-testid=\"slot\"\n slot=\"header-actions\"\n icon=\"context-menu\"\n ></ix-button>\n Some content\n </ix-blind>\n `);\n const blindElement = page.locator('ix-blind');\n await expect(blindElement).toHaveClass(/hydrated/);\n\n const slotElement = page.getByTestId('slot');\n await slotElement.hover();\n\n await expect(blindElement).toHaveScreenshot();\n });\n});\n"]}

package/dist/esm/ix-avatar_2.entry.js CHANGED Viewed

@@ -51,7 +51,7 @@ const Avatar = class {
 };
 Avatar.style = IxAvatarStyle0;
-const menuAvatarItemCss = ":host{display:block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";
+const menuAvatarItemCss = ":host{display:block;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";
 const IxMenuAvatarItemStyle0 = menuAvatarItemCss;
 const MenuAvatarItem = class {

package/dist/esm/ix-avatar_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-avatar.ix-menu-avatar-item.entry.js","mappings":"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","names":[],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx","src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","src/components/menu-avatar-item/menu-avatar-item.tsx"],"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\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import './../button/button-mixin';\n\n:host {\n display: flex;\n position: relative;\n width: fit-content;\n\n .avatar {\n display: flex;\n align-items: center;\n\n > .avatar-image {\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n }\n\n > .avatar-initials {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n background-color: var(--theme-color-component-3);\n color: var(--theme-color-std-text);\n }\n\n #avatar-path-background {\n fill: var(--theme-avatar--background);\n }\n\n #avatar-path-person {\n fill: var(--theme-color-4);\n }\n }\n}\n\n:host {\n .user-info {\n display: flex;\n flex-direction: row;\n position: relative;\n height: 2.5rem;\n padding: 1rem;\n width: 12.75rem;\n min-width: 12.75rem;\n max-width: 12.75rem;\n\n gap: 1rem;\n\n .avatar {\n width: 2rem;\n pointer-events: none;\n }\n\n .user {\n display: flex;\n position: relative;\n flex-direction: column;\n justify-content: center;\n max-width: 10rem;\n width: 100%;\n overflow: hidden;\n }\n\n .username {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .extra {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n}\n\n:host(.avatar-button) {\n button {\n @include btn-base;\n padding: 0px;\n\n border-radius: 100px !important;\n }\n\n @include btn-base-variant('invisible-primary', false);\n\n li {\n transform: scale(0.8);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Fragment,\n h,\n Host,\n Prop,\n readTask,\n State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n const { initials } = props;\n\n if (initials) {\n return <div class={'avatar-initials'}>{initials}</div>;\n }\n\n return (\n <svg\n class={'avatar-image'}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n id=\"avatar-path-background\"\n d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n 16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n />\n <path\n id=\"avatar-path-person\"\n d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n 6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n 9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n 6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n />\n </g>\n </svg>\n );\n}\n\nfunction AvatarImage(props: { image: string; initials: string }) {\n return (\n <li class=\"avatar\">\n {props.image ? (\n <img src={props.image} class=\"avatar-image\"></img>\n ) : (\n <DefaultAvatar initials={props.initials} />\n )}\n </li>\n );\n}\n\nfunction UserInfo(props: {\n image: string;\n initials: string;\n userName: string;\n extra: string;\n}) {\n return (\n <Fragment>\n <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n <AvatarImage image={props.image} initials={props.initials} />\n <div class=\"user\">\n <div class=\"username\">{props.userName}</div>\n {props.extra && (\n <ix-typography class=\"extra\" color={'soft'}>\n {props.extra}\n </ix-typography>\n )}\n </div>\n </div>\n </Fragment>\n );\n}\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-avatar',\n styleUrl: 'avatar.scss',\n shadow: true,\n})\nexport class Avatar {\n @Element() hostElement: HTMLIxAvatarElement;\n\n /\n Display an avatar image\n \n /\n @Prop() image: string;\n\n /*\n Display the initials of the user. Will be overwritten by image\n \n /\n @Prop() initials: string;\n\n /*\n If set an info card displaying the username will be placed inside the dropdown.\n * Note: Only working if avatar is part of the ix-application-header\n \n @since 2.1.0\n /\n @Prop() username: string;\n\n /\n Optional description text that will be displayed underneath the username.\n * Note: Only working if avatar is part of the ix-application-header\n \n @since 2.1.0\n /\n @Prop() extra: string;\n\n @State() isClosestApplicationHeader = false;\n @State() hasSlottedElements = false;\n\n private slotElement: HTMLSlotElement;\n\n componentWillLoad() {\n const closest = closestElement('ix-application-header', this.hostElement);\n this.isClosestApplicationHeader = closest !== null;\n }\n\n private slottedChanged() {\n this.hasSlottedElements = hasSlottedElements(this.slotElement);\n }\n\n private resolveAvatarTrigger() {\n return new Promise<HTMLElement>((resolve) => {\n readTask(() =>\n resolve(this.hostElement.shadowRoot.querySelector('button'))\n );\n });\n }\n\n render() {\n if (this.isClosestApplicationHeader) {\n return (\n <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n <BaseButton\n disabled={false}\n ghost={true}\n iconOval={false}\n icon={undefined}\n iconOnly={false}\n loading={false}\n outline={false}\n selected={false}\n type=\"button\"\n variant=\"primary\"\n >\n <AvatarImage image={this.image} initials={this.initials} />\n </BaseButton>\n <ix-dropdown\n trigger={this.resolveAvatarTrigger()}\n class=\"avatar-dropdown\"\n >\n {this.username && (\n <Fragment>\n <UserInfo\n extra={this.extra}\n image={this.image}\n initials={this.initials}\n userName={this.username}\n />\n {this.hasSlottedElements && <ix-divider></ix-divider>}\n </Fragment>\n )}\n <slot\n onSlotchange={() => this.slottedChanged()}\n ref={(ref: HTMLSlotElement) => (this.slotElement = ref)}\n ></slot>\n </ix-dropdown>\n </Host>\n );\n }\n\n return (\n <Host>\n <AvatarImage image={this.image} initials={this.initials} />\n </Host>\n );\n }\n}\n","/\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@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Method,\n Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n tag: 'ix-menu-avatar-item',\n styleUrl: 'menu-avatar-item.scss',\n shadow: true,\n})\nexport class MenuAvatarItem implements DropdownItemWrapper {\n /\n Avatar dropdown icon\n /\n @Prop() icon: string;\n\n /\n Avatar dropdown label\n /\n @Prop() label: string;\n\n /\n Avatar dropdown item clicked\n /\n @Event() itemClick: EventEmitter<MouseEvent>;\n\n @Element() hostElement: HTMLIxMenuAvatarItemElement;\n\n private dropdownItemRef = makeRef<HTMLIxDropdownItemElement>();\n\n /* @internal */\n @Method()\n async getDropdownItemElement() {\n return this.dropdownItemRef.waitForCurrent();\n }\n\n render() {\n return (\n <ix-dropdown-item\n ref={this.dropdownItemRef}\n icon={this.icon}\n label={this.label}\n onClick={(e) => this.itemClick.emit(e)}\n ></ix-dropdown-item>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-avatar.ix-menu-avatar-item.entry.js","mappings":"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","names":[],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx","src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","src/components/menu-avatar-item/menu-avatar-item.tsx"],"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\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import './../button/button-mixin';\n\n:host {\n display: flex;\n position: relative;\n width: fit-content;\n\n .avatar {\n display: flex;\n align-items: center;\n\n > .avatar-image {\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n }\n\n > .avatar-initials {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n background-color: var(--theme-color-component-3);\n color: var(--theme-color-std-text);\n }\n\n #avatar-path-background {\n fill: var(--theme-avatar--background);\n }\n\n #avatar-path-person {\n fill: var(--theme-color-4);\n }\n }\n}\n\n:host {\n .user-info {\n display: flex;\n flex-direction: row;\n position: relative;\n height: 2.5rem;\n padding: 1rem;\n width: 12.75rem;\n min-width: 12.75rem;\n max-width: 12.75rem;\n\n gap: 1rem;\n\n .avatar {\n width: 2rem;\n pointer-events: none;\n }\n\n .user {\n display: flex;\n position: relative;\n flex-direction: column;\n justify-content: center;\n max-width: 10rem;\n width: 100%;\n overflow: hidden;\n }\n\n .username {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .extra {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n}\n\n:host(.avatar-button) {\n button {\n @include btn-base;\n padding: 0px;\n\n border-radius: 100px !important;\n }\n\n @include btn-base-variant('invisible-primary', false);\n\n li {\n transform: scale(0.8);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Fragment,\n h,\n Host,\n Prop,\n readTask,\n State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n const { initials } = props;\n\n if (initials) {\n return <div class={'avatar-initials'}>{initials}</div>;\n }\n\n return (\n <svg\n class={'avatar-image'}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n id=\"avatar-path-background\"\n d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n 16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n />\n <path\n id=\"avatar-path-person\"\n d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n 6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n 9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n 6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n />\n </g>\n </svg>\n );\n}\n\nfunction AvatarImage(props: { image: string; initials: string }) {\n return (\n <li class=\"avatar\">\n {props.image ? (\n <img src={props.image} class=\"avatar-image\"></img>\n ) : (\n <DefaultAvatar initials={props.initials} />\n )}\n </li>\n );\n}\n\nfunction UserInfo(props: {\n image: string;\n initials: string;\n userName: string;\n extra: string;\n}) {\n return (\n <Fragment>\n <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n <AvatarImage image={props.image} initials={props.initials} />\n <div class=\"user\">\n <div class=\"username\">{props.userName}</div>\n {props.extra && (\n <ix-typography class=\"extra\" color={'soft'}>\n {props.extra}\n </ix-typography>\n )}\n </div>\n </div>\n </Fragment>\n );\n}\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-avatar',\n styleUrl: 'avatar.scss',\n shadow: true,\n})\nexport class Avatar {\n @Element() hostElement: HTMLIxAvatarElement;\n\n /\n Display an avatar image\n \n /\n @Prop() image: string;\n\n /*\n Display the initials of the user. Will be overwritten by image\n \n /\n @Prop() initials: string;\n\n /*\n If set an info card displaying the username will be placed inside the dropdown.\n * Note: Only working if avatar is part of the ix-application-header\n \n @since 2.1.0\n /\n @Prop() username: string;\n\n /\n Optional description text that will be displayed underneath the username.\n * Note: Only working if avatar is part of the ix-application-header\n \n @since 2.1.0\n /\n @Prop() extra: string;\n\n @State() isClosestApplicationHeader = false;\n @State() hasSlottedElements = false;\n\n private slotElement: HTMLSlotElement;\n\n componentWillLoad() {\n const closest = closestElement('ix-application-header', this.hostElement);\n this.isClosestApplicationHeader = closest !== null;\n }\n\n private slottedChanged() {\n this.hasSlottedElements = hasSlottedElements(this.slotElement);\n }\n\n private resolveAvatarTrigger() {\n return new Promise<HTMLElement>((resolve) => {\n readTask(() =>\n resolve(this.hostElement.shadowRoot.querySelector('button'))\n );\n });\n }\n\n render() {\n if (this.isClosestApplicationHeader) {\n return (\n <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n <BaseButton\n disabled={false}\n ghost={true}\n iconOval={false}\n icon={undefined}\n iconOnly={false}\n loading={false}\n outline={false}\n selected={false}\n type=\"button\"\n variant=\"primary\"\n >\n <AvatarImage image={this.image} initials={this.initials} />\n </BaseButton>\n <ix-dropdown\n trigger={this.resolveAvatarTrigger()}\n class=\"avatar-dropdown\"\n >\n {this.username && (\n <Fragment>\n <UserInfo\n extra={this.extra}\n image={this.image}\n initials={this.initials}\n userName={this.username}\n />\n {this.hasSlottedElements && <ix-divider></ix-divider>}\n </Fragment>\n )}\n <slot\n onSlotchange={() => this.slottedChanged()}\n ref={(ref: HTMLSlotElement) => (this.slotElement = ref)}\n ></slot>\n </ix-dropdown>\n </Host>\n );\n }\n\n return (\n <Host>\n <AvatarImage image={this.image} initials={this.initials} />\n </Host>\n );\n }\n}\n","/\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@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\n color: var(--theme-color-std-text);\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Method,\n Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n tag: 'ix-menu-avatar-item',\n styleUrl: 'menu-avatar-item.scss',\n shadow: true,\n})\nexport class MenuAvatarItem implements DropdownItemWrapper {\n /\n Avatar dropdown icon\n /\n @Prop() icon: string;\n\n /\n Avatar dropdown label\n /\n @Prop() label: string;\n\n /\n Avatar dropdown item clicked\n /\n @Event() itemClick: EventEmitter<MouseEvent>;\n\n @Element() hostElement: HTMLIxMenuAvatarItemElement;\n\n private dropdownItemRef = makeRef<HTMLIxDropdownItemElement>();\n\n /* @internal */\n @Method()\n async getDropdownItemElement() {\n return this.dropdownItemRef.waitForCurrent();\n }\n\n render() {\n return (\n <ix-dropdown-item\n ref={this.dropdownItemRef}\n icon={this.icon}\n label={this.label}\n onClick={(e) => this.itemClick.emit(e)}\n ></ix-dropdown-item>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-blind.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g
 import { a as anime } from './anime.es-185e9087.js';
 import { a as a11yBoolean } from './a11y-d5444a76.js';
-const blindCss = ":host{display:flex;flex-direction:column;border-radius:var(--theme-blind--border-radius);overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .blind-header-wrapper{display:block;position:relative;width:100%;min-height:3rem;height:3rem;overflow:hidden}:host .blind-header-content{display:flex;position:relative;align-items:center;justify-content:flex-start;width:100%;height:100%;z-index:1;pointer-events:none;padding-left:0.5rem}:host .blind-header-title{display:flex;position:relative;align-items:center;flex-grow:1;flex-shrink:0;margin-right:1rem}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;position:absolute;top:0px;left:0px;pointer-events:all;padding-left:2.5rem;min-height:3rem;height:3rem;width:calc(100% - 2 * var(--theme-blind--border-thickness));border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header-title-icon,:host .collapse-icon{margin-right:0.5rem}:host .blind-header-title-row{display:flex;flex-grow:1}:host .blind-header-title-col{flex-grow:1;flex-basis:0;display:inline-flex;align-items:center;min-width:0}:host .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline-end:0.5rem}:host .blind-header-title-sublabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:0.5rem}:host .blind-header-title{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}:host .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}:host .header-actions{pointer-events:all}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-alarm) .blind-header-title-label,:host(.blind-alarm) .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-critical) .blind-header-title-label,:host(.blind-critical) .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-info) .blind-header-title-label,:host(.blind-info) .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-insight){background-color:var(--theme-blind-base--background)}:host(.blind-insight) .blind-header{background-color:var(--theme-color-insight)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-insight) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-insight) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-neutral) .blind-header-title-label,:host(.blind-neutral) .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-notification){background-color:var(--theme-blind-base--background)}:host(.blind-notification) .blind-header{background-color:var(--theme-color-notification)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-notification--hover)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-notification) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-notification--active)}:host(.blind-notification) .blind-header-title-label,:host(.blind-notification) .blind-header-title-sublabel{color:var(--theme-color-notification--contrast)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-success) .blind-header-title-label,:host(.blind-success) .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-warning) .blind-header-title-label,:host(.blind-warning) .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-primary) .blind-header-title-label,:host(.blind-primary) .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-color:var(--theme-color-soft-bdr)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-outline) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}";
+const blindCss = ":host{display:flex;flex-direction:column;border-radius:var(--theme-blind--border-radius);overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .blind-header-wrapper{display:block;position:relative;width:100%;min-height:3rem;height:3rem;overflow:hidden}:host .blind-header-content{display:flex;position:relative;align-items:center;justify-content:flex-start;width:100%;height:100%;pointer-events:none;padding-left:0.5rem}:host .blind-header-title{display:flex;position:relative;align-items:center;flex-grow:1;flex-shrink:0;margin-right:1rem}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;position:absolute;top:0px;left:0px;pointer-events:all;padding-left:2.5rem;min-height:3rem;height:3rem;width:calc(100% - 2 * var(--theme-blind--border-thickness));border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header-title-icon,:host .collapse-icon{margin-right:0.5rem}:host .blind-header-title-row{display:flex;flex-grow:1}:host .blind-header-title-col{flex-grow:1;flex-basis:0;display:inline-flex;align-items:center;min-width:0}:host .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline-end:0.5rem}:host .blind-header-title-sublabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:0.5rem}:host .blind-header-title{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}:host .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}:host .header-actions{pointer-events:all}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-alarm) .blind-header-title-label,:host(.blind-alarm) .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-critical) .blind-header-title-label,:host(.blind-critical) .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-info) .blind-header-title-label,:host(.blind-info) .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-insight){background-color:var(--theme-blind-base--background)}:host(.blind-insight) .blind-header{background-color:var(--theme-color-insight)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-insight) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-insight) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-neutral) .blind-header-title-label,:host(.blind-neutral) .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-notification){background-color:var(--theme-blind-base--background)}:host(.blind-notification) .blind-header{background-color:var(--theme-color-notification)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-notification--hover)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-notification) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-notification--active)}:host(.blind-notification) .blind-header-title-label,:host(.blind-notification) .blind-header-title-sublabel{color:var(--theme-color-notification--contrast)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-success) .blind-header-title-label,:host(.blind-success) .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-warning) .blind-header-title-label,:host(.blind-warning) .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-primary) .blind-header-title-label,:host(.blind-primary) .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-color:var(--theme-color-soft-bdr)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-outline) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}";
 const IxBlindStyle0 = blindCss;
 let sequentialInstanceId = 0;
@@ -69,15 +69,15 @@ const Blind = class {
     render() {
         return (h(Host, { key: 'fa737e290302d9121790574a4a88738a0be492a6', class: {
                 [`blind-${this.variant}`]: true,
-            } }, h("div", { key: 'a30152172426864588f8482a8f94f437948c74a4', class: 'blind-header-wrapper' }, h("div", { key: '8ee1a8aa21ff58cb88514fd5e428481b99e10728', class: 'blind-header-content' }, h("ix-icon", { key: '97117ee8008ea0b69e64f2c4a0149ce3b3897f44', class: "collapse-icon", name: 'chevron-right-small', color: this.variant === 'insight' || this.variant === 'outline'
-                ? 'color-primary'
-                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: 'dbe488db7c5a77b5b09927698395a1f18674308a', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'insight' || this.variant === 'outline'
-                ? 'color-std-text'
-                : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null)), h("button", { key: '841d6430b672ee5a325803d69a86794620526cc6', class: {
+            } }, h("div", { key: 'a30152172426864588f8482a8f94f437948c74a4', class: 'blind-header-wrapper' }, h("button", { key: '2d4c31d29ae45a44cb4da28d4671eec4e4293ffe', class: {
                 'blind-header': true,
                 [`blind-${this.variant}`]: true,
                 closed: this.collapsed,
-            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: '96c40a71ba13b7b46d7b3148e2d76f6f69878eb6', name: "custom-header" }))), h("section", { key: '8702342c9b1a0c7bf81e753cdc9b88b76addacb3', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: 'a362c9a6be61160391054fa0cbcb558c0e275a7f', class: {
+            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: '6b43c8e46273edbe85478df6417d0e4814bb96d8', name: "custom-header" })), h("div", { key: 'a8365629f6a68d360959bd5d12cbb56989c1584a', class: 'blind-header-content' }, h("ix-icon", { key: '3f326906e7318a857ca360c3cdbc1e05d7f10d3d', class: "collapse-icon", name: 'chevron-right-small', color: this.variant === 'insight' || this.variant === 'outline'
+                ? 'color-primary'
+                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: '3fd27a4637f4ce37a0d430b2c7b0a0f12fa12539', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'insight' || this.variant === 'outline'
+                ? 'color-std-text'
+                : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null))), h("section", { key: '8702342c9b1a0c7bf81e753cdc9b88b76addacb3', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: 'a362c9a6be61160391054fa0cbcb558c0e275a7f', class: {
                 'blind-content': true,
                 hide: this.collapsed,
             } }, !this.collapsed ? h("slot", null) : null))));

package/dist/esm/ix-blind.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-blind.entry.js","mappings":"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","names":[],"sources":["src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","src/components/blind/blind.tsx"],"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\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n@mixin blind($variant: 'insight') {\n :host(.blind-#{$variant}) {\n @if $variant == 'outline' {\n border: solid\n var(--theme-blind--border-thickness)\n var(--theme-blind-base--border-color);\n }\n\n .blind-header {\n @if $variant == 'outline' {\n background-color: var(--theme-color-ghost);\n } @else {\n background-color: var(--theme-color-#{$variant});\n }\n\n @if $variant == 'insight' or $variant == 'outline' {\n @include ghost-hover-pressed;\n } @else {\n @include hover {\n background-color: var(--theme-color-#{$variant}--hover);\n }\n\n @include active {\n background-color: var(--theme-color-#{$variant}--active);\n }\n }\n }\n\n @if $variant == 'insight' or $variant == 'outline' {\n .blind-header-title-label {\n color: var(--theme-color-std-text);\n }\n .blind-header-title-sublabel {\n color: var(--theme-color-soft-text);\n }\n } @else {\n .blind-header-title-label,\n .blind-header-title-sublabel {\n color: var(--theme-color-#{$variant}--contrast);\n }\n }\n\n @if $variant == 'outline' {\n border-color: var(--theme-color-soft-bdr);\n } @else {\n background-color: var(--theme-blind-base--background);\n }\n }\n}\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n border-radius: var(--theme-blind--border-radius);\n overflow: hidden;\n\n .blind-header-wrapper {\n display: block;\n position: relative;\n width: 100%;\n min-height: 3rem;\n height: 3rem;\n overflow: hidden;\n }\n\n .blind-header-content {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: flex-start;\n\n width: 100%;\n height: 100%;\n z-index: 1;\n\n pointer-events: none;\n padding-left: 0.5rem;\n }\n\n .blind-header-title {\n display: flex;\n position: relative;\n align-items: center;\n flex-grow: 1;\n flex-shrink: 0;\n margin-right: 1rem;\n }\n\n .blind-header {\n all: unset;\n @include ellipsis;\n\n display: block;\n position: absolute;\n\n top: 0px;\n left: 0px;\n\n pointer-events: all;\n\n padding-left: 2.5rem;\n min-height: 3rem;\n height: 3rem;\n width: calc(100% - 2 var(--theme-blind--border-thickness));\n border: solid var(--theme-blind--border-thickness) transparent;\n border-radius: var(--theme-blind--border-radius)\n var(--theme-blind--border-radius) 0 0;\n cursor: pointer;\n\n @include focus-visible {\n border-color: var(--theme-color-focus-bdr);\n outline: none;\n }\n }\n\n .blind-header-title-icon,\n .collapse-icon {\n margin-right: $small-space;\n }\n\n .blind-header-title-row {\n display: flex;\n flex-grow: 1;\n }\n\n .blind-header-title-col {\n flex-grow: 1;\n flex-basis: 0;\n display: inline-flex;\n align-items: center;\n min-width: 0;\n }\n\n .blind-header-title-col:not(:first-of-type) {\n justify-content: flex-end;\n }\n ix-typography {\n flex-grow: 1;\n @include ellipsis;\n }\n\n .blind-header-title-label {\n @include ellipsis;\n padding-inline-end: 0.5rem;\n }\n\n .blind-header-title-sublabel {\n @include ellipsis;\n padding-inline: 0.5rem;\n }\n\n .blind-header-title {\n display: flex;\n align-items: center;\n flex-grow: 1;\n height: 100%;\n min-width: 0;\n }\n\n .blind-header-labels {\n display: inline-flex;\n flex-grow: 1;\n min-width: 0;\n }\n\n .blind-content {\n display: block;\n padding: 1rem;\n transition-property: padding;\n transition-duration: $default-time;\n transition-timing-function: ease-in;\n\n &.hide {\n max-height: 0;\n padding-top: 0px;\n padding-bottom: 0px;\n }\n }\n\n .header-actions {\n pointer-events: all;\n }\n}\n\n$blind-variants: (\n alarm,\n critical,\n info,\n insight,\n neutral,\n notification,\n success,\n warning,\n primary,\n outline\n);\n\n@each $variant in $blind-variants {\n @include blind($variant);\n}\n","/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\n\nexport type BlindVariant = CardVariant \| 'outline';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n tag: 'ix-blind',\n styleUrl: 'blind.scss',\n shadow: true,\n})\nexport class Blind {\n /\n Collapsed state\n /\n @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n /\n Label of blind\n /\n @Prop() label: string;\n\n /\n Secondary label inside blind header\n * @since 2.0.0\n /\n @Prop() sublabel: string;\n\n /\n Optional icon to be displayed next to the header label\n * @since 1.5.0\n /\n @Prop() icon: string;\n\n /\n Blind variant\n * @since 2.0.0\n /\n @Prop() variant: BlindVariant = 'insight';\n\n /\n Collapsed state changed\n */\n @Event() collapsedChange: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxBlindElement;\n\n private chevronRef: HTMLElement;\n private blindId = ++sequentialInstanceId;\n\n constructor() {}\n\n private onHeaderClick() {\n this.collapsed = !this.collapsed;\n this.collapsedChange.emit(this.collapsed);\n }\n\n componentDidLoad() {\n this.animateCollapse(this.collapsed);\n }\n\n get content() {\n return this.hostElement.shadowRoot.querySelector('.blind-content');\n }\n\n @Watch('collapsed')\n animation(isCollapsed: boolean) {\n this.animateCollapse(isCollapsed);\n }\n\n private animateCollapse(isCollapsed: boolean) {\n if (isCollapsed) {\n this.rotateChevronRight();\n } else {\n this.rotateChevronDown();\n }\n }\n\n private rotateChevronDown() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 90,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 1,\n });\n }\n\n private rotateChevronRight() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 0,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 0,\n });\n }\n\n render() {\n return (\n <Host\n class={{\n [`blind-${this.variant}`]: true,\n }}\n >\n <div class={'blind-header-wrapper'}>\n <div class={'blind-header-content'}>\n <ix-icon\n class=\"collapse-icon\"\n name={'chevron-right-small'}\n color={\n this.variant === 'insight' \|\| this.variant === 'outline'\n ? 'color-primary'\n : `color-${this.variant}--contrast`\n }\n ref={(ref) => (this.chevronRef = ref)}\n ></ix-icon>\n <div\n class=\"blind-header-title\"\n id={`ix-blind-header-title-${this.blindId}`}\n >\n {this.label !== undefined ? (\n <Fragment>\n {this.icon && (\n <ix-icon\n class=\"blind-header-title-icon\"\n name={this.icon}\n color={\n this.variant === 'insight' \|\| this.variant === 'outline'\n ? 'color-std-text'\n : `color-${this.variant}--contrast`\n }\n ></ix-icon>\n )}\n <div class={'blind-header-title-row'}>\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.label} format=\"label-lg\" bold>\n <div\n class=\"blind-header-title-label\"\n title={this.label}\n >\n {this.label}\n </div>\n </ix-typography>\n </div>\n\n {this.sublabel && (\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.sublabel}>\n <div class=\"blind-header-title-sublabel\">\n {this.sublabel}\n </div>\n </ix-typography>\n </div>\n )}\n </div>\n <div class=\"header-actions\">\n <slot name=\"header-actions\"></slot>\n </div>\n </Fragment>\n ) : null}\n </div>\n </div>\n\n <button\n class={{\n 'blind-header': true,\n [`blind-${this.variant}`]: true,\n closed: this.collapsed,\n }}\n type=\"button\"\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n aria-controls={`ix-blind-content-section-${this.blindId}`}\n aria-expanded={a11yBoolean(!this.collapsed)}\n onClick={() => this.onHeaderClick()}\n >\n <slot name=\"custom-header\"></slot>\n </button>\n </div>\n <section\n id={`ix-blind-content-section-${this.blindId}`}\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n >\n <div\n class={{\n 'blind-content': true,\n hide: this.collapsed,\n }}\n >\n {!this.collapsed ? <slot></slot> : null}\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-blind.entry.js","mappings":"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","names":[],"sources":["src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","src/components/blind/blind.tsx"],"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\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n@mixin blind($variant: 'insight') {\n :host(.blind-#{$variant}) {\n @if $variant == 'outline' {\n border: solid\n var(--theme-blind--border-thickness)\n var(--theme-blind-base--border-color);\n }\n\n .blind-header {\n @if $variant == 'outline' {\n background-color: var(--theme-color-ghost);\n } @else {\n background-color: var(--theme-color-#{$variant});\n }\n\n @if $variant == 'insight' or $variant == 'outline' {\n @include ghost-hover-pressed;\n } @else {\n @include hover {\n background-color: var(--theme-color-#{$variant}--hover);\n }\n\n @include active {\n background-color: var(--theme-color-#{$variant}--active);\n }\n }\n }\n\n @if $variant == 'insight' or $variant == 'outline' {\n .blind-header-title-label {\n color: var(--theme-color-std-text);\n }\n .blind-header-title-sublabel {\n color: var(--theme-color-soft-text);\n }\n } @else {\n .blind-header-title-label,\n .blind-header-title-sublabel {\n color: var(--theme-color-#{$variant}--contrast);\n }\n }\n\n @if $variant == 'outline' {\n border-color: var(--theme-color-soft-bdr);\n } @else {\n background-color: var(--theme-blind-base--background);\n }\n }\n}\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n border-radius: var(--theme-blind--border-radius);\n overflow: hidden;\n\n .blind-header-wrapper {\n display: block;\n position: relative;\n width: 100%;\n min-height: 3rem;\n height: 3rem;\n overflow: hidden;\n }\n\n .blind-header-content {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: flex-start;\n\n width: 100%;\n height: 100%;\n\n pointer-events: none;\n padding-left: 0.5rem;\n }\n\n .blind-header-title {\n display: flex;\n position: relative;\n align-items: center;\n flex-grow: 1;\n flex-shrink: 0;\n margin-right: 1rem;\n }\n\n .blind-header {\n all: unset;\n @include ellipsis;\n\n display: block;\n position: absolute;\n\n top: 0px;\n left: 0px;\n\n pointer-events: all;\n\n padding-left: 2.5rem;\n min-height: 3rem;\n height: 3rem;\n width: calc(100% - 2 var(--theme-blind--border-thickness));\n border: solid var(--theme-blind--border-thickness) transparent;\n border-radius: var(--theme-blind--border-radius)\n var(--theme-blind--border-radius) 0 0;\n cursor: pointer;\n\n @include focus-visible {\n border-color: var(--theme-color-focus-bdr);\n outline: none;\n }\n }\n\n .blind-header-title-icon,\n .collapse-icon {\n margin-right: $small-space;\n }\n\n .blind-header-title-row {\n display: flex;\n flex-grow: 1;\n }\n\n .blind-header-title-col {\n flex-grow: 1;\n flex-basis: 0;\n display: inline-flex;\n align-items: center;\n min-width: 0;\n }\n\n .blind-header-title-col:not(:first-of-type) {\n justify-content: flex-end;\n }\n ix-typography {\n flex-grow: 1;\n @include ellipsis;\n }\n\n .blind-header-title-label {\n @include ellipsis;\n padding-inline-end: 0.5rem;\n }\n\n .blind-header-title-sublabel {\n @include ellipsis;\n padding-inline: 0.5rem;\n }\n\n .blind-header-title {\n display: flex;\n align-items: center;\n flex-grow: 1;\n height: 100%;\n min-width: 0;\n }\n\n .blind-header-labels {\n display: inline-flex;\n flex-grow: 1;\n min-width: 0;\n }\n\n .blind-content {\n display: block;\n padding: 1rem;\n transition-property: padding;\n transition-duration: $default-time;\n transition-timing-function: ease-in;\n\n &.hide {\n max-height: 0;\n padding-top: 0px;\n padding-bottom: 0px;\n }\n }\n\n .header-actions {\n pointer-events: all;\n }\n}\n\n$blind-variants: (\n alarm,\n critical,\n info,\n insight,\n neutral,\n notification,\n success,\n warning,\n primary,\n outline\n);\n\n@each $variant in $blind-variants {\n @include blind($variant);\n}\n","/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\n\nexport type BlindVariant = CardVariant \| 'outline';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n tag: 'ix-blind',\n styleUrl: 'blind.scss',\n shadow: true,\n})\nexport class Blind {\n /\n Collapsed state\n /\n @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n /\n Label of blind\n /\n @Prop() label: string;\n\n /\n Secondary label inside blind header\n * @since 2.0.0\n /\n @Prop() sublabel: string;\n\n /\n Optional icon to be displayed next to the header label\n * @since 1.5.0\n /\n @Prop() icon: string;\n\n /\n Blind variant\n * @since 2.0.0\n /\n @Prop() variant: BlindVariant = 'insight';\n\n /\n Collapsed state changed\n */\n @Event() collapsedChange: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxBlindElement;\n\n private chevronRef: HTMLElement;\n private blindId = ++sequentialInstanceId;\n\n constructor() {}\n\n private onHeaderClick() {\n this.collapsed = !this.collapsed;\n this.collapsedChange.emit(this.collapsed);\n }\n\n componentDidLoad() {\n this.animateCollapse(this.collapsed);\n }\n\n get content() {\n return this.hostElement.shadowRoot.querySelector('.blind-content');\n }\n\n @Watch('collapsed')\n animation(isCollapsed: boolean) {\n this.animateCollapse(isCollapsed);\n }\n\n private animateCollapse(isCollapsed: boolean) {\n if (isCollapsed) {\n this.rotateChevronRight();\n } else {\n this.rotateChevronDown();\n }\n }\n\n private rotateChevronDown() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 90,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 1,\n });\n }\n\n private rotateChevronRight() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 0,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 0,\n });\n }\n\n render() {\n return (\n <Host\n class={{\n [`blind-${this.variant}`]: true,\n }}\n >\n <div class={'blind-header-wrapper'}>\n <button\n class={{\n 'blind-header': true,\n [`blind-${this.variant}`]: true,\n closed: this.collapsed,\n }}\n type=\"button\"\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n aria-controls={`ix-blind-content-section-${this.blindId}`}\n aria-expanded={a11yBoolean(!this.collapsed)}\n onClick={() => this.onHeaderClick()}\n >\n <slot name=\"custom-header\"></slot>\n </button>\n\n <div class={'blind-header-content'}>\n <ix-icon\n class=\"collapse-icon\"\n name={'chevron-right-small'}\n color={\n this.variant === 'insight' \|\| this.variant === 'outline'\n ? 'color-primary'\n : `color-${this.variant}--contrast`\n }\n ref={(ref) => (this.chevronRef = ref)}\n ></ix-icon>\n <div\n class=\"blind-header-title\"\n id={`ix-blind-header-title-${this.blindId}`}\n >\n {this.label !== undefined ? (\n <Fragment>\n {this.icon && (\n <ix-icon\n class=\"blind-header-title-icon\"\n name={this.icon}\n color={\n this.variant === 'insight' \|\| this.variant === 'outline'\n ? 'color-std-text'\n : `color-${this.variant}--contrast`\n }\n ></ix-icon>\n )}\n <div class={'blind-header-title-row'}>\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.label} format=\"label-lg\" bold>\n <div\n class=\"blind-header-title-label\"\n title={this.label}\n >\n {this.label}\n </div>\n </ix-typography>\n </div>\n\n {this.sublabel && (\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.sublabel}>\n <div class=\"blind-header-title-sublabel\">\n {this.sublabel}\n </div>\n </ix-typography>\n </div>\n )}\n </div>\n <div class=\"header-actions\">\n <slot name=\"header-actions\"></slot>\n </div>\n </Fragment>\n ) : null}\n </div>\n </div>\n </div>\n <section\n id={`ix-blind-content-section-${this.blindId}`}\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n >\n <div\n class={{\n 'blind-content': true,\n hide: this.collapsed,\n }}\n >\n {!this.collapsed ? <slot></slot> : null}\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"version":3}