@mgdis/mg-components 6.10.1 → 6.11.0

package/dist/cjs/mg-alert.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var index = require('./index-CATFkm3O.js');
-var index_es = require('./index.es-DaPqByCe.js');
-var index$1 = require('./index-CL_COdxv.js');
+var index_es = require('./index.es-C-3Gv8Eu.js');
+var index$1 = require('./index-B_WwxtkQ.js');
 
 /**
  * List available variants
@@ -42,7 +42,7 @@ const MgAlert = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-alert']);
+        this.classCollection = new index_es.qt(['mg-c-alert']);
         /**
          * Define if component is using actions slot
          */
@@ -86,17 +86,17 @@ const MgAlert = class {
     }
     watchDelay(newValue) {
         if (newValue !== undefined && newValue < 2) {
-            throw new Error(`<mg-alert> prop "delay" must be greater than 2 seconds. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-alert> prop "delay" must be greater than 2 seconds. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     watchVariant(newValue) {
         if (newValue && !variants.includes(newValue)) {
-            throw new Error(`<mg-alert> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-alert> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     watchVariantStyle(newValue) {
         if (newValue && !variantStyles.includes(newValue)) {
-            throw new Error(`<mg-alert> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-alert> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     /**

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

@@ -1,12 +1,12 @@
 'use strict';
 
 var index = require('./index-CATFkm3O.js');
-var index_es = require('./index.es-DaPqByCe.js');
+var index_es = require('./index.es-C-3Gv8Eu.js');
 var mgInput_conf = require('./mg-input.conf-WTsvDfpC.js');
-var index$1 = require('./index-CL_COdxv.js');
+var index$1 = require('./index-B_WwxtkQ.js');
 var events_utils = require('./events.utils-D5SAtkpQ.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__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);word-break:break-word}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input.mg-c-input--combobox mg-popover{--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__popover-info{padding:var(--mg-b-size-8);margin:0;text-align:center}.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__reset{padding-right:var(--mg-b-size-min-height)}.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)*2 + 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)*2 + 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)*2 + 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-c-input-append-x) + 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__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__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);word-break:break-word}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input.mg-c-input--combobox mg-popover{--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__popover-info{padding:var(--mg-b-size-8);margin:0;text-align:center}.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
@@ -26,10 +26,10 @@ const isItems = (items) => Array.isArray(items) && items.every(isItem);
  * @returns truthy if mapping is valid
  */
 const isFetchmappings = (value) => {
-    const isValidRoot = index_es.ne(value) && Object.hasOwn(value, 'request') && Object.hasOwn(value, 'response');
+    const isValidRoot = index_es.K(value) && Object.hasOwn(value, 'request') && Object.hasOwn(value, 'response');
     if (isValidRoot) {
         const { request, response } = value;
-        if ([request, response].some(property => !index_es.ne(property)))
+        if ([request, response].some(property => !index_es.K(property)))
             return false;
         const isValidRequest = typeof request.filter === 'string';
         const isValidResponse = typeof response === 'object' &&
@@ -37,35 +37,13 @@ const isFetchmappings = (value) => {
             typeof response.items === 'string' &&
             typeof response.next === 'string' &&
             typeof response.itemTitle === 'string' &&
-            typeof response.itemValue === 'string';
+            (typeof response.itemValue === 'string' || response.itemValue === undefined);
         return isValidRequest && isValidResponse;
     }
     else {
         return isValidRoot;
     }
 };
-/**
- * Map new URL from old url
- * @param newValue - new URL value
- * @param oldValue - previous URL value
- * @returns updated url
- */
-const mapUrl = (newValue, oldValue) => {
-    if (!Boolean(newValue))
-        return;
-    else if (URL.canParse(newValue)) {
-        return newValue;
-    }
-    // build new URL
-    const params = newValue.includes('?') && newValue.split('?').pop();
-    if (Boolean(params)) {
-        const { origin, pathname } = new URL(oldValue);
-        return `${origin}${pathname}?${params}`;
-    }
-    else {
-        return newValue;
-    }
-};
 const MgInputCombobox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -73,6 +51,7 @@ const MgInputCombobox = class {
         this.filterChange = index.createEvent(this, "filter-change");
         this.loadMore = index.createEvent(this, "load-more");
         this.inputValid = index.createEvent(this, "input-valid");
+        this.fetchError = index.createEvent(this, "fetch-error");
         /************
          * Internal *
          ************/
@@ -116,7 +95,7 @@ const MgInputCombobox = class {
         /**
          * Formated items for display
          */
-        this.options = new index_es.er([]);
+        this.options = new index_es.rr([]);
         /**
          * Option filter
          */
@@ -124,7 +103,7 @@ const MgInputCombobox = class {
         /**
          * Component classes
          */
-        this.classCollection = new index_es.Ht(['mg-c-input--combobox', 'mg-c-input--has-icon', 'mg-c-input--input-append']);
+        this.classCollection = new index_es.qt(['mg-c-input--combobox', 'mg-c-input--has-icon', 'mg-c-input--input-append']);
         /**
          * Popover display state
          */
@@ -134,7 +113,7 @@ const MgInputCombobox = class {
          * @param event - option element click event
          */
         this.handleOptionClick = (event) => {
-            this.setValue(this.options.items.find(option => option.value === event.target.id));
+            this.setValue(this.options.items.find(option => index_es.Ht(option.value) === event.target.id));
             this.popoverDisplay = false;
         };
         /**
@@ -162,7 +141,14 @@ const MgInputCombobox = class {
                 this.setErrorMessage();
             if (!this.popoverDisplay)
                 this.popoverDisplay = true;
-            this.filter = this.input.value;
+            // update filter with debounce to prevent filter update overload
+            if (!this.debounce) {
+                this.debounce = true;
+                setTimeout(() => {
+                    this.filter = this.input.value;
+                    this.debounce = false;
+                }, 250);
+            }
         };
         /**
          * Handle `blur` event
@@ -191,7 +177,7 @@ const MgInputCombobox = class {
          * Handle load-more <mg-button> `click`
          */
         this.handleLoadMoreButton = () => {
-            this.loadingWrapper({ name: 'load-more', cursor: index_es.Vt.NEXT }).then(() => {
+            this.loadingWrapper({ name: 'load-more', cursor: index_es.tr.NEXT }).then(() => {
                 this.input.focus();
             });
         };
@@ -237,14 +223,14 @@ const MgInputCombobox = class {
                         // If the filter is empty and the popover is not displayed, opens the popover and moves visual focus to the first option.
                         // Moves visual focus to the next option.
                         // If visual focus is on the last option, moves visual focus to the first option.
-                        cursor = isNavigationStart ? index_es.Vt.NEXT : index_es.Vt.FIRST;
+                        cursor = isNavigationStart ? index_es.tr.NEXT : index_es.tr.FIRST;
                     }
                     else if ([events_utils.Keys.UP, events_utils.Keys.ARROWUP].includes(event.key)) {
                         // If the filter is not empty and the popover is displayed, moves visual focus to the last suggested value.
                         // If the filter is empty, first opens the popover if it is not already displayed and then moves visual focus to the last option.
                         // Moves visual focus to the previous option.
                         // If visual focus is on the first option, moves visual focus to the last option.
-                        cursor = isNavigationStart ? index_es.Vt.PREVIOUS : index_es.Vt.LAST;
+                        cursor = isNavigationStart ? index_es.tr.PREVIOUS : index_es.tr.LAST;
                     }
                     // update scroll and visual focused option in wrapper
                     this.loadingWrapper({ name: 'scroll', cursor });
@@ -381,7 +367,7 @@ const MgInputCombobox = class {
                 this.isLoading = true;
                 promise = this.goToNextPage;
             }
-            else if (action.cursor === index_es.Vt.NEXT &&
+            else if (action.cursor === index_es.tr.NEXT &&
                 this.page.items.length <= this.page.total &&
                 index + this.page.baseIndex === this.page.items.length &&
                 index + this.page.baseIndex < this.page.total) {
@@ -390,7 +376,7 @@ const MgInputCombobox = class {
                 return;
             }
             else if (action.name === 'scroll') {
-                promise = index_es.Qt;
+                promise = index_es.er;
             }
             else {
                 promise = this.updatePage;
@@ -428,14 +414,14 @@ const MgInputCombobox = class {
                     // 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 index_es.er(items, { total: nextPage.total, next: nextPage.next, top: items.length });
+                    this.options = new index_es.rr(items, { total: nextPage.total, next: nextPage.next, top: items.length });
                 });
             }
             else {
-                return index_es.Qt(() => {
+                return index_es.er(() => {
                     if (typeof this.page.next === 'function') {
                         const nextPage = this.page.next();
-                        this.page = new index_es.Ge(Object.assign(Object.assign({}, nextPage), { items: [...this.page.items, ...nextPage.items] }));
+                        this.page = new index_es.Je(Object.assign(Object.assign({}, nextPage), { items: [...this.page.items, ...nextPage.items] }));
                     }
                 });
             }
@@ -450,7 +436,7 @@ const MgInputCombobox = class {
                     if (!Boolean(page))
                         return;
                     // reset current options pagination from API response
-                    this.options = new index_es.er(page.items, { total: page.total, next: page.next, top: page.top });
+                    this.options = new index_es.rr(page.items, { total: page.total, next: page.next, top: page.top });
                 });
             }
             else {
@@ -466,18 +452,23 @@ const MgInputCombobox = class {
             // add text filter
             const updateUrl = (typeof url === 'string' ? url : url.toString()).replaceAll(this.fetchmappings.request.filter, encodeURIComponent(this.filter));
             try {
-                const response = await fetch(updateUrl, this.fetchoptions).then(response => response.json());
-                if (!response)
-                    return null;
-                const items = index_es.Be(response, this.fetchmappings.response.items).map((item) => ({
-                    title: index_es.Be(item, this.fetchmappings.response.itemTitle),
-                    value: index_es.Be(item, this.fetchmappings.response.itemValue),
+                const response = await fetch(updateUrl, this.fetchoptions);
+                if (!response.ok) {
+                    this.fetchError.emit(new Error(`${response.status} - ${response.statusText}`));
+                    return;
+                }
+                const json = await response.json();
+                const items = index_es.Ge(json, this.fetchmappings.response.items).map((item) => ({
+                    title: index_es.Ge(item, this.fetchmappings.response.itemTitle),
+                    value: this.fetchmappings.response.itemValue ? index_es.Ge(item, this.fetchmappings.response.itemValue) : item,
                 }));
-                const total = Number(index_es.Be(response, this.fetchmappings.response.total, 0));
-                const next = mapUrl(index_es.Be(response, this.fetchmappings.response.next), this.fetchurl.toString());
+                const total = Number(index_es.Ge(json, this.fetchmappings.response.total, 0));
+                const next = index_es.Ge(json, this.fetchmappings.response.next);
                 return { items, total, next, top: items.length };
             }
-            catch (_a) { }
+            catch (error) {
+                this.fetchError.emit(error);
+            }
         };
     }
     watchValue(newValue) {
@@ -490,22 +481,22 @@ const MgInputCombobox = class {
             return;
         }
         else if (Boolean(this.fetchurl) && Boolean(newValue)) {
-            throw new Error(`<mg-input-combobox> prop "items" values cannot be use with "fetchurl" prop defined. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-input-combobox> prop "items" values cannot be use with "fetchurl" prop defined. Passed value: ${index_es.Yt(newValue)}.`);
         }
         // Empty options
         else if (Array.isArray(newValue) && newValue.length === 0) {
-            this.options = new index_es.er([]);
+            this.options = new index_es.rr([]);
         }
         // String array
-        else if (index_es.qt(newValue)) {
-            this.options = new index_es.er(newValue.map(item => ({ title: item, value: item })), { total: newValue.length });
+        else if (index_es.Gt(newValue)) {
+            this.options = new index_es.rr(newValue.map(item => ({ title: item, value: item })), { total: newValue.length });
         }
         // Object array
         else if (isItems(newValue)) {
-            this.options = new index_es.er(newValue, { total: newValue.length });
+            this.options = new index_es.rr(newValue, { total: newValue.length });
         }
         else {
-            throw new Error(`<mg-input-combobox> prop "items" values must be the same type, string or Option. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-input-combobox> prop "items" values must be the same type, string or Option. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     watchIdentifier(newValue) {
@@ -546,16 +537,16 @@ const MgInputCombobox = class {
         // apply new width
         if (newValue !== undefined)
             this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
-        this.classCollection = new index_es.Ht(this.classCollection.classes);
+        this.classCollection = new index_es.qt(this.classCollection.classes);
     }
     watchFetchUrl(newValue) {
-        if (newValue && !URL.canParse(newValue)) {
-            throw new Error(`<mg-input-combobox> prop "fetchurl" value must be URL or string. Passed value: ${index_es.Xt(newValue)}.`);
+        if (Boolean(newValue)) {
+            this.loadingWrapper({ name: 'load-data' });
         }
     }
     watchFetchOptions(newValue) {
-        if (this.fetchurl && newValue && !index_es.ne(newValue)) {
-            throw new Error(`<mg-input-combobox> prop "fetchoptions" value must be a valid RequestInit. Passed value: ${index_es.Xt(newValue)}.`);
+        if (this.fetchurl && newValue && !index_es.K(newValue)) {
+            throw new Error(`<mg-input-combobox> prop "fetchoptions" value must be a valid RequestInit. Passed value: ${index_es.Yt(newValue)}.`);
         }
         else {
             new Request(this.fetchurl, newValue);
@@ -566,7 +557,7 @@ const MgInputCombobox = class {
             throw new Error(`<mg-input-combobox> prop "fetchmappings" is required with "fetchurl" prop.`);
         }
         else if (Boolean(newValue) && !isFetchmappings(newValue)) {
-            throw new Error(`<mg-input-combobox> prop "fetchmappings" value must be { request: RequestMappingType, response: ResponseMappingType }. Passed value: ${index_es.Xt(newValue)}.`);
+            throw new Error(`<mg-input-combobox> prop "fetchmappings" value must be { request: RequestMappingType, response: ResponseMappingType }. Passed value: ${index_es.Yt(newValue)}.`);
         }
     }
     watchOptions(newValue) {
@@ -662,8 +653,11 @@ const MgInputCombobox = class {
         if (!isItem(newValue)) {
             this.value = '';
         }
+        else if (index_es.Gt(this.items || this.options.items)) {
+            this.value = newValue.title;
+        }
         else {
-            this.value = index_es.qt(this.items || this.options.items) ? newValue.title : Object.assign({}, newValue);
+            this.value = Object.assign({}, newValue);
         }
     }
     /**
@@ -692,7 +686,6 @@ const MgInputCombobox = class {
         this.watchIdentifier(this.identifier);
         this.watchItems(this.items);
         if (Boolean(this.fetchurl)) {
-            this.watchFetchUrl(this.fetchurl);
             this.watchFetchOptions(this.fetchoptions);
             this.watchFetchMappings(this.fetchmappings);
             this.loadingWrapper({ name: 'load-data' });
@@ -725,22 +718,32 @@ const MgInputCombobox = class {
             popoverContent = 'notfound';
         else if (((_c = this.page) === null || _c === void 0 ? void 0 : _c.items.length) === 0)
             popoverContent = 'notavailable';
-        return (index.h("mg-input", { key: 'b8c4c6d18bb1d16ff0a8494ddb698cb4e0198e43', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? [popoverContent] : [], 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 && index.h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (index.h("mg-popover", { identifier: this.popoverId, placement: "bottom-start", display: this.popoverDisplay, "arrow-hide": true, style: {
-                '--mg-c-input-list-width': Boolean((_d = this.input) === null || _d === void 0 ? void 0 : _d.offsetWidth) ? `${this.input.offsetWidth}px` : undefined,
-                '--mg-c-input-append-x': withResetButton ? '2' : '1',
-            }, "data-fallback-placement": "bottom-end", "onDisplay-change": this.handlePopoverDisplay }, index.h("div", { class: "mg-c-input__input-group-container" }, index.h("mg-icon", { icon: "magnifying-glass" }), index.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": Boolean((_e = this.option) === null || _e === void 0 ? void 0 : _e.value) ? this.option.value : typeof this.value === 'string' ? this.value : (_f = this.value) === null || _f === void 0 ? void 0 : _f.value, onInput: this.handleFilterInput, onBlur: this.handleFilterBlur, onFocus: this.handleFilterFocus, onKeyDown: this.handleFilterKeydown, ref: (el) => {
+        let activeDescendant;
+        if (Boolean((_d = this.option) === null || _d === void 0 ? void 0 : _d.value)) {
+            activeDescendant = this.option.value;
+        }
+        else if (typeof this.value === 'string') {
+            activeDescendant = this.value;
+        }
+        else {
+            activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
+        }
+        return (index.h("mg-input", { key: '9247630e9b86d6ca8e9e57089454551cf31f5531', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? [popoverContent] : [], 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 && index.h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (index.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,
+            }, "data-fallback-placement": "bottom-end", "onDisplay-change": this.handlePopoverDisplay }, index.h("div", { class: "mg-c-input__input-group-container" }, index.h("mg-icon", { icon: "magnifying-glass" }), index.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": index_es.Ht(activeDescendant), onInput: this.handleFilterInput, onBlur: this.handleFilterBlur, onFocus: this.handleFilterFocus, onKeyDown: this.handleFilterKeydown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
-            } }), withResetButton && (index.h("mg-button", { class: "mg-c-input__box-append mg-c-input__reset", variant: "flat", "is-icon": true, label: this.messages.general.reset, "aria-controls": this.identifier, tabindex: "-1", onClick: this.handleResetButton }, index.h("mg-icon", { icon: "cross" }))), index.h("mg-button", { class: "mg-c-input__box-append", variant: "flat", "is-icon": true, label: this.itemsLabel, tabindex: "-1", disabled: this.disabled }, index.h("mg-icon", { icon: `chevron-${this.popoverDisplay ? 'up' : 'down'}` }))), index.h("div", { slot: "content", class: "mg-c-input__popover-container" }, popoverContent === 'list' && [
+            } }), withResetButton ? (index.h("mg-button", { class: "mg-c-input__box-append mg-c-input__reset", variant: "flat", "is-icon": true, label: this.messages.general.reset, "aria-controls": this.identifier, tabindex: "-1", onClick: this.handleResetButton }, index.h("mg-icon", { icon: "cross" }))) : (index.h("mg-button", { class: "mg-c-input__box-append", variant: "flat", "is-icon": true, label: this.itemsLabel, tabindex: "-1", disabled: this.disabled }, index.h("mg-icon", { icon: `chevron-${this.popoverDisplay ? 'up' : 'down'}` })))), index.h("div", { slot: "content", class: "mg-c-input__popover-container" }, popoverContent === 'list' && [
             // eslint-disable-next-line jsx-a11y/role-supports-aria-props
             index.h("ul", { key: "list", class: "mg-c-input__input-list", role: "listbox", id: listId, "aria-label": this.itemsLabel, "aria-setsize": this.page.total }, this.page.items.map(option => {
+                var _a;
                 return (
                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events
                 index.h("li", { role: "option", class: {
                         'mg-c-input__input-list-item': true,
-                        'mg-c-input__input-list-item--focus-visible': this.option === option,
+                        '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: option.value.toString(), "aria-selected": this.isCurrentOption(option).toString(), onClick: this.handleOptionClick }, option.title, this.isCurrentOption(option) && index.h("mg-icon", { icon: "check" })));
+                    }, key: option.title, id: index_es.Ht(option.value), "aria-selected": this.isCurrentOption(option).toString(), onClick: this.handleOptionClick }, option.title, this.isCurrentOption(option) && index.h("mg-icon", { icon: "check" })));
             })),
             this.isLoading && index.h("mg-loader", { key: "loader", message: this.messages.input.combobox.search, class: { 'mg-u-visually-hidden': Boolean(this.page.next) } }),
             this.page.next && (index.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) => {