@postnord/web-components/postnord-web-components/p-3144b46d.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as e,g as c,h as o,a as n}from"./p-c2c6299e.js";import{u as t}from"./p-c511b4fb.js";const r="pn-checkbox{position:relative;display:inline-block}pn-checkbox .pn-checkbox{position:relative;display:flex;gap:0.75em}pn-checkbox .pn-checkbox-label{color:#2d2013}pn-checkbox .pn-checkbox-helpertext{color:#5e554a}pn-checkbox .pn-checkbox-content{display:flex;flex-direction:column;font-weight:400;line-height:1.5;flex:1;margin:0}pn-checkbox .pn-checkbox-outer{width:1.5em;height:1.5em;background-color:#ffffff;display:flex;align-items:center;justify-content:center;position:relative;border:0.0625em solid #969087;border-radius:0.25em;cursor:pointer;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, border-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-checkbox .pn-checkbox-outer svg{width:1.25em;fill:none}pn-checkbox .pn-checkbox-outer svg polyline{stroke:#ffffff;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition:stroke-dashoffset 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0s}pn-checkbox .pn-checkbox[data-tile]{position:relative;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:1em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-checkbox .pn-checkbox[data-tile][data-invalid]{border-color:#a70707}pn-checkbox .pn-checkbox[data-invalid] .pn-checkbox-outer{border-color:#a70707}pn-checkbox>input{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-checkbox>input[aria-describedby]+.pn-checkbox[data-tile] .pn-checkbox-label{font-weight:500}pn-checkbox>input:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#e0f8ff;border-color:#005d92}pn-checkbox>input:hover+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}pn-checkbox>input:hover+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}pn-checkbox>input:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#fdefee;border-color:#a70707}pn-checkbox>input:focus-visible+.pn-checkbox>.pn-checkbox-outer{outline-color:#005d92}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile]{outline-color:#005d92;border-color:#005d92}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile][data-invalid]>.pn-checkbox-outer{outline-color:transparent}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile]>.pn-checkbox-outer{outline-color:transparent}pn-checkbox>input:focus-visible+.pn-checkbox[data-invalid]>.pn-checkbox-outer{outline-color:#a70707}pn-checkbox>input:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}pn-checkbox>input:checked+.pn-checkbox>.pn-checkbox-outer svg .pn-checkbox-checkmark-path{transition-delay:0.2s;stroke-dashoffset:0}pn-checkbox>input:checked+.pn-checkbox>.pn-checkbox-outer svg .pn-checkbox-indeterminate-path{stroke-dashoffset:23}pn-checkbox>input:checked+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}pn-checkbox>input:checked+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}pn-checkbox>input:checked+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}pn-checkbox>input:checked:hover+.pn-checkbox[data-tile]{border-color:#0d234b}pn-checkbox>input:checked:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}pn-checkbox>input:checked:hover+.pn-checkbox[data-invalid]{border-color:#500715}pn-checkbox>input:checked:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}pn-checkbox>input:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}pn-checkbox>input:indeterminate+.pn-checkbox>.pn-checkbox-outer svg .pn-checkbox-checkmark-path{stroke-dashoffset:23}pn-checkbox>input:indeterminate+.pn-checkbox>.pn-checkbox-outer svg .pn-checkbox-indeterminate-path{stroke-dashoffset:0}pn-checkbox>input:indeterminate+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}pn-checkbox>input:indeterminate:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}pn-checkbox>input:indeterminate:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}pn-checkbox>input:disabled{cursor:not-allowed}pn-checkbox>input:disabled+.pn-checkbox>.pn-checkbox-outer{background-color:#f3f2f2;border-color:#969087}pn-checkbox>input:disabled+.pn-checkbox[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}pn-checkbox>input:disabled+.pn-checkbox[data-tile]>pn-icon>.pn-icon-svg path{fill:#5e554a}pn-checkbox>input:disabled+.pn-checkbox[data-tile]>.pn-checkbox-content>.pn-checkbox-label{color:#5e554a}pn-checkbox>input:disabled+.pn-checkbox[data-tile][data-invalid]{background-color:#f3f2f2;border-color:#f3f2f2}pn-checkbox>input:disabled:hover+.pn-checkbox[data-tile]{border-color:#f3f2f2}pn-checkbox>input:disabled:hover+.pn-checkbox[data-tile][data-invalid]{background-color:#f3f2f2;border-color:#f3f2f2}pn-checkbox>input:disabled:hover+.pn-checkbox[data-tile]>.pn-checkbox-outer{background-color:#f3f2f2;border-color:#969087}pn-checkbox>input:disabled:hover+.pn-checkbox>.pn-checkbox-outer,pn-checkbox>input:disabled:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#f3f2f2;border-color:#969087}pn-checkbox>input:disabled:checked+.pn-checkbox>.pn-checkbox-outer,pn-checkbox>input:disabled:checked+.pn-checkbox[data-invalid]>.pn-checkbox-outer,pn-checkbox>input:disabled:checked:hover+.pn-checkbox>.pn-checkbox-outer,pn-checkbox>input:disabled:checked:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#969087;border-color:#969087}pn-checkbox>input:disabled:indeterminate+.pn-checkbox>.pn-checkbox-outer,pn-checkbox>input:disabled:indeterminate:hover+.pn-checkbox>.pn-checkbox-outer,pn-checkbox>input:disabled:indeterminate:disabled:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}";const i=r;const a=class{constructor(c){e(this,c)}id=`pn-checkbox-${t()}`;idHelpertext=`${this.id}-helpertext`;get hostElement(){return c(this)}label;value;name;checked=false;helpertext;checkboxid=this.id;disabled=false;required=false;invalid=false;indeterminate=false;tile=false;icon=null;handleId(){this.idHelpertext=`${this.checkboxid}-helpertext`}handlechange(){this.indeterminate=false}componentWillLoad(){this.handleId()}render(){return o(n,{key:"82fd05eac2c3b7032222bc666436b2cb75f0b698"},o("input",{key:"d9fa733aed72eba31053b43d40f0a084b73014e8",type:"checkbox",id:this.checkboxid,value:this.value,name:this.name||this.checkboxid,disabled:this.disabled,checked:this.checked,required:this.required,indeterminate:this.indeterminate,"aria-describedby":this.helpertext&&this.idHelpertext}),o("div",{key:"cc4efde88d12e505aa335c1519190a61a028375a",class:"pn-checkbox","data-tile":this.tile,"data-invalid":this.invalid},o("div",{key:"8a9da5423636a98549ae1f729f3e250f7efab434",class:"pn-checkbox-outer"},o("svg",{key:"4813aac4bd9825bbb8711fd8b257af1b09ecd949",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},o("polyline",{key:"95d0f4c61f5dbe80b70f0ba6c49e16d1980b2754",class:"pn-checkbox-checkmark-path",points:"4,12 9,17 20,6","stroke-width":"3"}),o("polyline",{key:"8f7571a453df0ac7e72c6c0be06de29e3f2b20e9",class:"pn-checkbox-indeterminate-path",points:"4,12 20,12","stroke-width":"3"}))),(!!this.label||!!this.helpertext)&&o("p",{key:"d54e21afdc3a4fe1921f5e8316647c2a47cdae00",class:"pn-checkbox-content"},!!this.label&&o("label",{key:"14a4f4360a8ce9ea32507c955b7e09e6c5acb91a",htmlFor:this.checkboxid,class:"pn-checkbox-label"},this.label),!!this.helpertext&&o("span",{key:"d9df6b05fa69617ba0badaf8afaecf1e5e076d62",id:this.idHelpertext,class:"pn-checkbox-helpertext"},this.helpertext)),this.tile&&this.icon&&o("pn-icon",{key:"2d3b1bf42f24679e1ce80db9d55189c9ccf49d59",icon:this.icon,color:"gray900"})))}static get watchers(){return{checkboxid:["handleId"]}}};a.style=i;export{a as pn_checkbox};
//# sourceMappingURL=p-3144b46d.entry.js.map