@mgdis/mg-components 6.20.0 → 6.22.0

package/dist/esm/mg-input-file.entry.js

@@ -0,0 +1,382 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DFwaH2hS.js';
+import { C as ClassList, b as allItemsAreString, t as toString, i as isValidString, c as isObject } from './index-C7xjtdiw.js';
+import { l as localeByte, i as initLocales } from './index-DSEloqPn.js';
+import { a as classDisabled } from './mg-input.conf-C9rmNQIL.js';
+
+const mgInputFileCss = () => `.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__file-container{display:flex;flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-input__file-item{display:inline-flex;min-height:var(--mg-b-size-min-height);align-items:center;padding-left:var(--mg-b-size-8);background-color:var(--mg-b-color-neutral-10);font-weight:600;gap:var(--mg-b-size-8)}.mg-c-input__file-item-name{word-break:break-all}.mg-c-input__file-item-size{color:var(--mg-b-color-neutral-90);font-weight:400;word-break:normal}.mg-c-input__file-delete-button{align-self:flex-start}.mg-c-input__file-list{display:flex;flex-direction:column;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input__file-list .mg-c-input__file-item{min-height:unset;padding:var(--mg-b-size-8)}.mg-c-input__file-list-container{position:relative;padding:var(--mg-b-size-8) calc(var(--mg-b-size-8) + var(--mg-b-size-min-height)) var(--mg-b-size-8) var(--mg-b-size-8);border:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);border-radius:var(--mg-b-size-4)}.mg-c-input__file-list-container .mg-c-input__file-delete-button{position:absolute;top:0;right:0}`;
+
+const allItemsAreFile = (items) => {
+    return Array.isArray(items) && items.every(item => isObject(item) && typeof item.name === 'string' && typeof item.size === 'number');
+};
+const MgInputFile = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "value-change", 7);
+        this.inputValid = createEvent(this, "input-valid", 7);
+        // 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: '48337d8e0a059dbea60c4bfa152468429b37b897', 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: 'b0a67412ce2a054ce84f001efe01156bfce001a1', class: "mg-c-input__file-container" }, h("input", { key: '0585b37ac4da8e5b29b94c04a298cfd8451016c9', 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: '0c71ea34375f60a357ad2aa38353c7acafc1091a', 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())));
+    }
+    get element() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "watchValue": 0
+            }, {
+                "watchMultiple": 0
+            }],
+        "multiple": [{
+                "watchMultiple": 0
+            }],
+        "accept": [{
+                "watchAccept": 0
+            }, {
+                "watchHelpText": 0
+            }],
+        "required": [{
+                "handleValidityChange": 0
+            }],
+        "disabled": [{
+                "handleValidityChange": 0
+            }, {
+                "watchDisabled": 0
+            }],
+        "helpText": [{
+                "watchHelpText": 0
+            }],
+        "maxSize": [{
+                "watchHelpText": 0
+            }],
+        "files": [{
+                "watchFiles": 0
+            }]
+    }; }
+};
+MgInputFile.style = mgInputFileCss();
+
+export { MgInputFile as mg_input_file };