@postnord/web-components/components/pn-checkbox.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as e,proxyCustomElement as c,Mixin as o,h as n,Host as t}from"@stencil/core/internal/client";import{u as i}from"./helpers.js";import{a}from"./index2.js";import{d as r}from"./pn-icon2.js";const d=c(class extends(o(a)){constructor(e){super(!1),!1!==e&&this.__registerHost()}id="pn-checkbox-"+i();idHelpertext=this.id+"-helpertext";contentArea;get hostElement(){return this}label;helpertext;value;name;checked=!1;checkboxid=this.id;required=!1;disabled=!1;invalid=!1;indeterminate=!1;tile=!1;expand=!1;icon=null;handleId(){this.idHelpertext=this.checkboxid+"-helpertext"}handleChecked(){this.displayContent()&&(this.checked?this.openDropdown(this.contentArea):this.closeDropdown(this.contentArea))}componentWillLoad(){this.handleId()}componentDidLoad(){this.displayContent()&&this.checked&&requestAnimationFrame((()=>this.openDropdown(this.contentArea)))}handleChange(e){const{checked:c}=e.target;this.indeterminate=!1,this.checked=c}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 n(t,{key:"52273e4f6d71183fa2360c147c5d2ed6fbb3d31a"},n("input",{key:"fba94a81a38009f36d938751c6362ed7340d68d7",type:"checkbox",id:this.checkboxid,class:"pn-checkbox-input",value:this.value,name:this.name,disabled:this.disabled,checked:this.checked,required:this.required,indeterminate:this.indeterminate,"aria-invalid":this.isInvalid()?.toString(),"aria-describedby":this.helpertext&&this.idHelpertext,"data-tile":this.tile,"data-expand":this.expand,onChange:e=>this.handleChange(e)}),n("div",{key:"850ecfd3abddccfe8b0ada1d0272dfa3155a669f",class:"pn-checkbox","data-tile":this.tile,"data-expand":this.expand,"data-invalid":this.isInvalid()},n("div",{key:"728efcdb0cd59f1af39839dd9fd1accc66f2da00",class:"pn-checkbox-outer"},n("svg",{key:"55d82cc64b735706a57d301e9c8f64edc4aeebe9",class:"pn-checkbox-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},n("polyline",{key:"02a30f7a2cbf5d502be29ff14945f22e89ca19c5",class:"pn-checkbox-svg-line pn-checkbox-svg-checkmark",points:"4,12 9,17 20,6","stroke-width":"3"}),n("polyline",{key:"9c01a39dec7dc5d3961bffd07badf694ebdbadc1",class:"pn-checkbox-svg-line pn-checkbox-svg-indeterminate",points:"4,12 20,12","stroke-width":"3"}))),n("p",{key:"0b63e31f00d2dea465e9e36b3cceb56bf0a4ad48",class:"pn-checkbox-content",hidden:!this.displayText()},n("label",{key:"9aeebad0076718474224594b5c17cd5e3c3590dc",htmlFor:this.checkboxid,class:"pn-checkbox-label",hidden:!this.displayLabel()},this.label),n("span",{key:"1d99d825512267e4560b817f8853319b10b05d08",id:this.idHelpertext,class:"pn-checkbox-helpertext",hidden:!this.displayHelpertext()},this.helpertext,n("slot",{key:"981da5a8b25f6e780a5c0a1f9e32ee7aa11fef11",name:"helpertext"})),n("slot",{key:"192f09f50bd3592c41e8836c70dc264edfc3e332"})),this.displayIcon()&&n("pn-icon",{key:"4ab2aaf2819ca83f08233cac99922e5234837408",icon:this.icon,color:"gray900"}),n("div",{key:"6247821b031e2d57a216612b166db6622aaa2225",class:"pn-checkbox-container","data-open":this.checked,hidden:!this.displayContent(),style:{height:"0px"},ref:e=>this.contentArea=e},n("div",{key:"d35445d61a6e9a7faca6ca349f56b36097a077d2",class:"pn-checkbox-area"},n("slot",{key:"7cbcc9648ae405d6aa8729f2071c3b03a914a027",name:"content"})))))}static get watchers(){return{checkboxid:[{handleId:0}],checked:[{handleChecked:0}]}}static get style(){return`${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}${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}`}},[772,"pn-checkbox",{label:[1],helpertext:[1],value:[513],name:[1],checked:[1028],checkboxid:[1],required:[4],disabled:[4],invalid:[4],indeterminate:[1028],tile:[4],expand:[4],icon:[1],isClosing:[32],isExpanding:[32]},void 0,{checkboxid:[{handleId:0}],checked:[{handleChecked:0}]}]),h=d,b=function(){"undefined"!=typeof customElements&&["pn-checkbox","pn-icon"].forEach((c=>{switch(c){case"pn-checkbox":customElements.get(e(e(c)))||customElements.define(e(e(c)),d);break;case"pn-icon":customElements.get(e(e(c)))||r()}}))};export{h as PnCheckbox,b as defineCustomElement}