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

@siemens/ix 2.5.0 → 2.6.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 (1456) hide show

package/components/a11y.js CHANGED Viewed

@@ -37,7 +37,7 @@ const isSvgDataUrl = (url) => {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const a11yBoolean = (value) => (value ? 'true' : 'false');
+const a11yBoolean = (value) => value ? 'true' : 'false';
 const kebabCaseToUpperCaseSentence = (kebabCase) => {
     const withoutFilledSuffix = kebabCase.replace('-filled', '');
     const words = withoutFilledSuffix.split('-');
@@ -73,10 +73,11 @@ const getFallbackLabelFromIconName = (iconName) => {
 const a11yHostAttributes = (hostElement, ignoreAttributes = []) => {
     const attributeObject = {};
     a11yAttributes.forEach((attr) => {
+        var _a;
         if (hostElement.hasAttribute(attr)) {
             const value = hostElement.getAttribute(attr);
             if (value !== null && !ignoreAttributes.includes(attr)) {
-                attributeObject[attr] = hostElement.getAttribute(attr);
+                attributeObject[attr] = (_a = hostElement.getAttribute(attr)) !== null && _a !== void 0 ? _a : '';
                 hostElement.removeAttribute(attr);
             }
         }

package/components/a11y.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"a11y.js","mappings":"AAAA;;;;;;;;AAQO,MAAM,SAAS,GAAG,CAAC,IAAY;IACpC,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IAED,IAAI,GAAQ,CAAC;IAEb,IAAI;QACF,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;KACrB;IAAC,OAAO,CAAC,EAAE;QACV,OAAO,KAAK,CAAC;KACd;IAED,OAAO,GAAG,CAAC,QAAQ,KAAK,OAAO,IAAI,GAAG,CAAC,QAAQ,KAAK,QAAQ,CAAC;AAC/D,CAAC,CAAC;AAEK,MAAM,YAAY,GAAG,CAAC,GAAW;IACtC,IAAI,CAAC,GAAG,EAAE;QACR,OAAO,KAAK,CAAC;KACd;IAED,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;QAC3B,OAAO,KAAK,CAAC;KACd;IAED,OAAO,GAAG,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAC9C,CAAC;;AClCD;;;;;;;;MAWa,WAAW,GAAG,CAAC,~~KAAc~~,~~MAAM~~,KAAK,GAAG,MAAM,GAAG,~~OAAO,EAAE~~;~~AAE1E~~,MAAM,4BAA4B,GAAG,CAAC,SAAiB;IACrD,MAAM,mBAAmB,GAAG,SAAS,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IAC7D,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,QAAQ,GAAG,KAAK;SACnB,GAAG,CAAC,CAAC,IAAI;QACR,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAC7B,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAEnD,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;YAC9B,OAAO,QAAQ,CAAC;SACjB;QAED,OAAO,aAAa,CAAC;KACtB,CAAC;SACD,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;SAC3D,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;MAEW,4BAA4B,GAAG,CAAC,QAAgB;IAC3D,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,SAAS,CAAC;KAClB;IAED,IAAI,SAAS,CAAC,QAAQ,CAAC,EAAE;QACvB,OAAO,SAAS,CAAC;KAClB;IAED,IAAI,YAAY,CAAC,QAAQ,CAAC,EAAE;QAC1B,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,KAAK,GAAG,4BAA4B,CAAC,QAAQ,CAAC,CAAC;IAErD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,KAAK,CAAC;AACf,EAAE;MAEW,kBAAkB,GAAG,CAChC,WAAwB,EACxB,mBAAwC,EAAE;IAE1C,MAAM,eAAe,~~GAAwB~~,EAAE,CAAC;~~IAChD~~,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI;QAC1B,IAAI,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;YAClC,MAAM,KAAK,GAAG,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAC7C,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;gBACtD,eAAe,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;~~gBACvD~~,WAAW,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;aACnC;SACF;KACF,CAAC,CAAC;IAEH,OAAO,eAAe,CAAC;AACzB,EAAE;~~AA4DF~~,MAAM,cAAc,GAAwB;IAC1C,MAAM;IACN,uBAAuB;IACvB,aAAa;IACb,mBAAmB;IACnB,mBAAmB;IACnB,6BAA6B;IAC7B,WAAW;IACX,cAAc;IACd,eAAe;IACf,eAAe;IACf,mBAAmB;IACnB,cAAc;IACd,eAAe;IACf,cAAc;IACd,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,eAAe;IACf,mBAAmB;IACnB,eAAe;IACf,aAAa;IACb,eAAe;IACf,aAAa;IACb,cAAc;IACd,mBAAmB;IACnB,YAAY;IACZ,iBAAiB;IACjB,YAAY;IACZ,WAAW;IACX,gBAAgB;IAChB,sBAAsB;IACtB,kBAAkB;IAClB,WAAW;IACX,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAe;IACf,eAAe;IACf,eAAe;IACf,sBAAsB;IACtB,eAAe;IACf,eAAe;IACf,mBAAmB;IACnB,cAAc;IACd,eAAe;IACf,cAAc;IACd,WAAW;IACX,eAAe;IACf,eAAe;IACf,eAAe;IACf,gBAAgB;CACjB;;;;","names":[],"sources":["src/components/utils/condition-checks.ts","src/components/utils/a11y.ts"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nexport const isHttpUrl = (link: string) => {\n if (!link) {\n return false;\n }\n\n let url: URL;\n\n try {\n url = new URL(link);\n } catch (e) {\n return false;\n }\n\n return url.protocol === 'http:' \|\| url.protocol === 'https:';\n};\n\nexport const isSvgDataUrl = (url: string) => {\n if (!url) {\n return false;\n }\n\n if (typeof url !== 'string') {\n return false;\n }\n\n return url.startsWith('data:image/svg+xml');\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 { isHttpUrl, isSvgDataUrl } from './condition-checks';\n\nexport const a11yBoolean = (value: boolean) ~~=> (~~value ? 'true' : 'false');\n\nconst kebabCaseToUpperCaseSentence = (kebabCase: string) => {\n const withoutFilledSuffix = kebabCase.replace('-filled', '');\n const words = withoutFilledSuffix.split('-');\n const sentence = words\n .map((word) => {\n const trimWord = word.trim();\n const digitLessWord = trimWord.replace(/\\d+/g, '');\n\n if (digitLessWord.length === 0) {\n return trimWord;\n }\n\n return digitLessWord;\n })\n .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n .join(' ');\n\n return sentence;\n};\n\nexport const getFallbackLabelFromIconName = (iconName: string) => {\n if (!iconName) {\n return 'Unknown';\n }\n\n if (isHttpUrl(iconName)) {\n return 'Unknown';\n }\n\n if (isSvgDataUrl(iconName)) {\n return 'Unknown';\n }\n\n const label = kebabCaseToUpperCaseSentence(iconName);\n\n if (label.length === 0) {\n return 'Unknown';\n }\n\n return label;\n};\n\nexport const a11yHostAttributes = (\n hostElement: HTMLElement,\n ignoreAttributes: A11yAttributeName[] = []\n): Record<A11yAttributeName, ~~any~~> => {\n const attributeObject: Record<string, ~~any~~> = {};\n a11yAttributes.forEach((attr) => {\n if (hostElement.hasAttribute(attr)) {\n const value = hostElement.getAttribute(attr);\n if (value !== null && !ignoreAttributes.includes(attr)) {\n attributeObject[attr] = hostElement.getAttribute(attr);\n hostElement.removeAttribute(attr);\n }\n }\n });\n\n return attributeObject;\n};\n\~~ntype PartialRecord<K extends keyof any, T> = {\n [P in K]?: T;\n};\~~nexport type ~~A11yAttributes = PartialRecord<~~A11yAttributeName, ~~any>;\n\nexport type A11yAttributeName~~ =\n \| 'role'\n \| 'aria-activedescendant'\n \| 'aria-atomic'\n \| 'aria-autocomplete'\n \| 'aria-braillelabel'\n \| 'aria-brailleroledescription'\n \| 'aria-busy'\n \| 'aria-checked'\n \| 'aria-colcount'\n \| 'aria-colindex'\n \| 'aria-colindextext'\n \| 'aria-colspan'\n \| 'aria-controls'\n \| 'aria-current'\n \| 'aria-describedby'\n \| 'aria-description'\n \| 'aria-details'\n \| 'aria-disabled'\n \| 'aria-errormessage'\n \| 'aria-expanded'\n \| 'aria-flowto'\n \| 'aria-haspopup'\n \| 'aria-hidden'\n \| 'aria-invalid'\n \| 'aria-keyshortcuts'\n \| 'aria-label'\n \| 'aria-labelledby'\n \| 'aria-level'\n \| 'aria-live'\n \| 'aria-multiline'\n \| 'aria-multiselectable'\n \| 'aria-orientation'\n \| 'aria-owns'\n \| 'aria-placeholder'\n \| 'aria-posinset'\n \| 'aria-pressed'\n \| 'aria-readonly'\n \| 'aria-relevant'\n \| 'aria-required'\n \| 'aria-roledescription'\n \| 'aria-rowcount'\n \| 'aria-rowindex'\n \| 'aria-rowindextext'\n \| 'aria-rowspan'\n \| 'aria-selected'\n \| 'aria-setsize'\n \| 'aria-sort'\n \| 'aria-valuemax'\n \| 'aria-valuemin'\n \| 'aria-valuenow'\n \| 'aria-valuetext';\n\nconst a11yAttributes: A11yAttributeName[] = [\n 'role',\n 'aria-activedescendant',\n 'aria-atomic',\n 'aria-autocomplete',\n 'aria-braillelabel',\n 'aria-brailleroledescription',\n 'aria-busy',\n 'aria-checked',\n 'aria-colcount',\n 'aria-colindex',\n 'aria-colindextext',\n 'aria-colspan',\n 'aria-controls',\n 'aria-current',\n 'aria-describedby',\n 'aria-description',\n 'aria-details',\n 'aria-disabled',\n 'aria-errormessage',\n 'aria-expanded',\n 'aria-flowto',\n 'aria-haspopup',\n 'aria-hidden',\n 'aria-invalid',\n 'aria-keyshortcuts',\n 'aria-label',\n 'aria-labelledby',\n 'aria-level',\n 'aria-live',\n 'aria-multiline',\n 'aria-multiselectable',\n 'aria-orientation',\n 'aria-owns',\n 'aria-placeholder',\n 'aria-posinset',\n 'aria-pressed',\n 'aria-readonly',\n 'aria-relevant',\n 'aria-required',\n 'aria-roledescription',\n 'aria-rowcount',\n 'aria-rowindex',\n 'aria-rowindextext',\n 'aria-rowspan',\n 'aria-selected',\n 'aria-setsize',\n 'aria-sort',\n 'aria-valuemax',\n 'aria-valuemin',\n 'aria-valuenow',\n 'aria-valuetext',\n];\n"],"version":3}
1	+ {"file":"a11y.js","mappings":"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","names":[],"sources":["src/components/utils/condition-checks.ts","src/components/utils/a11y.ts"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nexport const isHttpUrl = (link: string) => {\n if (!link) {\n return false;\n }\n\n let url: URL;\n\n try {\n url = new URL(link);\n } catch (e) {\n return false;\n }\n\n return url.protocol === 'http:' \|\| url.protocol === 'https:';\n};\n\nexport const isSvgDataUrl = (url: string) => {\n if (!url) {\n return false;\n }\n\n if (typeof url !== 'string') {\n return false;\n }\n\n return url.startsWith('data:image/svg+xml');\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 { isHttpUrl, isSvgDataUrl } from './condition-checks';\n\nexport const a11yBoolean = (value: boolean \| undefined) =>\n value ? 'true' : 'false';\n\nconst kebabCaseToUpperCaseSentence = (kebabCase: string) => {\n const withoutFilledSuffix = kebabCase.replace('-filled', '');\n const words = withoutFilledSuffix.split('-');\n const sentence = words\n .map((word) => {\n const trimWord = word.trim();\n const digitLessWord = trimWord.replace(/\\d+/g, '');\n\n if (digitLessWord.length === 0) {\n return trimWord;\n }\n\n return digitLessWord;\n })\n .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n .join(' ');\n\n return sentence;\n};\n\nexport const getFallbackLabelFromIconName = (iconName: string) => {\n if (!iconName) {\n return 'Unknown';\n }\n\n if (isHttpUrl(iconName)) {\n return 'Unknown';\n }\n\n if (isSvgDataUrl(iconName)) {\n return 'Unknown';\n }\n\n const label = kebabCaseToUpperCaseSentence(iconName);\n\n if (label.length === 0) {\n return 'Unknown';\n }\n\n return label;\n};\n\nexport const a11yHostAttributes = (\n hostElement: HTMLElement,\n ignoreAttributes: A11yAttributeName[] = []\n): Record<A11yAttributeName, string> => {\n const attributeObject: Record<string, string> = {};\n a11yAttributes.forEach((attr) => {\n if (hostElement.hasAttribute(attr)) {\n const value = hostElement.getAttribute(attr);\n if (value !== null && !ignoreAttributes.includes(attr)) {\n attributeObject[attr] = hostElement.getAttribute(attr) ?? '';\n hostElement.removeAttribute(attr);\n }\n }\n });\n\n return attributeObject;\n};\n\nexport type A11yAttributeName =\n \| 'role'\n \| 'aria-activedescendant'\n \| 'aria-atomic'\n \| 'aria-autocomplete'\n \| 'aria-braillelabel'\n \| 'aria-brailleroledescription'\n \| 'aria-busy'\n \| 'aria-checked'\n \| 'aria-colcount'\n \| 'aria-colindex'\n \| 'aria-colindextext'\n \| 'aria-colspan'\n \| 'aria-controls'\n \| 'aria-current'\n \| 'aria-describedby'\n \| 'aria-description'\n \| 'aria-details'\n \| 'aria-disabled'\n \| 'aria-errormessage'\n \| 'aria-expanded'\n \| 'aria-flowto'\n \| 'aria-haspopup'\n \| 'aria-hidden'\n \| 'aria-invalid'\n \| 'aria-keyshortcuts'\n \| 'aria-label'\n \| 'aria-labelledby'\n \| 'aria-level'\n \| 'aria-live'\n \| 'aria-multiline'\n \| 'aria-multiselectable'\n \| 'aria-orientation'\n \| 'aria-owns'\n \| 'aria-placeholder'\n \| 'aria-posinset'\n \| 'aria-pressed'\n \| 'aria-readonly'\n \| 'aria-relevant'\n \| 'aria-required'\n \| 'aria-roledescription'\n \| 'aria-rowcount'\n \| 'aria-rowindex'\n \| 'aria-rowindextext'\n \| 'aria-rowspan'\n \| 'aria-selected'\n \| 'aria-setsize'\n \| 'aria-sort'\n \| 'aria-valuemax'\n \| 'aria-valuemin'\n \| 'aria-valuenow'\n \| 'aria-valuetext';\n\nconst a11yAttributes: A11yAttributeName[] = [\n 'role',\n 'aria-activedescendant',\n 'aria-atomic',\n 'aria-autocomplete',\n 'aria-braillelabel',\n 'aria-brailleroledescription',\n 'aria-busy',\n 'aria-checked',\n 'aria-colcount',\n 'aria-colindex',\n 'aria-colindextext',\n 'aria-colspan',\n 'aria-controls',\n 'aria-current',\n 'aria-describedby',\n 'aria-description',\n 'aria-details',\n 'aria-disabled',\n 'aria-errormessage',\n 'aria-expanded',\n 'aria-flowto',\n 'aria-haspopup',\n 'aria-hidden',\n 'aria-invalid',\n 'aria-keyshortcuts',\n 'aria-label',\n 'aria-labelledby',\n 'aria-level',\n 'aria-live',\n 'aria-multiline',\n 'aria-multiselectable',\n 'aria-orientation',\n 'aria-owns',\n 'aria-placeholder',\n 'aria-posinset',\n 'aria-pressed',\n 'aria-readonly',\n 'aria-relevant',\n 'aria-required',\n 'aria-roledescription',\n 'aria-rowcount',\n 'aria-rowindex',\n 'aria-rowindextext',\n 'aria-rowspan',\n 'aria-selected',\n 'aria-setsize',\n 'aria-sort',\n 'aria-valuemax',\n 'aria-valuemin',\n 'aria-valuenow',\n 'aria-valuetext',\n];\n\ntype PartialRecord<K extends A11yAttributeName, T> = {\n [P in K]?: T;\n};\nexport type A11yAttributes = PartialRecord<A11yAttributeName, string>;\n"],"version":3}

package/components/application-header.js CHANGED Viewed

@@ -125,12 +125,12 @@ const ApplicationHeader = /*@__PURE__*/ proxyCustomElement(class ApplicationHead
         const showApplicationSwitch = ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
             this.breakpoint !== 'sm' &&
             this.suppressResponsive === false;
-        return (h(Host, { key: 'd81892c63d0b963455f7b86741241528dd4e65a5', class: {
+        return (h(Host, { key: '1f987dd8ac407207a23ac0821945ba9ad3d47e87', class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "application-header" }, (this.showMenu || showMenuByApplicationFrame) && (h("ix-menu-expand-icon", { key: 'db19b6cc240df8f3299e671d0ee8a56bdf7f6977', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (h("ix-icon-button", { key: '5a31ea7e0007c3ab3b78c96b649f917745bc7435', onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), h("div", { key: '4b083dd5ce9023d17371364b541ef0f29ec6d76f', class: { logo: true } }, h("slot", { key: '7039706bbb7355302e069e22621b41cd756345d9', name: "logo" })), h("ix-typography", { key: '3f365f3947b52f3788f6d4ec4180c23ec12d2509', format: "body-lg", class: "name" }, this.name), h("div", { key: '20427a902bacbe4db73bbaf43fc8a5477d7a13a2', class: "content" }, this.breakpoint === 'sm' ? (h(Fragment, null, h("ix-icon-button", { class: {
+            }, slot: "application-header" }, (this.showMenu || showMenuByApplicationFrame) && (h("ix-menu-expand-icon", { key: '60c7aa44d2b294fff9cb51ecaf291d70a33bafbd', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (h("ix-icon-button", { key: 'e500c3a98790345840633b8dd0f056fac198f802', onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), h("div", { key: 'adba1c9a08be32a07f31a60d42159f996d26a87b', class: { logo: true } }, h("slot", { key: '3848321805f42653d8a9c066c8f237c8ec3497bb', name: "logo" })), h("ix-typography", { key: '9c312426ee3c2554a9a66aff6b158d36969cefea', format: "body-lg", class: "name" }, this.name), h("div", { key: '319969ceeb812f9b18b5ad3f374e16f454c6daf2', class: "content" }, this.breakpoint === 'sm' ? (h(Fragment, null, h("ix-icon-button", { class: {
                 ['context-menu']: true,
                 ['context-menu-visible']: this.hasSlottedElements,
-            }, "data-context-menu": true, icon: "more-menu", ghost: true }), h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, h("div", { class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), h("slot", { key: 'baea46e8a2cec2e4fbdb99752bf6697cf314855e', name: "ix-application-header-avatar" }))));
+            }, "data-context-menu": true, icon: "more-menu", ghost: true }), h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, h("div", { class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), h("slot", { key: 'dd03dd49866605c06d6daf09d2ee72692666ee68', name: "ix-application-header-avatar" }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/avatar.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$3 } from './dropdown.js';
 import { d as defineCustomElement$2 } from './spinner.js';
 import { d as defineCustomElement$1 } from './typography.js';
-const avatarCss = ":host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-avatar--color)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem;padding:0px;border-radius:100px !important}:host(.avatar-button) .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host(.avatar-button) .btn-invisible-primary,:host(.avatar-button) .btn-invisible-primary.focus,:host(.avatar-button) .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.avatar-button) li{transform:scale(0.8)}";
+const avatarCss = ":host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-avatar--color)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem;padding:0px;border-radius:100px !important}:host(.avatar-button) .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host(.avatar-button) .btn-invisible-primary,:host(.avatar-button) .btn-invisible-primary.focus,:host(.avatar-button) .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.avatar-button) .avatar{transform:scale(0.8)}";
 const IxAvatarStyle0 = avatarCss;
 function DefaultAvatar(props) {
@@ -17,7 +17,7 @@ function DefaultAvatar(props) {
     return (h("svg", { class: 'avatar-image', xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { id: "avatar-path-background", 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" }), h("path", { id: "avatar-path-person", 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" }))));
 }
 function AvatarImage(props) {
-    return (h("li", { class: "avatar" }, props.image ? (h("img", { src: props.image, class: "avatar-image" })) : (h(DefaultAvatar, { initials: props.initials }))));
+    return (h("div", { class: "avatar" }, props.image ? (h("img", { src: props.image, class: "avatar-image" })) : (h(DefaultAvatar, { initials: props.initials }))));
 }
 function UserInfo(props) {
     return (h(Fragment, null, h("div", { class: "user-info", onClick: (event) => event.preventDefault() }, h(AvatarImage, { image: props.image, initials: props.initials }), h("div", { class: "user" }, h("div", { class: "username" }, props.userName), props.extra && (h("ix-typography", { class: "extra", color: 'soft' }, props.extra))))));
@@ -42,8 +42,16 @@ const Avatar = /*@__PURE__*/ proxyCustomElement(class Avatar extends HTMLElement
         this.hasSlottedElements = hasSlottedElements(this.slotElement);
     }
     resolveAvatarTrigger() {
-        return new Promise((resolve) => {
-            readTask(() => resolve(this.hostElement.shadowRoot.querySelector('button')));
+        return new Promise((resolve, reject) => {
+            readTask(() => {
+                const button = this.hostElement.shadowRoot.querySelector('button');
+                if (button) {
+                    resolve(button);
+                }
+                else {
+                    reject(new Error('ix-avatar - trigger element not found'));
+                }
+            });
         });
     }
     onDropdownClick(event) {

package/components/avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"avatar.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,gpIAAgpI,CAAC;AACnqI,uBAAe,SAAS;;ACqBxB,SAAS,aAAa,CAAC,KAA4B;IACjD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,IAAI,QAAQ,EAAE;QACZ,OAAO,WAAK,KAAK,EAAE,iBAAiB,IAAG,QAAQ,CAAO,CAAC;KACxD;IAED,QACE,WACE,KAAK,EAAE,cAAc,EACrB,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,IAEnB,SAAG,IAAI,EAAC,MAAM,eAAW,SAAS,IAChC,YACE,EAAE,EAAC,wBAAwB,EAC3B,CAAC,EAAC,kIACiE,GACnE,EACF,YACE,EAAE,EAAC,oBAAoB,EACvB,CAAC,EAAC,2TAGgE,GAClE,CACA,CACA,EACN;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,KAA0C;IAC7D,QACE,UAAI,KAAK,EAAC,QAAQ,IACf,KAAK,CAAC,KAAK,IACV,WAAK,GAAG,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc,GAAO,KAElD,EAAC,aAAa,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,CAC5C,CACE,EACL;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,KAKjB;IACC,QACE,EAAC,QAAQ,QACP,WAAK,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,cAAc,EAAE,IAC/D,EAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,EAC7D,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,UAAU,IAAE,KAAK,CAAC,QAAQ,CAAO,EAC3C,KAAK,CAAC,KAAK,KACV,qBAAe,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,IACvC,KAAK,CAAC,KAAK,CACE,CACjB,CACG,CACF,CACG,EACX;AACJ,CAAC;MAUY,MAAM;;;;;;;;;0CA+BqB,KAAK;kCACb,KAAK;;IAKnC,iBAAiB;QACf,MAAM,OAAO,GAAG,cAAc,CAAC,uBAAuB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAC1E,IAAI,CAAC,0BAA0B,GAAG,OAAO,KAAK,IAAI,CAAC;KACpD;IAEO,cAAc;QACpB,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAChE;IAEO,oBAAoB;QAC1B,OAAO,IAAI,OAAO,CAAc,CAAC,OAAO;YACtC,QAAQ,CAAC,MACP,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAC7D,CAAC;SACH,CAAC,CAAC;KACJ;IAEO,eAAe,CAAC,KAAiB;QACvC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,eAAe,EAAE;YACzC,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,0BAA0B,EAAE;YACnC,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,8BAA8B,EAAC,KAAK,EAAE,eAAe,IAC9D,EAAC,UAAU,IACT,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,KAAK,EACf,IAAI,EAAE,SAAS,EACf,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,KAAK,EACf,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,IAEjB,EAAC,WAAW,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAChD,EACb,mBACE,GAAG,EAAE,CAAC,GAA0B,MAAM,IAAI,CAAC,eAAe,GAAG,GAAG,CAAC,EACjE,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE,EACpC,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAEtC,IAAI,CAAC,QAAQ,KACZ,EAAC,QAAQ,QACP,EAAC,QAAQ,IACP,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,EACD,IAAI,CAAC,kBAAkB,KACtB,kBAAY,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,cAAc,EAAE,GAAe,CAC9D,CACQ,CACZ,EACD,YACE,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EACzC,GAAG,EAAE,CAAC,GAAoB,MAAM,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,GACjD,CACI,CACT,EACP;SACH;QAED,QACE,EAAC,IAAI,QACH,EAAC,WAAW,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACtD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.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@import 'mixins/scrollbar';\n\n:host {\n @include scrollbar();\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-avatar--background);\n color: var(--theme-avatar--color);\n }\n\n #avatar-path-background {\n fill: var(--theme-avatar--background);\n }\n\n #avatar-path-person {\n fill:var(--theme-avatar--color);\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 private dropdownElement: HTMLIxDropdownElement;\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 private onDropdownClick(event: MouseEvent) {\n if (event.target === this.dropdownElement) {\n event.preventDefault();\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 ref={(ref: HTMLIxDropdownElement) => (this.dropdownElement = ref)}\n trigger={this.resolveAvatarTrigger()}\n class=\"avatar-dropdown\"\n onClick={(e) => this.onDropdownClick(e)}\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 && (\n <ix-divider onClick={(e) => e.preventDefault()}></ix-divider>\n )}\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"],"version":3}
1	+ {"file":"avatar.js","mappings":"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","names":[],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.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@import 'mixins/scrollbar';\n\n:host {\n @include scrollbar();\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-avatar--background);\n color: var(--theme-avatar--color);\n }\n\n #avatar-path-background {\n fill: var(--theme-avatar--background);\n }\n\n #avatar-path-person {\n fill:var(--theme-avatar--color);\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 .avatar {\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 <div class=\"avatar\">\n {props.image ? (\n <img src={props.image} class=\"avatar-image\"></img>\n ) : (\n <DefaultAvatar initials={props.initials} />\n )}\n </div>\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 private dropdownElement?: HTMLIxDropdownElement;\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, reject) => {\n readTask(() => {\n const button = this.hostElement.shadowRoot!.querySelector('button');\n if (button) {\n resolve(button);\n } else {\n reject(new Error('ix-avatar - trigger element not found'));\n }\n });\n });\n }\n\n private onDropdownClick(event: MouseEvent) {\n if (event.target === this.dropdownElement) {\n event.preventDefault();\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 ref={(ref: HTMLIxDropdownElement) => (this.dropdownElement = ref)}\n trigger={this.resolveAvatarTrigger()}\n class=\"avatar-dropdown\"\n onClick={(e) => this.onDropdownClick(e)}\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 && (\n <ix-divider onClick={(e) => e.preventDefault()}></ix-divider>\n )}\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"],"version":3}

package/components/base-button.js CHANGED Viewed

@@ -48,7 +48,7 @@ const getSpinnerSize = (btnProps) => {
             return 'small';
     }
 };
-function BaseButton(props, children) {
+const BaseButton = (props, children) => {
     var _a, _b, _c;
     const extraClasses = (_a = props.extraClasses) !== null && _a !== void 0 ? _a : {};
     const ariaAttributes = (_b = props.ariaAttributes) !== null && _b !== void 0 ? _b : {};
@@ -63,7 +63,7 @@ function BaseButton(props, children) {
                 [`content-${props.alignment}`]: !!props.alignment,
             } }, children),
         props.afterContent ? props.afterContent : null));
-}
+};
 export { BaseButton as B, getButtonClasses as g };

package/components/base-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"base-button.js","mappings":";;AAAA;;;;;;;;AAcA,MAAM,QAAQ,GAAG,CAAC,OAAe;IAC/B,OAAO,OAAO,CAAC,WAAW,EAAE,KAAK,QAAQ,CAAC,WAAW,EAAE,CAAC;AAC1D,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,OAAe;IAChC,OAAO,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS,CAAC,WAAW,EAAE,CAAC;AAC3D,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,OAAe;IAClC,OAAO,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,CAAC,WAAW,EAAE,CAAC;AAC7D,CAAC,CAAC;MAEW,gBAAgB,GAAG,CAC9B,OAAsB,EACtB,OAAgB,EAChB,KAAc,EACd,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAiB,EACjB,QAAiB;IAEjB,OAAO;QACL,GAAG,EAAE,IAAI;QACT,YAAY,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK;QACrD,oBAAoB,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAI,OAAO,IAAI,CAAC,KAAK;QAC5D,sBAAsB,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,KAAK;QAC9D,aAAa,EAAE,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK;QACvD,qBAAqB,EAAE,SAAS,CAAC,OAAO,CAAC,IAAI,OAAO,IAAI,CAAC,KAAK;QAC9D,uBAAuB,EAAE,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,KAAK;QAChE,eAAe,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK;QAC3D,uBAAuB,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI,OAAO,IAAI,CAAC,KAAK;QAClE,yBAAyB,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,KAAK;QACpE,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,QAAQ;KACnB,CAAC;AACJ,EAAE;AAuBF,MAAM,cAAc,GAAG,CAAC,QAAyB;IAC/C,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;QAClB,OAAO,OAAO,CAAC;KAChB;IAED,QAAQ,QAAQ,CAAC,QAAQ;QACvB,KAAK,IAAI;YACP,OAAO,UAAU,CAAC;QACpB,KAAK,IAAI;YACP,OAAO,SAAS,CAAC;QACnB;YACE,OAAO,OAAO,CAAC;KAClB;AACH,CAAC,CAAC;~~SAEc~~,UAAU,~~CAAC~~,KAAsB,~~EAAE~~,QAAQ;;~~IACzD~~,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE,CAAC;IAE9C,MAAM,cAAc,GAAG,MAAA,KAAK,CAAC,cAAc,mCAAI,EAAE,CAAC;IAClD,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE;QACtD,cAAc,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;KAC1C;IAED,QACE,8BACM,cAAc,IAClB,OAAO,EAAE,CAAC,CAAQ,MAAM,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EACrE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,CAAC,EACnD,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,kCACA,gBAAgB,CACjB,KAAK,CAAC,OAAO,EACb,KAAK,CAAC,OAAO,EACb,KAAK,CAAC,KAAK,EACX,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,CAChC,GACE,YAAY;QAGhB,KAAK,CAAC,OAAO,IACZ,kBAAY,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,SAAc,IAC9D,IAAI;QACP,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,IAC3B,eACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,QAAe,EAC3B,KAAK,EAAE,KAAK,CAAC,SAAS,GACb,IACT,IAAI;QACR,WACE,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI;gBACb,CAAC,WAAW,KAAK,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,SAAS;aAClD,IAEA,QAAQ,CACL;QACL,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CACxC,EACT;AACJ;;;;","names":[],"sources":["src/components/button/base-button.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 */\nimport { h } from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport { ButtonVariant } from './button';\n\nexport type ButtonAlignment = 'center' \| 'start';\n\nconst isDanger = (variant: string) => {\n return variant.toUpperCase() === 'Danger'.toUpperCase();\n};\n\nconst isPrimary = (variant: string) => {\n return variant.toUpperCase() === 'Primary'.toUpperCase();\n};\n\nconst isSecondary = (variant: string) => {\n return variant.toUpperCase() === 'Secondary'.toUpperCase();\n};\n\nexport const getButtonClasses = (\n variant: ButtonVariant,\n outline: boolean,\n ghost: boolean,\n iconOnly = false,\n iconOval = false,\n selected: boolean,\n disabled: boolean\n) => {\n return {\n btn: true,\n 'btn-danger': isDanger(variant) && !outline && !ghost,\n 'btn-outline-danger': isDanger(variant) && outline && !ghost,\n 'btn-invisible-danger': isDanger(variant) && !outline && ghost,\n 'btn-primary': isPrimary(variant) && !outline && !ghost,\n 'btn-outline-primary': isPrimary(variant) && outline && !ghost,\n 'btn-invisible-primary': isPrimary(variant) && !outline && ghost,\n 'btn-secondary': isSecondary(variant) && !outline && !ghost,\n 'btn-outline-secondary': isSecondary(variant) && outline && !ghost,\n 'btn-invisible-secondary': isSecondary(variant) && !outline && ghost,\n 'btn-icon': iconOnly,\n 'btn-oval': iconOval,\n selected: selected,\n disabled: disabled,\n };\n};\n\nexport type BaseButtonProps = {\n type: string;\n variant: ButtonVariant;\n outline: boolean;\n ghost: boolean;\n iconOnly: boolean;\n iconOval: boolean;\n selected: boolean;\n disabled: boolean;\n loading: boolean;\n icon: string;\n onClick?: Function;\n ariaAttributes?: A11yAttributes;\n extraClasses?: { [key: string]: boolean };\n iconSize?: string;\n iconColor?: string;\n alignment?: ButtonAlignment;\n tabIndex?: number;\n afterContent?: any;\n};\n\nconst getSpinnerSize = (btnProps: BaseButtonProps) => {\n if (!btnProps.icon) {\n return 'small';\n }\n\n switch (btnProps.iconSize) {\n case '12':\n return 'xx-small';\n case '16':\n return 'x-small';\n default:\n return 'small';\n }\n};\n\nexport ~~function~~ BaseButton(props: BaseButtonProps, children) {\n const extraClasses = props.extraClasses ?? {};\n\n const ariaAttributes = props.ariaAttributes ?? {};\n if (!ariaAttributes['aria-disabled'] && props.disabled) {\n ariaAttributes['aria-disabled'] = 'true';\n }\n\n return (\n <button\n {...ariaAttributes}\n onClick={(e: Event) => (props.onClick ? props.onClick(e) : undefined)}\n tabindex={props.disabled ? -1 : props.tabIndex ?? 0}\n type={props.type}\n class={{\n ...getButtonClasses(\n props.variant,\n props.outline,\n props.ghost,\n props.iconOnly,\n props.iconOval,\n props.selected,\n props.disabled \|\| props.loading\n ),\n ...extraClasses,\n }}\n >\n {props.loading ? (\n <ix-spinner size={getSpinnerSize(props)} hideTrack></ix-spinner>\n ) : null}\n {props.icon && !props.loading ? (\n <ix-icon\n class=\"icon\"\n name={props.icon}\n size={props.iconSize as any}\n color={props.iconColor}\n ></ix-icon>\n ) : null}\n <div\n class={{\n content: true,\n [`content-${props.alignment}`]: !!props.alignment,\n }}\n >\n {children}\n </div>\n {props.afterContent ? props.afterContent : null}\n </button>\n );\n}\n"],"version":3}
1	+ {"file":"base-button.js","mappings":"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","names":[],"sources":["src/components/button/base-button.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 */\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport { ButtonVariant } from './button';\n\nexport type ButtonAlignment = 'center' \| 'start';\n\nconst isDanger = (variant: string) => {\n return variant.toUpperCase() === 'Danger'.toUpperCase();\n};\n\nconst isPrimary = (variant: string) => {\n return variant.toUpperCase() === 'Primary'.toUpperCase();\n};\n\nconst isSecondary = (variant: string) => {\n return variant.toUpperCase() === 'Secondary'.toUpperCase();\n};\n\nexport const getButtonClasses = (\n variant: ButtonVariant,\n outline: boolean,\n ghost: boolean,\n iconOnly = false,\n iconOval = false,\n selected: boolean,\n disabled: boolean\n) => {\n return {\n btn: true,\n 'btn-danger': isDanger(variant) && !outline && !ghost,\n 'btn-outline-danger': isDanger(variant) && outline && !ghost,\n 'btn-invisible-danger': isDanger(variant) && !outline && ghost,\n 'btn-primary': isPrimary(variant) && !outline && !ghost,\n 'btn-outline-primary': isPrimary(variant) && outline && !ghost,\n 'btn-invisible-primary': isPrimary(variant) && !outline && ghost,\n 'btn-secondary': isSecondary(variant) && !outline && !ghost,\n 'btn-outline-secondary': isSecondary(variant) && outline && !ghost,\n 'btn-invisible-secondary': isSecondary(variant) && !outline && ghost,\n 'btn-icon': iconOnly,\n 'btn-oval': iconOval,\n selected: selected,\n disabled: disabled,\n };\n};\n\nexport type BaseButtonProps = {\n type: string;\n variant: ButtonVariant;\n outline: boolean;\n ghost: boolean;\n iconOnly: boolean;\n iconOval: boolean;\n selected: boolean;\n disabled: boolean;\n loading: boolean;\n icon?: string;\n onClick?: Function;\n ariaAttributes?: A11yAttributes;\n extraClasses?: { [key: string]: boolean };\n iconSize?: string;\n iconColor?: string;\n alignment?: ButtonAlignment;\n tabIndex?: number;\n afterContent?: any;\n};\n\nconst getSpinnerSize = (btnProps: BaseButtonProps) => {\n if (!btnProps.icon) {\n return 'small';\n }\n\n switch (btnProps.iconSize) {\n case '12':\n return 'xx-small';\n case '16':\n return 'x-small';\n default:\n return 'small';\n }\n};\n\nexport const BaseButton: FunctionalComponent<BaseButtonProps> = (\n props: BaseButtonProps,\n children\n) => {\n const extraClasses = props.extraClasses ?? {};\n\n const ariaAttributes = props.ariaAttributes ?? {};\n if (!ariaAttributes['aria-disabled'] && props.disabled) {\n ariaAttributes['aria-disabled'] = 'true';\n }\n\n return (\n <button\n {...ariaAttributes}\n onClick={(e: Event) => (props.onClick ? props.onClick(e) : undefined)}\n tabindex={props.disabled ? -1 : props.tabIndex ?? 0}\n type={props.type}\n class={{\n ...getButtonClasses(\n props.variant,\n props.outline,\n props.ghost,\n props.iconOnly,\n props.iconOval,\n props.selected,\n props.disabled \|\| props.loading\n ),\n ...extraClasses,\n }}\n >\n {props.loading ? (\n <ix-spinner size={getSpinnerSize(props)} hideTrack></ix-spinner>\n ) : null}\n {props.icon && !props.loading ? (\n <ix-icon\n class=\"icon\"\n name={props.icon}\n size={props.iconSize as any}\n color={props.iconColor}\n ></ix-icon>\n ) : null}\n <div\n class={{\n content: true,\n [`content-${props.alignment}`]: !!props.alignment,\n }}\n >\n {children}\n </div>\n {props.afterContent ? props.afterContent : null}\n </button>\n );\n};\n"],"version":3}

package/components/button.js CHANGED Viewed

@@ -20,6 +20,12 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         this.alignment = 'center';
         this.iconSize = '24';
     }
+    handleClick(event) {
+        if (this.disabled || this.loading) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
     componentDidLoad() {
         if (this.type === 'submit') {
             const submitButton = document.createElement('button');
@@ -31,7 +37,10 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         }
     }
     dispatchFormEvents() {
-        if (this.type === 'submit' && this.submitButtonElement) {
+        if (this.type === 'submit' &&
+            this.submitButtonElement &&
+            !this.disabled &&
+            !this.loading) {
             this.submitButtonElement.click();
         }
     }
@@ -51,9 +60,9 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
             type: this.type,
             alignment: this.alignment,
         };
-        return (h(Host, { key: '53b79830d21440398dc1bf7962ae64fc88267171', class: {
+        return (h(Host, { key: 'abc4e56d344d0e643d75881be8af126d1741c71d', class: {
                 disabled: this.disabled || this.loading,
-            } }, h(BaseButton, Object.assign({ key: '8eba954b9c315252ced06a308d6676322b031b90' }, baseButtonProps), h("slot", { key: 'c98df3af0d34f6e2ce4ecce03916b39d4b69d4a7' }))));
+            } }, h(BaseButton, Object.assign({ key: 'b99f950df525f45a94fd44a59591124c803d5254' }, baseButtonProps), h("slot", { key: '0aba994d33f94c9c235ec25da2bea0be1a2b798c' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxButtonStyle0; }
@@ -67,7 +76,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         "icon": [1],
         "alignment": [1],
         "iconSize": [1, "icon-size"]
-    }]);
+    }, [[2, "click", "handleClick"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/components/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"button.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,myrBAAmyrB,CAAC;AACtzrB,uBAAe,SAAS;;MCkBX,MAAM;;;;;uBAKgB,SAAS;uBAKxB,KAAK;qBAKP,KAAK;wBAKe,KAAK;oBAKL,QAAQ;uBAOjB,KAAK;;yBAQQ,QAAQ;wBAGT,IAAI;;~~IAS3C~~,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC1B,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YACtD,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YACpC,YAAY,CAAC,IAAI,GAAG,QAAQ,CAAC;YAC7B,YAAY,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YAC3B,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;YAE3C,IAAI,CAAC,mBAAmB,GAAG,YAAY,CAAC;SACzC;KACF;IAED,kBAAkB;QAChB,~~IAAI~~,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,~~mBAAmB~~,~~EAAE~~;~~YACtD~~,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;SAClC;KACF;IAED,MAAM;QACJ,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE;YACxC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC;QAEF,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;aACxC,IAED,EAAC,UAAU,qEAAK,eAAe,GAC7B,8DAAa,CACF,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/button/button.scss?tag=ix-button&encapsulation=shadow","src/components/button/button.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@import './button-mixin';\n\n@include btn;\n$button-categories: (danger, primary, secondary);\n@each $category in $button-categories {\n @include btn-variant($category);\n @include btn-variant('outline-#{$category}');\n @include btn-variant('invisible-#{$category}', false);\n}\n\n:host {\n min-width: 5rem;\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 { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from './base-button';\n\nexport type ButtonVariant = 'danger' \| 'primary' \| 'secondary';\n\n@Component({\n tag: 'ix-button',\n shadow: true,\n styleUrl: './button.scss',\n})\nexport class Button {\n /\n Button variant\n * @since 2.3.0 - variant danger\n /\n @Prop() variant: ButtonVariant = 'primary';\n\n /\n Outline button\n /\n @Prop() outline = false;\n\n /\n Button with no background or outline\n /\n @Prop() ghost = false;\n\n /\n Disable the button\n /\n @Prop({ reflect: true }) disabled = false;\n\n /\n Type of the button\n /\n @Prop() type: 'button' \| 'submit' = 'button';\n\n /\n Loading button\n \n @since 2.0.0\n /\n @Prop() loading: boolean = false;\n\n /\n Icon name\n /\n @Prop() icon: string;\n\n /* @internal /\n @Prop() alignment: 'center' \| 'start' = 'center';\n\n /* @internal /\n @Prop() iconSize: '12' \| '16' \| '24' = '24';\n\n @Element() hostElement: HTMLIxButtonElement;\n\n /\n Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n */\n submitButtonElement: HTMLButtonElement;\n\n componentDidLoad() {\n if (this.type === 'submit') {\n const submitButton = document.createElement('button');\n submitButton.style.display = 'none';\n submitButton.type = 'submit';\n submitButton.tabIndex = -1;\n this.hostElement.appendChild(submitButton);\n\n this.submitButtonElement = submitButton;\n }\n }\n\n dispatchFormEvents() {\n if (this.type === 'submit' && this.~~submitButtonElement~~) {\n this.submitButtonElement.click();\n }\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: false,\n iconOval: false,\n selected: false,\n disabled: this.disabled \|\| this.loading,\n icon: this.icon,\n iconSize: this.iconSize,\n loading: this.loading,\n onClick: () => this.dispatchFormEvents(),\n type: this.type,\n alignment: this.alignment,\n };\n\n return (\n <Host\n class={{\n disabled: this.disabled \|\| this.loading,\n }}\n >\n <BaseButton {...baseButtonProps}>\n <slot></slot>\n </BaseButton>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"button.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,myrBAAmyrB,CAAC;AACtzrB,uBAAe,SAAS;;MCkBX,MAAM;;;;;uBAKgB,SAAS;uBAKxB,KAAK;qBAKP,KAAK;wBAKe,KAAK;oBAKL,QAAQ;uBAOjB,KAAK;;yBAQQ,QAAQ;wBAGT,IAAI;;IAU3C,WAAW,CAAC,KAAY;QACtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE;YACjC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC1B,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YACtD,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YACpC,YAAY,CAAC,IAAI,GAAG,QAAQ,CAAC;YAC7B,YAAY,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YAC3B,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;YAE3C,IAAI,CAAC,mBAAmB,GAAG,YAAY,CAAC;SACzC;KACF;IAED,kBAAkB;QAChB,IACE,IAAI,CAAC,IAAI,KAAK,QAAQ;YACtB,IAAI,CAAC,mBAAmB;YACxB,CAAC,IAAI,CAAC,QAAQ;YACd,CAAC,IAAI,CAAC,OAAO,EACb;YACA,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;SAClC;KACF;IAED,MAAM;QACJ,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE;YACxC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC;QAEF,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;aACxC,IAED,EAAC,UAAU,qEAAK,eAAe,GAC7B,8DAAa,CACF,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/button/button.scss?tag=ix-button&encapsulation=shadow","src/components/button/button.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@import './button-mixin';\n\n@include btn;\n$button-categories: (danger, primary, secondary);\n@each $category in $button-categories {\n @include btn-variant($category);\n @include btn-variant('outline-#{$category}');\n @include btn-variant('invisible-#{$category}', false);\n}\n\n:host {\n min-width: 5rem;\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 { Component, Element, h, Host, Listen, Prop } from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from './base-button';\n\nexport type ButtonVariant = 'danger' \| 'primary' \| 'secondary';\n\n@Component({\n tag: 'ix-button',\n shadow: true,\n styleUrl: './button.scss',\n})\nexport class Button {\n /\n Button variant\n * @since 2.3.0 - variant danger\n /\n @Prop() variant: ButtonVariant = 'primary';\n\n /\n Outline button\n /\n @Prop() outline = false;\n\n /\n Button with no background or outline\n /\n @Prop() ghost = false;\n\n /\n Disable the button\n /\n @Prop({ reflect: true }) disabled = false;\n\n /\n Type of the button\n /\n @Prop() type: 'button' \| 'submit' = 'button';\n\n /\n Loading button\n \n @since 2.0.0\n /\n @Prop() loading: boolean = false;\n\n /\n Icon name\n /\n @Prop() icon?: string;\n\n /* @internal /\n @Prop() alignment: 'center' \| 'start' = 'center';\n\n /* @internal /\n @Prop() iconSize: '12' \| '16' \| '24' = '24';\n\n @Element() hostElement!: HTMLIxButtonElement;\n\n /\n Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n */\n submitButtonElement?: HTMLButtonElement;\n\n @Listen('click', { capture: true })\n handleClick(event: Event) {\n if (this.disabled \|\| this.loading) {\n event.stopPropagation();\n event.preventDefault();\n }\n }\n\n componentDidLoad() {\n if (this.type === 'submit') {\n const submitButton = document.createElement('button');\n submitButton.style.display = 'none';\n submitButton.type = 'submit';\n submitButton.tabIndex = -1;\n this.hostElement.appendChild(submitButton);\n\n this.submitButtonElement = submitButton;\n }\n }\n\n dispatchFormEvents() {\n if (\n this.type === 'submit' &&\n this.submitButtonElement &&\n !this.disabled &&\n !this.loading\n ) {\n this.submitButtonElement.click();\n }\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: false,\n iconOval: false,\n selected: false,\n disabled: this.disabled \|\| this.loading,\n icon: this.icon,\n iconSize: this.iconSize,\n loading: this.loading,\n onClick: () => this.dispatchFormEvents(),\n type: this.type,\n alignment: this.alignment,\n };\n\n return (\n <Host\n class={{\n disabled: this.disabled \|\| this.loading,\n }}\n >\n <BaseButton {...baseButtonProps}>\n <slot></slot>\n </BaseButton>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/card-accordion.js CHANGED Viewed

@@ -38,8 +38,8 @@ const CardAccordion = /*@__PURE__*/ proxyCustomElement(class CardAccordion exten
         setTimeout(() => {
             const rect = this.expandedContent.getBoundingClientRect();
             if (rect.bottom > window.innerHeight) {
-                this.hostElement.shadowRoot
-                    .querySelector('.expand-content')
+                this.hostElement
+                    .shadowRoot.querySelector('.expand-content')
                     .scrollIntoView(false);
             }
         }, 150);
@@ -48,13 +48,13 @@ const CardAccordion = /*@__PURE__*/ proxyCustomElement(class CardAccordion exten
         this.onInitialExpandChange();
     }
     render() {
-        return (h(Host, { key: 'bc39054c9b50f4a1de3ebb720553d667f30e7420', slot: "card-accordion" }, h("button", { key: '39a8f4b977ca5d4f797a12f4d06a09e7a2909e80', tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId() }, h("ix-icon", { key: '2d75d5fc08d4d79e1d70fef36440dba4ee5b62c9', name: 'chevron-right-small', class: {
+        return (h(Host, { key: '73d3ca21554724bf051ca8fe44365815cd2faf64', slot: "card-accordion" }, h("button", { key: 'a3a71b2ebdd46c3e64fcc6b4df96e134701a9662', tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId() }, h("ix-icon", { key: '3713fc76176dc2b8ee99188a87c3de29851d567b', name: 'chevron-right-small', class: {
                 'expand-icon': true,
                 show: this.expandContent,
-            } })), h("div", { key: 'd2b662f006a69d90e2353922e377a1e83830de70', class: {
+            } })), h("div", { key: '3081275d7694a98b35604cc9b5dd73c203b10426', class: {
                 'expand-content': true,
                 show: this.expandContent,
-            } }, h("div", { key: '7cedf82588afb804a626b1ba1c1cb9147c76306a', class: "expand-content-inner" }, h("div", { key: '04b85a19f6354fd725b634748e7ff7a5c58dd7cb', class: "expand-content-body" }, h("slot", { key: '732c33dbaa591432e14f74eb305b7e7c526d4e49' })), h("div", { key: '83291f55a13f8a8bebddb4d24c81cfc1a090f1f4', class: "expand-content-footer" })))));
+            } }, h("div", { key: 'ebad33d68b17070c4a3c133763279233d8984d1a', class: "expand-content-inner" }, h("div", { key: '32b3e459056717e3653f46e1b08e6f66f87a3143', class: "expand-content-body" }, h("slot", { key: 'dbd2b6a198ca95727f34ae9160ee74dc313296d9' })), h("div", { key: '3d17c4534cf5bcf6366576e33c68292ed2765e06', class: "expand-content-footer" })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/card-accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"card-accordion.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,6tFAA6tF,CAAC;AACvvF,8BAAe,gBAAgB;;ACW/B,IAAI,kBAAkB,GAAG,CAAC,CAAC;AAC3B,MAAM,iBAAiB,GAAG,CAAC,SAAiB,gBAAgB;IAC1D,OAAO,CAAC,MAAM,EAAE,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,CAAC,CAAC;MAeW,aAAa;;;;;;wBAKL,KAAK;6BASC,KAAK;;IAG9B,qBAAqB;QACnB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KACrC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC,~~UAAU~~,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;~~KACrE~~;IAED,mBAAmB,CAAC,KAAY;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;QACzC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,MAAM,EAAE,IAAI,CAAC,aAAa;YAC1B,WAAW,EAAE,KAAK;SACnB,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,6BAA6B,EAAE,CAAC;SACtC;KACF;IAEO,6BAA6B;QACnC,UAAU,CAAC;YACT,MAAM,IAAI,GAAG,IAAI,CAAC,~~eAAe~~,CAAC,qBAAqB,EAAE,CAAC;~~YAC1D~~,IAAI,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE;gBACpC,IAAI,CAAC,WAAW,CAAC,~~UAAU;qBACxB,~~aAAa,CAAC,iBAAiB,~~CAAC~~;~~qBAChC~~,cAAc,CAAC,KAAK,CAAC,CAAC;aAC1B;SACF,EAAE,GAAG,CAAC,CAAC;KACT;IAED,iBAAiB;QACf,IAAI,CAAC,qBAAqB,EAAE,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,gBAAgB,IACzB,+DACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,EAC1D,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,EACnD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,aAAa,mBAClB,iBAAiB,EAAE,IAElC,gEACE,IAAI,EAAE,qBAAqB,EAC3B,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,IAAI,EAAE,IAAI,CAAC,aAAa;aACzB,GACQ,CACJ,EACT,4DACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,IAAI,EAAE,IAAI,CAAC,aAAa;aACzB,IAED,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,8DAAa,CACT,EACN,4DAAK,KAAK,EAAC,uBAAuB,GAAO,CACrC,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/card-accordion/card-accordion.scss?tag=ix-card-accordion&encapsulation=shadow","src/components/card-accordion/card-accordion.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@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n position: relative;\n flex-direction: column;\n width: 100%;\n transition: var(--theme-default-time) ease-in-out;\n\n .expand-action {\n all: unset;\n display: flex;\n position: relative;\n\n appearance: button;\n\n height: 2.5rem;\n width: 100%;\n\n background-color: var(--theme-color-component-1);\n align-items: center;\n justify-content: flex-start;\n\n &:hover {\n background: var(--theme-color-component-1--hover);\n }\n\n &:active {\n background: var(--theme-color-component-1--active);\n }\n\n @include focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: var(--theme-btn--focus--outline-offset);\n }\n }\n\n .expand-action::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: var(--ix-card-background);\n z-index: -1;\n }\n\n .expand-action:not(.show),\n .expand-action:not(.show)::before {\n border-bottom-left-radius: var(--theme-default-border-radius);\n border-bottom-right-radius: var(--theme-default-border-radius);\n }\n\n .expand-icon {\n margin-left: 0.5rem;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .expand-icon.show {\n transform: rotate(90deg);\n }\n\n .expand-content {\n display: grid;\n position: relative;\n grid-template-rows: 0fr;\n transition: var(--theme-default-time) ease-in-out;\n width: 100%;\n max-height: 14.75rem;\n opacity: 0;\n background-color: var(--theme-color-component-1);\n }\n\n .expand-content.show {\n grid-template-rows: 14.75rem;\n opacity: 1;\n }\n\n .expand-content-inner {\n position: relative;\n height: 100%;\n overflow: hidden;\n }\n\n .expand-content.show .expand-content-body {\n display: none;\n overflow: hidden;\n color: var(--theme-color-std-text);\n }\n\n .expand-content.show .expand-content-body {\n display: block;\n overflow: auto;\n height: calc(100% - 1rem);\n }\n\n .expand-content-footer {\n display: block;\n position: relative;\n width: 100%;\n height: 1rem;\n\n margin-top: auto;\n margin-bottom: 0px;\n\n background-color: var(--theme-color-component-1);\n border-bottom-left-radius: var(--theme-default-border-radius);\n border-bottom-right-radius: var(--theme-default-border-radius);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\n\nlet accordionControlId = 0;\nconst getAriaControlsId = (prefix: string = 'expand-content') => {\n return [prefix, accordionControlId++].join('-');\n};\n\nexport type CardAccordionExpandChangeEvent = {\n expand: boolean;\n nativeEvent: Event;\n};\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-card-accordion',\n styleUrl: 'card-accordion.scss',\n shadow: true,\n})\nexport class CardAccordion {\n /\n Collapse the card\n * @since 2.1.0\n /\n @Prop() collapse = false;\n\n @Element() hostElement: HTMLIxCardAccordionElement;\n\n /\n @internal\n */\n @Event() accordionExpand: EventEmitter<CardAccordionExpandChangeEvent>;\n\n @State() expandContent = false;\n\n @Watch('collapse')\n onInitialExpandChange() {\n this.expandContent = !this.collapse;\n }\n\n get expandedContent() {\n return this.hostElement.shadowRoot.querySelector('.expand-content');\n }\n\n onExpandActionClick(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n this.expandContent = !this.expandContent;\n this.accordionExpand.emit({\n expand: this.expandContent,\n nativeEvent: event,\n });\n\n if (this.expandContent) {\n this.scrollExpandedContentIntoView();\n }\n }\n\n private scrollExpandedContentIntoView() {\n setTimeout(() => {\n const rect = this.expandedContent.getBoundingClientRect();\n if (rect.bottom > window.innerHeight) {\n this.hostElement~~.shadowRoot~~\n .querySelector('.expand-content')\n .scrollIntoView(false);\n }\n }, 150);\n }\n\n componentWillLoad() {\n this.onInitialExpandChange();\n }\n\n render() {\n return (\n <Host slot=\"card-accordion\">\n <button\n tabIndex={0}\n class={{ 'expand-action': true, show: this.expandContent }}\n onClick={(event) => this.onExpandActionClick(event)}\n role=\"button\"\n type=\"button\"\n aria-expanded={this.expandContent}\n aria-controls={getAriaControlsId()}\n >\n <ix-icon\n name={'chevron-right-small'}\n class={{\n 'expand-icon': true,\n show: this.expandContent,\n }}\n ></ix-icon>\n </button>\n <div\n class={{\n 'expand-content': true,\n show: this.expandContent,\n }}\n >\n <div class=\"expand-content-inner\">\n <div class=\"expand-content-body\">\n <slot></slot>\n </div>\n <div class=\"expand-content-footer\"></div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"card-accordion.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,6tFAA6tF,CAAC;AACvvF,8BAAe,gBAAgB;;ACW/B,IAAI,kBAAkB,GAAG,CAAC,CAAC;AAC3B,MAAM,iBAAiB,GAAG,CAAC,SAAiB,gBAAgB;IAC1D,OAAO,CAAC,MAAM,EAAE,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,CAAC,CAAC;MAeW,aAAa;;;;;;wBAKL,KAAK;6BASC,KAAK;;IAG9B,qBAAqB;QACnB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KACrC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;KACtE;IAED,mBAAmB,CAAC,KAAY;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;QACzC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,MAAM,EAAE,IAAI,CAAC,aAAa;YAC1B,WAAW,EAAE,KAAK;SACnB,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,6BAA6B,EAAE,CAAC;SACtC;KACF;IAEO,6BAA6B;QACnC,UAAU,CAAC;YACT,MAAM,IAAI,GAAG,IAAI,CAAC,eAAgB,CAAC,qBAAqB,EAAE,CAAC;YAC3D,IAAI,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE;gBACpC,IAAI,CAAC,WAAW;qBACb,UAAW,CAAC,aAAa,CAAC,iBAAiB,CAAE;qBAC7C,cAAc,CAAC,KAAK,CAAC,CAAC;aAC1B;SACF,EAAE,GAAG,CAAC,CAAC;KACT;IAED,iBAAiB;QACf,IAAI,CAAC,qBAAqB,EAAE,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,gBAAgB,IACzB,+DACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,EAC1D,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,EACnD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,aAAa,mBAClB,iBAAiB,EAAE,IAElC,gEACE,IAAI,EAAE,qBAAqB,EAC3B,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,IAAI,EAAE,IAAI,CAAC,aAAa;aACzB,GACQ,CACJ,EACT,4DACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,IAAI,EAAE,IAAI,CAAC,aAAa;aACzB,IAED,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,8DAAa,CACT,EACN,4DAAK,KAAK,EAAC,uBAAuB,GAAO,CACrC,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/card-accordion/card-accordion.scss?tag=ix-card-accordion&encapsulation=shadow","src/components/card-accordion/card-accordion.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@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n position: relative;\n flex-direction: column;\n width: 100%;\n transition: var(--theme-default-time) ease-in-out;\n\n .expand-action {\n all: unset;\n display: flex;\n position: relative;\n\n appearance: button;\n\n height: 2.5rem;\n width: 100%;\n\n background-color: var(--theme-color-component-1);\n align-items: center;\n justify-content: flex-start;\n\n &:hover {\n background: var(--theme-color-component-1--hover);\n }\n\n &:active {\n background: var(--theme-color-component-1--active);\n }\n\n @include focus-visible {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: var(--theme-btn--focus--outline-offset);\n }\n }\n\n .expand-action::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: var(--ix-card-background);\n z-index: -1;\n }\n\n .expand-action:not(.show),\n .expand-action:not(.show)::before {\n border-bottom-left-radius: var(--theme-default-border-radius);\n border-bottom-right-radius: var(--theme-default-border-radius);\n }\n\n .expand-icon {\n margin-left: 0.5rem;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .expand-icon.show {\n transform: rotate(90deg);\n }\n\n .expand-content {\n display: grid;\n position: relative;\n grid-template-rows: 0fr;\n transition: var(--theme-default-time) ease-in-out;\n width: 100%;\n max-height: 14.75rem;\n opacity: 0;\n background-color: var(--theme-color-component-1);\n }\n\n .expand-content.show {\n grid-template-rows: 14.75rem;\n opacity: 1;\n }\n\n .expand-content-inner {\n position: relative;\n height: 100%;\n overflow: hidden;\n }\n\n .expand-content.show .expand-content-body {\n display: none;\n overflow: hidden;\n color: var(--theme-color-std-text);\n }\n\n .expand-content.show .expand-content-body {\n display: block;\n overflow: auto;\n height: calc(100% - 1rem);\n }\n\n .expand-content-footer {\n display: block;\n position: relative;\n width: 100%;\n height: 1rem;\n\n margin-top: auto;\n margin-bottom: 0px;\n\n background-color: var(--theme-color-component-1);\n border-bottom-left-radius: var(--theme-default-border-radius);\n border-bottom-right-radius: var(--theme-default-border-radius);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\n\nlet accordionControlId = 0;\nconst getAriaControlsId = (prefix: string = 'expand-content') => {\n return [prefix, accordionControlId++].join('-');\n};\n\nexport type CardAccordionExpandChangeEvent = {\n expand: boolean;\n nativeEvent: Event;\n};\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-card-accordion',\n styleUrl: 'card-accordion.scss',\n shadow: true,\n})\nexport class CardAccordion {\n /\n Collapse the card\n * @since 2.1.0\n /\n @Prop() collapse = false;\n\n @Element() hostElement!: HTMLIxCardAccordionElement;\n\n /\n @internal\n */\n @Event() accordionExpand!: EventEmitter<CardAccordionExpandChangeEvent>;\n\n @State() expandContent = false;\n\n @Watch('collapse')\n onInitialExpandChange() {\n this.expandContent = !this.collapse;\n }\n\n get expandedContent() {\n return this.hostElement.shadowRoot!.querySelector('.expand-content');\n }\n\n onExpandActionClick(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n this.expandContent = !this.expandContent;\n this.accordionExpand.emit({\n expand: this.expandContent,\n nativeEvent: event,\n });\n\n if (this.expandContent) {\n this.scrollExpandedContentIntoView();\n }\n }\n\n private scrollExpandedContentIntoView() {\n setTimeout(() => {\n const rect = this.expandedContent!.getBoundingClientRect();\n if (rect.bottom > window.innerHeight) {\n this.hostElement\n .shadowRoot!.querySelector('.expand-content')!\n .scrollIntoView(false);\n }\n }, 150);\n }\n\n componentWillLoad() {\n this.onInitialExpandChange();\n }\n\n render() {\n return (\n <Host slot=\"card-accordion\">\n <button\n tabIndex={0}\n class={{ 'expand-action': true, show: this.expandContent }}\n onClick={(event) => this.onExpandActionClick(event)}\n role=\"button\"\n type=\"button\"\n aria-expanded={this.expandContent}\n aria-controls={getAriaControlsId()}\n >\n <ix-icon\n name={'chevron-right-small'}\n class={{\n 'expand-icon': true,\n show: this.expandContent,\n }}\n ></ix-icon>\n </button>\n <div\n class={{\n 'expand-content': true,\n show: this.expandContent,\n }}\n >\n <div class=\"expand-content-inner\">\n <div class=\"expand-content-body\">\n <slot></slot>\n </div>\n <div class=\"expand-content-footer\"></div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/card-content.js CHANGED Viewed

@@ -10,7 +10,7 @@ const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends H
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '816fee4fedc0535d0a8991bf6a58a97fecd27069' }, h("slot", { key: '136f2bfa5fd08ff95aa0d3f7a2bed5297aaf57e5' })));
+        return (h(Host, { key: 'b158a08d7ca4779af659d4fa143e047dba41088e' }, h("slot", { key: 'cd40d10e8700f29de2fb71af295d477a07bb974a' })));
     }
     static get style() { return IxCardContentStyle0; }
 }, [1, "ix-card-content"]);

package/components/card-title.js CHANGED Viewed

@@ -10,7 +10,7 @@ const CardHeader = /*@__PURE__*/ proxyCustomElement(class CardHeader extends HTM
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '6e01cd85f5ad2c48dcdf9d2667fd3dd0e8b1cba8' }, h("slot", { key: '79c247b6f82caaf11fdb99168a007f29ba5b4042' }), h("div", { key: '02fe6d5df2e6431ea830fc3398883ec709ba3e59', class: "title-actions" }, h("slot", { key: '86289b8e1e3eee04d9331788cce835c8796197a3', name: "title-actions" }))));
+        return (h(Host, { key: 'b1e7a55ef1edcdf510871c5bdb0324a94a23f020' }, h("slot", { key: 'a31d4217aec1ed9759c9cb5a0b4a2efe5c8956f8' }), h("div", { key: '228f8069d056aae364cf3d98f21c4c06abc9c9f1', class: "title-actions" }, h("slot", { key: '2684711f7aed902d106b511daf538cb02bd8643f', name: "title-actions" }))));
     }
     static get style() { return IxCardTitleStyle0; }
 }, [1, "ix-card-title"]);

package/components/card.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const cardCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;align-self:flex-start;overflow:hidden;width:20rem;border:1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));border-radius:var(--theme-default-border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .card-content{display:block;position:relative;flex-shrink:0;flex-grow:1;width:100%;height:calc(100% - 2rem);background-color:var(--ix-card-background, transparent);border-top-left-radius:var(--theme-default-border-radius);border-top-right-radius:var(--theme-default-border-radius)}:host .card-footer{display:flex;position:relative;width:100%}:host(.card-insight),:host(.card-outline){--ix-card-background:transparent;--ix-card-border-color:var(--theme-color-soft-bdr)}:host(.card-notification),:host(.card-filled){--ix-card-background:var(--theme-color-component-1)}:host(.card-alarm){--ix-card-background:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}:host(.card-critical){--ix-card-background:var(--theme-color-critical);color:var(--theme-color-critical--contrast)}:host(.card-warning){--ix-card-background:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}:host(.card-success){--ix-card-background:var(--theme-color-success);color:var(--theme-color-success--contrast)}:host(.card-info){--ix-card-background:var(--theme-color-info);color:var(--theme-color-info--contrast)}:host(.card-neutral){--ix-card-background:var(--theme-color-neutral);color:var(--theme-color-neutral--contrast)}:host(.card-primary){--ix-card-background:var(--theme-color-primary);color:var(--theme-color-neutral--contrast)}:host(:not(.card-insight)){--ix-card-border-color:transparent}:host(.card-insight:hover){--ix-card-background:var(--theme-color-ghost--hover)}:host(.card-notification:hover){--ix-card-background:var(--theme-color-component-1--hover)}:host(.card-alarm:hover){--ix-card-background:var(--theme-color-alarm--hover)}:host(.card-critical:hover){--ix-card-background:var(--theme-color-critical--hover)}:host(.card-warning:hover){--ix-card-background:var(--theme-color-warning--hover)}:host(.card-success:hover){--ix-card-background:var(--theme-color-success--hover)}:host(.card-info:hover){--ix-card-background:var(--theme-color-info--hover)}:host(.card-neutral:hover){--ix-card-background:var(--theme-color-neutral--hover)}:host(.card-primary:hover){--ix-card-background:var(--theme-color-primary--hover)}:host(.card-insight:active){--ix-card-background:var(--theme-color-ghost--active)}:host(.card-notification:active){--ix-card-background:var(--theme-color-component-1--active)}:host(.card-alarm:active){--ix-card-background:var(--theme-color-alarm--active)}:host(.card-critical:active){--ix-card-background:var(--theme-color-critical--active)}:host(.card-warning:active){--ix-card-background:var(--theme-color-warning--active)}:host(.card-success:active){--ix-card-background:var(--theme-color-success--active)}:host(.card-info:active){--ix-card-background:var(--theme-color-info--active)}:host(.card-neutral:active){--ix-card-background:var(--theme-color-neutral--active)}:host(.card-primary:active){--ix-card-background:var(--theme-color-primary--active)}:host(.selected){--ix-card-border-color:var(--theme-color-dynamic)}:host(.selected.card-insight){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-notification){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-alarm){--ix-card-background:var(--theme-color-alarm--active)}:host(.selected.card-critical){--ix-card-background:var(--theme-color-critical--active)}:host(.selected.card-warning){--ix-card-background:var(--theme-color-warning--active)}:host(.selected.card-success){--ix-card-background:var(--theme-color-success--active)}:host(.selected.card-info){--ix-card-background:var(--theme-color-info--active)}:host(.selected.card-neutral){--ix-card-background:var(--theme-color-neutral--active)}:host(.selected.card-primary){--ix-card-background:var(--theme-color-primary--active)}";
+const cardCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;align-self:flex-start;overflow:hidden;width:20rem;border:1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));border-radius:var(--theme-default-border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .card-content{display:block;position:relative;flex-shrink:0;flex-grow:1;width:100%;height:calc(100% - 2rem);background-color:var(--ix-card-background, transparent);border-top-left-radius:var(--theme-default-border-radius);border-top-right-radius:var(--theme-default-border-radius)}:host .card-footer{display:flex;position:relative;width:100%}:host(.card-insight),:host(.card-outline){--ix-card-background:var(--theme-color-ghost);--ix-card-border-color:var(--theme-color-soft-bdr)}:host(.card-insight) ::slotted(ix-card-accordion),:host(.card-outline) ::slotted(ix-card-accordion){color:var(--theme-color-primary)}:host(.card-notification),:host(.card-filled){--ix-card-background:var(--theme-color-component-1)}:host(.card-notification) ::slotted(ix-card-accordion),:host(.card-filled) ::slotted(ix-card-accordion){color:var(--theme-color-primary)}:host(.card-alarm){--ix-card-background:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}:host(.card-critical){--ix-card-background:var(--theme-color-critical);color:var(--theme-color-critical--contrast)}:host(.card-warning){--ix-card-background:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}:host(.card-success){--ix-card-background:var(--theme-color-success);color:var(--theme-color-success--contrast)}:host(.card-info){--ix-card-background:var(--theme-color-info);color:var(--theme-color-info--contrast)}:host(.card-neutral){--ix-card-background:var(--theme-color-neutral);color:var(--theme-color-neutral--contrast)}:host(.card-primary){--ix-card-background:var(--theme-color-primary);color:var(--theme-color-neutral--contrast)}:host(:not(.card-insight,.card-outline)){--ix-card-border-color:transparent}:host(.card-insight:hover),:host(.card-outline:hover){--ix-card-background:var(--theme-color-ghost--hover)}:host(.card-notification:hover),:host(.card-filled:hover){--ix-card-background:var(--theme-color-component-1--hover)}:host(.card-alarm:hover){--ix-card-background:var(--theme-color-alarm--hover)}:host(.card-critical:hover){--ix-card-background:var(--theme-color-critical--hover)}:host(.card-warning:hover){--ix-card-background:var(--theme-color-warning--hover)}:host(.card-success:hover){--ix-card-background:var(--theme-color-success--hover)}:host(.card-info:hover){--ix-card-background:var(--theme-color-info--hover)}:host(.card-neutral:hover){--ix-card-background:var(--theme-color-neutral--hover)}:host(.card-primary:hover){--ix-card-background:var(--theme-color-primary--hover)}:host(.card-insight:active),:host(.card-outline:active){--ix-card-background:var(--theme-color-ghost--active)}:host(.card-notification:active),:host(.card-filled:active){--ix-card-background:var(--theme-color-component-1--active)}:host(.card-alarm:active){--ix-card-background:var(--theme-color-alarm--active)}:host(.card-critical:active){--ix-card-background:var(--theme-color-critical--active)}:host(.card-warning:active){--ix-card-background:var(--theme-color-warning--active)}:host(.card-success:active){--ix-card-background:var(--theme-color-success--active)}:host(.card-info:active){--ix-card-background:var(--theme-color-info--active)}:host(.card-neutral:active){--ix-card-background:var(--theme-color-neutral--active)}:host(.card-primary:active){--ix-card-background:var(--theme-color-primary--active)}:host(.selected){--ix-card-border-color:var(--theme-color-dynamic)}:host(.selected.card-insight),:host(.selected.card-outline){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-notification),:host(.selected.card-filled){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-alarm){--ix-card-background:var(--theme-color-alarm--active)}:host(.selected.card-critical){--ix-card-background:var(--theme-color-critical--active)}:host(.selected.card-warning){--ix-card-background:var(--theme-color-warning--active)}:host(.selected.card-success){--ix-card-background:var(--theme-color-success--active)}:host(.selected.card-info){--ix-card-background:var(--theme-color-info--active)}:host(.selected.card-neutral){--ix-card-background:var(--theme-color-neutral--active)}:host(.selected.card-primary){--ix-card-background:var(--theme-color-primary--active)}";
 const IxCardStyle0 = cardCss;
 const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
@@ -9,13 +9,13 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
         this.__registerHost();
         this.__attachShadow();
         this.variant = 'insight';
-        this.selected = undefined;
+        this.selected = false;
     }
     render() {
-        return (h(Host, { key: '4d096be9c3db2847204633f22624296d892e2fb9', class: {
+        return (h(Host, { key: '47a06ae7be967b6077ec9851b22724f39f08bdb5', class: {
                 selected: this.selected,
                 [`card-${this.variant}`]: true,
-            } }, h("div", { key: 'e80707eb333158ac4f90fa0feaaede7309fa3567', class: "card-content" }, h("slot", { key: '50b6d4885936ff438c4fcab7c7b1b9d5e54137f3' })), h("div", { key: 'c964e703c4c7783fd30a889838583d8e0426994b', class: "card-footer" }, h("slot", { key: 'df4b7c7e9f8fbdea42c2e9b657dc6e4488ea4562', name: "card-accordion" }))));
+            } }, h("div", { key: '3bd791183108512f4f150e4223c6b3487104d9f6', class: "card-content" }, h("slot", { key: '7b500f330a7c751385deadaabf9f0a4fbaff7444' })), h("div", { key: '700082bfb35c5ecb56d70502500112e1232f2afb', class: "card-footer" }, h("slot", { key: 'bd156f9ac6728f9cf5a92bb8a454083a50a40cce', name: "card-accordion" }))));
     }
     get hostElement() { return this; }
     static get style() { return IxCardStyle0; }

package/components/card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"card.js","mappings":";;AAAA,MAAM,OAAO,GAAG,~~ipJAAipJ~~,CAAC;~~AAClqJ~~,qBAAe,OAAO;;MCuBT,IAAI;;;;;uBAOgB,SAAS~~;;;IAOxC~~,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI;aAC/B,IAED,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACN,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/card/card.scss?tag=ix-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: flex-start;\n align-self: flex-start;\n overflow: hidden;\n\n width: 20rem;\n\n border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));\n border-radius: var(--theme-default-border-radius);\n\n .card-content {\n display: block;\n position: relative;\n flex-shrink: 0;\n flex-grow: 1;\n width: 100%;\n height: calc(100% - 2rem);\n background-color: var(--ix-card-background, transparent);\n border-top-left-radius: var(--theme-default-border-radius);\n border-top-right-radius: var(--theme-default-border-radius);\n }\n\n .card-footer {\n display: flex;\n position: relative;\n width: 100%;\n }\n}\n\n:host(.card-insight), :host(.card-outline) {\n --ix-card-background: ~~transparent~~;\n --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-notification), :host(.card-filled) {\n --ix-card-background: var(--theme-color-component-1);\n}\n\n:host(.card-alarm) {\n --ix-card-background: var(--theme-color-alarm);\n color: var(--theme-color-alarm--contrast);\n}\n\n:host(.card-critical) {\n --ix-card-background: var(--theme-color-critical);\n color: var(--theme-color-critical--contrast);\n}\n\n:host(.card-warning) {\n --ix-card-background: var(--theme-color-warning);\n color: var(--theme-color-warning--contrast);\n}\n\n:host(.card-success) {\n --ix-card-background: var(--theme-color-success);\n color: var(--theme-color-success--contrast);\n}\n\n:host(.card-info) {\n --ix-card-background: var(--theme-color-info);\n color: var(--theme-color-info--contrast);\n}\n\n:host(.card-neutral) {\n --ix-card-background: var(--theme-color-neutral);\n color: var(--theme-color-neutral--contrast);\n}\n\n:host(.card-primary) {\n --ix-card-background: var(--theme-color-primary);\n color: var(--theme-color-neutral--contrast);\n}\n\n:host(:not(.card-insight)) {\n --ix-card-border-color: transparent;\n}\n\n// ### Hover ###\n\n:host(.card-insight:hover) {\n --ix-card-background: var(--theme-color-ghost--hover);\n}\n\n:host(.card-notification:hover) {\n --ix-card-background: var(--theme-color-component-1--hover);\n}\n\n:host(.card-alarm:hover) {\n --ix-card-background: var(--theme-color-alarm--hover);\n}\n\n:host(.card-critical:hover) {\n --ix-card-background: var(--theme-color-critical--hover);\n}\n\n:host(.card-warning:hover) {\n --ix-card-background: var(--theme-color-warning--hover);\n}\n\n:host(.card-success:hover) {\n --ix-card-background: var(--theme-color-success--hover);\n}\n\n:host(.card-info:hover) {\n --ix-card-background: var(--theme-color-info--hover);\n}\n\n:host(.card-neutral:hover) {\n --ix-card-background: var(--theme-color-neutral--hover);\n}\n\n:host(.card-primary:hover) {\n --ix-card-background: var(--theme-color-primary--hover);\n}\n\n// ### Active ###\n\n:host(.card-insight:active) {\n --ix-card-background: var(--theme-color-ghost--active);\n}\n\n:host(.card-notification:active) {\n --ix-card-background: var(--theme-color-component-1--active);\n}\n\n:host(.card-alarm:active) {\n --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.card-critical:active) {\n --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.card-warning:active) {\n --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.card-success:active) {\n --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.card-info:active) {\n --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.card-neutral:active) {\n --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.card-primary:active) {\n --ix-card-background: var(--theme-color-primary--active);\n}\n\n// ### Selected ###\n\n:host(.selected) {\n --ix-card-border-color: var(--theme-color-dynamic);\n}\n\n:host(.selected.card-insight) {\n --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-notification) {\n --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-alarm) {\n --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.selected.card-critical) {\n --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.selected.card-warning) {\n --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.selected.card-success) {\n --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.selected.card-info) {\n --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.selected.card-neutral) {\n --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.selected.card-primary) {\n --ix-card-background: var(--theme-color-primary--active);\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n//TODO(IX-1601): Remove insight, notification in 3.0\nexport type CardVariant =\n \| 'insight'\n \| 'notification'\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'primary'\n \| 'outline'\n \| 'filled';\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\nexport class Card {\n @Element() hostElement: HTMLIxCardElement;\n\n /\n Card variant\n * @deprecated variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead.\n /\n @Prop() variant: CardVariant = 'insight';\n\n /\n @since 2.1.0\n */\n @Prop() selected: boolean;\n\n render() {\n return (\n <Host\n class={{\n selected: this.selected,\n [`card-${this.variant}`]: true,\n }}\n >\n <div class=\"card-content\">\n <slot></slot>\n </div>\n <div class=\"card-footer\">\n <slot name=\"card-accordion\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"card.js","mappings":";;AAAA,MAAM,OAAO,GAAG,imKAAimK,CAAC;AAClnK,qBAAe,OAAO;;MCuBT,IAAI;;;;;uBAOgB,SAAS;wBAKZ,KAAK;;IAEjC,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI;aAC/B,IAED,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACN,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/card/card.scss?tag=ix-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: flex-start;\n align-self: flex-start;\n overflow: hidden;\n\n width: 20rem;\n\n border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));\n border-radius: var(--theme-default-border-radius);\n\n .card-content {\n display: block;\n position: relative;\n flex-shrink: 0;\n flex-grow: 1;\n width: 100%;\n height: calc(100% - 2rem);\n background-color: var(--ix-card-background, transparent);\n border-top-left-radius: var(--theme-default-border-radius);\n border-top-right-radius: var(--theme-default-border-radius);\n }\n\n .card-footer {\n display: flex;\n position: relative;\n width: 100%;\n }\n}\n\n@mixin accordionChevronColorPrimary {\n ::slotted(ix-card-accordion) {\n color: var(--theme-color-primary);\n }\n}\n\n:host(.card-insight),\n:host(.card-outline) {\n @include accordionChevronColorPrimary;\n\n --ix-card-background: var(--theme-color-ghost);\n --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-notification),\n:host(.card-filled) {\n @include accordionChevronColorPrimary;\n\n --ix-card-background: var(--theme-color-component-1);\n}\n\n:host(.card-alarm) {\n --ix-card-background: var(--theme-color-alarm);\n color: var(--theme-color-alarm--contrast);\n}\n\n:host(.card-critical) {\n --ix-card-background: var(--theme-color-critical);\n color: var(--theme-color-critical--contrast);\n}\n\n:host(.card-warning) {\n --ix-card-background: var(--theme-color-warning);\n color: var(--theme-color-warning--contrast);\n}\n\n:host(.card-success) {\n --ix-card-background: var(--theme-color-success);\n color: var(--theme-color-success--contrast);\n}\n\n:host(.card-info) {\n --ix-card-background: var(--theme-color-info);\n color: var(--theme-color-info--contrast);\n}\n\n:host(.card-neutral) {\n --ix-card-background: var(--theme-color-neutral);\n color: var(--theme-color-neutral--contrast);\n}\n\n:host(.card-primary) {\n --ix-card-background: var(--theme-color-primary);\n color: var(--theme-color-neutral--contrast);\n}\n\n:host(:not(.card-insight, .card-outline)) {\n --ix-card-border-color: transparent;\n}\n\n// ### Hover ###\n\n:host(.card-insight:hover),\n:host(.card-outline:hover) {\n --ix-card-background: var(--theme-color-ghost--hover);\n}\n\n:host(.card-notification:hover),\n:host(.card-filled:hover) {\n --ix-card-background: var(--theme-color-component-1--hover);\n}\n\n:host(.card-alarm:hover) {\n --ix-card-background: var(--theme-color-alarm--hover);\n}\n\n:host(.card-critical:hover) {\n --ix-card-background: var(--theme-color-critical--hover);\n}\n\n:host(.card-warning:hover) {\n --ix-card-background: var(--theme-color-warning--hover);\n}\n\n:host(.card-success:hover) {\n --ix-card-background: var(--theme-color-success--hover);\n}\n\n:host(.card-info:hover) {\n --ix-card-background: var(--theme-color-info--hover);\n}\n\n:host(.card-neutral:hover) {\n --ix-card-background: var(--theme-color-neutral--hover);\n}\n\n:host(.card-primary:hover) {\n --ix-card-background: var(--theme-color-primary--hover);\n}\n\n// ### Active ###\n\n:host(.card-insight:active),\n:host(.card-outline:active) {\n --ix-card-background: var(--theme-color-ghost--active);\n}\n\n:host(.card-notification:active),\n:host(.card-filled:active) {\n --ix-card-background: var(--theme-color-component-1--active);\n}\n\n:host(.card-alarm:active) {\n --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.card-critical:active) {\n --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.card-warning:active) {\n --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.card-success:active) {\n --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.card-info:active) {\n --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.card-neutral:active) {\n --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.card-primary:active) {\n --ix-card-background: var(--theme-color-primary--active);\n}\n\n// ### Selected ###\n\n:host(.selected) {\n --ix-card-border-color: var(--theme-color-dynamic);\n}\n\n:host(.selected.card-insight),\n:host(.selected.card-outline) {\n --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-notification),\n:host(.selected.card-filled) {\n --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-alarm) {\n --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.selected.card-critical) {\n --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.selected.card-warning) {\n --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.selected.card-success) {\n --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.selected.card-info) {\n --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.selected.card-neutral) {\n --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.selected.card-primary) {\n --ix-card-background: var(--theme-color-primary--active);\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n//TODO(IX-1601): Remove insight, notification in 3.0\nexport type CardVariant =\n \| 'insight'\n \| 'notification'\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'primary'\n \| 'outline'\n \| 'filled';\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\nexport class Card {\n @Element() hostElement!: HTMLIxCardElement;\n\n /\n Card variant\n * @deprecated variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead.\n /\n @Prop() variant: CardVariant = 'insight';\n\n /\n @since 2.1.0\n */\n @Prop() selected: boolean = false;\n\n render() {\n return (\n <Host\n class={{\n selected: this.selected,\n [`card-${this.variant}`]: true,\n }}\n >\n <div class=\"card-content\">\n <slot></slot>\n </div>\n <div class=\"card-footer\">\n <slot name=\"card-accordion\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/col.js CHANGED Viewed

@@ -65,7 +65,7 @@ const Col = /*@__PURE__*/ proxyCustomElement(class Col extends HTMLElement {
         };
     }
     render() {
-        return (h(Host, { key: '7cbf750f0768a0a1db65aa2651605c89f82ce604', style: Object.assign({}, this.getColumnSizeStyling()) }, h("slot", { key: 'd83749089de332574097a8299c265d45b1fd8da7' })));
+        return (h(Host, { key: 'b1d777df4ddbe04b4c49206dedead245bcdd307a', style: Object.assign({}, this.getColumnSizeStyling()) }, h("slot", { key: '80c027d13d22c89b42ce2f117ef5946934fc398e' })));
     }
     static get style() { return IxColStyle0; }
 }, [1, "ix-col", {

package/components/col.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"col.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,q4BAAq4B,CAAC;AACr5B,oBAAe,MAAM;;MCoCR,GAAG;;;;;;;;;;IAwBd,QAAQ;QACN,WAAW,CAAC,IAAI,CAAC,CAAC;KACnB;IAEO,OAAO,CAAC,UAA0B;QACxC,IAAI,UAAU,KAAK,EAAE,EAAE;YACrB,OAAO,IAAI,CAAC,IAAI,CAAC;SAClB;QAED,IAAI,UAAU,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;SACpB;QAED,IAAI,UAAU,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;SACpB;QAED,IAAI,UAAU,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;SACpB;KACF;IAEO,aAAa;QACnB,IAAI,~~IAAgB~~,CAAC;~~QACrB~~,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU;YACjC,MAAM,kBAAkB,GACtB,UAAU,KAAK,EAAE,GAAG,eAAe,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;YAEzD,IAAI,CAAC,kBAAkB,EAAE;gBACvB,OAAO;aACR;YAED,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;YAE7C,IAAI,WAAW,EAAE;gBACf,IAAI,GAAG,WAAW,CAAC;aACpB;SACF,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC;KACb;IAEO,oBAAoB;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAElC,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QAED,IAAI,IAAI,KAAK,MAAM,EAAE;YACnB,OAAO;gBACL,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,MAAM;gBACb,WAAW,EAAE,MAAM;aACpB,CAAC;SACH;QAED,MAAM,OAAO,GAAG,aAAa,IAAI,2CAA2C,CAAC;QAE7E,OAAO;YACL,IAAI,EAAE,OAAO,OAAO,EAAE;YACtB,KAAK,EAAE,GAAG,OAAO,EAAE;YACnB,WAAW,EAAE,GAAG,OAAO,EAAE;SAC1B,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,oBACA,IAAI,CAAC,oBAAoB,EAAE,KAGhC,8DAAa,CACR,EACP;KACH;;;;;;;;AAnGM,eAAW,GAAqB,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAA1C,CAA4C;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/col/col.scss?tag=ix-col&encapsulation=shadow","src/components/col/col.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n position: relative;\n flex-basis: 0;\n flex-grow: 1;\n width: 100%;\n max-width: 100%;\n min-height: 1px;\n\n padding: calc(var(--ix-layout-grid-gutter) 0.5);\n}\n","/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, forceUpdate, h, Host, Listen, Prop } from '@stencil/core';\nimport { Breakpoint, matchBreakpoint } from '../utils/breakpoints';\n\ntype GridBreakpoint = Breakpoint \| '';\n\nexport type ColumnSize =\n \| '1'\n \| '2'\n \| '3'\n \| '4'\n \| '5'\n \| '6'\n \| '7'\n \| '8'\n \| '9'\n \| '10'\n \| '11'\n \| '12'\n \| 'auto';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-col',\n styleUrl: 'col.scss',\n shadow: true,\n})\nexport class Col {\n static Breakpoints: GridBreakpoint[] = ['', 'sm', 'md', 'lg'];\n\n /\n Size of the column\n /\n @Prop() size?: ColumnSize;\n\n /\n Size of the column for sm screens\n /\n @Prop() sizeSm?: ColumnSize;\n\n /\n Size of the column for md screens\n /\n @Prop() sizeMd?: ColumnSize;\n\n /\n Size of the column for lg screens\n /\n @Prop() sizeLg?: ColumnSize;\n\n @Listen('resize', { target: 'window' })\n onResize() {\n forceUpdate(this);\n }\n\n private getSize(breakpoint: GridBreakpoint) {\n if (breakpoint === '') {\n return this.size;\n }\n\n if (breakpoint === 'sm') {\n return this.sizeSm;\n }\n\n if (breakpoint === 'md') {\n return this.sizeMd;\n }\n\n if (breakpoint === 'lg') {\n return this.sizeLg;\n }\n }\n\n private getColumnSize() {\n let size: ColumnSize;\n Col.Breakpoints.forEach((breakpoint) => {\n const isMediaQueryActive =\n breakpoint !== '' ? matchBreakpoint(breakpoint) : true;\n\n if (!isMediaQueryActive) {\n return;\n }\n\n const currentSize = this.getSize(breakpoint);\n\n if (currentSize) {\n size = currentSize;\n }\n });\n\n return size;\n }\n\n private getColumnSizeStyling() {\n const size = this.getColumnSize();\n\n if (!size) {\n return;\n }\n\n if (size === 'auto') {\n return {\n flex: '0 0 auto',\n width: 'auto',\n 'max-width': 'auto',\n };\n }\n\n const colSize = `calc(calc(${size} / var(--ix-layout-grid-columns)) 100%)`;\n\n return {\n flex: `0 0 ${colSize}`,\n width: `${colSize}`,\n 'max-width': `${colSize}`,\n };\n }\n\n render() {\n return (\n <Host\n style={{\n ...this.getColumnSizeStyling(),\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"col.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,q4BAAq4B,CAAC;AACr5B,oBAAe,MAAM;;MCoCR,GAAG;;;;;;;;;;IAwBd,QAAQ;QACN,WAAW,CAAC,IAAI,CAAC,CAAC;KACnB;IAEO,OAAO,CAAC,UAA0B;QACxC,IAAI,UAAU,KAAK,EAAE,EAAE;YACrB,OAAO,IAAI,CAAC,IAAI,CAAC;SAClB;QAED,IAAI,UAAU,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;SACpB;QAED,IAAI,UAAU,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;SACpB;QAED,IAAI,UAAU,KAAK,IAAI,EAAE;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;SACpB;KACF;IAEO,aAAa;QACnB,IAAI,IAA4B,CAAC;QACjC,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU;YACjC,MAAM,kBAAkB,GACtB,UAAU,KAAK,EAAE,GAAG,eAAe,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;YAEzD,IAAI,CAAC,kBAAkB,EAAE;gBACvB,OAAO;aACR;YAED,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;YAE7C,IAAI,WAAW,EAAE;gBACf,IAAI,GAAG,WAAW,CAAC;aACpB;SACF,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC;KACb;IAEO,oBAAoB;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAElC,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QAED,IAAI,IAAI,KAAK,MAAM,EAAE;YACnB,OAAO;gBACL,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,MAAM;gBACb,WAAW,EAAE,MAAM;aACpB,CAAC;SACH;QAED,MAAM,OAAO,GAAG,aAAa,IAAI,2CAA2C,CAAC;QAE7E,OAAO;YACL,IAAI,EAAE,OAAO,OAAO,EAAE;YACtB,KAAK,EAAE,GAAG,OAAO,EAAE;YACnB,WAAW,EAAE,GAAG,OAAO,EAAE;SAC1B,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,oBACA,IAAI,CAAC,oBAAoB,EAAE,KAGhC,8DAAa,CACR,EACP;KACH;;;;;;;;AAnGM,eAAW,GAAqB,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAA1C,CAA4C;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/col/col.scss?tag=ix-col&encapsulation=shadow","src/components/col/col.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n position: relative;\n flex-basis: 0;\n flex-grow: 1;\n width: 100%;\n max-width: 100%;\n min-height: 1px;\n\n padding: calc(var(--ix-layout-grid-gutter) 0.5);\n}\n","/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, forceUpdate, h, Host, Listen, Prop } from '@stencil/core';\nimport { Breakpoint, matchBreakpoint } from '../utils/breakpoints';\n\ntype GridBreakpoint = Breakpoint \| '';\n\nexport type ColumnSize =\n \| '1'\n \| '2'\n \| '3'\n \| '4'\n \| '5'\n \| '6'\n \| '7'\n \| '8'\n \| '9'\n \| '10'\n \| '11'\n \| '12'\n \| 'auto';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-col',\n styleUrl: 'col.scss',\n shadow: true,\n})\nexport class Col {\n static Breakpoints: GridBreakpoint[] = ['', 'sm', 'md', 'lg'];\n\n /\n Size of the column\n /\n @Prop() size?: ColumnSize;\n\n /\n Size of the column for sm screens\n /\n @Prop() sizeSm?: ColumnSize;\n\n /\n Size of the column for md screens\n /\n @Prop() sizeMd?: ColumnSize;\n\n /\n Size of the column for lg screens\n /\n @Prop() sizeLg?: ColumnSize;\n\n @Listen('resize', { target: 'window' })\n onResize() {\n forceUpdate(this);\n }\n\n private getSize(breakpoint: GridBreakpoint) {\n if (breakpoint === '') {\n return this.size;\n }\n\n if (breakpoint === 'sm') {\n return this.sizeSm;\n }\n\n if (breakpoint === 'md') {\n return this.sizeMd;\n }\n\n if (breakpoint === 'lg') {\n return this.sizeLg;\n }\n }\n\n private getColumnSize(): ColumnSize \| undefined {\n let size: ColumnSize \| undefined;\n Col.Breakpoints.forEach((breakpoint) => {\n const isMediaQueryActive =\n breakpoint !== '' ? matchBreakpoint(breakpoint) : true;\n\n if (!isMediaQueryActive) {\n return;\n }\n\n const currentSize = this.getSize(breakpoint);\n\n if (currentSize) {\n size = currentSize;\n }\n });\n\n return size;\n }\n\n private getColumnSizeStyling() {\n const size = this.getColumnSize();\n\n if (!size) {\n return;\n }\n\n if (size === 'auto') {\n return {\n flex: '0 0 auto',\n width: 'auto',\n 'max-width': 'auto',\n };\n }\n\n const colSize = `calc(calc(${size} / var(--ix-layout-grid-columns)) 100%)`;\n\n return {\n flex: `0 0 ${colSize}`,\n width: `${colSize}`,\n 'max-width': `${colSize}`,\n };\n }\n\n render() {\n return (\n <Host\n style={{\n ...this.getColumnSizeStyling(),\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/context.js CHANGED Viewed

@@ -43,7 +43,9 @@ function useContextConsumer(hostElement, context, onContextReceived, subscribe)
     }, subscribe));
     return {
         unsubscribe: () => {
-            _unsubscribe();
+            if (_unsubscribe) {
+                _unsubscribe();
+            }
         },
     };
 }
@@ -51,7 +53,8 @@ function useContextProvider(hostElement, context, contextPayload) {
     const requestContext = new TypedEvent();
     const updateContext = new TypedEvent();
     const requests = new Set();
-    hostElement.addEventListener('context-request', (requestContextEvent) => {
+    hostElement.addEventListener('context-request', (event) => {
+        const requestContextEvent = event;
         if ((requestContextEvent === null || requestContextEvent === void 0 ? void 0 : requestContextEvent.context.name) !== context.name) {
             return;
         }