q2-tecton-elements 1.52.2 → 1.53.0

package/dist/collection/components/q2-file-picker/q2-file-picker.js

@@ -0,0 +1,426 @@
+import { Fragment, h, } from "@stencil/core";
+import { hasSlotContent, loc } from "../../utils/index";
+export class Q2FilePicker {
+    constructor() {
+        this.queuedFiles = [];
+        this.dimDropZone = (e) => {
+            this.disableEvent(e);
+            this.isDropZoneHighlighted = false;
+        };
+        this.grabDroppedFiles = (e) => {
+            this.disableEvent(e);
+            this.isDropZoneHighlighted = false;
+            const droppedFiles = Array.from(e.dataTransfer.files);
+            const filesObject = this.buildFilesObject(droppedFiles);
+            this.emitChange(filesObject);
+            this.value = filesObject;
+        };
+        this.grabSelectedFiles = (e) => {
+            const selectedFiles = Array.from(e.target.files);
+            const filesObject = this.buildFilesObject(selectedFiles);
+            this.emitChange(filesObject);
+            this.value = filesObject;
+        };
+        this.highlightDropZone = (e) => {
+            this.disableEvent(e);
+            this.isDropZoneHighlighted = true;
+        };
+        // #endregion
+        // #region Render Methods
+        this.render = () => {
+            return (h("div", { class: "file-picker" }, (this.hasLabel || this.hasDescription) && (h("div", { class: "heading" }, this.hasLabel && (h("label", { class: "label", htmlFor: "file-field", "test-id": "label" }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescription && (h("div", { class: "description", id: "description", "test-id": "description" }, !!this.description ? (loc(this.description)) : this.hasDescriptionSlotContent ? (h("slot", { name: "description" })) : (''))))), (this.variant === 'browse-drop' && (h("div", { class: this.dropZoneClasses, onDragEnter: this.disableEvent, onDragLeave: this.dimDropZone, onDragOver: this.highlightDropZone, onDrop: this.grabDroppedFiles, ref: el => (this.dropZone = el !== null && el !== void 0 ? el : this.dropZone), "test-id": "drop-zone" }, (this.areFilesUploading && (h(Fragment, null, h("q2-loading", { class: "loading" }), h("p", { class: "drop-zone-text" }, loc('tecton.element.filePicker.uploadingEllipsis'))))) || (h(Fragment, null, h("q2-icon", { type: "upload" }), h("p", { class: "drop-zone-text" }, h("q2-link", { label: loc('tecton.element.filePicker.browse'), onTctClick: () => this.launchFileBrowser(), variant: "inline", "test-id": "browse-link" }), loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles]))))))) || (h("div", { class: "browse", "test-id": "browse" }, h("q2-btn", { disabled: this.areFilesUploading, intent: "workflow-primary", loading: this.areFilesUploading, onClick: () => this.launchFileBrowser(), size: "medium", "test-id": "browse-button" }, h("q2-icon", { type: "paperclip" }), h("span", null, loc('tecton.element.filePicker.attachFiles', [this.maxFiles]))))), h("input", { "aria-describedby": (!!this.description && 'description') || undefined, class: "sr", id: "file-field", onChange: this.grabSelectedFiles, ref: el => (this.browseButtonInput = el !== null && el !== void 0 ? el : this.browseButtonInput), type: "file", "test-id": "file-input", multiple: true }), h("div", { class: "file-list-container" }, h("q2-list", { class: "file-list" }, this.displayedFiles.map(file => (h("q2-item", { class: this.getFileItemClasses(file.file.name), key: file.file.name, onAnimationEnd: this.getAnimationendHandlerToRemoveFileItem(file.file.name) }, h("div", { slot: "bullet" }, file.status === 'invalid-type' ||
+                file.status === 'over-size-limit' ||
+                file.status === 'failed' ||
+                file.status === 'over-max-files-limit' ? (h("q2-icon", { class: "icon-error", type: "error" })) : file.status === 'in-progress' ? (h("q2-loading", { class: "file-item-loading" })) : (h("q2-icon", { class: "icon-success", type: "success" }))), h("div", { slot: "header" }, file.file.name), h("div", { slot: "body" }, this.getFileItemStatusMessage(file.status, file.file.size)), h("div", { slot: "action" }, h("q2-btn", { intent: "neutral-text", onClick: this.getClickHandlerToRemoveFileItem(file.file.name) }, h("q2-icon", { type: "close" }))))))))));
+        };
+        this.areFilesUploading = false;
+        this.displayedFiles = [];
+        this.isDropZoneHighlighted = false;
+        this.refreshCounter = 0;
+        this.description = undefined;
+        this.fileTypes = [];
+        this.label = undefined;
+        this.maxFiles = Infinity;
+        this.maxFileSize = Infinity;
+        this.status = [];
+        this.value = { invalidFiles: [], validFiles: [] };
+        this.variant = 'browse';
+    }
+    // #endregion
+    // #region Watchers
+    updateFileList(newValue) {
+        newValue.forEach(statusItem => {
+            const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);
+            if (matchingQueuedFileIndex > -1) {
+                const matchingFile = this.queuedFiles.splice(matchingQueuedFileIndex, 1)[0];
+                this.displayedFiles = [{ file: matchingFile, status: statusItem.status }, ...this.displayedFiles];
+            }
+            else {
+                const matchingDisplayedFileIndex = this.displayedFiles.findIndex(file => file.file.name === statusItem.name);
+                if (matchingDisplayedFileIndex > -1) {
+                    this.displayedFiles[matchingDisplayedFileIndex].status = statusItem.status;
+                    this.disableLoaderIfAllFilesUploaded();
+                }
+            }
+        });
+    }
+    // #endregion
+    // #region Local Methods
+    get dropZoneClasses() {
+        const classes = ['drop-zone'];
+        if (this.isDropZoneHighlighted) {
+            classes.push('drop-zone-highlighted');
+        }
+        return classes.join(' ');
+    }
+    get fileTypesArray() {
+        return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(',');
+    }
+    get hasDescription() {
+        return !!this.description || this.hasDescriptionSlotContent;
+    }
+    get hasDescriptionSlotContent() {
+        return hasSlotContent(this.el, 'description');
+    }
+    get hasLabel() {
+        return !!this.label || this.hasLabelSlotContent;
+    }
+    get hasLabelSlotContent() {
+        return hasSlotContent(this.el, 'label');
+    }
+    buildFilesObject(filesToUpload) {
+        const invalidFiles = [];
+        invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));
+        invalidFiles.push(...this.extractFilesOverSizeLimit(filesToUpload));
+        invalidFiles.push(...this.extractFilesOverMaxFilesLimit(filesToUpload));
+        this.displayedFiles = [...invalidFiles];
+        if (filesToUpload.length === 0) {
+            this.areFilesUploading = false;
+        }
+        else {
+            this.queuedFiles = filesToUpload;
+        }
+        return { invalidFiles, validFiles: filesToUpload };
+    }
+    disableEvent(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    disableLoaderIfAllFilesUploaded() {
+        if (this.queuedFiles.length === 0 && !this.displayedFiles.some(file => file.status === 'in-progress')) {
+            this.areFilesUploading = false;
+        }
+    }
+    emitChange(filesObject) {
+        this.areFilesUploading = filesObject.validFiles.length > 0;
+        this.tctChange.emit(filesObject);
+    }
+    extractFilesOfInvalidTypes(files) {
+        const invalidFiles = [];
+        if (this.fileTypesArray.length === 0)
+            return invalidFiles;
+        files.forEach(file => {
+            const fileExtension = file.name.split('.').pop().toLowerCase();
+            if (!this.fileTypesArray.includes(fileExtension)) {
+                invalidFiles.push({ file, status: 'invalid-type' });
+            }
+        });
+        // Remove invalid files from the files array
+        invalidFiles.forEach(invalidFile => {
+            const index = files.indexOf(invalidFile.file);
+            if (index > -1) {
+                files.splice(index, 1);
+            }
+        });
+        return invalidFiles;
+    }
+    extractFilesOverMaxFilesLimit(files) {
+        const filesOverMaxFilesLimit = [];
+        if (this.maxFiles === Infinity)
+            return filesOverMaxFilesLimit;
+        if (files.length > this.maxFiles) {
+            const excessFiles = files.splice(this.maxFiles);
+            excessFiles.forEach(file => {
+                filesOverMaxFilesLimit.push({ file, status: 'over-max-files-limit' });
+            });
+        }
+        return filesOverMaxFilesLimit;
+    }
+    extractFilesOverSizeLimit(files) {
+        const filesOverSizeLimit = [];
+        if (this.maxFileSize === Infinity)
+            return filesOverSizeLimit;
+        files.forEach(file => {
+            if (file.size > this.maxFileSize) {
+                filesOverSizeLimit.push({ file, status: 'over-size-limit' });
+            }
+        });
+        // Remove files over size limit from the files array
+        filesOverSizeLimit.forEach(overSizeFile => {
+            const index = files.indexOf(overSizeFile.file);
+            if (index > -1) {
+                files.splice(index, 1);
+            }
+        });
+        return filesOverSizeLimit;
+    }
+    forceRerender() {
+        this.refreshCounter += 1; // Triggers re-render
+    }
+    getAnimationendHandlerToRemoveFileItem(fileName) {
+        return (e) => {
+            if (e.animationName === 'shrinkToCenterFadeOut') {
+                this.displayedFiles = this.displayedFiles.filter(file => file.file.name !== fileName);
+            }
+        };
+    }
+    getClickHandlerToRemoveFileItem(fileName) {
+        return () => {
+            const fileToDelete = this.displayedFiles.find(file => file.file.name === fileName);
+            if (fileToDelete) {
+                fileToDelete.toBeRemoved = true;
+                this.forceRerender();
+            }
+        };
+    }
+    getFileItemClasses(fileName) {
+        const classes = ['file-item'];
+        const matchingFile = this.displayedFiles.find(file => file.file.name === fileName);
+        if (matchingFile === null || matchingFile === void 0 ? void 0 : matchingFile.toBeRemoved) {
+            classes.push('fade-out');
+        }
+        else {
+            classes.push('fade-in');
+        }
+        return classes.join(' ');
+    }
+    getFileItemStatusMessage(status, size) {
+        switch (status) {
+            case 'invalid-type':
+                return loc('tecton.element.filePicker.unsupportedFileType');
+            case 'over-size-limit':
+                return loc('tecton.element.filePicker.sizeExceedsLimit');
+            case 'over-max-files-limit':
+                return loc('tecton.element.filePicker.overMaxFilesLimit');
+            case 'in-progress':
+                return loc('tecton.element.filePicker.uploadingEllipsis');
+            case 'failed':
+                return loc('tecton.element.filePicker.uploadFailed');
+            case 'uploaded':
+            default:
+                return loc('tecton.element.filePicker.fileSize', [(size / (1000 * 1000)).toFixed(2)]);
+        }
+    }
+    launchFileBrowser() {
+        this.browseButtonInput.dispatchEvent(new MouseEvent('click'));
+    }
+    static get is() { return "q2-file-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["q2-file-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["q2-file-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "localizable",
+                            "text": undefined
+                        }],
+                    "text": "A description of the field. This is announced by screen readers when the field is focused."
+                },
+                "attribute": "description",
+                "reflect": true
+            },
+            "fileTypes": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of strings representing the allowed file types based on file extension.\nExample: ['jpg', 'png', 'pdf']"
+                },
+                "attribute": "file-types",
+                "reflect": true,
+                "defaultValue": "[]"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "localizable",
+                            "text": undefined
+                        }],
+                    "text": "The label for the field. This is announced by screen readers when the field is focused."
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "maxFiles": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum number of files that can be selected."
+                },
+                "attribute": "max-files",
+                "reflect": true,
+                "defaultValue": "Infinity"
+            },
+            "maxFileSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum size (in bytes) of any file that can be selected."
+                },
+                "attribute": "max-file-size",
+                "reflect": true,
+                "defaultValue": "Infinity"
+            },
+            "status": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ name: string; status: 'in-progress' | 'failed' | 'uploaded' }[]",
+                    "resolved": "{ name: string; status: \"in-progress\" | \"failed\" | \"uploaded\"; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of objects representing the status of the files being uploaded.\nEach object should have a `name` property (the file name) and a `status`\nproperty (the status of the file) that equals either 'in-progress',\n'failed' or 'uploaded'."
+                },
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "FilesObject",
+                    "resolved": "{ invalidFiles: { file: File; status: \"invalid-type\" | \"over-size-limit\" | \"over-max-files-limit\" | \"in-progress\" | \"failed\" | \"uploaded\"; }[]; validFiles: File[]; }",
+                    "references": {
+                        "FilesObject": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-file-picker/q2-file-picker.tsx",
+                            "id": "src/components/q2-file-picker/q2-file-picker.tsx::FilesObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "readonly",
+                            "text": undefined
+                        }],
+                    "text": "Returns an array of File objects representing the files selected by the\nuser. If no files are selected, the value is an empty array."
+                },
+                "defaultValue": "{ invalidFiles: [], validFiles: [] }"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'browse' | 'browse-drop'",
+                    "resolved": "\"browse\" | \"browse-drop\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines if the file picker is a browse button or a drop zone with a\nbrowse link."
+                },
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'browse'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "areFilesUploading": {},
+            "displayedFiles": {},
+            "isDropZoneHighlighted": {},
+            "refreshCounter": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tctChange",
+                "name": "tctChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FilesObject",
+                    "resolved": "{ invalidFiles: { file: File; status: \"invalid-type\" | \"over-size-limit\" | \"over-max-files-limit\" | \"in-progress\" | \"failed\" | \"uploaded\"; }[]; validFiles: File[]; }",
+                    "references": {
+                        "FilesObject": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-file-picker/q2-file-picker.tsx",
+                            "id": "src/components/q2-file-picker/q2-file-picker.tsx::FilesObject"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "status",
+                "methodName": "updateFileList"
+            }];
+    }
+}
+//# sourceMappingURL=q2-file-picker.js.map

package/dist/collection/components/q2-file-picker/q2-file-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-file-picker.js","sourceRoot":"","sources":["../../../src/components/q2-file-picker/q2-file-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    Fragment,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\ntype FileStatus = 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\nexport type FilesObject = {\n    invalidFiles: {\n        file: File;\n        status: 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\n    }[];\n    validFiles: File[];\n};\n\n@Component({\n    tag: 'q2-file-picker',\n    styleUrl: 'q2-file-picker.scss',\n    shadow: true,\n})\nexport class Q2FilePicker implements ComponentInterface {\n    // #region Own Properties\n\n    browseButtonInput: HTMLElement;\n    dropZone: HTMLElement;\n    fileItemsToBeDeleted;\n    queuedFiles: File[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    areFilesUploading: boolean = false;\n\n    @State()\n    displayedFiles: {\n        file: File;\n        status: FileStatus;\n        toBeRemoved?: boolean;\n    }[] = [];\n\n    @State()\n    isDropZoneHighlighted: boolean = false;\n\n    @State()\n    refreshCounter = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * A description of the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * An array of strings representing the allowed file types based on file extension.\n     * Example: ['jpg', 'png', 'pdf']\n     */\n    @Prop({ reflect: true })\n    fileTypes: string[] | string = [];\n\n    /**\n     * The label for the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of files that can be selected.\n     */\n    @Prop({ reflect: true })\n    // maxFiles: number | string = Infinity;\n    maxFiles: number = Infinity;\n\n    /**\n     * The maximum size (in bytes) of any file that can be selected.\n     */\n    @Prop({ reflect: true })\n    maxFileSize: number = Infinity;\n\n    /**\n     * An array of objects representing the status of the files being uploaded.\n     * Each object should have a `name` property (the file name) and a `status`\n     * property (the status of the file) that equals either 'in-progress',\n     * 'failed' or 'uploaded'.\n     */\n    @Prop({ reflect: true })\n    status: { name: string; status: 'in-progress' | 'failed' | 'uploaded' }[] = [];\n\n    /**\n     * Returns an array of File objects representing the files selected by the\n     * user. If no files are selected, the value is an empty array.\n     * @readonly\n     */\n    @Prop({ mutable: true })\n    value: FilesObject = { invalidFiles: [], validFiles: [] }; // Ensure FilesObject is exported or imported correctly\n\n    /**\n     * Determines if the file picker is a browse button or a drop zone with a\n     * browse link.\n     */\n    @Prop({ reflect: true })\n    variant: 'browse' | 'browse-drop' = 'browse';\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    tctChange: EventEmitter<FilesObject>;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('status')\n    updateFileList(newValue: { name: string; status: FileStatus }[]) {\n        newValue.forEach(statusItem => {\n            const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);\n            if (matchingQueuedFileIndex > -1) {\n                const matchingFile = this.queuedFiles.splice(matchingQueuedFileIndex, 1)[0];\n                this.displayedFiles = [{ file: matchingFile, status: statusItem.status }, ...this.displayedFiles];\n            } else {\n                const matchingDisplayedFileIndex = this.displayedFiles.findIndex(\n                    file => file.file.name === statusItem.name\n                );\n                if (matchingDisplayedFileIndex > -1) {\n                    this.displayedFiles[matchingDisplayedFileIndex].status = statusItem.status;\n                    this.disableLoaderIfAllFilesUploaded();\n                }\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dropZoneClasses() {\n        const classes = ['drop-zone'];\n        if (this.isDropZoneHighlighted) {\n            classes.push('drop-zone-highlighted');\n        }\n\n        return classes.join(' ');\n    }\n\n    get fileTypesArray() {\n        return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(',');\n    }\n\n    get hasDescription() {\n        return !!this.description || this.hasDescriptionSlotContent;\n    }\n\n    get hasDescriptionSlotContent() {\n        return hasSlotContent(this.el, 'description');\n    }\n\n    get hasLabel() {\n        return !!this.label || this.hasLabelSlotContent;\n    }\n\n    get hasLabelSlotContent() {\n        return hasSlotContent(this.el, 'label');\n    }\n\n    buildFilesObject(filesToUpload: File[]): FilesObject {\n        const invalidFiles = [];\n        invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverSizeLimit(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverMaxFilesLimit(filesToUpload));\n        this.displayedFiles = [...invalidFiles];\n\n        if (filesToUpload.length === 0) {\n            this.areFilesUploading = false;\n        } else {\n            this.queuedFiles = filesToUpload;\n        }\n\n        return { invalidFiles, validFiles: filesToUpload };\n    }\n\n    dimDropZone = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n    };\n\n    disableEvent(event: Event) {\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    disableLoaderIfAllFilesUploaded() {\n        if (this.queuedFiles.length === 0 && !this.displayedFiles.some(file => file.status === 'in-progress')) {\n            this.areFilesUploading = false;\n        }\n    }\n\n    emitChange(filesObject: FilesObject) {\n        this.areFilesUploading = filesObject.validFiles.length > 0;\n        this.tctChange.emit(filesObject);\n    }\n\n    extractFilesOfInvalidTypes(files: File[]) {\n        const invalidFiles = [];\n\n        if (this.fileTypesArray.length === 0) return invalidFiles;\n\n        files.forEach(file => {\n            const fileExtension = file.name.split('.').pop().toLowerCase();\n            if (!this.fileTypesArray.includes(fileExtension)) {\n                invalidFiles.push({ file, status: 'invalid-type' });\n            }\n        });\n\n        // Remove invalid files from the files array\n        invalidFiles.forEach(invalidFile => {\n            const index = files.indexOf(invalidFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return invalidFiles;\n    }\n\n    extractFilesOverMaxFilesLimit(files: File[]) {\n        const filesOverMaxFilesLimit = [];\n\n        if (this.maxFiles === Infinity) return filesOverMaxFilesLimit;\n\n        if (files.length > this.maxFiles) {\n            const excessFiles = files.splice(this.maxFiles);\n            excessFiles.forEach(file => {\n                filesOverMaxFilesLimit.push({ file, status: 'over-max-files-limit' });\n            });\n        }\n\n        return filesOverMaxFilesLimit;\n    }\n\n    extractFilesOverSizeLimit(files: File[]) {\n        const filesOverSizeLimit = [];\n\n        if (this.maxFileSize === Infinity) return filesOverSizeLimit;\n\n        files.forEach(file => {\n            if (file.size > this.maxFileSize) {\n                filesOverSizeLimit.push({ file, status: 'over-size-limit' });\n            }\n        });\n\n        // Remove files over size limit from the files array\n        filesOverSizeLimit.forEach(overSizeFile => {\n            const index = files.indexOf(overSizeFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return filesOverSizeLimit;\n    }\n\n    forceRerender() {\n        this.refreshCounter += 1; // Triggers re-render\n    }\n\n    getAnimationendHandlerToRemoveFileItem(fileName: string) {\n        return (e: AnimationEvent) => {\n            if (e.animationName === 'shrinkToCenterFadeOut') {\n                this.displayedFiles = this.displayedFiles.filter(file => file.file.name !== fileName);\n            }\n        };\n    }\n\n    getClickHandlerToRemoveFileItem(fileName: string) {\n        return () => {\n            const fileToDelete = this.displayedFiles.find(file => file.file.name === fileName);\n            if (fileToDelete) {\n                fileToDelete.toBeRemoved = true;\n                this.forceRerender();\n            }\n        };\n    }\n\n    getFileItemClasses(fileName: string) {\n        const classes = ['file-item'];\n        const matchingFile = this.displayedFiles.find(file => file.file.name === fileName);\n        if (matchingFile?.toBeRemoved) {\n            classes.push('fade-out');\n        } else {\n            classes.push('fade-in');\n        }\n        return classes.join(' ');\n    }\n\n    getFileItemStatusMessage(status: FileStatus, size: number) {\n        switch (status) {\n            case 'invalid-type':\n                return loc('tecton.element.filePicker.unsupportedFileType');\n            case 'over-size-limit':\n                return loc('tecton.element.filePicker.sizeExceedsLimit');\n            case 'over-max-files-limit':\n                return loc('tecton.element.filePicker.overMaxFilesLimit');\n            case 'in-progress':\n                return loc('tecton.element.filePicker.uploadingEllipsis');\n            case 'failed':\n                return loc('tecton.element.filePicker.uploadFailed');\n            case 'uploaded':\n            default:\n                return loc('tecton.element.filePicker.fileSize', [(size / (1000 * 1000)).toFixed(2)]);\n        }\n    }\n\n    grabDroppedFiles = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n        const droppedFiles = Array.from(e.dataTransfer.files);\n        const filesObject = this.buildFilesObject(droppedFiles);\n\n        this.emitChange(filesObject);\n        this.value = filesObject;\n    };\n\n    grabSelectedFiles = (e: Event) => {\n        const selectedFiles = Array.from((e.target as HTMLInputElement).files);\n        const filesObject = this.buildFilesObject(selectedFiles);\n\n        this.emitChange(filesObject);\n        this.value = filesObject;\n    };\n\n    highlightDropZone = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = true;\n    };\n\n    launchFileBrowser() {\n        this.browseButtonInput.dispatchEvent(new MouseEvent('click'));\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render = () => {\n        return (\n            <div class=\"file-picker\">\n                {(this.hasLabel || this.hasDescription) && (\n                    <div class=\"heading\">\n                        {this.hasLabel && (\n                            <label\n                                class=\"label\"\n                                htmlFor=\"file-field\"\n                                test-id=\"label\"\n                            >\n                                {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n                            </label>\n                        )}\n                        {this.hasDescription && (\n                            <div\n                                class=\"description\"\n                                id=\"description\"\n                                test-id=\"description\"\n                            >\n                                {!!this.description ? (\n                                    loc(this.description)\n                                ) : this.hasDescriptionSlotContent ? (\n                                    <slot name=\"description\" />\n                                ) : (\n                                    ''\n                                )}\n                            </div>\n                        )}\n                    </div>\n                )}\n\n                {(this.variant === 'browse-drop' && (\n                    <div\n                        class={this.dropZoneClasses}\n                        onDragEnter={this.disableEvent}\n                        onDragLeave={this.dimDropZone}\n                        onDragOver={this.highlightDropZone}\n                        onDrop={this.grabDroppedFiles}\n                        ref={el => (this.dropZone = el ?? this.dropZone)}\n                        test-id=\"drop-zone\"\n                    >\n                        {(this.areFilesUploading && (\n                            <Fragment>\n                                <q2-loading class=\"loading\"></q2-loading>\n                                <p class=\"drop-zone-text\">{loc('tecton.element.filePicker.uploadingEllipsis')}</p>\n                            </Fragment>\n                        )) || (\n                            <Fragment>\n                                <q2-icon type=\"upload\"></q2-icon>\n                                <p class=\"drop-zone-text\">\n                                    <q2-link\n                                        label={loc('tecton.element.filePicker.browse')}\n                                        onTctClick={() => this.launchFileBrowser()}\n                                        variant=\"inline\"\n                                        test-id=\"browse-link\"\n                                    />\n                                    {loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles])}\n                                </p>\n                            </Fragment>\n                        )}\n                    </div>\n                )) || (\n                    <div\n                        class=\"browse\"\n                        test-id=\"browse\"\n                    >\n                        <q2-btn\n                            disabled={this.areFilesUploading}\n                            intent=\"workflow-primary\"\n                            loading={this.areFilesUploading}\n                            onClick={() => this.launchFileBrowser()}\n                            size=\"medium\"\n                            test-id=\"browse-button\"\n                        >\n                            <q2-icon type=\"paperclip\"></q2-icon>\n                            <span>{loc('tecton.element.filePicker.attachFiles', [this.maxFiles])}</span>\n                        </q2-btn>\n                    </div>\n                )}\n                <input\n                    aria-describedby={(!!this.description && 'description') || undefined}\n                    class=\"sr\"\n                    id=\"file-field\"\n                    onChange={this.grabSelectedFiles}\n                    ref={el => (this.browseButtonInput = el ?? this.browseButtonInput)}\n                    type=\"file\"\n                    test-id=\"file-input\"\n                    multiple\n                />\n                <div class=\"file-list-container\">\n                    <q2-list class=\"file-list\">\n                        {this.displayedFiles.map(file => (\n                            <q2-item\n                                class={this.getFileItemClasses(file.file.name)}\n                                key={file.file.name}\n                                onAnimationEnd={this.getAnimationendHandlerToRemoveFileItem(file.file.name)}\n                            >\n                                <div slot=\"bullet\">\n                                    {file.status === 'invalid-type' ||\n                                    file.status === 'over-size-limit' ||\n                                    file.status === 'failed' ||\n                                    file.status === 'over-max-files-limit' ? (\n                                        <q2-icon\n                                            class=\"icon-error\"\n                                            type=\"error\"\n                                        ></q2-icon>\n                                    ) : file.status === 'in-progress' ? (\n                                        <q2-loading class=\"file-item-loading\"></q2-loading>\n                                    ) : (\n                                        <q2-icon\n                                            class=\"icon-success\"\n                                            type=\"success\"\n                                        ></q2-icon>\n                                    )}\n                                </div>\n                                <div slot=\"header\">{file.file.name}</div>\n                                <div slot=\"body\">{this.getFileItemStatusMessage(file.status, file.file.size)}</div>\n                                <div slot=\"action\">\n                                    <q2-btn\n                                        intent=\"neutral-text\"\n                                        onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n                                    >\n                                        <q2-icon type=\"close\"></q2-icon>\n                                    </q2-btn>\n                                </div>\n                            </q2-item>\n                        ))}\n                    </q2-list>\n                </div>\n            </div>\n        );\n    };\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-file-picker/test/q2-file-picker-test.e2e.js

@@ -0,0 +1,11 @@
+import { evaluateA11y, setup } from "../../../utils/helpers";
+describe('q2-legend', () => {
+    describe('[A11y] guideline compliance', () => {
+        it('Does not have accessibility violations', async () => {
+            const page = await setup({ html: `<q2-file-picker label="Label" description="Description" />` });
+            const hasViolations = await evaluateA11y(page);
+            expect(hasViolations).toBe(false);
+        });
+    });
+});
+//# sourceMappingURL=q2-file-picker-test.e2e.js.map

package/dist/collection/components/q2-file-picker/test/q2-file-picker-test.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-file-picker-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-file-picker/test/q2-file-picker-test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAEtD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACvB,QAAQ,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACzC,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;YACpD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,EAAE,IAAI,EAAE,4DAA4D,EAAE,CAAC,CAAC;YACjG,MAAM,aAAa,GAAG,MAAM,YAAY,CAAC,IAAI,CAAC,CAAC;YAE/C,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { evaluateA11y, setup } from '@/utils/helpers';\n\ndescribe('q2-legend', () => {\n    describe('[A11y] guideline compliance', () => {\n        it('Does not have accessibility violations', async () => {\n            const page = await setup({ html: `<q2-file-picker label=\"Label\" description=\"Description\" />` });\n            const hasViolations = await evaluateA11y(page);\n\n            expect(hasViolations).toBe(false);\n        });\n    });\n});\n"]}