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

@siemens/ix 0.0.0-20240522073858 → 0.0.0-pr-1318-20240627080522

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

package/components/ix-textarea-field.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-textarea-field.js","mappings":"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","names":[],"sources":["src/components/text-field/textarea-field.scss?tag=ix-textarea-field&encapsulation=shadow","src/components/text-field/textarea-field.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@import \"./text-field.mixins.scss\";\n\n@include input-field;\n\n@include host-valid {\n}\n\n@include host-info {\n textarea {\n border-color: var(--theme-input--border-color--info);\n }\n\n textarea:hover {\n border-color: var(--theme-input--border-color--info--hover) !important;\n }\n\n textarea:active {\n border-color: var(--theme-input--border-color--info--active) !important;\n }\n}\n\n@include host-warning {\n textarea {\n border-color: var(--theme-input--border-color--warning--active) !important;\n }\n\n textarea:hover {\n border-color: var(--theme-input--border-color--warning--active) !important;\n }\n\n textarea:active {\n border-color: var(--theme-input--border-color--warning--active) !important;\n }\n}\n\n@include host-invalid {\n textarea {\n background-color: var(--theme-input--background--invalid);\n border-color: var(--theme-input--border-color--invalid);\n }\n\n textarea {\n border-color: var(--theme-input--border-color--invalid) !important;\n }\n\n textarea:hover {\n border-color: var(--theme-input--border-color--invalid--hover) !important;\n }\n\n textarea:active {\n border-color: var(--theme-input--border-color--invalid--active) !important;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n State,\n h,\n} from '@stencil/core';\nimport {\n HookValidationLifecycle,\n IxInputFieldComponent,\n ValidationResults,\n} from '../utils/field';\nimport { makeRef } from '../utils/make-ref';\nimport { TextareaElement } from './input.fc';\nimport { mapValidationResult, onInputBlur } from './text-field.util';\n\n/**\n * @since 2.4.0\n * @form-ready 2.4.0\n */\n@Component({\n tag: 'ix-textarea-field',\n styleUrl: 'textarea-field.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class TextareaField implements IxInputFieldComponent<string> {\n @Element() hostElement!: HTMLIxTextareaFieldElement;\n @AttachInternals() formInternals!: ElementInternals;\n\n /**\n * The name of the textarea field.\n */\n @Prop({ reflect: true }) name?: string;\n\n /**\n * The placeholder text for the textarea field.\n */\n @Prop({ reflect: true }) placeholder?: string;\n\n /**\n * The value of the textarea field.\n */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /**\n * Determines if the textarea field is required.\n */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Determines if the textarea field is disabled.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Determines if the textarea field is readonly.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * The helper text for the textarea field.\n */\n @Prop() helperText?: string;\n\n /**\n * The info text for the textarea field.\n */\n @Prop() infoText?: string;\n\n /**\n * Determines if the text should be displayed as a tooltip.\n */\n @Prop() showTextAsTooltip?: boolean;\n\n /**\n * The valid text for the textarea field.\n */\n @Prop() validText?: string;\n\n /**\n * The warning text for the textarea field.\n */\n @Prop() warningText?: string;\n\n /**\n * The label for the textarea field.\n */\n @Prop({ reflect: true }) label?: string;\n\n /**\n * The error text for the textarea field.\n */\n @Prop() invalidText?: string;\n\n /**\n * The height of the textarea field.\n * Helpful if you want to set an initial height for the textarea.\n */\n @Prop() textareaHeight: string = '300px';\n\n /**\n * The height of the textarea field.\n * Helpful if you want to set an initial height for the textarea.\n */\n @Prop() textareaWidth: string = '100%';\n\n /**\n * The number of rows of the textarea field.\n * Helpful if you want to set an initial height for the textarea.\n */\n @Prop() textareaRows: string = '5';\n\n /**\n * The height of the textarea field.\n * Helpful if you want to set an initial height for the textarea.\n */\n @Prop({ reflect: true }) textareaCols: string = '20';\n\n /**\n * Determines the resize behavior of the textarea field.\n * 'dimensions' means the textarea will be resized based on textareaHeight and textareaWidth.\n * 'rowsCols' means the textarea will be resized based on textareaRows and textareaCols.\n */\n @Prop() resizeBehavior: 'dimensions' | 'rowsCols' = 'rowsCols';\n\n /**\n * The maximum length of the textarea field.\n */\n @Prop() maxLength?: number;\n\n /**\n * The minimum length of the textarea field.\n */\n @Prop() minLength?: number;\n\n /**\n * Event emitted when the value of the textarea field changes.\n */\n @Event() valueChange!: EventEmitter<string>;\n\n /**\n * Event emitted when the validity state of the textarea field changes.\n */\n @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n /**\n * Event emitted when the textarea field loses focus.\n */\n @Event() ixBlur!: EventEmitter<void>;\n\n @State() isInvalid = false;\n @State() isValid = false;\n @State() isInfo = false;\n @State() isWarning = false;\n @State() isInvalidByRequired = false;\n\n private textAreaRef = makeRef<HTMLTextAreaElement>();\n\n @HookValidationLifecycle()\n updateClassMappings(result: ValidationResults) {\n mapValidationResult(this, result);\n }\n\n componentWillLoad() {\n this.updateFormInternalValue(this.value);\n }\n\n updateFormInternalValue(value: string) {\n this.formInternals.setFormValue(value);\n this.value = value;\n }\n\n /** @internal */\n @Method()\n async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n return this.formInternals.form;\n }\n\n /** @internal */\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(!!this.value);\n }\n\n /**\n * Get the native textarea element.\n */\n @Method()\n getNativeInputElement(): Promise<HTMLTextAreaElement> {\n return this.textAreaRef.waitForCurrent();\n }\n\n getSizeValue(behavior: string, value: string) {\n return this.resizeBehavior === behavior ? value : undefined;\n }\n\n render() {\n return (\n <Host\n class={{\n disabled: this.disabled,\n readonly: this.readonly,\n }}\n >\n <ix-field-wrapper\n required={this.required}\n label={this.label}\n helperText={this.helperText}\n invalidText={this.invalidText}\n infoText={this.infoText}\n warningText={this.warningText}\n validText={this.validText}\n showTextAsTooltip={this.showTextAsTooltip}\n isInvalid={this.isInvalid}\n isValid={this.isValid}\n isInfo={this.isInfo}\n isWarning={this.isWarning}\n controlRef={this.textAreaRef}\n >\n <slot name=\"label\" slot=\"label\"></slot>\n\n {this.maxLength && (\n <ix-typography slot=\"bottom-right\" color=\"weak\">\n {this.value.length}/{this.maxLength}\n </ix-typography>\n )}\n <div\n class={{\n 'input-wrapper': true,\n }}\n >\n <TextareaElement\n minLength={this.minLength}\n maxLength={this.maxLength}\n textareaHeight={this.getSizeValue(\n 'dimensions',\n this.textareaHeight\n )}\n textareaWidth={this.getSizeValue(\n 'dimensions',\n this.textareaWidth\n )}\n textareaCols={this.getSizeValue('rowsCols', this.textareaCols)}\n textareaRows={this.getSizeValue('rowsCols', this.textareaRows)}\n readonly={this.readonly}\n disabled={this.disabled}\n isInvalid={this.isInvalid}\n required={this.required}\n value={this.value}\n placeholder={this.placeholder}\n textAreaRef={this.textAreaRef}\n valueChange={(value) => this.valueChange.emit(value)}\n updateFormInternalValue={(value) =>\n this.updateFormInternalValue(value)\n }\n onBlur={() => onInputBlur(this, this.textAreaRef.current)}\n ></TextareaElement>\n </div>\n </ix-field-wrapper>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-tile.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const tileCss = ":host{min-width:11.937rem;max-width:11.937rem;width:11.937rem;display:flex;flex-direction:column;border:1px solid var(--theme-tile--border);border-radius:var(--theme-tile--border-radius);background-color:var(--theme-color-2);color:var(--theme-color-std-text);box-shadow:var(--theme-tile--box-shadow)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tile-header{display:flex;align-items:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}:host .tile-header,:host .tile-subheader,:host .tile-content,:host .tile-footer{padding:0 1rem}:host .tile-header,:host .tile-content{flex-grow:1}:host .tile-header.has-content{display:flex;height:2.5rem;max-height:2.5rem;padding-inline-end:0.5rem}:host .tile-subheader{color:var(--theme-btn-invisible-secondary--color);flex-grow:0}:host .tile-footer.has-content{border-block-start:1px solid var(--theme-color-1);height:2.5rem}:host(.tile-small){height:2.5rem;min-height:2.5rem;max-height:2.5rem}:host(.tile-medium){height:5rem;min-height:5rem;max-height:5rem}:host(.tile-big){height:10rem;min-height:10rem;max-height:10rem}:host(:active),:host(:focus-visible),:host(:visited){outline:none}";
+const tileCss = ":host{min-width:11.937rem;max-width:11.937rem;width:11.937rem;display:flex;flex-direction:column;border:1px solid var(--theme-tile--border);border-radius:var(--theme-tile--border-radius);background-color:var(--theme-color-2);color:var(--theme-color-std-text);box-shadow:var(--theme-tile--box-shadow)}: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 .tile-header{display:flex;align-items:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}:host .tile-header,:host .tile-subheader,:host .tile-content,:host .tile-footer{padding:0 1rem}:host .tile-header,:host .tile-content{flex-grow:1}:host .tile-header.has-content{display:flex;height:2.5rem;max-height:2.5rem;padding-inline-end:0.5rem}:host .tile-subheader{color:var(--theme-btn-invisible-secondary--color);flex-grow:0}:host .tile-footer.has-content{border-block-start:1px solid var(--theme-color-1);height:2.5rem}:host(.tile-small){height:2.5rem;min-height:2.5rem;max-height:2.5rem}:host(.tile-medium){height:5rem;min-height:5rem;max-height:5rem}:host(.tile-big){height:10rem;min-height:10rem;max-height:10rem}:host(:active),:host(:focus-visible),:host(:visited){outline:none}";
 const IxTileStyle0 = tileCss;
 const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
@@ -19,17 +19,17 @@ const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
         this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
     }
     render() {
-        return (h(Host, { key: '16fa86cdf2448b3335401be00cba0284fd166959', class: {
+        return (h(Host, { key: '99be127d35b63162843a0b2f25e0f15578aecd5f', class: {
                 'tile-small': this.size === 'small',
                 'tile-medium': this.size === 'medium',
                 'tile-big': this.size === 'big',
-            } }, h("div", { key: '0aaf6e763e1bd75f919d1067208af8a33be06937', class: {
+            } }, h("div", { key: 'ba0171dcaac9a77cbb4ef2cb54a0084ec2cebbce', class: {
                 'tile-header': true,
                 'has-content': this.hasHeaderSlot,
-            } }, h("slot", { key: '70178ba49417bf674cc8798f6824aa37864668f7', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '823a4907cbe143ef6586a5482f31c8729644bf76', class: "tile-subheader" }, h("slot", { key: '6e240f390b24fec6630bed00539479d11d89b096', name: "subheader" })), h("div", { key: '7d83cbe84804423f654e4f9dd0fe3f2ca261a3c4', class: "tile-content" }, h("slot", { key: '100276ea9333c7dd7d183dbd7fb2651475b397cf' })), h("div", { key: 'f73dcff2a9730339deed5c82c0978ff4122dd6a5', class: {
+            } }, h("slot", { key: '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: {
                 'tile-footer': true,
                 'has-content': this.hasFooterSlot,
-            } }, h("slot", { key: 'a550b2cc798c1bc8a57adea6c6fcd4863ad9ac57', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
+            } }, h("slot", { key: 'd134bcc6c75fee65104641da784b9f98d9f761d2', 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,~~2yDAA2yD~~,CAAC;~~AAC5zD~~,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: 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}

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

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './icon-button.js';
 import { d as defineCustomElement$3 } from './spinner.js';
 import { d as defineCustomElement$2 } from './toast.js';
-const toastContainerCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}#toast-container>:not(:last-child){margin-block-end:1rem}.toast-container{display:block;position:fixed}.toast-container--top-right{right:1rem;top:2rem}.toast-container--bottom-right{right:1rem;bottom:2rem}";
+const toastContainerCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}#toast-container>:not(:last-child){margin-block-end:1rem}.toast-container{display:block;position:fixed}.toast-container--top-right{right:1rem;top:2rem}.toast-container--bottom-right{right:1rem;bottom:2rem}";
 const IxToastContainerStyle0 = toastContainerCss;
 const ToastContainer = /*@__PURE__*/ proxyCustomElement(class ToastContainer extends HTMLElement {
@@ -79,10 +79,10 @@ const ToastContainer = /*@__PURE__*/ proxyCustomElement(class ToastContainer ext
         };
     }
     render() {
-        return (h(Host, { key: '22ee0d6985d0b35a3d623dfc318c22cb0a2720ae', class: {
+        return (h(Host, { key: '7ed12499736b25361b54781a914704624361f413', class: {
                 'toast-container--bottom-right': this.position === 'bottom-right',
                 'toast-container--top-right': this.position === 'top-right',
-            } }, h("slot", { key: '9cfd7c6607fde4dd11f6b4c026f017b31acba8d9' })));
+            } }, h("slot", { key: '48a789d536cb007c2dc31d15615600cd0b51111d' })));
     }
     static get watchers() { return {
         "position": ["onPositionChange"]

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

	@@ -1 +1 @@
1	- {"file":"ix-toast-container.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,~~kzBAAkzB~~,CAAC;~~AAC70B~~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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: 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}

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

@@ -3,7 +3,7 @@ import { B as BaseButton } from './base-button.js';
 import { a as a11yBoolean } from './a11y.js';
 import { d as defineCustomElement$2 } from './spinner.js';
-const toggleButtonCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:var(--theme-default-time);padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}.btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:inline-block;width:auto;height:2rem;vertical-align:middle}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .btn{width:100%;height:100%}:host button:not(:disabled){cursor:pointer}:host(.disabled){pointer-events:none}";
+const toggleButtonCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:var(--theme-default-time);padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}.btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:inline-block;width:auto;height:2rem;vertical-align:middle}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .btn{width:100%;height:100%}:host button:not(:disabled){cursor:pointer}:host(.disabled){pointer-events:none}";
 const IxToggleButtonStyle0 = toggleButtonCss;
 const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends HTMLElement {
@@ -60,9 +60,9 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
                 'aria-pressed': a11yBoolean(this.pressed),
             },
         };
-        return (h(Host, { key: 'f8633f71b51df3509bc679922b432bd5c530d580', class: {
+        return (h(Host, { key: '03308c568a28a0c4410fe3872b1a770995627183', class: {
                 disabled: this.disabled || this.loading,
-            } }, h(BaseButton, Object.assign({ key: '005a4497d2d37783c6dcf2824c471b56515396ed' }, baseButtonProps), h("slot", { key: '9cafada091aa59fd6b447a2821f58ebd504875cd' }))));
+            } }, h(BaseButton, Object.assign({ key: '849c02e51091538631c0a8019fdea2b9091861b6' }, baseButtonProps), h("slot", { key: '1f4c89e2ee5e540dc3f7caae1641853d466b61b4' }))));
     }
     static get watchers() { return {
         "variant": ["onVariantChange"],

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

	@@ -1 +1 @@
1	- {"file":"ix-toggle-button.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,~~oxaAAoxa~~,CAAC;~~AAC7ya~~,6BAAe,eAAe;;MC6BjB,YAAY;;;;;;uBAKU,WAAW;uBAK1B,KAAK;qBAKP,KAAK;wBAKe,KAAK;uBAKd,KAAK;;uBAUd,KAAK;;IAOf,2BAA2B;QACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;KACnE;IAEO,gBAAgB;QACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;KACH;IAGD,eAAe;QACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;YACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;KACF;IAGD,aAAa;QACX,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAGD,eAAe;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACxC;IAED,MAAM;QACJ,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;YAC3C,IAAI,EAAE,QAAQ;YACd,cAAc,EAAE;gBACd,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;aAC1C;SACF,CAAC;QAEF,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;aACxC,IAED,EAAC,UAAU,qEAAK,eAAe,GAC7B,8DAAa,CACF,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/toggle-button/toggle-button.scss?tag=ix-toggle-button&encapsulation=shadow","src/components/toggle-button/toggle-button.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 'legacy/components/buttons';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: inline-block;\n width: auto;\n height: $x-large-space;\n vertical-align: middle;\n\n .btn {\n width: 100%;\n height: 100%;\n }\n\n button:not(:disabled) {\n cursor: pointer;\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-toggle-button',\n shadow: true,\n styleUrl: './toggle-button.scss',\n})\nexport class ToggleButton {\n /\n Button variant.\n * Important: Variant 'primary' can only be combined with either outline or ghost.\n /\n @Prop() variant: ButtonVariant = 'secondary';\n\n /\n Outline button\n /\n @Prop() outline = false;\n\n /\n Button with no background or outline\n /\n @Prop() ghost = false;\n\n /\n Disable the button\n /\n @Prop({ reflect: true }) disabled = false;\n\n /\n Loading button\n /\n @Prop() loading: boolean = false;\n\n /\n Icon name\n /\n @Prop() icon: string;\n\n /\n Show button as pressed\n /\n @Prop() pressed = false;\n\n /\n Pressed change event\n */\n @Event() pressedChange: EventEmitter<boolean>;\n\n private isIllegalToggleButtonConfig() {\n return this.variant === 'primary' && (this.outline \|\| this.ghost);\n }\n\n private logIllegalConfig() {\n console.warn(\n 'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n );\n }\n\n @Watch('variant')\n onVariantChange() {\n if (this.isIllegalToggleButtonConfig()) {\n this.logIllegalConfig();\n }\n }\n\n @Watch('ghost')\n onGhostChange() {\n this.onVariantChange();\n }\n\n @Watch('outline')\n onOutlineChange() {\n this.onVariantChange();\n }\n\n componentDidLoad() {\n this.onVariantChange();\n }\n\n private dispatchPressedChange() {\n this.pressedChange.emit(!this.pressed);\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: false,\n iconOval: false,\n selected: this.pressed,\n disabled: this.disabled \|\| this.loading,\n icon: this.icon,\n loading: this.loading,\n onClick: () => this.dispatchPressedChange(),\n type: 'button',\n ariaAttributes: {\n 'aria-pressed': a11yBoolean(this.pressed),\n },\n };\n\n return (\n <Host\n class={{\n disabled: this.disabled \|\| this.loading,\n }}\n >\n <BaseButton {...baseButtonProps}>\n <slot></slot>\n </BaseButton>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-toggle-button.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,g7aAAg7a,CAAC;AACz8a,6BAAe,eAAe;;MC6BjB,YAAY;;;;;;uBAKU,WAAW;uBAK1B,KAAK;qBAKP,KAAK;wBAKe,KAAK;uBAKd,KAAK;;uBAUd,KAAK;;IAOf,2BAA2B;QACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;KACnE;IAEO,gBAAgB;QACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;KACH;IAGD,eAAe;QACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;YACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;KACF;IAGD,aAAa;QACX,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAGD,eAAe;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACxC;IAED,MAAM;QACJ,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;YAC3C,IAAI,EAAE,QAAQ;YACd,cAAc,EAAE;gBACd,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;aAC1C;SACF,CAAC;QAEF,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;aACxC,IAED,EAAC,UAAU,qEAAK,eAAe,GAC7B,8DAAa,CACF,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/toggle-button/toggle-button.scss?tag=ix-toggle-button&encapsulation=shadow","src/components/toggle-button/toggle-button.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 'legacy/components/buttons';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: inline-block;\n width: auto;\n height: $x-large-space;\n vertical-align: middle;\n\n .btn {\n width: 100%;\n height: 100%;\n }\n\n button:not(:disabled) {\n cursor: pointer;\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-toggle-button',\n shadow: true,\n styleUrl: './toggle-button.scss',\n})\nexport class ToggleButton {\n /\n Button variant.\n * Important: Variant 'primary' can only be combined with either outline or ghost.\n /\n @Prop() variant: ButtonVariant = 'secondary';\n\n /\n Outline button\n /\n @Prop() outline = false;\n\n /\n Button with no background or outline\n /\n @Prop() ghost = false;\n\n /\n Disable the button\n /\n @Prop({ reflect: true }) disabled = false;\n\n /\n Loading button\n /\n @Prop() loading: boolean = false;\n\n /\n Icon name\n /\n @Prop() icon: string;\n\n /\n Show button as pressed\n /\n @Prop() pressed = false;\n\n /\n Pressed change event\n */\n @Event() pressedChange: EventEmitter<boolean>;\n\n private isIllegalToggleButtonConfig() {\n return this.variant === 'primary' && (this.outline \|\| this.ghost);\n }\n\n private logIllegalConfig() {\n console.warn(\n 'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n );\n }\n\n @Watch('variant')\n onVariantChange() {\n if (this.isIllegalToggleButtonConfig()) {\n this.logIllegalConfig();\n }\n }\n\n @Watch('ghost')\n onGhostChange() {\n this.onVariantChange();\n }\n\n @Watch('outline')\n onOutlineChange() {\n this.onVariantChange();\n }\n\n componentDidLoad() {\n this.onVariantChange();\n }\n\n private dispatchPressedChange() {\n this.pressedChange.emit(!this.pressed);\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: false,\n iconOval: false,\n selected: this.pressed,\n disabled: this.disabled \|\| this.loading,\n icon: this.icon,\n loading: this.loading,\n onClick: () => this.dispatchPressedChange(),\n type: 'button',\n ariaAttributes: {\n 'aria-pressed': a11yBoolean(this.pressed),\n },\n };\n\n return (\n <Host\n class={{\n disabled: this.disabled \|\| this.loading,\n }}\n >\n <BaseButton {...baseButtonProps}>\n <slot></slot>\n </BaseButton>\n </Host>\n );\n }\n}\n"],"version":3}

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}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .switch{position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem;margin-right:0.25rem}:host .switch input{opacity:0;width:0;height:0}:host .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:var(--theme-default-time);border-radius:1.5rem}:host .slider:before{position:absolute;content:\"\";height:1.125rem;width:1.125rem;left:4px;bottom:3px;background-color:var(--theme-switch-thumb-off--background);transition:var(--theme-default-time);border-radius:50%}:host input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host input:focus-visible+.switch>.slider{outline:1px solid var(--theme-color-focus-bdr);outline-offset:1px}:host input:checked+.switch>.slider{background-color:var(--theme-switch-on--background)}:host input:checked+.switch>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.35rem)}:host input+.switch:hover>.slider{background-color:var(--theme-switch-off--background--hover)}:host input+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host input+.switch:active>.slider{background-color:var(--theme-switch-off--background--active)}:host input+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host input:checked+.switch:hover>.slider{background-color:var(--theme-switch-on--background--hover)}:host input:checked+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host input:checked+.switch:active>.slider{background-color:var(--theme-switch-on--background--active)}:host input:checked+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host input:indeterminate+.switch>.slider::before{transform:translateX(0.7rem)}:host .toggle-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.disabled){pointer-events:none}:host(.disabled) input+.switch{opacity:0.5}:host(.disabled) input+.switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) input+.switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) input:checked+.switch>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) input:checked+.switch>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .toggle-text{color:var(--theme-color-weak-text)}";
+const toggleCss = ":host{display:inline-flex;position:relative;height:2rem;justify-content:flex-start;align-items:center;margin-right:0.25rem;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .switch{position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem;margin-right:0.25rem}:host .switch input{opacity:0;width:0;height:0}:host .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:var(--theme-default-time);border-radius:1.5rem;border:1px solid transparent}:host .slider:before{position:absolute;content:\"\";height:1.125rem;width:1.125rem;left:4px;bottom:2px;background-color:var(--theme-switch-thumb-off--background);transition:var(--theme-default-time);border-radius:50%}:host input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host input:focus-visible+.switch>.slider{outline:1px solid var(--theme-color-focus-bdr);outline-offset:1px}:host input:checked+.switch>.slider{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 IxToggleStyle0 = toggleCss;
 const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement {
@@ -10,6 +10,10 @@ 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;
@@ -17,6 +21,7 @@ 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) {
@@ -25,21 +30,54 @@ 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: 'ffc42b6828208dcf6483abfda90ae88dd43ee408', class: {
+        return (h(Host, { key: '0afa08e1803352f2bb3360c11fcda2745531e20d', class: {
                 disabled: this.disabled,
-            }, onClick: () => this.onCheckedChange(!this.checked) }, h("input", { key: '35954eafdb6301bb6e7063a8978f2bfcc7076de0', disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, role: "switch", tabindex: 0, type: "checkbox", "aria-checked": a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), h("label", { key: '0aed058713bc742c3408accee2e3551313a1ad31', class: "switch", tabIndex: -1 }, h("span", { key: '62fbfca9e3adb625006e981f4ae655d2989d9aef', class: "slider" })), !this.hideText ? (h(Fragment, null, !this.indeterminate ? (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.checked ? this.textOn : this.textOff)) : (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.textIndeterminate)))) : null));
+            }, onClick: () => this.onCheckedChange(!this.checked) }, h("input", { key: '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));
     }
+    static get formAssociated() { return true; }
     get hostElement() { return this; }
+    static get watchers() { return {
+        "checked": ["watchCheckedChange"]
+    }; }
     static get style() { return IxToggleStyle0; }
-}, [1, "ix-toggle", {
+}, [65, "ix-toggle", {
+        "name": [513],
+        "value": [513],
         "checked": [1540],
         "disabled": [4],
         "indeterminate": [1540],
         "textOn": [1, "text-on"],
         "textOff": [1, "text-off"],
         "textIndeterminate": [1, "text-indeterminate"],
-        "hideText": [4, "hide-text"]
+        "hideText": [4, "hide-text"],
+        "required": [516],
+        "hasValidValue": [64],
+        "getAssociatedFormElement": [64]
+    }, undefined, {
+        "checked": ["watchCheckedChange"]
     }]);
 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,+xGAA+xG,CAAC;AAClzG,uBAAe,SAAS;;MCyBX,MAAM;;;;;;uBAMiC,KAAK;wBAKpC,KAAK;6BAKgC,KAAK;sBAK5C,IAAI;uBAKH,KAAK;iCAKK,OAAO;wBAKhB,KAAK;;IAOxB,eAAe,CAAC,UAAmB;QACjC,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;QACD,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACvC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAElD,8DACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,UAAU,kBACD,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EACvC,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,eAAe,CAAE,KAAK,CAAC,MAAc,CAAC,OAAO,CAAC,GAE9C,EACT,8DAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,IAChC,6DAAM,KAAK,EAAC,QAAQ,GAAQ,CACtB,EACP,CAAC,IAAI,CAAC,QAAQ,IACb,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,IAClB,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CACrC,KAEP,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,iBAAiB,CAClB,CACR,CACQ,IACT,IAAI,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/toggle/toggle.scss?tag=ix-toggle&encapsulation=shadow","src/components/toggle/toggle.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: inline-flex;\n position: relative;\n height: 2rem;\n justify-content: flex-start;\n align-items: center;\n margin-right: 0.25rem;\n\n cursor: pointer;\n\n .switch {\n position: relative;\n display: inline-block;\n width: 3rem;\n min-width: 3rem;\n max-width: 3rem;\n height: 1.5rem;\n margin-right: 0.25rem;\n }\n\n .switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--theme-switch-off--background);\n transition: var(--theme-default-time);\n border-radius: 1.5rem;\n }\n\n .slider:before {\n position: absolute;\n content: '';\n height: 1.125rem;\n width: 1.125rem;\n left: 4px;\n bottom: 3px;\n background-color: var(--theme-switch-thumb-off--background);\n transition: var(--theme-default-time);\n border-radius: 50%;\n }\n\n input {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n }\n\n input:focus-visible + .switch > .slider {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: 1px;\n }\n\n input:checked + .switch > .slider {\n background-color: var(--theme-switch-on--background);\n }\n\n input:checked + .switch > .slider::before {\n background-color: var(--theme-switch-thumb-on--background);\n transform: translateX(1.35rem);\n }\n\n // Toggle NOT checked\n input + .switch:hover > .slider {\n background-color: var(--theme-switch-off--background--hover);\n }\n\n input + .switch:hover > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--hover);\n }\n\n input + .switch:active > .slider {\n background-color: var(--theme-switch-off--background--active);\n }\n\n input + .switch:active > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--active);\n }\n\n // Toggle checked\n input:checked + .switch:hover > .slider {\n background-color: var(--theme-switch-on--background--hover);\n }\n\n input:checked + .switch:hover > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--hover);\n }\n\n input:checked + .switch:active > .slider {\n background-color: var(--theme-switch-on--background--active);\n }\n\n input:checked + .switch:active > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--active);\n }\n\n input:indeterminate + .switch > .slider::before {\n transform: translateX(0.7rem);\n }\n\n .toggle-text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n\n input + .switch {\n opacity: 0.5;\n }\n\n input + .switch > .slider {\n background-color: var(--theme-switch-off--background--disabled);\n }\n\n input + .switch > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--disabled);\n }\n\n input:checked + .switch > .slider {\n background-color: var(--theme-switch-on--background--disabled);\n }\n\n input:checked + .switch > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--disabled);\n }\n\n .toggle-text {\n color: var(--theme-color-weak-text);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n tag: 'ix-toggle',\n styleUrl: 'toggle.scss',\n shadow: true,\n})\nexport class Toggle {\n @Element() hostElement!: HTMLIxToggleElement;\n\n /\n Whether the slide-toggle element is checked or not.\n /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /\n Whether the slide-toggle element is disabled or not.\n /\n @Prop() disabled = false;\n\n /\n If true the control is in indeterminate state\n /\n @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n /\n Text for on state\n /\n @Prop() textOn = 'On';\n\n /\n Text for off state\n /\n @Prop() textOff = 'Off';\n\n /\n Text for indeterminate state\n /\n @Prop() textIndeterminate = 'Mixed';\n\n /\n Hide `on` and `off` text\n /\n @Prop() hideText = false;\n\n /\n An event will be dispatched each time the slide-toggle changes its value.\n */\n @Event() checkedChange: EventEmitter<boolean>;\n\n onCheckedChange(newChecked: boolean) {\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n this.checked = newChecked;\n this.checkedChange.emit(this.checked);\n }\n\n render() {\n return (\n <Host\n class={{\n disabled: this.disabled,\n }}\n onClick={() => this.onCheckedChange(!this.checked)}\n >\n <input\n disabled={this.disabled}\n indeterminate={this.indeterminate}\n checked={this.checked}\n role=\"switch\"\n tabindex={0}\n type=\"checkbox\"\n aria-checked={a11yBoolean(this.checked)}\n onChange={(event) =>\n this.onCheckedChange((event.target as any).checked)\n }\n ></input>\n <label class=\"switch\" tabIndex={-1}>\n <span class=\"slider\"></span>\n </label>\n {!this.hideText ? (\n <Fragment>\n {!this.indeterminate ? (\n <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n {this.checked ? this.textOn : this.textOff}\n </span>\n ) : (\n <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n {this.textIndeterminate}\n </span>\n )}\n </Fragment>\n ) : null}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-toggle.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}

package/components/ix-tree.js CHANGED Viewed

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

package/components/ix-upload.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { U as UploadFileState } from './upload-file-state.js';
 import { d as defineCustomElement$3 } from './button.js';
 import { d as defineCustomElement$2 } from './spinner.js';
-const uploadCss = ":host{display:block;min-height:4rem;height:4rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .file-upload-area{display:flex;flex-direction:row;align-items:center;justify-content:space-between;overflow:hidden;height:100%;width:100%;padding:1rem;border:1px dashed var(--theme-upload--border-color);border-radius:var(--theme-upload--border-radius);color:var(--theme-upload-text--color)}:host .file-upload-area.multiline{max-height:unset;height:auto}:host .file-upload-area.multiline .glyph{align-self:flex-start;margin-block-start:3px}:host .file-upload-area.multiline>div{align-self:flex-start}:host .file-upload-area:not(.multiline) .state,:host .file-upload-area:not(.multiline) .upload-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .file-upload-area:not(.disabled).file-over{border-color:var(--theme-upload--border-color--dragover);border-style:solid}:host .file-upload-area.checking{color:var(--theme-upload-text--color--checking);border-style:solid}:host .file-upload-area.disabled{border-style:solid;color:var(--theme-upload-text--color--disabled)}:host .file-upload-area ix-button{margin-inline-start:1rem}:host .file-upload-area .upload-browser{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host .file-upload-area .loader{margin:2.187rem auto;font-size:0.937rem;width:1rem;height:1rem;border-radius:50%;position:relative;text-indent:-9999em;animation:optimise-loading 1.1s infinite ease;transform:translateZ(0)}:host .file-upload-area .upload-filename{margin-bottom:1rem}:host .file-upload-area .state{display:flex;align-items:center}:host .file-upload-area .state>ix-spinner{margin-inline-end:0.5rem;height:1.5rem;width:1.5rem}:host .file-upload-area .state>ix-icon{margin-inline-end:0.5rem}:host .file-upload-area .state>ix-icon.icon-error{color:var(--theme-color-alarm)}:host .file-upload-area .state>ix-icon.icon-success{color:var(--theme-color-success)}:host(.disabled){pointer-events:none}";
+const uploadCss = ":host{display:block;min-height:4rem;height:4rem}: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 .file-upload-area{display:flex;flex-direction:row;align-items:center;justify-content:space-between;overflow:hidden;height:100%;width:100%;padding:1rem;border:1px dashed var(--theme-upload--border-color);border-radius:var(--theme-upload--border-radius);color:var(--theme-upload-text--color)}:host .file-upload-area.multiline{max-height:unset;height:auto}:host .file-upload-area.multiline .glyph{align-self:flex-start;margin-block-start:3px}:host .file-upload-area.multiline>div{align-self:flex-start}:host .file-upload-area:not(.multiline) .state,:host .file-upload-area:not(.multiline) .upload-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .file-upload-area:not(.disabled).file-over{border-color:var(--theme-upload--border-color--dragover);border-style:solid}:host .file-upload-area.checking{color:var(--theme-upload-text--color--checking);border-style:solid}:host .file-upload-area.disabled{border-style:solid;color:var(--theme-upload-text--color--disabled)}:host .file-upload-area ix-button{margin-inline-start:1rem}:host .file-upload-area .upload-browser{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host .file-upload-area .loader{margin:2.187rem auto;font-size:0.937rem;width:1rem;height:1rem;border-radius:50%;position:relative;text-indent:-9999em;animation:optimise-loading 1.1s infinite ease;transform:translateZ(0)}:host .file-upload-area .upload-filename{margin-bottom:1rem}:host .file-upload-area .state{display:flex;align-items:center}:host .file-upload-area .state>ix-spinner{margin-inline-end:0.5rem;height:1.5rem;width:1.5rem}:host .file-upload-area .state>ix-icon{margin-inline-end:0.5rem}:host .file-upload-area .state>ix-icon.icon-error{color:var(--theme-color-alarm)}:host .file-upload-area .state>ix-icon.icon-success{color:var(--theme-color-success)}:host(.disabled){pointer-events:none}";
 const IxUploadStyle0 = uploadCss;
 const Upload = /*@__PURE__*/ proxyCustomElement(class Upload extends HTMLElement {
@@ -85,7 +85,7 @@ const Upload = /*@__PURE__*/ proxyCustomElement(class Upload extends HTMLElement
         this.filesToUpload = obj;
     }
     render() {
-        return (h(Host, { key: 'c13c30ad2fa2a251ad872d7b0461f625798a3d2a' }, h("div", { key: '572bf6899630cdc1fdff1518750415270792a368', class: {
+        return (h(Host, { key: '6578e437c8322cf20dbaa01ad7cce0085f840e37' }, h("div", { key: 'b45e0c890ab3a2d8eb3fe8e6c380d456414881d5', class: {
                 'file-upload-area': true,
                 'file-over': this.state !== UploadFileState.LOADING && this.isFileOver,
                 checking: this.state === UploadFileState.LOADING,
@@ -95,9 +95,9 @@ const Upload = /*@__PURE__*/ proxyCustomElement(class Upload extends HTMLElement
                 if (this.state !== UploadFileState.LOADING) {
                     this.fileDropped(e);
                 }
-            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), h("div", { key: '5c48357676e704f0e285e510059593c526ca47fc' }, h("input", { key: '5ed9faca22b46db4962c64ff3822c59d3e44cf95', multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", onChange: (e) => {
+            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), h("div", { key: '5104dd9de609f5c726444f1c60c69973e01d5202' }, h("input", { key: 'da71d0df9e3c11ef25d7826e0e266b37b21db5e9', multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", onChange: (e) => {
                 this.fileChangeEvent(e);
-            }, accept: this.accept }), h("ix-button", { key: '6e5bcfec5d982c8674e6bf38bbf1e0d805b1af0f', tabindex: "-1", outline: true, onClick: () => this.inputElement.click(), disabled: this.disabled || this.state === UploadFileState.LOADING }, this.i18nUploadFile)))));
+            }, accept: this.accept }), h("ix-button", { key: '4ee1da0f8ce7066c8d36338327fc63a0d0c6eaa4', tabindex: "-1", outline: true, onClick: () => this.inputElement.click(), disabled: this.disabled || this.state === UploadFileState.LOADING }, this.i18nUploadFile)))));
     }
     get hostElement() { return this; }
     static get style() { return IxUploadStyle0; }

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

	@@ -1 +1 @@
1	- {"file":"ix-upload.js","mappings":"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","names":[],"sources":["src/components/upload/upload.scss?tag=ix-upload&encapsulation=shadow","src/components/upload/upload.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n display: block;\n min-height: 4rem;\n height: 4rem;\n\n .file-upload-area {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n\n overflow: hidden;\n\n height: 100%;\n width: 100%;\n\n padding: $default-space;\n\n border: 1px dashed var(--theme-upload--border-color);\n border-radius: var(--theme-upload--border-radius);\n color: var(--theme-upload-text--color);\n\n &.multiline {\n max-height: unset;\n height: auto;\n\n .glyph {\n align-self: flex-start;\n margin-block-start: 3px;\n }\n\n > div {\n align-self: flex-start;\n }\n }\n\n &:not(.multiline) {\n .state,\n .upload-text {\n @include ellipsis;\n }\n }\n\n &:not(.disabled).file-over {\n border-color: var(--theme-upload--border-color--dragover);\n border-style: solid;\n }\n\n &.checking {\n color: var(--theme-upload-text--color--checking);\n border-style: solid;\n }\n\n &.disabled {\n border-style: solid;\n color: var(--theme-upload-text--color--disabled);\n }\n\n ix-button {\n margin-inline-start: $default-space;\n }\n\n .upload-browser {\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 .loader {\n margin: 2.187rem auto;\n font-size: 0.937rem;\n width: $default-space;\n height: $default-space;\n border-radius: 50%;\n position: relative;\n text-indent: -9999em;\n animation: optimise-loading 1.1s infinite ease;\n transform: translateZ(0);\n }\n\n .upload-filename {\n margin-bottom: $default-space;\n }\n\n .state {\n display: flex;\n align-items: center;\n\n > ix-spinner {\n margin-inline-end: $small-space;\n height: $large-space;\n width: $large-space;\n }\n\n > ix-icon {\n margin-inline-end: $small-space;\n\n &.icon-error {\n color: var(--theme-color-alarm);\n }\n\n &.icon-success {\n color: var(--theme-color-success);\n }\n }\n }\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport { UploadFileState } from './upload-file-state';\n\n@Component({\n tag: 'ix-upload',\n styleUrl: 'upload.scss',\n shadow: true,\n})\nexport class Upload {\n /\n The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).\n * [accept]{@link \"https://www.w3schools.com/tags/att_input_accept.asp\"}\n /\n @Prop() accept: string;\n\n /\n If multiple is true the user can drop or select multiple files\n /\n @Prop() multiple = false;\n\n /\n Whether the text should wrap to more than one line\n /\n @Prop() multiline = false;\n\n /\n Disable all input events\n /\n @Prop() disabled = false;\n\n /\n After a file is uploaded you can set the upload component to a defined state\n /\n @Prop() state: UploadFileState = UploadFileState.SELECT_FILE;\n\n /\n Will be used by state = UploadFileState.SELECT_FILE\n /\n @Prop() selectFileText = '+ Drag files here or…';\n\n /\n Will be used by state = UploadFileState.LOADING\n /\n @Prop() loadingText = 'Checking files…';\n\n /\n Will be used by state = UploadFileState.UPLOAD_FAILED\n /\n @Prop() uploadFailedText = 'Upload failed. Please try again.';\n\n /\n Will be used by state = UploadFileState.UPLOAD_SUCCESSED\n /\n @Prop() uploadSuccessText = 'Upload successful';\n\n /\n Label for upload file button\n /\n @Prop() i18nUploadFile = 'Upload file…';\n\n /\n Text for disabled state\n /\n @Prop() i18nUploadDisabled = 'File upload currently not possible.';\n\n /\n You get an array of Files after drop-action or browse action is finished\n /\n @Event() filesChanged: EventEmitter<Array<File>>;\n\n @Element() hostElement!: HTMLIxUploadElement;\n\n get inputElement(): HTMLInputElement {\n return this.hostElement.shadowRoot.querySelector('#upload-browser');\n }\n\n @State() isFileOver = false;\n\n private filesToUpload: Array<File>;\n\n constructor() {}\n\n private fileDropped(evt: DragEvent) {\n evt.preventDefault();\n if (this.disabled) {\n return;\n }\n\n const file: File \| FileList = evt.dataTransfer.files;\n this.isFileOver = false;\n\n this.filesToUpload = this.convertToFileArray(file);\n this.filesChanged.emit(this.filesToUpload);\n }\n\n private fileOver(event: DragEvent) {\n if (this.state !== UploadFileState.LOADING) {\n event.preventDefault();\n event.dataTransfer.dropEffect = 'move';\n }\n\n if (!this.multiple && event.dataTransfer.items.length > 1) {\n event.preventDefault();\n event.stopPropagation();\n event.dataTransfer.effectAllowed = 'none';\n event.dataTransfer.dropEffect = 'none';\n } else {\n this.isFileOver = true;\n }\n }\n\n private fileLeave() {\n this.isFileOver = false;\n }\n\n private fileChangeEvent(event: any) {\n if (this.disabled) {\n return;\n }\n this.filesToUpload = this.convertToFileArray(event.target.files);\n\n this.filesChanged.emit(this.filesToUpload);\n\n // Workaround for bug in native input element, that prevents the user from uploading\n // a file with the same name as the most recent one, but with changed content.\n this.inputElement.type = '';\n this.inputElement.type = 'file';\n }\n\n private convertToFileArray(filesFromEvent: FileList \| File): File[] {\n let files = [];\n if (filesFromEvent instanceof FileList) {\n files = Array.from(filesFromEvent);\n } else {\n files = [filesFromEvent];\n }\n return files;\n }\n\n private renderUploadState() {\n if (this.disabled) {\n return (\n <span class=\"state\">\n <span class=\"upload-text\">{this.i18nUploadDisabled}</span>\n </span>\n );\n }\n\n switch (this.state) {\n case UploadFileState.SELECT_FILE:\n return (\n <span class=\"state\">\n <span class=\"upload-text\">{this.selectFileText}</span>\n </span>\n );\n case UploadFileState.LOADING:\n return (\n <span class=\"state\">\n <ix-spinner variant=\"primary\"></ix-spinner>\n <span class=\"upload-text\">{this.loadingText}</span>\n </span>\n );\n case UploadFileState.UPLOAD_FAILED:\n return (\n <span class=\"state\">\n <ix-icon name=\"error\" class=\"icon-error\"></ix-icon>\n <span class=\"upload-text\">{this.uploadFailedText}</span>\n </span>\n );\n case UploadFileState.UPLOAD_SUCCESSED:\n return (\n <span class=\"state\">\n <ix-icon name=\"success\" class=\"icon-success\"></ix-icon>\n <span class=\"upload-text\">{this.uploadSuccessText}</span>\n </span>\n );\n default:\n return '';\n }\n }\n\n /\n Set files\n * @param obj\n */\n @Method()\n async setFilesToUpload(obj: any) {\n this.filesToUpload = obj;\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'file-upload-area': true,\n 'file-over':\n this.state !== UploadFileState.LOADING && this.isFileOver,\n checking: this.state === UploadFileState.LOADING,\n disabled: this.disabled,\n multiline: this.multiline,\n }}\n onDrop={(e) => {\n if (this.state !== UploadFileState.LOADING) {\n this.fileDropped(e);\n }\n }}\n onDragOver={(e) => this.fileOver(e)}\n onDragLeave={() => this.fileLeave()}\n draggable={!this.disabled}\n >\n {this.renderUploadState()}\n <div>\n <input\n multiple={this.multiple}\n type=\"file\"\n class=\"upload-browser\"\n id=\"upload-browser\"\n onChange={(e) => {\n this.fileChangeEvent(e);\n }}\n accept={this.accept}\n />\n <ix-button\n tabindex=\"-1\"\n outline\n onClick={() => this.inputElement.click()}\n disabled={this.disabled \|\| this.state === UploadFileState.LOADING}\n >\n {this.i18nUploadFile}\n </ix-button>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-upload.js","mappings":"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","names":[],"sources":["src/components/upload/upload.scss?tag=ix-upload&encapsulation=shadow","src/components/upload/upload.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n display: block;\n min-height: 4rem;\n height: 4rem;\n\n .file-upload-area {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n\n overflow: hidden;\n\n height: 100%;\n width: 100%;\n\n padding: $default-space;\n\n border: 1px dashed var(--theme-upload--border-color);\n border-radius: var(--theme-upload--border-radius);\n color: var(--theme-upload-text--color);\n\n &.multiline {\n max-height: unset;\n height: auto;\n\n .glyph {\n align-self: flex-start;\n margin-block-start: 3px;\n }\n\n > div {\n align-self: flex-start;\n }\n }\n\n &:not(.multiline) {\n .state,\n .upload-text {\n @include ellipsis;\n }\n }\n\n &:not(.disabled).file-over {\n border-color: var(--theme-upload--border-color--dragover);\n border-style: solid;\n }\n\n &.checking {\n color: var(--theme-upload-text--color--checking);\n border-style: solid;\n }\n\n &.disabled {\n border-style: solid;\n color: var(--theme-upload-text--color--disabled);\n }\n\n ix-button {\n margin-inline-start: $default-space;\n }\n\n .upload-browser {\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 .loader {\n margin: 2.187rem auto;\n font-size: 0.937rem;\n width: $default-space;\n height: $default-space;\n border-radius: 50%;\n position: relative;\n text-indent: -9999em;\n animation: optimise-loading 1.1s infinite ease;\n transform: translateZ(0);\n }\n\n .upload-filename {\n margin-bottom: $default-space;\n }\n\n .state {\n display: flex;\n align-items: center;\n\n > ix-spinner {\n margin-inline-end: $small-space;\n height: $large-space;\n width: $large-space;\n }\n\n > ix-icon {\n margin-inline-end: $small-space;\n\n &.icon-error {\n color: var(--theme-color-alarm);\n }\n\n &.icon-success {\n color: var(--theme-color-success);\n }\n }\n }\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport { UploadFileState } from './upload-file-state';\n\n@Component({\n tag: 'ix-upload',\n styleUrl: 'upload.scss',\n shadow: true,\n})\nexport class Upload {\n /\n The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).\n * [accept]{@link \"https://www.w3schools.com/tags/att_input_accept.asp\"}\n /\n @Prop() accept: string;\n\n /\n If multiple is true the user can drop or select multiple files\n /\n @Prop() multiple = false;\n\n /\n Whether the text should wrap to more than one line\n /\n @Prop() multiline = false;\n\n /\n Disable all input events\n /\n @Prop() disabled = false;\n\n /\n After a file is uploaded you can set the upload component to a defined state\n /\n @Prop() state: UploadFileState = UploadFileState.SELECT_FILE;\n\n /\n Will be used by state = UploadFileState.SELECT_FILE\n /\n @Prop() selectFileText = '+ Drag files here or…';\n\n /\n Will be used by state = UploadFileState.LOADING\n /\n @Prop() loadingText = 'Checking files…';\n\n /\n Will be used by state = UploadFileState.UPLOAD_FAILED\n /\n @Prop() uploadFailedText = 'Upload failed. Please try again.';\n\n /\n Will be used by state = UploadFileState.UPLOAD_SUCCESSED\n /\n @Prop() uploadSuccessText = 'Upload successful';\n\n /\n Label for upload file button\n /\n @Prop() i18nUploadFile = 'Upload file…';\n\n /\n Text for disabled state\n /\n @Prop() i18nUploadDisabled = 'File upload currently not possible.';\n\n /\n You get an array of Files after drop-action or browse action is finished\n /\n @Event() filesChanged: EventEmitter<Array<File>>;\n\n @Element() hostElement!: HTMLIxUploadElement;\n\n get inputElement(): HTMLInputElement {\n return this.hostElement.shadowRoot.querySelector('#upload-browser');\n }\n\n @State() isFileOver = false;\n\n private filesToUpload: Array<File>;\n\n constructor() {}\n\n private fileDropped(evt: DragEvent) {\n evt.preventDefault();\n if (this.disabled) {\n return;\n }\n\n const file: File \| FileList = evt.dataTransfer.files;\n this.isFileOver = false;\n\n this.filesToUpload = this.convertToFileArray(file);\n this.filesChanged.emit(this.filesToUpload);\n }\n\n private fileOver(event: DragEvent) {\n if (this.state !== UploadFileState.LOADING) {\n event.preventDefault();\n event.dataTransfer.dropEffect = 'move';\n }\n\n if (!this.multiple && event.dataTransfer.items.length > 1) {\n event.preventDefault();\n event.stopPropagation();\n event.dataTransfer.effectAllowed = 'none';\n event.dataTransfer.dropEffect = 'none';\n } else {\n this.isFileOver = true;\n }\n }\n\n private fileLeave() {\n this.isFileOver = false;\n }\n\n private fileChangeEvent(event: any) {\n if (this.disabled) {\n return;\n }\n this.filesToUpload = this.convertToFileArray(event.target.files);\n\n this.filesChanged.emit(this.filesToUpload);\n\n // Workaround for bug in native input element, that prevents the user from uploading\n // a file with the same name as the most recent one, but with changed content.\n this.inputElement.type = '';\n this.inputElement.type = 'file';\n }\n\n private convertToFileArray(filesFromEvent: FileList \| File): File[] {\n let files = [];\n if (filesFromEvent instanceof FileList) {\n files = Array.from(filesFromEvent);\n } else {\n files = [filesFromEvent];\n }\n return files;\n }\n\n private renderUploadState() {\n if (this.disabled) {\n return (\n <span class=\"state\">\n <span class=\"upload-text\">{this.i18nUploadDisabled}</span>\n </span>\n );\n }\n\n switch (this.state) {\n case UploadFileState.SELECT_FILE:\n return (\n <span class=\"state\">\n <span class=\"upload-text\">{this.selectFileText}</span>\n </span>\n );\n case UploadFileState.LOADING:\n return (\n <span class=\"state\">\n <ix-spinner variant=\"primary\"></ix-spinner>\n <span class=\"upload-text\">{this.loadingText}</span>\n </span>\n );\n case UploadFileState.UPLOAD_FAILED:\n return (\n <span class=\"state\">\n <ix-icon name=\"error\" class=\"icon-error\"></ix-icon>\n <span class=\"upload-text\">{this.uploadFailedText}</span>\n </span>\n );\n case UploadFileState.UPLOAD_SUCCESSED:\n return (\n <span class=\"state\">\n <ix-icon name=\"success\" class=\"icon-success\"></ix-icon>\n <span class=\"upload-text\">{this.uploadSuccessText}</span>\n </span>\n );\n default:\n return '';\n }\n }\n\n /\n Set files\n * @param obj\n */\n @Method()\n async setFilesToUpload(obj: any) {\n this.filesToUpload = obj;\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'file-upload-area': true,\n 'file-over':\n this.state !== UploadFileState.LOADING && this.isFileOver,\n checking: this.state === UploadFileState.LOADING,\n disabled: this.disabled,\n multiline: this.multiline,\n }}\n onDrop={(e) => {\n if (this.state !== UploadFileState.LOADING) {\n this.fileDropped(e);\n }\n }}\n onDragOver={(e) => this.fileOver(e)}\n onDragLeave={() => this.fileLeave()}\n draggable={!this.disabled}\n >\n {this.renderUploadState()}\n <div>\n <input\n multiple={this.multiple}\n type=\"file\"\n class=\"upload-browser\"\n id=\"upload-browser\"\n onChange={(e) => {\n this.fileChangeEvent(e);\n }}\n accept={this.accept}\n />\n <ix-button\n tabindex=\"-1\"\n outline\n onClick={() => this.inputElement.click()}\n disabled={this.disabled \|\| this.state === UploadFileState.LOADING}\n >\n {this.i18nUploadFile}\n </ix-button>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

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