npm - @siemens/ix - Versions diffs - 3.0.0-alpha.4 → 3.0.0 - Mend

@siemens/ix 3.0.0-alpha.4 → 3.0.0

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

package/dist/collection/components/tabs/tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\nimport {\n iconChevronLeftSmall,\n iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-tabs',\n styleUrl: 'tabs.scss',\n shadow: true,\n})\nexport class Tabs {\n @Element() hostElement!: HTMLIxTabsElement;\n\n /\n Set tab items to small size\n /\n @Prop() small = false;\n\n /\n Set rounded tabs\n /\n @Prop() rounded = false;\n\n /\n Set default selected tab by index\n /\n @Prop({ mutable: true }) selected = 0;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set placement style\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n `selected` property changed\n \n @since 2.0.0\n /\n @Event() selectedChange!: EventEmitter<number>;\n\n @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n @State() scrollActionAmount = 0;\n @State() showArrowPrevious = false;\n @State() showArrowNext = false;\n\n private windowStartSize = window.innerWidth;\n private resizeObserver?: ResizeObserver;\n\n private clickAction: {\n timeout: NodeJS.Timeout \| null;\n isClick: boolean;\n } = {\n timeout: null,\n isClick: true,\n };\n\n @Listen('resize', { target: 'window' })\n onWindowResize() {\n this.totalItems = 0;\n this.totalItems = this.getTabs().length;\n\n if (this.windowStartSize === 0)\n return (this.windowStartSize = window.innerWidth);\n this.move(this.windowStartSize - window.innerWidth);\n this.windowStartSize = window.innerWidth;\n }\n\n private getTabs() {\n return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n }\n\n private getTab(tabIndex: number) {\n return this.getTabs()[tabIndex];\n }\n\n private getTabsWrapper() {\n return this.hostElement.shadowRoot?.querySelector('.items-content');\n }\n\n private initResizeObserver() {\n const parentElement = this.hostElement.parentElement;\n if (!parentElement) return;\n this.resizeObserver = new ResizeObserver(() => {\n this.renderArrows();\n });\n this.resizeObserver.observe(parentElement);\n }\n\n private showArrows() {\n try {\n const tabWrapper = this.getTabsWrapper();\n return (\n tabWrapper &&\n tabWrapper.scrollWidth >\n Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n this.layout === 'auto'\n );\n } catch (error) {\n return false;\n }\n }\n\n private showPreviousArrow() {\n try {\n return this.showArrows() === true && this.scrollActionAmount < 0;\n } catch (error) {\n return false;\n }\n }\n\n private showNextArrow() {\n try {\n const tabWrapper = this.getTabsWrapper();\n\n if (!tabWrapper) {\n return false;\n }\n\n const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n return (\n this.showArrows() === true &&\n this.scrollActionAmount >\n (tabWrapper.scrollWidth - tabWrapperRect.width) -1\n );\n } catch (error) {\n return false;\n }\n }\n\n private move(amount: number, click = false) {\n const tabsWrapper = this.getTabsWrapper();\n\n if (!tabsWrapper) {\n return;\n }\n\n const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;\n const maxScrollWidth =\n -this.currentScrollAmount +\n tabsWrapperVisibleWidth -\n tabsWrapper.scrollWidth;\n\n amount = amount < maxScrollWidth ? maxScrollWidth : amount;\n amount += this.currentScrollAmount;\n amount = Math.min(amount, 0);\n\n const styles = [\n `transform: translateX(${amount}px);`,\n click ? 'transition: all ease-in-out 400ms;' : '',\n ].join('');\n\n tabsWrapper.setAttribute('style', styles);\n\n if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n else this.scrollActionAmount = amount;\n }\n\n @Watch('selected')\n onSelectedChange(newValue: number) {\n if (!this.showArrows()) return;\n\n const tabRect = this.getTab(newValue).getBoundingClientRect();\n const wrapperWidth = this.getTabsWrapper()?.clientWidth;\n const arrowWidth = 32;\n\n if (tabRect.left < arrowWidth) {\n this.move(-tabRect.left + arrowWidth, true);\n } else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {\n this.move(wrapperWidth - tabRect.right - arrowWidth, true);\n }\n }\n\n private setSelected(index: number) {\n this.selected = index;\n }\n\n private clickTab(index: number) {\n if (!this.clickAction.isClick \|\| this.dragStop()) {\n return;\n }\n\n const { defaultPrevented } = this.selectedChange.emit(index);\n if (defaultPrevented) {\n return;\n }\n\n this.setSelected(index);\n }\n\n private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n if (!this.showArrows()) return;\n if (event.button > 0) return;\n\n this.clickAction.timeout =\n this.clickAction.timeout === null\n ? setTimeout(() => (this.clickAction.isClick = false), 300)\n : null;\n\n const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n const mousedownPositionX = event.clientX;\n const move = (event: MouseEvent) =>\n this.dragMove(event, tabPositionX, mousedownPositionX);\n const windowClick = () => {\n window.removeEventListener('mousemove', move, false);\n window.removeEventListener('click', windowClick, false);\n this.dragStop();\n };\n window.addEventListener('click', windowClick);\n window.addEventListener('mousemove', move, false);\n }\n\n private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n this.move(event.clientX + tabX - mousedownX);\n }\n\n private dragStop() {\n if (this.clickAction.timeout) {\n clearTimeout(this.clickAction.timeout);\n this.clickAction.timeout = null;\n }\n\n if (this.clickAction.isClick) return false;\n\n this.currentScrollAmount = this.scrollActionAmount;\n this.clickAction.isClick = true;\n\n return true;\n }\n\n componentWillLoad() {\n const tabs = this.getTabs();\n\n tabs.map((element, index) => {\n if (this.small) element.setAttribute('small', 'true');\n\n if (this.rounded) element.setAttribute('rounded', 'true');\n\n element.setAttribute('layout', this.layout);\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n\n element.setAttribute('placement', this.placement);\n });\n\n this.initResizeObserver();\n }\n\n componentDidRender() {\n const tabs = this.getTabs();\n this.totalItems = tabs.length;\n\n tabs.map((element, index) => {\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n });\n }\n\n componentWillRender() {\n this.renderArrows();\n }\n\n private renderArrows() {\n requestAnimationFrameNoNgZone(() => {\n this.showArrowNext = this.showNextArrow();\n this.showArrowPrevious = this.showPreviousArrow();\n });\n }\n\n componentDidLoad() {\n const tabs = this.getTabs();\n tabs.forEach((element) => {\n element.addEventListener('mousedown', (event) =>\n this.dragStart(element, event)\n );\n });\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n @Listen('tabClick')\n onTabClick(event: CustomEvent) {\n if (event.defaultPrevented) {\n return;\n }\n\n const target = event.target;\n const tabs = this.getTabs();\n\n tabs.forEach((tab, index) => {\n if (!tab.disabled && tab === target) {\n this.clickTab(index);\n }\n });\n }\n\n render() {\n return (\n <Host>\n {this.showArrowPrevious && (\n <div class=\"arrow\" onClick={() => this.move(this.scrollAmount, true)}>\n <ix-icon name={iconChevronLeftSmall}></ix-icon>\n </div>\n )}\n <div\n class={{\n 'tab-items': true,\n 'overflow-shadow': true,\n 'shadow-left': this.showArrowPrevious,\n 'shadow-right': this.showArrowNext,\n 'shadow-both': this.showArrowNext && this.showArrowPrevious,\n }}\n >\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n {this.showArrowNext && (\n <div\n class=\"arrow right\"\n onClick={() => this.move(-this.scrollAmount, true)}\n >\n <ix-icon name={iconChevronRightSmall}></ix-icon>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\nimport {\n iconChevronLeftSmall,\n iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-tabs',\n styleUrl: 'tabs.scss',\n shadow: true,\n})\nexport class Tabs {\n @Element() hostElement!: HTMLIxTabsElement;\n\n /\n Set tab items to small size\n /\n @Prop() small = false;\n\n /\n Set rounded tabs\n /\n @Prop() rounded = false;\n\n /\n Set default selected tab by index\n /\n @Prop({ mutable: true }) selected = 0;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set placement style\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n `selected` property changed\n /\n @Event() selectedChange!: EventEmitter<number>;\n\n @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n @State() scrollActionAmount = 0;\n @State() showArrowPrevious = false;\n @State() showArrowNext = false;\n\n private windowStartSize = window.innerWidth;\n private resizeObserver?: ResizeObserver;\n\n private clickAction: {\n timeout: NodeJS.Timeout \| null;\n isClick: boolean;\n } = {\n timeout: null,\n isClick: true,\n };\n\n @Listen('resize', { target: 'window' })\n onWindowResize() {\n this.totalItems = 0;\n this.totalItems = this.getTabs().length;\n\n if (this.windowStartSize === 0)\n return (this.windowStartSize = window.innerWidth);\n this.move(this.windowStartSize - window.innerWidth);\n this.windowStartSize = window.innerWidth;\n }\n\n private getTabs() {\n return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n }\n\n private getTab(tabIndex: number) {\n return this.getTabs()[tabIndex];\n }\n\n private getTabsWrapper() {\n return this.hostElement.shadowRoot?.querySelector('.items-content');\n }\n\n private initResizeObserver() {\n const parentElement = this.hostElement.parentElement;\n if (!parentElement) return;\n this.resizeObserver = new ResizeObserver(() => {\n this.renderArrows();\n });\n this.resizeObserver.observe(parentElement);\n }\n\n private showArrows() {\n try {\n const tabWrapper = this.getTabsWrapper();\n return (\n tabWrapper &&\n tabWrapper.scrollWidth >\n Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n this.layout === 'auto'\n );\n } catch (error) {\n return false;\n }\n }\n\n private showPreviousArrow() {\n try {\n return this.showArrows() === true && this.scrollActionAmount < 0;\n } catch (error) {\n return false;\n }\n }\n\n private showNextArrow() {\n try {\n const tabWrapper = this.getTabsWrapper();\n\n if (!tabWrapper) {\n return false;\n }\n\n const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n return (\n this.showArrows() === true &&\n this.scrollActionAmount >\n (tabWrapper.scrollWidth - tabWrapperRect.width) -1\n );\n } catch (error) {\n return false;\n }\n }\n\n private move(amount: number, click = false) {\n const tabsWrapper = this.getTabsWrapper();\n\n if (!tabsWrapper) {\n return;\n }\n\n const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;\n const maxScrollWidth =\n -this.currentScrollAmount +\n tabsWrapperVisibleWidth -\n tabsWrapper.scrollWidth;\n\n amount = amount < maxScrollWidth ? maxScrollWidth : amount;\n amount += this.currentScrollAmount;\n amount = Math.min(amount, 0);\n\n const styles = [\n `transform: translateX(${amount}px);`,\n click ? 'transition: all ease-in-out 400ms;' : '',\n ].join('');\n\n tabsWrapper.setAttribute('style', styles);\n\n if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n else this.scrollActionAmount = amount;\n }\n\n @Watch('selected')\n onSelectedChange(newValue: number) {\n if (!this.showArrows()) return;\n\n const tabRect = this.getTab(newValue).getBoundingClientRect();\n const wrapperWidth = this.getTabsWrapper()?.clientWidth;\n const arrowWidth = 32;\n\n if (tabRect.left < arrowWidth) {\n this.move(-tabRect.left + arrowWidth, true);\n } else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {\n this.move(wrapperWidth - tabRect.right - arrowWidth, true);\n }\n }\n\n private setSelected(index: number) {\n this.selected = index;\n }\n\n private clickTab(index: number) {\n if (!this.clickAction.isClick \|\| this.dragStop()) {\n return;\n }\n\n const { defaultPrevented } = this.selectedChange.emit(index);\n if (defaultPrevented) {\n return;\n }\n\n this.setSelected(index);\n }\n\n private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n if (!this.showArrows()) return;\n if (event.button > 0) return;\n\n this.clickAction.timeout =\n this.clickAction.timeout === null\n ? setTimeout(() => (this.clickAction.isClick = false), 300)\n : null;\n\n const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n const mousedownPositionX = event.clientX;\n const move = (event: MouseEvent) =>\n this.dragMove(event, tabPositionX, mousedownPositionX);\n const windowClick = () => {\n window.removeEventListener('mousemove', move, false);\n window.removeEventListener('click', windowClick, false);\n this.dragStop();\n };\n window.addEventListener('click', windowClick);\n window.addEventListener('mousemove', move, false);\n }\n\n private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n this.move(event.clientX + tabX - mousedownX);\n }\n\n private dragStop() {\n if (this.clickAction.timeout) {\n clearTimeout(this.clickAction.timeout);\n this.clickAction.timeout = null;\n }\n\n if (this.clickAction.isClick) return false;\n\n this.currentScrollAmount = this.scrollActionAmount;\n this.clickAction.isClick = true;\n\n return true;\n }\n\n componentWillLoad() {\n const tabs = this.getTabs();\n\n tabs.map((element, index) => {\n if (this.small) element.setAttribute('small', 'true');\n\n if (this.rounded) element.setAttribute('rounded', 'true');\n\n element.setAttribute('layout', this.layout);\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n\n element.setAttribute('placement', this.placement);\n });\n\n this.initResizeObserver();\n }\n\n componentDidRender() {\n const tabs = this.getTabs();\n this.totalItems = tabs.length;\n\n tabs.map((element, index) => {\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n });\n }\n\n componentWillRender() {\n this.renderArrows();\n }\n\n private renderArrows() {\n requestAnimationFrameNoNgZone(() => {\n this.showArrowNext = this.showNextArrow();\n this.showArrowPrevious = this.showPreviousArrow();\n });\n }\n\n componentDidLoad() {\n const tabs = this.getTabs();\n tabs.forEach((element) => {\n element.addEventListener('mousedown', (event) =>\n this.dragStart(element, event)\n );\n });\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n @Listen('tabClick')\n onTabClick(event: CustomEvent) {\n if (event.defaultPrevented) {\n return;\n }\n\n const target = event.target;\n const tabs = this.getTabs();\n\n tabs.forEach((tab, index) => {\n if (!tab.disabled && tab === target) {\n this.clickTab(index);\n }\n });\n }\n\n render() {\n return (\n <Host>\n {this.showArrowPrevious && (\n <div class=\"arrow\" onClick={() => this.move(this.scrollAmount, true)}>\n <ix-icon name={iconChevronLeftSmall}></ix-icon>\n </div>\n )}\n <div\n class={{\n 'tab-items': true,\n 'overflow-shadow': true,\n 'shadow-left': this.showArrowPrevious,\n 'shadow-right': this.showArrowNext,\n 'shadow-both': this.showArrowNext && this.showArrowPrevious,\n }}\n >\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n {this.showArrowNext && (\n <div\n class=\"arrow right\"\n onClick={() => this.move(-this.scrollAmount, true)}\n >\n <ix-icon name={iconChevronRightSmall}></ix-icon>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/time-picker/time-picker.js CHANGED Viewed

@@ -14,8 +14,6 @@ export class TimePicker {
         /**
          * Format of time string
          * See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
-         *
-         * @since 1.1.0
          */
         this.format = 'TT';
         /**
@@ -41,20 +39,14 @@ export class TimePicker {
         /**
          * Select time with format string
          * Format has to match the `format` property.
-         *
-         * @since 1.1.0
          */
         this.time = DateTime.now().toFormat(this.format);
         /**
          * Text of date select button
-         *
-         * @since 1.1.0
          */
         this.textSelectTime = 'Done';
         /**
          * Text for top label
-         *
-         * @since 2.1.0
          */
         this.textTime = 'Time';
     }
@@ -148,7 +140,7 @@ export class TimePicker {
             },
         ];
         timepickerInformation = timepickerInformation.filter((item) => !item.hidden);
-        return (h(Host, { key: '3324e541eaee13441527be68f301725504662914' }, h("ix-date-time-card", { key: '5cca6cc594555537fabb7559fa772f0108288f02', standaloneAppearance: this.standaloneAppearance, corners: this.corners }, h("div", { key: '23dd6dbf7b2ce70d43ac1175e7142732561e4a4c', class: "header", slot: "header" }, h("ix-typography", { key: 'e3357692be47ce40ed0082febf7d2c0e7ce25749', format: "h5" }, this.textTime || 'Time')), h("div", { key: 'a1b0ccb5870ee7f3bb06ccb0b1d3c24c7df3c892', class: "clock" }, timepickerInformation.map((descriptor, index) => (h("div", { class: "flex" }, h("div", { class: { columns: true, hidden: descriptor.hidden } }, h("ix-icon-button", { size: "16", onClick: () => {
+        return (h(Host, { key: 'e88bc5d942730fa74a70bfaa04ea0658be50692b' }, h("ix-date-time-card", { key: '720c83b1a2711c1e27b445d361ae5ddead39b49d', standaloneAppearance: this.standaloneAppearance, corners: this.corners }, h("div", { key: '9916f41e86163d411496bf98bc2295e579b8bbdf', class: "header", slot: "header" }, h("ix-typography", { key: 'dfb71fb42d5f848c79c2cda7a0d9a9a0379c1783', format: "h5" }, this.textTime || 'Time')), h("div", { key: '18354a0657a181ba08c5b861641259493d914922', class: "clock" }, timepickerInformation.map((descriptor, index) => (h("div", { class: "flex" }, h("div", { class: { columns: true, hidden: descriptor.hidden } }, h("ix-icon-button", { size: "16", onClick: () => {
                 var _a;
                 return (this._time = (_a = this._time) === null || _a === void 0 ? void 0 : _a.plus({
                     [descriptor.unit]: 1,
@@ -175,15 +167,15 @@ export class TimePicker {
             }, ghost: true, icon: iconChevronDownSmall, variant: "primary", class: "arrows" })), index !== timepickerInformation.length - 1 && (h("div", { class: {
                 'column-seperator': true,
                 hidden: descriptor.hidden,
-            } }, ":"))))), h("div", { key: 'cc807c62c8d7f1a6d4d45c1460cdf5f25afdffd6', class: {
+            } }, ":"))))), h("div", { key: 'a2f591181b00b98848238267e49399b66c8f6f38', class: {
                 columns: true,
                 'default-space': true,
                 hidden: this._timeRef === undefined,
-            } }, h("ix-icon-button", { key: '80fd8ec8d709cfadff53f09b0d2d047e242568a0', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: iconChevronUp, variant: "primary", class: "arrows" }), h("div", { key: 'e7d47e9686c937fc83c614176e0722885d7c2b55', class: "time-reference" }, this._timeRef), h("ix-icon-button", { key: '7ca882f6dae9cae2bc180b79eff475a7c1ac944f', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: iconChevronDown, variant: "primary", class: "arrows" }))), h("div", { key: '63e6c67d7116d607b5b5635f7f47dec23978c126', class: {
+            } }, h("ix-icon-button", { key: 'fb3e96cf66d0a9e7b6946b901ee395185c8bae24', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: iconChevronUp, variant: "primary", class: "arrows" }), h("div", { key: '196388fb7200fe812e5de8dcd0d45746f655e69e', class: "time-reference" }, this._timeRef), h("ix-icon-button", { key: '4930ff7fab12df13685d35fdf3cdd669d023e937', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: iconChevronDown, variant: "primary", class: "arrows" }))), h("div", { key: '5d9b76e8f7047e9a550b5d86391f2e9f3bd0f434', class: {
                 button: true,
                 hidden: !this.standaloneAppearance,
                 standalone: true,
-            } }, h("ix-button", { key: '382a7d16a98d76b8687d0e84ecf8efaaa21a6d06', onClick: () => {
+            } }, h("ix-button", { key: '135b0d00c830734b46bd94fc1d69e044e679edaf', onClick: () => {
                 var _a;
                 this.timeSelect.emit((_a = this._time) === null || _a === void 0 ? void 0 : _a.toFormat(this.format));
             } }, this.textSelectTime)))));
@@ -214,10 +206,7 @@ export class TimePicker {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "1.1.0"
-                        }],
+                    "tags": [],
                     "text": "Format of time string\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens."
                 },
                 "getter": false,
@@ -343,10 +332,7 @@ export class TimePicker {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "1.1.0"
-                        }],
+                    "tags": [],
                     "text": "Select time with format string\nFormat has to match the `format` property."
                 },
                 "getter": false,
@@ -385,10 +371,7 @@ export class TimePicker {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "1.1.0"
-                        }],
+                    "tags": [],
                     "text": "Text of date select button"
                 },
                 "getter": false,
@@ -408,10 +391,7 @@ export class TimePicker {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "2.1.0"
-                        }],
+                    "tags": [],
                     "text": "Text for top label"
                 },
                 "getter": false,

package/dist/collection/components/time-picker/time-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-picker.js","sourceRoot":"","sources":["../../../src/components/time-picker/time-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\nimport {\n iconChevronDown,\n iconChevronDownSmall,\n iconChevronUp,\n iconChevronUpSmall,\n} from '@siemens/ix-icons/icons';\n\nexport type TimePickerCorners = DateTimeCardCorners;\n\ninterface TimePickerDescriptor {\n unit: 'hour' \| 'minute' \| 'second';\n placeholder: string;\n hidden: boolean;\n}\n\ninterface TimeOutputFormat {\n hour: string;\n minute: string;\n second: string;\n}\n\n@Component({\n tag: 'ix-time-picker',\n styleUrl: 'time-picker.scss',\n shadow: true,\n})\nexport class TimePicker {\n /\n Format of time string\n * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n \n @since 1.1.0\n /\n @Prop() format: string = 'TT';\n\n /\n Corner style\n /\n @Prop() corners: TimePickerCorners = 'rounded';\n\n /\n Controls the visual presentation and styling of the component when it is displayed as a standalone element\n /\n @Prop() standaloneAppearance: boolean = true;\n\n /\n Show hour input\n /\n @Prop() showHour = true;\n\n /\n Show minutes input\n /\n @Prop() showMinutes = true;\n\n /\n Show seconds input\n /\n @Prop() showSeconds = true;\n\n /\n Select time with format string\n * Format has to match the `format` property.\n \n @since 1.1.0\n /\n @Prop() time: string = DateTime.now().toFormat(this.format);\n\n @Watch('time')\n watchTimePropHandler(newValue: string) {\n this._time = DateTime.fromFormat(newValue, this.format);\n if (!this._time.isValid) {\n throw new Error('Format is not supported or not correct');\n }\n }\n\n /\n Set time reference\n /\n @Prop() timeReference: 'AM' \| 'PM' \| undefined;\n\n /\n Text of date select button\n \n @since 1.1.0\n /\n @Prop() textSelectTime = 'Done';\n\n /\n Text for top label\n \n @since 2.1.0\n /\n @Prop() textTime: string = 'Time';\n\n /\n Time event\n /\n @Event() timeSelect!: EventEmitter<string>;\n\n /\n Time change event\n /\n @Event() timeChange!: EventEmitter<string>;\n\n @State() private _time?: DateTime;\n @State() private _timeRef?: 'AM' \| 'PM';\n @State() private _formattedTime?: TimeOutputFormat;\n\n componentWillLoad() {\n this._time = DateTime.fromFormat(this.time, this.format);\n\n if (!this._time.isValid) {\n console.error(\n `Invalid time format. The configured format does not match the format of the passed time. ${this._time.invalidReason}: ${this._time.invalidExplanation}`\n );\n return;\n }\n\n this._timeRef = this.format.includes('a')\n ? (DateTime.fromFormat(this.time, this.format).toFormat('a') as\n \| 'AM'\n \| 'PM')\n : undefined;\n this.formatTime();\n }\n\n @Watch('_time')\n formatTime() {\n if (!this._time) {\n return;\n }\n\n const [hour, minute, second] = this._time\n .toFormat(this.format)\n .split(' ')[0]\n .split(':');\n\n this._formattedTime = {\n hour: hour,\n minute: minute,\n second: second,\n };\n }\n\n @Watch('_time')\n onInternalTimeChange() {\n this.timeChange.emit(this._time?.toFormat(this.format));\n if (this._timeRef) this._timeRef = this._time?.toFormat('a') as 'AM' \| 'PM';\n }\n\n timeUpdate(unit: 'hour' \| 'minute' \| 'second', value: number): number {\n let maxValue = DateTime.now().endOf('day').get(unit);\n\n if (this._timeRef === 'PM' && unit === 'hour') value += 12;\n if (this._timeRef === 'AM' && unit === 'hour') maxValue = 12;\n\n if (value > maxValue) {\n value = maxValue;\n } else if (value < 0) {\n value = 0;\n }\n\n this._time = this._time?.set({\n [unit]: value,\n });\n return value;\n }\n\n changeTimeReference() {\n this._timeRef = this._timeRef === 'AM' ? 'PM' : 'AM';\n\n if (!this._time?.toFormat('a').includes(this._timeRef)) {\n this._time = this._time?.plus({\n hour: 12,\n });\n }\n }\n\n /\n Get the current time based on the wanted format\n */\n @Method()\n async getCurrentTime() {\n return this._time?.toFormat(this.format);\n }\n\n render() {\n let timepickerInformation: TimePickerDescriptor[] = [\n {\n unit: 'hour',\n placeholder: 'HH',\n hidden: !this.showHour,\n },\n {\n unit: 'minute',\n placeholder: 'MM',\n hidden: !this.showMinutes,\n },\n {\n unit: 'second',\n placeholder: 'SS',\n hidden: !this.showSeconds,\n },\n ];\n\n timepickerInformation = timepickerInformation.filter(\n (item) => !item.hidden\n );\n\n return (\n <Host>\n <ix-date-time-card\n standaloneAppearance={this.standaloneAppearance}\n corners={this.corners}\n >\n <div class=\"header\" slot=\"header\">\n <ix-typography format=\"h5\">{this.textTime \|\| 'Time'}</ix-typography>\n </div>\n <div class=\"clock\">\n {timepickerInformation.map((descriptor, index: number) => (\n <div class=\"flex\">\n <div class={{ columns: true, hidden: descriptor.hidden }}>\n <ix-icon-button\n size=\"16\"\n onClick={() =>\n (this._time = this._time?.plus({\n [descriptor.unit]: 1,\n }))\n }\n ghost\n icon={iconChevronUpSmall}\n variant=\"primary\"\n class=\"arrows\"\n ></ix-icon-button>\n\n <input\n class=\"ix-form-control\"\n name={descriptor.unit}\n type=\"number\"\n placeholder={descriptor.placeholder}\n value={\n this._formattedTime\n ? this._formattedTime[descriptor.unit]\n : ''\n }\n onKeyDown={(e) => {\n if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n\n const value = e.key === 'ArrowUp' ? 1 : -1;\n this._time = this._time?.plus({\n [descriptor.unit]: value,\n });\n e.preventDefault();\n }}\n onChange={(e: any) => {\n let inputElement = e.target as HTMLInputElement;\n inputElement.value = this.timeUpdate(\n descriptor.unit,\n +inputElement.value\n ).toString();\n }}\n ></input>\n\n <ix-icon-button\n size=\"16\"\n onClick={() =>\n (this._time = this._time?.minus({\n [descriptor.unit]: 1,\n }))\n }\n ghost\n icon={iconChevronDownSmall}\n variant=\"primary\"\n class=\"arrows\"\n ></ix-icon-button>\n </div>\n\n {index !== timepickerInformation.length - 1 && (\n <div\n class={{\n 'column-seperator': true,\n hidden: descriptor.hidden,\n }}\n >\n :\n </div>\n )}\n </div>\n ))}\n\n <div\n class={{\n columns: true,\n 'default-space': true,\n hidden: this._timeRef === undefined,\n }}\n >\n <ix-icon-button\n size=\"16\"\n onClick={() => this.changeTimeReference()}\n ghost\n icon={iconChevronUp}\n variant=\"primary\"\n class=\"arrows\"\n ></ix-icon-button>\n <div class=\"time-reference\">{this._timeRef}</div>\n <ix-icon-button\n size=\"16\"\n onClick={() => this.changeTimeReference()}\n ghost\n icon={iconChevronDown}\n variant=\"primary\"\n class=\"arrows\"\n ></ix-icon-button>\n </div>\n </div>\n <div\n class={{\n button: true,\n hidden: !this.standaloneAppearance,\n standalone: true,\n }}\n >\n <ix-button\n onClick={() => {\n this.timeSelect.emit(this._time?.toFormat(this.format));\n }}\n >\n {this.textSelectTime}\n </ix-button>\n </div>\n </ix-date-time-card>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"time-picker.js","sourceRoot":"","sources":["../../../src/components/time-picker/time-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\nimport {\n iconChevronDown,\n iconChevronDownSmall,\n iconChevronUp,\n iconChevronUpSmall,\n} from '@siemens/ix-icons/icons';\n\nexport type TimePickerCorners = DateTimeCardCorners;\n\ninterface TimePickerDescriptor {\n unit: 'hour' \| 'minute' \| 'second';\n placeholder: string;\n hidden: boolean;\n}\n\ninterface TimeOutputFormat {\n hour: string;\n minute: string;\n second: string;\n}\n\n@Component({\n tag: 'ix-time-picker',\n styleUrl: 'time-picker.scss',\n shadow: true,\n})\nexport class TimePicker {\n /\n Format of time string\n * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n /\n @Prop() format: string = 'TT';\n\n /\n Corner style\n /\n @Prop() corners: TimePickerCorners = 'rounded';\n\n /\n Controls the visual presentation and styling of the component when it is displayed as a standalone element\n /\n @Prop() standaloneAppearance: boolean = true;\n\n /\n Show hour input\n /\n @Prop() showHour = true;\n\n /\n Show minutes input\n /\n @Prop() showMinutes = true;\n\n /\n Show seconds input\n /\n @Prop() showSeconds = true;\n\n /\n Select time with format string\n * Format has to match the `format` property.\n /\n @Prop() time: string = DateTime.now().toFormat(this.format);\n\n @Watch('time')\n watchTimePropHandler(newValue: string) {\n this._time = DateTime.fromFormat(newValue, this.format);\n if (!this._time.isValid) {\n throw new Error('Format is not supported or not correct');\n }\n }\n\n /\n Set time reference\n /\n @Prop() timeReference: 'AM' \| 'PM' \| undefined;\n\n /\n Text of date select button\n /\n @Prop() textSelectTime = 'Done';\n\n /\n Text for top label\n /\n @Prop() textTime: string = 'Time';\n\n /\n Time event\n /\n @Event() timeSelect!: EventEmitter<string>;\n\n /\n Time change event\n /\n @Event() timeChange!: EventEmitter<string>;\n\n @State() private _time?: DateTime;\n @State() private _timeRef?: 'AM' \| 'PM';\n @State() private _formattedTime?: TimeOutputFormat;\n\n componentWillLoad() {\n this._time = DateTime.fromFormat(this.time, this.format);\n\n if (!this._time.isValid) {\n console.error(\n `Invalid time format. The configured format does not match the format of the passed time. ${this._time.invalidReason}: ${this._time.invalidExplanation}`\n );\n return;\n }\n\n this._timeRef = this.format.includes('a')\n ? (DateTime.fromFormat(this.time, this.format).toFormat('a') as\n \| 'AM'\n \| 'PM')\n : undefined;\n this.formatTime();\n }\n\n @Watch('_time')\n formatTime() {\n if (!this._time) {\n return;\n }\n\n const [hour, minute, second] = this._time\n .toFormat(this.format)\n .split(' ')[0]\n .split(':');\n\n this._formattedTime = {\n hour: hour,\n minute: minute,\n second: second,\n };\n }\n\n @Watch('_time')\n onInternalTimeChange() {\n this.timeChange.emit(this._time?.toFormat(this.format));\n if (this._timeRef) this._timeRef = this._time?.toFormat('a') as 'AM' \| 'PM';\n }\n\n timeUpdate(unit: 'hour' \| 'minute' \| 'second', value: number): number {\n let maxValue = DateTime.now().endOf('day').get(unit);\n\n if (this._timeRef === 'PM' && unit === 'hour') value += 12;\n if (this._timeRef === 'AM' && unit === 'hour') maxValue = 12;\n\n if (value > maxValue) {\n value = maxValue;\n } else if (value < 0) {\n value = 0;\n }\n\n this._time = this._time?.set({\n [unit]: value,\n });\n return value;\n }\n\n changeTimeReference() {\n this._timeRef = this._timeRef === 'AM' ? 'PM' : 'AM';\n\n if (!this._time?.toFormat('a').includes(this._timeRef)) {\n this._time = this._time?.plus({\n hour: 12,\n });\n }\n }\n\n /\n Get the current time based on the wanted format\n */\n @Method()\n async getCurrentTime() {\n return this._time?.toFormat(this.format);\n }\n\n render() {\n let timepickerInformation: TimePickerDescriptor[] = [\n {\n unit: 'hour',\n placeholder: 'HH',\n hidden: !this.showHour,\n },\n {\n unit: 'minute',\n placeholder: 'MM',\n hidden: !this.showMinutes,\n },\n {\n unit: 'second',\n placeholder: 'SS',\n hidden: !this.showSeconds,\n },\n ];\n\n timepickerInformation = timepickerInformation.filter(\n (item) => !item.hidden\n );\n\n return (\n <Host>\n <ix-date-time-card\n standaloneAppearance={this.standaloneAppearance}\n corners={this.corners}\n >\n <div class=\"header\" slot=\"header\">\n <ix-typography format=\"h5\">{this.textTime \|\| 'Time'}</ix-typography>\n </div>\n <div class=\"clock\">\n {timepickerInformation.map((descriptor, index: number) => (\n <div class=\"flex\">\n <div class={{ columns: true, hidden: descriptor.hidden }}>\n <ix-icon-button\n size=\"16\"\n onClick={() =>\n (this._time = this._time?.plus({\n [descriptor.unit]: 1,\n }))\n }\n ghost\n icon={iconChevronUpSmall}\n variant=\"primary\"\n class=\"arrows\"\n ></ix-icon-button>\n\n <input\n class=\"ix-form-control\"\n name={descriptor.unit}\n type=\"number\"\n placeholder={descriptor.placeholder}\n value={\n this._formattedTime\n ? this._formattedTime[descriptor.unit]\n : ''\n }\n onKeyDown={(e) => {\n if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n\n const value = e.key === 'ArrowUp' ? 1 : -1;\n this._time = this._time?.plus({\n [descriptor.unit]: value,\n });\n e.preventDefault();\n }}\n onChange={(e: any) => {\n let inputElement = e.target as HTMLInputElement;\n inputElement.value = this.timeUpdate(\n descriptor.unit,\n +inputElement.value\n ).toString();\n }}\n ></input>\n\n <ix-icon-button\n size=\"16\"\n onClick={() =>\n (this._time = this._time?.minus({\n [descriptor.unit]: 1,\n }))\n }\n ghost\n icon={iconChevronDownSmall}\n variant=\"primary\"\n class=\"arrows\"\n ></ix-icon-button>\n </div>\n\n {index !== timepickerInformation.length - 1 && (\n <div\n class={{\n 'column-seperator': true,\n hidden: descriptor.hidden,\n }}\n >\n :\n </div>\n )}\n </div>\n ))}\n\n <div\n class={{\n columns: true,\n 'default-space': true,\n hidden: this._timeRef === undefined,\n }}\n >\n <ix-icon-button\n size=\"16\"\n onClick={() => this.changeTimeReference()}\n ghost\n icon={iconChevronUp}\n variant=\"primary\"\n class=\"arrows\"\n ></ix-icon-button>\n <div class=\"time-reference\">{this._timeRef}</div>\n <ix-icon-button\n size=\"16\"\n onClick={() => this.changeTimeReference()}\n ghost\n icon={iconChevronDown}\n variant=\"primary\"\n class=\"arrows\"\n ></ix-icon-button>\n </div>\n </div>\n <div\n class={{\n button: true,\n hidden: !this.standaloneAppearance,\n standalone: true,\n }}\n >\n <ix-button\n onClick={() => {\n this.timeSelect.emit(this._time?.toFormat(this.format));\n }}\n >\n {this.textSelectTime}\n </ix-button>\n </div>\n </ix-date-time-card>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/toggle/toggle.js CHANGED Viewed

@@ -6,11 +6,22 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { h, Host, } from "@stencil/core";
 import { a11yBoolean } from "../utils/a11y";
+import { HookValidationLifecycle } from "../utils/input";
 /**
- * @form-ready 2.6.0
- * */
+ * @form-ready
+ */
 export class Toggle {
     constructor() {
         /**
@@ -51,6 +62,7 @@ export class Toggle {
          * If true, checkbox needs to be checked to be valid
          */
         this.required = false;
+        this.touched = false;
     }
     onCheckedChange(newChecked) {
         if (this.disabled) {
@@ -80,6 +92,7 @@ export class Toggle {
         }
     }
     watchCheckedChange() {
+        this.touched = true;
         this.updateFormInternalValue();
     }
     /** @internal */
@@ -90,6 +103,13 @@ export class Toggle {
     getAssociatedFormElement() {
         return Promise.resolve(this.formInternals.form);
     }
+    /** @internal */
+    isTouched() {
+        return Promise.resolve(this.touched);
+    }
+    updateClassMappings() {
+        /** This function is intentionally empty */
+    }
     render() {
         let toggleText = this.textOff;
         if (this.checked) {
@@ -98,13 +118,13 @@ export class Toggle {
         if (this.indeterminate) {
             toggleText = this.textIndeterminate;
         }
-        return (h(Host, { key: 'f531e9d80601ee7884a09b26adbcef4ccb1e6220', class: {
+        return (h(Host, { key: '2006d13cafca2fdd354b0481d45f06a08fba1eed', class: {
                 disabled: this.disabled,
-            } }, h("label", { key: 'f1ed4a7be7a1b54fd2b22ee722f4548652e902e5', class: "wrapper" }, h("button", { key: 'f5c1b49ff55e2696ad7887a45ab316e41f189dab', role: "switch", "aria-checked": a11yBoolean(this.checked), class: {
+            }, onBlur: () => this.ixBlur.emit(), onFocus: () => (this.touched = true) }, h("label", { key: 'aa118214cf466c2dc95c494ae3762128258bbc0e', class: "wrapper" }, h("button", { key: '952c8bd4175f6a87b424aab3740a79b9aafca0c4', role: "switch", "aria-checked": a11yBoolean(this.checked), class: {
                 switch: true,
                 checked: this.checked,
                 indeterminate: this.indeterminate,
-            }, onClick: () => this.onCheckedChange(!this.checked) }, h("div", { key: '78d480eb757f90adff629dee453be7989aa263f7', class: "slider" })), h("input", { key: 'e95ea3776b169e735cf471807dc1c18debdbaed0', type: "checkbox", disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, tabindex: 0, "aria-hidden": a11yBoolean(true), "aria-checked": a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), !this.hideText && (h("ix-typography", { key: '1edb349714ec98ed6b3b57071d2a588bdd0c5bba', class: "label" }, toggleText)))));
+            }, onClick: () => this.onCheckedChange(!this.checked) }, h("div", { key: '9eb7fd9a73b7cbc1b001c0d6a32972c94dd46b05', class: "slider" })), h("input", { key: '7fb350a1e6096e5e33011cf1c031d426b4a1d598', type: "checkbox", disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, tabindex: 0, "aria-hidden": a11yBoolean(true), "aria-checked": a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), !this.hideText && (h("ix-typography", { key: 'd1dfac3bbcb0e01a3ea1862539c59467a3abd860', class: "label" }, toggleText)))));
     }
     static get is() { return "ix-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -356,6 +376,21 @@ export class Toggle {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "ixBlur",
+                "name": "ixBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An event will be dispatched each time the toggle is blurred."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -403,6 +438,26 @@ export class Toggle {
                             "text": undefined
                         }]
                 }
+            },
+            "isTouched": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
             }
         };
     }
@@ -415,4 +470,7 @@ export class Toggle {
     }
     static get attachInternalsMemberName() { return "formInternals"; }
 }
+__decorate([
+    HookValidationLifecycle()
+], Toggle.prototype, "updateClassMappings", null);
 //# sourceMappingURL=toggle.js.map

package/dist/collection/components/toggle/toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;~~AAG5C~~;;~~KAEK~~;~~AAOL~~,MAAM,OAAO,MAAM;IANnB;QAgBE;;WAEG;QACsB,UAAK,GAAW,IAAI,CAAC;QAE9C;;WAEG;QACqC,YAAO,GAAG,KAAK,CAAC;QAExD;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEzB;;WAEG;QACqC,kBAAa,GAAG,KAAK,CAAC;QAE9D;;WAEG;QACK,WAAM,GAAG,IAAI,CAAC;QAEtB;;WAEG;QACK,YAAO,GAAG,KAAK,CAAC;QAExB;;WAEG;QACK,sBAAiB,GAAG,OAAO,CAAC;QAEpC;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEzB;;;;WAIG;QACsB,aAAQ,GAAG,KAAK,CAAC;~~KA6G3C~~;~~IAnGC~~,eAAe,CAAC,UAAmB;QACjC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC;QAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;QAEhC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC7B,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAE1B,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEnE,IAAI,gBAAgB,EAAE,CAAC;YACrB,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC;YACtC,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,uBAAuB;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAGD,kBAAkB;QAChB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,gBAAgB;IAEhB,aAAa;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvC,CAAC;IAED,gBAAgB;IAEhB,wBAAwB;QACtB,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,IAAI,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;QAE9B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC;QACtC,CAAC;QACD,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB;~~YAED~~,8DAAO,KAAK,EAAC,SAAS;gBACpB,+DACE,IAAI,EAAC,QAAQ,kBACC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EACvC,KAAK,EAAE;wBACL,MAAM,EAAE,IAAI;wBACZ,OAAO,EAAE,IAAI,CAAC,OAAO;wBACrB,aAAa,EAAE,IAAI,CAAC,aAAa;qBAClC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;oBAElD,4DAAK,KAAK,EAAC,QAAQ,GAAO,CACnB;gBACT,8DACE,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,iBACE,WAAW,CAAC,IAAI,CAAC,kBAChB,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,IAAI,CAAC,eAAe,CAAE,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAC,GAElE;gBACD,CAAC,IAAI,CAAC,QAAQ,IAAI,CACjB,sEAAe,KAAK,EAAC,OAAO,IAAE,UAAU,CAAiB,CAC1D,CACK,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\nimport { IxFormComponent } from '../utils/input';\n\n/\n @form-ready ~~2.6.0~~\n * /\n@Component({\n tag: 'ix-toggle',\n styleUrl: 'toggle.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Toggle implements IxFormComponent<string> {\n @AttachInternals() formInternals!: ElementInternals;\n\n @Element() hostElement!: HTMLIxToggleElement;\n\n /\n Name of the checkbox component\n /\n @Prop({ reflect: true }) name?: string;\n\n /\n Value of the checkbox component\n /\n @Prop({ reflect: true }) value: string = 'on';\n\n /\n Whether the slide-toggle element is checked or not.\n /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /\n Whether the slide-toggle element is disabled or not.\n /\n @Prop() disabled = false;\n\n /\n If true the control is in indeterminate state\n /\n @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n /\n Text for on state\n /\n @Prop() textOn = 'On';\n\n /\n Text for off state\n /\n @Prop() textOff = 'Off';\n\n /\n Text for indeterminate state\n /\n @Prop() textIndeterminate = 'Mixed';\n\n /\n Hide `on` and `off` text\n /\n @Prop() hideText = false;\n\n /\n Required state of the checkbox component.\n \n If true, checkbox needs to be checked to be valid\n /\n @Prop({ reflect: true }) required = false;\n\n /\n An event will be dispatched each time the slide-toggle changes its value.\n /\n @Event() checkedChange!: EventEmitter<boolean>;\n\n /* @internal /\n @Event() valueChange!: EventEmitter<string>;\n\n onCheckedChange(newChecked: boolean) {\n if (this.disabled) {\n return;\n }\n\n const wasIndeterminate = this.indeterminate;\n const oldChecked = this.checked;\n\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n\n this.checked = newChecked;\n\n const { defaultPrevented } = this.checkedChange.emit(this.checked);\n\n if (defaultPrevented) {\n this.indeterminate = wasIndeterminate;\n this.checked = oldChecked;\n }\n }\n\n componentWillLoad() {\n this.updateFormInternalValue();\n }\n\n updateFormInternalValue(): void {\n if (this.checked) {\n this.formInternals.setFormValue(this.value);\n } else {\n this.formInternals.setFormValue(null);\n }\n }\n\n @Watch('checked')\n watchCheckedChange() {\n this.updateFormInternalValue();\n }\n\n /* @internal /\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(this.checked);\n }\n\n /* @internal */\n @Method()\n getAssociatedFormElement(): Promise<HTMLFormElement \| null> {\n return Promise.resolve(this.formInternals.form);\n }\n\n render() {\n let toggleText = this.textOff;\n\n if (this.checked) {\n toggleText = this.textOn;\n }\n\n if (this.indeterminate) {\n toggleText = this.textIndeterminate;\n }\n return (\n <Host\n class={{\n disabled: this.disabled,\n }}\n >\n <label class=\"wrapper\">\n <button\n role=\"switch\"\n aria-checked={a11yBoolean(this.checked)}\n class={{\n switch: true,\n checked: this.checked,\n indeterminate: this.indeterminate,\n }}\n onClick={() => this.onCheckedChange(!this.checked)}\n >\n <div class=\"slider\"></div>\n </button>\n <input\n type=\"checkbox\"\n disabled={this.disabled}\n indeterminate={this.indeterminate}\n checked={this.checked}\n tabindex={0}\n aria-hidden={a11yBoolean(true)}\n aria-checked={a11yBoolean(this.checked)}\n onChange={(event) =>\n this.onCheckedChange((event.target as HTMLInputElement).checked)\n }\n />\n {!this.hideText && (\n <ix-typography class=\"label\">{toggleText}</ix-typography>\n )}\n </label>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\nimport { IxFormComponent, HookValidationLifecycle } from '../utils/input';\n\n/\n @form-ready\n /\n@Component({\n tag: 'ix-toggle',\n styleUrl: 'toggle.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Toggle implements IxFormComponent<string> {\n @AttachInternals() formInternals!: ElementInternals;\n\n @Element() hostElement!: HTMLIxToggleElement;\n\n /\n Name of the checkbox component\n /\n @Prop({ reflect: true }) name?: string;\n\n /\n Value of the checkbox component\n /\n @Prop({ reflect: true }) value: string = 'on';\n\n /\n Whether the slide-toggle element is checked or not.\n /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /\n Whether the slide-toggle element is disabled or not.\n /\n @Prop() disabled = false;\n\n /\n If true the control is in indeterminate state\n /\n @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n /\n Text for on state\n /\n @Prop() textOn = 'On';\n\n /\n Text for off state\n /\n @Prop() textOff = 'Off';\n\n /\n Text for indeterminate state\n /\n @Prop() textIndeterminate = 'Mixed';\n\n /\n Hide `on` and `off` text\n /\n @Prop() hideText = false;\n\n /\n Required state of the checkbox component.\n \n If true, checkbox needs to be checked to be valid\n /\n @Prop({ reflect: true }) required = false;\n\n /\n An event will be dispatched each time the slide-toggle changes its value.\n /\n @Event() checkedChange!: EventEmitter<boolean>;\n\n /* @internal /\n @Event() valueChange!: EventEmitter<string>;\n\n /\n An event will be dispatched each time the toggle is blurred.\n /\n @Event() ixBlur!: EventEmitter<void>;\n\n private touched = false;\n\n onCheckedChange(newChecked: boolean) {\n if (this.disabled) {\n return;\n }\n\n const wasIndeterminate = this.indeterminate;\n const oldChecked = this.checked;\n\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n\n this.checked = newChecked;\n\n const { defaultPrevented } = this.checkedChange.emit(this.checked);\n\n if (defaultPrevented) {\n this.indeterminate = wasIndeterminate;\n this.checked = oldChecked;\n }\n }\n\n componentWillLoad() {\n this.updateFormInternalValue();\n }\n\n updateFormInternalValue(): void {\n if (this.checked) {\n this.formInternals.setFormValue(this.value);\n } else {\n this.formInternals.setFormValue(null);\n }\n }\n\n @Watch('checked')\n watchCheckedChange() {\n this.touched = true;\n this.updateFormInternalValue();\n }\n\n /* @internal /\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(this.checked);\n }\n\n /* @internal /\n @Method()\n getAssociatedFormElement(): Promise<HTMLFormElement \| null> {\n return Promise.resolve(this.formInternals.form);\n }\n\n /* @internal /\n @Method()\n isTouched(): Promise<boolean> {\n return Promise.resolve(this.touched);\n }\n\n @HookValidationLifecycle()\n updateClassMappings() {\n /* This function is intentionally empty */\n }\n\n render() {\n let toggleText = this.textOff;\n\n if (this.checked) {\n toggleText = this.textOn;\n }\n\n if (this.indeterminate) {\n toggleText = this.textIndeterminate;\n }\n return (\n <Host\n class={{\n disabled: this.disabled,\n }}\n onBlur={() => this.ixBlur.emit()}\n onFocus={() => (this.touched = true)}\n >\n <label class=\"wrapper\">\n <button\n role=\"switch\"\n aria-checked={a11yBoolean(this.checked)}\n class={{\n switch: true,\n checked: this.checked,\n indeterminate: this.indeterminate,\n }}\n onClick={() => this.onCheckedChange(!this.checked)}\n >\n <div class=\"slider\"></div>\n </button>\n <input\n type=\"checkbox\"\n disabled={this.disabled}\n indeterminate={this.indeterminate}\n checked={this.checked}\n tabindex={0}\n aria-hidden={a11yBoolean(true)}\n aria-checked={a11yBoolean(this.checked)}\n onChange={(event) =>\n this.onCheckedChange((event.target as HTMLInputElement).checked)\n }\n />\n {!this.hideText && (\n <ix-typography class=\"label\">{toggleText}</ix-typography>\n )}\n </label>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/toggle-button/toggle-button.css CHANGED Viewed

@@ -404,6 +404,9 @@
   width: auto;
   height: 2rem;
   vertical-align: middle;
+  /**
+  * Overwrite the default button styles because toggle button looks different as primary variant
+  */
 }
 :host *,
 :host *::after,
@@ -444,6 +447,18 @@
   width: 100%;
   height: 100%;
 }
+:host .btn.selected.btn-primary {
+  background: var(--theme-color-dynamic);
+  color: var(--theme-color-primary--contrast);
+}
+:host .btn.selected.btn-primary:hover {
+  background: var(--theme-color-dynamic--hover);
+  color: var(--theme-color-primary--contrast);
+}
+:host .btn.selected.btn-primary:active {
+  background: var(--theme-color-dynamic--active);
+  color: var(--theme-color-primary--contrast);
+}
 :host button:not(:disabled) {
   cursor: pointer;
 }

package/dist/collection/components/toggle-button/toggle-button.js CHANGED Viewed

@@ -9,9 +9,6 @@
 import { h, Host, } from "@stencil/core";
 import { BaseButton } from "../button/base-button";
 import { a11yBoolean } from "../utils/a11y";
-/**
- * @since 2.0.0
- */
 export class ToggleButton {
     constructor() {
         /**
@@ -80,9 +77,9 @@ export class ToggleButton {
                 'aria-pressed': a11yBoolean(this.pressed),
             },
         };
-        return (h(Host, { key: '9fc2688839b9aa49b46d15239d9345938aaa6646', class: {
+        return (h(Host, { key: 'e37769484c98e132db6427889e7b3b1d3b8c9fe0', class: {
                 disabled: this.disabled || this.loading,
-            } }, h(BaseButton, Object.assign({ key: '2fcfa64674578f2613762a1e25d74e8d25b99001' }, baseButtonProps), h("slot", { key: 'be73382aea8d2b99cbb14bb0d27af77d94f42028' }))));
+            } }, h(BaseButton, Object.assign({ key: 'acf4fa8c653297f4f48f62077d062a6e6430fcc9' }, baseButtonProps), h("slot", { key: 'c73245006fff382188d49b3711f88cd5d6aebea3' }))));
     }
     static get is() { return "ix-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle-button/toggle-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../src/components/toggle-button/toggle-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAmB,MAAM,uBAAuB,CAAC;AAEpE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;~~AAE5C;;GAEG;AAMH~~,MAAM,OAAO,YAAY;IALzB;QAME;;;WAGG;QACK,YAAO,GAAkB,WAAW,CAAC;QAE7C;;WAEG;QACK,YAAO,GAAG,KAAK,CAAC;QAExB;;WAEG;QACK,UAAK,GAAG,KAAK,CAAC;QAEtB;;WAEG;QACsB,aAAQ,GAAG,KAAK,CAAC;QAE1C;;WAEG;QACK,YAAO,GAAY,KAAK,CAAC;QAOjC;;WAEG;QACK,YAAO,GAAG,KAAK,CAAC;KAwEzB;IAjES,2BAA2B;QACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IACpE,CAAC;IAEO,gBAAgB;QACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;IACJ,CAAC;IAGD,eAAe;QACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE,CAAC;YACvC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAGD,eAAe;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE;YAC3C,IAAI,EAAE,QAAQ;YACd,cAAc,EAAE;gBACd,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;aAC1C;SACF,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;aACxC;YAED,EAAC,UAAU,qEAAK,eAAe;gBAC7B,8DAAa,CACF,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/\n @~~since 2.0.0\n /\n@~~Component({\n tag: 'ix-toggle-button',\n shadow: true,\n styleUrl: './toggle-button.scss',\n})\nexport class ToggleButton {\n /\n Button variant.\n * Important: Variant 'primary' can only be combined with either outline or ghost.\n /\n @Prop() variant: ButtonVariant = 'secondary';\n\n /\n Outline button\n /\n @Prop() outline = false;\n\n /\n Button with no background or outline\n /\n @Prop() ghost = false;\n\n /\n Disable the button\n /\n @Prop({ reflect: true }) disabled = false;\n\n /\n Loading button\n /\n @Prop() loading: boolean = false;\n\n /\n Icon name\n /\n @Prop() icon?: string;\n\n /\n Show button as pressed\n /\n @Prop() pressed = false;\n\n /\n Pressed change event\n */\n @Event() pressedChange!: EventEmitter<boolean>;\n\n private isIllegalToggleButtonConfig() {\n return this.variant === 'primary' && (this.outline \|\| this.ghost);\n }\n\n private logIllegalConfig() {\n console.warn(\n 'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n );\n }\n\n @Watch('variant')\n onVariantChange() {\n if (this.isIllegalToggleButtonConfig()) {\n this.logIllegalConfig();\n }\n }\n\n @Watch('ghost')\n onGhostChange() {\n this.onVariantChange();\n }\n\n @Watch('outline')\n onOutlineChange() {\n this.onVariantChange();\n }\n\n componentDidLoad() {\n this.onVariantChange();\n }\n\n private dispatchPressedChange() {\n this.pressedChange.emit(!this.pressed);\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: false,\n iconOval: false,\n selected: this.pressed,\n disabled: this.disabled \|\| this.loading,\n icon: this.icon,\n loading: this.loading,\n onClick: () => this.dispatchPressedChange(),\n type: 'button',\n ariaAttributes: {\n 'aria-pressed': a11yBoolean(this.pressed),\n },\n };\n\n return (\n <Host\n class={{\n disabled: this.disabled \|\| this.loading,\n }}\n >\n <BaseButton {...baseButtonProps}>\n <slot></slot>\n </BaseButton>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../src/components/toggle-button/toggle-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAmB,MAAM,uBAAuB,CAAC;AAEpE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAO5C,MAAM,OAAO,YAAY;IALzB;QAME;;;WAGG;QACK,YAAO,GAAkB,WAAW,CAAC;QAE7C;;WAEG;QACK,YAAO,GAAG,KAAK,CAAC;QAExB;;WAEG;QACK,UAAK,GAAG,KAAK,CAAC;QAEtB;;WAEG;QACsB,aAAQ,GAAG,KAAK,CAAC;QAE1C;;WAEG;QACK,YAAO,GAAY,KAAK,CAAC;QAOjC;;WAEG;QACK,YAAO,GAAG,KAAK,CAAC;KAwEzB;IAjES,2BAA2B;QACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IACpE,CAAC;IAEO,gBAAgB;QACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;IACJ,CAAC;IAGD,eAAe;QACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE,CAAC;YACvC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAGD,eAAe;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE;YAC3C,IAAI,EAAE,QAAQ;YACd,cAAc,EAAE;gBACd,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;aAC1C;SACF,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;aACxC;YAED,EAAC,UAAU,qEAAK,eAAe;gBAC7B,8DAAa,CACF,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n tag: 'ix-toggle-button',\n shadow: true,\n styleUrl: './toggle-button.scss',\n})\nexport class ToggleButton {\n /\n Button variant.\n * Important: Variant 'primary' can only be combined with either outline or ghost.\n /\n @Prop() variant: ButtonVariant = 'secondary';\n\n /\n Outline button\n /\n @Prop() outline = false;\n\n /\n Button with no background or outline\n /\n @Prop() ghost = false;\n\n /\n Disable the button\n /\n @Prop({ reflect: true }) disabled = false;\n\n /\n Loading button\n /\n @Prop() loading: boolean = false;\n\n /\n Icon name\n /\n @Prop() icon?: string;\n\n /\n Show button as pressed\n /\n @Prop() pressed = false;\n\n /\n Pressed change event\n */\n @Event() pressedChange!: EventEmitter<boolean>;\n\n private isIllegalToggleButtonConfig() {\n return this.variant === 'primary' && (this.outline \|\| this.ghost);\n }\n\n private logIllegalConfig() {\n console.warn(\n 'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n );\n }\n\n @Watch('variant')\n onVariantChange() {\n if (this.isIllegalToggleButtonConfig()) {\n this.logIllegalConfig();\n }\n }\n\n @Watch('ghost')\n onGhostChange() {\n this.onVariantChange();\n }\n\n @Watch('outline')\n onOutlineChange() {\n this.onVariantChange();\n }\n\n componentDidLoad() {\n this.onVariantChange();\n }\n\n private dispatchPressedChange() {\n this.pressedChange.emit(!this.pressed);\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: false,\n iconOval: false,\n selected: this.pressed,\n disabled: this.disabled \|\| this.loading,\n icon: this.icon,\n loading: this.loading,\n onClick: () => this.dispatchPressedChange(),\n type: 'button',\n ariaAttributes: {\n 'aria-pressed': a11yBoolean(this.pressed),\n },\n };\n\n return (\n <Host\n class={{\n disabled: this.disabled \|\| this.loading,\n }}\n >\n <BaseButton {...baseButtonProps}>\n <slot></slot>\n </BaseButton>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/tooltip/tooltip.js CHANGED Viewed

@@ -16,8 +16,6 @@ let tooltipInstance = 0;
 /**
  * @slot title-icon - Icon of tooltip title
  * @slot title-content - Content of tooltip title
- *
- * @since 1.4.0
  */
 export class Tooltip {
     constructor() {
@@ -28,7 +26,6 @@ export class Tooltip {
         /**
          * Initial placement of the tooltip.
          * If the selected placement doesn't have enough space, the tooltip will be repositioned to another location.
-         * @since 1.5.0
          */
         this.placement = 'top';
         /** @internal */
@@ -327,7 +324,7 @@ export class Tooltip {
         (_d = this.disposeDomChangeListener) === null || _d === void 0 ? void 0 : _d.call(this);
     }
     render() {
-        return (h(Host, { key: 'de71d4a53d4b9d1c5631eb52ebc58a9070e20c34', role: "tooltip", class: { visible: this.visible } }, h("dialog", { key: '677ef22f8e4554645454312012303df2ec9e4c57', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, h("div", { key: '3965cab3b146c941c78238e3c5ce1f2c66014098', class: "tooltip-container" }, h("div", { key: 'e9e3f38fec696d38327b3fbb5e848d248e74881e', class: "content-wrapper" }, h("div", { key: '24c518e1ff9486dd8a28135bbf67312e78572a9e', class: 'tooltip-title' }, h("slot", { key: 'a21f9fec2aad1c4bd9859998c31b368cf1f3afc3', name: "title-icon" }), h("ix-typography", { key: '1dbbacaa0240b375f7d4ede44fce1ed8ba4409d4', format: "h5" }, this.titleContent, h("slot", { key: 'c0e1a995fdce329322f02f39b9ecf7452e5230e7', name: "title-content" }))), h("slot", { key: '1288a8f910a647a47ddf9167cdb8928a933a76dc' }), h("div", { key: 'db76a2a402a20e13430f3573d1823d95a247f3e2', class: "arrow" }))))));
+        return (h(Host, { key: '36a8743eb0ebda55e9a470456692051caac17894', role: "tooltip", class: { visible: this.visible } }, h("dialog", { key: '8ed7a8a435fc50977e6cc8bf5792ec48347c6c81', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, h("div", { key: '37c134036a13e239bc7ce7951e8cff288fce97b9', class: "tooltip-container" }, h("div", { key: 'c1053f7ab1fc20a5b172ff987d51c3a4d56db73e', class: "content-wrapper" }, h("div", { key: '045242b42cb66b6272dd23980bce24dff91d2ffd', class: 'tooltip-title' }, h("slot", { key: '5743b9415b8f8ea6bcdca917a3e43e3c03f3abe4', name: "title-icon" }), h("ix-typography", { key: 'c86c5b07775d2fc179cf20d43f87357802718ed1', format: "h5" }, this.titleContent, h("slot", { key: 'b42f2ad9086133679eeb45ec0706a0b41fbc54ed', name: "title-content" }))), h("slot", { key: '06f6215566b2a8df46ffb801c36f1fd743b87754' }), h("div", { key: 'fe47bb2898758e28a6d81eb2f5f5d17f49d1fecc', class: "arrow" }))))));
     }
     static get is() { return "ix-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -419,10 +416,7 @@ export class Tooltip {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "1.5.0"
-                        }],
+                    "tags": [],
                     "text": "Initial placement of the tooltip.\nIf the selected placement doesn't have enough space, the tooltip will be repositioned to another location."
                 },
                 "getter": false,