npm - @siemens/ix - Versions diffs - 0.0.0-pr-1373-20240705054533 → 0.0.0-pr-1522-20241022123832 - Mend

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

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

Files changed (1191) hide show

package/components/group-context-menu.js CHANGED Viewed

@@ -38,7 +38,7 @@ const GroupContextMenu = /*@__PURE__*/ proxyCustomElement(class GroupContextMenu
         this.configureDropdown(dropdownElement, triggerElement);
     }
     render() {
-        return (h(Host, { key: 'f0540e7922380e5d6dc1ccd3a9cf89f8899f0b8f' }, h("ix-icon-button", { key: 'd252cde38720925875096a6e57d494da800139f3', class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: 'context-menu' }), h("slot", { key: 'e5f04fcdd55f57bd9bad2beeb5982f6c6352f19b', onSlotchange: () => this.onSlotChange() })));
+        return (h(Host, { key: '7b826fefe006824752b7d0ff090dfc84f520b2cd' }, h("ix-icon-button", { key: '1009c080580c54ba55697af262cd990dc8c57ca1', class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: 'context-menu' }), h("slot", { key: '8063b600fd52fa51e00b9cec030f896a2d27e146', onSlotchange: () => this.onSlotChange() })));
     }
     get hostElement() { return this; }
     static get style() { return IxGroupContextMenuStyle0; }

package/components/group-context-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"group-context-menu.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,6NAA6N,CAAC;AAC1P,iCAAe,mBAAmB;;MCgBrB,gBAAgB;;;;;+BAGA,KAAK;;IAExB,UAAU;QAChB,OAAO,IAAI,CAAC,WAAW,CAAC;KACzB;IAEO,iBAAiB,CACvB,eAAsC,EACtC,cAA2B;QAE3B,eAAe,CAAC,mBAAmB,GAAG,OAAO,CAAC;QAC9C,eAAe,CAAC,OAAO,GAAG,cAAc,CAAC;KAC1C;IAEO,YAAY;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QACD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;QAE7C,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CACnC,CAAC,GAAY,KAAK,GAAG,CAAC,OAAO,KAAK,aAAa,CAChD,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAEzC,IAAI,CAAC,cAAc,EAAE;YACnB,OAAO;SACR;QAED,IAAI,CAAC,eAAe,EAAE;YACpB,OAAO;SACR;QAED,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;KACzD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,uEACE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACtC,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,cAAc,GACJ,EAClB,6DAAM,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAS,CACjD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/group/group-context-menu.scss?tag=ix-group-context-menu&encapsulation=shadow","src/components/group/group-context-menu.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:host {\n display: block;\n position: relative;\n\n height: 2rem;\n width: 2rem;\n\n margin-block-start: 0.3125rem;\n margin-inline-end: 0.3125rem;\n margin-inline-start: auto;\n\n .hide {\n visibility: collapse;\n }\n\n ::slotted(ix-dropdown) {\n cursor: default;\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 { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n tag: 'ix-group-context-menu',\n styleUrl: './group-context-menu.scss',\n shadow: true,\n})\nexport class GroupContextMenu {\n @Element() hostElement!: HTMLIxGroupContextMenuElement;\n\n @State() showContextMenu = false;\n\n private getTrigger() {\n return this.hostElement;\n }\n\n private configureDropdown(\n dropdownElement: HTMLIxDropdownElement,\n triggerElement: HTMLElement\n ) {\n dropdownElement.positioningStrategy = 'fixed';\n dropdownElement.trigger = triggerElement;\n }\n\n private onSlotChange() {\n const slot = this.hostElement.shadowRoot.querySelector('slot');\n if (!slot) {\n return;\n }\n const elements = getSlottedElements(slot);\n this.showContextMenu = elements.length !== 0;\n\n const dropdownElement = elements.find(\n (elm: Element) => elm.tagName === 'IX-DROPDOWN'\n );\n\n const triggerElement = this.getTrigger();\n\n if (!triggerElement) {\n return;\n }\n\n if (!dropdownElement) {\n return;\n }\n\n this.configureDropdown(dropdownElement, triggerElement);\n }\n\n render() {\n return (\n <Host>\n <ix-icon-button\n class={{ hide: !this.showContextMenu }}\n size=\"24\"\n ghost={true}\n icon={'context-menu'}\n ></ix-icon-button>\n <slot onSlotchange={() => this.onSlotChange()}></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"group-context-menu.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,6NAA6N,CAAC;AAC1P,iCAAe,mBAAmB;;MCgBrB,gBAAgB;;;;;+BAGA,KAAK;;IAExB,UAAU;QAChB,OAAO,IAAI,CAAC,WAAW,CAAC;KACzB;IAEO,iBAAiB,CACvB,eAAsC,EACtC,cAA2B;QAE3B,eAAe,CAAC,mBAAmB,GAAG,OAAO,CAAC;QAC9C,eAAe,CAAC,OAAO,GAAG,cAAc,CAAC;KAC1C;IAEO,YAAY;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC/D,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QACD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;QAE7C,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CACnC,CAAC,GAAY,KAAK,GAAG,CAAC,OAAO,KAAK,aAAa,CAChD,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAEzC,IAAI,CAAC,cAAc,EAAE;YACnB,OAAO;SACR;QAED,IAAI,CAAC,eAAe,EAAE;YACpB,OAAO;SACR;QAED,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;KACzD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,uEACE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACtC,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,cAAc,GACJ,EAClB,6DAAM,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAS,CACjD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/group/group-context-menu.scss?tag=ix-group-context-menu&encapsulation=shadow","src/components/group/group-context-menu.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n:host {\n display: block;\n position: relative;\n\n height: 2rem;\n width: 2rem;\n\n margin-block-start: 0.3125rem;\n margin-inline-end: 0.3125rem;\n margin-inline-start: auto;\n\n .hide {\n visibility: collapse;\n }\n\n ::slotted(ix-dropdown) {\n cursor: default;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n tag: 'ix-group-context-menu',\n styleUrl: './group-context-menu.scss',\n shadow: true,\n})\nexport class GroupContextMenu {\n @Element() hostElement!: HTMLIxGroupContextMenuElement;\n\n @State() showContextMenu = false;\n\n private getTrigger() {\n return this.hostElement;\n }\n\n private configureDropdown(\n dropdownElement: HTMLIxDropdownElement,\n triggerElement: HTMLElement\n ) {\n dropdownElement.positioningStrategy = 'fixed';\n dropdownElement.trigger = triggerElement;\n }\n\n private onSlotChange() {\n const slot = this.hostElement.shadowRoot.querySelector('slot');\n if (!slot) {\n return;\n }\n const elements = getSlottedElements(slot);\n this.showContextMenu = elements.length !== 0;\n\n const dropdownElement = elements.find(\n (elm: Element) => elm.tagName === 'IX-DROPDOWN'\n );\n\n const triggerElement = this.getTrigger();\n\n if (!triggerElement) {\n return;\n }\n\n if (!dropdownElement) {\n return;\n }\n\n this.configureDropdown(dropdownElement, triggerElement);\n }\n\n render() {\n return (\n <Host>\n <ix-icon-button\n class={{ hide: !this.showContextMenu }}\n size=\"24\"\n ghost={true}\n icon={'context-menu'}\n ></ix-icon-button>\n <slot onSlotchange={() => this.onSlotChange()}></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/group-item.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-const groupItemCss = ":host{display:flex;min-height:2.25rem;height:2.25rem}: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>button{display:flex;height:100%;width:100%;align-items:center;justify-content:flex-start;position:relative;outline:none;background-color:var(--theme-group-item--background);border:1px solid transparent;color:var(--theme-color-std-text);cursor:pointer;padding-left:2.5rem}:host>button:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host ix-icon{margin-right:0.25rem;margin-top:-0.125rem}:host .group-entry-selection-indicator{position:absolute;left:-1px;height:calc(100% + 2px);width:0.25rem}:host .group-entry-text{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-entry-text-secondary{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text)}:host .group-entry-text-secondary,:host .group-entry-text-secondary span{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.suppress-selection){pointer-events:none}:host(.selected){border-top-width:0.062rem !important;background-color:var(--theme-color-ghost--selected)}:host(.selected) .group-entry-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host(:hover){background-color:var(--theme-color-ghost--selected-hover);border-color:var(--theme-group-item--border-color--hover)}:host(.selected:hover){background-color:var(--theme-color-ghost--selected-hover)}:host(:active){background-color:var(--theme-color-ghost--selected-active);border-color:var(--theme-group-item--border-color--active)}:host(.selected:active){background-color:var(--theme-color-ghost--selected-active)}";
+const groupItemCss = ":host{display:flex;min-height:2.25rem;height:2.25rem}: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>button{display:flex;height:100%;width:100%;align-items:center;justify-content:flex-start;position:relative;outline:none;background-color:var(--theme-group-item--background);border:1px solid transparent;color:var(--theme-color-std-text);cursor:pointer;padding-left:2.5rem}:host>button:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host ix-icon{margin-right:0.25rem;margin-top:-0.125rem}:host .group-entry-selection-indicator{position:absolute;left:-1px;height:calc(100% + 2px);width:0.25rem}:host .group-entry-text{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-entry-text-secondary{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text)}:host .group-entry-text-secondary,:host .group-entry-text-secondary span{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.selected){border-top-width:0.062rem !important;background-color:var(--theme-color-ghost--selected)}:host(.selected) .group-entry-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host(:hover){background-color:var(--theme-color-ghost--selected-hover);border-color:var(--theme-group-item--border-color--hover)}:host(.selected:hover){background-color:var(--theme-color-ghost--selected-hover)}:host(:active){background-color:var(--theme-color-ghost--selected-active);border-color:var(--theme-group-item--border-color--active)}:host(.selected:active){background-color:var(--theme-color-ghost--selected-active)}";
 const IxGroupItemStyle0 = groupItemCss;
 const GroupItem = /*@__PURE__*/ proxyCustomElement(class GroupItem extends HTMLElement {
@@ -13,21 +13,17 @@ const GroupItem = /*@__PURE__*/ proxyCustomElement(class GroupItem extends HTMLE
         this.text = undefined;
         this.secondaryText = undefined;
         this.suppressSelection = false;
-        this.selected = undefined;
+        this.selected = false;
         this.focusable = true;
         this.index = undefined;
     }
     clickListen() {
-        if (this.suppressSelection) {
-            return;
-        }
         this.selectedChanged.emit(this.hostElement);
     }
     render() {
-        return (h(Host, { key: '1263d38096b46d1f07775d0907018af567054e6d', class: {
+        return (h(Host, { key: '5b28eda518fc9ade8ac54e64f4d9b6027bceafff', class: {
                 selected: this.selected && !this.suppressSelection,
-                'suppress-selection': this.suppressSelection,
-            } }, h("button", { key: 'f5ca23ab1328e745e9bb8299db8d15a450cd3af7', tabindex: this.focusable ? 0 : -1 }, h("div", { key: '3a60d30b7686a8b3b67343e7c5cbd5b1faacf0e4', class: "group-entry-selection-indicator" }), this.icon ? h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (h("span", { class: "group-entry-text" }, h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (h("span", { class: "group-entry-text-secondary" }, h("span", { title: this.secondaryText }, this.secondaryText))) : null, h("slot", { key: 'a24a61b86fea34c7124b5345bd41c08550a145b5' }))));
+            } }, h("button", { key: '961ee833f92bdb256088bf4218053d8075ea2b69', tabindex: this.focusable ? 0 : -1 }, h("div", { key: '69e64634c4db377177ddd6c90cb0aff3665c286c', class: "group-entry-selection-indicator" }), this.icon ? h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (h("span", { class: "group-entry-text" }, h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (h("span", { class: "group-entry-text-secondary" }, h("span", { title: this.secondaryText }, this.secondaryText))) : null, h("slot", { key: 'a948a499ad743906f9cc21dd0b54f4163cf86037' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxGroupItemStyle0; }

package/components/group-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"group-item.js","mappings":";;AAAA,MAAM,YAAY,GAAG,~~gtFAAgtF~~,CAAC;~~AACtuF~~,0BAAe,YAAY;;MCwBd,SAAS;;;;;;;;;iCAqBQ,KAAK~~;;yBAWb~~,IAAI;;;IAaxB,WAAW;QACT,IAAI,~~IAAI,~~CAAC,~~iBAAiB,EAAE;YAC1B,OAAO;SACR;QACD,IAAI,CAAC,~~eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB;~~gBAClD~~,~~oBAAoB,EAAE,IAAI,CAAC,iBAAiB;aAC7C,~~IAED,+DAAQ,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,IACvC,4DAAK,KAAK,EAAC,iCAAiC,GAAO,EAClD,IAAI,CAAC,IAAI,GAAG,eAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,GAAG,IAAI,EACjE,IAAI,CAAC,IAAI,IACR,YAAM,KAAK,EAAC,kBAAkB,IAC5B,YAAM,KAAK,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,IAAI,CAAQ,CACrC,IACL,IAAI,EACP,IAAI,CAAC,aAAa,IACjB,YAAM,KAAK,EAAC,4BAA4B,IACtC,YAAM,KAAK,EAAE,IAAI,CAAC,aAAa,IAAG,IAAI,CAAC,aAAa,CAAQ,CACvD,IACL,IAAI,EACR,8DAAa,CACN,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/group-item/group-item.scss?tag=ix-group-item&encapsulation=shadow","src/components/group-item/group-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/shadow-dom/hover';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n$focusBorderWidth: 1px;\n\n:host {\n @include ix-component;\n display: flex;\n min-height: 2.25rem;\n height: 2.25rem;\n\n > button {\n display: flex;\n height: 100%;\n width: 100%;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n outline: none;\n background-color: var(--theme-group-item--background);\n border: 1px solid transparent;\n color: var(--theme-color-std-text);\n cursor: pointer;\n\n padding-left: 2.5rem;\n\n &:focus-visible {\n border: $focusBorderWidth solid var(--theme-color-focus-bdr);\n }\n }\n\n ix-icon {\n margin-right: $tiny-space;\n margin-top: -0.125rem;\n }\n\n .group-entry-selection-indicator {\n position: absolute;\n left: -#{$focusBorderWidth};\n height: calc(100% + #{$focusBorderWidth 2});\n width: $tiny-space;\n }\n\n .group-entry-text {\n @include text-default;\n @include ellipsis();\n }\n\n .group-entry-text-secondary {\n &,\n span {\n @include text-default;\n @include ellipsis;\n }\n\n display: flex;\n justify-content: flex-end;\n flex-grow: 1;\n white-space: nowrap;\n color: var(--theme-color-soft-text);\n }\n}\n\n:host(.~~suppress-selection) {\n pointer-events: none;\n}\n\n:host(.~~selected) {\n border-top-width: 0.062rem !important;\n background-color: var(--theme-color-ghost--selected);\n\n .group-entry-selection-indicator {\n background-color: var(--theme-group-item-indicator--background--selected);\n }\n}\n\n:host(:hover) {\n background-color: var(--theme-color-ghost--selected-hover);\n border-color: var(--theme-group-item--border-color--hover);\n}\n\n:host(.selected:hover) {\n background-color: var(--theme-color-ghost--selected-hover);\n}\n\n:host(:active) {\n background-color: var(--theme-color-ghost--selected-active);\n border-color: var(--theme-group-item--border-color--active);\n}\n\n:host(.selected:active) {\n background-color: var(--theme-color-ghost--selected-active);\n}\n","/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-group-item',\n styleUrl: 'group-item.scss',\n shadow: true,\n})\nexport class GroupItem {\n @Element() hostElement!: HTMLIxGroupItemElement;\n\n /\n Group item icon\n /\n @Prop() icon: string;\n\n /\n Group item text\n /\n @Prop() text: string;\n\n /\n Group item secondary text\n /\n @Prop() secondaryText: string;\n\n /\n Supress the selection of the group\n /\n @Prop() suppressSelection = false;\n\n /\n Show selected state\n /\n @Prop() selected: boolean;\n\n /\n The elements tabindex attribute will get set accordingly.\n * If true tabindex will be 0, -1 otherwise.\n /\n @Prop() focusable = true;\n\n /\n Selection changed\n /\n @Event() selectedChanged: EventEmitter<HTMLIxGroupItemElement>;\n\n /\n Index\n */\n @Prop() index: number;\n\n @Listen('click', { passive: true })\n clickListen() {\n ~~if (~~this.~~suppressSelection) {\n return;\n }\n this.~~selectedChanged.emit(this.hostElement);\n }\n\n render() {\n return (\n <Host\n class={{\n selected: this.selected && !this.suppressSelection,\n ~~'suppress-selection': this.suppressSelection,\n~~ }}\n >\n <button tabindex={this.focusable ? 0 : -1}>\n <div class=\"group-entry-selection-indicator\"></div>\n {this.icon ? <ix-icon size=\"16\" name={this.icon}></ix-icon> : null}\n {this.text ? (\n <span class=\"group-entry-text\">\n <span title={this.text}>{this.text}</span>\n </span>\n ) : null}\n {this.secondaryText ? (\n <span class=\"group-entry-text-secondary\">\n <span title={this.secondaryText}>{this.secondaryText}</span>\n </span>\n ) : null}\n <slot></slot>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"group-item.js","mappings":";;AAAA,MAAM,YAAY,GAAG,iqFAAiqF,CAAC;AACvrF,0BAAe,YAAY;;MCwBd,SAAS;;;;;;;;;iCAqBQ,KAAK;wBAKL,KAAK;yBAMb,IAAI;;;IAaxB,WAAW;QACT,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB;aACnD,IAED,+DAAQ,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,IACvC,4DAAK,KAAK,EAAC,iCAAiC,GAAO,EAClD,IAAI,CAAC,IAAI,GAAG,eAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,GAAG,IAAI,EACjE,IAAI,CAAC,IAAI,IACR,YAAM,KAAK,EAAC,kBAAkB,IAC5B,YAAM,KAAK,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,IAAI,CAAQ,CACrC,IACL,IAAI,EACP,IAAI,CAAC,aAAa,IACjB,YAAM,KAAK,EAAC,4BAA4B,IACtC,YAAM,KAAK,EAAE,IAAI,CAAC,aAAa,IAAG,IAAI,CAAC,aAAa,CAAQ,CACvD,IACL,IAAI,EACR,8DAAa,CACN,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/group-item/group-item.scss?tag=ix-group-item&encapsulation=shadow","src/components/group-item/group-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/shadow-dom/hover';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n$focusBorderWidth: 1px;\n\n:host {\n @include ix-component;\n display: flex;\n min-height: 2.25rem;\n height: 2.25rem;\n\n > button {\n display: flex;\n height: 100%;\n width: 100%;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n outline: none;\n background-color: var(--theme-group-item--background);\n border: 1px solid transparent;\n color: var(--theme-color-std-text);\n cursor: pointer;\n\n padding-left: 2.5rem;\n\n &:focus-visible {\n border: $focusBorderWidth solid var(--theme-color-focus-bdr);\n }\n }\n\n ix-icon {\n margin-right: $tiny-space;\n margin-top: -0.125rem;\n }\n\n .group-entry-selection-indicator {\n position: absolute;\n left: -#{$focusBorderWidth};\n height: calc(100% + #{$focusBorderWidth 2});\n width: $tiny-space;\n }\n\n .group-entry-text {\n @include text-default;\n @include ellipsis();\n }\n\n .group-entry-text-secondary {\n &,\n span {\n @include text-default;\n @include ellipsis;\n }\n\n display: flex;\n justify-content: flex-end;\n flex-grow: 1;\n white-space: nowrap;\n color: var(--theme-color-soft-text);\n }\n}\n\n:host(.selected) {\n border-top-width: 0.062rem !important;\n background-color: var(--theme-color-ghost--selected);\n\n .group-entry-selection-indicator {\n background-color: var(--theme-group-item-indicator--background--selected);\n }\n}\n\n:host(:hover) {\n background-color: var(--theme-color-ghost--selected-hover);\n border-color: var(--theme-group-item--border-color--hover);\n}\n\n:host(.selected:hover) {\n background-color: var(--theme-color-ghost--selected-hover);\n}\n\n:host(:active) {\n background-color: var(--theme-color-ghost--selected-active);\n border-color: var(--theme-group-item--border-color--active);\n}\n\n:host(.selected:active) {\n background-color: var(--theme-color-ghost--selected-active);\n}\n","/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-group-item',\n styleUrl: 'group-item.scss',\n shadow: true,\n})\nexport class GroupItem {\n @Element() hostElement!: HTMLIxGroupItemElement;\n\n /\n Group item icon\n /\n @Prop() icon?: string;\n\n /\n Group item text\n /\n @Prop() text?: string;\n\n /\n Group item secondary text\n /\n @Prop() secondaryText?: string;\n\n /\n Supress the selection of the group\n /\n @Prop() suppressSelection = false;\n\n /\n Show selected state\n /\n @Prop() selected: boolean = false;\n\n /\n The elements tabindex attribute will get set accordingly.\n * If true tabindex will be 0, -1 otherwise.\n /\n @Prop() focusable = true;\n\n /\n Selection changed\n /\n @Event() selectedChanged!: EventEmitter<HTMLIxGroupItemElement>;\n\n /\n Index\n */\n @Prop() index?: number;\n\n @Listen('click', { passive: true })\n clickListen() {\n this.selectedChanged.emit(this.hostElement);\n }\n\n render() {\n return (\n <Host\n class={{\n selected: this.selected && !this.suppressSelection,\n }}\n >\n <button tabindex={this.focusable ? 0 : -1}>\n <div class=\"group-entry-selection-indicator\"></div>\n {this.icon ? <ix-icon size=\"16\" name={this.icon}></ix-icon> : null}\n {this.text ? (\n <span class=\"group-entry-text\">\n <span title={this.text}>{this.text}</span>\n </span>\n ) : null}\n {this.secondaryText ? (\n <span class=\"group-entry-text-secondary\">\n <span title={this.secondaryText}>{this.secondaryText}</span>\n </span>\n ) : null}\n <slot></slot>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/icon-button.js CHANGED Viewed

@@ -69,7 +69,7 @@ const IconButton = /*@__PURE__*/ proxyCustomElement(class IconButton extends HTM
             type: this.type,
             extraClasses: this.getIconSizeClass(),
         };
-        return (h(Host, { key: '3936b4cb8d9419a0be9618949383a20e91d26b24', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '44c24801e0082622aa94c3ac213b633c6da00d61' }, baseButtonProps))));
+        return (h(Host, { key: '6669b0611bec8b030b361a9b43fcb40b7b4497fe', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '2944f738e8674a5303e4e85dd7ecb4d7b618242e' }, baseButtonProps))));
     }
     get hostElement() { return this; }
     static get style() { return IxIconButtonStyle0; }

package/components/index.js CHANGED Viewed

@@ -6,6 +6,7 @@ export { U as UploadFileState } from './upload-file-state.js';
 import { g as getCoreDelegate } from './modal.js';
 export { c as closeModal, d as dismissModal, g as getCoreDelegate, r as registerFrameworkDelegate, a as resolveDelegate, s as showMessage, b as showModal } from './modal.js';
 import { A as Animation } from './animation.js';
+export { T as TypedEvent } from './typed-event.js';
 export { c as convertToAbbreviationString, a as convertToRemString } from './rwd.util.js';
 export { g as getCurrentSystemAppearance, t as themeSwitcher } from './theme-switcher.js';

package/components/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index.js","mappings":"~~;;;;;;;;;;;~~AAAA;;;;;;;;MAUa,WAAW;;;SCYR,iBAAiB;IAC/B,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAChD,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,GAAG,aAAa,CAAC;IAClC,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;QAC5B,OAAO,CAAC,IAAI,CACV,wEAAwE,CACzE,CAAC;QACF,OAAO,SAAS,CAAC;KAClB;IACD,IAAI,CAAC,SAAS,EAAE;QACd,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACpE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;QAE1C,OAAO,cAAc,CAAC;KACvB;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;SAEe,gBAAgB,CAAC,QAAuB;IACtD,MAAM,SAAS,GAAG,iBAAiB,EAAE,CAAC;IACtC,SAAS,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAChC,CAAC;AAED,SAAS,KAAK,CAAC,MAAmB;IAChC,MAAM,SAAS,GAAG,iBAAiB,EAAE,CAAC;IACtC,OAAO,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;AACrC,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,MAAmB;IAC/B,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,MAAM,IACZ,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,KAAK,GAAG,CAAC,MAAmB;IAChC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,OAAO,IACb,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;IAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;IAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC;;AC9ED;;;;;;;;SAYgB,gBAAgB,CAAC,OAAe;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACjD,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;IAEvB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC3D,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE3B,eAAe,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACpC,KAAK,CAAC,SAAS,EAAE,CAAC;IAElB,OAAO;QACL,MAAM,EAAE,CAAC,IAAY,MAAM,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;QACpD,MAAM,EAAE,CAAC,IAAa,EAAE,UAAkB,GAAG;YAC3C,IAAI,IAAI,KAAK,SAAS,EAAE;gBACtB,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;aAC1B;iBAAM;gBACL,OAAO,GAAG,CAAC,CAAC;aACb;YACD,UAAU,CAAC;gBACT,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;gBACvB,UAAU,CACR,YAAY,MAAM,eAAe,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EACrD,SAAS,CAAC,UAAU,CACrB,CAAC;aACH,EAAE,OAAO,CAAC,CAAC;SACb;KACF,CAAC;AACJ;;;;","names":[],"sources":["src/components/category-filter/filter-state.ts","src/components/toast/toast-utils.ts","src/components/utils/modal/loading.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 /\n\nimport { LogicalFilterOperator } from './logical-filter-operator';\nexport class FilterState {\n public tokens: string[];\n public categories: {\n id: string;\n value: string;\n operator: LogicalFilterOperator;\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 /\nimport { ShowToastResult } from './toast-container';\nexport type ToastType = 'info' \| 'success' \| 'error' \| 'warning';\nexport type ToastPosition = 'bottom-right' \| 'top-right';\n\nexport interface ToastConfig {\n title?: string;\n message: string \| HTMLElement;\n type?: ToastType;\n autoClose?: boolean;\n autoCloseDelay?: number;\n icon?: string;\n iconColor?: string;\n}\n\nexport function getToastContainer() {\n const containerList = Array.from(\n document.querySelectorAll('ix-toast-container')\n );\n const [container] = containerList;\n if (containerList.length > 1) {\n console.warn(\n 'Multiple toast containers were found. Only the first one will be used.'\n );\n return container;\n }\n if (!container) {\n const toastContainer = document.createElement('ix-toast-container');\n document.body.appendChild(toastContainer);\n\n return toastContainer;\n }\n return container;\n}\n\nexport function setToastPosition(position: ToastPosition) {\n const container = getToastContainer();\n container.position = position;\n}\n\nfunction toast(config: ToastConfig): Promise<ShowToastResult> {\n const container = getToastContainer();\n return container.showToast(config);\n}\n\ntoast.info = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'info',\n });\n};\n\ntoast.error = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'error',\n });\n};\n\ntoast.success = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'success',\n });\n};\n\ntoast.warning = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'warning',\n });\n};\n\nexport { toast };\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 Animation from '../animation';\nimport { getCoreDelegate } from '../delegate';\n\nexport function showModalLoading(message: string) {\n const modal = document.createElement('ix-modal');\n modal.keyboard = false;\n\n const loading = document.createElement('ix-modal-loading');\n loading.innerText = message;\n modal.appendChild(loading);\n\n getCoreDelegate().attachView(modal);\n modal.showModal();\n\n return {\n update: (text: string) => (loading.innerHTML = text),\n finish: (text?: string, timeout: number = 250) => {\n if (text !== undefined) {\n loading.innerText = text;\n } else {\n timeout = 0;\n }\n setTimeout(() => {\n modal.closeModal(null);\n setTimeout(\n async () => await getCoreDelegate().removeView(modal),\n Animation.mediumTime\n );\n }, timeout);\n },\n };\n}\n"],"version":3}
1	+ {"file":"index.js","mappings":";;;;;;;;;;;;AAAA;;;;;;;;MAUa,WAAW;;;SCYR,iBAAiB;IAC/B,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAChD,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,GAAG,aAAa,CAAC;IAClC,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;QAC5B,OAAO,CAAC,IAAI,CACV,wEAAwE,CACzE,CAAC;QACF,OAAO,SAAS,CAAC;KAClB;IACD,IAAI,CAAC,SAAS,EAAE;QACd,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACpE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;QAE1C,OAAO,cAAc,CAAC;KACvB;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;SAEe,gBAAgB,CAAC,QAAuB;IACtD,MAAM,SAAS,GAAG,iBAAiB,EAAE,CAAC;IACtC,SAAS,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAChC,CAAC;AAED,SAAS,KAAK,CAAC,MAAmB;IAChC,MAAM,SAAS,GAAG,iBAAiB,EAAE,CAAC;IACtC,OAAO,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;AACrC,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,MAAmB;IAC/B,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,MAAM,IACZ,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,KAAK,GAAG,CAAC,MAAmB;IAChC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,OAAO,IACb,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;IAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;IAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC;;AC9ED;;;;;;;;SAYgB,gBAAgB,CAAC,OAAe;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACjD,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;IAEvB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC3D,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE3B,eAAe,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACpC,KAAK,CAAC,SAAS,EAAE,CAAC;IAElB,OAAO;QACL,MAAM,EAAE,CAAC,IAAY,MAAM,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;QACpD,MAAM,EAAE,CAAC,IAAa,EAAE,UAAkB,GAAG;YAC3C,IAAI,IAAI,KAAK,SAAS,EAAE;gBACtB,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;aAC1B;iBAAM;gBACL,OAAO,GAAG,CAAC,CAAC;aACb;YACD,UAAU,CAAC;gBACT,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;gBACvB,UAAU,CACR,YAAY,MAAM,eAAe,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EACrD,SAAS,CAAC,UAAU,CACrB,CAAC;aACH,EAAE,OAAO,CAAC,CAAC;SACb;KACF,CAAC;AACJ;;;;","names":[],"sources":["src/components/category-filter/filter-state.ts","src/components/toast/toast-utils.ts","src/components/utils/modal/loading.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 /\n\nimport { LogicalFilterOperator } from './logical-filter-operator';\nexport class FilterState {\n public tokens: string[];\n public categories: {\n id: string;\n value: string;\n operator: LogicalFilterOperator;\n }[];\n}\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport { ShowToastResult } from './toast-container';\nexport type ToastType = 'info' \| 'success' \| 'error' \| 'warning';\nexport type ToastPosition = 'bottom-right' \| 'top-right';\n\nexport interface ToastConfig {\n title?: string;\n message: string \| HTMLElement;\n type?: ToastType;\n autoClose?: boolean;\n autoCloseDelay?: number;\n icon?: string;\n iconColor?: string;\n}\n\nexport function getToastContainer() {\n const containerList = Array.from(\n document.querySelectorAll('ix-toast-container')\n );\n const [container] = containerList;\n if (containerList.length > 1) {\n console.warn(\n 'Multiple toast containers were found. Only the first one will be used.'\n );\n return container;\n }\n if (!container) {\n const toastContainer = document.createElement('ix-toast-container');\n document.body.appendChild(toastContainer);\n\n return toastContainer;\n }\n return container;\n}\n\nexport function setToastPosition(position: ToastPosition) {\n const container = getToastContainer();\n container.position = position;\n}\n\nfunction toast(config: ToastConfig): Promise<ShowToastResult> {\n const container = getToastContainer();\n return container.showToast(config);\n}\n\ntoast.info = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'info',\n });\n};\n\ntoast.error = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'error',\n });\n};\n\ntoast.success = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'success',\n });\n};\n\ntoast.warning = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'warning',\n });\n};\n\nexport { toast };\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 Animation from '../animation';\nimport { getCoreDelegate } from '../delegate';\n\nexport function showModalLoading(message: string) {\n const modal = document.createElement('ix-modal');\n modal.keyboard = false;\n\n const loading = document.createElement('ix-modal-loading');\n loading.innerText = message;\n modal.appendChild(loading);\n\n getCoreDelegate().attachView(modal);\n modal.showModal();\n\n return {\n update: (text: string) => (loading.innerHTML = text),\n finish: (text?: string, timeout: number = 250) => {\n if (text !== undefined) {\n loading.innerText = text;\n } else {\n timeout = 0;\n }\n setTimeout(() => {\n modal.closeModal(null);\n setTimeout(\n async () => await getCoreDelegate().removeView(modal),\n Animation.mediumTime\n );\n }, timeout);\n },\n };\n}\n"],"version":3}

package/components/ix-action-card.js CHANGED Viewed

@@ -27,7 +27,7 @@ const IxActionCard$1 = /*@__PURE__*/ proxyCustomElement(class IxActionCard exten
         }
     }
     render() {
-        return (h(Host, { key: 'f83abb076a856034694fa17014a31c511508ac84' }, h("ix-card", { key: 'e21ebb1bc1e27db30872b8c144001ea338c89ce2', selected: this.selected, variant: this.variant, class: 'pointer' }, h("ix-card-content", { key: '6074ffb241993674c9b636d2b43c8cf0b76d3437' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("div", { key: 'ee7c10340f5dd87d397f013de5879caddb37ca5d' }, this.heading ? (h("ix-typography", { format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", color: this.getSubheadingColor() }, this.subheading)) : null, h("slot", { key: '5ba86a041964d413a2f7ff7d323905ba9880543e' }))))));
+        return (h(Host, { key: '71cb83edc3e9e57a2f8a73e41e819b74e7ce0669' }, h("ix-card", { key: '71d1eb80d2ea03862547845d3cfaae96137d7e77', selected: this.selected, variant: this.variant, class: 'pointer' }, h("ix-card-content", { key: 'f615c68c98ddfd6447bc19b3b3a27008243c909a' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("div", { key: 'b037e8ff7d345f00178c0fb0385e02e4e8738891' }, this.heading ? (h("ix-typography", { format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", color: this.getSubheadingColor() }, this.subheading)) : null, h("slot", { key: 'b4a4fa2b7149d3ac4b95670f233795c29f25b966' }))))));
     }
     static get style() { return IxActionCardStyle0; }
 }, [1, "ix-action-card", {

package/components/ix-action-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-action-card.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,y6BAAy6B,CAAC;AACh8B,2BAAe,aAAa;;MCsBfA,cAAY;;;;;~~uBAIc~~,SAAS;oBAKX,SAAS;;;wBAezB,KAAK;;IAEhB,kBAAkB;QACxB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS,CAAC;YACf,KAAK,cAAc;gBACjB,OAAO,MAAM,CAAC;YAEhB;gBACE,OAAO,SAAS,CAAC;SACpB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,SAAS,IAEhB,0EACG,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,IAC3D,IAAI,EACR,8DACG,IAAI,CAAC,OAAO,IACX,qBAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,IACvD,IAAI,EACP,IAAI,CAAC,UAAU,IACd,qBAAe,MAAM,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,IACxD,IAAI,CAAC,UAAU,CACF,IACd,IAAI,EACR,8DAAa,CACT,CACU,CACV,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["IxActionCard"],"sources":["src/components/action-card/action-card.scss?tag=ix-action-card&encapsulation=shadow","src/components/action-card/action-card.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\n:host {\n @include ix-component;\n display: block;\n position: relative;\n min-width: 13.375rem;\n width: 13.375rem;\n height: 7.5rem;\n min-height: 7.5rem;\n cursor: pointer;\n\n margin: 0.25rem 0;\n\n ix-card {\n width: 100%;\n height: 100%;\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 { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\nimport { TypographyColors } from '../typography/typography';\n\nexport type ActionCardVariant = CardVariant;\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-action-card',\n styleUrl: 'action-card.scss',\n shadow: true,\n})\nexport class IxActionCard {\n /\n Card variant\n /\n @Prop() variant: ActionCardVariant = 'insight';\n\n /\n Card icon\n /\n @Prop() icon: string \| undefined = undefined;\n\n /\n Card heading\n /\n @Prop() heading: string;\n\n /\n Card subheading\n /\n @Prop() subheading: string;\n\n /\n Card selection\n */\n @Prop() selected = false;\n\n private getSubheadingColor(): TypographyColors {\n switch (this.variant) {\n case 'insight':\n case 'notification':\n return 'soft';\n\n default:\n return undefined;\n }\n }\n\n render() {\n return (\n <Host>\n <ix-card\n selected={this.selected}\n variant={this.variant}\n class={'pointer'}\n >\n <ix-card-content>\n {this.icon ? (\n <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n ) : null}\n <div>\n {this.heading ? (\n <ix-typography format=\"h4\">{this.heading}</ix-typography>\n ) : null}\n {this.subheading ? (\n <ix-typography format=\"h5\" color={this.getSubheadingColor()}>\n {this.subheading}\n </ix-typography>\n ) : null}\n <slot></slot>\n </div>\n </ix-card-content>\n </ix-card>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-action-card.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,y6BAAy6B,CAAC;AACh8B,2BAAe,aAAa;;MCsBfA,cAAY;;;;;uBAKc,SAAS;oBAKX,SAAS;;;wBAezB,KAAK;;IAEhB,kBAAkB;QACxB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS,CAAC;YACf,KAAK,cAAc;gBACjB,OAAO,MAAM,CAAC;YAEhB;gBACE,OAAO,SAAS,CAAC;SACpB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,SAAS,IAEhB,0EACG,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,IAC3D,IAAI,EACR,8DACG,IAAI,CAAC,OAAO,IACX,qBAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,IACvD,IAAI,EACP,IAAI,CAAC,UAAU,IACd,qBAAe,MAAM,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,IACxD,IAAI,CAAC,UAAU,CACF,IACd,IAAI,EACR,8DAAa,CACT,CACU,CACV,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["IxActionCard"],"sources":["src/components/action-card/action-card.scss?tag=ix-action-card&encapsulation=shadow","src/components/action-card/action-card.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\n:host {\n @include ix-component;\n display: block;\n position: relative;\n min-width: 13.375rem;\n width: 13.375rem;\n height: 7.5rem;\n min-height: 7.5rem;\n cursor: pointer;\n\n margin: 0.25rem 0;\n\n ix-card {\n width: 100%;\n height: 100%;\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 { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\nimport { TypographyColors } from '../typography/typography';\n\nexport type ActionCardVariant = CardVariant;\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-action-card',\n styleUrl: 'action-card.scss',\n shadow: true,\n})\nexport class IxActionCard {\n /\n Card variant\n * @deprecated variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead.\n /\n @Prop() variant: ActionCardVariant = 'insight';\n\n /\n Card icon\n /\n @Prop() icon: string \| undefined = undefined;\n\n /\n Card heading\n /\n @Prop() heading?: string;\n\n /\n Card subheading\n /\n @Prop() subheading?: string;\n\n /\n Card selection\n */\n @Prop() selected = false;\n\n private getSubheadingColor(): TypographyColors \| undefined {\n switch (this.variant) {\n case 'insight':\n case 'notification':\n return 'soft';\n\n default:\n return undefined;\n }\n }\n\n render() {\n return (\n <Host>\n <ix-card\n selected={this.selected}\n variant={this.variant}\n class={'pointer'}\n >\n <ix-card-content>\n {this.icon ? (\n <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n ) : null}\n <div>\n {this.heading ? (\n <ix-typography format=\"h4\">{this.heading}</ix-typography>\n ) : null}\n {this.subheading ? (\n <ix-typography format=\"h5\" color={this.getSubheadingColor()}>\n {this.subheading}\n </ix-typography>\n ) : null}\n <slot></slot>\n </div>\n </ix-card-content>\n </ix-card>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-application-sidebar.js CHANGED Viewed

@@ -33,7 +33,7 @@ const ApplicationSidebar = /*@__PURE__*/ proxyCustomElement(class ApplicationSid
         anime(animation);
     }
     render() {
-        return (h(Host, { key: 'fe0f54c79115877bac6d0032320550ad2e3fe089', slot: "application-sidebar", class: {
+        return (h(Host, { key: '1926efcbe2db6ac120295339e501dbac7c524638', slot: "application-sidebar", class: {
                 visible: this.visible,
             } }, this.visible ? h("slot", null) : null));
     }

package/components/ix-application-switch-modal.js CHANGED Viewed

@@ -47,7 +47,7 @@ const ApplicationSwitchModal = /*@__PURE__*/ proxyCustomElement(class Applicatio
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '2c9a4d11f697563924effefae0ca86ca826fa9c1' }, h("ix-modal-header", { key: '09586fc6d884b175ea95e8f4f42e9017c2874ef4', icon: "apps" }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), h("ix-modal-content", { key: '44be3f676830e44c4450ac9a85280829d2570004', class: "content" }, h("div", { key: 'd15e8b91de03f40013cfe94cde3159619b8ee8cc', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (h("div", { key: '5d8cc548c1c7adaa83c89ac329d04be5e6f7a59c', class: "loading" }, h("ix-spinner", { key: '80c9c4adb4546028848d2b47929527b613152651', size: "medium", variant: "primary" }), h("span", { key: 'c06fc0f909d940df03402e360e2a3d64bd9decc4' }, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) ||
+        return (h(Host, { key: '845462077983ebe914a48016471c0e9d9010b86c' }, h("ix-modal-header", { key: 'a4742a78f871f08be16aec7adf9312c5c2ddc3dd', icon: "apps" }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), h("ix-modal-content", { key: '9faa6e8503559eb2423f31131413534092aaa88d', class: "content" }, h("div", { key: '385f5f0229b0d5a318e7864ecaace98a945d541e', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (h("div", { key: 'ee0c3cab0c5ea6c3efbc8d219de8662ee3e305cf', class: "loading" }, h("ix-spinner", { key: '2150cfc35fd22fa40042fa67e9f38af6da810894', size: "medium", variant: "primary" }), h("span", { key: 'b95a1261179c13cb04b8e92a369d466d95ac1969' }, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) ||
             'Loading available applications...'))), (_d = this.config) === null || _d === void 0 ? void 0 :
             _d.apps.map((appEntry) => {
                 var _a;

package/components/ix-application.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { m as menuController } from './menu-service.js';
 import { h as hasSlottedElements } from './shadow-dom.js';
 import { t as themeSwitcher } from './theme-switcher.js';
-const applicationCss = ":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}: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 ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .application{display:flex;position:relative;flex-direction:row;height:100%;width:100%;overflow:hidden}:host main{display:block;position:relative;height:100%;width:100%;overflow:hidden}:host(.breakpoint-md){--ix-application-menu-margin-left:3.25rem}:host(.breakpoint-md) aside.slotted{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-md) aside.slotted+main{margin-left:0}:host(.breakpoint-md) aside:not(.slotted)+main{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-lg){--ix-application-menu-margin-left:0}:host(.breakpoint-sm){--ix-application-menu-margin-left:0}";
+const applicationCss = ":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}: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 ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .application{display:flex;position:relative;flex-direction:row;height:100%;width:100%;overflow:hidden}:host .content-area{display:flex;position:relative;flex-direction:column;flex-wrap:nowrap;height:calc(100% - var(--ix-safe-area-inset-bottom, 0px));width:100%;margin-left:var(--ix-application-menu-margin-left)}:host main{display:block;position:relative;flex-grow:1;width:100%;padding-bottom:var(--ix-safe-area-inset-bottom);overflow:auto}:host footer{display:block;position:relative;width:100%}:host(.breakpoint-md){--ix-application-menu-margin-left:calc(\n    3.25rem + var(--ix-application-menu-safe-area-left, 0rem)\n  )}:host(.breakpoint-md) aside.slotted{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-md) aside.slotted+.content-area{margin-left:0}:host(.breakpoint-md) aside:not(.slotted)+.content-area{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-lg){--ix-application-menu-margin-left:0}:host(.breakpoint-sm){--ix-application-menu-margin-left:var(\n    --ix-application-menu-safe-area-left,\n    0rem\n  )}";
 const IxApplicationStyle0 = applicationCss;
 const Application = /*@__PURE__*/ proxyCustomElement(class Application extends HTMLElement {
@@ -88,12 +88,12 @@ const Application = /*@__PURE__*/ proxyCustomElement(class Application extends H
         });
     }
     render() {
-        return (h(Host, { key: '4e8314dec7968a3b9b2e00a7852dc53c924d0c53', "data-role": "", class: {
+        return (h(Host, { key: 'e42b2df8a913b1ae54d5b5afd9ef9875d83d2466', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, h("slot", { key: '2f4a52a13679af639648164eff165d5dd37ec951', name: "application-header" }), h("div", { key: 'b316ff04f23e4606d54ddcc5531ed884b988e360', class: "application" }, h("slot", { key: '40f4800917fa9f24cdc50c72543e2c7181878775', name: "menu" }), h("aside", { key: '62e0120b64ad942e7dd991b6fe9912b60e36e04f', class: {
+            } }, h("slot", { key: '24b522f72e63a261188a8084370471491e27a6c5', name: "application-header" }), h("div", { key: '0021de9b0dabffcfef603ccd1fdfd7c5b010f091', class: "application" }, h("slot", { key: 'f569c4e161e135114bd890740282e6122b7d9d83', name: "menu" }), h("aside", { key: 'b9f4f6128d9616b376cc14a2cd1802bc64fed490', class: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, onClick: () => this.onContentClick() }, h("slot", { key: '211f35df78de174484e914fa646227ba290fb9ae', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("main", { key: 'f58973392fbff54f0aef27ae95560cfb36dbd568', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'ac63821ff0fde080c1dd284dcb7df10113cb6477' })))));
+            }, onClick: () => this.onContentClick() }, h("slot", { key: '5f3e5ee628a9f5b2d8a8f923605e397dbefdd02c', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: '5b807136b901fb393f213845cdd6b05cd1d16c36', class: "content-area" }, h("main", { key: '48ce4afef4e511c3ddb244c8261bbac171282dab', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '0dbba0dddf6f14ceac385ffffc1d7cb58b761c07' })), h("footer", { key: '60e17a11f1b3bb8b9b573f6c10c1c42540fb96be', class: "footer" }, h("slot", { key: 'd36336cbad32d38928883d1c40fe74daaf3efbc9', name: "bottom" }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-application.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-application.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,~~6hDAA6hD~~,CAAC;~~AACrjD~~,4BAAe,cAAc;;MC6BhB,WAAW;;;;;;qCAWU,KAAK;;2BAmBD,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;;0BAWpB,IAAI;yCACD,KAAK;;IAzB1C,iBAAiB,CAAC,OAA+B;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ,wBAAwB,CAAC,yBAAyB,EAAE,CAAC;YACrD,OAAO;SACR;QAED,wBAAwB,CAAC,0BAA0B,EAAE,CAAC;QACtD,wBAAwB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;KACjD;IAOD,mBAAmB,CAAC,WAAyB;QAC3C,wBAAwB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;KACtD;IAYD,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;KAClD;IAED,IAAI,sBAAsB;QACxB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAC9C,2BAA2B,CACT,CAAC;KACtB;IAIO,cAAc;;QACpB,IAAI,cAAc,CAAC,QAAQ,EAAE;YAC3B,OAAO;SACR;QACD,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KAC9B;IAED,iBAAiB;QACf,wBAAwB,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE1D,IAAI,CAAC,eAAe,GAAG,kBAAkB,CACvC,IAAI,CAAC,WAAW,EAChB,wBAAwB,EACxB;YACE,UAAU,EAAE,KAAK;YACjB,IAAI,EAAE,kBAAkB;YACxB,OAAO,EAAE,IAAI,CAAC,yBAAyB;YACvC,eAAe,EAAE,IAAI,CAAC,eAAe;SACtC,CACF,CAAC;QAEF,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI;YAC9D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;QAEtD,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC9C;QAED,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;KAChC;IAIO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,IAAI,CAAC,qBAAqB,EAAE;gBAC9B,aAAa,CAAC,UAAU,EAAE,CAAC;aAC5B;YAED,OAAO;SACR;QAED,IAAI,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC9C,aAAa,CAAC,QAAQ,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;YAC9C,OAAO;SACR;QAED,aAAa,CAAC,QAAQ,CACpB,SAAS,IAAI,CAAC,KAAK,OAAO,EAC1B,IAAI,CAAC,qBAAqB,CAC3B,CAAC;KACH;IAID,0BAA0B;QACxB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,UAAU,EAAE,KAAK;YACjB,IAAI,EAAE,kBAAkB;YACxB,OAAO,EAAE,IAAI,CAAC,yBAAyB;YACvC,eAAe,EAAE,IAAI,CAAC,eAAe;SACtC,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACE,EAAC,IAAI,kEACO,EAAE,EACZ,KAAK,EAAE;gBACL,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI;aACxC,IAED,6DAAM,IAAI,EAAC,oBAAoB,GAAQ,EACvC,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,8DACE,KAAK,EAAE;gBACL,qBAAqB,EAAE,IAAI;gBAC3B,OAAO,EAAE,IAAI,CAAC,yBAAyB;aACxC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IAEpC,6DACE,IAAI,EAAC,qBAAqB,EAC1B,YAAY,EAAE,OACX,IAAI,CAAC,yBAAyB,GAAG,kBAAkB,CAClD,IAAI,CAAC,sBAAsB,CAC5B,CAAC,GAEE,CACF,EACR,6DAAM,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACxD,8DAAa,CACR,~~CACH~~,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/application/application.scss?tag=ix-application&encapsulation=shadow","src/components/application/application.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 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n flex-direction: column;\n\n ix-application-header {\n z-index: calc(var(--theme-z-index-sticky) + 1);\n }\n\n .logo-wrapper {\n display: contents;\n }\n\n .application {\n display: flex;\n position: relative;\n flex-direction: row;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n\n ~~main~~ {\n display: ~~block~~;\n position: relative;\n height: 100%;\n width: 100%;\n overflow: ~~hidden~~;\n }\n}\n\n:host(.breakpoint-md) {\n --ix-application-menu-margin-left: 3.25rem;\n\n aside.slotted {\n margin-left: var(--ix-application-menu-margin-left);\n }\n\n aside.slotted + ~~main~~ {\n margin-left: 0;\n }\n\n aside:not(.slotted) + ~~main~~ {\n margin-left: var(--ix-application-menu-margin-left);\n }\n}\n\n:host(.breakpoint-lg) {\n --ix-application-menu-margin-left: 0;\n}\n\n:host(.breakpoint-sm) {\n --ix-application-menu-margin-left: 0;\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, State, Watch } from '@stencil/core';\nimport {\n ApplicationLayoutContext,\n AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { IxTheme, themeSwitcher } from '../utils/theme-switcher';\nimport { Disposable } from '../utils/typed-event';\n\n/\n @since 2.1.0\n /\n@Component({\n tag: 'ix-application',\n styleUrl: 'application.scss',\n shadow: true,\n})\nexport class Application {\n @Element() hostElement: HTMLIxApplicationElement;\n\n /\n Application theme\n /\n @Prop() theme: IxTheme;\n\n /\n Use the system appearance dark or light\n /\n @Prop() themeSystemAppearance = false;\n\n /\n Change the responsive layout of the menu structure\n /\n @Prop() forceBreakpoint: Breakpoint \| undefined;\n forceLayoutChange(newMode: Breakpoint \| undefined) {\n if (!newMode) {\n applicationLayoutService.enableBreakpointDetection();\n return;\n }\n\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint(newMode);\n }\n\n /\n Supported layouts\n /\n @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n @Watch('breakpoints')\n onBreakpointsChange(breakpoints: Breakpoint[]) {\n applicationLayoutService.setBreakpoints(breakpoints);\n }\n\n /\n Define application switch configuration\n */\n @Prop() appSwitchConfig: AppSwitchConfiguration;\n\n @State() breakpoint: Breakpoint = 'lg';\n @State() applicationSidebarSlotted = false;\n\n private contextProvider: ContextProvider<typeof ApplicationLayoutContext>;\n\n get menu(): HTMLIxMenuElement \| null {\n return this.hostElement.querySelector('ix-menu');\n }\n\n get applicationSidebarSlot() {\n return this.hostElement.shadowRoot.querySelector(\n '.application-sidebar slot'\n ) as HTMLSlotElement;\n }\n\n private modeDisposable: Disposable;\n\n private onContentClick() {\n if (menuController.isPinned) {\n return;\n }\n this.menu?.toggleMenu(false);\n }\n\n componentWillLoad() {\n applicationLayoutService.setBreakpoints(this.breakpoints);\n\n this.contextProvider = useContextProvider(\n this.hostElement,\n ApplicationLayoutContext,\n {\n hideHeader: false,\n host: 'basic-navigation',\n sidebar: this.applicationSidebarSlotted,\n appSwitchConfig: this.appSwitchConfig,\n }\n );\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n this.breakpoint = mode;\n });\n this.breakpoint = applicationLayoutService.breakpoint;\n\n if (this.forceBreakpoint) {\n this.forceLayoutChange(this.forceBreakpoint);\n }\n\n this.changeTheme();\n }\n\n disconnectedCallback() {\n this.modeDisposable?.dispose();\n }\n\n @Watch('theme')\n @Watch('themeSystemAppearance')\n private changeTheme() {\n if (!this.theme) {\n if (this.themeSystemAppearance) {\n themeSwitcher.setVariant();\n }\n\n return;\n }\n\n if (themeSwitcher.hasVariantSuffix(this.theme)) {\n themeSwitcher.setTheme(`theme-${this.theme}`);\n return;\n }\n\n themeSwitcher.setTheme(\n `theme-${this.theme}-dark`,\n this.themeSystemAppearance\n );\n }\n\n @Watch('appSwitchConfig')\n @Watch('applicationSidebarSlotted')\n onApplicationSidebarChange() {\n this.contextProvider.emit({\n hideHeader: false,\n host: 'basic-navigation',\n sidebar: this.applicationSidebarSlotted,\n appSwitchConfig: this.appSwitchConfig,\n });\n }\n\n render() {\n return (\n <Host\n data-role=\"\"\n class={{\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n >\n <slot name=\"application-header\"></slot>\n <div class=\"application\">\n <slot name=\"menu\"></slot>\n <aside\n class={{\n 'application-sidebar': true,\n slotted: this.applicationSidebarSlotted,\n }}\n onClick={() => this.onContentClick()}\n >\n <slot\n name=\"application-sidebar\"\n onSlotchange={() =>\n (this.applicationSidebarSlotted = hasSlottedElements(\n this.applicationSidebarSlot\n ))\n }\n ></slot>\n </aside>\n <main class=\"content\" onClick={() => this.onContentClick()}>\n <slot></slot>\n </~~main~~>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-application.js","mappings":"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","names":[],"sources":["src/components/application/application.scss?tag=ix-application&encapsulation=shadow","src/components/application/application.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 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n flex-direction: column;\n\n ix-application-header {\n z-index: calc(var(--theme-z-index-sticky) + 1);\n }\n\n .logo-wrapper {\n display: contents;\n }\n\n .application {\n display: flex;\n position: relative;\n flex-direction: row;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n\n .content-area {\n display: flex;\n position: relative;\n flex-direction: column;\n flex-wrap: nowrap;\n height: calc(100% - var(--ix-safe-area-inset-bottom, 0px));\n width: 100%;\n margin-left: var(--ix-application-menu-margin-left);\n }\n\n main {\n display: block;\n position: relative;\n flex-grow: 1;\n\n width: 100%;\n padding-bottom: var(--ix-safe-area-inset-bottom);\n overflow: auto;\n }\n\n footer {\n display: block;\n position: relative;\n width: 100%;\n }\n}\n\n:host(.breakpoint-md) {\n --ix-application-menu-margin-left: calc(\n 3.25rem + var(--ix-application-menu-safe-area-left, 0rem)\n );\n\n aside.slotted {\n margin-left: var(--ix-application-menu-margin-left);\n }\n\n aside.slotted + .content-area {\n margin-left: 0;\n }\n\n aside:not(.slotted) + .content-area {\n margin-left: var(--ix-application-menu-margin-left);\n }\n}\n\n:host(.breakpoint-lg) {\n --ix-application-menu-margin-left: 0;\n}\n\n:host(.breakpoint-sm) {\n --ix-application-menu-margin-left: var(\n --ix-application-menu-safe-area-left,\n 0rem\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 { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport {\n ApplicationLayoutContext,\n AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { IxTheme, themeSwitcher } from '../utils/theme-switcher';\nimport { Disposable } from '../utils/typed-event';\n\n/\n @since 2.1.0\n /\n@Component({\n tag: 'ix-application',\n styleUrl: 'application.scss',\n shadow: true,\n})\nexport class Application {\n @Element() hostElement: HTMLIxApplicationElement;\n\n /\n Application theme\n /\n @Prop() theme: IxTheme;\n\n /\n Use the system appearance dark or light\n /\n @Prop() themeSystemAppearance = false;\n\n /\n Change the responsive layout of the menu structure\n /\n @Prop() forceBreakpoint: Breakpoint \| undefined;\n forceLayoutChange(newMode: Breakpoint \| undefined) {\n if (!newMode) {\n applicationLayoutService.enableBreakpointDetection();\n return;\n }\n\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint(newMode);\n }\n\n /\n Supported layouts\n /\n @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n @Watch('breakpoints')\n onBreakpointsChange(breakpoints: Breakpoint[]) {\n applicationLayoutService.setBreakpoints(breakpoints);\n }\n\n /\n Define application switch configuration\n */\n @Prop() appSwitchConfig: AppSwitchConfiguration;\n\n @State() breakpoint: Breakpoint = 'lg';\n @State() applicationSidebarSlotted = false;\n\n private contextProvider: ContextProvider<typeof ApplicationLayoutContext>;\n\n get menu(): HTMLIxMenuElement \| null {\n return this.hostElement.querySelector('ix-menu');\n }\n\n get applicationSidebarSlot() {\n return this.hostElement.shadowRoot.querySelector(\n '.application-sidebar slot'\n ) as HTMLSlotElement;\n }\n\n private modeDisposable: Disposable;\n\n private onContentClick() {\n if (menuController.isPinned) {\n return;\n }\n this.menu?.toggleMenu(false);\n }\n\n componentWillLoad() {\n applicationLayoutService.setBreakpoints(this.breakpoints);\n\n this.contextProvider = useContextProvider(\n this.hostElement,\n ApplicationLayoutContext,\n {\n hideHeader: false,\n host: 'basic-navigation',\n sidebar: this.applicationSidebarSlotted,\n appSwitchConfig: this.appSwitchConfig,\n }\n );\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n this.breakpoint = mode;\n });\n this.breakpoint = applicationLayoutService.breakpoint;\n\n if (this.forceBreakpoint) {\n this.forceLayoutChange(this.forceBreakpoint);\n }\n\n this.changeTheme();\n }\n\n disconnectedCallback() {\n this.modeDisposable?.dispose();\n }\n\n @Watch('theme')\n @Watch('themeSystemAppearance')\n private changeTheme() {\n if (!this.theme) {\n if (this.themeSystemAppearance) {\n themeSwitcher.setVariant();\n }\n\n return;\n }\n\n if (themeSwitcher.hasVariantSuffix(this.theme)) {\n themeSwitcher.setTheme(`theme-${this.theme}`);\n return;\n }\n\n themeSwitcher.setTheme(\n `theme-${this.theme}-dark`,\n this.themeSystemAppearance\n );\n }\n\n @Watch('appSwitchConfig')\n @Watch('applicationSidebarSlotted')\n onApplicationSidebarChange() {\n this.contextProvider.emit({\n hideHeader: false,\n host: 'basic-navigation',\n sidebar: this.applicationSidebarSlotted,\n appSwitchConfig: this.appSwitchConfig,\n });\n }\n\n render() {\n return (\n <Host\n data-role=\"\"\n class={{\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n >\n <slot name=\"application-header\"></slot>\n <div class=\"application\">\n <slot name=\"menu\"></slot>\n <aside\n class={{\n 'application-sidebar': true,\n slotted: this.applicationSidebarSlotted,\n }}\n onClick={() => this.onContentClick()}\n >\n <slot\n name=\"application-sidebar\"\n onSlotchange={() =>\n (this.applicationSidebarSlotted = hasSlottedElements(\n this.applicationSidebarSlot\n ))\n }\n ></slot>\n </aside>\n <div class=\"content-area\">\n <main class=\"content\" onClick={() => this.onContentClick()}>\n <slot></slot>\n </main>\n <footer class=\"footer\">\n <slot name=\"bottom\"></slot>\n </footer>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-basic-navigation.js CHANGED Viewed

@@ -2,11 +2,12 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { u as useContextProvider, A as ApplicationLayoutContext } from './context.js';
 import { a as applicationLayoutService } from './service.js';
 import { m as menuController } from './menu-service.js';
-import { d as defineCustomElement$6 } from './application-header.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$7 } from './application-header.js';
+import { d as defineCustomElement$6 } from './dropdown.js';
+import { d as defineCustomElement$5 } from './icon-button.js';
+import { d as defineCustomElement$4 } from './menu-expand-icon.js';
+import { d as defineCustomElement$3 } from './spinner.js';
+import { d as defineCustomElement$2 } from './typography.js';
 const basicNavigationCss = ":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}: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 ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .content{display:flex;height:100%;width:100%;position:relative;margin-left:3.25rem;overflow:auto}:host .navigation-content{display:flex;position:relative;flex-direction:row;height:calc(100% - 2.75rem);width:100%}:host(.hide-header) .navigation-content,:host(.hide-header) .content{height:100%}:host(.breakpoint-lg) .content{margin-left:0rem}:host(.breakpoint-sm) .content{margin-left:0px;width:100%}";
 const IxBasicNavigationStyle0 = basicNavigationCss;
@@ -75,10 +76,10 @@ const BasicNavigation = /*@__PURE__*/ proxyCustomElement(class BasicNavigation e
         (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
     }
     render() {
-        return (h(Host, { key: 'f7c1e352f7b85360afaa4aa7302394fbcefaa33a', "data-role": "", class: {
+        return (h(Host, { key: 'b1b40c5a98280deb02dd761c691aed543320697f', "data-role": "", class: {
                 'hide-header': this.hideHeader,
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { key: 'bbd969c401308a804a6b8973a038daca551fc8c4', class: "navigation-content" }, h("slot", { key: '3b09f85c77fda585b91786049d590e94c6bc3717', name: "menu" }), h("div", { key: '05b1eb22f097cf421f0ed0c747364c5b33418190', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'e46d1d8ddc56270570e28ea814087506202e7217' })))));
+            } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { key: '8b87084c4729c22e86f12a8a2b8dfe8f76d0b907', class: "navigation-content" }, h("slot", { key: '75becac170e9f26fd197fae321198f96e07ff539', name: "menu" }), h("div", { key: '971c54937e526a0bd5e8b875adf47f91371ed22c', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '8115f816aa5be963fb236995cb9b69d03e1242bd' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -100,7 +101,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ix-basic-navigation", "ix-application-header", "ix-dropdown", "ix-icon-button", "ix-menu-expand-icon", "ix-spinner"];
+    const components = ["ix-basic-navigation", "ix-application-header", "ix-dropdown", "ix-icon-button", "ix-menu-expand-icon", "ix-spinner", "ix-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "ix-basic-navigation":
             if (!customElements.get(tagName)) {
@@ -109,25 +110,30 @@ function defineCustomElement$1() {
             break;
         case "ix-application-header":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "ix-dropdown":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "ix-icon-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "ix-menu-expand-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-typography":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/components/ix-basic-navigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-basic-navigation.js","mappings":"~~;;;;;;;;;;~~AAAA,MAAM,kBAAkB,GAAG,g1CAAg1C,CAAC;AAC52C,gCAAe,kBAAkB;;MCqBpB,eAAe;;;;;;0BAWL,KAAK;;~~2BA4BU~~,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;0BAMpB,IAAI;;~~IAhCtC~~,kBAAkB;;QAChB,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,CAAC;YACzB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,IAAI,EAAE,kBAAkB;SACzB,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;KACvD;IAMD,iBAAiB,CAAC,OAA+B;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ,wBAAwB,CAAC,yBAAyB,EAAE,CAAC;YACrD,OAAO;SACR;QAED,wBAAwB,CAAC,0BAA0B,EAAE,CAAC;QACtD,wBAAwB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;KACjD;~~IAOD~~,mBAAmB,CAAC,WAAyB;QAC3C,wBAAwB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;KACtD;IAID,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;KAClD;IAKO,cAAc;;QACpB,IAAI,cAAc,CAAC,QAAQ,EAAE;YAC3B,OAAO;SACR;QACD,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KAC9B;IAED,iBAAiB;QACf,wBAAwB,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE1D,IAAI,CAAC,eAAe,GAAG,kBAAkB,CACvC,IAAI,CAAC,WAAW,EAChB,wBAAwB,EACxB;YACE,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,IAAI,EAAE,kBAAkB;SACzB,CACF,CAAC;QAEF,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI;YAC9D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;QAEtD,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC9C;KACF;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;SAClD;KACF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;KAChC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,kEACO,EAAE,EACZ,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI,CAAC,UAAU;gBAC9B,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI;aACxC,IAEA,CAAC,IAAI,CAAC,UAAU,IACf,6BAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,IAC/C,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ,CACf,IACtB,IAAI,EACR,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,6DAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,4DAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACvD,8DAAa,CACT,CACF,CACD,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=shadow","src/components/basic-navigation/basic-navigation.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 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n flex-direction: column;\n\n ix-application-header {\n z-index: calc(var(--theme-z-index-sticky) + 1);\n }\n\n .logo-wrapper {\n display: contents;\n }\n\n .content {\n display: flex;\n height: 100%;\n width: 100%;\n position: relative;\n margin-left: 3.25rem;\n overflow: auto;\n }\n\n .navigation-content {\n display: flex;\n position: relative;\n\n flex-direction: row;\n\n height: calc(100% - 2.75rem);\n width: 100%;\n }\n}\n\n:host(.hide-header) {\n .navigation-content,\n .content {\n height: 100%;\n }\n}\n\n:host(.breakpoint-lg) {\n .content {\n margin-left: 0rem;\n }\n}\n\n:host(.breakpoint-sm) {\n .content {\n margin-left: 0px;\n width: 100%;\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 { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n tag: 'ix-basic-navigation',\n styleUrl: 'basic-navigation.scss',\n shadow: true,\n})\nexport class BasicNavigation {\n @Element() hostElement: HTMLIxBasicNavigationElement;\n\n /\n Application name\n /\n @Prop() applicationName: string;\n\n /\n Hide application header. Will disable responsive feature of basic navigation.\n /\n @Prop() hideHeader = false;\n @Watch('hideHeader')\n onHideHeaderChange() {\n this.contextProvider?.emit({\n hideHeader: this.hideHeader,\n host: 'basic-navigation',\n });\n\n this.breakpoint = applicationLayoutService.breakpoint;\n }\n\n /\n Change the responsive layout of the menu structure\n /\n @Prop() forceBreakpoint: Breakpoint \| undefined;\n forceLayoutChange(newMode: Breakpoint \| undefined) {\n if (!newMode) {\n applicationLayoutService.enableBreakpointDetection();\n return;\n }\n\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint(newMode);\n }\n\n /\n Supported layouts ~~e.g~~ ['sm', 'md']\n */\n @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n @Watch('breakpoints')\n onBreakpointsChange(breakpoints: Breakpoint[]) {\n applicationLayoutService.setBreakpoints(breakpoints);\n }\n\n @State() breakpoint: Breakpoint = 'lg';\n\n get menu(): HTMLIxMenuElement \| null {\n return this.hostElement.querySelector('ix-menu');\n }\n\n private modeDisposable: Disposable;\n private contextProvider: ContextProvider<typeof ApplicationLayoutContext>;\n\n private onContentClick() {\n if (menuController.isPinned) {\n return;\n }\n this.menu?.toggleMenu(false);\n }\n\n componentWillLoad() {\n applicationLayoutService.setBreakpoints(this.breakpoints);\n\n this.contextProvider = useContextProvider(\n this.hostElement,\n ApplicationLayoutContext,\n {\n hideHeader: this.hideHeader,\n host: 'basic-navigation',\n }\n );\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n this.breakpoint = mode;\n });\n this.breakpoint = applicationLayoutService.breakpoint;\n\n if (this.forceBreakpoint) {\n this.forceLayoutChange(this.forceBreakpoint);\n }\n }\n\n componentDidRender() {\n if (this.menu) {\n this.menu.applicationName = this.applicationName;\n }\n }\n\n disconnectedCallback() {\n this.modeDisposable?.dispose();\n }\n\n render() {\n return (\n <Host\n data-role=\"\"\n class={{\n 'hide-header': this.hideHeader,\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n >\n {!this.hideHeader ? (\n <ix-application-header name={this.applicationName}>\n <slot name=\"logo\" slot=\"logo\"></slot>\n </ix-application-header>\n ) : null}\n <div class=\"navigation-content\">\n <slot name=\"menu\"></slot>\n <div class=\"content\" onClick={() => this.onContentClick()}>\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-basic-navigation.js","mappings":";;;;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,g1CAAg1C,CAAC;AAC52C,gCAAe,kBAAkB;;MCqBpB,eAAe;;;;;;0BAWL,KAAK;;2BA6BU,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;0BAMpB,IAAI;;IAjCtC,kBAAkB;;QAChB,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,CAAC;YACzB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,IAAI,EAAE,kBAAkB;SACzB,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;KACvD;IAMD,iBAAiB,CAAC,OAA+B;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ,wBAAwB,CAAC,yBAAyB,EAAE,CAAC;YACrD,OAAO;SACR;QAED,wBAAwB,CAAC,0BAA0B,EAAE,CAAC;QACtD,wBAAwB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;KACjD;IAQD,mBAAmB,CAAC,WAAyB;QAC3C,wBAAwB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;KACtD;IAID,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;KAClD;IAKO,cAAc;;QACpB,IAAI,cAAc,CAAC,QAAQ,EAAE;YAC3B,OAAO;SACR;QACD,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KAC9B;IAED,iBAAiB;QACf,wBAAwB,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE1D,IAAI,CAAC,eAAe,GAAG,kBAAkB,CACvC,IAAI,CAAC,WAAW,EAChB,wBAAwB,EACxB;YACE,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,IAAI,EAAE,kBAAkB;SACzB,CACF,CAAC;QAEF,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI;YAC9D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;QAEtD,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC9C;KACF;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;SAClD;KACF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;KAChC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,kEACO,EAAE,EACZ,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI,CAAC,UAAU;gBAC9B,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI;aACxC,IAEA,CAAC,IAAI,CAAC,UAAU,IACf,6BAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,IAC/C,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ,CACf,IACtB,IAAI,EACR,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,6DAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,4DAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACvD,8DAAa,CACT,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=shadow","src/components/basic-navigation/basic-navigation.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 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n flex-direction: column;\n\n ix-application-header {\n z-index: calc(var(--theme-z-index-sticky) + 1);\n }\n\n .logo-wrapper {\n display: contents;\n }\n\n .content {\n display: flex;\n height: 100%;\n width: 100%;\n position: relative;\n margin-left: 3.25rem;\n overflow: auto;\n }\n\n .navigation-content {\n display: flex;\n position: relative;\n\n flex-direction: row;\n\n height: calc(100% - 2.75rem);\n width: 100%;\n }\n}\n\n:host(.hide-header) {\n .navigation-content,\n .content {\n height: 100%;\n }\n}\n\n:host(.breakpoint-lg) {\n .content {\n margin-left: 0rem;\n }\n}\n\n:host(.breakpoint-sm) {\n .content {\n margin-left: 0px;\n width: 100%;\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 { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n tag: 'ix-basic-navigation',\n styleUrl: 'basic-navigation.scss',\n shadow: true,\n})\nexport class BasicNavigation {\n @Element() hostElement: HTMLIxBasicNavigationElement;\n\n /\n Application name\n /\n @Prop() applicationName: string;\n\n /\n Hide application header. Will disable responsive feature of basic navigation.\n /\n @Prop() hideHeader = false;\n @Watch('hideHeader')\n onHideHeaderChange() {\n this.contextProvider?.emit({\n hideHeader: this.hideHeader,\n host: 'basic-navigation',\n });\n\n this.breakpoint = applicationLayoutService.breakpoint;\n }\n\n /\n Change the responsive layout of the menu structure\n /\n @Prop() forceBreakpoint: Breakpoint \| undefined;\n forceLayoutChange(newMode: Breakpoint \| undefined) {\n if (!newMode) {\n applicationLayoutService.enableBreakpointDetection();\n return;\n }\n\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint(newMode);\n }\n\n /\n Supported layouts\n * @example ['sm', 'md']\n */\n @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n @Watch('breakpoints')\n onBreakpointsChange(breakpoints: Breakpoint[]) {\n applicationLayoutService.setBreakpoints(breakpoints);\n }\n\n @State() breakpoint: Breakpoint = 'lg';\n\n get menu(): HTMLIxMenuElement \| null {\n return this.hostElement.querySelector('ix-menu');\n }\n\n private modeDisposable: Disposable;\n private contextProvider: ContextProvider<typeof ApplicationLayoutContext>;\n\n private onContentClick() {\n if (menuController.isPinned) {\n return;\n }\n this.menu?.toggleMenu(false);\n }\n\n componentWillLoad() {\n applicationLayoutService.setBreakpoints(this.breakpoints);\n\n this.contextProvider = useContextProvider(\n this.hostElement,\n ApplicationLayoutContext,\n {\n hideHeader: this.hideHeader,\n host: 'basic-navigation',\n }\n );\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n this.breakpoint = mode;\n });\n this.breakpoint = applicationLayoutService.breakpoint;\n\n if (this.forceBreakpoint) {\n this.forceLayoutChange(this.forceBreakpoint);\n }\n }\n\n componentDidRender() {\n if (this.menu) {\n this.menu.applicationName = this.applicationName;\n }\n }\n\n disconnectedCallback() {\n this.modeDisposable?.dispose();\n }\n\n render() {\n return (\n <Host\n data-role=\"\"\n class={{\n 'hide-header': this.hideHeader,\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n >\n {!this.hideHeader ? (\n <ix-application-header name={this.applicationName}>\n <slot name=\"logo\" slot=\"logo\"></slot>\n </ix-application-header>\n ) : null}\n <div class=\"navigation-content\">\n <slot name=\"menu\"></slot>\n <div class=\"content\" onClick={() => this.onContentClick()}>\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-blind.js CHANGED Viewed

@@ -70,17 +70,17 @@ const Blind = /*@__PURE__*/ proxyCustomElement(class Blind extends HTMLElement {
         });
     }
     render() {
-        return (h(Host, { key: '5ec247be84e5612134ffec1e53730f61a214cd0b', class: {
+        return (h(Host, { key: '852045a56df78167aee62b39477c9447199f5ba1', class: {
                 [`blind-${this.variant}`]: true,
-            } }, h("div", { key: 'abe3273f7a820cd6481d7f75a174e3c6c332b438', class: 'blind-header-wrapper' }, h("button", { key: '12a572e7145c435451a8a9cc89f66c50d58d3cca', class: {
+            } }, h("div", { key: 'c538e711d23922c1d1dd6401a4a2a352fc931651', class: 'blind-header-wrapper' }, h("button", { key: '1c4825403cda09323d0b79bfb8225dc49373fd22', class: {
                 'blind-header': true,
                 [`blind-${this.variant}`]: true,
                 closed: this.collapsed,
-            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: '11a9cc78537fac060310eeba7f57a147907e2a14', name: "custom-header" })), h("div", { key: '08abe64452f9841fc50951708ffdbb13f594e80b', class: 'blind-header-content' }, h("ix-icon", { key: '67a41dada571459470153b03247bc7f175c206de', class: "collapse-icon", name: 'chevron-right-small', color: this.variant === 'insight' || this.variant === 'outline'
+            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: '08b70d0e9d9a3d4cff9c792c6cf07aeccb4076b6', name: "custom-header" })), h("div", { key: '9ed5701470d0577f989ac6676a12d3b5d3517f24', class: 'blind-header-content' }, h("ix-icon", { key: '247ffc3016d03d0e010eb3f1e9c2e6d46f0f5844', class: "collapse-icon", name: 'chevron-right-small', color: this.variant === 'insight' || this.variant === 'outline'
                 ? 'color-primary'
-                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: '6a898defd05378868577745464956fd8ecc67472', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'insight' || this.variant === 'outline'
+                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: '849fb030a97813e70d13ebb590e99985f20da23a', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'insight' || this.variant === 'outline'
                 ? 'color-std-text'
-                : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null))), h("section", { key: '909fdaeec7732c55c81833e6f0212cea5b2174b0', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: 'ace2f5a2269acc3d0c2c79a0cf31df6283038bec', class: {
+                : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null))), h("section", { key: 'f8614b7c48da9f7eb858737c9fb9d39b1ff77365', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: 'b08531b9da0da8abeee26fa7e6cf89eb7be49d99', class: {
                 'blind-content': true,
                 hide: this.collapsed,
             } }, !this.collapsed ? h("slot", null) : null))));

package/components/ix-blind.js.map CHANGED Viewed

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