npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.13.0 → 30.14.0--canary.1702.6f18411c74e90931047649b364aab54e4f74cf6a.0 - Mend

@infineon/infineon-design-system-stencil 30.13.0 → 30.14.0--canary.1702.6f18411c74e90931047649b364aab54e4f74cf6a.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.

Files changed (26) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "30.13.0",
+  "version": "30.14.0--canary.1702.6f18411c74e90931047649b364aab54e4f74cf6a.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

package/dist/components/p-91f2864c.js DELETED Viewed

@@ -1,95 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-3ee20ed5.js';
-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}";
-const IfxRadioButtonStyle0 = radioButtonCss;
-const RadioButton = /*@__PURE__*/ proxyCustomElement(class RadioButton extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.ifxChange = createEvent(this, "ifxChange", 7);
-        this.disabled = false;
-        this.error = false;
-        this.size = "s";
-        this.internalChecked = false;
-        this.hasSlot = true;
-    }
-    /**
-     * @returns whether the radio button is checked.
-     */
-    async isChecked() {
-        return this.internalChecked;
-    }
-    componentWillLoad() {
-        if (this.checked)
-            this.internalChecked = this.checked;
-        const slot = this.el.innerHTML;
-        if (slot) {
-            this.hasSlot = true;
-        }
-        else
-            this.hasSlot = false;
-    }
-    /**
-     * Click the hidden input element to let it handle the state
-     * and emit ifxChange event.
-     */
-    handleRadioButtonClick(event) {
-        if (this.disabled) {
-            event.stopPropagation();
-            return;
-        }
-        this.inputElement.click();
-        this.internalChecked = this.inputElement.checked;
-        this.ifxChange.emit(this.internalChecked);
-    }
-    /**
-     * Listen to all change events.
-     * Needed to get informed when another button of the group gets chcked
-     * and this one needs to become unchecked.
-     *
-     * @param event
-     */
-    handleChange(event) {
-        const target = event.target;
-        if (target.name === this.name) {
-            this.internalChecked = this.inputElement.checked;
-        }
-    }
-    render() {
-        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
-          ${this.internalChecked ? 'checked' : ''}
-          ${this.disabled ? 'disabled' : ''}
-          ${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() })));
-    }
-    get el() { return this; }
-    static get style() { return IfxRadioButtonStyle0; }
-}, [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"]]]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ifx-radio-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ifx-radio-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, RadioButton);
-            }
-            break;
-    } });
-}
-export { RadioButton as R, defineCustomElement as d };
-//# sourceMappingURL=p-91f2864c.js.map

package/dist/components/p-91f2864c.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"p-91f2864c.js","mappings":";;AAAA,MAAM,cAAc,GAAG,85FAA85F,CAAC;AACt7F,6BAAe,cAAc;;MCQhB,WAAW;IANxB;;;;QAQU,aAAQ,GAAY,KAAK,CAAC;QAE1B,UAAK,GAAY,KAAK,CAAC;QACvB,SAAI,GAAc,GAAG,CAAC;QAGrB,oBAAe,GAAY,KAAK,CAAC;QACjC,YAAO,GAAY,IAAI,CAAC;KAsFlC;;;;IA5EC,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}

package/dist/infineon-design-system-stencil/p-fba11471.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as o,c as r,h as t,g as e}from"./p-e244bae4.js";const a=':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 i=a;const n=class{constructor(t){o(this,t);this.ifxChange=r(this,"ifxChange",7);this.disabled=false;this.error=false;this.size="s";this.internalChecked=false;this.hasSlot=true}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=i;export{n as ifx_radio_button};
2	- //# sourceMappingURL=p-fba11471.entry.js.map

package/dist/infineon-design-system-stencil/p-fba11471.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["radioButtonCss","IfxRadioButtonStyle0","RadioButton","constructor","hostRef","this","disabled","error","size","internalChecked","hasSlot","isChecked","componentWillLoad","checked","slot","el","innerHTML","handleRadioButtonClick","event","stopPropagation","inputElement","click","ifxChange","emit","handleChange","target","name","render","h","key","value","class","onClick","bind","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,MANxB,WAAAC,CAAAC,G,+CAQUC,KAAAC,SAAoB,MAEpBD,KAAAE,MAAiB,MACjBF,KAAAG,KAAkB,IAGjBH,KAAAI,gBAA2B,MAC3BJ,KAAAK,QAAmB,I,CAU5B,eAAMC,GACJ,OAAON,KAAKI,e,CAGd,iBAAAG,GACE,GAAIP,KAAKQ,QAASR,KAAKI,gBAAkBJ,KAAKQ,QAC9C,MAAMC,EAAOT,KAAKU,GAAGC,UACrB,GAAIF,EAAM,CACRT,KAAKK,QAAU,I,MACVL,KAAKK,QAAU,K,CAQxB,sBAAAO,CAAuBC,GACrB,GAAIb,KAAKC,SAAU,CACjBY,EAAMC,kBACN,M,CAGFd,KAAKe,aAAaC,QAClBhB,KAAKI,gBAAkBJ,KAAKe,aAAaP,QACzCR,KAAKiB,UAAUC,KAAKlB,KAAKI,gB,CAW3B,YAAAe,CAAaN,GACX,MAAMO,EAASP,EAAMO,OACrB,GAAIA,EAAOC,OAASrB,KAAKqB,KAAM,CAC7BrB,KAAKI,gBAAkBJ,KAAKe,aAAaP,O,EAI7C,MAAAc,GACE,OACEC,EAAA,OAAAC,IAAA,wDACa,iBAAgB,aAAaxB,KAAKyB,MAAK,gBAAiBzB,KAAKC,SACxEyB,MAAO,0BAA0B1B,KAAKG,QAAQH,KAAKC,SAAW,WAAa,KAC3E0B,QAAS3B,KAAKY,uBAAuBgB,KAAK5B,OAE1CuB,EAAA,OAAAC,IAAA,2CACEE,MAAO,oCACL1B,KAAKI,gBAAkB,UAAY,kBACnCJ,KAAKC,SAAW,WAAa,kBAC7BD,KAAKE,MAAQ,QAAU,KACzB2B,SAAU7B,KAAKC,UAAY,EAAI,GAE9BD,KAAKI,iBAAmBmB,EAAA,OAAAC,IAAA,2CAAKE,MAAM,+BAErC1B,KAAKK,SACJkB,EAAA,OAAAC,IAAA,2CAAKE,MAAO,SAAS1B,KAAKG,OAAS,IAAM,UAAY,MAAMH,KAAKC,SAAW,WAAa,MACtFsB,EAAA,QAAAC,IAAA,8CAGJD,EAAA,SAAAC,IAAA,2CACEM,KAAK,QACLC,OAAM,KACNC,IAAKtB,GAAMV,KAAKe,aAAeL,EAC/BW,KAAMrB,KAAKqB,KACXI,MAAOzB,KAAKyB,MACZjB,QAASR,KAAKI,gBACdH,SAAUD,KAAKC,SACf0B,QAAUM,GAAMA,EAAEnB,oB","ignoreList":[]}