@siemens/ix 2.5.0 → 2.6.0

package/dist/esm/ix-radio-group.entry.js

@@ -0,0 +1,116 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-97874de0.js';
+import { H as HookValidationLifecycle } from './validation-45aa490c.js';
+
+const radioGroupCss = ":host{display:inline-block;position:relative}:host .checkbox-container{display:flex;flex-direction:column;gap:1rem;margin:0.375rem 0;flex-wrap:wrap}:host .checkbox-container.row-layout{flex-direction:row}";
+const IxRadioGroupStyle0 = radioGroupCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RadiobuttonGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange", 7);
+        this.observer = new MutationObserver(() => {
+            this.ensureOnlyLastRadioChecked();
+        });
+        this.helperText = undefined;
+        this.label = undefined;
+        this.value = undefined;
+        this.invalidText = undefined;
+        this.infoText = undefined;
+        this.warningText = undefined;
+        this.validText = undefined;
+        this.showTextAsTooltip = undefined;
+        this.direction = 'column';
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
+    }
+    get radiobuttonElements() {
+        return Array.from(this.hostElement.querySelectorAll('ix-radio'));
+    }
+    connectedCallback() {
+        this.observer.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['checked'],
+        });
+    }
+    componentWillLoad() {
+        this.selectInitialValue();
+        this.ensureOnlyLastRadioChecked();
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    selectInitialValue() {
+        if (!this.value) {
+            return;
+        }
+        this.radiobuttonElements.forEach((radiobutton) => {
+            radiobutton.checked = radiobutton.value === this.value;
+        });
+    }
+    ensureOnlyLastRadioChecked() {
+        const checkedRadios = this.radiobuttonElements.filter((radio) => radio.checked);
+        checkedRadios.forEach((radio, index) => {
+            if (index === checkedRadios.length - 1) {
+                return;
+            }
+            radio.checked = false;
+        });
+    }
+    onValueChangeHandler(newValue) {
+        this.radiobuttonElements.forEach((radiobutton) => {
+            radiobutton.checked = radiobutton.value === newValue;
+        });
+    }
+    onCheckedChangeHandler(event) {
+        this.radiobuttonElements.forEach((radiobutton) => {
+            if (radiobutton !== event.target) {
+                radiobutton.checked = false;
+                return;
+            }
+            radiobutton.checked = true;
+            this.valueChange.emit(radiobutton.value);
+        });
+    }
+    onClassField({ isInvalid, isInfo, isValid, isWarning }) {
+        this.isInvalid = isInvalid;
+        this.isInfo = isInfo;
+        this.isValid = isValid;
+        this.isWarning = isWarning;
+    }
+    render() {
+        return (h(Host, { key: 'e34f29dfa844a5d74969e0d7d4524ac0b35ed819' }, h("ix-field-wrapper", { key: 'f146673dd9ff78690cc0b52378793b0c94b20fac', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid }, h("div", { key: '9280999ed1c6630ae9500e2f73de26a12ea1c417', class: {
+                'checkbox-container': true,
+                'row-layout': this.direction === 'row',
+            } }, h("slot", { key: '7556d4a6396633bc085ebf5cb12070d7a3c673e5' })))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["onValueChangeHandler"]
+    }; }
+};
+__decorate([
+    HookValidationLifecycle({
+        includeChildren: true,
+    })
+], RadiobuttonGroup.prototype, "onClassField", null);
+RadiobuttonGroup.style = IxRadioGroupStyle0;
+
+export { RadiobuttonGroup as ix_radio_group };
+
+//# sourceMappingURL=ix-radio-group.entry.js.map

package/dist/esm/ix-radio-group.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-radio-group.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,8MAA8M,CAAC;AACrO,2BAAe,aAAa;;;;;;;;;;;;MCmCf,gBAAgB;;;;QA2DV,aAAQ,GAAG,IAAI,gBAAgB,CAAC;YAC/C,IAAI,CAAC,0BAA0B,EAAE,CAAC;SACnC,CAAC,CAAC;;;;;;;;;yBAdmC,QAAQ;yBAOzB,KAAK;uBACP,KAAK;sBACN,KAAK;yBACF,KAAK;;IAM1B,IAAY,mBAAmB;QAC7B,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;KAClE;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;YACtC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,SAAS,CAAC;SAC7B,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,0BAA0B,EAAE,CAAC;KACnC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAEO,kBAAkB;QACxB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAO;SACR;QACD,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,WAAW;YAC3C,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;SACxD,CAAC,CAAC;KACJ;IAEO,0BAA0B;QAChC,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,CAAC,MAAM,CACnD,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CACzB,CAAC;QACF,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK;YACjC,IAAI,KAAK,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;gBACtC,OAAO;aACR;YACD,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;SACvB,CAAC,CAAC;KACJ;IAGD,oBAAoB,CAAC,QAAgB;QACnC,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,WAAW;YAC3C,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,KAAK,KAAK,QAAQ,CAAC;SACtD,CAAC,CAAC;KACJ;IAGD,sBAAsB,CAAC,KAA2B;QAChD,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,WAAW;YAC3C,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,EAAE;gBAChC,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;gBAC5B,OAAO;aACR;YACD,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAC1C,CAAC,CAAC;KACJ;IAKD,YAAY,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAqB;QACvE,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;KAC5B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,yEACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,IAEzB,4DACE,KAAK,EAAE;gBACL,oBAAoB,EAAE,IAAI;gBAC1B,YAAY,EAAE,IAAI,CAAC,SAAS,KAAK,KAAK;aACvC,IAED,8DAAa,CACT,CACW,CACd,EACP;KACH;;;;;;AAlCD;IAHC,uBAAuB,CAAC;QACvB,eAAe,EAAE,IAAI;KACtB,CAAC;oDAMD;;;;;","names":[],"sources":["src/components/radio-group/radio-group.scss?tag=ix-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.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 'mixins/shadow-dom/component';\n\n:host {\n  display: inline-block;\n  position: relative;\n\n  .checkbox-container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    margin: 0.375rem 0;\n    flex-wrap: wrap;\n\n    &.row-layout {\n      flex-direction: row;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  Component,\n  Element,\n  EventEmitter,\n  Host,\n  Event,\n  Listen,\n  Prop,\n  State,\n  h,\n  Watch,\n} from '@stencil/core';\nimport {\n  ValidationResults,\n  HookValidationLifecycle,\n  FieldWrapperInterface,\n  IxFormValidationState,\n} from '../utils/input';\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-radio-group',\n  styleUrl: 'radio-group.scss',\n  shadow: true,\n})\nexport class RadiobuttonGroup\n  implements FieldWrapperInterface, IxFormValidationState\n{\n  @Element() hostElement!: HTMLIxRadioGroupElement;\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Value of the radiobutton group component\n   */\n  @Prop() value?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * Alignment of the radio buttons in the group\n   */\n  @Prop() direction: 'column' | 'row' = 'column';\n\n  /**\n   * Event emitted when the value of the radiobutton group changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n\n  private readonly observer = new MutationObserver(() => {\n    this.ensureOnlyLastRadioChecked();\n  });\n\n  private get radiobuttonElements() {\n    return Array.from(this.hostElement.querySelectorAll('ix-radio'));\n  }\n\n  connectedCallback(): void {\n    this.observer.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['checked'],\n    });\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.selectInitialValue();\n    this.ensureOnlyLastRadioChecked();\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private selectInitialValue() {\n    if (!this.value) {\n      return;\n    }\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === this.value;\n    });\n  }\n\n  private ensureOnlyLastRadioChecked() {\n    const checkedRadios = this.radiobuttonElements.filter(\n      (radio) => radio.checked\n    );\n    checkedRadios.forEach((radio, index) => {\n      if (index === checkedRadios.length - 1) {\n        return;\n      }\n      radio.checked = false;\n    });\n  }\n\n  @Watch('value')\n  onValueChangeHandler(newValue: string) {\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === newValue;\n    });\n  }\n\n  @Listen('checkedChange')\n  onCheckedChangeHandler(event: CustomEvent<boolean>) {\n    this.radiobuttonElements.forEach((radiobutton) => {\n      if (radiobutton !== event.target) {\n        radiobutton.checked = false;\n        return;\n      }\n      radiobutton.checked = true;\n      this.valueChange.emit(radiobutton.value);\n    });\n  }\n\n  @HookValidationLifecycle({\n    includeChildren: true,\n  })\n  onClassField({ isInvalid, isInfo, isValid, isWarning }: ValidationResults) {\n    this.isInvalid = isInvalid;\n    this.isInfo = isInfo;\n    this.isValid = isValid;\n    this.isWarning = isWarning;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-field-wrapper\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          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          isInvalid={this.isInvalid}\n        >\n          <div\n            class={{\n              'checkbox-container': true,\n              'row-layout': this.direction === 'row',\n            }}\n          >\n            <slot></slot>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-radio.entry.js

@@ -0,0 +1,94 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-97874de0.js';
+import { m as makeRef } from './make-ref-4b76e9b5.js';
+
+const radioCss = ":host{display:inline-block;position:relative}: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 button{all:unset;display:inline-flex;position:relative;align-items:center;justify-content:center;width:1.125rem;min-width:1.125rem;max-width:1.125rem;height:1.125rem;min-height:1.125rem;max-height:1.125rem;border:1px solid white;border-radius:100px;margin-right:0.5rem}:host button:focus-visible{outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:var(--theme-radiobtn--focus--outline-offset)}:host input[type=radio]{display:none}:host label{display:flex;justify-content:flex-start;align-items:flex-start;width:100%;height:100%}:host .checkmark{border-radius:100px;background-color:var(--theme-color-primary--contrast);width:0.5rem;height:0.5rem}:host button{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(:hover) button{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(:active) button{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.checked) button,:host([indeterminate]) button{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.checked:hover) button,:host([indeterminate]:hover) button{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.checked:active) button,:host([indeterminate]:active) button{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(:disabled),:host(.disabled){pointer-events:none}:host(:disabled) button,:host(.disabled) button{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.checked:disabled) button,:host(.checked.disabled) button,:host([indeterminate]:disabled) button,:host([indeterminate].disabled) button{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}ix-typography{margin-top:0.125rem}:host(.ix-info:not(.disabled)) button{--theme-radiobtn-unchecked--background:var(--theme-radiobtn-unchecked--background--info);--theme-radiobtn-unchecked--background--hover:var(--theme-radiobtn-unchecked--background--info--hover);--theme-radiobtn-unchecked--background--active:var(--theme-radiobtn-unchecked--background--info--active);--theme-radiobtn-unchecked--border-color:var(--theme-radiobtn-unchecked--border-color--info);--theme-radiobtn-unchecked--border-color--hover:var(--theme-radiobtn-unchecked--border-color--info--hover);--theme-radiobtn-unchecked--border-color--active:var(--theme-radiobtn-unchecked--border-color--info--active);--theme-radiobtn-checked--background:var(--theme-radiobtn-checked--background--info);--theme-radiobtn-checked--background--hover:var(--theme-radiobtn-checked--background--info--hover);--theme-radiobtn-checked--background--active:var(--theme-radiobtn-checked--background--info--active);--theme-radiobtn-checked--border-color:var(--theme-radiobtn-checked--border-color--info);--theme-radiobtn-checked--border-color--hover:var(--theme-radiobtn-checked--border-color--info--hover);--theme-radiobtn-checked--border-color--active:var(--theme-radiobtn-checked--border-color--info--active);--theme-radiobtn-mixed--background:var(--theme-radiobtn-mixed--background--info);--theme-radiobtn-mixed--background--hover:var(--theme-radiobtn-mixed--background--info--hover);--theme-radiobtn-mixed--background--active:var(--theme-radiobtn-mixed--background--info--active);--theme-radiobtn-mixed--border-color:var(--theme-radiobtn-mixed--border-color--info);--theme-radiobtn-mixed--border-color--hover:var(--theme-radiobtn-mixed--border-color--info--hover);--theme-radiobtn-mixed--border-color--active:var(--theme-radiobtn-mixed--border-color--info--active)}:host(.ix-info) button{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-info:hover) button{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-info:active) button{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-info.checked) button,:host(.ix-info[indeterminate]) button{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-info.checked:hover) button,:host(.ix-info[indeterminate]:hover) button{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-info.checked:active) button,:host(.ix-info[indeterminate]:active) button{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-info:disabled) button,:host(.ix-info.disabled) button{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-info.checked:disabled) button,:host(.ix-info.checked.disabled) button,:host(.ix-info[indeterminate]:disabled) button,:host(.ix-info[indeterminate].disabled) button{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(.ix-warning:not(.disabled)) button{--theme-radiobtn-unchecked--background:var(--theme-radiobtn-unchecked--background--warning);--theme-radiobtn-unchecked--background--hover:var(--theme-radiobtn-unchecked--background--warning--hover);--theme-radiobtn-unchecked--background--active:var(--theme-radiobtn-unchecked--background--warning--active);--theme-radiobtn-unchecked--border-color:var(--theme-radiobtn-unchecked--border-color--warning);--theme-radiobtn-unchecked--border-color--hover:var(--theme-radiobtn-unchecked--border-color--warning--hover);--theme-radiobtn-unchecked--border-color--active:var(--theme-radiobtn-unchecked--border-color--warning--active);--theme-radiobtn-checked--background:var(--theme-radiobtn-checked--background--warning);--theme-radiobtn-checked--background--hover:var(--theme-radiobtn-checked--background--warning--hover);--theme-radiobtn-checked--background--active:var(--theme-radiobtn-checked--background--warning--active);--theme-radiobtn-checked--border-color:var(--theme-radiobtn-checked--border-color--warning);--theme-radiobtn-checked--border-color--hover:var(--theme-radiobtn-checked--border-color--warning--hover);--theme-radiobtn-checked--border-color--active:var(--theme-radiobtn-checked--border-color--warning--active);--theme-radiobtn-mixed--background:var(--theme-radiobtn-mixed--background--warning);--theme-radiobtn-mixed--background--hover:var(--theme-radiobtn-mixed--background--warning--hover);--theme-radiobtn-mixed--background--active:var(--theme-radiobtn-mixed--background--warning--active);--theme-radiobtn-mixed--border-color:var(--theme-radiobtn-mixed--border-color--warning);--theme-radiobtn-mixed--border-color--hover:var(--theme-radiobtn-mixed--border-color--warning--hover);--theme-radiobtn-mixed--border-color--active:var(--theme-radiobtn-mixed--border-color--warning--active)}:host(.ix-warning) button{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-warning:hover) button{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-warning:active) button{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-warning.checked) button,:host(.ix-warning[indeterminate]) button{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-warning.checked:hover) button,:host(.ix-warning[indeterminate]:hover) button{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-warning.checked:active) button,:host(.ix-warning[indeterminate]:active) button{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-warning:disabled) button,:host(.ix-warning.disabled) button{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-warning.checked:disabled) button,:host(.ix-warning.checked.disabled) button,:host(.ix-warning[indeterminate]:disabled) button,:host(.ix-warning[indeterminate].disabled) button{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(.ix-invalid--required:not(.disabled)) button{--theme-radiobtn-unchecked--background:var(--theme-radiobtn-unchecked--background--invalid);--theme-radiobtn-unchecked--background--hover:var(--theme-radiobtn-unchecked--background--invalid--hover);--theme-radiobtn-unchecked--background--active:var(--theme-radiobtn-unchecked--background--invalid--active);--theme-radiobtn-unchecked--border-color:var(--theme-radiobtn-unchecked--border-color--invalid);--theme-radiobtn-unchecked--border-color--hover:var(--theme-radiobtn-unchecked--border-color--invalid--hover);--theme-radiobtn-unchecked--border-color--active:var(--theme-radiobtn-unchecked--border-color--invalid--active);--theme-radiobtn-checked--background:var(--theme-radiobtn-checked--background--invalid);--theme-radiobtn-checked--background--hover:var(--theme-radiobtn-checked--background--invalid--hover);--theme-radiobtn-checked--background--active:var(--theme-radiobtn-checked--background--invalid--active);--theme-radiobtn-checked--border-color:var(--theme-radiobtn-checked--border-color--invalid);--theme-radiobtn-checked--border-color--hover:var(--theme-radiobtn-checked--border-color--invalid--hover);--theme-radiobtn-checked--border-color--active:var(--theme-radiobtn-checked--border-color--invalid--active);--theme-radiobtn-mixed--background:var(--theme-radiobtn-mixed--background--invalid);--theme-radiobtn-mixed--background--hover:var(--theme-radiobtn-mixed--background--invalid--hover);--theme-radiobtn-mixed--background--active:var(--theme-radiobtn-mixed--background--invalid--active);--theme-radiobtn-mixed--border-color:var(--theme-radiobtn-mixed--border-color--invalid);--theme-radiobtn-mixed--border-color--hover:var(--theme-radiobtn-mixed--border-color--invalid--hover);--theme-radiobtn-mixed--border-color--active:var(--theme-radiobtn-mixed--border-color--invalid--active)}:host(.ix-invalid--required) button{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-invalid--required:hover) button{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-invalid--required:active) button{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-invalid--required.checked) button,:host(.ix-invalid--required[indeterminate]) button{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-invalid--required.checked:hover) button,:host(.ix-invalid--required[indeterminate]:hover) button{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-invalid--required.checked:active) button,:host(.ix-invalid--required[indeterminate]:active) button{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-invalid--required:disabled) button,:host(.ix-invalid--required.disabled) button{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-invalid--required.checked:disabled) button,:host(.ix-invalid--required.checked.disabled) button,:host(.ix-invalid--required[indeterminate]:disabled) button,:host(.ix-invalid--required[indeterminate].disabled) button{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(.ix-invalid:not(.disabled)) button{--theme-radiobtn-unchecked--background:var(--theme-radiobtn-unchecked--background--invalid);--theme-radiobtn-unchecked--background--hover:var(--theme-radiobtn-unchecked--background--invalid--hover);--theme-radiobtn-unchecked--background--active:var(--theme-radiobtn-unchecked--background--invalid--active);--theme-radiobtn-unchecked--border-color:var(--theme-radiobtn-unchecked--border-color--invalid);--theme-radiobtn-unchecked--border-color--hover:var(--theme-radiobtn-unchecked--border-color--invalid--hover);--theme-radiobtn-unchecked--border-color--active:var(--theme-radiobtn-unchecked--border-color--invalid--active);--theme-radiobtn-checked--background:var(--theme-radiobtn-checked--background--invalid);--theme-radiobtn-checked--background--hover:var(--theme-radiobtn-checked--background--invalid--hover);--theme-radiobtn-checked--background--active:var(--theme-radiobtn-checked--background--invalid--active);--theme-radiobtn-checked--border-color:var(--theme-radiobtn-checked--border-color--invalid);--theme-radiobtn-checked--border-color--hover:var(--theme-radiobtn-checked--border-color--invalid--hover);--theme-radiobtn-checked--border-color--active:var(--theme-radiobtn-checked--border-color--invalid--active);--theme-radiobtn-mixed--background:var(--theme-radiobtn-mixed--background--invalid);--theme-radiobtn-mixed--background--hover:var(--theme-radiobtn-mixed--background--invalid--hover);--theme-radiobtn-mixed--background--active:var(--theme-radiobtn-mixed--background--invalid--active);--theme-radiobtn-mixed--border-color:var(--theme-radiobtn-mixed--border-color--invalid);--theme-radiobtn-mixed--border-color--hover:var(--theme-radiobtn-mixed--border-color--invalid--hover);--theme-radiobtn-mixed--border-color--active:var(--theme-radiobtn-mixed--border-color--invalid--active)}:host(.ix-invalid) button{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-invalid:hover) button{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-invalid:active) button{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-invalid.checked) button,:host(.ix-invalid[indeterminate]) button{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-invalid.checked:hover) button,:host(.ix-invalid[indeterminate]:hover) button{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-invalid.checked:active) button,:host(.ix-invalid[indeterminate]:active) button{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-invalid:disabled) button,:host(.ix-invalid.disabled) button{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-invalid.checked:disabled) button,:host(.ix-invalid.checked.disabled) button,:host(.ix-invalid[indeterminate]:disabled) button,:host(.ix-invalid[indeterminate].disabled) button{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}";
+const IxRadioStyle0 = radioCss;
+
+const Radio = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.checkedChange = createEvent(this, "checkedChange", 7);
+        this.valueChange = createEvent(this, "valueChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.formInternals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.formInternals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.formInternals;
+        }
+        /**
+         * Single radio cannot be required
+         * */
+        this.required = false;
+        this.inputRef = makeRef((radiobuttonRef) => {
+            radiobuttonRef.checked = this.checked;
+        });
+        this.name = undefined;
+        this.value = undefined;
+        this.label = undefined;
+        this.disabled = false;
+        this.checked = false;
+    }
+    setCheckedState(newChecked) {
+        if (this.checked) {
+            return;
+        }
+        const result = this.checkedChange.emit(newChecked);
+        if (result.defaultPrevented) {
+            return;
+        }
+        this.checked = newChecked;
+    }
+    async onCheckedChange() {
+        const radiobuttonRef = await this.inputRef.waitForCurrent();
+        radiobuttonRef.checked = this.checked;
+        this.updateFormInternalValue();
+    }
+    onValueChange() {
+        this.valueChange.emit(this.value);
+    }
+    componentWillLoad() {
+        this.updateFormInternalValue();
+    }
+    updateFormInternalValue() {
+        var _a;
+        if (this.checked) {
+            this.formInternals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : 'on');
+        }
+        else {
+            this.formInternals.setFormValue(null);
+        }
+    }
+    /** @internal */
+    hasValidValue() {
+        return Promise.resolve(this.checked);
+    }
+    /** @internal */
+    getAssociatedFormElement() {
+        return Promise.resolve(this.formInternals.form);
+    }
+    render() {
+        return (h(Host, { key: '11d1cadf723d642f0591cb49635cd13771190258', "aria-checked": `${this.checked}`, "aria-disabled": `${this.disabled}`, role: "radio", class: {
+                disabled: this.disabled,
+                checked: this.checked,
+            } }, h("label", { key: '9e93f5f146dc7798f0a7cf254a47ee1d35ef8c14' }, h("input", { key: 'fc2e99c93b347221cd905ea4572b6657a68fb314', "aria-checked": `${this.checked}`, disabled: this.disabled, checked: this.checked, ref: this.inputRef, type: "radio", onChange: () => {
+                const ref = this.inputRef.current;
+                if (ref) {
+                    this.setCheckedState(ref.checked);
+                }
+            } }), h("button", { key: '3134b9849b111543886c2dd028dc7f71c1b171a2', disabled: this.disabled, class: {
+                checked: this.checked,
+            }, onClick: () => this.setCheckedState(!this.checked) }, this.checked && h("div", { key: 'e311bab1c26e47016ab6594d6e2dab648580d270', class: "checkmark" })), h("ix-typography", { key: 'd68fa858f9fc9856153380d69e631fad74588c31', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '2b4de064a6c233b61e672a2799493b846c2586af' })))));
+    }
+    static get formAssociated() { return true; }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "checked": ["onCheckedChange"],
+        "value": ["onValueChange"]
+    }; }
+};
+Radio.style = IxRadioStyle0;
+
+export { Radio as ix_radio };
+
+//# sourceMappingURL=ix-radio.entry.js.map

package/dist/esm/ix-radio.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-radio.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,oskBAAoskB,CAAC;AACttkB,sBAAe,QAAQ;;MCiCV,KAAK;;;;;;;;;;;;;;;QA0ChB,aAAQ,GAAG,KAAK,CAAC;QAEA,aAAQ,GAAG,OAAO,CAAmB,CAAC,cAAc;YACnE,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;SACvC,CAAC,CAAC;;;;wBAxByB,KAAK;uBAK0B,KAAK;;IAqBxD,eAAe,CAAC,UAAmB;QACzC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO;SACR;QACD,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACnD,IAAI,MAAM,CAAC,gBAAgB,EAAE;YAC3B,OAAO;SACR;QAED,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;KAC3B;IAGD,MAAM,eAAe;QACnB,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC;QAC5D,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAEtC,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;IAGD,aAAa;QACX,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC;IAED,iBAAiB;QACf,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;IAED,uBAAuB;;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SACvC;KACF;;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,qEACW,GAAG,IAAI,CAAC,OAAO,EAAE,mBAChB,GAAG,IAAI,CAAC,QAAQ,EAAE,EACjC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,IAED,gEACE,8EACgB,GAAG,IAAI,CAAC,OAAO,EAAE,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE;gBACR,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;gBAClC,IAAI,GAAG,EAAE;oBACP,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;iBACnC;aACF,GACD,EACF,+DACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAEjD,IAAI,CAAC,OAAO,IAAI,4DAAK,KAAK,EAAC,WAAW,GAAO,CACvC,EACT,sEACE,MAAM,EAAC,OAAO,EACd,SAAS,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,KAAK,IAExC,IAAI,CAAC,KAAK,EACX,8DAAa,CACC,CACV,CACH,EACP;KACH;;;;;;;;;;;;","names":[],"sources":["src/components/radio/radio.scss?tag=ix-radio&encapsulation=shadow","src/components/radio/radio.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 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n\n  button {\n    all: unset;\n\n    display: inline-flex;\n    position: relative;\n\n    align-items: center;\n    justify-content: center;\n\n    width: 1.125rem;\n    min-width: 1.125rem;\n    max-width: 1.125rem;\n    height: 1.125rem;\n    min-height: 1.125rem;\n    max-height: 1.125rem;\n\n    border: 1px solid white;\n    border-radius: 100px;\n\n    margin-right: 0.5rem;\n  }\n\n  button:focus-visible {\n    outline: 0.0625rem solid var(--theme-color-focus-bdr);\n    outline-offset: var(--theme-radiobtn--focus--outline-offset);\n  }\n\n  input[type=\"radio\"] {\n    display: none;\n  }\n\n  label {\n    display: flex;\n\n    justify-content: flex-start;\n    align-items: flex-start;\n\n    width: 100%;\n    height: 100%;\n  }\n\n  .checkmark {\n    border-radius: 100px;\n    background-color: var(--theme-color-primary--contrast);\n    width: 0.5rem;\n    height: 0.5rem;\n  }\n}\n\n@mixin radio-base() {\n  :host {\n    button {\n      background-color: var(--theme-radiobtn-unchecked--background);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color);\n    }\n  }\n\n  :host(:hover) {\n    button {\n      background-color: var(--theme-radiobtn-unchecked--background--hover);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--hover);\n    }\n  }\n\n  :host(:active) {\n    button {\n      background-color: var(--theme-radiobtn-unchecked--background--active);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--active);\n    }\n  }\n\n  :host(.checked),\n  :host([indeterminate]) {\n    button {\n      background-color: var(--theme-radiobtn-checked--background);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color);\n    }\n  }\n\n  :host(.checked:hover),\n  :host([indeterminate]:hover) {\n    button {\n      background-color: var(--theme-radiobtn-checked--background--hover);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--hover);\n    }\n  }\n\n  :host(.checked:active),\n  :host([indeterminate]:active) {\n    button {\n      background-color: var(--theme-radiobtn-checked--background--active);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--active);\n    }\n  }\n\n  :host(:disabled),\n  :host(.disabled) {\n    pointer-events: none;\n\n    button {\n      background-color: var(--theme-radiobtn-unchecked--background--disabled);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(.checked:disabled),\n  :host(.checked.disabled),\n  :host([indeterminate]:disabled),\n  :host([indeterminate].disabled) {\n    button {\n      background-color: var(--theme-radiobtn-checked--background--disabled);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--disabled);\n    }\n  }\n\n  ix-typography {\n    margin-top: 0.125rem;\n  }\n}\n\n@mixin radio-variant($selector) {\n  :host(#{$selector}:not(.disabled)) {\n    button {\n      @content;\n    }\n  }\n\n  :host(#{$selector}) {\n    button {\n      background-color: var(--theme-radiobtn-unchecked--background);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color);\n    }\n  }\n\n  :host(#{$selector}:hover) {\n    button {\n      background-color: var(--theme-radiobtn-unchecked--background--hover);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}:active) {\n    button {\n      background-color: var(--theme-radiobtn-unchecked--background--active);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}.checked),\n  :host(#{$selector}[indeterminate]) {\n    button {\n      background-color: var(--theme-radiobtn-checked--background);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color);\n    }\n  }\n\n  :host(#{$selector}.checked:hover),\n  :host(#{$selector}[indeterminate]:hover) {\n    button {\n      background-color: var(--theme-radiobtn-checked--background--hover);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}.checked:active),\n  :host(#{$selector}[indeterminate]:active) {\n    button {\n      background-color: var(--theme-radiobtn-checked--background--active);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}:disabled),\n  :host(#{$selector}.disabled) {\n    button {\n      background-color: var(--theme-radiobtn-unchecked--background--disabled);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(#{$selector}.checked:disabled),\n  :host(#{$selector}.checked.disabled),\n  :host(#{$selector}[indeterminate]:disabled),\n  :host(#{$selector}[indeterminate].disabled) {\n    button {\n      background-color: var(--theme-radiobtn-checked--background--disabled);\n      border: var(--theme-radiobtn--border-thickness) solid\n        var(--theme-radiobtn-checked--border-color--disabled);\n    }\n  }\n}\n\n@mixin define-radio-vars($state, $type) {\n  --theme-radiobtn-#{$state}--background: var(--theme-radiobtn-#{$state}--background--#{$type});\n  --theme-radiobtn-#{$state}--background--hover: var(--theme-radiobtn-#{$state}--background--#{$type}--hover);\n  --theme-radiobtn-#{$state}--background--active: var(--theme-radiobtn-#{$state}--background--#{$type}--active);\n\n  --theme-radiobtn-#{$state}--border-color: var(--theme-radiobtn-#{$state}--border-color--#{$type});\n  --theme-radiobtn-#{$state}--border-color--hover: var(--theme-radiobtn-#{$state}--border-color--#{$type}--hover);\n  --theme-radiobtn-#{$state}--border-color--active: var(--theme-radiobtn-#{$state}--border-color--#{$type}--active);\n}\n\n@include radio-base();\n@include radio-variant(\n  $selector: '.ix-info',\n) {\n  @include define-radio-vars('unchecked', 'info');\n  @include define-radio-vars('checked', 'info');\n  @include define-radio-vars('mixed', 'info');\n}\n\n@include radio-variant(\n  $selector: '.ix-warning',\n) {\n  @include define-radio-vars('unchecked', 'warning');\n  @include define-radio-vars('checked', 'warning');\n  @include define-radio-vars('mixed', 'warning');\n}\n\n@include radio-variant(\n  $selector: '.ix-invalid--required',\n) {\n  @include define-radio-vars('unchecked', 'invalid');\n  @include define-radio-vars('checked', 'invalid');\n  @include define-radio-vars('mixed', 'invalid');\n}\n\n@include radio-variant(\n  $selector: '.ix-invalid',\n) {\n  @include define-radio-vars('unchecked', 'invalid');\n  @include define-radio-vars('checked', 'invalid');\n  @include define-radio-vars('mixed', 'invalid');\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  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  Watch,\n  h,\n  Method,\n  Element,\n} from '@stencil/core';\nimport { makeRef } from '../utils/make-ref';\nimport { IxFormComponent } from '../utils/input';\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-radio',\n  styleUrl: 'radio.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Radio implements IxFormComponent<string> {\n  @Element() hostElement!: HTMLIxRadioElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * Name of the radio component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the radio component\n   */\n  @Prop({ reflect: true }) value?: string;\n\n  /**\n   * Label for the radio component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Disabled state of the radio component\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Checked state of the radio component\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n  /**\n   * Event emitted when the checked state of the radio changes\n   */\n  @Event() checkedChange!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the value of the radio changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Single radio cannot be required\n   * */\n  required = false;\n\n  private readonly inputRef = makeRef<HTMLInputElement>((radiobuttonRef) => {\n    radiobuttonRef.checked = this.checked;\n  });\n\n  private setCheckedState(newChecked: boolean) {\n    if (this.checked) {\n      return;\n    }\n    const result = this.checkedChange.emit(newChecked);\n    if (result.defaultPrevented) {\n      return;\n    }\n\n    this.checked = newChecked;\n  }\n\n  @Watch('checked')\n  async onCheckedChange() {\n    const radiobuttonRef = await this.inputRef.waitForCurrent();\n    radiobuttonRef.checked = this.checked;\n\n    this.updateFormInternalValue();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.valueChange.emit(this.value);\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue() {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value ?? 'on');\n    } else {\n      this.formInternals.setFormValue(null);\n    }\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        aria-checked={`${this.checked}`}\n        aria-disabled={`${this.disabled}`}\n        role=\"radio\"\n        class={{\n          disabled: this.disabled,\n          checked: this.checked,\n        }}\n      >\n        <label>\n          <input\n            aria-checked={`${this.checked}`}\n            disabled={this.disabled}\n            checked={this.checked}\n            ref={this.inputRef}\n            type=\"radio\"\n            onChange={() => {\n              const ref = this.inputRef.current;\n              if (ref) {\n                this.setCheckedState(ref.checked);\n              }\n            }}\n          />\n          <button\n            disabled={this.disabled}\n            class={{\n              checked: this.checked,\n            }}\n            onClick={() => this.setCheckedState(!this.checked)}\n          >\n            {this.checked && <div class=\"checkmark\"></div>}\n          </button>\n          <ix-typography\n            format=\"label\"\n            textColor={this.disabled ? 'weak' : 'std'}\n          >\n            {this.label}\n            <slot></slot>\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}