@postnord/pn-marketweb-components 4.1.0 → 4.1.2

package/umd/modules/@postnord/web-components/components/pn-file-upload.js

@@ -2,526 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { u as uuidv4, g as getBytesFromHumanReadableFileSize, k as awaitTopbar, o as ripple, e as en } from './helpers.js';
-import { a as alert_exclamation_circle } from './alert_exclamation_circle.js';
-import { c as check } from './check.js';
-import { d as defineCustomElement$5 } from './pn-button2.js';
-import { d as defineCustomElement$4 } from './pn-icon2.js';
-import { d as defineCustomElement$3 } from './pn-progress-bar2.js';
-import { d as defineCustomElement$2 } from './pn-spinner2.js';
-
-const icon$2 = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M9 7.5a4.5 4.5 0 1 1 9 0V16a6 6 0 0 1-12 0v-3a1 1 0 1 1 2 0v3a4 4 0 0 0 8 0V7.5a2.5 2.5 0 0 0-5 0V16a1 1 0 1 0 2 0v-6a1 1 0 1 1 2 0v6a3 3 0 1 1-6 0zM7 9a1 1 0 0 1 1 1v.1a1 1 0 1 1-2 0V10a1 1 0 0 1 1-1" clip-rule="evenodd"/></svg>';
-const attachment = icon$2;
-
-const icon$1 = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M10.5 4a1 1 0 0 0-1 1h5a1 1 0 0 0-1-1zm6 1a3 3 0 0 0-3-3h-3a3 3 0 0 0-3 3h-2A2.5 2.5 0 0 0 5 9.95V19a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V9.95A2.5 2.5 0 0 0 18.5 5zm.5 5H7v9a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1zM5.5 7a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1zm4.5 5a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1m4 0a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1" clip-rule="evenodd"/></svg>';
-const trash_can = icon$1;
-
-const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-2a1 1 0 1 1 0-2h2a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h2a1 1 0 1 1 0 2H6a3 3 0 0 1-3-3zm9 0a1 1 0 0 1 .707.293l4 4a1 1 0 0 1-1.414 1.414L13 11.414V17a1 1 0 1 1-2 0v-5.586l-2.293 2.293a1 1 0 0 1-1.414-1.414l4-4A1 1 0 0 1 12 8m-1 12.1V20a1 1 0 1 1 2 0v.1a1 1 0 1 1-2 0" clip-rule="evenodd"/></svg>';
-const upload = icon;
-
-class PnFileUploadError extends Error {
-    element;
-    code;
-    data;
-    constructor(message, element, code = 'INVALID', data = null) {
-        super(message);
-        this.name = 'PNFileUploadError';
-        this.element = element;
-        this.code = code;
-        this.data = data;
-    }
-}
-
-const translations = {
-    CLICKORDRAG: {
-        sv: 'Klicka eller dra en fil hit',
-        en: 'Click or drag a file here',
-        da: 'Klik eller træk en fil hertil',
-        fi: 'Klikkaa tai vedä tiedosto tähän',
-        no: 'Klikk eller dra en fil hit',
-    },
-    ACCEPTEDFORMATS: {
-        sv: 'Filformat som stöds',
-        en: 'Supported formats',
-        da: 'Støttede filformater',
-        fi: 'Tuetut tiedostomuodot',
-        no: 'Understøttede filformater',
-    },
-    MAXFILESIZE: {
-        sv: 'Max filstorlek',
-        en: 'Max filesize',
-        da: 'Max filstørrelse',
-        fi: 'Maksimitiedostokoko',
-        no: 'Maks filstørrelse',
-    },
-    REMOVE_FILE: {
-        sv: 'Ta bort filen',
-        en: 'Remove file',
-        da: 'Fjern fil',
-        fi: 'Poista tiedosto',
-        no: 'Fjern fil',
-    },
-};
-
-const pnFileUploadCss = "pn-file-upload.hover .pn-file-upload-container .pn-dropzone-container{background-color:#e0f8ff}pn-file-upload .pn-file-upload-input{position:absolute;z-index:1;left:0;top:0;opacity:0;height:100%;width:100%;-webkit-tap-highlight-color:transparent}pn-file-upload .pn-file-upload-input:hover{cursor:pointer}pn-file-upload .pn-file-upload-input:hover+.pn-dropzone-inner{border-color:#005d92;background-color:#e0f8ff}pn-file-upload .pn-file-upload-input:focus-visible+.pn-dropzone-inner{border-color:#005d92;outline-color:#005d92}pn-file-upload .pn-file-upload-input:disabled{pointer-events:none}pn-file-upload .pn-file-upload-input:disabled+.pn-dropzone-inner{pointer-events:none;background-color:#f3f2f2;border-color:#2d2013}pn-file-upload .pn-file-upload-input:disabled+.pn-dropzone-inner .headline a{color:#5e554a}pn-file-upload .pn-file-upload-input:disabled+.pn-dropzone-inner .pn-icon-svg path{fill:#5e554a}pn-file-upload .pn-file-upload-container{position:relative;display:flex;flex-direction:column;gap:1em}pn-file-upload .pn-file-upload-container .pn-dropzone-container{position:relative}pn-file-upload .pn-file-upload-container .pn-dropzone-inner{position:relative;text-align:center;overflow:hidden;padding:2.5em;border:0.0625em #969087 dashed;border-radius:0.5em;display:flex;flex-direction:column;align-items:center;gap:0.5em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-file-upload .pn-file-upload-container .pn-dropzone-inner{transition-duration:0s;transition-delay:0s}}pn-file-upload .pn-file-upload-container .pn-dropzone-inner .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}pn-file-upload .pn-file-upload-container .pn-dropzone-inner[data-hover]{background-color:#e0f8ff;border-color:#005d92}pn-file-upload .pn-file-upload-container .pn-dropzone-inner[data-invalid]{border-color:#a70707}pn-file-upload .pn-file-upload-container .pn-dropzone-inner .pn-file-upload-dropzone{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0.5em}pn-file-upload .files-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1em}pn-file-upload .files-list .filename{font-weight:400;font-size:0.75em}pn-file-upload .files-list .files-list-item{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;background:#f9f8f8;padding:1em;border-radius:0.5em}pn-file-upload .files-list .files-list-item .file-list-item-title{display:flex;align-items:center;gap:0.5em;margin-right:0.5em}pn-file-upload .files-list .files-list-item>pn-progress-bar{margin-right:25em;flex:1}pn-file-upload .files-list .files-list-item.files-list-item-error{color:#a70707;background-color:#fdefee}pn-file-upload .files-list .files-list-item-text-error{color:#a70707;font-size:0.875em;font-weight:300;margin-top:0.25em}pn-file-upload .pn-file-upload-title{color:#2d2013}pn-file-upload .pn-file-upload-subtitle{color:#5e554a;font-size:0.75em}";
-
-const PnFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class PnFileUpload extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.filesAdded = createEvent(this, "filesAdded", 7);
-        this.update = createEvent(this, "update", 7);
-        this.fileuploaderror = createEvent(this, "fileuploaderror", 7);
-        this.valid = createEvent(this, "valid", 7);
-        this.uploadFile = createEvent(this, "uploadFile", 7);
-        this.uploadCancelled = createEvent(this, "uploadCancelled", 7);
-        this.uploadCompleted = createEvent(this, "uploadCompleted", 7);
-    }
-    id = `pn-file-upload-${uuidv4()}`;
-    idFileUpload = `${this.id}-label`;
-    idHelpertext = `${this.id}-helpertext`;
-    idAccepttext = `${this.id}-accept`;
-    fileInputElement;
-    invalid = false;
-    maxSizeInBytes = 0;
-    get hostElement() { return this; }
-    files = [];
-    isHovering = false;
-    /** The default label is "Click or drag a file here". @since v7.1.0 */
-    label;
-    /**
-     * The helpertext defaults to "Supported formats {x} and max filesize {y}",
-     * if there is a value set for the prop `accept`.
-     * @since v7.1.0
-     **/
-    helpertext;
-    /** Manually set the language. @category Features */
-    language = null;
-    /** Always hide the progress bar, even when upload has begun. @category Features  */
-    hideProgress = false;
-    /**
-     * Set a HTML name.
-     * @since v7.1.0
-     * @category HTML attributes
-     */
-    name;
-    /** Set which file types the input accepts. Ex: .docs,.xml @category HTML attributes */
-    accept;
-    /** Set the maximum upload size. @category HTML attributes */
-    maxSize = '';
-    /**
-     * Use the capture mode.
-     * @since v7.1.0
-     * @category HTML attributes
-     */
-    capture;
-    /**
-     * Set maximum amount of files to be selected.
-     * Any value above 1 will force the `multiple` to be `true`.
-     * @category HTML attributes
-     **/
-    limit = 1;
-    /** Allow multiple files to be selected. Will be overwritten to true, if `limit` is above 1. @category HTML attributes */
-    multiple;
-    /** Set the input as required. @category HTML attributes */
-    required = false;
-    /** Disable the input. @category HTML attributes */
-    disabled = false;
-    handleLimit() {
-        this.multiple = this.limit > 1;
-    }
-    handleMaxBytes() {
-        this.maxSizeInBytes = getBytesFromHumanReadableFileSize(this.maxSize);
-    }
-    /** This event is emitted when you add files. Either via drag and drop or using the file explorer. */
-    filesAdded;
-    /** Emitted everytime an update is made to one of the files. */
-    update;
-    /** If any error occurs, such as: invalid file type, size, limit or error during upload. */
-    fileuploaderror;
-    /** Emitted everytime you select a valid file. It's a good idea to use this event in order to make use of the built in validation features. */
-    valid;
-    /** Emitted once the file upload has begun. */
-    uploadFile;
-    /** Emitted when an upload has been cancelled before completion. */
-    uploadCancelled;
-    /** Emitted once the upload is finished. */
-    uploadCompleted;
-    async componentWillLoad() {
-        this.handleLimit();
-        this.handleMaxBytes();
-        if (this.language === null)
-            await awaitTopbar(this.hostElement);
-    }
-    /** Start the upload of all selected files (excludes invalid files). */
-    async startUpload() {
-        if (!this.files.length)
-            return;
-        this.files = this.files.map((file, index) => {
-            if (file.status === 'queue') {
-                file.status = 'start';
-                this.uploadFile.emit({
-                    file: file,
-                    index: index,
-                    uploader: this,
-                });
-            }
-            return file;
-        });
-        const promises = this.files.map(file => file.xhrPromise().catch(() => { }));
-        return Promise.all(promises).then(data => {
-            const added = data.filter(item => item);
-            this.uploadCompleted.emit(added);
-        });
-    }
-    /** Clear the selected files, state and input value. */
-    async clearUpload() {
-        this.files = [];
-        this.fileInputElement.value = '';
-        this.invalid = false;
-        this.filesAdded.emit([]);
-    }
-    /** Remove the selected file. */
-    async removeFile(targetFile) {
-        let valid = true;
-        const files = [];
-        for (const fileIndex in this.files) {
-            const file = this.files[fileIndex];
-            if (!file.filename) {
-                continue;
-            }
-            // add to files if the uuid doesn't match
-            if (file.uuid !== targetFile.uuid) {
-                try {
-                    this._validateFileSize(file);
-                    this._validateFileType(file);
-                    valid = true;
-                }
-                catch (error) {
-                    valid = false;
-                    file.error = error;
-                    file.progress = 0;
-                    file.status = 'error';
-                }
-                files.push(file);
-            }
-            else if (file.status === 'start') {
-                file.xhr.abort();
-                this.uploadCancelled.emit(file);
-            }
-        }
-        this.filesAdded.emit(files);
-        this.files = files;
-        this.invalid = !valid || !this._isNotGreaterThanLimit();
-        this._checkValidity();
-        this._emitUpdateEvent();
-    }
-    /** Update an existing file. */
-    async updateFile(file, index = null) {
-        let files = this.files;
-        // find the index if not defined
-        if (index === null) {
-            for (const fIndex in files) {
-                const fFile = files[fIndex];
-                if (fFile.uuid === file.uuid) {
-                    index = fIndex;
-                    break;
-                }
-            }
-        }
-        if (files[index]) {
-            if (file.progress >= 100) {
-                file.progress = 100;
-                file.status = 'completed';
-            }
-            else if (file.progress < 0) {
-                file.status = 'start';
-                file.progress = 0;
-            }
-            if (file.error) {
-                file.progress = 0;
-                file.status = 'error';
-                file.errorMessage = file.errorMessage || 'There was an error uploading your file, please try again';
-            }
-            files[index] = file;
-        }
-        this.files = [...files];
-    }
-    async _addFilesFromFileList(fileList) {
-        if (this.disabled || this.invalid) {
-            return;
-        }
-        const files = Array.from(fileList);
-        const promises = [];
-        if (this.multiple) {
-            files.forEach(file => promises.push(this._addFile(file)));
-        }
-        else {
-            const file = files[0];
-            if (this.limit === 1) {
-                this.files = [];
-                promises.push(this._addFile(file));
-            }
-            else {
-                promises.push(this._addFile(file));
-            }
-        }
-        return Promise.all(promises).then(() => {
-            this.filesAdded.emit(this.files);
-            this._isNotGreaterThanLimit();
-            this._checkValidity();
-            this._emitUpdateEvent();
-        });
-    }
-    async _onAddFile() {
-        const files = this.fileInputElement.files;
-        return await this._addFilesFromFileList(files);
-    }
-    _onDragOverFile(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isHovering = true;
-    }
-    _onDragLeaveFile(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isHovering = false;
-    }
-    _onDropFile(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isHovering = false;
-        ripple(event, this.hostElement, '.pn-dropzone-inner');
-        this._addFilesFromFileList(event.dataTransfer.files);
-    }
-    _validateFileType(file) {
-        const accepts = this.accept ? this.accept.split(',') : [];
-        if (accepts.length) {
-            let valid = false;
-            for (const accept of accepts) {
-                const type = accept.trim().toLowerCase();
-                const isMimeType = /^\w+\/[a-z\.\-]+$/i;
-                const extension = file.filename.match(/\.\w{3,4}($|\?)/)?.[0]?.toLowerCase();
-                if ((isMimeType.test(type) && file.contentType === type) || extension === type) {
-                    valid = true;
-                    break;
-                }
-            }
-            if (!valid) {
-                const error = new PnFileUploadError(`Invalid file type.`, this.hostElement, 'INVALID_FILE_TYPE', file);
-                this.invalid = true;
-                this.fileuploaderror.emit(error);
-                throw error;
-            }
-        }
-    }
-    _validateFileSize(file) {
-        if (this.maxSizeInBytes > 0 && file.filesize > this.maxSizeInBytes) {
-            const error = new PnFileUploadError(`You can only add up to ${this.maxSize}.`, this.hostElement, 'MAX_FILE_SIZE', file);
-            this.invalid = true;
-            this.fileuploaderror.emit(error);
-            throw error;
-        }
-    }
-    _validateLimit() {
-        if (this.limit && this.files.length > this.limit) {
-            const error = new PnFileUploadError(`You can only add up to ${this.limit} files.`, this.hostElement, 'MAX_LIMIT', this.files);
-            this.invalid = true;
-            this.fileuploaderror.emit(error);
-            throw error;
-        }
-    }
-    _isNotGreaterThanLimit() {
-        try {
-            this._validateLimit();
-            return true;
-        }
-        catch (error) {
-            return false;
-        }
-    }
-    _checkValidity() {
-        if (!this.invalid) {
-            this.valid.emit(this);
-        }
-        return !this.invalid;
-    }
-    _createBase64FromFile(file) {
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onload = () => resolve(reader.result);
-            reader.onerror = error => reject(error);
-            reader.onabort = () => reject('ABORTED');
-            reader.readAsDataURL(file);
-        });
-    }
-    async _addFile(file) {
-        return this._createBase64FromFile(file).then(data => {
-            const split = data.split(',');
-            const base64 = split[1];
-            const contentType = split[0].split(':')[1].split(';')[0];
-            const request = new XMLHttpRequest();
-            const uploadFile = {
-                uuid: uuidv4(),
-                filename: file.name,
-                filesize: file.size,
-                progress: 0,
-                status: 'queue',
-                base64,
-                contentType,
-                error: null,
-                errorMessage: '',
-                file,
-                xhr: request,
-            };
-            try {
-                this._validateFileSize(uploadFile);
-                this._validateFileType(uploadFile);
-            }
-            catch (error) {
-                uploadFile.error = error;
-                uploadFile.progress = 0;
-                uploadFile.status = 'error';
-            }
-            uploadFile.xhrPromise = () => {
-                return new Promise((resolve, reject) => {
-                    request.responseType = 'json';
-                    request.addEventListener('progress', event => {
-                        if (event.lengthComputable) {
-                            uploadFile.progress = (event.loaded / event.total) * 100;
-                            this.updateFile(uploadFile);
-                        }
-                        else {
-                            uploadFile.progress = 100;
-                            this.updateFile(uploadFile);
-                        }
-                    });
-                    request.addEventListener('load', (response) => resolve(response.target.response));
-                    request.addEventListener('error', error => {
-                        uploadFile.error = error;
-                        uploadFile.errorMessage = 'There was an error uploading your file, please try again';
-                        this.updateFile(uploadFile);
-                        const errorEvent = new PnFileUploadError('There was an error uploading your file, please try again', this.hostElement, 'UPLOAD_SERVER_ERROR', uploadFile);
-                        this.fileuploaderror.emit(errorEvent);
-                        reject(error);
-                    });
-                });
-            };
-            this.files = [...this.files, uploadFile];
-            return uploadFile;
-        });
-    }
-    _emitUpdateEvent() {
-        this.update.emit({
-            files: this.files,
-            element: this.hostElement,
-        });
-    }
-    translate(prop) {
-        return translations?.[prop]?.[this.language || en] || prop;
-    }
-    isLoading(file) {
-        return file.status === 'start';
-    }
-    getFileItemClass = (file) => {
-        let itemClass = 'files-list-item';
-        if (file.error) {
-            itemClass += ' files-list-item-error';
-        }
-        return itemClass;
-    };
-    getFileIcon(file) {
-        if (file.error)
-            return alert_exclamation_circle;
-        if (file.progress === 100)
-            return check;
-        return attachment;
-    }
-    getFileColor(file) {
-        if (file.error)
-            return 'warning';
-        if (file.progress === 100)
-            return 'green700';
-        return 'gray900';
-    }
-    describedBy() {
-        const list = [this.accept && this.idAccepttext, this.helpertext && this.idHelpertext].filter(Boolean);
-        if (!list.length)
-            return null;
-        return list.join(',');
-    }
-    render() {
-        return (h(Host, { key: '1c7df13d284805a69618cac9130a3599dac09afa' }, h("div", { key: 'e6f37c7ac6e0283c06049562b3e20b11cf89f1c3', class: "pn-file-upload-container" }, h("div", { key: '7647d0f6afdccef876e8c86b084b7b1106715764', class: "pn-dropzone-container" }, h("input", { key: 'a5cc41ce25c13ef1d4046b0fb9c45372da932b86', id: this.idFileUpload, class: "pn-file-upload-input", type: "file", name: this.name, multiple: this.multiple, accept: this.accept, capture: this.capture, disabled: this.disabled, required: this.required, "aria-describedby": this.describedBy(), "aria-invalid": this.invalid?.toString(), onClick: e => ripple(e, this.hostElement, '.pn-dropzone-inner'), onChange: () => this._onAddFile(), onDragOver: e => this._onDragOverFile(e), onDragLeave: e => this._onDragLeaveFile(e), onDrop: e => this._onDropFile(e), ref: el => (this.fileInputElement = el) }), h("div", { key: 'ccd799f14663e8d645fcea967e526a4be89324dd', class: "pn-dropzone-inner", "data-hover": this.isHovering, "data-invalid": this.invalid }, h("pn-icon", { key: '42c98b09e804d9fa8747c16cfe20773dfecd286c', class: "pn-file-upload-icon-element", icon: upload, color: "blue700" }), h("label", { key: 'd4c0d0d127830a82cc6c05e6b2bdb7007b87384c', htmlFor: this.idFileUpload, class: "pn-file-upload-title" }, this.label || this.translate('CLICKORDRAG')), this.helpertext && (h("p", { key: '7dc83f69dd408af25194e644075ab7d852da4564', id: this.idHelpertext, class: "pn-file-upload-subtitle" }, this.helpertext)), this.accept && (h("p", { key: '64ba6ca78c6b2c9b626e7c4d4ca45074bbd0a6c7', id: this.idAccepttext, class: "pn-file-upload-subtitle" }, this.translate('ACCEPTEDFORMATS'), ": ", this.accept, this.maxSize && (h("span", { key: '1bf59a1291145d6adc7e9c6c2516f98e4b1522b2' }, ' ', "(", this.translate('MAXFILESIZE'), ": ", this.maxSize, ")")))))), !!this.files.length && (h("ul", { key: '06a0f4c327edee2c192e8b8fb38eb9ce5ab7e51a', class: "files-list" }, this.files.map((file) => (h("li", { class: "files-list-item-container", key: file.uuid }, h("div", { class: this.getFileItemClass(file) }, h("div", { class: "file-list-item-title" }, h("pn-icon", { icon: this.getFileIcon(file), color: this.getFileColor(file) }), this.hideProgress || file.progress === 0 ? (h("div", { class: "filename" }, file.filename)) : (h("pn-progress-bar", { label: file.filename, progress: file.progress, error: file.error && file.errorMessage }))), h("pn-button", { small: true, variant: "borderless", arialabel: `${this.translate('REMOVE_FILE')} ${file.filename}`, appearance: file.error ? 'warning' : 'light', icon: trash_can, iconOnly: true, tooltip: this.translate('REMOVE_FILE'), loading: this.isLoading(file), onClick: () => this.removeFile(file) })), file.error ? (h("div", { class: "files-list-item-text-error" }, file.errorMessage || file.error.message)) : null))))), h("slot", { key: '38c1a1703b7d2c418ecc76823f32248c5d8b1ec7' }))));
-    }
-    static get watchers() { return {
-        "limit": ["handleLimit"],
-        "maxSize": ["handleMaxBytes"]
-    }; }
-    static get style() { return pnFileUploadCss; }
-}, [772, "pn-file-upload", {
-        "label": [1],
-        "helpertext": [1],
-        "language": [1],
-        "hideProgress": [4, "hide-progress"],
-        "name": [1],
-        "accept": [1],
-        "maxSize": [1, "max-size"],
-        "capture": [1],
-        "limit": [2],
-        "multiple": [1028],
-        "required": [4],
-        "disabled": [4],
-        "files": [32],
-        "isHovering": [32],
-        "startUpload": [64],
-        "clearUpload": [64],
-        "removeFile": [64],
-        "updateFile": [64]
-    }, undefined, {
-        "limit": ["handleLimit"],
-        "maxSize": ["handleMaxBytes"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-file-upload", "pn-button", "pn-icon", "pn-progress-bar", "pn-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-file-upload":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnFileUpload$1);
-            }
-            break;
-        case "pn-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "pn-progress-bar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "pn-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnFileUpload = PnFileUpload$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnFileUpload, defineCustomElement };
-//# sourceMappingURL=pn-file-upload.js.map
-
-//# sourceMappingURL=pn-file-upload.js.map
+import{transformTag as e,proxyCustomElement as i,HTMLElement as t,createEvent as l,h as n,Host as s}from"@stencil/core/internal/client";import{u as a,g as o,k as r,o as d,e as p}from"./helpers.js";import{a as c}from"./alert_exclamation_circle.js";import{c as h}from"./check.js";import{d as f}from"./pn-button2.js";import{d as u}from"./pn-icon2.js";import{d as m}from"./pn-progress-bar2.js";import{d as g}from"./pn-spinner2.js";class b extends Error{element;code;data;constructor(e,i,t="INVALID",l=null){super(e),this.name="PNFileUploadError",this.element=i,this.code=t,this.data=l}}const v={CLICKORDRAG:{sv:"Klicka eller dra en fil hit",en:"Click or drag a file here",da:"Klik eller træk en fil hertil",fi:"Klikkaa tai vedä tiedosto tähän",no:"Klikk eller dra en fil hit"},ACCEPTEDFORMATS:{sv:"Filformat som stöds",en:"Supported formats",da:"Støttede filformater",fi:"Tuetut tiedostomuodot",no:"Understøttede filformater"},MAXFILESIZE:{sv:"Max filstorlek",en:"Max filesize",da:"Max filstørrelse",fi:"Maksimitiedostokoko",no:"Maks filstørrelse"},REMOVE_FILE:{sv:"Ta bort filen",en:"Remove file",da:"Fjern fil",fi:"Poista tiedosto",no:"Fjern fil"}},y=i(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.filesAdded=l(this,"filesAdded",7),this.update=l(this,"update",7),this.fileuploaderror=l(this,"fileuploaderror",7),this.valid=l(this,"valid",7),this.uploadFile=l(this,"uploadFile",7),this.uploadCancelled=l(this,"uploadCancelled",7),this.uploadCompleted=l(this,"uploadCompleted",7)}id="pn-file-upload-"+a();idFileUpload=this.id+"-label";idHelpertext=this.id+"-helpertext";idAccepttext=this.id+"-accept";fileInputElement;invalid=!1;maxSizeInBytes=0;get hostElement(){return this}files=[];isHovering=!1;label;helpertext;language=null;hideProgress=!1;name;accept;maxSize="";capture;limit=1;multiple;required=!1;disabled=!1;handleLimit(){this.multiple=this.limit>1}handleMaxBytes(){this.maxSizeInBytes=o(this.maxSize)}filesAdded;update;fileuploaderror;valid;uploadFile;uploadCancelled;uploadCompleted;async componentWillLoad(){this.handleLimit(),this.handleMaxBytes(),null===this.language&&await r(this.hostElement)}async startUpload(){if(!this.files.length)return;this.files=this.files.map(((e,i)=>("queue"===e.status&&(e.status="start",this.uploadFile.emit({file:e,index:i,uploader:this})),e)));const e=this.files.map((e=>e.xhrPromise().catch((()=>{}))));return Promise.all(e).then((e=>{const i=e.filter((e=>e));this.uploadCompleted.emit(i)}))}async clearUpload(){this.files=[],this.fileInputElement.value="",this.invalid=!1,this.filesAdded.emit([])}async removeFile(e){let i=!0;const t=[];for(const l in this.files){const n=this.files[l];if(n.filename)if(n.uuid!==e.uuid){try{this._validateFileSize(n),this._validateFileType(n),i=!0}catch(e){i=!1,n.error=e,n.progress=0,n.status="error"}t.push(n)}else"start"===n.status&&(n.xhr.abort(),this.uploadCancelled.emit(n))}this.filesAdded.emit(t),this.files=t,this.invalid=!i||!this._isNotGreaterThanLimit(),this._checkValidity(),this._emitUpdateEvent()}async updateFile(e,i=null){let t=this.files;if(null===i)for(const l in t)if(t[l].uuid===e.uuid){i=l;break}t[i]&&(e.progress>=100?(e.progress=100,e.status="completed"):e.progress<0&&(e.status="start",e.progress=0),e.error&&(e.progress=0,e.status="error",e.errorMessage=e.errorMessage||"There was an error uploading your file, please try again"),t[i]=e),this.files=[...t]}async _addFilesFromFileList(e){if(this.disabled||this.invalid)return;const i=Array.from(e),t=[];if(this.multiple)i.forEach((e=>t.push(this._addFile(e))));else{const e=i[0];1===this.limit?(this.files=[],t.push(this._addFile(e))):t.push(this._addFile(e))}return Promise.all(t).then((()=>{this.filesAdded.emit(this.files),this._isNotGreaterThanLimit(),this._checkValidity(),this._emitUpdateEvent()}))}async _onAddFile(){const e=this.fileInputElement.files;return await this._addFilesFromFileList(e)}_onDragOverFile(e){e.preventDefault(),e.stopPropagation(),this.isHovering=!0}_onDragLeaveFile(e){e.preventDefault(),e.stopPropagation(),this.isHovering=!1}_onDropFile(e){e.preventDefault(),e.stopPropagation(),this.isHovering=!1,d(e,this.hostElement,".pn-dropzone-inner"),this._addFilesFromFileList(e.dataTransfer.files)}_validateFileType(e){const i=this.accept?this.accept.split(","):[];if(i.length){let t=!1;for(const l of i){const i=l.trim().toLowerCase(),n=/^\w+\/[a-z\.\-]+$/i,s=e.filename.match(/\.\w{3,4}($|\?)/)?.[0]?.toLowerCase();if(n.test(i)&&e.contentType===i||s===i){t=!0;break}}if(!t){const i=new b("Invalid file type.",this.hostElement,"INVALID_FILE_TYPE",e);throw this.invalid=!0,this.fileuploaderror.emit(i),i}}}_validateFileSize(e){if(this.maxSizeInBytes>0&&e.filesize>this.maxSizeInBytes){const i=new b(`You can only add up to ${this.maxSize}.`,this.hostElement,"MAX_FILE_SIZE",e);throw this.invalid=!0,this.fileuploaderror.emit(i),i}}_validateLimit(){if(this.limit&&this.files.length>this.limit){const e=new b(`You can only add up to ${this.limit} files.`,this.hostElement,"MAX_LIMIT",this.files);throw this.invalid=!0,this.fileuploaderror.emit(e),e}}_isNotGreaterThanLimit(){try{return this._validateLimit(),!0}catch(e){return!1}}_checkValidity(){return this.invalid||this.valid.emit(this),!this.invalid}_createBase64FromFile(e){return new Promise(((i,t)=>{const l=new FileReader;l.onload=()=>i(l.result),l.onerror=e=>t(e),l.onabort=()=>t("ABORTED"),l.readAsDataURL(e)}))}async _addFile(e){return this._createBase64FromFile(e).then((i=>{const t=i.split(","),l=t[1],n=t[0].split(":")[1].split(";")[0],s=new XMLHttpRequest,o={uuid:a(),filename:e.name,filesize:e.size,progress:0,status:"queue",base64:l,contentType:n,error:null,errorMessage:"",file:e,xhr:s};try{this._validateFileSize(o),this._validateFileType(o)}catch(e){o.error=e,o.progress=0,o.status="error"}return o.xhrPromise=()=>new Promise(((e,i)=>{s.responseType="json",s.addEventListener("progress",(e=>{e.lengthComputable?(o.progress=e.loaded/e.total*100,this.updateFile(o)):(o.progress=100,this.updateFile(o))})),s.addEventListener("load",(i=>e(i.target.response))),s.addEventListener("error",(e=>{o.error=e,o.errorMessage="There was an error uploading your file, please try again",this.updateFile(o);const t=new b("There was an error uploading your file, please try again",this.hostElement,"UPLOAD_SERVER_ERROR",o);this.fileuploaderror.emit(t),i(e)}))})),this.files=[...this.files,o],o}))}_emitUpdateEvent(){this.update.emit({files:this.files,element:this.hostElement})}translate(e){return v?.[e]?.[this.language||p]||e}isLoading(e){return"start"===e.status}getFileItemClass=e=>{let i="files-list-item";return e.error&&(i+=" files-list-item-error"),i};getFileIcon(e){return e.error?c:100===e.progress?h:'<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M9 7.5a4.5 4.5 0 1 1 9 0V16a6 6 0 0 1-12 0v-3a1 1 0 1 1 2 0v3a4 4 0 0 0 8 0V7.5a2.5 2.5 0 0 0-5 0V16a1 1 0 1 0 2 0v-6a1 1 0 1 1 2 0v6a3 3 0 1 1-6 0zM7 9a1 1 0 0 1 1 1v.1a1 1 0 1 1-2 0V10a1 1 0 0 1 1-1" clip-rule="evenodd"/></svg>'}getFileColor(e){return e.error?"warning":100===e.progress?"green700":"gray900"}describedBy(){const e=[this.accept&&this.idAccepttext,this.helpertext&&this.idHelpertext].filter(Boolean);return e.length?e.join(","):null}render(){return n(s,{key:"bce5d5c3684f31a2841ecf631155ab384f318879"},n("div",{key:"07abc549d0ad86fb818f446e4fa223e3b4ea6c84",class:"pn-file-upload-container"},n("div",{key:"1a9d09dd8cf39db11dc741732a7c04276e10a6a9",class:"pn-dropzone-container"},n("input",{key:"387071f47d9aa658929448b041285c01d5187da4",id:this.idFileUpload,class:"pn-file-upload-input",type:"file",name:this.name,multiple:this.multiple,accept:this.accept,capture:this.capture,disabled:this.disabled,required:this.required,"aria-describedby":this.describedBy(),"aria-invalid":this.invalid?.toString(),onClick:e=>d(e,this.hostElement,".pn-dropzone-inner"),onChange:()=>this._onAddFile(),onDragOver:e=>this._onDragOverFile(e),onDragLeave:e=>this._onDragLeaveFile(e),onDrop:e=>this._onDropFile(e),ref:e=>this.fileInputElement=e}),n("div",{key:"71c627aa6044908835b0f6e2227d7744da76680e",class:"pn-dropzone-inner","data-hover":this.isHovering,"data-invalid":this.invalid},n("pn-icon",{key:"a621fd0abb16c8c7b2efcb67932a0e50e12942dd",class:"pn-file-upload-icon-element",icon:'<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-2a1 1 0 1 1 0-2h2a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h2a1 1 0 1 1 0 2H6a3 3 0 0 1-3-3zm9 0a1 1 0 0 1 .707.293l4 4a1 1 0 0 1-1.414 1.414L13 11.414V17a1 1 0 1 1-2 0v-5.586l-2.293 2.293a1 1 0 0 1-1.414-1.414l4-4A1 1 0 0 1 12 8m-1 12.1V20a1 1 0 1 1 2 0v.1a1 1 0 1 1-2 0" clip-rule="evenodd"/></svg>',color:"blue700"}),n("label",{key:"cc90d1af83fe3814b8ea9991bcdf85c40f48f874",htmlFor:this.idFileUpload,class:"pn-file-upload-title"},this.label||this.translate("CLICKORDRAG")),this.helpertext&&n("p",{key:"8d4032bcd909516779d07f042be878105f3479a1",id:this.idHelpertext,class:"pn-file-upload-subtitle"},this.helpertext),this.accept&&n("p",{key:"715cc9ed4c8878068182a30affa8649c904f041d",id:this.idAccepttext,class:"pn-file-upload-subtitle"},this.translate("ACCEPTEDFORMATS"),": ",this.accept,this.maxSize&&n("span",{key:"a217dcfd8528d86deb9aee37b7750eb574936a56"}," ","(",this.translate("MAXFILESIZE"),": ",this.maxSize,")")))),!!this.files.length&&n("ul",{key:"c1a1cd0c816992c6f524eaf82296ad4fd3300a6b",class:"files-list"},this.files.map((e=>n("li",{class:"files-list-item-container",key:e.uuid},n("div",{class:this.getFileItemClass(e)},n("div",{class:"file-list-item-title"},n("pn-icon",{icon:this.getFileIcon(e),color:this.getFileColor(e)}),this.hideProgress||0===e.progress?n("div",{class:"filename"},e.filename):n("pn-progress-bar",{label:e.filename,progress:e.progress,error:e.error&&e.errorMessage})),n("pn-button",{small:!0,variant:"borderless",arialabel:`${this.translate("REMOVE_FILE")} ${e.filename}`,appearance:e.error?"warning":"light",icon:'<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M10.5 4a1 1 0 0 0-1 1h5a1 1 0 0 0-1-1zm6 1a3 3 0 0 0-3-3h-3a3 3 0 0 0-3 3h-2A2.5 2.5 0 0 0 5 9.95V19a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V9.95A2.5 2.5 0 0 0 18.5 5zm.5 5H7v9a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1zM5.5 7a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1zm4.5 5a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1m4 0a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1" clip-rule="evenodd"/></svg>',iconOnly:!0,tooltip:this.translate("REMOVE_FILE"),loading:this.isLoading(e),onClick:()=>this.removeFile(e)})),e.error?n("div",{class:"files-list-item-text-error"},e.errorMessage||e.error.message):null)))),n("slot",{key:"2690ccdc2c5e97a41c99a3b385e68739bb69cecb"})))}static get watchers(){return{limit:[{handleLimit:0}],maxSize:[{handleMaxBytes:0}]}}static get style(){return`${e("pn-file-upload")}.hover .pn-file-upload-container .pn-dropzone-container{background-color:#e0f8ff}${e("pn-file-upload")} .pn-file-upload-input{position:absolute;z-index:1;left:0;top:0;opacity:0;height:100%;width:100%;-webkit-tap-highlight-color:transparent}${e("pn-file-upload")} .pn-file-upload-input:hover{cursor:pointer}${e("pn-file-upload")} .pn-file-upload-input:hover+.pn-dropzone-inner{border-color:#005d92;background-color:#e0f8ff}${e("pn-file-upload")} .pn-file-upload-input:focus-visible+.pn-dropzone-inner{border-color:#005d92;outline-color:#005d92}${e("pn-file-upload")} .pn-file-upload-input:disabled{pointer-events:none}${e("pn-file-upload")} .pn-file-upload-input:disabled+.pn-dropzone-inner{pointer-events:none;background-color:#f3f2f2;border-color:#2d2013}${e("pn-file-upload")} .pn-file-upload-input:disabled+.pn-dropzone-inner .headline a{color:#5e554a}${e("pn-file-upload")} .pn-file-upload-input:disabled+.pn-dropzone-inner .pn-icon-svg path{fill:#5e554a}${e("pn-file-upload")} .pn-file-upload-container{position:relative;display:flex;flex-direction:column;gap:1em}${e("pn-file-upload")} .pn-file-upload-container .pn-dropzone-container{position:relative}${e("pn-file-upload")} .pn-file-upload-container .pn-dropzone-inner{position:relative;text-align:center;overflow:hidden;padding:2.5em;border:0.0625em #969087 dashed;border-radius:0.5em;display:flex;flex-direction:column;align-items:center;gap:0.5em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-file-upload")} .pn-file-upload-container .pn-dropzone-inner{transition-duration:0s;transition-delay:0s}}${e("pn-file-upload")} .pn-file-upload-container .pn-dropzone-inner .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${e("pn-file-upload")} .pn-file-upload-container .pn-dropzone-inner[data-hover]{background-color:#e0f8ff;border-color:#005d92}${e("pn-file-upload")} .pn-file-upload-container .pn-dropzone-inner[data-invalid]{border-color:#a70707}${e("pn-file-upload")} .pn-file-upload-container .pn-dropzone-inner .pn-file-upload-dropzone{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0.5em}${e("pn-file-upload")} .files-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1em}${e("pn-file-upload")} .files-list .filename{font-weight:400;font-size:0.75em}${e("pn-file-upload")} .files-list .files-list-item{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;background:#f9f8f8;padding:1em;border-radius:0.5em}${e("pn-file-upload")} .files-list .files-list-item .file-list-item-title{display:flex;align-items:center;gap:0.5em;margin-right:0.5em}${e("pn-file-upload")} .files-list .files-list-item>${e("pn-progress-bar")}{margin-right:25em;flex:1}${e("pn-file-upload")} .files-list .files-list-item.files-list-item-error{color:#a70707;background-color:#fdefee}${e("pn-file-upload")} .files-list .files-list-item-text-error{color:#a70707;font-size:0.875em;font-weight:300;margin-top:0.25em}${e("pn-file-upload")} .pn-file-upload-title{color:#2d2013}${e("pn-file-upload")} .pn-file-upload-subtitle{color:#5e554a;font-size:0.75em}`}},[772,"pn-file-upload",{label:[1],helpertext:[1],language:[1],hideProgress:[4,"hide-progress"],name:[1],accept:[1],maxSize:[1,"max-size"],capture:[1],limit:[2],multiple:[1028],required:[4],disabled:[4],files:[32],isHovering:[32],startUpload:[64],clearUpload:[64],removeFile:[64],updateFile:[64]},void 0,{limit:[{handleLimit:0}],maxSize:[{handleMaxBytes:0}]}]),k=y,w=function(){"undefined"!=typeof customElements&&["pn-file-upload","pn-button","pn-icon","pn-progress-bar","pn-spinner"].forEach((i=>{switch(i){case"pn-file-upload":customElements.get(e(e(i)))||customElements.define(e(e(i)),y);break;case"pn-button":customElements.get(e(e(i)))||f();break;case"pn-icon":customElements.get(e(e(i)))||u();break;case"pn-progress-bar":customElements.get(e(e(i)))||m();break;case"pn-spinner":customElements.get(e(e(i)))||g()}}))};export{k as PnFileUpload,w as defineCustomElement}