npm - @siemens/ix - Versions diffs - 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1522-20241021144048 - Mend

@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1522-20241021144048

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

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

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

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

@@ -20,7 +20,7 @@ const SplitButtonItem = /*@__PURE__*/ proxyCustomElement(class SplitButtonItem e
         return this.wrapperRef.waitForCurrent();
     }
     render() {
-        return (h(Host, { key: '67c94f23aecf74d819719ad2490ea4955a4f687b' }, h("ix-dropdown-item", { key: '6781c392a05678c10cc636269c1a4185f26e6a82', ref: this.wrapperRef, suppressChecked: true, icon: this.icon, label: this.label, onItemClick: (e) => {
+        return (h(Host, { key: 'bae996f7ae7a776442894bb5847e768deb9ec93b' }, h("ix-dropdown-item", { key: 'a7208cb23490b14e792c478eef08d1aba12e51a2', ref: this.wrapperRef, suppressChecked: true, icon: this.icon, label: this.label, onItemClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
             }, onClick: (e) => this.itemClick.emit(e) })));

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

@@ -42,7 +42,7 @@ const SplitButton = /*@__PURE__*/ proxyCustomElement(class SplitButton extends H
                 'left-button-border': !this.outline,
             },
         };
-        return (h(Host, { key: '8738cbea2949228256a0d14cd3864e89725f0836' }, h("div", { key: '8b8cd05374defceea7a5e7dedbfce2e98acdd4df', class: { 'btn-group': true, 'middle-gap': !this.outline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }))), h("ix-icon-button", Object.assign({ key: '303efc36a9e39a7cb2e29630c5d25c1634b23135' }, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: this.splitIcon }))), h("ix-dropdown", { key: 'aea82c1fa78923f362c4c47f5ff2825b560f3882', ref: (r) => (this.dropdownElement = r), closeBehavior: this.closeBehavior }, h("slot", { key: 'b30c7ce0b9c62a55d92cb6a3a3dd311a4760b23b' }))));
+        return (h(Host, { key: '3a1cf24ab571aaefac909e540c15f572a077c386' }, h("div", { key: '9a9f8f5e15079835a5cef5a1009d12b8a515e79b', class: { 'btn-group': true, 'middle-gap': !this.outline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }))), h("ix-icon-button", Object.assign({ key: '1bc07a85756dc861f1a497031bcb8e7a808e3d14' }, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: this.splitIcon }))), h("ix-dropdown", { key: 'b795be074eeb92d7dac49086df1a18469c8081aa', ref: (r) => (this.dropdownElement = r), closeBehavior: this.closeBehavior }, h("slot", { key: '23aad4022b42257553fe4ee839db6b5453afd7e6' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxSplitButtonStyle0; }

package/components/ix-tile.js CHANGED Viewed

@@ -19,17 +19,17 @@ const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
         this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
     }
     render() {
-        return (h(Host, { key: '99be127d35b63162843a0b2f25e0f15578aecd5f', class: {
+        return (h(Host, { key: '93d548d09f06da08a89841c6501afdb4b1535000', class: {
                 'tile-small': this.size === 'small',
                 'tile-medium': this.size === 'medium',
                 'tile-big': this.size === 'big',
-            } }, h("div", { key: 'ba0171dcaac9a77cbb4ef2cb54a0084ec2cebbce', class: {
+            } }, h("div", { key: '51f81553c2ef82014b7abf9dfd76327e60554b2d', class: {
                 'tile-header': true,
                 'has-content': this.hasHeaderSlot,
-            } }, h("slot", { key: '715aab5ae29bbe4bb2ba271a99d47c11a1eba515', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '463ea9e3984c2986137ffd6fa908b9ac368ba927', class: "tile-subheader" }, h("slot", { key: 'a2578417965e67215653af75da65a7940b59f57b', name: "subheader" })), h("div", { key: '90a11faeff5467bb07ce3c08d48f276b02c9a4df', class: "tile-content" }, h("slot", { key: 'f7b49863a870f1a4cd5ff0803eb87f94e2153215' })), h("div", { key: '55518e3cf714cf102a062c7f4c521589807df795', class: {
+            } }, h("slot", { key: '127520289f127a74fff7593f56671e8690a787bc', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '96d501b87ec431af4452bfd9e6bc334f82d6a0eb', class: "tile-subheader" }, h("slot", { key: '811c2be8b69fb1844866c80a1ae8f3f6e19529ec', name: "subheader" })), h("div", { key: '22cf1c350d8479fb93c0529a0705c2f2e9b96a47', class: "tile-content" }, h("slot", { key: '5d1a29e47a33a858affb25f248e90aa2d5dbd63b' })), h("div", { key: '3cf7b393620a192856108b1eda35e82864947df6', class: {
                 'tile-footer': true,
                 'has-content': this.hasFooterSlot,
-            } }, h("slot", { key: 'd134bcc6c75fee65104641da784b9f98d9f761d2', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
+            } }, h("slot", { key: '82b4f1d5661947a303a638fd1b4f46564848b07f', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
     }
     get hostElement() { return this; }
     static get style() { return IxTileStyle0; }

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

	@@ -1 +1 @@
1	- {"file":"ix-tile.js","mappings":";;AAAA,MAAM,OAAO,GAAG,u8DAAu8D,CAAC;AACx9D,qBAAe,OAAO;;MCeT,IAAI;;;;;oBAM4B,QAAQ;6BAEjB,KAAK;6BACL,KAAK;;IAEvC,sBAAsB;QACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;KAC1E;IAED,sBAAsB;QACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;KAC1E;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACrC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;aAChC,IAED,4DACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,aAAa,EAAE,IAAI,CAAC,aAAa;aAClC,IAED,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,EACN,4DAAK,KAAK,EAAC,gBAAgB,IACzB,6DAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACN,4DACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,aAAa,EAAE,IAAI,CAAC,aAAa;aAClC,IAED,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tile/tile.scss?tag=ix-tile&encapsulation=shadow","src/components/tile/tile.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@import 'legacy/mixins/fonts';\n\n@mixin set-height($height) {\n height: $height;\n min-height: $height;\n max-height: $height;\n}\n\n$heightSmall: 2.5rem;\n$heightMedium: 5rem;\n$heightBig: 10rem;\n$width: 11.937rem;\n\n:host {\n @include ix-component;\n\n min-width: $width;\n max-width: $width;\n width: $width;\n\n display: flex;\n flex-direction: column;\n border: 1px solid var(--theme-tile--border);\n border-radius: var(--theme-tile--border-radius);\n\n background-color: var(--theme-color-2);\n color: var(--theme-color-std-text);\n box-shadow: var(--theme-tile--box-shadow);\n\n // @each $key, $value in $color-map-status {\n // &.tile-#{$key} {\n // background-color: #{$value};\n // color: automatic-text-color($value, 65);\n // }\n // }\n\n .tile-header {\n display: flex;\n align-items: center;\n\n @include text-l-title;\n }\n\n .tile-header,\n .tile-subheader,\n .tile-content,\n .tile-footer {\n padding: 0 $default-space;\n }\n\n .tile-header,\n .tile-content {\n flex-grow: 1;\n }\n\n .tile-header.has-content {\n display: flex;\n height: $large-control-height;\n max-height: $large-control-height;\n padding-inline-end: $small-space;\n }\n\n .tile-subheader {\n color: var(--theme-btn-invisible-secondary--color);\n flex-grow: 0;\n }\n\n .tile-footer.has-content {\n border-block-start: 1px solid var(--theme-color-1);\n height: $large-control-height;\n }\n}\n\n:host(.tile-small) {\n @include set-height($heightSmall);\n}\n\n:host(.tile-medium) {\n @include set-height($heightMedium);\n}\n\n:host(.tile-big) {\n @include set-height($heightBig);\n}\n\n:host(:active),\n:host(:focus-visible),\n:host(:visited) {\n outline: none;\n}\n","/\n * SPDX-FileCopyrightText: ~~2023~~ Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'ix-tile',\n styleUrl: 'tile.scss',\n shadow: true,\n})\nexport class Tile {\n @Element() hostElement: HTMLIxTileElement;\n\n /\n Size of the tile - one of 'small', 'medium' or 'large'\n */\n @Prop() size: 'small' \| 'medium' \| 'big' = 'medium';\n\n @State() hasHeaderSlot: boolean = false;\n @State() hasFooterSlot: boolean = false;\n\n handleHeaderSlotChange() {\n this.hasHeaderSlot = !!this.hostElement.querySelector('[slot=\"header\"]');\n }\n\n handleFooterSlotChange() {\n this.hasFooterSlot = !!this.hostElement.querySelector('[slot=\"footer\"]');\n }\n\n render() {\n return (\n <Host\n class={{\n 'tile-small': this.size === 'small',\n 'tile-medium': this.size === 'medium',\n 'tile-big': this.size === 'big',\n }}\n >\n <div\n class={{\n 'tile-header': true,\n 'has-content': this.hasHeaderSlot,\n }}\n >\n <slot\n name=\"header\"\n onSlotchange={() => this.handleHeaderSlotChange()}\n ></slot>\n </div>\n <div class=\"tile-subheader\">\n <slot name=\"subheader\"></slot>\n </div>\n <div class=\"tile-content\">\n <slot></slot>\n </div>\n <div\n class={{\n 'tile-footer': true,\n 'has-content': this.hasFooterSlot,\n }}\n >\n <slot\n name=\"footer\"\n onSlotchange={() => this.handleFooterSlotChange()}\n ></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-tile.js","mappings":";;AAAA,MAAM,OAAO,GAAG,u8DAAu8D,CAAC;AACx9D,qBAAe,OAAO;;MCeT,IAAI;;;;;oBAM4B,QAAQ;6BAEjB,KAAK;6BACL,KAAK;;IAEvC,sBAAsB;QACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;KAC1E;IAED,sBAAsB;QACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;KAC1E;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACrC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;aAChC,IAED,4DACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,aAAa,EAAE,IAAI,CAAC,aAAa;aAClC,IAED,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,EACN,4DAAK,KAAK,EAAC,gBAAgB,IACzB,6DAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACN,4DACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,aAAa,EAAE,IAAI,CAAC,aAAa;aAClC,IAED,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tile/tile.scss?tag=ix-tile&encapsulation=shadow","src/components/tile/tile.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/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n\n@mixin set-height($height) {\n height: $height;\n min-height: $height;\n max-height: $height;\n}\n\n$heightSmall: 2.5rem;\n$heightMedium: 5rem;\n$heightBig: 10rem;\n$width: 11.937rem;\n\n:host {\n @include ix-component;\n\n min-width: $width;\n max-width: $width;\n width: $width;\n\n display: flex;\n flex-direction: column;\n border: 1px solid var(--theme-tile--border);\n border-radius: var(--theme-tile--border-radius);\n\n background-color: var(--theme-color-2);\n color: var(--theme-color-std-text);\n box-shadow: var(--theme-tile--box-shadow);\n\n // @each $key, $value in $color-map-status {\n // &.tile-#{$key} {\n // background-color: #{$value};\n // color: automatic-text-color($value, 65);\n // }\n // }\n\n .tile-header {\n display: flex;\n align-items: center;\n\n @include text-l-title;\n }\n\n .tile-header,\n .tile-subheader,\n .tile-content,\n .tile-footer {\n padding: 0 $default-space;\n }\n\n .tile-header,\n .tile-content {\n flex-grow: 1;\n }\n\n .tile-header.has-content {\n display: flex;\n height: $large-control-height;\n max-height: $large-control-height;\n padding-inline-end: $small-space;\n }\n\n .tile-subheader {\n color: var(--theme-btn-invisible-secondary--color);\n flex-grow: 0;\n }\n\n .tile-footer.has-content {\n border-block-start: 1px solid var(--theme-color-1);\n height: $large-control-height;\n }\n}\n\n:host(.tile-small) {\n @include set-height($heightSmall);\n}\n\n:host(.tile-medium) {\n @include set-height($heightMedium);\n}\n\n:host(.tile-big) {\n @include set-height($heightBig);\n}\n\n:host(:active),\n:host(:focus-visible),\n:host(:visited) {\n outline: none;\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, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'ix-tile',\n styleUrl: 'tile.scss',\n shadow: true,\n})\nexport class Tile {\n @Element() hostElement: HTMLIxTileElement;\n\n /\n Size of the tile - one of 'small', 'medium' or 'large'\n */\n @Prop() size: 'small' \| 'medium' \| 'big' = 'medium';\n\n @State() hasHeaderSlot: boolean = false;\n @State() hasFooterSlot: boolean = false;\n\n handleHeaderSlotChange() {\n this.hasHeaderSlot = !!this.hostElement.querySelector('[slot=\"header\"]');\n }\n\n handleFooterSlotChange() {\n this.hasFooterSlot = !!this.hostElement.querySelector('[slot=\"footer\"]');\n }\n\n render() {\n return (\n <Host\n class={{\n 'tile-small': this.size === 'small',\n 'tile-medium': this.size === 'medium',\n 'tile-big': this.size === 'big',\n }}\n >\n <div\n class={{\n 'tile-header': true,\n 'has-content': this.hasHeaderSlot,\n }}\n >\n <slot\n name=\"header\"\n onSlotchange={() => this.handleHeaderSlotChange()}\n ></slot>\n </div>\n <div class=\"tile-subheader\">\n <slot name=\"subheader\"></slot>\n </div>\n <div class=\"tile-content\">\n <slot></slot>\n </div>\n <div\n class={{\n 'tile-footer': true,\n 'has-content': this.hasFooterSlot,\n }}\n >\n <slot\n name=\"footer\"\n onSlotchange={() => this.handleFooterSlotChange()}\n ></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -79,10 +79,10 @@ const ToastContainer = /*@__PURE__*/ proxyCustomElement(class ToastContainer ext
         };
     }
     render() {
-        return (h(Host, { key: '7ed12499736b25361b54781a914704624361f413', class: {
+        return (h(Host, { key: '6685007196b533f4494919f084cdba16ec0deed1', class: {
                 'toast-container--bottom-right': this.position === 'bottom-right',
                 'toast-container--top-right': this.position === 'top-right',
-            } }, h("slot", { key: '48a789d536cb007c2dc31d15615600cd0b51111d' })));
+            } }, h("slot", { key: 'ad09d6ad68e29b75ef29c4e943006ddf22a7233e' })));
     }
     static get watchers() { return {
         "position": ["onPositionChange"]

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

	@@ -1 +1 @@
1	- {"file":"ix-toast-container.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: ~~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.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: 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/components/ix-toggle-button.js CHANGED Viewed

@@ -60,9 +60,9 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
                 'aria-pressed': a11yBoolean(this.pressed),
             },
         };
-        return (h(Host, { key: '03308c568a28a0c4410fe3872b1a770995627183', class: {
+        return (h(Host, { key: '7bfb2bae3e38637b194470d62d25b10d82ca40a3', class: {
                 disabled: this.disabled || this.loading,
-            } }, h(BaseButton, Object.assign({ key: '849c02e51091538631c0a8019fdea2b9091861b6' }, baseButtonProps), h("slot", { key: '1f4c89e2ee5e540dc3f7caae1641853d466b61b4' }))));
+            } }, h(BaseButton, Object.assign({ key: '61c614727d11cb4f2e806649e931b865c57e25c6' }, baseButtonProps), h("slot", { key: 'c1f7e51d178d87ed25abfc1179300cfb65553c2e' }))));
     }
     static get watchers() { return {
         "variant": ["onVariantChange"],

package/components/ix-toggle.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { a as a11yBoolean } from './a11y.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;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{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>.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{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 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 IxToggleStyle0 = toggleCss;
 const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement {
@@ -10,10 +10,6 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         this.__registerHost();
         this.__attachShadow();
         this.checkedChange = createEvent(this, "checkedChange", 7);
-        this.valueChange = createEvent(this, "valueChange", 7);
-        this.formInternals = this.attachInternals();
-        this.name = undefined;
-        this.value = 'on';
         this.checked = false;
         this.disabled = false;
         this.indeterminate = false;
@@ -21,7 +17,6 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         this.textOff = 'Off';
         this.textIndeterminate = 'Mixed';
         this.hideText = false;
-        this.required = false;
     }
     onCheckedChange(newChecked) {
         if (this.indeterminate) {
@@ -30,54 +25,21 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         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: '0afa08e1803352f2bb3360c11fcda2745531e20d', class: {
+        return (h(Host, { key: '5e6df44041a09e40e0633022e3261b9cc38db141', class: {
                 disabled: this.disabled,
-            }, onClick: () => this.onCheckedChange(!this.checked) }, h("input", { key: '37ba0cf086ed01c01e61ff0bb24367759b537cd7', 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: '83d6712432de4b45396b11f7f21cf7072fd19fcd', class: "switch", tabIndex: -1 }, h("span", { key: 'f3f91c36a2043f039813b43bbc6285d67239d050', 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: 'ef94845255dde9150edd3fdaa1b534775f12bdb1', 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: '951669fc7caac59eed9d4ea0b85b5eecad423e0a', class: "switch", tabIndex: -1 }, h("span", { key: '9e6827bb3258743340fb1c04593a1d4fa8ac27eb', 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 this; }
-    static get watchers() { return {
-        "checked": ["watchCheckedChange"]
-    }; }
     static get style() { return IxToggleStyle0; }
-}, [65, "ix-toggle", {
-        "name": [513],
-        "value": [513],
+}, [1, "ix-toggle", {
         "checked": [1540],
         "disabled": [4],
         "indeterminate": [1540],
         "textOn": [1, "text-on"],
         "textOff": [1, "text-off"],
         "textIndeterminate": [1, "text-indeterminate"],
-        "hideText": [4, "hide-text"],
-        "required": [516],
-        "hasValidValue": [64],
-        "getAssociatedFormElement": [64]
-    }, undefined, {
-        "checked": ["watchCheckedChange"]
+        "hideText": [4, "hide-text"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

	@@ -1 +1 @@
1	- {"file":"ix-toggle.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,mpbAAmpb,CAAC;AACtqb,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 {\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 > .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 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/field';\n\n/\n @form-ready 2.4.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}
1	+ {"file":"ix-toggle.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}

package/components/ix-tree.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { r as renderDefaultItem } from './default-tree-item.js';
+import { d as dropdownController } from './dropdown-controller.js';
 import { d as defineCustomElement$2 } from './tree-item.js';
 function getDefaultExportFromCjs (x) {
@@ -531,7 +532,7 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class Tree extends HTMLElement {
         this.updates = new Map();
         this.hasFirstRender = false;
         this.root = undefined;
-        this.model = undefined;
+        this.model = {};
         this.renderItem = undefined;
         this.context = {};
     }
@@ -567,7 +568,9 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class Tree extends HTMLElement {
                     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;
@@ -587,16 +590,27 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class Tree extends HTMLElement {
                 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);
@@ -698,7 +712,7 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class Tree extends HTMLElement {
         this.hyperlist = new Hyperlist(this.hostElement, config);
     }
     render() {
-        return (h(Host, { key: 'a64e17e0c6466065fe8de80715cbac794a6e7a95' }, h("slot", { key: 'a348c8357097c31e323d95033546d841f1986680' })));
+        return (h(Host, { key: 'd58c48d0890011d947993a87ec727e606adc0125' }, h("slot", { key: '3d284f5146f832a6a151148d9bb37be803acd048' })));
     }
     get hostElement() { return this; }
     static get watchers() { return {