@dubai-design-system/components-js 3.12.10 → 3.12.12

package/dist/collection/components/dda-attach-file/dda-attach-file.js

@@ -1,24 +1,17 @@
 import { h, Host } from "@stencil/core";
-import pdfIcon from "../../assets/img/icn/file_icons/icn-PDF.svg";
-import pptIcon from "../../assets/img/icn/file_icons/icn-PowerPoint.svg";
-import wordIcon from "../../assets/img/icn/file_icons/icn-Word.svg";
-import excelIcon from "../../assets/img/icn/file_icons/icn-Excel.svg";
-import imageIcon from "../../assets/img/icn/file_icons/icn-Image.svg";
-import videoIcon from "../../assets/img/icn/file_icons/icn-Video.svg";
-import onenoteIcon from "../../assets/img/icn/file_icons/icn-OneNote.svg";
-import defaultIcon from "../../assets/img/icn/file_icons/icn-default.svg";
+import pdfIcon from "../../assets/img/icn/icn-PDF.svg";
+import pptIcon from "../../assets/img/icn/icn-PowerPoint.svg";
+import wordIcon from "../../assets/img/icn/icn-Word.svg";
+import excelIcon from "../../assets/img/icn/icn-Excel.svg";
+import imageIcon from "../../assets/img/icn/icn-Image.svg";
+import videoIcon from "../../assets/img/icn/icn-Video.svg";
+import onenoteIcon from "../../assets/img/icn/icn-OneNote.svg";
 export class DdaAttachFile {
     constructor() {
-        this.validation_id = 'text';
+        this.file = null;
         this.custom_class = '';
         this.aria_label = '';
         this.button_aria_label = '';
-        this.disabled = false;
-        this.max_file_size = 5; // in MB
-        this.file_size_error_message = 'File size should not exceed {max} MB';
-        this.file = null;
-        this.isFileUploaded = false;
-        this.internalErrorMessage = '';
         this.fileIcons = {
             pdf: pdfIcon,
             pptx: pptIcon,
@@ -32,52 +25,21 @@ export class DdaAttachFile {
             one: onenoteIcon,
         };
     }
-    async getFile() {
-        return this.file;
-    }
     handleFileInput(event) {
-        var _a;
-        console.log(this.fileInputRef.value);
-        const files = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files;
-        if (files && files.length > 0) {
-            const selectedFile = files[0];
-            const fileSizeInMB = selectedFile.size / (1024 * 1024);
-            if (this.max_file_size && fileSizeInMB > this.max_file_size) {
-                this.file = null;
-                this.isFileUploaded = false;
-                this.internalErrorMessage = this.file_size_error_message.replace('{max}', this.max_file_size.toString());
-                this.validation_type = 'error';
-                this.fileChanged.emit(null);
-                return;
-            }
-            this.file = selectedFile;
-            this.isFileUploaded = true;
-            this.internalErrorMessage = '';
-            this.validation_type = 'normal';
-            this.fileChanged.emit(this.file);
+        const files = event.target.files;
+        if (files.length > 0) {
+            this.file = files[0];
         }
         else {
             this.file = null;
-            this.isFileUploaded = false;
-            this.internalErrorMessage = '';
-            this.validation_type = 'normal';
-            this.fileChanged.emit(null);
         }
     }
     removeFile() {
         this.file = null;
-        this.isFileUploaded = false;
-        if (this.fileInputRef) {
-            this.fileInputRef.value = null;
-        }
-        this.internalErrorMessage = '';
-        this.validation_type = 'normal';
-        this.fileChanged.emit(null);
     }
     getFileIcon(fileName) {
-        var _a;
-        const extension = (_a = fileName.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-        return this.fileIcons[extension] || defaultIcon;
+        const extension = fileName.split('.').pop().toLowerCase();
+        return this.fileIcons[extension] || 'path/to/default-icon.png';
     }
     render() {
         const inputClass = [
@@ -88,18 +50,17 @@ export class DdaAttachFile {
             this.custom_class,
             this.component_mode,
         ].filter(Boolean).join(' ');
-        const shouldShowError = this.validation_type === 'error' && (this.internalErrorMessage || this.error_message);
-        return (h(Host, { key: '8812bfa5646ae5d21174169a27875982bbe9ba0f' }, h("div", { key: 'b97d929e83b405979b6f4f2a546dc216a85a758c', class: inputClass }, this.label && (h("span", { key: '3b2e1d9567a3edff51e363854eecb5ed2279482f', class: "dda-input-label", id: `${this.input_id}-label` }, this.label)), h("div", { key: '593f8bf572c819b8ead52968cf878a49719fdb84', class: "dda-input-field-group dda-attach-file" }, this.file ? (h("div", { class: "dda-file-details" }, h("div", { class: "dda-items" }, h("img", { src: this.getFileIcon(this.file.name), alt: "File Icon", class: "dda-file-icon" }), h("span", { class: "dda-file-name", title: this.file.name }, this.file.name)), h("button", { type: "button", class: "remove-file", name: this.button_name, id: this.delete_button_id, role: "button", tabIndex: 0, "aria-label": this.button_aria_label || 'Remove file', onClick: () => this.removeFile(), disabled: this.disabled }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "close")))) : (h("div", { class: "dda-file-input" }, h("span", null, this.place_holder || 'No File Selected'), h("button", { type: "button", class: "dda-file-choose", name: this.button_name, id: this.button_id, tabIndex: 0, "aria-labelledby": `${this.button_id}-label`, onClick: () => { var _a; return (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click(); }, disabled: this.disabled }, this.upload_button_text || 'Choose File'), h("span", { id: `${this.button_id}-label`, class: "visually-hidden" }, this.upload_button_text || 'Choose File'), h("label", { htmlFor: this.input_id, class: "visually-hidden" }, this.label), h("input", { id: this.input_id, name: this.input_name, type: "file", accept: this.accept, disabled: this.disabled, hidden: true, ref: (el) => (this.fileInputRef = el), onInput: (event) => this.handleFileInput(event) })))), shouldShowError ? (h("span", { class: "dda-error-message", id: this.validation_id, role: "alert", "aria-live": "assertive" }, h("span", { class: "dda-d-flex dda-align-items-start dda-gap-2" }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "info"), h("span", null, this.internalErrorMessage || this.error_message)))) : this.isFileUploaded && this.success_text ? (h("span", { class: "dda-success-text", id: this.validation_id, role: "status", "aria-live": "polite" }, h("span", { class: "dda-d-flex dda-align-items-start dda-gap-2" }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "check"), h("span", null, this.success_text)))) : this.helper_text ? (h("span", { class: "dda-helper-text", id: this.validation_id }, h("span", { class: "dda-d-flex dda-align-items-start dda-gap-2" }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "info"), h("span", null, this.helper_text)))) : null)));
+        return (h(Host, { key: 'e99c0412417098f3f3b89616d88fbd21f106b53d' }, h("div", { key: 'a624ffa2a996bab9e65f128b4134d3c3417ed5e6', class: inputClass }, this.label && h("label", { key: 'a49f5cd971e23383c9d860a9fd1bcc4097eade78', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'd6ce6e37c515c6d89694934a3b1069d36601a46a', class: "dda-input-field-group dda-attach-file" }, this.file ? (h("div", { class: "dda-file-details" }, h("div", { class: "dda-items" }, h("img", { src: this.getFileIcon(this.file.name), alt: "File Icon", class: "dda-file-icon" }), h("span", { class: "dda-file-name" }, this.file.name)), h("button", { id: this.button_id, name: this.button_name, "aria-label": this.button_aria_label, class: "remove-file", onClick: () => this.removeFile() }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))) : (h("div", { class: "dda-file-input" }, h("span", null, "No File Selected"), h("label", { htmlFor: this.input_id, class: "dda-file-choose" }, "Choose File", h("input", { id: this.input_id, name: this.input_name, "aria-label": this.aria_label, type: "file", onInput: (event) => { this.handleFileInput(event); } }))))), this.helper_text && h("span", { key: '7fc5ff99d4c2c6722349ffe5af5f9b83af8ea981', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '094db0c139d6332b28ebb35bd4bb3d159b4da320', class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-attach-file"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../global/input.css"]
+            "$": ["../../global/input.css", "../../global/global.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../global/input.css"]
+            "$": ["../../global/input.css", "../../global/global.css"]
         };
     }
     static get properties() {
@@ -120,46 +81,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
-            },
-            "place_holder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "place_holder",
-                "reflect": false
-            },
-            "upload_button_text": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "upload_button_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "helper_text": {
                 "type": "string",
@@ -177,27 +100,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
-            },
-            "success_text": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "success_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper_text"
             },
             "error_message": {
                 "type": "string",
@@ -215,8 +119,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error_message"
             },
             "size": {
                 "type": "string",
@@ -234,8 +138,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "validation_type": {
                 "type": "string",
@@ -253,28 +157,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation_type",
-                "reflect": false
-            },
-            "validation_id": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "validation_id",
                 "reflect": false,
-                "defaultValue": "'text'"
+                "attribute": "validation_type"
             },
             "input_type": {
                 "type": "string",
@@ -292,8 +176,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_type"
             },
             "custom_class": {
                 "type": "string",
@@ -311,8 +195,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -331,8 +215,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "aria_label": {
                 "type": "string",
@@ -350,8 +234,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
                 "reflect": false,
+                "attribute": "aria_label",
                 "defaultValue": "''"
             },
             "button_aria_label": {
@@ -370,8 +254,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_aria_label",
                 "reflect": false,
+                "attribute": "button_aria_label",
                 "defaultValue": "''"
             },
             "input_id": {
@@ -390,27 +274,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_id",
-                "reflect": false
-            },
-            "input_name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "input_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_id"
             },
             "button_id": {
                 "type": "string",
@@ -428,27 +293,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_id",
-                "reflect": false
-            },
-            "delete_button_id": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "delete_button_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_id"
             },
             "button_name": {
                 "type": "string",
@@ -466,69 +312,10 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_name",
-                "reflect": false
-            },
-            "accept": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "accept",
-                "reflect": false
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
-                "defaultValue": "false"
+                "attribute": "button_name"
             },
-            "max_file_size": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "max_file_size",
-                "reflect": false,
-                "defaultValue": "5"
-            },
-            "file_size_error_message": {
+            "input_name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -537,73 +324,21 @@ export class DdaAttachFile {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "file_size_error_message",
                 "reflect": false,
-                "defaultValue": "'File size should not exceed {max} MB'"
+                "attribute": "input_name"
             }
         };
     }
     static get states() {
         return {
-            "file": {},
-            "isFileUploaded": {},
-            "internalErrorMessage": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "fileChanged",
-                "name": "fileChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "File | null",
-                    "resolved": "File",
-                    "references": {
-                        "File": {
-                            "location": "global",
-                            "id": "global::File"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "getFile": {
-                "complexType": {
-                    "signature": "() => Promise<File | null>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "File": {
-                            "location": "global",
-                            "id": "global::File"
-                        }
-                    },
-                    "return": "Promise<File>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
+            "file": {}
         };
     }
 }
-//# sourceMappingURL=dda-attach-file.js.map