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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{t as e,M as c,r as o,c as n,g as t,h as i,a}from"./p-XKg-ydzH.js";import{uuidv4 as r}from"./index.esm.js";import{a as d}from"./p-BWAVaTWQ.js";const h=class extends(c(d)){constructor(e){super(),o(this,e),this.pnCheckboxChange=n(this,"pnCheckboxChange",3)}id=`pn-checkbox-${r()}`;idHelpertext=`${this.id}-helpertext`;contentArea;get hostElement(){return t(this)}label;helpertext;value;name;checked=!1;required=!1;disabled=!1;invalid=!1;indeterminate=!1;tile=!1;expand=!1;icon=null;pnId;pnAriaLabel;pnAriaLabelledby;checkboxid;handleId(){this.idHelpertext=`${this.getId()}-helpertext`}handleChecked(){this.displayContent()&&(this.checked?this.openDropdown(this.contentArea):this.closeDropdown(this.contentArea))}pnCheckboxChange;componentDidLoad(){this.displayContent()&&this.checked&&requestAnimationFrame((()=>this.openDropdown(this.contentArea)))}getId(){return this.pnId||this.checkboxid||this.id}handleChange(e){const{checked:c}=e.target;this.indeterminate=!1,this.checked=c,this.pnCheckboxChange.emit(e)}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 i(a,{key:"4952d473c243232a6ee267cfac9414c8feb3e9c7"},i("input",{key:"e478ca15bde8fdf54833fe5b5a834513813db65e",type:"checkbox",id:this.getId(),class:"pn-checkbox-input",value:this.value,name:this.name,disabled:this.disabled,checked:this.checked,required:this.required,indeterminate:this.indeterminate,"aria-label":this.getAriaLabel(),"aria-labelledby":this.getAriaLabelledby(),"aria-describedby":this.displayHelpertext()&&this.idHelpertext,"aria-invalid":this.isInvalid()?.toString(),"data-tile":this.tile,"data-expand":this.expand,onChange:e=>this.handleChange(e)}),i("div",{key:"e918f05ea8a0f5e26a7963dcdbd9cef7a1ae8a57",class:"pn-checkbox","data-tile":this.tile,"data-expand":this.expand,"data-invalid":this.isInvalid()},i("div",{key:"e876cc7ae77d0496c745da65de5883404d0a01c7",class:"pn-checkbox-outer"},i("svg",{key:"2349e0a978e6824658b572462eb5baf9ccda2ec9",class:"pn-checkbox-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},i("polyline",{key:"c01925a07dfb5bbed352ecb741a3e9c830a32b3b",class:"pn-checkbox-svg-line pn-checkbox-svg-checkmark",points:"4,12 9,17 20,6","stroke-width":"3"}),i("polyline",{key:"0d4dfa8da28e602bf0c579c6ca48fda9f1748a38",class:"pn-checkbox-svg-line pn-checkbox-svg-indeterminate",points:"4,12 20,12","stroke-width":"3"}))),i("div",{key:"d3c1f4a8d7aa27d7d9ca192438b84619574fcf39",class:"pn-checkbox-content",hidden:!this.displayText()},i("label",{key:"467ca071291cbd977670300bb45affc7153ae7f4",htmlFor:this.getId(),class:"pn-checkbox-label",hidden:!this.displayLabel()},this.label),i("p",{key:"5c790a6b8583415168a3e92c7b6d3a38125b39cd",id:this.idHelpertext,class:"pn-checkbox-helpertext",hidden:!this.displayHelpertext()},this.helpertext&&i("span",{key:"e35b4ac4a6abd759d7fb5e1d41fd2f198515e106"},this.helpertext),i("slot",{key:"ac060762533af07379cc80225a83de6e01ca26e4",name:"helpertext"})),i("slot",{key:"4f0309028f9266d016f19d8983343ff010d89195"})),this.displayIcon()&&i("pn-icon",{key:"742b544ed4ed61ff311de992eea37b768cc6efef",icon:this.icon,color:"gray900"}),i("div",{key:"45cdad0df43248b340feed887659d6c63e90b85f",class:"pn-checkbox-container","data-open":this.checked,hidden:!this.displayContent(),style:{height:"0px"},ref:e=>this.contentArea=e},i("div",{key:"060550d9876021ba85a1821c51c60b1bb34b8a3c",class:"pn-checkbox-area"},i("slot",{key:"bbe34f9d29a922ab20b8696595a9ed469005f59e",name:"content"})))))}static get watchers(){return{checkboxid:[{handleId:0}],pnId:[{handleId:1}],checked:[{handleChecked:0}]}}};h.style=`${e("pn-checkbox")}{position:relative;display:inline-block}${e("pn-checkbox")} .pn-checkbox{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}${e("pn-checkbox")} .pn-checkbox-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}${e("pn-checkbox")} .pn-checkbox-helpertext{color:#5e554a;margin:0 0 0.5em 0;display:flex;flex-direction:column}${e("pn-checkbox")} .pn-checkbox-helpertext:last-child{margin:0}${e("pn-checkbox")} .pn-checkbox-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}${e("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;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)}@media (prefers-reduced-motion: reduce){${e("pn-checkbox")} .pn-checkbox-outer{transition-duration:0s;transition-delay:0s}}${e("pn-checkbox")} .pn-checkbox-svg{width:1.25em;fill:none}${e("pn-checkbox")} .pn-checkbox-svg-line{stroke:#ffffff;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-checkbox")} .pn-checkbox-svg-line{transition-duration:0s;transition-delay:0s}}${e("pn-checkbox")} .pn-checkbox-svg-line{transition-delay:0s}${e("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)}@media (prefers-reduced-motion: reduce){${e("pn-checkbox")} .pn-checkbox[data-tile]{transition-duration:0s;transition-delay:0s}}${e("pn-checkbox")} .pn-checkbox[data-tile][data-invalid]{border-color:#a70707}${e("pn-checkbox")} .pn-checkbox[data-invalid] .pn-checkbox-outer{border-color:#a70707}${e("pn-checkbox")} .pn-checkbox-container{flex:1 1 100%;overflow:hidden;visibility:hidden}${e("pn-checkbox")} .pn-checkbox-container[data-open]{visibility:visible;overflow:unset}${e("pn-checkbox")} .pn-checkbox-container[data-moving]{visibility:visible;overflow:hidden}${e("pn-checkbox")} .pn-checkbox-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}${e("pn-checkbox")} .pn-checkbox>${e("pn-icon")}{margin-left:0.75em}${e("pn-checkbox")}>input{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}${e("pn-checkbox")}>input[data-tile]:not([data-expand]){width:100%;height:100%}${e("pn-checkbox")}>input[data-expand]{top:1em;left:1em}${e("pn-checkbox")}>input[aria-describedby]+.pn-checkbox[data-tile] .pn-checkbox-label{font-weight:500}${e("pn-checkbox")}>input:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#e0f8ff;border-color:#005d92}${e("pn-checkbox")}>input:hover+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}${e("pn-checkbox")}>input:hover+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}${e("pn-checkbox")}>input:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#fdefee;border-color:#a70707}${e("pn-checkbox")}>input:focus-visible+.pn-checkbox>.pn-checkbox-outer{outline-color:#005d92}${e("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile]{outline-color:#005d92;border-color:#005d92}${e("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}${e("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile][data-invalid]>.pn-checkbox-outer{outline-color:transparent}${e("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-tile]>.pn-checkbox-outer{outline-color:transparent}${e("pn-checkbox")}>input:focus-visible+.pn-checkbox[data-invalid]>.pn-checkbox-outer{outline-color:#a70707}${e("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}${e("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:23}${e("pn-checkbox")}>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{transition-delay:0.2s;stroke-dashoffset:0}${e("pn-checkbox")}>input:checked+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}${e("pn-checkbox")}>input:checked+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}${e("pn-checkbox")}>input:checked+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}${e("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-tile]{border-color:#0d234b}${e("pn-checkbox")}>input:checked:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}${e("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-invalid]{border-color:#500715}${e("pn-checkbox")}>input:checked:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}${e("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}${e("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{stroke-dashoffset:23}${e("pn-checkbox")}>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:0}${e("pn-checkbox")}>input:indeterminate+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}${e("pn-checkbox")}>input:indeterminate:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}${e("pn-checkbox")}>input:indeterminate:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}${e("pn-checkbox")}>input:disabled{pointer-events:none}${e("pn-checkbox")}>input:disabled+.pn-checkbox .pn-checkbox-label{pointer-events:none}${e("pn-checkbox")}>input:disabled+.pn-checkbox>.pn-checkbox-outer{background-color:#f3f2f2;border-color:#969087}${e("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]>${e("pn-icon")} .pn-icon-svg path{fill:#5e554a}${e("pn-checkbox")}>input:disabled+.pn-checkbox[data-tile]>.pn-checkbox-content>.pn-checkbox-label{color:#5e554a}${e("pn-checkbox")}>input:disabled:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}${e("pn-checkbox")}>input:disabled:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}`;export{h as pn_checkbox}