@mgdis/mg-components 6.15.0 → 6.17.0

package/dist/components/mg-input-combobox.js

@@ -1,12 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { P as Paginate, C as ClassList, f as formatID, e as Cursor, h as isObject, n as nextTick, j as Page, k as getObjectValueFromKey, t as toString, d as allItemsAreString, i as isValidString } from './index2.js';
-import { d as defineCustomElement$8, C as CustomError, c as classReadonly, a as classDisabled, w as widths } from './mg-input2.js';
+import { P as Paginate, C as ClassList, f as formatID, e as Cursor, n as nextTick, h as Page, j as getObjectValueFromKey, t as toString, d as allItemsAreString, k as isObject, i as isValidString } from './index2.js';
+import { d as defineCustomElement$8, c as classReadonly, a as classDisabled, w as widths } from './mg-input2.js';
 import { i as initLocales } from './index3.js';
 import { K as Keys } from './events.utils.js';
-import { d as defineErrorMessage } from './mg-input.utils.js';
-import { d as defineCustomElement$c } from './mg-button2.js';
-import { d as defineCustomElement$b } from './mg-card2.js';
-import { d as defineCustomElement$a } from './mg-details2.js';
+import { d as defineCustomElement$b } from './mg-button2.js';
+import { d as defineCustomElement$a } from './mg-card2.js';
 import { d as defineCustomElement$9 } from './mg-icon2.js';
 import { d as defineCustomElement$7 } from './mg-input-title2.js';
 import { d as defineCustomElement$6 } from './mg-loader2.js';
@@ -15,7 +13,7 @@ import { d as defineCustomElement$4 } from './mg-popover-content2.js';
 import { d as defineCustomElement$3 } from './mg-tooltip2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
 
-const mgInputComboboxCss = ".mg-c-input__error-details{margin:0}.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:not(:disabled){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__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}";
 
 /**
  * Check if object is an item
@@ -54,9 +52,11 @@ const isFetchmappings = (value) => {
     }
 };
 const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.valueChange = createEvent(this, "value-change", 7);
         this.filterChange = createEvent(this, "filter-change", 7);
@@ -148,12 +148,10 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
          */
         this.handleFilterInput = () => {
             this.checkValidity();
-            if (this.hasDisplayedError) {
+            if (this.hasDisplayedError)
                 this.setErrorMessage();
-            }
-            if (!this.popoverDisplay) {
+            if (!this.popoverDisplay)
                 this.popoverDisplay = true;
-            }
             // update filter with debounce to prevent filter update overload
             if (!this.debounce) {
                 this.debounce = true;
@@ -199,6 +197,7 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
          * @param event - keyboard event
          */
         this.handleFilterKeydown = (event) => {
+            var _a;
             if (this.disabled || event.ctrlKey || event.shiftKey)
                 return;
             let guard = false;
@@ -207,10 +206,11 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
                 case Keys.TAB:
                 case Keys.ENTER:
                     guard = event.key === Keys.ENTER;
-                    const option = this.option || this.options.items.find(this.isCurrentOption);
+                    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.
-                    if (this.popoverDisplay)
+                    if (this.popoverDisplay) {
                         this.setValue(option);
+                    }
                     // Closes the popover.
                     this.popoverDisplay = false;
                     break;
@@ -331,46 +331,27 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
             else
                 return '';
         };
-        /**
-         * Test if component has no value error message displayed
-         * @returns truthy if compent display no value error message
-         */
-        this.hasNoValueError = () => this.customError === CustomError.NoValue;
         /**
          * Check if input is valid
          */
         this.checkValidity = () => {
-            // force validity with readonly|disabled states
-            this.setValidity(this.readonly || this.disabled);
+            this.setValidity(this.readonly || this.disabled || this.input.checkValidity());
         };
         /**
          * Set input error message
+         * @param errorMessage - errorMessage override
          */
-        this.setErrorMessage = () => {
+        this.setErrorMessage = (errorMessage) => {
             // Set error message
             this.errorMessage = undefined;
-            if (!this.valid) {
-                // Does have a custom error message
-                if (this.customError !== undefined && !Object.values(CustomError).includes(this.customError)) {
-                    this.errorMessage = this.customError;
-                }
-                // no items
-                else if (this.hasNoValueError()) {
-                    this.errorMessage = this.messages.errors.noValue;
-                }
-                // required
-                else if (this.input.validity.valueMissing) {
-                    this.errorMessage = this.messages.errors.required;
-                }
+            // 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;
             }
-        };
-        /**
-         * Reset error message
-         */
-        this.resetErrorMessage = () => {
-            this.checkValidity();
-            this.errorMessage = undefined;
-            this.hasDisplayedError = false;
         };
         /**
          * Get filtered options from `filter` input value
@@ -444,14 +425,14 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
          */
         this.goToNextPage = () => {
             this.showMore.emit();
-            if (this.fetchurl !== undefined) {
+            if (Boolean(this.fetchurl)) {
                 return this.getOptions(typeof this.page.next === 'string' ? this.page.next : undefined).then(nextPage => {
-                    if (isObject(nextPage)) {
-                        // 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 (!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 });
                 });
             }
             else {
@@ -468,20 +449,12 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
          * @returns promise
          */
         this.updatePage = async () => {
-            if (this.fetchurl !== undefined) {
+            if (Boolean(this.fetchurl)) {
                 return this.getOptions().then(page => {
-                    if (isObject(page)) {
-                        // reset current options pagination from API response
-                        this.options = new Paginate(page.items, { total: page.total, next: page.next, top: page.top });
-                        // has items aren't updated with fetch mode we run the noValueError control here
-                        if (this.filter.length === 0 && page.total === 0) {
-                            this.displayError();
-                        }
-                        // force to reset error when noValueError is displaied
-                        else if (this.invalid && this.hasNoValueError()) {
-                            this.resetErrorMessage();
-                        }
-                    }
+                    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 });
                 });
             }
             else {
@@ -500,16 +473,14 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
                 const response = await fetch(updateUrl, this.fetchoptions);
                 if (!response.ok) {
                     this.fetchError.emit(new Error(`${response.status} - ${response.statusText}`));
-                    this.displayError();
                     return;
                 }
                 const json = await response.json();
-                const defaultItems = [];
-                const items = getObjectValueFromKey(json, this.fetchmappings.response.items, defaultItems).map((item) => ({
-                    title: getObjectValueFromKey(item, this.fetchmappings.response.itemTitle, typeof item === 'string' ? item : JSON.stringify(item)),
-                    value: getObjectValueFromKey(item, this.fetchmappings.response.itemValue, item),
+                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 total = Number(getObjectValueFromKey(json, this.fetchmappings.response.total, defaultItems.length));
+                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)) {
                     const previousUrl = new URL(updateUrl);
@@ -521,7 +492,6 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
             }
             catch (error) {
                 this.fetchError.emit(error);
-                this.displayError();
             }
         };
     }
@@ -530,35 +500,24 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
         this.valueChange.emit(newValue);
     }
     watchItems(newValue) {
-        // fetch items
-        if (![undefined, null].includes(this.fetchurl) && [undefined, null].includes(newValue)) {
+        if (Boolean(this.fetchurl) && !Boolean(newValue)) {
             // skip newValue check
             return;
         }
-        // invalid items
-        else if (![undefined, null].includes(this.fetchurl) && Array.isArray(newValue)) {
+        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: ${toString(newValue)}.`);
         }
-        // Empty items
-        else if ([undefined, null].includes(newValue) || (Array.isArray(newValue) && newValue.length === 0)) {
+        // Empty options
+        else if (Array.isArray(newValue) && newValue.length === 0) {
             this.options = new Paginate([]);
-            this.displayError();
         }
         // String array
         else if (allItemsAreString(newValue)) {
             this.options = new Paginate(newValue.map(item => ({ title: item, value: item })), { total: newValue.length });
-            // force to reset error when noValueError is displayed
-            if (this.invalid && this.hasNoValueError()) {
-                this.resetErrorMessage();
-            }
         }
         // Object array
         else if (isItems(newValue)) {
             this.options = new Paginate(newValue, { total: newValue.length });
-            // force to reset error when noValueError is displayed
-            if (this.invalid && this.hasNoValueError()) {
-                this.resetErrorMessage();
-            }
         }
         else {
             throw new Error(`<mg-input-combobox> prop "items" values must be the same type, string or Option. Passed value: ${toString(newValue)}.`);
@@ -626,7 +585,7 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
         }
     }
     watchOptions(newValue) {
-        this.page = newValue.getPage(0, this.filter.length > 0 ? this.optionsFilter : undefined);
+        this.page = newValue.getPage(0, Boolean(this.filter) ? this.optionsFilter : undefined);
     }
     watchFilter(newValue) {
         this.loadingWrapper({ name: 'load-data' });
@@ -692,8 +651,8 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
             throw new Error('<mg-input-combobox> method "setError()" param "errorMessage" must be a string.');
         }
         else {
-            this.setValidity(valid, errorMessage);
-            this.setErrorMessage();
+            this.setValidity(valid);
+            this.setErrorMessage(valid ? undefined : errorMessage);
             this.hasDisplayedError = this.invalid;
         }
     }
@@ -713,7 +672,9 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    this.resetErrorMessage();
+                    this.checkValidity();
+                    this.errorMessage = undefined;
+                    this.hasDisplayedError = false;
                     resolve();
                 });
             });
@@ -736,34 +697,15 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
     }
     /**
      * Method to set validity values
-     * @param newValidValue - new valid value. `true` will bypass input check.
-     * @param customErrorMessage - custom error message
+     * @param newValue - valid new value
      */
-    setValidity(newValidValue, customErrorMessage) {
-        var _a;
+    setValidity(newValue) {
         const oldValidValue = this.valid;
-        let valid = newValidValue;
-        // Set custom validity
-        if (!valid && this.input !== undefined) {
-            // custom errror, start by reset it
-            this.customError = undefined;
-            if (isValidString(customErrorMessage)) {
-                this.customError = customErrorMessage;
-            }
-            // no value
-            else if ((this.fetchurl === undefined ? ((_a = this.items) !== null && _a !== void 0 ? _a : []).length : this.page.total) === 0) {
-                this.customError = CustomError.NoValue;
-            }
-            // get new input validity from validity state
-            valid = this.input.checkValidity() && this.customError === undefined;
-        }
-        // set valid/invalid props
-        this.valid = valid;
+        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 !== oldValidValue))
             this.inputValid.emit(this.valid);
-        }
     }
     /*************
      * Lifecycle *
@@ -804,19 +746,15 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
         const listId = `${this.identifier}-list`;
         const readonlyValue = this.getValueTitle();
         const withResetButton = this.value && !this.disabled;
-        const disabled = this.disabled || this.hasNoValueError();
         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 && this.filter.length > 0) {
+        else if (((_b = this.page) === null || _b === void 0 ? void 0 : _b.items.length) === 0 && Boolean(this.filter))
             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 (![null, undefined].includes((_d = this.option) === null || _d === void 0 ? void 0 : _d.value)) {
+        if (Boolean((_d = this.option) === null || _d === void 0 ? void 0 : _d.value)) {
             activeDescendant = this.option.value;
         }
         else if (typeof this.value === 'string') {
@@ -825,12 +763,12 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
         else {
             activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
         }
-        return (h("mg-input", { key: 'fa0977713a1150c39b4f989bbb139e0e345b4c5f', 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: defineErrorMessage(this.errorMessage, this.noValueErrorDetail) }, 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: '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,
-            }, "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: 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) => {
+            }, "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;
-            } }), withResetButton ? (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, disabled: disabled }, h("mg-icon", { icon: "cross" }))) : (h("mg-button", { class: "mg-c-input__box-append", variant: "flat", "is-icon": true, label: this.itemsLabel, tabindex: "-1", disabled: disabled }, h("mg-icon", { icon: `chevron-${this.popoverDisplay ? 'up' : 'down'}` })))), h("div", { slot: "content", class: "mg-c-input__popover-container" }, popoverContent === 'list' && [
+            } }), withResetButton ? (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 }, h("mg-icon", { icon: "cross" }))) : (h("mg-button", { class: "mg-c-input__box-append", variant: "flat", "is-icon": true, label: this.itemsLabel, tabindex: "-1", disabled: this.disabled }, h("mg-icon", { icon: `chevron-${this.popoverDisplay ? 'up' : 'down'}` })))), h("div", { slot: "content", class: "mg-c-input__popover-container" }, popoverContent === 'list' && [
             // eslint-disable-next-line jsx-a11y/role-supports-aria-props
             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;
@@ -886,7 +824,6 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
         "fetchurl": [1],
         "fetchoptions": [16],
         "fetchmappings": [16],
-        "noValueErrorDetail": [1, "no-value-error-detail"],
         "valid": [1028],
         "invalid": [1028],
         "isLoading": [32],
@@ -919,7 +856,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-combobox", "mg-button", "mg-card", "mg-details", "mg-icon", "mg-input", "mg-input-title", "mg-loader", "mg-popover", "mg-popover-content", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-combobox", "mg-button", "mg-card", "mg-icon", "mg-input", "mg-input-title", "mg-loader", "mg-popover", "mg-popover-content", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-input-combobox":
             if (!customElements.get(tagName)) {
@@ -927,16 +864,11 @@ function defineCustomElement$1() {
             }
             break;
         case "mg-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "mg-card":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "mg-details":
+        case "mg-card":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }

package/dist/components/mg-input-date.js

@@ -2,7 +2,6 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { C as ClassList, i as isValidString, o as dateRegExp, p as dateToString, t as toString } from './index2.js';
 import { l as localeDate, a as localeDatePattern, i as initLocales } from './index3.js';
 import { d as defineCustomElement$5, c as classReadonly, a as classDisabled } from './mg-input2.js';
-import { d as defineCustomElement$7 } from './mg-details2.js';
 import { d as defineCustomElement$6 } from './mg-icon2.js';
 import { d as defineCustomElement$4 } from './mg-input-title2.js';
 import { d as defineCustomElement$3 } from './mg-tooltip2.js';
@@ -13,9 +12,11 @@ const DEFAULT_MAX_DATE = '9999-12-31';
 const mgInputDateCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__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-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}";
 
 const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.valueChange = createEvent(this, "value-change", 7);
         this.inputValid = createEvent(this, "input-valid", 7);
@@ -71,7 +72,6 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
          * @returns formated pattern help text. Ex: Format attendu : jj/mm/aaaa (ex : 20/12/2020)
          */
         this.formatHelpText = (helpText) => {
-            var _a, _b;
             // If the component is in readonly mode, return directly because the message will not be rendered
             if (this.readonly) {
                 return undefined;
@@ -84,23 +84,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
                 text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText.expectedFormat));
             }
             // Replace pattern and date variables
-            text = text.replace('{pattern}', this.renderPattern()).replace('{date}', localeDate(dateToString(new Date('2025-12-24')), this.systemLocale));
-            // Add additional message for min/max if necessary
-            let rangeMessage;
-            if (((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== DEFAULT_MAX_DATE) {
-                rangeMessage = this.messages.input.date.helpText.minMax.replace('{min}', localeDate(this.min, this.systemLocale)).replace('{max}', localeDate(this.max, this.systemLocale));
-            }
-            else if (((_b = this.min) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-                rangeMessage = this.messages.input.date.helpText.min.replace('{min}', localeDate(this.min, this.systemLocale));
-            }
-            else if (this.max !== DEFAULT_MAX_DATE) {
-                rangeMessage = this.messages.input.date.helpText.max.replace('{max}', localeDate(this.max, this.systemLocale));
-            }
-            // Combine custom helpText with range message if both exist
-            if (text !== undefined && rangeMessage !== undefined) {
-                return `${text}<br>${rangeMessage}`;
-            }
-            return text;
+            return text.replace('{pattern}', this.renderPattern()).replace('{date}', localeDate(dateToString(new Date('2025-12-24')), this.systemLocale));
         };
         /**
          * Handle input event
@@ -190,7 +174,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
                 }
                 // min, max & minMax
                 else if (['min', 'max', 'minMax'].includes(inputError)) {
-                    this.errorMessage = this.messages.input.date.helpText[inputError]
+                    this.errorMessage = this.messages.input.date.error[inputError]
                         .replace('{min}', localeDate(this.min, this.systemLocale))
                         .replace('{max}', localeDate(this.max, this.systemLocale));
                 }
@@ -375,7 +359,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '71daaa8818ab7120c61a45399ae016a4621c8f50', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        return (h("mg-input", { key: '31c223be6c69af4ffa89f74102c41a27040ad031', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }))));
@@ -425,18 +409,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-date", "mg-details", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-date", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-input-date":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, MgInputDate$1);
             }
             break;
-        case "mg-details":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
         case "mg-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();

package/dist/components/mg-input-numeric.js

@@ -2,7 +2,6 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { C as ClassList, i as isValidString, t as toString } from './index2.js';
 import { b as localeNumber, c as localeUnit, d as localePercent, e as localeCurrency, i as initLocales } from './index3.js';
 import { d as defineCustomElement$5, c as classReadonly, a as classDisabled, w as widths } from './mg-input2.js';
-import { d as defineCustomElement$7 } from './mg-details2.js';
 import { d as defineCustomElement$6 } from './mg-icon2.js';
 import { d as defineCustomElement$4 } from './mg-input-title2.js';
 import { d as defineCustomElement$3 } from './mg-tooltip2.js';
@@ -17,9 +16,11 @@ const formats = ['none', 'number', 'currency', 'percent', 'unit'];
 const mgInputNumericCss = ".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__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__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-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__box{width:auto;text-align:var(--mg-c-input-text-align, right)}";
 
 const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.valueChange = createEvent(this, "value-change", 7);
         this.inputValid = createEvent(this, "input-valid", 7);
@@ -146,7 +147,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
                 else {
                     const formattedMin = this.formatErrorValue(this.min);
                     const formattedMax = this.formatErrorValue(this.max);
-                    this.errorMessage = this.messages.input.numeric.helpText[inputError].replace('{min}', formattedMin).replace('{max}', formattedMax);
+                    this.errorMessage = this.messages.input.numeric.error[inputError].replace('{min}', formattedMin).replace('{max}', formattedMax);
                 }
             }
         };
@@ -225,23 +226,8 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
             if (this.min === undefined && this.max === undefined && text === undefined) {
                 return undefined;
             }
-            // Generate range message based on available constraints
-            let rangeMessage;
-            if (this.min !== undefined && this.max !== undefined) {
-                rangeMessage = this.messages.input.numeric.helpText.minMax.replace('{min}', this.formatErrorValue(this.min)).replace('{max}', this.formatErrorValue(this.max));
-            }
-            else if (this.min !== undefined) {
-                rangeMessage = this.messages.input.numeric.helpText.min.replace('{min}', this.formatErrorValue(this.min));
-            }
-            else if (this.max !== undefined) {
-                rangeMessage = this.messages.input.numeric.helpText.max.replace('{max}', this.formatErrorValue(this.max));
-            }
-            // Combine custom helpText with range message if both exist
-            if (text !== undefined && rangeMessage !== undefined) {
-                return `${text}<br>${rangeMessage}`;
-            }
             // Return either custom helpText or range message
-            return text || rangeMessage;
+            return text;
         };
         /**
          * Renders the readonly content of the input component.
@@ -476,7 +462,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'ca551b49b1b4dc98fd4e943e51de8a32bc78882b', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
+        return (h("mg-input", { key: '43e41f72e4cc4cf15a565167cee9e65035935e1f', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
             ? this.readonlyValue && this.renderReadonly()
             : [
                 h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
@@ -551,18 +537,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-numeric", "mg-details", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-numeric", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-input-numeric":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, MgInputNumeric$1);
             }
             break;
-        case "mg-details":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
         case "mg-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();