@postnord/web-components/postnord-web-components/p-5f5f3eeb.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{t as i,M as t,r as o,c as a,g as n,h as r,a as e}from"./p-XKg-ydzH.js";import{uuidv4 as d}from"./index.esm.js";import{a as p}from"./p-BWAVaTWQ.js";const l=class extends(t(p)){constructor(i){super(),o(this,i),this.pnRadioChange=a(this,"pnRadioChange",3)}id=`pn-radio-${d()}`;idHelpertext=`${this.id}-helpertext`;contentArea;radioInput;get hostElement(){return n(this)}label;helpertext;value;name;checked=!1;required=!1;disabled=!1;tile=!1;expand=!1;icon=null;invalid=!1;pnId;pnAriaLabel;pnAriaLabelledby;radioid;handleId(){this.idHelpertext=`${this.getId()}-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 t=i.target,{name:o}=t;o===this.name&&(this.checked=t===this.radioInput&&t.checked)}pnRadioChange;componentDidLoad(){requestAnimationFrame((()=>this.displayContent()&&this.checked&&this.openDropdown(this.contentArea)))}getId(){return this.pnId||this.radioid||this.id}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}getAriaLabel(){return this.displayLabel()||this.pnAriaLabelledby?null:this.pnAriaLabel}getAriaLabelledby(){return this.displayLabel()||this.pnAriaLabel?null:this.pnAriaLabelledby}render(){return r(e,{key:"52305f6cf3826500739510f0cf1fd0ab2abc7dc2"},r("input",{key:"cc4f799fb58073ca59af798601d70baf88263aca",type:"radio",id:this.getId(),class:"pn-radio-input",value:this.value,name:this.name,disabled:this.disabled,checked:this.checked,required:this.required,"aria-label":this.getAriaLabel(),"aria-labelledby":this.getAriaLabelledby(),"aria-invalid":this.isInvalid()?.toString(),"aria-describedby":this.displayHelpertext()?this.idHelpertext:null,"data-tile":this.tile,"data-expand":this.expand,onChange:i=>this.pnRadioChange.emit(i),ref:i=>this.radioInput=i}),r("div",{key:"05e2a10face9b2ca1b0ced1f6f38f1173f15d1c0",class:"pn-radio","data-tile":this.tile,"data-expand":this.expand,"data-invalid":this.isInvalid()},r("div",{key:"b5274e03c47ac3d53103af945b3e8ce211eec827",class:"pn-radio-button"},r("div",{key:"1f4a592f7d243312e00259f67ce60836a449f42d",class:"pn-radio-outer"},r("div",{key:"05cb629b8c45724c6831271a40620ba5ec6e66ef",class:"pn-radio-inner"}))),r("div",{key:"a91835bcaa01888fd2a2b1b768def02203b58038",class:"pn-radio-content",hidden:!this.displayText()},r("label",{key:"c11016410fd25dbb3288640ef5f239553991f0f8",htmlFor:this.getId(),class:"pn-radio-label",hidden:!this.displayLabel()},this.label),r("p",{key:"6d4d46978e2a4f326af1558c4c6dd04c3c29956b",id:this.idHelpertext,class:"pn-radio-helpertext",hidden:!this.displayHelpertext()},this.helpertext,r("slot",{key:"3167af1f4d47e1a9c8010bc9316b32c5499f66ee",name:"helpertext"})),r("slot",{key:"1a4b466d8a8ba4e06ae96977e33fad1c502d5ea2"})),this.displayIcon()&&r("pn-icon",{key:"67f80f5c1db91e7310cf5baefdf6f3c346c83397",icon:this.icon,color:"gray900"}),r("div",{key:"e296239a734c33c40035b489d79b1edf44f1a2b7",class:"pn-radio-container","data-open":this.checked,hidden:!this.displayContent(),style:{height:"0px"},ref:i=>this.contentArea=i},r("div",{key:"f6245b5b2c9611da4b59a3fdb3047fe8365f1678",class:"pn-radio-area"},r("slot",{key:"b985712da1ea4504025d17cc507588f14d9ebfff",name:"content"})))))}static get watchers(){return{radioid:[{handleId:0}],pnId:[{handleId:1}],checked:[{handleChecked:0}]}}};l.style=`${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;display:flex;flex-direction:column}${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}`;export{l as pn_radio_button}