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

@siemens/ix 2.4.1 → 2.6.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 (1750) hide show

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

	@@ -1 +1 @@
1	- {"file":"ix-time-picker.entry.js","mappings":"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","names":["DateTime"],"sources":["src/components/time-picker/time-picker.scss?tag=ix-time-picker&encapsulation=shadow","src/components/time-picker/time-picker.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n@import 'components/form/input';\n\n:host {\n @include ix-component;\n @import 'legacy/components/forms';\n\n display: block;\n position: relative;\n width: 22rem;\n\n @media (max-width: 576px) {\n .clock {\n padding: 1.5rem 0;\n }\n\n .header {\n height: $medium-control-height !important;\n }\n }\n\n @media (min-width: 576px) {\n .clock {\n padding: 4.25rem 0;\n }\n\n .header {\n height: $large-control-height !important;\n }\n }\n\n .header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: $large-control-height;\n }\n\n .flex {\n display: flex;\n }\n\n .clock {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n input,\n .time-reference {\n width: 2.625rem;\n height: $large-space;\n text-align: center;\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n\n / Chrome, Safari, Edge, Opera /\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0 0.3125rem;\n }\n\n / Firefox /\n &[type='number'] {\n -moz-appearance: textfield;\n }\n }\n\n .form-control[type='number'] {\n text-align: center;\n }\n\n .columns {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n }\n\n .column-seperator {\n display: flex;\n align-items: center;\n margin: 0 $tiny-space;\n }\n\n .button {\n display: flex;\n justify-content: flex-end;\n }\n\n .default-space {\n margin-left: $default-space;\n }\n\n .text-align {\n text-align: center;\n }\n\n .hidden {\n display: none;\n }\n\n .time-reference {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\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 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';\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 @deprecated Not supported since 2.0.0.\n /\n @Prop() individual: 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 Show time reference input\n \n @since 1.1.0 time reference is default aligned with format tt\n * @deprecated Since 2.0.0 time reference will be displayed depending on format.\n /\n // eslint-disable-next-line @stencil-community/strict-mutable\n @Prop({ mutable: true }) showTimeReference?: boolean = undefined;\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 event\n * @deprecated Will be removed in 3.0.0. Use `time-select` event.\n /\n @Event() done: 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' \| undefined;\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 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 variant=\"default-title\">\n {this.textTime \|\| 'Time'}\n </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=\"chevron-up\"\n variant=\"primary\"\n class=\"arrows\"\n ></ix-icon-button>\n\n <input\n class=\"form-control\"\n name={descriptor.unit}\n type=\"number\"\n placeholder={descriptor.placeholder}\n value={\n this._formattedTime\n ? this._formattedTime[descriptor.unit]\n : null\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=\"chevron-down\"\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=\"chevron-up\"\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=\"chevron-down\"\n variant=\"primary\"\n class=\"arrows\"\n ></ix-icon-button>\n </div>\n </div>\n <div class={{ button: true, hidden: !this.standaloneAppearance }}>\n <ix-button\n onClick={() => {\n this.timeSelect.emit(this._time.toFormat(this.format));\n this.done.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"],"version":3}
1	+ {"file":"ix-time-picker.entry.js","mappings":"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","names":["DateTime"],"sources":["src/components/time-picker/time-picker.scss?tag=ix-time-picker&encapsulation=shadow","src/components/time-picker/time-picker.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n@import 'components/form/input';\n\n:host {\n @include ix-component;\n @import 'legacy/components/forms';\n\n display: block;\n position: relative;\n width: 21rem;\n\n @media (max-width: 576px) {\n .clock {\n padding: 1.5rem 0 1rem 0;\n }\n\n .header {\n height: $medium-control-height !important;\n }\n }\n\n @media (min-width: 576px) {\n .clock {\n padding: 4.25rem 0 3.75rem 0;\n }\n\n .header {\n height: $large-control-height !important;\n }\n }\n\n .header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: $large-control-height;\n }\n\n .flex {\n display: flex;\n }\n\n .clock {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n input,\n .time-reference {\n width: 2.625rem;\n height: $large-space;\n text-align: center;\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n\n / Chrome, Safari, Edge, Opera /\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0 0.3125rem;\n }\n\n / Firefox /\n &[type='number'] {\n -moz-appearance: textfield;\n }\n }\n\n .form-control[type='number'] {\n text-align: center;\n }\n\n .columns {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n }\n\n .column-seperator {\n display: flex;\n align-items: center;\n margin: 0 $tiny-space;\n }\n\n .button {\n display: flex;\n justify-content: flex-end;\n\n &.standalone {\n padding-top: 0.5rem;\n }\n }\n\n .default-space {\n margin-left: $default-space;\n }\n\n .text-align {\n text-align: center;\n }\n\n .hidden {\n display: none;\n }\n\n .time-reference {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\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 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 @deprecated Not supported since 2.0.0.\n /\n @Prop() individual: 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 Show time reference input\n \n @since 1.1.0 time reference is default aligned with format tt\n * @deprecated Since 2.0.0 time reference will be displayed depending on format.\n /\n // eslint-disable-next-line @stencil-community/strict-mutable\n @Prop({ mutable: true }) showTimeReference?: boolean = undefined;\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 event\n * @deprecated Will be removed in 3.0.0. Use `time-select` event.\n /\n @Event() done!: 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=\"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 this.done.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"],"version":3}

package/dist/esm/ix-toast-container.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-5429f20b.js';
+import { r as registerInstance, h, H as Host } from './index-97874de0.js';
 import { T as TypedEvent } from './typed-event-ad6484c5.js';
 const toastContainerCss = ":host{}: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}#toast-container>:not(:last-child){margin-block-end:1rem}.toast-container{display:block;position:fixed}.toast-container--top-right{right:1rem;top:2rem}.toast-container--bottom-right{right:1rem;bottom:2rem}";
@@ -74,10 +74,10 @@ const ToastContainer = class {
         };
     }
     render() {
-        return (h(Host, { key: '4c3986ebc5843f0d1846527f602851d82bd525d7', class: {
+        return (h(Host, { key: '0bfccf7c84f68735f44d9b7fb79eddd5cc9f7720', class: {
                 'toast-container--bottom-right': this.position === 'bottom-right',
                 'toast-container--top-right': this.position === 'top-right',
-            } }, h("slot", { key: '6d9c87e3bfddb1b1bf0fbebdd06efad5347b5390' })));
+            } }, h("slot", { key: '936e1593293b6c445651a9838a676b9412dfb648' })));
     }
     static get watchers() { return {
         "position": ["onPositionChange"]

package/dist/esm/ix-toast-container.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-toast-container.entry.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,88BAA88B,CAAC;AACz+B,+BAAe,iBAAiB;;MCsBnB,cAAc;;;QAaR,0BAAqB,GAAG,mBAAmB,CAAC;2BAVvC,iBAAiB;8BAId,iBAAiB;wBAIO,cAAc;;IAI/D,IAAI,aAAa;QACf,OAAO,IAAI,OAAO,CAAc,CAAC,OAAO;YACtC,MAAM,QAAQ,GAAG,WAAW,CAAC;gBAC3B,MAAM,gBAAgB,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBACnE,IAAI,gBAAgB,EAAE;oBACpB,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACxB,OAAO,CAAC,gBAAgB,CAAC,CAAC;iBAC3B;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC9C,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACrD,cAAc,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;YACrC,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YAClD,cAAc,CAAC,SAAS,CAAC,GAAG,CAC1B,GAAG,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,QAAQ,EAAE,CAChD,CAAC;YACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;SAC3C;KACF;IAGD,gBAAgB,CAAC,WAAmB,EAAE,WAAmB;QACvD,MAAM,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACjE,cAAc,CAAC,SAAS,CAAC,MAAM,CAC7B,GAAG,IAAI,CAAC,qBAAqB,GAAG,WAAW,EAAE,CAC9C,CAAC;QACF,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,qBAAqB,GAAG,WAAW,EAAE,CAAC,CAAC;KAC7E;;;;;IAOD,MAAM,SAAS,CAAC,MAAmB;;QACjC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACjD,MAAM,OAAO,GAAG,IAAI,UAAU,EAAmB,CAAC;QAElD,SAAS,WAAW,CAAC,MAAY;YAC/B,KAAK,CAAC,MAAM,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACtB;QAED,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC;QAChC,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;QACzB,KAAK,CAAC,SAAS,GAAG,MAAA,MAAM,CAAC,SAAS,mCAAI,IAAI,CAAC;QAC3C,KAAK,CAAC,cAAc,GAAG,MAAA,MAAM,CAAC,cAAc,mCAAI,IAAI,CAAC;QACrD,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;QACzB,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;QACnC,KAAK,CAAC,gBAAgB,CACpB,YAAY,EACZ,CAAC,KAAmC;YAClC,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;YACzB,WAAW,CAAC,MAAM,CAAC,CAAC;SACrB,CACF,CAAC;QAEF,IAAI,OAAO,MAAM,CAAC,OAAO,KAAK,QAAQ,EAAE;YACtC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;SAClC;aAAM;YACL,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;SACnC;QAED,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;QAE9C,OAAO;YACL,OAAO;YACP,KAAK,EAAE,CAAC,MAAY;gBAClB,WAAW,CAAC,MAAM,CAAC,CAAC;aACrB;SACF,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,+BAA+B,EAAE,IAAI,CAAC,QAAQ,KAAK,cAAc;gBACjE,4BAA4B,EAAE,IAAI,CAAC,QAAQ,KAAK,WAAW;aAC5D,IAED,8DAAa,CACR,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/toast/styles/toast-container.scss?tag=ix-toast-container&encapsulation=shadow","src/components/toast/toast-container.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: ~~2023~~ Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n}\n\n#toast-container {\n > :not(:last-child) {\n margin-block-end: $default-space;\n }\n}\n\n.toast-container {\n display: block;\n position: fixed;\n}\n\n.toast-container--top-right {\n right: 1rem;\n top: 2rem;\n}\n\n.toast-container--bottom-right {\n right: 1rem;\n bottom: 2rem;\n}\n","/\n * SPDX-FileCopyrightText: ~~2023~~ Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Method, Prop, Watch } from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\nexport type ShowToastResult = {\n onClose: TypedEvent<any \| undefined>;\n close: (result?: any) => void;\n};\n\n@Component({\n tag: 'ix-toast-container',\n styleUrl: './styles/toast-container.scss',\n shadow: true,\n})\nexport class ToastContainer {\n /\n /\n @Prop() containerId = 'toast-container';\n\n /*\n /\n @Prop() containerClass = 'toast-container';\n\n /*\n /\n @Prop() position: 'bottom-right' \| 'top-right' = 'bottom-right';\n\n private readonly PREFIX_POSITION_CLASS = 'toast-container--';\n\n get hostContainer() {\n return new Promise<HTMLElement>((resolve) => {\n const interval = setInterval(() => {\n const containerElement = document.getElementById(this.containerId);\n if (containerElement) {\n clearInterval(interval);\n resolve(containerElement);\n }\n });\n });\n }\n\n componentDidLoad() {\n if (!document.getElementById(this.containerId)) {\n const toastContainer = document.createElement('div');\n toastContainer.id = this.containerId;\n toastContainer.classList.add(this.containerClass);\n toastContainer.classList.add(\n `${this.PREFIX_POSITION_CLASS}${this.position}`\n );\n document.body.appendChild(toastContainer);\n }\n }\n\n @Watch('position')\n onPositionChange(newPosition: string, oldPosition: string) {\n const toastContainer = document.getElementById(this.containerId);\n toastContainer.classList.remove(\n `${this.PREFIX_POSITION_CLASS}${oldPosition}`\n );\n toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);\n }\n\n /*\n Display a toast message\n * @param config\n */\n @Method()\n async showToast(config: ToastConfig): Promise<ShowToastResult> {\n const toast = document.createElement('ix-toast');\n const onClose = new TypedEvent<any \| undefined>();\n\n function removeToast(result?: any) {\n toast.remove();\n onClose.emit(result);\n }\n\n toast.toastTitle = config.title;\n toast.type = config.type;\n toast.autoClose = config.autoClose ?? true;\n toast.autoCloseDelay = config.autoCloseDelay ?? 5000;\n toast.icon = config.icon;\n toast.iconColor = config.iconColor;\n toast.addEventListener(\n 'closeToast',\n (event: CustomEvent<any \| undefined>) => {\n const { detail } = event;\n removeToast(detail);\n }\n );\n\n if (typeof config.message === 'string') {\n toast.innerText = config.message;\n } else {\n toast.appendChild(config.message);\n }\n\n (await this.hostContainer).appendChild(toast);\n\n return {\n onClose,\n close: (result?: any) => {\n removeToast(result);\n },\n };\n }\n\n render() {\n return (\n <Host\n class={{\n 'toast-container--bottom-right': this.position === 'bottom-right',\n 'toast-container--top-right': this.position === 'top-right',\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-toast-container.entry.js","mappings":"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","names":[],"sources":["src/components/toast/styles/toast-container.scss?tag=ix-toast-container&encapsulation=shadow","src/components/toast/toast-container.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n}\n\n#toast-container {\n > :not(:last-child) {\n margin-block-end: $default-space;\n }\n}\n\n.toast-container {\n display: block;\n position: fixed;\n}\n\n.toast-container--top-right {\n right: 1rem;\n top: 2rem;\n}\n\n.toast-container--bottom-right {\n right: 1rem;\n bottom: 2rem;\n}\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Method, Prop, Watch } from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\nexport type ShowToastResult = {\n onClose: TypedEvent<any \| undefined>;\n close: (result?: any) => void;\n};\n\n@Component({\n tag: 'ix-toast-container',\n styleUrl: './styles/toast-container.scss',\n shadow: true,\n})\nexport class ToastContainer {\n /\n /\n @Prop() containerId = 'toast-container';\n\n /*\n /\n @Prop() containerClass = 'toast-container';\n\n /*\n /\n @Prop() position: 'bottom-right' \| 'top-right' = 'bottom-right';\n\n private readonly PREFIX_POSITION_CLASS = 'toast-container--';\n\n get hostContainer() {\n return new Promise<HTMLElement>((resolve) => {\n const interval = setInterval(() => {\n const containerElement = document.getElementById(this.containerId);\n if (containerElement) {\n clearInterval(interval);\n resolve(containerElement);\n }\n });\n });\n }\n\n componentDidLoad() {\n if (!document.getElementById(this.containerId)) {\n const toastContainer = document.createElement('div');\n toastContainer.id = this.containerId;\n toastContainer.classList.add(this.containerClass);\n toastContainer.classList.add(\n `${this.PREFIX_POSITION_CLASS}${this.position}`\n );\n document.body.appendChild(toastContainer);\n }\n }\n\n @Watch('position')\n onPositionChange(newPosition: string, oldPosition: string) {\n const toastContainer = document.getElementById(this.containerId);\n toastContainer.classList.remove(\n `${this.PREFIX_POSITION_CLASS}${oldPosition}`\n );\n toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);\n }\n\n /*\n Display a toast message\n * @param config\n */\n @Method()\n async showToast(config: ToastConfig): Promise<ShowToastResult> {\n const toast = document.createElement('ix-toast');\n const onClose = new TypedEvent<any \| undefined>();\n\n function removeToast(result?: any) {\n toast.remove();\n onClose.emit(result);\n }\n\n toast.toastTitle = config.title;\n toast.type = config.type;\n toast.autoClose = config.autoClose ?? true;\n toast.autoCloseDelay = config.autoCloseDelay ?? 5000;\n toast.icon = config.icon;\n toast.iconColor = config.iconColor;\n toast.addEventListener(\n 'closeToast',\n (event: CustomEvent<any \| undefined>) => {\n const { detail } = event;\n removeToast(detail);\n }\n );\n\n if (typeof config.message === 'string') {\n toast.innerText = config.message;\n } else {\n toast.appendChild(config.message);\n }\n\n (await this.hostContainer).appendChild(toast);\n\n return {\n onClose,\n close: (result?: any) => {\n removeToast(result);\n },\n };\n }\n\n render() {\n return (\n <Host\n class={{\n 'toast-container--bottom-right': this.position === 'bottom-right',\n 'toast-container--top-right': this.position === 'top-right',\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5429f20b.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-97874de0.js';
 const toastCss = ":host{display:flex;flex-direction:column;position:relative;min-width:17.5rem;max-width:17.5rem;min-height:3.5rem;pointer-events:all;background-color:var(--theme-toast--background);border:var(--theme-toast--border-thickness) solid var(--theme-toast--border-color);border-radius:var(--theme-toast--border-radius);box-shadow:var(--theme-toast--box-shadow);--animate-duration:300ms}: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 .toast-body{display:flex;position:relative;min-height:3.5rem;width:100%;flex-grow:1;padding:0.75rem}:host .toast-body .toast-icon{display:flex;align-items:flex-start;margin-right:1rem}:host .toast-body .toast-content{overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%}:host .toast-body .toast-content .toast-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);margin:0.25rem 0px}:host .toast-body .toast-content .toast-message{min-width:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}:host .toast-body .toast-icon+.toast-content{max-width:10.25rem}:host .toast-close{display:flex;position:relative;pointer-events:all;margin-left:auto;margin-right:0px}:host .toast-progress-bar{position:absolute;bottom:0;height:0.25rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}:host .toast-progress-bar--animated{animation:trackProgress linear 1 forwards}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";
 const IxToastStyle0 = toastCss;
@@ -49,11 +49,11 @@ const Toast = class {
             animationPlayState: this.touched ? 'paused' : 'running',
         };
         progressBarClass.push('toast-progress-bar--animated');
-        return (h(Host, { key: '165e8ce47907c08afaef29ec7741efaddaf59d0f', class: "animate__animated animate__fadeIn" }, h("div", { key: 'fff7c4afb35bf57eead0fa4b484e0843dcf6c163', class: "toast-body", onPointerLeave: () => {
+        return (h(Host, { key: '2022423ee116c3f35018039cc13e7f9a72e94eb5', class: "animate__animated animate__fadeIn" }, h("div", { key: '07da49dc05174eec9e39094feebb318fc04e8f03', class: "toast-body", onPointerLeave: () => {
                 this.touched = false;
             }, onPointerEnter: () => {
                 this.touched = true;
-            } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: 'cd9db0e7591fc8cc069608cff6c3824b4063b1df', class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title" }, this.toastTitle)) : null, h("div", { key: '5c850aab1090ec83bfbb2ed4be68d665efaa403f', class: "toast-message" }, h("slot", { key: '0f857c156d576f8bc62cca7f2ab50df00fe3e794' }))), h("div", { key: '47db8f9094de72a16be06466bd694923d86492ff', class: "toast-close" }, h("ix-icon-button", { key: 'db141553999f04175cb135c9b89b7655a5eae216', icon: 'close', size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
+            } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: '6576125656b21e9164c8757d30b6e4872e694e6c', class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title" }, this.toastTitle)) : null, h("div", { key: '12e7f65bdba5f4eab21d58680175709f39ced6fd', class: "toast-message" }, h("slot", { key: '42998feff3becd6ff8367b8f558ff117f7b722c4' }))), h("div", { key: '245d19c09984ef510a0107a055cf27aa10ceadaf', class: "toast-close" }, h("ix-icon-button", { key: '5836ce63a661084488454de0e5c632ef94c95905', icon: 'close', size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
                 this.close();
             }, onTransitionEnd: () => {
                 if (this.progress === 0) {

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

	@@ -1 +1 @@
1	- {"file":"ix-toast.entry.js","mappings":"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","names":[],"sources":["src/components/toast/toast.scss?tag=ix-toast&encapsulation=shadow","src/components/toast/toast.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: ~~2023~~ Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n\n:host {\n @include ix-component;\n\n display: flex;\n flex-direction: column;\n position: relative;\n min-width: 17.5rem;\n max-width: 17.5rem;\n min-height: 3.5rem;\n\n pointer-events: all;\n\n background-color: var(--theme-toast--background);\n border: var(--theme-toast--border-thickness) solid\n var(--theme-toast--border-color);\n border-radius: var(--theme-toast--border-radius);\n box-shadow: var(--theme-toast--box-shadow);\n\n --animate-duration: #{$medium-time};\n\n .toast-body {\n display: flex;\n position: relative;\n min-height: 3.5rem;\n width: 100%;\n flex-grow: 1;\n padding: 0.75rem;\n\n .toast-icon {\n display: flex;\n align-items: flex-start;\n margin-right: $default-space;\n }\n\n .toast-content {\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n width: 100%;\n\n .toast-title {\n @include text-default-title-single;\n margin: 0.25rem 0px;\n }\n\n .toast-message {\n min-width: 0;\n\n @include text-default;\n }\n }\n\n .toast-icon + .toast-content {\n max-width: 10.25rem;\n }\n }\n\n .toast-close {\n display: flex;\n position: relative;\n pointer-events: all;\n margin-left: auto;\n margin-right: 0px;\n }\n\n .toast-progress-bar {\n position: absolute;\n bottom: 0;\n height: $tiny-space;\n width: 100%;\n background-color: var(--theme-toast-timer-value--background);\n transform-origin: left;\n\n &--animated {\n animation: trackProgress linear 1 forwards;\n }\n }\n\n @keyframes trackProgress {\n 0% {\n transform: scaleX(1);\n }\n 100% {\n transform: scaleX(0);\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: ~~2023~~ Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n tag: 'ix-toast',\n styleUrl: 'toast.scss',\n shadow: true,\n})\nexport class Toast {\n /\n Toast type\n /\n @Prop() type: ToastType = 'info';\n\n /\n Toast title\n /\n @Prop() toastTitle: string;\n\n /\n Autoclose title after delay\n /\n @Prop() autoCloseDelay = 5000;\n\n /\n Autoclose behavior\n /\n @Prop() autoClose = true;\n\n /\n Icon of toast\n /\n @Prop() icon: string;\n\n /\n Icon color of toast\n /\n @Prop() iconColor: string;\n\n /\n Toast closed\n */\n @Event() closeToast: EventEmitter;\n\n @State() progress = 0;\n @State() touched = false;\n\n @Element() hostElement!: HTMLIxToastElement;\n\n private getIcon() {\n if (this.icon) {\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={this.icon}\n color={this.iconColor}\n size=\"24\"\n />\n );\n }\n\n switch (this.type) {\n case 'info':\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={'info'}\n size=\"24\"\n color=\"color-std-text\"\n />\n );\n\n case 'error':\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={'error'}\n size=\"24\"\n color=\"color-alarm\"\n />\n );\n\n case 'success':\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={'success'}\n size=\"24\"\n color=\"color-success\"\n />\n );\n\n case 'warning':\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={'warning'}\n size=\"24\"\n color=\"color-warning\"\n />\n );\n\n default:\n return '';\n }\n }\n\n private close() {\n if (this.hostElement) {\n this.hostElement.classList.add('animate__fadeOut');\n }\n setTimeout(() => {\n this.closeToast.emit();\n }, 250);\n }\n\n render() {\n let progressBarStyle: Record<string, string> = {};\n\n const progressBarClass = ['toast-progress-bar'];\n\n progressBarStyle = {\n animationDuration: `${this.autoCloseDelay}ms`,\n animationPlayState: this.touched ? 'paused' : 'running',\n };\n\n progressBarClass.push('toast-progress-bar--animated');\n\n return (\n <Host class=\"animate__animated animate__fadeIn\">\n <div\n class=\"toast-body\"\n onPointerLeave={() => {\n this.touched = false;\n }}\n onPointerEnter={() => {\n this.touched = true;\n }}\n >\n {this.type \|\| this.icon ? (\n <div class=\"toast-icon\">{this.getIcon()}</div>\n ) : null}\n <div class=\"toast-content\">\n {this.toastTitle ? (\n <div class=\"toast-title\">{this.toastTitle}</div>\n ) : null}\n <div class=\"toast-message\">\n <slot></slot>\n </div>\n </div>\n <div class=\"toast-close\">\n <ix-icon-button\n icon={'close'}\n size=\"24\"\n ghost\n onClick={() => this.closeToast.emit()}\n />\n </div>\n </div>\n {this.autoClose ? (\n <div\n class={progressBarClass.join(' ')}\n style={progressBarStyle}\n onAnimationEnd={() => {\n this.close();\n }}\n onTransitionEnd={() => {\n if (this.progress === 0) {\n this.close();\n }\n }}\n ></div>\n ) : null}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-toast.entry.js","mappings":"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","names":[],"sources":["src/components/toast/toast.scss?tag=ix-toast&encapsulation=shadow","src/components/toast/toast.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n\n:host {\n @include ix-component;\n\n display: flex;\n flex-direction: column;\n position: relative;\n min-width: 17.5rem;\n max-width: 17.5rem;\n min-height: 3.5rem;\n\n pointer-events: all;\n\n background-color: var(--theme-toast--background);\n border: var(--theme-toast--border-thickness) solid\n var(--theme-toast--border-color);\n border-radius: var(--theme-toast--border-radius);\n box-shadow: var(--theme-toast--box-shadow);\n\n --animate-duration: #{$medium-time};\n\n .toast-body {\n display: flex;\n position: relative;\n min-height: 3.5rem;\n width: 100%;\n flex-grow: 1;\n padding: 0.75rem;\n\n .toast-icon {\n display: flex;\n align-items: flex-start;\n margin-right: $default-space;\n }\n\n .toast-content {\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n width: 100%;\n\n .toast-title {\n @include text-default-title-single;\n margin: 0.25rem 0px;\n }\n\n .toast-message {\n min-width: 0;\n\n @include text-default;\n }\n }\n\n .toast-icon + .toast-content {\n max-width: 10.25rem;\n }\n }\n\n .toast-close {\n display: flex;\n position: relative;\n pointer-events: all;\n margin-left: auto;\n margin-right: 0px;\n }\n\n .toast-progress-bar {\n position: absolute;\n bottom: 0;\n height: $tiny-space;\n width: 100%;\n background-color: var(--theme-toast-timer-value--background);\n transform-origin: left;\n\n &--animated {\n animation: trackProgress linear 1 forwards;\n }\n }\n\n @keyframes trackProgress {\n 0% {\n transform: scaleX(1);\n }\n 100% {\n transform: scaleX(0);\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n tag: 'ix-toast',\n styleUrl: 'toast.scss',\n shadow: true,\n})\nexport class Toast {\n /\n Toast type\n /\n @Prop() type: ToastType = 'info';\n\n /\n Toast title\n /\n @Prop() toastTitle: string;\n\n /\n Autoclose title after delay\n /\n @Prop() autoCloseDelay = 5000;\n\n /\n Autoclose behavior\n /\n @Prop() autoClose = true;\n\n /\n Icon of toast\n /\n @Prop() icon: string;\n\n /\n Icon color of toast\n /\n @Prop() iconColor: string;\n\n /\n Toast closed\n */\n @Event() closeToast: EventEmitter;\n\n @State() progress = 0;\n @State() touched = false;\n\n @Element() hostElement!: HTMLIxToastElement;\n\n private getIcon() {\n if (this.icon) {\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={this.icon}\n color={this.iconColor}\n size=\"24\"\n />\n );\n }\n\n switch (this.type) {\n case 'info':\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={'info'}\n size=\"24\"\n color=\"color-std-text\"\n />\n );\n\n case 'error':\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={'error'}\n size=\"24\"\n color=\"color-alarm\"\n />\n );\n\n case 'success':\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={'success'}\n size=\"24\"\n color=\"color-success\"\n />\n );\n\n case 'warning':\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={'warning'}\n size=\"24\"\n color=\"color-warning\"\n />\n );\n\n default:\n return '';\n }\n }\n\n private close() {\n if (this.hostElement) {\n this.hostElement.classList.add('animate__fadeOut');\n }\n setTimeout(() => {\n this.closeToast.emit();\n }, 250);\n }\n\n render() {\n let progressBarStyle: Record<string, string> = {};\n\n const progressBarClass = ['toast-progress-bar'];\n\n progressBarStyle = {\n animationDuration: `${this.autoCloseDelay}ms`,\n animationPlayState: this.touched ? 'paused' : 'running',\n };\n\n progressBarClass.push('toast-progress-bar--animated');\n\n return (\n <Host class=\"animate__animated animate__fadeIn\">\n <div\n class=\"toast-body\"\n onPointerLeave={() => {\n this.touched = false;\n }}\n onPointerEnter={() => {\n this.touched = true;\n }}\n >\n {this.type \|\| this.icon ? (\n <div class=\"toast-icon\">{this.getIcon()}</div>\n ) : null}\n <div class=\"toast-content\">\n {this.toastTitle ? (\n <div class=\"toast-title\">{this.toastTitle}</div>\n ) : null}\n <div class=\"toast-message\">\n <slot></slot>\n </div>\n </div>\n <div class=\"toast-close\">\n <ix-icon-button\n icon={'close'}\n size=\"24\"\n ghost\n onClick={() => this.closeToast.emit()}\n />\n </div>\n </div>\n {this.autoClose ? (\n <div\n class={progressBarClass.join(' ')}\n style={progressBarStyle}\n onAnimationEnd={() => {\n this.close();\n }}\n onTransitionEnd={() => {\n if (this.progress === 0) {\n this.close();\n }\n }}\n ></div>\n ) : null}\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-5429f20b.js';
-import { B as BaseButton } from './base-button-1b40b11d.js';
-import { a as a11yBoolean } from './a11y-d5444a76.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-97874de0.js';
+import { B as BaseButton } from './base-button-845f2463.js';
+import { a as a11yBoolean } from './a11y-b10c12e0.js';
 const toggleButtonCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:var(--theme-default-time);padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}.btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:inline-block;width:auto;height:2rem;vertical-align:middle}: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 .btn{width:100%;height:100%}:host button:not(:disabled){cursor:pointer}:host(.disabled){pointer-events:none}";
 const IxToggleButtonStyle0 = toggleButtonCss;
@@ -57,9 +57,9 @@ const ToggleButton = class {
                 'aria-pressed': a11yBoolean(this.pressed),
             },
         };
-        return (h(Host, { key: 'bec8a150fd761e11ed81ae3803a8e62d6a250ec7', class: {
+        return (h(Host, { key: 'bbfd616d068c6fbc3d701392924750632ac1b0a6', class: {
                 disabled: this.disabled || this.loading,
-            } }, h(BaseButton, Object.assign({ key: 'b0e6ee7a113ea8d9b417b8de62cf816fb78b49ca' }, baseButtonProps), h("slot", { key: 'ce9fd3a28d4c7048d14618bd7813f4c84a4ac255' }))));
+            } }, h(BaseButton, Object.assign({ key: '80ced9446e05dc5752143c03f8cc18b37ba24afa' }, baseButtonProps), h("slot", { key: 'dc1b54ee9fde12923f583385ebcdbcdc6fa08139' }))));
     }
     static get watchers() { return {
         "variant": ["onVariantChange"],

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

@@ -1,13 +1,23 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-5429f20b.js';
-import { a as a11yBoolean } from './a11y-d5444a76.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-97874de0.js';
+import { a as a11yBoolean } from './a11y-b10c12e0.js';
-const toggleCss = ":host{display:inline-flex;position:relative;height:2rem;justify-content:flex-start;align-items:center;margin-right:0.25rem;cursor:pointer}: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 .switch{position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem;margin-right:0.25rem}:host .switch input{opacity:0;width:0;height:0}:host .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:var(--theme-default-time);border-radius:1.5rem}:host .slider:before{position:absolute;content:\"\";height:1.125rem;width:1.125rem;left:4px;bottom:3px;background-color:var(--theme-switch-thumb-off--background);transition:var(--theme-default-time);border-radius:50%}:host input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host input:focus-visible+.switch>.slider{outline:1px solid var(--theme-color-focus-bdr);outline-offset:1px}:host input:checked+.switch>.slider{background-color:var(--theme-switch-on--background)}:host input:checked+.switch>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.35rem)}:host input+.switch:hover>.slider{background-color:var(--theme-switch-off--background--hover)}:host input+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host input+.switch:active>.slider{background-color:var(--theme-switch-off--background--active)}:host input+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host input:checked+.switch:hover>.slider{background-color:var(--theme-switch-on--background--hover)}:host input:checked+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host input:checked+.switch:active>.slider{background-color:var(--theme-switch-on--background--active)}:host input:checked+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host input:indeterminate+.switch>.slider::before{transform:translateX(0.7rem)}:host .toggle-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.disabled){pointer-events:none}:host(.disabled) input+.switch{opacity:0.5}:host(.disabled) input+.switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) input+.switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) input:checked+.switch>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) input:checked+.switch>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .toggle-text{color:var(--theme-color-weak-text)}";
+const toggleCss = ":host{display:inline-flex;position:relative;height:2rem;justify-content:flex-start;align-items:center;margin-right:0.25rem;cursor:pointer}: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 .switch{position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem;margin-right:0.25rem}:host .switch input{opacity:0;width:0;height:0}:host .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:var(--theme-default-time);border-radius:1.5rem;border:1px solid transparent}:host .slider:before{position:absolute;content:\"\";height:1.125rem;width:1.125rem;left:4px;bottom:2px;background-color:var(--theme-switch-thumb-off--background);transition:var(--theme-default-time);border-radius:50%}:host input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host input:focus-visible+.switch>.slider{outline:1px solid var(--theme-color-focus-bdr);outline-offset:1px}:host input:checked+.switch>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.35rem)}:host input+.switch>.slider{border-color:var(--theme-switch-off--border-color)}:host input+.switch:hover>.slider{background-color:var(--theme-switch-off--background--hover);border-color:var(--theme-switch-off--border-color--hover)}:host input+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host input+.switch:active>.slider{background-color:var(--theme-switch-off--background--active);border-color:var(--theme-switch-off--border-color--active)}:host input+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host input:checked+.switch>.slider{background-color:var(--theme-switch-on--background);border-color:var(--theme-switch-on--border-color)}:host input:checked+.switch:hover>.slider{background-color:var(--theme-switch-on--background--hover);border-color:var(--theme-switch-on--border-color--hover)}:host input:checked+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host input:checked+.switch:active>.slider{background-color:var(--theme-switch-on--background--active);border-color:var(--theme-switch-on--border-color--active)}:host input:checked+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host input:indeterminate+.switch>.slider::before{transform:translateX(0.7rem)}:host .toggle-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.disabled){pointer-events:none}:host(.disabled) input+.switch{opacity:0.5}:host(.disabled) input+.switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) input+.switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) input:checked+.switch>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) input:checked+.switch>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .toggle-text{color:var(--theme-color-weak-text)}:host(.ix-info:not(.disabled)) .slider{--theme-switch-off--background:var(--theme-switch-off--background--info);--theme-switch-off--background--hover:var(--theme-switch-off--background--info--hover);--theme-switch-off--background--active:var(--theme-switch-off--background--info--active);--theme-switch-thumb-off--background:var(--theme-switch-thumb-off--background--info);--theme-switch-thumb-off--background--hover:var(--theme-switch-thumb-off--background--info--hover);--theme-switch-thumb-off--background--active:var(--theme-switch-thumb-off--background--info--active);--theme-switch-off--border-color:var(--theme-switch-off--border-color--info);--theme-switch-off--border-color--hover:var(--theme-switch-off--border-color--info--hover);--theme-switch-off--border-color--active:var(--theme-switch-off--border-color--info--active);--theme-switch-on--background:var(--theme-switch-on--background--info);--theme-switch-on--background--hover:var(--theme-switch-on--background--info--hover);--theme-switch-on--background--active:var(--theme-switch-on--background--info--active);--theme-switch-thumb-on--background:var(--theme-switch-thumb-on--background--info);--theme-switch-thumb-on--background--hover:var(--theme-switch-thumb-on--background--info--hover);--theme-switch-thumb-on--background--active:var(--theme-switch-thumb-on--background--info--active);--theme-switch-on--border-color:var(--theme-switch-on--border-color--info);--theme-switch-on--border-color--hover:var(--theme-switch-on--border-color--info--hover);--theme-switch-on--border-color--active:var(--theme-switch-on--border-color--info--active);--theme-switch-mixed--background:var(--theme-switch-mixed--background--info);--theme-switch-mixed--background--hover:var(--theme-switch-mixed--background--info--hover);--theme-switch-mixed--background--active:var(--theme-switch-mixed--background--info--active);--theme-switch-thumb-mixed--background:var(--theme-switch-thumb-mixed--background--info);--theme-switch-thumb-mixed--background--hover:var(--theme-switch-thumb-mixed--background--info--hover);--theme-switch-thumb-mixed--background--active:var(--theme-switch-thumb-mixed--background--info--active);--theme-switch-mixed--border-color:var(--theme-switch-mixed--border-color--info);--theme-switch-mixed--border-color--hover:var(--theme-switch-mixed--border-color--info--hover);--theme-switch-mixed--border-color--active:var(--theme-switch-mixed--border-color--info--active)}:host(.ix-warning:not(.disabled)) .slider{--theme-switch-off--background:var(--theme-switch-off--background--warning);--theme-switch-off--background--hover:var(--theme-switch-off--background--warning--hover);--theme-switch-off--background--active:var(--theme-switch-off--background--warning--active);--theme-switch-thumb-off--background:var(--theme-switch-thumb-off--background--warning);--theme-switch-thumb-off--background--hover:var(--theme-switch-thumb-off--background--warning--hover);--theme-switch-thumb-off--background--active:var(--theme-switch-thumb-off--background--warning--active);--theme-switch-off--border-color:var(--theme-switch-off--border-color--warning);--theme-switch-off--border-color--hover:var(--theme-switch-off--border-color--warning--hover);--theme-switch-off--border-color--active:var(--theme-switch-off--border-color--warning--active);--theme-switch-on--background:var(--theme-switch-on--background--warning);--theme-switch-on--background--hover:var(--theme-switch-on--background--warning--hover);--theme-switch-on--background--active:var(--theme-switch-on--background--warning--active);--theme-switch-thumb-on--background:var(--theme-switch-thumb-on--background--warning);--theme-switch-thumb-on--background--hover:var(--theme-switch-thumb-on--background--warning--hover);--theme-switch-thumb-on--background--active:var(--theme-switch-thumb-on--background--warning--active);--theme-switch-on--border-color:var(--theme-switch-on--border-color--warning);--theme-switch-on--border-color--hover:var(--theme-switch-on--border-color--warning--hover);--theme-switch-on--border-color--active:var(--theme-switch-on--border-color--warning--active);--theme-switch-mixed--background:var(--theme-switch-mixed--background--warning);--theme-switch-mixed--background--hover:var(--theme-switch-mixed--background--warning--hover);--theme-switch-mixed--background--active:var(--theme-switch-mixed--background--warning--active);--theme-switch-thumb-mixed--background:var(--theme-switch-thumb-mixed--background--warning);--theme-switch-thumb-mixed--background--hover:var(--theme-switch-thumb-mixed--background--warning--hover);--theme-switch-thumb-mixed--background--active:var(--theme-switch-thumb-mixed--background--warning--active);--theme-switch-mixed--border-color:var(--theme-switch-mixed--border-color--warning);--theme-switch-mixed--border-color--hover:var(--theme-switch-mixed--border-color--warning--hover);--theme-switch-mixed--border-color--active:var(--theme-switch-mixed--border-color--warning--active)}:host(.ix-invalid--required:not(.disabled)) .slider{--theme-switch-off--background:var(--theme-switch-off--background--invalid);--theme-switch-off--background--hover:var(--theme-switch-off--background--invalid--hover);--theme-switch-off--background--active:var(--theme-switch-off--background--invalid--active);--theme-switch-thumb-off--background:var(--theme-switch-thumb-off--background--invalid);--theme-switch-thumb-off--background--hover:var(--theme-switch-thumb-off--background--invalid--hover);--theme-switch-thumb-off--background--active:var(--theme-switch-thumb-off--background--invalid--active);--theme-switch-off--border-color:var(--theme-switch-off--border-color--invalid);--theme-switch-off--border-color--hover:var(--theme-switch-off--border-color--invalid--hover);--theme-switch-off--border-color--active:var(--theme-switch-off--border-color--invalid--active);--theme-switch-on--background:var(--theme-switch-on--background--invalid);--theme-switch-on--background--hover:var(--theme-switch-on--background--invalid--hover);--theme-switch-on--background--active:var(--theme-switch-on--background--invalid--active);--theme-switch-thumb-on--background:var(--theme-switch-thumb-on--background--invalid);--theme-switch-thumb-on--background--hover:var(--theme-switch-thumb-on--background--invalid--hover);--theme-switch-thumb-on--background--active:var(--theme-switch-thumb-on--background--invalid--active);--theme-switch-on--border-color:var(--theme-switch-on--border-color--invalid);--theme-switch-on--border-color--hover:var(--theme-switch-on--border-color--invalid--hover);--theme-switch-on--border-color--active:var(--theme-switch-on--border-color--invalid--active);--theme-switch-mixed--background:var(--theme-switch-mixed--background--invalid);--theme-switch-mixed--background--hover:var(--theme-switch-mixed--background--invalid--hover);--theme-switch-mixed--background--active:var(--theme-switch-mixed--background--invalid--active);--theme-switch-thumb-mixed--background:var(--theme-switch-thumb-mixed--background--invalid);--theme-switch-thumb-mixed--background--hover:var(--theme-switch-thumb-mixed--background--invalid--hover);--theme-switch-thumb-mixed--background--active:var(--theme-switch-thumb-mixed--background--invalid--active);--theme-switch-mixed--border-color:var(--theme-switch-mixed--border-color--invalid);--theme-switch-mixed--border-color--hover:var(--theme-switch-mixed--border-color--invalid--hover);--theme-switch-mixed--border-color--active:var(--theme-switch-mixed--border-color--invalid--active)}:host(.ix-invalid:not(.disabled)) .slider{--theme-switch-off--background:var(--theme-switch-off--background--invalid);--theme-switch-off--background--hover:var(--theme-switch-off--background--invalid--hover);--theme-switch-off--background--active:var(--theme-switch-off--background--invalid--active);--theme-switch-thumb-off--background:var(--theme-switch-thumb-off--background--invalid);--theme-switch-thumb-off--background--hover:var(--theme-switch-thumb-off--background--invalid--hover);--theme-switch-thumb-off--background--active:var(--theme-switch-thumb-off--background--invalid--active);--theme-switch-off--border-color:var(--theme-switch-off--border-color--invalid);--theme-switch-off--border-color--hover:var(--theme-switch-off--border-color--invalid--hover);--theme-switch-off--border-color--active:var(--theme-switch-off--border-color--invalid--active);--theme-switch-on--background:var(--theme-switch-on--background--invalid);--theme-switch-on--background--hover:var(--theme-switch-on--background--invalid--hover);--theme-switch-on--background--active:var(--theme-switch-on--background--invalid--active);--theme-switch-thumb-on--background:var(--theme-switch-thumb-on--background--invalid);--theme-switch-thumb-on--background--hover:var(--theme-switch-thumb-on--background--invalid--hover);--theme-switch-thumb-on--background--active:var(--theme-switch-thumb-on--background--invalid--active);--theme-switch-on--border-color:var(--theme-switch-on--border-color--invalid);--theme-switch-on--border-color--hover:var(--theme-switch-on--border-color--invalid--hover);--theme-switch-on--border-color--active:var(--theme-switch-on--border-color--invalid--active);--theme-switch-mixed--background:var(--theme-switch-mixed--background--invalid);--theme-switch-mixed--background--hover:var(--theme-switch-mixed--background--invalid--hover);--theme-switch-mixed--background--active:var(--theme-switch-mixed--background--invalid--active);--theme-switch-thumb-mixed--background:var(--theme-switch-thumb-mixed--background--invalid);--theme-switch-thumb-mixed--background--hover:var(--theme-switch-thumb-mixed--background--invalid--hover);--theme-switch-thumb-mixed--background--active:var(--theme-switch-thumb-mixed--background--invalid--active);--theme-switch-mixed--border-color:var(--theme-switch-mixed--border-color--invalid);--theme-switch-mixed--border-color--hover:var(--theme-switch-mixed--border-color--invalid--hover);--theme-switch-mixed--border-color--active:var(--theme-switch-mixed--border-color--invalid--active)}";
 const IxToggleStyle0 = toggleCss;
 const Toggle = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.checkedChange = createEvent(this, "checkedChange", 7);
+        this.valueChange = createEvent(this, "valueChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.formInternals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.formInternals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.formInternals;
+        }
+        this.name = undefined;
+        this.value = 'on';
         this.checked = false;
         this.disabled = false;
         this.indeterminate = false;
@@ -15,6 +25,7 @@ const Toggle = class {
         this.textOff = 'Off';
         this.textIndeterminate = 'Mixed';
         this.hideText = false;
+        this.required = false;
     }
     onCheckedChange(newChecked) {
         if (this.indeterminate) {
@@ -23,12 +34,38 @@ const Toggle = class {
         this.checked = newChecked;
         this.checkedChange.emit(this.checked);
     }
+    componentWillLoad() {
+        this.updateFormInternalValue();
+    }
+    updateFormInternalValue() {
+        if (this.checked) {
+            this.formInternals.setFormValue(this.value);
+        }
+        else {
+            this.formInternals.setFormValue(null);
+        }
+    }
+    watchCheckedChange() {
+        this.updateFormInternalValue();
+    }
+    /** @internal */
+    hasValidValue() {
+        return Promise.resolve(this.checked);
+    }
+    /** @internal */
+    getAssociatedFormElement() {
+        return Promise.resolve(this.formInternals.form);
+    }
     render() {
-        return (h(Host, { key: '46cf23f4ae6803763da9344dfd9374aa2e307e14', class: {
+        return (h(Host, { key: '2aafe9718c088e425a93a520063a55690dfa2f4e', class: {
                 disabled: this.disabled,
-            }, 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));
+            }, onClick: () => this.onCheckedChange(!this.checked) }, h("input", { key: 'eba13dd0d816d4f93113b7bc3eff1bd9bb304eb2', 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: '587d507fb9e5208d4dfad4be72ca6a1483a3b96a', class: "switch", tabIndex: -1 }, h("span", { key: '6e3d43c84b83d15d1196aa4df1ab1944be820c25', 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));
     }
+    static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "checked": ["watchCheckedChange"]
+    }; }
 };
 Toggle.style = IxToggleStyle0;

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

	@@ -1 +1 @@
1	- {"file":"ix-toggle.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,27GAA27G,CAAC;AAC98G,uBAAe,SAAS;;MCyBX,MAAM;;;;uBAMiC,KAAK;wBAKpC,KAAK;6BAKgC,KAAK;sBAK5C,IAAI;uBAKH,KAAK;iCAKK,OAAO;wBAKhB,KAAK;;IAOxB,eAAe,CAAC,UAAmB;QACjC,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;QACD,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACvC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAElD,8DACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,UAAU,kBACD,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EACvC,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,eAAe,CAAE,KAAK,CAAC,MAAc,CAAC,OAAO,CAAC,GAE9C,EACT,8DAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,IAChC,6DAAM,KAAK,EAAC,QAAQ,GAAQ,CACtB,EACP,CAAC,IAAI,CAAC,QAAQ,IACb,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,IAClB,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CACrC,KAEP,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,iBAAiB,CAClB,CACR,CACQ,IACT,IAAI,CACH,EACP;KACH;;;;;;;","names":[],"sources":["src/components/toggle/toggle.scss?tag=ix-toggle&encapsulation=shadow","src/components/toggle/toggle.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: inline-flex;\n position: relative;\n height: 2rem;\n justify-content: flex-start;\n align-items: center;\n margin-right: 0.25rem;\n\n cursor: pointer;\n\n .switch {\n position: relative;\n display: inline-block;\n width: 3rem;\n min-width: 3rem;\n max-width: 3rem;\n height: 1.5rem;\n margin-right: 0.25rem;\n }\n\n .switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--theme-switch-off--background);\n transition: var(--theme-default-time);\n border-radius: 1.5rem;\n }\n\n .slider:before {\n position: absolute;\n content: '';\n height: 1.125rem;\n width: 1.125rem;\n left: 4px;\n bottom: 3px;\n background-color: var(--theme-switch-thumb-off--background);\n transition: var(--theme-default-time);\n border-radius: 50%;\n }\n\n input {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n }\n\n input:focus-visible + .switch > .slider {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: 1px;\n }\n\n input:checked + .switch > .slider {\n background-color: var(--theme-switch-on--background);\n }\n\n input:checked + .switch > .slider::before {\n background-color: var(--theme-switch-thumb-on--background);\n transform: translateX(1.35rem);\n }\n\n // Toggle NOT checked\n input + .switch:hover > .slider {\n background-color: var(--theme-switch-off--background--hover);\n }\n\n input + .switch:hover > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--hover);\n }\n\n input + .switch:active > .slider {\n background-color: var(--theme-switch-off--background--active);\n }\n\n input + .switch:active > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--active);\n }\n\n // Toggle checked\n input:checked + .switch:hover > .slider {\n background-color: var(--theme-switch-on--background--hover);\n }\n\n input:checked + .switch:hover > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--hover);\n }\n\n input:checked + .switch:active > .slider {\n background-color: var(--theme-switch-on--background--active);\n }\n\n input:checked + .switch:active > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--active);\n }\n\n input:indeterminate + .switch > .slider::before {\n transform: translateX(0.7rem);\n }\n\n .toggle-text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n\n input + .switch {\n opacity: 0.5;\n }\n\n input + .switch > .slider {\n background-color: var(--theme-switch-off--background--disabled);\n }\n\n input + .switch > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--disabled);\n }\n\n input:checked + .switch > .slider {\n background-color: var(--theme-switch-on--background--disabled);\n }\n\n input:checked + .switch > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--disabled);\n }\n\n .toggle-text {\n color: var(--theme-color-weak-text);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n tag: 'ix-toggle',\n styleUrl: 'toggle.scss',\n shadow: true,\n})\nexport class Toggle {\n @Element() hostElement!: HTMLIxToggleElement;\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 An event will be dispatched each time the slide-toggle changes its value.\n */\n @Event() checkedChange: EventEmitter<boolean>;\n\n onCheckedChange(newChecked: boolean) {\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n this.checked = newChecked;\n this.checkedChange.emit(this.checked);\n }\n\n render() {\n return (\n <Host\n class={{\n disabled: this.disabled,\n }}\n onClick={() => this.onCheckedChange(!this.checked)}\n >\n <input\n disabled={this.disabled}\n indeterminate={this.indeterminate}\n checked={this.checked}\n role=\"switch\"\n tabindex={0}\n type=\"checkbox\"\n aria-checked={a11yBoolean(this.checked)}\n onChange={(event) =>\n this.onCheckedChange((event.target as any).checked)\n }\n ></input>\n <label class=\"switch\" tabIndex={-1}>\n <span class=\"slider\"></span>\n </label>\n {!this.hideText ? (\n <Fragment>\n {!this.indeterminate ? (\n <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n {this.checked ? this.textOn : this.textOff}\n </span>\n ) : (\n <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n {this.textIndeterminate}\n </span>\n )}\n </Fragment>\n ) : null}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-toggle.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,+mbAA+mb,CAAC;AAClob,uBAAe,SAAS;;MCiCX,MAAM;;;;;;;;;;;;;qBAawB,IAAI;uBAKK,KAAK;wBAKpC,KAAK;6BAKgC,KAAK;sBAK5C,IAAI;uBAKH,KAAK;iCAKK,OAAO;wBAKhB,KAAK;wBAOY,KAAK;;IAUzC,eAAe,CAAC,UAAmB;QACjC,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;QACD,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACvC;IAED,iBAAiB;QACf,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;IAED,uBAAuB;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC7C;aAAM;YACL,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SACvC;KACF;IAGD,kBAAkB;QAChB,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;;IAID,aAAa;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACtC;;IAID,wBAAwB;QACtB,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;KACjD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAElD,8DACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,UAAU,kBACD,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EACvC,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,eAAe,CAAE,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAC,GAE3D,EACT,8DAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,IAChC,6DAAM,KAAK,EAAC,QAAQ,GAAQ,CACtB,EACP,CAAC,IAAI,CAAC,QAAQ,IACb,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,IAClB,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CACrC,KAEP,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,iBAAiB,CAClB,CACR,CACQ,IACT,IAAI,CACH,EACP;KACH;;;;;;;;;;;","names":[],"sources":["src/components/toggle/toggle.scss?tag=ix-toggle&encapsulation=shadow","src/components/toggle/toggle.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: inline-flex;\n position: relative;\n height: 2rem;\n justify-content: flex-start;\n align-items: center;\n margin-right: 0.25rem;\n\n cursor: pointer;\n\n .switch {\n position: relative;\n display: inline-block;\n width: 3rem;\n min-width: 3rem;\n max-width: 3rem;\n height: 1.5rem;\n margin-right: 0.25rem;\n }\n\n .switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--theme-switch-off--background);\n transition: var(--theme-default-time);\n border-radius: 1.5rem;\n border: 1px solid transparent;\n }\n\n .slider:before {\n position: absolute;\n content: '';\n height: 1.125rem;\n width: 1.125rem;\n left: 4px;\n bottom: 2px;\n background-color: var(--theme-switch-thumb-off--background);\n transition: var(--theme-default-time);\n border-radius: 50%;\n }\n\n input {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n }\n\n input:focus-visible + .switch > .slider {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: 1px;\n }\n\n input:checked + .switch > .slider::before {\n background-color: var(--theme-switch-thumb-on--background);\n transform: translateX(1.35rem);\n }\n\n // Toggle NOT checked\n input + .switch > .slider {\n border-color: var(--theme-switch-off--border-color);\n }\n\n input + .switch:hover > .slider {\n background-color: var(--theme-switch-off--background--hover);\n border-color: var(--theme-switch-off--border-color--hover);\n }\n\n input + .switch:hover > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--hover);\n }\n\n input + .switch:active > .slider {\n background-color: var(--theme-switch-off--background--active);\n border-color: var(--theme-switch-off--border-color--active);\n }\n\n input + .switch:active > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--active);\n }\n\n // Toggle checked\n input:checked + .switch > .slider {\n background-color: var(--theme-switch-on--background);\n border-color: var(--theme-switch-on--border-color);\n }\n\n input:checked + .switch:hover > .slider {\n background-color: var(--theme-switch-on--background--hover);\n border-color: var(--theme-switch-on--border-color--hover);\n }\n\n input:checked + .switch:hover > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--hover);\n }\n\n input:checked + .switch:active > .slider {\n background-color: var(--theme-switch-on--background--active);\n border-color: var(--theme-switch-on--border-color--active);\n }\n\n input:checked + .switch:active > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--active);\n }\n\n input:indeterminate + .switch > .slider::before {\n transform: translateX(0.7rem);\n }\n\n .toggle-text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n\n input + .switch {\n opacity: 0.5;\n }\n\n input + .switch > .slider {\n background-color: var(--theme-switch-off--background--disabled);\n }\n\n input + .switch > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--disabled);\n }\n\n input:checked + .switch > .slider {\n background-color: var(--theme-switch-on--background--disabled);\n }\n\n input:checked + .switch > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--disabled);\n }\n\n .toggle-text {\n color: var(--theme-color-weak-text);\n }\n}\n\n@mixin toggle-variant($selector) {\n :host(#{$selector}:not(.disabled)) {\n .slider {\n @content;\n }\n }\n}\n\n@mixin define-toggle-vars($state, $type) {\n --theme-switch-#{$state}--background: var(--theme-switch-#{$state}--background--#{$type});\n --theme-switch-#{$state}--background--hover: var(--theme-switch-#{$state}--background--#{$type}--hover);\n --theme-switch-#{$state}--background--active: var(--theme-switch-#{$state}--background--#{$type}--active);\n\n --theme-switch-thumb-#{$state}--background: var(--theme-switch-thumb-#{$state}--background--#{$type});\n --theme-switch-thumb-#{$state}--background--hover: var(--theme-switch-thumb-#{$state}--background--#{$type}--hover);\n --theme-switch-thumb-#{$state}--background--active: var(--theme-switch-thumb-#{$state}--background--#{$type}--active);\n\n --theme-switch-#{$state}--border-color: var(--theme-switch-#{$state}--border-color--#{$type});\n --theme-switch-#{$state}--border-color--hover: var(--theme-switch-#{$state}--border-color--#{$type}--hover);\n --theme-switch-#{$state}--border-color--active: var(--theme-switch-#{$state}--border-color--#{$type}--active);\n}\n\n@include toggle-variant(\n $selector: '.ix-info',\n) {\n @include define-toggle-vars('off', 'info');\n @include define-toggle-vars('on', 'info');\n @include define-toggle-vars('mixed', 'info');\n}\n\n@include toggle-variant(\n $selector: '.ix-warning',\n) {\n @include define-toggle-vars('off', 'warning');\n @include define-toggle-vars('on', 'warning');\n @include define-toggle-vars('mixed', 'warning');\n}\n\n@include toggle-variant(\n $selector: '.ix-invalid--required',\n) {\n @include define-toggle-vars('off', 'invalid');\n @include define-toggle-vars('on', 'invalid');\n @include define-toggle-vars('mixed', 'invalid');\n}\n\n@include toggle-variant(\n $selector: '.ix-invalid',\n) {\n @include define-toggle-vars('off', 'invalid');\n @include define-toggle-vars('on', 'invalid');\n @include define-toggle-vars('mixed', 'invalid');\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 AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\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.indeterminate) {\n this.indeterminate = false;\n }\n this.checked = newChecked;\n this.checkedChange.emit(this.checked);\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 return (\n <Host\n class={{\n disabled: this.disabled,\n }}\n onClick={() => this.onCheckedChange(!this.checked)}\n >\n <input\n disabled={this.disabled}\n indeterminate={this.indeterminate}\n checked={this.checked}\n role=\"switch\"\n tabindex={0}\n type=\"checkbox\"\n aria-checked={a11yBoolean(this.checked)}\n onChange={(event) =>\n this.onCheckedChange((event.target as HTMLInputElement).checked)\n }\n ></input>\n <label class=\"switch\" tabIndex={-1}>\n <span class=\"slider\"></span>\n </label>\n {!this.hideText ? (\n <Fragment>\n {!this.indeterminate ? (\n <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n {this.checked ? this.textOn : this.textOff}\n </span>\n ) : (\n <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n {this.textIndeterminate}\n </span>\n )}\n </Fragment>\n ) : null}\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-5429f20b.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-97874de0.js';
-const treeItemCss = ":host{display:flex;align-items:center;height:32px;width:100%;cursor:pointer}: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 .tree-node-container{display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center}:host .icon-toggle-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem}:host .icon-toggle-container ix-icon{transition:transform var(--theme-default-time) ease-in-out}:host .icon-toggle-container ix-icon.icon-toggle-down{transform:rotate(90deg)}:host(:not(.disabled):not(:disabled):not(.selected).hover),:host(:not(.disabled):not(:disabled):not(.selected):hover){background-color:var(--theme-tree-item--background--hover)}:host(:not(.disabled):not(:disabled):not(.selected).active),:host(:not(.disabled):not(:disabled):not(.selected):active){background-color:var(--theme-tree-item--background--active)}:host(.selected){background-color:var(--theme-tree-item--background--selected)}:host(.selected.hover),:host(.selected:hover){background-color:var(--theme-tree-item--background--selected-hover)}:host(.selected.active),:host(.selected:active){background-color:var(--theme-tree-item--background--selected-active)}";
+const treeItemCss = ":host{display:flex;align-items:center;height:32px;width:100%;cursor:pointer}: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 .tree-node-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center}:host .tree-node-container .tree-node-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .icon-toggle-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-width:2rem}:host .icon-toggle-container ix-icon{transition:transform var(--theme-default-time) ease-in-out}:host .icon-toggle-container ix-icon.icon-toggle-down{transform:rotate(90deg)}:host(:not(.disabled):not(:disabled):not(.selected).hover),:host(:not(.disabled):not(:disabled):not(.selected):hover){background-color:var(--theme-tree-item--background--hover)}:host(:not(.disabled):not(:disabled):not(.selected).active),:host(:not(.disabled):not(:disabled):not(.selected):active){background-color:var(--theme-tree-item--background--active)}:host(.selected){background-color:var(--theme-tree-item--background--selected)}:host(.selected.hover),:host(.selected:hover){background-color:var(--theme-tree-item--background--selected-hover)}:host(.selected.active),:host(.selected:active){background-color:var(--theme-tree-item--background--selected-active)}";
 const IxTreeItemStyle0 = treeItemCss;
 const TreeItem = class {
@@ -9,21 +9,21 @@ const TreeItem = class {
         this.toggle = createEvent(this, "toggle", 7);
         this.itemClick = createEvent(this, "itemClick", 7);
         this.text = undefined;
-        this.hasChildren = undefined;
+        this.hasChildren = false;
         this.context = undefined;
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '5f5481c56072db6ae30c67a9c9ed8a709679d55b', class: {
-                selected: (_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected,
-            } }, h("div", { key: '1d36c65d8c44ce04347888c1a43532717b9f7e54', class: "icon-toggle-container", onClick: (e) => {
+        return (h(Host, { key: '0e92eced558f94df77f6ce6ac359395ecd3b1623', class: {
+                selected: !!((_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected),
+            } }, h("div", { key: '51c671e62ef92b7dc7080194fd566d58261e7481', class: "icon-toggle-container", onClick: (e) => {
                 e.preventDefault();
                 this.toggle.emit();
             } }, this.hasChildren ? (h("ix-icon", { name: 'chevron-right', size: "16", class: {
-                ['icon-toggle-down']: (_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded,
-            }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}` })) : null), h("div", { key: '43f5718e1c18f5a755f01580692349195dbe2e7e', class: "tree-node-container", onClick: () => {
+                ['icon-toggle-down']: !!((_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded),
+            }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}` })) : null), h("div", { key: 'da22cba786a63d23dcb56cb393438b6aacbbf185', class: "tree-node-container", onClick: () => {
                 this.itemClick.emit();
-            } }, this.text, h("slot", { key: '4f0556708349c484f97f3f687ab1f0974c4ef35e' }))));
+            } }, h("div", { key: '02989a25709e9d964b6ac4ddbb073b0b92347bd5', class: "tree-node-text" }, this.text), h("slot", { key: 'd9acb398b2008935e305ef145cfca52f888e2334' }))));
     }
 };
 TreeItem.style = IxTreeItemStyle0;

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

	@@ -1 +1 @@
1	- {"file":"ix-tree-item.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,~~g2DAAg2D~~,CAAC;~~AACr3D~~,yBAAe,WAAW;;MCgBb,QAAQ~~;;;;;;;;;IA0BnB~~,MAAM;;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU;~~aACnC~~,IAED,4DACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,CAAC,CAAC;gBACT,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;aACpB,IAEA,IAAI,CAAC,WAAW,IACf,eACE,IAAI,EAAE,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE;gBACL,CAAC,kBAAkB,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU;~~aAC/C~~,EACD,KAAK,EAAE,SACL,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,IAAG,SAAS,GAAG,UACzC,EAAE,GACF,IACA,IAAI,CACJ,EACN,4DACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE;gBACP,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;aACvB,~~IAEA~~,IAAI,CAAC,IAAI,~~EACV~~,8DAAa,CACT,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/tree-item/tree-item.scss?tag=ix-tree-item&encapsulation=shadow","src/components/tree-item/tree-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n align-items: center;\n\n height: 32px;\n width: 100%;\n\n cursor: pointer;\n\n .tree-node-container {\n display: flex;\n align-items: center;\n height: $x-large-space;\n flex-grow: 1;\n align-items: center;\n }\n\n .icon-toggle-container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n\n ix-icon {\n transition: transform var(--theme-default-time) ease-in-out;\n\n &.icon-toggle-down {\n transform: rotate(90deg);\n }\n }\n }\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).hover),\n:host(:not(.disabled):not(:disabled):not(.selected):hover) {\n background-color: var(--theme-tree-item--background--hover);\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).active),\n:host(:not(.disabled):not(:disabled):not(.selected):active) {\n background-color: var(--theme-tree-item--background--active);\n}\n\n:host(.selected) {\n background-color: var(--theme-tree-item--background--selected);\n}\n\n:host(.selected.hover),\n:host(.selected:hover) {\n background-color: var(--theme-tree-item--background--selected-hover);\n}\n\n:host(.selected.active),\n:host(.selected:active) {\n background-color: var(--theme-tree-item--background--selected-active);\n}\n","/\n * SPDX-FileCopyrightText: ~~2023~~ Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { TreeItemContext } from '../tree/tree-model';\n\n@Component({\n tag: 'ix-tree-item',\n styleUrl: 'tree-item.scss',\n shadow: true,\n})\nexport class TreeItem {\n /\n Text\n /\n @Prop() text: string;\n\n /\n Has tree item children\n /\n @Prop() hasChildren: ~~boolean~~;\n\n /\n Context\n /\n @Prop() context: TreeItemContext;\n\n /\n Expand/Collapsed toggled\n /\n @Event() toggle: EventEmitter<void>;\n\n /\n ~~Clicked~~\n */\n @Event() itemClick: EventEmitter<void>;\n\n render() {\n return (\n <Host\n class={{\n selected: this.context?.isSelected,\n }}\n >\n <div\n class=\"icon-toggle-container\"\n onClick={(e) => {\n e.preventDefault();\n this.toggle.emit();\n }}\n >\n {this.hasChildren ? (\n <ix-icon\n name={'chevron-right'}\n size=\"16\"\n class={{\n ['icon-toggle-down']: this.context?.isExpanded,\n }}\n color={`color-${\n this.context?.isExpanded ? 'primary' : 'std-text'\n }`}\n />\n ) : null}\n </div>\n <div\n class=\"tree-node-container\"\n onClick={() => {\n this.itemClick.emit();\n }}\n >\n {this.text}\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-tree-item.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,8gEAA8gE,CAAC;AACniE,yBAAe,WAAW;;MCgBb,QAAQ;;;;;;2BASG,KAAK;;;IAiB3B,MAAM;;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,CAAC,EAAC,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,CAAA;aACrC,IAED,4DACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,CAAC,CAAC;gBACT,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;aACpB,IAEA,IAAI,CAAC,WAAW,IACf,eACE,IAAI,EAAE,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE;gBACL,CAAC,kBAAkB,GAAG,CAAC,EAAC,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,CAAA;aACjD,EACD,KAAK,EAAE,SACL,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,IAAG,SAAS,GAAG,UACzC,EAAE,GACF,IACA,IAAI,CACJ,EACN,4DACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE;gBACP,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;aACvB,IAED,4DAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAO,EAC7C,8DAAa,CACT,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/tree-item/tree-item.scss?tag=ix-tree-item&encapsulation=shadow","src/components/tree-item/tree-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n align-items: center;\n\n height: 32px;\n width: 100%;\n\n cursor: pointer;\n\n .tree-node-container {\n @include ellipsis;\n display: flex;\n align-items: center;\n height: $x-large-space;\n flex-grow: 1;\n align-items: center;\n\n .tree-node-text {\n @include ellipsis;\n }\n }\n\n .icon-toggle-container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n min-width: 2rem;\n\n ix-icon {\n transition: transform var(--theme-default-time) ease-in-out;\n\n &.icon-toggle-down {\n transform: rotate(90deg);\n }\n }\n }\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).hover),\n:host(:not(.disabled):not(:disabled):not(.selected):hover) {\n background-color: var(--theme-tree-item--background--hover);\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).active),\n:host(:not(.disabled):not(:disabled):not(.selected):active) {\n background-color: var(--theme-tree-item--background--active);\n}\n\n:host(.selected) {\n background-color: var(--theme-tree-item--background--selected);\n}\n\n:host(.selected.hover),\n:host(.selected:hover) {\n background-color: var(--theme-tree-item--background--selected-hover);\n}\n\n:host(.selected.active),\n:host(.selected:active) {\n background-color: var(--theme-tree-item--background--selected-active);\n}\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { TreeItemContext } from '../tree/tree-model';\n\n@Component({\n tag: 'ix-tree-item',\n styleUrl: 'tree-item.scss',\n shadow: true,\n})\nexport class TreeItem {\n /\n Text\n /\n @Prop() text?: string;\n\n /\n Has tree item children\n /\n @Prop() hasChildren = false;\n\n /\n Context\n /\n @Prop() context?: TreeItemContext;\n\n /\n Expand/Collapsed toggled\n /\n @Event() toggle!: EventEmitter<void>;\n\n /\n Click on item not on the expand/collapse icon\n */\n @Event() itemClick!: EventEmitter<void>;\n\n render() {\n return (\n <Host\n class={{\n selected: !!this.context?.isSelected,\n }}\n >\n <div\n class=\"icon-toggle-container\"\n onClick={(e) => {\n e.preventDefault();\n this.toggle.emit();\n }}\n >\n {this.hasChildren ? (\n <ix-icon\n name={'chevron-right'}\n size=\"16\"\n class={{\n ['icon-toggle-down']: !!this.context?.isExpanded,\n }}\n color={`color-${\n this.context?.isExpanded ? 'primary' : 'std-text'\n }`}\n />\n ) : null}\n </div>\n <div\n class=\"tree-node-container\"\n onClick={() => {\n this.itemClick.emit();\n }}\n >\n <div class=\"tree-node-text\">{this.text}</div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,6 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5429f20b.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-97874de0.js';
 import { c as commonjsRequire, g as getDefaultExportFromCjs } from './_commonjsHelpers-e557d4a5.js';
 import { r as renderDefaultItem } from './default-tree-item-25091766.js';
+import { d as dropdownController } from './dropdown-controller-cb6d3789.js';
 var hyperlist = {exports: {}};
@@ -521,7 +522,7 @@ const Tree = class {
         this.updates = new Map();
         this.hasFirstRender = false;
         this.root = undefined;
-        this.model = undefined;
+        this.model = {};
         this.renderItem = undefined;
         this.context = {};
     }
@@ -557,7 +558,9 @@ const Tree = class {
                     setToggleListener(item, renderedTreeItem, index);
                     if (this.updates.has(item.id)) {
                         const doUpdate = this.updates.get(item.id);
-                        doUpdate(item, Object.assign({}, this.context));
+                        if (doUpdate) {
+                            doUpdate(item, Object.assign({}, this.context));
+                        }
                     }
                     this.updatePadding(renderedTreeItem, item);
                     return renderedTreeItem;
@@ -577,16 +580,27 @@ const Tree = class {
                 el.style.paddingRight = '1rem';
                 this.updatePadding(el, item);
                 if (!this.itemClickListener.has(el)) {
-                    const itemClickCallback = (e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
+                    const itemClickCallback = (event) => {
+                        const path = event.composedPath();
+                        const treeIndex = path.indexOf(this.hostElement);
+                        const treePath = path.slice(0, treeIndex);
+                        const hasTrigger = dropdownController.pathIncludesTrigger(treePath);
+                        if (event.defaultPrevented) {
+                            return;
+                        }
+                        if (hasTrigger) {
+                            return;
+                        }
                         Object.values(this.context).forEach((c) => (c.isSelected = false));
                         const context = this.getContext(item.id);
                         context.isSelected = true;
                         this.setContext(item.id, context);
                         this.nodeClicked.emit(item.id);
                     };
-                    el.addEventListener('itemClick', itemClickCallback);
+                    el.addEventListener('toggle', (event) => {
+                        event.preventDefault();
+                    });
+                    el.addEventListener('click', itemClickCallback);
                     this.itemClickListener.set(el, itemClickCallback);
                 }
                 setToggleListener(item, el, index);
@@ -688,7 +702,7 @@ const Tree = class {
         this.hyperlist = new Hyperlist(this.hostElement, config);
     }
     render() {
-        return (h(Host, { key: 'c663df76252b24029b33792151c943519a7c3be1' }, h("slot", { key: 'cfd96717be68c7c4e4c0b9e344ecd4c48481e1e0' })));
+        return (h(Host, { key: '546ff1bb1f22e6a0ce218f560a667ef329ae86d3' }, h("slot", { key: 'b80ab61e3b9985743cf29e481f52393e20ff6fc3' })));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {