@infineon/infineon-design-system-stencil 30.9.3--canary.1692.59c40bb497f09acb42590b3e54cb7f4190ece08f.0 → 30.9.3--canary.1703.0331e5ed94aae6786a2fd300caf7d6d06de02a1e.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ifx-radio-button.cjs.entry.js +2 -2
- package/dist/cjs/ifx-radio-button.cjs.entry.js.map +1 -1
- package/dist/collection/components/radio-button/radio-button.css +0 -4
- package/dist/collection/components/radio-button/radio-button.js +1 -1
- package/dist/collection/components/radio-button/radio-button.js.map +1 -1
- package/dist/components/ifx-list-entry.js +1 -1
- package/dist/components/ifx-radio-button.js +1 -1
- package/dist/components/{p-f050104d.js → p-7bbdeac1.js} +3 -3
- package/dist/components/p-7bbdeac1.js.map +1 -0
- package/dist/esm/ifx-radio-button.entry.js +2 -2
- package/dist/esm/ifx-radio-button.entry.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/{p-e88c1356.entry.js → p-a116e0d2.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-a116e0d2.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/components/p-f050104d.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-e88c1356.entry.js.map +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-af3b4f6c.js');
|
|
6
6
|
|
|
7
|
-
const radioButtonCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}
|
|
7
|
+
const radioButtonCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}";
|
|
8
8
|
const IfxRadioButtonStyle0 = radioButtonCss;
|
|
9
9
|
|
|
10
10
|
const RadioButton = class {
|
|
@@ -67,7 +67,7 @@ const RadioButton = class {
|
|
|
67
67
|
return (index.h("div", { key: '7b5291f95e3fc00c0ceb9285c57ca440b1a8939f', "aria-label": 'a radio button', "aria-value": this.value, "aria-disabled": this.disabled, class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: this.handleRadioButtonClick.bind(this) }, index.h("div", { key: '5efda77550a294da34c4f72c4558e312690f9cd9', class: `radioButton__wrapper
|
|
68
68
|
${this.internalChecked ? 'checked' : ''}
|
|
69
69
|
${this.disabled ? 'disabled' : ''}
|
|
70
|
-
${this.error ? 'error' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalChecked && index.h("div", { key: '2b1a814830a361021a812016d770d7838dca05fe', class: "radioButton__wrapper-mark" })), this.hasSlot && (index.h("div", { key: '61911033a487c6396c1c34b35f13f04cf84ea602', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, index.h("slot", { key: '7f1b40289cdd67a4fbc2e4677da03e22cdfa758c' }))), index.h("input", { key: '
|
|
70
|
+
${this.error ? 'error' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalChecked && index.h("div", { key: '2b1a814830a361021a812016d770d7838dca05fe', class: "radioButton__wrapper-mark" })), this.hasSlot && (index.h("div", { key: '61911033a487c6396c1c34b35f13f04cf84ea602', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, index.h("slot", { key: '7f1b40289cdd67a4fbc2e4677da03e22cdfa758c' }))), index.h("input", { key: 'f77c2d84f409e3875798370a06cbc744385e5655', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
|
|
71
71
|
}
|
|
72
72
|
get el() { return index.getElement(this); }
|
|
73
73
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-radio-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,
|
|
1
|
+
{"file":"ifx-radio-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,85FAA85F,CAAC;AACt7F,6BAAe,cAAc;;MCQhB,WAAW;;;;wBAEM,KAAK;;qBAER,KAAK;oBACJ,GAAG;;;+BAGO,KAAK;uBACb,IAAI;;;;;;IAUhC,MAAM,SAAS;QACb,OAAO,IAAI,CAAC,eAAe,CAAC;KAC7B;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;QAC/B,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;;YAAM,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KAC7B;;;;;IAOD,sBAAsB,CAAC,KAAmB;QACxC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;SACR;QAED,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;QACjD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC3C;;;;;;;;IAUD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;YAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;SAClD;KACF;IAED,MAAM;QACJ,QACEA,gFACa,gBAAgB,gBAAa,IAAI,CAAC,KAAK,mBAAiB,IAAI,CAAC,QAAQ,EAChF,KAAK,EAAE,0BAA0B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC/E,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,IAE/CA,kEACE,KAAK,EAAE;YACL,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE;YACrC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;YAC/B,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,EAAE,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,IAE/B,IAAI,CAAC,eAAe,IAAIA,kEAAK,KAAK,EAAC,2BAA2B,GAAO,CAClE,EACL,IAAI,CAAC,OAAO,KACXA,kEAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAC1FA,oEAAQ,CACJ,CACP,EACDA,oEACE,IAAI,EAAC,OAAO,EACZ,MAAM,QACN,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAsB,EACrD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,GAAU,CAC3C,EACN;KACH;;;;;;;","names":["h"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.radioButton__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n\n &.m .radioButton__wrapper {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n\n .radioButton__wrapper {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n position: relative;\n display: block;\n border-radius: 50%;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n\n &:focus {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n }\n\n .radioButton__wrapper-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #0A8276;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: tokens.$ifxColorBaseTransparent;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n\n &.error {\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n &.checked {\n border-color: #0A8276;\n\n &::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: #0A8276;\n border-radius: 50%;\n }\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n\n &:hover {\n border-color: tokens.$ifxColorOcean600;\n\n & .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorOcean600;\n }\n }\n\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border-color: #BFBBBB;\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n & .radioButton__wrapper-mark {\n background-color: #BFBBBB;\n }\n }\n }\n\n &.error:not(.disabled) {\n border-color: #CD002F;\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n .label {\n display: flex;\n align-items: center;\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n\n\n\n &:hover {\n cursor: pointer;\n }\n }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Method } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: false,\n formAssociated: false\n})\nexport class RadioButton {\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop() size: \"s\" | \"m\" = \"s\";\n @Prop() name: string;\n @Prop() checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = true;\n\n @State() inputElement: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n /**\n * @returns whether the radio button is checked.\n */\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n \n componentWillLoad() {\n if (this.checked) this.internalChecked = this.checked;\n const slot = this.el.innerHTML;\n if (slot) {\n this.hasSlot = true;\n } else this.hasSlot = false;\n }\n\n\n /**\n * Click the hidden input element to let it handle the state\n * and emit ifxChange event.\n */\n handleRadioButtonClick(event: PointerEvent) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.ifxChange.emit(this.internalChecked);\n }\n\n /**\n * Listen to all change events.\n * Needed to get informed when another button of the group gets chcked \n * and this one needs to become unchecked. \n * \n * @param event \n */\n @Listen('change', { target: 'window' }) \n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n if (target.name === this.name) {\n this.internalChecked = this.inputElement.checked;\n }\n }\n\n render() {\n return (\n <div\n aria-label='a radio button' aria-value={this.value} aria-disabled={this.disabled}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={this.handleRadioButtonClick.bind(this)}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.disabled ? 'disabled' : ''} \n ${this.error ? 'error' : ''}`}\n tabIndex={this.disabled ? -1 : 0}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n <slot />\n </div>\n )}\n <input\n type=\"radio\" \n hidden \n ref={el => this.inputElement = el as HTMLInputElement} \n name={this.name} \n value={this.value}\n checked={this.internalChecked} \n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}></input>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -57,7 +57,7 @@ export class RadioButton {
|
|
|
57
57
|
return (h("div", { key: '7b5291f95e3fc00c0ceb9285c57ca440b1a8939f', "aria-label": 'a radio button', "aria-value": this.value, "aria-disabled": this.disabled, class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: this.handleRadioButtonClick.bind(this) }, h("div", { key: '5efda77550a294da34c4f72c4558e312690f9cd9', class: `radioButton__wrapper
|
|
58
58
|
${this.internalChecked ? 'checked' : ''}
|
|
59
59
|
${this.disabled ? 'disabled' : ''}
|
|
60
|
-
${this.error ? 'error' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalChecked && h("div", { key: '2b1a814830a361021a812016d770d7838dca05fe', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '61911033a487c6396c1c34b35f13f04cf84ea602', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '7f1b40289cdd67a4fbc2e4677da03e22cdfa758c' }))), h("input", { key: '
|
|
60
|
+
${this.error ? 'error' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalChecked && h("div", { key: '2b1a814830a361021a812016d770d7838dca05fe', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '61911033a487c6396c1c34b35f13f04cf84ea602', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '7f1b40289cdd67a4fbc2e4677da03e22cdfa758c' }))), h("input", { key: 'f77c2d84f409e3875798370a06cbc744385e5655', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
|
|
61
61
|
}
|
|
62
62
|
static get is() { return "ifx-radio-button"; }
|
|
63
63
|
static get originalStyleUrls() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AASxG,MAAM,OAAO,WAAW;;wBAEM,KAAK;;qBAER,KAAK;oBACJ,GAAG;;;+BAGO,KAAK;uBACb,IAAI;;;IAMhC;;OAEG;IAEH,KAAK,CAAC,SAAS;QACb,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;QAC/B,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC;;YAAM,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC;IAGD;;;OAGG;IACH,sBAAsB,CAAC,KAAmB;QACxC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;QACjD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAC5C,CAAC;IAED;;;;;;OAMG;IAEH,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;YAC9B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;QACnD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0EACa,gBAAgB,gBAAa,IAAI,CAAC,KAAK,mBAAiB,IAAI,CAAC,QAAQ,EAChF,KAAK,EAAE,0BAA0B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAC/E,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC;YAE/C,4DACE,KAAK,EAAE;YACL,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;YACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;YAC/B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAE/B,IAAI,CAAC,eAAe,IAAI,4DAAK,KAAK,EAAC,2BAA2B,GAAO,CAClE;YACL,IAAI,CAAC,OAAO,IAAI,CACf,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;gBAC1F,8DAAQ,CACJ,CACP;YACD,8DACE,
|
|
1
|
+
{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AASxG,MAAM,OAAO,WAAW;;wBAEM,KAAK;;qBAER,KAAK;oBACJ,GAAG;;;+BAGO,KAAK;uBACb,IAAI;;;IAMhC;;OAEG;IAEH,KAAK,CAAC,SAAS;QACb,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;QAC/B,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC;;YAAM,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC;IAGD;;;OAGG;IACH,sBAAsB,CAAC,KAAmB;QACxC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;QACjD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAC5C,CAAC;IAED;;;;;;OAMG;IAEH,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;YAC9B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;QACnD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0EACa,gBAAgB,gBAAa,IAAI,CAAC,KAAK,mBAAiB,IAAI,CAAC,QAAQ,EAChF,KAAK,EAAE,0BAA0B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAC/E,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC;YAE/C,4DACE,KAAK,EAAE;YACL,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;YACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;YAC/B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAE/B,IAAI,CAAC,eAAe,IAAI,4DAAK,KAAK,EAAC,2BAA2B,GAAO,CAClE;YACL,IAAI,CAAC,OAAO,IAAI,CACf,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;gBAC1F,8DAAQ,CACJ,CACP;YACD,8DACE,IAAI,EAAC,OAAO,EACZ,MAAM,QACN,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,EAAsB,EACrD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,GAAU,CAC3C,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Method } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: false,\n formAssociated: false\n})\nexport class RadioButton {\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop() size: \"s\" | \"m\" = \"s\";\n @Prop() name: string;\n @Prop() checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = true;\n\n @State() inputElement: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n /**\n * @returns whether the radio button is checked.\n */\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n \n componentWillLoad() {\n if (this.checked) this.internalChecked = this.checked;\n const slot = this.el.innerHTML;\n if (slot) {\n this.hasSlot = true;\n } else this.hasSlot = false;\n }\n\n\n /**\n * Click the hidden input element to let it handle the state\n * and emit ifxChange event.\n */\n handleRadioButtonClick(event: PointerEvent) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.ifxChange.emit(this.internalChecked);\n }\n\n /**\n * Listen to all change events.\n * Needed to get informed when another button of the group gets chcked \n * and this one needs to become unchecked. \n * \n * @param event \n */\n @Listen('change', { target: 'window' }) \n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n if (target.name === this.name) {\n this.internalChecked = this.inputElement.checked;\n }\n }\n\n render() {\n return (\n <div\n aria-label='a radio button' aria-value={this.value} aria-disabled={this.disabled}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={this.handleRadioButtonClick.bind(this)}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.disabled ? 'disabled' : ''} \n ${this.error ? 'error' : ''}`}\n tabIndex={this.disabled ? -1 : 0}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n <slot />\n </div>\n )}\n <input\n type=\"radio\" \n hidden \n ref={el => this.inputElement = el as HTMLInputElement} \n name={this.name} \n value={this.value}\n checked={this.internalChecked} \n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}></input>\n </div>\n );\n }\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
|
|
2
2
|
import { d as defineCustomElement$4 } from './p-f0f583d5.js';
|
|
3
3
|
import { d as defineCustomElement$3 } from './p-7e430b83.js';
|
|
4
|
-
import { d as defineCustomElement$2 } from './p-
|
|
4
|
+
import { d as defineCustomElement$2 } from './p-7bbdeac1.js';
|
|
5
5
|
|
|
6
6
|
const listEntryCss = ".list-entry{display:flex;align-items:center;margin-top:8px;align-self:stretch}";
|
|
7
7
|
const IfxListEntryStyle0 = listEntryCss;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
|
|
2
2
|
|
|
3
|
-
const radioButtonCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}
|
|
3
|
+
const radioButtonCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}";
|
|
4
4
|
const IfxRadioButtonStyle0 = radioButtonCss;
|
|
5
5
|
|
|
6
6
|
const RadioButton = /*@__PURE__*/ proxyCustomElement(class RadioButton extends H {
|
|
@@ -64,7 +64,7 @@ const RadioButton = /*@__PURE__*/ proxyCustomElement(class RadioButton extends H
|
|
|
64
64
|
return (h("div", { key: '7b5291f95e3fc00c0ceb9285c57ca440b1a8939f', "aria-label": 'a radio button', "aria-value": this.value, "aria-disabled": this.disabled, class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: this.handleRadioButtonClick.bind(this) }, h("div", { key: '5efda77550a294da34c4f72c4558e312690f9cd9', class: `radioButton__wrapper
|
|
65
65
|
${this.internalChecked ? 'checked' : ''}
|
|
66
66
|
${this.disabled ? 'disabled' : ''}
|
|
67
|
-
${this.error ? 'error' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalChecked && h("div", { key: '2b1a814830a361021a812016d770d7838dca05fe', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '61911033a487c6396c1c34b35f13f04cf84ea602', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '7f1b40289cdd67a4fbc2e4677da03e22cdfa758c' }))), h("input", { key: '
|
|
67
|
+
${this.error ? 'error' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalChecked && h("div", { key: '2b1a814830a361021a812016d770d7838dca05fe', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '61911033a487c6396c1c34b35f13f04cf84ea602', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '7f1b40289cdd67a4fbc2e4677da03e22cdfa758c' }))), h("input", { key: 'f77c2d84f409e3875798370a06cbc744385e5655', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
|
|
68
68
|
}
|
|
69
69
|
get el() { return this; }
|
|
70
70
|
static get style() { return IfxRadioButtonStyle0; }
|
|
@@ -96,4 +96,4 @@ function defineCustomElement() {
|
|
|
96
96
|
|
|
97
97
|
export { RadioButton as R, defineCustomElement as d };
|
|
98
98
|
|
|
99
|
-
//# sourceMappingURL=p-
|
|
99
|
+
//# sourceMappingURL=p-7bbdeac1.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-7bbdeac1.js","mappings":";;AAAA,MAAM,cAAc,GAAG,85FAA85F,CAAC;AACt7F,6BAAe,cAAc;;MCQhB,WAAW;;;;;wBAEM,KAAK;;qBAER,KAAK;oBACJ,GAAG;;;+BAGO,KAAK;uBACb,IAAI;;;;;;IAUhC,MAAM,SAAS;QACb,OAAO,IAAI,CAAC,eAAe,CAAC;KAC7B;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;QAC/B,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;;YAAM,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KAC7B;;;;;IAOD,sBAAsB,CAAC,KAAmB;QACxC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;SACR;QAED,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;QACjD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC3C;;;;;;;;IAUD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;YAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;SAClD;KACF;IAED,MAAM;QACJ,QACE,0EACa,gBAAgB,gBAAa,IAAI,CAAC,KAAK,mBAAiB,IAAI,CAAC,QAAQ,EAChF,KAAK,EAAE,0BAA0B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC/E,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,IAE/C,4DACE,KAAK,EAAE;YACL,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE;YACrC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;YAC/B,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,EAAE,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,IAE/B,IAAI,CAAC,eAAe,IAAI,4DAAK,KAAK,EAAC,2BAA2B,GAAO,CAClE,EACL,IAAI,CAAC,OAAO,KACX,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAC1F,8DAAQ,CACJ,CACP,EACD,8DACE,IAAI,EAAC,OAAO,EACZ,MAAM,QACN,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAsB,EACrD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,GAAU,CAC3C,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.radioButton__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n\n &.m .radioButton__wrapper {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n\n .radioButton__wrapper {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n position: relative;\n display: block;\n border-radius: 50%;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n\n &:focus {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n }\n\n .radioButton__wrapper-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #0A8276;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: tokens.$ifxColorBaseTransparent;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n\n &.error {\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n &.checked {\n border-color: #0A8276;\n\n &::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: #0A8276;\n border-radius: 50%;\n }\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n\n &:hover {\n border-color: tokens.$ifxColorOcean600;\n\n & .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorOcean600;\n }\n }\n\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border-color: #BFBBBB;\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n & .radioButton__wrapper-mark {\n background-color: #BFBBBB;\n }\n }\n }\n\n &.error:not(.disabled) {\n border-color: #CD002F;\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n .label {\n display: flex;\n align-items: center;\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n\n\n\n &:hover {\n cursor: pointer;\n }\n }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Method } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: false,\n formAssociated: false\n})\nexport class RadioButton {\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop() size: \"s\" | \"m\" = \"s\";\n @Prop() name: string;\n @Prop() checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = true;\n\n @State() inputElement: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n /**\n * @returns whether the radio button is checked.\n */\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n \n componentWillLoad() {\n if (this.checked) this.internalChecked = this.checked;\n const slot = this.el.innerHTML;\n if (slot) {\n this.hasSlot = true;\n } else this.hasSlot = false;\n }\n\n\n /**\n * Click the hidden input element to let it handle the state\n * and emit ifxChange event.\n */\n handleRadioButtonClick(event: PointerEvent) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.ifxChange.emit(this.internalChecked);\n }\n\n /**\n * Listen to all change events.\n * Needed to get informed when another button of the group gets chcked \n * and this one needs to become unchecked. \n * \n * @param event \n */\n @Listen('change', { target: 'window' }) \n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n if (target.name === this.name) {\n this.internalChecked = this.inputElement.checked;\n }\n }\n\n render() {\n return (\n <div\n aria-label='a radio button' aria-value={this.value} aria-disabled={this.disabled}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={this.handleRadioButtonClick.bind(this)}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.disabled ? 'disabled' : ''} \n ${this.error ? 'error' : ''}`}\n tabIndex={this.disabled ? -1 : 0}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n <slot />\n </div>\n )}\n <input\n type=\"radio\" \n hidden \n ref={el => this.inputElement = el as HTMLInputElement} \n name={this.name} \n value={this.value}\n checked={this.internalChecked} \n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}></input>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-dc4139fb.js';
|
|
2
2
|
|
|
3
|
-
const radioButtonCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}
|
|
3
|
+
const radioButtonCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}";
|
|
4
4
|
const IfxRadioButtonStyle0 = radioButtonCss;
|
|
5
5
|
|
|
6
6
|
const RadioButton = class {
|
|
@@ -63,7 +63,7 @@ const RadioButton = class {
|
|
|
63
63
|
return (h("div", { key: '7b5291f95e3fc00c0ceb9285c57ca440b1a8939f', "aria-label": 'a radio button', "aria-value": this.value, "aria-disabled": this.disabled, class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: this.handleRadioButtonClick.bind(this) }, h("div", { key: '5efda77550a294da34c4f72c4558e312690f9cd9', class: `radioButton__wrapper
|
|
64
64
|
${this.internalChecked ? 'checked' : ''}
|
|
65
65
|
${this.disabled ? 'disabled' : ''}
|
|
66
|
-
${this.error ? 'error' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalChecked && h("div", { key: '2b1a814830a361021a812016d770d7838dca05fe', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '61911033a487c6396c1c34b35f13f04cf84ea602', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '7f1b40289cdd67a4fbc2e4677da03e22cdfa758c' }))), h("input", { key: '
|
|
66
|
+
${this.error ? 'error' : ''}`, tabIndex: this.disabled ? -1 : 0 }, this.internalChecked && h("div", { key: '2b1a814830a361021a812016d770d7838dca05fe', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '61911033a487c6396c1c34b35f13f04cf84ea602', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '7f1b40289cdd67a4fbc2e4677da03e22cdfa758c' }))), h("input", { key: 'f77c2d84f409e3875798370a06cbc744385e5655', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
|
|
67
67
|
}
|
|
68
68
|
get el() { return getElement(this); }
|
|
69
69
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-radio-button.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,
|
|
1
|
+
{"file":"ifx-radio-button.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,85FAA85F,CAAC;AACt7F,6BAAe,cAAc;;MCQhB,WAAW;;;;wBAEM,KAAK;;qBAER,KAAK;oBACJ,GAAG;;;+BAGO,KAAK;uBACb,IAAI;;;;;;IAUhC,MAAM,SAAS;QACb,OAAO,IAAI,CAAC,eAAe,CAAC;KAC7B;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;QAC/B,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;;YAAM,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KAC7B;;;;;IAOD,sBAAsB,CAAC,KAAmB;QACxC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;SACR;QAED,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;QACjD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC3C;;;;;;;;IAUD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;YAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;SAClD;KACF;IAED,MAAM;QACJ,QACE,0EACa,gBAAgB,gBAAa,IAAI,CAAC,KAAK,mBAAiB,IAAI,CAAC,QAAQ,EAChF,KAAK,EAAE,0BAA0B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC/E,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,IAE/C,4DACE,KAAK,EAAE;YACL,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE;YACrC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;YAC/B,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,EAAE,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,IAE/B,IAAI,CAAC,eAAe,IAAI,4DAAK,KAAK,EAAC,2BAA2B,GAAO,CAClE,EACL,IAAI,CAAC,OAAO,KACX,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAC1F,8DAAQ,CACJ,CACP,EACD,8DACE,IAAI,EAAC,OAAO,EACZ,MAAM,QACN,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAsB,EACrD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,GAAU,CAC3C,EACN;KACH;;;;;;;","names":[],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.radioButton__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n\n &.m .radioButton__wrapper {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n\n .radioButton__wrapper {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n position: relative;\n display: block;\n border-radius: 50%;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n\n &:focus {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n }\n\n .radioButton__wrapper-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #0A8276;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: tokens.$ifxColorBaseTransparent;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n\n &.error {\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n &.checked {\n border-color: #0A8276;\n\n &::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: #0A8276;\n border-radius: 50%;\n }\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n\n &:hover {\n border-color: tokens.$ifxColorOcean600;\n\n & .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorOcean600;\n }\n }\n\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border-color: #BFBBBB;\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n & .radioButton__wrapper-mark {\n background-color: #BFBBBB;\n }\n }\n }\n\n &.error:not(.disabled) {\n border-color: #CD002F;\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n .label {\n display: flex;\n align-items: center;\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n\n\n\n &:hover {\n cursor: pointer;\n }\n }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Method } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: false,\n formAssociated: false\n})\nexport class RadioButton {\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop() size: \"s\" | \"m\" = \"s\";\n @Prop() name: string;\n @Prop() checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = true;\n\n @State() inputElement: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n /**\n * @returns whether the radio button is checked.\n */\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n \n componentWillLoad() {\n if (this.checked) this.internalChecked = this.checked;\n const slot = this.el.innerHTML;\n if (slot) {\n this.hasSlot = true;\n } else this.hasSlot = false;\n }\n\n\n /**\n * Click the hidden input element to let it handle the state\n * and emit ifxChange event.\n */\n handleRadioButtonClick(event: PointerEvent) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.ifxChange.emit(this.internalChecked);\n }\n\n /**\n * Listen to all change events.\n * Needed to get informed when another button of the group gets chcked \n * and this one needs to become unchecked. \n * \n * @param event \n */\n @Listen('change', { target: 'window' }) \n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n if (target.name === this.name) {\n this.internalChecked = this.inputElement.checked;\n }\n }\n\n render() {\n return (\n <div\n aria-label='a radio button' aria-value={this.value} aria-disabled={this.disabled}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={this.handleRadioButtonClick.bind(this)}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.disabled ? 'disabled' : ''} \n ${this.error ? 'error' : ''}`}\n tabIndex={this.disabled ? -1 : 0}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n <slot />\n </div>\n )}\n <input\n type=\"radio\" \n hidden \n ref={el => this.inputElement = el as HTMLInputElement} \n name={this.name} \n value={this.value}\n checked={this.internalChecked} \n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}></input>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,b as a}from"./p-6b122987.js";export{s as setNonce}from"./p-6b122987.js";import{g as i}from"./p-e1255160.js";var n=()=>{{o(t.prototype)}const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};var o=e=>{const t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}const a=t.call(this,false);const i=this.childNodes;if(e){for(let e=0;e<i.length;e++){if(i[e].nodeType!==2){a.appendChild(i[e].cloneNode(true))}}}return a}};n().then((async e=>{await i();return a(JSON.parse('[["p-00d6e46e",[[1,"ifx-table",{"cols":[8],"rows":[8],"buttonRendererOptions":[16],"rowHeight":[1,"row-height"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"filterOrientation":[1,"filter-orientation"],"showLoading":[4,"show-loading"],"currentPage":[32],"rowData":[32],"colData":[32],"filterOptions":[32],"currentFilters":[32],"uniqueKey":[32],"showSidebarFilters":[32],"matchingResultsCount":[32],"onBtShowLoading":[64]},[[0,"ifxChipChange","handleChipChange"]],{"buttonRendererOptions":["onButtonRendererOptionsChanged"]}]]],["p-189c89c3",[[1,"ifx-set-filter",{"filterName":[1,"filter-name"],"filterLabel":[1,"filter-label"],"placeholder":[1],"type":[1],"options":[1],"filterValues":[32]}]]],["p-8a497a15",[[1,"ifx-faq"]]],["p-53f2ab7f",[[1,"ifx-list-entry",{"value":[1028],"label":[1],"type":[1]},[[0,"ifxChange","handleFilterEntryChange"]],{"value":["valueChanged"]}]]],["p-18f5a5e3",[[1,"ifx-overview-table"]]],["p-379a2090",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-a2d7c880",[[1,"ifx-filter-accordion",{"maxVisibleItems":[2,"max-visible-items"],"filterGroupName":[1,"filter-group-name"],"expanded":[32],"count":[32],"totalItems":[32]}]]],["p-c80f9282",[[1,"ifx-filter-bar",{"maxShownFilters":[2,"max-shown-filters"],"showMoreFiltersButton":[4,"show-more-filters-button"],"selectedOptions":[32],"showAllFilters":[32],"visibleSlots":[32]}]]],["p-32510d11",[[1,"ifx-filter-search",{"filterName":[1,"filter-name"],"disabled":[4],"filterValue":[1025,"filter-value"],"filterKey":[1,"filter-key"],"filterOrientation":[1,"filter-orientation"],"placeholder":[1],"showDeleteIcon":[32]},[[0,"ifxInput","handleFilterSearchChange"]],{"value":["valueChanged"]}]]],["p-466fea81",[[1,"ifx-list",{"name":[1],"maxVisibleItems":[2,"max-visible-items"],"type":[1],"resetTrigger":[1028,"reset-trigger"],"expanded":[32],"showMore":[32],"selectedCount":[32],"totalItems":[32],"internalResetTrigger":[32]},null,{"type":["handleTypeChange"],"resetTrigger":["resetTriggerChanged"]}]]],["p-bc8a4226",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"size":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showCloseButton":[4,"show-close-button"],"showModal":[32],"slotButtonsPresent":[32]},null,{"opened":["openedChanged"]}]]],["p-775d187b",[[1,"ifx-notification",{"icon":[1],"variant":[1],"linkText":[1,"link-text"],"linkHref":[1,"link-href"],"linkTarget":[1,"link-target"]}]]],["p-9481adc8",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"maxlength":[2],"internalState":[32],"onNavbarMobile":[64]},null,{"isOpen":["handlePropChange"]}]]],["p-436babb8",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"numberIndicator":[1,"number-indicator"],"active":[4],"isActionItem":[4,"is-action-item"],"value":[1],"handleItemClick":[16],"hasIcon":[32],"hasIconWrapper":[32],"internalHref":[32],"isExpandable":[32],"isNested":[32],"isSubMenuItem":[32],"internalActiveState":[32],"setActiveClasses":[64],"expandMenu":[64],"isItemExpandable":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"]}]]],["p-db09429f",[[1,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4],"AriaLive":[1,"aria-live"],"uniqueId":[32]}]]],["p-7bef9272",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-c82d6a95",[[65,"ifx-date-picker",{"size":[1],"error":[4],"success":[4],"disabled":[4],"AriaLabel":[1,"aria-label"],"value":[1],"max":[1],"min":[1],"required":[4],"label":[1],"caption":[1]}]]],["p-27a52d0b",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-fbd9e58e",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-91f91586",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"logoHref":[1,"logo-href"],"logoHrefTarget":[1,"logo-href-target"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32],"internalLogoHref":[32],"internalLogoHrefTarget":[32]},[[0,"ifxNavItem","clearFirstLayerMenu"],[0,"ifxSearchBarIsOpen","handleSearchBarToggle"]]]]],["p-caff080b",[[1,"ifx-navbar-item",{"showLabel":[4,"show-label"],"icon":[1],"href":[1],"target":[1],"hideOnMobile":[4,"hide-on-mobile"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"isSidebarMenuItem":[32],"itemPosition":[32],"hideComponent":[64],"showComponent":[64],"toggleChildren":[64],"moveChildComponentsIntoSubLayerMenu":[64],"toggleFirstLayerItem":[64],"addMenuItemClass":[64],"moveChildComponentsBackIntoNavbar":[64],"returnToFirstLayer":[64],"setMenuItemPosition":[64],"setItemSideSpecifications":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-0a011c63",[[1,"ifx-segment",{"icon":[1],"segmentIndex":[2,"segment-index"],"selected":[1028],"value":[1]}]]],["p-f8d7bbe2",[[1,"ifx-segmented-control",{"caption":[1],"label":[1],"size":[1]},[[0,"segmentSelect","onSegmentSelect"]]]]],["p-7fa8ccd3",[[1,"ifx-slider",{"min":[2],"max":[2],"step":[2],"value":[2],"minValueHandle":[2,"min-value-handle"],"maxValueHandle":[2,"max-value-handle"],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"type":[1],"internalValue":[32],"percentage":[32],"internalMinValue":[32],"internalMaxValue":[32]},null,{"value":["valueChanged"],"minValueHandle":["minValueChanged"],"maxValueHandle":["maxValueChanged"]}]]],["p-c5daebfa",[[1,"ifx-step",{"complete":[4],"disabled":[4],"error":[1028],"lastStep":[4,"last-step"],"stepId":[2,"step-id"],"stepperState":[16],"active":[32],"clickable":[32]},[[4,"ifxChange","onStepChange"]],{"stepperState":["updateCurrentStep"],"active":["updateErrorState"]}]]],["p-89c7209f",[[1,"ifx-tabs",{"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"fullWidth":[4,"full-width"],"internalOrientation":[32],"internalActiveTabIndex":[32],"internalFocusedTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"disabledTabs":[32],"tabObjects":[32]},[[9,"resize","updateBorderOnWindowResize"],[0,"tabHeaderChange","handleTabHeaderChange"],[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-6c5f0f7b",[[1,"ifx-tag",{"icon":[1]}]]],["p-d101e5a0",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-51980b19",[[1,"ifx-badge"]]],["p-366148e2",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"rowHeight":[1,"row-height"],"tableHeight":[1,"table-height"],"gridOptions":[32],"columnDefs":[32],"rowData":[32],"uniqueKey":[32]}]]],["p-28fb795b",[[1,"ifx-breadcrumb"]]],["p-0c4276df",[[1,"ifx-breadcrumb-item",{"isLastItem":[32],"uniqueId":[32],"hasDropdownMenu":[32]},[[5,"mousedown","handleOutsideClick"],[0,"keydown","handleKeyDown"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-1aed7d45",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"AriaLabel":[1,"aria-label"],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-f0052c72",[[1,"ifx-card-headline",{"direction":[32],"hasDesc":[32]}]]],["p-51c4e760",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-34fb9dca",[[1,"ifx-card-links"]]],["p-680f8e2c",[[1,"ifx-card-overline"]]],["p-58966086",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-bddc382a",[[1,"ifx-content-switcher",{"items":[32],"activeIndex":[32],"hoverIndex":[32],"focusIndex":[32],"dividers":[32]}]]],["p-4b21c0e6",[[1,"ifx-content-switcher-item",{"selected":[4],"value":[1]}]]],["p-eb8ba37f",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-ee39e4ce",[[1,"ifx-dropdown-header"]]],["p-584149bd",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-6ae18c50",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-35d0daa5",[[1,"ifx-filter-type-group",{"selectedOptions":[32]}]]],["p-8969f1e4",[[1,"ifx-footer",{"copyrightText":[1,"copyright-text"],"currentYear":[32]}]]],["p-a8ccf376",[[1,"ifx-footer-column"]]],["p-3b99fb06",[[1,"ifx-navbar-profile",{"showLabel":[4,"show-label"],"href":[1],"imageUrl":[1,"image-url"],"target":[1],"alt":[1],"userName":[1,"user-name"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"internalImageUrl":[32],"hideComponent":[64],"showComponent":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-c34f5517",[[1,"ifx-progress-bar",{"value":[2],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-3c5a8615",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"initialCollapse":[4,"initial-collapse"],"showFooter":[4,"show-footer"],"showHeader":[4,"show-header"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"copyrightText":[1,"copyright-text"],"currentYear":[32],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"internalShowFooter":[32],"activeItem":[32]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]]]]],["p-b5a3fad1",[[1,"ifx-sidebar-title"]]],["p-4fab3a1e",[[1,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4]}]]],["p-499dba27",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-44b2cbe1",[[1,"ifx-stepper",{"activeStep":[1026,"active-step"],"indicatorPosition":[1,"indicator-position"],"showStepNumber":[4,"show-step-number"],"variant":[1],"stepsCount":[32],"shouldEmitEvent":[32],"emittedByClick":[32]},[[0,"ifxChange","onStepChange"]],{"activeStep":["handleActiveStep"]}]]],["p-030a5b46",[[65,"ifx-switch",{"checked":[4],"name":[1],"disabled":[4],"value":[1],"internalChecked":[32],"isChecked":[64]},null,{"checked":["valueChanged"]}]]],["p-9ee328a5",[[4,"ifx-tab",{"header":[1],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"]}]]],["p-7f59e05a",[[65,"ifx-textarea",{"caption":[1],"cols":[2],"disabled":[4],"error":[4],"label":[1],"maxlength":[2],"name":[1],"placeholder":[1],"readOnly":[4,"read-only"],"resize":[1],"rows":[2],"value":[1025],"wrap":[1],"reset":[64]}]]],["p-e88c1356",[[4,"ifx-radio-button",{"disabled":[4],"value":[1],"error":[4],"size":[1],"name":[1],"checked":[4],"internalChecked":[32],"hasSlot":[32],"inputElement":[32],"isChecked":[64]},[[8,"change","handleChange"]]]]],["p-32fc3ce3",[[1,"ifx-dropdown-separator"]]],["p-6389a7b8",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-d52e5250",[[65,"ifx-checkbox",{"disabled":[4],"checked":[4],"error":[4],"size":[1],"indeterminate":[4],"value":[1],"internalChecked":[32],"internalIndeterminate":[32],"isChecked":[64],"toggleCheckedState":[64]},null,{"checked":["valueChanged"],"indeterminate":["indeterminateChanged"]}]]],["p-dc7deb14",[[65,"ifx-multiselect",{"name":[1],"options":[1],"batchSize":[2,"batch-size"],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"showSearch":[4,"show-search"],"showSelectAll":[4,"show-select-all"],"internalError":[32],"internalErrorMessage":[32],"persistentSelectedOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32],"optionCount":[32],"optionsProcessed":[32]},null,{"options":["updateOptions"],"error":["updateInternalError"],"errorMessage":["updateInternalErrorMessage"],"loadedOptions":["loadedOptionsChanged"],"persistentSelectedOptions":["onSelectionChange"]}],[65,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"maxlength":[2],"showDeleteIcon":[4,"show-delete-icon"],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-222c1af9",[[1,"ifx-accordion-item",{"caption":[1],"open":[1028],"AriaLive":[2,"aria-live"],"internalOpen":[32]},[[0,"keydown","handleKeydown"]],{"open":["openChanged"]}],[17,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-6fdc1a34",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"placeholder":[1],"maxlength":[2],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-c1b1b593",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]},[[2,"click","handleClick"]]]]],["p-85f4399b",[[0,"ifx-select",{"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"showSearch":[4,"show-search"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"disabled":[4],"placeholderValue":[1,"placeholder-value"],"options":[1025],"size":[1],"selectedOption":[32],"optionIsSelected":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"ajax":[64],"handleDeleteIcon":[64]},[[5,"mousedown","handleOutsideClick"]],{"disabled":["watchDisabled"]}]]],["p-ad3db607",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]],[1,"ifx-chip",{"placeholder":[1],"size":[1],"value":[1025],"variant":[1],"readOnly":[4,"read-only"],"AriaLabel":[1,"aria-label"],"opened":[32],"selectedOptions":[32]},[[5,"mousedown","closeDropdownOnOutsideClick"],[0,"keydown","handleKeyDown"],[0,"ifxChipItemSelect","updateSelectedOptions"]],{"value":["handleValueChange"],"readOnly":["handleReadOnlyChange"]}],[1,"ifx-chip-item",{"value":[1],"chipState":[16],"selected":[1540]},[[16,"ifxChipItemSelect","updateItemSelection"]],{"selected":["validateSelected"]}]]],["p-ce413596",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"fullWidth":[4,"full-width"],"AriaLabel":[1,"aria-label"],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"],[2,"click","handleHostClick"]],{"href":["setInternalHref"]}]]],["p-e66c33ea",[[1,"ifx-link",{"href":[1],"target":[1],"variant":[1],"size":[1],"disabled":[4],"internalHref":[32],"internalTarget":[32],"internalVariant":[32]}]]],["p-5c6d5571",[[1,"ifx-number-indicator",{"inverted":[4]}]]]]'),e)}));
|
|
1
|
+
import{p as e,H as t,b as a}from"./p-6b122987.js";export{s as setNonce}from"./p-6b122987.js";import{g as i}from"./p-e1255160.js";var n=()=>{{o(t.prototype)}const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};var o=e=>{const t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}const a=t.call(this,false);const i=this.childNodes;if(e){for(let e=0;e<i.length;e++){if(i[e].nodeType!==2){a.appendChild(i[e].cloneNode(true))}}}return a}};n().then((async e=>{await i();return a(JSON.parse('[["p-00d6e46e",[[1,"ifx-table",{"cols":[8],"rows":[8],"buttonRendererOptions":[16],"rowHeight":[1,"row-height"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"filterOrientation":[1,"filter-orientation"],"showLoading":[4,"show-loading"],"currentPage":[32],"rowData":[32],"colData":[32],"filterOptions":[32],"currentFilters":[32],"uniqueKey":[32],"showSidebarFilters":[32],"matchingResultsCount":[32],"onBtShowLoading":[64]},[[0,"ifxChipChange","handleChipChange"]],{"buttonRendererOptions":["onButtonRendererOptionsChanged"]}]]],["p-189c89c3",[[1,"ifx-set-filter",{"filterName":[1,"filter-name"],"filterLabel":[1,"filter-label"],"placeholder":[1],"type":[1],"options":[1],"filterValues":[32]}]]],["p-8a497a15",[[1,"ifx-faq"]]],["p-53f2ab7f",[[1,"ifx-list-entry",{"value":[1028],"label":[1],"type":[1]},[[0,"ifxChange","handleFilterEntryChange"]],{"value":["valueChanged"]}]]],["p-18f5a5e3",[[1,"ifx-overview-table"]]],["p-379a2090",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-a2d7c880",[[1,"ifx-filter-accordion",{"maxVisibleItems":[2,"max-visible-items"],"filterGroupName":[1,"filter-group-name"],"expanded":[32],"count":[32],"totalItems":[32]}]]],["p-c80f9282",[[1,"ifx-filter-bar",{"maxShownFilters":[2,"max-shown-filters"],"showMoreFiltersButton":[4,"show-more-filters-button"],"selectedOptions":[32],"showAllFilters":[32],"visibleSlots":[32]}]]],["p-32510d11",[[1,"ifx-filter-search",{"filterName":[1,"filter-name"],"disabled":[4],"filterValue":[1025,"filter-value"],"filterKey":[1,"filter-key"],"filterOrientation":[1,"filter-orientation"],"placeholder":[1],"showDeleteIcon":[32]},[[0,"ifxInput","handleFilterSearchChange"]],{"value":["valueChanged"]}]]],["p-466fea81",[[1,"ifx-list",{"name":[1],"maxVisibleItems":[2,"max-visible-items"],"type":[1],"resetTrigger":[1028,"reset-trigger"],"expanded":[32],"showMore":[32],"selectedCount":[32],"totalItems":[32],"internalResetTrigger":[32]},null,{"type":["handleTypeChange"],"resetTrigger":["resetTriggerChanged"]}]]],["p-bc8a4226",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"size":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showCloseButton":[4,"show-close-button"],"showModal":[32],"slotButtonsPresent":[32]},null,{"opened":["openedChanged"]}]]],["p-775d187b",[[1,"ifx-notification",{"icon":[1],"variant":[1],"linkText":[1,"link-text"],"linkHref":[1,"link-href"],"linkTarget":[1,"link-target"]}]]],["p-9481adc8",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"maxlength":[2],"internalState":[32],"onNavbarMobile":[64]},null,{"isOpen":["handlePropChange"]}]]],["p-436babb8",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"numberIndicator":[1,"number-indicator"],"active":[4],"isActionItem":[4,"is-action-item"],"value":[1],"handleItemClick":[16],"hasIcon":[32],"hasIconWrapper":[32],"internalHref":[32],"isExpandable":[32],"isNested":[32],"isSubMenuItem":[32],"internalActiveState":[32],"setActiveClasses":[64],"expandMenu":[64],"isItemExpandable":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"]}]]],["p-db09429f",[[1,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4],"AriaLive":[1,"aria-live"],"uniqueId":[32]}]]],["p-7bef9272",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-c82d6a95",[[65,"ifx-date-picker",{"size":[1],"error":[4],"success":[4],"disabled":[4],"AriaLabel":[1,"aria-label"],"value":[1],"max":[1],"min":[1],"required":[4],"label":[1],"caption":[1]}]]],["p-27a52d0b",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-fbd9e58e",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-91f91586",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"logoHref":[1,"logo-href"],"logoHrefTarget":[1,"logo-href-target"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32],"internalLogoHref":[32],"internalLogoHrefTarget":[32]},[[0,"ifxNavItem","clearFirstLayerMenu"],[0,"ifxSearchBarIsOpen","handleSearchBarToggle"]]]]],["p-caff080b",[[1,"ifx-navbar-item",{"showLabel":[4,"show-label"],"icon":[1],"href":[1],"target":[1],"hideOnMobile":[4,"hide-on-mobile"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"isSidebarMenuItem":[32],"itemPosition":[32],"hideComponent":[64],"showComponent":[64],"toggleChildren":[64],"moveChildComponentsIntoSubLayerMenu":[64],"toggleFirstLayerItem":[64],"addMenuItemClass":[64],"moveChildComponentsBackIntoNavbar":[64],"returnToFirstLayer":[64],"setMenuItemPosition":[64],"setItemSideSpecifications":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-0a011c63",[[1,"ifx-segment",{"icon":[1],"segmentIndex":[2,"segment-index"],"selected":[1028],"value":[1]}]]],["p-f8d7bbe2",[[1,"ifx-segmented-control",{"caption":[1],"label":[1],"size":[1]},[[0,"segmentSelect","onSegmentSelect"]]]]],["p-7fa8ccd3",[[1,"ifx-slider",{"min":[2],"max":[2],"step":[2],"value":[2],"minValueHandle":[2,"min-value-handle"],"maxValueHandle":[2,"max-value-handle"],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"type":[1],"internalValue":[32],"percentage":[32],"internalMinValue":[32],"internalMaxValue":[32]},null,{"value":["valueChanged"],"minValueHandle":["minValueChanged"],"maxValueHandle":["maxValueChanged"]}]]],["p-c5daebfa",[[1,"ifx-step",{"complete":[4],"disabled":[4],"error":[1028],"lastStep":[4,"last-step"],"stepId":[2,"step-id"],"stepperState":[16],"active":[32],"clickable":[32]},[[4,"ifxChange","onStepChange"]],{"stepperState":["updateCurrentStep"],"active":["updateErrorState"]}]]],["p-89c7209f",[[1,"ifx-tabs",{"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"fullWidth":[4,"full-width"],"internalOrientation":[32],"internalActiveTabIndex":[32],"internalFocusedTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"disabledTabs":[32],"tabObjects":[32]},[[9,"resize","updateBorderOnWindowResize"],[0,"tabHeaderChange","handleTabHeaderChange"],[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-6c5f0f7b",[[1,"ifx-tag",{"icon":[1]}]]],["p-d101e5a0",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-51980b19",[[1,"ifx-badge"]]],["p-366148e2",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"rowHeight":[1,"row-height"],"tableHeight":[1,"table-height"],"gridOptions":[32],"columnDefs":[32],"rowData":[32],"uniqueKey":[32]}]]],["p-28fb795b",[[1,"ifx-breadcrumb"]]],["p-0c4276df",[[1,"ifx-breadcrumb-item",{"isLastItem":[32],"uniqueId":[32],"hasDropdownMenu":[32]},[[5,"mousedown","handleOutsideClick"],[0,"keydown","handleKeyDown"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-1aed7d45",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"AriaLabel":[1,"aria-label"],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-f0052c72",[[1,"ifx-card-headline",{"direction":[32],"hasDesc":[32]}]]],["p-51c4e760",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-34fb9dca",[[1,"ifx-card-links"]]],["p-680f8e2c",[[1,"ifx-card-overline"]]],["p-58966086",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-bddc382a",[[1,"ifx-content-switcher",{"items":[32],"activeIndex":[32],"hoverIndex":[32],"focusIndex":[32],"dividers":[32]}]]],["p-4b21c0e6",[[1,"ifx-content-switcher-item",{"selected":[4],"value":[1]}]]],["p-eb8ba37f",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-ee39e4ce",[[1,"ifx-dropdown-header"]]],["p-584149bd",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-6ae18c50",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-35d0daa5",[[1,"ifx-filter-type-group",{"selectedOptions":[32]}]]],["p-8969f1e4",[[1,"ifx-footer",{"copyrightText":[1,"copyright-text"],"currentYear":[32]}]]],["p-a8ccf376",[[1,"ifx-footer-column"]]],["p-3b99fb06",[[1,"ifx-navbar-profile",{"showLabel":[4,"show-label"],"href":[1],"imageUrl":[1,"image-url"],"target":[1],"alt":[1],"userName":[1,"user-name"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"internalImageUrl":[32],"hideComponent":[64],"showComponent":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-c34f5517",[[1,"ifx-progress-bar",{"value":[2],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-3c5a8615",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"initialCollapse":[4,"initial-collapse"],"showFooter":[4,"show-footer"],"showHeader":[4,"show-header"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"copyrightText":[1,"copyright-text"],"currentYear":[32],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"internalShowFooter":[32],"activeItem":[32]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]]]]],["p-b5a3fad1",[[1,"ifx-sidebar-title"]]],["p-4fab3a1e",[[1,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4]}]]],["p-499dba27",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-44b2cbe1",[[1,"ifx-stepper",{"activeStep":[1026,"active-step"],"indicatorPosition":[1,"indicator-position"],"showStepNumber":[4,"show-step-number"],"variant":[1],"stepsCount":[32],"shouldEmitEvent":[32],"emittedByClick":[32]},[[0,"ifxChange","onStepChange"]],{"activeStep":["handleActiveStep"]}]]],["p-030a5b46",[[65,"ifx-switch",{"checked":[4],"name":[1],"disabled":[4],"value":[1],"internalChecked":[32],"isChecked":[64]},null,{"checked":["valueChanged"]}]]],["p-9ee328a5",[[4,"ifx-tab",{"header":[1],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"]}]]],["p-7f59e05a",[[65,"ifx-textarea",{"caption":[1],"cols":[2],"disabled":[4],"error":[4],"label":[1],"maxlength":[2],"name":[1],"placeholder":[1],"readOnly":[4,"read-only"],"resize":[1],"rows":[2],"value":[1025],"wrap":[1],"reset":[64]}]]],["p-a116e0d2",[[4,"ifx-radio-button",{"disabled":[4],"value":[1],"error":[4],"size":[1],"name":[1],"checked":[4],"internalChecked":[32],"hasSlot":[32],"inputElement":[32],"isChecked":[64]},[[8,"change","handleChange"]]]]],["p-32fc3ce3",[[1,"ifx-dropdown-separator"]]],["p-6389a7b8",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-d52e5250",[[65,"ifx-checkbox",{"disabled":[4],"checked":[4],"error":[4],"size":[1],"indeterminate":[4],"value":[1],"internalChecked":[32],"internalIndeterminate":[32],"isChecked":[64],"toggleCheckedState":[64]},null,{"checked":["valueChanged"],"indeterminate":["indeterminateChanged"]}]]],["p-dc7deb14",[[65,"ifx-multiselect",{"name":[1],"options":[1],"batchSize":[2,"batch-size"],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"showSearch":[4,"show-search"],"showSelectAll":[4,"show-select-all"],"internalError":[32],"internalErrorMessage":[32],"persistentSelectedOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32],"optionCount":[32],"optionsProcessed":[32]},null,{"options":["updateOptions"],"error":["updateInternalError"],"errorMessage":["updateInternalErrorMessage"],"loadedOptions":["loadedOptionsChanged"],"persistentSelectedOptions":["onSelectionChange"]}],[65,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"maxlength":[2],"showDeleteIcon":[4,"show-delete-icon"],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-222c1af9",[[1,"ifx-accordion-item",{"caption":[1],"open":[1028],"AriaLive":[2,"aria-live"],"internalOpen":[32]},[[0,"keydown","handleKeydown"]],{"open":["openChanged"]}],[17,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-6fdc1a34",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"placeholder":[1],"maxlength":[2],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-c1b1b593",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]},[[2,"click","handleClick"]]]]],["p-85f4399b",[[0,"ifx-select",{"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"showSearch":[4,"show-search"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"disabled":[4],"placeholderValue":[1,"placeholder-value"],"options":[1025],"size":[1],"selectedOption":[32],"optionIsSelected":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"ajax":[64],"handleDeleteIcon":[64]},[[5,"mousedown","handleOutsideClick"]],{"disabled":["watchDisabled"]}]]],["p-ad3db607",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]],[1,"ifx-chip",{"placeholder":[1],"size":[1],"value":[1025],"variant":[1],"readOnly":[4,"read-only"],"AriaLabel":[1,"aria-label"],"opened":[32],"selectedOptions":[32]},[[5,"mousedown","closeDropdownOnOutsideClick"],[0,"keydown","handleKeyDown"],[0,"ifxChipItemSelect","updateSelectedOptions"]],{"value":["handleValueChange"],"readOnly":["handleReadOnlyChange"]}],[1,"ifx-chip-item",{"value":[1],"chipState":[16],"selected":[1540]},[[16,"ifxChipItemSelect","updateItemSelection"]],{"selected":["validateSelected"]}]]],["p-ce413596",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"fullWidth":[4,"full-width"],"AriaLabel":[1,"aria-label"],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"],[2,"click","handleHostClick"]],{"href":["setInternalHref"]}]]],["p-e66c33ea",[[1,"ifx-link",{"href":[1],"target":[1],"variant":[1],"size":[1],"disabled":[4],"internalHref":[32],"internalTarget":[32],"internalVariant":[32]}]]],["p-5c6d5571",[[1,"ifx-number-indicator",{"inverted":[4]}]]]]'),e)}));
|
|
2
2
|
//# sourceMappingURL=infineon-design-system-stencil.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as o,c as r,h as t,g as e}from"./p-6b122987.js";const i=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as o,c as r,h as t,g as e}from"./p-6b122987.js";const i=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}';const a=i;const n=class{constructor(t){o(this,t);this.ifxChange=r(this,"ifxChange",7);this.disabled=false;this.value=undefined;this.error=false;this.size="s";this.name=undefined;this.checked=undefined;this.internalChecked=false;this.hasSlot=true;this.inputElement=undefined}async isChecked(){return this.internalChecked}componentWillLoad(){if(this.checked)this.internalChecked=this.checked;const o=this.el.innerHTML;if(o){this.hasSlot=true}else this.hasSlot=false}handleRadioButtonClick(o){if(this.disabled){o.stopPropagation();return}this.inputElement.click();this.internalChecked=this.inputElement.checked;this.ifxChange.emit(this.internalChecked)}handleChange(o){const r=o.target;if(r.name===this.name){this.internalChecked=this.inputElement.checked}}render(){return t("div",{key:"7b5291f95e3fc00c0ceb9285c57ca440b1a8939f","aria-label":"a radio button","aria-value":this.value,"aria-disabled":this.disabled,class:`radioButton__container ${this.size} ${this.disabled?"disabled":""}`,onClick:this.handleRadioButtonClick.bind(this)},t("div",{key:"5efda77550a294da34c4f72c4558e312690f9cd9",class:`radioButton__wrapper \n ${this.internalChecked?"checked":""} \n ${this.disabled?"disabled":""} \n ${this.error?"error":""}`,tabIndex:this.disabled?-1:0},this.internalChecked&&t("div",{key:"2b1a814830a361021a812016d770d7838dca05fe",class:"radioButton__wrapper-mark"})),this.hasSlot&&t("div",{key:"61911033a487c6396c1c34b35f13f04cf84ea602",class:`label ${this.size==="m"?"label-m":""} ${this.disabled?"disabled":""}`},t("slot",{key:"7f1b40289cdd67a4fbc2e4677da03e22cdfa758c"})),t("input",{key:"f77c2d84f409e3875798370a06cbc744385e5655",type:"radio",hidden:true,ref:o=>this.inputElement=o,name:this.name,value:this.value,checked:this.internalChecked,disabled:this.disabled,onClick:o=>o.stopPropagation()}))}get el(){return e(this)}};n.style=a;export{n as ifx_radio_button};
|
|
2
|
+
//# sourceMappingURL=p-a116e0d2.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["radioButtonCss","IfxRadioButtonStyle0","RadioButton","isChecked","this","internalChecked","componentWillLoad","checked","slot","el","innerHTML","hasSlot","handleRadioButtonClick","event","disabled","stopPropagation","inputElement","click","ifxChange","emit","handleChange","target","name","render","h","key","value","class","size","onClick","bind","error","tabIndex","type","hidden","ref","e"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.radioButton__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n\n &.m .radioButton__wrapper {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n\n .radioButton__wrapper {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n position: relative;\n display: block;\n border-radius: 50%;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n\n &:focus {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n }\n\n .radioButton__wrapper-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #0A8276;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: tokens.$ifxColorBaseTransparent;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n\n &.error {\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n &.checked {\n border-color: #0A8276;\n\n &::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: #0A8276;\n border-radius: 50%;\n }\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n\n &:hover {\n border-color: tokens.$ifxColorOcean600;\n\n & .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorOcean600;\n }\n }\n\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border-color: #BFBBBB;\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n & .radioButton__wrapper-mark {\n background-color: #BFBBBB;\n }\n }\n }\n\n &.error:not(.disabled) {\n border-color: #CD002F;\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n .label {\n display: flex;\n align-items: center;\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n\n\n\n &:hover {\n cursor: pointer;\n }\n }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Method } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: false,\n formAssociated: false\n})\nexport class RadioButton {\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop() size: \"s\" | \"m\" = \"s\";\n @Prop() name: string;\n @Prop() checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = true;\n\n @State() inputElement: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n /**\n * @returns whether the radio button is checked.\n */\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n \n componentWillLoad() {\n if (this.checked) this.internalChecked = this.checked;\n const slot = this.el.innerHTML;\n if (slot) {\n this.hasSlot = true;\n } else this.hasSlot = false;\n }\n\n\n /**\n * Click the hidden input element to let it handle the state\n * and emit ifxChange event.\n */\n handleRadioButtonClick(event: PointerEvent) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.ifxChange.emit(this.internalChecked);\n }\n\n /**\n * Listen to all change events.\n * Needed to get informed when another button of the group gets chcked \n * and this one needs to become unchecked. \n * \n * @param event \n */\n @Listen('change', { target: 'window' }) \n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n if (target.name === this.name) {\n this.internalChecked = this.inputElement.checked;\n }\n }\n\n render() {\n return (\n <div\n aria-label='a radio button' aria-value={this.value} aria-disabled={this.disabled}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={this.handleRadioButtonClick.bind(this)}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.disabled ? 'disabled' : ''} \n ${this.error ? 'error' : ''}`}\n tabIndex={this.disabled ? -1 : 0}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n <slot />\n </div>\n )}\n <input\n type=\"radio\" \n hidden \n ref={el => this.inputElement = el as HTMLInputElement} \n name={this.name} \n value={this.value}\n checked={this.internalChecked} \n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}></input>\n </div>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,y5FACvB,MAAAC,EAAeD,E,MCQFE,EAAW,M,4EAEM,M,gCAEH,M,UACC,I,gEAGU,M,aACR,K,4BAU5B,eAAMC,GACJ,OAAOC,KAAKC,e,CAGd,iBAAAC,GACE,GAAIF,KAAKG,QAASH,KAAKC,gBAAkBD,KAAKG,QAC9C,MAAMC,EAAOJ,KAAKK,GAAGC,UACrB,GAAIF,EAAM,CACRJ,KAAKO,QAAU,I,MACVP,KAAKO,QAAU,K,CAQxB,sBAAAC,CAAuBC,GACrB,GAAIT,KAAKU,SAAU,CACjBD,EAAME,kBACN,M,CAGFX,KAAKY,aAAaC,QAClBb,KAAKC,gBAAkBD,KAAKY,aAAaT,QACzCH,KAAKc,UAAUC,KAAKf,KAAKC,gB,CAW3B,YAAAe,CAAaP,GACX,MAAMQ,EAASR,EAAMQ,OACrB,GAAIA,EAAOC,OAASlB,KAAKkB,KAAM,CAC7BlB,KAAKC,gBAAkBD,KAAKY,aAAaT,O,EAI7C,MAAAgB,GACE,OACEC,EAAA,OAAAC,IAAA,wDACa,iBAAgB,aAAarB,KAAKsB,MAAK,gBAAiBtB,KAAKU,SACxEa,MAAO,0BAA0BvB,KAAKwB,QAAQxB,KAAKU,SAAW,WAAa,KAC3Ee,QAASzB,KAAKQ,uBAAuBkB,KAAK1B,OAE1CoB,EAAA,OAAAC,IAAA,2CACEE,MAAO,oCACLvB,KAAKC,gBAAkB,UAAY,kBACnCD,KAAKU,SAAW,WAAa,kBAC7BV,KAAK2B,MAAQ,QAAU,KACzBC,SAAU5B,KAAKU,UAAY,EAAI,GAE9BV,KAAKC,iBAAmBmB,EAAA,OAAAC,IAAA,2CAAKE,MAAM,+BAErCvB,KAAKO,SACJa,EAAA,OAAAC,IAAA,2CAAKE,MAAO,SAASvB,KAAKwB,OAAS,IAAM,UAAY,MAAMxB,KAAKU,SAAW,WAAa,MACtFU,EAAA,QAAAC,IAAA,8CAGJD,EAAA,SAAAC,IAAA,2CACEQ,KAAK,QACLC,OAAM,KACNC,IAAK1B,GAAML,KAAKY,aAAeP,EAC/Ba,KAAMlB,KAAKkB,KACXI,MAAOtB,KAAKsB,MACZnB,QAASH,KAAKC,gBACdS,SAAUV,KAAKU,SACfe,QAAUO,GAAMA,EAAErB,oB","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@infineon/infineon-design-system-stencil",
|
|
3
|
-
"version": "30.9.3--canary.
|
|
3
|
+
"version": "30.9.3--canary.1703.0331e5ed94aae6786a2fd300caf7d6d06de02a1e.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Infineon design system Stencil web components",
|
|
6
6
|
"homepage": "https://infineon.github.io/infineon-design-system-stencil",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"p-f050104d.js","mappings":";;AAAA,MAAM,cAAc,GAAG,69FAA69F,CAAC;AACr/F,6BAAe,cAAc;;MCQhB,WAAW;;;;;wBAEM,KAAK;;qBAER,KAAK;oBACJ,GAAG;;;+BAGO,KAAK;uBACb,IAAI;;;;;;IAUhC,MAAM,SAAS;QACb,OAAO,IAAI,CAAC,eAAe,CAAC;KAC7B;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;QAC/B,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;;YAAM,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KAC7B;;;;;IAOD,sBAAsB,CAAC,KAAmB;QACxC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;SACR;QAED,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;QACjD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC3C;;;;;;;;IAUD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;YAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;SAClD;KACF;IAED,MAAM;QACJ,QACE,0EACa,gBAAgB,gBAAa,IAAI,CAAC,KAAK,mBAAiB,IAAI,CAAC,QAAQ,EAChF,KAAK,EAAE,0BAA0B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC/E,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,IAE/C,4DACE,KAAK,EAAE;YACL,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE;YACrC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;YAC/B,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,EAAE,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,IAE/B,IAAI,CAAC,eAAe,IAAI,4DAAK,KAAK,EAAC,2BAA2B,GAAO,CAClE,EACL,IAAI,CAAC,OAAO,KACX,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAC1F,8DAAQ,CACJ,CACP,EACD,8DACE,EAAE,EAAC,eAAe,EAClB,IAAI,EAAC,OAAO,EACZ,MAAM,QACN,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAsB,EACrD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,GAAU,CAC3C,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.radioButton__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n\n &.m .radioButton__wrapper {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n\n .radioButton__wrapper {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n position: relative;\n display: block;\n border-radius: 50%;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n\n &:focus {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n }\n\n .radioButton__wrapper-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #0A8276;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: tokens.$ifxColorBaseTransparent;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n\n &.error {\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n &.checked {\n border-color: #0A8276;\n\n &::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: #0A8276;\n border-radius: 50%;\n }\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n\n &:hover {\n border-color: tokens.$ifxColorOcean600;\n\n & .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorOcean600;\n }\n }\n\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border-color: #BFBBBB;\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n & .radioButton__wrapper-mark {\n background-color: #BFBBBB;\n }\n }\n }\n\n &.error:not(.disabled) {\n border-color: #CD002F;\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n .label {\n display: flex;\n align-items: center;\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n\n\n\n &:hover {\n cursor: pointer;\n }\n }\n}\n\n.radioButton__container {\n & #hidden__input { \n display: none!important;\n }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Method } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: false,\n formAssociated: false\n})\nexport class RadioButton {\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop() size: \"s\" | \"m\" = \"s\";\n @Prop() name: string;\n @Prop() checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = true;\n\n @State() inputElement: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n /**\n * @returns whether the radio button is checked.\n */\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n \n componentWillLoad() {\n if (this.checked) this.internalChecked = this.checked;\n const slot = this.el.innerHTML;\n if (slot) {\n this.hasSlot = true;\n } else this.hasSlot = false;\n }\n\n\n /**\n * Click the hidden input element to let it handle the state\n * and emit ifxChange event.\n */\n handleRadioButtonClick(event: PointerEvent) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.ifxChange.emit(this.internalChecked);\n }\n\n /**\n * Listen to all change events.\n * Needed to get informed when another button of the group gets chcked \n * and this one needs to become unchecked. \n * \n * @param event \n */\n @Listen('change', { target: 'window' }) \n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n if (target.name === this.name) {\n this.internalChecked = this.inputElement.checked;\n }\n }\n\n render() {\n return (\n <div\n aria-label='a radio button' aria-value={this.value} aria-disabled={this.disabled}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={this.handleRadioButtonClick.bind(this)}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.disabled ? 'disabled' : ''} \n ${this.error ? 'error' : ''}`}\n tabIndex={this.disabled ? -1 : 0}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n <slot />\n </div>\n )}\n <input\n id='hidden__input'\n type=\"radio\" \n hidden \n ref={el => this.inputElement = el as HTMLInputElement} \n name={this.name} \n value={this.value}\n checked={this.internalChecked} \n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}></input>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["radioButtonCss","IfxRadioButtonStyle0","RadioButton","isChecked","this","internalChecked","componentWillLoad","checked","slot","el","innerHTML","hasSlot","handleRadioButtonClick","event","disabled","stopPropagation","inputElement","click","ifxChange","emit","handleChange","target","name","render","h","key","value","class","size","onClick","bind","error","tabIndex","id","type","hidden","ref","e"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.radioButton__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n cursor: pointer;\n font-family: var(--ifx-font-family);\n\n &.m .radioButton__wrapper {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n\n .radioButton__wrapper {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n position: relative;\n display: block;\n border-radius: 50%;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n\n &:focus {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n }\n\n .radioButton__wrapper-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #0A8276;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: tokens.$ifxColorBaseTransparent;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n\n &.error {\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n &.checked {\n border-color: #0A8276;\n\n &::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: #0A8276;\n border-radius: 50%;\n }\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n\n &:hover {\n border-color: tokens.$ifxColorOcean600;\n\n & .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorOcean600;\n }\n }\n\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border-color: #BFBBBB;\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n & .radioButton__wrapper-mark {\n background-color: #BFBBBB;\n }\n }\n }\n\n &.error:not(.disabled) {\n border-color: #CD002F;\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n .label {\n display: flex;\n align-items: center;\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n\n\n\n &:hover {\n cursor: pointer;\n }\n }\n}\n\n.radioButton__container {\n & #hidden__input { \n display: none!important;\n }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Method } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: false,\n formAssociated: false\n})\nexport class RadioButton {\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop() size: \"s\" | \"m\" = \"s\";\n @Prop() name: string;\n @Prop() checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = true;\n\n @State() inputElement: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n /**\n * @returns whether the radio button is checked.\n */\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n \n componentWillLoad() {\n if (this.checked) this.internalChecked = this.checked;\n const slot = this.el.innerHTML;\n if (slot) {\n this.hasSlot = true;\n } else this.hasSlot = false;\n }\n\n\n /**\n * Click the hidden input element to let it handle the state\n * and emit ifxChange event.\n */\n handleRadioButtonClick(event: PointerEvent) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.ifxChange.emit(this.internalChecked);\n }\n\n /**\n * Listen to all change events.\n * Needed to get informed when another button of the group gets chcked \n * and this one needs to become unchecked. \n * \n * @param event \n */\n @Listen('change', { target: 'window' }) \n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n if (target.name === this.name) {\n this.internalChecked = this.inputElement.checked;\n }\n }\n\n render() {\n return (\n <div\n aria-label='a radio button' aria-value={this.value} aria-disabled={this.disabled}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={this.handleRadioButtonClick.bind(this)}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.disabled ? 'disabled' : ''} \n ${this.error ? 'error' : ''}`}\n tabIndex={this.disabled ? -1 : 0}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n <slot />\n </div>\n )}\n <input\n id='hidden__input'\n type=\"radio\" \n hidden \n ref={el => this.inputElement = el as HTMLInputElement} \n name={this.name} \n value={this.value}\n checked={this.internalChecked} \n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}></input>\n </div>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,w9FACvB,MAAAC,EAAeD,E,MCQFE,EAAW,M,4EAEM,M,gCAEH,M,UACC,I,gEAGU,M,aACR,K,4BAU5B,eAAMC,GACJ,OAAOC,KAAKC,e,CAGd,iBAAAC,GACE,GAAIF,KAAKG,QAASH,KAAKC,gBAAkBD,KAAKG,QAC9C,MAAMC,EAAOJ,KAAKK,GAAGC,UACrB,GAAIF,EAAM,CACRJ,KAAKO,QAAU,I,MACVP,KAAKO,QAAU,K,CAQxB,sBAAAC,CAAuBC,GACrB,GAAIT,KAAKU,SAAU,CACjBD,EAAME,kBACN,M,CAGFX,KAAKY,aAAaC,QAClBb,KAAKC,gBAAkBD,KAAKY,aAAaT,QACzCH,KAAKc,UAAUC,KAAKf,KAAKC,gB,CAW3B,YAAAe,CAAaP,GACX,MAAMQ,EAASR,EAAMQ,OACrB,GAAIA,EAAOC,OAASlB,KAAKkB,KAAM,CAC7BlB,KAAKC,gBAAkBD,KAAKY,aAAaT,O,EAI7C,MAAAgB,GACE,OACEC,EAAA,OAAAC,IAAA,wDACa,iBAAgB,aAAarB,KAAKsB,MAAK,gBAAiBtB,KAAKU,SACxEa,MAAO,0BAA0BvB,KAAKwB,QAAQxB,KAAKU,SAAW,WAAa,KAC3Ee,QAASzB,KAAKQ,uBAAuBkB,KAAK1B,OAE1CoB,EAAA,OAAAC,IAAA,2CACEE,MAAO,oCACLvB,KAAKC,gBAAkB,UAAY,kBACnCD,KAAKU,SAAW,WAAa,kBAC7BV,KAAK2B,MAAQ,QAAU,KACzBC,SAAU5B,KAAKU,UAAY,EAAI,GAE9BV,KAAKC,iBAAmBmB,EAAA,OAAAC,IAAA,2CAAKE,MAAM,+BAErCvB,KAAKO,SACJa,EAAA,OAAAC,IAAA,2CAAKE,MAAO,SAASvB,KAAKwB,OAAS,IAAM,UAAY,MAAMxB,KAAKU,SAAW,WAAa,MACtFU,EAAA,QAAAC,IAAA,8CAGJD,EAAA,SAAAC,IAAA,2CACEQ,GAAG,gBACHC,KAAK,QACLC,OAAM,KACNC,IAAK3B,GAAML,KAAKY,aAAeP,EAC/Ba,KAAMlB,KAAKkB,KACXI,MAAOtB,KAAKsB,MACZnB,QAASH,KAAKC,gBACdS,SAAUV,KAAKU,SACfe,QAAUQ,GAAMA,EAAEtB,oB","ignoreList":[]}
|