@postnord/web-components/components/pn-radio-button.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as i,proxyCustomElement as o,Mixin as t,h as e,Host as n}from"@stencil/core/internal/client";import{u as a}from"./helpers.js";import{a as r}from"./index2.js";import{d}from"./pn-icon2.js";const p=o(class extends(t(r)){constructor(i){super(!1),!1!==i&&this.__registerHost()}id="pn-radio-"+a();idHelpertext=this.id+"-helpertext";contentArea;radioInput;get hostElement(){return this}label;helpertext;value;name;checked=!1;radioid=this.id;required=!1;disabled=!1;invalid=!1;tile=!1;expand=!1;icon=null;handleId(){this.idHelpertext=this.radioid+"-helpertext"}handleChecked(i){this.checked=i??this.radioInput.checked,this.displayContent()&&(this.checked?(this.openDropdown(this.contentArea),this.uncheckOtherRadios()):this.closeDropdown(this.contentArea))}handleChange(i){const o=i.target,{name:t}=o;t===this.name&&(this.checked=o===this.radioInput&&o.checked)}componentWillLoad(){this.handleId()}componentDidLoad(){requestAnimationFrame((()=>this.displayContent()&&this.checked&&this.openDropdown(this.contentArea)))}uncheckOtherRadios(){if(!this.name)return;const i=document.querySelectorAll(`pn-radio-button[name="${this.name}"]`);Array.from(i).forEach((i=>i!==this.hostElement&&(i.checked=!1)))}isInvalid(){return this.invalid&&!this.disabled}displayText(){return this.displayLabel()||this.displayHelpertext()}displayLabel(){return!!this.label}displayHelpertext(){return!(!this.helpertext&&!this.hostElement.querySelector('[slot="helpertext"]')?.textContent)}displayIcon(){return this.tile&&!!this.icon}displayContent(){return this.tile&&this.expand}render(){return e(n,{key:"f386b0de0377d3dbe6891a2396d32b91a808d53c"},e("input",{key:"189e352a198275f4dbd733425166e9cb2ed417ef",type:"radio",id:this.radioid,class:"pn-radio-input",value:this.value,name:this.name,disabled:this.disabled,checked:this.checked,required:this.required,"aria-invalid":this.isInvalid()?.toString(),"aria-describedby":this.displayHelpertext()?this.idHelpertext:null,"data-tile":this.tile,"data-expand":this.expand,ref:i=>this.radioInput=i}),e("div",{key:"710dcfe5b1660d25a9d98eb2c3739eb092f2ab4e",class:"pn-radio","data-tile":this.tile,"data-expand":this.expand,"data-invalid":this.isInvalid()},e("div",{key:"2d6bd1b03ee6565b88773c60a529ae2c5be89ffd",class:"pn-radio-button"},e("div",{key:"8b15488acb65132b2498d361d320bb804af793de",class:"pn-radio-outer"},e("div",{key:"64ebbe9b4d18f158a43bb5d82116ef4b19325ca1",class:"pn-radio-inner"}))),e("p",{key:"3b5ed02eeae60cff45b3b4999055c6d853a6c22f",class:"pn-radio-content",hidden:!this.displayText()},e("label",{key:"d5f3c5f59630407a45cc48fcb26e60fe7419c73c",htmlFor:this.radioid,class:"pn-radio-label",hidden:!this.displayLabel()},this.label),e("span",{key:"d4329417f178f6e7bcff365a1c051ebaa51b0447",id:this.idHelpertext,class:"pn-radio-helpertext",hidden:!this.displayHelpertext()},this.helpertext,e("slot",{key:"defddc5970a0ea4c94c4f7b07e2cec3e7616d8c2",name:"helpertext"})),e("slot",{key:"edaaf37351bb5d05bdc92696ac9ee2c8bc8e13f7"})),this.displayIcon()&&e("pn-icon",{key:"b9cd0ab07c691020efe39e8bb6ec39d02d5be826",icon:this.icon,color:"gray900"}),e("div",{key:"89655e67304498950e11c0388fddbbde350239a1",class:"pn-radio-container","data-open":this.checked,hidden:!this.displayContent(),style:{height:"0px"},ref:i=>this.contentArea=i},e("div",{key:"eeebaf7c0b1fe8327810faec62877888cb6ff95d",class:"pn-radio-area"},e("slot",{key:"c997ee7e8ef719ff4b830df30a414cea637a54ff",name:"content"})))))}static get watchers(){return{radioid:[{handleId:0}],checked:[{handleChecked:0}]}}static get style(){return`${i("pn-radio-button")}{position:relative;display:inline-block}${i("pn-radio-button")} .pn-radio{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}${i("pn-radio-button")} .pn-radio-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}${i("pn-radio-button")} .pn-radio-helpertext{color:#5e554a;margin:0 0 0.5em 0}${i("pn-radio-button")} .pn-radio-helpertext:last-child{margin:0}${i("pn-radio-button")} .pn-radio-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}${i("pn-radio-button")} .pn-radio-button{display:flex;gap:0.75em;padding:0}${i("pn-radio-button")} .pn-radio-outer{background-color:#ffffff;border:0.0625em solid #969087;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio-outer{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio-inner{height:0.75em;width:0.75em;background-color:#005d92;border-radius:50%;transform:scale(0);transform-origin:center center;transition-property:background-color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio-inner{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio[data-tile]{padding:1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio[data-tile]{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio[data-tile] .pn-radio-outer{outline:none}${i("pn-radio-button")} .pn-radio[data-invalid]{border-color:#a70707}${i("pn-radio-button")} .pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707}${i("pn-radio-button")} .pn-radio[data-invalid] .pn-radio-inner{background-color:#a70707}${i("pn-radio-button")} .pn-radio-container{flex:1 1 100%;overflow:hidden;visibility:hidden}${i("pn-radio-button")} .pn-radio-container[data-open]{visibility:visible;overflow:unset}${i("pn-radio-button")} .pn-radio-container[data-moving]{visibility:visible;overflow:hidden}${i("pn-radio-button")} .pn-radio-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}${i("pn-radio-button")} .pn-radio>${i("pn-icon")}{margin-left:0.75em}${i("pn-radio-button")}>input[type=radio]{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}${i("pn-radio-button")}>input[type=radio][data-tile]:not([data-expand]){width:100%;height:100%}${i("pn-radio-button")}>input[type=radio][data-expand]{top:1em;left:1em}${i("pn-radio-button")}>input[type=radio][aria-describedby]+.pn-radio[data-tile] .pn-radio-label{font-weight:500}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile] .pn-radio-outer{background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile][data-invalid] .pn-radio-outer{background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio .pn-radio-outer{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:checked:hover+.pn-radio[data-tile][data-invalid]{border-color:#500715}${i("pn-radio-button")}>input[type=radio]:checked:hover+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#500715}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio .pn-radio-outer{outline-color:#005d92}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-invalid] .pn-radio-outer{outline-color:#a70707}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile]{outline-color:#005d92;border-color:#005d92}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile]>.pn-radio-button>.pn-radio-outer{outline:none}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer{border-color:#005d92}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{transform:scale(1);background-color:#005d92}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#a70707}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#a70707}${i("pn-radio-button")}>input[type=radio]:disabled{pointer-events:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio .pn-radio-label{pointer-events:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]>${i("pn-icon")}>.pn-icon-svg path{fill:#5e554a}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]>.pn-radio-content>.pn-radio-label{color:#5e554a}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer{background-color:#f3f2f2;border-color:#969087;outline:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#969087}`}},[772,"pn-radio-button",{label:[1],helpertext:[1],value:[513],name:[1],checked:[1028],radioid:[1],required:[4],disabled:[4],invalid:[4],tile:[4],expand:[4],icon:[1],isClosing:[32],isExpanding:[32]},[[8,"change","handleChange"]],{radioid:[{handleId:0}],checked:[{handleChecked:0}]}]),l=p,c=function(){"undefined"!=typeof customElements&&["pn-radio-button","pn-icon"].forEach((o=>{switch(o){case"pn-radio-button":customElements.get(i(i(o)))||customElements.define(i(i(o)),p);break;case"pn-icon":customElements.get(i(i(o)))||d()}}))};export{l as PnRadioButton,c as defineCustomElement}