npm - @nanoporetech-digital/components - Versions diffs - 6.6.1 → 6.8.0 - Mend

@nanoporetech-digital/components 6.6.1 → 6.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (186) hide show

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as n,c as e,h as c,a as o,g as a}from"./index-9695db0a.js";import{f as s}from"./focus-visible-8b2c14da.js";import{c as i}from"./theme-931bd452.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{--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);-webkit-clip-path:inset(50%);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);-webkit-clip-path:inset(50%);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);-webkit-clip-path:inset(50%);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;font-stretch:condensed;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}';let t=0;const b=class{constructor(c){n(this,c);this.nanoChange=e(this,"nanoChange",7);this.nanoFocus=e(this,"nanoFocus",7);this.nanoBlur=e(this,"nanoBlur",7);this.inputId=`nano-cb-${t++}`;this.handleInvalid=n=>{this._invalid=!n.target.validity.valid};this.handleChange=n=>{this.checked=n.target.checked;this.indeterminate=false};this.handleFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.handleBlur=()=>{this.hasFocus=false;this.nanoBlur.emit()};this.inputType="checkbox";this.hasFocus=false;this.checked=false;this.disabled=false;this.value="on";this.name=undefined;this.required=false;this.type="checkbox";this.label=undefined;this.indeterminate=false;this._invalid=false;this.color=undefined;this.form=undefined}async handleCheckedChange(){if(!this.input)return;this.input.checked=this.checked;if(this.inputType==="radio"&&this.name&&this.checked){const n=this.host.closest("form");let e;if(n){e=Array.from(n.querySelectorAll(`nano-checkbox[name="${this.name}"]`))}else{e=Array.from(document.querySelectorAll(`nano-checkbox[name="${this.name}"]`)).filter((n=>!n.closest("form")))}e.map((n=>{if(n!==this.host)n.checked=false}))}this.nanoChange.emit({value:this.value,checked:this.checked})}typeChange(){if(["checkbox","switch","tag"].includes(this.type))this.inputType="checkbox";else this.inputType="radio"}handleIndeterminateChange(){this.checked=false;this.input.indeterminate=this.indeterminate}get invalid(){return this._invalid}get validityMessage(){if(!this.input)return"";return this.input.validationMessage}async getInputElement(){if(this.input)return this.input}async reportValidity(n=false){if(n)this.input.reportValidity();this._invalid=!this.input.validity.valid;return{isValid:!this.invalid,errorMessage:this.input.validationMessage}}async setError(n,e=true){if(!this.input)return;if(e)this._invalid=!!n.length;this.input.setCustomValidity(n)}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(n){const e=this.form?document.querySelector("#"+this.form):this.host.closest("form");if(!e||n.target!==this.host.closest("form"))return;this.checked=false}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 n=this.inputId+"-lbl";return c(o,{class:{...i(this.color)}},c("label",{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},c("input",{type:this.inputType,name:this.name,form:this.form,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":n,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:n=>this.input=n,id:this.inputId,onInvalid:this.handleInvalid}),c("span",{class:"nanocb__input nanocb__input--"+this.type}),c("div",{id:n,class:"nanocb__label nanocb__label--"+this.type},this.label&&!!this.label.length&&c("span",null,this.label),c("span",{hidden:this.label&&!!this.label.length},c("slot",null)))))}get host(){return a(this)}static get watchers(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}}};b.style=r;export{b as nano_checkbox};
+import{r as n,c as e,h as c,a as o,g as a}from"./index-9695db0a.js";import{f as i}from"./focus-visible-8b2c14da.js";import{c as s}from"./theme-931bd452.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{--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);-webkit-clip-path:inset(50%);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);-webkit-clip-path:inset(50%);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);-webkit-clip-path:inset(50%);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}';let t=0;const b=class{constructor(c){n(this,c);this.nanoChange=e(this,"nanoChange",7);this.nanoFocus=e(this,"nanoFocus",7);this.nanoBlur=e(this,"nanoBlur",7);this.inputId=`nano-cb-${t++}`;this.handleInvalid=n=>{this._invalid=!n.target.validity.valid};this.handleChange=n=>{this.checked=n.target.checked;this.indeterminate=false};this.handleFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.handleBlur=()=>{this.hasFocus=false;this.nanoBlur.emit()};this.inputType="checkbox";this.hasFocus=false;this.checked=false;this.disabled=false;this.value="on";this.name=undefined;this.required=false;this.type="checkbox";this.label=undefined;this.indeterminate=false;this._invalid=false;this.color=undefined;this.form=undefined}async handleCheckedChange(){if(!this.input)return;this.input.checked=this.checked;if(this.inputType==="radio"&&this.name&&this.checked){const n=this.host.closest("form");let e;if(n){e=Array.from(n.querySelectorAll(`nano-checkbox[name="${this.name}"]`))}else{e=Array.from(document.querySelectorAll(`nano-checkbox[name="${this.name}"]`)).filter((n=>!n.closest("form")))}e.map((n=>{if(n!==this.host)n.checked=false}))}this.nanoChange.emit({value:this.value,checked:this.checked})}typeChange(){if(["checkbox","switch","tag"].includes(this.type))this.inputType="checkbox";else this.inputType="radio"}handleIndeterminateChange(){this.checked=false;this.input.indeterminate=this.indeterminate}get invalid(){return this._invalid}get validityMessage(){if(!this.input)return"";return this.input.validationMessage}async getInputElement(){if(this.input)return this.input}async reportValidity(n=false){if(n)this.input.reportValidity();this._invalid=!this.input.validity.valid;return{isValid:!this.invalid,errorMessage:this.input.validationMessage}}async setError(n,e=true){if(!this.input)return;if(e)this._invalid=!!n.length;this.input.setCustomValidity(n)}async setFocus(){if(this.input){this.input.focus();i.force(this.input)}}async removeFocus(){if(this.input){this.input.blur();i.force(this.input,false)}}onReset(n){const e=this.form?document.querySelector("#"+this.form):this.host.closest("form");if(!e||n.target!==this.host.closest("form"))return;this.checked=false}isRadioChecked(){requestAnimationFrame((()=>this.checked=this.input.checked))}componentWillLoad(){this.typeChange()}componentDidLoad(){this.input.indeterminate=this.indeterminate;this.isRadioChecked();i.observe(this.input)}disconnectedCallback(){i.unobserve(this.input)}render(){const n=this.inputId+"-lbl";return c(o,{class:{...s(this.color)}},c("label",{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},c("input",{type:this.inputType,name:this.name,form:this.form,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":n,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:n=>this.input=n,id:this.inputId,onInvalid:this.handleInvalid}),c("span",{class:"nanocb__input nanocb__input--"+this.type}),c("div",{id:n,class:"nanocb__label nanocb__label--"+this.type},this.label&&!!this.label.length&&c("span",null,this.label),c("span",{hidden:this.label&&!!this.label.length},c("slot",null)))))}get host(){return a(this)}static get watchers(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}}};b.style=r;export{b as nano_checkbox};
 //# sourceMappingURL=nano-checkbox.entry.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["checkboxCss","checkboxIds","Checkbox","this","inputId","handleInvalid","ev","_invalid","target","validity","valid","handleChange","checked","indeterminate","handleFocus","hasFocus","nanoFocus","emit","handleBlur","nanoBlur","async","input","inputType","name","form","host","closest","ctrls","Array","from","querySelectorAll","document","filter","radio","map","el","nanoChange","value","typeChange","includes","type","handleIndeterminateChange","invalid","validityMessage","validationMessage","validateFirst","reportValidity","isValid","errorMessage","message","updateStatus","length","setCustomValidity","focus","focusVisible","force","blur","onReset","e","querySelector","isRadioChecked","requestAnimationFrame","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","render","labelId","h","Host","class","createColorClasses","color","nanocb","disabled","htmlFor","required","onBlur","onFocus","onChange","ref","id","onInvalid","label","hidden"],"sources":["./src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n /*\n @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{$control-invalid-style};\n * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{$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($colors, white)};\n * @prop --check-border-color: initial border color. Defaults to #{map.get($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($colors, darkgrey)};\n * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get($colors, darkgrey)};\n * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get($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 #{color-to-rgb-list(map.get($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($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(#{color-to-rgb-list(map.get($colors, palegrey))} / 70%);\n * @prop --switch-active-color: Defaults to #{map.get($colors, blue)};\n /\n\n --focus-shadow: #{$control-focus-style};\n --invalid-shadow: #{$control-focus-size + ' ' map.get($colors, red)};\n --padding: initial;\n --check-bg-color: #{map.get($colors, white)};\n --check-border-color: #{map.get($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($colors, darkgrey)};\n --check-checked-border-color: #{map.get($colors, darkgrey)};\n --check-checked-higlight-color: #{map.get($colors, white)};\n --check-base-size: inherit;\n --label-spacing: 10px 0;\n\n // type specific\n\n // tag\n --tagbox-rgb: #{color-to-rgb-list(map.get($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($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(#{color-to-rgb-list(map.get($colors, palegrey))} / 70%);\n --switch-active-color: #{map.get($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($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: #{$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: #{color-to-rgb-list(map.get($colors, mediumgrey))};\n --check-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n --check-checked-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n --segment-color: #{map.get($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 visually-hide();\n\n &::before {\n display: none;\n }\n }\n\n &--tag {\n @include 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 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 font-stretch: condensed;\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 type {\n CheckboxChangeEventDetail,\n ControlValidity,\n Color,\n} from '../../interface';\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 /\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":";;;4JAAA,MAAMA,EAAc,04UCsBpB,IAAIC,EAAc,E,MAcLC,EAAQ,M,wIACXC,KAAAC,QAAU,WAAWH,MAmNrBE,KAAAE,cAAiBC,IACvBH,KAAKI,UAAaD,EAAGE,OAA4BC,SAASC,KAAK,EAGzDP,KAAAQ,aAAgBL,IACtBH,KAAKS,QAAWN,EAAGE,OAA4BI,QAC/CT,KAAKU,cAAgB,KAAK,EAGpBV,KAAAW,YAAc,KACpBX,KAAKY,SAAW,KAChBZ,KAAKa,UAAUC,MAAM,EAGfd,KAAAe,WAAa,KACnBf,KAAKY,SAAW,MAChBZ,KAAKgB,SAASF,MAAM,E,eA/NqB,W,cAGQ,M,aAKQ,M,cA8Bd,M,WAMJ,K,kCAUI,M,UAWxB,W,wCAiB4C,M,cAgB7C,M,yCAvFpBG,4BACE,IAAKjB,KAAKkB,MAAO,OAEjBlB,KAAKkB,MAAMT,QAAUT,KAAKS,QAE1B,GAAIT,KAAKmB,YAAc,SAAWnB,KAAKoB,MAAQpB,KAAKS,QAAS,CAC3D,MAAMY,EAAOrB,KAAKsB,KAAKC,QAAQ,QAC/B,IAAIC,EACJ,GAAIH,EAAM,CACRG,EAAQC,MAAMC,KACZL,EAAKM,iBAAiB,uBAAuB3B,KAAKoB,U,KAE/C,CACLI,EAAQC,MAAMC,KACZE,SAASD,iBAAiB,uBAAuB3B,KAAKoB,WACtDS,QAAQC,IAAWA,EAAMP,QAAQ,S,CAErCC,EAAMO,KAAKC,IACT,GAAIA,IAAOhC,KAAKsB,KAAMU,EAAGvB,QAAU,KAAK,G,CAG5CT,KAAKiC,WAAWnB,KAAK,CAAEoB,MAAOlC,KAAKkC,MAAOzB,QAAST,KAAKS,S,CAoC1D0B,aACE,GAAI,CAAC,WAAY,SAAU,OAAOC,SAASpC,KAAKqC,MAC9CrC,KAAKmB,UAAY,gBACdnB,KAAKmB,UAAY,O,CAcxBmB,4BACEtC,KAAKS,QAAU,MACfT,KAAKkB,MAAMR,cAAgBV,KAAKU,a,CAQ9B6B,cACF,OAAOvC,KAAKI,Q,CAQVoC,sBACF,IAAKxC,KAAKkB,MAAO,MAAO,GACxB,OAAOlB,KAAKkB,MAAMuB,iB,CAkCpBxB,wBACE,GAAIjB,KAAKkB,MAAO,OAAOlB,KAAKkB,K,CAS9BD,qBACEyB,EAAyB,OAEzB,GAAIA,EAAe1C,KAAKkB,MAAMyB,iBAC9B3C,KAAKI,UAAYJ,KAAKkB,MAAMZ,SAASC,MAErC,MAAO,CACLqC,SAAU5C,KAAKuC,QACfM,aAAc7C,KAAKkB,MAAMuB,kB,CAS7BxB,eAAe6B,EAAiBC,EAAe,MAC7C,IAAK/C,KAAKkB,MAAO,OACjB,GAAI6B,EAAc/C,KAAKI,WAAa0C,EAAQE,OAC5ChD,KAAKkB,MAAM+B,kBAAkBH,E,CAO/B7B,iBACE,GAAIjB,KAAKkB,MAAO,CACdlB,KAAKkB,MAAMgC,QACXC,EAAaC,MAAMpD,KAAKkB,M,EAQ5BD,oBACE,GAAIjB,KAAKkB,MAAO,CACdlB,KAAKkB,MAAMmC,OACXF,EAAaC,MAAMpD,KAAKkB,MAAO,M,EAKnCoC,QAAQC,GACN,MAAMlC,EAAOrB,KAAKqB,KACdO,SAAS4B,cAAc,IAAMxD,KAAKqB,MAClCrB,KAAKsB,KAAKC,QAAQ,QACtB,IAAKF,GAAQkC,EAAElD,SAAWL,KAAKsB,KAAKC,QAAQ,QAAS,OAErDvB,KAAKS,QAAU,K,CA0BTgD,iBACNC,uBAAsB,IAAO1D,KAAKS,QAAUT,KAAKkB,MAAMT,S,CAKzDkD,oBACE3D,KAAKmC,Y,CAGPyB,mBACE5D,KAAKkB,MAAMR,cAAgBV,KAAKU,cAChCV,KAAKyD,iBACLN,EAAaU,QAAQ7D,KAAKkB,M,CAG5B4C,uBACEX,EAAaY,UAAU/D,KAAKkB,M,CAG9B8C,SACE,MAAMC,EAAUjE,KAAKC,QAAU,OAE/B,OACEiE,EAACC,EAAI,CAACC,MAAO,IAAKC,EAAmBrE,KAAKsE,SACxCJ,EAAA,SACEE,MAAO,CACLG,OAAQ,KACR,kBAAmBvE,KAAKS,QACxB,kBAAmBT,KAAKuC,QACxB,mBAAoBvC,KAAKwE,SACzB,kBAAmBxE,KAAKY,SACxB,wBAAyBZ,KAAKU,eAEhC+D,QAASzE,KAAKC,SAEdiE,EAAA,SACE7B,KAAMrC,KAAKmB,UACXC,KAAMpB,KAAKoB,KACXC,KAAMrB,KAAKqB,KACXqD,SAAU1E,KAAK0E,SACfjE,QAAST,KAAKS,QACd+D,SAAUxE,KAAKwE,SACftC,MAAOlC,KAAKkC,MAAK,kBACA+B,EACjBU,OAAQ3E,KAAKe,WACb6D,QAAS5E,KAAKW,YACdkE,SAAU7E,KAAKQ,aACfsE,IAAM5D,GAAWlB,KAAKkB,MAAQA,EAC9B6D,GAAI/E,KAAKC,QACT+E,UAAWhF,KAAKE,gBAElBgE,EAAA,QAAME,MAAO,gCAAkCpE,KAAKqC,OAEpD6B,EAAA,OAAKa,GAAId,EAASG,MAAO,gCAAkCpE,KAAKqC,MAC7DrC,KAAKiF,SAAWjF,KAAKiF,MAAMjC,QAAUkB,EAAA,YAAOlE,KAAKiF,OAClDf,EAAA,QAAMgB,OAAQlF,KAAKiF,SAAWjF,KAAKiF,MAAMjC,QACvCkB,EAAA,gB"}
1	+ {"version":3,"names":["checkboxCss","checkboxIds","Checkbox","this","inputId","handleInvalid","ev","_invalid","target","validity","valid","handleChange","checked","indeterminate","handleFocus","hasFocus","nanoFocus","emit","handleBlur","nanoBlur","async","input","inputType","name","form","host","closest","ctrls","Array","from","querySelectorAll","document","filter","radio","map","el","nanoChange","value","typeChange","includes","type","handleIndeterminateChange","invalid","validityMessage","validationMessage","validateFirst","reportValidity","isValid","errorMessage","message","updateStatus","length","setCustomValidity","focus","focusVisible","force","blur","onReset","e","querySelector","isRadioChecked","requestAnimationFrame","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","render","labelId","h","Host","class","createColorClasses","color","nanocb","disabled","htmlFor","required","onBlur","onFocus","onChange","ref","id","onInvalid","label","hidden"],"sources":["./src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n /*\n @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{$control-invalid-style};\n * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{$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($colors, white)};\n * @prop --check-border-color: initial border color. Defaults to #{map.get($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($colors, darkgrey)};\n * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get($colors, darkgrey)};\n * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get($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 #{color-to-rgb-list(map.get($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($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(#{color-to-rgb-list(map.get($colors, palegrey))} / 70%);\n * @prop --switch-active-color: Defaults to #{map.get($colors, blue)};\n /\n\n --focus-shadow: #{$control-focus-style};\n --invalid-shadow: #{$control-focus-size + ' ' map.get($colors, red)};\n --padding: initial;\n --check-bg-color: #{map.get($colors, white)};\n --check-border-color: #{map.get($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($colors, darkgrey)};\n --check-checked-border-color: #{map.get($colors, darkgrey)};\n --check-checked-higlight-color: #{map.get($colors, white)};\n --check-base-size: inherit;\n --label-spacing: 10px 0;\n\n // type specific\n\n // tag\n --tagbox-rgb: #{color-to-rgb-list(map.get($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($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(#{color-to-rgb-list(map.get($colors, palegrey))} / 70%);\n --switch-active-color: #{map.get($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($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: #{$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: #{color-to-rgb-list(map.get($colors, mediumgrey))};\n --check-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n --check-checked-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n --segment-color: #{map.get($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 visually-hide();\n\n &::before {\n display: none;\n }\n }\n\n &--tag {\n @include 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 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 type {\n CheckboxChangeEventDetail,\n ControlValidity,\n Color,\n} from '../../interface';\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 /\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":";;;4JAAA,MAAMA,EAAc,m3UCsBpB,IAAIC,EAAc,E,MAcLC,EAAQ,M,wIACXC,KAAAC,QAAU,WAAWH,MAmNrBE,KAAAE,cAAiBC,IACvBH,KAAKI,UAAaD,EAAGE,OAA4BC,SAASC,KAAK,EAGzDP,KAAAQ,aAAgBL,IACtBH,KAAKS,QAAWN,EAAGE,OAA4BI,QAC/CT,KAAKU,cAAgB,KAAK,EAGpBV,KAAAW,YAAc,KACpBX,KAAKY,SAAW,KAChBZ,KAAKa,UAAUC,MAAM,EAGfd,KAAAe,WAAa,KACnBf,KAAKY,SAAW,MAChBZ,KAAKgB,SAASF,MAAM,E,eA/NqB,W,cAGQ,M,aAKQ,M,cA8Bd,M,WAMJ,K,kCAUI,M,UAWxB,W,wCAiB4C,M,cAgB7C,M,yCAvFpBG,4BACE,IAAKjB,KAAKkB,MAAO,OAEjBlB,KAAKkB,MAAMT,QAAUT,KAAKS,QAE1B,GAAIT,KAAKmB,YAAc,SAAWnB,KAAKoB,MAAQpB,KAAKS,QAAS,CAC3D,MAAMY,EAAOrB,KAAKsB,KAAKC,QAAQ,QAC/B,IAAIC,EACJ,GAAIH,EAAM,CACRG,EAAQC,MAAMC,KACZL,EAAKM,iBAAiB,uBAAuB3B,KAAKoB,U,KAE/C,CACLI,EAAQC,MAAMC,KACZE,SAASD,iBAAiB,uBAAuB3B,KAAKoB,WACtDS,QAAQC,IAAWA,EAAMP,QAAQ,S,CAErCC,EAAMO,KAAKC,IACT,GAAIA,IAAOhC,KAAKsB,KAAMU,EAAGvB,QAAU,KAAK,G,CAG5CT,KAAKiC,WAAWnB,KAAK,CAAEoB,MAAOlC,KAAKkC,MAAOzB,QAAST,KAAKS,S,CAoC1D0B,aACE,GAAI,CAAC,WAAY,SAAU,OAAOC,SAASpC,KAAKqC,MAC9CrC,KAAKmB,UAAY,gBACdnB,KAAKmB,UAAY,O,CAcxBmB,4BACEtC,KAAKS,QAAU,MACfT,KAAKkB,MAAMR,cAAgBV,KAAKU,a,CAQ9B6B,cACF,OAAOvC,KAAKI,Q,CAQVoC,sBACF,IAAKxC,KAAKkB,MAAO,MAAO,GACxB,OAAOlB,KAAKkB,MAAMuB,iB,CAkCpBxB,wBACE,GAAIjB,KAAKkB,MAAO,OAAOlB,KAAKkB,K,CAS9BD,qBACEyB,EAAyB,OAEzB,GAAIA,EAAe1C,KAAKkB,MAAMyB,iBAC9B3C,KAAKI,UAAYJ,KAAKkB,MAAMZ,SAASC,MAErC,MAAO,CACLqC,SAAU5C,KAAKuC,QACfM,aAAc7C,KAAKkB,MAAMuB,kB,CAS7BxB,eAAe6B,EAAiBC,EAAe,MAC7C,IAAK/C,KAAKkB,MAAO,OACjB,GAAI6B,EAAc/C,KAAKI,WAAa0C,EAAQE,OAC5ChD,KAAKkB,MAAM+B,kBAAkBH,E,CAO/B7B,iBACE,GAAIjB,KAAKkB,MAAO,CACdlB,KAAKkB,MAAMgC,QACXC,EAAaC,MAAMpD,KAAKkB,M,EAQ5BD,oBACE,GAAIjB,KAAKkB,MAAO,CACdlB,KAAKkB,MAAMmC,OACXF,EAAaC,MAAMpD,KAAKkB,MAAO,M,EAKnCoC,QAAQC,GACN,MAAMlC,EAAOrB,KAAKqB,KACdO,SAAS4B,cAAc,IAAMxD,KAAKqB,MAClCrB,KAAKsB,KAAKC,QAAQ,QACtB,IAAKF,GAAQkC,EAAElD,SAAWL,KAAKsB,KAAKC,QAAQ,QAAS,OAErDvB,KAAKS,QAAU,K,CA0BTgD,iBACNC,uBAAsB,IAAO1D,KAAKS,QAAUT,KAAKkB,MAAMT,S,CAKzDkD,oBACE3D,KAAKmC,Y,CAGPyB,mBACE5D,KAAKkB,MAAMR,cAAgBV,KAAKU,cAChCV,KAAKyD,iBACLN,EAAaU,QAAQ7D,KAAKkB,M,CAG5B4C,uBACEX,EAAaY,UAAU/D,KAAKkB,M,CAG9B8C,SACE,MAAMC,EAAUjE,KAAKC,QAAU,OAE/B,OACEiE,EAACC,EAAI,CAACC,MAAO,IAAKC,EAAmBrE,KAAKsE,SACxCJ,EAAA,SACEE,MAAO,CACLG,OAAQ,KACR,kBAAmBvE,KAAKS,QACxB,kBAAmBT,KAAKuC,QACxB,mBAAoBvC,KAAKwE,SACzB,kBAAmBxE,KAAKY,SACxB,wBAAyBZ,KAAKU,eAEhC+D,QAASzE,KAAKC,SAEdiE,EAAA,SACE7B,KAAMrC,KAAKmB,UACXC,KAAMpB,KAAKoB,KACXC,KAAMrB,KAAKqB,KACXqD,SAAU1E,KAAK0E,SACfjE,QAAST,KAAKS,QACd+D,SAAUxE,KAAKwE,SACftC,MAAOlC,KAAKkC,MAAK,kBACA+B,EACjBU,OAAQ3E,KAAKe,WACb6D,QAAS5E,KAAKW,YACdkE,SAAU7E,KAAKQ,aACfsE,IAAM5D,GAAWlB,KAAKkB,MAAQA,EAC9B6D,GAAI/E,KAAKC,QACT+E,UAAWhF,KAAKE,gBAElBgE,EAAA,QAAME,MAAO,gCAAkCpE,KAAKqC,OAEpD6B,EAAA,OAAKa,GAAId,EAASG,MAAO,gCAAkCpE,KAAKqC,MAC7DrC,KAAKiF,SAAWjF,KAAKiF,MAAMjC,QAAUkB,EAAA,YAAOlE,KAAKiF,OAClDf,EAAA,QAAMgB,OAAQlF,KAAKiF,SAAWjF,KAAKiF,MAAMjC,QACvCkB,EAAA,gB"}

package/dist/nano-components/nano-components.esm.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{p as e,H as a,b as o}from"./index-9695db0a.js";export{s as setNonce}from"./index-9695db0a.js";import"./global-be484e8c.js";const n=()=>{{t(a.prototype)}const o=import.meta.url;const n={};if(o!==""){n.resourcesUrl=new URL(".",o).href}return e(n)};const t=e=>{const a=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return a.call(this,e)}const o=a.call(this,false);const n=this.childNodes;if(e){for(let e=0;e<n.length;e++){if(n[e].nodeType!==2){o.appendChild(n[e].cloneNode(true))}}}return o}};n().then((e=>o(JSON.parse('[["nano-global-nav",[[1,"nano-global-nav",{"env":[1],"ssoDataUrl":[1,"sso-data-url"],"myAccountData":[16],"ssoRedirect":[1,"sso-redirect"],"getMyAccountData":[4,"get-my-account-data"],"activeMyAccountSections":[16],"showSearch":[4,"show-search"],"showLogo":[4,"show-logo"],"logoUrl":[1,"logo-url"],"searchIndeces":[16],"myAccountUser":[1040],"searchAppId":[1025,"search-app-id"],"searchApiKey":[1025,"search-api-key"],"searchValue":[1025,"search-value"],"searchIndex":[1025,"search-index"],"cartCount":[1026,"cart-count"],"msgCount":[1026,"msg-count"],"cartUrl":[1025,"cart-url"],"msgUrl":[1025,"msg-url"],"userProfileUrl":[32],"hasLoggedinSlot":[32],"hasSiteSlot":[32],"hasPromotionSlot":[32],"aboutSlotLen":[32],"iconSlotLen":[32],"mainSlotLen":[32],"overflowSlotLen":[32],"searchSlotLen":[32],"thresholdReady":[32],"remoteDataReady":[32],"ready":[32],"isResizing":[32],"threshold":[32],"modalOpen":[32],"modalIsOpen":[32],"searchBarShown":[32],"scrollingUp":[32],"showAutocomplete":[32],"secondaryMenuOpen":[32],"userMenuOpen":[32],"menuFullScreen":[32],"searchLoading":[32],"searchValInternal":[32],"internalSearchIndeces":[32],"submitSearch":[64],"toggleOverflowMenu":[64]},[[0,"nanoOpen","secondaryOpen"],[0,"nanoClose","secondaryClose"],[16,"click","menuClose"]]]]],["nano-demo",[[1,"nano-demo"]]],["nano-date-input",[[6,"nano-date-input",{"invalid":[2564],"validityMessage":[2049,"validity-message"],"helperText":[4,"helper-text"],"helperTextFormat":[16],"floatLabel":[4,"float-label"],"name":[1],"readonly":[4],"size":[2],"form":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"disabled":[4],"color":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"label":[1],"placeholder":[1025],"value":[1537],"validateOn":[1,"validate-on"],"showInlineError":[516,"show-inline-error"],"dateOrder":[1,"date-order"],"required":[4],"min":[1],"max":[1],"hideLabel":[4,"hide-label"],"picker":[4],"initialPickerDate":[1,"initial-picker-date"],"pickerOpen":[1540,"picker-open"],"closeAfterPicked":[4,"close-after-picked"],"dropDownConfig":[6160],"dateValue":[2064],"isDateDisabled":[16],"pattern":[32],"inputValue":[32],"_invalid":[32],"reportValidity":[64],"setFocus":[64],"getInputElement":[64],"showError":[64]}]]],["nano-dialog",[[1,"nano-dialog",{"showRibbon":[4,"show-ribbon"],"open":[1540],"label":[1],"noHeader":[4,"no-header"],"noFooter":[4,"no-footer"],"noUserDismiss":[4,"no-user-dismiss"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"hoist":[4],"noDismiss":[32],"hasFooter":[32],"show":[64],"hide":[64]}]]],["nano-drawer",[[1,"nano-drawer",{"open":[516],"label":[513],"placement":[513],"contained":[516],"noHeader":[516,"no-header"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"noUserDismiss":[4,"no-user-dismiss"],"hoist":[4],"noDismiss":[32],"hasFooter":[32],"show":[64],"hide":[64]}]]],["nano-hero",[[1,"nano-hero",{"imgSrc":[1,"img-src"],"imgSrcSet":[1,"img-src-set"],"largeScreenBP":[2,"large-screen-b-p"],"theme":[1],"level":[1],"hasIconBox":[32],"hasScrim":[32],"hasSecondaryContent":[32],"hasQuote":[32],"hasBg":[32],"hasBackBtn":[32],"hasCtas":[32],"breadCrumbs":[32],"iconBoxItems":[32]}]]],["nano-alert",[[1,"nano-alert",{"open":[1540],"closable":[516],"color":[513],"duration":[2],"hoist":[4],"isModal":[32],"isToast":[32],"isShowing":[32],"label":[32],"noDismiss":[32],"show":[64],"hide":[64],"toast":[64],"alert":[64]}]]],["nano-file-upload",[[6,"nano-file-upload",{"name":[1],"accept":[1],"capture":[1],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"label":[1],"placeholder":[1],"hideLabel":[4,"hide-label"],"required":[4],"disabled":[516],"clearInput":[4,"clear-input"],"showInlineError":[516,"show-inline-error"],"validateOn":[1025,"validate-on"],"form":[1],"invalid":[2564],"validityMessage":[2049,"validity-message"],"files":[6160],"value":[6145],"hasHelperSlot":[32],"hasLabelSlot":[32],"errorMessage":[32],"isDragging":[32],"fileList":[32],"hasFocus":[32],"_invalid":[32],"reportValidity":[64],"setFocus":[64],"getInputElement":[64],"showError":[64]},[[8,"click","globalClickHandler"],[8,"keydown","globalKeydownHandler"],[16,"reset","onReset"]]]]],["nano-overflow-nav",[[1,"nano-overflow-nav",{"scrollControls":[4,"scroll-controls"],"orientation":[513],"activeHandler":[16],"inActiveHandler":[16],"isActiveHandler":[16],"instantReCalc":[32],"hasScrollControls":[32],"hideControlEnd":[32],"hideControlStart":[32],"syncActiveItem":[64]}]]],["nano-tab",[[1,"nano-tab",{"panel":[513],"active":[516],"disabled":[516],"closable":[4],"setFocus":[64],"removeFocus":[64]}]]],["nano-global-search-results",[[1,"nano-global-search-results",{"algoliaResults":[32],"algoliaEle":[32],"currentWidth":[32],"apiKey":[32],"appId":[32],"index":[32]},[[16,"nanoSearchReset","handleGlobalNavReset"],[16,"nanoSearchResult","handleGlobalNavSearch"],[0,"nanoChange","handleReorder"],[0,"nanoResultsShown","attachListeners"],[16,"nanoNewResults","attachResultListeners"]]]]],["nano-menu-drawer",[[1,"nano-menu-drawer",{"open":[1028],"saveState":[4,"save-state"],"hideWidth":[2,"hide-width"],"hideHeight":[4,"hide-height"],"reset":[32],"widthOk":[32],"heightOk":[32],"isLoading":[32],"hide":[32]},[[0,"nanoOpen","cancelNavItemEvents"],[0,"nanoClose","cancelNavItemEvents"],[16,"nanoIsReady","handleGlobalNavReady"]]]]],["nano-split-pane",[[1,"nano-split-pane",{"position":[6146],"positionInPixels":[1026,"position-in-pixels"],"vertical":[516],"disabled":[516],"primary":[1],"snap":[1],"snapThreshold":[2,"snap-threshold"],"animationDuration":[2,"animation-duration"],"getPercentageToPixels":[64],"getPixelsToPercentage":[64]}]]],["nano-tab-group",[[1,"nano-tab-group",{"placement":[513],"noScrollControls":[4,"no-scroll-controls"],"color":[1],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"disableSwipe":[4,"disable-swipe"],"hasScrollControls":[32],"hideControlRight":[32],"hideControlLeft":[32],"tab":[32],"show":[64]},[[0,"nanoTabClose","handleTabClose"]]]]],["nano-accordion",[[1,"nano-accordion",{"color":[1],"itemOpened":[32]},[[0,"nanoOpened","onToggleHandler"],[0,"nanoClosed","onClosedHandler"]]]]],["nano-algolia-filter",[[1,"nano-algolia-filter",{"filterName":[1,"filter-name"],"value":[1025],"operator":[1],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"changeEvent":[32],"internalValue":[32],"showFilter":[32],"indexResults":[32],"filterChanged":[32],"facets":[32],"tplRenderFn":[32],"globalStoreMethod":[32]},[[0,"nanoChange","handleChangeEvent"],[0,"change","handleChangeEvent"]]]]],["nano-algolia-pagination",[[1,"nano-algolia-pagination",{"maxToShow":[2,"max-to-show"],"currentPage":[32],"canGoPrev":[32],"canGoNext":[32],"show":[32],"tplRenderFn":[32],"indexResults":[32],"infiniteScroll":[32],"nextPage":[64],"prevPage":[64],"goToPage":[64]}]]],["nano-algolia-results",[[1,"nano-algolia-results",{"infiniteScroll":[4,"infinite-scroll"],"appendPages":[4,"append-pages"],"showResults":[32],"tplRenderFn":[32],"results":[32],"indexResults":[32],"resultsPage":[32],"changeEvent":[32],"facets":[32],"isLoading":[32]}]]],["nano-animation",[[1,"nano-animation",{"name":[1],"play":[1540],"delay":[2],"direction":[1],"duration":[2],"easing":[1],"endDelay":[2,"end-delay"],"fill":[1],"iterations":[2],"iterationStart":[2,"iteration-start"],"keyframes":[16],"playbackRate":[2,"playback-rate"],"currentTime":[6146,"current-time"],"cancel":[64],"finish":[64]}]]],["nano-checkbox",[[6,"nano-checkbox",{"hasFocus":[1540,"has-focus"],"checked":[1540],"disabled":[516],"value":[513],"name":[513],"required":[516],"type":[513],"label":[1],"indeterminate":[1540],"invalid":[2564],"validityMessage":[2049,"validity-message"],"color":[1],"form":[1],"inputType":[32],"_invalid":[32],"getInputElement":[64],"reportValidity":[64],"setError":[64],"setFocus":[64],"removeFocus":[64]},[[16,"reset","onReset"]]]]],["nano-checkbox-group",[[6,"nano-checkbox-group",{"validateOn":[1025,"validate-on"],"showInlineError":[4,"show-inline-error"],"min":[2],"max":[2],"disabled":[516],"legend":[1],"hideLegend":[4,"hide-legend"],"invalid":[2564],"validityMessage":[2049,"validity-message"],"value":[1025],"checkboxes":[32],"nativeCbs":[32],"errorMessage":[32],"showErrorMsg":[32],"hasHelperSlot":[32],"_invalid":[32],"reportValidity":[64],"showError":[64]},[[0,"nanoChange","handleValueChange"],[0,"nanoChange","handleCbChange"]]]]],["nano-details",[[1,"nano-details",{"label":[1],"open":[1540],"disabled":[1540],"noHandle":[4,"no-handle"],"iconRotation":[2,"icon-rotation"],"useCacheHeight":[4,"use-cache-height"]}]]],["nano-field-validator",[[4,"nano-field-validator",{"validateOn":[1025,"validate-on"],"scrollToInvalid":[4,"scroll-to-invalid"],"dirty":[2564],"valid":[2564],"store":[2064],"payload":[2064],"showValidation":[2052,"show-validation"],"validationState":[2064],"extraFieldSelector":[1,"extra-field-selector"],"validation":[16],"submitted":[32],"userForm":[32],"_dirty":[32],"_valid":[32],"_store":[32],"setStore":[64],"setCustomValidity":[64],"resetValidity":[64],"scrollToFirstInvalid":[64]},[[0,"nanoChange","handleFieldChange"],[0,"input","handlePlainFieldChange"],[0,"change","handlePlainFieldChange"],[0,"submit","handleSubmit"]]]]],["nano-grid-item",[[1,"nano-grid-item"]]],["nano-intersection-observe",[[1,"nano-intersection-observe",{"root":[1],"rootMargin":[1,"root-margin"],"threshold":[1]}]]],["nano-range",[[6,"nano-range",{"color":[1],"debounce":[2],"name":[1],"dualKnobs":[4,"dual-knobs"],"min":[2],"max":[2],"pin":[4],"snaps":[4],"step":[2],"ticks":[4],"disabled":[4],"value":[1026],"ratioA":[32],"ratioB":[32],"pressedKnob":[32]}]]],["nano-rating",[[2,"nano-rating",{"value":[1538],"max":[2],"precision":[2],"readonly":[4],"disabled":[4],"name":[1],"symbolName":[1,"symbol-name"],"symbol":[16],"hoverValue":[32],"isHovering":[32],"setFocus":[64],"removeFocus":[64]}]]],["nano-slide",[[1,"nano-slide",{"ready":[1540]}]]],["nano-slides",[[1,"nano-slides",{"options":[1040],"navbtns":[4],"pager":[4],"fullscreenbtn":[4],"fullscreen":[1540],"animation":[513],"currentSlide":[1538,"current-slide"],"autoplay":[8],"ready":[1540],"iCurrentSlide":[32],"slidesReady":[32],"didInit":[32],"update":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipes":[64],"getflickity":[64],"reload":[64]}]]],["nano-sortable",[[1,"nano-sortable",{"itemSelector":[1,"item-selector"],"handleSelector":[1,"handle-selector"],"dropzoneSelector":[1,"dropzone-selector"],"helperText":[1,"helper-text"],"itemDescriptor":[16],"grabbedHelperText":[16],"droppedHelperText":[16],"reorderHelperText":[16],"createKeyboardHandle":[16],"sortableHostElement":[16],"animationEnabled":[4,"animation-enabled"],"draggedClass":[1,"dragged-class"],"handleDraggedClass":[1,"handle-dragged-class"],"placeholderClass":[1,"placeholder-class"],"dropzoneActiveClass":[1,"dropzone-active-class"],"animationTiming":[8,"animation-timing"],"orientation":[1],"dragResize":[4,"drag-resize"],"keyboardSortActive":[32],"ariaTextList":[32],"refreshKeyboardHandles":[64]}]]],["nano-tab-content",[[1,"nano-tab-content",{"name":[513],"active":[516],"ready":[32]}]]],["nano-spinner",[[1,"nano-spinner",{"type":[1],"overlay":[516],"hasText":[32]}]]],["nano-algolia",[[1,"nano-algolia",{"showResults":[1028,"show-results"],"resultsPage":[1026,"results-page"],"appId":[1025,"app-id"],"apiKey":[1025,"api-key"],"searchIndex":[1040],"searchIndexName":[1025,"search-index-name"],"listenTo":[1,"listen-to"],"query":[1025],"operator":[1],"filters":[16],"tplRenderFn":[16],"replicaIndex":[1025,"replica-index"],"browseIndex":[1028,"browse-index"],"minChars":[2,"min-chars"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"_dynFacetFilters":[32],"inputField":[32],"algoliaIndex":[32],"indeces":[32],"indexResults":[32],"filterChanged":[32],"currentHits":[32],"changeEvent":[32],"isLoading":[32],"wormholeState":[32],"removeFilters":[64]},[[0,"nanoTplUpdated","onAllTplUpdate"],[0,"nanoPageChanged","onPageChange"],[0,"nanoFilterChanged","onFilterChange"],[16,"nanoChange","handleInputChange"],[16,"change","handleInputChange"]]]]],["nano-icon",[[1,"nano-icon",{"color":[1],"role":[1537],"ariaLabel":[1537,"aria-label"],"flipRtl":[4,"flip-rtl"],"name":[1],"src":[1],"icon":[8],"size":[1],"lazy":[4],"svgContent":[32],"isVisible":[32],"isLoading":[32]}]]],["nano-table",[[4,"nano-table",{"customRenderer":[16],"type":[1],"caption":[1],"showCaption":[4,"show-caption"],"loading":[4],"placeholderSize":[2,"placeholder-size"],"rows":[1040],"columns":[1040],"headRender":[16],"rowRender":[16],"footRender":[16],"showFooter":[4,"show-footer"],"perBlock":[2,"per-block"],"blocksLength":[2050,"blocks-length"],"searchTerm":[1,"search-term"],"customFilterFn":[16],"customSortFn":[16],"defaultSort":[4,"default-sort"],"virtualTotalItems":[2,"virtual-total-items"],"appliedFilters":[2064],"internalLoading":[32],"blocks":[32],"activeBlocks":[32],"resetSorting":[64],"addSort":[64],"resetFilters":[64],"addFilters":[64],"removeFilters":[64],"updateRow":[64]}]]],["nano-date-picker",[[1,"nano-date-picker",{"selectedDate":[1025,"selected-date"],"min":[1],"max":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"color":[1],"isDateDisabled":[16],"isModal":[4,"is-modal"],"firstFocusEle":[16],"activeFocus":[32],"focusedDay":[32],"setFocus":[64]}]]],["nano-grid_2",[[1,"nano-img",{"alt":[1],"src":[1],"srcSet":[1,"src-set"],"lazy":[4],"background":[4],"autoHeight":[1,"auto-height"],"loadSrc":[32],"loadError":[32],"hasLoaded":[32],"imgStates":[32],"_src":[32]}],[1,"nano-grid",{"sSize":[520,"s-size"],"mSize":[520,"m-size"],"lSize":[520,"l-size"],"xlSize":[520,"xl-size"],"sCols":[514,"s-cols"],"mCols":[514,"m-cols"],"lCols":[514,"l-cols"],"xlCols":[514,"xl-cols"],"xxlCols":[514,"xxl-cols"],"sTpl":[1,"s-tpl"],"mTpl":[1,"m-tpl"],"lTpl":[1,"l-tpl"],"xlTpl":[1,"xl-tpl"],"xxlTpl":[1,"xxl-tpl"],"showHelper":[516,"show-helper"],"cacheKey":[32]}]]],["nano-input",[[6,"nano-input",{"invalid":[2564],"validityMessage":[2049,"validity-message"],"color":[1],"accept":[1],"autocapitalise":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"disabled":[516],"inputmode":[1],"validateOn":[1025,"validate-on"],"showInlineError":[516,"show-inline-error"],"label":[1],"hideLabel":[4,"hide-label"],"floatLabel":[4,"float-label"],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[516],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"type":[513],"form":[1],"value":[1025],"resize":[1],"rows":[2],"showCharCount":[4,"show-char-count"],"hasFocus":[32],"hasLabelSlot":[32],"hasHelperSlot":[32],"hasHelperEndSlot":[32],"errorMessage":[32],"datalist":[32],"_invalid":[32],"reportValidity":[64],"setFocus":[64],"select":[64],"getInputElement":[64],"showError":[64]},[[16,"reset","onReset"],[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]]]]],["nano-progress-bar",[[1,"nano-progress-bar",{"value":[2],"indeterminate":[4],"showPercent":[4,"show-percent"]}]]],["nano-sticker",[[1,"nano-sticker",{"autoResize":[4,"auto-resize"],"isSticky":[1028,"is-sticky"],"offset":[1026],"position":[1],"quietMode":[1,"quiet-mode"],"hideOnNewStickers":[4,"hide-on-new-stickers"],"breakPointMax":[2,"break-point-max"],"breakPointMin":[2,"break-point-min"],"scrollParent":[1040],"stickTo":[1,"stick-to"],"isStuck":[32],"isRootSticker":[32],"hide":[32],"scrollHide":[32],"multiStickerHide":[32],"scrollingTo":[32],"quietModeIsOn":[32],"stuckCounter":[32],"stickerIndex":[32],"stickToEle":[32],"triggerPos":[32],"trigger":[32],"_offset":[32],"isHiding":[64],"isSticking":[64],"setTriggerPos":[64],"getTriggerPos":[64],"pauseHiding":[64]}]]],["nano-dropdown",[[1,"nano-dropdown",{"autoOpen":[4,"auto-open"],"open":[1540],"closeOnSelect":[4,"close-on-select"],"containingElement":[1040],"tetherTo":[16],"placement":[1],"distance":[2],"skidding":[2],"hoist":[1028],"dialogTitle":[1,"dialog-title"],"eventType":[16],"show":[64],"hide":[64]},[[0,"nanoOpen","secondaryOpen"],[0,"nanoClose","secondaryClose"],[0,"nanoSelect","handlePanelSelect"]]]]],["nano-datalist_3",[[1,"nano-datalist",{"selected":[1040],"dropDownConfig":[6160],"options":[16],"input":[1],"type":[1],"activeOptions":[2064],"open":[1028],"disableFilter":[4,"disable-filter"],"disabled":[4],"actvOptEles":[32],"connectedInput":[32],"inputLabel":[32],"hasNoResult":[32],"shouldOpen":[32],"canOpen":[32],"optionIds":[32]}],[1,"nano-option",{"value":[1537],"label":[1537],"selected":[516],"disabled":[516],"filterMeta":[1,"filter-meta"],"hasFocus":[32]},[[0,"keydown","handleKeyDown"]]],[1,"nano-menu",{"hasFocus":[2052,"has-focus"],"type":[1],"label":[1],"setFocus":[64],"removeFocus":[64],"showActiveElement":[64],"resetActiveItem":[64]},[[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]]]]],["nano-global-nav-user-profile_3",[[6,"nano-select",{"invalid":[2564],"validityMessage":[2049,"validity-message"],"color":[1],"autofocus":[4],"disabled":[516],"validateOn":[1025,"validate-on"],"showInlineError":[516,"show-inline-error"],"label":[1],"hideLabel":[4,"hide-label"],"floatLabel":[4,"float-label"],"multiple":[4],"maxValuesVisible":[1032,"max-values-visible"],"name":[1],"placeholder":[1],"readonly":[516],"required":[4],"size":[2],"max":[2],"min":[2],"form":[1],"allowCustomValues":[4,"allow-custom-values"],"value":[6145],"options":[6160],"clearSelect":[4,"clear-select"],"mask":[4],"debounce":[2],"dropDownConfig":[1040],"valueTagTemplate":[16],"currInsertIndex":[32],"showErrorMsg":[32],"errorMessage":[32],"hasFocus":[32],"hasLabelSlot":[32],"hasHelperSlot":[32],"hasHelperEndSlot":[32],"inputSearchVal":[32],"_invalid":[32],"_elementOptions":[32],"reportValidity":[64],"setFocus":[64],"getSelectElement":[64],"showError":[64]},[[16,"reset","onReset"],[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]]],[0,"nano-global-nav-user-profile",{"myAccountUser":[16],"userProfileUrl":[1,"user-profile-url"]}],[1,"nano-nav-item",{"href":[1025],"target":[1],"disabled":[4],"open":[1540],"selected":[516],"secondaryActiveWidth":[2,"secondary-active-width"],"secondaryFallback":[16],"closeOnBlur":[4,"close-on-blur"],"notification":[4],"hasAnchorEle":[32],"didOpen":[32],"isInGlobalNav":[32],"isInMenuDrawer":[32],"isInMenu":[32],"hasFocus":[32],"setFocus":[64]},[[16,"click","handleClose"],[16,"keyup","handleClose"]]]]],["nano-resize-observe_2",[[1,"nano-resize-observe",{"notifyContentFit":[1,"notify-content-fit"],"states":[1],"currentWidth":[32],"currentHeight":[32],"classNames":[32],"contentFitX":[32],"contentFitY":[32]}],[1,"nano-skeleton",{"animated":[4]}]]],["nano-icon-button_2",[[1,"nano-icon-button",{"iconName":[1,"icon-name"],"iconSrc":[1,"icon-src"],"type":[513],"name":[513],"value":[513],"label":[1],"showTooltip":[4,"show-tooltip"],"disabled":[516],"href":[1],"rel":[1],"target":[1],"form":[1],"setFocus":[64]}],[1,"nano-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"hoist":[1028],"trigger":[1],"show":[64],"hide":[64]}]]]]'),e)));
+import{p as e,H as a,b as o}from"./index-9695db0a.js";export{s as setNonce}from"./index-9695db0a.js";import"./global-be484e8c.js";const n=()=>{{t(a.prototype)}const o=import.meta.url;const n={};if(o!==""){n.resourcesUrl=new URL(".",o).href}return e(n)};const t=e=>{const a=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return a.call(this,e)}const o=a.call(this,false);const n=this.childNodes;if(e){for(let e=0;e<n.length;e++){if(n[e].nodeType!==2){o.appendChild(n[e].cloneNode(true))}}}return o}};n().then((e=>o(JSON.parse('[["nano-global-nav",[[1,"nano-global-nav",{"env":[1],"ssoDataUrl":[1,"sso-data-url"],"myAccountData":[16],"ssoRedirect":[1,"sso-redirect"],"getMyAccountData":[4,"get-my-account-data"],"activeMyAccountSections":[16],"showSearch":[4,"show-search"],"showLogo":[4,"show-logo"],"logoUrl":[1,"logo-url"],"searchIndeces":[16],"myAccountUser":[1040],"searchAppId":[1025,"search-app-id"],"searchApiKey":[1025,"search-api-key"],"searchValue":[1025,"search-value"],"searchIndex":[1025,"search-index"],"cartCount":[1026,"cart-count"],"msgCount":[1026,"msg-count"],"cartUrl":[1025,"cart-url"],"msgUrl":[1025,"msg-url"],"userProfileUrl":[32],"hasLoggedinSlot":[32],"hasSiteSlot":[32],"hasPromotionSlot":[32],"aboutSlotLen":[32],"iconSlotLen":[32],"mainSlotLen":[32],"overflowSlotLen":[32],"searchSlotLen":[32],"thresholdReady":[32],"remoteDataReady":[32],"ready":[32],"isResizing":[32],"threshold":[32],"modalOpen":[32],"modalIsOpen":[32],"searchBarShown":[32],"scrollingUp":[32],"showAutocomplete":[32],"secondaryMenuOpen":[32],"userMenuOpen":[32],"menuFullScreen":[32],"searchLoading":[32],"searchValInternal":[32],"internalSearchIndeces":[32],"submitSearch":[64],"toggleOverflowMenu":[64]},[[0,"nanoOpen","secondaryOpen"],[0,"nanoClose","secondaryClose"],[16,"click","menuClose"]]]]],["nano-demo",[[1,"nano-demo"]]],["nano-date-input",[[6,"nano-date-input",{"invalid":[2564],"validityMessage":[2049,"validity-message"],"helperText":[4,"helper-text"],"helperTextFormat":[16],"floatLabel":[4,"float-label"],"name":[1],"readonly":[4],"size":[2],"form":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"disabled":[4],"color":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"label":[1],"placeholder":[1025],"value":[1537],"validateOn":[1,"validate-on"],"showInlineError":[516,"show-inline-error"],"dateOrder":[1,"date-order"],"required":[4],"min":[1],"max":[1],"hideLabel":[4,"hide-label"],"picker":[4],"initialPickerDate":[1,"initial-picker-date"],"pickerOpen":[1540,"picker-open"],"closeAfterPicked":[4,"close-after-picked"],"dropDownConfig":[6160],"dateValue":[2064],"isDateDisabled":[16],"pattern":[32],"inputValue":[32],"_invalid":[32],"reportValidity":[64],"setFocus":[64],"getInputElement":[64],"showError":[64]}]]],["nano-dialog",[[1,"nano-dialog",{"showRibbon":[4,"show-ribbon"],"open":[1540],"label":[1],"noHeader":[4,"no-header"],"noFooter":[4,"no-footer"],"noUserDismiss":[4,"no-user-dismiss"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"hoist":[4],"noDismiss":[32],"hasFooter":[32],"show":[64],"hide":[64]}]]],["nano-drawer",[[1,"nano-drawer",{"open":[516],"label":[513],"placement":[513],"contained":[516],"noHeader":[516,"no-header"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"noUserDismiss":[4,"no-user-dismiss"],"hoist":[4],"noDismiss":[32],"hasFooter":[32],"show":[64],"hide":[64]}]]],["nano-hero",[[1,"nano-hero",{"imgSrc":[1,"img-src"],"imgSrcSet":[1,"img-src-set"],"largeScreenBP":[2,"large-screen-b-p"],"theme":[1],"level":[1],"hasIconBox":[32],"hasScrim":[32],"hasSecondaryContent":[32],"hasQuote":[32],"hasBg":[32],"hasBackBtn":[32],"hasCtas":[32],"breadCrumbs":[32],"iconBoxItems":[32]}]]],["nano-alert",[[1,"nano-alert",{"open":[1540],"closable":[516],"color":[513],"duration":[2],"hoist":[4],"isModal":[32],"isToast":[32],"isShowing":[32],"label":[32],"noDismiss":[32],"show":[64],"hide":[64],"toast":[64],"alert":[64]}]]],["nano-file-upload",[[6,"nano-file-upload",{"name":[1],"accept":[1],"capture":[1],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"label":[1],"placeholder":[1],"hideLabel":[4,"hide-label"],"required":[4],"disabled":[516],"clearInput":[4,"clear-input"],"showInlineError":[516,"show-inline-error"],"validateOn":[1025,"validate-on"],"form":[1],"invalid":[2564],"validityMessage":[2049,"validity-message"],"files":[6160],"value":[6145],"hasHelperSlot":[32],"hasLabelSlot":[32],"errorMessage":[32],"isDragging":[32],"fileList":[32],"hasFocus":[32],"_invalid":[32],"reportValidity":[64],"setFocus":[64],"getInputElement":[64],"showError":[64]},[[8,"click","globalClickHandler"],[8,"keydown","globalKeydownHandler"],[16,"reset","onReset"]]]]],["nano-overflow-nav",[[1,"nano-overflow-nav",{"scrollControls":[4,"scroll-controls"],"orientation":[513],"activeHandler":[16],"inActiveHandler":[16],"isActiveHandler":[16],"instantReCalc":[32],"hasScrollControls":[32],"hideControlEnd":[32],"hideControlStart":[32],"syncActiveItem":[64]}]]],["nano-tab",[[1,"nano-tab",{"panel":[513],"active":[516],"disabled":[516],"closable":[4],"setFocus":[64],"removeFocus":[64]}]]],["nano-global-search-results",[[1,"nano-global-search-results",{"algoliaResults":[32],"algoliaEle":[32],"currentWidth":[32],"apiKey":[32],"appId":[32],"index":[32],"closeSearch":[64]},[[16,"nanoSearchReset","handleGlobalNavReset"],[16,"nanoSearchResult","handleGlobalNavSearch"],[0,"nanoChange","handleReorder"],[0,"nanoResultsShown","attachListeners"],[16,"nanoNewResults","attachResultListeners"]]]]],["nano-menu-drawer",[[1,"nano-menu-drawer",{"open":[1028],"saveState":[4,"save-state"],"hideWidth":[2,"hide-width"],"hideHeight":[4,"hide-height"],"reset":[32],"widthOk":[32],"heightOk":[32],"isLoading":[32],"hide":[32]},[[0,"nanoOpen","cancelNavItemEvents"],[0,"nanoClose","cancelNavItemEvents"],[16,"nanoIsReady","handleGlobalNavReady"]]]]],["nano-split-pane",[[1,"nano-split-pane",{"position":[6146],"positionInPixels":[1026,"position-in-pixels"],"vertical":[516],"disabled":[516],"primary":[1],"snap":[1],"snapThreshold":[2,"snap-threshold"],"animationDuration":[2,"animation-duration"],"getPercentageToPixels":[64],"getPixelsToPercentage":[64]}]]],["nano-tab-group",[[1,"nano-tab-group",{"placement":[513],"noScrollControls":[4,"no-scroll-controls"],"color":[1],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"disableSwipe":[4,"disable-swipe"],"hasScrollControls":[32],"hideControlRight":[32],"hideControlLeft":[32],"tab":[32],"show":[64]},[[0,"nanoTabClose","handleTabClose"]]]]],["nano-accordion",[[1,"nano-accordion",{"color":[1],"itemOpened":[32]},[[0,"nanoOpened","onToggleHandler"],[0,"nanoClosed","onClosedHandler"]]]]],["nano-algolia-filter",[[1,"nano-algolia-filter",{"filterName":[1,"filter-name"],"value":[1025],"operator":[1],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"changeEvent":[32],"internalValue":[32],"showFilter":[32],"indexResults":[32],"filterChanged":[32],"facets":[32],"tplRenderFn":[32],"globalStoreMethod":[32]},[[0,"nanoChange","handleChangeEvent"],[0,"change","handleChangeEvent"]]]]],["nano-algolia-pagination",[[1,"nano-algolia-pagination",{"maxToShow":[2,"max-to-show"],"currentPage":[32],"canGoPrev":[32],"canGoNext":[32],"show":[32],"tplRenderFn":[32],"indexResults":[32],"infiniteScroll":[32],"nextPage":[64],"prevPage":[64],"goToPage":[64]}]]],["nano-algolia-results",[[1,"nano-algolia-results",{"infiniteScroll":[4,"infinite-scroll"],"appendPages":[4,"append-pages"],"showResults":[32],"tplRenderFn":[32],"results":[32],"indexResults":[32],"resultsPage":[32],"changeEvent":[32],"facets":[32],"isLoading":[32]}]]],["nano-animation",[[1,"nano-animation",{"name":[1],"play":[1540],"delay":[2],"direction":[1],"duration":[2],"easing":[1],"endDelay":[2,"end-delay"],"fill":[1],"iterations":[2],"iterationStart":[2,"iteration-start"],"keyframes":[16],"playbackRate":[2,"playback-rate"],"currentTime":[6146,"current-time"],"cancel":[64],"finish":[64]}]]],["nano-checkbox",[[6,"nano-checkbox",{"hasFocus":[1540,"has-focus"],"checked":[1540],"disabled":[516],"value":[513],"name":[513],"required":[516],"type":[513],"label":[1],"indeterminate":[1540],"invalid":[2564],"validityMessage":[2049,"validity-message"],"color":[1],"form":[1],"inputType":[32],"_invalid":[32],"getInputElement":[64],"reportValidity":[64],"setError":[64],"setFocus":[64],"removeFocus":[64]},[[16,"reset","onReset"]]]]],["nano-checkbox-group",[[6,"nano-checkbox-group",{"validateOn":[1025,"validate-on"],"showInlineError":[4,"show-inline-error"],"min":[2],"max":[2],"disabled":[516],"legend":[1],"hideLegend":[4,"hide-legend"],"invalid":[2564],"validityMessage":[2049,"validity-message"],"value":[1025],"checkboxes":[32],"nativeCbs":[32],"errorMessage":[32],"showErrorMsg":[32],"hasHelperSlot":[32],"_invalid":[32],"reportValidity":[64],"showError":[64]},[[0,"nanoChange","handleValueChange"],[0,"nanoChange","handleCbChange"]]]]],["nano-details",[[1,"nano-details",{"label":[1],"open":[1540],"disabled":[1540],"noHandle":[4,"no-handle"],"iconRotation":[2,"icon-rotation"],"useCacheHeight":[4,"use-cache-height"]}]]],["nano-field-validator",[[4,"nano-field-validator",{"validateOn":[1025,"validate-on"],"scrollToInvalid":[4,"scroll-to-invalid"],"dirty":[2564],"valid":[2564],"store":[2064],"payload":[2064],"showValidation":[2052,"show-validation"],"validationState":[2064],"extraFieldSelector":[1,"extra-field-selector"],"validation":[16],"submitted":[32],"userForm":[32],"_dirty":[32],"_valid":[32],"_store":[32],"setStore":[64],"setCustomValidity":[64],"resetValidity":[64],"scrollToFirstInvalid":[64]},[[0,"nanoChange","handleFieldChange"],[0,"input","handlePlainFieldChange"],[0,"change","handlePlainFieldChange"],[0,"submit","handleSubmit"]]]]],["nano-grid-item",[[1,"nano-grid-item"]]],["nano-intersection-observe",[[1,"nano-intersection-observe",{"root":[1],"rootMargin":[1,"root-margin"],"threshold":[1]}]]],["nano-more-less",[[6,"nano-more-less",{"show":[1540],"childrenSelector":[1,"children-selector"],"maxToShow":[2,"max-to-show"],"noHideBtn":[4,"no-hide-btn"],"slottedElements":[32]}]]],["nano-range",[[6,"nano-range",{"color":[1],"debounce":[2],"name":[1],"dualKnobs":[4,"dual-knobs"],"min":[2],"max":[2],"pin":[4],"snaps":[4],"step":[2],"ticks":[4],"disabled":[4],"value":[1026],"ratioA":[32],"ratioB":[32],"pressedKnob":[32]}]]],["nano-rating",[[2,"nano-rating",{"value":[1538],"max":[2],"precision":[2],"readonly":[4],"disabled":[4],"name":[1],"symbolName":[1,"symbol-name"],"symbol":[16],"hoverValue":[32],"isHovering":[32],"setFocus":[64],"removeFocus":[64]}]]],["nano-slide",[[1,"nano-slide",{"ready":[1540]}]]],["nano-slides",[[1,"nano-slides",{"options":[1040],"navbtns":[4],"pager":[4],"fullscreenbtn":[4],"fullscreen":[1540],"animation":[513],"currentSlide":[1538,"current-slide"],"autoplay":[8],"ready":[1540],"iCurrentSlide":[32],"slidesReady":[32],"didInit":[32],"update":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipes":[64],"getflickity":[64],"reload":[64]}]]],["nano-sortable",[[1,"nano-sortable",{"itemSelector":[1,"item-selector"],"handleSelector":[1,"handle-selector"],"dropzoneSelector":[1,"dropzone-selector"],"helperText":[1,"helper-text"],"itemDescriptor":[16],"grabbedHelperText":[16],"droppedHelperText":[16],"reorderHelperText":[16],"createKeyboardHandle":[16],"sortableHostElement":[16],"animationEnabled":[4,"animation-enabled"],"draggedClass":[1,"dragged-class"],"handleDraggedClass":[1,"handle-dragged-class"],"placeholderClass":[1,"placeholder-class"],"dropzoneActiveClass":[1,"dropzone-active-class"],"animationTiming":[8,"animation-timing"],"orientation":[1],"dragResize":[4,"drag-resize"],"keyboardSortActive":[32],"ariaTextList":[32],"refreshKeyboardHandles":[64]}]]],["nano-tab-content",[[1,"nano-tab-content",{"name":[513],"active":[516],"ready":[32]}]]],["nano-spinner",[[1,"nano-spinner",{"type":[1],"overlay":[516],"hasText":[32]}]]],["nano-table",[[4,"nano-table",{"customRenderer":[16],"type":[1],"caption":[1],"showCaption":[4,"show-caption"],"loading":[4],"placeholderSize":[2,"placeholder-size"],"rows":[1040],"columns":[1040],"headRender":[16],"rowRender":[16],"footRender":[16],"showFooter":[4,"show-footer"],"perBlock":[2,"per-block"],"blocksLength":[2050,"blocks-length"],"searchTerm":[1,"search-term"],"customFilterFn":[16],"customSortFn":[16],"defaultSort":[4,"default-sort"],"virtualTotalItems":[2,"virtual-total-items"],"appliedFilters":[2064],"internalLoading":[32],"blocks":[32],"activeBlocks":[32],"resetSorting":[64],"addSort":[64],"resetFilters":[64],"addFilters":[64],"removeFilters":[64],"updateRow":[64]}]]],["nano-algolia",[[1,"nano-algolia",{"showResults":[1028,"show-results"],"resultsPage":[1026,"results-page"],"appId":[1025,"app-id"],"apiKey":[1025,"api-key"],"searchIndex":[1040],"searchIndexName":[1025,"search-index-name"],"listenTo":[1,"listen-to"],"query":[1025],"operator":[1],"filters":[16],"tplRenderFn":[16],"replicaIndex":[1025,"replica-index"],"browseIndex":[1028,"browse-index"],"minChars":[2,"min-chars"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"_dynFacetFilters":[32],"inputField":[32],"algoliaIndex":[32],"indeces":[32],"indexResults":[32],"filterChanged":[32],"currentHits":[32],"changeEvent":[32],"isLoading":[32],"wormholeState":[32],"removeFilters":[64]},[[0,"nanoTplUpdated","onAllTplUpdate"],[0,"nanoPageChanged","onPageChange"],[0,"nanoFilterChanged","onFilterChange"],[16,"nanoChange","handleInputChange"],[16,"change","handleInputChange"]]]]],["nano-date-picker",[[1,"nano-date-picker",{"selectedDate":[1025,"selected-date"],"min":[1],"max":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"color":[1],"isDateDisabled":[16],"isModal":[4,"is-modal"],"firstFocusEle":[16],"activeFocus":[32],"focusedDay":[32],"setFocus":[64]}]]],["nano-grid_2",[[1,"nano-img",{"alt":[1],"src":[1],"srcSet":[1,"src-set"],"lazy":[4],"background":[4],"autoHeight":[1,"auto-height"],"loadSrc":[32],"loadError":[32],"hasLoaded":[32],"imgStates":[32],"_src":[32]}],[1,"nano-grid",{"sSize":[520,"s-size"],"mSize":[520,"m-size"],"lSize":[520,"l-size"],"xlSize":[520,"xl-size"],"sCols":[514,"s-cols"],"mCols":[514,"m-cols"],"lCols":[514,"l-cols"],"xlCols":[514,"xl-cols"],"xxlCols":[514,"xxl-cols"],"sTpl":[1,"s-tpl"],"mTpl":[1,"m-tpl"],"lTpl":[1,"l-tpl"],"xlTpl":[1,"xl-tpl"],"xxlTpl":[1,"xxl-tpl"],"showHelper":[516,"show-helper"],"cacheKey":[32]}]]],["nano-input",[[6,"nano-input",{"invalid":[2564],"validityMessage":[2049,"validity-message"],"color":[1],"accept":[1],"autocapitalise":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"disabled":[516],"inputmode":[1],"validateOn":[1025,"validate-on"],"showInlineError":[516,"show-inline-error"],"label":[1],"hideLabel":[4,"hide-label"],"floatLabel":[4,"float-label"],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[516],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"type":[513],"form":[1],"value":[1025],"resize":[1],"rows":[2],"showCharCount":[4,"show-char-count"],"hasFocus":[32],"hasLabelSlot":[32],"hasHelperSlot":[32],"hasHelperEndSlot":[32],"errorMessage":[32],"datalist":[32],"_invalid":[32],"reportValidity":[64],"setFocus":[64],"select":[64],"getInputElement":[64],"showError":[64]},[[16,"reset","onReset"],[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]]]]],["nano-progress-bar",[[1,"nano-progress-bar",{"value":[2],"indeterminate":[4],"showPercent":[4,"show-percent"]}]]],["nano-sticker",[[1,"nano-sticker",{"autoResize":[4,"auto-resize"],"isSticky":[1028,"is-sticky"],"offset":[1026],"position":[1],"quietMode":[1,"quiet-mode"],"hideOnNewStickers":[4,"hide-on-new-stickers"],"breakPointMax":[2,"break-point-max"],"breakPointMin":[2,"break-point-min"],"scrollParent":[1040],"stickTo":[1,"stick-to"],"isStuck":[32],"isRootSticker":[32],"hide":[32],"scrollHide":[32],"multiStickerHide":[32],"scrollingTo":[32],"quietModeIsOn":[32],"stuckCounter":[32],"stickerIndex":[32],"stickToEle":[32],"triggerPos":[32],"trigger":[32],"_offset":[32],"isHiding":[64],"isSticking":[64],"setTriggerPos":[64],"getTriggerPos":[64],"pauseHiding":[64]}]]],["nano-dropdown",[[1,"nano-dropdown",{"autoOpen":[4,"auto-open"],"open":[1540],"closeOnSelect":[4,"close-on-select"],"containingElement":[1040],"tetherTo":[16],"placement":[1],"distance":[2],"skidding":[2],"hoist":[1028],"dialogTitle":[1,"dialog-title"],"eventType":[16],"show":[64],"hide":[64]},[[0,"nanoOpen","secondaryOpen"],[0,"nanoClose","secondaryClose"],[0,"nanoSelect","handlePanelSelect"]]]]],["nano-datalist_3",[[1,"nano-datalist",{"selected":[1040],"dropDownConfig":[6160],"options":[16],"input":[1],"type":[1],"activeOptions":[2064],"open":[1028],"disableFilter":[4,"disable-filter"],"disabled":[4],"actvOptEles":[32],"connectedInput":[32],"inputLabel":[32],"hasNoResult":[32],"shouldOpen":[32],"canOpen":[32],"optionIds":[32]}],[1,"nano-option",{"value":[1537],"label":[1537],"selected":[516],"disabled":[516],"filterMeta":[1,"filter-meta"],"hasFocus":[32]},[[0,"keydown","handleKeyDown"]]],[1,"nano-menu",{"hasFocus":[2052,"has-focus"],"type":[1],"label":[1],"setFocus":[64],"removeFocus":[64],"showActiveElement":[64],"resetActiveItem":[64]},[[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]]]]],["nano-global-nav-user-profile_3",[[6,"nano-select",{"invalid":[2564],"validityMessage":[2049,"validity-message"],"color":[1],"autofocus":[4],"disabled":[516],"validateOn":[1025,"validate-on"],"showInlineError":[516,"show-inline-error"],"label":[1],"hideLabel":[4,"hide-label"],"floatLabel":[4,"float-label"],"multiple":[4],"maxValuesVisible":[1032,"max-values-visible"],"name":[1],"placeholder":[1],"readonly":[516],"required":[4],"size":[2],"max":[2],"min":[2],"form":[1],"allowCustomValues":[4,"allow-custom-values"],"value":[6145],"options":[6160],"clearSelect":[4,"clear-select"],"mask":[4],"debounce":[2],"dropDownConfig":[1040],"valueTagTemplate":[16],"currInsertIndex":[32],"showErrorMsg":[32],"errorMessage":[32],"hasFocus":[32],"hasLabelSlot":[32],"hasHelperSlot":[32],"hasHelperEndSlot":[32],"inputSearchVal":[32],"_invalid":[32],"_elementOptions":[32],"reportValidity":[64],"setFocus":[64],"getSelectElement":[64],"showError":[64]},[[16,"reset","onReset"],[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]]],[0,"nano-global-nav-user-profile",{"myAccountUser":[16],"userProfileUrl":[1,"user-profile-url"]}],[1,"nano-nav-item",{"href":[1025],"target":[1],"disabled":[4],"open":[1540],"selected":[516],"secondaryActiveWidth":[2,"secondary-active-width"],"secondaryFallback":[16],"closeOnBlur":[4,"close-on-blur"],"notification":[4],"hasAnchorEle":[32],"didOpen":[32],"isInGlobalNav":[32],"isInMenuDrawer":[32],"isInMenu":[32],"hasFocus":[32],"setFocus":[64]},[[16,"click","handleClose"],[16,"keyup","handleClose"]]]]],["nano-resize-observe_2",[[1,"nano-resize-observe",{"notifyContentFit":[1,"notify-content-fit"],"states":[1],"currentWidth":[32],"currentHeight":[32],"classNames":[32],"contentFitX":[32],"contentFitY":[32]}],[1,"nano-skeleton",{"animated":[4]}]]],["nano-icon",[[1,"nano-icon",{"color":[1],"role":[1537],"ariaLabel":[1537,"aria-label"],"flipRtl":[4,"flip-rtl"],"name":[1],"src":[1],"icon":[8],"size":[1],"lazy":[4],"svgContent":[32],"isVisible":[32],"isLoading":[32]}]]],["nano-icon-button_2",[[1,"nano-icon-button",{"iconName":[1,"icon-name"],"iconSrc":[1,"icon-src"],"type":[513],"name":[513],"value":[513],"label":[1],"showTooltip":[4,"show-tooltip"],"disabled":[516],"href":[1],"rel":[1],"target":[1],"form":[1],"setFocus":[64]}],[1,"nano-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"hoist":[1028],"trigger":[1],"show":[64],"hide":[64]}]]]]'),e)));
 //# sourceMappingURL=nano-components.esm.js.map

package/dist/nano-components/nano-components.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["patchBrowser","patchCloneNodeFix","H","prototype","importMeta","import","meta","url","opts","resourcesUrl","URL","href","promiseResolve","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","appendChild","then","options","bootstrapLazy","JSON","parse"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/\n Stencil Client Patch Browser v2.23.2 \| MIT Licensed \| https://stenciljs.com\n /\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/*\n Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n \n @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n /\nfunction queryNonceMetaTagContent(doc) {\n var _a, _b, _c;\n return (_c = (_b = (_a = doc.head) === null \|\| _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null \|\| _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s\|-/g, '_')}`;\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cssVarShim) {\n // shim css vars\n plt.$cssShim$ = win.__cssshim;\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /noop/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = BUILD.scriptDataOpts \|\| BUILD.safari10 \|\| BUILD.dynamicImportShim\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($\|\\\\?\|#)`).test(s.src) \|\|\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] \|\| {} : {};\n if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration / IS_ESM_BUILD /) {\n // Safari < v11 support: This IF is true if it's Safari below v11.\n // This fn cannot use async/await since Safari didn't support it until v11,\n // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n // so both the ESM file and nomodule file would get downloaded. Only Safari\n // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n return {\n then() {\n / promise noop /\n },\n };\n }\n if (!BUILD.safari10 && importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n else if (BUILD.dynamicImportShim \|\| BUILD.safari10) {\n opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') \|\| scriptElm.src, win.location.href)).href;\n if (BUILD.dynamicImportShim) {\n patchDynamicImport(opts.resourcesUrl, scriptElm);\n }\n if (BUILD.dynamicImportShim && !win.customElements) {\n // module support, but no custom elements support (Old Edge)\n // @ts-ignore\n return import(/ webpackChunkName: \"polyfills-dom\" / './dom.js').then(() => opts);\n }\n }\n return promiseResolve(opts);\n};\nconst patchDynamicImport = (base, orgScriptElm) => {\n const importFunctionName = getDynamicImportFunction(NAMESPACE);\n try {\n // test if this browser supports dynamic imports\n // There is a caching issue in V8, that breaks using import() in Function\n // By generating a random string, we can workaround it\n // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n }\n catch (e) {\n // this shim is specifically for browsers that do support \"esm\" imports\n // however, they do NOT support \"dynamic\" imports\n // basically this code is for old Edge, v18 and below\n const moduleMap = new Map();\n win[importFunctionName] = (src) => {\n var _a;\n const url = new URL(src, base).href;\n let mod = moduleMap.get(url);\n if (!mod) {\n const script = doc.createElement('script');\n script.type = 'module';\n script.crossOrigin = orgScriptElm.crossOrigin;\n script.src = URL.createObjectURL(new Blob([`import as m from '${url}'; window.${importFunctionName}.m = m;`], {\n type: 'application/javascript',\n }));\n // Apply CSP nonce to the script tag if it exists\n const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n if (nonce != null) {\n script.setAttribute('nonce', nonce);\n }\n mod = new Promise((resolve) => {\n script.onload = () => {\n resolve(win[importFunctionName].m);\n script.remove();\n };\n });\n moduleMap.set(url, mod);\n doc.head.appendChild(script);\n }\n return mod;\n };\n }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/!__STENCIL_LAZY_DATA__/], options);\n});\n"],"mappings":";;;kIAkBA,MAAMA,EAAe,KASO,CAEpBC,EAAkBC,EAAEC,UAC5B,CAiBI,MAAMC,EAAaC,OAAOC,KAAKC,IAC/B,MAAMC,EAA6D,GAenE,GAAuBJ,IAAe,GAAI,CACtCI,EAAKC,aAAe,IAAIC,IAAI,IAAKN,GAAYO,IACrD,CAYI,OAAOC,EAAeJ,EAAK,EA6C/B,MAAMP,EAAqBY,IACvB,MAAMC,EAAoBD,EAAqBE,UAC/CF,EAAqBE,UAAY,SAAUC,GACvC,GAAIC,KAAKC,WAAa,WAAY,CAC9B,OAAOJ,EAAkBK,KAAKF,KAAMD,EAChD,CACQ,MAAMI,EAAaN,EAAkBK,KAAKF,KAAM,OAChD,MAAMI,EAAgBJ,KAAKK,WAC3B,GAAIN,EAAM,CACN,IAAK,IAAIO,EAAI,EAAGA,EAAIF,EAAcG,OAAQD,IAAK,CAE3C,GAAIF,EAAcE,GAAGE,WAAa,EAAG,CACjCL,EAAWM,YAAYL,EAAcE,GAAGR,UAAU,MACtE,CACA,CACA,CACQ,OAAOK,CACf,CAAK,ECvILpB,IAAe2B,MAAKC,GAEXC,EAAcC,KAAAC,MAAA~~,+mlBAAuCH~~"}
1	+ {"version":3,"names":["patchBrowser","patchCloneNodeFix","H","prototype","importMeta","import","meta","url","opts","resourcesUrl","URL","href","promiseResolve","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","appendChild","then","options","bootstrapLazy","JSON","parse"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/\n Stencil Client Patch Browser v2.23.2 \| MIT Licensed \| https://stenciljs.com\n /\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/*\n Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n \n @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n /\nfunction queryNonceMetaTagContent(doc) {\n var _a, _b, _c;\n return (_c = (_b = (_a = doc.head) === null \|\| _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null \|\| _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s\|-/g, '_')}`;\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cssVarShim) {\n // shim css vars\n plt.$cssShim$ = win.__cssshim;\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /noop/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = BUILD.scriptDataOpts \|\| BUILD.safari10 \|\| BUILD.dynamicImportShim\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($\|\\\\?\|#)`).test(s.src) \|\|\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] \|\| {} : {};\n if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration / IS_ESM_BUILD /) {\n // Safari < v11 support: This IF is true if it's Safari below v11.\n // This fn cannot use async/await since Safari didn't support it until v11,\n // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n // so both the ESM file and nomodule file would get downloaded. Only Safari\n // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n return {\n then() {\n / promise noop /\n },\n };\n }\n if (!BUILD.safari10 && importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n else if (BUILD.dynamicImportShim \|\| BUILD.safari10) {\n opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') \|\| scriptElm.src, win.location.href)).href;\n if (BUILD.dynamicImportShim) {\n patchDynamicImport(opts.resourcesUrl, scriptElm);\n }\n if (BUILD.dynamicImportShim && !win.customElements) {\n // module support, but no custom elements support (Old Edge)\n // @ts-ignore\n return import(/ webpackChunkName: \"polyfills-dom\" / './dom.js').then(() => opts);\n }\n }\n return promiseResolve(opts);\n};\nconst patchDynamicImport = (base, orgScriptElm) => {\n const importFunctionName = getDynamicImportFunction(NAMESPACE);\n try {\n // test if this browser supports dynamic imports\n // There is a caching issue in V8, that breaks using import() in Function\n // By generating a random string, we can workaround it\n // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n }\n catch (e) {\n // this shim is specifically for browsers that do support \"esm\" imports\n // however, they do NOT support \"dynamic\" imports\n // basically this code is for old Edge, v18 and below\n const moduleMap = new Map();\n win[importFunctionName] = (src) => {\n var _a;\n const url = new URL(src, base).href;\n let mod = moduleMap.get(url);\n if (!mod) {\n const script = doc.createElement('script');\n script.type = 'module';\n script.crossOrigin = orgScriptElm.crossOrigin;\n script.src = URL.createObjectURL(new Blob([`import as m from '${url}'; window.${importFunctionName}.m = m;`], {\n type: 'application/javascript',\n }));\n // Apply CSP nonce to the script tag if it exists\n const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n if (nonce != null) {\n script.setAttribute('nonce', nonce);\n }\n mod = new Promise((resolve) => {\n script.onload = () => {\n resolve(win[importFunctionName].m);\n script.remove();\n };\n });\n moduleMap.set(url, mod);\n doc.head.appendChild(script);\n }\n return mod;\n };\n }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/!__STENCIL_LAZY_DATA__/], options);\n});\n"],"mappings":";;;kIAkBA,MAAMA,EAAe,KASO,CAEpBC,EAAkBC,EAAEC,UAC5B,CAiBI,MAAMC,EAAaC,OAAOC,KAAKC,IAC/B,MAAMC,EAA6D,GAenE,GAAuBJ,IAAe,GAAI,CACtCI,EAAKC,aAAe,IAAIC,IAAI,IAAKN,GAAYO,IACrD,CAYI,OAAOC,EAAeJ,EAAK,EA6C/B,MAAMP,EAAqBY,IACvB,MAAMC,EAAoBD,EAAqBE,UAC/CF,EAAqBE,UAAY,SAAUC,GACvC,GAAIC,KAAKC,WAAa,WAAY,CAC9B,OAAOJ,EAAkBK,KAAKF,KAAMD,EAChD,CACQ,MAAMI,EAAaN,EAAkBK,KAAKF,KAAM,OAChD,MAAMI,EAAgBJ,KAAKK,WAC3B,GAAIN,EAAM,CACN,IAAK,IAAIO,EAAI,EAAGA,EAAIF,EAAcG,OAAQD,IAAK,CAE3C,GAAIF,EAAcE,GAAGE,WAAa,EAAG,CACjCL,EAAWM,YAAYL,EAAcE,GAAGR,UAAU,MACtE,CACA,CACA,CACQ,OAAOK,CACf,CAAK,ECvILpB,IAAe2B,MAAKC,GAEXC,EAAcC,KAAAC,MAAA,0zlBAAuCH"}

package/dist/nano-components/nano-file-upload.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as i,c as o,h as n,a,g as t}from"./index-9695db0a.js";const e='.sc-nano-file-upload-h{box-sizing:border-box}*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--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-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--label-color--invalid:var(--nano-input-label-color-invalid, "currentcolor");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0 116 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, white);--drop-border--invalid:var(--nano-color-danger-rgb, 239 65 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1rem);--btn-padding-end:var(--nano-btn-padding-end, 1rem)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{block-size:1em;margin-block:calc(var(--label-padding) / 2) var(--label-padding);margin-inline:3px 0;position:relative}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{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}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--drop-bg);color:var(--drop-text);min-block-size:var(--drop-height);display:flex;align-items:center;justify-content:center;font-size:0.9em;position:relative;transition:background-color 0.15s ease-in-out;padding:0.5rem}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{opacity:0.7}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg--invalid)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:#fff}.file-upload__drop-area.sc-nano-file-upload::after{content:"";position:absolute;border-radius:var(--drop-border-radius);border-width:var(--drop-border-width);border-color:rgb(var(--drop-border-tint)/50%);border-style:dashed;inset:0;transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{border-color:rgb(var(--drop-border--invalid)/100%)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:rgb(var(--drop-border-tint)/100%);text-decoration:underline;border-radius:2px;z-index:1;cursor:pointer;position:relative}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__list.sc-nano-file-upload{list-style:none;margin:0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;transform:translateZ(0);animation:hideListItem 0.3s ease-in-out forwards}@keyframes hideListItem{0%{opacity:1;transform:translateY(0);transform:translateZ(0)}100%{opacity:0;transform:translateY(10px);transform:translateZ(0)}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem 0.3s ease-in-out forwards}@keyframes showListItem{0%{opacity:0;transform:translateY(10px);transform:translateZ(0)}100%{opacity:1;transform:translateY(0);transform:translateZ(0)}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;padding:5px;margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:rgb(var(--drop-border--invalid) / 100%)}.file-upload__button.sc-nano-file-upload{padding:0;border:none;background-color:transparent;font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:400;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-inline-size:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@media print{.file-upload__button.sc-nano-file-upload{display:none}}.file-upload__button.sc-nano-file-upload:focus,.file-upload__button.button--focus.sc-nano-file-upload{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload nano-spinner.sc-nano-file-upload{--base-color-rgb:255 255 255;margin-inline:0.5em 0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.button--icon-start.sc-nano-file-upload nano-spinner.sc-nano-file-upload{margin-inline:0 0.5em}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.file-upload__button.sc-nano-file-upload:active:not(.button--disabled):not(:disabled){box-shadow:none}.file-upload__button--disabled.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload:disabled{opacity:0.6}.file-upload__button--disabled.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:disabled:hover{cursor:default}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--active.sc-nano-file-upload{background-color:var(--nano-color-primary-shade, #00637f);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled).button--keyline,.file-upload__button.button--active.button--keyline.sc-nano-file-upload{background-color:var(--btn-bg);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:focus{color:var(--btn-text)}.file-upload__button.button--keyline.sc-nano-file-upload{background:transparent;border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--btn-bg);border-color:var(--btn-bg)}.file-upload__button.button--keyline.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--keyline.sc-nano-file-upload:not(:focus):not(.button--focus),.file-upload__button.button--keyline.button--active.sc-nano-file-upload{box-shadow:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__button.sc-nano-file-upload{opacity:0.4}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;background-color:transparent;display:flex;align-items:stretch;inline-size:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-inline:0.4rem 0;margin-block:0}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{display:flex;align-items:center}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload span.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}';let l=0;let s=()=>new DataTransfer;try{s()}catch{try{s=()=>new ClipboardEvent("").clipboardData;s()}catch{s=null}}const r=class{constructor(a){i(this,a);this.nanoChange=o(this,"nanoChange",7);this.nanoFocus=o(this,"nanoFocus",7);this.nanoBlur=o(this,"nanoBlur",7);this.nanoValidate=o(this,"nanoValidate",7);this.fileInputId=`nano-file-upload-${l++}`;this.canChangeFileList=!!s;this.removeFiles=[];this.onClearClick=()=>{this.value=""};this.onBlur=()=>{this.hasFocus=false;this.validate();if(this.validateOn==="dirty")this.showInlineValidation();this.nanoBlur.emit()};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.validate=()=>{this.errorMessage="";this.inputEl.setCustomValidity("");let i;if(!this.inputEl.validity.valid){i=this.inputEl.validationMessage}else{this.fileList.forEach((o=>{i=null;if(!this.checkFileSize(o.file.size)){i="Maximum file size exceeded. Max file size is "+this.maxFileSize+"Mb"}else if(!this.checkFileType(o.file.type))i=`File type is not allowed (${this.accept})`;o.validationMessage=i;o.valid=!i}));if(this.fileList.length>this.maxFiles)i=`Maxinum number of files exceeded (${this.maxFiles})`}if(!!i)this.inputEl.setCustomValidity(i)};this.onInvalid=i=>{if(this.showInlineError)i.preventDefault();this.validate();this.showInlineValidation(i)};this.onFileChoose=i=>{const o=i.target.files;if(o&&o.length)this.addNewFiles(i.target.files)};this.onFileRemoveFileClick=(i,o)=>{if(!this.canChangeFileList)return;this.removeFiles.push(o);i.target.closest(".file-upload__list-item--active").classList.remove("file-upload__list-item--active")};this.onFileRemoveAnim=()=>{if(!this.canChangeFileList||!this.removeFiles.length)return;this.fileList=this.fileList.filter((i=>!this.removeFiles.find((o=>o===i))));try{this.removeFiles.forEach((i=>i.location?URL.revokeObjectURL(i.location):""))}catch(i){}this.removeFiles=[]};this.onInputChange=()=>{this.nanoChange.emit({value:this.value,files:this.files})};this.onDragStop=i=>{i.preventDefault();i.stopPropagation();this.isDragging=false};this.onDragStart=i=>{i.preventDefault();i.stopPropagation();this.isDragging=true};this.onDrop=i=>{this.onDragStop(i);if(i.dataTransfer.files&&i.dataTransfer.files.length)this.addNewFiles(i.dataTransfer.files)};this.FileUploadInput=(i,o)=>{const a=this.fileInputId+"-lbl";const t=this.showInlineError||this.hasHelperSlot?this.fileInputId+"-more":"";return[n("div",{class:"file-upload__"+i+"-wrap"},n("label",{class:`file-upload__`+i,htmlFor:this.fileInputId,id:a,onDrop:i=>{this.onDrop(i);this.onDragStop(i)},onDragEnd:this.onDragStop,onDragLeave:this.onDragStop,onDragEnter:this.onDragStart,onDragOver:this.onDragStart},(!!this.label||this.hasLabelSlot&&i!=="drop")&&n("div",{class:`file-upload__label ${this.hideLabel?"visually-hide":""}`},!!this.label&&!!this.label.length?this.label:"",!this.label&&this.hasLabelSlot&&i!=="drop"&&n("slot",{name:"label"})),i==="drop"&&n("div",{class:"file-upload__drop-area"},n("div",null,this.hasLabelSlot&&n("slot",{name:"label"})),n("div",null,"Drag and drop or ",n("span",null,"browse"))),i==="btn"&&n("div",{class:`file-upload__button button--keyline button--icon-start ${this.hasFocus?"button--focus":""}`},n("div",{class:`file-upload__btn-content`},n("nano-icon",{name:"regular/cloud-upload"}),n("span",null,!!this.fileList.length?this.fileList[0].file.name:this.placeholder),!!this.value&&this.clearInput&&!this.disabled&&n("button",{type:"button",class:"icon file-upload__clear-btn",tabindex:"-1",onClick:this.onClearClick},n("nano-icon",{name:"light/times"})))),n("input",{"aria-labelledby":a+" "+t+" "+o,type:"file",id:this.fileInputId,accept:this.accept,class:"file-upload__input",multiple:this.maxFiles>1,disabled:this.disabled,name:this.canChangeFileList?undefined:this.name,form:this.form,ref:i=>{if(this.canChangeFileList){this.publicInputEl=i;return}this.inputEl=i},onChange:this.onFileChoose,onFocus:this.onFocus,onReset:this.onInputChange})),n("input",{name:!this.canChangeFileList?undefined:this.name,form:this.form,ref:i=>{if(!this.canChangeFileList)return;this.inputEl=i},type:"file",id:this.fileInputId+"-hidden",tabIndex:-1,multiple:true,class:"file-upload__input",disabled:this.disabled,required:this.required,accept:this.accept,onInvalid:this.onInvalid,onChange:this.onInputChange})),this.showInlineError||this.hasHelperSlot?n("div",{class:"file-upload__more",id:t},this.showInlineError&&!!this.errorMessage.length?n("div",{class:"file-upload__error"},this.errorMessage):"",n("div",{class:"file-upload__help"},n("slot",{name:"helper"}))):""]};this.button=()=>this.FileUploadInput("btn");this.dropArea=()=>{const i=this.fileInputId+"-list";return[this.FileUploadInput("drop",i),n("output",{class:"file-upload__list-wrap",id:i},!!this.fileList&&this.fileList.length>0&&n("ul",{class:"file-upload__list list"},this.fileList.map((i=>n("li",{key:i.file.name,class:"file-upload__list-item file-upload__list-item--active list-item",onAnimationEnd:i=>this.onFileRemoveAnim()},n("span",{class:"list-title"},i.file.name),!i.valid&&n("nano-tooltip",{content:i.validationMessage,placement:"left"},n("nano-icon-button",{class:"list-button list-error",iconName:"light/exclamation-triangle",label:"File error"})),this.canChangeFileList&&n("nano-icon-button",{class:"list-button list-button--view",type:"button",iconName:"light/eye",label:"View file",target:"_blank",href:i.location}),this.canChangeFileList&&n("nano-icon-button",{onClick:o=>this.onFileRemoveFileClick(o,i),class:"list-button list-button--remove",iconName:"light/times",label:"Remove file"}))))))]};this.hasHelperSlot=undefined;this.hasLabelSlot=undefined;this.errorMessage="";this.isDragging=false;this.fileList=[];this.hasFocus=undefined;this.name=undefined;this.accept=undefined;this.capture=undefined;this.maxFileSize=1;this.maxFiles=1;this.label=undefined;this.placeholder="Choose a file...";this.hideLabel=false;this.required=false;this.disabled=false;this.clearInput=false;this.showInlineError=true;this.validateOn="submit";this.form=undefined;this._invalid=false}fileListChange(){if(this.canChangeFileList){this.publicInputEl.value="";this.inputEl.files=this.arrToFileList(this.fileList.map((i=>i.file)));setTimeout((()=>{this.nanoChange.emit({value:this.value,files:this.files})}),20)}}shouldValidate(){if(!this.inputEl)return;this.validate();requestAnimationFrame((()=>{if(this.validateOn==="dirty")this.showInlineValidation()}))}get invalid(){return this._invalid}get validityMessage(){if(!this.inputEl)return"";return this.inputEl.validationMessage}get files(){return this.inputEl?Array.from(this.inputEl.files).map((i=>{i.objectURL=URL.createObjectURL(i);return i})):[]}set files(i){this.addNewFiles(this.arrToFileList(i))}get value(){return this.inputEl?this.inputEl.value:""}set value(i){if(i===""&&this.inputEl){this.fileList=[];this.inputEl.value=""}}async reportValidity(i){if(i){this.validate();this.showInlineValidation()}return{isValid:!this.invalid,errorMessage:this.inputEl.validationMessage}}async setFocus(){if(this.inputEl)this.inputEl.focus()}getInputElement(){return Promise.resolve(this.inputEl)}async showError(i){if(this.inputEl){this.inputEl.setCustomValidity(i);this.validate();this.showInlineValidation()}}globalClickHandler(i){if(!this.hasFocus)return;if(i.composedPath().every((i=>i!==this.host)))this.onBlur()}globalKeydownHandler(i){if(!this.hasFocus||i.key!=="Tab")return;if(i.target!==this.inputEl)this.onBlur()}onReset(i){const o=this.form?document.querySelector("#"+this.form):this.host.closest("form");if(!o||i.target!==this.host.closest("form"))return;this.value=""}arrToFileList(i){const o=s();for(let n=0,a=i.length;n<a;n++)o.items.add(i[n]);return o.files}checkFileSize(i){return i/1e6<=this.maxFileSize}checkFileType(i){if(!this.accept)return true;return this.accept.match(i)&&this.accept.match(i).length>0}showInlineValidation(i){if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this._invalid=false;this.errorMessage="";if(!this.inputEl.validity.valid){this.errorMessage=this.inputEl.validationMessage;this._invalid=true}this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.inputEl.validationMessage,originalEvent:i})}slotChangeObserver(){if(this.mo)this.mo.disconnect();const i=this.mo=new MutationObserver((()=>this.processSlottedContent()));i.observe(this.host,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.host.querySelectorAll('[slot="label"]');this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]')}addNewFiles(i){const o=Array.from(i).map((i=>({file:i,location:URL.createObjectURL(i),valid:true,validationMessage:null})));if(this.canChangeFileList&&this.maxFiles>1){const i=o.filter((i=>!this.fileList.find((o=>o.file.name===i.file.name))));this.fileList=[...this.fileList,...i]}else this.fileList=o}disconnectedCallback(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver()}componentWillLoad(){this.processSlottedContent()}render(){return n(a,null,n("div",{class:{"file-upload":true,"file-upload--dragging":this.isDragging,"file-upload--focus":this.hasFocus,"file-upload--invalid":this._invalid}},this.maxFiles>1?n(this.dropArea,null):n(this.button,null)))}get host(){return t(this)}static get watchers(){return{fileList:["fileListChange","shouldValidate"],maxFiles:["shouldValidate"],maxFileSize:["shouldValidate"],capture:["shouldValidate"],accept:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"]}}};r.style=e;export{r as nano_file_upload};
+import{r as i,c as o,h as n,a,g as t}from"./index-9695db0a.js";const e='.sc-nano-file-upload-h{box-sizing:border-box}*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--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-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--label-color--invalid:var(--nano-input-label-color-invalid, "currentcolor");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0 116 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, white);--drop-border--invalid:var(--nano-color-danger-rgb, 239 65 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1rem);--btn-padding-end:var(--nano-btn-padding-end, 1rem)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{block-size:1em;margin-block:calc(var(--label-padding) / 2) var(--label-padding);margin-inline:3px 0;position:relative}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{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}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--drop-bg);color:var(--drop-text);min-block-size:var(--drop-height);display:flex;align-items:center;justify-content:center;font-size:0.9em;position:relative;transition:background-color 0.15s ease-in-out;padding:0.5rem}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{opacity:0.7}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg--invalid)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:#fff}.file-upload__drop-area.sc-nano-file-upload::after{content:"";position:absolute;border-radius:var(--drop-border-radius);border-width:var(--drop-border-width);border-color:rgb(var(--drop-border-tint)/50%);border-style:dashed;inset:0;transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{border-color:rgb(var(--drop-border--invalid)/100%)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:rgb(var(--drop-border-tint)/100%);text-decoration:underline;border-radius:2px;z-index:1;cursor:pointer;position:relative}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__list.sc-nano-file-upload{list-style:none;margin:0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;transform:translateZ(0);animation:hideListItem 0.3s ease-in-out forwards}@keyframes hideListItem{0%{opacity:1;transform:translateY(0);transform:translateZ(0)}100%{opacity:0;transform:translateY(10px);transform:translateZ(0)}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem 0.3s ease-in-out forwards}@keyframes showListItem{0%{opacity:0;transform:translateY(10px);transform:translateZ(0)}100%{opacity:1;transform:translateY(0);transform:translateZ(0)}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;padding:5px;margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:rgb(var(--drop-border--invalid) / 100%)}.file-upload__button.sc-nano-file-upload{padding:0;border:none;background-color:transparent;font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:400;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-inline-size:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@media print{.file-upload__button.sc-nano-file-upload{display:none}}.file-upload__button.sc-nano-file-upload:focus,.file-upload__button.button--focus.sc-nano-file-upload{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload nano-spinner.sc-nano-file-upload{--base-color-rgb:255 255 255;margin-inline:0.5em 0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.button--icon-start.sc-nano-file-upload nano-spinner.sc-nano-file-upload{margin-inline:0 0.5em}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.file-upload__button.sc-nano-file-upload:active:not(.button--disabled):not(:disabled){box-shadow:none}.file-upload__button--disabled.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload:disabled{opacity:0.6}.file-upload__button--disabled.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:disabled:hover{cursor:default}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--active.sc-nano-file-upload{background-color:var(--nano-color-primary-shade, #00637f);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled).button--keyline,.file-upload__button.button--active.button--keyline.sc-nano-file-upload{background-color:var(--btn-bg);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:focus{color:var(--btn-text)}.file-upload__button.button--keyline.sc-nano-file-upload{background:transparent;border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--btn-bg);border-color:var(--btn-bg)}.file-upload__button.button--keyline.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--keyline.sc-nano-file-upload:not(:focus):not(.button--focus),.file-upload__button.button--keyline.button--active.sc-nano-file-upload{box-shadow:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__button.sc-nano-file-upload{opacity:0.4}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;background-color:transparent;display:flex;align-items:stretch;inline-size:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-inline:0.4rem 0;margin-block:0}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{display:flex;align-items:center}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload span.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}';let l=0;let s=()=>new DataTransfer;try{s()}catch{try{s=()=>new ClipboardEvent("").clipboardData;s()}catch{s=null}}const r=class{constructor(a){i(this,a);this.nanoChange=o(this,"nanoChange",7);this.nanoFocus=o(this,"nanoFocus",7);this.nanoBlur=o(this,"nanoBlur",7);this.nanoValidate=o(this,"nanoValidate",7);this.fileInputId=`nano-file-upload-${l++}`;this.canChangeFileList=!!s;this.removeFiles=[];this.onClearClick=()=>{this.value=""};this.onBlur=()=>{this.hasFocus=false;this.validate();if(this.validateOn==="dirty")this.showInlineValidation();this.nanoBlur.emit()};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.validate=()=>{this.errorMessage="";this.inputEl.setCustomValidity("");let i;if(!this.inputEl.validity.valid){i=this.inputEl.validationMessage}else{this.fileList.forEach((o=>{i=null;if(!this.checkFileSize(o.file.size)){i="Maximum file size exceeded. Max file size is "+this.maxFileSize+"Mb"}else if(!this.checkFileType(o.file.type))i=`File type is not allowed (${this.accept})`;o.validationMessage=i;o.valid=!i}));if(this.fileList.length>this.maxFiles)i=`Maxinum number of files exceeded (${this.maxFiles})`}if(!!i)this.inputEl.setCustomValidity(i)};this.onInvalid=i=>{if(this.showInlineError)i.preventDefault();this.validate();this.showInlineValidation(i)};this.onFileChoose=i=>{const o=i.target.files;if(o&&o.length)this.addNewFiles(i.target.files)};this.onFileRemoveFileClick=(i,o)=>{if(!this.canChangeFileList)return;this.removeFiles.push(o);i.target.closest(".file-upload__list-item--active").classList.remove("file-upload__list-item--active")};this.onFileRemoveAnim=()=>{if(!this.canChangeFileList||!this.removeFiles.length)return;this.fileList=this.fileList.filter((i=>!this.removeFiles.find((o=>o===i))));try{this.removeFiles.forEach((i=>i.location?URL.revokeObjectURL(i.location):""))}catch(i){}this.removeFiles=[]};this.onInputChange=()=>{this.nanoChange.emit({value:this.value,files:this.files})};this.onDragStop=i=>{i.preventDefault();i.stopPropagation();this.isDragging=false};this.onDragStart=i=>{i.preventDefault();i.stopPropagation();this.isDragging=true};this.onDrop=i=>{this.onDragStop(i);if(i.dataTransfer.files&&i.dataTransfer.files.length)this.addNewFiles(i.dataTransfer.files)};this.FileUploadInput=(i,o)=>{const a=this.fileInputId+"-lbl";const t=this.showInlineError||this.hasHelperSlot?this.fileInputId+"-more":"";return[n("div",{class:"file-upload__"+i+"-wrap"},n("label",{class:`file-upload__`+i,htmlFor:this.fileInputId,id:a,onDrop:i=>{this.onDrop(i);this.onDragStop(i)},onDragEnd:this.onDragStop,onDragLeave:this.onDragStop,onDragEnter:this.onDragStart,onDragOver:this.onDragStart},(!!this.label||this.hasLabelSlot&&i!=="drop")&&n("div",{class:`file-upload__label ${this.hideLabel?"visually-hide":""}`},!!this.label&&!!this.label.length?this.label:"",!this.label&&this.hasLabelSlot&&i!=="drop"&&n("slot",{name:"label"})),i==="drop"&&n("div",{class:"file-upload__drop-area"},n("div",null,this.hasLabelSlot&&n("slot",{name:"label"})),n("div",null,"Drag and drop or ",n("span",null,"browse"))),i==="btn"&&n("div",{class:`file-upload__button button--keyline button--icon-start ${this.hasFocus?"button--focus":""}`},n("div",{class:`file-upload__btn-content`},n("nano-icon",{name:"regular/cloud-upload"}),n("span",null,!!this.fileList.length?this.fileList[0].file.name:this.placeholder),!!this.value&&this.clearInput&&!this.disabled&&n("button",{type:"button",class:"icon file-upload__clear-btn",tabindex:"-1",onClick:this.onClearClick},n("nano-icon",{name:"light/times"})))),n("input",{"aria-labelledby":a+" "+t+" "+o,type:"file",id:this.fileInputId,accept:this.accept,class:"file-upload__input",multiple:this.maxFiles>1,disabled:this.disabled,name:this.canChangeFileList?undefined:this.name,form:this.form,ref:i=>{if(this.canChangeFileList){this.publicInputEl=i;return}this.inputEl=i},onChange:this.onFileChoose,onFocus:this.onFocus,onReset:this.onInputChange})),n("input",{name:!this.canChangeFileList?undefined:this.name,form:this.form,ref:i=>{if(!this.canChangeFileList)return;this.inputEl=i},type:"file",id:this.fileInputId+"-hidden",tabIndex:-1,multiple:true,class:"file-upload__input",disabled:this.disabled,required:this.required,accept:this.accept,onInvalid:this.onInvalid,onChange:this.onInputChange})),this.showInlineError||this.hasHelperSlot?n("div",{class:"file-upload__more",id:t},this.showInlineError&&!!this.errorMessage.length?n("div",{class:"file-upload__error"},this.errorMessage):"",n("div",{class:"file-upload__help"},n("slot",{name:"helper"}))):""]};this.button=()=>this.FileUploadInput("btn");this.dropArea=()=>{const i=this.fileInputId+"-list";return[this.FileUploadInput("drop",i),n("output",{class:"file-upload__list-wrap",id:i},!!this.fileList&&this.fileList.length>0&&n("ul",{class:"file-upload__list list"},this.fileList.map((i=>n("li",{key:i.file.name,class:"file-upload__list-item file-upload__list-item--active list-item",onAnimationEnd:i=>this.onFileRemoveAnim()},n("span",{class:"list-title"},i.file.name),!i.valid&&n("nano-tooltip",{content:i.validationMessage,placement:"left"},n("nano-icon-button",{class:"list-button list-error",iconName:"light/exclamation-triangle",label:"File error"})),this.canChangeFileList&&n("nano-icon-button",{class:"list-button list-button--view",type:"button",iconName:"light/eye",label:"View file",target:"_blank",href:i.location}),this.canChangeFileList&&n("nano-icon-button",{onClick:o=>this.onFileRemoveFileClick(o,i),class:"list-button list-button--remove",iconName:"light/times",label:"Remove file"}))))))]};this.hasHelperSlot=undefined;this.hasLabelSlot=undefined;this.errorMessage="";this.isDragging=false;this.fileList=[];this.hasFocus=undefined;this.name=undefined;this.accept=undefined;this.capture=undefined;this.maxFileSize=1;this.maxFiles=1;this.label=undefined;this.placeholder="Choose a file...";this.hideLabel=false;this.required=false;this.disabled=false;this.clearInput=false;this.showInlineError=true;this.validateOn="submit";this.form=undefined;this._invalid=false}fileListChange(){if(this.canChangeFileList){this.publicInputEl.value="";this.inputEl.files=this.arrToFileList(this.fileList.map((i=>i.file)));setTimeout((()=>{this.nanoChange.emit({value:this.value,files:this.files})}),20)}}shouldValidate(){if(!this.inputEl)return;this.validate();requestAnimationFrame((()=>{if(this.validateOn==="dirty")this.showInlineValidation()}))}get invalid(){return this._invalid}get validityMessage(){if(!this.inputEl)return"";return this.inputEl.validationMessage}get files(){return this.inputEl?Array.from(this.inputEl.files).map((i=>{i.objectURL=URL.createObjectURL(i);return i})):[]}set files(i){this.addNewFiles(this.arrToFileList(i))}get value(){return this.inputEl?this.inputEl.value:""}set value(i){if(i===""&&this.inputEl){this.fileList=[];this.inputEl.value=""}}async reportValidity(i){if(i){this.validate();this.showInlineValidation()}return{isValid:!this.invalid,errorMessage:this.inputEl.validationMessage}}async setFocus(){if(this.inputEl)this.inputEl.focus()}getInputElement(){return Promise.resolve(this.inputEl)}async showError(i){if(this.inputEl){this.inputEl.setCustomValidity(i);this.validate();this.showInlineValidation()}}globalClickHandler(i){if(!this.hasFocus)return;if(i.composedPath().every((i=>i!==this.host)))this.onBlur()}globalKeydownHandler(i){if(!this.hasFocus||i.key!=="Tab")return;if(i.target!==this.inputEl)this.onBlur()}onReset(i){const o=this.form?document.querySelector("#"+this.form):this.host.closest("form");if(!o||i.target!==this.host.closest("form"))return;this.value=""}arrToFileList(i){const o=s();for(let n=0,a=i.length;n<a;n++)o.items.add(i[n]);return o.files}checkFileSize(i){return i/1e6<=this.maxFileSize}checkFileType(i){if(!this.accept)return true;return this.accept.match(i)&&this.accept.match(i).length>0}showInlineValidation(i){if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this._invalid=false;this.errorMessage="";if(!this.inputEl.validity.valid){this.errorMessage=this.inputEl.validationMessage;this._invalid=true}this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.inputEl.validationMessage,originalEvent:i})}slotChangeObserver(){if(this.mo)this.mo.disconnect();const i=this.mo=new MutationObserver((()=>this.processSlottedContent()));i.observe(this.host,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.host.querySelectorAll('[slot="label"]');this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]')}addNewFiles(i){const o=Array.from(i).map((i=>({file:i,location:URL.createObjectURL(i),valid:true,validationMessage:null})));if(this.canChangeFileList&&this.maxFiles>1){const i=o.filter((i=>!this.fileList.find((o=>o.file.name===i.file.name))));this.fileList=[...this.fileList,...i]}else this.fileList=o}disconnectedCallback(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver()}componentWillLoad(){this.processSlottedContent()}render(){return n(a,null,n("div",{class:{"file-upload":true,"file-upload--dragging":this.isDragging,"file-upload--focus":this.hasFocus,"file-upload--invalid":this._invalid}},this.maxFiles>1?n(this.dropArea,null):n(this.button,null)))}get host(){return t(this)}static get watchers(){return{fileList:["fileListChange","shouldValidate"],maxFiles:["shouldValidate"],maxFileSize:["shouldValidate"],capture:["shouldValidate"],accept:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"]}}};r.style=e;export{r as nano_file_upload};
 //# sourceMappingURL=nano-file-upload.entry.js.map