npm - @siemens/ix - Versions diffs - 2.3.0 → 2.4.1 - Mend

@siemens/ix 2.3.0 → 2.4.1

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

package/components/ix-modal.js CHANGED Viewed

@@ -166,17 +166,17 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (h(Host, { key: '567694260986bea7c1ba8b63f00f5035b03b8961', class: {
+        return (h(Host, { key: 'e7e27615541ea127c4d9608a71f447f169cde5d3', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.backdrop === false,
                 'align-center': this.centered,
-            } }, h("div", { key: '8a6149cbd64c7007e0492df375242d6fc8e54f0b', class: "dialog-backdrop" }, h("dialog", { key: '4ef88c174fc5066d2075929aa770fe17f68a5bec', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, h("div", { key: '3a4e1950295bec70cfdf1a332a9e9e4ab3186472', class: "dialog-backdrop" }, h("dialog", { key: '4455ba17c66dc4d03a792a9aeea11d1380c31674', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
                 modal: true,
                 [`modal-size-${this.size}`]: true,
             }, onClose: () => this.dismissModal(), onClick: (event) => this.onModalClick(event), onCancel: (e) => {
                 e.preventDefault();
                 this.dismissModal();
-            } }, h("slot", { key: '08d753b7ec1679b13fa4052a302d873efbdf381c' })))));
+            } }, h("slot", { key: '383eae1fa01e4159ca2d512f477532f51c56664a' })))));
     }
     get hostElement() { return this; }
     static get style() { return IxModalStyle0; }

package/components/ix-pagination.js CHANGED Viewed

@@ -36,7 +36,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
             },
         };
         this.maxCountPages = 7;
-        this.advanced = undefined;
+        this.advanced = false;
         this.itemCount = 15;
         this.showItemCount = true;
         this.count = undefined;
@@ -130,10 +130,10 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
         return h("span", { class: "page-buttons" }, pageButtons);
     }
     render() {
-        return (h(Host, { key: '0d3ee03dc65b4178ad572d753d2c01f35c853d0e' }, h("ix-icon-button", { key: '58af8c5d7a36d3ddf24f1dde1b39cac9c3c2d929', disabled: this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { variant: "default" }, this.i18nPage), h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
+        return (h(Host, { key: '6cc3a3f4bbfaa4d41c08c8f864e08a26ef7a0977' }, h("ix-icon-button", { key: 'e457ad80d07a9503a87a09cddf9445037010cdbb', disabled: !this.count || this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { variant: "default" }, this.i18nPage), h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
                 const index = Number.parseInt(e.target['value']);
                 this.selectPage(index - 1);
-            } }), h("span", { class: "total-count" }, h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { key: 'bac7c247befd2262c9c01c95d2feba78dc4dfa12', disabled: this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, h("ix-typography", { variant: "default" }, this.i18nItems), h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
+            } }), h("span", { class: "total-count" }, h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { key: '7638a95799a72d60fb3090dc033e7e397580e391', disabled: !this.count || this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, h("ix-typography", { variant: "default" }, this.i18nItems), h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
                 const count = Number.parseInt(Array.isArray(e.detail) ? e.detail[0] : e.detail);
                 this.itemCountChanged.emit(count);
             } }, h("ix-select-item", { label: "10", value: "10" }), h("ix-select-item", { label: "15", value: "15" }), h("ix-select-item", { label: "20", value: "20" }), h("ix-select-item", { label: "40", value: "40" }), h("ix-select-item", { label: "100", value: "100" })))) : ('')));

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

	@@ -1 +1 @@
1	- {"file":"ix-pagination.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ix-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2022 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/components/forms';\n@import '../icon-button/icon-button';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n &,\n .advanced-pagination,\n .item-count {\n display: inline-flex;\n align-items: center;\n }\n\n .basic-pagination {\n padding: 0 0.125rem;\n }\n\n .advanced-pagination {\n padding: 0 $medium-space;\n }\n\n .page-selection {\n width: 4.125rem;\n text-align: center;\n margin: 0 $small-space;\n -moz-appearance: textfield;\n -webkit-appearance: textfield;\n }\n\n .page-buttons {\n white-space: nowrap;\n }\n\n .total-count {\n white-space: nowrap;\n }\n\n .item-count {\n flex-grow: 1;\n justify-content: flex-end;\n margin-inline-start: $large-space;\n\n ix-select {\n width: 4.5rem;\n margin-inline-start: $large-space;\n }\n }\n\n button {\n width: auto;\n min-width: 2rem;\n height: 2rem;\n padding: 0 0.5rem;\n }\n\n button + button {\n margin-inline-start: 0.125rem;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2022 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';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/\n @since 1.5.0\n /\n@Component({\n tag: 'ix-pagination',\n styleUrl: 'pagination.scss',\n shadow: true,\n})\nexport class Pagination {\n private readonly baseButtonConfig: BaseButtonProps = {\n variant: 'secondary',\n outline: false,\n ghost: true,\n iconOnly: true,\n iconOval: false,\n disabled: false,\n icon: '',\n loading: false,\n selected: false,\n type: 'button',\n extraClasses: {\n ['w-auto']: true,\n },\n };\n\n private readonly maxCountPages = 7;\n\n @Element() hostElement!: HTMLIxPaginationElement;\n\n /\n Advanced mode\n /\n @Prop() advanced: boolean;\n\n /\n Number of items shown at once.\n * Can only be changed in advaced mode.\n /\n @Prop() itemCount = 15;\n\n /\n Show item count in advanced mode\n /\n @Prop() showItemCount = true;\n\n /\n Total number of pages\n /\n @Prop() count: number;\n\n /\n Zero based index of currently selected page\n /\n @Prop({ mutable: true }) selectedPage = 0;\n\n /\n i18n\n /\n @Prop() i18nPage = 'Page';\n\n /\n i18n\n /\n @Prop() i18nOf = 'of';\n\n /\n /\n i18n\n /\n @Prop() i18nItems = 'Items';\n\n /\n Page selection event\n /\n @Event() pageSelected: EventEmitter<number>;\n\n /\n Item count change event\n /\n @Event() itemCountChanged: EventEmitter<number>;\n\n private selectPage(index: number) {\n if (index < 0) {\n this.selectedPage = 0;\n } else if (index > this.count - 1) {\n this.selectedPage = this.count - 1;\n } else {\n this.selectedPage = index;\n }\n\n this.pageSelected.emit(this.selectedPage);\n }\n\n private increase() {\n if (this.selectedPage === this.count - 1) {\n return;\n }\n\n this.selectPage(this.selectedPage + 1);\n }\n\n private decrease() {\n if (this.selectedPage === 0) {\n return;\n }\n\n this.selectPage(this.selectedPage - 1);\n }\n\n private getPageButton(index: number) {\n const baseButtonProps: BaseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => this.selectPage(index),\n selected: this.selectedPage === index,\n ariaAttributes: {\n 'aria-pressed': a11yBoolean(this.selectedPage === index),\n },\n };\n\n return <BaseButton {...baseButtonProps}>{index + 1}</BaseButton>;\n }\n\n private renderPageButtons() {\n const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n const hasOverflow = this.count > this.maxCountPages;\n const hasOverflowStart =\n hasOverflow && this.selectedPage > pagesBeforeOverflow;\n const hasOverflowEnd =\n hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n const pageButtons = [];\n\n let start = 0;\n let end = Math.min(this.count, this.maxCountPages);\n let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n if (hasOverflowStart) {\n const baseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => {\n if (hasOverflowEnd) {\n this.selectPage(this.selectedPage - Math.max(0, 2 pageCount + 1));\n } else {\n this.selectPage(this.count - this.maxCountPages);\n }\n },\n };\n pageButtons.push(this.getPageButton(0));\n pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n\n if (hasOverflowEnd) {\n start = this.count - this.maxCountPages + 2;\n } else {\n start = this.count - this.maxCountPages + 2;\n end = this.count;\n }\n }\n\n if (hasOverflowEnd) {\n if (hasOverflowStart) {\n start = this.selectedPage - pageCount;\n end = this.selectedPage + pageCount + 1;\n } else {\n end = this.maxCountPages - 2;\n }\n }\n\n for (let i = start; i < end; i++) {\n pageButtons.push(this.getPageButton(i));\n }\n\n if (hasOverflowEnd) {\n const baseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => {\n if (hasOverflowStart) {\n this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));\n } else {\n this.selectPage(this.maxCountPages - 1);\n }\n },\n };\n pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n pageButtons.push(this.getPageButton(this.count - 1));\n }\n\n return <span class=\"page-buttons\">{pageButtons}</span>;\n }\n\n render() {\n return (\n <Host>\n <ix-icon-button\n disabled={this.selectedPage === 0}\n ghost\n icon={'chevron-left-small'}\n onClick={() => this.decrease()}\n ></ix-icon-button>\n\n {this.advanced ? (\n <div class=\"advanced-pagination\">\n <ix-typography variant=\"default\">{this.i18nPage}</ix-typography>\n <input\n class=\"form-control page-selection\"\n type=\"number\"\n min=\"1\"\n max={this.count}\n value={this.selectedPage + 1}\n onChange={(e) => {\n const index = Number.parseInt(e.target['value']);\n this.selectPage(index - 1);\n }}\n />\n <span class=\"total-count\">\n <ix-typography variant=\"default\">\n {this.i18nOf} {this.count}\n </ix-typography>\n </span>\n </div>\n ) : (\n <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n )}\n\n <ix-icon-button\n disabled={this.selectedPage === this.count - 1}\n ghost\n icon={'chevron-right-small'}\n onClick={() => this.increase()}\n ></ix-icon-button>\n\n {this.advanced && this.showItemCount ? (\n <span class=\"item-count\">\n <ix-typography variant=\"default\">{this.i18nItems}</ix-typography>\n <ix-select\n hideListHeader\n i18nPlaceholder=\"\"\n i18nSelectListHeader=\"\"\n value={`${this.itemCount}`}\n onValueChange={(e) => {\n const count = Number.parseInt(\n Array.isArray(e.detail) ? e.detail[0] : e.detail\n );\n\n this.itemCountChanged.emit(count);\n }}\n >\n <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n </ix-select>\n </span>\n ) : (\n ''\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-pagination.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ix-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2022 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/components/forms';\n@import '../icon-button/icon-button';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n &,\n .advanced-pagination,\n .item-count {\n display: inline-flex;\n align-items: center;\n }\n\n .basic-pagination {\n padding: 0 0.125rem;\n }\n\n .advanced-pagination {\n padding: 0 $medium-space;\n }\n\n .page-selection {\n width: 4.125rem;\n text-align: center;\n margin: 0 $small-space;\n -moz-appearance: textfield;\n -webkit-appearance: textfield;\n }\n\n .page-buttons {\n white-space: nowrap;\n }\n\n .total-count {\n white-space: nowrap;\n }\n\n .item-count {\n flex-grow: 1;\n justify-content: flex-end;\n margin-inline-start: $large-space;\n\n ix-select {\n width: 4.5rem;\n margin-inline-start: $large-space;\n }\n }\n\n button {\n width: auto;\n min-width: 2rem;\n height: 2rem;\n padding: 0 0.5rem;\n }\n\n button + button {\n margin-inline-start: 0.125rem;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2022 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';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/\n @since 1.5.0\n /\n@Component({\n tag: 'ix-pagination',\n styleUrl: 'pagination.scss',\n shadow: true,\n})\nexport class Pagination {\n private readonly baseButtonConfig: BaseButtonProps = {\n variant: 'secondary',\n outline: false,\n ghost: true,\n iconOnly: true,\n iconOval: false,\n disabled: false,\n icon: '',\n loading: false,\n selected: false,\n type: 'button',\n extraClasses: {\n ['w-auto']: true,\n },\n };\n\n private readonly maxCountPages = 7;\n\n @Element() hostElement!: HTMLIxPaginationElement;\n\n /\n Advanced mode\n /\n @Prop() advanced = false;\n\n /\n Number of items shown at once.\n * Can only be changed in advaced mode.\n /\n @Prop() itemCount = 15;\n\n /\n Show item count in advanced mode\n /\n @Prop() showItemCount = true;\n\n /\n Total number of pages\n /\n @Prop() count: number;\n\n /\n Zero based index of currently selected page\n /\n @Prop({ mutable: true }) selectedPage = 0;\n\n /\n i18n\n /\n @Prop() i18nPage = 'Page';\n\n /\n i18n\n /\n @Prop() i18nOf = 'of';\n\n /\n /\n i18n\n /\n @Prop() i18nItems = 'Items';\n\n /\n Page selection event\n /\n @Event() pageSelected!: EventEmitter<number>;\n\n /\n Item count change event\n /\n @Event() itemCountChanged!: EventEmitter<number>;\n\n private selectPage(index: number) {\n if (index < 0) {\n this.selectedPage = 0;\n } else if (index > this.count - 1) {\n this.selectedPage = this.count - 1;\n } else {\n this.selectedPage = index;\n }\n\n this.pageSelected.emit(this.selectedPage);\n }\n\n private increase() {\n if (this.selectedPage === this.count - 1) {\n return;\n }\n\n this.selectPage(this.selectedPage + 1);\n }\n\n private decrease() {\n if (this.selectedPage === 0) {\n return;\n }\n\n this.selectPage(this.selectedPage - 1);\n }\n\n private getPageButton(index: number) {\n const baseButtonProps: BaseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => this.selectPage(index),\n selected: this.selectedPage === index,\n ariaAttributes: {\n 'aria-pressed': a11yBoolean(this.selectedPage === index),\n },\n };\n\n return <BaseButton {...baseButtonProps}>{index + 1}</BaseButton>;\n }\n\n private renderPageButtons() {\n const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n const hasOverflow = this.count > this.maxCountPages;\n const hasOverflowStart =\n hasOverflow && this.selectedPage > pagesBeforeOverflow;\n const hasOverflowEnd =\n hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n const pageButtons = [];\n\n let start = 0;\n let end = Math.min(this.count, this.maxCountPages);\n let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n if (hasOverflowStart) {\n const baseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => {\n if (hasOverflowEnd) {\n this.selectPage(this.selectedPage - Math.max(0, 2 pageCount + 1));\n } else {\n this.selectPage(this.count - this.maxCountPages);\n }\n },\n };\n pageButtons.push(this.getPageButton(0));\n pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n\n if (hasOverflowEnd) {\n start = this.count - this.maxCountPages + 2;\n } else {\n start = this.count - this.maxCountPages + 2;\n end = this.count;\n }\n }\n\n if (hasOverflowEnd) {\n if (hasOverflowStart) {\n start = this.selectedPage - pageCount;\n end = this.selectedPage + pageCount + 1;\n } else {\n end = this.maxCountPages - 2;\n }\n }\n\n for (let i = start; i < end; i++) {\n pageButtons.push(this.getPageButton(i));\n }\n\n if (hasOverflowEnd) {\n const baseButtonProps = {\n ...this.baseButtonConfig,\n onClick: () => {\n if (hasOverflowStart) {\n this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));\n } else {\n this.selectPage(this.maxCountPages - 1);\n }\n },\n };\n pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n pageButtons.push(this.getPageButton(this.count - 1));\n }\n\n return <span class=\"page-buttons\">{pageButtons}</span>;\n }\n\n render() {\n return (\n <Host>\n <ix-icon-button\n disabled={!this.count \|\| this.selectedPage === 0}\n ghost\n icon={'chevron-left-small'}\n onClick={() => this.decrease()}\n ></ix-icon-button>\n\n {this.advanced ? (\n <div class=\"advanced-pagination\">\n <ix-typography variant=\"default\">{this.i18nPage}</ix-typography>\n <input\n class=\"form-control page-selection\"\n type=\"number\"\n min=\"1\"\n max={this.count}\n value={this.selectedPage + 1}\n onChange={(e) => {\n const index = Number.parseInt(e.target['value']);\n this.selectPage(index - 1);\n }}\n />\n <span class=\"total-count\">\n <ix-typography variant=\"default\">\n {this.i18nOf} {this.count}\n </ix-typography>\n </span>\n </div>\n ) : (\n <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n )}\n\n <ix-icon-button\n disabled={!this.count \|\| this.selectedPage === this.count - 1}\n ghost\n icon={'chevron-right-small'}\n onClick={() => this.increase()}\n ></ix-icon-button>\n\n {this.advanced && this.showItemCount ? (\n <span class=\"item-count\">\n <ix-typography variant=\"default\">{this.i18nItems}</ix-typography>\n <ix-select\n hideListHeader\n i18nPlaceholder=\"\"\n i18nSelectListHeader=\"\"\n value={`${this.itemCount}`}\n onValueChange={(e) => {\n const count = Number.parseInt(\n Array.isArray(e.detail) ? e.detail[0] : e.detail\n );\n\n this.itemCountChanged.emit(count);\n }}\n >\n <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n </ix-select>\n </span>\n ) : (\n ''\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-pane-layout.js CHANGED Viewed

@@ -226,7 +226,7 @@ const Panes = /*@__PURE__*/ proxyCustomElement(class Panes extends HTMLElement {
         return pane ? pane.floating : false;
     }
     render() {
-        return (h(Host, { key: '4167dc285dcf1adaf15f0eb3b9f6692e27918b43' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
+        return (h(Host, { key: '8885c647d0661b05b2ed1b58fd8b61614eda6783' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
                 row: true,
                 'padding-left': this.hasPadding('left'),
                 'padding-right': this.hasPadding('right'),

package/components/ix-pane.js CHANGED Viewed

@@ -407,7 +407,7 @@ const Pane = /*@__PURE__*/ proxyCustomElement(class Pane extends HTMLElement {
         }
     }
     render() {
-        return (h(Host, { key: '64708a95cd9ab661211a6ea1ed696eafe2904627', class: {
+        return (h(Host, { key: '10c2543fa3814a44f4a696b768070da6a0b2ce83', class: {
                 'inline-color': !this.floating,
                 'mobile-overlay': this.expanded && this.isMobile,
                 'top-expanded': this.expanded && this.isMobileTop && this.isMobile,
@@ -432,28 +432,28 @@ const Pane = /*@__PURE__*/ proxyCustomElement(class Pane extends HTMLElement {
                 'box-shadow': this.floating,
                 'aria-expanded': this.expanded,
                 'not-visible': this.hideOnCollapse && !this.expanded,
-            } }, h("aside", { key: '6985605b745db5acedace6039bf709c586474d3a', class: {
+            } }, h("aside", { key: '4bea08d18307f21ca3d71874117152c10acd9ce9', class: {
                 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,
                 'left-right-pane': this.isLeftRightPane && !this.isMobile,
                 'mobile-pane': this.isMobile,
                 expanded: this.expanded,
-            } }, h("div", { key: '6c4fe6cf539de045dc22abb27693fdc94dc25fbf', id: "title-div", class: {
+            } }, h("div", { key: 'b86bd206f53643fb15f411528dd9e41e1d060ef8', id: "title-div", class: {
                 title: !this.isMobile && !this.hideOnCollapse && !this.showContent,
                 'title-finished': !this.isMobile && !this.hideOnCollapse && this.showContent,
                 'title-expanded': !this.isMobile && !this.hideOnCollapse && this.expanded,
                 'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,
                 'title-mobile': this.isMobile,
                 'header-gap': !this.isMobile && !this.hideOnCollapse,
-            } }, h("ix-icon-button", { key: 'e9e308ae81e48e90e2636f050112c757b58bc16d', class: "title-icon", size: "24", icon: this.expanded
+            } }, h("ix-icon-button", { key: '4f58db9432c7685521d7a60257fff08118bc3c76', class: "title-icon", size: "24", icon: this.expanded
                 ? this.isMobile || this.hideOnCollapse
                     ? 'close'
                     : this.expandIcon
                 : this.minimizeIcon, ghost: true, onClick: () => {
                 this.expanded = !this.expanded;
-            }, "aria-controls": this.composition + 'ToggleButton' }), h("span", { key: '7c4c9a086e6e9c1434ded33ac11b6ed9033c4def', class: {
+            }, "aria-controls": this.composition + 'ToggleButton' }), h("span", { key: 'bd88452cdede62871391416c736ff80ae29f14a0', class: {
                 'title-text': true,
                 rotate: !this.expanded && !this.isMobile && this.isLeftRightPane,
-            } }, this.icon ? (h("ix-icon", { size: "24", name: this.icon })) : null, h("div", { key: 'fb0aea90f3af3e436712dcd540247925b8ad96b0', class: "title-text-overflow" }, h("ix-typography", { key: 'f1c18efa4e71b8387d83c357cf88f9ab89aea10a', format: "h4" }, this.heading)))), h("div", { key: 'dec09cef0a083a2ac6b3cefc2bf1f771e1351b3b', class: "side-pane-content", hidden: !this.showContent }, h("slot", { key: '367170c015420dd84e75cad3f4cfa31fcad58d57' })))));
+            } }, this.icon ? (h("ix-icon", { size: "24", name: this.icon })) : null, h("div", { key: '6e49c2b280c258209dd43aa03658ab4bbcb9b883', class: "title-text-overflow" }, h("ix-typography", { key: '65fa43f3fec84b63d24d14b38434eea186aa0910', format: "h4" }, this.heading)))), h("div", { key: '11a5da6825a09b85f4957854179264c43ccd8a6f', class: "side-pane-content", hidden: !this.showContent }, h("slot", { key: '3c986fb71f77e5481ffd6449445b4247429ff07e' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-pill.js CHANGED Viewed

@@ -25,13 +25,13 @@ const Pill = /*@__PURE__*/ proxyCustomElement(class Pill extends HTMLElement {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: 'd7aa88991ef6b8cf39358e65a3c3745d9b6cf112', style: this.variant === 'custom'
+        return (h(Host, { key: '1d4d88d976564778835cd02e28d5ede6fe4dd6f7', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.pillColor) !== null && _b !== void 0 ? _b : this.color,
                 }
                 : {}, title: this.el.textContent, class: {
                 'align-left': this.alignLeft,
-            } }, h("div", { key: '490ecb6d8560e39541d50b5d538608adef939dcf', style: Object.assign({}, customStyle), class: {
+            } }, h("div", { key: '74474d69acc5d47b9bf6c5ebe12f676155a9e87d', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -45,10 +45,10 @@ const Pill = /*@__PURE__*/ proxyCustomElement(class Pill extends HTMLElement {
                 custom: this.variant === 'custom',
                 closable: false,
                 icon: !!this.icon,
-            } }, h("ix-icon", { key: 'd615b73a2bdd35fa67409e0783324abd2fc02f21', class: {
+            } }, h("ix-icon", { key: 'c70dcfe5f55c77484cf3300dca53f6a4e55d5caf', class: {
                 'with-icon': true,
                 hidden: this.icon === undefined || this.icon === '',
-            }, name: this.icon, size: '16' }), h("span", { key: '8c4f149571ae115af0cc264634f03633988d7871', class: "slot-container" }, h("slot", { key: '582ff33fd2b1cd6de42d4febbcd7f2ad31be0e02' })))));
+            }, name: this.icon, size: '16' }), h("span", { key: 'b3d056721cb891a986ac3196a9fcf049c8b366f9', class: "slot-container" }, h("slot", { key: 'a42505aafc70d545e3ff8020c80f67067b3eac8c' })))));
     }
     get el() { return this; }
     static get style() { return IxPillStyle0; }

package/components/ix-playground-internal.js CHANGED Viewed

@@ -9,7 +9,7 @@ const PlaygroundInternal = /*@__PURE__*/ proxyCustomElement(class PlaygroundInte
         this.__registerHost();
     }
     render() {
-        return h(Host, { key: '64dc9d49b33337f3f1fbfef272dbe26bc08a17a8' });
+        return h(Host, { key: 'cb88d03e375d222d5903d13ca1fc154d9af86898' });
     }
     static get style() { return IxPlaygroundInternalStyle0; }
 }, [2, "ix-playground-internal"]);

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

@@ -25,7 +25,7 @@ const PushCard = /*@__PURE__*/ proxyCustomElement(class PushCard extends HTMLEle
         const color = this.variant === 'insight' || this.variant === 'notification'
             ? 'std'
             : undefined;
-        return (h(Host, { key: 'e24565973d07f9e229c36913ca3ac89a50fa203a' }, h("ix-card", { key: '44282cb66fe975ec987c732564b1a1b2f157fb5b', variant: this.variant }, h("ix-card-content", { key: 'a81102518c997300dd706eaaf9be2c409dc2cb57' }, h("ix-card-title", { key: 'cfe94c332de47b3457f713e601d5528da88eb9d6' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("span", { key: '70ae6659d04f30ba68a58f8cdf0fde3f33c3de01', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: 'b16c8760f377f9f5118cf2d6b09f0ed831c4d7bd', name: "title-action" })), h("ix-typography", { key: '861cc81ab636b168fbd6f931095d5128a2a4732b', color: color, format: "h4" }, this.heading), h("ix-typography", { key: '310464f9afd7994ccc5c51a8154387e59205b2bb', color: color }, this.subheading)), h("ix-card-accordion", { key: 'e070cee2f6ded1b56b92d3fc1ed5028cfe2d0d5d', collapse: this.collapse }, h("slot", { key: 'd8b198392bd09b45d2f0c6f6579e333c5f4d96e0' })))));
+        return (h(Host, { key: '9ba9fd8e6cc9f2b74e89fbbcd0c09a04aca45ac2' }, h("ix-card", { key: '913618b3fc69c1e59c3bbeb4c92569b2754ff3ae', variant: this.variant }, h("ix-card-content", { key: 'bb75a940ce3ac891fe947f4ed9e542c36a492f92' }, h("ix-card-title", { key: '37f4faab2368f341dd835fffe64b5915e1c4b322' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("span", { key: '42059a2ed174f15fdcce1ddb599bc831afade5b1', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: '9e3b8df6148f3b8e3d577d8ece5253b14c85a0dd', name: "title-action" })), h("ix-typography", { key: 'b7473e9fd9fdaee3045ec4884544469a9a6457fe', color: color, format: "h4" }, this.heading), h("ix-typography", { key: '26c212e7f6111df4d353525fda6b3a76ee7dea3c', color: color }, this.subheading)), h("ix-card-accordion", { key: 'a779591ee7405f4a725f1c04abbc7223064ee885', collapse: this.collapse }, h("slot", { key: '5d42faa67c254a1d8541c525cb8e0e08e6b0d095' })))));
     }
     static get style() { return IxPushCardStyle0; }
 }, [1, "ix-push-card", {

package/components/ix-slider.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { O as OnListener } from './listener.js';
 import { d as defineCustomElement$3 } from './tooltip.js';
 import { d as defineCustomElement$2 } from './typography.js';
-const sliderCss = ":host{display:flex;flex-direction:column;min-height:2rem;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-color-8);--trace-color:var(--theme-color-dynamic);--tick-color:var(--theme-color-8);--tick-color--active:var(--theme-color-dynamic);--track-color:var(--theme-color-component-4);}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1rem;margin:0}:host input[type=range].trace::before{content:\"\";position:absolute;display:block;z-index:-1;width:calc(7px + 100% * var(--trace-end) - 16px * var(--trace-end) - (7px + 100% * var(--trace-start) - 16px * var(--trace-start)));left:calc(7px + 100% * var(--trace-start) - 16px * var(--trace-start));height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%)}:host input[type=range].trace::after{content:\"\";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(7px + 100% * var(--trace-reference) - 16px * var(--trace-reference))}:host input[type=range]::-webkit-slider-runnable-track{background:transparent;height:0.25rem}:host input[type=range]::-moz-range-track{background:transparent;height:0.25rem}:host input[type=range i]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}:host input[type=range i]::-moz-range-thumb{border:none;border-radius:0}:host input[type=range]::-webkit-slider-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]::-moz-range-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:hover::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:focus{outline:none}:host input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host input[type=range]:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host .ticks{display:flex;position:relative;top:50%;transform:translateY(-50%)}:host .ticks .tick{display:block;position:absolute;width:8px;height:8px;background-color:var(--tick-color);border-radius:100px;top:50%;transform:translateY(-50%);left:calc(var(--tick-value) * 100% - 4px)}:host .ticks .tick.tick-active{background-color:var(--tick-color--active)}:host .slider{position:relative;display:block;width:100%;height:1.5rem}:host .track{position:absolute;background-color:var(--track-color);height:4px;width:calc(100% - 1rem);margin-left:0.5rem;top:50%;transform:translateY(-50%);left:0px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;left:0px;top:50%;transform:translateY(-50%)}:host .hide-tooltip{display:none}:host .label{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}:host .label-start{margin-left:0.5rem}:host .label-end{margin-right:0.5rem}:host .label-error{margin-left:0.5rem}:host(.error){--trace-color:var(--theme-color-alarm-40);--tick-color--active:var(--theme-color-alarm)}:host(.error) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-alarm)}:host(.error) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-alarm)}:host(.disabled){pointer-events:none;--track-color:var(--theme-color-component-3);--trace-color:var(--theme-color-3);--tick-color:var(--theme-color-7);--tick-color--active:var(--theme-color-7)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-7)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-7)}";
+const sliderCss = ":host{display:flex;flex-direction:column;min-height:2rem;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-color-8);--trace-color:var(--theme-color-dynamic);--tick-color:var(--theme-color-8);--tick-color--active:var(--theme-color-dynamic);--track-color:var(--theme-color-component-4);}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1rem;margin:0}:host input[type=range].trace::before{content:\"\";position:absolute;display:block;z-index:-1;width:calc(7px + 100% * var(--trace-end) - 16px * var(--trace-end) - (7px + 100% * var(--trace-start) - 16px * var(--trace-start)));left:calc(7px + 100% * var(--trace-start) - 16px * var(--trace-start));height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%)}:host input[type=range].trace:not(.hide-trace-reference)::after{content:\"\";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(7px + 100% * var(--trace-reference) - 16px * var(--trace-reference))}:host input[type=range]::-webkit-slider-runnable-track{background:transparent;height:0.25rem}:host input[type=range]::-moz-range-track{background:transparent;height:0.25rem}:host input[type=range i]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}:host input[type=range i]::-moz-range-thumb{border:none;border-radius:0}:host input[type=range]::-webkit-slider-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]::-moz-range-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:hover::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:focus{outline:none}:host input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host input[type=range]:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host .ticks{display:flex;position:relative;top:50%;transform:translateY(-50%)}:host .ticks .tick{display:block;position:absolute;width:8px;height:8px;background-color:var(--tick-color);border-radius:100px;top:50%;transform:translateY(-50%);left:calc(var(--tick-value) * 100% - 4px)}:host .ticks .tick.tick-active{background-color:var(--tick-color--active)}:host .slider{position:relative;display:block;width:100%;height:1.5rem}:host .track{position:absolute;background-color:var(--track-color);height:4px;width:calc(100% - 1rem);margin-left:0.5rem;top:50%;transform:translateY(-50%);left:0px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;left:0px;top:50%;transform:translateY(-50%)}:host .hide-tooltip{display:none}:host .label{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}:host .label-start{margin-left:0.5rem}:host .label-end{margin-right:0.5rem}:host .label-error{margin-left:0.5rem}:host(.error){--trace-color:var(--theme-color-alarm-40);--tick-color--active:var(--theme-color-alarm)}:host(.error) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-alarm)}:host(.error) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-alarm)}:host(.disabled){pointer-events:none;--track-color:var(--theme-color-component-3);--trace-color:var(--theme-color-3);--tick-color:var(--theme-color-7);--tick-color--active:var(--theme-color-7)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-7)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-7)}";
 const IxSliderStyle0 = sliderCss;
 /*
@@ -42,7 +42,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         this.__registerHost();
         this.__attachShadow();
         this.valueChange = createEvent(this, "valueChange", 7);
-        this.step = undefined;
+        this.step = 1;
         this.min = 0;
         this.max = 100;
         this.value = 0;
@@ -58,20 +58,24 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         this.showTooltip = false;
     }
     get tooltip() {
-        return this.hostElement.shadowRoot.querySelector('ix-tooltip');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ix-tooltip');
     }
     get pseudoThumb() {
-        return this.hostElement.shadowRoot.querySelector('.thumb');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.thumb');
     }
     get slider() {
-        return this.hostElement.shadowRoot.getElementById('slider');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('slider');
     }
     onShowTooltipChange() {
+        var _a, _b;
         if (this.showTooltip) {
-            this.tooltip.showTooltip(this.pseudoThumb);
+            (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.showTooltip(this.pseudoThumb);
             return;
         }
-        this.tooltip.hideTooltip();
+        (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.hideTooltip();
     }
     componentWillLoad() {
         this.a11yAttributes = a11yHostAttributes(this.hostElement, [
@@ -122,12 +126,12 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
             traceStart = valueInPercentage;
             traceEnd = traceReferenceInPercentage;
         }
-        return (h(Host, { key: 'fc1ccd48aeefe6a53f7299db447b5c5e6fb6b13d', class: {
+        return (h(Host, { key: 'c7e6a14875ee17d49fe5e42459b81fb561802ebc', class: {
                 disabled: this.disabled,
                 error: !!this.error,
-            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, h("div", { key: '4e3d3b0d5e1b2a2882ce0073336e4cd13ac1a4b8', class: "slider" }, h("div", { key: 'f8457c6d8efad8d172abe49f9037cb71f9ba226f', class: "track" }, h("div", { key: 'cf141d91936a74657f8788f5f7c688e37ebf7a16', class: "thumb", style: {
+            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, h("div", { key: 'bed770beec56a4798df1c0b8546fd78ef6c1f749', class: "slider" }, h("div", { key: 'b2337e7802806933356cc7930bcb5a0e025796b8', class: "track" }, h("div", { key: 'd5d40d3e44d50112733e5c9137b807e3a25dcafa', class: "thumb", style: {
                 left: `calc(${valueInPercentage} * 100% - 8px)`,
-            } }), h("div", { key: 'b54ae34bda82b7f0277ae361c5139845830dc85d', class: "ticks" }, this.marker
+            } }), h("div", { key: '041f4368d4b80929a03abfbe617d8f5bb15957d0', class: "ticks" }, this.marker
             ? this.marker.map((markerValue) => {
                 if (markerValue > this.max || markerValue < this.min) {
                     return;
@@ -140,20 +144,23 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
                         '--tick-value': `${left}`,
                     } }));
             })
-            : null)), h("input", Object.assign({ key: '219884ecfc35a76f0722782af2607c64b19a57aa', id: "slider", type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), style: {
+            : null)), h("input", Object.assign({ key: 'ef61a64f69ebc8816778dfd95dee2402b0ed9144', id: "slider", type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), style: {
                 '--value': `${valueInPercentage}`,
                 '--trace-reference': `${traceReferenceInPercentage}`,
                 '--trace-start': `${traceStart}`,
                 '--trace-end': `${traceEnd}`,
             }, class: {
                 trace: this.trace && traceReferenceInPercentage !== valueInPercentage,
+                'hide-trace-reference': this.trace &&
+                    (this.traceReference <= this.min ||
+                        this.traceReference >= this.max),
             }, onFocus: () => {
                 this.showTooltip = true;
             }, onBlur: () => {
                 this.showTooltip = false;
-            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), h("ix-tooltip", { key: '387dc09d28b3c45f08470ba651c659e8c528a44d', class: {
+            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), h("ix-tooltip", { key: '4dfe584376f3df426be2e049703adfb4c2bf39ab', class: {
                 'hide-tooltip': !this.showTooltip,
-            }, animationFrame: true }, this.rangeInput)), h("div", { key: 'f8fdb048411a622870b4b0698c7124f7e175dedf', class: "label" }, h("div", { key: '2bbb6c7418953b907b1ef604a8d775c1e69d6626', class: "label-start" }, h("slot", { key: 'ce4a5aedbfafe7b5b71d47421bae0ab385548920', name: "label-start" })), h("div", { key: '98b40f2b68164592307f7f9817c913dffcb08139', class: "label-end" }, h("slot", { key: 'bcd3497745bf949da88cd373ecf8cd3f74488ffe', name: "label-end" }))), this.error ? (h("ix-typography", { class: 'label-error', color: "alarm" }, this.error)) : null));
+            }, animationFrame: true }, this.rangeInput)), h("div", { key: '9c42a9aa11e4c59c2fa9f0b132d6ac3a2b4f8f72', class: "label" }, h("div", { key: '22ed6e4412f84449c68109dd5619054a65d8790f', class: "label-start" }, h("slot", { key: '676a5d1b03b6a398bda253f01396c06ccb7cdb04', name: "label-start" })), h("div", { key: '7ec74b8f1f5a4a6e0eb4dd2b1bd8c32aa098f47c', class: "label-end" }, h("slot", { key: '1a4b99aebbe60d9db5e4ed5c26907aecf2a38568', name: "label-end" }))), this.error ? (h("ix-typography", { class: 'label-error', color: "alarm" }, this.error)) : null));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"ix-slider.js","mappings":"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","names":[],"sources":["src/components/slider/slider.scss?tag=ix-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n@mixin track {\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range']::-webkit-slider-runnable-track {\n @content;\n }\n\n // Firefox\n input[type='range']::-moz-range-track {\n @content;\n }\n}\n\n@mixin clear-browser-thumb {\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range' i]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-top: -6px;\n }\n\n // Firefox\n input[type='range' i]::-moz-range-thumb {\n border: none;\n border-radius: 0;\n }\n}\n\n@mixin thumb {\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range']::-webkit-slider-thumb {\n @content;\n }\n\n // Firefox\n input[type='range']::-moz-range-thumb {\n @content;\n }\n}\n\n@mixin thumb-hover {\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range']:hover::-webkit-slider-thumb {\n @content;\n }\n\n // Firefox\n input[type='range']:hover::-moz-range-thumb {\n @content;\n }\n}\n\n@mixin thumb-active {\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range']:active::-webkit-slider-thumb {\n @content;\n }\n\n // Firefox\n input[type='range']:active::-moz-range-thumb {\n @content;\n }\n}\n\n@mixin thumb-focus {\n input[type='range']:focus {\n outline: none;\n }\n\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range']:focus-visible::-webkit-slider-thumb {\n @content;\n }\n\n // Firefox\n input[type='range']:focus-visible::-moz-range-thumb {\n @content;\n }\n}\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n min-height: 2rem;\n --thumb-size: 1rem;\n --value: 0;\n --trace-start: 0;\n --trace-end: 0;\n --trace-reference: 0;\n --trace-reference-color: var(--theme-color-8);\n --trace-color: var(--theme-color-dynamic);\n --tick-color: var(--theme-color-8);\n --tick-color--active: var(--theme-color-dynamic);\n --track-color: var(--theme-color-component-4);\n\n input[type='range'] {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0;\n appearance: none;\n background: transparent;\n cursor: pointer;\n width: 100%;\n height: 1rem;\n margin: 0;\n }\n\n // Trace line\n input[type='range'].trace::before {\n content: '';\n position: absolute;\n display: block;\n z-index: -1;\n\n width: calc(\n calc(7px + calc(100% var(--trace-end)) - calc(16px * var(--trace-end))) -\n calc(\n 7px + calc(100% * var(--trace-start)) -\n calc(16px * var(--trace-start))\n )\n );\n\n left: calc(\n 7px + calc(100% * var(--trace-start)) - calc(16px * var(--trace-start))\n );\n\n height: 4px;\n background-color: var(--trace-color);\n top: 50%;\n transform: translateY(-50%);\n }\n\n // Trace reference\n input[type='range'].trace::after {\n content: '';\n position: absolute;\n display: block;\n width: 2px;\n height: 16px;\n background-color: var(--trace-reference-color);\n top: 50%;\n transform: translateY(-50%);\n left: calc(\n 7px + calc(100% * var(--trace-reference)) -\n calc(16px * var(--trace-reference))\n );\n }\n\n @include track() {\n background: transparent;\n height: 0.25rem;\n }\n\n @include clear-browser-thumb();\n\n @include thumb() {\n border-radius: 100px;\n background-color: var(--theme-color-dynamic);\n height: var(--thumb-size);\n width: var(--thumb-size);\n transition: all var(--theme-default-time) ease-in-out;\n z-index: 10;\n }\n\n @include thumb-hover() {\n transform: scale(1.2);\n background-color: var(--theme-color-dynamic);\n }\n\n @include thumb-active() {\n transform: scale(1.2);\n\n background-color: var(--theme-color-dynamic);\n }\n\n @include thumb-focus() {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: 0.125rem;\n }\n\n /* style datalist /\n .ticks {\n display: flex;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n }\n .ticks .tick {\n display: block;\n position: absolute;\n width: 8px;\n height: 8px;\n background-color: var(--tick-color);\n border-radius: 100px;\n top: 50%;\n transform: translateY(-50%);\n left: calc(var(--tick-value) 100% - 4px);\n }\n\n .ticks .tick.tick-active {\n background-color: var(--tick-color--active);\n }\n\n .slider {\n position: relative;\n display: block;\n width: 100%;\n height: 1.5rem;\n }\n\n .track {\n position: absolute;\n background-color: var(--track-color);\n height: 4px;\n width: calc(100% - 1rem);\n margin-left: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n left: 0px;\n }\n\n .thumb {\n display: block;\n position: absolute;\n background-color: transparent;\n height: 1rem;\n width: 1rem;\n border-radius: 100px;\n left: 0px;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .hide-tooltip {\n display: none;\n }\n\n .label {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.5rem;\n\n min-height: 0px;\n }\n\n .label-start {\n margin-left: 0.5rem;\n }\n\n .label-end {\n margin-right: 0.5rem;\n }\n\n .label-error {\n margin-left: 0.5rem;\n }\n}\n\n:host(.error) {\n --trace-color: var(--theme-color-alarm-40);\n --tick-color--active: var(--theme-color-alarm);\n\n @include thumb() {\n background-color: var(--theme-color-alarm);\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n\n --track-color: var(--theme-color-component-3);\n --trace-color: var(--theme-color-3);\n --tick-color: var(--theme-color-7);\n --tick-color--active: var(--theme-color-7);\n\n @include thumb() {\n background-color: var(--theme-color-7);\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 h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport { OnListener } from '../utils/listener';\n\nexport type SliderMarker = Array<number>;\n\nfunction between(min: number, value: number, max: number) {\n if (value < min) {\n return min;\n } else if (value > max) {\n return max;\n } else {\n return value;\n }\n}\n\n/\n @since 2.0.0\n \n @slot label-start - Element will be displayed at the start of the slider\n * @slot label-end - Element will be displayed at the end of the slider\n /\n@Component({\n tag: 'ix-slider',\n styleUrl: 'slider.scss',\n shadow: true,\n})\nexport class Slider {\n @Element() hostElement!: HTMLIxSliderElement;\n\n /\n Legal number intervals\n \n @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step\n /\n @Prop() step: number;\n\n /\n Minimum slider value\n /\n @Prop() min = 0;\n\n /\n Maximum slider value\n /\n @Prop() max = 100;\n\n /\n Current value of the slider\n /\n @Prop() value = 0;\n\n /\n Define tick marker on the slider. Marker has to be within slider min/max\n /\n @Prop() marker: SliderMarker;\n\n /\n Show a trace line\n /\n @Prop() trace = false;\n\n /\n Define the start point of the trace line\n /\n @Prop() traceReference = 0;\n\n /\n Show control as disabled\n /\n @Prop() disabled = false;\n\n /\n Show error state and message\n /\n @Prop() error: boolean \| string;\n\n /\n \n /\n @Event() valueChange: EventEmitter<number>;\n\n @State() rangeInput = 0;\n @State() rangeMin = 0;\n @State() rangeMax = 100;\n @State() rangeTraceReference = 0;\n @State() showTooltip = false;\n\n private a11yAttributes: A11yAttributes;\n\n get tooltip() {\n return this.hostElement.shadowRoot.querySelector('ix-tooltip');\n }\n\n get pseudoThumb() {\n return this.hostElement.shadowRoot.querySelector('.thumb') as HTMLElement;\n }\n\n get slider() {\n return this.hostElement.shadowRoot.getElementById(\n 'slider'\n ) as HTMLInputElement;\n }\n\n @Watch('showTooltip')\n onShowTooltipChange() {\n if (this.showTooltip) {\n this.tooltip.showTooltip(this.pseudoThumb);\n return;\n }\n\n this.tooltip.hideTooltip();\n }\n\n componentWillLoad() {\n this.a11yAttributes = a11yHostAttributes(this.hostElement, [\n 'role',\n 'aria-valuemin',\n 'aria-valuemax',\n 'aria-valuenow',\n ]);\n this.updateRangeVariables();\n }\n\n @Watch('value')\n @Watch('max')\n @Watch('min')\n @Watch('traceReference')\n private updateRangeVariables() {\n this.rangeInput = between(this.min, this.value, this.max);\n this.rangeTraceReference = between(this.min, this.traceReference, this.max);\n this.rangeMin = Math.min(this.min, this.max);\n this.rangeMax = Math.max(this.min, this.max);\n }\n\n private onInput(event: InputEvent) {\n event.stopPropagation();\n const value = parseInt(this.slider.value);\n\n if (!isNaN(value)) {\n this.rangeInput = value;\n this.emitInputEvent();\n }\n }\n\n private emitInputEvent() {\n this.valueChange.emit(this.rangeInput);\n }\n\n private isMarkerActive(markerValue: number) {\n const start = Math.min(this.traceReference, this.rangeInput);\n const end = Math.max(this.traceReference, this.rangeInput);\n const value = markerValue;\n\n return value >= start && value <= end;\n }\n\n // Listen globally on window because sometimes the event listener\n // of the DOM element input itself is not called if the release\n // click is not inside the element anymore\n @OnListener<Slider>('pointerup', (self) => self.showTooltip)\n onPointerUp() {\n this.showTooltip = false;\n }\n\n render() {\n const range = this.rangeMax - this.rangeMin;\n\n let traceReferenceInPercentage =\n (this.rangeTraceReference - this.rangeMin) / range;\n\n let valueInPercentage = (this.rangeInput - this.rangeMin) / range;\n\n const distance = valueInPercentage - traceReferenceInPercentage;\n\n let traceStart = traceReferenceInPercentage;\n let traceEnd = valueInPercentage;\n\n if (distance <= 0) {\n traceStart = valueInPercentage;\n traceEnd = traceReferenceInPercentage;\n }\n\n return (\n <Host\n class={{\n disabled: this.disabled,\n error: !!this.error,\n }}\n onPointerDown={() => setTimeout(() => (this.showTooltip = true))}\n >\n <div class=\"slider\">\n <div class=\"track\">\n <div\n class=\"thumb\"\n style={{\n left: `calc(${valueInPercentage} 100% - 8px)`,\n }}\n ></div>\n <div class=\"ticks\">\n {this.marker\n ? this.marker.map((markerValue) => {\n if (markerValue > this.max \|\| markerValue < this.min) {\n return;\n }\n\n let left = (markerValue - this.rangeMin) / range;\n\n return (\n <div\n class={{\n tick: true,\n 'tick-active':\n this.isMarkerActive(markerValue) && this.trace,\n }}\n style={{\n '--tick-value': `${left}`,\n }}\n ></div>\n );\n })\n : null}\n </div>\n </div>\n\n <input\n id=\"slider\"\n type=\"range\"\n list={this.marker ? 'markers' : undefined}\n step={this.step}\n min={this.min}\n max={this.max}\n value={this.rangeInput}\n tabindex={this.disabled ? -1 : 0}\n onInput={(event) => this.onInput(event)}\n style={{\n '--value': `${valueInPercentage}`,\n '--trace-reference': `${traceReferenceInPercentage}`,\n '--trace-start': `${traceStart}`,\n '--trace-end': `${traceEnd}`,\n }}\n class={{\n trace:\n this.trace && traceReferenceInPercentage !== valueInPercentage,\n }}\n onFocus={() => {\n this.showTooltip = true;\n }}\n onBlur={() => {\n this.showTooltip = false;\n }}\n role=\"slider\"\n aria-valuenow={this.rangeInput}\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n {...this.a11yAttributes}\n />\n\n <ix-tooltip\n class={{\n 'hide-tooltip': !this.showTooltip,\n }}\n animationFrame={true}\n >\n {this.rangeInput}\n </ix-tooltip>\n </div>\n <div class=\"label\">\n <div class=\"label-start\">\n <slot name=\"label-start\"></slot>\n </div>\n <div class=\"label-end\">\n <slot name=\"label-end\"></slot>\n </div>\n </div>\n {this.error ? (\n <ix-typography class={'label-error'} color=\"alarm\">\n {this.error}\n </ix-typography>\n ) : null}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-slider.js","mappings":"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","names":[],"sources":["src/components/slider/slider.scss?tag=ix-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n@mixin track {\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range']::-webkit-slider-runnable-track {\n @content;\n }\n\n // Firefox\n input[type='range']::-moz-range-track {\n @content;\n }\n}\n\n@mixin clear-browser-thumb {\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range' i]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-top: -6px;\n }\n\n // Firefox\n input[type='range' i]::-moz-range-thumb {\n border: none;\n border-radius: 0;\n }\n}\n\n@mixin thumb {\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range']::-webkit-slider-thumb {\n @content;\n }\n\n // Firefox\n input[type='range']::-moz-range-thumb {\n @content;\n }\n}\n\n@mixin thumb-hover {\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range']:hover::-webkit-slider-thumb {\n @content;\n }\n\n // Firefox\n input[type='range']:hover::-moz-range-thumb {\n @content;\n }\n}\n\n@mixin thumb-active {\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range']:active::-webkit-slider-thumb {\n @content;\n }\n\n // Firefox\n input[type='range']:active::-moz-range-thumb {\n @content;\n }\n}\n\n@mixin thumb-focus {\n input[type='range']:focus {\n outline: none;\n }\n\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range']:focus-visible::-webkit-slider-thumb {\n @content;\n }\n\n // Firefox\n input[type='range']:focus-visible::-moz-range-thumb {\n @content;\n }\n}\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n min-height: 2rem;\n --thumb-size: 1rem;\n --value: 0;\n --trace-start: 0;\n --trace-end: 0;\n --trace-reference: 0;\n --trace-reference-color: var(--theme-color-8);\n --trace-color: var(--theme-color-dynamic);\n --tick-color: var(--theme-color-8);\n --tick-color--active: var(--theme-color-dynamic);\n --track-color: var(--theme-color-component-4);\n\n input[type='range'] {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0;\n appearance: none;\n background: transparent;\n cursor: pointer;\n width: 100%;\n height: 1rem;\n margin: 0;\n }\n\n // Trace line\n input[type='range'].trace::before {\n content: '';\n position: absolute;\n display: block;\n z-index: -1;\n\n width: calc(\n calc(7px + calc(100% var(--trace-end)) - calc(16px * var(--trace-end))) -\n calc(\n 7px + calc(100% * var(--trace-start)) -\n calc(16px * var(--trace-start))\n )\n );\n\n left: calc(\n 7px + calc(100% * var(--trace-start)) - calc(16px * var(--trace-start))\n );\n\n height: 4px;\n background-color: var(--trace-color);\n top: 50%;\n transform: translateY(-50%);\n }\n\n // Trace reference\n input[type='range'].trace:not(.hide-trace-reference)::after {\n content: '';\n position: absolute;\n display: block;\n width: 2px;\n height: 16px;\n background-color: var(--trace-reference-color);\n top: 50%;\n transform: translateY(-50%);\n left: calc(\n 7px + calc(100% * var(--trace-reference)) -\n calc(16px * var(--trace-reference))\n );\n }\n\n @include track() {\n background: transparent;\n height: 0.25rem;\n }\n\n @include clear-browser-thumb();\n\n @include thumb() {\n border-radius: 100px;\n background-color: var(--theme-color-dynamic);\n height: var(--thumb-size);\n width: var(--thumb-size);\n transition: all var(--theme-default-time) ease-in-out;\n z-index: 10;\n }\n\n @include thumb-hover() {\n transform: scale(1.2);\n background-color: var(--theme-color-dynamic);\n }\n\n @include thumb-active() {\n transform: scale(1.2);\n\n background-color: var(--theme-color-dynamic);\n }\n\n @include thumb-focus() {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: 0.125rem;\n }\n\n /* style datalist /\n .ticks {\n display: flex;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n }\n .ticks .tick {\n display: block;\n position: absolute;\n width: 8px;\n height: 8px;\n background-color: var(--tick-color);\n border-radius: 100px;\n top: 50%;\n transform: translateY(-50%);\n left: calc(var(--tick-value) 100% - 4px);\n }\n\n .ticks .tick.tick-active {\n background-color: var(--tick-color--active);\n }\n\n .slider {\n position: relative;\n display: block;\n width: 100%;\n height: 1.5rem;\n }\n\n .track {\n position: absolute;\n background-color: var(--track-color);\n height: 4px;\n width: calc(100% - 1rem);\n margin-left: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n left: 0px;\n }\n\n .thumb {\n display: block;\n position: absolute;\n background-color: transparent;\n height: 1rem;\n width: 1rem;\n border-radius: 100px;\n left: 0px;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .hide-tooltip {\n display: none;\n }\n\n .label {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.5rem;\n\n min-height: 0px;\n }\n\n .label-start {\n margin-left: 0.5rem;\n }\n\n .label-end {\n margin-right: 0.5rem;\n }\n\n .label-error {\n margin-left: 0.5rem;\n }\n}\n\n:host(.error) {\n --trace-color: var(--theme-color-alarm-40);\n --tick-color--active: var(--theme-color-alarm);\n\n @include thumb() {\n background-color: var(--theme-color-alarm);\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n\n --track-color: var(--theme-color-component-3);\n --trace-color: var(--theme-color-3);\n --tick-color: var(--theme-color-7);\n --tick-color--active: var(--theme-color-7);\n\n @include thumb() {\n background-color: var(--theme-color-7);\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 h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport { OnListener } from '../utils/listener';\n\nexport type SliderMarker = Array<number>;\n\nfunction between(min: number, value: number, max: number) {\n if (value < min) {\n return min;\n } else if (value > max) {\n return max;\n } else {\n return value;\n }\n}\n\n/\n @since 2.0.0\n \n @slot label-start - Element will be displayed at the start of the slider\n * @slot label-end - Element will be displayed at the end of the slider\n /\n@Component({\n tag: 'ix-slider',\n styleUrl: 'slider.scss',\n shadow: true,\n})\nexport class Slider {\n @Element() hostElement!: HTMLIxSliderElement;\n\n /\n Legal number intervals\n \n @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step\n /\n @Prop() step: number = 1;\n\n /\n Minimum slider value\n /\n @Prop() min = 0;\n\n /\n Maximum slider value\n /\n @Prop() max = 100;\n\n /\n Current value of the slider\n /\n @Prop() value = 0;\n\n /\n Define tick marker on the slider. Marker has to be within slider min/max\n /\n @Prop() marker?: SliderMarker;\n\n /\n Show a trace line\n /\n @Prop() trace = false;\n\n /\n Define the start point of the trace line\n /\n @Prop() traceReference = 0;\n\n /\n Show control as disabled\n /\n @Prop() disabled = false;\n\n /\n Show error state and message\n /\n @Prop() error?: boolean \| string;\n\n /\n \n /\n @Event() valueChange!: EventEmitter<number>;\n\n @State() rangeInput = 0;\n @State() rangeMin = 0;\n @State() rangeMax = 100;\n @State() rangeTraceReference = 0;\n @State() showTooltip = false;\n\n private a11yAttributes?: A11yAttributes;\n\n get tooltip() {\n return this.hostElement.shadowRoot?.querySelector('ix-tooltip');\n }\n\n get pseudoThumb() {\n return this.hostElement.shadowRoot?.querySelector('.thumb') as HTMLElement;\n }\n\n get slider() {\n return this.hostElement.shadowRoot?.getElementById(\n 'slider'\n ) as HTMLInputElement;\n }\n\n @Watch('showTooltip')\n onShowTooltipChange() {\n if (this.showTooltip) {\n this.tooltip?.showTooltip(this.pseudoThumb);\n return;\n }\n\n this.tooltip?.hideTooltip();\n }\n\n componentWillLoad() {\n this.a11yAttributes = a11yHostAttributes(this.hostElement, [\n 'role',\n 'aria-valuemin',\n 'aria-valuemax',\n 'aria-valuenow',\n ]);\n this.updateRangeVariables();\n }\n\n @Watch('value')\n @Watch('max')\n @Watch('min')\n @Watch('traceReference')\n private updateRangeVariables() {\n this.rangeInput = between(this.min, this.value, this.max);\n this.rangeTraceReference = between(this.min, this.traceReference, this.max);\n this.rangeMin = Math.min(this.min, this.max);\n this.rangeMax = Math.max(this.min, this.max);\n }\n\n private onInput(event: InputEvent) {\n event.stopPropagation();\n const value = parseInt(this.slider.value);\n\n if (!isNaN(value)) {\n this.rangeInput = value;\n this.emitInputEvent();\n }\n }\n\n private emitInputEvent() {\n this.valueChange.emit(this.rangeInput);\n }\n\n private isMarkerActive(markerValue: number) {\n const start = Math.min(this.traceReference, this.rangeInput);\n const end = Math.max(this.traceReference, this.rangeInput);\n const value = markerValue;\n\n return value >= start && value <= end;\n }\n\n // Listen globally on window because sometimes the event listener\n // of the DOM element input itself is not called if the release\n // click is not inside the element anymore\n @OnListener<Slider>('pointerup', (self) => self.showTooltip)\n onPointerUp() {\n this.showTooltip = false;\n }\n\n render() {\n const range = this.rangeMax - this.rangeMin;\n\n let traceReferenceInPercentage =\n (this.rangeTraceReference - this.rangeMin) / range;\n\n let valueInPercentage = (this.rangeInput - this.rangeMin) / range;\n\n const distance = valueInPercentage - traceReferenceInPercentage;\n\n let traceStart = traceReferenceInPercentage;\n let traceEnd = valueInPercentage;\n\n if (distance <= 0) {\n traceStart = valueInPercentage;\n traceEnd = traceReferenceInPercentage;\n }\n\n return (\n <Host\n class={{\n disabled: this.disabled,\n error: !!this.error,\n }}\n onPointerDown={() => setTimeout(() => (this.showTooltip = true))}\n >\n <div class=\"slider\">\n <div class=\"track\">\n <div\n class=\"thumb\"\n style={{\n left: `calc(${valueInPercentage} 100% - 8px)`,\n }}\n ></div>\n <div class=\"ticks\">\n {this.marker\n ? this.marker.map((markerValue) => {\n if (markerValue > this.max \|\| markerValue < this.min) {\n return;\n }\n\n let left = (markerValue - this.rangeMin) / range;\n\n return (\n <div\n class={{\n tick: true,\n 'tick-active':\n this.isMarkerActive(markerValue) && this.trace,\n }}\n style={{\n '--tick-value': `${left}`,\n }}\n ></div>\n );\n })\n : null}\n </div>\n </div>\n\n <input\n id=\"slider\"\n type=\"range\"\n list={this.marker ? 'markers' : undefined}\n step={this.step}\n min={this.min}\n max={this.max}\n value={this.rangeInput}\n tabindex={this.disabled ? -1 : 0}\n onInput={(event) => this.onInput(event)}\n style={{\n '--value': `${valueInPercentage}`,\n '--trace-reference': `${traceReferenceInPercentage}`,\n '--trace-start': `${traceStart}`,\n '--trace-end': `${traceEnd}`,\n }}\n class={{\n trace:\n this.trace && traceReferenceInPercentage !== valueInPercentage,\n 'hide-trace-reference':\n this.trace &&\n (this.traceReference <= this.min \|\|\n this.traceReference >= this.max),\n }}\n onFocus={() => {\n this.showTooltip = true;\n }}\n onBlur={() => {\n this.showTooltip = false;\n }}\n role=\"slider\"\n aria-valuenow={this.rangeInput}\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n {...this.a11yAttributes}\n />\n\n <ix-tooltip\n class={{\n 'hide-tooltip': !this.showTooltip,\n }}\n animationFrame={true}\n >\n {this.rangeInput}\n </ix-tooltip>\n </div>\n <div class=\"label\">\n <div class=\"label-start\">\n <slot name=\"label-start\"></slot>\n </div>\n <div class=\"label-end\">\n <slot name=\"label-end\"></slot>\n </div>\n </div>\n {this.error ? (\n <ix-typography class={'label-error'} color=\"alarm\">\n {this.error}\n </ix-typography>\n ) : null}\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-split-button-item.js CHANGED Viewed

@@ -20,7 +20,7 @@ const SplitButtonItem = /*@__PURE__*/ proxyCustomElement(class SplitButtonItem e
         return this.wrapperRef.waitForCurrent();
     }
     render() {
-        return (h(Host, { key: 'ef07b2d6b51ae7356319d47e610517676651f2ae' }, h("ix-dropdown-item", { key: '83b4d7597071c2337aae657211c2c093fabe5eb1', ref: this.wrapperRef, suppressChecked: true, icon: this.icon, label: this.label, onItemClick: (e) => {
+        return (h(Host, { key: 'dd2f9ba13231244d5eb7071c68f19ec2029b411a' }, h("ix-dropdown-item", { key: '0024bb200f0924ba9e7cdced2cc4958fb8da43df', ref: this.wrapperRef, suppressChecked: true, icon: this.icon, label: this.label, onItemClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
             }, onClick: (e) => this.itemClick.emit(e) })));

package/components/ix-split-button.js CHANGED Viewed

@@ -42,7 +42,7 @@ const SplitButton = /*@__PURE__*/ proxyCustomElement(class SplitButton extends H
                 'left-button-border': !this.outline,
             },
         };
-        return (h(Host, { key: 'bb21ed75adde121f259f91f81bd31759c44506b3' }, h("div", { key: '4d01032c03219872efd5d810cc2aa6a2299b5035', class: { 'btn-group': true, 'middle-gap': !this.outline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }))), h("ix-icon-button", Object.assign({ key: 'fc6b09e850a040b1c94bef3c5c94990a0bc3536e' }, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: this.splitIcon }))), h("ix-dropdown", { key: 'b15691847893a1bd3f62798fb59fa7448b5f233c', ref: (r) => (this.dropdownElement = r), closeBehavior: this.closeBehavior }, h("slot", { key: 'bdc62653adb7255a13584883d2ef3b798170d949' }))));
+        return (h(Host, { key: 'e452c205dc4ff169a9c01b757e913506be6cc217' }, h("div", { key: '926ce0fb8cca44d56d2d975a17858de163f67154', class: { 'btn-group': true, 'middle-gap': !this.outline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }))), h("ix-icon-button", Object.assign({ key: 'acc87b0c8506fc0d7e1e4314bbf9d6edd4a2428a' }, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: this.splitIcon }))), h("ix-dropdown", { key: '2bbd1e58b11b0f8c733c969a05a9ad14d8e99c94', ref: (r) => (this.dropdownElement = r), closeBehavior: this.closeBehavior }, h("slot", { key: '1da482f78a3ac0d6b54ee6c903ce11827c2bf7b1' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxSplitButtonStyle0; }

package/components/ix-tile.js CHANGED Viewed

@@ -19,17 +19,17 @@ const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
         this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
     }
     render() {
-        return (h(Host, { key: '16fa86cdf2448b3335401be00cba0284fd166959', class: {
+        return (h(Host, { key: 'cfe05def01cd57c9743a8fccbecbd41b643a9fe2', class: {
                 'tile-small': this.size === 'small',
                 'tile-medium': this.size === 'medium',
                 'tile-big': this.size === 'big',
-            } }, h("div", { key: '0aaf6e763e1bd75f919d1067208af8a33be06937', class: {
+            } }, h("div", { key: 'e37a76b559db0e0a9f8cc48aafad34ab9fcbc6c3', class: {
                 'tile-header': true,
                 'has-content': this.hasHeaderSlot,
-            } }, h("slot", { key: '70178ba49417bf674cc8798f6824aa37864668f7', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '823a4907cbe143ef6586a5482f31c8729644bf76', class: "tile-subheader" }, h("slot", { key: '6e240f390b24fec6630bed00539479d11d89b096', name: "subheader" })), h("div", { key: '7d83cbe84804423f654e4f9dd0fe3f2ca261a3c4', class: "tile-content" }, h("slot", { key: '100276ea9333c7dd7d183dbd7fb2651475b397cf' })), h("div", { key: 'f73dcff2a9730339deed5c82c0978ff4122dd6a5', class: {
+            } }, h("slot", { key: 'd14c60fa3a20b9312257f55edda792ea6b4a7cee', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: 'db36b0c56a63976a72573681618338f433887669', class: "tile-subheader" }, h("slot", { key: '451561552ddb35ccdc429d944252f5a0dadb8a0e', name: "subheader" })), h("div", { key: 'd793f4019d8e37ede2a0f866aff1c501b5619651', class: "tile-content" }, h("slot", { key: 'afc3df10a7b4ff6c05cf0d87ff78dbe7ecee776e' })), h("div", { key: '14cc913a9c35b73a58a8d618c6ea7cc75e1d5743', class: {
                 'tile-footer': true,
                 'has-content': this.hasFooterSlot,
-            } }, h("slot", { key: 'a550b2cc798c1bc8a57adea6c6fcd4863ad9ac57', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
+            } }, h("slot", { key: '184e7b7313f40d2478541e6f599bb462d1c0f286', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
     }
     get hostElement() { return this; }
     static get style() { return IxTileStyle0; }

package/components/ix-toast-container.js CHANGED Viewed

@@ -79,10 +79,10 @@ const ToastContainer = /*@__PURE__*/ proxyCustomElement(class ToastContainer ext
         };
     }
     render() {
-        return (h(Host, { key: '22ee0d6985d0b35a3d623dfc318c22cb0a2720ae', class: {
+        return (h(Host, { key: '4c3986ebc5843f0d1846527f602851d82bd525d7', class: {
                 'toast-container--bottom-right': this.position === 'bottom-right',
                 'toast-container--top-right': this.position === 'top-right',
-            } }, h("slot", { key: '9cfd7c6607fde4dd11f6b4c026f017b31acba8d9' })));
+            } }, h("slot", { key: '6d9c87e3bfddb1b1bf0fbebdd06efad5347b5390' })));
     }
     static get watchers() { return {
         "position": ["onPositionChange"]

package/components/ix-toggle-button.js CHANGED Viewed

@@ -60,9 +60,9 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
                 'aria-pressed': a11yBoolean(this.pressed),
             },
         };
-        return (h(Host, { key: 'f8633f71b51df3509bc679922b432bd5c530d580', class: {
+        return (h(Host, { key: 'bec8a150fd761e11ed81ae3803a8e62d6a250ec7', class: {
                 disabled: this.disabled || this.loading,
-            } }, h(BaseButton, Object.assign({ key: '005a4497d2d37783c6dcf2824c471b56515396ed' }, baseButtonProps), h("slot", { key: '9cafada091aa59fd6b447a2821f58ebd504875cd' }))));
+            } }, h(BaseButton, Object.assign({ key: 'b0e6ee7a113ea8d9b417b8de62cf816fb78b49ca' }, baseButtonProps), h("slot", { key: 'ce9fd3a28d4c7048d14618bd7813f4c84a4ac255' }))));
     }
     static get watchers() { return {
         "variant": ["onVariantChange"],

package/components/ix-toggle.js CHANGED Viewed

@@ -26,9 +26,9 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         this.checkedChange.emit(this.checked);
     }
     render() {
-        return (h(Host, { key: 'ffc42b6828208dcf6483abfda90ae88dd43ee408', class: {
+        return (h(Host, { key: '46cf23f4ae6803763da9344dfd9374aa2e307e14', class: {
                 disabled: this.disabled,
-            }, onClick: () => this.onCheckedChange(!this.checked) }, h("input", { key: '35954eafdb6301bb6e7063a8978f2bfcc7076de0', disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, role: "switch", tabindex: 0, type: "checkbox", "aria-checked": a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), h("label", { key: '0aed058713bc742c3408accee2e3551313a1ad31', class: "switch", tabIndex: -1 }, h("span", { key: '62fbfca9e3adb625006e981f4ae655d2989d9aef', class: "slider" })), !this.hideText ? (h(Fragment, null, !this.indeterminate ? (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.checked ? this.textOn : this.textOff)) : (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.textIndeterminate)))) : null));
+            }, onClick: () => this.onCheckedChange(!this.checked) }, h("input", { key: '3e85c5ebee51ea769bce59bf215a050e8196cc02', disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, role: "switch", tabindex: 0, type: "checkbox", "aria-checked": a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), h("label", { key: 'd09e1342cbb63f4e5b0f18d2071260b47405eaa4', class: "switch", tabIndex: -1 }, h("span", { key: '94d1afb922bd8da6aa62dec9aa94bf350d507bc7', class: "slider" })), !this.hideText ? (h(Fragment, null, !this.indeterminate ? (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.checked ? this.textOn : this.textOff)) : (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.textIndeterminate)))) : null));
     }
     get hostElement() { return this; }
     static get style() { return IxToggleStyle0; }

package/components/ix-tree.js CHANGED Viewed

@@ -698,7 +698,7 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class Tree extends HTMLElement {
         this.hyperlist = new Hyperlist(this.hostElement, config);
     }
     render() {
-        return (h(Host, { key: '5e3f0e8bbd14073590ed9ae548fa51abb50bd52b' }, h("slot", { key: '9e05d42472878f4791cce2033271e1918d40c38f' })));
+        return (h(Host, { key: 'c663df76252b24029b33792151c943519a7c3be1' }, h("slot", { key: 'cfd96717be68c7c4e4c0b9e344ecd4c48481e1e0' })));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-upload.js CHANGED Viewed

@@ -85,7 +85,7 @@ const Upload = /*@__PURE__*/ proxyCustomElement(class Upload extends HTMLElement
         this.filesToUpload = obj;
     }
     render() {
-        return (h(Host, { key: 'c13c30ad2fa2a251ad872d7b0461f625798a3d2a' }, h("div", { key: '572bf6899630cdc1fdff1518750415270792a368', class: {
+        return (h(Host, { key: '65168929ba323f1a3eea30d4812d4da20f120fa4' }, h("div", { key: '9b6d1e303b8a117a329ce55fa54a05f7ecd59359', class: {
                 'file-upload-area': true,
                 'file-over': this.state !== UploadFileState.LOADING && this.isFileOver,
                 checking: this.state === UploadFileState.LOADING,
@@ -95,9 +95,9 @@ const Upload = /*@__PURE__*/ proxyCustomElement(class Upload extends HTMLElement
                 if (this.state !== UploadFileState.LOADING) {
                     this.fileDropped(e);
                 }
-            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), h("div", { key: '5c48357676e704f0e285e510059593c526ca47fc' }, h("input", { key: '5ed9faca22b46db4962c64ff3822c59d3e44cf95', multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", onChange: (e) => {
+            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), h("div", { key: '069112fd233fb12c6cd6512ad7283015952caf0b' }, h("input", { key: '64bfed06cda8cae2f20ab441f4b3f0fe373de90f', multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", onChange: (e) => {
                 this.fileChangeEvent(e);
-            }, accept: this.accept }), h("ix-button", { key: '6e5bcfec5d982c8674e6bf38bbf1e0d805b1af0f', tabindex: "-1", outline: true, onClick: () => this.inputElement.click(), disabled: this.disabled || this.state === UploadFileState.LOADING }, this.i18nUploadFile)))));
+            }, accept: this.accept }), h("ix-button", { key: '99f054605ac4d39ad7a6e1258e0cc50302305157', tabindex: "-1", outline: true, onClick: () => this.inputElement.click(), disabled: this.disabled || this.state === UploadFileState.LOADING }, this.i18nUploadFile)))));
     }
     get hostElement() { return this; }
     static get style() { return IxUploadStyle0; }

package/components/ix-validation-tooltip.js CHANGED Viewed

@@ -131,13 +131,13 @@ const ValidationTooltip = /*@__PURE__*/ proxyCustomElement(class ValidationToolt
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '2adabc09b27adab332a05e06f95f778e635db7cf' }, h("slot", { key: '9737aa1f46813f88404c5a80eaf0b8e1c6b166c4' }), h("div", { key: '6be2cd8f7c24bd7c3ddc42218ca0b70d3c56dc0a', role: "tooltip", style: {
+        return (h(Host, { key: '03529de843b174960fbf2305279a385863eafa97' }, h("slot", { key: '09d4953c82d7c7da4524f03e34bcfb14f0aecf0a' }), h("div", { key: 'de68c2b62188b7af6967c705406cd9ab16c6ae3c', role: "tooltip", style: {
                 display: 'none',
                 position: 'fixed',
                 top: '0',
                 left: '0',
                 transform: `translate(${Math.round(((_a = this.tooltipPosition) === null || _a === void 0 ? void 0 : _a.x) || 0)}px,${Math.round(((_b = this.tooltipPosition) === null || _b === void 0 ? void 0 : _b.y) || 0)}px)`,
-            }, class: "validation-tooltip text-default" }, this.message, h("slot", { key: '228c539e4447ce9a4c89ffe584f9b712ccaa1924', name: "tooltip-message" }), h("div", { key: 'cdbaf18c6c2033b9b03e33b4e5826309f504df14', id: "arrow" }))));
+            }, class: "validation-tooltip text-default" }, this.message, h("slot", { key: 'd8e27c42630a720a9ecf52ee80d6a7eec3eb7105', name: "tooltip-message" }), h("div", { key: '89318eefd163aaff6cfb5c5d295423db498c26ca', id: "arrow" }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {