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/dist/esm/ix-date-dropdown.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-0d053ada.js';
 import { D as DateTime_1 } from './luxon-761b9b2d.js';
-const dateDropdownCss = ":host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}@media (max-width: 48em){:host .min-width{width:-moz-min-content;width:min-content}}@media (min-width: 48em){:host .border-right{border-right:var(--theme-x-weak-bdr-2)}}:host .max-height{max-height:-moz-max-content;max-height:max-content}:host .no-margin{margin:0;padding:0}:host .pull-right{float:right;padding:0.25rem 1rem}";
+const dateDropdownCss = ":host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}@media (max-width: 48em){:host .min-width{width:-moz-min-content;width:min-content}}@media (min-width: 48em){:host .border-right{border-right:var(--theme-x-weak-bdr-2)}}:host ix-button{width:100%}:host .max-height{max-height:-moz-max-content;max-height:max-content}:host .no-margin{margin:0;padding:0}:host .pull-right{float:right;padding:0.25rem 1rem}";
 const IxDateDropdownStyle0 = dateDropdownCss;
 const DateDropdown = class {
@@ -119,21 +119,21 @@ const DateDropdown = class {
         return option.label;
     }
     render() {
-        var _a, _b;
-        return (h(Host, { key: '587a80ff64848ac3072ae04a27573f83e1e11fd8' }, h("ix-button", { key: '6fa079d6960402455bcb6b097c459efc77e08d6e', "data-date-dropdown-trigger": true, variant: "primary", icon: "history", ref: (ref) => (this.triggerRef = ref), class: "button-width" }, this.getButtonLabel()), h("ix-dropdown", { key: 'dc9435a7533f1dc4d227ec12807f3d13d60161bf', "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef, "close-behavior": "outside", placement: "bottom-start", onShowChanged: ({ detail: show }) => {
+        var _a, _b, _c;
+        return (h(Host, { key: '587a80ff64848ac3072ae04a27573f83e1e11fd8' }, h("ix-button", { key: '54dce5bf9e30572642386c16c7f18e69e55f3fd1', "data-date-dropdown-trigger": true, variant: "primary", icon: "history", ref: (ref) => (this.triggerRef = ref) }, this.getButtonLabel()), h("ix-dropdown", { key: '4292a46172362908d80a49874b0e4a62ae0461e9', "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef, "close-behavior": "outside", placement: "bottom-start", onShowChanged: ({ detail: show }) => {
                 if (!show &&
                     this.selectedDateRangeId === 'custom' &&
                     this.datePickerTouched) {
                     this.onDateSelect(this.currentRangeValue);
                 }
-            } }, h("ix-layout-grid", { key: 'efb1071081dbf2e2a2f913af3c2e7d3ce78aa060', "no-margin": "true" }, h("ix-row", { key: '7c06508000770f55ff36057a8dae7b6e4b9404f4' }, h("ix-col", { key: 'ba2ea4063475d9bab8d1790991f7ef8564db9b23', class: {
+            } }, h("ix-layout-grid", { key: '9d92b3fd14fb2546fe9f6b588e048ad9048ed99e', "no-margin": "true" }, h("ix-row", { key: 'ea35e1f9c8df2f1bed99dff82ffcf57206864d47' }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && (h("ix-col", { class: {
                 'no-margin': true,
                 'border-right': this.selectedDateRangeId === 'custom',
-            } }, this.dateRangeOptions.map((dateRangeOption) => (h("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), h("div", { key: 'caca9bcebaa6d232b69142762318874e1caa5f75', hidden: !this.customRangeAllowed }, h("ix-dropdown-item", { key: 'cd086f353be43158775857cd14b61057b1302e34', label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') }))), h("ix-col", { key: '8c21ecaaadec975b347848af14f4b63713a14026', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (h(Fragment, null, h("ix-date-picker", { standaloneAppearance: false, onDateChange: (e) => {
+            } }, this.dateRangeOptions.map((dateRangeOption) => (h("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), h("div", { hidden: !this.customRangeAllowed }, h("ix-dropdown-item", { label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') })))), h("ix-col", { key: '39d788b4f948826461facbf8f0510d871416a2a3', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (h(Fragment, null, h("ix-date-picker", { standaloneAppearance: false, onDateChange: (e) => {
                 e.stopPropagation();
                 this.currentRangeValue = Object.assign(Object.assign({}, e.detail), { id: 'custom' });
                 this.datePickerTouched = true;
-            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, range: this.range, from: this.from || ((_a = this.currentRangeValue) === null || _a === void 0 ? void 0 : _a.from), to: this.to || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today }), h("div", { class: "pull-right" }, h("ix-button", { onClick: () => {
+            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, range: this.range, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today }), h("div", { class: "pull-right" }, h("ix-button", { onClick: () => {
                 this.onDateSelect(this.currentRangeValue);
             } }, this.i18nDone))))))))));
     }

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

	@@ -1 +1 @@
1	- {"file":"ix-date-dropdown.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,g9BAAg9B,CAAC;AACz+B,6BAAe,eAAe;;MC4CjB,YAAY;;;;QAwHf,sBAAiB,GAAG,KAAK,CAAC;sBAjHjB,YAAY;qBAKb,IAAI;;;;;2BAkCE,QAAQ;kCAkBD,IAAI;gCAegB,EAAE;8BAUO,WAAW;wBAKxB,MAAM;2BAKC,cAAc;qBAGlDA,UAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE;;;;;IApDtC,mBAAmB;QACjB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACzC,IAAI,CAAC,YAAY,CAAC;YAChB,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI;YACjC,EAAE,EAAE,IAAI,CAAC,iBAAiB,CAAC,EAAE;YAC7B,EAAE,EAAE,IAAI,CAAC,iBAAiB,CAAC,EAAE;SAC9B,CAAC,CAAC;KACJ;IAwBD,wBAAwB;QACtB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAsCD,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC9C;;;;;IAOM,MAAM,YAAY;QACvB,OAAO,IAAI,CAAC,iBAAiB,CAAC;KAC/B;IAEO,UAAU;QAChB,MAAM,aAAa,GACjB,IAAI,CAAC,WAAW,KAAK,QAAQ;aAC5B,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAElD,IAAI,aAAa,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC5C,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC;YACpC,IAAI,CAAC,iBAAiB,GAAG;gBACvB,EAAE,EAAE,IAAI,CAAC,mBAAmB;gBAC5B,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,EAAE,EAAE,IAAI,CAAC,EAAE;aACZ,CAAC;YAEF,OAAO;SACR;QACD,MAAM,oBAAoB,GAAG,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;QAC1D,IAAI,CAAC,oBAAoB,EAAE;YACzB,OAAO,CAAC,IAAI,CACV,wFAAwF,CACzF,CAAC;YAEF,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC;YACpC,IAAI,CAAC,iBAAiB,GAAG;gBACvB,EAAE,EAAE,IAAI,CAAC,mBAAmB;gBAC5B,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,EAAE,EAAE,IAAI,CAAC,EAAE;aACZ,CAAC;YAEF,OAAO;SACR;KACF;IAEO,YAAY,CAClB,UAAoD,EACpD,gBAAgB,GAAG,IAAI;QAEvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAEtC,IAAI,gBAAgB,EAAE;YACpB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;QAED,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;KAChC;IAEO,iBAAiB,CAAC,EAAU;QAClC,IAAI,IAAI,CAAC,qBAAqB,CAAC,EAAE,CAAC,EAAE;YAClC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC3C;KACF;IAEO,qBAAqB,CAAC,EAAU;QACtC,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC;QAC9B,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QAEtE,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC;SACjC;QAED,OAAO,MAAM,CAAC;KACf;IAEO,aAAa;QACnB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,IAAI,GAAG,KAAK,CAAC;KACvE;IAEO,cAAc;;QACpB,IAAI,IAAI,CAAC,mBAAmB,KAAK,QAAQ,KAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,IAAI,CAAA,EAAE;YACzE,IAAI,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YAExC,IAAI,IAAI,CAAC,iBAAiB,CAAC,EAAE,EAAE;gBAC7B,KAAK,IAAI,MAAM,IAAI,CAAC,iBAAiB,CAAC,EAAE,EAAE,CAAC;aAC5C;YAED,OAAO,KAAK,CAAC;SACd;QAED,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAC7B,OAAO,IAAI,CAAC,WAAW,CAAC;SACzB;QAED,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,MAAM,MAAK,CAAC,EAAE;YACjE,OAAO,IAAI,CAAC,WAAW,CAAC;SACzB;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CACvC,CAAC,MAAM,KAAK,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,mBAAmB,CACnD,CAAC;QAEF,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,CAAC,KAAK,CACX,oCAAoC,IAAI,CAAC,mBAAmB,EAAE,CAC/D,CAAC;YACF,OAAO,IAAI,CAAC,WAAW,CAAC;SACzB;QAED,OAAO,MAAM,CAAC,KAAK,CAAC;KACrB;IAED,MAAM;;QACJ,QACE,EAAC,IAAI,uDACH,sGAEE,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACrC,KAAK,EAAC,cAAc,IAEnB,IAAI,CAAC,cAAc,EAAE,CACZ,EACZ,gGAEE,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,UAAU,oBACT,SAAS,EACxB,SAAS,EAAC,cAAc,EACxB,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE;gBAC9B,IACE,CAAC,IAAI;oBACL,IAAI,CAAC,mBAAmB,KAAK,QAAQ;oBACrC,IAAI,CAAC,iBAAiB,EACtB;oBACA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;iBAC3C;aACF,IAED,oFAA0B,MAAM,IAC9B,iEACE,+DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,cAAc,EAAE,IAAI,CAAC,mBAAmB,KAAK,QAAQ;aACtD,IAEA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,eAAe,MACzC,wBACE,KAAK,EAAE,eAAe,CAAC,KAAK,EAC5B,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,eAAe,CAAC,EAAE,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,mBAAmB,KAAK,eAAe,CAAC,EAAE,GACtC,CACrB,CAAC,EACF,4DAAK,MAAM,EAAE,CAAC,IAAI,CAAC,kBAAkB,IACnC,yEACE,KAAK,EAAE,IAAI,CAAC,cAAc,EAC1B,OAAO,EAAE,IAAI,CAAC,mBAAmB,KAAK,QAAQ,EAC9C,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,GAC7B,CAChB,CACC,EACT,+DAAQ,KAAK,EAAC,WAAW,IACtB,IAAI,CAAC,mBAAmB,KAAK,QAAQ,KACpC,EAAC,QAAQ,QACP,sBACE,oBAAoB,EAAE,KAAK,EAC3B,YAAY,EAAE,CAAC,CAAC;gBACd,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,IAAI,CAAC,iBAAiB,mCACjB,CAAC,CAAC,MAAM,KACX,EAAE,EAAE,QAAQ,GACb,CAAC;gBACF,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;aAC/B,EACD,iBAAiB,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,KAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,IAAI,CAAA,EAC/C,EAAE,EAAE,IAAI,CAAC,EAAE,KAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,EAAE,CAAA,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,GACD,EAClB,WAAK,KAAK,EAAC,YAAY,IACrB,iBACE,OAAO,EAAE;gBACP,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;aAC3C,IAEA,IAAI,CAAC,QAAQ,CACJ,CACR,CACG,CACZ,CACM,CACF,CACM,CACL,CACT,EACP;KACH;;;;;;;;;;;;;","names":["DateTime"],"sources":["src/components/date-dropdown/date-dropdown.scss?tag=ix-date-dropdown&encapsulation=shadow","src/components/date-dropdown/date-dropdown.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/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: inline-block;\n position: relative;\n\n @media (max-width: 48em) {\n .min-width {\n width: min-content;\n }\n }\n\n @media (min-width: 48em) {\n .border-right {\n border-right: var(--theme-x-weak-bdr-2);\n }\n }\n\n .max-height {\n max-height: max-content;\n }\n\n .no-margin {\n margin: 0;\n padding: 0;\n }\n\n .pull-right {\n float: right;\n padding: $tiny-space $default-space;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\n\nexport type DateDropdownOption = {\n id: string;\n label: string;\n from: string;\n to: string;\n};\n\nexport type DateRangeChangeEvent = {\n id: string;\n from: string;\n to: string;\n};\n\n/\n @since 2.1.0\n /\n@Component({\n tag: 'ix-date-dropdown',\n styleUrl: 'date-dropdown.scss',\n shadow: true,\n})\nexport class DateDropdown {\n @Element() hostElement: HTMLIxDateDropdownElement;\n\n /\n Date format string.\n * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n /\n @Prop() format = 'yyyy/LL/dd';\n\n /\n If true a range of dates can be selected.\n /\n @Prop() range = true;\n\n /\n Picker date. If the picker is in range mode this property is the start date.\n * If set to `null` no default start date will be pre-selected.\n \n Format is based on `format`\n /\n @Prop() from: string;\n\n /\n Picker date. If the picker is in range mode this property is the end date.\n * If the picker is not in range mode leave this value `null`\n \n Format is based on `format`\n /\n @Prop() to: string;\n\n /\n The earliest date that can be selected by the date picker.\n * If not set there will be no restriction.\n /\n @Prop() minDate: string;\n\n /\n The latest date that can be selected by the date picker.\n * If not set there will be no restriction.\n /\n @Prop() maxDate: string;\n\n /\n Used to set the initial select date range as well as the button name,\n * if not set or no according date range label is found, nothing will be selected\n /\n @Prop() dateRangeId = 'custom';\n @Watch('dateRangeId')\n @Watch('to')\n @Watch('from')\n onDateRangeIdChange() {\n this.onRangeListSelect(this.dateRangeId);\n this.onDateSelect({\n from: this.currentRangeValue.from,\n to: this.currentRangeValue.to,\n id: this.currentRangeValue.id,\n });\n }\n\n /\n Controls whether the user is allowed to pick custom date ranges in the component.\n * When set to 'true', the user can select a custom date range using the date picker.\n * When set to 'false', only predefined time date ranges are available for selection.\n /\n @Prop() customRangeAllowed = true;\n\n /\n An array of predefined date range options for the date picker.\n * Each option is an object with a label describing the range and a function\n * that returns the start and end dates of the range as a DateRangeOption object.\n \n Example format:\n * {\n * id: 'some unique id',\n * label: 'Name of the range',\n * from: undefined, to: '2023/03/29'\n * },\n * // ... other predefined date range options ...\n /\n @Prop() dateRangeOptions: DateDropdownOption[] = [];\n @Watch('dateRangeOptions')\n onDateRangeOptionsChange() {\n this.initialize();\n this.onDateRangeIdChange();\n }\n\n /\n Text for custom dropdown item. Will be used for translation.\n /\n @Prop({ attribute: 'i18n-custom-item' }) i18nCustomItem = 'Custom...';\n\n /\n Text for the done button. Will be used for translation.\n /\n @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n /\n Text for the done button. Will be used for translation.\n /\n @Prop({ attribute: 'i18n-no-range' }) i18nNoRange = 'No range set';\n\n /* @internal /\n @Prop() today = DateTime.now().toISO();\n\n /\n EventEmitter for date range change events.\n \n This event is emitted when the date range changes within the component.\n * The event payload contains information about the selected date range.\n /\n @Event() private dateRangeChange: EventEmitter<DateRangeChangeEvent>;\n\n @State() private selectedDateRangeId: 'custom' \| (string & {});\n @State() private currentRangeValue: {\n from: string;\n to: string;\n id: string;\n };\n @State() private triggerRef: HTMLElement;\n\n private datePickerTouched = false;\n\n componentWillLoad() {\n this.initialize();\n this.setDateRangeSelection(this.dateRangeId);\n }\n\n /\n Retrieves the currently selected date range from the component.\n * This method returns the selected date range as a `DateChangeEvent` object.\n */\n @Method()\n public async getDateRange(): Promise<DateRangeChangeEvent> {\n return this.currentRangeValue;\n }\n\n private initialize() {\n const isCustomRange =\n this.dateRangeId === 'custom' \|\|\n (!this.dateRangeId && !!this.from && !!this.to);\n\n if (isCustomRange && this.customRangeAllowed) {\n this.selectedDateRangeId = 'custom';\n this.currentRangeValue = {\n id: this.selectedDateRangeId,\n from: this.from,\n to: this.to,\n };\n\n return;\n }\n const isValidConfiguration = !isCustomRange && !this.from;\n if (!isValidConfiguration) {\n console.warn(\n '\"from\" and \"range-date-id\" is provided this is an invalid combination. Using \"custom\".'\n );\n\n this.selectedDateRangeId = 'custom';\n this.currentRangeValue = {\n id: this.selectedDateRangeId,\n from: this.from,\n to: this.to,\n };\n\n return;\n }\n }\n\n private onDateSelect(\n rangeValue: { from: string; to: string; id: string },\n preserveDropdown = true\n ) {\n this.dateRangeChange.emit(rangeValue);\n\n if (preserveDropdown) {\n this.closeDropdown();\n }\n\n this.datePickerTouched = false;\n }\n\n private onRangeListSelect(id: string) {\n if (this.setDateRangeSelection(id)) {\n this.onDateSelect(this.currentRangeValue);\n }\n }\n\n private setDateRangeSelection(id: string) {\n this.selectedDateRangeId = id;\n const option = this.dateRangeOptions.find((range) => range.id === id);\n\n if (option) {\n this.currentRangeValue = option;\n }\n\n return option;\n }\n\n private closeDropdown() {\n this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;\n }\n\n private getButtonLabel() {\n if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {\n let range = this.currentRangeValue.from;\n\n if (this.currentRangeValue.to) {\n range += ` - ${this.currentRangeValue.to}`;\n }\n\n return range;\n }\n\n if (!this.selectedDateRangeId) {\n return this.i18nNoRange;\n }\n\n if (!this.dateRangeOptions \|\| this.dateRangeOptions?.length === 0) {\n return this.i18nNoRange;\n }\n\n const option = this.dateRangeOptions.find(\n (option) => option.id === this.selectedDateRangeId\n );\n\n if (!option) {\n console.error(\n `Cannot find range option with id ${this.selectedDateRangeId}`\n );\n return this.i18nNoRange;\n }\n\n return option.label;\n }\n\n render() {\n return (\n <Host>\n <ix-button\n data-date-dropdown-trigger\n variant=\"primary\"\n icon=\"history\"\n ref={(ref) => (this.triggerRef = ref)}\n class=\"button-width\"\n >\n {this.getButtonLabel()}\n </ix-button>\n <ix-dropdown\n data-date-dropdown\n class=\"min-width max-height\"\n trigger={this.triggerRef}\n close-behavior=\"outside\"\n placement=\"bottom-start\"\n onShowChanged={({ detail: show }) => {\n if (\n !show &&\n this.selectedDateRangeId === 'custom' &&\n this.datePickerTouched\n ) {\n this.onDateSelect(this.currentRangeValue);\n }\n }}\n >\n <ix-layout-grid no-margin=\"true\">\n <ix-row>\n <ix-col\n class={{\n 'no-margin': true,\n 'border-right': this.selectedDateRangeId === 'custom',\n }}\n >\n {this.dateRangeOptions.map((dateRangeOption) => (\n <ix-dropdown-item\n label={dateRangeOption.label}\n onClick={() => this.onRangeListSelect(dateRangeOption.id)}\n checked={this.selectedDateRangeId === dateRangeOption.id}\n ></ix-dropdown-item>\n ))}\n <div hidden={!this.customRangeAllowed}>\n <ix-dropdown-item\n label={this.i18nCustomItem}\n checked={this.selectedDateRangeId === 'custom'}\n onClick={() => this.onRangeListSelect('custom')}\n ></ix-dropdown-item>\n </div>\n </ix-col>\n <ix-col class=\"no-margin\">\n {this.selectedDateRangeId === 'custom' && (\n <Fragment>\n <ix-date-picker\n standaloneAppearance={false}\n onDateChange={(e) => {\n e.stopPropagation();\n this.currentRangeValue = {\n ...e.detail,\n id: 'custom',\n };\n this.datePickerTouched = true;\n }}\n onDateRangeChange={(e) => e.stopPropagation()}\n format={this.format}\n range={this.range}\n from={this.from \|\| this.currentRangeValue?.from}\n to={this.to \|\| this.currentRangeValue?.to}\n minDate={this.minDate}\n maxDate={this.maxDate}\n today={this.today}\n ></ix-date-picker>\n <div class=\"pull-right\">\n <ix-button\n onClick={() => {\n this.onDateSelect(this.currentRangeValue);\n }}\n >\n {this.i18nDone}\n </ix-button>\n </div>\n </Fragment>\n )}\n </ix-col>\n </ix-row>\n </ix-layout-grid>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-date-dropdown.entry.js","mappings":"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","names":["DateTime"],"sources":["src/components/date-dropdown/date-dropdown.scss?tag=ix-date-dropdown&encapsulation=shadow","src/components/date-dropdown/date-dropdown.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/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: inline-block;\n position: relative;\n\n @media (max-width: 48em) {\n .min-width {\n width: min-content;\n }\n }\n\n @media (min-width: 48em) {\n .border-right {\n border-right: var(--theme-x-weak-bdr-2);\n }\n }\n\n ix-button {\n width: 100%;\n }\n\n .max-height {\n max-height: max-content;\n }\n\n .no-margin {\n margin: 0;\n padding: 0;\n }\n\n .pull-right {\n float: right;\n padding: $tiny-space $default-space;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\n\nexport type DateDropdownOption = {\n id: string;\n label: string;\n from: string;\n to: string;\n};\n\nexport type DateRangeChangeEvent = {\n id: string;\n from: string;\n to: string;\n};\n\n/\n @since 2.1.0\n /\n@Component({\n tag: 'ix-date-dropdown',\n styleUrl: 'date-dropdown.scss',\n shadow: true,\n})\nexport class DateDropdown {\n @Element() hostElement: HTMLIxDateDropdownElement;\n\n /\n Date format string.\n * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n /\n @Prop() format = 'yyyy/LL/dd';\n\n /\n If true a range of dates can be selected.\n /\n @Prop() range = true;\n\n /\n Picker date. If the picker is in range mode this property is the start date.\n * If set to `null` no default start date will be pre-selected.\n \n Format is based on `format`\n /\n @Prop() from: string;\n\n /\n Picker date. If the picker is in range mode this property is the end date.\n * If the picker is not in range mode leave this value `null`\n \n Format is based on `format`\n /\n @Prop() to: string;\n\n /\n The earliest date that can be selected by the date picker.\n * If not set there will be no restriction.\n /\n @Prop() minDate: string;\n\n /\n The latest date that can be selected by the date picker.\n * If not set there will be no restriction.\n /\n @Prop() maxDate: string;\n\n /\n Used to set the initial select date range as well as the button name,\n * if not set or no according date range label is found, nothing will be selected\n /\n @Prop() dateRangeId = 'custom';\n @Watch('dateRangeId')\n @Watch('to')\n @Watch('from')\n onDateRangeIdChange() {\n this.onRangeListSelect(this.dateRangeId);\n this.onDateSelect({\n from: this.currentRangeValue.from,\n to: this.currentRangeValue.to,\n id: this.currentRangeValue.id,\n });\n }\n\n /\n Controls whether the user is allowed to pick custom date ranges in the component.\n * When set to 'true', the user can select a custom date range using the date picker.\n * When set to 'false', only predefined time date ranges are available for selection.\n /\n @Prop() customRangeAllowed = true;\n\n /\n An array of predefined date range options for the date picker.\n * Each option is an object with a label describing the range and a function\n * that returns the start and end dates of the range as a DateRangeOption object.\n \n Example format:\n * {\n * id: 'some unique id',\n * label: 'Name of the range',\n * from: undefined, to: '2023/03/29'\n * },\n * // ... other predefined date range options ...\n /\n @Prop() dateRangeOptions: DateDropdownOption[] = [];\n @Watch('dateRangeOptions')\n onDateRangeOptionsChange() {\n this.initialize();\n this.onDateRangeIdChange();\n }\n\n /\n Text for custom dropdown item. Will be used for translation.\n /\n @Prop({ attribute: 'i18n-custom-item' }) i18nCustomItem = 'Custom...';\n\n /\n Text for the done button. Will be used for translation.\n /\n @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n /\n Text for the done button. Will be used for translation.\n /\n @Prop({ attribute: 'i18n-no-range' }) i18nNoRange = 'No range set';\n\n /* @internal /\n @Prop() today = DateTime.now().toISO();\n\n /\n EventEmitter for date range change events.\n \n This event is emitted when the date range changes within the component.\n * The event payload contains information about the selected date range.\n /\n @Event() private dateRangeChange: EventEmitter<DateRangeChangeEvent>;\n\n @State() private selectedDateRangeId: 'custom' \| (string & {});\n @State() private currentRangeValue: {\n from: string;\n to: string;\n id: string;\n };\n @State() private triggerRef: HTMLElement;\n\n private datePickerTouched = false;\n\n componentWillLoad() {\n this.initialize();\n this.setDateRangeSelection(this.dateRangeId);\n }\n\n /\n Retrieves the currently selected date range from the component.\n * This method returns the selected date range as a `DateChangeEvent` object.\n */\n @Method()\n public async getDateRange(): Promise<DateRangeChangeEvent> {\n return this.currentRangeValue;\n }\n\n private initialize() {\n const isCustomRange =\n this.dateRangeId === 'custom' \|\|\n (!this.dateRangeId && !!this.from && !!this.to);\n\n if (isCustomRange && this.customRangeAllowed) {\n this.selectedDateRangeId = 'custom';\n this.currentRangeValue = {\n id: this.selectedDateRangeId,\n from: this.from,\n to: this.to,\n };\n\n return;\n }\n const isValidConfiguration = !isCustomRange && !this.from;\n if (!isValidConfiguration) {\n console.warn(\n '\"from\" and \"range-date-id\" is provided this is an invalid combination. Using \"custom\".'\n );\n\n this.selectedDateRangeId = 'custom';\n this.currentRangeValue = {\n id: this.selectedDateRangeId,\n from: this.from,\n to: this.to,\n };\n\n return;\n }\n }\n\n private onDateSelect(\n rangeValue: { from: string; to: string; id: string },\n preserveDropdown = true\n ) {\n this.dateRangeChange.emit(rangeValue);\n\n if (preserveDropdown) {\n this.closeDropdown();\n }\n\n this.datePickerTouched = false;\n }\n\n private onRangeListSelect(id: string) {\n if (this.setDateRangeSelection(id)) {\n this.onDateSelect(this.currentRangeValue);\n }\n }\n\n private setDateRangeSelection(id: string) {\n this.selectedDateRangeId = id;\n const option = this.dateRangeOptions.find((range) => range.id === id);\n\n if (option) {\n this.currentRangeValue = option;\n }\n\n return option;\n }\n\n private closeDropdown() {\n this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;\n }\n\n private getButtonLabel() {\n if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {\n let range = this.currentRangeValue.from;\n\n if (this.currentRangeValue.to) {\n range += ` - ${this.currentRangeValue.to}`;\n }\n\n return range;\n }\n\n if (!this.selectedDateRangeId) {\n return this.i18nNoRange;\n }\n\n if (!this.dateRangeOptions \|\| this.dateRangeOptions?.length === 0) {\n return this.i18nNoRange;\n }\n\n const option = this.dateRangeOptions.find(\n (option) => option.id === this.selectedDateRangeId\n );\n\n if (!option) {\n console.error(\n `Cannot find range option with id ${this.selectedDateRangeId}`\n );\n return this.i18nNoRange;\n }\n\n return option.label;\n }\n\n render() {\n return (\n <Host>\n <ix-button\n data-date-dropdown-trigger\n variant=\"primary\"\n icon=\"history\"\n ref={(ref) => (this.triggerRef = ref)}\n >\n {this.getButtonLabel()}\n </ix-button>\n <ix-dropdown\n data-date-dropdown\n class=\"min-width max-height\"\n trigger={this.triggerRef}\n close-behavior=\"outside\"\n placement=\"bottom-start\"\n onShowChanged={({ detail: show }) => {\n if (\n !show &&\n this.selectedDateRangeId === 'custom' &&\n this.datePickerTouched\n ) {\n this.onDateSelect(this.currentRangeValue);\n }\n }}\n >\n <ix-layout-grid no-margin=\"true\">\n <ix-row>\n {this.dateRangeOptions?.length > 1 && (\n <ix-col\n class={{\n 'no-margin': true,\n 'border-right': this.selectedDateRangeId === 'custom',\n }}\n >\n {this.dateRangeOptions.map((dateRangeOption) => (\n <ix-dropdown-item\n label={dateRangeOption.label}\n onClick={() => this.onRangeListSelect(dateRangeOption.id)}\n checked={this.selectedDateRangeId === dateRangeOption.id}\n ></ix-dropdown-item>\n ))}\n <div hidden={!this.customRangeAllowed}>\n <ix-dropdown-item\n label={this.i18nCustomItem}\n checked={this.selectedDateRangeId === 'custom'}\n onClick={() => this.onRangeListSelect('custom')}\n ></ix-dropdown-item>\n </div>\n </ix-col>\n )}\n <ix-col class=\"no-margin\">\n {this.selectedDateRangeId === 'custom' && (\n <Fragment>\n <ix-date-picker\n standaloneAppearance={false}\n onDateChange={(e) => {\n e.stopPropagation();\n this.currentRangeValue = {\n ...e.detail,\n id: 'custom',\n };\n this.datePickerTouched = true;\n }}\n onDateRangeChange={(e) => e.stopPropagation()}\n format={this.format}\n range={this.range}\n from={this.from \|\| this.currentRangeValue?.from}\n to={this.to \|\| this.currentRangeValue?.to}\n minDate={this.minDate}\n maxDate={this.maxDate}\n today={this.today}\n ></ix-date-picker>\n <div class=\"pull-right\">\n <ix-button\n onClick={() => {\n this.onDateSelect(this.currentRangeValue);\n }}\n >\n {this.i18nDone}\n </ix-button>\n </div>\n </Fragment>\n )}\n </ix-col>\n </ix-row>\n </ix-layout-grid>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-date-time-card.entry.js CHANGED Viewed

@@ -22,7 +22,7 @@ const DateTimeCard = class {
         };
     }
     render() {
-        return (h(Host, { key: 'be249cc33523ab05fcea91c285a828d42803530c' }, h("div", { key: '3a4389a7bf5e5ec46622ddae68a14d121a1cad97', class: this.cardClasses() }, h("div", { key: '711acb2cd8a3a78046bc800e7c6ead60a0ad1b1f', class: "header" }, h("slot", { key: '72dd5f1b4c27869449729395a2dd9fe73b81d2b8', name: "header" })), h("div", { key: 'cc763fd99e776b0e8fa4b5615d92c51a556e0ee8', class: "separator" }), h("div", { key: '3654550d4f9fa01bbd79d0c8666116ed645ae495', class: "content" }, h("slot", { key: 'b2e03f699d22bedc7a586ec2f1be3bce3497d82f' })))));
+        return (h(Host, { key: 'f8ed1e43427e1723f5015a550c2cc9a110bee2b2' }, h("div", { key: 'f29905676e209d12e851fb8991e60d28cf7153bb', class: this.cardClasses() }, h("div", { key: '4e34b58cb52dddd372fda6713bdd41d612612f96', class: "header" }, h("slot", { key: 'c31d602a45866159181c20a3674cd18c5679052f', name: "header" })), h("div", { key: '5d86be7a1b70d75246bf07cda2898bc3ee768ca5', class: "separator" }), h("div", { key: '3d3e38bff5d56f06e88ef654e6f621ee3ffc8b9c', class: "content" }, h("slot", { key: 'c8a3b2a6ef2f7260ee0a8a16f5ee8c5eda1d9db6' })))));
     }
 };
 DateTimeCard.style = IxDateTimeCardStyle0;

package/dist/esm/ix-datetime-picker.entry.js CHANGED Viewed

@@ -53,7 +53,7 @@ const DatetimePicker = class {
         this.timeChange.emit(time);
     }
     render() {
-        return (h(Host, { key: '7aa5e453963c62a4c168f2897f5408363f5c3d20' }, h("ix-layout-grid", { key: '5f47e5e23adb80a89591a1a2aeaa59531b963f1c', class: "no-padding" }, h("ix-row", { key: '8bd9fc26a2ccfae88142350ca76a0ef203ffaaa9' }, h("ix-col", { key: 'f2dc175c68cfaa2659680ca0c57af20f727aee2b', class: "no-padding" }, h("ix-date-picker", { key: 'a8712aad46e1c4f642ad0d0f1c1da865c1b111b1', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale })), h("ix-col", { key: 'ad944278fd9b15feeec3f3cb87b159c02a9e3ea1', class: "no-padding" }, h("ix-time-picker", { key: 'aea360fe3436838190a32722498b4085a7cc2014', class: "min-width", ref: (ref) => (this.timePickerElement = ref), corners: "right", standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), h("ix-row", { key: 'cdfc9c5611a06d928503e1c97a32eabca8db1c91' }, h("ix-col", { key: 'f1d139a978e450241f14a6907f708404c44f2596' }, h("ix-button", { key: 'd79116b7084cffcde9705908d0ed174fc988f829', class: "btn-select-date btn-md-width", onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone))))));
+        return (h(Host, { key: '83ee67741b982fbf3a6191c04fa3edbbdb6e6f44' }, h("ix-layout-grid", { key: 'f5f2c66badc930b769638f8f087058b51e44aca7', class: "no-padding" }, h("ix-row", { key: '15361bfa7b0cba0688507273601701160016d69b' }, h("ix-col", { key: 'c4d1d8a41b939e7970277d7a8d9a1c68db7bfa91', class: "no-padding" }, h("ix-date-picker", { key: '77bc6717428ef6fd131cd364b15b5e62a79e8f7f', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale })), h("ix-col", { key: '52d25a39e84d6e0bc35bfe2159c368d2611570c3', class: "no-padding" }, h("ix-time-picker", { key: 'c19954e799ec9a0f5afb7df35472e58911ea7209', class: "min-width", ref: (ref) => (this.timePickerElement = ref), corners: "right", standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), h("ix-row", { key: 'cc6b061a09a9e3b8e06d7acd6bfe801dc884cc92' }, h("ix-col", { key: '86d98b8b9d25f0d77707c7104ed3b53efed3fd04' }, h("ix-button", { key: '5e843ec14cc32176420a8304779e7563117af40d', class: "btn-select-date btn-md-width", onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone))))));
     }
 };
 DatetimePicker.style = IxDatetimePickerStyle0;

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

@@ -8,7 +8,7 @@ const Divider = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h(Host, { key: 'a12f752ef0fa741ad16068b425293e9ba39d21c8' });
+        return h(Host, { key: '77aba5256230ceae62d44788f8b3c5e882fe5e80' });
     }
 };
 Divider.style = IxDividerStyle0;

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

@@ -85,7 +85,7 @@ const Drawer = class {
         this.onShowChanged(this.show);
     }
     render() {
-        return (h(Host, { key: '91fc9415b70a8ee79f85dcf40fef3ccb9cbb20c9', class: {
+        return (h(Host, { key: 'e62222323c1b4c58abef1702618873c3856405de', class: {
                 'drawer-container': true,
                 toggle: this.show,
                 'full-height': this.fullHeight,
@@ -94,7 +94,7 @@ const Drawer = class {
                 width: this.width === 'auto' ? this.width : `${this.width}rem`,
                 'min-width': `${this.minWidth}rem`,
                 'max-width': `${this.maxWidth}rem`,
-            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, h("div", { key: 'b773ea537ab6410433b6af3f7d57f96070a8f462', class: "header" }, h("div", { key: 'd032e1d8af587f872f61aaae3630aa0b03a99993', class: "header-content" }, h("slot", { key: '8d1c3b9819ed60666dff64386bd87d60d880bb13', name: "header" })), h("ix-icon-button", { key: 'b73baa2dea5c23cab77fc05e9506faf0424135c6', class: "close-button", icon: 'close', size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), h("div", { key: '8b838c388ca39c900245896b5912ed769b63bae6', class: "content" }, h("slot", { key: '08ba8b51e00558a0063430d32d300e347b09a310' }))));
+            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, h("div", { key: 'add6dc645923e78ea4aab5a5119900ffb77f84e2', class: "header" }, h("div", { key: 'e173f66d20de86d73957e68ba58049d9fd5694f2', class: "header-content" }, h("slot", { key: '8c3fcccd355f8648ef1bd2367c764d3360805ffb', name: "header" })), h("ix-icon-button", { key: '4ca6c7513df414120a6f7f4164cb8cfed84992fe', class: "close-button", icon: 'close', size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), h("div", { key: '95fb535fc3fe56ff7731d00d849fd4d93b61d31a', class: "content" }, h("slot", { key: '44f5d0a2b5d4c876c67c4db047653d63550e5ac2' }))));
     }
     static get watchers() { return {
         "show": ["onShowChanged"]

package/dist/esm/ix-dropdown-button.entry.js CHANGED Viewed

@@ -28,11 +28,11 @@ const DropdownButton = class {
             } }));
     }
     render() {
-        return (h(Host, { key: '8930487c4b37d245f7fb9828c5028136e50ac81b', class: {
+        return (h(Host, { key: '4a18eaa51a9defa9a50aa2d4008176640d94fd5a', class: {
                 disabled: this.disabled,
             }, ref: (ref) => {
                 this.dropdownAnchor = ref;
-            } }, h("div", { key: 'ea5caa3aac82f89ece0f569345f10b8afe995e44', class: "dropdown-button" }, this.label ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, alignment: "start" }, h("div", { class: 'content' }, this.icon ? (h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: 'chevron-down-small', size: "24" })))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { key: '744ebec47c4658921d5a57f0165f6a7c95ed32e8', class: "dropdown", trigger: this.dropdownAnchor, placement: this.placement, closeBehavior: this.closeBehavior }, h("slot", { key: '438133ed750034c6a94cab0921c06cdf74c7b79e' }))));
+            } }, h("div", { key: '2e967b92d073f88609f31d90cafd6b5455930560', class: "dropdown-button" }, this.label ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, alignment: "start" }, h("div", { class: 'content' }, this.icon ? (h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: 'chevron-down-small', size: "24" })))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { key: '1477ef9b47c696f1ab705f0973b6ba20228975b2', class: "dropdown", trigger: this.dropdownAnchor, placement: this.placement, closeBehavior: this.closeBehavior }, h("slot", { key: '137db0e0b45d8e5f370346620782007c3b28f7f7' }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-dropdown-header.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const DropdownHeader = class {
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: '9b48e23d908cf0cc9f47822f9e25adacc878165d' }, h("ix-typography", { key: 'd89842c74ad80c00e696b0ca5d5a02d4eb646c3c', class: 'category-text', variant: 'default-title' }, this.label)));
+        return (h(Host, { key: 'fa3daed3c42026d56472617e8011daf26a6a0143' }, h("ix-typography", { key: 'd5b713244e69d78221498344e435c0fe08c06b26', class: 'category-text', variant: 'default-title' }, this.label)));
     }
 };
 DropdownHeader.style = IxDropdownHeaderStyle0;

package/dist/esm/ix-dropdown-item.entry.js CHANGED Viewed

@@ -31,15 +31,15 @@ const DropdownItem = class {
             this.icon !== undefined);
     }
     render() {
-        return (h(Host, { key: 'd0961e924032ae68a9413214e4d1ab295c938507', class: {
+        return (h(Host, { key: '3882c42ff856b85402ec8fbcd366832993a2d50b', class: {
                 hover: this.hover,
                 'icon-only': this.isIconOnly(),
                 disabled: this.disabled,
                 submenu: this.isSubMenu,
-            }, role: "listitem" }, h("button", { key: '798221fee0673bad5791f7823a0316217890d744', type: "button", tabIndex: 0, class: {
+            }, role: "listitem" }, h("button", { key: '18957e0107f55aed30e6cecfa6bfbe02c456a850', type: "button", tabIndex: 0, class: {
                 'dropdown-item': true,
                 'no-checked-field': this.suppressChecked,
-            }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { class: "checkmark", name: 'single-check', size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, h("div", { key: '590a12e0a50264cb5367a94c23d2641f4adc2b82', class: "dropdown-item-text" }, this.label, h("slot", { key: 'dcbeb64fc42ff9ef4a21e2dbec9eb843e09f658c' })), this.isSubMenu ? (h("ix-icon", { name: 'chevron-right-small', class: 'submenu-icon' })) : null)));
+            }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { class: "checkmark", name: 'single-check', size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, h("div", { key: '94d506721e5e4b776e447bdfc678bce32811081c', class: "dropdown-item-text" }, this.label, h("slot", { key: 'ca6d981217740a41bce4bf024ed1f4c1bed2d915' })), this.isSubMenu ? (h("ix-icon", { name: 'chevron-right-small', class: 'submenu-icon' })) : null)));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-dropdown-quick-actions.entry.js CHANGED Viewed

@@ -8,7 +8,7 @@ const DropdownQuickActions = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '6fc1f482e9e43fd2e70535c7f2bb7786fc59e305' }, h("slot", { key: 'd8a06e975f6498b7735159e09a29e8d715a1ff99' })));
+        return (h(Host, { key: '4276b052d998fa436597a67bc7df4b5f4dac79e7' }, h("slot", { key: 'fe99c816c933c10d45fdb93acfadf23938ffa1ae' })));
     }
 };
 DropdownQuickActions.style = IxDropdownQuickActionsStyle0;

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

@@ -376,7 +376,7 @@ const Dropdown = class {
         this.applyDropdownPosition();
     }
     render() {
-        return (h(Host, { key: '704bc3d7987061a7b9835263d45ee11f753ba71b', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
+        return (h(Host, { key: '238292e4c3d58cb76a31d55701e12768e6dac3e7', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
                 'dropdown-menu': true,
                 show: this.show,
                 overflow: true,
@@ -384,7 +384,7 @@ const Dropdown = class {
                 margin: '0',
                 minWidth: '0px',
                 position: this.positioningStrategy,
-            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: '5e0c4a15d72372573f992b86774d52bfa64c72c8', style: { display: 'contents' } }, this.header && h("div", { class: "dropdown-header" }, this.header), h("slot", { key: 'f182bef9568ab69d49a5fb2d2fbccfdd05041c80' }))));
+            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: 'c7ae3b8f704c5b80742920d9375267f77813330f', style: { display: 'contents' } }, this.header && h("div", { class: "dropdown-header" }, this.header), h("slot", { key: '982197ccab46e37c8651eb6937f93b6441880fe2' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ix-empty-state.entry.js CHANGED Viewed

@@ -14,7 +14,7 @@ const EmptyState = class {
         this.action = undefined;
     }
     render() {
-        return (h(Host, { key: '79259f06912559cfdc060adbd8af1841b6743d5d', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { class: "emptyState__icon" }, h("ix-icon", { name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text" }))), h("div", { key: 'f9665e695a8d12c6ed0c07f66a1a9e46c87ee99e', class: "emptyState__content" }, h("div", { key: '073f23f872bc5c761679e29951824b1b5123991d', class: "content__label" }, h("ix-typography", { key: 'a3dd46861fe229b04905c4bb1be31f549e3d4c3b', variant: this.layout === 'large' ? 'display-large' : 'default' }, this.header), this.subHeader && (h("div", { class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { class: "content__action" }, h("ix-button", { onClick: () => this.actionClick.emit() }, this.action))))));
+        return (h(Host, { key: '05758725d4d8effa0b61ae90189bea0556576bf5', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { class: "emptyState__icon" }, h("ix-icon", { name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text" }))), h("div", { key: '443bdba623c0a05f224a113e27de4fa281c27563', class: "emptyState__content" }, h("div", { key: 'df17e2f2ca3c227bde9af9bbfbd25c8593b93472', class: "content__label" }, h("ix-typography", { key: '9a9d096c9676dd62d8ccf78f67e05f98d4abd761', variant: this.layout === 'large' ? 'display-large' : 'default' }, this.header), this.subHeader && (h("div", { class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { class: "content__action" }, h("ix-button", { onClick: () => this.actionClick.emit() }, this.action))))));
     }
 };
 EmptyState.style = IxEmptyStateStyle0;

package/dist/esm/ix-event-list-item.entry.js CHANGED Viewed

@@ -26,16 +26,16 @@ const EventListItem = class {
                 ? `var(${this.color})`
                 : `var(--theme-${this.color})`;
         }
-        return (h(Host, { key: 'ed92a7e8394856c074b51ebed8189e99fe1e29a2', class: {
+        return (h(Host, { key: '3e25c77fbee09f5cbd02c5ad5e449ea4eb63ddbb', class: {
                 disabled: this.disabled,
-            } }, h("div", { key: 'b4a23c2bc24a9589b019c5f27db2c66e3becf6ef', class: {
+            } }, h("div", { key: 'ef165d8f55102f0c3f308782389e5c2cccae782e', class: {
                 'event-list-item': true,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, h("div", { key: '1d04c7f035c233c2d9076626cc5a117404d6a135', class: `indicator ${!((_c = this.itemColor) !== null && _c !== void 0 ? _c : this.color) ? 'indicator-empty' : ''}`, style: {
+            } }, h("div", { key: '5a9f0d1af17820bab17fb8d1cefffdcd0ee1b02a', class: `indicator ${!((_c = this.itemColor) !== null && _c !== void 0 ? _c : this.color) ? 'indicator-empty' : ''}`, style: {
                 'background-color': ((_d = this.itemColor) !== null && _d !== void 0 ? _d : this.color) ? color : 'inherit',
                 opacity: `${this.disabled ? 0.4 : 1}`,
-            } }), h("div", { key: '930d5297013c14fff5494f70b5679fd63240ccb8', class: "event-list-item-container" }, h("div", { key: 'bf5e074f3beb0ac61df18aa15efd62baa8320aba', class: "event-content" }, h("slot", { key: 'ce0730f3c2cbb9d89a36abe041c6a3e5780434a1' })), this.chevron && (h("ix-icon", { name: 'chevron-right', size: "16", class: "chevron-icon" }))))));
+            } }), h("div", { key: '0bc498d396328ac8e7a4543339d1ff6c362fd19e', class: "event-list-item-container" }, h("div", { key: '6f57320d0c1c43222527a455bdea9193b53524fb', class: "event-content" }, h("slot", { key: '15cee1c7afade0bb0fe0112bfba54c7fe70d8e1e' })), this.chevron && (h("ix-icon", { name: 'chevron-right', size: "16", class: "chevron-icon" }))))));
     }
 };
 EventListItem.style = IxEventListItemStyle0;

package/dist/esm/ix-event-list.entry.js CHANGED Viewed

@@ -101,11 +101,11 @@ const EventList = class {
         });
     }
     render() {
-        return (h(Host, { key: '6bc5d62a320af1a618b976d7a745dd1da08d5e0b', class: {
+        return (h(Host, { key: '89be0fbb595cea7d39e50feedb367108c2a206bb', class: {
                 'item-size-s': this.itemHeight === 'S',
                 'item-size-l': this.itemHeight === 'L',
                 compact: this.compact,
-            } }, h("ul", { key: 'ae28f0ca948651a677b6eff296043d9fe68f84f6' }, h("slot", { key: '3e5aaa7d87e8c72a2e83a8b086060ec86ab4fa30' }))));
+            } }, h("ul", { key: '1e14d4602a221795448e7216c0952b29af06c522' }, h("slot", { key: '5c55793caf21fb2f76f7019b7813a75b9746b180' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ix-expanding-search.entry.js CHANGED Viewed

@@ -50,20 +50,20 @@ const ExpandingSearch = class {
         this.valueChange.emit(this.value);
     }
     render() {
-        return (h(Host, { key: 'd354ef216d5dc5f80ce2a7a4a7ab9130afe94c0e', class: {
+        return (h(Host, { key: '4c4ad028a6843aa48f111eab03289f05093ff0c4', class: {
                 expanded: this.expanded,
                 'right-position': this.expanded,
                 fullWidth: this.fullWidth,
-            } }, h("ix-icon-button", { key: '960286296bba24fa10228927d446f23c542e3404', size: this.expanded ? '16' : '24', icon: this.icon, ghost: true, variant: "primary", "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
+            } }, h("ix-icon-button", { key: 'c919f410191cb51957c1d00938cfde61193ebdd5', size: this.expanded ? '16' : '24', icon: this.icon, ghost: true, variant: "primary", "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
                 'btn-search': true,
                 'btn-search--expanded': this.expanded,
-            } }), h("div", { key: '08c1c9975d18d21a1a2f0331ac72fd44e5ed1fb2', class: {
+            } }), h("div", { key: 'e3c42bb3f8940113d4da24d8d235240fce59fa91', class: {
                 expanded: this.expanded,
                 fullWidth: this.fullWidth,
                 collapsed: !this.expanded,
                 'disable-pointer': !this.expanded,
                 'input-container': true,
-            }, "data-testid": "input-wrapper" }, h("input", { key: 'f2bafc86d72957c20343fbde76664c70ad1a4dc6', class: {
+            }, "data-testid": "input-wrapper" }, h("input", { key: 'ec9dabd6711e59f9675b3c961abdae17ea0da703', class: {
                 'form-control': true,
                 input: this.expanded,
                 'disable-pointer': !this.expanded,

package/dist/esm/ix-filter-chip_2.entry.js CHANGED Viewed

@@ -16,7 +16,7 @@ const FilterChip = class {
         this.closeClick.emit();
     }
     render() {
-        return (h(Host, { key: '828da5a62ec5accc6b74cff38e4bfcf51de94c98', class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, h("div", { key: '8aba552ef0dee8349ab558d77db21a2c22f76f8f', class: "slot-container" }, h("slot", { key: 'a81343d2a06faf7bd6c5ca2522d40af99ee589ca' })), !this.disabled && !this.readonly ? (h("ix-icon-button", { ghost: true, oval: true, icon: 'close-small', size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
+        return (h(Host, { key: '10df51e34656ed3b7b18e9f2a07a59c18784a3d1', class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, h("div", { key: '5a94912e2c22cbddb984b28ba0126f31c1e20165', class: "slot-container" }, h("slot", { key: '0fdc94729908b9c3a040667318dcc18d300e4176' })), !this.disabled && !this.readonly ? (h("ix-icon-button", { ghost: true, oval: true, icon: 'close-small', size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
     }
     get el() { return getElement(this); }
 };
@@ -39,7 +39,7 @@ class IxSelectItemLabelChangeEvent extends CustomEvent {
     }
 }
-const selectItemCss = ":host{display:block;position:relative}:host>ix-dropdown-item{width:100%}:host .select-item-checked{background-color:var(--theme-select-list-item--background--selected);--ix-dropdown-item-checked-color:var(--theme-color-std-text)}:host(.d-none){display:none}";
+const selectItemCss = ":host{display:block;position:relative}:host>ix-dropdown-item{width:100%}:host ix-dropdown-item{color:var(--theme-color-std-text)}:host .select-item-checked{background-color:var(--theme-select-list-item--background--selected);--ix-dropdown-item-checked-color:var(--theme-color-std-text)}:host(.d-none){display:none}";
 const IxSelectItemStyle0 = selectItemCss;
 const SelectItem = class {
@@ -72,7 +72,7 @@ const SelectItem = class {
         }));
     }
     render() {
-        return (h(Host, { key: 'c56aa1ee5e174f9de7905bcaef381e0a8fd212a2' }, h("ix-dropdown-item", { key: '00ec7a1e52a6b17cf94ce702239fef06df0cb936', class: {
+        return (h(Host, { key: '3d43f9c4cc86b5820ebe0fe15c3ccd2a6a4f0f95' }, h("ix-dropdown-item", { key: 'a169c7bf3533f5203ad557b6ef52edd6ddf9c547', class: {
                 'select-item-checked': this.selected,
             }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
     }

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

	@@ -1 +1 @@
1	- {"file":"ix-filter-chip.ix-select-item.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,8qEAA8qE,CAAC;AACrsE,2BAAe,aAAa;;MCuBf,UAAU;;;;wBAMF,KAAK;wBAML,KAAK;;IAOhB,YAAY,CAAC,KAAY;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAC3D,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,IAE1B,4DAAK,KAAK,EAAC,gBAAgB,IACzB,8DAAa,CACT,EACL,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAC/B,sBACE,KAAK,QACL,IAAI,QACJ,IAAI,EAAE,aAAa,EACnB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACpB,IAChB,IAAI,CACH,EACP;KACH;;;;;ACxEH;;;;;;;;MAQa,4BAA6B,SAAQ,WAGhD;IACA,YAAY,MAA8C;QACxD,KAAK,CAAC,4BAA4B,EAAE;YAClC,OAAO,EAAE,IAAI;YACb,MAAM;SACP,CAAC,CAAC;KACJ;;;ACjBH,MAAM,aAAa,GAAG,~~mQAAmQ~~,CAAC;~~AAC1R~~,2BAAe,aAAa;;MC0Bf,UAAU;;;;;;wBAgBF,KAAK;qBAKR,KAAK;;;;;;IAYrB,MAAM,WAAW,CAAC,KAA8C;QAC9D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;QACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;QAEzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACjC;IAED,kBAAkB;QAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,MAAM,KAAK,CAAC,6CAA6C,CAAC,CAAC;SAC5D;KACF;IAGD,WAAW,CAAC,QAAgB,EAAE,QAAgB;QAC5C,IAAI,CAAC,WAAW,CAAC,aAAa,CAC5B,IAAI,4BAA4B,CAAC;YAC/B,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACnB,CAAC,CACH,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,yEACE,KAAK,EAAE;gBACL,qBAAqB,EAAE,IAAI,CAAC,QAAQ;aACrC,EACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAC3C,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GACrB,CACf,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/filter-chip/filter-chip.scss?tag=ix-filter-chip&encapsulation=shadow","src/components/filter-chip/filter-chip.tsx","src/components/select-item/events.ts","src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=shadow","src/components/select-item/select-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/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n height: $large-space;\n padding-left: $small-space;\n border: var(--theme-focus--border-thickness) solid\n var(--theme-chip-primary-outline--border-color);\n border-radius: $x-large-space;\n background-color: var(--theme-color-ghost);\n color: var(--theme-chip-primary-outline--color);\n\n .slot-container {\n @include ellipsis;\n\n :host-context(.disabled) {\n background-color: var(--theme-color-ghost);\n border-color: var(--theme-color-component-4);\n color: var(--theme-color-weak-text);\n }\n }\n\n ix-icon-button {\n height: $large-space;\n margin-left: 0.25rem;\n\n @include focus-visible {\n outline: none;\n }\n }\n}\n\n:host(.disabled) {\n border: var(--theme-focus--border-thickness) solid\n var(--theme-color-component-4);\n color: var(--theme-color-weak-text);\n padding-right: $small-space;\n\n cursor: default;\n}\n\n:host(.readonly) {\n padding-right: $small-space;\n}\n\n@include host-hover {\n background-color: var(--theme-color-ghost-primary--hover);\n border-color: var(--theme-chip-primary-outline--border-color--hover);\n color: var(--theme-chip-primary-outline--color--hover);\n}\n\n@include host-active {\n background-color: var(--theme-color-ghost-primary--active);\n border-color: var(--theme-chip-primary-outline--border-color--active);\n color: var(--theme-chip-primary-outline--color--active);\n}\n\n@include host-focus-visible {\n outline: var(--theme-color-focus-bdr) solid\n var(--theme-focus--border-thickness);\n outline-offset: -0.125rem;\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 Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-filter-chip',\n styleUrl: 'filter-chip.scss',\n shadow: true,\n})\nexport class FilterChip {\n @Element() el: HTMLIxFilterChipElement;\n\n /\n If true the filter chip will be in disabled state\n /\n @Prop() disabled = false;\n\n /\n If true the filter chip will be in readonly mode\n * @since 2.0.0\n /\n @Prop() readonly = false;\n\n /\n Close clicked\n /\n @Event() closeClick: EventEmitter<void>;\n\n private onCloseClick(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n this.closeClick.emit();\n }\n\n render() {\n return (\n <Host\n class={{ disabled: this.disabled, readonly: this.readonly }}\n title={this.el.textContent}\n >\n <div class=\"slot-container\">\n <slot></slot>\n </div>\n {!this.disabled && !this.readonly ? (\n <ix-icon-button\n ghost\n oval\n icon={'close-small'}\n size=\"16\"\n tabindex={this.disabled ? -1 : 0}\n variant=\"primary\"\n disabled={this.disabled}\n onClick={(e) => this.onCloseClick(e)}\n ></ix-icon-button>\n ) : null}\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 /\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n oldValue: string;\n newValue: string;\n}> {\n constructor(detail: { oldValue: string; newValue: string }) {\n super('ix-select-item:labelChange', {\n bubbles: true,\n detail,\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\n:host {\n display: block;\n position: relative;\n\n > ix-dropdown-item {\n width: 100%;\n }\n\n .select-item-checked {\n background-color: var(--theme-select-list-item--background--selected);\n --ix-dropdown-item-checked-color: var(--theme-color-std-text);\n }\n}\n\n:host(.d-none) {\n display: none;\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 Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from './events';\n\n@Component({\n tag: 'ix-select-item',\n styleUrl: 'select-item.scss',\n shadow: true,\n})\nexport class SelectItem {\n @Element() hostElement: HTMLIxSelectItemElement;\n\n /\n Displayed name of the item\n /\n @Prop({ reflect: true }) label: string;\n\n /\n Item value\n /\n @Prop({ reflect: true }) value!: any;\n\n /\n Whether the item is selected.\n /\n @Prop() selected = false;\n\n /\n @internal\n /\n @Prop() hover = false;\n\n /\n Item clicked\n /\n @Event() itemClick: EventEmitter<string>;\n\n /\n @internal\n * @param event\n */\n @Method()\n async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n event?.preventDefault();\n event?.stopPropagation();\n\n this.itemClick.emit(this.value);\n }\n\n componentDidRender() {\n if (!this.value) {\n throw Error('ix-select-item must have a `value` property');\n }\n }\n\n @Watch('label')\n labelChange(newValue: string, oldValue: string) {\n this.hostElement.dispatchEvent(\n new IxSelectItemLabelChangeEvent({\n newValue: newValue,\n oldValue: oldValue,\n })\n );\n }\n\n render() {\n return (\n <Host>\n <ix-dropdown-item\n class={{\n 'select-item-checked': this.selected,\n }}\n checked={this.selected}\n label={this.label ? this.label : this.value}\n onItemClick={(e) => this.onItemClick(e)}\n ></ix-dropdown-item>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-filter-chip.ix-select-item.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,8qEAA8qE,CAAC;AACrsE,2BAAe,aAAa;;MCuBf,UAAU;;;;wBAMF,KAAK;wBAML,KAAK;;IAOhB,YAAY,CAAC,KAAY;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAC3D,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,IAE1B,4DAAK,KAAK,EAAC,gBAAgB,IACzB,8DAAa,CACT,EACL,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAC/B,sBACE,KAAK,QACL,IAAI,QACJ,IAAI,EAAE,aAAa,EACnB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACpB,IAChB,IAAI,CACH,EACP;KACH;;;;;ACxEH;;;;;;;;MAQa,4BAA6B,SAAQ,WAGhD;IACA,YAAY,MAA8C;QACxD,KAAK,CAAC,4BAA4B,EAAE;YAClC,OAAO,EAAE,IAAI;YACb,MAAM;SACP,CAAC,CAAC;KACJ;;;ACjBH,MAAM,aAAa,GAAG,4TAA4T,CAAC;AACnV,2BAAe,aAAa;;MC0Bf,UAAU;;;;;;wBAgBF,KAAK;qBAKR,KAAK;;;;;;IAYrB,MAAM,WAAW,CAAC,KAA8C;QAC9D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;QACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;QAEzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACjC;IAED,kBAAkB;QAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,MAAM,KAAK,CAAC,6CAA6C,CAAC,CAAC;SAC5D;KACF;IAGD,WAAW,CAAC,QAAgB,EAAE,QAAgB;QAC5C,IAAI,CAAC,WAAW,CAAC,aAAa,CAC5B,IAAI,4BAA4B,CAAC;YAC/B,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACnB,CAAC,CACH,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,yEACE,KAAK,EAAE;gBACL,qBAAqB,EAAE,IAAI,CAAC,QAAQ;aACrC,EACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAC3C,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GACrB,CACf,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/filter-chip/filter-chip.scss?tag=ix-filter-chip&encapsulation=shadow","src/components/filter-chip/filter-chip.tsx","src/components/select-item/events.ts","src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=shadow","src/components/select-item/select-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/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n height: $large-space;\n padding-left: $small-space;\n border: var(--theme-focus--border-thickness) solid\n var(--theme-chip-primary-outline--border-color);\n border-radius: $x-large-space;\n background-color: var(--theme-color-ghost);\n color: var(--theme-chip-primary-outline--color);\n\n .slot-container {\n @include ellipsis;\n\n :host-context(.disabled) {\n background-color: var(--theme-color-ghost);\n border-color: var(--theme-color-component-4);\n color: var(--theme-color-weak-text);\n }\n }\n\n ix-icon-button {\n height: $large-space;\n margin-left: 0.25rem;\n\n @include focus-visible {\n outline: none;\n }\n }\n}\n\n:host(.disabled) {\n border: var(--theme-focus--border-thickness) solid\n var(--theme-color-component-4);\n color: var(--theme-color-weak-text);\n padding-right: $small-space;\n\n cursor: default;\n}\n\n:host(.readonly) {\n padding-right: $small-space;\n}\n\n@include host-hover {\n background-color: var(--theme-color-ghost-primary--hover);\n border-color: var(--theme-chip-primary-outline--border-color--hover);\n color: var(--theme-chip-primary-outline--color--hover);\n}\n\n@include host-active {\n background-color: var(--theme-color-ghost-primary--active);\n border-color: var(--theme-chip-primary-outline--border-color--active);\n color: var(--theme-chip-primary-outline--color--active);\n}\n\n@include host-focus-visible {\n outline: var(--theme-color-focus-bdr) solid\n var(--theme-focus--border-thickness);\n outline-offset: -0.125rem;\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 Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-filter-chip',\n styleUrl: 'filter-chip.scss',\n shadow: true,\n})\nexport class FilterChip {\n @Element() el: HTMLIxFilterChipElement;\n\n /\n If true the filter chip will be in disabled state\n /\n @Prop() disabled = false;\n\n /\n If true the filter chip will be in readonly mode\n * @since 2.0.0\n /\n @Prop() readonly = false;\n\n /\n Close clicked\n /\n @Event() closeClick: EventEmitter<void>;\n\n private onCloseClick(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n this.closeClick.emit();\n }\n\n render() {\n return (\n <Host\n class={{ disabled: this.disabled, readonly: this.readonly }}\n title={this.el.textContent}\n >\n <div class=\"slot-container\">\n <slot></slot>\n </div>\n {!this.disabled && !this.readonly ? (\n <ix-icon-button\n ghost\n oval\n icon={'close-small'}\n size=\"16\"\n tabindex={this.disabled ? -1 : 0}\n variant=\"primary\"\n disabled={this.disabled}\n onClick={(e) => this.onCloseClick(e)}\n ></ix-icon-button>\n ) : null}\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 /\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n oldValue: string;\n newValue: string;\n}> {\n constructor(detail: { oldValue: string; newValue: string }) {\n super('ix-select-item:labelChange', {\n bubbles: true,\n detail,\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\n:host {\n display: block;\n position: relative;\n\n > ix-dropdown-item {\n width: 100%;\n }\n\n ix-dropdown-item {\n color: var(--theme-color-std-text);\n }\n\n .select-item-checked {\n background-color: var(--theme-select-list-item--background--selected);\n --ix-dropdown-item-checked-color: var(--theme-color-std-text);\n }\n}\n\n:host(.d-none) {\n display: none;\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 Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from './events';\n\n@Component({\n tag: 'ix-select-item',\n styleUrl: 'select-item.scss',\n shadow: true,\n})\nexport class SelectItem {\n @Element() hostElement: HTMLIxSelectItemElement;\n\n /\n Displayed name of the item\n /\n @Prop({ reflect: true }) label: string;\n\n /\n Item value\n /\n @Prop({ reflect: true }) value!: any;\n\n /\n Whether the item is selected.\n /\n @Prop() selected = false;\n\n /\n @internal\n /\n @Prop() hover = false;\n\n /\n Item clicked\n /\n @Event() itemClick: EventEmitter<string>;\n\n /\n @internal\n * @param event\n */\n @Method()\n async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n event?.preventDefault();\n event?.stopPropagation();\n\n this.itemClick.emit(this.value);\n }\n\n componentDidRender() {\n if (!this.value) {\n throw Error('ix-select-item must have a `value` property');\n }\n }\n\n @Watch('label')\n labelChange(newValue: string, oldValue: string) {\n this.hostElement.dispatchEvent(\n new IxSelectItemLabelChangeEvent({\n newValue: newValue,\n oldValue: oldValue,\n })\n );\n }\n\n render() {\n return (\n <Host>\n <ix-dropdown-item\n class={{\n 'select-item-checked': this.selected,\n }}\n checked={this.selected}\n label={this.label ? this.label : this.value}\n onItemClick={(e) => this.onItemClick(e)}\n ></ix-dropdown-item>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-flip-tile-content.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const FlipTileContent = class {
         this.contentVisible = false;
     }
     render() {
-        return h(Host, { key: '861c12c524efa42bdcf52922898ceb4fd367ffb0' }, this.contentVisible ? h("slot", null) : null);
+        return h(Host, { key: 'e92abcbb8b1cfdeb739ee4933f6ed66a6c2a7dc5' }, this.contentVisible ? h("slot", null) : null);
     }
 };
 FlipTileContent.style = IxFlipTileContentStyle0;

package/dist/esm/ix-flip-tile.entry.js CHANGED Viewed

@@ -56,26 +56,26 @@ const FlipTile = class {
         }, 2 * this.ANIMATION_DURATION);
     }
     render() {
-        return (h(Host, { key: 'ce09b1e9ed6bed31afff8feb5331bae2fd9c4206', style: {
+        return (h(Host, { key: 'f48c8fa439a5b38b06fbda02e4185aa4195dcba5', style: {
                 height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-            } }, h("div", { key: '7b05701a4d284b7bf5df7506d05740ceeeee7721', class: {
+            } }, h("div", { key: 'fc676886cdf565c7cc121640b37c579eb1ea2f64', class: {
                 'flip-tile-container': true,
                 info: this.state === FlipTileState.Info,
                 warning: this.state === FlipTileState.Warning,
                 alarm: this.state === FlipTileState.Alarm,
                 primary: this.state === FlipTileState.Primary,
                 'flip-animation-active': this.isFlipAnimationActive,
-            } }, h("div", { key: 'ce614d5f1fc065d74b6918cfa3f4f3299700ac4b', class: "flip-tile-header" }, h("div", { key: '0c21600adb7f402fe9930813148f924e87143bfe', class: "header-slot-container text-l-title" }, h("slot", { key: '7eca17dff980859c83891d7f2b90192e21dc25ec', name: "header" })), h("ix-icon-button", { key: '8940db181c5db54ccba409fd42d57f08a7dd665b', icon: 'eye', variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { key: 'c449e4aabde02243da7b5ab6b68ebd128708b929', class: "content-container" }, h("slot", { key: '7931ffd8b5428c865f5da4481d6641addd11928d' })), h("div", { key: '71061185c12c66f664b05775cf1c204bbfd273dc', class: {
+            } }, h("div", { key: '036a5f9b336796232c649a0c1718601ccd5c46b5', class: "flip-tile-header" }, h("div", { key: '3eb347f451cf27f614f855eee99f8562fc4aa785', class: "header-slot-container text-l-title" }, h("slot", { key: '563785f622191f0692f3790f3a908125e30e7276', name: "header" })), h("ix-icon-button", { key: '9a52873d2890f187d3a2c940688bbd000e676233', icon: 'eye', variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { key: '0efc4537aa97d3b79459141678dc180a140bd658', class: "content-container" }, h("slot", { key: '1c7035e6e29731a2f192a37f1d86985c3c219220' })), h("div", { key: '2d1f20e35490d7f87b1d70cb9783268c5f1dc270', class: {
                 footer: true,
                 'contrast-light': this.state === FlipTileState.Warning,
                 'contrast-dark': this.state === FlipTileState.Info ||
                     this.state === FlipTileState.Alarm,
-            } }, h("slot", { key: 'b4ce29eae8a575c65a0d4fbb323f52ef6edff62d', name: "footer" })))));
+            } }, h("slot", { key: '074e8bcae63f134dab5623df0682c754e3212159', name: "footer" })))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-form-field.entry.js CHANGED Viewed

@@ -13,7 +13,7 @@ const FormField = class {
     }
     componentWillLoad() { }
     render() {
-        return (h(Host, { key: '6b94db9e2ce60a80ccf1f64463fabcf6c432ad70' }, this.label ? (h("label", { htmlFor: this.inputElement.id }, this.label)) : null, h("slot", { key: '7dd324c00fa1fddd947739ec7f4e3a77a10ceaf8' })));
+        return (h(Host, { key: '84f5465600ed945caa31926c700957a4e1b7e43e' }, this.label ? (h("label", { htmlFor: this.inputElement.id }, this.label)) : null, h("slot", { key: 'c57485ac6285e411275e9e7fafeb6aa3b3e96ee3' })));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-group-context-menu_2.entry.js CHANGED Viewed

@@ -34,7 +34,7 @@ const GroupContextMenu = class {
         this.configureDropdown(dropdownElement, triggerElement);
     }
     render() {
-        return (h(Host, { key: '7b561df4adbe4906b1f4dbc4c50fab9788ec30c9' }, h("ix-icon-button", { key: '602b724690fb58e3261710002ef95fff2ef28c25', class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: 'context-menu' }), h("slot", { key: '0d42add312838be530623029430bc1007ba08a5a', onSlotchange: () => this.onSlotChange() })));
+        return (h(Host, { key: 'f709297153c95aae9ae99750d6eef9bb93b6e93b' }, h("ix-icon-button", { key: 'da299782cd2d0fbf3da4ffebedbd69f3a5f24bf9', class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: 'context-menu' }), h("slot", { key: '8557ba5e78f8098a9defdf3f966e83046522c2ae', onSlotchange: () => this.onSlotChange() })));
     }
     get hostElement() { return getElement(this); }
 };
@@ -62,10 +62,10 @@ const GroupItem = class {
         this.selectedChanged.emit(this.hostElement);
     }
     render() {
-        return (h(Host, { key: '7cfbff33c26c7dbd32d0d3616b115bf876026beb', class: {
+        return (h(Host, { key: '510249c40eb513c0cad7ad186f94311e86b99c1c', class: {
                 selected: this.selected && !this.suppressSelection,
                 'suppress-selection': this.suppressSelection,
-            } }, h("button", { key: 'e6c9e6094dd24a417f49f18aceb32b6504f83f6b', tabindex: this.focusable ? 0 : -1 }, h("div", { key: '9c736883c42fc5d39f36f9fbb6c39d01624ba8ed', 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: '770f048023b4ecca5302d7d11162ed4670e8db16' }))));
+            } }, h("button", { key: '58314b961969fc828b490a251eb3fc991b332356', tabindex: this.focusable ? 0 : -1 }, h("div", { key: '3b643550562e7368c87e4b6443a51902f63da7d5', 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: '1314f12170969fd85675165af10b1bff1048f8a5' }))));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -100,16 +100,16 @@ const Group = class {
         }
     }
     render() {
-        return (h(Host, { key: 'bda6803545577fefae47c47adbec8a9386096713' }, h("div", { key: '767084cb393dfd58a2f4af2a66167c4a8b29c942', class: {
+        return (h(Host, { key: '50658e58108e551e704d40f5658e8bf405908841' }, h("div", { key: '7c6dd6d17182f417b7b8845a1caebfc42b2a4ae3', class: {
                 'group-header': true,
                 expand: !this.collapsed,
                 selected: this.selected,
-            }, tabindex: "0" }, h("div", { key: 'a4ab69fe6407477a4b47ec615e592bd8725a4a7c', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '230227a102bd5397b4b54f65a517ad03e8affb71', class: {
+            }, tabindex: "0" }, h("div", { key: '82064c34500593f4dddc2f5766466e48239b6558', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '551ad7dcd5b93652012ca16f8e6df6a029e9de3e', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), h("div", { key: '795295a972e0df5e77ad71f91d1b6d9c6290335c', class: "btn-expand-header" }, h("ix-icon", { key: 'f1e0de9ab7ad78eaa769545964d28e3dd48f3d5d', class: {
+            } }), h("div", { key: '551174d9914334ad390798ae0483237dedebcd73', class: "btn-expand-header" }, h("ix-icon", { key: '0b86cb98fcb9022a77f855ba34166012a2693a4a', class: {
                 hidden: this.slotSize === 0,
-            }, name: this.collapsed ? 'chevron-right-small' : 'chevron-down-small', onClick: (e) => this.onExpandClick(e) })), h("div", { key: 'e067c4232cfd54b8071f4e713d25b59f7b4b8571', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: 'f4d0abe144cc870db4393aa5c06bc455a8213e26', name: "header" }))), h("ix-group-context-menu", { key: 'c53d7dc2d6f8edb497f8d03484fee968c7e92539' }, h("slot", { key: '3b145e25ce63ae7396b1d4ecff254345b664ddca', name: "dropdown" }))), h("div", { key: 'b3e1900cf5a41383899f7ff97583898070be7ed7', class: {
+            }, name: this.collapsed ? 'chevron-right-small' : 'chevron-down-small', onClick: (e) => this.onExpandClick(e) })), h("div", { key: '39717ec88f2e53e9a9f4f48e2e7245637ec00653', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: '2b33b0c9c50099f7d904ed1bf8787acd888ad24d', name: "header" }))), h("ix-group-context-menu", { key: 'cd1268faa06b30f4292cbf988c041da0f0738e8d' }, h("slot", { key: '6152c5bb0e8831ccba53067d4aac1350027e208b', name: "dropdown" }))), h("div", { key: '7682ad50798d4839c71e79d88761cda57cf06801', class: {
                 'group-content': true,
             } }, !this.collapsed ? (h(Fragment, null, h("slot", null), h("ix-group-item", { suppressSelection: true, focusable: false, class: {
                 footer: true,

package/dist/esm/ix-icon-button_2.entry.js CHANGED Viewed

@@ -67,7 +67,7 @@ const IconButton = class {
             type: this.type,
             extraClasses: this.getIconSizeClass(),
         };
-        return (h(Host, { key: '7da24896eae7dce5de64057e70c6d996681d60b7', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '067f21e0afca8fb01ea374d60fe51560ec203228' }, baseButtonProps))));
+        return (h(Host, { key: '2990b79a4d4b413e844a3c2ab4b0a4604464eeeb', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: 'a2983c635bf15e0d7a866d17309be343d78e9aa6' }, baseButtonProps))));
     }
     get hostElement() { return getElement(this); }
 };
@@ -84,7 +84,7 @@ const Spinner = class {
         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/dist/esm/ix-icon-toggle-button.entry.js CHANGED Viewed

@@ -69,7 +69,7 @@ const IconToggleButton = class {
             extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
         };
         console.log(baseButtonProps, this.disabled, this.loading);
-        return (h(Host, { key: '0c195dca24a6e0ec78e2165ffa5c8d7c89484935', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: 'd97b5d763eaee5f22ca8752480e441fc6ae9a444' }, baseButtonProps))));
+        return (h(Host, { key: '86f8d6e28705fe03d3a918e8452f62b18fc1ee01', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '5e4379a3bbb5fe48603b520a268d51b9703540f8' }, baseButtonProps))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ix-input-group.entry.js CHANGED Viewed

@@ -115,7 +115,7 @@ const InputGroup = class {
         return width;
     }
     render() {
-        return (h(Host, { key: 'e6da076846905dfc765c61e7013f5d3661a32845' }, h("div", { key: '74b8fdf8c0dec9b87fc687036ffb2b3c9856c8c1', class: "group group-start" }, h("slot", { key: 'e807551ee9bf366867bb5c3177759155cbb27c84', name: "input-start" })), h("slot", { key: '9072e4cfd9bb3beeff731b1ce67c02a32ed51f7b' }), h("div", { key: '84484ed6357e0aa40515480d409f5fcbf59fa1f8', class: "group group-end" }, h("slot", { key: '34d4fcbf02cf62b1922e20d403d1a52a145f1cd9', name: "input-end" }))));
+        return (h(Host, { key: '6c305a387eab52c23cff873efb217835cb6552fa' }, h("div", { key: 'db0c738d7a46099408b419a27bc00b8417d3c365', class: "group group-start" }, h("slot", { key: '63c34ce0364cb706b008d50ccf0f56e6fd79dd98', name: "input-start" })), h("slot", { key: '1aac71bae49371f2974dac8f2e9b88df12fd57cb' }), h("div", { key: '552f38ecce4f5db61b108f3a1f8badc52fe546ea', class: "group group-end" }, h("slot", { key: 'e4074cd35b74ec82b7413f11e2c21a8896def99e', name: "input-end" }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-key-value-list.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const KeyValueList = class {
         this.striped = undefined;
     }
     render() {
-        return (h(Host, { key: '46642ccf687b608a8db31936f492e56c6e360cb7', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '9888ad2f28136d0f354e1d14087fbcdd4d65c946' })));
+        return (h(Host, { key: '8d21b4ebf885e1ca21fddb7c6dc94b7d46940f95', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", { key: '782c4a007ea866740087f022bf7c6661aa8eea5a' })));
     }
 };
 KeyValueList.style = IxKeyValueListStyle0;