@siemens/ix 2.4.1 → 2.6.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-5429f20b.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-97874de0.js';
 
 const pillCss = ":host{display:inline-block;position:relative;height:1.25rem;max-height:1.25rem;margin-left:0.25rem}: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}.container{display:inline-flex;width:inherit;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;height:2rem;max-height:2rem;cursor:default}.container .with-icon{margin-right:0.25rem}.container .hidden{display:none;width:0;margin-right:0}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.outline.icon{padding-left:calc(0.75rem - 1px)}.container.outline:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary.outline{color:var(--theme-chip-primary-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-primary-outline--color);--ix-icon-button-color:var(--theme-chip-primary-outline--color)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-alarm)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-critical)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-warning)}.container.info{color:var(--theme-color-info--contrast)}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-info)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-neutral)}.container.success{color:var(--theme-color-success--contrast)}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-success)}:host .container{height:100%;justify-content:center;padding-right:0.5rem !important}:host(.align-left) .container{justify-content:flex-start}";
 const IxPillStyle0 = pillCss;
@@ -23,13 +23,13 @@ const Pill = class {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: '1d4d88d976564778835cd02e28d5ede6fe4dd6f7', style: this.variant === 'custom'
+        return (h(Host, { key: '1bbd11e090e378d36040a08ca0f6acc01bdfc2f7', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.pillColor) !== null && _b !== void 0 ? _b : this.color,
                 }
                 : {}, title: this.el.textContent, class: {
                 'align-left': this.alignLeft,
-            } }, h("div", { key: '74474d69acc5d47b9bf6c5ebe12f676155a9e87d', style: Object.assign({}, customStyle), class: {
+            } }, h("div", { key: '185e005a8842833cfe55a19ec1c06dc45afa2647', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -43,10 +43,10 @@ const Pill = class {
                 custom: this.variant === 'custom',
                 closable: false,
                 icon: !!this.icon,
-            } }, h("ix-icon", { key: 'c70dcfe5f55c77484cf3300dca53f6a4e55d5caf', class: {
+            } }, h("ix-icon", { key: '256012d0b9ff2c19f0f5787453365f9c3a14d150', class: {
                 'with-icon': true,
                 hidden: this.icon === undefined || this.icon === '',
-            }, name: this.icon, size: '16' }), h("span", { key: 'b3d056721cb891a986ac3196a9fcf049c8b366f9', class: "slot-container" }, h("slot", { key: 'a42505aafc70d545e3ff8020c80f67067b3eac8c' })))));
+            }, name: this.icon, size: '16' }), h("span", { key: '7e6df9c95355b084a795a5836ed1b2525e6792ea', class: "slot-container" }, h("slot", { key: '9a454c6e3b13bd688dff6ba53304ea04bc9aa5e6' })))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"ix-pill.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,ojKAAojK,CAAC;AACrkK,qBAAe,OAAO;;MCeT,IAAI;;;uBAcA,SAAS;uBAKN,KAAK;;;;;yBA4BH,KAAK;;IAEzB,MAAM;;QACJ,IAAI,WAAW,GAAG,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YAC7B,WAAW,GAAG;gBACZ,KAAK,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;gBACnC,CAAC,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,UAAU;aACpE,CAAC;SACH;QACD,QACE,EAAC,IAAI,qDACH,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;kBACrB;oBACE,wBAAwB,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;iBACvD;kBACD,EAAE,EAER,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,EAC1B,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,SAAS;aAC7B,IAED,4DACE,KAAK,oBAAO,WAAW,GACvB,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAC/B,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACrC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACjC,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;aAClB,IAED,gEACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;aACpD,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV,EACF,6DAAM,KAAK,EAAC,gBAAgB,IAC1B,8DAAa,CACR,CACH,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/pill/pill.scss?tag=ix-pill&encapsulation=shadow","src/components/pill/pill.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n@import './../chip/chip-mixin';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n  height: 1.25rem;\n  max-height: 1.25rem;\n  margin-left: 0.25rem;\n}\n\n@include chip-container(false);\n\n:host {\n  .container {\n    height: 100%;\n    justify-content: center;\n    padding-right: 0.5rem !important;\n  }\n}\n\n:host(.align-left) {\n  .container {\n    justify-content: flex-start;\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 { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-pill',\n  styleUrl: 'pill.scss',\n  shadow: true,\n})\nexport class Pill {\n  @Element() el: HTMLIxPillElement;\n\n  /**\n   * Pill variant\n   */\n  @Prop({ reflect: true }) variant:\n    | 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom' = 'primary';\n\n  /**\n   * Show pill as outline\n   */\n  @Prop() outline = false;\n\n  /**\n   * Show icon\n   */\n  @Prop() icon: string | undefined;\n\n  /**\n   * Custom color for pill. Only working for `variant='custom'`\n   */\n  @Prop() background: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   *\n   * @deprecated since 2.1.0 use `pill-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   */\n  @Prop() pillColor: string | undefined;\n\n  /**\n   * Align pill content left\n   */\n  @Prop() alignLeft = false;\n\n  render() {\n    let customStyle = {};\n\n    if (this.variant === 'custom') {\n      customStyle = {\n        color: this.pillColor ?? this.color,\n        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n      };\n    }\n    return (\n      <Host\n        style={\n          this.variant === 'custom'\n            ? {\n                '--ix-icon-button-color': this.pillColor ?? this.color,\n              }\n            : {}\n        }\n        title={this.el.textContent}\n        class={{\n          'align-left': this.alignLeft,\n        }}\n      >\n        <div\n          style={{ ...customStyle }}\n          class={{\n            container: true,\n            outline: this.outline,\n            inactive: false,\n            alarm: this.variant === 'alarm',\n            critical: this.variant === 'critical',\n            info: this.variant === 'info',\n            neutral: this.variant === 'neutral',\n            primary: this.variant === 'primary',\n            success: this.variant === 'success',\n            warning: this.variant === 'warning',\n            custom: this.variant === 'custom',\n            closable: false,\n            icon: !!this.icon,\n          }}\n        >\n          <ix-icon\n            class={{\n              'with-icon': true,\n              hidden: this.icon === undefined || this.icon === '',\n            }}\n            name={this.icon}\n            size={'16'}\n          />\n          <span class=\"slot-container\">\n            <slot></slot>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-pill.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,ojKAAojK,CAAC;AACrkK,qBAAe,OAAO;;MCeT,IAAI;;;uBAcA,SAAS;uBAKN,KAAK;;;;;yBA4BH,KAAK;;IAEzB,MAAM;;QACJ,IAAI,WAAW,GAAG,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YAC7B,WAAW,GAAG;gBACZ,KAAK,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;gBACnC,CAAC,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,UAAU;aACpE,CAAC;SACH;QACD,QACE,EAAC,IAAI,qDACH,KAAK,EACH,IAAI,CAAC,OAAO,KAAK,QAAQ;kBACrB;oBACE,wBAAwB,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;iBACvD;kBACD,EAAE,EAER,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,EAC1B,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,SAAS;aAC7B,IAED,4DACE,KAAK,oBAAO,WAAW,GACvB,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAC/B,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACrC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACjC,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;aAClB,IAED,gEACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;aACpD,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV,EACF,6DAAM,KAAK,EAAC,gBAAgB,IAC1B,8DAAa,CACR,CACH,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/pill/pill.scss?tag=ix-pill&encapsulation=shadow","src/components/pill/pill.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@import './../chip/chip-mixin';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n  height: 1.25rem;\n  max-height: 1.25rem;\n  margin-left: 0.25rem;\n}\n\n@include chip-container(false);\n\n:host {\n  .container {\n    height: 100%;\n    justify-content: center;\n    padding-right: 0.5rem !important;\n  }\n}\n\n:host(.align-left) {\n  .container {\n    justify-content: flex-start;\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 { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-pill',\n  styleUrl: 'pill.scss',\n  shadow: true,\n})\nexport class Pill {\n  @Element() el: HTMLIxPillElement;\n\n  /**\n   * Pill variant\n   */\n  @Prop({ reflect: true }) variant:\n    | 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom' = 'primary';\n\n  /**\n   * Show pill as outline\n   */\n  @Prop() outline = false;\n\n  /**\n   * Show icon\n   */\n  @Prop() icon: string | undefined;\n\n  /**\n   * Custom color for pill. Only working for `variant='custom'`\n   */\n  @Prop() background: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   *\n   * @deprecated since 2.1.0 use `pill-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   */\n  @Prop() pillColor: string | undefined;\n\n  /**\n   * Align pill content left\n   */\n  @Prop() alignLeft = false;\n\n  render() {\n    let customStyle = {};\n\n    if (this.variant === 'custom') {\n      customStyle = {\n        color: this.pillColor ?? this.color,\n        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n      };\n    }\n    return (\n      <Host\n        style={\n          this.variant === 'custom'\n            ? {\n                '--ix-icon-button-color': this.pillColor ?? this.color,\n              }\n            : {}\n        }\n        title={this.el.textContent}\n        class={{\n          'align-left': this.alignLeft,\n        }}\n      >\n        <div\n          style={{ ...customStyle }}\n          class={{\n            container: true,\n            outline: this.outline,\n            inactive: false,\n            alarm: this.variant === 'alarm',\n            critical: this.variant === 'critical',\n            info: this.variant === 'info',\n            neutral: this.variant === 'neutral',\n            primary: this.variant === 'primary',\n            success: this.variant === 'success',\n            warning: this.variant === 'warning',\n            custom: this.variant === 'custom',\n            closable: false,\n            icon: !!this.icon,\n          }}\n        >\n          <ix-icon\n            class={{\n              'with-icon': true,\n              hidden: this.icon === undefined || this.icon === '',\n            }}\n            name={this.icon}\n            size={'16'}\n          />\n          <span class=\"slot-container\">\n            <slot></slot>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-push-card.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-5429f20b.js';
+import { r as registerInstance, h, H as Host } from './index-97874de0.js';
 
 const pushCardCss = ":host{display:block;position:relative}:host .icon{transform:scale(1.25)}:host .notification{font-size:40px}:host ix-card-content{height:11rem}";
 const IxPushCardStyle0 = pushCardCss;
@@ -18,7 +18,7 @@ const PushCard = class {
         const color = this.variant === 'insight' || this.variant === 'notification'
             ? 'std'
             : undefined;
-        return (h(Host, { key: '9ba9fd8e6cc9f2b74e89fbbcd0c09a04aca45ac2' }, h("ix-card", { key: '913618b3fc69c1e59c3bbeb4c92569b2754ff3ae', variant: this.variant }, h("ix-card-content", { key: 'bb75a940ce3ac891fe947f4ed9e542c36a492f92' }, h("ix-card-title", { key: '37f4faab2368f341dd835fffe64b5915e1c4b322' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("span", { key: '42059a2ed174f15fdcce1ddb599bc831afade5b1', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: '9e3b8df6148f3b8e3d577d8ece5253b14c85a0dd', name: "title-action" })), h("ix-typography", { key: 'b7473e9fd9fdaee3045ec4884544469a9a6457fe', color: color, format: "h4" }, this.heading), h("ix-typography", { key: '26c212e7f6111df4d353525fda6b3a76ee7dea3c', color: color }, this.subheading)), h("ix-card-accordion", { key: 'a779591ee7405f4a725f1c04abbc7223064ee885', collapse: this.collapse }, h("slot", { key: '5d42faa67c254a1d8541c525cb8e0e08e6b0d095' })))));
+        return (h(Host, { key: '4927262c7896d5db2eb939fa8337ebadb6774229' }, h("ix-card", { key: '03336f0cc37dde84b0a00ac7fd3eab26258e2ac5', variant: this.variant }, h("ix-card-content", { key: '362537f589ab27e6a2a2ac4e732e384b2f08bb52' }, h("ix-card-title", { key: 'df79854b0f6b160938c5cb8111cb68e049dc2a21' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("span", { key: '96a30b27bd3479dccc86974a0c356cc20db07952', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: '8c5a4c60df7d7b8785bbb71ea121d9966b531b6f', name: "title-action" })), h("ix-typography", { key: '193883ef7009f3f5b28505333ad4457f9a76bf24', color: color, format: "h4" }, this.heading), h("ix-typography", { key: '1695ab207b51d282b96311b08fd0f1dc01daac36', color: color }, this.subheading)), h("ix-card-accordion", { key: 'ae91fcfe96e7d56e47d6f4579c11e959ceb84f5f', collapse: this.collapse }, h("slot", { key: 'f51b6187302421c78a9a81085609b5f96f6017d4' })))));
     }
 };
 PushCard.style = IxPushCardStyle0;

package/dist/esm/ix-push-card.entry.js.map

@@ -1 +1 @@
-{"file":"ix-push-card.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,gJAAgJ,CAAC;AACrK,yBAAe,WAAW;;MCsBb,QAAQ;;;oBAIgB,SAAS;;;;uBAoBT,SAAS;wBAMhB,IAAI;;IAEhC,MAAM;;QACJ,MAAM,KAAK,GACT,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,cAAc;cACzD,KAAK;cACL,SAAS,CAAC;QAEhB,QACE,EAAC,IAAI,uDACH,gEAAS,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5B,0EACE,wEACG,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,IAC3D,IAAI,EACR,6DAAM,KAAK,EAAE,cAAc,IAAG,MAAA,IAAI,CAAC,YAAY,mCAAI,CAAC,CAAQ,EAC5D,6DAAM,IAAI,EAAC,cAAc,GAAQ,CACnB,EAChB,sEAAe,KAAK,EAAE,KAAK,EAAE,MAAM,EAAC,IAAI,IACrC,IAAI,CAAC,OAAO,CACC,EAChB,sEAAe,KAAK,EAAE,KAAK,IAAG,IAAI,CAAC,UAAU,CAAiB,CAC9C,EAClB,0EAAmB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxC,8DAAa,CACK,CACZ,CACL,EACP;KACH;;;;;;","names":[],"sources":["src/components/push-card/push-card.scss?tag=ix-push-card&encapsulation=shadow","src/components/push-card/push-card.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:host {\n  display: block;\n  position: relative;\n\n  .icon {\n    transform: scale(1.25);\n  }\n\n  .notification {\n    font-size: 40px;\n  }\n\n  ix-card-content {\n    height: 11rem;\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 { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\nimport { TypographyColors } from '../typography/typography';\n\nexport type PushCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-push-card',\n  styleUrl: 'push-card.scss',\n  shadow: true,\n})\nexport class PushCard {\n  /**\n   * Card icon\n   */\n  @Prop() icon: string | undefined = undefined;\n\n  /**\n   * Card KPI value\n   */\n  @Prop() notification: string;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading: string;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: PushCardVariant = 'insight';\n\n  /**\n   * Collapse the card\n   * @since 2.1.0\n   */\n  @Prop() collapse: boolean = true;\n\n  render() {\n    const color: TypographyColors =\n      this.variant === 'insight' || this.variant === 'notification'\n        ? 'std'\n        : undefined;\n\n    return (\n      <Host>\n        <ix-card variant={this.variant}>\n          <ix-card-content>\n            <ix-card-title>\n              {this.icon ? (\n                <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n              ) : null}\n              <span class={'notification'}>{this.notification ?? 0}</span>\n              <slot name=\"title-action\"></slot>\n            </ix-card-title>\n            <ix-typography color={color} format=\"h4\">\n              {this.heading}\n            </ix-typography>\n            <ix-typography color={color}>{this.subheading}</ix-typography>\n          </ix-card-content>\n          <ix-card-accordion collapse={this.collapse}>\n            <slot></slot>\n          </ix-card-accordion>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-push-card.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,gJAAgJ,CAAC;AACrK,yBAAe,WAAW;;MCsBb,QAAQ;;;oBAIgB,SAAS;;;;uBAqBT,SAAS;wBAMhB,IAAI;;IAEhC,MAAM;;QACJ,MAAM,KAAK,GACT,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,cAAc;cACzD,KAAK;cACL,SAAS,CAAC;QAEhB,QACE,EAAC,IAAI,uDACH,gEAAS,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5B,0EACE,wEACG,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,IAC3D,IAAI,EACR,6DAAM,KAAK,EAAE,cAAc,IAAG,MAAA,IAAI,CAAC,YAAY,mCAAI,CAAC,CAAQ,EAC5D,6DAAM,IAAI,EAAC,cAAc,GAAQ,CACnB,EAChB,sEAAe,KAAK,EAAE,KAAK,EAAE,MAAM,EAAC,IAAI,IACrC,IAAI,CAAC,OAAO,CACC,EAChB,sEAAe,KAAK,EAAE,KAAK,IAAG,IAAI,CAAC,UAAU,CAAiB,CAC9C,EAClB,0EAAmB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxC,8DAAa,CACK,CACZ,CACL,EACP;KACH;;;;;;","names":[],"sources":["src/components/push-card/push-card.scss?tag=ix-push-card&encapsulation=shadow","src/components/push-card/push-card.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:host {\n  display: block;\n  position: relative;\n\n  .icon {\n    transform: scale(1.25);\n  }\n\n  .notification {\n    font-size: 40px;\n  }\n\n  ix-card-content {\n    height: 11rem;\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 { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\nimport { TypographyColors } from '../typography/typography';\n\nexport type PushCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-push-card',\n  styleUrl: 'push-card.scss',\n  shadow: true,\n})\nexport class PushCard {\n  /**\n   * Card icon\n   */\n  @Prop() icon: string | undefined = undefined;\n\n  /**\n   * Card KPI value\n   */\n  @Prop() notification?: string;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * Card variant\n   * @deprecated variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead.\n   */\n  @Prop() variant: PushCardVariant = 'insight';\n\n  /**\n   * Collapse the card\n   * @since 2.1.0\n   */\n  @Prop() collapse: boolean = true;\n\n  render() {\n    const color: TypographyColors | undefined =\n      this.variant === 'insight' || this.variant === 'notification'\n        ? 'std'\n        : undefined;\n\n    return (\n      <Host>\n        <ix-card variant={this.variant}>\n          <ix-card-content>\n            <ix-card-title>\n              {this.icon ? (\n                <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n              ) : null}\n              <span class={'notification'}>{this.notification ?? 0}</span>\n              <slot name=\"title-action\"></slot>\n            </ix-card-title>\n            <ix-typography color={color} format=\"h4\">\n              {this.heading}\n            </ix-typography>\n            <ix-typography color={color}>{this.subheading}</ix-typography>\n          </ix-card-content>\n          <ix-card-accordion collapse={this.collapse}>\n            <slot></slot>\n          </ix-card-accordion>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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}