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

@siemens/ix 2.1.2-beta.0 → 2.1.2

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 (599) hide show

package/components/select.js CHANGED Viewed

@@ -313,7 +313,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '2a59659f35973f2297d3b34cb0ae84c3e5d80c04' }, h("div", { key: 'cca889f2ba4c3db6e74a65fd21d9ca7428e9dc52', class: {
+        return (h(Host, { key: 'a1ff9238e7bd384371924fc1a6c84dbf2c2b2026' }, h("div", { key: '4f022e97659a4ccd2787ba5b753b53e15ef9da6b', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
@@ -321,13 +321,13 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                 this.dropdownAnchor = ref;
                 if (!this.editable)
                     this.dropdownWrapperRef = ref;
-            } }, h("div", { key: '98ca1de8783cd95db76d969bade2aa2078c8224f', class: "input-container" }, h("div", { key: '4d4ac31033855345467e355f168a5ce7e47ce8c6', class: "chips" }, this.isMultipleMode
+            } }, h("div", { key: '68fd990dca31dcd85ce40c7976d1e6841f6916c3', class: "input-container" }, h("div", { key: '7ca63a0aeb267e042bf0699d51316af5ad9f87c5', class: "chips" }, this.isMultipleMode
             ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.itemClick(item.value);
                 } }, item.label)))
-            : '', h("div", { key: 'd50bab808cbf2bd146c39052f7f008f94ad93f70', class: "trigger" }, h("input", { key: '1b91bbc00aed4ec69543d3e4c3fe1eff00c87c90', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
+            : '', h("div", { key: '0ff312e92b3235e17daac6e861a6dac456f96bfd', class: "trigger" }, h("input", { key: '0f56fd65161c8b08a937d936e674cdbde529205f', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
             }, placeholder: this.placeholderValue(), value: this.inputValue, ref: (ref) => (this.inputRef = ref), onBlur: (e) => this.onInputBlur(e), onFocus: () => {
                 this.navigationItem = undefined;
@@ -339,16 +339,16 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             } })) : null, this.disabled || this.readonly ? null : (h("ix-icon-button", { "data-select-dropdown": true, class: { 'dropdown-visible': this.dropdownShow }, icon: "chevron-down-small", ghost: true, ref: (ref) => {
                 if (this.editable)
                     this.dropdownWrapperRef = ref;
-            } })))))), h("ix-dropdown", { key: '3feb553427991c96b45b49aecce64de203846902', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+            } })))))), h("ix-dropdown", { key: '64f52cfed09c28955ea648b7a409a921c8601401', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
                 'd-none': this.disabled || this.readonly,
             }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
                 return {
                     minWidth: `${this.hostElement.clientWidth}px`,
                 };
-            } }, h("div", { key: '3c07355d8c3ebcc3a5f180ac8acf57297f9768ac', class: {
+            } }, h("div", { key: 'b66559fa7650a544ff8d02dd18881c7a5c83bc7a', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", { key: '2bb33255f9a58b647d0897e8ff1b38fa6aba888b' }), h("div", { key: '2e9bcf50f2a45e292103e4a201d421ad904becd2', ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
+            }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", { key: 'c0a36530172388d4785fbfff89555435a9af94d0' }), h("div", { key: 'a7bdc5c18377a6359c0665b986429a96fb88aab2', ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();

package/components/spinner.js CHANGED Viewed

@@ -13,7 +13,7 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends HTMLEleme
         this.hideTrack = false;
     }
     render() {
-        return (h(Host, { key: '764ff87a7fd663a12419610e551a54778bd7700a', class: {
+        return (h(Host, { key: 'fce135db438427cf948004c96dcee4c044cd1a98', class: {
                 primary: this.variant === 'primary',
                 'xx-small': this.size === 'xx-small',
                 'x-small': this.size === 'x-small',

package/components/tab-item.js CHANGED Viewed

@@ -31,7 +31,7 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
         };
     }
     render() {
-        return (h(Host, { key: '62eea432a4d9c19db812f736ec3d08e03d411b48', class: this.tabItemClasses({
+        return (h(Host, { key: '77688f6b83f53ba0de891d2ed529c7b82941930a', class: this.tabItemClasses({
                 selected: this.selected,
                 disabled: this.disabled,
                 small: this.small,
@@ -46,12 +46,12 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
                 if (clientEvent.defaultPrevented) {
                     event.stopPropagation();
                 }
-            } }, h("div", { key: '31f7dd998cfe6b2f72a57a4738d87d70b4e13383', class: {
+            } }, h("div", { key: 'd1790baee81972038f8a09c0e7a0ee3124e828a6', class: {
                 circle: this.rounded,
                 text: !this.rounded,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, h("slot", { key: '591b96b26a84f459d81d46645aa1db78748725bb' })), h("div", { key: '70ddcd21e4f76f4549e6c830640acdb7e33e3150', class: {
+            } }, h("slot", { key: '7dcd5bcd496e9955b45f00b570fb935a0e9a8969' })), h("div", { key: '435deec3155b879b5f8a397124bf9a198283c2bd', class: {
                 counter: true,
                 selected: this.selected,
                 hidden: !(this.rounded && this.counter !== undefined),

package/components/tabs.js CHANGED Viewed

@@ -220,13 +220,13 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         });
     }
     render() {
-        return (h(Host, { key: '44c009492a3faabd3dc4266f6a4070037f590caa' }, h("div", { key: 'c002c0b7c606bf6dd37738f2c8b233ed0556ae24', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { key: '30291a5baf33ad74ca4d4cdd52aa3de6fdaac6f5', name: 'chevron-left-small' })), h("div", { key: 'fd0842c04c463afb21e29bfb64a32189550204f0', class: {
+        return (h(Host, { key: 'f98d2ee11257c6e5879f25404379e8be5a535d31' }, h("div", { key: 'a1230a4cac929390e9415fcfe25362c029a0e22a', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { key: 'f34a2391bd3bd96c11251df77b379958be1411bf', name: 'chevron-left-small' })), h("div", { key: '66ce38113880297fac297678a05d6abf3d01a28e', class: {
                 'tab-items': true,
                 'overflow-shadow': true,
                 'shadow-left': this.showPreviousArrow(),
                 'shadow-right': this.showNextArrow(),
                 'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
-            } }, h("div", { key: 'b62dda398149a5eef215992b4a9ce5e297fa803f', class: "items-content" }, h("slot", { key: '0383abae773ba6f7f5b4ebd9e76b4a20c9a18732' }))), h("div", { key: '7ef4269bac60f31a97ae5affa4574bbab4ba2726', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { key: '9071de44d99c4650f6ad432b40ca6592e4fa9045', name: 'chevron-right-small' }))));
+            } }, h("div", { key: '7f11e3d666b5a80a7faef2a0bf80b6a00e14c3e8', class: "items-content" }, h("slot", { key: '5e5d4c50d3c0fa30527f02a32dab998ad2d7aa5b' }))), h("div", { key: 'fbcfce76ec9d1fb48beb35ba7e62a7cc4cac7946', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { key: '7f7a80642127bff14a1c182468bec101152218ae', name: 'chevron-right-small' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxTabsStyle0; }

package/components/time-picker.js CHANGED Viewed

@@ -116,7 +116,7 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
             },
         ];
         timepickerInformation = timepickerInformation.filter((item) => !item.hidden);
-        return (h(Host, { key: '0d12688a996f942f3677fb42eb2e03adc043e8fd' }, h("ix-date-time-card", { key: '5409847c27d8f5e39bcccc755b81127ad625a2f9', standaloneAppearance: this.standaloneAppearance, corners: this.corners }, h("div", { key: 'a9aeee356d8a240cfec0113ffcc5fcfc18fb6f5d', class: "header", slot: "header" }, h("ix-typography", { key: '24eee442d20dc1e5c7ef309e20104f4076029b2a', variant: "default-title" }, this.textTime || 'Time')), h("div", { key: '0125ffbdab047f9244c3df14365f87694efbe8c0', class: "clock" }, timepickerInformation.map((descriptor, index) => (h("div", { class: "flex" }, h("div", { class: { columns: true, hidden: descriptor.hidden } }, h("ix-icon-button", { size: "16", onClick: () => (this._time = this._time.plus({
+        return (h(Host, { key: 'c09337ff6d0366929f77fe9bbdd89eb43bcc71ea' }, h("ix-date-time-card", { key: '80c29872490f5968979a802b92113377ec9df678', standaloneAppearance: this.standaloneAppearance, corners: this.corners }, h("div", { key: '35981c4cde62451368ee30fc4bcc19f894939cda', class: "header", slot: "header" }, h("ix-typography", { key: 'cd88a3f06e8907419acc45cd71d9954b7365096c', variant: "default-title" }, this.textTime || 'Time')), h("div", { key: 'fd5d74523fd649fedac87ac0887fb643fd9795ce', class: "clock" }, timepickerInformation.map((descriptor, index) => (h("div", { class: "flex" }, h("div", { class: { columns: true, hidden: descriptor.hidden } }, h("ix-icon-button", { size: "16", onClick: () => (this._time = this._time.plus({
                 [descriptor.unit]: 1,
             })), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: descriptor.unit, type: "number", placeholder: descriptor.placeholder, value: this._formattedTime
                 ? this._formattedTime[descriptor.unit]
@@ -136,11 +136,11 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
             })), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), index !== timepickerInformation.length - 1 && (h("div", { class: {
                 'column-seperator': true,
                 hidden: descriptor.hidden,
-            } }, ":"))))), h("div", { key: '62554ab71c93c34c73a7d780d510676f4c0dee36', class: {
+            } }, ":"))))), h("div", { key: '819d9ce8cdfc94e7c4a1d2f7190587f052a9d246', class: {
                 columns: true,
                 'default-space': true,
                 hidden: this._timeRef === undefined,
-            } }, h("ix-icon-button", { key: 'c0f1734a51bc44ae8ff98c3f16843a3a6420dcaa', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("div", { key: 'c01c49b66efda970fb800134e2bc949d9f7f6c9b', class: "time-reference" }, this._timeRef), h("ix-icon-button", { key: '83c58978b8442e6b87ea88897a75419882509d5c', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" }))), h("div", { key: '2d00b5a7fde2f34f31621f5ad03441ac05978931', class: { button: true, hidden: !this.standaloneAppearance } }, h("ix-button", { key: '88464d3ff7ebc64bd5d8c6933fcc5013c0870706', onClick: () => {
+            } }, h("ix-icon-button", { key: '6ec3654d6a81bb2420695dd3292677395bd6adc2', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("div", { key: '09b1dd7076112d4dc5168a968ed0ebebaa67e69f', class: "time-reference" }, this._timeRef), h("ix-icon-button", { key: 'ff24cdad6df286cc2da51958c2b51fe43f1e4fea', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" }))), h("div", { key: '82602709c4107324d9498426cb30959fe81bacc4', class: { button: true, hidden: !this.standaloneAppearance } }, h("ix-button", { key: '64da9baed02906baad694bbe066bc355197d293e', onClick: () => {
                 this.timeSelect.emit(this._time.toFormat(this.format));
                 this.done.emit(this._time.toFormat(this.format));
             } }, this.textSelectTime)))));

package/components/toast.js CHANGED Viewed

@@ -53,11 +53,11 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
             animationPlayState: this.touched ? 'paused' : 'running',
         };
         progressBarClass.push('toast-progress-bar--animated');
-        return (h(Host, { key: 'fc536c407da22e873ddd6b0c57ff1a33f031fff3', class: "animate__animated animate__fadeIn" }, h("div", { key: '364d9a603523b34526abbf60b79fc28b4861f551', class: "toast-body", onPointerLeave: () => {
+        return (h(Host, { key: '064ab233924479a92456900e282fe87e98ff2074', class: "animate__animated animate__fadeIn" }, h("div", { key: 'e66b0034a2d43eb475d79127eda95d7af81dc77c', class: "toast-body", onPointerLeave: () => {
                 this.touched = false;
             }, onPointerEnter: () => {
                 this.touched = true;
-            } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: 'a428a1d86aade38d43d14c7a6045ec0132346f1d', class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title" }, this.toastTitle)) : null, h("div", { key: 'ba2928faa70dc5deb313f5e5bda49c7413be0c1d', class: "toast-message" }, h("slot", { key: '5af45c142c3812239d9874448b584bd8364b50ec' }))), h("div", { key: 'cf9b6eb78786400f372c473cd3e6e6d168dd07c3', class: "toast-close" }, h("ix-icon-button", { key: '7adbc3c276e209a906f1e1a224cba994fbaacbad', icon: 'close', size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
+            } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: '122302506aff7076b6e5d6df66e4409ca86fde31', class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title" }, this.toastTitle)) : null, h("div", { key: '22f349d326b604cd7c5734ebd09280a1263423e4', class: "toast-message" }, h("slot", { key: '78e822dd9ac08ab00b2b789dd95a7fd9ef0ddf70' }))), h("div", { key: 'f67bf3768af2d77c5619cced98976d9f92a57a68', class: "toast-close" }, h("ix-icon-button", { key: '81fceaa64577ab118ff9c59efc3098bec235a7b3', icon: 'close', size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
                 this.close();
             }, onTransitionEnd: () => {
                 if (this.progress === 0) {

package/components/tooltip.js CHANGED Viewed

@@ -192,9 +192,9 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
         const tooltipContentClass = {
             'tooltip-content': true,
         };
-        return (h(Host, { key: '8f85f75338cc78b38c6090fb75c9623123894a19', class: {
+        return (h(Host, { key: 'c297ba0961f7dc7ad8823f4f9a5022cb10ed7a77', class: {
                 visible: this.visible,
-            }, role: "tooltip" }, h("div", { key: '875b514167bfe9f7186c86d2a746e16c4425d833', class: 'tooltip-title' }, h("slot", { key: '0cd77bf05e8dfd1a37d71b44f66eed1847743856', name: "title-icon" }), h("ix-typography", { key: '50db3d851852796ba8bd247eefd10d7c9d3920a3', variant: "default-title" }, this.titleContent, h("slot", { key: '5b26a7a70f46036fc7f041b7d2f8a6742dc92cf4', name: "title-content" }))), h("div", { key: '6b161d389cae7f6e30ee047d78cfb90bd6f70b4e', class: tooltipContentClass }, h("slot", { key: '3c1b118a9ee09de941547d5171d8201f1d76e739' })), h("div", { key: '269cb211d6c4005e17eb2710f999e8390cd91236', class: "arrow" })));
+            }, role: "tooltip" }, h("div", { key: '21bf5211c142329a9475ef37fb5d2b5f5e4f5f19', class: 'tooltip-title' }, h("slot", { key: '8e4b3e91a0a161efa871a717a3d4871cb08224d2', name: "title-icon" }), h("ix-typography", { key: '7715a464de0154206a72f3a9ed97247eb5e4954c', variant: "default-title" }, this.titleContent, h("slot", { key: '16cc59a0d2a7aa11ab584be7738084b811d2320d', name: "title-content" }))), h("div", { key: '4390c36d7d326a7a0ffd8e0a7f2308c6bdacd02b', class: tooltipContentClass }, h("slot", { key: 'b21343921ee51073ad3c7e26f1ace94f46ec29e3' })), h("div", { key: '4e578ce3e101c8b479a7c334a81dafde3dc105a5', class: "arrow" })));
     }
     get hostElement() { return this; }
     static get style() { return IxTooltipStyle0; }

package/components/tree-item.js CHANGED Viewed

@@ -16,16 +16,16 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class TreeItem extends HTMLEle
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'ba0c464b633cb3ca1ed0c5690245c1a69612e7fb', class: {
+        return (h(Host, { key: 'c40a13c3395d6f3a785e7f17ed8887d0f54642c6', class: {
                 selected: (_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected,
-            } }, h("div", { key: 'b94962dfd5d8be52ae6dab6b209d7f235dc2fc97', class: "icon-toggle-container", onClick: (e) => {
+            } }, h("div", { key: '47264231c4f5b919b4f4480a409b4b2047c46fc0', class: "icon-toggle-container", onClick: (e) => {
                 e.preventDefault();
                 this.toggle.emit();
             } }, this.hasChildren ? (h("ix-icon", { name: 'chevron-right', size: "16", class: {
                 ['icon-toggle-down']: (_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded,
-            }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}` })) : null), h("div", { key: 'ec90acd5573bbb23978666fc9e43e4c107d35ce1', class: "tree-node-container", onClick: () => {
+            }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}` })) : null), h("div", { key: '5ab2e0dc8ac4b4aa5a6b6851b70980d7e04d02ea', class: "tree-node-container", onClick: () => {
                 this.itemClick.emit();
-            } }, this.text, h("slot", { key: 'd70e947ceceeb7ecef901da3bc48ba58f898d419' }))));
+            } }, this.text, h("slot", { key: '93f195d06fb13641e330028d460e2a077736c5be' }))));
     }
     static get style() { return IxTreeItemStyle0; }
 }, [1, "ix-tree-item", {

package/components/typography.js CHANGED Viewed

@@ -51,10 +51,10 @@ const IxTypography = /*@__PURE__*/ proxyCustomElement(class IxTypography extends
         }
         if (this.textColor) {
             style = {
-                color: `var(--theme-color-${this.color}-text)`,
+                color: `var(--theme-color-${this.textColor}-text)`,
             };
         }
-        return (h(Host, { key: '5cd439405dd73273b8ae61c910dabbbbce42e3f8', class: typographyClass, style: style }, h("slot", { key: 'c6e6b842a915995847564e953cd17a8bd4972c9e' })));
+        return (h(Host, { key: 'e39b379997d1e278e600c69fcfcce98e80d5cb2c', class: typographyClass, style: style }, h("slot", { key: '25d5d4bdd1bc16158a7bea5ee137bac6e3ce3882' })));
     }
     static get style() { return IxTypographyStyle0; }
 }, [1, "ix-typography", {

package/components/typography.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"typography.js","mappings":";;AAsBO,MAAM,eAAe,GAAuC;IACjE,SAAS,EAAE,SAAS;IACpB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,cAAc;IACvB,gBAAgB,EAAE,qBAAqB;IACvC,OAAO,EAAE,cAAc;IACvB,gBAAgB,EAAE,qBAAqB;IACvC,KAAK,EAAE,QAAQ;IACf,cAAc,EAAE,eAAe;IAC/B,EAAE,EAAE,SAAS;IACb,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,oBAAoB;IACrC,sBAAsB,EAAE,2BAA2B;CACpD;;ACnCD,MAAM,aAAa,GAAG,2rbAA2rb,CAAC;AACltb,2BAAe,aAAa;;MCmEf,YAAY;;;;;;;;;oBA8BR,KAAK;8BAKqB,MAAM;;IAE/C,MAAM;;QACJ,IAAI,eAAe,GAAG,EAAE,CAAC;QAEzB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,eAAe,CAAC,eAAe,CAAC,MAAA,IAAI,CAAC,OAAO,mCAAI,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC;SACpE;aAAM;YACL,eAAe,CAAC,cAAc,MAAA,IAAI,CAAC,MAAM,mCAAI,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;SAC/D;QAED,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE;YAClC,eAAe,CAAC,yBAAyB,IAAI,CAAC,cAAc,EAAE,CAAC,GAAG,IAAI,CAAC;SACxE;QAED,eAAe,CAAC,wBAAwB,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;QAEtD,IAAI,KAAK,GAAG,EAAE,CAAC;QAEf,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,GAAG;gBACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,KAAK,QAAQ;aAC/C,CAAC;SACH;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,KAAK,GAAG;gBACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,~~KAAK~~,QAAQ;~~aAC/C~~,CAAC;SACH;QAED,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,IACxC,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/typography/type-mapping.ts","src/components/typography/typography.scss?tag=ix-typography&encapsulation=shadow","src/components/typography/typography.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 /\nexport type TypographyVariants =\n \| 'x-small'\n \| 'small'\n \| 'caption'\n \| 'caption-single'\n \| 'default'\n \| 'default-single'\n \| 'default-title'\n \| 'default-title-single'\n \| 'large'\n \| 'large-single'\n \| 'h2'\n \| 'display-large';\n\nexport const VariantsMapping: Record<TypographyVariants, string> = {\n 'x-small': 'text-xs',\n small: 'text-s',\n caption: 'text-caption',\n 'caption-single': 'text-caption-single',\n default: 'text-default',\n 'default-single': 'text-default-single',\n large: 'text-l',\n 'large-single': 'text-l-single',\n h2: 'text-h2',\n 'display-large': 'text-xl',\n 'default-title': 'text-default-title',\n 'default-title-single': 'text-default-title-single',\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\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n@import 'components/fonts';\n@import 'mixins/fonts';\n\n:host {\n @include ix-component;\n\n display: block;\n position: relative;\n}\n\n:host(.text-xs) {\n @include text-xs;\n}\n\n:host(.text-s) {\n @include text-s;\n}\n\n:host(.text-caption) {\n @include text-caption;\n}\n\n:host(.text-caption-single) {\n @include text-caption-single;\n}\n\n:host(.text-default) {\n @include text-default;\n}\n\n:host(.text-default-single) {\n @include text-default-single;\n}\n\n:host(.text-default-title) {\n @include text-default-title;\n}\n\n:host(.text-default-title-single) {\n @include text-default-title-single;\n}\n\n:host(.text-l) {\n @include text-l;\n}\n\n:host(.text-l-single) {\n @include text-l-single;\n}\n\n:host(.text-l-title) {\n @include text-l-title;\n}\n\n:host(.text-l-title-single) {\n @include text-l-title-single;\n}\n\n:host(.text-h2) {\n @include text-h2;\n}\n\n:host(.text-xl) {\n @include text-xl;\n}\n\n$typography-formats: label, label-xs, label-sm, label-lg, body, body-xs, body-sm,\n body-lg, display, display-xs, display-sm, display-lg, display-xl, display-xxl,\n h6, h5, h4, h3, h2, h1, code, code-sm, code-lg;\n\n@each $format in $typography-formats {\n :host(.typography-#{$format}) {\n @extend .typography-#{$format};\n }\n}\n\n$typography-decoration: none, underline, line-through;\n@each $decoration in $typography-decoration {\n :host(.typography-decoration-#{$decoration}) {\n @extend .typography-decoration-#{$decoration};\n }\n}\n\n:host(.typography-weight-bold) {\n @extend .typography-weight-bold;\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 { VariantsMapping } from './type-mapping';\n\nexport type TypographyVariants =\n \| 'x-small'\n \| 'small'\n \| 'caption'\n \| 'caption-single'\n \| 'default'\n \| 'default-single'\n \| 'default-title'\n \| 'default-title-single'\n \| 'large'\n \| 'large-single'\n \| 'large-title'\n \| 'large-title-single'\n \| 'h2'\n \| 'display-large';\n\nexport type TypographyColors =\n \| 'contrast'\n \| 'std'\n \| 'soft'\n \| 'weak'\n \| 'inv-contrast'\n \| 'inv-std'\n \| 'inv-soft'\n \| 'inv-weak'\n \| 'alarm';\n\ntype TypographyFormatLabel = 'label' \| 'label-xs' \| 'label-sm' \| 'label-lg';\ntype TypographyFormatBody = 'body' \| 'body-xs' \| 'body-sm' \| 'body-lg';\ntype TypographyFormatDisplay =\n \| 'display'\n \| 'display-xs'\n \| 'display-sm'\n \| 'display-lg'\n \| 'display-xl'\n \| 'display-xxl';\ntype TypographyFormatHeading = 'h6' \| 'h5' \| 'h4' \| 'h3' \| 'h2' \| 'h1';\ntype TypographyFormatCode = 'code' \| 'code-sm' \| 'code-lg';\n\nexport type TypographyFormat =\n \| TypographyFormatLabel\n \| TypographyFormatBody\n \| TypographyFormatDisplay\n \| TypographyFormatHeading\n \| TypographyFormatCode;\n\nexport type TextDecoration = 'none' \| 'underline' \| 'line-through';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-typography',\n styleUrl: 'typography.scss',\n shadow: true,\n})\nexport class IxTypography {\n /\n Font variant based on theme variables\n \n @deprecated Use `format` property\n * @internal\n /\n @Prop() variant: TypographyVariants;\n\n /\n Text format\n /\n @Prop() format: TypographyFormat;\n\n /\n Text color based on theme variables\n \n @deprecated since 2.1.0 use property `text-color`\n /\n // eslint-disable-next-line @stencil-community/reserved-member-names\n @Prop() color: TypographyColors;\n\n /\n Text color based on theme variables\n /\n @Prop() textColor: TypographyColors;\n\n /\n Display text bold\n /\n @Prop() bold = false;\n\n /\n Text decoration\n */\n @Prop() textDecoration: TextDecoration = 'none';\n\n render() {\n let typographyClass = {};\n\n if (this.variant) {\n typographyClass[VariantsMapping[this.variant ?? 'default']] = true;\n } else {\n typographyClass[`typography-${this.format ?? 'body'}`] = true;\n }\n\n if (this.textDecoration !== 'none') {\n typographyClass[`typography-decoration-${this.textDecoration}`] = true;\n }\n\n typographyClass['typography-weight-bold'] = this.bold;\n\n let style = {};\n\n if (this.color) {\n style = {\n color: `var(--theme-color-${this.color}-text)`,\n };\n }\n\n if (this.textColor) {\n style = {\n color: `var(--theme-color-${this.~~color~~}-text)`,\n };\n }\n\n return (\n <Host class={typographyClass} style={style}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"typography.js","mappings":";;AAsBO,MAAM,eAAe,GAAuC;IACjE,SAAS,EAAE,SAAS;IACpB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,cAAc;IACvB,gBAAgB,EAAE,qBAAqB;IACvC,OAAO,EAAE,cAAc;IACvB,gBAAgB,EAAE,qBAAqB;IACvC,KAAK,EAAE,QAAQ;IACf,cAAc,EAAE,eAAe;IAC/B,EAAE,EAAE,SAAS;IACb,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,oBAAoB;IACrC,sBAAsB,EAAE,2BAA2B;CACpD;;ACnCD,MAAM,aAAa,GAAG,2rbAA2rb,CAAC;AACltb,2BAAe,aAAa;;MCmEf,YAAY;;;;;;;;;oBA8BR,KAAK;8BAKqB,MAAM;;IAE/C,MAAM;;QACJ,IAAI,eAAe,GAAG,EAAE,CAAC;QAEzB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,eAAe,CAAC,eAAe,CAAC,MAAA,IAAI,CAAC,OAAO,mCAAI,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC;SACpE;aAAM;YACL,eAAe,CAAC,cAAc,MAAA,IAAI,CAAC,MAAM,mCAAI,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;SAC/D;QAED,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE;YAClC,eAAe,CAAC,yBAAyB,IAAI,CAAC,cAAc,EAAE,CAAC,GAAG,IAAI,CAAC;SACxE;QAED,eAAe,CAAC,wBAAwB,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;QAEtD,IAAI,KAAK,GAAG,EAAE,CAAC;QAEf,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,GAAG;gBACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,KAAK,QAAQ;aAC/C,CAAC;SACH;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,KAAK,GAAG;gBACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,SAAS,QAAQ;aACnD,CAAC;SACH;QAED,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,IACxC,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/typography/type-mapping.ts","src/components/typography/typography.scss?tag=ix-typography&encapsulation=shadow","src/components/typography/typography.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 /\nexport type TypographyVariants =\n \| 'x-small'\n \| 'small'\n \| 'caption'\n \| 'caption-single'\n \| 'default'\n \| 'default-single'\n \| 'default-title'\n \| 'default-title-single'\n \| 'large'\n \| 'large-single'\n \| 'h2'\n \| 'display-large';\n\nexport const VariantsMapping: Record<TypographyVariants, string> = {\n 'x-small': 'text-xs',\n small: 'text-s',\n caption: 'text-caption',\n 'caption-single': 'text-caption-single',\n default: 'text-default',\n 'default-single': 'text-default-single',\n large: 'text-l',\n 'large-single': 'text-l-single',\n h2: 'text-h2',\n 'display-large': 'text-xl',\n 'default-title': 'text-default-title',\n 'default-title-single': 'text-default-title-single',\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\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n@import 'components/fonts';\n@import 'mixins/fonts';\n\n:host {\n @include ix-component;\n\n display: block;\n position: relative;\n}\n\n:host(.text-xs) {\n @include text-xs;\n}\n\n:host(.text-s) {\n @include text-s;\n}\n\n:host(.text-caption) {\n @include text-caption;\n}\n\n:host(.text-caption-single) {\n @include text-caption-single;\n}\n\n:host(.text-default) {\n @include text-default;\n}\n\n:host(.text-default-single) {\n @include text-default-single;\n}\n\n:host(.text-default-title) {\n @include text-default-title;\n}\n\n:host(.text-default-title-single) {\n @include text-default-title-single;\n}\n\n:host(.text-l) {\n @include text-l;\n}\n\n:host(.text-l-single) {\n @include text-l-single;\n}\n\n:host(.text-l-title) {\n @include text-l-title;\n}\n\n:host(.text-l-title-single) {\n @include text-l-title-single;\n}\n\n:host(.text-h2) {\n @include text-h2;\n}\n\n:host(.text-xl) {\n @include text-xl;\n}\n\n$typography-formats: label, label-xs, label-sm, label-lg, body, body-xs, body-sm,\n body-lg, display, display-xs, display-sm, display-lg, display-xl, display-xxl,\n h6, h5, h4, h3, h2, h1, code, code-sm, code-lg;\n\n@each $format in $typography-formats {\n :host(.typography-#{$format}) {\n @extend .typography-#{$format};\n }\n}\n\n$typography-decoration: none, underline, line-through;\n@each $decoration in $typography-decoration {\n :host(.typography-decoration-#{$decoration}) {\n @extend .typography-decoration-#{$decoration};\n }\n}\n\n:host(.typography-weight-bold) {\n @extend .typography-weight-bold;\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 { VariantsMapping } from './type-mapping';\n\nexport type TypographyVariants =\n \| 'x-small'\n \| 'small'\n \| 'caption'\n \| 'caption-single'\n \| 'default'\n \| 'default-single'\n \| 'default-title'\n \| 'default-title-single'\n \| 'large'\n \| 'large-single'\n \| 'large-title'\n \| 'large-title-single'\n \| 'h2'\n \| 'display-large';\n\nexport type TypographyColors =\n \| 'contrast'\n \| 'std'\n \| 'soft'\n \| 'weak'\n \| 'inv-contrast'\n \| 'inv-std'\n \| 'inv-soft'\n \| 'inv-weak'\n \| 'alarm';\n\ntype TypographyFormatLabel = 'label' \| 'label-xs' \| 'label-sm' \| 'label-lg';\ntype TypographyFormatBody = 'body' \| 'body-xs' \| 'body-sm' \| 'body-lg';\ntype TypographyFormatDisplay =\n \| 'display'\n \| 'display-xs'\n \| 'display-sm'\n \| 'display-lg'\n \| 'display-xl'\n \| 'display-xxl';\ntype TypographyFormatHeading = 'h6' \| 'h5' \| 'h4' \| 'h3' \| 'h2' \| 'h1';\ntype TypographyFormatCode = 'code' \| 'code-sm' \| 'code-lg';\n\nexport type TypographyFormat =\n \| TypographyFormatLabel\n \| TypographyFormatBody\n \| TypographyFormatDisplay\n \| TypographyFormatHeading\n \| TypographyFormatCode;\n\nexport type TextDecoration = 'none' \| 'underline' \| 'line-through';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-typography',\n styleUrl: 'typography.scss',\n shadow: true,\n})\nexport class IxTypography {\n /\n Font variant based on theme variables\n \n @deprecated Use `format` property\n * @internal\n /\n @Prop() variant: TypographyVariants;\n\n /\n Text format\n /\n @Prop() format: TypographyFormat;\n\n /\n Text color based on theme variables\n \n @deprecated since 2.1.0 use property `text-color`\n /\n // eslint-disable-next-line @stencil-community/reserved-member-names\n @Prop() color: TypographyColors;\n\n /\n Text color based on theme variables\n /\n @Prop() textColor: TypographyColors;\n\n /\n Display text bold\n /\n @Prop() bold = false;\n\n /\n Text decoration\n */\n @Prop() textDecoration: TextDecoration = 'none';\n\n render() {\n let typographyClass = {};\n\n if (this.variant) {\n typographyClass[VariantsMapping[this.variant ?? 'default']] = true;\n } else {\n typographyClass[`typography-${this.format ?? 'body'}`] = true;\n }\n\n if (this.textDecoration !== 'none') {\n typographyClass[`typography-decoration-${this.textDecoration}`] = true;\n }\n\n typographyClass['typography-weight-bold'] = this.bold;\n\n let style = {};\n\n if (this.color) {\n style = {\n color: `var(--theme-color-${this.color}-text)`,\n };\n }\n\n if (this.textColor) {\n style = {\n color: `var(--theme-color-${this.textColor}-text)`,\n };\n }\n\n return (\n <Host class={typographyClass} style={style}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-application-header.cjs.entry.js CHANGED Viewed

@@ -96,12 +96,12 @@ const ApplicationHeader = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'b572496c016318e8a9d6e6e8db7b9de61abb3861', class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' && this.suppressResponsive === false && (index.h("ix-burger-menu", { onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
+        return (index.h(index.Host, { key: '5434362f681c6d6d67b1eaf5e5ebc993e578f8e9', class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' && this.suppressResponsive === false && (index.h("ix-burger-menu", { onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
             this.breakpoint !== 'sm' &&
-            this.suppressResponsive === false && (index.h("ix-icon-button", { onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), index.h("div", { key: '6882fe0ae0d6653ef42c0e58dc65fb92d03ab4ea', class: "logo" }, index.h("slot", { key: '77d7b96f98d629e08dc5bc3e4338b703bbe1e2a6', name: "logo" })), index.h("div", { key: '84e0f79f501266f0d0b220f87aaa4a7aab8dc659', class: "name" }, this.name), index.h("div", { key: '2fae6ae95a4696765a3421ccc002e3e9efa6fbd6', class: "content" }, this.breakpoint === 'sm' ? (index.h(index.Fragment, null, index.h("ix-icon-button", { class: {
+            this.suppressResponsive === false && (index.h("ix-icon-button", { onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), index.h("div", { key: '2a40f871e8359d2ad378546773c8ec1b583d1684', class: "logo" }, index.h("slot", { key: 'd53fb161f6accdbdd92c7455e0a81faab242054d', name: "logo" })), index.h("div", { key: '1244da8ee7ddbec82df90f6204948939dc67079c', class: "name" }, this.name), index.h("div", { key: '7a1256fba0480dba4e42da20f55c268b88422a99', class: "content" }, this.breakpoint === 'sm' ? (index.h(index.Fragment, null, index.h("ix-icon-button", { class: {
                 ['context-menu']: true,
                 ['context-menu-visible']: this.hasSlottedElements,
-            }, "data-context-menu": true, icon: "more-menu", ghost: true }), index.h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, index.h("div", { class: "dropdown-content" }, index.h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (index.h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), index.h("slot", { key: 'd9f22375761d77beb0fc038195c06d0e23297d31', name: "ix-application-header-avatar" }))));
+            }, "data-context-menu": true, icon: "more-menu", ghost: true }), index.h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, index.h("div", { class: "dropdown-content" }, index.h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (index.h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), index.h("slot", { key: '6732e9899c977bdd6301b75efce7687ca5a0bf4c', name: "ix-application-header-avatar" }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-application-sidebar.cjs.entry.js CHANGED Viewed

@@ -35,7 +35,7 @@ const ApplicationSidebar = class {
         anime_es.anime(animation$1);
     }
     render() {
-        return (index.h(index.Host, { key: '3c17bcc10e4e795c42d0627dc6e8158b2a651b54', slot: "application-sidebar", class: {
+        return (index.h(index.Host, { key: 'f91894976e33362b3d92be367a22d8be0c8a6c1f', slot: "application-sidebar", class: {
                 visible: this.visible,
             } }, this.visible ? index.h("slot", null) : null));
     }

package/dist/cjs/ix-application-switch-modal.cjs.entry.js CHANGED Viewed

@@ -45,7 +45,7 @@ const ApplicationSwitchModal = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: '5d6291e4a6172e0cff21c7871e41e4859c6c6e0f' }, index.h("ix-modal-header", { key: '8b20c113bdfcbe1ba507d424382c36391d197171', icon: "apps" }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), index.h("ix-modal-content", { key: '4f919cdf34694c21948af2a3a5b2044a05a2b883', class: "content" }, index.h("div", { key: '0daf620107484d477b06fc98f4aee721e87bbd53', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (index.h("div", { class: "loading" }, index.h("ix-spinner", { size: "medium", variant: "primary" }), index.h("span", null, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) ||
+        return (index.h(index.Host, { key: 'df1550915fff21de5c0a40acdf24a096a5105d2b' }, index.h("ix-modal-header", { key: '217d8f2bb79e07c411db00b633648beeb72149f0', icon: "apps" }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), index.h("ix-modal-content", { key: '0f1001891265ff7d9cd5826ba91479cf8a487ef6', class: "content" }, index.h("div", { key: '47d718ff45970bd5bba3641f8785899df9e26e50', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (index.h("div", { class: "loading" }, index.h("ix-spinner", { size: "medium", variant: "primary" }), index.h("span", null, ((_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/dist/cjs/ix-application.cjs.entry.js CHANGED Viewed

@@ -92,12 +92,12 @@ const Application = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '5611ad541df7672a749f3042f7accf1bc0f4fea3', "data-role": "", class: {
+        return (index.h(index.Host, { key: 'c617c1c5634cc4e151ad45bfec3be602619df7bb', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, index.h("slot", { key: 'b8600e40c99555bae7055b6a4894df57a7d49026', name: "application-header" }), index.h("div", { key: 'ad71a6e9d05034a173b16075b4343b5244c40e98', class: "application" }, index.h("slot", { key: '6ae1d4a193cc858529efbb0a06421ecf5437224a', name: "menu" }), index.h("aside", { key: '06a2517aae4b8e0edc4ede14f03b87e9960a39a3', class: {
+            } }, index.h("slot", { key: '7dd298629e5d825957cc5caf15be3726e0487374', name: "application-header" }), index.h("div", { key: '41da1f0707c6f6723e33a50f4c45cda28bed9e77', class: "application" }, index.h("slot", { key: '7d2b838c6193af2fc357befb1c15cd6870d85841', name: "menu" }), index.h("aside", { key: '73ce757bc32176170b51cf95013b13f5594c0eb2', class: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, onClick: () => this.onContentClick() }, index.h("slot", { key: '77d253b74578d2392718dcb26ed16c52a60e93ae', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = shadowDom.hasSlottedElements(this.applicationSidebarSlot)) })), index.h("main", { key: '34861c56227c6adce9503099d2b1a7a66bfbafa6', class: "content", onClick: () => this.onContentClick() }, index.h("slot", { key: '55b324f84d53c0a8a2a49cdcf49b940131ec7ea9' })))));
+            }, onClick: () => this.onContentClick() }, index.h("slot", { key: '8361978e6d5cdccae60544290253175e27e00b54', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = shadowDom.hasSlottedElements(this.applicationSidebarSlot)) })), index.h("main", { key: 'cbce05cd33d05f8f6a4e7cf7e7f8582e560da0d6', class: "content", onClick: () => this.onContentClick() }, index.h("slot", { key: 'd3a7f19add2a6cf2f976c9be1b8688fa5e997e48' })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -7,7 +7,7 @@ const baseButton = require('./base-button-2d5bec30.js');
 const shadowDom = require('./shadow-dom-73f9d553.js');
 const makeRef = require('./make-ref-c25629b7.js');
-const avatarCss = ":host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-color-component-3);color:var(--theme-color-std-text)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-color-4)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem;padding:0px;border-radius:100px !important}:host(.avatar-button) .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host(.avatar-button) .btn-invisible-primary,:host(.avatar-button) .btn-invisible-primary.focus,:host(.avatar-button) .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.avatar-button) li{transform:scale(0.8)}";
+const avatarCss = ":host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-avatar--color)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem;padding:0px;border-radius:100px !important}:host(.avatar-button) .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host(.avatar-button) .btn-invisible-primary,:host(.avatar-button) .btn-invisible-primary.focus,:host(.avatar-button) .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.avatar-button) li{transform:scale(0.8)}";
 const IxAvatarStyle0 = avatarCss;
 function DefaultAvatar(props) {
@@ -71,7 +71,7 @@ const MenuAvatarItem = class {
         return this.dropdownItemRef.waitForCurrent();
     }
     render() {
-        return (index.h("ix-dropdown-item", { key: 'c6f72909f3511d9434e4bf0cddac029b4db47b11', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+        return (index.h("ix-dropdown-item", { key: '9670762c1c6ac88327938f82d59042fe0b8da824', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
     }
     get hostElement() { return index.getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"file":"ix-avatar.ix-menu-avatar-item.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,+8GAA+8G,CAAC;AACl+G,uBAAe,SAAS;;ACqBxB,SAAS,aAAa,CAAC,KAA4B;IACjD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,IAAI,QAAQ,EAAE;QACZ,OAAOA,iBAAK,KAAK,EAAE,iBAAiB,IAAG,QAAQ,CAAO,CAAC;KACxD;IAED,QACEA,iBACE,KAAK,EAAE,cAAc,EACrB,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,IAEnBA,eAAG,IAAI,EAAC,MAAM,eAAW,SAAS,IAChCA,kBACE,EAAE,EAAC,wBAAwB,EAC3B,CAAC,EAAC,kIACiE,GACnE,EACFA,kBACE,EAAE,EAAC,oBAAoB,EACvB,CAAC,EAAC,2TAGgE,GAClE,CACA,CACA,EACN;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,KAA0C;IAC7D,QACEA,gBAAI,KAAK,EAAC,QAAQ,IACf,KAAK,CAAC,KAAK,IACVA,iBAAK,GAAG,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc,GAAO,KAElDA,QAAC,aAAa,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,CAC5C,CACE,EACL;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,KAKjB;IACC,QACEA,QAACC,cAAQ,QACPD,iBAAK,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,cAAc,EAAE,IAC/DA,QAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,EAC7DA,iBAAK,KAAK,EAAC,MAAM,IACfA,iBAAK,KAAK,EAAC,UAAU,IAAE,KAAK,CAAC,QAAQ,CAAO,EAC3C,KAAK,CAAC,KAAK,KACVA,2BAAe,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,IACvC,KAAK,CAAC,KAAK,CACE,CACjB,CACG,CACF,CACG,EACX;AACJ,CAAC;MAUY,MAAM;;;;;;;0CA+BqB,KAAK;kCACb,KAAK;;IAInC,iBAAiB;QACf,MAAM,OAAO,GAAGE,wBAAc,CAAC,uBAAuB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAC1E,IAAI,CAAC,0BAA0B,GAAG,OAAO,KAAK,IAAI,CAAC;KACpD;IAEO,cAAc;QACpB,IAAI,CAAC,kBAAkB,GAAGC,4BAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAChE;IAEO,oBAAoB;QAC1B,OAAO,IAAI,OAAO,CAAc,CAAC,OAAO;YACtCC,cAAQ,CAAC,MACP,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAC7D,CAAC;SACH,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,0BAA0B,EAAE;YACnC,QACEJ,QAACK,UAAI,IAAC,IAAI,EAAC,8BAA8B,EAAC,KAAK,EAAE,eAAe,IAC9DL,QAACM,qBAAU,IACT,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,KAAK,EACf,IAAI,EAAE,SAAS,EACf,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,KAAK,EACf,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,IAEjBN,QAAC,WAAW,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAChD,EACbA,yBACE,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE,EACpC,KAAK,EAAC,iBAAiB,IAEtB,IAAI,CAAC,QAAQ,KACZA,QAACC,cAAQ,QACPD,QAAC,QAAQ,IACP,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,EACD,IAAI,CAAC,kBAAkB,IAAIA,2BAAyB,CAC5C,CACZ,EACDA,kBACE,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EACzC,GAAG,EAAE,CAAC,GAAoB,MAAM,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,GACjD,CACI,CACT,EACP;SACH;QAED,QACEA,QAACK,UAAI,QACHL,QAAC,WAAW,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACtD,EACP;KACH;;;;;ACtMH,MAAM,iBAAiB,GAAG,opBAAopB,CAAC;AAC/qB,+BAAe,iBAAiB;;MCyBnB,cAAc;;;;QAkBjB,oBAAe,GAAGO,eAAO,EAA6B,CAAC;;;;;IAI/D,MAAM,sBAAsB;QAC1B,OAAO,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,CAAC;KAC9C;IAED,MAAM;QACJ,QACEP,+EACE,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,EACpB;KACH;;;;;;;;","names":["h","Fragment","closestElement","hasSlottedElements","readTask","Host","BaseButton","makeRef"],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx","src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","src/components/menu-avatar-item/menu-avatar-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import './../button/button-mixin';\n\n:host {\n display: flex;\n position: relative;\n width: fit-content;\n\n .avatar {\n display: flex;\n align-items: center;\n\n > .avatar-image {\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n }\n\n > .avatar-initials {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n background-color: var(--theme-color-component-3);\n color: var(--theme-color-std-text);\n }\n\n #avatar-path-background {\n fill: var(--theme-avatar--background);\n }\n\n #avatar-path-person {\n fill: var(--theme-color-4);\n }\n }\n}\n\n:host {\n .user-info {\n display: flex;\n flex-direction: row;\n position: relative;\n height: 2.5rem;\n padding: 1rem;\n width: 12.75rem;\n min-width: 12.75rem;\n max-width: 12.75rem;\n\n gap: 1rem;\n\n .avatar {\n width: 2rem;\n pointer-events: none;\n }\n\n .user {\n display: flex;\n position: relative;\n flex-direction: column;\n justify-content: center;\n max-width: 10rem;\n width: 100%;\n overflow: hidden;\n }\n\n .username {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .extra {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n}\n\n:host(.avatar-button) {\n button {\n @include btn-base;\n padding: 0px;\n\n border-radius: 100px !important;\n }\n\n @include btn-base-variant('invisible-primary', false);\n\n li {\n transform: scale(0.8);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Fragment,\n h,\n Host,\n Prop,\n readTask,\n State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n const { initials } = props;\n\n if (initials) {\n return <div class={'avatar-initials'}>{initials}</div>;\n }\n\n return (\n <svg\n class={'avatar-image'}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n id=\"avatar-path-background\"\n d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n 16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n />\n <path\n id=\"avatar-path-person\"\n d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n 6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n 9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n 6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n />\n </g>\n </svg>\n );\n}\n\nfunction AvatarImage(props: { image: string; initials: string }) {\n return (\n <li class=\"avatar\">\n {props.image ? (\n <img src={props.image} class=\"avatar-image\"></img>\n ) : (\n <DefaultAvatar initials={props.initials} />\n )}\n </li>\n );\n}\n\nfunction UserInfo(props: {\n image: string;\n initials: string;\n userName: string;\n extra: string;\n}) {\n return (\n <Fragment>\n <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n <AvatarImage image={props.image} initials={props.initials} />\n <div class=\"user\">\n <div class=\"username\">{props.userName}</div>\n {props.extra && (\n <ix-typography class=\"extra\" color={'soft'}>\n {props.extra}\n </ix-typography>\n )}\n </div>\n </div>\n </Fragment>\n );\n}\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-avatar',\n styleUrl: 'avatar.scss',\n shadow: true,\n})\nexport class Avatar {\n @Element() hostElement: HTMLIxAvatarElement;\n\n /\n Display an avatar image\n \n /\n @Prop() image: string;\n\n /*\n Display the initials of the user. Will be overwritten by image\n \n /\n @Prop() initials: string;\n\n /*\n If set an info card displaying the username will be placed inside the dropdown.\n * Note: Only working if avatar is part of the ix-application-header\n \n @since 2.1.0\n /\n @Prop() username: string;\n\n /\n Optional description text that will be displayed underneath the username.\n * Note: Only working if avatar is part of the ix-application-header\n \n @since 2.1.0\n /\n @Prop() extra: string;\n\n @State() isClosestApplicationHeader = false;\n @State() hasSlottedElements = false;\n\n private slotElement: HTMLSlotElement;\n\n componentWillLoad() {\n const closest = closestElement('ix-application-header', this.hostElement);\n this.isClosestApplicationHeader = closest !== null;\n }\n\n private slottedChanged() {\n this.hasSlottedElements = hasSlottedElements(this.slotElement);\n }\n\n private resolveAvatarTrigger() {\n return new Promise<HTMLElement>((resolve) => {\n readTask(() =>\n resolve(this.hostElement.shadowRoot.querySelector('button'))\n );\n });\n }\n\n render() {\n if (this.isClosestApplicationHeader) {\n return (\n <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n <BaseButton\n disabled={false}\n ghost={true}\n iconOval={false}\n icon={undefined}\n iconOnly={false}\n loading={false}\n outline={false}\n selected={false}\n type=\"button\"\n variant=\"primary\"\n >\n <AvatarImage image={this.image} initials={this.initials} />\n </BaseButton>\n <ix-dropdown\n trigger={this.resolveAvatarTrigger()}\n class=\"avatar-dropdown\"\n >\n {this.username && (\n <Fragment>\n <UserInfo\n extra={this.extra}\n image={this.image}\n initials={this.initials}\n userName={this.username}\n />\n {this.hasSlottedElements && <ix-divider></ix-divider>}\n </Fragment>\n )}\n <slot\n onSlotchange={() => this.slottedChanged()}\n ref={(ref: HTMLSlotElement) => (this.slotElement = ref)}\n ></slot>\n </ix-dropdown>\n </Host>\n );\n }\n\n return (\n <Host>\n <AvatarImage image={this.image} initials={this.initials} />\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\n color: var(--theme-color-std-text);\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Method,\n Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n tag: 'ix-menu-avatar-item',\n styleUrl: 'menu-avatar-item.scss',\n shadow: true,\n})\nexport class MenuAvatarItem implements DropdownItemWrapper {\n /\n Avatar dropdown icon\n /\n @Prop() icon: string;\n\n /\n Avatar dropdown label\n /\n @Prop() label: string;\n\n /\n Avatar dropdown item clicked\n /\n @Event() itemClick: EventEmitter<MouseEvent>;\n\n @Element() hostElement: HTMLIxMenuAvatarItemElement;\n\n private dropdownItemRef = makeRef<HTMLIxDropdownItemElement>();\n\n /* @internal */\n @Method()\n async getDropdownItemElement() {\n return this.dropdownItemRef.waitForCurrent();\n }\n\n render() {\n return (\n <ix-dropdown-item\n ref={this.dropdownItemRef}\n icon={this.icon}\n label={this.label}\n onClick={(e) => this.itemClick.emit(e)}\n ></ix-dropdown-item>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-avatar.ix-menu-avatar-item.entry.cjs.js","mappings":"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","names":["h","Fragment","closestElement","hasSlottedElements","readTask","Host","BaseButton","makeRef"],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx","src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","src/components/menu-avatar-item/menu-avatar-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import './../button/button-mixin';\n\n:host {\n display: flex;\n position: relative;\n width: fit-content;\n\n .avatar {\n display: flex;\n align-items: center;\n\n > .avatar-image {\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n }\n\n > .avatar-initials {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n background-color: var(--theme-avatar--background);\n color: var(--theme-avatar--color);\n }\n\n #avatar-path-background {\n fill: var(--theme-avatar--background);\n }\n\n #avatar-path-person {\n fill:var(--theme-avatar--color);\n }\n }\n}\n\n:host {\n .user-info {\n display: flex;\n flex-direction: row;\n position: relative;\n height: 2.5rem;\n padding: 1rem;\n width: 12.75rem;\n min-width: 12.75rem;\n max-width: 12.75rem;\n\n gap: 1rem;\n\n .avatar {\n width: 2rem;\n pointer-events: none;\n }\n\n .user {\n display: flex;\n position: relative;\n flex-direction: column;\n justify-content: center;\n max-width: 10rem;\n width: 100%;\n overflow: hidden;\n }\n\n .username {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .extra {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n}\n\n:host(.avatar-button) {\n button {\n @include btn-base;\n padding: 0px;\n\n border-radius: 100px !important;\n }\n\n @include btn-base-variant('invisible-primary', false);\n\n li {\n transform: scale(0.8);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Fragment,\n h,\n Host,\n Prop,\n readTask,\n State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n const { initials } = props;\n\n if (initials) {\n return <div class={'avatar-initials'}>{initials}</div>;\n }\n\n return (\n <svg\n class={'avatar-image'}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n id=\"avatar-path-background\"\n d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n 16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n />\n <path\n id=\"avatar-path-person\"\n d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n 6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n 9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n 6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n />\n </g>\n </svg>\n );\n}\n\nfunction AvatarImage(props: { image: string; initials: string }) {\n return (\n <li class=\"avatar\">\n {props.image ? (\n <img src={props.image} class=\"avatar-image\"></img>\n ) : (\n <DefaultAvatar initials={props.initials} />\n )}\n </li>\n );\n}\n\nfunction UserInfo(props: {\n image: string;\n initials: string;\n userName: string;\n extra: string;\n}) {\n return (\n <Fragment>\n <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n <AvatarImage image={props.image} initials={props.initials} />\n <div class=\"user\">\n <div class=\"username\">{props.userName}</div>\n {props.extra && (\n <ix-typography class=\"extra\" color={'soft'}>\n {props.extra}\n </ix-typography>\n )}\n </div>\n </div>\n </Fragment>\n );\n}\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-avatar',\n styleUrl: 'avatar.scss',\n shadow: true,\n})\nexport class Avatar {\n @Element() hostElement: HTMLIxAvatarElement;\n\n /\n Display an avatar image\n \n /\n @Prop() image: string;\n\n /*\n Display the initials of the user. Will be overwritten by image\n \n /\n @Prop() initials: string;\n\n /*\n If set an info card displaying the username will be placed inside the dropdown.\n * Note: Only working if avatar is part of the ix-application-header\n \n @since 2.1.0\n /\n @Prop() username: string;\n\n /\n Optional description text that will be displayed underneath the username.\n * Note: Only working if avatar is part of the ix-application-header\n \n @since 2.1.0\n /\n @Prop() extra: string;\n\n @State() isClosestApplicationHeader = false;\n @State() hasSlottedElements = false;\n\n private slotElement: HTMLSlotElement;\n\n componentWillLoad() {\n const closest = closestElement('ix-application-header', this.hostElement);\n this.isClosestApplicationHeader = closest !== null;\n }\n\n private slottedChanged() {\n this.hasSlottedElements = hasSlottedElements(this.slotElement);\n }\n\n private resolveAvatarTrigger() {\n return new Promise<HTMLElement>((resolve) => {\n readTask(() =>\n resolve(this.hostElement.shadowRoot.querySelector('button'))\n );\n });\n }\n\n render() {\n if (this.isClosestApplicationHeader) {\n return (\n <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n <BaseButton\n disabled={false}\n ghost={true}\n iconOval={false}\n icon={undefined}\n iconOnly={false}\n loading={false}\n outline={false}\n selected={false}\n type=\"button\"\n variant=\"primary\"\n >\n <AvatarImage image={this.image} initials={this.initials} />\n </BaseButton>\n <ix-dropdown\n trigger={this.resolveAvatarTrigger()}\n class=\"avatar-dropdown\"\n >\n {this.username && (\n <Fragment>\n <UserInfo\n extra={this.extra}\n image={this.image}\n initials={this.initials}\n userName={this.username}\n />\n {this.hasSlottedElements && <ix-divider></ix-divider>}\n </Fragment>\n )}\n <slot\n onSlotchange={() => this.slottedChanged()}\n ref={(ref: HTMLSlotElement) => (this.slotElement = ref)}\n ></slot>\n </ix-dropdown>\n </Host>\n );\n }\n\n return (\n <Host>\n <AvatarImage image={this.image} initials={this.initials} />\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\n color: var(--theme-color-std-text);\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Method,\n Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n tag: 'ix-menu-avatar-item',\n styleUrl: 'menu-avatar-item.scss',\n shadow: true,\n})\nexport class MenuAvatarItem implements DropdownItemWrapper {\n /\n Avatar dropdown icon\n /\n @Prop() icon: string;\n\n /\n Avatar dropdown label\n /\n @Prop() label: string;\n\n /\n Avatar dropdown item clicked\n /\n @Event() itemClick: EventEmitter<MouseEvent>;\n\n @Element() hostElement: HTMLIxMenuAvatarItemElement;\n\n private dropdownItemRef = makeRef<HTMLIxDropdownItemElement>();\n\n /* @internal */\n @Method()\n async getDropdownItemElement() {\n return this.dropdownItemRef.waitForCurrent();\n }\n\n render() {\n return (\n <ix-dropdown-item\n ref={this.dropdownItemRef}\n icon={this.icon}\n label={this.label}\n onClick={(e) => this.itemClick.emit(e)}\n ></ix-dropdown-item>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-basic-navigation.cjs.entry.js CHANGED Viewed

@@ -74,10 +74,10 @@ const BasicNavigation = class {
         (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
     }
     render() {
-        return (index.h(index.Host, { key: '3e6b368ef4a4c3bdd39aa1e80488d2e7e1d9123c', "data-role": "", class: {
+        return (index.h(index.Host, { key: '35083d5a514a69bc03be9de1a1c2641d9ed187ad', "data-role": "", class: {
                 'hide-header': this.hideHeader,
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, !this.hideHeader ? (index.h("ix-application-header", { name: this.applicationName }, index.h("slot", { name: "logo", slot: "logo" }))) : null, index.h("div", { key: '811974c45d6dc7a132b6ed7377185b73c82b673e', class: "navigation-content" }, index.h("slot", { key: '3f5d0dc41d204ff8e291dda99a4567e01cfd4755', name: "menu" }), index.h("div", { key: 'f187a0a7d16b362875296227a28a8df5a99cf94c', class: "content", onClick: () => this.onContentClick() }, index.h("slot", { key: 'd18cd7a7ea3c2dc289b07a3d3e0a27e19844ba10' })))));
+            } }, !this.hideHeader ? (index.h("ix-application-header", { name: this.applicationName }, index.h("slot", { name: "logo", slot: "logo" }))) : null, index.h("div", { key: 'e9ff6a0ea8655afccc66259da206632e035b52a2', class: "navigation-content" }, index.h("slot", { key: '0809719c5650e73c7d801dbd588dacfe4e24e8cb', name: "menu" }), index.h("div", { key: '3a56100cd7300c1b7b6e8076b7f5dd5f2c5ae3f4', class: "content", onClick: () => this.onContentClick() }, index.h("slot", { key: '8b14107e0aeee94534cfdf6cd1cf971f1dadb814' })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-breadcrumb.cjs.entry.js CHANGED Viewed

@@ -72,7 +72,7 @@ const Breadcrumb = class {
     render() {
         var _a, _b, _c, _d;
         const a11y$1 = a11y.a11yHostAttributes(this.hostElement);
-        return (index.h(index.Host, { key: '3a5d431706ed4ef549411908c3155fb3101c5909' }, index.h("ix-dropdown", { key: '6b0646e46f9e2e47f763a2fd88a2b58273fa4c01', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
+        return (index.h(index.Host, { key: 'd4a7d70b996b0e613a05a53896aedcaf786cb05b' }, index.h("ix-dropdown", { key: '545dd5b645297725ef8b58c2619ebff9cdc0b0c1', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
                 ? this.previousButtonRef
                 : null, onShowChanged: ({ detail }) => {
                 this.isPreviousDropdownExpanded = detail;
@@ -89,7 +89,7 @@ const Breadcrumb = class {
             return (index.h("ix-dropdown-item", { label: label, onClick: () => {
                     this.onItemClick(label);
                 }, onItemClick: (event) => event.stopPropagation() }));
-        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (index.h("ix-breadcrumb-item", { id: this.previousButtonId, ref: (ref) => (this.previousButtonRef = ref), label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11y.a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, index.h("nav", { key: '8951ec43c5cc5a3241344f0a2dbf8cceee266f61', class: "crumb-items", "aria-label": (_c = a11y$1['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, index.h("ol", { key: '9d53557b3fcad33cd0f85f1009cf1cd517d2c6a8' }, index.h("slot", { key: '24b98536fb99e10cfc33947130e572b52bd42218' }))), index.h("ix-dropdown", { key: '1a00f517f4a8837401e4873f30ba044d84f2fb74', trigger: this.nextButtonRef }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (index.h("ix-dropdown-item", { label: item, onClick: (e) => {
+        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (index.h("ix-breadcrumb-item", { id: this.previousButtonId, ref: (ref) => (this.previousButtonRef = ref), label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11y.a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, index.h("nav", { key: 'e3e3162f385bd64ddde0671c3bb6fe084ca32714', class: "crumb-items", "aria-label": (_c = a11y$1['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, index.h("ol", { key: 'ba7a37c3a9124efa24ea6ac3ddfe5a146d6cc5a1' }, index.h("slot", { key: 'b4b30cf5e41c4583ea6fbbdb372f79d167f859c9' }))), index.h("ix-dropdown", { key: 'aa20745609c9110ebed70439c26bf214f3386710', trigger: this.nextButtonRef }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (index.h("ix-dropdown-item", { label: item, onClick: (e) => {
                 this.nextClick.emit({
                     event: e,
                     item,

package/dist/cjs/ix-burger-menu.cjs.entry.js CHANGED Viewed

@@ -17,7 +17,7 @@ const BurgerMenu = class {
         this.pinned = false;
     }
     render() {
-        return (index.h(index.Host, { key: '4e7e34d73d70225b42dfdab7529786e9a86a1931', class: {
+        return (index.h(index.Host, { key: 'abeece1a04e139ac724db7f84642d98e04184997', class: {
                 expanded: this.expanded,
             } }, this.pinned ? (index.h("ix-icon-button", { icon: `double-chevron-${this.expanded ? 'left' : 'right'}`, ghost: true })) : (index.h("button", { class: Object.assign(Object.assign({}, baseButton.getButtonClasses('secondary', false, true, true, false, false, false)), { 'burger-menu-button': true }), type: "button", "aria-label": this.ixAriaLabel ? this.ixAriaLabel : null, "aria-pressed": a11y.a11yBoolean(this.expanded) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, index.h("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), index.h("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), index.h("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))))));
     }

package/dist/cjs/ix-card-accordion_2.cjs.entry.js CHANGED Viewed

@@ -73,7 +73,7 @@ const CardHeader = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '0d6fb3a5e4d91a6ca36e670dd6840a430fd5bf80' }, index.h("slot", { key: '18f10b373eace5c4cf7102a8a5eca93402f67884' }), index.h("div", { key: '19bacf432aef00963c20c3f54abe458717df03c8', class: "title-actions" }, index.h("slot", { key: 'bd52f42b05e873163be38840453d9564e17b03a9', name: "title-actions" }))));
+        return (index.h(index.Host, { key: 'becda7afe606335391887cbf616a679a79ca23f8' }, index.h("slot", { key: '81d4200983e9288ae910d6e9bbf4ec8f107ed4b9' }), index.h("div", { key: 'e5894f17b9fdc84e70631bd03751d613f8e9ecf0', class: "title-actions" }, index.h("slot", { key: '30b969a1a99f9b411f6bfcee4ea5fcfc4c1f73b7', name: "title-actions" }))));
     }
 };
 CardHeader.style = IxCardTitleStyle0;

package/dist/cjs/ix-card-list.cjs.entry.js CHANGED Viewed

@@ -141,16 +141,16 @@ const CardList = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'c328d27069ea738a47d5887b8fc92026eb41ed41' }, index.h(CardListTitle, { key: '846c7c0a11d45da394795bec62a345daa1c44cf0', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
+        return (index.h(index.Host, { key: 'f64f7bbef5fef7491fd79ff4a8925d30d69fc452' }, index.h(CardListTitle, { key: '7e0d6992d039649ed38115d0434f1192231c6ee5', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
                 ? this.numberOfAllChildElements
-                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e) }), index.h("div", { key: '56889ca9212e46c12653179c8a981b2e43277231', class: {
+                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e) }), index.h("div", { key: '3e586bcc0ce83077ca1f63a999d0c34580eb66c9', class: {
                 CardList__Overflow: true,
-            }, style: this.computeMaskLayer() }, index.h("div", { key: '9befdceda0ca5ba093f170e3e0e4e58ddbd06113', class: {
+            }, style: this.computeMaskLayer() }, index.h("div", { key: '2575c1d6679112d96e48e8c120b2d62c24cc8629', class: {
                 CardList__Content: true,
                 CardList__Content__Collapsed: this.collapse,
                 CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',
                 CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',
-            }, onScroll: () => this.onCardListScroll() }, index.h("slot", { key: '36c242f6e1400a7e0258b005b5a558db5c9fe210', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (index.h("ix-card", { class: {
+            }, onScroll: () => this.onCardListScroll() }, index.h("slot", { key: '55f3065336c58ee56dbe24e959f81406173a6589', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (index.h("ix-card", { class: {
                 Show__All__Card: true,
             }, onClick: (event) => this.showMoreCardClick.emit({
                 nativeEvent: event,

package/dist/cjs/ix-card_2.cjs.entry.js CHANGED Viewed

@@ -31,7 +31,7 @@ const CardContent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'ee46815485376b646616fe68d59f5057438e91f5' }, index.h("slot", { key: '4fe9415fb686a5700a81ce5a9584ceebd441d67d' })));
+        return (index.h(index.Host, { key: '7351d9d0c2ac7e3bb3ff04f7327876f3c118eede' }, index.h("slot", { key: 'ae6747bb0d3204fcb78bb26d763a04a090424fc5' })));
     }
 };
 CardContent.style = IxCardContentStyle0;

package/dist/cjs/ix-category-filter.cjs.entry.js CHANGED Viewed

@@ -379,19 +379,19 @@ const CategoryFilter = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'ff8f35254d719a554f582dbad8997f7e4d6bf431' }, index.h("form", { key: '944b24fb6296fc8dfdcb3ac2dd1a1508c681ee6c', ref: (el) => (this.formElement = el) }, index.h("div", { key: 'a56bd235da22554a3cd9c4b0c86545ba0f408ac3', "read-only": this.readonly, class: {
+        return (index.h(index.Host, { key: 'bb1895ca71c8872520aa91537892b08bc44e8799' }, index.h("form", { key: '724c3f8b7344ff2a8d6dbc978328c1c40e9f4c86', ref: (el) => (this.formElement = el) }, index.h("div", { key: 'ce61f09afc88a407e8af9ab5de8d70df614c99c7', "read-only": this.readonly, class: {
                 'input-container': true,
                 disabled: this.disabled,
                 focus: this.hasFocus,
                 readonly: this.readonly,
                 'no-icon': this.hideIcon,
-            } }, index.h("ix-icon", { key: '07c42a0cc02e6ff7c8846addc59a9c473c993c97', color: this.getIconColor(), class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), index.h("div", { key: '3a8f5cef5a49a7075f725ac209d16e6d9c8f03b0', class: "token-container" }, index.h("ul", { key: '50a8aa2fc77f5423b33922a2358a33de6dc80514', class: "list-unstyled" }, this.filterTokens.map((value, index$1) => (index.h("li", { key: value.toString(), class: {
+            } }, index.h("ix-icon", { key: 'c051a2ba705082c534c441997138d0a7681d9483', color: this.getIconColor(), class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), index.h("div", { key: '11adfdb0d008ff35dbe1022bc8cdac5b04024cdf', class: "token-container" }, index.h("ul", { key: 'c9a892b1ac2757c9117eaf957548624184af0f83', class: "list-unstyled" }, this.filterTokens.map((value, index$1) => (index.h("li", { key: value.toString(), class: {
                 animate__animated: true,
                 animate__fadein: true,
             } }, index.h("ix-filter-chip", { disabled: this.disabled, readonly: this.readonly, onClick: (e) => e.stopPropagation(), onCloseClick: () => this.removeToken(index$1) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (index.h("li", { class: {
                 'category-preview': true,
                 'd-none': this.category === undefined,
-            } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), index.h("input", { key: '2980bcf4313e8163bc5ae521f152081641d0744d', class: {
+            } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), index.h("input", { key: '9b8af2d470dbd7c9fe6d7d34717c7678317bed4b', class: {
                 'text-input': true,
                 'hide-placeholder': this.readonly ||
                     this.disabled ||

package/dist/cjs/ix-chip.cjs.entry.js CHANGED Viewed

@@ -39,11 +39,11 @@ const Chip = class {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (index.h(index.Host, { key: '3e588faae52b42310628ebc15aa3077000a1472b', tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
+        return (index.h(index.Host, { key: '04ad48738af21d85310e4b6e81b509ff748740fe', tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.chipColor) !== null && _b !== void 0 ? _b : this.color,
                 }
-                : {} }, index.h("div", { key: '74de055f087c03d1dae868c9b4e87dfd384c913a', style: Object.assign({}, customStyle), class: {
+                : {} }, index.h("div", { key: 'fcb2c6a534fee6a075505632524db05ea6214611', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: isInactive,
@@ -57,10 +57,10 @@ const Chip = class {
                 custom: this.variant === 'custom',
                 closable: this.closable,
                 icon: !!this.icon,
-            } }, index.h("ix-icon", { key: '7ba32fadaa20fe15ad08df0597455259537b5be7', class: {
+            } }, index.h("ix-icon", { key: '8177db5d16f03117e3397a99c4f364bff48b063b', class: {
                 'with-icon': true,
                 hidden: !this.icon,
-            }, name: this.icon, size: '24' }), index.h("span", { key: '0cb6855897a94a1c10068235e18a0b5e7a8e3a3f', class: "slot-container" }, index.h("slot", { key: '95a0e66db38f6a2c47615b05b0149184669e5546' })), isInactive === false && this.closable ? this.getCloseButton() : null)));
+            }, name: this.icon, size: '24' }), index.h("span", { key: 'f1f0f6b22b92951ce0b1b5c81b1071ad4a3c6165', class: "slot-container" }, index.h("slot", { key: '59087cf16d54288ef6dc324520f0f43b84108166' })), isInactive === false && this.closable ? this.getCloseButton() : null)));
     }
     get el() { return index.getElement(this); }
 };