npm - @mgdis/mg-components - Versions diffs - 5.28.2 → 6.0.0 - Mend

@mgdis/mg-components 5.28.2 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (339) hide show

package/dist/components/mg-input2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { Z as Ze } from './index.es.js';
+import { Q as Qe, Z as Ze } from './index.es.js';
 import { d as defineCustomElement$4 } from './mg-icon2.js';
 import { d as defineCustomElement$3 } from './mg-input-title2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip2.js';
@@ -13,21 +13,12 @@ const widths = [2, 4, 16, 'full'];
  * Possible tootltip postions
  */
 const tooltipPositions = ['input', 'label'];
-/**
- * Available handlers
- */
-var Handler;
-(function (Handler) {
-    Handler["BLUR"] = "blur";
-    Handler["FOCUS"] = "focus";
-    Handler["MOUSEENTER"] = "mouseenter";
-})(Handler || (Handler = {}));
 const classFieldset = 'mg-c-input--fieldset';
 const classDisabled = 'mg-c-input--disabled';
 const classReadonly = 'mg-c-input--readonly';
 const classVerticalList = 'mg-c-input--vertical-list';
-const mgInputCss = ".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__input-container{width:100%;flex:1 auto}.mg-c-input__box.mg-c-input__box--width{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.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.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi)) .mg-c-input__input-container mg-tooltip{margin-left:3rem}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input{display:flex;min-height:var(--default-size);align-items:center;justify-content:start}.mg-c-input__input-icon{color:hsl(var(--color-dark))}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled),.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:1.2rem;text-align:start}.mg-c-input__help-text+.mg-c-input__error{margin-top:.2rem}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:.5rem}.mg-c-input.mg-c-input--readonly>*:not([slot=label],[name=append-input]),.mg-c-input.mg-c-input--readonly ::slotted(mg-button[slot=append-input]){display:none}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}:host(.mg-c-input){display:flex}:host(.mg-c-input.mg-c-input--textarea.mg-c-input--readonly) .mg-c-input__input-container{white-space:pre-line}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}";
+const mgInputCss = ".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}}/*!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n */:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:var(--mg-b-font-size-small);text-align:start}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}";
 const MgInputStyle0 = mgInputCss;
 const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLElement {
@@ -42,25 +33,6 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         this.classInput = 'mg-c-input';
         this.classHasError = 'mg-c-input--has-error';
         this.classLabelOnTop = 'mg-c-input--label-on-top';
-        /**
-         * Get readonly values
-         * @returns formated readonly value
-         */
-        this.getReadonlyValues = () => {
-            var _a;
-            if (Array.isArray(this.readonlyValue) && !this.isVerticalList) {
-                return this.readonlyValue.join(', ');
-            }
-            else if (Array.isArray(this.readonlyValue) && this.readonlyValue.length > 1) {
-                return this.readonlyValue;
-            }
-            else if (Array.isArray(this.readonlyValue) && this.readonlyValue.length === 1) {
-                return this.readonlyValue[0];
-            }
-            else {
-                return ((_a = this.readonlyValue) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.readonlyValue : '';
-            }
-        };
         /**
          * Get tooltip node
          * @returns mg-tooltip
@@ -73,7 +45,6 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         this.tooltip = undefined;
         this.tooltipPosition = 'input';
         this.required = false;
-        this.readonlyValue = undefined;
         this.errorMessage = undefined;
         this.helpText = undefined;
         this.ariaDescribedbyIDs = undefined;
@@ -83,8 +54,8 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         this.isVerticalList = false;
     }
     watchIdentifier(newValue) {
-        if (!Ze(newValue)) {
-            throw new Error('<mg-input> prop "identifier" is required.');
+        if (!Qe(newValue)) {
+            throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${Ze(newValue)}.`);
         }
         else {
             this.helpTextId = `${this.identifier}-help-text`;
@@ -106,12 +77,12 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
     }
     watchTooltipPosition(newValue) {
         if (!tooltipPositions.includes(newValue)) {
-            throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}`);
+            throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${Ze(newValue)}.`);
         }
     }
     watchErrorMessage(newValue) {
         var _a;
-        if (newValue) {
+        if (newValue !== undefined) {
             this.element.classList.add(this.classHasError);
             this.renderErrorMessage();
         }
@@ -123,7 +94,7 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
     }
     watchHelpText(newValue) {
         var _a;
-        if (newValue) {
+        if (newValue && !this.isReadonly) {
             this.renderHelpText();
         }
         else {
@@ -132,16 +103,18 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         }
     }
     watchAriaDescribedbyIDs() {
+        if (this.isReadonly)
+            return;
         // a11y IDs
         const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);
         // Help text
-        if (this.helpText) {
+        if (this.helpText !== undefined) {
             this.renderHelpText();
             if (!ariaDescribedbyIDs.has(this.helpTextId))
                 ariaDescribedbyIDs.add(this.helpTextId);
         }
         // Error Message
-        if (this.errorMessage) {
+        if (this.errorMessage !== undefined) {
             this.renderErrorMessage();
             if (!ariaDescribedbyIDs.has(this.helpTextErrorId))
                 ariaDescribedbyIDs.add(this.helpTextErrorId);
@@ -168,8 +141,8 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
      */
     // eslint-disable-next-line @stencil-community/no-unused-watch
     watchLabel() {
-        if (!Ze(this.label)) {
-            throw new Error('<mg-input> prop "label" is required.');
+        if (!Qe(this.label)) {
+            throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${Ze(this.label)}.`);
         }
         else {
             this.watchAriaDescribedbyIDs();
@@ -209,7 +182,7 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
      */
     renderErrorMessage() {
         this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);
-        if (!this.errorMessageSlotElement) {
+        if (this.errorMessageSlotElement === null) {
             this.errorMessageSlotElement = document.createElement('div');
             this.errorMessageSlotElement.setAttribute('slot', this.slotError);
             this.element.appendChild(this.errorMessageSlotElement);
@@ -222,7 +195,7 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
      */
     renderHelpText() {
         this.helptextMessageSlotElement = this.element.querySelector(`[slot=${this.slotHelpText}]`);
-        if (!this.helptextMessageSlotElement) {
+        if (this.helptextMessageSlotElement === null) {
             this.helptextMessageSlotElement = document.createElement('div');
             this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);
             this.element.appendChild(this.helptextMessageSlotElement);
@@ -239,19 +212,19 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
     componentWillLoad() {
         this.watchIdentifier(this.identifier);
         this.watchLabel();
+        this.watchClass();
         this.watchLabelOnTop(this.labelOnTop);
         this.watchLabelConfig();
         this.watchTooltipPosition(this.tooltipPosition);
         this.watchHelpText(this.helpText);
         this.watchErrorMessage(this.errorMessage);
-        this.watchClass();
     }
     /**
      * Validate slots
      */
     componentDidLoad() {
         this.watchAriaDescribedbyIDs();
-        if (!this.isReadonly && !this.isFieldset && !this.element.querySelector(`#${this.identifier}`)) {
+        if (!this.isReadonly && !this.isFieldset && this.element.querySelector(`#${this.identifier}`) === null) {
             throw new Error(`<mg-input> "identifier" prop has no target for id: ${this.identifier}. Add an id to the targeted input.`);
         }
     }
@@ -260,18 +233,8 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
      * @returns HTML Element
      */
     render() {
-        const readonlyValue = this.getReadonlyValues();
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: '7a344b1c43f967771a6a3460adf83d60aa7fcc7e', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: 'e88dbd6ad81f94b6ab3fdd2d73986b06f05f233d', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: '12f3e23bd14c710ef5ecad3dedeb4f3d058c49d7', name: this.slotLabel }), this.tooltip && !this.isReadonly && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: 'd7adace17ac5d68597dd5ece286ec04e405abccd', class: "mg-c-input__input-container" }, this.isReadonly
-            ? [
-                Array.isArray(readonlyValue) ? (h("ul", { key: "readonly-value-list" }, readonlyValue.map(value => (h("li", { key: value }, h("strong", null, value)))))) : (h("strong", { key: "readonly-value" }, readonlyValue)),
-                h("slot", { key: "default-slot" }),
-            ]
-            : [
-                h("div", { class: "mg-c-input__input", key: "tooltip" }, h("slot", null), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()),
-                this.helpText && (h("div", { class: "mg-c-input__help-text", key: "help-text" }, h("slot", { name: this.slotHelpText }))),
-                !this.isDisabled && this.errorMessage && (h("div", { class: "mg-c-input__error", "aria-live": "assertive", key: "error-message" }, h("slot", { name: this.slotError }))),
-            ])));
+        return (h(Host, { key: 'de2441ca25015a07653e09f5cda0d9588062840d', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '39cfcc83a6965e55310220f05334d3f364c502c1', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: '6413efe7254806a84e283cd15365dc0d78c18afe', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '7047fbaff93f273d134745e4d991eb91c28ef7f5', class: "mg-c-input__input-container" }, h("div", { key: '3cb904222def3d4f68cf000ae292e0dc221a954c', class: "mg-c-input__input" }, h("slot", { key: '552f670ef98a4ce43dbbf6bb54038152c87b6472' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: '945232348ed6d14f6f018dcb8003ef46c68c6b44', class: "mg-c-input__help-text" }, h("slot", { key: '782770bebf5600f75f59930b5d9665ef93a0404b', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: '96398b6849c7c26474037c1f783dc02d70f1ad65', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: 'dc7cf70f5145e790f246b9ac0955f24105927adc', name: this.slotError }))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -294,7 +257,6 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         "tooltip": [1],
         "tooltipPosition": [1, "tooltip-position"],
         "required": [4],
-        "readonlyValue": [1, "readonly-value"],
         "errorMessage": [1, "error-message"],
         "helpText": [1, "help-text"],
         "ariaDescribedbyIDs": [16],
@@ -348,6 +310,6 @@ function defineCustomElement() {
 }
 defineCustomElement();
-export { Handler as H, MgInput as M, classVerticalList as a, classReadonly as b, classFieldset as c, defineCustomElement as d, classDisabled as e, widths as w };
+export { MgInput as M, classVerticalList as a, classReadonly as b, classFieldset as c, defineCustomElement as d, classDisabled as e, widths as w };
 //# sourceMappingURL=mg-input2.js.map

package/dist/components/mg-input2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-input2.js","mappings":"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","names":["isValidString"],"sources":["src/components/molecules/inputs/mg-input/mg-input.conf.ts","../styles/dist/components/mg-input.css?tag=mg-input&encapsulation=shadow","src/components/molecules/inputs/mg-input/mg-input.tsx"],"sourcesContent":["/*\n Possible input width\n /\nexport const widths = [2, 4, 16, 'full'] as const;\n\nexport type Width = (typeof widths)[number];\n\n/\n Possible tootltip postions\n /\nexport const tooltipPositions = ['input', 'label'] as const;\n\nexport type TooltipPosition = (typeof tooltipPositions)[number];\n\n/\n Possible Input types\n /\nexport type HTMLMgInputsElement =\n \| (HTMLMgInputElement & { required: true; invalid: false; displayError: () => void; labelOnTop: boolean; readonly: boolean })\n \| HTMLMgInputCheckboxElement\n \| HTMLMgInputDateElement\n \| HTMLMgInputNumericElement\n \| HTMLMgInputPasswordElement\n \| HTMLMgInputRadioElement\n \| HTMLMgInputSelectElement\n \| HTMLMgInputTextElement\n \| HTMLMgInputTextareaElement\n \| (HTMLMgInputToggleElement & { required: true; invalid: false; displayError: () => void });\n\n/\n Available handlers\n /\nexport enum Handler {\n BLUR = 'blur',\n FOCUS = 'focus',\n MOUSEENTER = 'mouseenter',\n}\n\nexport const classFieldset = 'mg-c-input--fieldset';\nexport const classDisabled = 'mg-c-input--disabled';\nexport const classReadonly = 'mg-c-input--readonly';\nexport const classVerticalList = 'mg-c-input--vertical-list';\n",".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__input-container{width:100%;flex:1 auto}.mg-c-input__box.mg-c-input__box--width{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)2)}.mg-c-input.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.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.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi)) .mg-c-input__input-container mg-tooltip{margin-left:3rem}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input{display:flex;min-height:var(--default-size);align-items:center;justify-content:start}.mg-c-input__input-icon{color:hsl(var(--color-dark))}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled),.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__error ::slotted(),.mg-c-input__help-text ::slotted(){font-size:1.2rem;text-align:start}.mg-c-input__help-text+.mg-c-input__error{margin-top:.2rem}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:.5rem}.mg-c-input.mg-c-input--readonly>:not([slot=label],[name=append-input]),.mg-c-input.mg-c-input--readonly ::slotted(mg-button[slot=append-input]){display:none}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}:host(.mg-c-input){display:flex}:host(.mg-c-input.mg-c-input--textarea.mg-c-input--readonly) .mg-c-input__input-container{white-space:pre-line}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}/# sourceMappingURL=mg-input.css.map /\n","import { Component, h, Prop, Element, Watch, Host, State } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\nimport { tooltipPositions, type TooltipPosition, classFieldset, classReadonly, classDisabled, classVerticalList } from './mg-input.conf';\n\n/*\n @slot - Input content\n * @slot label - Label content\n * @slot help-text - Help text content\n * @slot error - error content\n /\n@Component({\n tag: 'mg-input',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input.css',\n shadow: true,\n})\nexport class MgInput {\n /**********\n Internal \n *********/\n\n // HTML selectors\n private helpTextId: string;\n private helpTextErrorId: string;\n private readonly slotLabel = 'label';\n private readonly slotError = 'error';\n private readonly slotHelpText = 'help-text';\n\n // slots elements\n private errorMessageSlotElement: HTMLElement;\n private helptextMessageSlotElement: HTMLElement;\n\n // style\n private readonly classInput = 'mg-c-input';\n private readonly classHasError = 'mg-c-input--has-error';\n private readonly classLabelOnTop = 'mg-c-input--label-on-top';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputElement;\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n @Watch('identifier')\n watchIdentifier(newValue: MgInput['identifier']): void {\n if (!isValidString(newValue)) {\n throw new Error('<mg-input> prop \"identifier\" is required.');\n } else {\n this.helpTextId = `${this.identifier}-help-text`;\n this.helpTextErrorId = `${this.identifier}-error`;\n }\n }\n\n /\n Define input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop?: boolean;\n @Watch('labelOnTop')\n watchLabelOnTop(newValue: MgInput['labelOnTop']): void {\n if (newValue) {\n this.element.classList.add(this.classLabelOnTop);\n } else {\n this.element.classList.remove(this.classLabelOnTop);\n }\n }\n\n /\n Define if label is visible\n /\n @Prop() labelHide: boolean = false;\n @Watch('labelHide')\n @Watch('labelOnTop')\n watchLabelConfig(): void {\n if (this.labelHide && this.labelOnTop) {\n throw new Error('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\".');\n }\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip?: string;\n\n /\n Define tooltip position\n /\n @Prop() tooltipPosition: TooltipPosition = 'input';\n @Watch('tooltipPosition')\n watchTooltipPosition(newValue: MgInput['tooltipPosition']) {\n if (!tooltipPositions.includes(newValue)) {\n throw new Error(`<mg-input> prop \"tooltipPosition\" must be one of: ${tooltipPositions.join(', ')}`);\n }\n }\n\n /\n Define if input is required\n /\n @Prop() required: boolean = false;\n\n /\n Defines value to display in readonly mode\n /\n @Prop() readonlyValue: string \| string[];\n\n /\n Define error message to display\n /\n @Prop() errorMessage?: string;\n @Watch('errorMessage')\n watchErrorMessage(newValue: MgInput['errorMessage']): void {\n if (newValue) {\n this.element.classList.add(this.classHasError);\n this.renderErrorMessage();\n } else {\n this.element.classList.remove(this.classHasError);\n this.errorMessageSlotElement?.remove();\n this.errorMessageSlotElement = undefined;\n }\n }\n\n /\n Define help text to display\n /\n @Prop() helpText?: string;\n @Watch('helpText')\n watchHelpText(newValue: MgInput['helpText']): void {\n if (newValue) {\n this.renderHelpText();\n } else {\n this.helptextMessageSlotElement?.remove();\n this.helptextMessageSlotElement = undefined;\n }\n }\n\n /\n Define aria-describedby ids to link with\n /\n @Prop() ariaDescribedbyIDs: string[];\n @Watch('identifier')\n @Watch('errorMessage')\n @Watch('helpText')\n @Watch('ariaDescribedbyIDs')\n watchAriaDescribedbyIDs(): void {\n // a11y IDs\n const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);\n // Help text\n if (this.helpText) {\n this.renderHelpText();\n if (!ariaDescribedbyIDs.has(this.helpTextId)) ariaDescribedbyIDs.add(this.helpTextId);\n }\n\n // Error Message\n if (this.errorMessage) {\n this.renderErrorMessage();\n if (!ariaDescribedbyIDs.has(this.helpTextErrorId)) ariaDescribedbyIDs.add(this.helpTextErrorId);\n }\n\n this.element.querySelectorAll('input,select,textarea,[role=\"switch\"]').forEach(element => {\n element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));\n });\n }\n\n /\n Component classes\n /\n // eslint-disable-next-line @stencil-community/no-unused-watch\n @Watch('class')\n watchClass(): void {\n if (!this.element.classList.contains(this.classInput)) {\n this.element.classList.add(this.classInput);\n }\n this.isFieldset = this.element.classList.contains(classFieldset);\n this.isReadonly = this.element.classList.contains(classReadonly);\n this.isDisabled = this.element.classList.contains(classDisabled);\n this.isVerticalList = this.element.classList.contains(classVerticalList);\n }\n\n /\n Trigger label update\n /\n // eslint-disable-next-line @stencil-community/no-unused-watch\n @Watch('class')\n @Watch('label')\n watchLabel(): void {\n if (!isValidString(this.label)) {\n throw new Error('<mg-input> prop \"label\" is required.');\n } else {\n this.watchAriaDescribedbyIDs();\n this.renderLabel();\n }\n }\n\n /\n Element is fieldset\n /\n @State() isFieldset: boolean = false;\n\n /\n Element is readonly\n /\n @State() isReadonly: boolean = false;\n\n /\n Element is disabled\n /\n @State() isDisabled: boolean = false;\n\n /\n Element is disabled\n /\n @State() isVerticalList: boolean = false;\n\n /**********\n Methods \n *********/\n\n /\n * Render input label\n /\n private renderLabel(): void {\n let labelSlotElement: HTMLMgInputTitleElement = this.element.querySelector(`[slot=${this.slotLabel}]`);\n\n // first remove previous labelslot if exist\n labelSlotElement?.remove();\n\n // create title element\n labelSlotElement = document.createElement('mg-input-title');\n [\n ['slot', this.slotLabel],\n ['identifier', this.identifier],\n ['readonly', this.isReadonly.toString()],\n ['required', ((this.required && !this.isDisabled) \|\| false).toString()],\n ['is-legend', this.isFieldset.toString()],\n ].forEach(([attr, val]) => {\n labelSlotElement.setAttribute(attr, val);\n });\n\n // create label element\n const label = document.createElement('span');\n label.classList.add('mg-c-input-title__text');\n label.textContent = this.label;\n\n labelSlotElement.appendChild(label);\n this.element.appendChild(labelSlotElement);\n }\n\n /\n Render error message\n /\n private renderErrorMessage(): void {\n this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);\n if (!this.errorMessageSlotElement) {\n this.errorMessageSlotElement = document.createElement('div');\n this.errorMessageSlotElement.setAttribute('slot', this.slotError);\n this.element.appendChild(this.errorMessageSlotElement);\n }\n this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);\n this.errorMessageSlotElement.innerHTML = this.errorMessage;\n }\n\n /\n Render help text message\n /\n private renderHelpText(): void {\n this.helptextMessageSlotElement = this.element.querySelector(`[slot=${this.slotHelpText}]`);\n if (!this.helptextMessageSlotElement) {\n this.helptextMessageSlotElement = document.createElement('div');\n this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);\n this.element.appendChild(this.helptextMessageSlotElement);\n }\n this.helptextMessageSlotElement.setAttribute('id', this.helpTextId);\n this.helptextMessageSlotElement.innerHTML = this.helpText;\n }\n\n /\n Get readonly values\n * @returns formated readonly value\n /\n private getReadonlyValues = (): string \| string[] => {\n if (Array.isArray(this.readonlyValue) && !this.isVerticalList) {\n return this.readonlyValue.join(', ');\n } else if (Array.isArray(this.readonlyValue) && this.readonlyValue.length > 1) {\n return this.readonlyValue;\n } else if (Array.isArray(this.readonlyValue) && this.readonlyValue.length === 1) {\n return this.readonlyValue[0];\n } else {\n return this.readonlyValue?.length > 0 ? this.readonlyValue : '';\n }\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n this.watchIdentifier(this.identifier);\n this.watchLabel();\n this.watchLabelOnTop(this.labelOnTop);\n this.watchLabelConfig();\n this.watchTooltipPosition(this.tooltipPosition);\n this.watchHelpText(this.helpText);\n this.watchErrorMessage(this.errorMessage);\n this.watchClass();\n }\n\n /\n Validate slots\n /\n componentDidLoad(): void {\n this.watchAriaDescribedbyIDs();\n if (!this.isReadonly && !this.isFieldset && !this.element.querySelector(`#${this.identifier}`)) {\n throw new Error(`<mg-input> \"identifier\" prop has no target for id: ${this.identifier}. Add an id to the targeted input.`);\n }\n }\n\n /\n Get tooltip node\n * @returns mg-tooltip\n /\n private renderTooltip = (): HTMLMgTooltipElement => (\n <mg-tooltip identifier={`${this.identifier}-tooltip`} message={this.tooltip}>\n <mg-icon icon=\"info-circle\"></mg-icon>\n </mg-tooltip>\n );\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const readonlyValue = this.getReadonlyValues();\n const isGroup = this.isFieldset && !this.isReadonly;\n return (\n <Host class={this.element.classList.toString()} role={isGroup ? 'group' : undefined} aria-labelledby={isGroup ? `${this.identifier}-title` : undefined}>\n <div class={{ 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide }}>\n <slot name={this.slotLabel}></slot>\n {this.tooltip && !this.isReadonly && (this.tooltipPosition === 'label' \|\| this.labelOnTop) && !this.labelHide && this.renderTooltip()}\n </div>\n <div class=\"mg-c-input__input-container\">\n {this.isReadonly\n ? [\n Array.isArray(readonlyValue) ? (\n <ul key=\"readonly-value-list\">\n {readonlyValue.map(value => (\n <li key={value}>\n <strong>{value}</strong>\n </li>\n ))}\n </ul>\n ) : (\n <strong key=\"readonly-value\">{readonlyValue}</strong>\n ),\n <slot key=\"default-slot\"></slot>,\n ]\n : [\n <div class=\"mg-c-input__input\" key=\"tooltip\">\n <slot></slot>\n {this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' \|\| this.labelHide) && this.renderTooltip()}\n </div>,\n this.helpText && (\n <div class=\"mg-c-input__help-text\" key=\"help-text\">\n <slot name={this.slotHelpText}></slot>\n </div>\n ),\n !this.isDisabled && this.errorMessage && (\n <div class=\"mg-c-input__error\" aria-live=\"assertive\" key=\"error-message\">\n <slot name={this.slotError}></slot>\n </div>\n ),\n ]}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-input2.js","mappings":"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","names":["isValidString","toString"],"sources":["src/components/molecules/inputs/mg-input/mg-input.conf.ts","../styles/dist/components/mg-input.css?tag=mg-input&encapsulation=shadow","src/components/molecules/inputs/mg-input/mg-input.tsx"],"sourcesContent":["/*\n Possible input width\n /\nexport const widths = [2, 4, 16, 'full'] as const;\n\nexport type Width = (typeof widths)[number];\n\n/\n Possible tootltip postions\n /\nexport const tooltipPositions = ['input', 'label'] as const;\n\nexport type TooltipPosition = (typeof tooltipPositions)[number];\n\n/\n Possible Input types\n /\nexport type HTMLMgInputsElement =\n \| (HTMLMgInputElement & { required: true; invalid: false; displayError: () => void; labelOnTop: boolean; readonly: boolean })\n \| HTMLMgInputCheckboxElement\n \| HTMLMgInputDateElement\n \| HTMLMgInputNumericElement\n \| HTMLMgInputPasswordElement\n \| HTMLMgInputRadioElement\n \| HTMLMgInputSelectElement\n \| HTMLMgInputTextElement\n \| HTMLMgInputTextareaElement\n \| (HTMLMgInputToggleElement & { required: true; invalid: false; displayError: () => void });\n\n/\n Available WindowEvent types\n /\nexport type EventType = keyof WindowEventMap & ('blur' \| 'focus' \| 'mouseenter');\n\nexport const classFieldset = 'mg-c-input--fieldset';\nexport const classDisabled = 'mg-c-input--disabled';\nexport const classReadonly = 'mg-c-input--readonly';\nexport const classVerticalList = 'mg-c-input--vertical-list';\n",".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}}/!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n /:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(),.mg-c-input__help-text ::slotted(){font-size:var(--mg-b-font-size-small);text-align:start}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}/# sourceMappingURL=mg-input.css.map /\n","import { Component, h, Prop, Element, Watch, Host, State } from '@stencil/core';\nimport { isValidString, toString } from '@mgdis/stencil-helpers';\nimport { tooltipPositions, type TooltipPosition, classFieldset, classReadonly, classDisabled, classVerticalList } from './mg-input.conf';\n\n/\n @slot - Input content\n * @slot label - Label content\n * @slot help-text - Help text content\n * @slot error - error content\n /\n@Component({\n tag: 'mg-input',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input.css',\n shadow: true,\n})\nexport class MgInput {\n /**********\n Internal \n *********/\n\n // HTML selectors\n private helpTextId: string;\n private helpTextErrorId: string;\n private readonly slotLabel = 'label';\n private readonly slotError = 'error';\n private readonly slotHelpText = 'help-text';\n\n // slots elements\n private errorMessageSlotElement: HTMLElement;\n private helptextMessageSlotElement: HTMLElement;\n\n // style\n private readonly classInput = 'mg-c-input';\n private readonly classHasError = 'mg-c-input--has-error';\n private readonly classLabelOnTop = 'mg-c-input--label-on-top';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputElement;\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n @Watch('identifier')\n watchIdentifier(newValue: MgInput['identifier']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-input> prop \"identifier\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n } else {\n this.helpTextId = `${this.identifier}-help-text`;\n this.helpTextErrorId = `${this.identifier}-error`;\n }\n }\n\n /\n Define input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop?: boolean;\n @Watch('labelOnTop')\n watchLabelOnTop(newValue: MgInput['labelOnTop']): void {\n if (newValue) {\n this.element.classList.add(this.classLabelOnTop);\n } else {\n this.element.classList.remove(this.classLabelOnTop);\n }\n }\n\n /\n Define if label is visible\n /\n @Prop() labelHide: boolean = false;\n @Watch('labelHide')\n @Watch('labelOnTop')\n watchLabelConfig(): void {\n if (this.labelHide && this.labelOnTop) {\n throw new Error('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\".');\n }\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip?: string;\n\n /\n Define tooltip position\n /\n @Prop() tooltipPosition: TooltipPosition = 'input';\n @Watch('tooltipPosition')\n watchTooltipPosition(newValue: MgInput['tooltipPosition']) {\n if (!tooltipPositions.includes(newValue)) {\n throw new Error(`<mg-input> prop \"tooltipPosition\" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Define if input is required\n /\n @Prop() required: boolean = false;\n\n /\n Define error message to display\n /\n @Prop() errorMessage?: string;\n @Watch('errorMessage')\n watchErrorMessage(newValue: MgInput['errorMessage']): void {\n if (newValue !== undefined) {\n this.element.classList.add(this.classHasError);\n this.renderErrorMessage();\n } else {\n this.element.classList.remove(this.classHasError);\n this.errorMessageSlotElement?.remove();\n this.errorMessageSlotElement = undefined;\n }\n }\n\n /\n Define help text to display\n /\n @Prop() helpText?: string;\n @Watch('helpText')\n watchHelpText(newValue: MgInput['helpText']): void {\n if (newValue && !this.isReadonly) {\n this.renderHelpText();\n } else {\n this.helptextMessageSlotElement?.remove();\n this.helptextMessageSlotElement = undefined;\n }\n }\n\n /\n Define aria-describedby ids to link with\n /\n @Prop() ariaDescribedbyIDs: string[];\n @Watch('identifier')\n @Watch('errorMessage')\n @Watch('helpText')\n @Watch('ariaDescribedbyIDs')\n watchAriaDescribedbyIDs(): void {\n if (this.isReadonly) return;\n // a11y IDs\n const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);\n // Help text\n if (this.helpText !== undefined) {\n this.renderHelpText();\n if (!ariaDescribedbyIDs.has(this.helpTextId)) ariaDescribedbyIDs.add(this.helpTextId);\n }\n\n // Error Message\n if (this.errorMessage !== undefined) {\n this.renderErrorMessage();\n if (!ariaDescribedbyIDs.has(this.helpTextErrorId)) ariaDescribedbyIDs.add(this.helpTextErrorId);\n }\n\n this.element.querySelectorAll('input,select,textarea,[role=\"switch\"]').forEach(element => {\n element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));\n });\n }\n\n /\n Component classes\n /\n // eslint-disable-next-line @stencil-community/no-unused-watch\n @Watch('class')\n watchClass(): void {\n if (!this.element.classList.contains(this.classInput)) {\n this.element.classList.add(this.classInput);\n }\n this.isFieldset = this.element.classList.contains(classFieldset);\n this.isReadonly = this.element.classList.contains(classReadonly);\n this.isDisabled = this.element.classList.contains(classDisabled);\n this.isVerticalList = this.element.classList.contains(classVerticalList);\n }\n\n /\n Trigger label update\n /\n // eslint-disable-next-line @stencil-community/no-unused-watch\n @Watch('class')\n @Watch('label')\n watchLabel(): void {\n if (!isValidString(this.label)) {\n throw new Error(`<mg-input> prop \"label\" is required and must be a string. Passed value: ${toString(this.label)}.`);\n } else {\n this.watchAriaDescribedbyIDs();\n this.renderLabel();\n }\n }\n\n /\n Element is fieldset\n /\n @State() isFieldset: boolean = false;\n\n /\n Element is readonly\n /\n @State() isReadonly: boolean = false;\n\n /\n Element is disabled\n /\n @State() isDisabled: boolean = false;\n\n /\n Element is disabled\n /\n @State() isVerticalList: boolean = false;\n\n /**********\n Methods \n *********/\n\n /\n * Render input label\n /\n private renderLabel(): void {\n let labelSlotElement: HTMLMgInputTitleElement = this.element.querySelector(`[slot=${this.slotLabel}]`);\n\n // first remove previous labelslot if exist\n labelSlotElement?.remove();\n\n // create title element\n labelSlotElement = document.createElement('mg-input-title');\n [\n ['slot', this.slotLabel],\n ['identifier', this.identifier],\n ['readonly', this.isReadonly.toString()],\n ['required', ((this.required && !this.isDisabled) \|\| false).toString()],\n ['is-legend', this.isFieldset.toString()],\n ].forEach(([attr, val]) => {\n labelSlotElement.setAttribute(attr, val);\n });\n\n // create label element\n const label = document.createElement('span');\n label.classList.add('mg-c-input-title__text');\n label.textContent = this.label;\n\n labelSlotElement.appendChild(label);\n this.element.appendChild(labelSlotElement);\n }\n\n /\n Render error message\n /\n private renderErrorMessage(): void {\n this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);\n if (this.errorMessageSlotElement === null) {\n this.errorMessageSlotElement = document.createElement('div');\n this.errorMessageSlotElement.setAttribute('slot', this.slotError);\n this.element.appendChild(this.errorMessageSlotElement);\n }\n this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);\n this.errorMessageSlotElement.innerHTML = this.errorMessage;\n }\n\n /\n Render help text message\n /\n private renderHelpText(): void {\n this.helptextMessageSlotElement = this.element.querySelector(`[slot=${this.slotHelpText}]`);\n if (this.helptextMessageSlotElement === null) {\n this.helptextMessageSlotElement = document.createElement('div');\n this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);\n this.element.appendChild(this.helptextMessageSlotElement);\n }\n this.helptextMessageSlotElement.setAttribute('id', this.helpTextId);\n this.helptextMessageSlotElement.innerHTML = this.helpText;\n }\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n this.watchIdentifier(this.identifier);\n this.watchLabel();\n this.watchClass();\n this.watchLabelOnTop(this.labelOnTop);\n this.watchLabelConfig();\n this.watchTooltipPosition(this.tooltipPosition);\n this.watchHelpText(this.helpText);\n this.watchErrorMessage(this.errorMessage);\n }\n\n /\n Validate slots\n /\n componentDidLoad(): void {\n this.watchAriaDescribedbyIDs();\n if (!this.isReadonly && !this.isFieldset && this.element.querySelector(`#${this.identifier}`) === null) {\n throw new Error(`<mg-input> \"identifier\" prop has no target for id: ${this.identifier}. Add an id to the targeted input.`);\n }\n }\n\n /\n Get tooltip node\n * @returns mg-tooltip\n /\n private renderTooltip = (): HTMLMgTooltipElement => (\n <mg-tooltip identifier={`${this.identifier}-tooltip`} message={this.tooltip}>\n <mg-icon icon=\"info-circle\"></mg-icon>\n </mg-tooltip>\n );\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const isGroup = this.isFieldset && !this.isReadonly;\n return (\n <Host class={this.element.classList.toString()} role={isGroup ? 'group' : undefined} aria-labelledby={isGroup ? `${this.identifier}-title` : undefined}>\n <div class={{ 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide }}>\n <slot name={this.slotLabel}></slot>\n {this.tooltip && (this.tooltipPosition === 'label' \|\| this.labelOnTop) && !this.labelHide && this.renderTooltip()}\n </div>\n <div class=\"mg-c-input__input-container\">\n <div class=\"mg-c-input__input\">\n <slot></slot>\n {this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' \|\| this.labelHide) && this.renderTooltip()}\n </div>\n {this.helptextMessageSlotElement && (\n <div class=\"mg-c-input__help-text\">\n <slot name={this.slotHelpText}></slot>\n </div>\n )}\n {!this.isDisabled && this.errorMessage && (\n <div class=\"mg-c-input__error\" aria-live=\"assertive\">\n <slot name={this.slotError}></slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-item-more2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { Z as Ze, Y as Ye } from './index.es.js';
+import { Z as Ze, Q as Qe, V as Ve } from './index.es.js';
 import { d as defineCustomElement$4, D as Direction, s as sizes } from './mg-menu-item2.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$8 } from './mg-badge2.js';
@@ -15,11 +15,10 @@ import { d as defineCustomElement$2 } from './mg-popover-content2.js';
  * @returns truthy if element is mg-item-more
  */
 const isMgItemMore = (element) => element.nodeName === 'MG-ITEM-MORE';
-var OverflowBehaviorElements;
-(function (OverflowBehaviorElements) {
-    OverflowBehaviorElements["BASE_INDEX"] = "data-overflow-base-index";
-    OverflowBehaviorElements["PROXY_INDEX"] = "data-overflow-proxy-index";
-})(OverflowBehaviorElements || (OverflowBehaviorElements = {}));
+const OverflowBehaviorElements = {
+    BASE_INDEX: 'data-overflow-base-index',
+    PROXY_INDEX: 'data-overflow-proxy-index',
+};
 class OverflowBehavior {
     constructor(element, render) {
         this.element = element;
@@ -75,9 +74,9 @@ class OverflowBehavior {
             [...this._baseChildren, this._moreElement].forEach((child) => {
                 acc.accWidth += child.offsetWidth;
                 const hasPreviuosItem = acc.previousItem !== null;
-                const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.getAttribute('hidden') !== null;
-                // if previous item is hidden AND is NOT more element we hidde current
-                // OR if item has an overflow we hidde current
+                const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.hasAttribute('hidden');
+                // if previous item is hidden AND is NOT more element we hide current
+                // OR if item has an overflow we hide current
                 // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item
                 // ELSE current is a display item
                 this.toggleItem(child, (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden));
@@ -121,7 +120,7 @@ class OverflowBehavior {
             }
         };
         /**
-         * Toggle element's hidde attribute
+         * Toggle element's hide attribute
          * @param element - element to toggle
          * @param isHidden - element is hidden
          */
@@ -150,7 +149,7 @@ class OverflowBehavior {
     }
 }
-const mgMenuCss = ".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}}:host{display:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}";
+const mgMenuCss = ".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}}/*!\n * @prop --mg-c-menu-color-background: Defines the background color of the menu. Unset by default, fallback on `--mg-b-color-light`.\n */:host{display:flex;background-color:var(--mg-c-menu-color-background, var(--mg-b-color-light))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}";
 const MgMenuStyle0 = mgMenuCss;
 const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement {
@@ -192,7 +191,8 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement
                 item.shadowRoot.querySelector('button,a').addEventListener(trigger, () => {
                     this.focusedMenuItem = index;
                     // reset expanded on previous active menu item
-                    (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
+                    const itemMoreMenuItem = this.getItemMoreMenuItem();
+                    (![null, undefined].includes(itemMoreMenuItem) ? [...this.menuItems, itemMoreMenuItem] : this.menuItems).forEach((item, index) => {
                         this.closeMenuItem(item, index !== this.focusedMenuItem);
                     });
                 });
@@ -217,11 +217,12 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement
          * render mg-item-more
          */
         this.renderMgItemMore = () => {
+            var _a;
             if (this.direction !== Direction.HORIZONTAL || this.isChildMenu || this.element.children.length <= 1) {
                 return;
             }
             // Insert mg-item-more outside the mg-menu shadowdom
-            if (!this.itemMoreElement) {
+            if (this.itemMoreElement === undefined) {
                 this.itemMoreElement = document.createElement('mg-item-more');
                 this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);
                 this.element.appendChild(this.itemMoreElement);
@@ -237,34 +238,36 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement
                     this.itemMoreElement[attribute] = newValue;
                 }
             }
+            if (((_a = this.itemmore) === null || _a === void 0 ? void 0 : _a.size) === undefined)
+                this.itemMoreElement.size = this.size;
         };
         this.label = undefined;
         this.direction = Direction.HORIZONTAL;
         this.itemmore = undefined;
-        this.size = 'regular';
+        this.size = 'medium';
         this.isChildMenu = undefined;
     }
     validateLabel(newValue) {
-        if (newValue === undefined && !this.element.getAttribute('aria-label')) {
-            throw new Error(`<${this.name}> prop "label" is required.`);
+        if (newValue === undefined && !this.element.hasAttribute('aria-label')) {
+            throw new Error(`<${this.name}> prop "label" is required. Passed value: ${Ze(newValue)}.`);
         }
     }
     validateDirection(newValue) {
         if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {
-            throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
+            throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}. Passed value: ${Ze(newValue)}.`);
         }
     }
     validateItemMore(newValue) {
         if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
             throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
         }
-        else if (newValue) {
+        else if (newValue !== undefined) {
             this.renderMgItemMore();
         }
     }
     validateSize(newValue) {
         if (!sizes.includes(newValue)) {
-            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes.join(', ')}.`);
+            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Ze(newValue)}.`);
         }
     }
     /*************
@@ -311,7 +314,7 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '6c8e16630693e660ad5065b92ca682843d628e01', role: "list", "aria-label": this.label }, h("slot", { key: 'dc53a12c2e6dfbe4246668697908372b83440fc7' })));
+        return (h(Host, { key: '550624e40ec66eeb90f8bc4ac1590adcbaa20dfd', role: "list", "aria-label": this.label }, h("slot", { key: 'bf6f5ac748fd45e250c02d93cc7cf72e4580de3b' })));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -411,10 +414,10 @@ const MgItemMore = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTM
          */
         this.setProxyElement = (proxified) => {
             const proxy = this.moreElementMenuItem.querySelector(`[identifier="${proxified.identifier}"]`);
-            if (!proxy)
+            if (proxy === null)
                 return;
             // remove proxy id to prevent duplicate key. default html id is: '';
-            if (Ze(proxy.id))
+            if (Qe(proxy.id))
                 proxy.id = '';
             const proxyClickHandler = () => {
                 this.parentMenu
@@ -458,8 +461,8 @@ const MgItemMore = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTM
                 // create item-more menu items element from main menu-items clones
                 this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
                 // we need to get all `mg-menu-item` linked to the cloned one to set mirror process
-                Ye(() => {
-                    if (child.querySelector('mg-menu')) {
+                Ve(() => {
+                    if (child.querySelector('mg-menu') !== null) {
                         child.querySelectorAll('mg-menu-item').forEach(this.setProxyElement);
                     }
                     else {
@@ -476,17 +479,17 @@ const MgItemMore = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTM
     }
     validateIcon(newValue) {
         if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
-            throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`);
+            throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${Ze(newValue)}.`);
     }
     validateSlotLabel(newValue) {
         if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
-            throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);
+            throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${Ze(newValue)}.`);
         else if (typeof newValue.label !== 'string')
             this.slotlabel.label = this.messages.menuLabel;
     }
     validateSize(newValue) {
         if (newValue && !sizes.includes(newValue))
-            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
+            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${Ze(newValue)}.`);
     }
     /*************
      * Lifecycle *
@@ -516,7 +519,7 @@ const MgItemMore = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTM
      * Set OverflowBehavior when parentMenu state is upate AND defined
      */
     componentDidUpdate() {
-        if (this.parentMenu && !this.overflowBehavior) {
+        if (this.parentMenu && this.overflowBehavior === undefined) {
             this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM');
             this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
         }
@@ -533,10 +536,11 @@ const MgItemMore = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTM
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '59f6d600c0f703f6709eecc06dddeeb7a91777b4', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { key: '706ffaaece681c27316f5d11fb0d4916c3643573', "data-overflow-more": true, "data-size": this.parentMenu.size, identifier: "mg-item-more", ref: el => {
-                if (el)
+        return (h(Host, { key: '57dda64ff7dcb6dbf50bcd1e887fd6fb7733d533', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { key: 'b975001df7dfeae4ea14b3e208245240e9868ae4', "data-overflow-more": true, "data-size": this.parentMenu.size, identifier: "mg-item-more", ref: el => {
+                if (el !== null) {
                     this.moreElementMenuItem = el;
-            } }, h("mg-icon", { key: 'c93e9a5bea9ff91ab7de89cd555151646859877c', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: 'cb93e7db75f6e1c5daacc17cb90ac65fad938b8b', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '65c382793eef9f113236a6df756dc535f3732f8c', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
+                }
+            } }, h("mg-icon", { key: 'f0837050757fe920e71c6060e4fb873c8bab43b7', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: '7155b47f84cc2193dec65bcccbbaa93776e5daa1', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '9295f68e1799a313cc93cdbf6bd75cea3aa1ecd0', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
     }
     get element() { return this; }
     static get watchers() { return {