/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
import { h } from './renderer.js';
import { d as defineCustomElement$5 } from './cta.js';
import { d as defineCustomElement$4 } from './icon.js';
import { d as defineCustomElement$3 } from './icon-button.js';
import { d as defineCustomElement$2 } from './tooltip.js';

const fileUploadCss = ".sc-nano-file-upload-h,*.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}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h,*.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}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--color-error:var(--nano-color-danger-1100);--color-error-light:var(--nano-color-danger-100);--color-text:var(--nano-color-neutral-1400);--color-drop-browse:var(--nano-color-primary-1200);--color-drop-border:var(--nano-color-primary-1200);--color-drop-bg:var(--nano-color-primary-75);--drop-height:3.5em;--color-btn-bg:var(--nano-color-base-0);--color-btn-border:var(--nano-color-primary-1000);--color-btn-text:var(--nano-color-primary-1000)}[disabled].sc-nano-file-upload-h:not([disabled=false]){cursor:not-allowed}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload--invalid.sc-nano-file-upload{--color-drop-bg:var(--color-error-light)}.file-upload--dragging.sc-nano-file-upload{--color-drop-bg:var(--nano-color-success-50)}.file-upload__label.sc-nano-file-upload{font-size:var(--nano-font-size-xs);margin:0;line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__label.sc-nano-file-upload{color:var(--nano-color-neutral-1200)}.file-upload__input.sc-nano-file-upload{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{margin-block:var(--nano-spacing-sm) 0;position:relative}.file-upload__more.sc-nano-file-upload:has(.file-upload__error) .file-upload__help.sc-nano-file-upload{display:none !important}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;font-style:italic;font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.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(--color-error);opacity:0;display:none;transition:all var(--nano-transition-fast) ease;transition-behavior:allow-discrete}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1;display:block}.file-upload__help.sc-nano-file-upload{opacity:1;color:var(--color-text);display:block}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0;display:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__help.sc-nano-file-upload{color:var(--nano-color-neutral-1200);opacity:0.8}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--color-drop-bg);color:var(--color-text);min-block-size:var(--drop-height);padding:var(--nano-spacing-md);display:flex;align-items:center;justify-content:center;position:relative;transition:background-color var(--nano-transition-x-fast) ease-in-out;font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{color:var(--nano-color-neutral-1200);background-color:var(--nano-color-neutral-300);border-color:var(--nano-color-neutral-1200)}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-width:1px;background-color:var(--color-drop-border);-webkit-mask-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6%2c 8' stroke-dashoffset='0'/%3e%3c/svg%3e\");mask-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6%2c 8' stroke-dashoffset='0'/%3e%3c/svg%3e\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;inset:0;transition:top var(--nano-transition-x-fast) ease-in-out, bottom var(--nano-transition-x-fast) ease-in-out, left var(--nano-transition-x-fast) ease-in-out, right var(--nano-transition-x-fast) ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{background-color:var(--color-error)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{background-color:var(--nano-color-success-1100);inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:var(--color-drop-browse);text-decoration:underline;z-index:1;cursor:pointer;position:relative}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:var(--nano-color-neutral-1200);opacity:0.8}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__list.sc-nano-file-upload{list-style:none;margin:var(--nano-spacing-xs) 0 0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;animation:hideListItem var(--nano-transition-fast) ease-in-out forwards}@keyframes hideListItem{0%{opacity:1}100%{opacity:0}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem var(--nano-transition-fast) ease-in-out forwards}@keyframes showListItem{0%{opacity:0}100%{opacity:1}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--color-drop-bg);padding:var(--nano-spacing-xs);margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--nano-font-size-2xs);color:var(--color-text)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{--padding:0.406rem;background:var(--color-drop-bg);margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:var(--color-error)}.file-upload__drop-area.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload{margin-block:var(--nano-spacing-sm) 0}.file-upload__button.sc-nano-file-upload{max-inline-size:100%;display:flex}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload{color:var(--color-error)}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;display:flex;align-items:center;inline-size:auto;color:var(--color-btn-text);background:var(--color-btn-bg)}.is-invalid.sc-nano-file-upload-h .file-upload__clear-btn.sc-nano-file-upload{color:var(--color-error)}.file-upload__clear-btn.sc-nano-file-upload:focus-visible>nano-icon.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__clear-btn.sc-nano-file-upload .nano-icon.sc-nano-file-upload{margin:0.1rem 0 0 var(--nano-spacing-sm)}.file-upload--focus.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__btn-content.sc-nano-file-upload div.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0;display:block}.file-upload--focus.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload div.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__icon.sc-nano-file-upload{align-self:center;margin-inline-start:var(--nano-spacing-sm);size:var(--nano-icon-size-small)}.file-upload__icon-error.sc-nano-file-upload{color:var(--color-error);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__icon-error.sc-nano-file-upload{opacity:1}.file-upload__icon-success.sc-nano-file-upload{color:var(--nano-color-success-1100);opacity:0}.file-upload--valid.sc-nano-file-upload .file-upload__icon-success.sc-nano-file-upload{opacity:1}";

let fileInputIds = 0;
let getDataTransfer = () => new DataTransfer();
try {
    getDataTransfer();
}
catch {
    try {
        getDataTransfer = () => new ClipboardEvent('').clipboardData;
        getDataTransfer();
    }
    catch {
        getDataTransfer = null;
    }
}
const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.nanoChange = createEvent(this, "nanoChange", 7);
        this.nanoFocus = createEvent(this, "nanoFocus", 7);
        this.nanoBlur = createEvent(this, "nanoBlur", 7);
        this.nanoValidate = createEvent(this, "nanoValidate", 7);
    }
    inputEl;
    publicInputEl;
    mo;
    fileInputId = `nano-file-upload-${fileInputIds++}`;
    canChangeFileList = !!getDataTransfer;
    removeFiles = [];
    hasHelperSlot;
    hasLabelSlot;
    errorMessage = '';
    isDragging = false;
    fileList = [];
    fileListChange() {
        if (this.canChangeFileList) {
            this.publicInputEl.value = '';
            this.inputEl.files = this.arrToFileList(this.fileList.map((file) => file.file));
            setTimeout(() => {
                this.nanoChange.emit({ value: this.value, files: this.files });
            }, 20);
        }
    }
    hasFocus;
    get host() { return this; }
    // public props
    /** Name of the form control. Submitted with the form as part of a name/value pair. */
    name;
    /** The accept attribute value is a string that defines the file types the file input should accept.
     * E.g. for a MS Word file: `.doc, .docx,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document` */
    accept;
    /** Specifies which camera to use for capture of image or video data. `user` for the user-facing camera and/or microphone.
     * `environment` specifies the the outward-facing camera and/or microphone. If the requested facing mode isn't available,
     * the user agent may fall back to its preferred default mode. */
    capture;
    /** The maximum file size allowed per file (Megabytes) */
    maxFileSize = 1;
    /** The maximum number of files that can be selected. Defaults to 1 */
    maxFiles = 1;
    _label = '';
    /** String to place within a label element. */
    get label() {
        return this.required && !this._label.endsWith('*')
            ? this._label + ' *'
            : this._label;
    }
    set label(value) {
        this._label = value;
    }
    /** Placeholder only used within single file uploads. */
    placeholder = 'Choose a file';
    /** Visually hide the label - but make it accessible. */
    hideLabel = false;
    /** If `true`, the user must select a file to upload before submitting a form. */
    required = false;
    /** If `true`, the user cannot interact with the select. */
    disabled = false;
    /** If `true`, a clear icon will appear in the input when there is a value.
     * Clicking it clears the input. Only used within single file uploads. */
    clearable = false;
    /** Whether to show validation errors underneath input */
    showInlineError = true;
    /** When should the field perform validation */
    validateOn = 'submitThenDirty';
    /** The form element to associate with this input (its form owner). Must be the id of a form. */
    form;
    shouldValidate() {
        if (!this.inputEl)
            return;
        this.validate();
        requestAnimationFrame(() => {
            if (this.validateOn === 'dirty')
                this.showInlineValidation();
        });
    }
    _invalid = null;
    /** This will be true when the control is in an invalid state.
     * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly */
    get invalid() {
        return this._invalid;
    }
    /**
     * Current validation message - if any. @readonly
     */
    get validityMessage() {
        if (!this.inputEl)
            return '';
        return this.inputEl.validationMessage;
    }
    /** A File array that lists every selected file.
     * Has an added `objectURL` property returning a `DOMString`
     * containing an object URL that can be used to reference the contents of the specified source
     * This list has no more than one member unless the multiple attribute is specified */
    get files() {
        return this.inputEl
            ? Array.from(this.inputEl.files).map((file) => {
                file.objectURL = URL.createObjectURL(file);
                return file;
            })
            : [];
    }
    set files(fs) {
        this.addNewFiles(this.arrToFileList(fs));
    }
    /** A file input's value attribute contains a DOMString that represents the path to the selected file(s).
     * If the user selected multiple files, the value represents the first file in the list of files they selected.
     * You can reset the file-upload control by setting the value to an empty string e.g. `var input.value = ''` */
    get value() {
        return this.inputEl ? this.inputEl.value : '';
    }
    set value(val) {
        if (val === '' && this.inputEl) {
            this.fileList = [];
            this.inputEl.value = '';
        }
    }
    // Events
    /** Emitted when the value has changed. */
    nanoChange;
    /** Emited when the checkbox is focused */
    nanoFocus;
    /** Emited when the checkbox is blurred */
    nanoBlur;
    /** Called when validation is performed (which depends on `validateOn`).
     * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`. */
    nanoValidate;
    // Public methods
    /** Get the current state of the control.
     * @param validateFirst - perform validation first before reporting
     * @returns `{ isValid: boolean, errorMessage: string }` */
    async reportValidity(validateFirst) {
        if (validateFirst) {
            this.validate();
            this.showInlineValidation();
        }
        return {
            isValid: !this.invalid,
            errorMessage: this.inputEl.validationMessage,
        };
    }
    /** Sets focus on the specified `nano-input`. Use this method instead of the global
     * `input.focus()`. */
    async setFocus() {
        if (this.inputEl)
            this.inputEl.focus();
    }
    /** @returns the native `<input>` element used under the hood */
    getInputElement() {
        return Promise.resolve(this.inputEl);
    }
    /** 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.
     * @param message */
    async showError(message) {
        if (this.inputEl) {
            this.inputEl.setCustomValidity(message);
            this.showInlineValidation();
        }
    }
    // Listeners
    globalClickHandler(e) {
        if (!this.hasFocus)
            return;
        if (e.composedPath().every((node) => node !== this.host))
            this.onBlur();
    }
    globalKeydownHandler(e) {
        if (!this.hasFocus || e.key !== 'Tab')
            return;
        if (e.target !== this.inputEl)
            this.onBlur();
    }
    onReset(e) {
        const form = this.form
            ? document.querySelector('#' + this.form)
            : this.host.closest('form');
        if (!form || e.target !== this.host.closest('form'))
            return;
        this.value = '';
    }
    // Private methods
    onClearClick = () => {
        this.value = '';
    };
    onBlur = () => {
        this.hasFocus = false;
        this.validate();
        if (this.validateOn === 'dirty')
            this.showInlineValidation();
        this.nanoBlur.emit();
    };
    onFocus = () => {
        this.hasFocus = true;
        this.nanoFocus.emit();
    };
    arrToFileList(files) {
        const fileList = getDataTransfer();
        for (let i = 0, len = files.length; i < len; i++)
            fileList.items.add(files[i]);
        return fileList.files;
    }
    checkFileSize(size) {
        return size / 1000000 <= this.maxFileSize;
    }
    checkFileType(type) {
        if (!this.accept)
            return true;
        return (!!type && this.accept.match(type) && this.accept.match(type).length > 0);
    }
    validate = () => {
        this.errorMessage = '';
        this.inputEl.setCustomValidity('');
        let error;
        if (!this.inputEl.validity.valid) {
            error = this.inputEl.validationMessage;
        }
        else {
            if (this.fileList.length > this.maxFiles) {
                error = `Maximum number of files exceeded (${this.maxFiles})`;
            }
            else {
                this.fileList.forEach((fileItem) => {
                    let listeItemError = null;
                    if (!this.checkFileSize(fileItem.file.size)) {
                        listeItemError =
                            'Maximum file size exceeded. Max file size is ' +
                                this.maxFileSize +
                                'Mb';
                    }
                    else if (!this.checkFileType(fileItem.file.type)) {
                        listeItemError = `File type is not allowed (${this.accept})`;
                    }
                    fileItem.validationMessage = listeItemError;
                    fileItem.valid = !listeItemError;
                    if (listeItemError) {
                        error = listeItemError;
                    }
                });
            }
        }
        if (error) {
            this.inputEl.setCustomValidity(error);
        }
        else {
            this.inputEl.setCustomValidity('');
            this.errorMessage = '';
        }
    };
    showInlineValidation(ev) {
        if (this.validateOn === 'submitThenDirty')
            this.validateOn = 'dirty';
        this._invalid = false;
        this.errorMessage = '';
        if (!this.inputEl.validity.valid) {
            this.errorMessage = this.inputEl.validationMessage;
            this._invalid = true;
        }
        this.nanoValidate.emit({
            isValid: !this._invalid,
            errorMessage: this.inputEl.validationMessage,
            originalEvent: ev,
        });
    }
    slotChangeObserver() {
        if (this.mo)
            this.mo.disconnect();
        const mo = (this.mo = new MutationObserver(() => this.processSlottedContent()));
        mo.observe(this.host, { childList: true, subtree: true });
    }
    processSlottedContent() {
        // see if we have slot content
        this.hasLabelSlot = !!this.host.querySelectorAll('[slot="label"]');
        this.hasHelperSlot = !!this.host.querySelector('[slot="helper"]');
    }
    addNewFiles(files) {
        const fileList = Array.from(files).map((file) => {
            return {
                file: file,
                location: URL.createObjectURL(file),
                valid: true,
                validationMessage: null,
            };
        });
        // if we have a list and we're in a browser that can amend files
        // append files to the list, otherwise replace
        if (this.canChangeFileList && this.maxFiles > 1) {
            const newFiles = fileList.filter((findFile) => !this.fileList.find((file) => file.file.name === findFile.file.name));
            this.fileList = [...this.fileList, ...newFiles];
        }
        else
            this.fileList = fileList;
    }
    // event handlers & hooks
    onInvalid = (ev) => {
        if (this.showInlineError)
            ev.preventDefault();
        this.validate();
        this.showInlineValidation(ev);
    };
    onFileChoose = (e) => {
        const files = e.target.files;
        if (files && files.length)
            this.addNewFiles(e.target.files);
    };
    onFileRemoveFileClick = (e, file) => {
        if (!this.canChangeFileList)
            return;
        this.removeFiles.push(file);
        e.target
            .closest('.file-upload__list-item--active')
            .classList.remove('file-upload__list-item--active');
    };
    onFileRemoveAnim = () => {
        if (!this.canChangeFileList || !this.removeFiles.length)
            return;
        this.fileList = this.fileList.filter((fileItem) => !this.removeFiles.find((rmFile) => rmFile === fileItem));
        try {
            this.removeFiles.forEach((f) => f.location ? URL.revokeObjectURL(f.location) : '');
        }
        catch (e) {
            console.error(e);
        }
        this.removeFiles = [];
    };
    onInputChange = () => {
        this.nanoChange.emit({ value: this.value, files: this.files });
    };
    onDragStop = (e) => {
        e.preventDefault();
        e.stopPropagation();
        this.isDragging = false;
    };
    onDragStart = (e) => {
        e.preventDefault();
        e.stopPropagation();
        this.isDragging = true;
    };
    onDrop = (e) => {
        this.onDragStop(e);
        if (e.dataTransfer.files && e.dataTransfer.files.length)
            this.addNewFiles(e.dataTransfer.files);
    };
    // Component lifecycle
    disconnectedCallback() {
        if (this.mo)
            this.mo.disconnect();
    }
    componentDidLoad() {
        this.slotChangeObserver();
    }
    componentWillLoad() {
        this.processSlottedContent();
    }
    FileUploadInput = (eleType, listId) => {
        const labelId = this.fileInputId + '-lbl';
        const moreId = this.showInlineError || this.hasHelperSlot
            ? this.fileInputId + '-more'
            : '';
        return [
            h("div", { class: 'file-upload__' + eleType + '-wrap' }, h("label", { class: `file-upload__` + eleType, htmlFor: this.fileInputId, id: labelId, onDrop: (e) => {
                    this.onDrop(e);
                    this.onDragStop(e);
                }, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (h("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (h("slot", { name: "label" })))), eleType === 'drop' && (h("div", { class: "file-upload__drop-area" }, h("div", null, this.hasLabelSlot && h("slot", { name: "label" })), h("div", null, "Drag and drop or\u00A0", h("span", null, "browse")))), eleType === 'btn' && (h("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, h("nano-cta", { secondary: true, class: `file-upload__btn-content` }, h("div", { class: "button", disabled: this.disabled }, this.fileList.length
                ? this.fileList[0].file.name
                : this.placeholder)), !!this.value && this.clearable && !this.disabled && (h("button", { type: "button", class: "icon file-upload__clear-btn", tabindex: "0", "aria-label": "Clear selected file", onClick: this.onClearClick }, h("nano-icon", { name: "light/xmark" }))), !this.disabled &&
                this.showInlineError &&
                (this._invalid ? (h("nano-icon", { name: "solid/circle-xmark", class: "file-upload__icon file-upload__icon-error" })) : (h("nano-icon", { name: "solid/circle-check", class: "file-upload__icon file-upload__icon-success" }))))), h("input", { "aria-labelledby": labelId + ' ' + moreId + ' ' + listId, type: "file", id: this.fileInputId, accept: this.accept, class: "file-upload__input", multiple: this.maxFiles > 1, disabled: this.disabled, name: this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
                    if (this.canChangeFileList) {
                        this.publicInputEl = input;
                        return;
                    }
                    this.inputEl = input;
                }, onChange: this.onFileChoose, onFocus: this.onFocus, onReset: this.onInputChange })), h("input", { name: !this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
                    if (!this.canChangeFileList)
                        return;
                    this.inputEl = input;
                }, type: "file", id: this.fileInputId + '-hidden', tabIndex: -1, multiple: true, class: "file-upload__input", disabled: this.disabled, required: this.required, accept: this.accept, onInvalid: this.onInvalid, onChange: this.onInputChange })),
            this.showInlineError || this.hasHelperSlot ? (h("div", { class: "file-upload__more", id: moreId }, this.showInlineError && !!this.errorMessage.length ? (h("div", { class: "file-upload__error" }, this.errorMessage)) : (''), h("div", { class: "file-upload__help" }, h("slot", { name: "helper" })))) : (''),
        ];
    };
    button = () => {
        return this.FileUploadInput('btn');
    };
    dropArea = () => {
        const listId = this.fileInputId + '-list';
        return [
            this.FileUploadInput('drop', listId),
            h("output", { class: "file-upload__list-wrap", id: listId }, !!this.fileList && this.fileList.length > 0 && (h("ul", { class: "file-upload__list list" }, this.fileList.map((file) => {
                return (h("li", { key: file.file.name, class: "file-upload__list-item file-upload__list-item--active list-item", onAnimationEnd: (_) => this.onFileRemoveAnim() }, h("span", { class: "list-title" }, file.file.name), !file.valid && (h("nano-tooltip", { content: file.validationMessage, placement: "left" }, h("nano-icon-button", { class: "list-button list-error", iconName: "light/triangle-exclamation", label: "File error" }))), this.canChangeFileList && (h("nano-icon-button", { class: "list-button list-button--view", type: "button", iconName: "light/eye", label: "View file", target: "_blank", href: file.location })), this.canChangeFileList && (h("nano-icon-button", { onClick: (e) => this.onFileRemoveFileClick(e, file), class: "list-button list-button--remove", iconName: "light/xmark", label: "Remove file" }))));
            })))),
        ];
    };
    render() {
        return (h(Host, { key: 'c6fc291c7ac3c990d5304a2589c7dd1a0193333e', class: "nano-file-upload" }, h("div", { key: '12fd1e6551fe6ff6e1eb6a84000a21e526c61c36', class: {
                'file-upload': true,
                'file-upload--dragging': this.isDragging,
                'file-upload--focus': this.hasFocus,
                'file-upload--invalid': this._invalid === true,
                'file-upload--valid': this._invalid === false,
            } }, this.maxFiles > 1 ? h(this.dropArea, null) : h(this.button, null))));
    }
    static get watchers() { return {
        "fileList": ["fileListChange", "shouldValidate"],
        "maxFiles": ["shouldValidate"],
        "maxFileSize": ["shouldValidate"],
        "capture": ["shouldValidate"],
        "accept": ["shouldValidate"],
        "required": ["shouldValidate"],
        "disabled": ["shouldValidate"]
    }; }
    static get style() { return fileUploadCss; }
}, [262, "nano-file-upload", {
        "name": [1],
        "accept": [1],
        "capture": [1],
        "maxFileSize": [2, "max-file-size"],
        "maxFiles": [2, "max-files"],
        "label": [6145],
        "placeholder": [1],
        "hideLabel": [4, "hide-label"],
        "required": [4],
        "disabled": [516],
        "clearable": [4],
        "showInlineError": [516, "show-inline-error"],
        "validateOn": [1025, "validate-on"],
        "form": [1],
        "invalid": [2568],
        "validityMessage": [2049, "validity-message"],
        "files": [6160],
        "value": [6145],
        "hasHelperSlot": [32],
        "hasLabelSlot": [32],
        "errorMessage": [32],
        "isDragging": [32],
        "fileList": [32],
        "hasFocus": [32],
        "_invalid": [32],
        "reportValidity": [64],
        "setFocus": [64],
        "getInputElement": [64],
        "showError": [64]
    }, [[8, "click", "globalClickHandler"], [8, "keydown", "globalKeydownHandler"], [16, "reset", "onReset"]], {
        "fileList": ["fileListChange", "shouldValidate"],
        "maxFiles": ["shouldValidate"],
        "maxFileSize": ["shouldValidate"],
        "capture": ["shouldValidate"],
        "accept": ["shouldValidate"],
        "required": ["shouldValidate"],
        "disabled": ["shouldValidate"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["nano-file-upload", "nano-cta", "nano-icon", "nano-icon-button", "nano-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "nano-file-upload":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, FileUpload);
            }
            break;
        case "nano-cta":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "nano-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "nano-icon-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "nano-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const NanoFileUpload = FileUpload;
const defineCustomElement = defineCustomElement$1;

export { NanoFileUpload, defineCustomElement };
