npm - @nanoporetech-digital/components - Versions diffs - 2.6.0 → 2.9.0 - Mend

@nanoporetech-digital/components 2.6.0 → 2.9.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 (249) hide show

package/dist/nano-components/{p-f3bf942d.entry.js → p-457d4893.entry.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as o,c as n,j as t,h as r,e as i,g as e}from"./p-ab5813a7.js";import{d as a}from"./p-1da5f8df.js";import{g as s}from"./p-d99437a6.js";const c='.sc-nano-checkbox-group-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, "currentColor");--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{-webkit-box-sizing:inherit;box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:8px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:8px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__legend.sc-nano-checkbox-group,.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;margin-left:3px;margin-right:0;margin-top:calc(var(--label-padding) - var(--control-margin-bottom));margin-bottom:var(--label-padding);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanogroupcb__more.sc-nano-checkbox-group{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-left:var(--control-margin-start);margin-top:var(--control-margin-top);margin-right:var(--control-margin-end);margin-bottom:var(--control-margin-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}';let h=class{constructor(t){o(this,t);this.nanoValidate=n(this,"nanoValidate",7);this.grpId=`nano-checkbox-group-${l++}`;this._invalid=false;this.errorMessage="";this.showErrorMsg=false;this.hasHelperSlot=false;this.validateOn="submit";this.showInlineError=true;this.min=0;this.max=null;this.disabled=null;this.legend="";this.handleInvalid=o=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(!!this.showInlineError)o.preventDefault();setTimeout((n=>this.showInlineValidation(o)),20)};this.showInlineValidation=o=>{if(!this.nativeCbs||!this.nativeCbs.length)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.showErrorMsg=false;this._invalid=false;this.nativeCbs.forEach(((o,n)=>{if(!o.validity.valid){this.errorMessage=o.validationMessage;this.showErrorMsg=true;this._invalid=true;if(!!this.showInlineError){this.checkboxes[n].setFocus()}}}));this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:o})}}get invalid(){return this._invalid}async reportValidity(o){return new Promise((n=>{if(o)this.showInlineValidation();setTimeout((()=>{n({isValid:!this.invalid,errorMessage:this.errorMessage})}),20)}))}handleCbChange(){if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}customValidate(){if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;let o=this.nativeCbs.filter((o=>o.type==="checkbox"));if(!o||!o.length)return;let n=o.filter((o=>o.checked)).length;let t=false;this.checkboxes.forEach((o=>{if(o.required&&!o.checked){t=true}o.setError("");if(this.min&&n<this.min){o.setError(`You must select a minimum of ${this.min} values.`);t=true}if(this.max&&n>this.max){o.setError(`Only up to ${this.max} values are allowed.`);t=true}}));return t}handleComponentChange(){this.checkboxTypes=s(this.checkboxes.map((o=>"types-"+o.type)))}handleDisabledChange(){if(this.disabled===null)return;this.checkboxes.map((o=>o.disabled=this.disabled))}attachSlotObserver(){const o=this.mo=new MutationObserver((()=>this.handleSlotChange()));o.observe(this.host,{childList:true})}async handleSlotChange(){t(this.host);this.checkboxes=Array.from(this.host.querySelectorAll("nano-checkbox"));this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]');this.nativeCbs=await Promise.all(this.checkboxes.reduce(((o,n)=>{o.push(n.getInputElement());return o}),[]));this.nativeCbs.forEach((o=>o.addEventListener("invalid",this.handleInvalid)))}componentWillLoad(){this.showInlineValidation=a(this.showInlineValidation,20);this.customValidate=this.customValidate.bind(this);this.handleDisabledChange()}connectedCallback(){this.attachSlotObserver()}disconnectedCallback(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.handleComponentChange()}render(){let o=this.host.ownerDocument.dir==="rtl";const n=this.grpId+"-lbl";const t=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return r(i,Object.assign({},this.checkboxTypes,{dir:o?"rtl":null}),r("fieldset",{disabled:this.disabled,class:{nanogroupcb:true,"show-error":this.showErrorMsg}},r("legend",{class:"nanogroupcb__legend",id:n},this.legend),r("div",{class:"nanogroupcb__cbs",role:"group","aria-labelledby":n+" "+t},r("slot",null)),(this.showInlineError||this.hasHelperSlot)&&r("div",{class:"nanogroupcb__more",id:t},!!this.showInlineError?r("div",{class:"nanogroupcb__error"},this.errorMessage):"",r("div",{class:"nanogroupcb__help"},r("slot",{name:"helper"})))))}get host(){return e(this)}static get watchers(){return{validateOn:["handleCbChange"],min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}}};let l=0;h.style=c;export{h as nano_checkbox_group};
-//# sourceMappingURL=p-f3bf942d.entry.js.map
+import{r as o,c as n,j as t,h as r,e as i,g as e}from"./p-ab5813a7.js";import{d as a}from"./p-1da5f8df.js";import{g as s}from"./p-d99437a6.js";const c='.sc-nano-checkbox-group-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, "currentColor");--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{-webkit-box-sizing:inherit;box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:8px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:8px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1;white-space:normal;display:block;width:100%}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;margin-left:3px;margin-right:0;margin-top:calc(var(--label-padding) - var(--control-margin-bottom));margin-bottom:var(--label-padding);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanogroupcb__more.sc-nano-checkbox-group{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-left:var(--control-margin-start);margin-top:var(--control-margin-top);margin-right:var(--control-margin-end);margin-bottom:var(--control-margin-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}';let h=class{constructor(t){o(this,t);this.nanoValidate=n(this,"nanoValidate",7);this.grpId=`nano-checkbox-group-${l++}`;this._invalid=false;this.errorMessage="";this.showErrorMsg=false;this.hasHelperSlot=false;this.validateOn="submit";this.showInlineError=true;this.min=0;this.max=null;this.disabled=null;this.legend="";this.handleInvalid=o=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(!!this.showInlineError)o.preventDefault();setTimeout((n=>this.showInlineValidation(o)),20)};this.showInlineValidation=o=>{if(!this.nativeCbs||!this.nativeCbs.length)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.showErrorMsg=false;this._invalid=false;this.nativeCbs.forEach(((o,n)=>{if(!o.validity.valid){this.errorMessage=o.validationMessage;this.showErrorMsg=true;this._invalid=true;if(!!this.showInlineError){this.checkboxes[n].setFocus()}}}));this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:o})}}get invalid(){return this._invalid}async reportValidity(o){return new Promise((n=>{if(o)this.showInlineValidation();setTimeout((()=>{n({isValid:!this.invalid,errorMessage:this.errorMessage})}),20)}))}handleCbChange(){if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}customValidate(){if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;let o=this.nativeCbs.filter((o=>o.type==="checkbox"));if(!o||!o.length)return;let n=o.filter((o=>o.checked)).length;let t=false;this.checkboxes.forEach((o=>{if(o.required&&!o.checked){t=true}o.setError("");if(this.min&&n<this.min){o.setError(`You must select a minimum of ${this.min} values.`);t=true}if(this.max&&n>this.max){o.setError(`Only up to ${this.max} values are allowed.`);t=true}}));return t}handleComponentChange(){this.checkboxTypes=s(this.checkboxes.map((o=>"types-"+o.type)))}handleDisabledChange(){if(this.disabled===null)return;this.checkboxes.map((o=>o.disabled=this.disabled))}attachSlotObserver(){const o=this.mo=new MutationObserver((()=>this.handleSlotChange()));o.observe(this.host,{childList:true})}async handleSlotChange(){t(this.host);this.checkboxes=Array.from(this.host.querySelectorAll("nano-checkbox"));this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]');this.nativeCbs=await Promise.all(this.checkboxes.reduce(((o,n)=>{o.push(n.getInputElement());return o}),[]));this.nativeCbs.forEach((o=>o.addEventListener("invalid",this.handleInvalid)))}componentWillLoad(){this.showInlineValidation=a(this.showInlineValidation,20);this.customValidate=this.customValidate.bind(this);this.handleDisabledChange()}connectedCallback(){this.attachSlotObserver()}disconnectedCallback(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.handleComponentChange()}render(){let o=this.host.ownerDocument.dir==="rtl";const n=this.grpId+"-lbl";const t=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return r(i,Object.assign({},this.checkboxTypes,{dir:o?"rtl":null}),r("fieldset",{disabled:this.disabled,class:{nanogroupcb:true,"show-error":this.showErrorMsg}},r("legend",{class:"nanogroupcb__legend",id:n},this.legend),r("div",{class:"nanogroupcb__cbs",role:"group","aria-labelledby":n+" "+t},r("slot",null)),(this.showInlineError||this.hasHelperSlot)&&r("div",{class:"nanogroupcb__more",id:t},!!this.showInlineError?r("div",{class:"nanogroupcb__error"},this.errorMessage):"",r("div",{class:"nanogroupcb__help"},r("slot",{name:"helper"})))))}get host(){return e(this)}static get watchers(){return{validateOn:["handleCbChange"],min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}}};let l=0;h.style=c;export{h as nano_checkbox_group};
+//# sourceMappingURL=p-457d4893.entry.js.map

package/dist/nano-components/p-457d4893.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","src/components/checkbox/checkbox-group.tsx"],"names":["checkboxGroupCss","CheckboxGroup","[object Object]","hostRef","this","grpId","grpIds","_invalid","errorMessage","showErrorMsg","hasHelperSlot","validateOn","showInlineError","min","max","disabled","legend","handleInvalid","ev","customValidate","preventDefault","setTimeout","_","showInlineValidation","nativeCbs","length","forEach","cb","i","validity","valid","validationMessage","checkboxes","setFocus","nanoValidate","emit","isValid","invalid","originalEvent","validateFirst","Promise","resolve","onlyCbs","filter","type","checked","required","setError","checkboxTypes","getClassMap","map","mo","MutationObserver","handleSlotChange","observe","host","childList","forceUpdate","Array","from","querySelectorAll","querySelector","all","reduce","acc","push","getInputElement","addEventListener","debounce","bind","handleDisabledChange","attachSlotObserver","disconnect","handleComponentChange","isRtl","ownerDocument","dir","legendId","moreId","h","Host","Object","assign","class","nanogroupcb","show-error","id","role","aria-labelledby","name"],"mappings":"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","sourcesContent":["@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-margin-top: Margin between controls. Default depends on control type;\n * @prop --control-margin-end: Margin between controls. Default depends on control type;\n * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n * @prop --invalid-msg-font-size: Default #{$input-help-font-size};\n\n * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{$input-help-color};\n\n * @prop --label-color: Default #{$label-color};\n * @prop --label-color--invalid: Default #{$label-color-invalid};\n * @prop --label-font-size: Default #{$label-font-size};\n * @prop --label-padding: space between legend and control. Default #{$input-padding-bottom};\n */\n\n --control-margin-top: 0;\n --control-margin-end: 0;\n --control-margin-bottom: 0;\n --control-margin-start: 0;\n --invalid-msg-color: #{nano-color(danger, base)};\n --invalid-msg-font-size: #{$input-help-font-size};\n --help-msg-color: #{$input-help-color};\n --label-color: #{$label-color};\n --label-color--invalid: #{$label-color-invalid};\n --label-font-size: #{$label-font-size};\n --label-padding: #{$input-padding-bottom};\n\n display: block;\n\n * {\n box-sizing: inherit;\n }\n}\n\n:host([types-tag]),\n:host([types-segment]) {\n --control-margin-top: 0;\n --control-margin-end: 8px;\n --control-margin-bottom: 8px;\n --control-margin-start: 0;\n}\n\n:host([types-checkbox]),\n:host([types-radio]) {\n --control-margin-top: 0;\n --control-margin-end: 10px;\n --control-margin-bottom: 8px;\n --control-margin-start: 0;\n}\n\n.nanogroupcb {\n border: none;\n margin: 0;\n padding: 0;\n\n &__error,\n &__help,\n &__more {\n display: block;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__legend {\n font-size: var(--label-font-size);\n padding: 0 0 var(--label-padding);\n margin: 0;\n line-height: 1;\n white-space: normal;\n display: block;\n width: 100%;\n\n :host([invalid]:not([invalid='false'])) & {\n color: var(--label-color--invalid);\n }\n }\n\n &__more {\n height: 1em;\n\n @include margin(\n calc(var(--label-padding) - var(--control-margin-bottom)),\n 0,\n var(--label-padding),\n 3px\n );\n\n position: relative;\n }\n\n &__error,\n &__help {\n top: 0;\n left: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__error {\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n opacity: 0;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__help {\n font-style: italic;\n opacity: 1;\n color: var(--help-msg-color);\n\n .show-error & {\n opacity: 0;\n }\n }\n\n &__cbs {\n margin: 0;\n padding: 0;\n line-height: 1;\n display: flex;\n flex-wrap: wrap;\n\n ::slotted(*:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n --check-base-size: 1.2em;\n\n font-size: 0.85em;\n }\n\n ::slotted(*) {\n margin-left: var(--control-margin-start);\n margin-top: var(--control-margin-top);\n margin-right: var(--control-margin-end);\n margin-bottom: var(--control-margin-bottom);\n }\n }\n}\n\n/* autoprefixer: ignore next */\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n .nanogroupcb__cbs {\n &::slotted(*),\n ::slotted(*) {\n margin-left: unset;\n margin-right: unset;\n margin-inline-start: var(--control-margin-start);\n margin-inline-end: var(--control-margin-end);\n }\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n ComponentInterface,\n State,\n Listen,\n Watch,\n Host,\n Method,\n forceUpdate,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport {\n CssClassMap,\n ControlValidityEventDetail,\n ControlValidity,\n} from '../../interface';\nimport { debounce, getClassMap } from '../../utils';\n\n/**\n * `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n *\n * @slot - Used for grouping checkboxes inside the group wrapper\n * @slot helper - helper text to accompany the form field underneath.\n */\n@Component({\n tag: 'nano-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n private mo?: MutationObserver;\n private checkboxTypes: CssClassMap;\n private grpId = `nano-checkbox-group-${grpIds++}`;\n private _invalid = false;\n\n @Element() host: HTMLNanoCheckboxGroupElement;\n\n // internal state\n\n @State() checkboxes: HTMLNanoCheckboxElement[];\n @State() nativeCbs: HTMLInputElement[];\n @State() errorMessage: string = '';\n @State() showErrorMsg = false;\n @State() hasHelperSlot = false;\n\n // public properties\n\n /**\n * When should the field perform validation\n */\n @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n 'submit';\n\n /**\n * Whether to show validation errors underneath input\n */\n @Prop() showInlineError = true;\n\n /**\n * The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n * A validation error will be thrown if not enough controls are checked.\n */\n @Prop() min: number = 0;\n\n /**\n * The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n * Other controls will automatically be disabled upon reaching this number.\n */\n @Prop() max: number = null;\n\n /**\n * Disable all the nested form controls\n */\n @Prop({ reflect: true }) disabled: boolean | null = null;\n\n /**\n * A common label for children controls\n */\n @Prop() legend: string = '';\n\n /**\n * 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\n // Public methods\n\n /**\n * Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n */\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n return new Promise((resolve) => {\n if (validateFirst) this.showInlineValidation();\n setTimeout(() => {\n resolve({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n });\n }, 20);\n });\n }\n\n // Events\n\n /**\n * Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n */\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // listeners & watchers\n\n /**\n * Notes on validation... custom validation messages should be set\n * no matter whether we show inline messages or native html5.\n * this will mean forms cannot submit when there are pending validation issues.\n */\n @Listen('nanoChange')\n @Watch('validateOn')\n @Watch('min')\n @Watch('max')\n handleCbChange() {\n if (this.invalid) this.showErrorMsg = this._invalid = false;\n this.customValidate();\n\n if (this.validateOn !== 'dirty') return;\n this.showInlineValidation();\n }\n\n @Watch('nativeCbs')\n customValidate() {\n if (!this.nativeCbs || !this.nativeCbs.length || !this.checkboxes) return;\n\n // we only care about checkbox controls.\n let onlyCbs = this.nativeCbs.filter((cb) => cb.type === 'checkbox');\n if (!onlyCbs || !onlyCbs.length) return;\n\n let checked = onlyCbs.filter((cb) => cb.checked).length;\n let invalid = false;\n\n this.checkboxes.forEach((cb) => {\n if (cb.required && !cb.checked) {\n invalid = true;\n }\n\n cb.setError('');\n\n if (this.min && checked < this.min) {\n cb.setError(`You must select a minimum of ${this.min} values.`);\n invalid = true;\n }\n if (this.max && checked > this.max) {\n cb.setError(`Only up to ${this.max} values are allowed.`);\n invalid = true;\n }\n });\n return invalid;\n }\n\n @Watch('checkboxes')\n handleComponentChange() {\n this.checkboxTypes = getClassMap(\n this.checkboxes.map((cb) => 'types-' + cb.type)\n );\n }\n\n @Watch('disabled')\n @Watch('checkboxes')\n handleDisabledChange() {\n if (this.disabled === null) return;\n this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n }\n\n // private methods\n\n private attachSlotObserver() {\n const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n mo.observe(this.host, { childList: true });\n }\n\n private async handleSlotChange() {\n forceUpdate(this.host);\n this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n this.nativeCbs = await Promise.all(\n this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n acc.push(cb.getInputElement());\n return acc;\n }, [])\n );\n\n this.nativeCbs.forEach((cb) =>\n cb.addEventListener('invalid', this.handleInvalid)\n );\n }\n\n private handleInvalid = (ev: Event) => {\n this._invalid = true;\n\n if (this.validateOn === 'submit') {\n this._invalid = this.showErrorMsg = this.customValidate();\n }\n if (!!this.showInlineError) ev.preventDefault();\n\n setTimeout((_) => this.showInlineValidation(ev), 20);\n };\n\n private showInlineValidation = (ev?: Event) => {\n if (!this.nativeCbs || !this.nativeCbs.length) return;\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n this.showErrorMsg = false;\n this._invalid = false;\n\n this.nativeCbs.forEach((cb, i) => {\n if (!cb.validity.valid) {\n this.errorMessage = cb.validationMessage;\n this.showErrorMsg = true;\n this._invalid = true;\n if (!!this.showInlineError) {\n this.checkboxes[i].setFocus();\n }\n }\n });\n\n this.nanoValidate.emit({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n originalEvent: ev,\n });\n };\n\n // stencil hooks\n\n componentWillLoad() {\n this.showInlineValidation = debounce(this.showInlineValidation, 20);\n this.customValidate = this.customValidate.bind(this);\n this.handleDisabledChange();\n }\n\n connectedCallback() {\n this.attachSlotObserver();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.handleComponentChange();\n }\n\n render() {\n let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n const legendId = this.grpId + '-lbl';\n const moreId =\n this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';\n\n return (\n <Host {...this.checkboxTypes} dir={isRtl ? 'rtl' : null}>\n <fieldset\n disabled={this.disabled}\n class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n >\n <legend class=\"nanogroupcb__legend\" id={legendId}>\n {this.legend}\n </legend>\n <div\n class=\"nanogroupcb__cbs\"\n role=\"group\"\n aria-labelledby={legendId + ' ' + moreId}\n >\n <slot />\n </div>\n {(this.showInlineError || this.hasHelperSlot) && (\n <div class=\"nanogroupcb__more\" id={moreId}>\n {!!this.showInlineError ? (\n <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"nanogroupcb__help\">\n <slot name=\"helper\" />\n </div>\n </div>\n )}\n </fieldset>\n </Host>\n );\n }\n}\n\nlet grpIds = 0;\n"]}

package/dist/nano-components/{p-383fda90.system.entry.js → p-4870e76d.system.entry.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 var __awaiter=this&&this.__awaiter||function(t,o,e,i){function n(t){return t instanceof e?t:new e((function(o){o(t)}))}return new(e||(e=Promise))((function(e,r){function a(t){try{p(i.next(t))}catch(o){r(o)}}function s(t){try{p(i["throw"](t))}catch(o){r(o)}}function p(t){t.done?e(t.value):n(t.value).then(a,s)}p((i=i.apply(t,o||[])).next())}))};var __generator=this&&this.__generator||function(t,o){var e={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},i,n,r,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(o){return p([t,o])}}function p(a){if(i)throw new TypeError("Generator is already executing.");while(e)try{if(i=1,n&&(r=a[0]&2?n["return"]:a[0]?n["throw"]||((r=n["return"])&&r.call(n),0):n.next)&&!(r=r.call(n,a[1])).done)return r;if(n=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;n=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(r=e.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){e.label=a[1];break}if(a[0]===6&&e.label<r[1]){e.label=r[1];r=a;break}if(r&&e.label<r[2]){e.label=r[2];e.ops.push(a);break}if(r[2])e.ops.pop();e.trys.pop();continue}a=o.call(t,e)}catch(s){a=[6,s];n=0}finally{i=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,o){for(var e=0,i=o.length,n=t.length;e<i;e++,n++)t[n]=o[e];return t};
 /*!
  * Web Components for Nanopore digital Web Apps
- */System.register(["./p-59b3d24b.system.js","./p-9745d44e.system.js","./p-1c216ca4.system.js"],(function(t){"use strict";var o,e,i,n,r,a;return{setters:[function(t){o=t.r;e=t.c;i=t.h;n=t.e;r=t.g},function(t){a=t.P},function(){}],execute:function(){var s=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-width:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));-webkit-transform:translateY(10px) translateZ(0);transform:translateY(10px) translateZ(0);-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;-webkit-transition-delay:var(--hide-delay);transition-delay:var(--hide-delay);-webkit-transition-duration:var(--hide-duration);transition-duration:var(--hide-duration);-webkit-transition-timing-function:var(--hide-timing-function);transition-timing-function:var(--hide-timing-function);white-space:normal}.tooltip-arrow{content:"";position:absolute;width:0;height:0;color:black;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);pointer-events:none}.tooltip-positioner[data-popper-placement^=top] .tooltip{-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transform:translateY(-10px) translateZ(0);transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{-webkit-transform-origin:top;transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{-webkit-transform-origin:right;transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{-webkit-transform-origin:left;transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:var(--show-delay);transition-delay:var(--show-delay);-webkit-transition-duration:var(--show-duration);transition-duration:var(--show-duration);-webkit-transition-timing-function:var(--show-timing-function);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{bottom:100%;left:calc(50% - 5px);border-bottom:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{top:100%;left:calc(50% - 5px);border-top:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{top:calc(50% - 5px);left:100%;border-left:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{top:auto;bottom:5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{top:calc(50% - 5px);right:100%;border-right:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{top:auto;bottom:5px}';var p=0;var l=t("nano_tooltip",function(){function t(t){var i=this;o(this,t);this.nanoShow=e(this,"nanoShow",7);this.nanoAfterShow=e(this,"nanoAfterShow",7);this.nanoHide=e(this,"nanoHide",7);this.nanoAfterHide=e(this,"nanoAfterHide",7);this.componentId="tooltip-"+ ++p;this.isVisible=false;this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus";this.handleBlur=function(){if(i.hasTrigger("focus")){i.hide()}};this.handleClick=function(){if(i.hasTrigger("click")){i.open?i.hide():i.show()}};this.handleFocus=function(){if(i.hasTrigger("focus")){i.show()}};this.handleKeyDown=function(t){if(i.open&&t.key==="Escape"){t.stopPropagation();i.hide()}};this.handleMouseOver=function(){if(i.hasTrigger("hover")){i.show()}};this.handleMouseOut=function(){if(i.hasTrigger("hover")){i.hide()}};this.handleSlotChange=function(){i.target=i.getTarget()};this.handleTTSlotChange=function(){var t=i.host.querySelector('[id="'+i.componentId+'"]')||i.host.shadowRoot.getElementById(i.componentId);Array.from(i.host.querySelectorAll('[slot="content"]')).filter((function(o){return o!==t})).forEach((function(o){t.appendChild(o)}))}}Object.defineProperty(t.prototype,"target",{get:function(){return this._target},set:function(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-describedby")}t.setAttribute("aria-describedby",this.componentId);this._target=t},enumerable:false,configurable:true});t.prototype.handleOpenChange=function(){this.open?this.show():this.hide()};t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){if(this.isVisible){return[2]}t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return[2]}this.isVisible=true;this.open=true;this.popover.show();return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){if(!this.isVisible){return[2]}t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return[2]}this.isVisible=false;this.open=false;this.popover.hide();return[2]}))}))};t.prototype.getTarget=function(){var t=__spreadArray([],Array.from(this.host.children)).find((function(t){return t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"}));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t};t.prototype.hasTrigger=function(t){var o=this.trigger.split(" ");return o.includes(t)};t.prototype.syncOptions=function(){var t=this;this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:function(){return t.nanoAfterHide.emit()},onAfterShow:function(){return t.nanoAfterShow.emit()}})};t.prototype.componentDidLoad=function(){this.target=this.getTarget();this.popover=new a(this.target,this.tooltipPositioner);this.syncOptions();var t=this.host.shadowRoot.getElementById(this.componentId);t.slot="content";this.host.appendChild(t);this.handleTTSlotChange();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}};t.prototype.componentDidUpdate=function(){this.syncOptions()};t.prototype.disconnectedCallback=function(){this.popover.destroy()};t.prototype.render=function(){var t=this;return i(n,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},i("slot",{onSlotchange:this.handleSlotChange}),!this.disabled&&i("div",{ref:function(o){return t.tooltipPositioner=o},class:"tooltip-positioner"},i("div",{part:"base",ref:function(o){return t.tooltip=o},class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{name:"content",onSlotchange:this.handleTTSlotChange},i("div",{id:this.componentId},this.content)),i("div",{class:"tooltip-arrow","data-popper-arrow":true}))))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["handleOpenChange"]}},enumerable:false,configurable:true});return t}());l.style=s}}}));
-//# sourceMappingURL=p-383fda90.system.entry.js.map
+ */System.register(["./p-59b3d24b.system.js","./p-e43ec257.system.js","./p-1c216ca4.system.js"],(function(t){"use strict";var o,e,i,n,r,a;return{setters:[function(t){o=t.r;e=t.c;i=t.h;n=t.e;r=t.g},function(t){a=t.P},function(){}],execute:function(){var s=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-width:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));-webkit-transform:translateY(10px) translateZ(0);transform:translateY(10px) translateZ(0);-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;-webkit-transition-delay:var(--hide-delay);transition-delay:var(--hide-delay);-webkit-transition-duration:var(--hide-duration);transition-duration:var(--hide-duration);-webkit-transition-timing-function:var(--hide-timing-function);transition-timing-function:var(--hide-timing-function);white-space:normal}.tooltip-arrow{content:"";position:absolute;width:0;height:0;color:black;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);pointer-events:none}.tooltip-positioner[data-popper-placement^=top] .tooltip{-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transform:translateY(-10px) translateZ(0);transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{-webkit-transform-origin:top;transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{-webkit-transform-origin:right;transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{-webkit-transform-origin:left;transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:var(--show-delay);transition-delay:var(--show-delay);-webkit-transition-duration:var(--show-duration);transition-duration:var(--show-duration);-webkit-transition-timing-function:var(--show-timing-function);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{bottom:100%;left:calc(50% - 5px);border-bottom:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{top:100%;left:calc(50% - 5px);border-top:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{top:calc(50% - 5px);left:100%;border-left:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{top:auto;bottom:5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{top:calc(50% - 5px);right:100%;border-right:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{top:auto;bottom:5px}';var p=0;var l=t("nano_tooltip",function(){function t(t){var i=this;o(this,t);this.nanoShow=e(this,"nanoShow",7);this.nanoAfterShow=e(this,"nanoAfterShow",7);this.nanoHide=e(this,"nanoHide",7);this.nanoAfterHide=e(this,"nanoAfterHide",7);this.componentId="tooltip-"+ ++p;this.isVisible=false;this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus";this.handleBlur=function(){if(i.hasTrigger("focus")){i.hide()}};this.handleClick=function(){if(i.hasTrigger("click")){i.open?i.hide():i.show()}};this.handleFocus=function(){if(i.hasTrigger("focus")){i.show()}};this.handleKeyDown=function(t){if(i.open&&t.key==="Escape"){t.stopPropagation();i.hide()}};this.handleMouseOver=function(){if(i.hasTrigger("hover")){i.show()}};this.handleMouseOut=function(){if(i.hasTrigger("hover")){i.hide()}};this.handleSlotChange=function(){i.target=i.getTarget()};this.handleTTSlotChange=function(){var t=i.host.querySelector('[id="'+i.componentId+'"]')||i.host.shadowRoot.getElementById(i.componentId);Array.from(i.host.querySelectorAll('[slot="content"]')).filter((function(o){return o!==t})).forEach((function(o){t.appendChild(o)}))}}Object.defineProperty(t.prototype,"target",{get:function(){return this._target},set:function(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-describedby")}t.setAttribute("aria-describedby",this.componentId);this._target=t},enumerable:false,configurable:true});t.prototype.handleOpenChange=function(){this.open?this.show():this.hide()};t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){if(this.isVisible){return[2]}t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return[2]}this.isVisible=true;this.open=true;this.popover.show();return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){if(!this.isVisible){return[2]}t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return[2]}this.isVisible=false;this.open=false;this.popover.hide();return[2]}))}))};t.prototype.getTarget=function(){var t=__spreadArray([],Array.from(this.host.children)).find((function(t){return t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"}));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t};t.prototype.hasTrigger=function(t){var o=this.trigger.split(" ");return o.includes(t)};t.prototype.syncOptions=function(){var t=this;this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:function(){return t.nanoAfterHide.emit()},onAfterShow:function(){return t.nanoAfterShow.emit()}})};t.prototype.componentDidLoad=function(){this.target=this.getTarget();this.popover=new a(this.target,this.tooltipPositioner);this.syncOptions();var t=this.host.shadowRoot.getElementById(this.componentId);t.slot="content";this.host.appendChild(t);this.handleTTSlotChange();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}};t.prototype.componentDidUpdate=function(){this.syncOptions()};t.prototype.disconnectedCallback=function(){this.popover.destroy()};t.prototype.render=function(){var t=this;return i(n,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},i("slot",{onSlotchange:this.handleSlotChange}),!this.disabled&&i("div",{ref:function(o){return t.tooltipPositioner=o},class:"tooltip-positioner"},i("div",{part:"base",ref:function(o){return t.tooltip=o},class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{name:"content",onSlotchange:this.handleTTSlotChange},i("div",{id:this.componentId},this.content)),i("div",{class:"tooltip-arrow","data-popper-arrow":true}))))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["handleOpenChange"]}},enumerable:false,configurable:true});return t}());l.style=s}}}));
+//# sourceMappingURL=p-4870e76d.system.entry.js.map

package/dist/nano-components/{p-383fda90.system.entry.js.map → p-4870e76d.system.entry.js.map} RENAMED Viewed

File without changes

package/dist/nano-components/{p-20db18f3.entry.js → p-5a315696.entry.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as e,c as o,h as n,e as c,g as a}from"./p-ab5813a7.js";import{c as t}from"./p-d99437a6.js";import{f as i}from"./p-f8f89998.js";const s='.sc-nano-checkbox-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{-webkit-box-sizing:border-box;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:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  #fac6c3);--padding:initial;--check-bg-color:#fff;--check-border-style:1px solid #b5aea7;--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--tagbox-rgb:144, 198, 231;--tagbox-border-color:rgba(var(--tagbox-rgb), 0.5);--tagbox-bg-color:rgba(var(--tagbox-rgb), 0.2);--tagbox-border-radius:0;--segment-color:#007495;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgba(0, 0, 0, 0.2);--cb-border-radius:2px;--radio-border-radius:50%;display:inline-block;max-width:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{-webkit-box-sizing:inherit;box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[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-style:1px solid 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:rgba(var(--tagbox-rgb), 0.8);--tagbox-bg-color:rgba(var(--tagbox-rgb), 0.5)}[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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;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;height:1.5em;width:1.5em;min-width:1.5em;border:var(--check-border-style);-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);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:"";left:0.625em;top:0.625em;width:0;height:0;border:2px solid var(--check-checked-higlight-color);-webkit-transform:scale(0);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:"";left:0.75em;top:0.75em;height:0;width:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;-webkit-transform:rotate(0deg) scale(0);transform:rotate(0deg) scale(0);opacity:1;-webkit-transition:all 0.15s ease-out;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em 0}.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%);height:1px;width: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%);height:1px;width: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{-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow);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{-webkit-box-shadow:var(--invalid-shadow);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%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow);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{-webkit-box-shadow:var(--focus-shadow);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);-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid 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);-webkit-box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2);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);border-width:0.3125em;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{-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);opacity:1;left:0.475em;top:0.1875em;width:0.375em;height: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{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.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);-webkit-transform:rotate(0deg) scale(1);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{-webkit-transform:scale(1);transform:scale(1);opacity:1;left:0.3125em;top:0;width:0.7em;height:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-left:10px;padding-right:0;padding-top:0;padding-bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-stretch:condensed;line-height:1;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanocb__label.sc-nano-checkbox{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:0;padding-inline-end:0}}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);-webkit-box-shadow:var(--segment-shadow);box-shadow:var(--segment-shadow);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.sc-nano-checkbox-h:first-of-type:not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius) 0 0 var(--segment-border-radius);border-right:none}.sc-nano-checkbox-h:first-of-type[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 var(--segment-border-radius) var(--segment-border-radius) 0;border-left:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type):not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 0 0 0;border-right:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type)[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-left:none}.sc-nano-checkbox-h:last-of-type:not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 var(--segment-border-radius) var(--segment-border-radius) 0}.sc-nano-checkbox-h:last-of-type[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius) 0 0 var(--segment-border-radius)}.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:500;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);-webkit-transition:all 0.2s;transition:all 0.2s;border-radius:var(--cb-border-radius);width:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:"+";margin-left:0.3125em;margin-right:0;margin-top:0;margin-bottom:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:center;transform-origin:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanocb__label--tag.sc-nano-checkbox::after{margin-left:unset;margin-right:unset;-webkit-margin-start:0.3125em;margin-inline-start:0.3125em;-webkit-margin-end:0;margin-inline-end:0}}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}';let r=0;let b=class{constructor(n){e(this,n);this.nanoChange=o(this,"nanoChange",7);this.nanoFocus=o(this,"nanoFocus",7);this.nanoBlur=o(this,"nanoBlur",7);this.inputId=`nano-cb-${r++}`;this.shouldReport=false;this._invalid=false;this.inputType="checkbox";this.hasFocus=false;this.checked=false;this.disabled=false;this.value="on";this.required=false;this.type="checkbox";this.indeterminate=false;this.handleInvalid=e=>{this.shouldReport=true;this._invalid=!e.target.validity.valid};this.handleChange=e=>{this.checked=e.target.checked;this.indeterminate=false};this.handleFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.handleBlur=()=>{this.hasFocus=false;this.nanoBlur.emit()}}async handleCheckedChange(){this.input.checked=this.checked;if(this.inputType==="radio"&&this.name&&this.checked){let e=this.host.closest("form");let o;if(e){o=Array.from(e.querySelectorAll(`nano-checkbox[name="${this.name}"]`))}else{o=Array.from(document.querySelectorAll(`nano-checkbox[name="${this.name}"]`)).filter((e=>!e.closest("form")))}o.map((e=>{if(e!==this.host)e.checked=false}))}this.nanoChange.emit({value:this.value,checked:this.checked})}typeChange(){if(this.type==="checkbox"||this.type==="tag")this.inputType="checkbox";else this.inputType="radio"}handleIndeterminateChange(){this.checked=false;this.input.indeterminate=this.indeterminate}get invalid(){if(!this.shouldReport)return false;return!this.input.validity.valid}async getInputElement(){if(this.input)return this.input}async reportValidity(e=false){if(e){this.shouldReport=true;this._invalid=!this.input.reportValidity()}return{isValid:!this.invalid,errorMessage:this.input.validationMessage}}async setError(e){if(!this.input)return;this._invalid=!!e.length;this.input.setCustomValidity(e)}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)}}isRadioChecked(){setTimeout((()=>this.checked=this.input.checked),20)}componentWillLoad(){this.typeChange()}componentDidLoad(){this.input.indeterminate=this.indeterminate;this.isRadioChecked();i.observe(this.input)}disconnectedCallback(){i.unobserve(this.input)}render(){const e=this.inputId+"-lbl";let o=this.host.ownerDocument.dir==="rtl";return n(c,{class:Object.assign({},t(this.color)),dir:o?"rtl":null},n("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},n("input",{type:this.inputType,name:this.name,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":e,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:e=>this.input=e,id:this.inputId,onInvalid:this.handleInvalid}),n("span",{class:"nanocb__input nanocb__input--"+this.type}),n("div",{id:e,class:"nanocb__label nanocb__label--"+this.type},this.label&&!!this.label.length&&n("span",null,this.label),n("span",{hidden:this.label&&!!this.label.length},n("slot",null)))))}get host(){return a(this)}static get watchers(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}}};b.style=s;export{b as nano_checkbox};
-//# sourceMappingURL=p-20db18f3.entry.js.map
+import{r as e,c as o,h as n,e as c,g as a}from"./p-ab5813a7.js";import{c as t}from"./p-d99437a6.js";import{f as i}from"./p-f8f89998.js";const s='.sc-nano-checkbox-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{-webkit-box-sizing:border-box;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:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  #e4e6e8);--padding:initial;--check-bg-color:#fff;--check-border-style:1px solid #b5aea7;--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--tagbox-rgb:144, 198, 231;--tagbox-border-color:rgba(var(--tagbox-rgb), 0.5);--tagbox-bg-color:rgba(var(--tagbox-rgb), 0.2);--tagbox-border-radius:0;--segment-color:#007495;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgba(0, 0, 0, 0.2);--cb-border-radius:2px;--radio-border-radius:50%;display:inline-block;max-width:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{-webkit-box-sizing:inherit;box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[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-style:1px solid 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:rgba(var(--tagbox-rgb), 0.8);--tagbox-bg-color:rgba(var(--tagbox-rgb), 0.5)}[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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;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;height:1.5em;width:1.5em;min-width:1.5em;border:var(--check-border-style);-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);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:"";left:0.625em;top:0.625em;width:0;height:0;border:2px solid var(--check-checked-higlight-color);-webkit-transform:scale(0);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:"";left:0.75em;top:0.75em;height:0;width:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;-webkit-transform:rotate(0deg) scale(0);transform:rotate(0deg) scale(0);opacity:1;-webkit-transition:all 0.15s ease-out;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em 0}.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%);height:1px;width: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%);height:1px;width: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{-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow);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{-webkit-box-shadow:var(--invalid-shadow);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%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow);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{-webkit-box-shadow:var(--focus-shadow);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);-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid 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);-webkit-box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2);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);border-width:0.3125em;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{-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);opacity:1;left:0.475em;top:0.1875em;width:0.375em;height: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{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.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);-webkit-transform:rotate(0deg) scale(1);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{-webkit-transform:scale(1);transform:scale(1);opacity:1;left:0.3125em;top:0;width:0.7em;height:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-left:10px;padding-right:0;padding-top:0;padding-bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-stretch:condensed;line-height:1;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanocb__label.sc-nano-checkbox{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:0;padding-inline-end:0}}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);-webkit-box-shadow:var(--segment-shadow);box-shadow:var(--segment-shadow);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.sc-nano-checkbox-h:first-of-type:not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius) 0 0 var(--segment-border-radius);border-right:none}.sc-nano-checkbox-h:first-of-type[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 var(--segment-border-radius) var(--segment-border-radius) 0;border-left:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type):not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 0 0 0;border-right:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type)[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-left:none}.sc-nano-checkbox-h:last-of-type:not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 var(--segment-border-radius) var(--segment-border-radius) 0}.sc-nano-checkbox-h:last-of-type[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius) 0 0 var(--segment-border-radius)}.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:500;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);-webkit-transition:all 0.2s;transition:all 0.2s;border-radius:var(--cb-border-radius);width:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:"+";margin-left:0.3125em;margin-right:0;margin-top:0;margin-bottom:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:center;transform-origin:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanocb__label--tag.sc-nano-checkbox::after{margin-left:unset;margin-right:unset;-webkit-margin-start:0.3125em;margin-inline-start:0.3125em;-webkit-margin-end:0;margin-inline-end:0}}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}';let r=0;let b=class{constructor(n){e(this,n);this.nanoChange=o(this,"nanoChange",7);this.nanoFocus=o(this,"nanoFocus",7);this.nanoBlur=o(this,"nanoBlur",7);this.inputId=`nano-cb-${r++}`;this.shouldReport=false;this._invalid=false;this.inputType="checkbox";this.hasFocus=false;this.checked=false;this.disabled=false;this.value="on";this.required=false;this.type="checkbox";this.indeterminate=false;this.handleInvalid=e=>{this.shouldReport=true;this._invalid=!e.target.validity.valid};this.handleChange=e=>{this.checked=e.target.checked;this.indeterminate=false};this.handleFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.handleBlur=()=>{this.hasFocus=false;this.nanoBlur.emit()}}async handleCheckedChange(){this.input.checked=this.checked;if(this.inputType==="radio"&&this.name&&this.checked){let e=this.host.closest("form");let o;if(e){o=Array.from(e.querySelectorAll(`nano-checkbox[name="${this.name}"]`))}else{o=Array.from(document.querySelectorAll(`nano-checkbox[name="${this.name}"]`)).filter((e=>!e.closest("form")))}o.map((e=>{if(e!==this.host)e.checked=false}))}this.nanoChange.emit({value:this.value,checked:this.checked})}typeChange(){if(this.type==="checkbox"||this.type==="tag")this.inputType="checkbox";else this.inputType="radio"}handleIndeterminateChange(){this.checked=false;this.input.indeterminate=this.indeterminate}get invalid(){if(!this.shouldReport)return false;return!this.input.validity.valid}async getInputElement(){if(this.input)return this.input}async reportValidity(e=false){if(e){this.shouldReport=true;this._invalid=!this.input.reportValidity()}return{isValid:!this.invalid,errorMessage:this.input.validationMessage}}async setError(e){if(!this.input)return;this._invalid=!!e.length;this.input.setCustomValidity(e)}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)}}isRadioChecked(){setTimeout((()=>this.checked=this.input.checked),20)}componentWillLoad(){this.typeChange()}componentDidLoad(){this.input.indeterminate=this.indeterminate;this.isRadioChecked();i.observe(this.input)}disconnectedCallback(){i.unobserve(this.input)}render(){const e=this.inputId+"-lbl";let o=this.host.ownerDocument.dir==="rtl";return n(c,{class:Object.assign({},t(this.color)),dir:o?"rtl":null},n("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},n("input",{type:this.inputType,name:this.name,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":e,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:e=>this.input=e,id:this.inputId,onInvalid:this.handleInvalid}),n("span",{class:"nanocb__input nanocb__input--"+this.type}),n("div",{id:e,class:"nanocb__label nanocb__label--"+this.type},this.label&&!!this.label.length&&n("span",null,this.label),n("span",{hidden:this.label&&!!this.label.length},n("slot",null)))))}get host(){return a(this)}static get watchers(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}}};b.style=s;export{b as nano_checkbox};
+//# sourceMappingURL=p-5a315696.entry.js.map

package/dist/nano-components/{p-20db18f3.entry.js.map → p-5a315696.entry.js.map} RENAMED Viewed

File without changes

package/dist/nano-components/p-6eb25600.system.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+System.register(["./p-59b3d24b.system.js"],(function(l){"use strict";var e;return{setters:[function(l){e=l.h}],execute:function(){var r=function(l){var r=l.label,a=l.hasLabelSlot,t=l.controlId,s=l.labelId,o=l.floatLabel,n=l.placeholder,c=l.hideLabel,i=l.hasValue,_=l.rtl,d=l.showCharCount,f=l.maxlength,u=l.charCount;if(!r&&!a)return;if(o){return e("label",{class:"form-ctrl__float-label",htmlFor:t,id:s},r&&r,!r&&a&&e("slot",{name:"label"}),d&&e("span",{class:"form-ctrl__label-charcount"},f?" "+u+"/"+f:" "+u))}else{return e("label",{class:{"form-ctrl__label":true,"visually-hide":c},htmlFor:t,id:s},e("div",{class:"form-ctrl__label-wrap"},n&&i&&_&&e("span",{class:"form-ctrl__label-placeholder"},n," / "),e("span",{class:"form-ctrl__labeltext"},r&&r,!r&&a&&e("slot",{name:"label"})),n&&i&&!_&&e("span",{class:"form-ctrl__label-placeholder"}," / ",n)),d&&e("span",{class:"form-ctrl__label-charcount"},f?f-u+" left":u+" characters"))}};var a=l("F",(function(l,a){var t=l.rtl,s=l.floatLabel,o=l.label,n=l.moreId,c=l.helperEndId,i=l.type,_=l.hasHelperSlot,d=l.showInlineError,f=l.errorMessage,u=l.hasHelperEndSlot;var m=u?"nano-resize-observe":"div";return e(m,{states:"350w has-enough-width",class:{"has-label":o!==null&&!s,"has-float-label":o!==null&&s,"has-helper-end":u,rtl:t,"form-ctrl":true}},e("div",{class:"form-ctrl__wrapper"},!s?r(Object.assign({},l)):"",e("div",{class:{"form-ctrl__input":true,"form-ctrl__textarea":i==="textarea"}},s&&r(Object.assign(Object.assign({},l),{rtl:t})),a),d||_?e("div",{class:"form-ctrl__more",id:n},!!d?e("div",{class:"form-ctrl__error","aria-live":"polite"},f):"",e("div",{class:"form-ctrl__helper"},e("slot",{name:"helper"}))):""),u?e("div",{class:"form-ctrl__helper-end",id:c},e("slot",{name:"helper-end"})):"")}));var t=l("a",(function(l,r){var a=l.clearControl,t=l.onClearText,s=l.readonly,o=l.disabled,n=l.control,c=l.ref,i=l.endSlot,_=l.endValueSlot,d=l.startSlot;var f=function(){n.setFocus()};return e("div",{class:"form-ctrl__input-wrap",ref:function(l){if(c)c(l)}},e("span",{class:"form-ctrl__slot-start"},e("slot",{name:"start"}),d),r,a&&!s&&!o&&e("button",{type:"button",class:"icon form-ctrl__clear-btn",tabindex:"-1",onTouchStart:t,onMouseDown:t},e("nano-icon",{name:"light/times"})),e("span",{class:"form-ctrl__slot-value-end",onClick:f},e("slot",{name:"value-end"}),_),e("span",{class:"form-ctrl__slot-end"},e("slot",{name:"end"}),i))}))}}}));
+//# sourceMappingURL=p-6eb25600.system.js.map

package/dist/nano-components/p-6eb25600.system.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/form-control/form-control.tsx"],"names":["renderLabel","_a","label","hasLabelSlot","controlId","labelId","floatLabel","placeholder","hideLabel","hasValue","rtl","showCharCount","maxlength","charCount","h","class","htmlFor","id","name","form-ctrl__label","visually-hide","FormControlWrap","exports","props","children","moreId","helperEndId","type","hasHelperSlot","showInlineError","errorMessage","hasHelperEndSlot","MainTag","states","has-label","has-float-label","has-helper-end","form-ctrl","Object","assign","form-ctrl__input","form-ctrl__textarea","aria-live","FormControl","clearControl","onClearText","readonly","disabled","control","ref","endSlot","endValueSlot","startSlot","clickThrough","setFocus","el","tabindex","onTouchStart","onMouseDown","onClick"],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n rtl: boolean;\n floatLabel: boolean;\n labelId: string;\n label: string;\n moreId: string;\n helperEndId: string;\n type?: TextFieldTypes;\n showInlineError: boolean;\n hasHelperSlot: boolean;\n errorMessage: string;\n controlId: string;\n hasLabelSlot: boolean;\n hideLabel: boolean;\n placeholder: string;\n hasValue: boolean;\n showCharCount?: boolean;\n maxlength?: number;\n charCount?: number;\n hasHelperEndSlot?: boolean;\n}\n\ninterface FormControlProps {\n clearControl: boolean;\n onClearText?: () => void;\n readonly: boolean;\n disabled: boolean;\n control: HTMLNanoInputElement | HTMLNanoSelectElement;\n ref?: (elm?: HTMLElement) => void;\n endSlot?: VNode;\n endValueSlot?: VNode;\n startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n rtl: boolean;\n}\n\nconst renderLabel = ({\n label,\n hasLabelSlot,\n controlId,\n labelId,\n floatLabel,\n placeholder,\n hideLabel,\n hasValue,\n rtl,\n showCharCount,\n maxlength,\n charCount,\n}: LabelProps) => {\n if (!label && !hasLabelSlot) return;\n if (floatLabel) {\n return (\n <label class=\"form-ctrl__float-label\" htmlFor={controlId} id={labelId}>\n {label && label}\n {!label && hasLabelSlot && <slot name=\"label\" />}\n {showCharCount && (\n <span class=\"form-ctrl__label-charcount\">\n {maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`}\n </span>\n )}\n </label>\n );\n } else {\n return (\n <label\n class={{ 'form-ctrl__label': true, 'visually-hide': hideLabel }}\n htmlFor={controlId}\n id={labelId}\n >\n <div class=\"form-ctrl__label-wrap\">\n {placeholder && hasValue && rtl && (\n <span class=\"form-ctrl__label-placeholder\">{placeholder} / </span>\n )}\n <span class=\"form-ctrl__labeltext\">\n {label && label}\n {!label && hasLabelSlot && <slot name=\"label\" />}\n </span>\n {placeholder && hasValue && !rtl && (\n <span class=\"form-ctrl__label-placeholder\"> / {placeholder}</span>\n )}\n </div>\n {showCharCount && (\n <span class=\"form-ctrl__label-charcount\">\n {maxlength\n ? maxlength - charCount + ' left'\n : charCount + ' characters'}\n </span>\n )}\n </label>\n );\n }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n props: FormControlWrapProps,\n children\n) => {\n const {\n rtl,\n floatLabel,\n label,\n moreId,\n helperEndId,\n type,\n hasHelperSlot,\n showInlineError,\n errorMessage,\n hasHelperEndSlot,\n } = props;\n\n const MainTag = hasHelperEndSlot ? 'nano-resize-observe' : 'div';\n\n return (\n <MainTag\n states=\"350w has-enough-width\"\n class={{\n 'has-label': label !== null && !floatLabel,\n 'has-float-label': label !== null && floatLabel,\n 'has-helper-end': hasHelperEndSlot,\n rtl,\n 'form-ctrl': true,\n }}\n >\n <div class=\"form-ctrl__wrapper\">\n {!floatLabel ? renderLabel({ ...props }) : ''}\n <div\n class={{\n 'form-ctrl__input': true,\n 'form-ctrl__textarea': type === 'textarea',\n }}\n >\n {floatLabel && renderLabel({ ...props, rtl })}\n {children}\n </div>\n {showInlineError || hasHelperSlot ? (\n <div class=\"form-ctrl__more\" id={moreId}>\n {!!showInlineError ? (\n <div class=\"form-ctrl__error\" aria-live=\"polite\">\n {errorMessage}\n </div>\n ) : (\n ''\n )}\n <div class=\"form-ctrl__helper\">\n <slot name=\"helper\" />\n </div>\n </div>\n ) : (\n ''\n )}\n </div>\n {hasHelperEndSlot ? (\n <div class=\"form-ctrl__helper-end\" id={helperEndId}>\n <slot name=\"helper-end\" />\n </div>\n ) : (\n ''\n )}\n </MainTag>\n );\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n props: FormControlProps,\n children\n) => {\n const {\n clearControl,\n onClearText,\n readonly,\n disabled,\n control,\n ref,\n endSlot,\n endValueSlot,\n startSlot,\n } = props;\n const clickThrough = () => {\n control.setFocus();\n };\n\n return (\n <div\n class=\"form-ctrl__input-wrap\"\n ref={(el) => {\n if (ref) ref(el);\n }}\n >\n <span class=\"form-ctrl__slot-start\">\n <slot name=\"start\" />\n {startSlot}\n </span>\n {children}\n {clearControl && !readonly && !disabled && (\n <button\n type=\"button\"\n class=\"icon form-ctrl__clear-btn\"\n tabindex=\"-1\"\n onTouchStart={onClearText}\n onMouseDown={onClearText}\n >\n <nano-icon name=\"light/times\"></nano-icon>\n </button>\n )}\n <span class=\"form-ctrl__slot-value-end\" onClick={clickThrough}>\n <slot name=\"value-end\" />\n {endValueSlot}\n </span>\n <span class=\"form-ctrl__slot-end\">\n <slot name=\"end\" />\n {endSlot}\n </span>\n </div>\n );\n};\n"]}

package/dist/nano-components/p-6f94d755.entry.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as e,i,h as s,e as o,g as r}from"./p-ab5813a7.js";import{i as a}from"./p-debd9efc.js";import{d as n}from"./p-1da5f8df.js";let h=class{constructor(i){t(this,i);this.nanoResizeStateChange=e(this,"nanoResizeStateChange",7);this.classNames=[];this.assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;const t={h:new Map,w:new Map};let e=false;Object.keys(this.appliedStates).forEach((i=>{let s;if(i==="h")s=this.currentHeight;else s=this.currentWidth;this.appliedStates[i].forEach(((o,r)=>{if(s>=r&&o.applied===false){o.applied=true;t[i].set(r,o);e=true}else if(s<r&&o.applied===true){o.applied=false;t[i].set(r,o);e=true}}))}));if(e)this.applyChanges(t);else if(!this.classNames.includes("is-ready"))this.classNames=["is-ready"]}}dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;if(!this.ro)this.attachRO();const t=t=>{const e=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(e[0]),dir:e[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((e=>{e=e.trim();if(e.includes(" ")){const[i,...s]=e.split(" ");const{bp:o,dir:r}=t(i);this.appliedStates[r].set(o,{states:s,applied:false})}else{const{bp:i,dir:s}=t(e);this.appliedStates[s].set(i,{applied:false})}}))}applyChanges(t){let e=[...this.classNames];Object.keys(t).forEach((i=>{t[i].forEach((t=>{if(!t.states)return;t.states.map((i=>{if(t.applied)e.push(i);else e=e.filter((t=>t!==i))}))}))}));this.classNames=["is-ready",...e];this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const e={};Object.keys(t).forEach((i=>{t[i].forEach(((t,s)=>{e[s+i]=t.applied}))}));return e}attachRO(){this.ro=new a((t=>{for(const e of t){this.currentWidth=e.contentRect.width;this.currentHeight=e.contentRect.height}}));this.ro.observe(this.host)}connectedCallback(){this.assessChanges=n(this.assessChanges,50)}componentDidLoad(){if(!this.states)return;if(!this.currentWidth||!this.currentHeight){i((()=>{const{width:t,height:e}=this.host.getBoundingClientRect();this.currentWidth=t;this.currentHeight=e}))}this.statesChanged()}disconnectedCallback(){if(this.ro)this.ro.disconnect()}render(){return s(o,{class:{[this.classNames.join(" ")]:true}},s("slot",null))}get host(){return r(this)}static get watchers(){return{currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"],states:["statesChanged"]}}};h.style=":host { display: inline-block } div { height: 100%; }";const l=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--base-color-rgb:var(--nano-skeleton-base-rgb, 228, 230, 232);--color:var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));--tint:var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));display:block;position:relative;border-radius:0.25rem;height:1em}.skeleton{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100%;border-radius:inherit}.skeleton__indicator{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:var(--color);border-radius:inherit}.skeleton.animate .skeleton__indicator{background:-webkit-gradient(linear, right top, left top, from(var(--tint)), color-stop(var(--color)), color-stop(var(--color)), to(var(--tint)));background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;-webkit-animation:loader 6s ease-in-out infinite;animation:loader 6s ease-in-out infinite}@-webkit-keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}";let d=class{constructor(e){t(this,e);this.animated=true}render(){return s("div",{class:{skeleton:true,animate:this.animated}},s("div",{class:"skeleton__indicator"}))}};d.style=l;export{h as nano_resize_observe,d as nano_skeleton};
+//# sourceMappingURL=p-6f94d755.entry.js.map

package/dist/nano-components/p-6f94d755.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","src/components/skeleton/skeleton.tsx"],"names":["ResizeObserve","[object Object]","hostRef","this","classNames","assessChanges","currentWidth","currentHeight","changedStates","h","Map","w","hasChanged","Object","keys","appliedStates","forEach","dimType","dim","state","bp","applied","set","applyChanges","includes","states","ro","attachRO","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","key","classes","changes","push","cl","nanoResizeStateChange","emit","toSimpleObj","stateMaps","retObj","ResizeObserver","entries","entry","contentRect","width","height","observe","host","debounce","readTask","getBoundingClientRect","statesChanged","disconnect","Host","class","join","skeletonCss","Skeleton","animated","skeleton","animate"],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Host,\n State,\n Watch,\n ComponentInterface,\n Event,\n EventEmitter,\n readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { debounce } from '../../utils';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n h: Map<number, ResizeObserverState>;\n w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n */\n@Component({\n tag: 'nano-resize-observe',\n shadow: true,\n styles: `:host { display: inline-block } div { height: 100%; }`,\n})\nexport class ResizeObserve implements ComponentInterface {\n private ro: ResizeObserver;\n private appliedStates: StateMaps;\n\n @Element() host: HTMLNanoResizeObserveElement;\n @State() currentWidth: number;\n @State() currentHeight: number;\n @State() classNames: string[] = [];\n\n /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n * Format: `states=\"800w, 300h class1 class2\"` */\n @Prop() states: string;\n\n /** A resize break point is switched on or off */\n @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n @Watch('currentHeight')\n @Watch('currentWidth')\n dimensionChanged() {\n this.assessChanges();\n }\n\n @Watch('states')\n statesChanged() {\n if (!this.states) return;\n if (!this.ro) this.attachRO();\n\n const toBpDir = (bpDir: string) => {\n const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n };\n this.appliedStates = { h: new Map(), w: new Map() };\n\n // parse state string\n this.states.split(',').map((st) => {\n st = st.trim();\n if (st.includes(' ')) {\n const [key, ...classes] = st.split(' ');\n const { bp, dir } = toBpDir(key);\n this.appliedStates[dir as keyof StateMaps].set(bp, {\n states: classes,\n applied: false,\n });\n } else {\n const { bp, dir } = toBpDir(st);\n this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n }\n });\n }\n\n private assessChanges = () => {\n if (!this.currentWidth && !this.currentHeight) return;\n const changedStates: StateMaps = { h: new Map(), w: new Map() };\n let hasChanged = false;\n\n Object.keys(this.appliedStates).forEach((dimType) => {\n let dim: number;\n if (dimType === 'h') dim = this.currentHeight;\n else dim = this.currentWidth;\n\n this.appliedStates[dimType].forEach(\n (state: ResizeObserverState, bp: number) => {\n if (dim >= bp && state.applied === false) {\n state.applied = true;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n } else if (dim < bp && state.applied === true) {\n state.applied = false;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n }\n }\n );\n });\n if (hasChanged) this.applyChanges(changedStates);\n else if (!this.classNames.includes('is-ready'))\n this.classNames = ['is-ready'];\n };\n\n private applyChanges(changes: StateMaps) {\n let classNames = [...this.classNames];\n Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n changes[dimType].forEach((state) => {\n if (!state.states) return;\n state.states.map((st) => {\n if (state.applied) classNames.push(st);\n else classNames = classNames.filter((cl) => cl !== st);\n });\n });\n });\n this.classNames = ['is-ready', ...classNames];\n this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n }\n\n private toSimpleObj(stateMaps: StateMaps) {\n const retObj = {};\n Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n retObj[bp + dimType] = state.applied;\n });\n });\n return retObj;\n }\n\n private attachRO() {\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.currentWidth = entry.contentRect.width;\n this.currentHeight = entry.contentRect.height;\n }\n });\n this.ro.observe(this.host);\n }\n\n connectedCallback() {\n this.assessChanges = debounce(this.assessChanges, 50);\n }\n\n componentDidLoad() {\n if (!this.states) return;\n if (!this.currentWidth || !this.currentHeight) {\n readTask(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = width;\n this.currentHeight = height;\n });\n }\n this.statesChanged();\n }\n\n disconnectedCallback() {\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host\n class={{\n [this.classNames.join(' ')]: true,\n }}\n >\n <slot />\n </Host>\n );\n }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n /**\n * @prop --base-color-rgb: default #{$skeleton-color-rgb};\n * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n */\n\n --base-color-rgb: #{$skeleton-color-rgb};\n --color: var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));\n\n display: block;\n position: relative;\n border-radius: 0.25rem;\n height: 1em;\n}\n\n.skeleton {\n display: flex;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n}\n\n.skeleton__indicator {\n flex: 1 1 auto;\n background: var(--color);\n border-radius: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n background:\n linear-gradient(\n 270deg,\n var(--tint),\n var(--color),\n var(--color),\n var(--tint)\n );\n background-size: 400% 100%;\n animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n 0% {\n background-position: 200% 0;\n }\n\n to {\n background-position: -200% 0;\n }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n tag: 'nano-skeleton',\n styleUrl: 'skeleton.scss',\n shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n /** When `true`, the skeleton will animate. */\n @Prop() animated = true;\n\n render() {\n return (\n <div\n class={{\n skeleton: true,\n animate: this.animated,\n }}\n >\n <div class=\"skeleton__indicator\" />\n </div>\n );\n }\n}\n"]}

package/dist/nano-components/p-802e1416.system.entry.js ADDED Viewed

@@ -0,0 +1,5 @@
+var __awaiter=this&&this.__awaiter||function(e,n,t,a){function o(e){return e instanceof t?e:new t((function(n){n(e)}))}return new(t||(t=Promise))((function(t,i){function l(e){try{s(a.next(e))}catch(n){i(n)}}function r(e){try{s(a["throw"](e))}catch(n){i(n)}}function s(e){e.done?t(e.value):o(e.value).then(l,r)}s((a=a.apply(e,n||[])).next())}))};var __generator=this&&this.__generator||function(e,n){var t={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},a,o,i,l;return l={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(l[Symbol.iterator]=function(){return this}),l;function r(e){return function(n){return s([e,n])}}function s(l){if(a)throw new TypeError("Generator is already executing.");while(t)try{if(a=1,o&&(i=l[0]&2?o["return"]:l[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,l[1])).done)return i;if(o=0,i)l=[l[0]&2,i.value];switch(l[0]){case 0:case 1:i=l;break;case 4:t.label++;return{value:l[1],done:false};case 5:t.label++;o=l[1];l=[0];continue;case 7:l=t.ops.pop();t.trys.pop();continue;default:if(!(i=t.trys,i=i.length>0&&i[i.length-1])&&(l[0]===6||l[0]===2)){t=0;continue}if(l[0]===3&&(!i||l[1]>i[0]&&l[1]<i[3])){t.label=l[1];break}if(l[0]===6&&t.label<i[1]){t.label=i[1];i=l;break}if(i&&t.label<i[2]){t.label=i[2];t.ops.push(l);break}if(i[2])t.ops.pop();t.trys.pop();continue}l=n.call(e,t)}catch(r){l=[6,r];o=0}finally{a=i=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(e,n){for(var t=0,a=n.length,o=e.length;t<a;t++,o++)e[o]=n[t];return e};
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */System.register(["./p-59b3d24b.system.js"],(function(e){"use strict";var n,t,a,o,i;return{setters:[function(e){n=e.r;t=e.c;a=e.h;o=e.e;i=e.g}],execute:function(){var l='.sc-nano-file-upload-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}.sc-nano-file-upload-h{min-height: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, 8px));--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, 1em);--btn-padding-end:var(--nano-btn-padding-end, 1em)}[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{display:none}.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;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{height:1em;margin-left:3px;margin-right:0;margin-top:calc(var(--label-padding) / 2);margin-bottom:var(--label-padding);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__more.sc-nano-file-upload{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;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;width:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg);color:var(--drop-text);min-height:var(--drop-height);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:0.9em;position:relative;-webkit-transition:background-color 0.15s ease-in-out;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:rgba(var(--drop-border-tint), 0.5);border-style:dashed;top:0;bottom:0;left:0;right:0;-webkit-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;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:rgba(var(--drop-border--invalid), 1)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{top:5px;bottom:5px;left:5px;right:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:rgba(var(--drop-border-tint), 1);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{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));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;top:-4px}.file-upload__list-item.sc-nano-file-upload{width:100%;margin:0 0 2px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation:hideListItem 0.3s ease-in-out forwards;animation:hideListItem 0.3s ease-in-out forwards}@-webkit-keyframes hideListItem{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateZ(0);transform:translateZ(0)}100%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes hideListItem{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateZ(0);transform:translateZ(0)}100%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateZ(0);transform:translateZ(0)}}.file-upload__list-item--active.sc-nano-file-upload{-webkit-animation:showListItem 0.3s ease-in-out forwards;animation:showListItem 0.3s ease-in-out forwards}@-webkit-keyframes showListItem{0%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateZ(0);transform:translateZ(0)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes showListItem{0%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateZ(0);transform:translateZ(0)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateZ(0);transform:translateZ(0)}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:white;border-radius:5px;padding:5px 5px;margin-right:2px;display:block;width: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:white;border-radius:5px;margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:rgba(var(--drop-border--invalid), 1)}.file-upload__button.sc-nano-file-upload{margin:0;padding:0;border:none;background-color:transparent;font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;-webkit-transition:background-color 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out;transition:background-color 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out;padding-left:var(--nano-btn-padding-start, 1rem);padding-right:var(--nano-btn-padding-end, 1rem);padding-top:var(--nano-btn-padding-top, 0.5rem);padding-bottom:var(--nano-btn-padding-bottom, 0.5rem);-webkit-box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));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.5rem);font-weight:500;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-width: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}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__button.sc-nano-file-upload{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--nano-btn-padding-start, 1rem);padding-inline-start:var(--nano-btn-padding-start, 1rem);-webkit-padding-end:var(--nano-btn-padding-end, 1rem);padding-inline-end:var(--nano-btn-padding-end, 1rem)}}@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;-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));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{margin-left:0.5rem;margin-right:0;font-size:var(--nano-btn-icon-size, 1rem);vertical-align:middle;margin-top:-0.188rem;display:inline-block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:unset;margin-right:unset;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;-webkit-margin-end:0;margin-inline-end:0}}.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:0;margin-right:0.5rem}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}}.file-upload__button.sc-nano-file-upload:hover:not(.file-upload__button--disabled){-webkit-box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));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){-webkit-box-shadow:none;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);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(.button--focus),.file-upload__button.button--keyline.button--active.sc-nano-file-upload{-webkit-box-shadow:none;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-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:inherit;padding:0;border:0;outline:none;background-color:transparent;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width: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-left:0.4rem;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-left:unset;margin-right:unset;-webkit-margin-start:0.4rem;margin-inline-start:0.4rem;-webkit-margin-end:0;margin-inline-end:0}}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;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-width:0}';var r=0;var s=function(){return new DataTransfer};try{s()}catch(u){try{s=function(){return new ClipboardEvent("").clipboardData};s()}catch(p){s=null}}var d=e("nano_file_upload",function(){function e(e){var o=this;n(this,e);this.nanoChange=t(this,"nanoChange",7);this.nanoFocus=t(this,"nanoFocus",7);this.nanoBlur=t(this,"nanoBlur",7);this.nanoValidate=t(this,"nanoValidate",7);this.fileInputId="nano-file-upload-"+r++;this.canChangeFileList=!!s;this.removeFiles=[];this.errorMessage=null;this.isDragging=false;this.fileList=[];this.maxFileSize=1;this.maxFiles=1;this.placeholder="Choose a file...";this.hideLabel=false;this.required=false;this.disabled=false;this.clearInput=false;this.showInlineError=true;this.validateOn="submit";this._invalid=false;this.onClearClick=function(){o.value=""};this.onBlur=function(){o.hasFocus=false;if(o.validateOn==="dirty")o.validate();o.nanoBlur.emit()};this.onFocus=function(){o.hasFocus=true;o.nanoFocus.emit()};this.validate=function(e){o.errorMessage=null;o.inputEl.setCustomValidity("");var n;if(o.validateOn==="submitThenDirty")o.validateOn="dirty";if(!o.inputEl.validity.valid){if(o.showInlineError)o.errorMessage=o.inputEl.validationMessage}else{o.fileList.forEach((function(e){n=null;if(!o.checkFileSize(e.file.size)){n="Maximum file size exceeded. Max file size is "+o.maxFileSize+"Mb"}else if(!o.checkFileType(e.file.type))n="File type is not allowed ("+o.accept+")";if(!o.errorMessage&&n)o.errorMessage=n;e.validationMessage=n;e.valid=!n}));if(o.fileList.length>o.maxFiles)o.errorMessage="Maxinum number of files exceeded ("+o.maxFiles+")"}if(!!o.errorMessage){o._invalid=true;o.inputEl.setCustomValidity(o.errorMessage)}else{o._invalid=false}o.nanoValidate.emit({isValid:!o._invalid,errorMessage:o.inputEl.validationMessage,originalEvent:e})};this.onInvalid=function(e){o.validate(e);if(o.showInlineError)e.preventDefault()};this.onFileChoose=function(e){var n=e.target.files;if(n&&n.length)o.addNewFiles(e.target.files)};this.onFileRemoveFileClick=function(e,n){if(!o.canChangeFileList)return;o.removeFiles.push(n);e.target.closest(".file-upload__list-item--active").classList.remove("file-upload__list-item--active")};this.onFileRemoveAnim=function(){if(!o.canChangeFileList||!o.removeFiles.length)return;o.fileList=o.fileList.filter((function(e){return!o.removeFiles.find((function(n){return n===e}))}));o.removeFiles=[]};this.onInputChange=function(){o.nanoChange.emit({value:o.value,files:o.files})};this.onDragStop=function(e){e.preventDefault();e.stopPropagation();o.isDragging=false};this.onDragStart=function(e){e.preventDefault();e.stopPropagation();o.isDragging=true};this.onDrop=function(e){o.onDragStop(e);if(e.dataTransfer.files&&e.dataTransfer.files.length)o.addNewFiles(e.dataTransfer.files)};this.FileUploadInput=function(e,n){var t=o.fileInputId+"-lbl";var i=o.showInlineError||o.hasHelperSlot?o.fileInputId+"-more":"";return[a("div",{class:"file-upload__"+e+"-wrap"},a("label",{class:"file-upload__"+e,htmlFor:o.fileInputId,id:t,onDrop:function(e){o.onDrop(e);o.onDragStop(e)},onDragEnd:o.onDragStop,onDragLeave:o.onDragStop,onDragEnter:o.onDragStart,onDragOver:o.onDragStart},a("div",{class:"file-upload__label "+(o.hideLabel||e!=="drop"?"visually-hide":"")},o.label&&o.label,!o.label&&o.hasLabelSlot&&a("slot",{name:"label"})),e==="drop"&&a("div",{class:"file-upload__drop-area"},"Drap and drop or ",a("span",null,"browse")),e==="btn"&&a("div",{class:"file-upload__button button--keyline button--icon-start "+(o.hasFocus?"button--focus":"")},a("div",{class:"file-upload__btn-content"},a("nano-icon",{name:"regular/cloud-upload"}),a("span",null,!!o.fileList.length?o.fileList[0].file.name:o.placeholder),!!o.value&&o.clearInput&&!o.disabled&&a("button",{type:"button",class:"icon file-upload__clear-btn",tabindex:"-1",onClick:o.onClearClick},a("nano-icon",{name:"light/times"})))),a("input",{"aria-labelledby":t+" "+i+" "+n,type:"file",id:o.fileInputId,accept:o.accept,class:"file-upload__input",multiple:o.maxFiles>1,disabled:o.disabled,name:o.canChangeFileList?undefined:o.name,ref:function(e){if(o.canChangeFileList){o.publicInputEl=e;return}o.inputEl=e},onChange:o.onFileChoose,onFocus:o.onFocus,onReset:o.onInputChange})),a("input",{name:!o.canChangeFileList?undefined:o.name,ref:function(e){if(!o.canChangeFileList)return;o.inputEl=e},type:"file",id:o.fileInputId+"-hidden",tabIndex:-1,multiple:true,class:"file-upload__input",disabled:o.disabled,required:o.required,accept:o.accept,onInvalid:o.onInvalid,onChange:o.onInputChange})),o.showInlineError||o.hasHelperSlot?a("div",{class:"file-upload__more",id:i},o.showInlineError?a("div",{class:"file-upload__error"},o.errorMessage):"",a("div",{class:"file-upload__help"},a("slot",{name:"helper"}))):""]};this.button=function(){return o.FileUploadInput("btn")};this.dropArea=function(){var e=o.fileInputId+"-list";return[o.FileUploadInput("drop",e),a("output",{class:"file-upload__list-wrap",id:e},!!o.fileList&&o.fileList.length>0&&a("ul",{class:"file-upload__list list"},o.fileList.map((function(e){return a("li",{key:e.file.name,class:"file-upload__list-item file-upload__list-item--active list-item",onAnimationEnd:function(e){return o.onFileRemoveAnim()}},a("span",{class:"list-title"},e.file.name),!e.valid&&a("nano-tooltip",{content:e.validationMessage,placement:"left"},a("nano-icon-button",{class:"list-button list-error",iconName:"light/exclamation-triangle",label:"File error"})),o.canChangeFileList&&a("nano-icon-button",{class:"list-button list-button--view",type:"button",iconName:"light/eye",label:"View file",target:"_blank",href:e.location}),o.canChangeFileList&&a("nano-icon-button",{onClick:function(n){return o.onFileRemoveFileClick(n,e)},class:"list-button list-button--remove",iconName:"light/times",label:"Remove file"}))}))))]}}e.prototype.fileListChange=function(){if(this.canChangeFileList){this.publicInputEl.value="";this.inputEl.files=this.arrToFileList(this.fileList.map((function(e){return e.file})));this.nanoChange.emit({value:this.value,files:this.files})}};e.prototype.shouldValidate=function(){var e=this;if(!this.inputEl)return;setTimeout((function(){if(e.validateOn==="dirty")e.validate()}),20)};Object.defineProperty(e.prototype,"invalid",{get:function(){return this._invalid},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"files",{get:function(){return this.inputEl?Array.from(this.inputEl.files).map((function(e){e.objectURL=URL.createObjectURL(e);return e})):[]},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"value",{get:function(){return this.inputEl?this.inputEl.value:""},set:function(e){if(e===""&&this.inputEl){this.fileList=[];this.inputEl.value=""}},enumerable:false,configurable:true});e.prototype.reportValidity=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){if(e)this.validate();return[2,{isValid:!this.invalid,errorMessage:this.inputEl.validationMessage}]}))}))};e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.inputEl)this.inputEl.focus();return[2]}))}))};e.prototype.getInputElement=function(){return Promise.resolve(this.inputEl)};e.prototype.showError=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){if(this.inputEl){this.inputEl.setCustomValidity(e);this.validate()}return[2]}))}))};e.prototype.globalClickHandler=function(e){var n=this;if(!this.hasFocus)return;if(e.composedPath().every((function(e){return e!==n.host})))this.onBlur()};e.prototype.globalKeydownHandler=function(e){if(!this.hasFocus||e.key!=="Tab")return;if(e.target!==this.inputEl)this.onBlur()};e.prototype.arrToFileList=function(e){var n=s();for(var t=0,a=e.length;t<a;t++)n.items.add(e[t]);return n.files};e.prototype.checkFileSize=function(e){return e/1e6<=this.maxFileSize};e.prototype.checkFileType=function(e){if(!this.accept)return true;return this.accept.match(e)&&this.accept.match(e).length>0};e.prototype.slotChangeObserver=function(){var e=this;if(this.mo)this.mo.disconnect();var n=this.mo=new MutationObserver((function(){return e.processSlottedContent()}));n.observe(this.host,{childList:true,subtree:true})};e.prototype.processSlottedContent=function(){this.hasLabelSlot=!!this.host.querySelectorAll('[slot="label"]');this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]')};e.prototype.addNewFiles=function(e){var n=this;var t=Array.from(e).map((function(e){return{file:e,location:URL.createObjectURL(e),valid:true,validationMessage:null}}));if(this.canChangeFileList&&this.maxFiles>1){var a=t.filter((function(e){return!n.fileList.find((function(n){return n.file.name===e.file.name}))}));this.fileList=__spreadArray(__spreadArray([],this.fileList),a)}else this.fileList=t};e.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect()};e.prototype.componentDidLoad=function(){this.slotChangeObserver()};e.prototype.componentWillLoad=function(){this.processSlottedContent()};e.prototype.render=function(){return a(o,null,a("div",{class:{"file-upload":true,"file-upload--dragging":this.isDragging,"file-upload--focus":this.hasFocus,"file-upload--invalid":this._invalid}},this.maxFiles>1?a(this.dropArea,null):a(this.button,null)))};Object.defineProperty(e.prototype,"host",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{fileList:["fileListChange","shouldValidate"],maxFiles:["shouldValidate"],maxFileSize:["shouldValidate"],capture:["shouldValidate"],accept:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"],validateOn:["shouldValidate"]}},enumerable:false,configurable:true});return e}());d.style=l}}}));
+//# sourceMappingURL=p-802e1416.system.entry.js.map

package/dist/nano-components/{p-ef4e0912.system.entry.js.map → p-802e1416.system.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/file-upload/file-upload.scss?tag=nano-file-upload&encapsulation=scoped","src/components/file-upload/file-upload.tsx"],"names":["fileUploadCss","fileInputIds","getDataTransfer","DataTransfer","_a","ClipboardEvent","clipboardData","_b","FileUpload","exports","class_1","hostRef","_this","this","fileInputId","canChangeFileList","removeFiles","errorMessage","isDragging","fileList","maxFileSize","maxFiles","placeholder","hideLabel","required","disabled","clearInput","showInlineError","validateOn","_invalid","onClearClick","value","onBlur","hasFocus","validate","nanoBlur","emit","onFocus","nanoFocus","ev","inputEl","setCustomValidity","error","validity","valid","validationMessage","forEach","fileItem","checkFileSize","file","size","checkFileType","type","accept","length","nanoValidate","isValid","originalEvent","onInvalid","preventDefault","onFileChoose","e","files","target","addNewFiles","onFileRemoveFileClick","push","closest","classList","remove","onFileRemoveAnim","filter","find","rmFile","onInputChange","nanoChange","onDragStop","stopPropagation","onDragStart","onDrop","dataTransfer","FileUploadInput","eleType","listId","labelId","moreId","hasHelperSlot","h","class","htmlFor","id","onDragEnd","onDragLeave","onDragEnter","onDragOver","label","hasLabelSlot","name","tabindex","onClick","aria-labelledby","multiple","undefined","ref","input","publicInputEl","onChange","onReset","tabIndex","button","dropArea","map","key","onAnimationEnd","_","content","placement","iconName","href","location","prototype","fileListChange","arrToFileList","shouldValidate","setTimeout","Object","defineProperty","Array","from","objectURL","URL","createObjectURL","val","reportValidity","validateFirst","invalid","setFocus","focus","getInputElement","Promise","resolve","showError","message","globalClickHandler","composedPath","every","node","host","globalKeydownHandler","i","len","items","add","match","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","childList","subtree","querySelectorAll","querySelector","newFiles","findFile","__spreadArray","disconnectedCallback","componentDidLoad","componentWillLoad","render","Host","file-upload","file-upload--dragging","file-upload--focus","file-upload--invalid"],"mappings":"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","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@import '../../global/style/nano-theme/button';\n\n:host {\n /*\n @prop --invalid-msg-color: Default value #{nano-color(danger, base)};\n * @prop --invalid-msg-font-size: Default value #{$input-help-font-size};\n\n * @prop --help-msg-color: Default value #{$input-help-color};\n\n * @prop --label-color: Default value #{$label-color};\n * @prop --label-color--invalid: Default value #{$label-color-invalid};\n * @prop --label-font-size: Default value #{$label-font-size};\n * @prop --label-padding: Default value #{$input-padding-bottom};\n * @prop --label-color--invalid: Default value #{$label-color-invalid};\n\n * @prop --drop-bg: Default value #{map.get($colors, blue--faded)};\n * @prop --drop-text: Default value #{map.get($colors, dimgrey)};\n * @prop --drop-height: Default value 3.5em;\n * @prop --drop-border-tint: Default value #{nano-color(primary, base, null, true)};\n * @prop --drop-border-width: Default value 2px;\n * @prop --drop-border-radius: Default value 5px;\n * @prop --drop-bg--invalid: Default value #{$input-background-color--invalid};\n * @prop --drop-border--invalid: Default value #{nano-color(danger, base, null, true)};\n\n * @prop --btn-bg: Default value #{nano-color(primary, base)};\n * @prop --btn-text: Default value #{nano-color(primary, contrast)};\n * @prop --btn-icon-size: Default value var(--nano-btn-icon-size, 1.4em);\n * @prop --btn-padding-top: Default value var(--nano-btn-padding-top, .5em);\n * @prop --btn-padding-bottom: Default value var(--nano-btn-padding-bottom, .5em);\n * @prop --btn-padding-start: Default value var(--nano-btn-padding-start, 1em);\n * @prop --btn-padding-end: Default value var(--nano-btn-padding-end, 1em);\n /\n\n min-height: 1rem;\n display: block;\n\n --invalid-msg-color: #{nano-color(danger, base)};\n --invalid-msg-font-size: #{$input-help-font-size};\n --help-msg-color: #{$input-help-color};\n --label-color: #{$label-color};\n --label-font-size: #{$label-font-size};\n --label-padding: #{$input-padding-bottom};\n --label-color--invalid: #{$label-color-invalid};\n --drop-bg: #{map.get($colors, blue--faded)};\n --drop-text: #{darken(map.get($colors, dimgrey), 11%)};\n --drop-height: 3.5em;\n --drop-border-tint: #{nano-color(primary, base, null, true)};\n --drop-border-width: 2px;\n --drop-border-radius: 5px;\n --drop-bg--invalid: #{$input-background-color--invalid};\n --drop-border--invalid: #{nano-color(danger, base, null, true)};\n --btn-bg: #{nano-color(primary, base)};\n --btn-text: #{nano-color(primary, contrast)};\n --btn-icon-size: var(--nano-btn-icon-size, 1.4em);\n --btn-padding-top: var(--nano-btn-padding-top, 0.5em);\n --btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5em);\n --btn-padding-start: var(--nano-btn-padding-start, 1em);\n --btn-padding-end: var(--nano-btn-padding-end, 1em);\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n\n {\n pointer-events: none !important;\n }\n}\n\n.file-upload {\n $self: &;\n\n /* Common /\n\n &__label {\n font-size: var(--label-font-size);\n padding: 0 0 var(--label-padding);\n margin: 0;\n line-height: 1;\n\n :host([invalid]:not([invalid='false'])) & {\n color: var(--label-color--invalid);\n }\n }\n\n &__input {\n display: none;\n }\n\n &__error,\n &__help,\n &__more,\n &__label {\n display: block;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__more {\n height: 1em;\n\n @include margin(\n calc(var(--label-padding) / 2),\n 0,\n var(--label-padding),\n 3px\n );\n\n position: relative;\n }\n\n &__error,\n &__help {\n top: 0;\n left: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n\n .file-upload--invalid & {\n opacity: 1;\n }\n }\n\n &__error {\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n opacity: 0;\n\n .file-upload--invalid & {\n opacity: 1;\n }\n }\n\n &__help {\n font-style: italic;\n opacity: 1;\n color: var(--help-msg-color);\n\n .file-upload--invalid & {\n opacity: 0;\n }\n }\n\n / Drop area / Multi file upload /\n\n &__drop {\n position: relative;\n width: 100%;\n display: inline-block;\n }\n\n &__drop-area {\n background-color: var(--drop-bg);\n color: var(--drop-text);\n min-height: var(--drop-height);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.9em;\n position: relative;\n transition: background-color 0.15s ease-in-out;\n padding: 0.5rem;\n\n :host([disabled]:not([disabled='false'])) & {\n opacity: 0.7;\n }\n\n .file-upload--invalid & {\n background-color: var(--drop-bg--invalid);\n }\n\n .file-upload--dragging & {\n background-color: #{map.get($colors, white)};\n }\n\n &::after {\n content: '';\n position: absolute;\n border-radius: var(--drop-border-radius);\n border-width: var(--drop-border-width);\n border-color: rgba(var(--drop-border-tint), 0.5);\n border-style: dashed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n transition:\n top 0.1s ease-in-out,\n bottom 0.1s ease-in-out,\n left 0.1s ease-in-out,\n right 0.1s ease-in-out;\n\n .file-upload--invalid & {\n border-color: rgba(var(--drop-border--invalid), 1);\n }\n\n .file-upload--dragging & {\n top: 5px;\n bottom: 5px;\n left: 5px;\n right: 5px;\n }\n }\n\n span {\n color: rgba(var(--drop-border-tint), 1);\n text-decoration: underline;\n border-radius: 2px;\n z-index: 1;\n cursor: pointer;\n position: relative;\n\n .file-upload--focus & {\n box-shadow: #{$control-focus-style};\n }\n }\n }\n\n &__list {\n list-style: none;\n margin: 0;\n padding: 0;\n\n &-wrap {\n position: relative;\n top: -4px;\n }\n\n &-item {\n width: 100%;\n margin: 0 0 2px;\n display: flex;\n align-items: center;\n transform: translateZ(0);\n animation: hideListItem 0.3s ease-in-out forwards;\n\n @keyframes hideListItem {\n 0% {\n opacity: 1;\n transform: translateY(0);\n transform: translateZ(0);\n }\n\n 100% {\n opacity: 0;\n transform: translateY(10px);\n transform: translateZ(0);\n }\n }\n\n &--active {\n animation: showListItem 0.3s ease-in-out forwards;\n\n @keyframes showListItem {\n 0% {\n opacity: 0;\n transform: translateY(10px);\n transform: translateZ(0);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n transform: translateZ(0);\n }\n }\n }\n }\n\n .list-title {\n background: white;\n border-radius: 5px;\n padding: 5px 5px;\n margin-right: 2px;\n display: block;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-size: 0.9em;\n color: var(--help-msg-color);\n }\n\n .list-button {\n background: white;\n border-radius: 5px;\n margin: 2px;\n }\n\n .list-error {\n --color: rgba(var(--drop-border--invalid), 1);\n }\n }\n\n / Button display / Single file upload /\n\n &__button {\n @include button-base;\n @include button-standard(\n var(--btn-bg),\n var(--btn-text),\n #{nano-color(primary, shade)}\n );\n\n --nano-btn-icon-size: var(--btn-icon-size);\n --nano-btn-line-height: var(--btn-icon-size);\n --nano-btn-padding-top: var(--btn-padding-top);\n --nano-btn-padding-bottom: var(--btn-padding-bottom);\n --nano-btn-padding-start: var(--btn-padding-start);\n --nano-btn-padding-end: var(--btn-padding-end);\n\n max-width: 100%;\n font-size: 0.9em;\n\n :host([disabled]:not([disabled='false'])) & {\n opacity: 0.4;\n }\n\n .file-upload--dragging & {\n --nano-btn-border-style: dashed;\n }\n #{$self}__clear-btn {\n @include margin(0);\n\n font-size: inherit;\n padding: 0;\n border: 0;\n outline: none;\n background-color: transparent;\n display: flex;\n align-items: stretch;\n width: auto;\n color: var(--clear-btn-color);\n\n :host(.is-invalid) & {\n color: var(--clear-btn-color--invalid);\n }\n\n nano-icon {\n @include margin(0, 0, 0, 0.4rem);\n }\n }\n #{$self}__btn-content {\n display: flex;\n align-items: center;\n\n span {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n Host,\n Element,\n ComponentInterface,\n State,\n Event,\n EventEmitter,\n Watch,\n VNode,\n Method,\n Listen,\n} from '@stencil/core';\nimport {\n ControlValidity,\n ControlValidityEventDetail,\n FileInputChangeEventDetail,\n FileWithUrl,\n} from '../../interface';\n\nlet fileInputIds = 0;\n\nlet getDataTransfer = () => new DataTransfer();\ntry {\n getDataTransfer();\n} catch {\n try {\n getDataTransfer = () => new ClipboardEvent('').clipboardData;\n getDataTransfer();\n } catch {\n getDataTransfer = null;\n }\n}\n\ninterface FileValidation {\n file: File;\n valid: boolean;\n validationMessage?: string;\n location?: string;\n}\n/\n A better UI experience for `input type=\"file\"` form controls.\n \n - Drag and Drop\n * - Validation options\n * - Preview and manage multiple files\n /\n@Component({\n tag: 'nano-file-upload',\n styleUrl: 'file-upload.scss',\n scoped: true,\n})\nexport class FileUpload implements ComponentInterface {\n private inputEl: HTMLInputElement;\n private publicInputEl: HTMLInputElement;\n private mo!: MutationObserver;\n private fileInputId = `nano-file-upload-${fileInputIds++}`;\n private canChangeFileList = !!getDataTransfer;\n private removeFiles: FileValidation[] = [];\n\n @State() hasHelperSlot: boolean;\n @State() hasLabelSlot: boolean;\n @State() errorMessage: string = null;\n @State() isDragging = false;\n @State() fileList: FileValidation[] = [];\n @Watch('fileList')\n fileListChange() {\n if (this.canChangeFileList) {\n this.publicInputEl.value = '';\n this.inputEl.files = this.arrToFileList(\n this.fileList.map((file) => file.file)\n );\n this.nanoChange.emit({ value: this.value, files: this.files });\n }\n }\n @State() hasFocus: boolean;\n\n @Element() host: HTMLNanoFileUploadElement;\n\n // public props\n\n /* Name of the form control. Submitted with the form as part of a name/value pair. /\n @Prop() name!: string;\n\n /* The accept attribute value is a string that defines the file types the file input should accept.\n * E.g. for a MS Word file: `.doc, .docx,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document` /\n @Prop() accept?: string;\n\n /* Specifies which camera to use for capture of image or video data. `user` for the user-facing camera and/or microphone.\n * `environment` specifies the the outward-facing camera and/or microphone. If the requested facing mode isn't available,\n * the user agent may fall back to its preferred default mode. /\n @Prop() capture?: 'user' \| 'environment';\n\n /* The maximum file size allowed per file (Megabytes) /\n @Prop() maxFileSize: number = 1;\n\n /* The maximum file size allowed per file (bytes). /\n @Prop() maxFiles: number = 1;\n\n /* String to place within a label element. /\n @Prop() label!: string;\n\n /* Placeholder only used within single file uploads. /\n @Prop() placeholder: string = 'Choose a file...';\n\n /* Visually hide the label - but make it accessible. /\n @Prop() hideLabel?: boolean = false;\n\n /* If `true`, the user must select a file to upload before submitting a form. /\n @Prop() required = false;\n\n /* If `true`, the user cannot interact with the select. /\n @Prop({ reflect: true }) disabled = false;\n\n /* If `true`, a clear icon will appear in the input when there is a value.\n * Clicking it clears the input. Only used within single file uploads. /\n @Prop() clearInput = false;\n\n /* Whether to show validation errors underneath input /\n @Prop({ reflect: true }) showInlineError = true;\n\n /* When should the field perform validation /\n @Prop({ mutable: true }) validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' =\n 'submit';\n\n @Watch('maxFiles')\n @Watch('maxFileSize')\n @Watch('capture')\n @Watch('accept')\n @Watch('required')\n @Watch('disabled')\n @Watch('validateOn')\n @Watch('fileList')\n protected shouldValidate() {\n if (!this.inputEl) return;\n setTimeout(() => {\n if (this.validateOn === 'dirty') this.validate();\n }, 20);\n }\n\n @State() _invalid = false;\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 @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n\n /* A File array that lists every selected file.\n * Has an added `objectURL` property returning a `DOMString`\n * containing an object URL that can be used to reference the contents of the specified source\n * This list has no more than one member unless the multiple attribute is specified. @readonly /\n @Prop()\n get files(): FileWithUrl[] {\n return this.inputEl\n ? Array.from(this.inputEl.files).map((file: FileWithUrl) => {\n file.objectURL = URL.createObjectURL(file);\n return file;\n })\n : [];\n }\n\n /* A file input's value attribute contains a DOMString that represents the path to the selected file(s).\n * If the user selected multiple files, the value represents the first file in the list of files they selected.\n * You can reset the file-upload control by setting the value to an emptry string e.g. `var input.value = ''` /\n @Prop()\n get value() {\n return this.inputEl ? this.inputEl.value : '';\n }\n set value(val: string) {\n if (val === '' && this.inputEl) {\n this.fileList = [];\n this.inputEl.value = '';\n }\n }\n\n // Events\n\n /* Emitted when the value has changed. /\n @Event() nanoChange!: EventEmitter<FileInputChangeEventDetail>;\n\n /* Emited when the checkbox is focused /\n @Event() nanoFocus: EventEmitter;\n\n /* Emited when the checkbox is blurred /\n @Event() nanoBlur: EventEmitter;\n\n /* Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`. /\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // Public methods\n\n /* Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }` /\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n if (validateFirst) this.validate();\n return {\n isValid: !this.invalid,\n errorMessage: this.inputEl.validationMessage,\n };\n }\n\n /* Sets focus on the specified `nano-input`. Use this method instead of the global\n * `input.focus()`. /\n @Method()\n async setFocus() {\n if (this.inputEl) this.inputEl.focus();\n }\n\n /* Returns the native `<input>` element used under the hood /\n @Method()\n getInputElement(): Promise<HTMLInputElement \| HTMLTextAreaElement> {\n return Promise.resolve(this.inputEl!);\n }\n\n /* Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n * @param message */\n @Method()\n async showError(message: string) {\n if (this.inputEl) {\n this.inputEl.setCustomValidity(message);\n this.validate();\n }\n }\n\n // Listeners\n\n @Listen('click', { target: 'window' })\n globalClickHandler(e: Event) {\n if (!this.hasFocus) return;\n if (e.composedPath().every((node) => node !== this.host)) this.onBlur();\n }\n\n @Listen('keydown', { target: 'window' })\n globalKeydownHandler(e: KeyboardEvent) {\n if (!this.hasFocus \|\| e.key !== 'Tab') return;\n if (e.target !== this.inputEl) this.onBlur();\n }\n\n // Private methods\n\n private onClearClick = () => {\n this.value = '';\n };\n\n private onBlur = () => {\n this.hasFocus = false;\n if (this.validateOn === 'dirty') this.validate();\n this.nanoBlur.emit();\n };\n\n private onFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private arrToFileList(files: File[]): FileList {\n const fileList = getDataTransfer();\n for (var i = 0, len = files.length; i < len; i++)\n fileList.items.add(files[i]);\n return fileList.files;\n }\n\n private checkFileSize(size: number): boolean {\n return size / 1000000 <= this.maxFileSize;\n }\n\n private checkFileType(type: string): boolean {\n if (!this.accept) return true;\n return this.accept.match(type) && this.accept.match(type).length > 0;\n }\n\n private validate = (ev?: Event) => {\n this.errorMessage = null;\n this.inputEl.setCustomValidity('');\n let error: string;\n\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n if (!this.inputEl.validity.valid) {\n if (this.showInlineError)\n this.errorMessage = this.inputEl.validationMessage;\n } else {\n this.fileList.forEach((fileItem) => {\n error = null;\n if (!this.checkFileSize(fileItem.file.size)) {\n error =\n 'Maximum file size exceeded. Max file size is ' +\n this.maxFileSize +\n 'Mb';\n } else if (!this.checkFileType(fileItem.file.type))\n error = `File type is not allowed (${this.accept})`;\n\n if (!this.errorMessage && error) this.errorMessage = error;\n fileItem.validationMessage = error;\n fileItem.valid = !error;\n });\n if (this.fileList.length > this.maxFiles)\n this.errorMessage = `Maxinum number of files exceeded (${this.maxFiles})`;\n }\n\n if (!!this.errorMessage) {\n this._invalid = true;\n this.inputEl.setCustomValidity(this.errorMessage);\n } else {\n this._invalid = false;\n }\n\n this.nanoValidate.emit({\n isValid: !this._invalid,\n errorMessage: this.inputEl.validationMessage,\n originalEvent: ev,\n });\n };\n\n private slotChangeObserver() {\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true, subtree: true });\n }\n\n private processSlottedContent() {\n // see if we have slot content\n this.hasLabelSlot = !!this.host.querySelectorAll('[slot=\"label\"]');\n this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n }\n\n private addNewFiles(files: FileList) {\n const fileList: FileValidation[] = Array.from(files).map((file) => {\n return {\n file: file,\n location: URL.createObjectURL(file),\n valid: true,\n validationMessage: null,\n };\n });\n\n // if we have a list and we're in a browser that can amend files\n // append files to the list, otherwise replace\n if (this.canChangeFileList && this.maxFiles > 1) {\n const newFiles = fileList.filter(\n (findFile) =>\n !this.fileList.find((file) => file.file.name === findFile.file.name)\n );\n this.fileList = [...this.fileList, ...newFiles];\n } else this.fileList = fileList;\n }\n\n // event handlers & hooks\n\n private onInvalid = (ev: Event) => {\n this.validate(ev);\n if (this.showInlineError) ev.preventDefault();\n };\n\n private onFileChoose = (e: Event) => {\n const files = (e.target as HTMLInputElement).files;\n if (files && files.length)\n this.addNewFiles((e.target as HTMLInputElement).files);\n };\n\n private onFileRemoveFileClick = (e: Event, file: FileValidation) => {\n if (!this.canChangeFileList) return;\n this.removeFiles.push(file);\n\n (e.target as HTMLElement)\n .closest('.file-upload__list-item--active')\n .classList.remove('file-upload__list-item--active');\n };\n\n private onFileRemoveAnim = () => {\n if (!this.canChangeFileList \|\| !this.removeFiles.length) return;\n this.fileList = this.fileList.filter(\n (fileItem) => !this.removeFiles.find((rmFile) => rmFile === fileItem)\n );\n this.removeFiles = [];\n };\n\n private onInputChange = () => {\n this.nanoChange.emit({ value: this.value, files: this.files });\n };\n\n private onDragStop = (e: DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n this.isDragging = false;\n };\n\n private onDragStart = (e: DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n this.isDragging = true;\n };\n\n private onDrop = (e: DragEvent) => {\n this.onDragStop(e);\n if (e.dataTransfer.files && e.dataTransfer.files.length)\n this.addNewFiles(e.dataTransfer.files);\n };\n\n // Component lifecycle\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private FileUploadInput = (\n eleType: 'drop' \| 'btn',\n listId?: string\n ): VNode[] => {\n const labelId = this.fileInputId + '-lbl';\n const moreId =\n this.showInlineError \|\| this.hasHelperSlot\n ? this.fileInputId + '-more'\n : '';\n\n return [\n <div class={'file-upload__' + eleType + '-wrap'}>\n <label\n class={`file-upload__` + eleType}\n htmlFor={this.fileInputId}\n id={labelId}\n onDrop={(e) => {\n this.onDrop(e);\n this.onDragStop(e);\n }}\n onDragEnd={this.onDragStop}\n onDragLeave={this.onDragStop}\n onDragEnter={this.onDragStart}\n onDragOver={this.onDragStart}\n >\n <div\n class={`file-upload__label ${\n this.hideLabel \|\| eleType !== 'drop' ? 'visually-hide' : ''\n }`}\n >\n {this.label && this.label}\n {!this.label && this.hasLabelSlot && <slot name=\"label\" />}\n </div>\n {eleType === 'drop' && (\n <div class=\"file-upload__drop-area\">\n Drap and drop or <span>browse</span>\n </div>\n )}\n {eleType === 'btn' && (\n <div\n class={`file-upload__button button--keyline button--icon-start ${\n this.hasFocus ? 'button--focus' : ''\n }`}\n >\n <div class={`file-upload__btn-content`}>\n <nano-icon name=\"regular/cloud-upload\" />\n <span>\n {!!this.fileList.length\n ? this.fileList[0].file.name\n : this.placeholder}\n </span>\n {!!this.value && this.clearInput && !this.disabled && (\n <button\n type=\"button\"\n class=\"icon file-upload__clear-btn\"\n tabindex=\"-1\"\n onClick={this.onClearClick}\n >\n <nano-icon name=\"light/times\"></nano-icon>\n </button>\n )}\n </div>\n </div>\n )}\n <input\n aria-labelledby={labelId + ' ' + moreId + ' ' + listId}\n type=\"file\"\n id={this.fileInputId}\n accept={this.accept}\n class=\"file-upload__input\"\n multiple={this.maxFiles > 1}\n disabled={this.disabled}\n name={this.canChangeFileList ? undefined : this.name}\n ref={(input) => {\n if (this.canChangeFileList) {\n this.publicInputEl = input;\n return;\n }\n this.inputEl = input;\n }}\n onChange={this.onFileChoose}\n onFocus={this.onFocus}\n onReset={this.onInputChange}\n />\n </label>\n <input\n name={!this.canChangeFileList ? undefined : this.name}\n ref={(input) => {\n if (!this.canChangeFileList) return;\n this.inputEl = input;\n }}\n type=\"file\"\n id={this.fileInputId + '-hidden'}\n tabIndex={-1}\n multiple={true}\n class=\"file-upload__input\"\n disabled={this.disabled}\n required={this.required}\n accept={this.accept}\n onInvalid={this.onInvalid}\n onChange={this.onInputChange}\n />\n </div>,\n this.showInlineError \|\| this.hasHelperSlot ? (\n <div class=\"file-upload__more\" id={moreId}>\n {this.showInlineError ? (\n <div class=\"file-upload__error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"file-upload__help\">\n <slot name=\"helper\" />\n </div>\n </div>\n ) : (\n ''\n ),\n ];\n };\n\n private button = (): VNode[] => {\n return this.FileUploadInput('btn');\n };\n\n private dropArea = (): VNode[] => {\n const listId = this.fileInputId + '-list';\n return [\n this.FileUploadInput('drop', listId),\n <output class=\"file-upload__list-wrap\" id={listId}>\n {!!this.fileList && this.fileList.length > 0 && (\n <ul class=\"file-upload__list list\">\n {this.fileList.map((file) => {\n return (\n <li\n key={file.file.name}\n class=\"file-upload__list-item file-upload__list-item--active list-item\"\n onAnimationEnd={(_) => this.onFileRemoveAnim()}\n >\n <span class=\"list-title\">{file.file.name}</span>\n {!file.valid && (\n <nano-tooltip\n content={file.validationMessage}\n placement=\"left\"\n >\n <nano-icon-button\n class=\"list-button list-error\"\n iconName=\"light/exclamation-triangle\"\n label=\"File error\"\n />\n </nano-tooltip>\n )}\n {this.canChangeFileList && (\n <nano-icon-button\n class=\"list-button list-button--view\"\n type=\"button\"\n iconName=\"light/eye\"\n label=\"View file\"\n target=\"_blank\"\n href={file.location}\n />\n )}\n {this.canChangeFileList && (\n <nano-icon-button\n onClick={(e) => this.onFileRemoveFileClick(e, file)}\n class=\"list-button list-button--remove\"\n iconName=\"light/times\"\n label=\"Remove file\"\n />\n )}\n </li>\n );\n })}\n </ul>\n )}\n </output>,\n ];\n };\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'file-upload': true,\n 'file-upload--dragging': this.isDragging,\n 'file-upload--focus': this.hasFocus,\n 'file-upload--invalid': this._invalid,\n }}\n >\n {this.maxFiles > 1 ? <this.dropArea /> : <this.button />}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/file-upload/file-upload.scss?tag=nano-file-upload&encapsulation=scoped","src/components/file-upload/file-upload.tsx"],"names":["fileUploadCss","fileInputIds","getDataTransfer","DataTransfer","_a","ClipboardEvent","clipboardData","_b","FileUpload","exports","class_1","hostRef","_this","this","fileInputId","canChangeFileList","removeFiles","errorMessage","isDragging","fileList","maxFileSize","maxFiles","placeholder","hideLabel","required","disabled","clearInput","showInlineError","validateOn","_invalid","onClearClick","value","onBlur","hasFocus","validate","nanoBlur","emit","onFocus","nanoFocus","ev","inputEl","setCustomValidity","error","validity","valid","validationMessage","forEach","fileItem","checkFileSize","file","size","checkFileType","type","accept","length","nanoValidate","isValid","originalEvent","onInvalid","preventDefault","onFileChoose","e","files","target","addNewFiles","onFileRemoveFileClick","push","closest","classList","remove","onFileRemoveAnim","filter","find","rmFile","onInputChange","nanoChange","onDragStop","stopPropagation","onDragStart","onDrop","dataTransfer","FileUploadInput","eleType","listId","labelId","moreId","hasHelperSlot","h","class","htmlFor","id","onDragEnd","onDragLeave","onDragEnter","onDragOver","label","hasLabelSlot","name","tabindex","onClick","aria-labelledby","multiple","undefined","ref","input","publicInputEl","onChange","onReset","tabIndex","button","dropArea","map","key","onAnimationEnd","_","content","placement","iconName","href","location","prototype","fileListChange","arrToFileList","shouldValidate","setTimeout","Object","defineProperty","Array","from","objectURL","URL","createObjectURL","val","reportValidity","validateFirst","invalid","setFocus","focus","getInputElement","Promise","resolve","showError","message","globalClickHandler","composedPath","every","node","host","globalKeydownHandler","i","len","items","add","match","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","childList","subtree","querySelectorAll","querySelector","newFiles","findFile","__spreadArray","disconnectedCallback","componentDidLoad","componentWillLoad","render","Host","file-upload","file-upload--dragging","file-upload--focus","file-upload--invalid"],"mappings":";;;qKAAA,IAAMA,EAAgB,widCsBtB,IAAIC,EAAe,EAEnB,IAAIC,EAAkB,WAAM,OAAA,IAAIC,cAChC,IACED,IACA,MAAAE,GACA,IACEF,EAAkB,WAAM,OAAA,IAAIG,eAAe,IAAIC,eAC/CJ,IACA,MAAAK,GACAL,EAAkB,UAsBTM,EAAUC,EAAA,mBAAA,WALvB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,yKASUA,KAAAC,YAAc,oBAAoBb,IAClCY,KAAAE,oBAAsBb,EACtBW,KAAAG,YAAgC,GAI/BH,KAAAI,aAAuB,KACvBJ,KAAAK,WAAa,MACbL,KAAAM,SAA6B,GA8B9BN,KAAAO,YAAsB,EAGtBP,KAAAQ,SAAmB,EAMnBR,KAAAS,YAAsB,mBAGtBT,KAAAU,UAAsB,MAGtBV,KAAAW,SAAW,MAGMX,KAAAY,SAAW,MAI5BZ,KAAAa,WAAa,MAGIb,KAAAc,gBAAkB,KAGlBd,KAAAe,WACvB,SAiBOf,KAAAgB,SAAW,MAwGZhB,KAAAiB,aAAe,WACrBlB,EAAKmB,MAAQ,IAGPlB,KAAAmB,OAAS,WACfpB,EAAKqB,SAAW,MAChB,GAAIrB,EAAKgB,aAAe,QAAShB,EAAKsB,WACtCtB,EAAKuB,SAASC,QAGRvB,KAAAwB,QAAU,WAChBzB,EAAKqB,SAAW,KAChBrB,EAAK0B,UAAUF,QAmBTvB,KAAAqB,SAAW,SAACK,GAClB3B,EAAKK,aAAe,KACpBL,EAAK4B,QAAQC,kBAAkB,IAC/B,IAAIC,EAEJ,GAAI9B,EAAKgB,aAAe,kBAAmBhB,EAAKgB,WAAa,QAE7D,IAAKhB,EAAK4B,QAAQG,SAASC,MAAO,CAChC,GAAIhC,EAAKe,gBACPf,EAAKK,aAAeL,EAAK4B,QAAQK,sBAC9B,CACLjC,EAAKO,SAAS2B,SAAQ,SAACC,GACrBL,EAAQ,KACR,IAAK9B,EAAKoC,cAAcD,EAASE,KAAKC,MAAO,CAC3CR,EACE,gDACA9B,EAAKQ,YACL,UACG,IAAKR,EAAKuC,cAAcJ,EAASE,KAAKG,MAC3CV,EAAQ,6BAA6B9B,EAAKyC,OAAM,IAElD,IAAKzC,EAAKK,cAAgByB,EAAO9B,EAAKK,aAAeyB,EACrDK,EAASF,kBAAoBH,EAC7BK,EAASH,OAASF,KAEpB,GAAI9B,EAAKO,SAASmC,OAAS1C,EAAKS,SAC9BT,EAAKK,aAAe,qCAAqCL,EAAKS,SAAQ,IAG1E,KAAMT,EAAKK,aAAc,CACvBL,EAAKiB,SAAW,KAChBjB,EAAK4B,QAAQC,kBAAkB7B,EAAKK,kBAC/B,CACLL,EAAKiB,SAAW,MAGlBjB,EAAK2C,aAAanB,KAAK,CACrBoB,SAAU5C,EAAKiB,SACfZ,aAAcL,EAAK4B,QAAQK,kBAC3BY,cAAelB,KAyCX1B,KAAA6C,UAAY,SAACnB,GACnB3B,EAAKsB,SAASK,GACd,GAAI3B,EAAKe,gBAAiBY,EAAGoB,kBAGvB9C,KAAA+C,aAAe,SAACC,GACtB,IAAMC,EAASD,EAAEE,OAA4BD,MAC7C,GAAIA,GAASA,EAAMR,OACjB1C,EAAKoD,YAAaH,EAAEE,OAA4BD,QAG5CjD,KAAAoD,sBAAwB,SAACJ,EAAUZ,GACzC,IAAKrC,EAAKG,kBAAmB,OAC7BH,EAAKI,YAAYkD,KAAKjB,GAErBY,EAAEE,OACAI,QAAQ,mCACRC,UAAUC,OAAO,mCAGdxD,KAAAyD,iBAAmB,WACzB,IAAK1D,EAAKG,oBAAsBH,EAAKI,YAAYsC,OAAQ,OACzD1C,EAAKO,SAAWP,EAAKO,SAASoD,QAC5B,SAACxB,GAAa,OAACnC,EAAKI,YAAYwD,MAAK,SAACC,GAAW,OAAAA,IAAW1B,QAE9DnC,EAAKI,YAAc,IAGbH,KAAA6D,cAAgB,WACtB9D,EAAK+D,WAAWvC,KAAK,CAAEL,MAAOnB,EAAKmB,MAAO+B,MAAOlD,EAAKkD,SAGhDjD,KAAA+D,WAAa,SAACf,GACpBA,EAAEF,iBACFE,EAAEgB,kBACFjE,EAAKM,WAAa,OAGZL,KAAAiE,YAAc,SAACjB,GACrBA,EAAEF,iBACFE,EAAEgB,kBACFjE,EAAKM,WAAa,MAGZL,KAAAkE,OAAS,SAAClB,GAChBjD,EAAKgE,WAAWf,GAChB,GAAIA,EAAEmB,aAAalB,OAASD,EAAEmB,aAAalB,MAAMR,OAC/C1C,EAAKoD,YAAYH,EAAEmB,aAAalB,QAiB5BjD,KAAAoE,gBAAkB,SACxBC,EACAC,GAEA,IAAMC,EAAUxE,EAAKE,YAAc,OACnC,IAAMuE,EACJzE,EAAKe,iBAAmBf,EAAK0E,cACzB1E,EAAKE,YAAc,QACnB,GAEN,MAAO,CACLyE,EAAA,MAAA,CAAKC,MAAO,gBAAkBN,EAAU,SACtCK,EAAA,QAAA,CACEC,MAAO,gBAAkBN,EACzBO,QAAS7E,EAAKE,YACd4E,GAAIN,EACJL,OAAQ,SAAClB,GACPjD,EAAKmE,OAAOlB,GACZjD,EAAKgE,WAAWf,IAElB8B,UAAW/E,EAAKgE,WAChBgB,YAAahF,EAAKgE,WAClBiB,YAAajF,EAAKkE,YAClBgB,WAAYlF,EAAKkE,aAEjBS,EAAA,MAAA,CACEC,MAAO,uBACL5E,EAAKW,WAAa2D,IAAY,OAAS,gBAAkB,KAG1DtE,EAAKmF,OAASnF,EAAKmF,OAClBnF,EAAKmF,OAASnF,EAAKoF,cAAgBT,EAAA,OAAA,CAAMU,KAAK,WAEjDf,IAAY,QACXK,EAAA,MAAA,CAAKC,MAAM,0BAAwB,oBACXD,EAAA,OAAA,KAAA,WAGzBL,IAAY,OACXK,EAAA,MAAA,CACEC,MAAO,2DACL5E,EAAKqB,SAAW,gBAAkB,KAGpCsD,EAAA,MAAA,CAAKC,MAAO,4BACVD,EAAA,YAAA,CAAWU,KAAK,yBAChBV,EAAA,OAAA,OACK3E,EAAKO,SAASmC,OACb1C,EAAKO,SAAS,GAAG8B,KAAKgD,KACtBrF,EAAKU,eAERV,EAAKmB,OAASnB,EAAKc,aAAed,EAAKa,UACxC8D,EAAA,SAAA,CACEnC,KAAK,SACLoC,MAAM,8BACNU,SAAS,KACTC,QAASvF,EAAKkB,cAEdyD,EAAA,YAAA,CAAWU,KAAK,mBAM1BV,EAAA,QAAA,CAAAa,kBACmBhB,EAAU,IAAMC,EAAS,IAAMF,EAChD/B,KAAK,OACLsC,GAAI9E,EAAKE,YACTuC,OAAQzC,EAAKyC,OACbmC,MAAM,qBACNa,SAAUzF,EAAKS,SAAW,EAC1BI,SAAUb,EAAKa,SACfwE,KAAMrF,EAAKG,kBAAoBuF,UAAY1F,EAAKqF,KAChDM,IAAK,SAACC,GACJ,GAAI5F,EAAKG,kBAAmB,CAC1BH,EAAK6F,cAAgBD,EACrB,OAEF5F,EAAK4B,QAAUgE,GAEjBE,SAAU9F,EAAKgD,aACfvB,QAASzB,EAAKyB,QACdsE,QAAS/F,EAAK8D,iBAGlBa,EAAA,QAAA,CACEU,MAAOrF,EAAKG,kBAAoBuF,UAAY1F,EAAKqF,KACjDM,IAAK,SAACC,GACJ,IAAK5F,EAAKG,kBAAmB,OAC7BH,EAAK4B,QAAUgE,GAEjBpD,KAAK,OACLsC,GAAI9E,EAAKE,YAAc,UACvB8F,UAAW,EACXP,SAAU,KACVb,MAAM,qBACN/D,SAAUb,EAAKa,SACfD,SAAUZ,EAAKY,SACf6B,OAAQzC,EAAKyC,OACbK,UAAW9C,EAAK8C,UAChBgD,SAAU9F,EAAK8D,iBAGnB9D,EAAKe,iBAAmBf,EAAK0E,cAC3BC,EAAA,MAAA,CAAKC,MAAM,oBAAoBE,GAAIL,GAChCzE,EAAKe,gBACJ4D,EAAA,MAAA,CAAKC,MAAM,sBAAsB5E,EAAKK,cAAmB,GAI3DsE,EAAA,MAAA,CAAKC,MAAM,qBACTD,EAAA,OAAA,CAAMU,KAAK,aAET,KAOJpF,KAAAgG,OAAS,WACf,OAAOjG,EAAKqE,gBAAgB,QAGtBpE,KAAAiG,SAAW,WACjB,IAAM3B,EAASvE,EAAKE,YAAc,QAClC,MAAO,CACLF,EAAKqE,gBAAgB,OAAQE,GAC7BI,EAAA,SAAA,CAAQC,MAAM,yBAAyBE,GAAIP,KACtCvE,EAAKO,UAAYP,EAAKO,SAASmC,OAAS,GACzCiC,EAAA,KAAA,CAAIC,MAAM,0BACP5E,EAAKO,SAAS4F,KAAI,SAAC9D,GAClB,OACEsC,EAAA,KAAA,CACEyB,IAAK/D,EAAKA,KAAKgD,KACfT,MAAM,kEACNyB,eAAgB,SAACC,GAAM,OAAAtG,EAAK0D,qBAE5BiB,EAAA,OAAA,CAAMC,MAAM,cAAcvC,EAAKA,KAAKgD,OAClChD,EAAKL,OACL2C,EAAA,eAAA,CACE4B,QAASlE,EAAKJ,kBACduE,UAAU,QAEV7B,EAAA,mBAAA,CACEC,MAAM,yBACN6B,SAAS,6BACTtB,MAAM,gBAIXnF,EAAKG,mBACJwE,EAAA,mBAAA,CACEC,MAAM,gCACNpC,KAAK,SACLiE,SAAS,YACTtB,MAAM,YACNhC,OAAO,SACPuD,KAAMrE,EAAKsE,WAGd3G,EAAKG,mBACJwE,EAAA,mBAAA,CACEY,QAAS,SAACtC,GAAM,OAAAjD,EAAKqD,sBAAsBJ,EAAGZ,IAC9CuC,MAAM,kCACN6B,SAAS,cACTtB,MAAM,wBAvgB1BrF,EAAA8G,UAAAC,eAAA,WACE,GAAI5G,KAAKE,kBAAmB,CAC1BF,KAAK4F,cAAc1E,MAAQ,GAC3BlB,KAAK2B,QAAQsB,MAAQjD,KAAK6G,cACxB7G,KAAKM,SAAS4F,KAAI,SAAC9D,GAAS,OAAAA,EAAKA,SAEnCpC,KAAK8D,WAAWvC,KAAK,CAAEL,MAAOlB,KAAKkB,MAAO+B,MAAOjD,KAAKiD,UA6DhDpD,EAAA8G,UAAAG,eAAA,WAAA,IAAA/G,EAAAC,KACR,IAAKA,KAAK2B,QAAS,OACnBoF,YAAW,WACT,GAAIhH,EAAKgB,aAAe,QAAShB,EAAKsB,aACrC,KAML2F,OAAAC,eACIpH,EAAA8G,UAAA,UAAO,KADX,WAEE,OAAO3G,KAAKgB,+CAOdgG,OAAAC,eACIpH,EAAA8G,UAAA,QAAK,KADT,WAEE,OAAO3G,KAAK2B,QACRuF,MAAMC,KAAKnH,KAAK2B,QAAQsB,OAAOiD,KAAI,SAAC9D,GAClCA,EAAKgF,UAAYC,IAAIC,gBAAgBlF,GACrC,OAAOA,KAET,yCAMN4E,OAAAC,eACIpH,EAAA8G,UAAA,QAAK,KADT,WAEE,OAAO3G,KAAK2B,QAAU3B,KAAK2B,QAAQT,MAAQ,QAE7C,SAAUqG,GACR,GAAIA,IAAQ,IAAMvH,KAAK2B,QAAS,CAC9B3B,KAAKM,SAAW,GAChBN,KAAK2B,QAAQT,MAAQ,0CAyBnBrB,EAAA8G,UAAAa,eAAN,SAAqBC,wFACnB,GAAIA,EAAezH,KAAKqB,WACxB,MAAA,CAAA,EAAO,CACLsB,SAAU3C,KAAK0H,QACftH,aAAcJ,KAAK2B,QAAQK,2BAOzBnC,EAAA8G,UAAAgB,SAAN,gGACE,GAAI3H,KAAK2B,QAAS3B,KAAK2B,QAAQiG,yBAKjC/H,EAAA8G,UAAAkB,gBAAA,WACE,OAAOC,QAAQC,QAAQ/H,KAAK2B,UAMxB9B,EAAA8G,UAAAqB,UAAN,SAAgBC,wFACd,GAAIjI,KAAK2B,QAAS,CAChB3B,KAAK2B,QAAQC,kBAAkBqG,GAC/BjI,KAAKqB,4BAOTxB,EAAA8G,UAAAuB,mBAAA,SAAmBlF,GAAnB,IAAAjD,EAAAC,KACE,IAAKA,KAAKoB,SAAU,OACpB,GAAI4B,EAAEmF,eAAeC,OAAM,SAACC,GAAS,OAAAA,IAAStI,EAAKuI,QAAOtI,KAAKmB,UAIjEtB,EAAA8G,UAAA4B,qBAAA,SAAqBvF,GACnB,IAAKhD,KAAKoB,UAAY4B,EAAEmD,MAAQ,MAAO,OACvC,GAAInD,EAAEE,SAAWlD,KAAK2B,QAAS3B,KAAKmB,UAoB9BtB,EAAA8G,UAAAE,cAAA,SAAc5D,GACpB,IAAM3C,EAAWjB,IACjB,IAAK,IAAImJ,EAAI,EAAGC,EAAMxF,EAAMR,OAAQ+F,EAAIC,EAAKD,IAC3ClI,EAASoI,MAAMC,IAAI1F,EAAMuF,IAC3B,OAAOlI,EAAS2C,OAGVpD,EAAA8G,UAAAxE,cAAA,SAAcE,GACpB,OAAOA,EAAO,KAAWrC,KAAKO,aAGxBV,EAAA8G,UAAArE,cAAA,SAAcC,GACpB,IAAKvC,KAAKwC,OAAQ,OAAO,KACzB,OAAOxC,KAAKwC,OAAOoG,MAAMrG,IAASvC,KAAKwC,OAAOoG,MAAMrG,GAAME,OAAS,GA8C7D5C,EAAA8G,UAAAkC,mBAAA,WAAA,IAAA9I,EAAAC,KACN,GAAIA,KAAK8I,GAAI9I,KAAK8I,GAAGC,aACrB,IAAMD,EAAM9I,KAAK8I,GAAK,IAAIE,kBAAiB,WACzC,OAAAjJ,EAAKkJ,2BAEPH,EAAGI,QAAQlJ,KAAKsI,KAAM,CAAEa,UAAW,KAAMC,QAAS,QAG5CvJ,EAAA8G,UAAAsC,sBAAA,WAENjJ,KAAKmF,eAAiBnF,KAAKsI,KAAKe,iBAAiB,kBACjDrJ,KAAKyE,gBAAkBzE,KAAKsI,KAAKgB,cAAc,oBAGzCzJ,EAAA8G,UAAAxD,YAAA,SAAYF,GAAZ,IAAAlD,EAAAC,KACN,IAAMM,EAA6B4G,MAAMC,KAAKlE,GAAOiD,KAAI,SAAC9D,GACxD,MAAO,CACLA,KAAMA,EACNsE,SAAUW,IAAIC,gBAAgBlF,GAC9BL,MAAO,KACPC,kBAAmB,SAMvB,GAAIhC,KAAKE,mBAAqBF,KAAKQ,SAAW,EAAG,CAC/C,IAAM+I,EAAWjJ,EAASoD,QACxB,SAAC8F,GACC,OAACzJ,EAAKO,SAASqD,MAAK,SAACvB,GAAS,OAAAA,EAAKA,KAAKgD,OAASoE,EAASpH,KAAKgD,WAEnEpF,KAAKM,SAAQmJ,cAAAA,cAAA,GAAOzJ,KAAKM,UAAaiJ,QACjCvJ,KAAKM,SAAWA,GAyDzBT,EAAA8G,UAAA+C,qBAAA,WACE,GAAI1J,KAAK8I,GAAI9I,KAAK8I,GAAGC,cAGvBlJ,EAAA8G,UAAAgD,iBAAA,WACE3J,KAAK6I,sBAGPhJ,EAAA8G,UAAAiD,kBAAA,WACE5J,KAAKiJ,yBAqLPpJ,EAAA8G,UAAAkD,OAAA,WACE,OACEnF,EAACoF,EAAI,KACHpF,EAAA,MAAA,CACEC,MAAO,CACLoF,cAAe,KACfC,wBAAyBhK,KAAKK,WAC9B4J,qBAAsBjK,KAAKoB,SAC3B8I,uBAAwBlK,KAAKgB,WAG9BhB,KAAKQ,SAAW,EAAIkE,EAAC1E,KAAKiG,SAAQ,MAAMvB,EAAC1E,KAAKgG,OAAM,odA5iBxC","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@import '../../global/style/nano-theme/button';\n\n:host {\n /*\n @prop --invalid-msg-color: Default value #{nano-color(danger, base)};\n * @prop --invalid-msg-font-size: Default value #{$input-help-font-size};\n\n * @prop --help-msg-color: Default value #{$input-help-color};\n\n * @prop --label-color: Default value #{$label-color};\n * @prop --label-color--invalid: Default value #{$label-color-invalid};\n * @prop --label-font-size: Default value #{$label-font-size};\n * @prop --label-padding: Default value #{$input-padding-bottom};\n * @prop --label-color--invalid: Default value #{$label-color-invalid};\n\n * @prop --drop-bg: Default value #{map.get($colors, blue--faded)};\n * @prop --drop-text: Default value #{map.get($colors, dimgrey)};\n * @prop --drop-height: Default value 3.5em;\n * @prop --drop-border-tint: Default value #{nano-color(primary, base, null, true)};\n * @prop --drop-border-width: Default value 2px;\n * @prop --drop-border-radius: Default value 5px;\n * @prop --drop-bg--invalid: Default value #{$input-background-color--invalid};\n * @prop --drop-border--invalid: Default value #{nano-color(danger, base, null, true)};\n\n * @prop --btn-bg: Default value #{nano-color(primary, base)};\n * @prop --btn-text: Default value #{nano-color(primary, contrast)};\n * @prop --btn-icon-size: Default value var(--nano-btn-icon-size, 1.4em);\n * @prop --btn-padding-top: Default value var(--nano-btn-padding-top, .5em);\n * @prop --btn-padding-bottom: Default value var(--nano-btn-padding-bottom, .5em);\n * @prop --btn-padding-start: Default value var(--nano-btn-padding-start, 1em);\n * @prop --btn-padding-end: Default value var(--nano-btn-padding-end, 1em);\n /\n\n min-height: 1rem;\n display: block;\n\n --invalid-msg-color: #{nano-color(danger, base)};\n --invalid-msg-font-size: #{$input-help-font-size};\n --help-msg-color: #{$input-help-color};\n --label-color: #{$label-color};\n --label-font-size: #{$label-font-size};\n --label-padding: #{$input-padding-bottom};\n --label-color--invalid: #{$label-color-invalid};\n --drop-bg: #{map.get($colors, blue--faded)};\n --drop-text: #{darken(map.get($colors, dimgrey), 11%)};\n --drop-height: 3.5em;\n --drop-border-tint: #{nano-color(primary, base, null, true)};\n --drop-border-width: 2px;\n --drop-border-radius: 5px;\n --drop-bg--invalid: #{$input-background-color--invalid};\n --drop-border--invalid: #{nano-color(danger, base, null, true)};\n --btn-bg: #{nano-color(primary, base)};\n --btn-text: #{nano-color(primary, contrast)};\n --btn-icon-size: var(--nano-btn-icon-size, 1.4em);\n --btn-padding-top: var(--nano-btn-padding-top, 0.5em);\n --btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5em);\n --btn-padding-start: var(--nano-btn-padding-start, 1em);\n --btn-padding-end: var(--nano-btn-padding-end, 1em);\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n\n {\n pointer-events: none !important;\n }\n}\n\n.file-upload {\n $self: &;\n\n /* Common /\n\n &__label {\n font-size: var(--label-font-size);\n padding: 0 0 var(--label-padding);\n margin: 0;\n line-height: 1;\n\n :host([invalid]:not([invalid='false'])) & {\n color: var(--label-color--invalid);\n }\n }\n\n &__input {\n display: none;\n }\n\n &__error,\n &__help,\n &__more,\n &__label {\n display: block;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__more {\n height: 1em;\n\n @include margin(\n calc(var(--label-padding) / 2),\n 0,\n var(--label-padding),\n 3px\n );\n\n position: relative;\n }\n\n &__error,\n &__help {\n top: 0;\n left: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n\n .file-upload--invalid & {\n opacity: 1;\n }\n }\n\n &__error {\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n opacity: 0;\n\n .file-upload--invalid & {\n opacity: 1;\n }\n }\n\n &__help {\n font-style: italic;\n opacity: 1;\n color: var(--help-msg-color);\n\n .file-upload--invalid & {\n opacity: 0;\n }\n }\n\n / Drop area / Multi file upload /\n\n &__drop {\n position: relative;\n width: 100%;\n display: inline-block;\n }\n\n &__drop-area {\n background-color: var(--drop-bg);\n color: var(--drop-text);\n min-height: var(--drop-height);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.9em;\n position: relative;\n transition: background-color 0.15s ease-in-out;\n padding: 0.5rem;\n\n :host([disabled]:not([disabled='false'])) & {\n opacity: 0.7;\n }\n\n .file-upload--invalid & {\n background-color: var(--drop-bg--invalid);\n }\n\n .file-upload--dragging & {\n background-color: #{map.get($colors, white)};\n }\n\n &::after {\n content: '';\n position: absolute;\n border-radius: var(--drop-border-radius);\n border-width: var(--drop-border-width);\n border-color: rgba(var(--drop-border-tint), 0.5);\n border-style: dashed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n transition:\n top 0.1s ease-in-out,\n bottom 0.1s ease-in-out,\n left 0.1s ease-in-out,\n right 0.1s ease-in-out;\n\n .file-upload--invalid & {\n border-color: rgba(var(--drop-border--invalid), 1);\n }\n\n .file-upload--dragging & {\n top: 5px;\n bottom: 5px;\n left: 5px;\n right: 5px;\n }\n }\n\n span {\n color: rgba(var(--drop-border-tint), 1);\n text-decoration: underline;\n border-radius: 2px;\n z-index: 1;\n cursor: pointer;\n position: relative;\n\n .file-upload--focus & {\n box-shadow: #{$control-focus-style};\n }\n }\n }\n\n &__list {\n list-style: none;\n margin: 0;\n padding: 0;\n\n &-wrap {\n position: relative;\n top: -4px;\n }\n\n &-item {\n width: 100%;\n margin: 0 0 2px;\n display: flex;\n align-items: center;\n transform: translateZ(0);\n animation: hideListItem 0.3s ease-in-out forwards;\n\n @keyframes hideListItem {\n 0% {\n opacity: 1;\n transform: translateY(0);\n transform: translateZ(0);\n }\n\n 100% {\n opacity: 0;\n transform: translateY(10px);\n transform: translateZ(0);\n }\n }\n\n &--active {\n animation: showListItem 0.3s ease-in-out forwards;\n\n @keyframes showListItem {\n 0% {\n opacity: 0;\n transform: translateY(10px);\n transform: translateZ(0);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n transform: translateZ(0);\n }\n }\n }\n }\n\n .list-title {\n background: white;\n border-radius: 5px;\n padding: 5px 5px;\n margin-right: 2px;\n display: block;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-size: 0.9em;\n color: var(--help-msg-color);\n }\n\n .list-button {\n background: white;\n border-radius: 5px;\n margin: 2px;\n }\n\n .list-error {\n --color: rgba(var(--drop-border--invalid), 1);\n }\n }\n\n / Button display / Single file upload /\n\n &__button {\n @include button-base;\n @include button-standard(\n var(--btn-bg),\n var(--btn-text),\n #{nano-color(primary, shade)}\n );\n\n --nano-btn-icon-size: var(--btn-icon-size);\n --nano-btn-line-height: var(--btn-icon-size);\n --nano-btn-padding-top: var(--btn-padding-top);\n --nano-btn-padding-bottom: var(--btn-padding-bottom);\n --nano-btn-padding-start: var(--btn-padding-start);\n --nano-btn-padding-end: var(--btn-padding-end);\n\n max-width: 100%;\n font-size: 0.9em;\n\n :host([disabled]:not([disabled='false'])) & {\n opacity: 0.4;\n }\n\n .file-upload--dragging & {\n --nano-btn-border-style: dashed;\n }\n #{$self}__clear-btn {\n @include margin(0);\n\n font-size: inherit;\n padding: 0;\n border: 0;\n outline: none;\n background-color: transparent;\n display: flex;\n align-items: stretch;\n width: auto;\n color: var(--clear-btn-color);\n\n :host(.is-invalid) & {\n color: var(--clear-btn-color--invalid);\n }\n\n nano-icon {\n @include margin(0, 0, 0, 0.4rem);\n }\n }\n #{$self}__btn-content {\n display: flex;\n align-items: center;\n\n span {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n Host,\n Element,\n ComponentInterface,\n State,\n Event,\n EventEmitter,\n Watch,\n VNode,\n Method,\n Listen,\n} from '@stencil/core';\nimport {\n ControlValidity,\n ControlValidityEventDetail,\n FileInputChangeEventDetail,\n FileWithUrl,\n} from '../../interface';\n\nlet fileInputIds = 0;\n\nlet getDataTransfer = () => new DataTransfer();\ntry {\n getDataTransfer();\n} catch {\n try {\n getDataTransfer = () => new ClipboardEvent('').clipboardData;\n getDataTransfer();\n } catch {\n getDataTransfer = null;\n }\n}\n\ninterface FileValidation {\n file: File;\n valid: boolean;\n validationMessage?: string;\n location?: string;\n}\n/\n A better UI experience for `input type=\"file\"` form controls.\n \n - Drag and Drop\n * - Validation options\n * - Preview and manage multiple files\n /\n@Component({\n tag: 'nano-file-upload',\n styleUrl: 'file-upload.scss',\n scoped: true,\n})\nexport class FileUpload implements ComponentInterface {\n private inputEl: HTMLInputElement;\n private publicInputEl: HTMLInputElement;\n private mo!: MutationObserver;\n private fileInputId = `nano-file-upload-${fileInputIds++}`;\n private canChangeFileList = !!getDataTransfer;\n private removeFiles: FileValidation[] = [];\n\n @State() hasHelperSlot: boolean;\n @State() hasLabelSlot: boolean;\n @State() errorMessage: string = null;\n @State() isDragging = false;\n @State() fileList: FileValidation[] = [];\n @Watch('fileList')\n fileListChange() {\n if (this.canChangeFileList) {\n this.publicInputEl.value = '';\n this.inputEl.files = this.arrToFileList(\n this.fileList.map((file) => file.file)\n );\n this.nanoChange.emit({ value: this.value, files: this.files });\n }\n }\n @State() hasFocus: boolean;\n\n @Element() host: HTMLNanoFileUploadElement;\n\n // public props\n\n /* Name of the form control. Submitted with the form as part of a name/value pair. /\n @Prop() name!: string;\n\n /* The accept attribute value is a string that defines the file types the file input should accept.\n * E.g. for a MS Word file: `.doc, .docx,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document` /\n @Prop() accept?: string;\n\n /* Specifies which camera to use for capture of image or video data. `user` for the user-facing camera and/or microphone.\n * `environment` specifies the the outward-facing camera and/or microphone. If the requested facing mode isn't available,\n * the user agent may fall back to its preferred default mode. /\n @Prop() capture?: 'user' \| 'environment';\n\n /* The maximum file size allowed per file (Megabytes) /\n @Prop() maxFileSize: number = 1;\n\n /* The maximum file size allowed per file (bytes). /\n @Prop() maxFiles: number = 1;\n\n /* String to place within a label element. /\n @Prop() label!: string;\n\n /* Placeholder only used within single file uploads. /\n @Prop() placeholder: string = 'Choose a file...';\n\n /* Visually hide the label - but make it accessible. /\n @Prop() hideLabel?: boolean = false;\n\n /* If `true`, the user must select a file to upload before submitting a form. /\n @Prop() required = false;\n\n /* If `true`, the user cannot interact with the select. /\n @Prop({ reflect: true }) disabled = false;\n\n /* If `true`, a clear icon will appear in the input when there is a value.\n * Clicking it clears the input. Only used within single file uploads. /\n @Prop() clearInput = false;\n\n /* Whether to show validation errors underneath input /\n @Prop({ reflect: true }) showInlineError = true;\n\n /* When should the field perform validation /\n @Prop({ mutable: true }) validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' =\n 'submit';\n\n @Watch('maxFiles')\n @Watch('maxFileSize')\n @Watch('capture')\n @Watch('accept')\n @Watch('required')\n @Watch('disabled')\n @Watch('validateOn')\n @Watch('fileList')\n protected shouldValidate() {\n if (!this.inputEl) return;\n setTimeout(() => {\n if (this.validateOn === 'dirty') this.validate();\n }, 20);\n }\n\n @State() _invalid = false;\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 @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n\n /* A File array that lists every selected file.\n * Has an added `objectURL` property returning a `DOMString`\n * containing an object URL that can be used to reference the contents of the specified source\n * This list has no more than one member unless the multiple attribute is specified. @readonly /\n @Prop()\n get files(): FileWithUrl[] {\n return this.inputEl\n ? Array.from(this.inputEl.files).map((file: FileWithUrl) => {\n file.objectURL = URL.createObjectURL(file);\n return file;\n })\n : [];\n }\n\n /* A file input's value attribute contains a DOMString that represents the path to the selected file(s).\n * If the user selected multiple files, the value represents the first file in the list of files they selected.\n * You can reset the file-upload control by setting the value to an emptry string e.g. `var input.value = ''` /\n @Prop()\n get value() {\n return this.inputEl ? this.inputEl.value : '';\n }\n set value(val: string) {\n if (val === '' && this.inputEl) {\n this.fileList = [];\n this.inputEl.value = '';\n }\n }\n\n // Events\n\n /* Emitted when the value has changed. /\n @Event() nanoChange!: EventEmitter<FileInputChangeEventDetail>;\n\n /* Emited when the checkbox is focused /\n @Event() nanoFocus: EventEmitter;\n\n /* Emited when the checkbox is blurred /\n @Event() nanoBlur: EventEmitter;\n\n /* Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`. /\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // Public methods\n\n /* Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }` /\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n if (validateFirst) this.validate();\n return {\n isValid: !this.invalid,\n errorMessage: this.inputEl.validationMessage,\n };\n }\n\n /* Sets focus on the specified `nano-input`. Use this method instead of the global\n * `input.focus()`. /\n @Method()\n async setFocus() {\n if (this.inputEl) this.inputEl.focus();\n }\n\n /* Returns the native `<input>` element used under the hood /\n @Method()\n getInputElement(): Promise<HTMLInputElement \| HTMLTextAreaElement> {\n return Promise.resolve(this.inputEl!);\n }\n\n /* Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n * @param message */\n @Method()\n async showError(message: string) {\n if (this.inputEl) {\n this.inputEl.setCustomValidity(message);\n this.validate();\n }\n }\n\n // Listeners\n\n @Listen('click', { target: 'window' })\n globalClickHandler(e: Event) {\n if (!this.hasFocus) return;\n if (e.composedPath().every((node) => node !== this.host)) this.onBlur();\n }\n\n @Listen('keydown', { target: 'window' })\n globalKeydownHandler(e: KeyboardEvent) {\n if (!this.hasFocus \|\| e.key !== 'Tab') return;\n if (e.target !== this.inputEl) this.onBlur();\n }\n\n // Private methods\n\n private onClearClick = () => {\n this.value = '';\n };\n\n private onBlur = () => {\n this.hasFocus = false;\n if (this.validateOn === 'dirty') this.validate();\n this.nanoBlur.emit();\n };\n\n private onFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private arrToFileList(files: File[]): FileList {\n const fileList = getDataTransfer();\n for (var i = 0, len = files.length; i < len; i++)\n fileList.items.add(files[i]);\n return fileList.files;\n }\n\n private checkFileSize(size: number): boolean {\n return size / 1000000 <= this.maxFileSize;\n }\n\n private checkFileType(type: string): boolean {\n if (!this.accept) return true;\n return this.accept.match(type) && this.accept.match(type).length > 0;\n }\n\n private validate = (ev?: Event) => {\n this.errorMessage = null;\n this.inputEl.setCustomValidity('');\n let error: string;\n\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n if (!this.inputEl.validity.valid) {\n if (this.showInlineError)\n this.errorMessage = this.inputEl.validationMessage;\n } else {\n this.fileList.forEach((fileItem) => {\n error = null;\n if (!this.checkFileSize(fileItem.file.size)) {\n error =\n 'Maximum file size exceeded. Max file size is ' +\n this.maxFileSize +\n 'Mb';\n } else if (!this.checkFileType(fileItem.file.type))\n error = `File type is not allowed (${this.accept})`;\n\n if (!this.errorMessage && error) this.errorMessage = error;\n fileItem.validationMessage = error;\n fileItem.valid = !error;\n });\n if (this.fileList.length > this.maxFiles)\n this.errorMessage = `Maxinum number of files exceeded (${this.maxFiles})`;\n }\n\n if (!!this.errorMessage) {\n this._invalid = true;\n this.inputEl.setCustomValidity(this.errorMessage);\n } else {\n this._invalid = false;\n }\n\n this.nanoValidate.emit({\n isValid: !this._invalid,\n errorMessage: this.inputEl.validationMessage,\n originalEvent: ev,\n });\n };\n\n private slotChangeObserver() {\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true, subtree: true });\n }\n\n private processSlottedContent() {\n // see if we have slot content\n this.hasLabelSlot = !!this.host.querySelectorAll('[slot=\"label\"]');\n this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n }\n\n private addNewFiles(files: FileList) {\n const fileList: FileValidation[] = Array.from(files).map((file) => {\n return {\n file: file,\n location: URL.createObjectURL(file),\n valid: true,\n validationMessage: null,\n };\n });\n\n // if we have a list and we're in a browser that can amend files\n // append files to the list, otherwise replace\n if (this.canChangeFileList && this.maxFiles > 1) {\n const newFiles = fileList.filter(\n (findFile) =>\n !this.fileList.find((file) => file.file.name === findFile.file.name)\n );\n this.fileList = [...this.fileList, ...newFiles];\n } else this.fileList = fileList;\n }\n\n // event handlers & hooks\n\n private onInvalid = (ev: Event) => {\n this.validate(ev);\n if (this.showInlineError) ev.preventDefault();\n };\n\n private onFileChoose = (e: Event) => {\n const files = (e.target as HTMLInputElement).files;\n if (files && files.length)\n this.addNewFiles((e.target as HTMLInputElement).files);\n };\n\n private onFileRemoveFileClick = (e: Event, file: FileValidation) => {\n if (!this.canChangeFileList) return;\n this.removeFiles.push(file);\n\n (e.target as HTMLElement)\n .closest('.file-upload__list-item--active')\n .classList.remove('file-upload__list-item--active');\n };\n\n private onFileRemoveAnim = () => {\n if (!this.canChangeFileList \|\| !this.removeFiles.length) return;\n this.fileList = this.fileList.filter(\n (fileItem) => !this.removeFiles.find((rmFile) => rmFile === fileItem)\n );\n this.removeFiles = [];\n };\n\n private onInputChange = () => {\n this.nanoChange.emit({ value: this.value, files: this.files });\n };\n\n private onDragStop = (e: DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n this.isDragging = false;\n };\n\n private onDragStart = (e: DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n this.isDragging = true;\n };\n\n private onDrop = (e: DragEvent) => {\n this.onDragStop(e);\n if (e.dataTransfer.files && e.dataTransfer.files.length)\n this.addNewFiles(e.dataTransfer.files);\n };\n\n // Component lifecycle\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private FileUploadInput = (\n eleType: 'drop' \| 'btn',\n listId?: string\n ): VNode[] => {\n const labelId = this.fileInputId + '-lbl';\n const moreId =\n this.showInlineError \|\| this.hasHelperSlot\n ? this.fileInputId + '-more'\n : '';\n\n return [\n <div class={'file-upload__' + eleType + '-wrap'}>\n <label\n class={`file-upload__` + eleType}\n htmlFor={this.fileInputId}\n id={labelId}\n onDrop={(e) => {\n this.onDrop(e);\n this.onDragStop(e);\n }}\n onDragEnd={this.onDragStop}\n onDragLeave={this.onDragStop}\n onDragEnter={this.onDragStart}\n onDragOver={this.onDragStart}\n >\n <div\n class={`file-upload__label ${\n this.hideLabel \|\| eleType !== 'drop' ? 'visually-hide' : ''\n }`}\n >\n {this.label && this.label}\n {!this.label && this.hasLabelSlot && <slot name=\"label\" />}\n </div>\n {eleType === 'drop' && (\n <div class=\"file-upload__drop-area\">\n Drap and drop or <span>browse</span>\n </div>\n )}\n {eleType === 'btn' && (\n <div\n class={`file-upload__button button--keyline button--icon-start ${\n this.hasFocus ? 'button--focus' : ''\n }`}\n >\n <div class={`file-upload__btn-content`}>\n <nano-icon name=\"regular/cloud-upload\" />\n <span>\n {!!this.fileList.length\n ? this.fileList[0].file.name\n : this.placeholder}\n </span>\n {!!this.value && this.clearInput && !this.disabled && (\n <button\n type=\"button\"\n class=\"icon file-upload__clear-btn\"\n tabindex=\"-1\"\n onClick={this.onClearClick}\n >\n <nano-icon name=\"light/times\"></nano-icon>\n </button>\n )}\n </div>\n </div>\n )}\n <input\n aria-labelledby={labelId + ' ' + moreId + ' ' + listId}\n type=\"file\"\n id={this.fileInputId}\n accept={this.accept}\n class=\"file-upload__input\"\n multiple={this.maxFiles > 1}\n disabled={this.disabled}\n name={this.canChangeFileList ? undefined : this.name}\n ref={(input) => {\n if (this.canChangeFileList) {\n this.publicInputEl = input;\n return;\n }\n this.inputEl = input;\n }}\n onChange={this.onFileChoose}\n onFocus={this.onFocus}\n onReset={this.onInputChange}\n />\n </label>\n <input\n name={!this.canChangeFileList ? undefined : this.name}\n ref={(input) => {\n if (!this.canChangeFileList) return;\n this.inputEl = input;\n }}\n type=\"file\"\n id={this.fileInputId + '-hidden'}\n tabIndex={-1}\n multiple={true}\n class=\"file-upload__input\"\n disabled={this.disabled}\n required={this.required}\n accept={this.accept}\n onInvalid={this.onInvalid}\n onChange={this.onInputChange}\n />\n </div>,\n this.showInlineError \|\| this.hasHelperSlot ? (\n <div class=\"file-upload__more\" id={moreId}>\n {this.showInlineError ? (\n <div class=\"file-upload__error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"file-upload__help\">\n <slot name=\"helper\" />\n </div>\n </div>\n ) : (\n ''\n ),\n ];\n };\n\n private button = (): VNode[] => {\n return this.FileUploadInput('btn');\n };\n\n private dropArea = (): VNode[] => {\n const listId = this.fileInputId + '-list';\n return [\n this.FileUploadInput('drop', listId),\n <output class=\"file-upload__list-wrap\" id={listId}>\n {!!this.fileList && this.fileList.length > 0 && (\n <ul class=\"file-upload__list list\">\n {this.fileList.map((file) => {\n return (\n <li\n key={file.file.name}\n class=\"file-upload__list-item file-upload__list-item--active list-item\"\n onAnimationEnd={(_) => this.onFileRemoveAnim()}\n >\n <span class=\"list-title\">{file.file.name}</span>\n {!file.valid && (\n <nano-tooltip\n content={file.validationMessage}\n placement=\"left\"\n >\n <nano-icon-button\n class=\"list-button list-error\"\n iconName=\"light/exclamation-triangle\"\n label=\"File error\"\n />\n </nano-tooltip>\n )}\n {this.canChangeFileList && (\n <nano-icon-button\n class=\"list-button list-button--view\"\n type=\"button\"\n iconName=\"light/eye\"\n label=\"View file\"\n target=\"_blank\"\n href={file.location}\n />\n )}\n {this.canChangeFileList && (\n <nano-icon-button\n onClick={(e) => this.onFileRemoveFileClick(e, file)}\n class=\"list-button list-button--remove\"\n iconName=\"light/times\"\n label=\"Remove file\"\n />\n )}\n </li>\n );\n })}\n </ul>\n )}\n </output>,\n ];\n };\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'file-upload': true,\n 'file-upload--dragging': this.isDragging,\n 'file-upload--focus': this.hasFocus,\n 'file-upload--invalid': this._invalid,\n }}\n >\n {this.maxFiles > 1 ? <this.dropArea /> : <this.button />}\n </div>\n </Host>\n );\n }\n}\n"]}