@nanoporetech-digital/components 3.10.3 → 3.11.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.11.0](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v3.10.4...v3.11.0) (2023-02-20)
+
+
+### Features
+
+* **slides:** auto-height / calculation from slide content ([8a32f6d](https://git.oxfordnanolabs.local/Digital/nano-components/commits/8a32f6d86ed92ab256c2490f9a2a2e43710202f7))
+
+
+
+
+
+## [3.10.4](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v3.10.3...v3.10.4) (2023-02-20)
+
+
+### Bug Fixes
+
+* **nuxt:** remove components from vite optimization to stop it breaking workers ([c4b848a](https://git.oxfordnanolabs.local/Digital/nano-components/commits/c4b848aa01ab1b5990f4dfc2c0441b302030a02d))
+
+
+
+
+
 ## [3.10.3](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v3.10.2...v3.10.3) (2023-02-20)
 
 **Note:** Version bump only for package @nanoporetech-digital/components

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-46286eea.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{min-height:1rem;display:block;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentcolor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--label-color--invalid:var(--nano-input-label-color-invalid, \"currentcolor\");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0 116 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, white);--drop-border--invalid:var(--nano-color-danger-rgb, 239 65 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1rem);--btn-padding-end:var(--nano-btn-padding-end, 1rem)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{height:1em;-webkit-margin-before:calc(var(--label-padding) / 2);margin-block-start:calc(var(--label-padding) / 2);-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-after:var(--label-padding);margin-block-end:var(--label-padding);-webkit-margin-start:3px;margin-inline-start:3px;position:relative}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;width: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-height: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{width: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;-webkit-margin-end:2px;margin-inline-end:2px;display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background: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:500;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-width:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@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;-webkit-margin-start:0.5em;margin-inline-start:0.5em;-webkit-margin-end:0;margin-inline-end:0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;-webkit-margin-before:-0.188em;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{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0.5em;margin-inline-end: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;width:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-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-width: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{min-height:1rem;display:block;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentcolor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--label-color--invalid:var(--nano-input-label-color-invalid, \"currentcolor\");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0 116 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, white);--drop-border--invalid:var(--nano-color-danger-rgb, 239 65 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1rem);--btn-padding-end:var(--nano-btn-padding-end, 1rem)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{height:1em;-webkit-margin-before:calc(var(--label-padding) / 2);margin-block-start:calc(var(--label-padding) / 2);-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-after:var(--label-padding);margin-block-end:var(--label-padding);-webkit-margin-start:3px;margin-inline-start:3px;position:relative}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;width: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-height: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{width: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;-webkit-margin-end:2px;margin-inline-end:2px;display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background: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:500;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-width:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@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;-webkit-margin-start:0.5em;margin-inline-start:0.5em;-webkit-margin-end:0;margin-inline-end:0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;-webkit-margin-before:-0.188em;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{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0.5em;margin-inline-end: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;width:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload nano-icon.sc-nano-file-upload{margin-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-width:0}";
 
 let fileInputIds = 0;
 let getDataTransfer = () => new DataTransfer();

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 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/button';\n\n:host {\n  /**\n   * @prop --invalid-msg-color: Default value #{nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default value #{$input-help-font-size};\n\n   * @prop --help-msg-color: Default value #{$input-help-color};\n\n   * @prop --label-color: Default value #{$label-color};\n   * @prop --label-color--invalid: Default value #{$label-color-invalid};\n   * @prop --label-font-size: Default value #{$label-font-size};\n   * @prop --label-padding: Default value #{$input-padding-bottom};\n   * @prop --label-color--invalid: Default value #{$label-color-invalid};\n\n   * @prop --drop-bg: Default value #{map.get($colors, blue--faded)};\n   * @prop --drop-text: Default value #{map.get($colors, dimgrey)};\n   * @prop --drop-height: Default value 3.5em;\n   * @prop --drop-border-tint: Default value #{nano-color(primary, base, null, true)};\n   * @prop --drop-border-width: Default value 2px;\n   * @prop --drop-border-radius: Default value 5px;\n   * @prop --drop-bg--invalid: Default value #{$input-background-color--invalid};\n   * @prop --drop-border--invalid: Default value #{nano-color(danger, base, null, true)};\n\n   * @prop --btn-bg: Default value #{nano-color(primary, base)};\n   * @prop --btn-text: Default value #{nano-color(primary, contrast)};\n   * @prop --btn-icon-size: Default value var(--nano-btn-icon-size, 1.4em);\n   * @prop --btn-padding-top: Default value var(--nano-btn-padding-top, .5em);\n   * @prop --btn-padding-bottom: Default value var(--nano-btn-padding-bottom, .5em);\n   * @prop --btn-padding-start: Default value var(--nano-btn-padding-start, 1em);\n   * @prop --btn-padding-end: Default value var(--nano-btn-padding-end, 1em);\n   */\n\n  min-height: 1rem;\n  display: block;\n\n  --invalid-msg-color: #{nano-color(danger, base)};\n  --invalid-msg-font-size: #{$input-help-font-size};\n  --help-msg-color: #{$input-help-color};\n  --label-color: #{$label-color};\n  --label-font-size: #{$label-font-size};\n  --label-padding: #{$input-padding-bottom};\n  --label-color--invalid: #{$label-color-invalid};\n  --drop-bg: #{map.get($colors, blue--faded)};\n  --drop-text: #{darken(map.get($colors, dimgrey), 11%)};\n  --drop-height: 3.5em;\n  --drop-border-tint: #{nano-color(primary, base, null, true)};\n  --drop-border-width: 2px;\n  --drop-border-radius: 5px;\n  --drop-bg--invalid: #{$input-background-color--invalid};\n  --drop-border--invalid: #{nano-color(danger, base, null, true)};\n  --btn-bg: #{nano-color(primary, base)};\n  --btn-text: #{nano-color(primary, contrast)};\n  --btn-icon-size: var(--nano-btn-icon-size, 1.4em);\n  --btn-padding-top: var(--nano-btn-padding-top, 0.5em);\n  --btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5em);\n  --btn-padding-start: var(--nano-btn-padding-start, 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 visually-hide();\n  }\n\n  &__error,\n  &__help,\n  &__more,\n  &__label {\n    display: block;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__more {\n    height: 1em;\n    margin-block-start: calc(var(--label-padding) / 2);\n    margin-inline-end: 0;\n    margin-block-end: var(--label-padding);\n    margin-inline-start: 3px;\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    font-stretch: condensed;\n    opacity: 0;\n\n    .file-upload--invalid & {\n      opacity: 1;\n    }\n  }\n\n  &__help {\n    font-style: italic;\n    opacity: 1;\n    color: var(--help-msg-color);\n\n    .file-upload--invalid & {\n      opacity: 0;\n    }\n  }\n\n  /* Drop area / Multi file upload */\n\n  &__drop {\n    position: relative;\n    width: 100%;\n    display: inline-block;\n  }\n\n  &__drop-area {\n    flex-direction: column;\n    background-color: var(--drop-bg);\n    color: var(--drop-text);\n    min-height: var(--drop-height);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.9em;\n    position: relative;\n    transition: background-color 0.15s ease-in-out;\n    padding: 0.5rem;\n\n    :host([disabled]:not([disabled='false'])) & {\n      opacity: 0.7;\n    }\n\n    .file-upload--invalid & {\n      background-color: var(--drop-bg--invalid);\n    }\n\n    .file-upload--dragging & {\n      background-color: #{map.get($colors, white)};\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      border-radius: var(--drop-border-radius);\n      border-width: var(--drop-border-width);\n      border-color: 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: #{$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      width: 100%;\n      margin: 0 0 2px;\n      display: flex;\n      align-items: center;\n      transform: translateZ(0);\n      animation: hideListItem 0.3s ease-in-out forwards;\n\n      @keyframes hideListItem {\n        0% {\n          opacity: 1;\n          transform: translateY(0);\n          transform: translateZ(0);\n        }\n\n        100% {\n          opacity: 0;\n          transform: translateY(10px);\n          transform: translateZ(0);\n        }\n      }\n\n      &--active {\n        animation: showListItem 0.3s ease-in-out forwards;\n\n        @keyframes showListItem {\n          0% {\n            opacity: 0;\n            transform: translateY(10px);\n            transform: translateZ(0);\n          }\n\n          100% {\n            opacity: 1;\n            transform: translateY(0);\n            transform: translateZ(0);\n          }\n        }\n      }\n    }\n\n    .list-title {\n      background: var(--nano-color-blue--faded);\n      border-radius: 5px;\n      padding: 5px;\n      margin-inline-end: 2px;\n      display: block;\n      width: 100%;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      font-size: 0.9em;\n      color: var(--help-msg-color);\n    }\n\n    .list-button {\n      background: 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 button-base;\n    @include button-standard(\n      var(--btn-bg),\n      var(--btn-text),\n      #{nano-color(primary, shade)}\n    );\n\n    --nano-btn-icon-size: var(--btn-icon-size);\n    --nano-btn-line-height: var(--btn-icon-size);\n    --nano-btn-padding-top: var(--btn-padding-top);\n    --nano-btn-padding-bottom: var(--btn-padding-bottom);\n    --nano-btn-padding-start: var(--btn-padding-start);\n    --nano-btn-padding-end: var(--btn-padding-end);\n\n    max-width: 100%;\n    font-size: 0.9em;\n\n    :host([disabled]:not([disabled='false'])) & {\n      opacity: 0.4;\n    }\n\n    .file-upload--dragging & {\n      --nano-btn-border-style: dashed;\n    }\n    #{$self}__clear-btn {\n      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      width: auto;\n      color: var(--clear-btn-color);\n\n      :host(.is-invalid) & {\n        color: var(--clear-btn-color--invalid);\n      }\n\n      nano-icon {\n        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-width: 0;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Element,\n  ComponentInterface,\n  State,\n  Event,\n  EventEmitter,\n  Watch,\n  VNode,\n  Method,\n  Listen,\n} from '@stencil/core';\nimport type {\n  ControlValidity,\n  ControlValidityEventDetail,\n  FileInputChangeEventDetail,\n  FileWithUrl,\n} from '../../interface';\n\nlet fileInputIds = 0;\n\nlet getDataTransfer = () => new DataTransfer();\ntry {\n  getDataTransfer();\n} catch {\n  try {\n    getDataTransfer = () => new ClipboardEvent('').clipboardData;\n    getDataTransfer();\n  } catch {\n    getDataTransfer = null;\n  }\n}\n\ninterface FileValidation {\n  file: File;\n  valid: boolean;\n  validationMessage?: string;\n  location?: string;\n}\n/**\n * A better UI experience for `input type=\"file\"` form controls.\n *\n *   - Drag and Drop\n *   - Validation options\n *   - Preview and manage multiple files\n */\n@Component({\n  tag: 'nano-file-upload',\n  styleUrl: 'file-upload.scss',\n  scoped: true,\n})\nexport class FileUpload implements ComponentInterface {\n  private inputEl: HTMLInputElement;\n  private publicInputEl: HTMLInputElement;\n  private mo!: MutationObserver;\n  private fileInputId = `nano-file-upload-${fileInputIds++}`;\n  private canChangeFileList = !!getDataTransfer;\n  private removeFiles: FileValidation[] = [];\n\n  @State() hasHelperSlot: boolean;\n  @State() hasLabelSlot: boolean;\n  @State() errorMessage: string = '';\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    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-upload\" />\n                <span>\n                  {!!this.fileList.length\n                    ? this.fileList[0].file.name\n                    : this.placeholder}\n                </span>\n                {!!this.value && this.clearInput && !this.disabled && (\n                  <button\n                    type=\"button\"\n                    class=\"icon file-upload__clear-btn\"\n                    tabindex=\"-1\"\n                    onClick={this.onClearClick}\n                  >\n                    <nano-icon name=\"light/times\"></nano-icon>\n                  </button>\n                )}\n              </div>\n            </div>\n          )}\n          <input\n            aria-labelledby={labelId + ' ' + moreId + ' ' + listId}\n            type=\"file\"\n            id={this.fileInputId}\n            accept={this.accept}\n            class=\"file-upload__input\"\n            multiple={this.maxFiles > 1}\n            disabled={this.disabled}\n            name={this.canChangeFileList ? undefined : this.name}\n            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={true}\n          class=\"file-upload__input\"\n          disabled={this.disabled}\n          required={this.required}\n          accept={this.accept}\n          onInvalid={this.onInvalid}\n          onChange={this.onInputChange}\n        />\n      </div>,\n      this.showInlineError || this.hasHelperSlot ? (\n        <div class=\"file-upload__more\" id={moreId}>\n          {this.showInlineError && !!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/exclamation-triangle\"\n                        label=\"File error\"\n                      />\n                    </nano-tooltip>\n                  )}\n                  {this.canChangeFileList && (\n                    <nano-icon-button\n                      class=\"list-button list-button--view\"\n                      type=\"button\"\n                      iconName=\"light/eye\"\n                      label=\"View file\"\n                      target=\"_blank\"\n                      href={file.location}\n                    />\n                  )}\n                  {this.canChangeFileList && (\n                    <nano-icon-button\n                      onClick={(e) => this.onFileRemoveFileClick(e, file)}\n                      class=\"list-button list-button--remove\"\n                      iconName=\"light/times\"\n                      label=\"Remove file\"\n                    />\n                  )}\n                </li>\n              );\n            })}\n          </ul>\n        )}\n      </output>,\n    ];\n  };\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'file-upload': true,\n            'file-upload--dragging': this.isDragging,\n            'file-upload--focus': this.hasFocus,\n            'file-upload--invalid': this._invalid,\n          }}\n        >\n          {this.maxFiles > 1 ? <this.dropArea /> : <this.button />}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"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 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/button';\n\n:host {\n  /**\n   * @prop --invalid-msg-color: Default value #{nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default value #{$input-help-font-size};\n\n   * @prop --help-msg-color: Default value #{$input-help-color};\n\n   * @prop --label-color: Default value #{$label-color};\n   * @prop --label-color--invalid: Default value #{$label-color-invalid};\n   * @prop --label-font-size: Default value #{$label-font-size};\n   * @prop --label-padding: Default value #{$input-padding-bottom};\n   * @prop --label-color--invalid: Default value #{$label-color-invalid};\n\n   * @prop --drop-bg: Default value #{map.get($colors, blue--faded)};\n   * @prop --drop-text: Default value #{map.get($colors, dimgrey)};\n   * @prop --drop-height: Default value 3.5em;\n   * @prop --drop-border-tint: Default value #{nano-color(primary, base, null, true)};\n   * @prop --drop-border-width: Default value 2px;\n   * @prop --drop-border-radius: Default value 5px;\n   * @prop --drop-bg--invalid: Default value #{$input-background-color--invalid};\n   * @prop --drop-border--invalid: Default value #{nano-color(danger, base, null, true)};\n\n   * @prop --btn-bg: Default value #{nano-color(primary, base)};\n   * @prop --btn-text: Default value #{nano-color(primary, contrast)};\n   * @prop --btn-icon-size: Default value var(--nano-btn-icon-size, 1.4em);\n   * @prop --btn-padding-top: Default value var(--nano-btn-padding-top, .5em);\n   * @prop --btn-padding-bottom: Default value var(--nano-btn-padding-bottom, .5em);\n   * @prop --btn-padding-start: Default value var(--nano-btn-padding-start, 1em);\n   * @prop --btn-padding-end: Default value var(--nano-btn-padding-end, 1em);\n   */\n\n  min-height: 1rem;\n  display: block;\n\n  --invalid-msg-color: #{nano-color(danger, base)};\n  --invalid-msg-font-size: #{$input-help-font-size};\n  --help-msg-color: #{$input-help-color};\n  --label-color: #{$label-color};\n  --label-font-size: #{$label-font-size};\n  --label-padding: #{$input-padding-bottom};\n  --label-color--invalid: #{$label-color-invalid};\n  --drop-bg: #{map.get($colors, blue--faded)};\n  --drop-text: #{darken(map.get($colors, dimgrey), 11%)};\n  --drop-height: 3.5em;\n  --drop-border-tint: #{nano-color(primary, base, null, true)};\n  --drop-border-width: 2px;\n  --drop-border-radius: 5px;\n  --drop-bg--invalid: #{$input-background-color--invalid};\n  --drop-border--invalid: #{nano-color(danger, base, null, true)};\n  --btn-bg: #{nano-color(primary, base)};\n  --btn-text: #{nano-color(primary, contrast)};\n  --btn-icon-size: var(--nano-btn-icon-size, 1.4em);\n  --btn-padding-top: var(--nano-btn-padding-top, 0.5em);\n  --btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5em);\n  --btn-padding-start: var(--nano-btn-padding-start, 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 visually-hide();\n  }\n\n  &__error,\n  &__help,\n  &__more,\n  &__label {\n    display: block;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__more {\n    height: 1em;\n    margin-block-start: calc(var(--label-padding) / 2);\n    margin-inline-end: 0;\n    margin-block-end: var(--label-padding);\n    margin-inline-start: 3px;\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    font-stretch: condensed;\n    opacity: 0;\n\n    .file-upload--invalid & {\n      opacity: 1;\n    }\n  }\n\n  &__help {\n    font-style: italic;\n    opacity: 1;\n    color: var(--help-msg-color);\n\n    .file-upload--invalid & {\n      opacity: 0;\n    }\n  }\n\n  /* Drop area / Multi file upload */\n\n  &__drop {\n    position: relative;\n    width: 100%;\n    display: inline-block;\n  }\n\n  &__drop-area {\n    flex-direction: column;\n    background-color: var(--drop-bg);\n    color: var(--drop-text);\n    min-height: var(--drop-height);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.9em;\n    position: relative;\n    transition: background-color 0.15s ease-in-out;\n    padding: 0.5rem;\n\n    :host([disabled]:not([disabled='false'])) & {\n      opacity: 0.7;\n    }\n\n    .file-upload--invalid & {\n      background-color: var(--drop-bg--invalid);\n    }\n\n    .file-upload--dragging & {\n      background-color: #{map.get($colors, white)};\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      border-radius: var(--drop-border-radius);\n      border-width: var(--drop-border-width);\n      border-color: 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: #{$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      width: 100%;\n      margin: 0 0 2px;\n      display: flex;\n      align-items: center;\n      transform: translateZ(0);\n      animation: hideListItem 0.3s ease-in-out forwards;\n\n      @keyframes hideListItem {\n        0% {\n          opacity: 1;\n          transform: translateY(0);\n          transform: translateZ(0);\n        }\n\n        100% {\n          opacity: 0;\n          transform: translateY(10px);\n          transform: translateZ(0);\n        }\n      }\n\n      &--active {\n        animation: showListItem 0.3s ease-in-out forwards;\n\n        @keyframes showListItem {\n          0% {\n            opacity: 0;\n            transform: translateY(10px);\n            transform: translateZ(0);\n          }\n\n          100% {\n            opacity: 1;\n            transform: translateY(0);\n            transform: translateZ(0);\n          }\n        }\n      }\n    }\n\n    .list-title {\n      background: var(--nano-color-blue--faded);\n      border-radius: 5px;\n      padding: 5px;\n      margin-inline-end: 2px;\n      display: block;\n      width: 100%;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      font-size: 0.9em;\n      color: var(--help-msg-color);\n    }\n\n    .list-button {\n      background: 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 button-base;\n    @include button-standard(\n      var(--btn-bg),\n      var(--btn-text),\n      #{nano-color(primary, shade)}\n    );\n\n    --nano-btn-icon-size: var(--btn-icon-size);\n    --nano-btn-line-height: var(--btn-icon-size);\n    --nano-btn-padding-top: var(--btn-padding-top);\n    --nano-btn-padding-bottom: var(--btn-padding-bottom);\n    --nano-btn-padding-start: var(--btn-padding-start);\n    --nano-btn-padding-end: var(--btn-padding-end);\n\n    max-width: 100%;\n    font-size: 0.9em;\n\n    :host([disabled]:not([disabled='false'])) & {\n      opacity: 0.4;\n    }\n\n    .file-upload--dragging & {\n      --nano-btn-border-style: dashed;\n    }\n    #{$self}__clear-btn {\n      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      width: auto;\n      color: var(--clear-btn-color);\n\n      :host(.is-invalid) & {\n        color: var(--clear-btn-color--invalid);\n      }\n\n      nano-icon {\n        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-width: 0;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Element,\n  ComponentInterface,\n  State,\n  Event,\n  EventEmitter,\n  Watch,\n  VNode,\n  Method,\n  Listen,\n} from '@stencil/core';\nimport type {\n  ControlValidity,\n  ControlValidityEventDetail,\n  FileInputChangeEventDetail,\n  FileWithUrl,\n} from '../../interface';\n\nlet fileInputIds = 0;\n\nlet getDataTransfer = () => new DataTransfer();\ntry {\n  getDataTransfer();\n} catch {\n  try {\n    getDataTransfer = () => new ClipboardEvent('').clipboardData;\n    getDataTransfer();\n  } catch {\n    getDataTransfer = null;\n  }\n}\n\ninterface FileValidation {\n  file: File;\n  valid: boolean;\n  validationMessage?: string;\n  location?: string;\n}\n/**\n * A better UI experience for `input type=\"file\"` form controls.\n *\n *   - Drag and Drop\n *   - Validation options\n *   - Preview and manage multiple files\n */\n@Component({\n  tag: 'nano-file-upload',\n  styleUrl: 'file-upload.scss',\n  scoped: true,\n})\nexport class FileUpload implements ComponentInterface {\n  private inputEl: HTMLInputElement;\n  private publicInputEl: HTMLInputElement;\n  private mo!: MutationObserver;\n  private fileInputId = `nano-file-upload-${fileInputIds++}`;\n  private canChangeFileList = !!getDataTransfer;\n  private removeFiles: FileValidation[] = [];\n\n  @State() hasHelperSlot: boolean;\n  @State() hasLabelSlot: boolean;\n  @State() errorMessage: string = '';\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    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-upload\" />\n                <span>\n                  {!!this.fileList.length\n                    ? this.fileList[0].file.name\n                    : this.placeholder}\n                </span>\n                {!!this.value && this.clearInput && !this.disabled && (\n                  <button\n                    type=\"button\"\n                    class=\"icon file-upload__clear-btn\"\n                    tabindex=\"-1\"\n                    onClick={this.onClearClick}\n                  >\n                    <nano-icon name=\"light/times\"></nano-icon>\n                  </button>\n                )}\n              </div>\n            </div>\n          )}\n          <input\n            aria-labelledby={labelId + ' ' + moreId + ' ' + listId}\n            type=\"file\"\n            id={this.fileInputId}\n            accept={this.accept}\n            class=\"file-upload__input\"\n            multiple={this.maxFiles > 1}\n            disabled={this.disabled}\n            name={this.canChangeFileList ? undefined : this.name}\n            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={true}\n          class=\"file-upload__input\"\n          disabled={this.disabled}\n          required={this.required}\n          accept={this.accept}\n          onInvalid={this.onInvalid}\n          onChange={this.onInputChange}\n        />\n      </div>,\n      this.showInlineError || this.hasHelperSlot ? (\n        <div class=\"file-upload__more\" id={moreId}>\n          {this.showInlineError && !!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/exclamation-triangle\"\n                        label=\"File error\"\n                      />\n                    </nano-tooltip>\n                  )}\n                  {this.canChangeFileList && (\n                    <nano-icon-button\n                      class=\"list-button list-button--view\"\n                      type=\"button\"\n                      iconName=\"light/eye\"\n                      label=\"View file\"\n                      target=\"_blank\"\n                      href={file.location}\n                    />\n                  )}\n                  {this.canChangeFileList && (\n                    <nano-icon-button\n                      onClick={(e) => this.onFileRemoveFileClick(e, file)}\n                      class=\"list-button list-button--remove\"\n                      iconName=\"light/times\"\n                      label=\"Remove file\"\n                    />\n                  )}\n                </li>\n              );\n            })}\n          </ul>\n        )}\n      </output>,\n    ];\n  };\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'file-upload': true,\n            'file-upload--dragging': this.isDragging,\n            'file-upload--focus': this.hasFocus,\n            'file-upload--invalid': this._invalid,\n          }}\n        >\n          {this.maxFiles > 1 ? <this.dropArea /> : <this.button />}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/nano-slides.cjs.entry.js

@@ -3824,7 +3824,7 @@ proto.shiftWrapCells = function () {
 
 const flickity = Flickity;
 
-const slidesCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0}:host([ready]){opacity:1}.slideshow{block-size:100%;position:relative}.flickity-container{block-size:0;opacity:0;transition:opacity 0.2s}.flickity-container.slides-ready{block-size:100%}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;block-size:100% !important}.flickity-slider{position:absolute;inline-size:100%;block-size:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:none;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.flickity-button-icon{fill:var(--navbtns-icon-color)}.flickity-button:disabled .flickity-button-icon{fill:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{inset-block-start:50%;inline-size:44px;block-size:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{inset-inline-start:10px}.flickity-prev-next-button.next{inset-inline-end:10px}.flickity-rtl .flickity-prev-next-button.previous{inset-inline:auto 10px}.flickity-rtl .flickity-prev-next-button.next{inset-inline:10px auto}.flickity-prev-next-button .flickity-button-icon{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}.flickity-page-dots{position:absolute;inline-size:100%;inset-block-end:10px;padding:0;margin:0;list-style:none;text-align:center;line-height:1;z-index:4}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;inline-size:10px;block-size:10px;margin-block:0;margin-inline:8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}.flickity-page-dots .dot.is-selected{opacity:1;background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:rgba(0, 0, 0, 0.9);-webkit-padding-after:35px;padding-block-end:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{inset-block-end:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{inset-inline:10px auto}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";
+const slidesCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0}:host([ready]){opacity:1}.slideshow{block-size:100%;position:relative}.flickity-container{block-size:0;opacity:0;transition:opacity 0.2s}.flickity-container.slides-ready{block-size:100%}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative}.flickity-slider{position:absolute;inline-size:100%;block-size:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:none;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.flickity-button-icon{fill:var(--navbtns-icon-color)}.flickity-button:disabled .flickity-button-icon{fill:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{inset-block-start:50%;inline-size:44px;block-size:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{inset-inline-start:10px}.flickity-prev-next-button.next{inset-inline-end:10px}.flickity-rtl .flickity-prev-next-button.previous{inset-inline:auto 10px}.flickity-rtl .flickity-prev-next-button.next{inset-inline:10px auto}.flickity-prev-next-button .flickity-button-icon{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}.flickity-page-dots{position:absolute;inline-size:100%;inset-block-end:10px;padding:0;margin:0;list-style:none;text-align:center;line-height:1;z-index:4}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;inline-size:10px;block-size:10px;margin-block:0;margin-inline:8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}.flickity-page-dots .dot.is-selected{opacity:1;background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:rgba(0, 0, 0, 0.9);-webkit-padding-after:35px;padding-block-end:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{inset-block-end:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{inset-inline:10px auto}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";
 
 const Slides = class {
   constructor(hostRef) {