@mgdis/mg-components 6.17.0 → 6.19.0

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

@@ -1,10 +1,10 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-T6kOJXP1.js';
-import { P as Paginate, C as ClassList, f as formatID, a as Cursor, n as nextTick, g as getObjectValueFromKey, t as toString, b as allItemsAreString, i as isObject, c as isValidString, d as Page } from './index-WtiuOkLj.js';
-import { c as classReadonly, a as classDisabled, w as widths } from './mg-input.conf-CNgv8hc5.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BluNKQ3L.js';
+import { P as Paginate, C as ClassList, t as toString, a as Cursor, n as nextTick, g as getObjectValueFromKey, b as allItemsAreString, i as isValidString, c as isObject, f as formatID, d as Page } from './index-C7xjtdiw.js';
+import { c as classReadonly, a as classDisabled, w as widths } from './mg-input.conf-DDnrE1hD.js';
 import { i as initLocales } from './index-CNX6lq0x.js';
 import { K as Keys } from './events.utils-yMGqY8YG.js';
 
-const mgInputComboboxCss = ".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__with-character-left>mg-icon:first-of-type,.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__with-character-left .mg-c-input__box,.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-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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-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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--combobox mg-popover{--mg-c-card-overflow:hidden;--mg-c-popover-padding-vertical:0;--mg-c-popover-padding-horizontal:0}.mg-c-input.mg-c-input--combobox .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--combobox .mg-c-input__box{cursor:pointer}.mg-c-input.mg-c-input--combobox .mg-c-input__popover-container{display:flex;min-width:var(--mg-c-input-list-width);max-height:calc(50*var(--mg-b-size-8) - var(--mg-b-size-32));flex-direction:column;gap:var(--mg-b-size-4);overflow-y:scroll}.mg-c-input.mg-c-input--combobox .mg-c-input__load-more{padding:0 var(--mg-b-size-8) var(--mg-b-size-4)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list{padding:0;margin:0;cursor:pointer;list-style:none}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item{display:flex;padding:var(--mg-b-size-8)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item:hover,.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--focus-visible{background-color:var(--mg-b-color-neutral-20)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--selected{font-weight:700}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--selected mg-icon{margin-left:auto}.mg-c-input.mg-c-input--combobox.mg-c-input--width-2 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + var(--mg-b-size-24) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-4 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + var(--mg-b-size-48) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-16 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + calc(23 * var(--mg-b-size-8)) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full mg-popover{--mg-c-popover-max-width:var(--mg-c-input-list-width, var(--mg-c-popover-max-width))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full .mg-c-input__input-group-container{display:flex;width:100%}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full .mg-c-input__box{flex:1}.mg-c-input.mg-c-input--combobox.mg-c-input--input-append .mg-c-input__box{padding-right:calc(var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--input-append .mg-c-input__box-append{position:absolute;top:0;right:0}";
+const mgInputComboboxCss = ".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-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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-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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--combobox mg-popover{--mg-c-card-overflow:hidden;--mg-c-popover-padding-vertical:0;--mg-c-popover-padding-horizontal:0}.mg-c-input.mg-c-input--combobox .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--combobox .mg-c-input__box{cursor:pointer}.mg-c-input.mg-c-input--combobox .mg-c-input__popover-container{display:flex;min-width:var(--mg-c-input-list-width);max-height:calc(50*var(--mg-b-size-8) - var(--mg-b-size-32));flex-direction:column;gap:var(--mg-b-size-4);overflow-y:scroll}.mg-c-input.mg-c-input--combobox .mg-c-input__load-more{padding:0 var(--mg-b-size-8) var(--mg-b-size-4)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list{padding:0;margin:0;cursor:pointer;list-style:none}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item{display:flex;padding:var(--mg-b-size-8)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item:hover,.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--focus-visible{background-color:var(--mg-b-color-neutral-20)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--selected{font-weight:700}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--selected mg-icon{margin-left:auto}.mg-c-input.mg-c-input--combobox.mg-c-input--width-2 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + var(--mg-b-size-24) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-4 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + var(--mg-b-size-48) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-16 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + calc(23 * var(--mg-b-size-8)) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full mg-popover{--mg-c-popover-max-width:var(--mg-c-input-list-width, var(--mg-c-popover-max-width))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full .mg-c-input__input-group-container{display:flex;width:100%}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full .mg-c-input__box{flex:1}.mg-c-input.mg-c-input--combobox.mg-c-input--input-append .mg-c-input__box{padding-right:calc(var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--input-append .mg-c-input__box-append{position:absolute;top:0;right:0}";
 
 /**
  * Check if object is an item
@@ -29,7 +29,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' &&
@@ -50,13 +50,9 @@ const MgInputCombobox = class {
         this.showMore = createEvent(this, "load-more", 7);
         this.inputValid = createEvent(this, "input-valid", 7);
         this.fetchError = createEvent(this, "fetch-error", 7);
-        /************
-         * Internal *
-         ************/
-        // Classes
-        this.classFocus = 'mg-u-is-focused';
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        this.customErrorMessage = { lock: false };
         /**
          * Input name
          * If not set the value equals the identifier
@@ -111,7 +107,7 @@ const MgInputCombobox = class {
          * @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;
         };
         /**
@@ -191,7 +187,7 @@ const MgInputCombobox = class {
             // override keys actions
             switch (event.key) {
                 case Keys.TAB:
-                case Keys.ENTER:
+                case Keys.ENTER: {
                     guard = event.key === Keys.ENTER;
                     const option = (_a = this.option) !== null && _a !== void 0 ? _a : this.options.items.find(this.isCurrentOption);
                     // Sets the value to the content of the focused option in the listbox.
@@ -201,12 +197,13 @@ const MgInputCombobox = class {
                     // Closes the popover.
                     this.popoverDisplay = false;
                     break;
+                }
                 case Keys.DOWN:
                 case Keys.ARROWDOWN:
                 case Keys.UP:
-                case Keys.ARROWUP:
+                case Keys.ARROWUP: {
                     guard = true;
-                    if (this.isLoading || !(this.page.total > 0)) {
+                    if (this.isLoading || this.page.total === 0) {
                         this.popoverDisplay = true;
                         break;
                     }
@@ -237,12 +234,13 @@ const MgInputCombobox = class {
                     // open popover
                     this.popoverDisplay = true;
                     break;
+                }
                 case Keys.LEFT:
                 case Keys.ARROWLEFT:
                 case Keys.HOME:
                 case Keys.RIGHT:
                 case Keys.ARROWRIGHT:
-                case Keys.END:
+                case Keys.END: {
                     // skip process if visual focus is not in popover
                     if (!isItem(this.option))
                         break;
@@ -262,8 +260,9 @@ const MgInputCombobox = class {
                         this.input.setSelectionRange(index, index);
                     }
                     break;
+                }
                 case Keys.ESC:
-                case Keys.ESCAPE:
+                case Keys.ESCAPE: {
                     guard = true;
                     if (this.popoverDisplay) {
                         // If the popover is displayed, closes it.
@@ -277,10 +276,12 @@ const MgInputCombobox = class {
                         this.option = null;
                     }
                     break;
-                default:
+                }
+                default: {
                     // Remove visual focus from popover options
                     this.option = null;
                     break;
+                }
             }
             if (guard) {
                 event.stopPropagation();
@@ -326,40 +327,41 @@ const MgInputCombobox = class {
         };
         /**
          * Set input error message
-         * @param errorMessage - errorMessage override
+         * @param fromSetErrorContext - context come from `setError` method
          */
-        this.setErrorMessage = (errorMessage) => {
+        this.setErrorMessage = (fromSetErrorContext = false) => {
             // Set error message
             this.errorMessage = undefined;
-            // Does have a custom error message
-            if (!this.valid && errorMessage !== undefined) {
-                this.errorMessage = errorMessage;
-            }
-            // required
-            else if (!this.valid && this.input.validity.valueMissing) {
-                this.errorMessage = this.messages.errors.required;
+            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;
+                }
+                // required
+                else if (this.input.validity.valueMissing) {
+                    this.errorMessage = this.messages.errors.required;
+                }
             }
         };
         /**
-         * 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
          * @returns promisified action
          */
         this.loadingWrapper = (action) => {
+            var _a;
             let promise;
             let index;
             // cache initial loading action if not defined
-            if (!Boolean(this.loadingAction)) {
-                this.loadingAction = action.name;
-            }
+            (_a = this.loadingAction) !== null && _a !== void 0 ? _a : (this.loadingAction = action.name);
             // update index
             if (Boolean(this.option) && this.loadingAction !== 'load-more') {
-                index = this.page.items.findIndex(option => option.value.toString() === this.option.value.toString());
+                index = this.page.items.findIndex(option => toString(option.value) === toString(this.option.value));
             }
             else if (this.loadingAction === 'load-more') {
                 index = this.page.items.length - this.page.baseIndex;
@@ -389,7 +391,7 @@ const MgInputCombobox = class {
             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);
@@ -412,14 +414,14 @@ const MgInputCombobox = class {
          */
         this.goToNextPage = () => {
             this.showMore.emit();
-            if (Boolean(this.fetchurl)) {
+            if (this.fetchurl !== undefined) {
                 return this.getOptions(typeof this.page.next === 'string' ? this.page.next : undefined).then(nextPage => {
-                    if (!Boolean(nextPage))
-                        return;
-                    // merge items from current page and next page
-                    const items = [...this.page.items, ...nextPage.items];
-                    // create new options pagination withe merged items
-                    this.options = new Paginate(items, { total: nextPage.total, next: nextPage.next, top: items.length });
+                    if (nextPage !== undefined) {
+                        // merge items from current page and next page
+                        const items = [...this.page.items, ...nextPage.items];
+                        // create new options pagination withe merged items
+                        this.options = new Paginate(items, { total: nextPage.total, next: nextPage.next, top: items.length });
+                    }
                 });
             }
             else {
@@ -436,16 +438,16 @@ const MgInputCombobox = class {
          * @returns promise
          */
         this.updatePage = async () => {
-            if (Boolean(this.fetchurl)) {
+            if (this.fetchurl !== undefined) {
                 return this.getOptions().then(page => {
-                    if (!Boolean(page))
-                        return;
-                    // reset current options pagination from API response
-                    this.options = new Paginate(page.items, { total: page.total, next: page.next, top: page.top });
+                    if (page !== undefined) {
+                        // reset current options pagination from API response
+                        this.options = new Paginate(page.items, { total: page.total, next: page.next, top: page.top });
+                    }
                 });
             }
             else {
-                this.page = this.options.getPage(0, this.optionsFilter);
+                this.page = this.getFirstPage();
             }
         };
         /**
@@ -454,8 +456,9 @@ const MgInputCombobox = class {
          * @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) {
@@ -463,10 +466,13 @@ const MgInputCombobox = class {
                     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)) {
@@ -487,11 +493,11 @@ const MgInputCombobox = class {
         this.valueChange.emit(newValue);
     }
     watchItems(newValue) {
-        if (Boolean(this.fetchurl) && !Boolean(newValue)) {
+        if (this.fetchurl !== undefined && newValue === undefined) {
             // skip newValue check
             return;
         }
-        else if (Boolean(this.fetchurl) && Boolean(newValue)) {
+        else if (this.fetchurl !== undefined && newValue !== undefined) {
             throw new Error(`<mg-input-combobox> prop "items" values cannot be use with "fetchurl" prop defined. Passed value: ${toString(newValue)}.`);
         }
         // Empty options
@@ -511,7 +517,7 @@ const MgInputCombobox = class {
         }
     }
     watchIdentifier(newValue) {
-        if (Boolean(newValue)) {
+        if (isValidString(newValue)) {
             this.popoverId = `${newValue}-popover`;
             this.element.dataset.mgPopoverGuard = this.popoverId;
         }
@@ -551,7 +557,7 @@ const MgInputCombobox = class {
         this.classCollection = new ClassList(this.classCollection.classes);
     }
     watchFetchUrl(newValue) {
-        if (Boolean(newValue)) {
+        if (newValue !== undefined) {
             this.loadingWrapper({ name: 'load-data' });
         }
     }
@@ -559,20 +565,17 @@ const MgInputCombobox = class {
         if (this.fetchurl && newValue && !isObject(newValue)) {
             throw new Error(`<mg-input-combobox> prop "fetchoptions" value must be a valid RequestInit. Passed value: ${toString(newValue)}.`);
         }
-        else {
-            new Request(this.fetchurl, newValue);
-        }
     }
     watchFetchMappings(newValue) {
-        if (Boolean(this.fetchurl) && !Boolean(newValue)) {
+        if (this.fetchurl !== undefined && !isObject(newValue)) {
             throw new Error(`<mg-input-combobox> prop "fetchmappings" is required with "fetchurl" prop.`);
         }
-        else if (Boolean(newValue) && !isFetchmappings(newValue)) {
+        else if (newValue !== undefined && !isFetchmappings(newValue)) {
             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, Boolean(this.filter) ? this.optionsFilter : undefined);
+    watchOptions() {
+        this.page = this.getFirstPage();
     }
     watchFilter(newValue) {
         this.loadingWrapper({ name: 'load-data' });
@@ -580,7 +583,6 @@ const MgInputCombobox = class {
     }
     watchPopoverDisplay(newValue) {
         if (newValue) {
-            this.classCollection.add(this.classFocus);
             this.input.focus();
         }
         else {
@@ -588,7 +590,6 @@ const MgInputCombobox = class {
             this.option = null;
             // reset filter with value
             this.filter = this.getValueTitle();
-            this.classCollection.delete(this.classFocus);
             this.handlerInProgress = 'blur';
             this.displayError().finally(() => {
                 // reset guard
@@ -629,17 +630,22 @@ const MgInputCombobox = class {
      * 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) {
+    async setError(valid, errorMessage, errorMessageLock = false) {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-combobox> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!isValidString(errorMessage)) {
+        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
             throw new Error('<mg-input-combobox> method "setError()" param "errorMessage" must be a string.');
         }
         else {
+            this.customErrorMessage = {
+                lock: valid ? false : errorMessageLock,
+                message: valid ? undefined : errorMessage,
+            };
             this.setValidity(valid);
-            this.setErrorMessage(valid ? undefined : errorMessage);
+            this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
         }
     }
@@ -659,6 +665,8 @@ const MgInputCombobox = class {
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
+                    // unlock validity check by reseting customErrorMessage
+                    this.customErrorMessage = { lock: false };
                     this.checkValidity();
                     this.errorMessage = undefined;
                     this.hasDisplayedError = false;
@@ -687,11 +695,13 @@ const MgInputCombobox = class {
      * @param newValue - valid new value
      */
     setValidity(newValue) {
-        const oldValidValue = this.valid;
-        this.valid = 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 !== oldValidValue))
+        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue))
             this.inputValid.emit(this.valid);
     }
     /*************
@@ -707,13 +717,13 @@ const MgInputCombobox = class {
         // Validate
         this.watchIdentifier(this.identifier);
         this.watchItems(this.items);
-        if (Boolean(this.fetchurl)) {
+        if (this.fetchurl !== undefined) {
             this.watchFetchOptions(this.fetchoptions);
             this.watchFetchMappings(this.fetchmappings);
             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);
@@ -734,14 +744,17 @@ const MgInputCombobox = class {
         const readonlyValue = this.getValueTitle();
         const withResetButton = this.value && !this.disabled;
         let popoverContent;
-        if (((_a = this.page) === null || _a === void 0 ? void 0 : _a.items.length) > 0)
+        if (((_a = this.page) === null || _a === void 0 ? void 0 : _a.items.length) > 0) {
             popoverContent = 'list';
-        else if (((_b = this.page) === null || _b === void 0 ? void 0 : _b.items.length) === 0 && Boolean(this.filter))
+        }
+        else if (((_b = this.page) === null || _b === void 0 ? void 0 : _b.items.length) === 0 && this.filter.length > 0) {
             popoverContent = 'notfound';
-        else if (((_c = this.page) === null || _c === void 0 ? void 0 : _c.items.length) === 0)
+        }
+        else if (((_c = this.page) === null || _c === void 0 ? void 0 : _c.items.length) === 0) {
             popoverContent = 'notavailable';
+        }
         let activeDescendant;
-        if (Boolean((_d = this.option) === null || _d === void 0 ? void 0 : _d.value)) {
+        if (((_d = this.option) === null || _d === void 0 ? void 0 : _d.value) !== undefined) {
             activeDescendant = this.option.value;
         }
         else if (typeof this.value === 'string') {
@@ -750,8 +763,8 @@ const MgInputCombobox = class {
         else {
             activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
         }
-        return (h("mg-input", { key: '79e5263cd3b1c0fa0b3f386a547f2bdd48a33b28', 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': Boolean((_f = this.input) === null || _f === void 0 ? void 0 : _f.offsetWidth) ? `${this.input.offsetWidth}px` : undefined,
+        return (h("mg-input", { key: 'fd5a59f1e0bf31342a3bf935a60a2877e5df1772', 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)
                     this.input = el;
@@ -765,7 +778,7 @@ const MgInputCombobox = class {
                         '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/esm/mg-input-rich-text-editor.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-T6kOJXP1.js';
-import { c as isValidString, C as ClassList, t as toString } from './index-WtiuOkLj.js';
-import { c as classReadonly, a as classDisabled } from './mg-input.conf-CNgv8hc5.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BluNKQ3L.js';
+import { i as isValidString, C as ClassList, t as toString } from './index-C7xjtdiw.js';
+import { c as classReadonly, a as classDisabled } from './mg-input.conf-DDnrE1hD.js';
 import { i as initLocales } from './index-CNX6lq0x.js';
 
 /** Detect free variable `global` from Node.js. */
@@ -16387,8 +16387,7 @@ const MgInputRichTextEditor = class {
         this.valueChange = createEvent(this, "value-change", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
-        // Classes
-        this.classFocus = 'mg-u-is-focused';
+        this.customErrorMessage = { lock: false };
         /**
          * Define the value of the editor
          * Can be either HTML string or plain text
@@ -16452,27 +16451,29 @@ const MgInputRichTextEditor = class {
         };
         /**
          * Set input error message
-         * @param errorMessage - errorMessage override
+         * @param fromSetErrorContext - context come from `setError` method
          */
-        this.setErrorMessage = (errorMessage) => {
+        this.setErrorMessage = (fromSetErrorContext = false) => {
+            // Set error message
             this.errorMessage = undefined;
-            if (this.valid)
-                return;
-            else if (isValidString(errorMessage)) {
-                this.errorMessage = errorMessage;
-            }
-            else if (this.required && this.isEmpty()) {
-                this.errorMessage = this.messages.errors.required;
-            }
-            else if (!this.getPatternValidity()) {
-                this.errorMessage = this.patternErrorMessage;
+            // Does have a new custom error message
+            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;
+                }
+                else if (this.required && this.isEmpty()) {
+                    this.errorMessage = this.messages.errors.required;
+                }
+                else if (!this.getPatternValidity()) {
+                    this.errorMessage = this.patternErrorMessage;
+                }
             }
         };
         /**
          * Handle focus event
          */
         this.handleFocus = () => {
-            this.classCollection.add(this.classFocus);
             this.classCollection = new ClassList(this.classCollection.classes);
         };
         /**
@@ -16481,7 +16482,6 @@ const MgInputRichTextEditor = class {
          */
         this.handleBlur = () => {
             // Manage focus
-            this.classCollection.delete(this.classFocus);
             this.classCollection = new ClassList(this.classCollection.classes);
             if (!this.readonly) {
                 this.checkValidity();
@@ -16549,7 +16549,7 @@ const MgInputRichTextEditor = class {
      * Get editor content as HTML
      * @returns HTML content of the editor
      */
-    async getHTML() {
+    getHTML() {
         return new Promise(resolve => {
             requestAnimationFrame(() => {
                 resolve(this.editor.getSemanticHTML());
@@ -16593,17 +16593,22 @@ const MgInputRichTextEditor = class {
      * 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) {
+    async setError(valid, errorMessage, errorMessageLock = false) {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-rich-text-editor> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!isValidString(errorMessage)) {
+        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
             throw new Error('<mg-input-rich-text-editor> method "setError()" param "errorMessage" must be a string.');
         }
         else {
+            this.customErrorMessage = {
+                lock: valid ? false : errorMessageLock,
+                message: valid ? undefined : errorMessage,
+            };
             this.setValidity(valid);
-            this.setErrorMessage(valid ? undefined : errorMessage);
+            this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
         }
     }
@@ -16622,6 +16627,8 @@ const MgInputRichTextEditor = class {
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
+                    // unlock validity check by reseting customErrorMessage
+                    this.customErrorMessage = { lock: false };
                     this.checkValidity();
                     this.errorMessage = undefined;
                     this.hasDisplayedError = false;
@@ -16635,10 +16642,12 @@ const MgInputRichTextEditor = class {
      * @param newValue - valid new value
      */
     setValidity(newValue) {
-        const oldValidValue = this.valid;
-        this.valid = newValue;
+        const oldValue = this.valid;
+        if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
+            this.valid = newValue;
+        }
         this.invalid = !this.valid;
-        if (this.valid !== oldValidValue) {
+        if (this.valid !== oldValue) {
             this.inputValid.emit(this.valid);
         }
     }
@@ -16687,7 +16696,7 @@ const MgInputRichTextEditor = class {
      * @returns HTML mg-input Element
      */
     render() {
-        return (h("mg-input", { key: 'b7f7fe282aa00b695418fe7f055955045bbd932d', 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/esm/{mg-input.conf-CNgv8hc5.js → mg-input.conf-DDnrE1hD.js}

@@ -6,9 +6,14 @@ const widths = [2, 4, 16, 'full'];
  * Possible tootltip postions
  */
 const tooltipPositions = ['input', 'label'];
+/**
+ * Possible label headings
+ */
+const labelHeadings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 const classFieldset = 'mg-c-input--fieldset';
 const classDisabled = 'mg-c-input--disabled';
 const classReadonly = 'mg-c-input--readonly';
 const classVerticalList = 'mg-c-input--vertical-list';
+const classDisplayCharacterLeft = 'mg-c-input--display-character-left';
 
-export { classDisabled as a, classFieldset as b, classReadonly as c, classVerticalList as d, tooltipPositions as t, widths as w };
+export { classDisabled as a, classFieldset as b, classReadonly as c, classVerticalList as d, classDisplayCharacterLeft as e, labelHeadings as l, tooltipPositions as t, widths as w };