@mgdis/mg-components 6.18.0 → 6.20.0

package/dist/collection/components/atoms/mg-icon/mg-icon.js

@@ -144,7 +144,7 @@ export class MgIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"key\" | \"list\" | \"copy\" | \"history\" | \"location\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-download\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
+                    "resolved": "\"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"key\" | \"list\" | \"copy\" | \"history\" | \"location\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
                     "references": {
                         "IconType": {
                             "location": "import",

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

@@ -14,3 +14,4 @@ export const classFieldset = 'mg-c-input--fieldset';
 export const classDisabled = 'mg-c-input--disabled';
 export const classReadonly = 'mg-c-input--readonly';
 export const classVerticalList = 'mg-c-input--vertical-list';
+export const classDisplayCharacterLeft = 'mg-c-input--display-character-left';

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

@@ -26,7 +26,7 @@ const isFetchmappings = (value) => {
         const { request, response } = value;
         if ([request, response].some(property => !isObject(property)))
             return false;
-        const isValidRequest = typeof request.filter === 'string';
+        const isValidRequest = typeof request.filter === 'string' && (request.filterTransform === undefined || typeof request.filterTransform === 'function');
         const isValidResponse = typeof response === 'object' &&
             typeof response.total === 'string' &&
             typeof response.items === 'string' &&
@@ -41,11 +41,6 @@ const isFetchmappings = (value) => {
 };
 export class MgInputCombobox {
     constructor() {
-        /************
-         * Internal *
-         ************/
-        // Classes
-        this.classFocus = 'mg-u-is-focused';
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
         this.customErrorMessage = { lock: false };
@@ -103,7 +98,7 @@ export class MgInputCombobox {
          * @param event - option element click event
          */
         this.handleOptionClick = (event) => {
-            this.setValue(this.options.items.find(option => formatID(option.value) === event.target.id));
+            this.setValue(this.options.items.find(option => toString(option.value) === event.target.dataset.value));
             this.popoverDisplay = false;
         };
         /**
@@ -143,16 +138,20 @@ export class MgInputCombobox {
         /**
          * Handle `blur` event
          */
-        this.handleFilterBlur = () => {
-            // skip process if popover is displayed
-            if (this.popoverDisplay)
-                return;
-            // Display Error
-            this.handlerInProgress = 'blur';
-            this.displayError().finally(() => {
-                // reset guard
-                this.handlerInProgress = undefined;
-            });
+        this.handleFilterBlur = (event) => {
+            if (this.popoverDisplay) {
+                // prevent blur event to bubble up and reset input focus process when popover is open
+                event.stopImmediatePropagation();
+                this.input.focus();
+            }
+            else {
+                // Display Error
+                this.handlerInProgress = 'blur';
+                this.displayError().finally(() => {
+                    // reset guard
+                    this.handlerInProgress = undefined;
+                });
+            }
         };
         /**
          * Handle `focus` event
@@ -340,10 +339,10 @@ export class MgInputCombobox {
             }
         };
         /**
-         * Get filtered options from `filter` input value
-         * @returns filtered options
+         * Get first page with filter applied
+         * @returns first page with filter applied
          */
-        this.optionsFilter = (option) => (this.filter === '' ? true : option.title.toLocaleLowerCase().includes(this.filter.toLocaleLowerCase()));
+        this.getFirstPage = () => this.options.getPage(0, option => this.filter === '' || option.title.toLocaleLowerCase().includes(this.filter.toLocaleLowerCase()));
         /**
          * Loading wrapper with a given action
          * @param action - wrapped loading action
@@ -387,7 +386,7 @@ export class MgInputCombobox {
             return promise()
                 .then(() => {
                 // parse full items list from options
-                const options = this.options.items.filter(this.optionsFilter);
+                const options = this.filter === '' ? this.options.items : this.options.items.filter(option => option.title.includes(this.filter));
                 // update visual focus
                 if (action.name !== 'load-data') {
                     index = this.page.getIndexFromCursor(action.cursor, this.loadingAction === 'load-more' && index >= 0 ? options[index] : this.option);
@@ -443,7 +442,7 @@ export class MgInputCombobox {
                 });
             }
             else {
-                this.page = this.options.getPage(0, this.optionsFilter);
+                this.page = this.getFirstPage();
             }
         };
         /**
@@ -452,8 +451,9 @@ export class MgInputCombobox {
          * @returns new page from url
          */
         this.getOptions = async (url = this.fetchurl) => {
-            // add text filter
-            const updateUrl = (typeof url === 'string' ? url : url.toString()).replaceAll(this.fetchmappings.request.filter, encodeURIComponent(this.filter));
+            // add text filter to url
+            const filter = typeof this.fetchmappings.request.filterTransform === 'function' ? this.fetchmappings.request.filterTransform(this.filter) : this.filter;
+            const updateUrl = (typeof url === 'string' ? url : url.toString()).replaceAll(this.fetchmappings.request.filter, encodeURIComponent(filter));
             try {
                 const response = await fetch(updateUrl, this.fetchoptions);
                 if (!response.ok) {
@@ -461,10 +461,13 @@ export class MgInputCombobox {
                     return;
                 }
                 const json = await response.json();
-                const items = getObjectValueFromKey(json, this.fetchmappings.response.items).map((item) => ({
-                    title: getObjectValueFromKey(item, this.fetchmappings.response.itemTitle),
-                    value: this.fetchmappings.response.itemValue !== undefined ? getObjectValueFromKey(item, this.fetchmappings.response.itemValue) : item,
-                }));
+                const items = getObjectValueFromKey(json, this.fetchmappings.response.items).map((item) => {
+                    var _a;
+                    return ({
+                        title: getObjectValueFromKey(item, this.fetchmappings.response.itemTitle),
+                        value: (_a = getObjectValueFromKey(item, this.fetchmappings.response.itemValue)) !== null && _a !== void 0 ? _a : item,
+                    });
+                });
                 const total = Number(getObjectValueFromKey(json, this.fetchmappings.response.total, 0));
                 let next = getObjectValueFromKey(json, this.fetchmappings.response.next);
                 if (URL.canParse(updateUrl) && Boolean(next) && !URL.canParse(next)) {
@@ -566,8 +569,8 @@ export class MgInputCombobox {
             throw new Error(`<mg-input-combobox> prop "fetchmappings" value must be { request: RequestMappingType, response: ResponseMappingType }. Passed value: ${toString(newValue)}.`);
         }
     }
-    watchOptions(newValue) {
-        this.page = newValue.getPage(0, this.filter.length > 0 ? this.optionsFilter : undefined);
+    watchOptions() {
+        this.page = this.getFirstPage();
     }
     watchFilter(newValue) {
         this.loadingWrapper({ name: 'load-data' });
@@ -575,7 +578,6 @@ export class MgInputCombobox {
     }
     watchPopoverDisplay(newValue) {
         if (newValue) {
-            this.classCollection.add(this.classFocus);
             this.input.focus();
         }
         else {
@@ -583,7 +585,6 @@ export class MgInputCombobox {
             this.option = null;
             // reset filter with value
             this.filter = this.getValueTitle();
-            this.classCollection.delete(this.classFocus);
             this.handlerInProgress = 'blur';
             this.displayError().finally(() => {
                 // reset guard
@@ -717,7 +718,7 @@ export class MgInputCombobox {
             this.loadingWrapper({ name: 'load-data' });
         }
         this.watchValue(this.value);
-        this.watchOptions(this.options);
+        this.watchOptions();
         this.watchMgWidth(this.mgWidth);
         this.watchReadonly(this.readonly);
         this.watchDisabled(this.disabled);
@@ -757,7 +758,7 @@ export class MgInputCombobox {
         else {
             activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
         }
-        return (h("mg-input", { key: 'bebf380dbdea1a9f9e0257a9425dcb6cd94a7a52', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: "bottom-start", display: this.popoverDisplay, "arrow-hide": true, style: {
+        return (h("mg-input", { key: 'ee8222484fa6546a422eb724fdea67402644c0cc', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: "bottom-start", display: this.popoverDisplay, "arrow-hide": true, style: {
                 '--mg-c-input-list-width': ((_f = this.input) === null || _f === void 0 ? void 0 : _f.offsetWidth) > 0 ? `${this.input.offsetWidth}px` : undefined,
             }, "data-fallback-placement": "bottom-end", "onDisplay-change": this.handlePopoverDisplay }, h("div", { class: "mg-c-input__input-group-container" }, h("mg-icon", { icon: "magnifying-glass" }), h("input", { type: "text", role: "combobox", class: "mg-c-input__box mg-c-input__box--width", value: this.filter, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.popoverDisplay.toString(), "aria-controls": listId, "aria-invalid": (this.invalid === true).toString(), "aria-activedescendant": formatID(activeDescendant), onInput: this.handleFilterInput, onBlur: this.handleFilterBlur, onFocus: this.handleFilterFocus, onKeyDown: this.handleFilterKeydown, ref: (el) => {
                 if (el !== null)
@@ -772,7 +773,7 @@ export class MgInputCombobox {
                         'mg-c-input__input-list-item': true,
                         'mg-c-input__input-list-item--focus-visible': JSON.stringify((_a = this.option) === null || _a === void 0 ? void 0 : _a.value) === JSON.stringify(option.value),
                         'mg-c-input__input-list-item--selected': this.isCurrentOption(option),
-                    }, key: option.title, id: formatID(option.value), "aria-selected": this.isCurrentOption(option).toString(), onClick: this.handleOptionClick }, option.title, this.isCurrentOption(option) && h("mg-icon", { icon: "check" })));
+                    }, key: option.title, id: formatID(option.value), "aria-selected": this.isCurrentOption(option).toString(), "data-value": toString(option.value), onClick: this.handleOptionClick }, option.title, this.isCurrentOption(option) && h("mg-icon", { icon: "check" })));
             })),
             this.isLoading && h("mg-loader", { key: "loader", message: this.messages.input.combobox.search, class: { 'mg-u-visually-hidden': Boolean(this.page.next) } }),
             this.page.next && (h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, disabled: this.isLoading, "full-width": true, "disable-on-click": true, onClick: this.handleLoadMoreButton, "aria-controls": listId, ref: (el) => {

package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js

@@ -8,8 +8,6 @@ export class MgInputRichTextEditor {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
         this.customErrorMessage = { lock: false };
-        // Classes
-        this.classFocus = 'mg-u-is-focused';
         /**
          * Define the value of the editor
          * Can be either HTML string or plain text
@@ -96,7 +94,6 @@ export class MgInputRichTextEditor {
          * Handle focus event
          */
         this.handleFocus = () => {
-            this.classCollection.add(this.classFocus);
             this.classCollection = new ClassList(this.classCollection.classes);
         };
         /**
@@ -105,7 +102,6 @@ export class MgInputRichTextEditor {
          */
         this.handleBlur = () => {
             // Manage focus
-            this.classCollection.delete(this.classFocus);
             this.classCollection = new ClassList(this.classCollection.classes);
             if (!this.readonly) {
                 this.checkValidity();
@@ -173,7 +169,7 @@ export class MgInputRichTextEditor {
      * Get editor content as HTML
      * @returns HTML content of the editor
      */
-    async getHTML() {
+    getHTML() {
         return new Promise(resolve => {
             requestAnimationFrame(() => {
                 resolve(this.editor.getSemanticHTML());
@@ -321,7 +317,7 @@ export class MgInputRichTextEditor {
      * @returns HTML mg-input Element
      */
     render() {
-        return (h("mg-input", { key: '2f8f244cb60996c9cbe891b04168b5aea420d3a0', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { ref: el => {
+        return (h("mg-input", { key: '5e807e1059704a6624a1fda63ab56a6f9a51230f', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { ref: el => {
                 this.wrapperElement = el;
             }, id: this.identifier, class: "mg-c-input__wrapper" }, h("div", null)))));
     }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { allItemsAreString, ClassList, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { helpTextTypes, textTypes } from "./mg-input-text.conf";
-import { widths, classReadonly, classDisabled } from "../mg-input/mg-input.conf";
+import { widths, classReadonly, classDisabled, classDisplayCharacterLeft } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 /**
  * Check if object is an option
@@ -24,7 +24,6 @@ export class MgInputText {
          * Internal *
          ************/
         // Classes
-        this.classFocus = 'mg-u-is-focused';
         this.classIsInputGroupAppend = 'mg-c-input--is-input-group-append';
         this.classHasIcon = 'mg-c-input--has-icon';
         this.classHasButtonsGroupAppend = 'mg-c-input--has-buttons-group-append';
@@ -101,20 +100,10 @@ export class MgInputText {
             }
             this.value = this.input.value;
         };
-        /**
-         * Handle focus event
-         */
-        this.handleFocus = () => {
-            this.classCollection.add(this.classFocus);
-            this.classCollection = new ClassList(this.classCollection.classes);
-        };
         /**
          * Handle blur event
          */
         this.handleBlur = () => {
-            // Manage focus
-            this.classCollection.delete(this.classFocus);
-            this.classCollection = new ClassList(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = 'blur';
             this.displayError().finally(() => {
@@ -248,6 +237,14 @@ export class MgInputText {
     watchPattern() {
         this.validatePattern();
     }
+    validateCharacterLeftHide(newValue) {
+        if (newValue) {
+            this.classCollection.delete(classDisplayCharacterLeft);
+        }
+        else {
+            this.classCollection.add(classDisplayCharacterLeft);
+        }
+    }
     watchHelpText(newValue) {
         if (!isValidString(newValue) && helpTextTypes.includes(this.type)) {
             this.helpText = this.messages.input.text.helpText[this.type];
@@ -363,6 +360,7 @@ export class MgInputText {
         this.watchMgWidth(this.mgWidth);
         this.watchReadonly(this.readonly);
         this.watchDisabled(this.disabled);
+        this.validateCharacterLeftHide(this.characterLeftHide);
         this.validateType(this.type);
         this.watchHelpText(this.helpText);
         // Check validity when component is ready
@@ -377,12 +375,12 @@ export class MgInputText {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '69e40a90a6e4be8aa1eb3ac1b53acfe899c20453', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
+        return (h("mg-input", { key: 'b6360c95530daf744ae5c3eb5cc41d6c81c3e35c', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
             ? this.value && this.renderReadonly()
             : [
-                h("div", { key: "input", class: "mg-c-input__with-character-left", style: {
+                h("div", { key: "input", class: "mg-c-input__input-group-container", style: {
                         '--mg-c-character-left-message-length': (!this.characterLeftHide ? this.maxlength.toString().length * 2 + 1 : 0).toString(),
-                    } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type === 'emails' ? 'email' : this.type, multiple: this.type === 'emails', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
+                    } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type === 'emails' ? 'email' : this.type, multiple: this.type === 'emails', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                         if (el !== null)
                             this.input = el;
                     } }), this.hasDatalist() && (h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (h("option", { value: isOption(option) ? option.title : option, key: option }))))), !this.characterLeftHide && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))),
@@ -551,7 +549,7 @@ export class MgInputText {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"key\" | \"list\" | \"copy\" | \"history\" | \"location\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-download\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
+                    "resolved": "\"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"key\" | \"list\" | \"copy\" | \"history\" | \"location\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
                     "references": {
                         "IconType": {
                             "location": "import",
@@ -1065,6 +1063,9 @@ export class MgInputText {
             }, {
                 "propName": "patternErrorMessage",
                 "methodName": "watchPattern"
+            }, {
+                "propName": "characterLeftHide",
+                "methodName": "validateCharacterLeftHide"
             }, {
                 "propName": "helpText",
                 "methodName": "watchHelpText"

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

@@ -1,15 +1,9 @@
 import { h } from "@stencil/core";
 import { ClassList, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
-import { widths, classReadonly, classDisabled } from "../mg-input/mg-input.conf";
+import { widths, classReadonly, classDisabled, classDisplayCharacterLeft } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 export class MgInputTextarea {
     constructor() {
-        /************
-         * Internal *
-         ************/
-        // Classes
-        this.classFocus = 'mg-u-is-focused';
-        this.classDisplayCharacterLeft = 'mg-c-input--display-character-left';
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
         this.customErrorMessage = { lock: false };
@@ -76,20 +70,10 @@ export class MgInputTextarea {
             }
             this.value = this.input.value;
         };
-        /**
-         * Handle focus event
-         */
-        this.handleFocus = () => {
-            this.classCollection.add(this.classFocus);
-            this.classCollection = new ClassList(this.classCollection.classes);
-        };
         /**
          * Handle blur event
          */
         this.handleBlur = () => {
-            // Manage focus
-            this.classCollection.delete(this.classFocus);
-            this.classCollection = new ClassList(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = 'blur';
             this.displayError().finally(() => {
@@ -174,10 +158,10 @@ export class MgInputTextarea {
     }
     validatecharacterLeftHide(newValue) {
         if (newValue) {
-            this.classCollection.delete(this.classDisplayCharacterLeft);
+            this.classCollection.delete(classDisplayCharacterLeft);
         }
         else {
-            this.classCollection.add(this.classDisplayCharacterLeft);
+            this.classCollection.add(classDisplayCharacterLeft);
         }
     }
     /**
@@ -300,13 +284,13 @@ export class MgInputTextarea {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '9b58ccb9f0b150f5de8cc9f895f4cdea2bbbeecd', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__with-character-left" }, h("textarea", { class: {
+        return (h("mg-input", { key: 'a43b8b1572249e31fb6ea5bd9244639698629218', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__input-group-container" }, h("textarea", { class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--width': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',
                 'mg-c-input__box--resizable-horizontal': this.resizable === 'horizontal',
                 'mg-c-input__box--resizable-vertical': this.resizable === 'vertical',
-            }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
+            }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }), !this.characterLeftHide && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))))));