@siemens/ix 0.0.0-pr-1373-20240705054533 → 0.0.0-pr-1522-20241021144048

package/components/a11y.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/components/a11y.js.map

@@ -1 +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: 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 */\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}
+{"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) => (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}

package/components/application-header.js

@@ -1,15 +1,16 @@
-import { proxyCustomElement, HTMLElement, readTask, h, Host, Fragment } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, readTask, h, Host, Fragment } from '@stencil/core/internal/client';
 import { s as showAppSwitch } from './index2.js';
 import { a as applicationLayoutService } from './service.js';
 import { a as useContextConsumer, A as ApplicationLayoutContext } from './context.js';
 import { m as menuController } from './menu-service.js';
 import { h as hasSlottedElements } from './shadow-dom.js';
-import { d as defineCustomElement$4 } from './dropdown.js';
-import { d as defineCustomElement$3 } from './icon-button.js';
-import { d as defineCustomElement$2 } from './menu-expand-icon.js';
-import { d as defineCustomElement$1 } from './spinner.js';
+import { d as defineCustomElement$5 } from './dropdown.js';
+import { d as defineCustomElement$4 } from './icon-button.js';
+import { d as defineCustomElement$3 } from './menu-expand-icon.js';
+import { d as defineCustomElement$2 } from './spinner.js';
+import { d as defineCustomElement$1 } from './typography.js';
 
-const applicationHeaderCss = ":host{display:flex;align-items:center;position:relative;width:100%;height:2.75rem;min-height:2.75rem;padding:0 1rem 0 0.625rem;color:var(--theme-app-header--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color);z-index:var(--theme-z-index-fixed)}: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 .app-switch{margin-right:1rem}:host .name{overflow:hidden;overflow-wrap:anywhere;text-overflow:ellipsis;text-wrap:nowrap;max-width:50%;margin-left:1.5rem;margin-right:2.5rem;color:var(--theme-app-header--color)}:host .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem;color:var(--theme-app-header-logo--color);margin-left:0.375rem}:host .content{display:flex;position:relative;flex-direction:row;margin-left:auto;margin-right:0px}:host .dropdown{overflow:visible}:host .dropdown-content{padding:1rem}:host .context-menu{display:none}:host .context-menu.context-menu-visible{display:block}@media only screen and (max-width: 48em){:host .logo{display:none}}:host ::slotted(ix-avatar){margin-left:1rem}:host(.breakpoint-sm){padding-left:0.625rem}:host(.breakpoint-sm) .logo{margin-left:0.5rem}";
+const applicationHeaderCss = ":host{display:flex;align-items:flex-end;flex-wrap:nowrap;position:relative;width:100%;height:calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));min-height:calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));padding-top:0;padding-right:calc(1rem + var(--ix-safe-area-inset-right, 0rem));padding-bottom:0.3rem;padding-left:calc(0.625rem + var(--ix-safe-area-inset-left, 0rem));color:var(--theme-app-header--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color);z-index:var(--theme-z-index-fixed)}: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 .app-switch{margin-right:1rem}:host .name{overflow:hidden;overflow-wrap:anywhere;text-overflow:ellipsis;text-wrap:nowrap;max-width:50%;margin-left:1.5rem;margin-right:2.5rem;margin-bottom:0.25rem;color:var(--theme-app-header--color)}:host .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem;color:var(--theme-app-header-logo--color);margin-left:0.375rem}:host .content{display:flex;position:relative;flex-direction:row;margin-left:auto;margin-right:0px}:host .dropdown{overflow:visible}:host .dropdown-content{padding:1rem}:host .context-menu{display:none}:host .context-menu.context-menu-visible{display:block}@media only screen and (max-width: 48em){:host .logo{display:none}}:host ::slotted(ix-avatar){margin-left:1rem}:host(.breakpoint-sm) .logo{margin-left:0.5rem}";
 const IxApplicationHeaderStyle0 = applicationHeaderCss;
 
 const ApplicationHeader = /*@__PURE__*/ proxyCustomElement(class ApplicationHeader extends HTMLElement {
@@ -17,7 +18,9 @@ const ApplicationHeader = /*@__PURE__*/ proxyCustomElement(class ApplicationHead
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.menuToggle = createEvent(this, "menuToggle", 7);
         this.name = undefined;
+        this.showMenu = false;
         this.breakpoint = 'lg';
         this.menuExpanded = false;
         this.suppressResponsive = false;
@@ -43,7 +46,6 @@ const ApplicationHeader = /*@__PURE__*/ proxyCustomElement(class ApplicationHead
         });
         this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
             if (this.suppressResponsive) {
-                this.breakpoint = 'md';
                 return;
             }
             this.breakpoint = mode;
@@ -58,6 +60,14 @@ const ApplicationHeader = /*@__PURE__*/ proxyCustomElement(class ApplicationHead
         (_a = this.menuDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
         (_b = this.modeDisposable) === null || _b === void 0 ? void 0 : _b.dispose();
     }
+    watchApplicationLayoutContext() {
+        if (this.applicationLayoutContext) {
+            this.showMenu = false;
+        }
+    }
+    watchSuppressResponsive() {
+        this.breakpoint = 'md';
+    }
     isLogoSlotted() {
         const slotElement = this.hostElement.shadowRoot.querySelector('slot[name="logo"]');
         const nodes = slotElement.assignedNodes({
@@ -75,7 +85,13 @@ const ApplicationHeader = /*@__PURE__*/ proxyCustomElement(class ApplicationHead
         }
     }
     async onMenuClick() {
-        menuController.toggle();
+        if (this.applicationLayoutContext) {
+            menuController.toggle();
+        }
+        else {
+            this.menuExpanded = !this.menuExpanded;
+        }
+        this.menuToggle.emit(this.menuExpanded);
     }
     resolveContextMenuButton() {
         return new Promise((resolve) => readTask(() => resolve(this.hostElement.shadowRoot.querySelector('[data-context-menu]'))));
@@ -102,28 +118,43 @@ const ApplicationHeader = /*@__PURE__*/ proxyCustomElement(class ApplicationHead
     }
     render() {
         var _a;
-        return (h(Host, { key: '58565e3136e17a2d3cae46a4add8f2ba245b59bc', class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' && this.suppressResponsive === false && (h("ix-menu-expand-icon", { key: 'da63965f1ced1898c799a48212eb7a4afdf35ffd', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
+        const hasApplicationContextAvailable = !!this.applicationLayoutContext;
+        const showMenuByApplicationFrame = this.breakpoint === 'sm' &&
+            this.suppressResponsive === false &&
+            hasApplicationContextAvailable;
+        const showApplicationSwitch = ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
             this.breakpoint !== 'sm' &&
-            this.suppressResponsive === false && (h("ix-icon-button", { key: 'fce7acda771398cd8f8f79dcb05254354e9524c8', onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), h("div", { key: '20d47359153147df9636a2170e4987113871e701', class: "logo" }, h("slot", { key: '3889ece809965cd8c5a256e6551b1d4961774977', name: "logo" })), h("div", { key: '4e9c07f44beb7c476d61657bb303764c74ee174e', class: "name" }, this.name), h("div", { key: '099a3a4842da94cd54f789ee29380ab057957550', class: "content" }, this.breakpoint === 'sm' ? (h(Fragment, null, h("ix-icon-button", { class: {
+            this.suppressResponsive === false;
+        return (h(Host, { key: '18a555f49b2f2cceae68df4f5e12c62423de4b0c', class: {
+                [`breakpoint-${this.breakpoint}`]: true,
+            }, slot: "application-header" }, (this.showMenu || showMenuByApplicationFrame) && (h("ix-menu-expand-icon", { key: '69248d842cb708487e99ab7e92f946bc1ffd0729', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (h("ix-icon-button", { key: 'f73ad74793b03675ad1a1d24144f5f95409ba6c9', onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), h("div", { key: '5b1e11eac8966950d1c1724ba9adffb51aa91eb6', class: { logo: true } }, h("slot", { key: 'ec413c3572b010bb8d3575adf1feba6ca0d11aac', name: "logo" })), h("ix-typography", { key: '55e160f89a59c71a66f6f0bccb5ef8473d5e97d0', format: "body-lg", class: "name" }, this.name), h("div", { key: 'f5a1b3806bc6de1461f2f35698f0a876790b9fd7', 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: 'ba4c1d46798c9cb325b933905df7bb17a4aedfc6', 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: 'cd96ba8acd317816a5997a2aa4083914db0737b0', name: "ix-application-header-avatar" }))));
     }
     get hostElement() { return this; }
+    static get watchers() { return {
+        "applicationLayoutContext": ["watchApplicationLayoutContext"],
+        "suppressResponsive": ["watchSuppressResponsive"]
+    }; }
     static get style() { return IxApplicationHeaderStyle0; }
 }, [1, "ix-application-header", {
         "name": [1],
+        "showMenu": [1028, "show-menu"],
         "breakpoint": [32],
         "menuExpanded": [32],
         "suppressResponsive": [32],
         "hasSlottedElements": [32],
         "applicationLayoutContext": [32]
+    }, undefined, {
+        "applicationLayoutContext": ["watchApplicationLayoutContext"],
+        "suppressResponsive": ["watchSuppressResponsive"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ix-application-header", "ix-dropdown", "ix-icon-button", "ix-menu-expand-icon", "ix-spinner"];
+    const components = ["ix-application-header", "ix-dropdown", "ix-icon-button", "ix-menu-expand-icon", "ix-spinner", "ix-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "ix-application-header":
             if (!customElements.get(tagName)) {
@@ -132,20 +163,25 @@ function defineCustomElement() {
             break;
         case "ix-dropdown":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "ix-icon-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "ix-menu-expand-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ix-typography":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/components/application-header.js.map

@@ -1 +1 @@
-{"file":"application-header.js","mappings":"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","names":[],"sources":["src/components/application-header/application-header.scss?tag=ix-application-header&encapsulation=shadow","src/components/application-header/application-header.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/shadow-dom/component';\n @import 'mixins/break-points';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 2.75rem;\n  min-height: 2.75rem;\n  padding: 0 1rem 0 0.625rem;\n\n  color: var(--theme-app-header--color);\n  background-color: var(--theme-app-header--background);\n\n  border-bottom: var(--theme-app-header--border-width) solid\n    var(--theme-app-header--border-color);\n\n  z-index: var(--theme-z-index-fixed);\n\n  .app-switch {\n    margin-right: 1rem;\n  }\n\n  .name {\n    overflow: hidden;\n    overflow-wrap: anywhere;\n    text-overflow: ellipsis;\n    text-wrap: nowrap;\n    max-width: 50%;\n    margin-left: 1.5rem;\n    margin-right: 2.5rem;\n    color: var(--theme-app-header--color);\n  }\n\n  .logo {\n    display: inline-flex;\n    align-items: center;\n    position: relative;\n    height: 32px;\n    overflow: hidden;\n    line-height: 0rem;\n    color: var(--theme-app-header-logo--color);\n    margin-left: 0.375rem;\n  }\n\n  .content {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .dropdown {\n    overflow: visible;\n  }\n\n  .dropdown-content {\n    padding: 1rem;\n  }\n\n  .context-menu {\n    display: none;\n  }\n\n  .context-menu.context-menu-visible {\n    display: block;\n  }\n\n  @include media-breakpoint-match('sm') {\n    .logo {\n      display: none;\n    }\n  }\n\n  ::slotted(ix-avatar) {\n    margin-left: 1rem;\n  }\n}\n\n:host(.breakpoint-sm) {\n  padding-left: 0.625rem;\n\n  .logo {\n    margin-left: 0.5rem;\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 { showAppSwitch } from '../utils/app-switch';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport {\n  ApplicationLayoutContext,\n  AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { Disposable } from '../utils/typed-event';\n\n/**\n * @slot logo - Location of the logo\n */\n@Component({\n  tag: 'ix-application-header',\n  styleUrl: 'application-header.scss',\n  shadow: true,\n})\nexport class ApplicationHeader {\n  @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n  /**\n   * Application name\n   */\n  @Prop() name: string;\n\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() menuExpanded = false;\n  @State() suppressResponsive = false;\n\n  @State() hasSlottedElements = false;\n\n  private menuDisposable?: Disposable;\n  private modeDisposable?: Disposable;\n  private callbackUpdateAppSwitchModal?: (\n    config: AppSwitchConfiguration\n  ) => void;\n\n  @State() applicationLayoutContext: ContextType<\n    typeof ApplicationLayoutContext\n  >;\n\n  get contentBackground() {\n    return this.hostElement.shadowRoot.querySelector('.dropdown-content');\n  }\n\n  componentWillLoad() {\n    useContextConsumer(\n      this.hostElement,\n      ApplicationLayoutContext,\n      (ctx) => {\n        if (ctx?.host === 'map-navigation') {\n          this.suppressResponsive = true;\n          this.breakpoint = 'md';\n          return;\n        }\n\n        this.breakpoint = applicationLayoutService.breakpoint;\n        this.applicationLayoutContext = ctx;\n\n        this.tryUpdateAppSwitch();\n      },\n      true\n    );\n\n    this.menuDisposable = menuController.expandChange.on((show) => {\n      this.menuExpanded = show;\n    });\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      if (this.suppressResponsive) {\n        this.breakpoint = 'md';\n        return;\n      }\n\n      this.breakpoint = mode;\n    });\n\n    this.updateIsSlottedContent();\n  }\n\n  componentDidLoad() {\n    this.attachSiemensLogoIfLoaded();\n  }\n\n  disconnectedCallback() {\n    this.menuDisposable?.dispose();\n    this.modeDisposable?.dispose();\n  }\n\n  private isLogoSlotted() {\n    const slotElement = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"logo\"]'\n    ) as HTMLSlotElement;\n    const nodes = slotElement.assignedNodes({\n      flatten: true,\n    });\n\n    return nodes.length !== 0;\n  }\n\n  private async attachSiemensLogoIfLoaded() {\n    await window.customElements.whenDefined('ix-siemens-logo');\n    const logoElement = document.createElement('ix-siemens-logo');\n    if (!this.isLogoSlotted()) {\n      this.hostElement.shadowRoot\n        .querySelector('.logo')\n        .appendChild(logoElement);\n    }\n  }\n\n  private async onMenuClick() {\n    menuController.toggle();\n  }\n\n  private resolveContextMenuButton() {\n    return new Promise<HTMLElement>((resolve) =>\n      readTask(() =>\n        resolve(\n          this.hostElement.shadowRoot.querySelector(\n            '[data-context-menu]'\n          ) as HTMLElement\n        )\n      )\n    );\n  }\n\n  private tryUpdateAppSwitch() {\n    if (!this.callbackUpdateAppSwitchModal) {\n      return;\n    }\n\n    this.callbackUpdateAppSwitchModal(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private async showAppSwitch() {\n    this.callbackUpdateAppSwitchModal = await showAppSwitch(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private updateIsSlottedContent() {\n    const slotElement =\n      this.hostElement.shadowRoot.querySelector('.content slot');\n\n    this.hasSlottedElements = hasSlottedElements(slotElement);\n  }\n\n  private onContentBgClick(e: MouseEvent) {\n    if (e.target === this.contentBackground) {\n      e.preventDefault();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ [`breakpoint-${this.breakpoint}`]: true }}\n        slot=\"application-header\"\n      >\n        {this.breakpoint === 'sm' && this.suppressResponsive === false && (\n          <ix-menu-expand-icon\n            onClick={() => this.onMenuClick()}\n            expanded={this.menuExpanded}\n          ></ix-menu-expand-icon>\n        )}\n        {this.applicationLayoutContext?.appSwitchConfig &&\n          this.breakpoint !== 'sm' &&\n          this.suppressResponsive === false && (\n            <ix-icon-button\n              onClick={() => this.showAppSwitch()}\n              icon=\"apps\"\n              ghost\n              class=\"app-switch\"\n            ></ix-icon-button>\n          )}\n        <div class=\"logo\">\n          <slot name=\"logo\"></slot>\n        </div>\n        <div class=\"name\">{this.name}</div>\n        <div class=\"content\">\n          {this.breakpoint === 'sm' ? (\n            <Fragment>\n              <ix-icon-button\n                class={{\n                  ['context-menu']: true,\n                  ['context-menu-visible']: this.hasSlottedElements,\n                }}\n                data-context-menu\n                icon=\"more-menu\"\n                ghost\n              ></ix-icon-button>\n              <ix-dropdown\n                data-overflow-dropdown\n                class=\"dropdown\"\n                discoverAllSubmenus\n                trigger={this.resolveContextMenuButton()}\n              >\n                <div\n                  class=\"dropdown-content\"\n                  onClick={(e) => this.onContentBgClick(e)}\n                >\n                  <slot\n                    onSlotchange={() => this.updateIsSlottedContent()}\n                  ></slot>\n                </div>\n              </ix-dropdown>\n            </Fragment>\n          ) : (\n            <slot onSlotchange={() => this.updateIsSlottedContent()}></slot>\n          )}\n          <slot name=\"ix-application-header-avatar\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"application-header.js","mappings":"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","names":[],"sources":["src/components/application-header/application-header.scss?tag=ix-application-header&encapsulation=shadow","src/components/application-header/application-header.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/shadow-dom/component';\n@import 'mixins/break-points';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: flex-end;\n  flex-wrap: nowrap;\n  position: relative;\n  width: 100%;\n  height: calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));\n  min-height: calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));\n  padding-top: 0;\n  padding-right: calc(1rem + var(--ix-safe-area-inset-right, 0rem));\n  padding-bottom: 0.3rem;\n  padding-left: calc(0.625rem + var(--ix-safe-area-inset-left, 0rem));\n\n  color: var(--theme-app-header--color);\n  background-color: var(--theme-app-header--background);\n\n  border-bottom: var(--theme-app-header--border-width) solid\n    var(--theme-app-header--border-color);\n\n  z-index: var(--theme-z-index-fixed);\n\n  .app-switch {\n    margin-right: 1rem;\n  }\n\n  .name {\n    overflow: hidden;\n    overflow-wrap: anywhere;\n    text-overflow: ellipsis;\n    text-wrap: nowrap;\n    max-width: 50%;\n    margin-left: 1.5rem;\n    margin-right: 2.5rem;\n    margin-bottom: 0.25rem;\n    color: var(--theme-app-header--color);\n  }\n\n  .logo {\n    display: inline-flex;\n    align-items: center;\n    position: relative;\n    height: 32px;\n    overflow: hidden;\n    line-height: 0rem;\n    color: var(--theme-app-header-logo--color);\n    margin-left: 0.375rem;\n  }\n\n  .content {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .dropdown {\n    overflow: visible;\n  }\n\n  .dropdown-content {\n    padding: 1rem;\n  }\n\n  .context-menu {\n    display: none;\n  }\n\n  .context-menu.context-menu-visible {\n    display: block;\n  }\n\n  @include media-breakpoint-match('sm') {\n    .logo {\n      display: none;\n    }\n  }\n\n  ::slotted(ix-avatar) {\n    margin-left: 1rem;\n  }\n}\n\n:host(.breakpoint-sm) {\n  .logo {\n    margin-left: 0.5rem;\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  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { showAppSwitch } from '../utils/app-switch';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport {\n  ApplicationLayoutContext,\n  AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { Disposable } from '../utils/typed-event';\n\n/**\n * @slot logo - Location of the logo\n */\n@Component({\n  tag: 'ix-application-header',\n  styleUrl: 'application-header.scss',\n  shadow: true,\n})\nexport class ApplicationHeader {\n  @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n  /**\n   * Application name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Controls the visibility of the menu toggle button based on the context of the application header.\n   *\n   * When the application header is utilized outside the application frame, the menu toggle button is displayed.\n   * Conversely, if the header is within the application frame, this property is ineffective.\n   *\n   * @since 2.5.0\n   */\n  @Prop({ mutable: true }) showMenu?: boolean = false;\n\n  /**\n   * Event emitted when the menu toggle button is clicked\n   *\n   * @since 2.5.0\n   */\n  @Event() menuToggle!: EventEmitter<boolean>;\n\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() menuExpanded = false;\n  @State() suppressResponsive = false;\n\n  @State() hasSlottedElements = false;\n\n  private menuDisposable?: Disposable;\n  private modeDisposable?: Disposable;\n  private callbackUpdateAppSwitchModal?: (\n    config: AppSwitchConfiguration\n  ) => void;\n\n  @State() applicationLayoutContext: ContextType<\n    typeof ApplicationLayoutContext\n  >;\n\n  get contentBackground() {\n    return this.hostElement.shadowRoot.querySelector('.dropdown-content');\n  }\n\n  componentWillLoad() {\n    useContextConsumer(\n      this.hostElement,\n      ApplicationLayoutContext,\n      (ctx) => {\n        if (ctx?.host === 'map-navigation') {\n          this.suppressResponsive = true;\n          this.breakpoint = 'md';\n          return;\n        }\n\n        this.breakpoint = applicationLayoutService.breakpoint;\n        this.applicationLayoutContext = ctx;\n\n        this.tryUpdateAppSwitch();\n      },\n      true\n    );\n\n    this.menuDisposable = menuController.expandChange.on((show) => {\n      this.menuExpanded = show;\n    });\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      if (this.suppressResponsive) {\n        return;\n      }\n\n      this.breakpoint = mode;\n    });\n\n    this.updateIsSlottedContent();\n  }\n\n  componentDidLoad() {\n    this.attachSiemensLogoIfLoaded();\n  }\n\n  disconnectedCallback() {\n    this.menuDisposable?.dispose();\n    this.modeDisposable?.dispose();\n  }\n\n  @Watch('applicationLayoutContext')\n  watchApplicationLayoutContext() {\n    if (this.applicationLayoutContext) {\n      this.showMenu = false;\n    }\n  }\n  @Watch('suppressResponsive')\n  watchSuppressResponsive() {\n    this.breakpoint = 'md';\n  }\n\n  private isLogoSlotted() {\n    const slotElement = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"logo\"]'\n    ) as HTMLSlotElement;\n    const nodes = slotElement.assignedNodes({\n      flatten: true,\n    });\n\n    return nodes.length !== 0;\n  }\n\n  private async attachSiemensLogoIfLoaded() {\n    await window.customElements.whenDefined('ix-siemens-logo');\n    const logoElement = document.createElement('ix-siemens-logo');\n    if (!this.isLogoSlotted()) {\n      this.hostElement.shadowRoot\n        .querySelector('.logo')\n        .appendChild(logoElement);\n    }\n  }\n\n  private async onMenuClick() {\n    if (this.applicationLayoutContext) {\n      menuController.toggle();\n    } else {\n      this.menuExpanded = !this.menuExpanded;\n    }\n\n    this.menuToggle.emit(this.menuExpanded);\n  }\n\n  private resolveContextMenuButton() {\n    return new Promise<HTMLElement>((resolve) =>\n      readTask(() =>\n        resolve(\n          this.hostElement.shadowRoot.querySelector(\n            '[data-context-menu]'\n          ) as HTMLElement\n        )\n      )\n    );\n  }\n\n  private tryUpdateAppSwitch() {\n    if (!this.callbackUpdateAppSwitchModal) {\n      return;\n    }\n\n    this.callbackUpdateAppSwitchModal(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private async showAppSwitch() {\n    this.callbackUpdateAppSwitchModal = await showAppSwitch(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private updateIsSlottedContent() {\n    const slotElement =\n      this.hostElement.shadowRoot.querySelector('.content slot');\n\n    this.hasSlottedElements = hasSlottedElements(slotElement);\n  }\n\n  private onContentBgClick(e: MouseEvent) {\n    if (e.target === this.contentBackground) {\n      e.preventDefault();\n    }\n  }\n\n  render() {\n    const hasApplicationContextAvailable = !!this.applicationLayoutContext;\n\n    const showMenuByApplicationFrame =\n      this.breakpoint === 'sm' &&\n      this.suppressResponsive === false &&\n      hasApplicationContextAvailable;\n\n    const showApplicationSwitch =\n      this.applicationLayoutContext?.appSwitchConfig &&\n      this.breakpoint !== 'sm' &&\n      this.suppressResponsive === false;\n\n    return (\n      <Host\n        class={{\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n        slot=\"application-header\"\n      >\n        {(this.showMenu || showMenuByApplicationFrame) && (\n          <ix-menu-expand-icon\n            onClick={() => this.onMenuClick()}\n            expanded={this.menuExpanded}\n          ></ix-menu-expand-icon>\n        )}\n        {showApplicationSwitch && (\n          <ix-icon-button\n            onClick={() => this.showAppSwitch()}\n            icon=\"apps\"\n            ghost\n            class=\"app-switch\"\n          ></ix-icon-button>\n        )}\n        <div class={{ logo: true }}>\n          <slot name=\"logo\"></slot>\n        </div>\n        <ix-typography format=\"body-lg\" class=\"name\">\n          {this.name}\n        </ix-typography>\n        <div class=\"content\">\n          {this.breakpoint === 'sm' ? (\n            <Fragment>\n              <ix-icon-button\n                class={{\n                  ['context-menu']: true,\n                  ['context-menu-visible']: this.hasSlottedElements,\n                }}\n                data-context-menu\n                icon=\"more-menu\"\n                ghost\n              ></ix-icon-button>\n              <ix-dropdown\n                data-overflow-dropdown\n                class=\"dropdown\"\n                discoverAllSubmenus\n                trigger={this.resolveContextMenuButton()}\n              >\n                <div\n                  class=\"dropdown-content\"\n                  onClick={(e) => this.onContentBgClick(e)}\n                >\n                  <slot\n                    onSlotchange={() => this.updateIsSlottedContent()}\n                  ></slot>\n                </div>\n              </ix-dropdown>\n            </Fragment>\n          ) : (\n            <slot onSlotchange={() => this.updateIsSlottedContent()}></slot>\n          )}\n          <slot name=\"ix-application-header-avatar\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/avatar.js

@@ -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 .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) li{transform:scale(0.8)}";
 const IxAvatarStyle0 = avatarCss;
 
 function DefaultAvatar(props) {

package/components/avatar.js.map

@@ -1 +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\n:host {\n  display: flex;\n  position: relative;\n  width: fit-content;\n\n  .avatar {\n    display: flex;\n    align-items: center;\n\n    > .avatar-image {\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n    }\n\n    > .avatar-initials {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n      background-color: var(--theme-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}
+{"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  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}

package/components/base-button.js

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

@@ -1 +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 { 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}
+{"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;MAEW,UAAU,GAAyC,CAC9D,KAAsB,EACtB,QAAQ;;IAER,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 { 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

@@ -51,9 +51,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: 'ca9f7fd113f5737d42a3f356fab7c26d8de3bc85', class: {
                 disabled: this.disabled || this.loading,
-            } }, h(BaseButton, Object.assign({ key: '8eba954b9c315252ced06a308d6676322b031b90' }, baseButtonProps), h("slot", { key: 'c98df3af0d34f6e2ce4ecce03916b39d4b69d4a7' }))));
+            } }, h(BaseButton, Object.assign({ key: 'a6fb1a84cfee760a531dde99bc2725c743e4ef63' }, baseButtonProps), h("slot", { key: 'd674b4902ba06d3912e8af3d740fe6401d085b51' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxButtonStyle0; }

package/components/button.js.map

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

package/components/card-accordion.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const cardAccordionCss = ":host{display:flex;position:relative;flex-direction:column;width:100%;transition:var(--theme-default-time) ease-in-out}: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 .expand-action{all:unset;display:flex;position:relative;-webkit-appearance:button;-moz-appearance:button;appearance:button;height:2.5rem;width:100%;background-color:var(--theme-color-component-1);align-items:center;justify-content:flex-start}:host .expand-action:not(.disabled):not(:disabled).hover,:host .expand-action:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .expand-action:not(.disabled):not(:disabled).active,:host .expand-action:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .expand-action:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .expand-action::before{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--ix-card-background);z-index:-1}:host .expand-action:not(.show),:host .expand-action:not(.show)::before{border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}:host .expand-icon{margin-left:0.5rem;transition:var(--theme-default-time) transform ease-in-out}:host .expand-icon.show{transform:rotate(90deg)}:host .expand-content{display:grid;position:relative;grid-template-rows:0fr;transition:var(--theme-default-time) ease-in-out;width:100%;max-height:14.75rem;opacity:0;background-color:var(--theme-color-component-1)}:host .expand-content.show{grid-template-rows:14.75rem;opacity:1}:host .expand-content-inner{position:relative;height:100%;overflow:hidden}:host .expand-content.show .expand-content-body{display:none;overflow:hidden;color:var(--theme-color-std-text)}:host .expand-content.show .expand-content-body{display:block;overflow:auto;height:calc(100% - 1rem)}:host .expand-content-footer{display:block;position:relative;width:100%;height:1rem;margin-top:auto;margin-bottom:0px;background-color:var(--theme-color-component-1);border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}";
+const cardAccordionCss = ":host{display:flex;position:relative;flex-direction:column;width:100%;transition:var(--theme-default-time) ease-in-out}: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 .expand-action{all:unset;display:flex;position:relative;-webkit-appearance:button;-moz-appearance:button;appearance:button;height:2.5rem;width:100%;background-color:var(--theme-color-component-1);align-items:center;justify-content:flex-start}:host .expand-action:hover{background:var(--theme-color-component-1--hover)}:host .expand-action:active{background:var(--theme-color-component-1--active)}:host .expand-action:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .expand-action::before{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--ix-card-background);z-index:-1}:host .expand-action:not(.show),:host .expand-action:not(.show)::before{border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}:host .expand-icon{margin-left:0.5rem;transition:var(--theme-default-time) transform ease-in-out}:host .expand-icon.show{transform:rotate(90deg)}:host .expand-content{display:grid;position:relative;grid-template-rows:0fr;transition:var(--theme-default-time) ease-in-out;width:100%;max-height:14.75rem;opacity:0;background-color:var(--theme-color-component-1)}:host .expand-content.show{grid-template-rows:14.75rem;opacity:1}:host .expand-content-inner{position:relative;height:100%;overflow:hidden}:host .expand-content.show .expand-content-body{display:none;overflow:hidden;color:var(--theme-color-std-text)}:host .expand-content.show .expand-content-body{display:block;overflow:auto;height:calc(100% - 1rem)}:host .expand-content-footer{display:block;position:relative;width:100%;height:1rem;margin-top:auto;margin-bottom:0px;background-color:var(--theme-color-component-1);border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}";
 const IxCardAccordionStyle0 = cardAccordionCss;
 
 let accordionControlId = 0;
@@ -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

@@ -1 +1 @@
-{"file":"card-accordion.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,w5FAAw5F,CAAC;AACl7F,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    @include ghost-hover-pressed();\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}
+{"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

@@ -10,7 +10,7 @@ const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends H
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '17ef18ecf4efe031b707524053d81f91db482696' }, h("slot", { key: '5e91dbb38a4bcc64e36c7bbacb1e2de92f877559' })));
+        return (h(Host, { key: '5aa8feca0f04a5ce7fc449df4eb6410880d12a61' }, h("slot", { key: 'ca5e1a9691c69af3f845b22b4186533d09547734' })));
     }
     static get style() { return IxCardContentStyle0; }
 }, [1, "ix-card-content"]);

package/components/card-title.js

@@ -10,7 +10,7 @@ const CardHeader = /*@__PURE__*/ proxyCustomElement(class CardHeader extends HTM
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'c5c2ca3a18e299a6093ad6abbaa1c5249cfa391c' }, h("slot", { key: '6d9c155e807d25a85878f7c10e0e6ca34472f06a' }), h("div", { key: 'd7ce177e5b865646435a794b197f0b7fca89fc5e', class: "title-actions" }, h("slot", { key: '5c44f29c04f0e8960d64dd5b6aa5f4a740d6c175', name: "title-actions" }))));
+        return (h(Host, { key: '162c9e3b08b5508af227dbed91a44d75a614bfa6' }, h("slot", { key: '7466991cc5eebc8eeee323226594dac1e11152a7' }), h("div", { key: 'c7d34debc0ad16c6ea199152d21de34d1a02c1bb', class: "title-actions" }, h("slot", { key: '6e9b53159856a5091fb4cfeb55d4d1b25b8873a2', name: "title-actions" }))));
     }
     static get style() { return IxCardTitleStyle0; }
 }, [1, "ix-card-title"]);