@nanoporetech-digital/components 7.6.0 → 7.7.0

package/dist/cjs/nano-file-upload.cjs.entry.js

@@ -5,9 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6fa04fa.js');
+const index = require('./index-615cdb64.js');
+const renderer = require('./renderer-cd8b6098.js');
 
-const fileUploadCss = ".sc-nano-file-upload-h{box-sizing:border-box}*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}.sc-nano-file-upload-h{box-sizing:border-box}*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentcolor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--label-color--invalid:var(--nano-input-label-color-invalid, \"currentcolor\");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0 116 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, white);--drop-border--invalid:var(--nano-color-danger-rgb, 239 65 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1rem);--btn-padding-end:var(--nano-btn-padding-end, 1rem)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{block-size:1em;margin-block:calc(var(--label-padding) / 2) var(--label-padding);margin-inline:3px 0;position:relative}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--drop-bg);color:var(--drop-text);min-block-size:var(--drop-height);display:flex;align-items:center;justify-content:center;font-size:0.9em;position:relative;transition:background-color 0.15s ease-in-out;padding:0.5rem}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{opacity:0.7}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg--invalid)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:#fff}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-radius:var(--drop-border-radius);border-width:var(--drop-border-width);border-color:rgb(var(--drop-border-tint)/50%);border-style:dashed;inset:0;transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{border-color:rgb(var(--drop-border--invalid)/100%)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:rgb(var(--drop-border-tint)/100%);text-decoration:underline;border-radius:2px;z-index:1;cursor:pointer;position:relative}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__list.sc-nano-file-upload{list-style:none;margin:0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;transform:translateZ(0);animation:hideListItem 0.3s ease-in-out forwards}@keyframes hideListItem{0%{opacity:1;transform:translateY(0);transform:translateZ(0)}100%{opacity:0;transform:translateY(10px);transform:translateZ(0)}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem 0.3s ease-in-out forwards}@keyframes showListItem{0%{opacity:0;transform:translateY(10px);transform:translateZ(0)}100%{opacity:1;transform:translateY(0);transform:translateZ(0)}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;padding:5px;margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:rgb(var(--drop-border--invalid) / 100%)}.file-upload__button.sc-nano-file-upload{padding:0;border:none;background-color:transparent;font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:400;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-inline-size:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@media print{.file-upload__button.sc-nano-file-upload{display:none}}.file-upload__button.sc-nano-file-upload:focus,.file-upload__button.button--focus.sc-nano-file-upload{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload nano-spinner.sc-nano-file-upload{--base-color-rgb:255 255 255;margin-inline:0.5em 0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.button--icon-start.sc-nano-file-upload nano-spinner.sc-nano-file-upload{margin-inline:0 0.5em}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.file-upload__button.sc-nano-file-upload:active:not(.button--disabled):not(:disabled){box-shadow:none}.file-upload__button--disabled.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload:disabled{opacity:0.6}.file-upload__button--disabled.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:disabled:hover{cursor:default}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--active.sc-nano-file-upload{background-color:var(--nano-color-primary-shade, #00637f);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled).button--keyline,.file-upload__button.button--active.button--keyline.sc-nano-file-upload{background-color:var(--btn-bg);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:focus{color:var(--btn-text)}.file-upload__button.button--keyline.sc-nano-file-upload{background:transparent;border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--btn-bg);border-color:var(--btn-bg)}.file-upload__button.button--keyline.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--keyline.sc-nano-file-upload:not(:focus):not(.button--focus),.file-upload__button.button--keyline.button--active.sc-nano-file-upload{box-shadow:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__button.sc-nano-file-upload{opacity:0.4}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;background-color:transparent;display:flex;align-items:stretch;inline-size:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-inline:0.4rem 0;margin-block:0}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{display:flex;align-items:center}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload span.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}";
+const fileUploadCss = ".sc-nano-file-upload-h{box-sizing:border-box}*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}.sc-nano-file-upload-h{box-sizing:border-box}*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentcolor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--label-color--invalid:var(--nano-input-label-color-invalid, \"currentcolor\");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0 116 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, white);--drop-border--invalid:var(--nano-color-danger-rgb, 239 65 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1rem);--btn-padding-end:var(--nano-btn-padding-end, 1rem)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{block-size:1em;margin-block:calc(var(--label-padding) / 2) var(--label-padding);margin-inline:3px 0;position:relative}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--drop-bg);color:var(--drop-text);min-block-size:var(--drop-height);display:flex;align-items:center;justify-content:center;font-size:0.9em;position:relative;transition:background-color 0.15s ease-in-out;padding:0.5rem}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{opacity:0.7}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg--invalid)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:#fff}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-radius:var(--drop-border-radius);border-width:var(--drop-border-width);border-color:rgb(var(--drop-border-tint)/50%);border-style:dashed;inset:0;transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{border-color:rgb(var(--drop-border--invalid)/100%)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:rgb(var(--drop-border-tint)/100%);text-decoration:underline;border-radius:2px;z-index:1;cursor:pointer;position:relative}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__list.sc-nano-file-upload{list-style:none;margin:0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;transform:translateZ(0);animation:hideListItem 0.3s ease-in-out forwards}@keyframes hideListItem{0%{opacity:1;transform:translateY(0);transform:translateZ(0)}100%{opacity:0;transform:translateY(10px);transform:translateZ(0)}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem 0.3s ease-in-out forwards}@keyframes showListItem{0%{opacity:0;transform:translateY(10px);transform:translateZ(0)}100%{opacity:1;transform:translateY(0);transform:translateZ(0)}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;padding:5px;margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:rgb(var(--drop-border--invalid) / 100%)}.file-upload__button.sc-nano-file-upload{padding:0;border:none;background-color:transparent;font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:400;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-inline-size:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@media print{.file-upload__button.sc-nano-file-upload{display:none}}.file-upload__button.sc-nano-file-upload:focus,.file-upload__button.button--focus.sc-nano-file-upload{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload nano-spinner.sc-nano-file-upload{--base-color-rgb:255 255 255;margin-inline:0.5em 0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.button--icon-start.sc-nano-file-upload nano-spinner.sc-nano-file-upload{margin-inline:0 0.5em}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.file-upload__button.sc-nano-file-upload:active:not(.button--disabled):not(:disabled){box-shadow:none}.file-upload__button--disabled.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload:disabled{opacity:0.6}.file-upload__button--disabled.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:disabled:hover{cursor:default}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--active.sc-nano-file-upload{background-color:var(--nano-color-primary-shade, #00637f);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled).button--keyline,.file-upload__button.button--active.button--keyline.sc-nano-file-upload{background-color:var(--btn-bg);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:focus{color:var(--btn-text)}.file-upload__button.button--keyline.sc-nano-file-upload{background:transparent;border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--btn-bg);border-color:var(--btn-bg)}.file-upload__button.button--keyline.sc-nano-file-upload:hover:not(.button--disabled):not(:disabled),.file-upload__button.button--keyline.sc-nano-file-upload:not(:focus):not(.button--focus),.file-upload__button.button--keyline.button--active.sc-nano-file-upload{box-shadow:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__button.sc-nano-file-upload{opacity:0.4}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;background-color:transparent;display:flex;align-items:stretch;inline-size:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload .nano-icon.sc-nano-file-upload{margin-inline:0.4rem 0;margin-block:0}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{display:flex;align-items:center}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload span.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}";
 const NanoFileUploadStyle0 = fileUploadCss;
 
 let fileInputIds = 0;
@@ -368,23 +369,23 @@ const FileUpload = class {
             ? this.fileInputId + '-more'
             : '';
         return [
-            index.h("div", { class: 'file-upload__' + eleType + '-wrap' }, index.h("label", { class: `file-upload__` + eleType, htmlFor: this.fileInputId, id: labelId, onDrop: (e) => {
+            renderer.h("div", { class: 'file-upload__' + eleType + '-wrap' }, renderer.h("label", { class: `file-upload__` + eleType, htmlFor: this.fileInputId, id: labelId, onDrop: (e) => {
                     this.onDrop(e);
                     this.onDragStop(e);
-                }, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (index.h("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (index.h("slot", { name: "label" })))), eleType === 'drop' && (index.h("div", { class: "file-upload__drop-area" }, index.h("div", null, this.hasLabelSlot && index.h("slot", { name: "label" })), index.h("div", null, "Drag and drop or\u00A0", index.h("span", null, "browse")))), eleType === 'btn' && (index.h("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, index.h("div", { class: `file-upload__btn-content` }, index.h("nano-icon", { name: "regular/cloud-arrow-up" }), index.h("span", null, this.fileList.length
+                }, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (renderer.h("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (renderer.h("slot", { name: "label" })))), eleType === 'drop' && (renderer.h("div", { class: "file-upload__drop-area" }, renderer.h("div", null, this.hasLabelSlot && renderer.h("slot", { name: "label" })), renderer.h("div", null, "Drag and drop or\u00A0", renderer.h("span", null, "browse")))), eleType === 'btn' && (renderer.h("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, renderer.h("div", { class: `file-upload__btn-content` }, renderer.h("nano-icon", { name: "regular/cloud-arrow-up" }), renderer.h("span", null, this.fileList.length
                 ? this.fileList[0].file.name
-                : this.placeholder), !!this.value && this.clearInput && !this.disabled && (index.h("button", { type: "button", class: "icon file-upload__clear-btn", tabindex: "-1", onClick: this.onClearClick }, index.h("nano-icon", { name: "light/xmark" })))))), index.h("input", { "aria-labelledby": labelId + ' ' + moreId + ' ' + listId, type: "file", id: this.fileInputId, accept: this.accept, class: "file-upload__input", multiple: this.maxFiles > 1, disabled: this.disabled, name: this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
+                : this.placeholder), !!this.value && this.clearInput && !this.disabled && (renderer.h("button", { type: "button", class: "icon file-upload__clear-btn", tabindex: "-1", onClick: this.onClearClick }, renderer.h("nano-icon", { name: "light/xmark" })))))), renderer.h("input", { "aria-labelledby": labelId + ' ' + moreId + ' ' + listId, type: "file", id: this.fileInputId, accept: this.accept, class: "file-upload__input", multiple: this.maxFiles > 1, disabled: this.disabled, name: this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
                     if (this.canChangeFileList) {
                         this.publicInputEl = input;
                         return;
                     }
                     this.inputEl = input;
-                }, onChange: this.onFileChoose, onFocus: this.onFocus, onReset: this.onInputChange })), index.h("input", { name: !this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
+                }, onChange: this.onFileChoose, onFocus: this.onFocus, onReset: this.onInputChange })), renderer.h("input", { name: !this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
                     if (!this.canChangeFileList)
                         return;
                     this.inputEl = input;
                 }, type: "file", id: this.fileInputId + '-hidden', tabIndex: -1, multiple: true, class: "file-upload__input", disabled: this.disabled, required: this.required, accept: this.accept, onInvalid: this.onInvalid, onChange: this.onInputChange })),
-            this.showInlineError || this.hasHelperSlot ? (index.h("div", { class: "file-upload__more", id: moreId }, this.showInlineError && !!this.errorMessage.length ? (index.h("div", { class: "file-upload__error" }, this.errorMessage)) : (''), index.h("div", { class: "file-upload__help" }, index.h("slot", { name: "helper" })))) : (''),
+            this.showInlineError || this.hasHelperSlot ? (renderer.h("div", { class: "file-upload__more", id: moreId }, this.showInlineError && !!this.errorMessage.length ? (renderer.h("div", { class: "file-upload__error" }, this.errorMessage)) : (''), renderer.h("div", { class: "file-upload__help" }, renderer.h("slot", { name: "helper" })))) : (''),
         ];
     };
     button = () => {
@@ -394,18 +395,18 @@ const FileUpload = class {
         const listId = this.fileInputId + '-list';
         return [
             this.FileUploadInput('drop', listId),
-            index.h("output", { class: "file-upload__list-wrap", id: listId }, !!this.fileList && this.fileList.length > 0 && (index.h("ul", { class: "file-upload__list list" }, this.fileList.map((file) => {
-                return (index.h("li", { key: file.file.name, class: "file-upload__list-item file-upload__list-item--active list-item", onAnimationEnd: (_) => this.onFileRemoveAnim() }, index.h("span", { class: "list-title" }, file.file.name), !file.valid && (index.h("nano-tooltip", { content: file.validationMessage, placement: "left" }, index.h("nano-icon-button", { class: "list-button list-error", iconName: "light/triangle-exclamation", label: "File error" }))), this.canChangeFileList && (index.h("nano-icon-button", { class: "list-button list-button--view", type: "button", iconName: "light/eye", label: "View file", target: "_blank", href: file.location })), this.canChangeFileList && (index.h("nano-icon-button", { onClick: (e) => this.onFileRemoveFileClick(e, file), class: "list-button list-button--remove", iconName: "light/xmark", label: "Remove file" }))));
+            renderer.h("output", { class: "file-upload__list-wrap", id: listId }, !!this.fileList && this.fileList.length > 0 && (renderer.h("ul", { class: "file-upload__list list" }, this.fileList.map((file) => {
+                return (renderer.h("li", { key: file.file.name, class: "file-upload__list-item file-upload__list-item--active list-item", onAnimationEnd: (_) => this.onFileRemoveAnim() }, renderer.h("span", { class: "list-title" }, file.file.name), !file.valid && (renderer.h("nano-tooltip", { content: file.validationMessage, placement: "left" }, renderer.h("nano-icon-button", { class: "list-button list-error", iconName: "light/triangle-exclamation", label: "File error" }))), this.canChangeFileList && (renderer.h("nano-icon-button", { class: "list-button list-button--view", type: "button", iconName: "light/eye", label: "View file", target: "_blank", href: file.location })), this.canChangeFileList && (renderer.h("nano-icon-button", { onClick: (e) => this.onFileRemoveFileClick(e, file), class: "list-button list-button--remove", iconName: "light/xmark", label: "Remove file" }))));
             })))),
         ];
     };
     render() {
-        return (index.h(index.Host, { key: 'aa83308ab831900a4faf061fde8e24e89759e21b' }, index.h("div", { key: 'b59f09ed9a3aa39f43ff411cff573d7cd76630a0', class: {
+        return (renderer.h(index.Host, { key: '1af0c1ae1d5c87a627b50cf9ab35599892043df2', class: "nano-file-upload" }, renderer.h("div", { key: '52db999aa429cd6a5976976b25c4861e6b9aee1d', class: {
                 'file-upload': true,
                 'file-upload--dragging': this.isDragging,
                 'file-upload--focus': this.hasFocus,
                 'file-upload--invalid': this._invalid,
-            } }, this.maxFiles > 1 ? index.h(this.dropArea, null) : index.h(this.button, null))));
+            } }, this.maxFiles > 1 ? renderer.h(this.dropArea, null) : renderer.h(this.button, null))));
     }
     static get watchers() { return {
         "fileList": ["fileListChange", "shouldValidate"],

package/dist/cjs/nano-file-upload.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nano-file-upload.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/file-upload/file-upload.scss?tag=nano-file-upload&encapsulation=scoped","src/components/file-upload/file-upload.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --invalid-msg-color: Default value #{tokens.nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default value #{tokens.$input-help-font-size};\n\n   * @prop --help-msg-color: Default value #{tokens.$input-help-color};\n\n   * @prop --label-color: Default value #{tokens.$label-color};\n   * @prop --label-color--invalid: Default value #{tokens.$label-color-invalid};\n   * @prop --label-font-size: Default value #{tokens.$label-font-size};\n   * @prop --label-padding: Default value #{tokens.$input-padding-bottom};\n   * @prop --label-color--invalid: Default value #{tokens.$label-color-invalid};\n\n   * @prop --drop-bg: Default value #{map.get(tokens.$colors, blue--faded)};\n   * @prop --drop-text: Default value #{map.get(tokens.$colors, dimgrey)};\n   * @prop --drop-height: Default value 3.5em;\n   * @prop --drop-border-tint: Default value #{tokens.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 #{tokens.$input-background-color--invalid};\n   * @prop --drop-border--invalid: Default value #{tokens.nano-color(danger, base, null, true)};\n\n   * @prop --btn-bg: Default value #{tokens.nano-color(primary, base)};\n   * @prop --btn-text: Default value #{tokens.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-block-size: 1rem;\n  display: block;\n\n  --invalid-msg-color: #{tokens.nano-color(danger, base)};\n  --invalid-msg-font-size: #{tokens.$input-help-font-size};\n  --help-msg-color: #{tokens.$input-help-color};\n  --label-color: #{tokens.$label-color};\n  --label-font-size: #{tokens.$label-font-size};\n  --label-padding: #{tokens.$input-padding-bottom};\n  --label-color--invalid: #{tokens.$label-color-invalid};\n  --drop-bg: #{map.get(tokens.$colors, blue--faded)};\n  --drop-text: #{darken(map.get(tokens.$colors, dimgrey), 11%)};\n  --drop-height: 3.5em;\n  --drop-border-tint: #{tokens.nano-color(primary, base, null, true)};\n  --drop-border-width: 2px;\n  --drop-border-radius: 5px;\n  --drop-bg--invalid: #{tokens.$input-background-color--invalid};\n  --drop-border--invalid: #{tokens.nano-color(danger, base, null, true)};\n  --btn-bg: #{tokens.nano-color(primary, base)};\n  --btn-text: #{tokens.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, 1rem);\n  --btn-padding-end: var(--nano-btn-padding-end, 1rem);\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    @include mx.visually-hide();\n  }\n\n  &__error,\n  &__help,\n  &__more,\n  &__label {\n    display: block;\n    inline-size: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__more {\n    block-size: 1em;\n    margin-block: calc(var(--label-padding) / 2) var(--label-padding);\n    margin-inline: 3px 0;\n    position: relative;\n  }\n\n  &__error,\n  &__help {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    position: absolute;\n    font-size: var(--invalid-msg-font-size);\n    line-height: 1.2;\n    transition: 0.3s ease-out opacity;\n\n    .file-upload--invalid & {\n      opacity: 1;\n    }\n  }\n\n  &__error {\n    color: var(--invalid-msg-color);\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    inline-size: 100%;\n    display: inline-block;\n  }\n\n  &__drop-area {\n    flex-direction: column;\n    background-color: var(--drop-bg);\n    color: var(--drop-text);\n    min-block-size: 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(tokens.$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: rgb(var(--drop-border-tint) / 50%);\n      border-style: dashed;\n      inset: 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: rgb(var(--drop-border--invalid) / 100%);\n      }\n\n      .file-upload--dragging & {\n        inset: 5px;\n      }\n    }\n\n    span {\n      color: rgb(var(--drop-border-tint) / 100%);\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: #{tokens.$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      inset-block-start: -4px;\n    }\n\n    &-item {\n      inline-size: 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: var(--nano-color-blue--faded);\n      border-radius: 5px;\n      padding: 5px;\n      margin-inline-end: 2px;\n      display: block;\n      inline-size: 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: var(--nano-color-blue--faded);\n      border-radius: 5px;\n      margin: 2px;\n    }\n\n    .list-error {\n      --color: rgb(var(--drop-border--invalid) / 100%);\n    }\n  }\n\n  /* Button display / Single file upload */\n\n  &__button {\n    @include tokens.button-base;\n    @include tokens.button-standard(\n      var(--btn-bg),\n      var(--btn-text),\n      #{tokens.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-inline-size: 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      margin: 0;\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      inline-size: 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        margin-inline: 0.4rem 0;\n        margin-block: 0;\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-inline-size: 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  FileInputChangeEventDetail,\n  FileWithUrl,\n} from './file-upload-interface';\nimport type {\n  ControlValidity,\n  ControlValidityEventDetail,\n} from '../../types/shared';\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 = '';\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      setTimeout(() => {\n        this.nanoChange.emit({ value: this.value, files: this.files });\n      }, 20);\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  /** The form element to associate with this input (its form owner). Must be the id of a form. */\n  @Prop() form?: string | null;\n\n  @Watch('maxFiles')\n  @Watch('maxFileSize')\n  @Watch('capture')\n  @Watch('accept')\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('fileList')\n  protected shouldValidate() {\n    if (!this.inputEl) return;\n\n    this.validate();\n    requestAnimationFrame(() => {\n      if (this.validateOn === 'dirty') this.showInlineValidation();\n    });\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  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.inputEl) return '';\n    return this.inputEl.validationMessage;\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 */\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  set files(fs: FileWithUrl[]) {\n    this.addNewFiles(this.arrToFileList(fs));\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 empty 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) {\n      this.validate();\n      this.showInlineValidation();\n    }\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      this.showInlineValidation();\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  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.host.closest('form');\n    if (!form || e.target !== this.host.closest('form')) return;\n\n    this.value = '';\n  }\n\n  // Private methods\n\n  private onClearClick = () => {\n    this.value = '';\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n    this.validate();\n    if (this.validateOn === 'dirty') this.showInlineValidation();\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 (let 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 = () => {\n    this.errorMessage = '';\n    this.inputEl.setCustomValidity('');\n    let error: string;\n\n    if (!this.inputEl.validity.valid) {\n      error = 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        fileItem.validationMessage = error;\n        fileItem.valid = !error;\n      });\n      if (this.fileList.length > this.maxFiles)\n        error = `Maxinum number of files exceeded (${this.maxFiles})`;\n    }\n\n    if (error) this.inputEl.setCustomValidity(error);\n  };\n\n  private showInlineValidation(ev?: Event) {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.errorMessage = '';\n\n    if (!this.inputEl.validity.valid) {\n      this.errorMessage = this.inputEl.validationMessage;\n      this._invalid = true;\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    if (this.showInlineError) ev.preventDefault();\n    this.validate();\n    this.showInlineValidation(ev);\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    try {\n      this.removeFiles.forEach((f) =>\n        f.location ? URL.revokeObjectURL(f.location) : ''\n      );\n    } catch (e) {\n      console.error(e);\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          {(!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (\n            <div\n              class={`file-upload__label ${\n                this.hideLabel ? 'visually-hide' : ''\n              }`}\n            >\n              {!!this.label && !!this.label.length ? this.label : ''}\n              {!this.label && this.hasLabelSlot && eleType !== 'drop' && (\n                <slot name=\"label\" />\n              )}\n            </div>\n          )}\n          {eleType === 'drop' && (\n            <div class=\"file-upload__drop-area\">\n              <div>{this.hasLabelSlot && <slot name=\"label\" />}</div>\n              <div>\n                Drag and drop or&nbsp;<span>browse</span>\n              </div>\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-arrow-up\" />\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/xmark\"></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            form={this.form}\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          form={this.form}\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\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 && !!this.errorMessage.length ? (\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/triangle-exclamation\"\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/xmark\"\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"],"version":3}
+{"file":"nano-file-upload.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/file-upload/file-upload.scss?tag=nano-file-upload&encapsulation=scoped","src/components/file-upload/file-upload.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --invalid-msg-color: Default value #{tokens.nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default value #{tokens.$input-help-font-size};\n\n   * @prop --help-msg-color: Default value #{tokens.$input-help-color};\n\n   * @prop --label-color: Default value #{tokens.$label-color};\n   * @prop --label-color--invalid: Default value #{tokens.$label-color-invalid};\n   * @prop --label-font-size: Default value #{tokens.$label-font-size};\n   * @prop --label-padding: Default value #{tokens.$input-padding-bottom};\n   * @prop --label-color--invalid: Default value #{tokens.$label-color-invalid};\n\n   * @prop --drop-bg: Default value #{map.get(tokens.$colors, blue--faded)};\n   * @prop --drop-text: Default value #{map.get(tokens.$colors, dimgrey)};\n   * @prop --drop-height: Default value 3.5em;\n   * @prop --drop-border-tint: Default value #{tokens.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 #{tokens.$input-background-color--invalid};\n   * @prop --drop-border--invalid: Default value #{tokens.nano-color(danger, base, null, true)};\n\n   * @prop --btn-bg: Default value #{tokens.nano-color(primary, base)};\n   * @prop --btn-text: Default value #{tokens.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-block-size: 1rem;\n  display: block;\n\n  --invalid-msg-color: #{tokens.nano-color(danger, base)};\n  --invalid-msg-font-size: #{tokens.$input-help-font-size};\n  --help-msg-color: #{tokens.$input-help-color};\n  --label-color: #{tokens.$label-color};\n  --label-font-size: #{tokens.$label-font-size};\n  --label-padding: #{tokens.$input-padding-bottom};\n  --label-color--invalid: #{tokens.$label-color-invalid};\n  --drop-bg: #{map.get(tokens.$colors, blue--faded)};\n  --drop-text: #{darken(map.get(tokens.$colors, dimgrey), 11%)};\n  --drop-height: 3.5em;\n  --drop-border-tint: #{tokens.nano-color(primary, base, null, true)};\n  --drop-border-width: 2px;\n  --drop-border-radius: 5px;\n  --drop-bg--invalid: #{tokens.$input-background-color--invalid};\n  --drop-border--invalid: #{tokens.nano-color(danger, base, null, true)};\n  --btn-bg: #{tokens.nano-color(primary, base)};\n  --btn-text: #{tokens.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, 1rem);\n  --btn-padding-end: var(--nano-btn-padding-end, 1rem);\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    @include mx.visually-hide();\n  }\n\n  &__error,\n  &__help,\n  &__more,\n  &__label {\n    display: block;\n    inline-size: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__more {\n    block-size: 1em;\n    margin-block: calc(var(--label-padding) / 2) var(--label-padding);\n    margin-inline: 3px 0;\n    position: relative;\n  }\n\n  &__error,\n  &__help {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    position: absolute;\n    font-size: var(--invalid-msg-font-size);\n    line-height: 1.2;\n    transition: 0.3s ease-out opacity;\n\n    .file-upload--invalid & {\n      opacity: 1;\n    }\n  }\n\n  &__error {\n    color: var(--invalid-msg-color);\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    inline-size: 100%;\n    display: inline-block;\n  }\n\n  &__drop-area {\n    flex-direction: column;\n    background-color: var(--drop-bg);\n    color: var(--drop-text);\n    min-block-size: 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(tokens.$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: rgb(var(--drop-border-tint) / 50%);\n      border-style: dashed;\n      inset: 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: rgb(var(--drop-border--invalid) / 100%);\n      }\n\n      .file-upload--dragging & {\n        inset: 5px;\n      }\n    }\n\n    span {\n      color: rgb(var(--drop-border-tint) / 100%);\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: #{tokens.$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      inset-block-start: -4px;\n    }\n\n    &-item {\n      inline-size: 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: var(--nano-color-blue--faded);\n      border-radius: 5px;\n      padding: 5px;\n      margin-inline-end: 2px;\n      display: block;\n      inline-size: 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: var(--nano-color-blue--faded);\n      border-radius: 5px;\n      margin: 2px;\n    }\n\n    .list-error {\n      --color: rgb(var(--drop-border--invalid) / 100%);\n    }\n  }\n\n  /* Button display / Single file upload */\n\n  &__button {\n    @include tokens.button-base;\n    @include tokens.button-standard(\n      var(--btn-bg),\n      var(--btn-text),\n      #{tokens.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-inline-size: 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      margin: 0;\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      inline-size: 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        margin-inline: 0.4rem 0;\n        margin-block: 0;\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-inline-size: 0;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\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 { h } from '../../utils/renderer';\nimport {\n  FileInputChangeEventDetail,\n  FileWithUrl,\n} from './file-upload-interface';\nimport type {\n  ControlValidity,\n  ControlValidityEventDetail,\n} from '../../types/shared';\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 = '';\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      setTimeout(() => {\n        this.nanoChange.emit({ value: this.value, files: this.files });\n      }, 20);\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  /** The form element to associate with this input (its form owner). Must be the id of a form. */\n  @Prop() form?: string | null;\n\n  @Watch('maxFiles')\n  @Watch('maxFileSize')\n  @Watch('capture')\n  @Watch('accept')\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('fileList')\n  protected shouldValidate() {\n    if (!this.inputEl) return;\n\n    this.validate();\n    requestAnimationFrame(() => {\n      if (this.validateOn === 'dirty') this.showInlineValidation();\n    });\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  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.inputEl) return '';\n    return this.inputEl.validationMessage;\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 */\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  set files(fs: FileWithUrl[]) {\n    this.addNewFiles(this.arrToFileList(fs));\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 empty 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) {\n      this.validate();\n      this.showInlineValidation();\n    }\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      this.showInlineValidation();\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  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.host.closest('form');\n    if (!form || e.target !== this.host.closest('form')) return;\n\n    this.value = '';\n  }\n\n  // Private methods\n\n  private onClearClick = () => {\n    this.value = '';\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n    this.validate();\n    if (this.validateOn === 'dirty') this.showInlineValidation();\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 (let 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 = () => {\n    this.errorMessage = '';\n    this.inputEl.setCustomValidity('');\n    let error: string;\n\n    if (!this.inputEl.validity.valid) {\n      error = 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        fileItem.validationMessage = error;\n        fileItem.valid = !error;\n      });\n      if (this.fileList.length > this.maxFiles)\n        error = `Maxinum number of files exceeded (${this.maxFiles})`;\n    }\n\n    if (error) this.inputEl.setCustomValidity(error);\n  };\n\n  private showInlineValidation(ev?: Event) {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.errorMessage = '';\n\n    if (!this.inputEl.validity.valid) {\n      this.errorMessage = this.inputEl.validationMessage;\n      this._invalid = true;\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    if (this.showInlineError) ev.preventDefault();\n    this.validate();\n    this.showInlineValidation(ev);\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    try {\n      this.removeFiles.forEach((f) =>\n        f.location ? URL.revokeObjectURL(f.location) : ''\n      );\n    } catch (e) {\n      console.error(e);\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          {(!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (\n            <div\n              class={`file-upload__label ${\n                this.hideLabel ? 'visually-hide' : ''\n              }`}\n            >\n              {!!this.label && !!this.label.length ? this.label : ''}\n              {!this.label && this.hasLabelSlot && eleType !== 'drop' && (\n                <slot name=\"label\" />\n              )}\n            </div>\n          )}\n          {eleType === 'drop' && (\n            <div class=\"file-upload__drop-area\">\n              <div>{this.hasLabelSlot && <slot name=\"label\" />}</div>\n              <div>\n                Drag and drop or&nbsp;<span>browse</span>\n              </div>\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-arrow-up\" />\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/xmark\"></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            form={this.form}\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          form={this.form}\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\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 && !!this.errorMessage.length ? (\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/triangle-exclamation\"\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/xmark\"\n                      label=\"Remove file\"\n                    />\n                  )}\n                </li>\n              );\n            })}\n          </ul>\n        )}\n      </output>,\n    ];\n  };\n\n  render() {\n    return (\n      <Host class=\"nano-file-upload\">\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"],"version":3}