@mgdis/mg-components 6.19.0 → 6.21.0

package/dist/collection/components/molecules/inputs/mg-input-file/mg-input-file.js

@@ -0,0 +1,877 @@
+import { h } from "@stencil/core";
+import { allItemsAreString, ClassList, isObject, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { localeByte } from "@mgdis/core-ui-helpers/dist/locale";
+import { classDisabled } from "../mg-input/mg-input.conf";
+import { initLocales } from "../../../../locales";
+const allItemsAreFile = (items) => {
+    return Array.isArray(items) && items.every(item => isObject(item) && typeof item.name === 'string' && typeof item.size === 'number');
+};
+export class MgInputFile {
+    constructor() {
+        // hasDisplayedError (triggered by blur event)
+        this.hasDisplayedError = false;
+        this.customErrorMessage = { lock: false };
+        /**
+         * Input name
+         * If not set the value equals the identifier
+         */
+        this.name = this.identifier;
+        /**
+         * Define if label is displayed on top
+         */
+        this.labelOnTop = false;
+        /**
+         * Define if label is visible
+         */
+        this.labelHide = false;
+        /**
+         * Define multiple files
+         * When the multiple Boolean attribute is specified, the file input allows the user to select more than one file.
+         * (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple).
+         */
+        this.multiple = false;
+        /**
+         * Define if input is required
+         */
+        this.required = false;
+        /**
+         * Define if input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Define tooltip position
+         */
+        this.tooltipPosition = 'input';
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-input--file']);
+        /**
+         * Files list
+         */
+        this.files = [];
+        /**
+         * Method to set validity values
+         * @param newValue - valid new value
+         */
+        this.setValidity = (newValue) => {
+            const oldValue = this.valid;
+            if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
+                this.valid = newValue;
+            }
+            this.invalid = !this.valid;
+            // We need to send valid event even if it is the same value
+            if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue)) {
+                this.inputValid.emit(this.valid);
+            }
+        };
+        /**
+         * Handle change event
+         */
+        this.handleInputChange = (event) => {
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+            this.files = Array.from(event.target.files);
+            // Reset input focus to the button after file selection
+            this.fileButtonElement.focus();
+        };
+        /**
+         * Handle input focus event
+         */
+        this.handleInputFocus = () => {
+            this.fileButtonElement.dataset.focusVisible = '';
+        };
+        /**
+         * Handle input blur event
+         */
+        this.handleInputBlur = () => {
+            // Display Error
+            this.handlerInProgress = 'blur';
+            this.displayError().finally(() => {
+                // reset guard
+                this.handlerInProgress = undefined;
+            });
+            delete this.fileButtonElement.dataset.focusVisible;
+        };
+        /**
+         * Handle button blur event
+         */
+        this.handleButtonBlur = () => {
+            this.inputElement.blur();
+        };
+        /**
+         * Handle add file button click
+         */
+        this.handleButtonClick = () => {
+            this.inputElement.click();
+        };
+        /**
+         * Check if input is valid
+         */
+        this.checkValidity = () => {
+            this.setValidity(this.disabled || (!this.isMaxSizeExceeded() && this.inputElement.checkValidity()));
+        };
+        /**
+         * Handle delete file button click
+         */
+        this.handleDeleteFileClick = () => {
+            this.files = [];
+            // Reset input focus to the button after file selection
+            this.fileButtonElement.focus();
+        };
+        /**
+         * Set input error message
+         * @param fromSetErrorContext - context come from `setError` method
+         */
+        this.setErrorMessage = (fromSetErrorContext = false) => {
+            // Set error message
+            this.errorMessage = undefined;
+            if (!this.valid) {
+                // Does have a new custom error message OR does have a custom error message locked
+                if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
+                    this.errorMessage = this.customErrorMessage.message;
+                }
+                // Does not match max size
+                else if (this.isMaxSizeExceeded()) {
+                    this.errorMessage = this.messages.input.file.errors.maxSize.replace('{{maxSize}}', localeByte(this.maxSize, this.locale));
+                }
+                // required
+                else if (this.inputElement.validity.valueMissing) {
+                    this.errorMessage = this.messages.errors.required;
+                }
+            }
+        };
+        /**
+         * Check if max size is exceeded
+         * @returns boolean - true if max size is exceeded
+         */
+        this.isMaxSizeExceeded = () => {
+            return this.maxSize >= 0 && this.files.some(file => file.size > this.maxSize);
+        };
+        /**
+         * Render files
+         * @returns formated files.
+         */
+        this.renderFiles = () => {
+            const fileListId = `${this.identifier}-file-list`;
+            const renderFileName = (file) => (h("span", { class: "mg-c-input__file-item-name" }, file.name, file.size > 0 ? h("span", { class: "mg-c-input__file-item-size" }, ` ${localeByte(file.size, this.locale)}`) : undefined));
+            const renderDeleteButton = () => (h("mg-button", { variant: "flat", class: "mg-c-input__file-delete-button", "is-icon": true, label: this.messages.input.file.deleteButton, type: "button", disabled: this.disabled, "aria-controls": [this.identifier, fileListId].join(' '), onClick: this.handleDeleteFileClick }, h("mg-icon", { icon: "cross" })));
+            if (this.files.length === 0) {
+                return null;
+            }
+            else if (this.files.length === 1) {
+                return (h("div", { class: "mg-c-input__file-item" }, renderFileName(this.files[0]), renderDeleteButton()));
+            }
+            else {
+                return (h("div", { class: "mg-c-input__file-list-container" }, h("ul", { role: "list", class: "mg-c-input__file-list", id: fileListId }, Array.from(this.files).map((file, index) => (h("li", { class: "mg-c-input__file-item", key: `${file.name}-${index}` }, renderFileName(file))))), renderDeleteButton()));
+            }
+        };
+    }
+    watchValue(newValue) {
+        if (allItemsAreString(newValue)) {
+            this.files = this.value.map((fileName) => new File([], fileName));
+        }
+        else if (allItemsAreFile(newValue)) {
+            this.files = this.value;
+        }
+        else if (newValue !== undefined) {
+            throw new Error(`<mg-input-file> prop "value" must be an array of strings or File objects. Passed value: ${toString(newValue)}.`);
+        }
+        else {
+            this.files = [];
+        }
+        this.valueChange.emit(newValue);
+    }
+    watchMultiple() {
+        if (this.multiple === false && this.files.length > 1) {
+            throw new Error(`<mg-input-file> prop "value" must be a single file when prop "multiple" is set to false.`);
+        }
+    }
+    watchAccept(newValue) {
+        if (newValue !== undefined && !isValidString(newValue)) {
+            throw new Error(`<mg-input-file> prop "accept" must be a valid string.`);
+        }
+    }
+    handleValidityChange(newValue, _oldValue, prop) {
+        if (this.inputElement !== undefined) {
+            this.inputElement[prop] = newValue;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+                this.hasDisplayedError = false;
+            }
+        }
+    }
+    watchDisabled(newValue) {
+        if (newValue) {
+            this.classCollection.add(classDisabled);
+        }
+        else {
+            this.classCollection.delete(classDisabled);
+        }
+    }
+    watchHelpText() {
+        if (!isValidString(this.helpText)) {
+            const helpText = [];
+            if (this.maxSize !== undefined) {
+                helpText.push(this.messages.input.file.helpText.maxSize.replace('{{maxSize}}', localeByte(this.maxSize, this.locale)));
+            }
+            if (this.accept !== undefined) {
+                helpText.push(this.messages.input.file.helpText.accept.replace('{{accept}}', this.accept));
+            }
+            this.helpText = helpText.join('. ');
+        }
+    }
+    watchFiles(newValue, oldValue) {
+        if (toString(newValue) !== toString(oldValue)) {
+            this.value = newValue.length > 0 ? newValue : undefined;
+        }
+    }
+    /**
+     * Set focus on input add file button
+     */
+    async setFocus() {
+        this.fileButtonElement.focus();
+    }
+    /**
+     * Display input error if it exists.
+     */
+    displayError() {
+        // Use `Promise` as requested for stencil method
+        // Use `requestAnimationFrame` to ensure:
+        // - DOM is fully updated before validation
+        // - Async operations are completed
+        // - No timing issues with Stencil's render cycle
+        // - Keep everything in sync both inside and outside the component
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                this.checkValidity();
+                this.setErrorMessage();
+                this.hasDisplayedError = this.invalid;
+                resolve();
+            });
+        });
+    }
+    /**
+     * Set an error and display a custom error message.
+     * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+     * It must be paired with an error message to display for the given context.
+     * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+     * @param valid - value indicating the validity
+     * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
+     */
+    async setError(valid, errorMessage, errorMessageLock = false) {
+        if (typeof valid !== 'boolean') {
+            throw new Error('<mg-input-file> method "setError()" param "valid" must be a boolean.');
+        }
+        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
+            throw new Error('<mg-input-file> method "setError()" param "errorMessage" must be a string.');
+        }
+        else {
+            this.customErrorMessage = {
+                lock: valid ? false : errorMessageLock,
+                message: valid ? undefined : errorMessage,
+            };
+            this.setValidity(valid);
+            this.setErrorMessage(true);
+            this.hasDisplayedError = this.invalid;
+        }
+    }
+    /**
+     * Reset value, validity and error state
+     */
+    async reset() {
+        this.files = [];
+        // Use `Promise` as requested for stencil method
+        // Use `requestAnimationFrame` to ensure:
+        // - DOM is fully updated before validation
+        // - Async operations are completed
+        // - No timing issues with Stencil's render cycle
+        // - Keep everything in sync both inside and outside the component
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                // unlock validity check by resetting customErrorMessage
+                this.customErrorMessage = { lock: false };
+                this.checkValidity();
+                this.errorMessage = undefined;
+                this.hasDisplayedError = false;
+                resolve();
+            });
+        });
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     * @returns timeout
+     */
+    componentWillLoad() {
+        // Get locales
+        const locales = initLocales(this.element);
+        this.locale = locales.locale;
+        this.messages = locales.messages;
+        // Validate
+        this.watchValue(this.value);
+        this.watchDisabled(this.disabled);
+        this.watchHelpText();
+        this.watchAccept(this.accept);
+        this.watchMultiple();
+        // Check validity when component is ready
+        // return a promise to process action only in the FIRST render().
+        // https://stenciljs.com/docs/component-lifecycle#componentwillload
+        return setTimeout(() => {
+            this.checkValidity();
+        }, 0);
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h("mg-input", { key: '3bcbf416c083d857aac2ad556bb2a218fe9ef82f', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("div", { key: '88fafc6fd4a84c05a545c0083193e2ee0db54bfb', class: "mg-c-input__file-container" }, h("input", { key: 'ad1d14bc95390d5db56191ebff0d092ed5478183', name: this.name, id: this.identifier, class: "mg-u-visually-hidden", type: "file", multiple: this.multiple === true, capture: this.capture, accept: this.accept, disabled: this.disabled, required: this.files.length === 0 && this.required, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-invalid": (this.invalid === true).toString(), ref: (el) => {
+                this.inputElement = el;
+            } }), h("mg-button", { key: 'ace59bb90e27f924ce85e96abd277e752c75b6b8', variant: "secondary", class: "mg-c-input__file-button", type: "button", disabled: this.disabled, onClick: this.handleButtonClick, onBlur: this.handleButtonBlur, tabindex: "-1", ref: (el) => {
+                this.fileButtonElement = el;
+            } }, this.messages.input.file.browse), this.renderFiles())));
+    }
+    static get is() { return "mg-input-file"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-file.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-input-file.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Component value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "identifier"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input name\nIf not set the value equals the identifier"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "this.identifier"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "labelOnTop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if label is displayed on top"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-on-top",
+                "defaultValue": "false"
+            },
+            "labelHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if label is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-hide",
+                "defaultValue": "false"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define multiple files\nWhen the multiple Boolean attribute is specified, the file input allows the user to select more than one file.\n(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define file accept format\nThe accept property is an attribute of the file `<input>` type\nthat defines the file types the file input should accept\n(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept"
+            },
+            "maxSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define max file size (in octets)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-size"
+            },
+            "capture": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'user' | 'environment' | ''",
+                    "resolved": "\"\" | \"environment\" | \"user\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input capture attribute\nThe capture attribute is a Boolean attribute that specifies\nif the device's camera or microphone should be used to capture\nmedia directly, instead of choosing an existing file.\n(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#capture)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "capture"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if input is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Add a tooltip message next to the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip"
+            },
+            "tooltipPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipPosition",
+                    "resolved": "\"input\" | \"label\"",
+                    "references": {
+                        "TooltipPosition": {
+                            "location": "import",
+                            "path": "../mg-input/mg-input.conf",
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define tooltip position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip-position",
+                "defaultValue": "'input'"
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Add a help text under the input, usually expected data format and example"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "help-text"
+            },
+            "valid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input valid state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "valid"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define input invalid state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "classCollection": {},
+            "errorMessage": {},
+            "files": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "value-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted event when value change"
+                },
+                "complexType": {
+                    "original": "HTMLMgInputFileElement['value']",
+                    "resolved": "any",
+                    "references": {
+                        "HTMLMgInputFileElement": {
+                            "location": "global",
+                            "id": "global::HTMLMgInputFileElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "inputValid",
+                "name": "input-valid",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted event when checking validity"
+                },
+                "complexType": {
+                    "original": "HTMLMgInputFileElement['valid']",
+                    "resolved": "boolean",
+                    "references": {
+                        "HTMLMgInputFileElement": {
+                            "location": "global",
+                            "id": "global::HTMLMgInputFileElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set focus on input add file button",
+                    "tags": []
+                }
+            },
+            "displayError": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Display input error if it exists.",
+                    "tags": []
+                }
+            },
+            "setError": {
+                "complexType": {
+                    "signature": "(valid: MgInputFile[\"valid\"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "valid",
+                            "type": "boolean",
+                            "docs": "- value indicating the validity"
+                        }, {
+                            "name": "errorMessage",
+                            "type": "string",
+                            "docs": "- the error message to display"
+                        }, {
+                            "name": "errorMessageLock",
+                            "type": "boolean",
+                            "docs": "- lock the error message and validity state"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "MgInputFile": {
+                            "location": "global",
+                            "id": "global::MgInputFile"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "valid - value indicating the validity"
+                        }, {
+                            "name": "param",
+                            "text": "errorMessage - the error message to display"
+                        }, {
+                            "name": "param",
+                            "text": "errorMessageLock - lock the error message and validity state"
+                        }]
+                }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Reset value, validity and error state",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchValue"
+            }, {
+                "propName": "multiple",
+                "methodName": "watchMultiple"
+            }, {
+                "propName": "value",
+                "methodName": "watchMultiple"
+            }, {
+                "propName": "accept",
+                "methodName": "watchAccept"
+            }, {
+                "propName": "required",
+                "methodName": "handleValidityChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleValidityChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchDisabled"
+            }, {
+                "propName": "helpText",
+                "methodName": "watchHelpText"
+            }, {
+                "propName": "accept",
+                "methodName": "watchHelpText"
+            }, {
+                "propName": "maxSize",
+                "methodName": "watchHelpText"
+            }, {
+                "propName": "files",
+                "methodName": "watchFiles"
+            }];
+    }
+}