@postnord/web-components
Version:
PostNord Web Components
6 lines • 9.08 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import{r as o,g as i,h as a,a as n}from"./p-43660913.js";import{u as r}from"./p-f64d17a6.js";const d="pn-radio-button{position:relative;display:inline-block}pn-radio-button .pn-radio{position:relative;display:flex;gap:0.75em}pn-radio-button .pn-radio-label{color:#2d2013}pn-radio-button .pn-radio-helpertext{color:#5e554a}pn-radio-button .pn-radio-content{margin:0;flex:1 1 100%;display:flex;flex-direction:column;justify-content:center}pn-radio-button .pn-radio-container{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>input[type=radio]{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;width:100%;height:100%;-webkit-tap-highlight-color:transparent}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-container>.pn-radio-outer{border-color:#500715}pn-radio-button>input[type=radio]:disabled:hover+.pn-radio[data-invalid]{border-color:#f3f2f2}pn-radio-button>input[type=radio]:disabled:hover+.pn-radio>.pn-radio-container>.pn-radio-outer{background-color:#f3f2f2}pn-radio-button>input[type=radio]:disabled:checked:hover+.pn-radio[data-invalid]{border-color:#f3f2f2}pn-radio-button>input[type=radio]:disabled:checked:hover+.pn-radio[data-invalid]>.pn-radio-container>.pn-radio-outer{background-color:#f3f2f2}pn-radio-button>input[type=radio]:disabled:checked:hover+.pn-radio[data-invalid]>.pn-radio-container>.pn-radio-outer>.pn-radio-inner{background-color:#969087}pn-radio-button>input[type=radio]:disabled:checked:hover+.pn-radio>.pn-radio-container>.pn-radio-outer{background-color:#f3f2f2}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-container>.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-container>.pn-radio-outer{border-color:#005d92}pn-radio-button>input[type=radio]:checked+.pn-radio>.pn-radio-container>.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-container>.pn-radio-outer{border-color:#a70707}pn-radio-button>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-container>.pn-radio-outer>.pn-radio-inner{background-color:#a70707}pn-radio-button>input[type=radio]:disabled{cursor:not-allowed}pn-radio-button>input[type=radio]:disabled:active+.pn-radio{outline:none}pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile],pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile][data-invalid]{background-color:#f3f2f2;border-color:#f3f2f2}pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile]>pn-icon>.pn-icon-svg path,pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile][data-invalid]>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,pn-radio-button>input[type=radio]:disabled+.pn-radio[data-tile][data-invalid]>.pn-radio-content>.pn-radio-label{color:#5e554a}pn-radio-button>input[type=radio]:disabled+.pn-radio>.pn-radio-container>.pn-radio-outer{background-color:#f3f2f2;border-color:#969087;outline:none}pn-radio-button>input[type=radio]:disabled+.pn-radio>.pn-radio-container>.pn-radio-outer>.pn-radio-inner{background-color:#969087}pn-radio-button>input[type=radio]:disabled:checked+.pn-radio[data-invalid]>.pn-radio-container>.pn-radio-outer,pn-radio-button>input[type=radio]:disabled:checked+.pn-radio[data-tile]>.pn-radio-container>.pn-radio-outer,pn-radio-button>input[type=radio]:disabled:checked+.pn-radio[data-tile][data-invalid]>.pn-radio-container>.pn-radio-outer{background-color:#f3f2f2;border-color:#969087;outline:none}pn-radio-button>input[type=radio]:disabled:checked+.pn-radio[data-invalid]>.pn-radio-container>.pn-radio-outer>.pn-radio-inner,pn-radio-button>input[type=radio]:disabled:checked+.pn-radio[data-tile]>.pn-radio-container>.pn-radio-outer>.pn-radio-inner,pn-radio-button>input[type=radio]:disabled:checked+.pn-radio[data-tile][data-invalid]>.pn-radio-container>.pn-radio-outer>.pn-radio-inner{background-color:#969087}";const t=d;const e=class{constructor(i){o(this,i);this.label="";this.value=undefined;this.name=undefined;this.checked=false;this.helpertext=undefined;this.radioid=this.id;this.disabled=false;this.required=false;this.invalid=false;this.tile=false;this.icon=null}id=`pn-radio-button-${r()}`;idHelper=`${this.id}-helpertext`;get hostElement(){return i(this)}handleId(){this.idHelper=`${this.radioid}-helpertext`}componentWillLoad(){this.handleId()}render(){return a(n,{key:"ae520e0cfb3de29899ac40377cbb55061cd01b68"},a("input",{key:"d2195982014090f751f36f46687dc9c1e049e32d",type:"radio",id:this.radioid,value:this.value,name:this.name,disabled:this.disabled,required:this.required,checked:this.checked,"aria-describedby":!!this.helpertext&&this.idHelper,"aria-invalid":this.invalid?.toString()}),a("div",{key:"0ebb9fa07ebb3b896e8efd3545bc7fe295c56d05",class:"pn-radio","data-tile":this.tile,"data-invalid":this.invalid},a("div",{key:"a76dd992f2b3f2afb54e1db31ee50638002d5b4a",class:"pn-radio-container"},a("div",{key:"e456252ee2011d1dee97aff66f6ba4c122a5ca80",class:"pn-radio-outer"},a("div",{key:"dd7aee8305f27590d524b63336c619d7b440a781",class:"pn-radio-inner"}))),(this.label||this.helpertext)&&a("p",{key:"664c532213f996509cf6abe4a9d557b21ba60464",class:"pn-radio-content"},this.label&&a("label",{key:"090e79852aa459100d0a382778bc30b75e61fe32",htmlFor:this.radioid,class:"pn-radio-label"},this.label),this.helpertext&&a("span",{key:"1785f82b7d25eff5117587777db5d02584609885",id:this.idHelper,class:"pn-radio-helpertext"},this.helpertext)),this.tile&&this.icon&&a("pn-icon",{key:"2902b6b37407a1b3dc7b60d47405de5ead710a57",color:"gray900",icon:this.icon})))}static get watchers(){return{radioid:["handleId"]}}};e.style=t;export{e as pn_radio_button};
//# sourceMappingURL=p-b9a494ae.entry.js.map