@postnord/web-components/postnord-web-components/p-fa78727f.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{M as i,r as o,g as t,h as a,a as n}from"./p-C247oTEA.js";import{uuidv4 as e}from"./index.esm.js";import{a as r}from"./p-BOLk1uQ2.js";const d="pn-radio-button{position:relative;display:inline-block}pn-radio-button .pn-radio{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}pn-radio-button .pn-radio-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}pn-radio-button .pn-radio-helpertext{color:#5e554a;margin:0 0 0.5em 0}pn-radio-button .pn-radio-helpertext:last-child{margin:0}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}pn-radio-button .pn-radio-button{display:flex;gap:0.75em;padding:0}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){pn-radio-button .pn-radio-outer{transition-duration:0s;transition-delay:0s}}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){pn-radio-button .pn-radio-inner{transition-duration:0s;transition-delay:0s}}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){pn-radio-button .pn-radio[data-tile]{transition-duration:0s;transition-delay:0s}}pn-radio-button .pn-radio[data-tile] .pn-radio-outer{outline:none}pn-radio-button .pn-radio[data-invalid]{border-color:#a70707}pn-radio-button .pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707}pn-radio-button .pn-radio[data-invalid] .pn-radio-inner{background-color:#a70707}pn-radio-button .pn-radio-container{flex:1 1 100%;overflow:hidden;visibility:hidden}pn-radio-button .pn-radio-container[data-open]{visibility:visible;overflow:unset}pn-radio-button .pn-radio-container[data-moving]{visibility:visible;overflow:hidden}pn-radio-button .pn-radio-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}pn-radio-button .pn-radio>pn-icon{margin-left:0.75em}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}pn-radio-button>input[type=radio][data-tile]:not([data-expand]){width:100%;height:100%}pn-radio-button>input[type=radio][data-expand]{top:1em;left:1em}pn-radio-button>input[type=radio][aria-describedby]+.pn-radio[data-tile] .pn-radio-label{font-weight:500}pn-radio-button>input[type=radio]:hover+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}pn-radio-button>input[type=radio]:hover+.pn-radio[data-tile] .pn-radio-outer{background-color:#e0f8ff}pn-radio-button>input[type=radio]:hover+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}pn-radio-button>input[type=radio]:hover+.pn-radio[data-tile][data-invalid] .pn-radio-outer{background-color:#fdefee}pn-radio-button>input[type=radio]:hover+.pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707;background-color:#fdefee}pn-radio-button>input[type=radio]:hover+.pn-radio .pn-radio-outer{border-color:#005d92;background-color:#e0f8ff}pn-radio-button>input[type=radio]:checked:hover+.pn-radio[data-tile][data-invalid]{border-color:#500715}pn-radio-button>input[type=radio]:checked:hover+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#500715}pn-radio-button>input[type=radio]:focus-visible+.pn-radio .pn-radio-outer{outline-color:#005d92}pn-radio-button>input[type=radio]:focus-visible+.pn-radio[data-invalid] .pn-radio-outer{outline-color:#a70707}pn-radio-button>input[type=radio]:focus-visible+.pn-radio[data-tile]{outline-color:#005d92;border-color:#005d92}pn-radio-button>input[type=radio]:focus-visible+.pn-radio[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}pn-radio-button>input[type=radio]:focus-visible+.pn-radio[data-tile]>.pn-radio-button>.pn-radio-outer{outline:none}pn-radio-button>input[type=radio]:checked+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}pn-radio-button>input[type=radio]:checked+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}pn-radio-button>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer{border-color:#005d92}pn-radio-button>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{transform:scale(1);background-color:#005d92}pn-radio-button>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#a70707}pn-radio-button>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#a70707}pn-radio-button>input[type=radio]:disabled{pointer-events:none}pn-radio-button>input[type=radio]:disabled+.pn-radio .pn-radio-label{pointer-events:none}pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile]>pn-icon>.pn-icon-svg path{fill:#5e554a}pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile]>.pn-radio-content>.pn-radio-label{color:#5e554a}pn-radio-button>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer{background-color:#f3f2f2;border-color:#969087;outline:none}pn-radio-button>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#969087}";const p=class extends(i(r)){constructor(i){super();o(this,i)}id=`pn-radio-${e()}`;idHelpertext=`${this.id}-helpertext`;contentArea;radioInput;get hostElement(){return t(this)}label;helpertext;value;name;checked=false;radioid=this.id;required=false;disabled=false;invalid=false;tile=false;expand=false;icon=null;handleId(){this.idHelpertext=`${this.radioid}-helpertext`}handleChecked(){this.checked=this.radioInput.checked;if(!this.displayContent())return;if(this.checked){this.openDropdown(this.contentArea)}else{this.closeDropdown(this.contentArea)}}handleChange(i){const{name:o}=i.target;const t=o===this.name;if(t)this.checked=this.radioInput.checked}componentWillLoad(){this.handleId()}componentDidLoad(){requestAnimationFrame((()=>{if(this.displayContent()&&this.radioInput.checked)this.openDropdown(this.contentArea);else this.checked=false}))}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 a(n,{key:"4ce792357af2aa45ea600b7e93cd2c48f9761949"},a("input",{key:"0da7848603e6194b194f3908c6ae94d18fddc81d",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.helpertext&&this.idHelpertext,"data-tile":this.tile,"data-expand":this.expand,ref:i=>this.radioInput=i}),a("div",{key:"54e7114a4570c4de7b55f0f0156084d4691bc4ba",class:"pn-radio","data-tile":this.tile,"data-expand":this.expand,"data-invalid":this.isInvalid()},a("div",{key:"4ed96522fb7cf5e37636ccbab0a80abe9da41c61",class:"pn-radio-button"},a("div",{key:"666ca6f0b6ff5087161fceaea63e91992b1235b1",class:"pn-radio-outer"},a("div",{key:"283e1b6073b0631656652f1dbcf56d94ffac9384",class:"pn-radio-inner"}))),a("p",{key:"54946df55fe4cc8e7dc576d68a92e9ca8e8dc479",class:"pn-radio-content",hidden:!this.displayText()},a("label",{key:"253244165b2f60e25b9964f30a1d9a10c2403a23",htmlFor:this.radioid,class:"pn-radio-label",hidden:!this.displayLabel()},this.label),a("span",{key:"b0fc2c2b862e7fe87a382bef3f180fce524aa239",id:this.idHelpertext,class:"pn-radio-helpertext",hidden:!this.displayHelpertext()},this.helpertext,a("slot",{key:"9a2fd56d890888fb6e3a65f5b0910bacb690f948",name:"helpertext"})),a("slot",{key:"bd2229478a4bdac59d57ea3b95ef6a0305fb6c4e"})),this.displayIcon()&&a("pn-icon",{key:"74742118fda52e6746be9af330b9c748767e6630",icon:this.icon,color:"gray900"}),a("div",{key:"0f8f488faa70684f8f9b008f4f7b58317565b665",class:"pn-radio-container","data-open":this.checked,hidden:!this.displayContent(),style:{height:"0px"},ref:i=>this.contentArea=i},a("div",{key:"ff42957d08901153a930bced6046295e727943f8",class:"pn-radio-area"},a("slot",{key:"b8069fc5bc09709887fbb9071f9db2dd5f59a199",name:"content"})))))}static get watchers(){return{radioid:["handleId"],checked:["handleChecked"]}}};p.style=d;export{p as pn_radio_button};
//# sourceMappingURL=p-fa78727f.entry.js.map