@nanoporetech-digital/components 7.6.0 → 7.7.0

package/dist/nano-components/nano-checkbox-group.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as o,c as n,g as e,h as i,a as t}from"./index-3118109b.js";import{g as s}from"./theme-d553c17a.js";import{d as a}from"./throttle-df960210.js";const r='.sc-nano-checkbox-group-h{box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, "currentcolor");--label-color--invalid:var(--nano-input-label-color-invalid, "currentcolor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{box-sizing:inherit}.types-tag.sc-nano-checkbox-group-h,.types-segment.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:6px;--control-margin-start:0}.types-checkbox.sc-nano-checkbox-group-h,.types-radio.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:6px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1.5;white-space:normal;display:block;inline-size:100%}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__legend.visually-hide.sc-nano-checkbox-group{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanogroupcb__more.sc-nano-checkbox-group{block-size:1em;margin-block:calc(var(--label-padding) - var(--control-margin-bottom)) var(--label-padding);margin-inline:3px 0;position:relative}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:flex;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end);margin-block:var(--control-margin-top) var(--control-margin-bottom)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end)}}';const c=r;const h=class{constructor(e){o(this,e);this.nanoChange=n(this,"nanoChange",7);this.nanoValidate=n(this,"nanoValidate",7)}mo;checkboxTypes;grpId=`nano-checkbox-group-${l++}`;ignoreValueSet=false;get host(){return e(this)}checkboxes;nativeCbs;errorMessage="";showErrorMsg=false;hasHelperSlot=false;validateOn="submitThenDirty";showInlineError=true;min=0;max=null;disabled=null;legend="";hideLegend=false;get invalid(){return this._invalid}_invalid=false;get validityMessage(){return this.errorMessage}value;handleValuePropChange(){this.nanoChange.emit(this.value);if(this.ignoreValueSet)return;this.setCbValue()}async reportValidity(o){return new Promise((n=>{if(o){this.customValidate();this.showInlineValidation()}setTimeout((()=>{n({isValid:!this.invalid,errorMessage:this.errorMessage})}),50)}))}async showError(o,n){let e;if(!this.checkboxes)return;if(n)e=this.checkboxes.find((o=>o.value===n));if(!e)e=this.checkboxes[0];if(!e)return;this.errorMessage=o;await e.setError(o);if(this.showInlineError)this.showInlineValidation()}nanoChange;nanoValidate;handleValueChange(o){if(o.target===this.host)return;this.setInternalValue();this.handleCbChange()}handleCbChange(){if(this.invalid){this.showErrorMsg=this._invalid=false}this.showErrorMsg=this._invalid=this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}customValidate(){if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;const o=this.nativeCbs.filter((o=>o?.type==="radio"));if(o&&o.length&&(this.showErrorMsg||this.validateOn==="dirty")){const n=o.find((o=>o.required));const e=o.filter((o=>o.checked));if(n&&e){this.checkboxes.forEach((o=>o.reportValidity(false)));return false}else if(n&&!e)return true}const n=this.nativeCbs.filter((o=>o?.type==="checkbox"));if(!n||!n.length)return;const e=n.filter((o=>o.checked));const i=n.find((o=>o.required));let t=false;if(i&&!e.find((o=>o===i)))return true;this.checkboxes.forEach(((o,n)=>{const i=this.nativeCbs[n];o.setError("");i.setCustomValidity("");if(this.min&&e.length<this.min){this.errorMessage=`You must select a minimum of ${this.min} values.`;t=true}if(this.max&&e.length>this.max){this.errorMessage=`Only up to ${this.max} values are allowed.`;t=true}if(t){o.setError(this.errorMessage,this.showErrorMsg);i.setCustomValidity(this.errorMessage)}}));return t}handleComponentChange(){if(!this.checkboxes?.length)return;this.checkboxTypes=s(this.checkboxes.map((o=>"types-"+(o.type||"checkbox"))))}handleDisabledChange(){if(this.disabled===null||!this.checkboxes?.length)return;this.checkboxes.map((o=>o.disabled=this.disabled))}setInternalValue(){if(!this.nativeCbs?.length)return;this.ignoreValueSet=true;const o=this.nativeCbs.filter((o=>o?.type==="radio"));if(o?.length){this.value=o.find((o=>o.checked))?.value||null;return}this.value=this.checkboxes.flatMap((o=>o.checked?[o.value]:[]));requestAnimationFrame((()=>this.ignoreValueSet=false))}setCbValue(){this.checkboxes?.forEach((o=>{if(o.value===this.value||Array.isArray(this.value)&&this.value.includes(o.value)){o.checked=true}}))}attachSlotObserver(){if(!!this.mo||!window["MutationObserver"])return;const o=this.mo=new MutationObserver((()=>this.handleSlotChange()));o.observe(this.host,{childList:true})}async handleSlotChange(){this.checkboxes=Array.from(this.host.querySelectorAll("nano-checkbox"));this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]');this.nativeCbs=await Promise.all(this.checkboxes.reduce(((o,n)=>{o.push(n.getInputElement());return o}),[]));this.nativeCbs.forEach((o=>{if(o)o.addEventListener("invalid",this.handleInvalid)}))}handleInvalid=o=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(this.showInlineError)o.preventDefault();this.showInlineValidation(o)};showInlineValidation=o=>{if(!this.nativeCbs||!this.nativeCbs.length)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.showErrorMsg=false;this._invalid=false;this.nativeCbs.forEach(((o,n)=>{if(!o.validity.valid){this.errorMessage=o.validationMessage;this.showErrorMsg=true;this._invalid=true}}));this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:o})};componentWillLoad(){this.handleValueChange=this.handleValueChange.bind(this);this.handleValueChange=a(this.handleValueChange,1);this.showInlineValidation=a(this.showInlineValidation,50);this.customValidate=this.customValidate.bind(this);this.handleDisabledChange();this.handleSlotChange();this.setCbValue();this.handleComponentChange()}connectedCallback(){this.attachSlotObserver()}disconnectedCallback(){if(this.mo)this.mo.disconnect();if(!this.nativeCbs?.length)return;this.nativeCbs.forEach((o=>{if(o)o.removeEventListener("invalid",this.handleInvalid)}))}render(){const o=this.grpId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return i(t,{key:"ee4778e9b98cd0402c3bed1420c44d2a44fb30ed",class:this.checkboxTypes},i("fieldset",{key:"2252a155b753a3f5924e5d73bdac04de56a19e10",disabled:this.disabled,class:{nanogroupcb:true,"show-error":this.showErrorMsg}},i("legend",{key:"ea26ee6569d03eb540c4d099e1133ab820c8b27a",id:o,class:{nanogroupcb__legend:true,"visually-hide":this.hideLegend}},i("slot",{key:"14f058c634da09e7b458192845ed6a86c9c9c1f2",name:"legend"},this.legend)),i("div",{key:"dc6386736f54d6827b7f670279e37df572920618",class:"nanogroupcb__cbs",role:"group","aria-labelledby":o+" "+n},i("slot",{key:"c069527308c2b29d583818da1e43a1fad7792c21"})),(this.showInlineError||this.hasHelperSlot)&&i("div",{key:"243addf0ebfa9029fc0d2a5821dab2c85c707831",class:"nanogroupcb__more",id:n},this.showInlineError?i("div",{class:"nanogroupcb__error"},this.errorMessage):"",i("div",{key:"ea4892a826220bce2acef5508163a8a0a9248155",class:"nanogroupcb__help"},i("slot",{key:"f01808e9b52b79cf52c8f1b2412f9bef4c79183b",name:"helper"})))))}static get watchers(){return{value:["handleValuePropChange"],min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}}};let l=0;h.style=c;export{h as nano_checkbox_group};
+import{r as o,c as n,g as e,a as i}from"./index-6cc72cd9.js";import{g as t}from"./theme-d553c17a.js";import{d as s}from"./throttle-df960210.js";import{t as r,h as a}from"./renderer-4bc3e2dc.js";const c='.sc-nano-checkbox-group-h{box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, "currentcolor");--label-color--invalid:var(--nano-input-label-color-invalid, "currentcolor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{box-sizing:inherit}.types-tag.sc-nano-checkbox-group-h,.types-segment.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:6px;--control-margin-start:0}.types-checkbox.sc-nano-checkbox-group-h,.types-radio.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:6px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1.5;white-space:normal;display:block;inline-size:100%}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__legend.visually-hide.sc-nano-checkbox-group{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanogroupcb__more.sc-nano-checkbox-group{block-size:1em;margin-block:calc(var(--label-padding) - var(--control-margin-bottom)) var(--label-padding);margin-inline:3px 0;position:relative}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:flex;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end);margin-block:var(--control-margin-top) var(--control-margin-bottom)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end)}}';const h=c;const l=class{constructor(e){o(this,e);this.nanoChange=n(this,"nanoChange",7);this.nanoValidate=n(this,"nanoValidate",7)}mo;checkboxTypes;grpId=`nano-checkbox-group-${b++}`;ignoreValueSet=false;get host(){return e(this)}checkboxes;nativeCbs;errorMessage="";showErrorMsg=false;hasHelperSlot=false;validateOn="submitThenDirty";showInlineError=true;min=0;max=null;disabled=null;legend="";hideLegend=false;get invalid(){return this._invalid}_invalid=false;get validityMessage(){return this.errorMessage}value;handleValuePropChange(){this.nanoChange.emit(this.value);if(this.ignoreValueSet)return;this.setCbValue()}async reportValidity(o){return new Promise((n=>{if(o){this.customValidate();this.showInlineValidation()}setTimeout((()=>{n({isValid:!this.invalid,errorMessage:this.errorMessage})}),50)}))}async showError(o,n){let e;if(!this.checkboxes)return;if(n)e=this.checkboxes.find((o=>o.value===n));if(!e)e=this.checkboxes[0];if(!e)return;this.errorMessage=o;await e.setError(o);if(this.showInlineError)this.showInlineValidation()}nanoChange;nanoValidate;handleValueChange(o){if(o.target===this.host)return;this.setInternalValue();this.handleCbChange()}handleCbChange(){if(this.invalid){this.showErrorMsg=this._invalid=false}this.showErrorMsg=this._invalid=this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}customValidate(){if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;const o=this.nativeCbs.filter((o=>o?.type==="radio"));if(o&&o.length&&(this.showErrorMsg||this.validateOn==="dirty")){const n=o.find((o=>o.required));const e=o.filter((o=>o.checked));if(n&&e){this.checkboxes.forEach((o=>o.reportValidity(false)));return false}else if(n&&!e)return true}const n=this.nativeCbs.filter((o=>o?.type==="checkbox"));if(!n||!n.length)return;const e=n.filter((o=>o.checked));const i=n.find((o=>o.required));let t=false;if(i&&!e.find((o=>o===i)))return true;this.checkboxes.forEach(((o,n)=>{const i=this.nativeCbs[n];o.setError("");i.setCustomValidity("");if(this.min&&e.length<this.min){this.errorMessage=`You must select a minimum of ${this.min} values.`;t=true}if(this.max&&e.length>this.max){this.errorMessage=`Only up to ${this.max} values are allowed.`;t=true}if(t){o.setError(this.errorMessage,this.showErrorMsg);i.setCustomValidity(this.errorMessage)}}));return t}handleComponentChange(){if(!this.checkboxes?.length)return;this.checkboxTypes=t(this.checkboxes.map((o=>"types-"+(o.type||"checkbox"))));this.checkboxTypes["nano-checkbox-group"]=true}handleDisabledChange(){if(this.disabled===null||!this.checkboxes?.length)return;this.checkboxes.map((o=>o.disabled=this.disabled))}setInternalValue(){if(!this.nativeCbs?.length)return;this.ignoreValueSet=true;const o=this.nativeCbs.filter((o=>o?.type==="radio"));if(o?.length){this.value=o.find((o=>o.checked))?.value||null;return}this.value=this.checkboxes.flatMap((o=>o.checked?[o.value]:[]));requestAnimationFrame((()=>this.ignoreValueSet=false))}setCbValue(){this.checkboxes?.forEach((o=>{if(o.value===this.value||Array.isArray(this.value)&&this.value.includes(o.value)){o.checked=true}}))}attachSlotObserver(){if(!!this.mo||!window["MutationObserver"])return;const o=this.mo=new MutationObserver((()=>this.handleSlotChange()));o.observe(this.host,{childList:true})}async handleSlotChange(){this.checkboxes=Array.from(this.host.querySelectorAll(r("nano-checkbox")));this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]');this.nativeCbs=await Promise.all(this.checkboxes.reduce(((o,n)=>{o.push(n.getInputElement());return o}),[]));this.nativeCbs.forEach((o=>{if(o)o.addEventListener("invalid",this.handleInvalid)}))}handleInvalid=o=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(this.showInlineError)o.preventDefault();this.showInlineValidation(o)};showInlineValidation=o=>{if(!this.nativeCbs||!this.nativeCbs.length)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.showErrorMsg=false;this._invalid=false;this.nativeCbs.forEach(((o,n)=>{if(!o.validity.valid){this.errorMessage=o.validationMessage;this.showErrorMsg=true;this._invalid=true}}));this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:o})};componentWillLoad(){this.handleValueChange=this.handleValueChange.bind(this);this.handleValueChange=s(this.handleValueChange,1);this.showInlineValidation=s(this.showInlineValidation,50);this.customValidate=this.customValidate.bind(this);this.handleDisabledChange();this.handleSlotChange();this.setCbValue();this.handleComponentChange()}connectedCallback(){this.attachSlotObserver()}disconnectedCallback(){if(this.mo)this.mo.disconnect();if(!this.nativeCbs?.length)return;this.nativeCbs.forEach((o=>{if(o)o.removeEventListener("invalid",this.handleInvalid)}))}render(){const o=this.grpId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return a(i,{key:"93c54171d768c6ef41eeb1d7e24b8d80c83af780",class:this.checkboxTypes},a("fieldset",{key:"24457a9b9d1d5993eb2a6c78f2d39e057be99a2f",disabled:this.disabled,class:{nanogroupcb:true,"show-error":this.showErrorMsg}},a("legend",{key:"1e443d6d7970c8c3c8e03dbdc470d8cbf8ab60d2",id:o,class:{nanogroupcb__legend:true,"visually-hide":this.hideLegend}},a("slot",{key:"fc853be6da9fe11a8f2e82f5d3c458587227a8be",name:"legend"},this.legend)),a("div",{key:"f5f0ffae9ae4987cfdb3bad2ccf92c3334d08895",class:"nanogroupcb__cbs",role:"group","aria-labelledby":o+" "+n},a("slot",{key:"559dba12b4fe7ec3b791986487a3c3615c6a3a11"})),(this.showInlineError||this.hasHelperSlot)&&a("div",{key:"a1e9ce7fc24ec31ea12211073700670f08eb9f04",class:"nanogroupcb__more",id:n},this.showInlineError?a("div",{class:"nanogroupcb__error"},this.errorMessage):"",a("div",{key:"bb8bddba4822fe404c336b4c742c2865ff58c9d1",class:"nanogroupcb__help"},a("slot",{key:"22e8b1b90d45bf6883a291239d01b8dc90c9b4d9",name:"helper"})))))}static get watchers(){return{value:["handleValuePropChange"],min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}}};let b=0;l.style=h;export{l as nano_checkbox_group};
 //# sourceMappingURL=nano-checkbox-group.entry.js.map

package/dist/nano-components/nano-checkbox-group.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["checkboxGroupCss","NanoCheckboxGroupStyle0","CheckboxGroup","mo","checkboxTypes","grpId","grpIds","ignoreValueSet","checkboxes","nativeCbs","errorMessage","showErrorMsg","hasHelperSlot","validateOn","showInlineError","min","max","disabled","legend","hideLegend","invalid","this","_invalid","validityMessage","value","handleValuePropChange","nanoChange","emit","setCbValue","reportValidity","validateFirst","Promise","resolve","customValidate","showInlineValidation","setTimeout","isValid","showError","message","optVal","cb","find","c","setError","nanoValidate","handleValueChange","ev","target","host","setInternalValue","handleCbChange","length","onlyRadios","filter","type","required","checked","forEach","rd","onlyCbs","i","nativeCb","setCustomValidity","handleComponentChange","getClassMap","map","handleDisabledChange","radios","flatMap","requestAnimationFrame","Array","isArray","includes","attachSlotObserver","window","MutationObserver","handleSlotChange","observe","childList","from","querySelectorAll","querySelector","all","reduce","acc","push","getInputElement","addEventListener","handleInvalid","preventDefault","_i","validity","valid","validationMessage","originalEvent","componentWillLoad","bind","debounce","connectedCallback","disconnectedCallback","disconnect","removeEventListener","render","legendId","moreId","h","Host","key","class","nanogroupcb","id","nanogroupcb__legend","name","role"],"sources":["src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --control-margin-top: Margin between controls. Default depends on control type;\n   * @prop --control-margin-end: Margin between controls. Default depends on control type;\n   * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n   * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n   * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default #{tokens.$input-help-font-size};\n\n   * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{tokens.$input-help-color};\n\n   * @prop --label-color: Default #{tokens.$label-color};\n   * @prop --label-color--invalid: Default #{tokens.$label-color-invalid};\n   * @prop --label-font-size: Default #{tokens.$label-font-size};\n   * @prop --label-padding: space between legend and control. Default #{tokens.$input-padding-bottom};\n  */\n\n  --control-margin-top: 0;\n  --control-margin-end: 0;\n  --control-margin-bottom: 0;\n  --control-margin-start: 0;\n  --invalid-msg-color: #{tokens.nano-color(danger, base)};\n  --invalid-msg-font-size: #{tokens.$input-help-font-size};\n  --help-msg-color: #{tokens.$input-help-color};\n  --label-color: #{tokens.$label-color};\n  --label-color--invalid: #{tokens.$label-color-invalid};\n  --label-font-size: #{tokens.$label-font-size};\n  --label-padding: #{tokens.$input-padding-bottom};\n\n  display: block;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host(.types-tag),\n:host(.types-segment) {\n  --control-margin-top: 0;\n  --control-margin-end: 8px;\n  --control-margin-bottom: 6px;\n  --control-margin-start: 0;\n}\n\n:host(.types-checkbox),\n:host(.types-radio) {\n  --control-margin-top: 0;\n  --control-margin-end: 10px;\n  --control-margin-bottom: 6px;\n  --control-margin-start: 0;\n}\n\n.nanogroupcb {\n  border: none;\n  margin: 0;\n  padding: 0;\n\n  &__error,\n  &__help,\n  &__more {\n    display: block;\n    inline-size: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__legend {\n    font-size: var(--label-font-size);\n    padding: 0 0 var(--label-padding);\n    margin: 0;\n    line-height: 1.5;\n    white-space: normal;\n    display: block;\n    inline-size: 100%;\n\n    :host([invalid]:not([invalid='false'])) & {\n      color: var(--label-color--invalid);\n    }\n\n    &.visually-hide {\n      @include mx.visually-hide;\n    }\n  }\n\n  &__more {\n    block-size: 1em;\n    margin-block:\n      calc(\n        var(--label-padding) - var(--control-margin-bottom)\n      ) var(--label-padding);\n    margin-inline: 3px 0;\n    position: relative;\n  }\n\n  &__error,\n  &__help {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    position: absolute;\n    font-size: var(--invalid-msg-font-size);\n    line-height: 1.2;\n    transition: 0.3s ease-out opacity;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__error {\n    color: var(--invalid-msg-color);\n    opacity: 0;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__help {\n    font-style: italic;\n    opacity: 1;\n    color: var(--help-msg-color);\n\n    .show-error & {\n      opacity: 0;\n    }\n  }\n\n  &__cbs {\n    margin: 0;\n    padding: 0;\n    line-height: 1;\n    display: flex;\n    flex-wrap: wrap;\n\n    ::slotted(*:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n      --check-base-size: 1.2em;\n\n      font-size: 0.85em;\n    }\n\n    ::slotted(*) {\n      margin-inline: var(--control-margin-start) var(--control-margin-end);\n      margin-block: var(--control-margin-top) var(--control-margin-bottom);\n    }\n  }\n}\n\n/* autoprefixer: ignore next */\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n  .nanogroupcb__cbs {\n    &::slotted(*),\n    ::slotted(*) {\n      margin-inline: var(--control-margin-start) var(--control-margin-end);\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  h,\n  ComponentInterface,\n  State,\n  Listen,\n  Watch,\n  Host,\n  Method,\n  Event,\n  EventEmitter,\n  Build,\n} from '@stencil/core';\nimport { getClassMap } from '../../utils/theme';\nimport { debounce } from '../../utils/throttle';\nimport type {\n  CssClassMap,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../types/shared';\n\n/**\n * `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n *\n * @slot - Used for grouping checkboxes inside the group wrapper\n * @slot legend - if you do not set a legend attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n */\n@Component({\n  tag: 'nano-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n  private mo?: MutationObserver;\n  private checkboxTypes: CssClassMap;\n  private grpId = `nano-checkbox-group-${grpIds++}`;\n  private ignoreValueSet = false;\n\n  @Element() host: HTMLNanoCheckboxGroupElement;\n\n  // internal state\n\n  @State() checkboxes?: HTMLNanoCheckboxElement[];\n  @State() nativeCbs: HTMLInputElement[];\n  @State() errorMessage: string = '';\n  @State() showErrorMsg = false;\n  @State() hasHelperSlot = false;\n\n  // public properties\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop() showInlineError = true;\n\n  /**\n   * The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n   * A validation error will be thrown if not enough controls are checked.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n   * Other controls will automatically be disabled upon reaching this number.\n   */\n  @Prop() max: number = null;\n\n  /**\n   * Disable all the nested form controls\n   */\n  @Prop({ reflect: true }) disabled: boolean | null = null;\n\n  /**\n   * A common label for children controls\n   */\n  @Prop() legend: string = '';\n\n  /**\n   * Visually hide the legend but still available to screen readers.\n   */\n  @Prop() hideLegend?: boolean = false;\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    return this.errorMessage;\n  }\n\n  /** The current, collective checkbox value */\n  @Prop({ mutable: true }) value: string[] | string;\n\n  @Watch('value')\n  handleValuePropChange() {\n    this.nanoChange.emit(this.value);\n\n    // this change is coming from a checkbox being checked\n    // so don't then change the checkbox state\n    // (would cause an infinite loop)\n    if (this.ignoreValueSet) return;\n\n    // value has changed via prop directly, so update the checkbox's state\n    this.setCbValue();\n  }\n\n  // Public methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return new Promise((resolve) => {\n      if (validateFirst) {\n        this.customValidate();\n        this.showInlineValidation();\n      }\n      setTimeout(() => {\n        resolve({\n          isValid: !this.invalid,\n          errorMessage: this.errorMessage,\n        });\n      }, 50);\n    });\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   * @param message - the error message to show\n   * @param optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)\n   */\n  @Method()\n  async showError(message: string, optVal?: string) {\n    let cb: HTMLNanoCheckboxElement;\n    if (!this.checkboxes) return;\n    if (optVal) cb = this.checkboxes.find((c) => c.value === optVal);\n    if (!cb) cb = this.checkboxes[0];\n    if (!cb) return;\n\n    this.errorMessage = message;\n    await cb.setError(message);\n    if (this.showInlineError) this.showInlineValidation();\n  }\n\n  // Events\n\n  /**\n   * Called when a nested checkbox changes\n   */\n  @Event() nanoChange: EventEmitter<string | string[]>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // listeners & watchers\n\n  @Listen('nanoChange')\n  handleValueChange(ev: CustomEvent) {\n    if (ev.target === this.host) return;\n    this.setInternalValue();\n    this.handleCbChange();\n  }\n\n  /**\n   * Notes on validation... custom validation messages should be set\n   * no matter whether we show inline messages or native html5.\n   * this will mean forms cannot submit when there are pending validation issues.\n   */\n  @Watch('min')\n  @Watch('max')\n  handleCbChange() {\n    if (this.invalid) {\n      this.showErrorMsg = this._invalid = false;\n    }\n    this.showErrorMsg = this._invalid = this.customValidate();\n\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  @Watch('nativeCbs')\n  customValidate() {\n    if (\n      !Build.isBrowser ||\n      !this.nativeCbs ||\n      !this.nativeCbs.length ||\n      !this.checkboxes\n    )\n      return;\n\n    const onlyRadios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n\n    if (\n      onlyRadios &&\n      onlyRadios.length &&\n      (this.showErrorMsg || this.validateOn === 'dirty')\n    ) {\n      const required = onlyRadios.find((cb) => cb.required);\n      const checked = onlyRadios.filter((cb) => cb.checked);\n\n      if (required && checked) {\n        this.checkboxes.forEach((rd) => rd.reportValidity(false));\n        return false;\n      } else if (required && !checked) return true;\n    }\n\n    // we only care about checkbox controls.\n    const onlyCbs = this.nativeCbs.filter((cb) => cb?.type === 'checkbox');\n    if (!onlyCbs || !onlyCbs.length) return;\n\n    const checked = onlyCbs.filter((cb) => cb.checked);\n    const required = onlyCbs.find((cb) => cb.required);\n    let invalid = false;\n\n    if (required && !checked.find((cb) => cb === required)) return true;\n\n    this.checkboxes.forEach((cb, i) => {\n      const nativeCb = this.nativeCbs[i];\n      cb.setError('');\n      nativeCb.setCustomValidity('');\n\n      if (this.min && checked.length < this.min) {\n        this.errorMessage = `You must select a minimum of ${this.min} values.`;\n        invalid = true;\n      }\n      if (this.max && checked.length > this.max) {\n        this.errorMessage = `Only up to ${this.max} values are allowed.`;\n        invalid = true;\n      }\n\n      if (invalid) {\n        cb.setError(this.errorMessage, this.showErrorMsg);\n        // bit fugly. We're just doing this 'cos stencil\n        // methods are async and we want the validity message\n        // asap to keep things in sync\n        nativeCb.setCustomValidity(this.errorMessage);\n      }\n    });\n    return invalid;\n  }\n\n  @Watch('checkboxes')\n  handleComponentChange() {\n    if (!this.checkboxes?.length) return;\n\n    this.checkboxTypes = getClassMap(\n      this.checkboxes.map((cb) => 'types-' + (cb.type || 'checkbox'))\n    );\n  }\n\n  @Watch('disabled')\n  @Watch('checkboxes')\n  handleDisabledChange() {\n    if (this.disabled === null || !this.checkboxes?.length) return;\n    this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n  }\n\n  // private methods\n\n  private setInternalValue() {\n    if (!this.nativeCbs?.length) return;\n\n    this.ignoreValueSet = true;\n    const radios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n    if (radios?.length) {\n      this.value = radios.find((cb) => cb.checked)?.value || null;\n      return;\n    }\n    this.value = this.checkboxes.flatMap((cb) =>\n      cb.checked ? [cb.value] : []\n    );\n    requestAnimationFrame(() => (this.ignoreValueSet = false));\n  }\n\n  private setCbValue() {\n    this.checkboxes?.forEach((cb) => {\n      if (\n        cb.value === this.value ||\n        (Array.isArray(this.value) && this.value.includes(cb.value))\n      ) {\n        cb.checked = true;\n      }\n    });\n  }\n\n  private attachSlotObserver() {\n    if (!!this.mo || !window['MutationObserver']) return;\n    const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n    mo.observe(this.host, { childList: true });\n  }\n\n  private async handleSlotChange() {\n    this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n    this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    this.nativeCbs = await Promise.all(\n      this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n        acc.push(cb.getInputElement());\n        return acc;\n      }, [])\n    );\n\n    this.nativeCbs.forEach((cb) => {\n      if (cb) cb.addEventListener('invalid', this.handleInvalid);\n    });\n  }\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit') {\n      this._invalid = this.showErrorMsg = this.customValidate();\n    }\n    if (this.showInlineError) ev.preventDefault();\n\n    this.showInlineValidation(ev);\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (!this.nativeCbs || !this.nativeCbs.length) return;\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.showErrorMsg = false;\n    this._invalid = false;\n\n    this.nativeCbs.forEach((cb, _i) => {\n      if (!cb.validity.valid) {\n        this.errorMessage = cb.validationMessage;\n        this.showErrorMsg = true;\n        this._invalid = true;\n      }\n    });\n\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  // stencil hooks\n\n  componentWillLoad() {\n    this.handleValueChange = this.handleValueChange.bind(this);\n    this.handleValueChange = debounce(this.handleValueChange, 1);\n    this.showInlineValidation = debounce(this.showInlineValidation, 50);\n    this.customValidate = this.customValidate.bind(this);\n    this.handleDisabledChange();\n    this.handleSlotChange();\n    this.setCbValue();\n    this.handleComponentChange();\n  }\n\n  connectedCallback() {\n    this.attachSlotObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n    if (!this.nativeCbs?.length) return;\n\n    this.nativeCbs.forEach((cb) => {\n      if (cb) cb.removeEventListener('invalid', this.handleInvalid);\n    });\n  }\n\n  render() {\n    const legendId = this.grpId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';\n\n    return (\n      <Host class={this.checkboxTypes}>\n        <fieldset\n          disabled={this.disabled}\n          class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n        >\n          <legend\n            id={legendId}\n            class={{\n              nanogroupcb__legend: true,\n              'visually-hide': this.hideLegend,\n            }}\n          >\n            <slot name=\"legend\">{this.legend}</slot>\n          </legend>\n          <div\n            class=\"nanogroupcb__cbs\"\n            role=\"group\"\n            aria-labelledby={legendId + ' ' + moreId}\n          >\n            <slot />\n          </div>\n          {(this.showInlineError || this.hasHelperSlot) && (\n            <div class=\"nanogroupcb__more\" id={moreId}>\n              {this.showInlineError ? (\n                <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n              ) : (\n                ''\n              )}\n              <div class=\"nanogroupcb__help\">\n                <slot name=\"helper\" />\n              </div>\n            </div>\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\nlet grpIds = 0;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["checkboxGroupCss","NanoCheckboxGroupStyle0","CheckboxGroup","mo","checkboxTypes","grpId","grpIds","ignoreValueSet","checkboxes","nativeCbs","errorMessage","showErrorMsg","hasHelperSlot","validateOn","showInlineError","min","max","disabled","legend","hideLegend","invalid","this","_invalid","validityMessage","value","handleValuePropChange","nanoChange","emit","setCbValue","reportValidity","validateFirst","Promise","resolve","customValidate","showInlineValidation","setTimeout","isValid","showError","message","optVal","cb","find","c","setError","nanoValidate","handleValueChange","ev","target","host","setInternalValue","handleCbChange","length","onlyRadios","filter","type","required","checked","forEach","rd","onlyCbs","i","nativeCb","setCustomValidity","handleComponentChange","getClassMap","map","handleDisabledChange","radios","flatMap","requestAnimationFrame","Array","isArray","includes","attachSlotObserver","window","MutationObserver","handleSlotChange","observe","childList","from","querySelectorAll","transformTag","querySelector","all","reduce","acc","push","getInputElement","addEventListener","handleInvalid","preventDefault","_i","validity","valid","validationMessage","originalEvent","componentWillLoad","bind","debounce","connectedCallback","disconnectedCallback","disconnect","removeEventListener","render","legendId","moreId","h","Host","key","class","nanogroupcb","id","nanogroupcb__legend","name","role"],"sources":["src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --control-margin-top: Margin between controls. Default depends on control type;\n   * @prop --control-margin-end: Margin between controls. Default depends on control type;\n   * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n   * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n   * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default #{tokens.$input-help-font-size};\n\n   * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{tokens.$input-help-color};\n\n   * @prop --label-color: Default #{tokens.$label-color};\n   * @prop --label-color--invalid: Default #{tokens.$label-color-invalid};\n   * @prop --label-font-size: Default #{tokens.$label-font-size};\n   * @prop --label-padding: space between legend and control. Default #{tokens.$input-padding-bottom};\n  */\n\n  --control-margin-top: 0;\n  --control-margin-end: 0;\n  --control-margin-bottom: 0;\n  --control-margin-start: 0;\n  --invalid-msg-color: #{tokens.nano-color(danger, base)};\n  --invalid-msg-font-size: #{tokens.$input-help-font-size};\n  --help-msg-color: #{tokens.$input-help-color};\n  --label-color: #{tokens.$label-color};\n  --label-color--invalid: #{tokens.$label-color-invalid};\n  --label-font-size: #{tokens.$label-font-size};\n  --label-padding: #{tokens.$input-padding-bottom};\n\n  display: block;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host(.types-tag),\n:host(.types-segment) {\n  --control-margin-top: 0;\n  --control-margin-end: 8px;\n  --control-margin-bottom: 6px;\n  --control-margin-start: 0;\n}\n\n:host(.types-checkbox),\n:host(.types-radio) {\n  --control-margin-top: 0;\n  --control-margin-end: 10px;\n  --control-margin-bottom: 6px;\n  --control-margin-start: 0;\n}\n\n.nanogroupcb {\n  border: none;\n  margin: 0;\n  padding: 0;\n\n  &__error,\n  &__help,\n  &__more {\n    display: block;\n    inline-size: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__legend {\n    font-size: var(--label-font-size);\n    padding: 0 0 var(--label-padding);\n    margin: 0;\n    line-height: 1.5;\n    white-space: normal;\n    display: block;\n    inline-size: 100%;\n\n    :host([invalid]:not([invalid='false'])) & {\n      color: var(--label-color--invalid);\n    }\n\n    &.visually-hide {\n      @include mx.visually-hide;\n    }\n  }\n\n  &__more {\n    block-size: 1em;\n    margin-block:\n      calc(\n        var(--label-padding) - var(--control-margin-bottom)\n      ) var(--label-padding);\n    margin-inline: 3px 0;\n    position: relative;\n  }\n\n  &__error,\n  &__help {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    position: absolute;\n    font-size: var(--invalid-msg-font-size);\n    line-height: 1.2;\n    transition: 0.3s ease-out opacity;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__error {\n    color: var(--invalid-msg-color);\n    opacity: 0;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__help {\n    font-style: italic;\n    opacity: 1;\n    color: var(--help-msg-color);\n\n    .show-error & {\n      opacity: 0;\n    }\n  }\n\n  &__cbs {\n    margin: 0;\n    padding: 0;\n    line-height: 1;\n    display: flex;\n    flex-wrap: wrap;\n\n    ::slotted(*:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n      --check-base-size: 1.2em;\n\n      font-size: 0.85em;\n    }\n\n    ::slotted(*) {\n      margin-inline: var(--control-margin-start) var(--control-margin-end);\n      margin-block: var(--control-margin-top) var(--control-margin-bottom);\n    }\n  }\n}\n\n/* autoprefixer: ignore next */\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n  .nanogroupcb__cbs {\n    &::slotted(*),\n    ::slotted(*) {\n      margin-inline: var(--control-margin-start) var(--control-margin-end);\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  ComponentInterface,\n  State,\n  Listen,\n  Watch,\n  Host,\n  Method,\n  Event,\n  EventEmitter,\n  Build,\n} from '@stencil/core';\nimport { getClassMap } from '../../utils/theme';\nimport { debounce } from '../../utils/throttle';\nimport { transformTag, h } from '../../utils/renderer';\nimport type {\n  CssClassMap,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../types/shared';\n\n/**\n * `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n *\n * @slot - Used for grouping checkboxes inside the group wrapper\n * @slot legend - if you do not set a legend attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n */\n@Component({\n  tag: 'nano-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n  private mo?: MutationObserver;\n  private checkboxTypes: CssClassMap;\n  private grpId = `nano-checkbox-group-${grpIds++}`;\n  private ignoreValueSet = false;\n\n  @Element() host: HTMLNanoCheckboxGroupElement;\n\n  // internal state\n\n  @State() checkboxes?: HTMLNanoCheckboxElement[];\n  @State() nativeCbs: HTMLInputElement[];\n  @State() errorMessage: string = '';\n  @State() showErrorMsg = false;\n  @State() hasHelperSlot = false;\n\n  // public properties\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop() showInlineError = true;\n\n  /**\n   * The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n   * A validation error will be thrown if not enough controls are checked.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n   * Other controls will automatically be disabled upon reaching this number.\n   */\n  @Prop() max: number = null;\n\n  /**\n   * Disable all the nested form controls\n   */\n  @Prop({ reflect: true }) disabled: boolean | null = null;\n\n  /**\n   * A common label for children controls\n   */\n  @Prop() legend: string = '';\n\n  /**\n   * Visually hide the legend but still available to screen readers.\n   */\n  @Prop() hideLegend?: boolean = false;\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    return this.errorMessage;\n  }\n\n  /** The current, collective checkbox value */\n  @Prop({ mutable: true }) value: string[] | string;\n\n  @Watch('value')\n  handleValuePropChange() {\n    this.nanoChange.emit(this.value);\n\n    // this change is coming from a checkbox being checked\n    // so don't then change the checkbox state\n    // (would cause an infinite loop)\n    if (this.ignoreValueSet) return;\n\n    // value has changed via prop directly, so update the checkbox's state\n    this.setCbValue();\n  }\n\n  // Public methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return new Promise((resolve) => {\n      if (validateFirst) {\n        this.customValidate();\n        this.showInlineValidation();\n      }\n      setTimeout(() => {\n        resolve({\n          isValid: !this.invalid,\n          errorMessage: this.errorMessage,\n        });\n      }, 50);\n    });\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   * @param message - the error message to show\n   * @param optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)\n   */\n  @Method()\n  async showError(message: string, optVal?: string) {\n    let cb: HTMLNanoCheckboxElement;\n    if (!this.checkboxes) return;\n    if (optVal) cb = this.checkboxes.find((c) => c.value === optVal);\n    if (!cb) cb = this.checkboxes[0];\n    if (!cb) return;\n\n    this.errorMessage = message;\n    await cb.setError(message);\n    if (this.showInlineError) this.showInlineValidation();\n  }\n\n  // Events\n\n  /**\n   * Called when a nested checkbox changes\n   */\n  @Event() nanoChange: EventEmitter<string | string[]>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // listeners & watchers\n\n  @Listen('nanoChange')\n  handleValueChange(ev: CustomEvent) {\n    if (ev.target === this.host) return;\n    this.setInternalValue();\n    this.handleCbChange();\n  }\n\n  /**\n   * Notes on validation... custom validation messages should be set\n   * no matter whether we show inline messages or native html5.\n   * this will mean forms cannot submit when there are pending validation issues.\n   */\n  @Watch('min')\n  @Watch('max')\n  handleCbChange() {\n    if (this.invalid) {\n      this.showErrorMsg = this._invalid = false;\n    }\n    this.showErrorMsg = this._invalid = this.customValidate();\n\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  @Watch('nativeCbs')\n  customValidate() {\n    if (\n      !Build.isBrowser ||\n      !this.nativeCbs ||\n      !this.nativeCbs.length ||\n      !this.checkboxes\n    )\n      return;\n\n    const onlyRadios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n\n    if (\n      onlyRadios &&\n      onlyRadios.length &&\n      (this.showErrorMsg || this.validateOn === 'dirty')\n    ) {\n      const required = onlyRadios.find((cb) => cb.required);\n      const checked = onlyRadios.filter((cb) => cb.checked);\n\n      if (required && checked) {\n        this.checkboxes.forEach((rd) => rd.reportValidity(false));\n        return false;\n      } else if (required && !checked) return true;\n    }\n\n    // we only care about checkbox controls.\n    const onlyCbs = this.nativeCbs.filter((cb) => cb?.type === 'checkbox');\n    if (!onlyCbs || !onlyCbs.length) return;\n\n    const checked = onlyCbs.filter((cb) => cb.checked);\n    const required = onlyCbs.find((cb) => cb.required);\n    let invalid = false;\n\n    if (required && !checked.find((cb) => cb === required)) return true;\n\n    this.checkboxes.forEach((cb, i) => {\n      const nativeCb = this.nativeCbs[i];\n      cb.setError('');\n      nativeCb.setCustomValidity('');\n\n      if (this.min && checked.length < this.min) {\n        this.errorMessage = `You must select a minimum of ${this.min} values.`;\n        invalid = true;\n      }\n      if (this.max && checked.length > this.max) {\n        this.errorMessage = `Only up to ${this.max} values are allowed.`;\n        invalid = true;\n      }\n\n      if (invalid) {\n        cb.setError(this.errorMessage, this.showErrorMsg);\n        // bit fugly. We're just doing this 'cos stencil\n        // methods are async and we want the validity message\n        // asap to keep things in sync\n        nativeCb.setCustomValidity(this.errorMessage);\n      }\n    });\n    return invalid;\n  }\n\n  @Watch('checkboxes')\n  handleComponentChange() {\n    if (!this.checkboxes?.length) return;\n\n    this.checkboxTypes = getClassMap(\n      this.checkboxes.map((cb) => 'types-' + (cb.type || 'checkbox'))\n    );\n    this.checkboxTypes['nano-checkbox-group'] = true;\n  }\n\n  @Watch('disabled')\n  @Watch('checkboxes')\n  handleDisabledChange() {\n    if (this.disabled === null || !this.checkboxes?.length) return;\n    this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n  }\n\n  // private methods\n\n  private setInternalValue() {\n    if (!this.nativeCbs?.length) return;\n\n    this.ignoreValueSet = true;\n    const radios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n    if (radios?.length) {\n      this.value = radios.find((cb) => cb.checked)?.value || null;\n      return;\n    }\n    this.value = this.checkboxes.flatMap((cb) =>\n      cb.checked ? [cb.value] : []\n    );\n    requestAnimationFrame(() => (this.ignoreValueSet = false));\n  }\n\n  private setCbValue() {\n    this.checkboxes?.forEach((cb) => {\n      if (\n        cb.value === this.value ||\n        (Array.isArray(this.value) && this.value.includes(cb.value))\n      ) {\n        cb.checked = true;\n      }\n    });\n  }\n\n  private attachSlotObserver() {\n    if (!!this.mo || !window['MutationObserver']) return;\n    const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n    mo.observe(this.host, { childList: true });\n  }\n\n  private async handleSlotChange() {\n    this.checkboxes = Array.from(\n      this.host.querySelectorAll(transformTag('nano-checkbox'))\n    );\n    this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    this.nativeCbs = await Promise.all(\n      this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n        acc.push(cb.getInputElement());\n        return acc;\n      }, [])\n    );\n\n    this.nativeCbs.forEach((cb) => {\n      if (cb) cb.addEventListener('invalid', this.handleInvalid);\n    });\n  }\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit') {\n      this._invalid = this.showErrorMsg = this.customValidate();\n    }\n    if (this.showInlineError) ev.preventDefault();\n\n    this.showInlineValidation(ev);\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (!this.nativeCbs || !this.nativeCbs.length) return;\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.showErrorMsg = false;\n    this._invalid = false;\n\n    this.nativeCbs.forEach((cb, _i) => {\n      if (!cb.validity.valid) {\n        this.errorMessage = cb.validationMessage;\n        this.showErrorMsg = true;\n        this._invalid = true;\n      }\n    });\n\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  // stencil hooks\n\n  componentWillLoad() {\n    this.handleValueChange = this.handleValueChange.bind(this);\n    this.handleValueChange = debounce(this.handleValueChange, 1);\n    this.showInlineValidation = debounce(this.showInlineValidation, 50);\n    this.customValidate = this.customValidate.bind(this);\n    this.handleDisabledChange();\n    this.handleSlotChange();\n    this.setCbValue();\n    this.handleComponentChange();\n  }\n\n  connectedCallback() {\n    this.attachSlotObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n    if (!this.nativeCbs?.length) return;\n\n    this.nativeCbs.forEach((cb) => {\n      if (cb) cb.removeEventListener('invalid', this.handleInvalid);\n    });\n  }\n\n  render() {\n    const legendId = this.grpId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';\n\n    return (\n      <Host class={this.checkboxTypes}>\n        <fieldset\n          disabled={this.disabled}\n          class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n        >\n          <legend\n            id={legendId}\n            class={{\n              nanogroupcb__legend: true,\n              'visually-hide': this.hideLegend,\n            }}\n          >\n            <slot name=\"legend\">{this.legend}</slot>\n          </legend>\n          <div\n            class=\"nanogroupcb__cbs\"\n            role=\"group\"\n            aria-labelledby={legendId + ' ' + moreId}\n          >\n            <slot />\n          </div>\n          {(this.showInlineError || this.hasHelperSlot) && (\n            <div class=\"nanogroupcb__more\" id={moreId}>\n              {this.showInlineError ? (\n                <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n              ) : (\n                ''\n              )}\n              <div class=\"nanogroupcb__help\">\n                <slot name=\"helper\" />\n              </div>\n            </div>\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\nlet grpIds = 0;\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-checkbox.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as e,c,g as n,h as o,a}from"./index-3118109b.js";import{f as s}from"./focus-visible-e5f02c46.js";import{c as i}from"./theme-d553c17a.js";const r='.sc-nano-checkbox-h{box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--invalid-shadow:0 0 0 0.1875rem  #ef4135;--padding:initial;--check-bg-color:#fff;--check-border-color:#b5aea7;--check-border-size:1px;--check-border-style:var(--check-border-size) solid var(--check-border-color);--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--label-spacing:10px 0;--tagbox-rgb:144 198 231;--tagbox-border-color:rgb(var(--tagbox-rgb) / 50%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 20%);--tagbox-border-radius:0;--segment-color:#007495;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgb(0 0 0 / 20%);--cb-border-radius:2px;--radio-border-radius:50%;--switch-inactive-color:rgb(181 174 167 / 70%);--switch-active-color:#007495;display:inline-block;max-inline-size:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=radio][checked].sc-nano-checkbox-h:not([checked=false]){--check-border-size:0.3125em}[type=segment].sc-nano-checkbox-h{--check-border-style:none;--control-padding:0.7em 1em 0.7em 1em}[type=segment-pill].sc-nano-checkbox-h{--check-border-color:rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgb(var(--tagbox-rgb) / 80%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 50%)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104 117 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:flex;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius, 3px);font-size:var(--check-base-size);position:relative;block-size:1.5em;inline-size:1.5em;min-inline-size:1.5em;border:var(--check-border-style);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:"";inset-inline-start:calc(0.725em - var(--check-border-size));inset-block-start:calc(0.725em - var(--check-border-size));inline-size:0;block-size:0;border:2px solid var(--check-checked-higlight-color);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:"";inset-inline-start:calc(0.825em - var(--check-border-size));inset-block-start:calc(0.825em - var(--check-border-size));block-size:0;inline-size:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;transform:rotate(0deg) scale(0);opacity:1;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__input--switch.sc-nano-checkbox{border-radius:1em !important;inline-size:2.4em;block-size:1.3em;background:var(--switch-inactive-color)}[type=switch].sc-nano-checkbox-h:not([disabled]) .nanocb__input--switch.sc-nano-checkbox:hover::after{scale:1.1 1}.nanocb__input--switch.sc-nano-checkbox::after{position:relative;content:"";display:block;border-radius:inherit;block-size:80%;inline-size:40%;background:var(--check-checked-higlight-color);transform-origin:left;inset-inline-start:6%;inset-block-start:10%;transition:0.1s ease scale, 0.15s ease left}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow)}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--invalid-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border-color:var(--check-checked-border-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{color:var(--check-checked-higlight-color);background-color:var(--check-checked-bg-color);box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-checked-higlight-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::after{border:solid var(--check-checked-border-color);border-width:0 0.125em 0.125em 0;opacity:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::before{border-radius:var(--radio-border-radius)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:rotate(45deg) scale(1);opacity:1;inset-inline-start:calc(0.575em - var(--check-border-size));inset-block-start:calc(0.2875em - var(--check-border-size));inline-size:0.375em;block-size:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--switch.sc-nano-checkbox{background:var(--switch-active-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--switch.sc-nano-checkbox::after{inset-inline-start:56%;transform-origin:right}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:scale(1);opacity:1;inset-inline-start:0.3125em;inset-block-start:0;inline-size:0.7em;block-size:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-inline:var(--label-spacing);padding-block:0;display:flex;align-items:center;line-height:1;flex:1;justify-content:space-between}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);box-shadow:var(--segment-shadow);display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);align-items:center;inline-size:100%}.sc-nano-checkbox-h:first-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:var(--segment-border-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--segment-border-radius);border-inline-end:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0;border-inline-end:none}.sc-nano-checkbox-h:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:0;border-start-end-radius:var(--segment-border-radius);border-end-end-radius:var(--segment-border-radius);border-end-start-radius:0}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:400;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);transition:all 0.2s;border-radius:var(--cb-border-radius);inline-size:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:"+";margin-inline:0.3125em 0;margin-block:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;transform:rotate(0deg);transform-origin:center}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}';const t=r;let b=0;const h=class{constructor(n){e(this,n);this.nanoChange=c(this,"nanoChange",7);this.nanoFocus=c(this,"nanoFocus",7);this.nanoBlur=c(this,"nanoBlur",7)}inputId=`nano-cb-${b++}`;input;get host(){return n(this)}inputType="checkbox";hasFocus=false;checked=false;async handleCheckedChange(){if(!this.input)return;this.input.checked=this.checked;if(this.inputType==="radio"&&this.name&&this.checked){const e=this.host.closest("form");let c;if(e){c=Array.from(e.querySelectorAll(`nano-checkbox[name="${this.name}"]`))}else{c=Array.from(document.querySelectorAll(`nano-checkbox[name="${this.name}"]`))?.filter((e=>!e.closest("form")))}c.map((e=>{if(e!==this.host)e.checked=false}))}this.nanoChange.emit({value:this.value,checked:this.checked})}disabled=false;value="on";name;required=false;type="checkbox";typeChange(){if(["checkbox","switch","tag"].includes(this.type))this.inputType="checkbox";else this.inputType="radio"}label;indeterminate=false;handleIndeterminateChange(){this.checked=false;this.input.indeterminate=this.indeterminate}get invalid(){return this._invalid}_invalid=false;get validityMessage(){if(!this.input)return"";return this.input.validationMessage}color;form;nanoChange;nanoFocus;nanoBlur;async getInputElement(){if(this.input)return this.input}async reportValidity(e=false){if(e)this.input.reportValidity();this._invalid=!this.input.validity.valid;return{isValid:!this.invalid,errorMessage:this.input.validationMessage}}async setError(e,c=true){if(!this.input)return;if(c)this._invalid=!!e.length;this.input.setCustomValidity(e)}async setFocus(){if(this.input){this.input.focus();s.force(this.input)}}async removeFocus(){if(this.input){this.input.blur();s.force(this.input,false)}}onReset(e){const c=this.form?document.querySelector("#"+this.form):this.host.closest("form");if(!c||e.target!==this.host.closest("form"))return;this.checked=false}handleInvalid=e=>{this._invalid=!e.target.validity.valid};handleChange=e=>{this.checked=e.target.checked;this.indeterminate=false};handleFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};handleBlur=()=>{this.hasFocus=false;this.nanoBlur.emit()};isRadioChecked(){requestAnimationFrame((()=>this.checked=this.input.checked))}componentWillLoad(){this.typeChange()}componentDidLoad(){this.input.indeterminate=this.indeterminate;this.isRadioChecked();s.observe(this.input)}disconnectedCallback(){s.unobserve(this.input)}render(){const e=this.inputId+"-lbl";return o(a,{key:"6afed2e718ea4744a7f9dfccab87bb1db2d4586a",class:{...i(this.color)}},o("label",{key:"f5686febf4252f257c8351f88c76c7d9e5930a53",class:{nanocb:true,"nanocb--checked":this.checked,"nanocb--invalid":this.invalid,"nanocb--disabled":this.disabled,"nanocb--focused":this.hasFocus,"nanocb--indeterminate":this.indeterminate},htmlFor:this.inputId},o("input",{key:"37d6990dcea78794d01739627a68dc252c5e6c6e",type:this.inputType,name:this.name,form:this.form,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":e,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:e=>this.input=e,id:this.inputId,onInvalid:this.handleInvalid}),o("span",{key:"17ef69fb920d6d6f8524c1fe8dc2d0b7e0ce66d0",class:"nanocb__input nanocb__input--"+this.type}),o("div",{key:"369c14311913bdc03660271c86d41173b27c135b",id:e,class:"nanocb__label nanocb__label--"+this.type},this.label&&!!this.label.length&&o("span",{key:"52356a0bad26c8f505ffe9992e58e4eba8a6839a"},this.label),o("span",{key:"d049601e083379e90a65df3ecd309ae1ed731399",hidden:this.label&&!!this.label.length},o("slot",{key:"ded4ae2eac621e6811d2155702bdd916551b7a84"})))))}static get watchers(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}}};h.style=t;export{h as nano_checkbox};
+import{r as e,c,g as n,a as o}from"./index-6cc72cd9.js";import{f as a}from"./focus-visible-e5f02c46.js";import{c as s}from"./theme-d553c17a.js";import{t as i,h as r}from"./renderer-4bc3e2dc.js";const t='.sc-nano-checkbox-h{box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--invalid-shadow:0 0 0 0.1875rem  #ef4135;--padding:initial;--check-bg-color:#fff;--check-border-color:#b5aea7;--check-border-size:1px;--check-border-style:var(--check-border-size) solid var(--check-border-color);--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--label-spacing:10px 0;--tagbox-rgb:144 198 231;--tagbox-border-color:rgb(var(--tagbox-rgb) / 50%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 20%);--tagbox-border-radius:0;--segment-color:#007495;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgb(0 0 0 / 20%);--cb-border-radius:2px;--radio-border-radius:50%;--switch-inactive-color:rgb(181 174 167 / 70%);--switch-active-color:#007495;display:inline-block;max-inline-size:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=radio][checked].sc-nano-checkbox-h:not([checked=false]){--check-border-size:0.3125em}[type=segment].sc-nano-checkbox-h{--check-border-style:none;--control-padding:0.7em 1em 0.7em 1em}[type=segment-pill].sc-nano-checkbox-h{--check-border-color:rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgb(var(--tagbox-rgb) / 80%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 50%)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104 117 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:flex;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius, 3px);font-size:var(--check-base-size);position:relative;block-size:1.5em;inline-size:1.5em;min-inline-size:1.5em;border:var(--check-border-style);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:"";inset-inline-start:calc(0.725em - var(--check-border-size));inset-block-start:calc(0.725em - var(--check-border-size));inline-size:0;block-size:0;border:2px solid var(--check-checked-higlight-color);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:"";inset-inline-start:calc(0.825em - var(--check-border-size));inset-block-start:calc(0.825em - var(--check-border-size));block-size:0;inline-size:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;transform:rotate(0deg) scale(0);opacity:1;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__input--switch.sc-nano-checkbox{border-radius:1em !important;inline-size:2.4em;block-size:1.3em;background:var(--switch-inactive-color)}[type=switch].sc-nano-checkbox-h:not([disabled]) .nanocb__input--switch.sc-nano-checkbox:hover::after{scale:1.1 1}.nanocb__input--switch.sc-nano-checkbox::after{position:relative;content:"";display:block;border-radius:inherit;block-size:80%;inline-size:40%;background:var(--check-checked-higlight-color);transform-origin:left;inset-inline-start:6%;inset-block-start:10%;transition:0.1s ease scale, 0.15s ease left}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow)}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--invalid-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border-color:var(--check-checked-border-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{color:var(--check-checked-higlight-color);background-color:var(--check-checked-bg-color);box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-checked-higlight-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::after{border:solid var(--check-checked-border-color);border-width:0 0.125em 0.125em 0;opacity:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::before{border-radius:var(--radio-border-radius)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:rotate(45deg) scale(1);opacity:1;inset-inline-start:calc(0.575em - var(--check-border-size));inset-block-start:calc(0.2875em - var(--check-border-size));inline-size:0.375em;block-size:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--switch.sc-nano-checkbox{background:var(--switch-active-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--switch.sc-nano-checkbox::after{inset-inline-start:56%;transform-origin:right}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:scale(1);opacity:1;inset-inline-start:0.3125em;inset-block-start:0;inline-size:0.7em;block-size:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-inline:var(--label-spacing);padding-block:0;display:flex;align-items:center;line-height:1;flex:1;justify-content:space-between}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);box-shadow:var(--segment-shadow);display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);align-items:center;inline-size:100%}.sc-nano-checkbox-h:first-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:var(--segment-border-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--segment-border-radius);border-inline-end:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0;border-inline-end:none}.sc-nano-checkbox-h:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:0;border-start-end-radius:var(--segment-border-radius);border-end-end-radius:var(--segment-border-radius);border-end-start-radius:0}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:400;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);transition:all 0.2s;border-radius:var(--cb-border-radius);inline-size:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:"+";margin-inline:0.3125em 0;margin-block:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;transform:rotate(0deg);transform-origin:center}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}';const b=t;let h=0;const d=class{constructor(n){e(this,n);this.nanoChange=c(this,"nanoChange",7);this.nanoFocus=c(this,"nanoFocus",7);this.nanoBlur=c(this,"nanoBlur",7)}inputId=`nano-cb-${h++}`;input;get host(){return n(this)}inputType="checkbox";hasFocus=false;checked=false;async handleCheckedChange(){if(!this.input)return;this.input.checked=this.checked;if(this.inputType==="radio"&&this.name&&this.checked){const e=this.host.closest("form");let c;if(e){c=Array.from(e.querySelectorAll(`${i("nano-checkbox")}[name="${this.name}"]`))}else{c=Array.from(document.querySelectorAll(`${i("nano-checkbox")}[name="${this.name}"]`))?.filter((e=>!e.closest("form")))}c.map((e=>{if(e!==this.host)e.checked=false}))}this.nanoChange.emit({value:this.value,checked:this.checked})}disabled=false;value="on";name;required=false;type="checkbox";typeChange(){if(["checkbox","switch","tag"].includes(this.type))this.inputType="checkbox";else this.inputType="radio"}label;indeterminate=false;handleIndeterminateChange(){this.checked=false;this.input.indeterminate=this.indeterminate}get invalid(){return this._invalid}_invalid=false;get validityMessage(){if(!this.input)return"";return this.input.validationMessage}color;form;nanoChange;nanoFocus;nanoBlur;async getInputElement(){if(this.input)return this.input}async reportValidity(e=false){if(e)this.input.reportValidity();this._invalid=!this.input.validity.valid;return{isValid:!this.invalid,errorMessage:this.input.validationMessage}}async setError(e,c=true){if(!this.input)return;if(c)this._invalid=!!e.length;this.input.setCustomValidity(e)}async setFocus(){if(this.input){this.input.focus();a.force(this.input)}}async removeFocus(){if(this.input){this.input.blur();a.force(this.input,false)}}onReset(e){const c=this.form?document.querySelector("#"+this.form):this.host.closest("form");if(!c||e.target!==this.host.closest("form"))return;this.checked=false}handleInvalid=e=>{this._invalid=!e.target.validity.valid};handleChange=e=>{this.checked=e.target.checked;this.indeterminate=false};handleFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};handleBlur=()=>{this.hasFocus=false;this.nanoBlur.emit()};isRadioChecked(){requestAnimationFrame((()=>this.checked=this.input.checked))}componentWillLoad(){this.typeChange()}componentDidLoad(){this.input.indeterminate=this.indeterminate;this.isRadioChecked();a.observe(this.input)}disconnectedCallback(){a.unobserve(this.input)}render(){const e=this.inputId+"-lbl";return r(o,{key:"743ba20f7dc131a5df0dbef97f12682228b3a49d",class:{...s(this.color),"nano-checkbox":true}},r("label",{key:"9b0f1649bcf44a7685c3e1f91da816e7283f41e0",class:{nanocb:true,"nanocb--checked":this.checked,"nanocb--invalid":this.invalid,"nanocb--disabled":this.disabled,"nanocb--focused":this.hasFocus,"nanocb--indeterminate":this.indeterminate},htmlFor:this.inputId},r("input",{key:"77bac537123647d224667f66ef9d8a3ea732af9a",type:this.inputType,name:this.name,form:this.form,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":e,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:e=>this.input=e,id:this.inputId,onInvalid:this.handleInvalid}),r("span",{key:"6ee7540510d902daaf303edcc2a677e9819d3b00",class:"nanocb__input nanocb__input--"+this.type}),r("div",{key:"0ea0aea0ca852394ae4a3ccc6eb998e990d61f01",id:e,class:"nanocb__label nanocb__label--"+this.type},this.label&&!!this.label.length&&r("span",{key:"a1b43b59fc067cba5fd22b87add0c5352666ca2f"},this.label),r("span",{key:"e2a1abe3e02c9a3deeda47430b164a0b0f03982b",hidden:this.label&&!!this.label.length},r("slot",{key:"30738b530444fd2051465eb6ff9098ebb06e2e88"})))))}static get watchers(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}}};d.style=b;export{d as nano_checkbox};
 //# sourceMappingURL=nano-checkbox.entry.js.map

package/dist/nano-components/nano-checkbox.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["checkboxCss","NanoCheckboxStyle0","checkboxIds","Checkbox","inputId","input","inputType","hasFocus","checked","handleCheckedChange","this","name","form","host","closest","ctrls","Array","from","querySelectorAll","document","filter","radio","map","el","nanoChange","emit","value","disabled","required","type","typeChange","includes","label","indeterminate","handleIndeterminateChange","invalid","_invalid","validityMessage","validationMessage","color","nanoFocus","nanoBlur","getInputElement","reportValidity","validateFirst","validity","valid","isValid","errorMessage","setError","message","updateStatus","length","setCustomValidity","setFocus","focus","focusVisible","force","removeFocus","blur","onReset","e","querySelector","target","handleInvalid","ev","handleChange","handleFocus","handleBlur","isRadioChecked","requestAnimationFrame","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","render","labelId","h","Host","key","class","createColorClasses","nanocb","htmlFor","onBlur","onFocus","onChange","ref","id","onInvalid","hidden"],"sources":["src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{tokens.$control-invalid-style};\n   * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{tokens.$control-focus-style};\n   * @prop --padding: padding around radio and checkbox controls. Defaults to initial;\n   * @prop --control-padding: padding around tag and segmented controls text. Various defaults.\n   * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{map.get(tokens.$colors, white)};\n   * @prop --check-border-color: initial border color. Defaults  to #{map.get(tokens.$colors, palegrey)};\n   * @prop --check-border-size: initial border size. Default to 1px;\n   * @prop --check-border-style: Initial border style. Defaults to var(--check-border-size) solid var(--check-border-color);\n   * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{map.get(tokens.$colors, darkgrey)};\n   * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get(tokens.$colors, darkgrey)};\n   * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get(tokens.$colors, white)};\n   * @prop --check-base-size: Relative scaling size for check controls. Defaults to to inherit;\n\n   * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];\n   * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;\n   * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to #{mx.color-to-rgb-list(map.get(tokens.$colors, lightblue))};\n   * @prop --tagbox-border-color: Defaults to rgb(var(--tagbox-rgb) / 50%);\n   * @prop --tagbox-bg-color: Defaults to rgb(var(--tagbox-rgb) / 10%);\n   * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{map.get(tokens.$colors, blue)};\n   * @prop --segment-border-radius: Defaults to 3px;\n   * @prop --segment-shadow: Defaults to 0 1px 4px rgb(0 0 0 / 20%);\n   * @prop --switch-inactive-color: Defaults to rgb(#{mx.color-to-rgb-list(map.get(tokens.$colors, palegrey))} / 70%);\n   * @prop --switch-active-color: Defaults to #{map.get(tokens.$colors, blue)};\n  */\n\n  --focus-shadow: #{tokens.$control-focus-style};\n  --invalid-shadow: #{tokens.$control-focus-size + ' ' map.get(tokens.$colors, red)};\n  --padding: initial;\n  --check-bg-color: #{map.get(tokens.$colors, white)};\n  --check-border-color: #{map.get(tokens.$colors, palegrey)};\n  --check-border-size: 1px;\n  --check-border-style: var(--check-border-size) solid var(--check-border-color);\n  --check-checked-bg-color: #{map.get(tokens.$colors, darkgrey)};\n  --check-checked-border-color: #{map.get(tokens.$colors, darkgrey)};\n  --check-checked-higlight-color: #{map.get(tokens.$colors, white)};\n  --check-base-size: inherit;\n  --label-spacing: 10px 0;\n\n  // type specific\n\n  // tag\n  --tagbox-rgb: #{mx.color-to-rgb-list(map.get(tokens.$colors, lightblue))};\n  --tagbox-border-color: rgb(var(--tagbox-rgb) / 50%);\n  --tagbox-bg-color: rgb(var(--tagbox-rgb) / 20%);\n  --tagbox-border-radius: 0;\n\n  // segment\n  --segment-color: #{map.get(tokens.$colors, blue)};\n  --segment-border-radius: 3px;\n  --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n  // cb / radio\n  --cb-border-radius: 2px;\n  --radio-border-radius: 50%;\n\n  // switch\n  --switch-inactive-color: rgb(#{mx.color-to-rgb-list(map.get(tokens.$colors, palegrey))} / 70%);\n  --switch-active-color: #{map.get(tokens.$colors, blue)};\n\n  display: inline-block;\n  max-inline-size: 100%;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host([type='tag']) {\n  text-transform: uppercase;\n\n  --control-padding: 0.2rem 1rem;\n}\n\n:host([type='radio'][checked]):not([checked='false']) {\n  --check-border-size: 0.3125em;\n}\n\n:host([type='segment']) {\n  --check-border-style: none;\n  --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host([type='segment-pill']) {\n  --check-border-color: #{rgba(map.get(tokens.$colors, palegrey), 0.5)};\n  --segment-border-radius: 5px;\n  --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host(.nano-color) {\n  --tagbox-rgb: var(--nano-color-base-rgb);\n  --focus-shadow: #{tokens.$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n  --tagbox-border-color: rgb(var(--tagbox-rgb) / 80%);\n  --tagbox-bg-color: rgb(var(--tagbox-rgb) / 50%);\n}\n\n:host([has-focus]:not([has-focus='false'])) {\n  --cb-border-radius: 5px;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n\n  --tagbox-rgb: #{mx.color-to-rgb-list(map.get(tokens.$colors, mediumgrey))};\n  --check-bg-color: #{rgba(map.get(tokens.$colors, mediumgrey), 0.5)};\n  --check-checked-bg-color: #{rgba(map.get(tokens.$colors, mediumgrey), 0.5)};\n  --segment-color: #{map.get(tokens.$colors, darkgrey)};\n}\n\n.nanocb {\n  padding: var(--padding);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  line-height: 1.2;\n  position: relative;\n\n  // The mock, viewable 'input' control. Only relevant for controls where the label\n  // is outside / separate from the UI control (e.g. checkbox, radio, switch).\n\n  &__input {\n    border-radius: var(--cb-border-radius, 3px);\n    font-size: var(--check-base-size);\n    position: relative;\n    block-size: 1.5em;\n    inline-size: 1.5em;\n    min-inline-size: 1.5em;\n    border: var(--check-border-style);\n    box-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n    &::before {\n      border-radius: var(--cb-border-radius);\n      position: absolute;\n      content: '';\n      inset-inline-start: calc(0.725em - var(--check-border-size));\n      inset-block-start: calc(0.725em - var(--check-border-size));\n      inline-size: 0;\n      block-size: 0;\n      border: 2px solid var(--check-checked-higlight-color);\n      transform: scale(0);\n    }\n\n    &--radio {\n      border-radius: var(--radio-border-radius);\n      background-color: var(--check-bg-color);\n    }\n\n    &--checkbox {\n      background-color: var(--check-bg-color);\n\n      &::after {\n        border-radius: var(--cb-border-radius);\n        position: absolute;\n        content: '';\n        inset-inline-start: calc(0.825em - var(--check-border-size));\n        inset-block-start: calc(0.825em - var(--check-border-size));\n        block-size: 0;\n        inline-size: 0;\n        border: solid var(--check-checked-higlight-color);\n        border-width: 0 0.1875em 0.1875em 0;\n        transform: rotate(0deg) scale(0);\n        opacity: 1;\n        transition: all 0.15s ease-out;\n\n        .nanocb--indeterminate & {\n          border-width: 0 0 0.1875em;\n        }\n      }\n    }\n\n    &--switch {\n      border-radius: 1em !important;\n      inline-size: 2.4em;\n      block-size: 1.3em;\n      background: var(--switch-inactive-color);\n\n      :host([type=\"switch\"]:not([disabled])) & {\n        &:hover::after {\n          scale: 1.1 1;\n        }\n      }\n\n      &::after {\n        position: relative;\n        content: '';\n        display: block;\n        border-radius: inherit;\n        block-size: 80%;\n        inline-size: 40%;\n        background: var(--check-checked-higlight-color);\n        transform-origin: left;\n        inset-inline-start: 6%;\n        inset-block-start: 10%;\n        transition: .1s ease scale, .15s ease left;\n      }\n    }\n\n    &--segment,\n    &--segment-pill {\n      @include mx.visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n\n    &--tag {\n      @include mx.visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n  }\n\n  &--invalid:not(.nanocb--focused) {\n    .nanocb__input {\n      box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--invalid-shadow);\n\n      &--tag + .nanocb__label,\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        box-shadow: var(--invalid-shadow);\n        z-index: 1;\n      }\n    }\n  }\n\n  // The 'real' input control which we hide but use it's state for display\n  input {\n    @include mx.visually-hide();\n\n    &:focus ~ .nanocb__input {\n      box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--focus-shadow);\n    }\n\n    &.focus-visible:focus ~ .nanocb__input {\n      &--tag + .nanocb__label,\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        box-shadow: var(--focus-shadow);\n        z-index: 1;\n      }\n    }\n\n    &:checked ~ .nanocb__input {\n      border-radius: var(--cb-border-radius);\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border-color: var(--check-checked-border-color);\n\n      // segment / segment-pill active\n\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        color: var(--check-checked-higlight-color);\n        background-color: var(--check-checked-bg-color);\n        box-shadow: inset 0 3px 4px rgb(0 0 0 / 20%);\n      }\n\n      // radio active\n\n      &--radio {\n        border-radius: var(--radio-border-radius);\n        background-color: var(--check-checked-higlight-color);\n\n        &::after {\n          border: solid var(--check-checked-border-color);\n          border-width: 0 0.125em 0.125em 0;\n          opacity: 0;\n        }\n\n        &::before {\n          border-radius: var(--radio-border-radius);\n        }\n      }\n\n      // checkbox active\n\n      &--checkbox {\n        &::after {\n          transform: rotate(45deg) scale(1);\n          opacity: 1;\n          inset-inline-start: calc(0.575em - var(--check-border-size));\n          inset-block-start: calc(0.2875em - var(--check-border-size));\n          inline-size: 0.375em;\n          block-size: 0.75em;\n          border-radius: 0;\n        }\n      }\n\n      // tag active\n\n      &--tag + .nanocb__label::after {\n        transform: rotate(45deg);\n      }\n\n      // switch active\n\n      &--switch {\n        background: var(--switch-active-color);\n\n        &::after {\n          inset-inline-start: 56%;\n          transform-origin: right;\n        }\n      }\n    }\n\n    // indeterminate (only checkbox?)\n\n    &:indeterminate ~ .nanocb__input--checkbox {\n      border-radius: var(--input-border-radius, 5px);\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border: 0.125em solid var(--check-checked-bg-color);\n\n      &::after {\n        transform: scale(1);\n        opacity: 1;\n        inset-inline-start: 0.3125em;\n        inset-block-start: 0;\n        inline-size: 0.7em;\n        block-size: 0.7em;\n        border-radius: 0;\n      }\n    }\n  }\n\n  // The label\n  &__label {\n    padding-inline: var(--label-spacing);\n    padding-block: 0;\n    display: flex;\n    align-items: center;\n    line-height: 1;\n    flex: 1;\n    justify-content: space-between;\n\n    &--segment,\n    &--segment-pill {\n      border: var(--check-border-style);\n      border-radius: var(--segment-border-radius);\n      box-shadow: var(--segment-shadow);\n      display: inline-flex;\n      padding: var(--control-padding);\n      background: var(--check-bg-color);\n      color: var(--segment-color);\n      align-items: center;\n      inline-size: 100%;\n    }\n\n    &--segment-pill {\n      // first\n      :host(:first-of-type) & {\n        border-start-start-radius: var(--segment-border-radius);\n        border-start-end-radius: 0;\n        border-end-end-radius: 0;\n        border-end-start-radius: var(--segment-border-radius);\n        border-inline-end: none;\n      }\n\n      // middle\n      :host(:not(:last-of-type):not(:first-of-type)) & {\n        border-radius: 0;\n        border-inline-end: none;\n      }\n\n      // last\n      :host(:last-of-type) & {\n        border-start-start-radius: 0;\n        border-start-end-radius: var(--segment-border-radius);\n        border-end-end-radius: var(--segment-border-radius);\n        border-end-start-radius: 0;\n      }\n\n      // single\n      :host(:first-of-type:last-of-type) & {\n        border-radius: var(--segment-border-radius);\n        border: var(--check-border-style);\n      }\n    }\n\n    &--tag {\n      letter-spacing: 2px;\n      font-weight: 400;\n      font-size: 0.65em;\n      line-height: 1.4;\n      padding: var(--control-padding);\n      border: 2px solid #b5aea7;\n      border-color: var(--tagbox-border-color);\n      background-color: var(--tagbox-bg-color);\n      transition: all 0.2s;\n      border-radius: var(--cb-border-radius);\n      inline-size: 100%;\n\n      &::after {\n        content: '+';\n        margin-inline: 0.3125em 0;\n        margin-block: 0;\n        font-weight: 200;\n        position: relative;\n        font-family: inherit;\n        font-size: 1.8em;\n        display: inline-block;\n        transform: rotate(0deg);\n        transform-origin: center;\n      }\n\n      span {\n        display: block;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n  ComponentInterface,\n  State,\n  Watch,\n  Method,\n  Element,\n  Host,\n  Listen,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport type { ControlValidity, Color } from '../../types/shared';\n\nlet checkboxIds = 0;\n\n/**\n * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n *\n * @slot - if you do not set a label attribute, you can use this slot for more complex markup\n */\n@Component({\n  tag: 'nano-checkbox',\n  styleUrl: 'checkbox.scss',\n  scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n  private inputId = `nano-cb-${checkboxIds++}`;\n  private input: HTMLInputElement;\n\n  @Element() private host: HTMLNanoCheckboxElement;\n  @State() inputType: 'checkbox' | 'radio' = 'checkbox';\n\n  /** @internal */\n  @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n  /**\n   * checked property that can be used to get/set the value. accepts only boolean values\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  @Watch('checked')\n  async handleCheckedChange() {\n    if (!this.input) return;\n\n    this.input.checked = this.checked;\n\n    if (this.inputType === 'radio' && this.name && this.checked) {\n      const form = this.host.closest('form');\n      let ctrls: Element[];\n      if (form) {\n        ctrls = Array.from(\n          form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        );\n      } else {\n        ctrls = Array.from(\n          document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        )?.filter((radio) => !radio.closest('form'));\n      }\n      ctrls.map((el: HTMLNanoCheckboxElement) => {\n        if (el !== this.host) el.checked = false;\n      });\n    }\n    this.nanoChange.emit({ value: this.value, checked: this.checked });\n  }\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n   * it's only present when `checked` is true.\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Set to true to make the field required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Controls the underlying field type and style.\n   */\n  @Prop({ reflect: true }) type:\n    | 'radio'\n    | 'checkbox'\n    | 'tag'\n    | 'segment'\n    | 'switch'\n    | 'segment-pill' = 'checkbox';\n\n  @Watch('type')\n  typeChange() {\n    if (['checkbox', 'switch', 'tag'].includes(this.type))\n      this.inputType = 'checkbox';\n    else this.inputType = 'radio';\n  }\n\n  /**\n   * label property that can be used to set the label text. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n  @Watch('indeterminate')\n  handleIndeterminateChange() {\n    this.checked = false;\n    this.input.indeterminate = this.indeterminate;\n  }\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.input) return '';\n    return this.input.validationMessage;\n  }\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * The form element to associate the input with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * Emited when the checkbox is toggled\n   */\n  @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  /**\n   * Emited when the checkbox is focused\n   */\n  @Event() nanoFocus: EventEmitter;\n\n  /**\n   * Emited when the checkbox is blurred\n   */\n  @Event() nanoBlur: EventEmitter;\n\n  // public methods\n\n  /**\n   * Returns the native input control\n   * @returns the native input control\n   */\n  @Method()\n  async getInputElement() {\n    if (this.input) return this.input;\n  }\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n   */\n  @Method()\n  async reportValidity(\n    validateFirst: boolean = false\n  ): Promise<ControlValidity> {\n    if (validateFirst) this.input.reportValidity();\n    this._invalid = !this.input.validity.valid;\n\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.input.validationMessage,\n    };\n  }\n\n  /**\n   * Sets a custom validation message.\n   * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n   */\n  @Method()\n  async setError(message: string, updateStatus = true) {\n    if (!this.input) return;\n    if (updateStatus) this._invalid = !!message.length;\n    this.input.setCustomValidity(message);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) {\n      this.input.focus();\n      focusVisible.force(this.input);\n    }\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  @Method()\n  async removeFocus() {\n    if (this.input) {\n      this.input.blur();\n      focusVisible.force(this.input, false);\n    }\n  }\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.host.closest('form');\n    if (!form || e.target !== this.host.closest('form')) return;\n\n    this.checked = false;\n  }\n\n  // private handlers\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n  };\n\n  private handleChange = (ev: InputEvent) => {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.indeterminate = false;\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  /* Although many radio components can be 'checked',\n  the underlying control may not be. Check */\n  private isRadioChecked() {\n    requestAnimationFrame(() => (this.checked = this.input.checked));\n  }\n\n  // Stencil hooks\n\n  componentWillLoad() {\n    this.typeChange();\n  }\n\n  componentDidLoad() {\n    this.input.indeterminate = this.indeterminate;\n    this.isRadioChecked();\n    focusVisible.observe(this.input);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.input);\n  }\n\n  render() {\n    const labelId = this.inputId + '-lbl';\n\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <label\n          class={{\n            nanocb: true,\n            'nanocb--checked': this.checked,\n            'nanocb--invalid': this.invalid,\n            'nanocb--disabled': this.disabled,\n            'nanocb--focused': this.hasFocus,\n            'nanocb--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n        >\n          <input\n            type={this.inputType}\n            name={this.name}\n            form={this.form}\n            required={this.required}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            aria-labelledby={labelId}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            onChange={this.handleChange}\n            ref={(input) => (this.input = input)}\n            id={this.inputId}\n            onInvalid={this.handleInvalid}\n          />\n          <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n          <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n            {this.label && !!this.label.length && <span>{this.label}</span>}\n            <span hidden={this.label && !!this.label.length}>\n              <slot />\n            </span>\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["checkboxCss","NanoCheckboxStyle0","checkboxIds","Checkbox","inputId","input","inputType","hasFocus","checked","handleCheckedChange","this","name","form","host","closest","ctrls","Array","from","querySelectorAll","transformTag","document","filter","radio","map","el","nanoChange","emit","value","disabled","required","type","typeChange","includes","label","indeterminate","handleIndeterminateChange","invalid","_invalid","validityMessage","validationMessage","color","nanoFocus","nanoBlur","getInputElement","reportValidity","validateFirst","validity","valid","isValid","errorMessage","setError","message","updateStatus","length","setCustomValidity","setFocus","focus","focusVisible","force","removeFocus","blur","onReset","e","querySelector","target","handleInvalid","ev","handleChange","handleFocus","handleBlur","isRadioChecked","requestAnimationFrame","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","render","labelId","h","Host","key","class","createColorClasses","nanocb","htmlFor","onBlur","onFocus","onChange","ref","id","onInvalid","hidden"],"sources":["src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{tokens.$control-invalid-style};\n   * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{tokens.$control-focus-style};\n   * @prop --padding: padding around radio and checkbox controls. Defaults to initial;\n   * @prop --control-padding: padding around tag and segmented controls text. Various defaults.\n   * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{map.get(tokens.$colors, white)};\n   * @prop --check-border-color: initial border color. Defaults  to #{map.get(tokens.$colors, palegrey)};\n   * @prop --check-border-size: initial border size. Default to 1px;\n   * @prop --check-border-style: Initial border style. Defaults to var(--check-border-size) solid var(--check-border-color);\n   * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{map.get(tokens.$colors, darkgrey)};\n   * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get(tokens.$colors, darkgrey)};\n   * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get(tokens.$colors, white)};\n   * @prop --check-base-size: Relative scaling size for check controls. Defaults to to inherit;\n\n   * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];\n   * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;\n   * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to #{mx.color-to-rgb-list(map.get(tokens.$colors, lightblue))};\n   * @prop --tagbox-border-color: Defaults to rgb(var(--tagbox-rgb) / 50%);\n   * @prop --tagbox-bg-color: Defaults to rgb(var(--tagbox-rgb) / 10%);\n   * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{map.get(tokens.$colors, blue)};\n   * @prop --segment-border-radius: Defaults to 3px;\n   * @prop --segment-shadow: Defaults to 0 1px 4px rgb(0 0 0 / 20%);\n   * @prop --switch-inactive-color: Defaults to rgb(#{mx.color-to-rgb-list(map.get(tokens.$colors, palegrey))} / 70%);\n   * @prop --switch-active-color: Defaults to #{map.get(tokens.$colors, blue)};\n  */\n\n  --focus-shadow: #{tokens.$control-focus-style};\n  --invalid-shadow: #{tokens.$control-focus-size + ' ' map.get(tokens.$colors, red)};\n  --padding: initial;\n  --check-bg-color: #{map.get(tokens.$colors, white)};\n  --check-border-color: #{map.get(tokens.$colors, palegrey)};\n  --check-border-size: 1px;\n  --check-border-style: var(--check-border-size) solid var(--check-border-color);\n  --check-checked-bg-color: #{map.get(tokens.$colors, darkgrey)};\n  --check-checked-border-color: #{map.get(tokens.$colors, darkgrey)};\n  --check-checked-higlight-color: #{map.get(tokens.$colors, white)};\n  --check-base-size: inherit;\n  --label-spacing: 10px 0;\n\n  // type specific\n\n  // tag\n  --tagbox-rgb: #{mx.color-to-rgb-list(map.get(tokens.$colors, lightblue))};\n  --tagbox-border-color: rgb(var(--tagbox-rgb) / 50%);\n  --tagbox-bg-color: rgb(var(--tagbox-rgb) / 20%);\n  --tagbox-border-radius: 0;\n\n  // segment\n  --segment-color: #{map.get(tokens.$colors, blue)};\n  --segment-border-radius: 3px;\n  --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n  // cb / radio\n  --cb-border-radius: 2px;\n  --radio-border-radius: 50%;\n\n  // switch\n  --switch-inactive-color: rgb(#{mx.color-to-rgb-list(map.get(tokens.$colors, palegrey))} / 70%);\n  --switch-active-color: #{map.get(tokens.$colors, blue)};\n\n  display: inline-block;\n  max-inline-size: 100%;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host([type='tag']) {\n  text-transform: uppercase;\n\n  --control-padding: 0.2rem 1rem;\n}\n\n:host([type='radio'][checked]):not([checked='false']) {\n  --check-border-size: 0.3125em;\n}\n\n:host([type='segment']) {\n  --check-border-style: none;\n  --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host([type='segment-pill']) {\n  --check-border-color: #{rgba(map.get(tokens.$colors, palegrey), 0.5)};\n  --segment-border-radius: 5px;\n  --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host(.nano-color) {\n  --tagbox-rgb: var(--nano-color-base-rgb);\n  --focus-shadow: #{tokens.$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n  --tagbox-border-color: rgb(var(--tagbox-rgb) / 80%);\n  --tagbox-bg-color: rgb(var(--tagbox-rgb) / 50%);\n}\n\n:host([has-focus]:not([has-focus='false'])) {\n  --cb-border-radius: 5px;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n\n  --tagbox-rgb: #{mx.color-to-rgb-list(map.get(tokens.$colors, mediumgrey))};\n  --check-bg-color: #{rgba(map.get(tokens.$colors, mediumgrey), 0.5)};\n  --check-checked-bg-color: #{rgba(map.get(tokens.$colors, mediumgrey), 0.5)};\n  --segment-color: #{map.get(tokens.$colors, darkgrey)};\n}\n\n.nanocb {\n  padding: var(--padding);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  line-height: 1.2;\n  position: relative;\n\n  // The mock, viewable 'input' control. Only relevant for controls where the label\n  // is outside / separate from the UI control (e.g. checkbox, radio, switch).\n\n  &__input {\n    border-radius: var(--cb-border-radius, 3px);\n    font-size: var(--check-base-size);\n    position: relative;\n    block-size: 1.5em;\n    inline-size: 1.5em;\n    min-inline-size: 1.5em;\n    border: var(--check-border-style);\n    box-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n    &::before {\n      border-radius: var(--cb-border-radius);\n      position: absolute;\n      content: '';\n      inset-inline-start: calc(0.725em - var(--check-border-size));\n      inset-block-start: calc(0.725em - var(--check-border-size));\n      inline-size: 0;\n      block-size: 0;\n      border: 2px solid var(--check-checked-higlight-color);\n      transform: scale(0);\n    }\n\n    &--radio {\n      border-radius: var(--radio-border-radius);\n      background-color: var(--check-bg-color);\n    }\n\n    &--checkbox {\n      background-color: var(--check-bg-color);\n\n      &::after {\n        border-radius: var(--cb-border-radius);\n        position: absolute;\n        content: '';\n        inset-inline-start: calc(0.825em - var(--check-border-size));\n        inset-block-start: calc(0.825em - var(--check-border-size));\n        block-size: 0;\n        inline-size: 0;\n        border: solid var(--check-checked-higlight-color);\n        border-width: 0 0.1875em 0.1875em 0;\n        transform: rotate(0deg) scale(0);\n        opacity: 1;\n        transition: all 0.15s ease-out;\n\n        .nanocb--indeterminate & {\n          border-width: 0 0 0.1875em;\n        }\n      }\n    }\n\n    &--switch {\n      border-radius: 1em !important;\n      inline-size: 2.4em;\n      block-size: 1.3em;\n      background: var(--switch-inactive-color);\n\n      :host([type=\"switch\"]:not([disabled])) & {\n        &:hover::after {\n          scale: 1.1 1;\n        }\n      }\n\n      &::after {\n        position: relative;\n        content: '';\n        display: block;\n        border-radius: inherit;\n        block-size: 80%;\n        inline-size: 40%;\n        background: var(--check-checked-higlight-color);\n        transform-origin: left;\n        inset-inline-start: 6%;\n        inset-block-start: 10%;\n        transition: .1s ease scale, .15s ease left;\n      }\n    }\n\n    &--segment,\n    &--segment-pill {\n      @include mx.visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n\n    &--tag {\n      @include mx.visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n  }\n\n  &--invalid:not(.nanocb--focused) {\n    .nanocb__input {\n      box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--invalid-shadow);\n\n      &--tag + .nanocb__label,\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        box-shadow: var(--invalid-shadow);\n        z-index: 1;\n      }\n    }\n  }\n\n  // The 'real' input control which we hide but use it's state for display\n  input {\n    @include mx.visually-hide();\n\n    &:focus ~ .nanocb__input {\n      box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--focus-shadow);\n    }\n\n    &.focus-visible:focus ~ .nanocb__input {\n      &--tag + .nanocb__label,\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        box-shadow: var(--focus-shadow);\n        z-index: 1;\n      }\n    }\n\n    &:checked ~ .nanocb__input {\n      border-radius: var(--cb-border-radius);\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border-color: var(--check-checked-border-color);\n\n      // segment / segment-pill active\n\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        color: var(--check-checked-higlight-color);\n        background-color: var(--check-checked-bg-color);\n        box-shadow: inset 0 3px 4px rgb(0 0 0 / 20%);\n      }\n\n      // radio active\n\n      &--radio {\n        border-radius: var(--radio-border-radius);\n        background-color: var(--check-checked-higlight-color);\n\n        &::after {\n          border: solid var(--check-checked-border-color);\n          border-width: 0 0.125em 0.125em 0;\n          opacity: 0;\n        }\n\n        &::before {\n          border-radius: var(--radio-border-radius);\n        }\n      }\n\n      // checkbox active\n\n      &--checkbox {\n        &::after {\n          transform: rotate(45deg) scale(1);\n          opacity: 1;\n          inset-inline-start: calc(0.575em - var(--check-border-size));\n          inset-block-start: calc(0.2875em - var(--check-border-size));\n          inline-size: 0.375em;\n          block-size: 0.75em;\n          border-radius: 0;\n        }\n      }\n\n      // tag active\n\n      &--tag + .nanocb__label::after {\n        transform: rotate(45deg);\n      }\n\n      // switch active\n\n      &--switch {\n        background: var(--switch-active-color);\n\n        &::after {\n          inset-inline-start: 56%;\n          transform-origin: right;\n        }\n      }\n    }\n\n    // indeterminate (only checkbox?)\n\n    &:indeterminate ~ .nanocb__input--checkbox {\n      border-radius: var(--input-border-radius, 5px);\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border: 0.125em solid var(--check-checked-bg-color);\n\n      &::after {\n        transform: scale(1);\n        opacity: 1;\n        inset-inline-start: 0.3125em;\n        inset-block-start: 0;\n        inline-size: 0.7em;\n        block-size: 0.7em;\n        border-radius: 0;\n      }\n    }\n  }\n\n  // The label\n  &__label {\n    padding-inline: var(--label-spacing);\n    padding-block: 0;\n    display: flex;\n    align-items: center;\n    line-height: 1;\n    flex: 1;\n    justify-content: space-between;\n\n    &--segment,\n    &--segment-pill {\n      border: var(--check-border-style);\n      border-radius: var(--segment-border-radius);\n      box-shadow: var(--segment-shadow);\n      display: inline-flex;\n      padding: var(--control-padding);\n      background: var(--check-bg-color);\n      color: var(--segment-color);\n      align-items: center;\n      inline-size: 100%;\n    }\n\n    &--segment-pill {\n      // first\n      :host(:first-of-type) & {\n        border-start-start-radius: var(--segment-border-radius);\n        border-start-end-radius: 0;\n        border-end-end-radius: 0;\n        border-end-start-radius: var(--segment-border-radius);\n        border-inline-end: none;\n      }\n\n      // middle\n      :host(:not(:last-of-type):not(:first-of-type)) & {\n        border-radius: 0;\n        border-inline-end: none;\n      }\n\n      // last\n      :host(:last-of-type) & {\n        border-start-start-radius: 0;\n        border-start-end-radius: var(--segment-border-radius);\n        border-end-end-radius: var(--segment-border-radius);\n        border-end-start-radius: 0;\n      }\n\n      // single\n      :host(:first-of-type:last-of-type) & {\n        border-radius: var(--segment-border-radius);\n        border: var(--check-border-style);\n      }\n    }\n\n    &--tag {\n      letter-spacing: 2px;\n      font-weight: 400;\n      font-size: 0.65em;\n      line-height: 1.4;\n      padding: var(--control-padding);\n      border: 2px solid #b5aea7;\n      border-color: var(--tagbox-border-color);\n      background-color: var(--tagbox-bg-color);\n      transition: all 0.2s;\n      border-radius: var(--cb-border-radius);\n      inline-size: 100%;\n\n      &::after {\n        content: '+';\n        margin-inline: 0.3125em 0;\n        margin-block: 0;\n        font-weight: 200;\n        position: relative;\n        font-family: inherit;\n        font-size: 1.8em;\n        display: inline-block;\n        transform: rotate(0deg);\n        transform-origin: center;\n      }\n\n      span {\n        display: block;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  ComponentInterface,\n  State,\n  Watch,\n  Method,\n  Element,\n  Host,\n  Listen,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport { transformTag, h } from '../../utils/renderer';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport type { ControlValidity, Color } from '../../types/shared';\n\nlet checkboxIds = 0;\n\n/**\n * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n *\n * @slot - if you do not set a label attribute, you can use this slot for more complex markup\n */\n@Component({\n  tag: 'nano-checkbox',\n  styleUrl: 'checkbox.scss',\n  scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n  private inputId = `nano-cb-${checkboxIds++}`;\n  private input: HTMLInputElement;\n\n  @Element() private host: HTMLNanoCheckboxElement;\n  @State() inputType: 'checkbox' | 'radio' = 'checkbox';\n\n  /** @internal */\n  @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n  /**\n   * checked property that can be used to get/set the value. accepts only boolean values\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  @Watch('checked')\n  async handleCheckedChange() {\n    if (!this.input) return;\n\n    this.input.checked = this.checked;\n\n    if (this.inputType === 'radio' && this.name && this.checked) {\n      const form = this.host.closest('form');\n      let ctrls: Element[];\n      if (form) {\n        ctrls = Array.from(\n          form.querySelectorAll(\n            `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n          )\n        );\n      } else {\n        ctrls = Array.from(\n          document.querySelectorAll(\n            `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n          )\n        )?.filter((radio) => !radio.closest('form'));\n      }\n      ctrls.map((el: HTMLNanoCheckboxElement) => {\n        if (el !== this.host) el.checked = false;\n      });\n    }\n    this.nanoChange.emit({ value: this.value, checked: this.checked });\n  }\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n   * it's only present when `checked` is true.\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Set to true to make the field required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Controls the underlying field type and style.\n   */\n  @Prop({ reflect: true }) type:\n    | 'radio'\n    | 'checkbox'\n    | 'tag'\n    | 'segment'\n    | 'switch'\n    | 'segment-pill' = 'checkbox';\n\n  @Watch('type')\n  typeChange() {\n    if (['checkbox', 'switch', 'tag'].includes(this.type))\n      this.inputType = 'checkbox';\n    else this.inputType = 'radio';\n  }\n\n  /**\n   * label property that can be used to set the label text. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n  @Watch('indeterminate')\n  handleIndeterminateChange() {\n    this.checked = false;\n    this.input.indeterminate = this.indeterminate;\n  }\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.input) return '';\n    return this.input.validationMessage;\n  }\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * The form element to associate the input with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * Emited when the checkbox is toggled\n   */\n  @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  /**\n   * Emited when the checkbox is focused\n   */\n  @Event() nanoFocus: EventEmitter;\n\n  /**\n   * Emited when the checkbox is blurred\n   */\n  @Event() nanoBlur: EventEmitter;\n\n  // public methods\n\n  /**\n   * Returns the native input control\n   * @returns the native input control\n   */\n  @Method()\n  async getInputElement() {\n    if (this.input) return this.input;\n  }\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n   */\n  @Method()\n  async reportValidity(\n    validateFirst: boolean = false\n  ): Promise<ControlValidity> {\n    if (validateFirst) this.input.reportValidity();\n    this._invalid = !this.input.validity.valid;\n\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.input.validationMessage,\n    };\n  }\n\n  /**\n   * Sets a custom validation message.\n   * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n   */\n  @Method()\n  async setError(message: string, updateStatus = true) {\n    if (!this.input) return;\n    if (updateStatus) this._invalid = !!message.length;\n    this.input.setCustomValidity(message);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) {\n      this.input.focus();\n      focusVisible.force(this.input);\n    }\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  @Method()\n  async removeFocus() {\n    if (this.input) {\n      this.input.blur();\n      focusVisible.force(this.input, false);\n    }\n  }\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.host.closest('form');\n    if (!form || e.target !== this.host.closest('form')) return;\n\n    this.checked = false;\n  }\n\n  // private handlers\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n  };\n\n  private handleChange = (ev: InputEvent) => {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.indeterminate = false;\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  /* Although many radio components can be 'checked',\n  the underlying control may not be. Check */\n  private isRadioChecked() {\n    requestAnimationFrame(() => (this.checked = this.input.checked));\n  }\n\n  // Stencil hooks\n\n  componentWillLoad() {\n    this.typeChange();\n  }\n\n  componentDidLoad() {\n    this.input.indeterminate = this.indeterminate;\n    this.isRadioChecked();\n    focusVisible.observe(this.input);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.input);\n  }\n\n  render() {\n    const labelId = this.inputId + '-lbl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color), 'nano-checkbox': true }}\n      >\n        <label\n          class={{\n            nanocb: true,\n            'nanocb--checked': this.checked,\n            'nanocb--invalid': this.invalid,\n            'nanocb--disabled': this.disabled,\n            'nanocb--focused': this.hasFocus,\n            'nanocb--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n        >\n          <input\n            type={this.inputType}\n            name={this.name}\n            form={this.form}\n            required={this.required}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            aria-labelledby={labelId}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            onChange={this.handleChange}\n            ref={(input) => (this.input = input)}\n            id={this.inputId}\n            onInvalid={this.handleInvalid}\n          />\n          <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n          <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n            {this.label && !!this.label.length && <span>{this.label}</span>}\n            <span hidden={this.label && !!this.label.length}>\n              <slot />\n            </span>\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;kMAAA,MAAMA,EAAc,s9UACpB,MAAAC,EAAeD,ECkBf,IAAIE,EAAc,E,MAcLC,EAAQ,M,wIACXC,QAAU,WAAWF,MACrBG,M,0BAGCC,UAAkC,WAGHC,SAAW,MAKXC,QAAmB,MAG3D,yBAAMC,GACJ,IAAKC,KAAKL,MAAO,OAEjBK,KAAKL,MAAMG,QAAUE,KAAKF,QAE1B,GAAIE,KAAKJ,YAAc,SAAWI,KAAKC,MAAQD,KAAKF,QAAS,CAC3D,MAAMI,EAAOF,KAAKG,KAAKC,QAAQ,QAC/B,IAAIC,EACJ,GAAIH,EAAM,CACRG,EAAQC,MAAMC,KACZL,EAAKM,iBACH,GAAGC,EAAa,0BAA0BT,KAAKC,U,KAG9C,CACLI,EAAQC,MAAMC,KACZG,SAASF,iBACP,GAAGC,EAAa,0BAA0BT,KAAKC,YAEhDU,QAAQC,IAAWA,EAAMR,QAAQ,S,CAEtCC,EAAMQ,KAAKC,IACT,GAAIA,IAAOd,KAAKG,KAAMW,EAAGhB,QAAU,KAAK,G,CAG5CE,KAAKe,WAAWC,KAAK,CAAEC,MAAOjB,KAAKiB,MAAOnB,QAASE,KAAKF,S,CAMjCoB,SAAoB,MAMpBD,MAAgB,KAKhBhB,KAKAkB,SAAoB,MAKpBC,KAMJ,WAGrB,UAAAC,GACE,GAAI,CAAC,WAAY,SAAU,OAAOC,SAAStB,KAAKoB,MAC9CpB,KAAKJ,UAAY,gBACdI,KAAKJ,UAAY,O,CAMhB2B,MAKgCC,cAAyB,MAGjE,yBAAAC,GACEzB,KAAKF,QAAU,MACfE,KAAKL,MAAM6B,cAAgBxB,KAAKwB,a,CAOlC,WACIE,GACF,OAAO1B,KAAK2B,Q,CAELA,SAAW,MAKpB,mBACIC,GACF,IAAK5B,KAAKL,MAAO,MAAO,GACxB,OAAOK,KAAKL,MAAMkC,iB,CAMZC,MAKA5B,KAKCa,WAKAgB,UAKAC,SAST,qBAAMC,GACJ,GAAIjC,KAAKL,MAAO,OAAOK,KAAKL,K,CAS9B,oBAAMuC,CACJC,EAAyB,OAEzB,GAAIA,EAAenC,KAAKL,MAAMuC,iBAC9BlC,KAAK2B,UAAY3B,KAAKL,MAAMyC,SAASC,MAErC,MAAO,CACLC,SAAUtC,KAAK0B,QACfa,aAAcvC,KAAKL,MAAMkC,kB,CAS7B,cAAMW,CAASC,EAAiBC,EAAe,MAC7C,IAAK1C,KAAKL,MAAO,OACjB,GAAI+C,EAAc1C,KAAK2B,WAAac,EAAQE,OAC5C3C,KAAKL,MAAMiD,kBAAkBH,E,CAO/B,cAAMI,GACJ,GAAI7C,KAAKL,MAAO,CACdK,KAAKL,MAAMmD,QACXC,EAAaC,MAAMhD,KAAKL,M,EAQ5B,iBAAMsD,GACJ,GAAIjD,KAAKL,MAAO,CACdK,KAAKL,MAAMuD,OACXH,EAAaC,MAAMhD,KAAKL,MAAO,M,EAKnC,OAAAwD,CAAQC,GACN,MAAMlD,EAAOF,KAAKE,KACdQ,SAAS2C,cAAc,IAAMrD,KAAKE,MAClCF,KAAKG,KAAKC,QAAQ,QACtB,IAAKF,GAAQkD,EAAEE,SAAWtD,KAAKG,KAAKC,QAAQ,QAAS,OAErDJ,KAAKF,QAAU,K,CAKTyD,cAAiBC,IACvBxD,KAAK2B,UAAa6B,EAAGF,OAA4BlB,SAASC,KAAK,EAGzDoB,aAAgBD,IACtBxD,KAAKF,QAAW0D,EAAGF,OAA4BxD,QAC/CE,KAAKwB,cAAgB,KAAK,EAGpBkC,YAAc,KACpB1D,KAAKH,SAAW,KAChBG,KAAK+B,UAAUf,MAAM,EAGf2C,WAAa,KACnB3D,KAAKH,SAAW,MAChBG,KAAKgC,SAAShB,MAAM,EAKd,cAAA4C,GACNC,uBAAsB,IAAO7D,KAAKF,QAAUE,KAAKL,MAAMG,S,CAKzD,iBAAAgE,GACE9D,KAAKqB,Y,CAGP,gBAAA0C,GACE/D,KAAKL,MAAM6B,cAAgBxB,KAAKwB,cAChCxB,KAAK4D,iBACLb,EAAaiB,QAAQhE,KAAKL,M,CAG5B,oBAAAsE,GACElB,EAAamB,UAAUlE,KAAKL,M,CAG9B,MAAAwE,GACE,MAAMC,EAAUpE,KAAKN,QAAU,OAE/B,OACE2E,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,IAAKC,EAAmBzE,KAAK8B,OAAQ,gBAAiB,OAE7DuC,EAAA,SAAAE,IAAA,2CACEC,MAAO,CACLE,OAAQ,KACR,kBAAmB1E,KAAKF,QACxB,kBAAmBE,KAAK0B,QACxB,mBAAoB1B,KAAKkB,SACzB,kBAAmBlB,KAAKH,SACxB,wBAAyBG,KAAKwB,eAEhCmD,QAAS3E,KAAKN,SAEd2E,EAAA,SAAAE,IAAA,2CACEnD,KAAMpB,KAAKJ,UACXK,KAAMD,KAAKC,KACXC,KAAMF,KAAKE,KACXiB,SAAUnB,KAAKmB,SACfrB,QAASE,KAAKF,QACdoB,SAAUlB,KAAKkB,SACfD,MAAOjB,KAAKiB,MAAK,kBACAmD,EACjBQ,OAAQ5E,KAAK2D,WACbkB,QAAS7E,KAAK0D,YACdoB,SAAU9E,KAAKyD,aACfsB,IAAMpF,GAAWK,KAAKL,MAAQA,EAC9BqF,GAAIhF,KAAKN,QACTuF,UAAWjF,KAAKuD,gBAElBc,EAAA,QAAAE,IAAA,2CAAMC,MAAO,gCAAkCxE,KAAKoB,OAEpDiD,EAAA,OAAAE,IAAA,2CAAKS,GAAIZ,EAASI,MAAO,gCAAkCxE,KAAKoB,MAC7DpB,KAAKuB,SAAWvB,KAAKuB,MAAMoB,QAAU0B,EAAA,QAAAE,IAAA,4CAAOvE,KAAKuB,OAClD8C,EAAA,QAAAE,IAAA,2CAAMW,OAAQlF,KAAKuB,SAAWvB,KAAKuB,MAAMoB,QACvC0B,EAAA,QAAAE,IAAA,gD","ignoreList":[]}