@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,createEvent as n,h as t,Host as i}from"@stencil/core/internal/client";import{u as a}from"./helpers.js";import{a as r}from"./index2.js";import{d}from"./pn-icon2.js";const h=c(class extends(o(r)){constructor(e){super(!1),!1!==e&&this.__registerHost(),this.pnCheckboxChange=n(this,"pnCheckboxChange",3)}id="pn-checkbox-"+a();idHelpertext=this.id+"-helpertext";contentArea;get hostElement(){return 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 t(i,{key:"4952d473c243232a6ee267cfac9414c8feb3e9c7"},t("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)}),t("div",{key:"e918f05ea8a0f5e26a7963dcdbd9cef7a1ae8a57",class:"pn-checkbox","data-tile":this.tile,"data-expand":this.expand,"data-invalid":this.isInvalid()},t("div",{key:"e876cc7ae77d0496c745da65de5883404d0a01c7",class:"pn-checkbox-outer"},t("svg",{key:"2349e0a978e6824658b572462eb5baf9ccda2ec9",class:"pn-checkbox-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},t("polyline",{key:"c01925a07dfb5bbed352ecb741a3e9c830a32b3b",class:"pn-checkbox-svg-line pn-checkbox-svg-checkmark",points:"4,12 9,17 20,6","stroke-width":"3"}),t("polyline",{key:"0d4dfa8da28e602bf0c579c6ca48fda9f1748a38",class:"pn-checkbox-svg-line pn-checkbox-svg-indeterminate",points:"4,12 20,12","stroke-width":"3"}))),t("div",{key:"d3c1f4a8d7aa27d7d9ca192438b84619574fcf39",class:"pn-checkbox-content",hidden:!this.displayText()},t("label",{key:"467ca071291cbd977670300bb45affc7153ae7f4",htmlFor:this.getId(),class:"pn-checkbox-label",hidden:!this.displayLabel()},this.label),t("p",{key:"5c790a6b8583415168a3e92c7b6d3a38125b39cd",id:this.idHelpertext,class:"pn-checkbox-helpertext",hidden:!this.displayHelpertext()},this.helpertext&&t("span",{key:"e35b4ac4a6abd759d7fb5e1d41fd2f198515e106"},this.helpertext),t("slot",{key:"ac060762533af07379cc80225a83de6e01ca26e4",name:"helpertext"})),t("slot",{key:"4f0309028f9266d016f19d8983343ff010d89195"})),this.displayIcon()&&t("pn-icon",{key:"742b544ed4ed61ff311de992eea37b768cc6efef",icon:this.icon,color:"gray900"}),t("div",{key:"45cdad0df43248b340feed887659d6c63e90b85f",class:"pn-checkbox-container","data-open":this.checked,hidden:!this.displayContent(),style:{height:"0px"},ref:e=>this.contentArea=e},t("div",{key:"060550d9876021ba85a1821c51c60b1bb34b8a3c",class:"pn-checkbox-area"},t("slot",{key:"bbe34f9d29a922ab20b8696595a9ed469005f59e",name:"content"})))))}static get watchers(){return{checkboxid:[{handleId:0}],pnId:[{handleId:1}],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;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}`}},[772,"pn-checkbox",{label:[1],helpertext:[1],value:[513],name:[1],checked:[1540],required:[4],disabled:[4],invalid:[4],indeterminate:[1028],tile:[4],expand:[4],icon:[1],pnId:[1,"pn-id"],pnAriaLabel:[1,"pn-aria-label"],pnAriaLabelledby:[1,"pn-aria-labelledby"],checkboxid:[1],isClosing:[32],isExpanding:[32]},void 0,{checkboxid:[{handleId:0}],pnId:[{handleId:1}],checked:[{handleChecked:0}]}]),b=h,p=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)),h);break;case"pn-icon":customElements.get(e(e(c)))||d()}}))};export{b as PnCheckbox,p as defineCustomElement}