@mgdis/mg-components 6.15.0 → 6.17.0

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

@@ -1,8 +1,6 @@
 import { h } from "@stencil/core";
 import { ClassList, allItemsAreString, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { classDisabled, classReadonly } from "../mg-input/mg-input.conf";
-import { initLocales } from "../../../../locales";
-import { defineErrorMessage } from "../mg-input/mg-input.utils";
 /**
  * type Option validation function
  * @param option - radio option
@@ -60,29 +58,6 @@ export class MgInputToggle {
          * Checked internal value
          */
         this.checked = false;
-        /**
-         * Check if input is valid
-         */
-        this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || this.hasInputItems());
-        };
-        /**
-         * Reset error message
-         */
-        this.resetErrorMessage = () => {
-            this.checkValidity();
-            this.errorMessage = undefined;
-        };
-        /**
-         * Test if component has items
-         * @returns truthy if component has items
-         */
-        this.hasInputItems = () => { var _a; return ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 0; };
-        /**
-         * Test if component has no value error message displayed
-         * @returns truthy if compent display no value error message
-         */
-        this.hasNoValueErrorMessageDisplay = () => this.errorMessage === this.messages.errors.noValue;
         /**
          * Set input error message
          * @param errorMessage - errorMessage override
@@ -91,13 +66,8 @@ export class MgInputToggle {
             // Set error message
             this.errorMessage = undefined;
             // Does have a custom error message
-            if (!this.valid) {
-                if (errorMessage !== undefined) {
-                    this.errorMessage = errorMessage;
-                }
-                else if (!this.hasInputItems()) {
-                    this.errorMessage = this.messages.errors.noValue;
-                }
+            if (!this.valid && errorMessage !== undefined) {
+                this.errorMessage = errorMessage;
             }
         };
         /**
@@ -112,7 +82,7 @@ export class MgInputToggle {
         this.validateSlots = () => {
             const slots = Array.from(this.element.children);
             if (slots.length !== 2) {
-                console.error('<mg-input-toggle> 2 slots are required.');
+                throw new Error('<mg-input-toggle> 2 slots are required.');
             }
             else if (!this.isIcon) {
                 // Due to text-overflow set to ellipsis
@@ -143,28 +113,16 @@ export class MgInputToggle {
         this.valueChange.emit(newValue);
     }
     validateItems(newValue) {
-        if ([undefined, null].includes(newValue) || (Array.isArray(newValue) && newValue.length === 0)) {
-            this.options = [];
-            this.displayError();
-        }
-        else if (Array.isArray(newValue) && this.items.length !== 2) {
+        if (typeof newValue === 'object' && this.items.length !== 2) {
             throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${toString(newValue)}.`);
         }
         // String array
         else if (allItemsAreString(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item }));
-            // force to reset error when noValueError is displaied
-            if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
-                this.resetErrorMessage();
-            }
         }
         // Object array
         else if (Array.isArray(newValue) && newValue.every(isOption)) {
             this.options = newValue;
-            // force to reset error when noValueError is displaied
-            if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
-                this.resetErrorMessage();
-            }
         }
         else {
             throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${toString(newValue)}.`);
@@ -226,7 +184,8 @@ export class MgInputToggle {
             throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
         }
         else {
-            this.setValidity(valid);
+            this.valid = valid;
+            this.inputValid.emit(valid);
             this.setErrorMessage(valid ? undefined : errorMessage);
         }
     }
@@ -245,43 +204,12 @@ export class MgInputToggle {
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    this.resetErrorMessage();
+                    this.errorMessage = undefined;
                     resolve();
                 });
             });
         }
     }
-    /**
-     * Display input error if it exists.
-     */
-    displayError() {
-        // Use `Promise` as requested for stencil method
-        // Use `requestAnimationFrame` to ensure:
-        // - DOM is fully updated before validation
-        // - Async operations are completed
-        // - No timing issues with Stencil's render cycle
-        // - Keep everything in sync both inside and outside the component
-        return new Promise(resolve => {
-            requestAnimationFrame(() => {
-                this.checkValidity();
-                this.setErrorMessage();
-                resolve();
-            });
-        });
-    }
-    /**
-     * Method to set validity values
-     * @param newValue - valid new value
-     */
-    setValidity(newValue) {
-        const oldValidValue = this.valid;
-        this.valid = newValue;
-        this.invalid = !this.valid;
-        // We need to send valid event even if it is the same value
-        if (this.valid !== oldValidValue) {
-            this.inputValid.emit(this.valid);
-        }
-    }
     /**
      * set checked state
      */
@@ -300,9 +228,6 @@ export class MgInputToggle {
             const selectedValue = this.value === this.options[optionTrueValueIndex].value;
             this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;
         }
-        else if (Array.isArray(this.options) && this.options.length === 0) {
-            return;
-        }
         else {
             this.checked = this.value === this.options[1].value;
         }
@@ -314,8 +239,6 @@ export class MgInputToggle {
      * Check if component props are well configured on init
      */
     componentWillLoad() {
-        // Get locales
-        this.messages = initLocales(this.element).messages;
         // Check items format
         this.validateItems(this.items);
         // Check slots
@@ -334,7 +257,7 @@ export class MgInputToggle {
      */
     render() {
         const checkedItem = this.getCheckedItem(this.checked);
-        return (h("mg-input", { key: 'a17e505f60d3c7e37f18db5d5c94e8d4a03b3949', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: defineErrorMessage(this.errorMessage, this.noValueErrorDetail) }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly || !this.hasInputItems(), onClick: this.toggleChecked, ref: el => {
+        return (h("mg-input", { key: '7611cffaf1c01e30c3fa7a27555f94ab357dd374', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked, ref: el => {
                 if (el !== null)
                     this.button = el;
             } }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
@@ -355,7 +278,6 @@ export class MgInputToggle {
         return {
             "value": {
                 "type": "any",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "any",
@@ -370,11 +292,11 @@ export class MgInputToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "items": {
                 "type": "unknown",
-                "attribute": "items",
                 "mutable": false,
                 "complexType": {
                     "original": "string[] | ToggleValue[]",
@@ -398,7 +320,6 @@ export class MgInputToggle {
             },
             "identifier": {
                 "type": "string",
-                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -413,11 +334,11 @@ export class MgInputToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "identifier"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -433,11 +354,11 @@ export class MgInputToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "this.identifier"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -452,11 +373,11 @@ export class MgInputToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "labelOnTop": {
                 "type": "boolean",
-                "attribute": "label-on-top",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -472,11 +393,11 @@ export class MgInputToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-on-top",
                 "defaultValue": "false"
             },
             "labelHide": {
                 "type": "boolean",
-                "attribute": "label-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -492,11 +413,11 @@ export class MgInputToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-hide",
                 "defaultValue": "false"
             },
             "isOnOff": {
                 "type": "boolean",
-                "attribute": "is-on-off",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -512,11 +433,11 @@ export class MgInputToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-on-off",
                 "defaultValue": "false"
             },
             "isIcon": {
                 "type": "boolean",
-                "attribute": "is-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -532,11 +453,11 @@ export class MgInputToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-icon",
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -552,11 +473,11 @@ export class MgInputToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -572,11 +493,11 @@ export class MgInputToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "tooltip": {
                 "type": "string",
-                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -591,11 +512,11 @@ export class MgInputToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "tooltip"
             },
             "tooltipPosition": {
                 "type": "string",
-                "attribute": "tooltip-position",
                 "mutable": false,
                 "complexType": {
                     "original": "TooltipPosition",
@@ -617,11 +538,11 @@ export class MgInputToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "tooltip-position",
                 "defaultValue": "'input'"
             },
             "helpText": {
                 "type": "string",
-                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -636,64 +557,8 @@ export class MgInputToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
-            },
-            "noValueErrorDetail": {
-                "type": "string",
-                "attribute": "no-value-error-detail",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Define no value error detail"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "valid": {
-                "type": "boolean",
-                "attribute": "valid",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define input valid state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "invalid": {
-                "type": "boolean",
-                "attribute": "invalid",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define input invalid state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "help-text"
             }
         };
     }
@@ -702,6 +567,7 @@ export class MgInputToggle {
             "classCollection": {},
             "options": {},
             "errorMessage": {},
+            "valid": {},
             "checked": {}
         };
     }

package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js

@@ -101,7 +101,6 @@ export class MgItemMore {
         return {
             "icon": {
                 "type": "unknown",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
@@ -126,7 +125,6 @@ export class MgItemMore {
             },
             "slotlabel": {
                 "type": "unknown",
-                "attribute": "slotlabel",
                 "mutable": false,
                 "complexType": {
                     "original": "SlotLabelType",
@@ -151,7 +149,6 @@ export class MgItemMore {
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "SizeType",
@@ -172,7 +169,8 @@ export class MgItemMore {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             }
         };
     }

package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js

@@ -180,7 +180,6 @@ export class MgMenu {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -195,11 +194,11 @@ export class MgMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "direction": {
                 "type": "string",
-                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "Direction",
@@ -221,11 +220,11 @@ export class MgMenu {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "direction",
                 "defaultValue": "'horizontal'"
             },
             "itemmore": {
                 "type": "unknown",
-                "attribute": "itemmore",
                 "mutable": false,
                 "complexType": {
                     "original": "ItemMoreType",
@@ -249,7 +248,6 @@ export class MgMenu {
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "MenuSizeType",
@@ -271,6 +269,7 @@ export class MgMenu {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             }
         };

package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js

@@ -384,7 +384,6 @@ export class MgMenuItem {
         return {
             "identifier": {
                 "type": "string",
-                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -400,11 +399,11 @@ export class MgMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "identifier",
                 "defaultValue": "createID('mg-menu-item')"
             },
             "href": {
                 "type": "string",
-                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -419,11 +418,11 @@ export class MgMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "href"
             },
             "target": {
                 "type": "string",
-                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "TargetType",
@@ -444,11 +443,11 @@ export class MgMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "target"
             },
             "status": {
                 "type": "string",
-                "attribute": "status",
                 "mutable": true,
                 "complexType": {
                     "original": "MgMenuStatusType",
@@ -470,11 +469,11 @@ export class MgMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "status",
                 "defaultValue": "'visible'"
             },
             "expanded": {
                 "type": "boolean",
-                "attribute": "expanded",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -490,6 +489,7 @@ export class MgMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "expanded",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/molecules/mg-action-more/mg-action-more.js

@@ -164,7 +164,6 @@ export class MgActionMore {
         return {
             "items": {
                 "type": "unknown",
-                "attribute": "items",
                 "mutable": false,
                 "complexType": {
                     "original": "(MgActionMoreItemType | MgActionMoreDividerType)[]",
@@ -193,7 +192,6 @@ export class MgActionMore {
             },
             "icon": {
                 "type": "unknown",
-                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "MgActionMoreIconType",
@@ -217,7 +215,6 @@ export class MgActionMore {
             },
             "button": {
                 "type": "unknown",
-                "attribute": "button",
                 "mutable": false,
                 "complexType": {
                     "original": "MgActionMoreButtonType",
@@ -242,7 +239,6 @@ export class MgActionMore {
             },
             "displayChevron": {
                 "type": "boolean",
-                "attribute": "display-chevron",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -258,6 +254,7 @@ export class MgActionMore {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "display-chevron",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/molecules/mg-alert/mg-alert.js

@@ -160,7 +160,6 @@ export class MgAlert {
         return {
             "delay": {
                 "type": "number",
-                "attribute": "delay",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -175,11 +174,11 @@ export class MgAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "delay"
             },
             "variant": {
                 "type": "string",
-                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "VariantType",
@@ -201,11 +200,11 @@ export class MgAlert {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'info'"
             },
             "variantStyle": {
                 "type": "string",
-                "attribute": "variant-style",
                 "mutable": false,
                 "complexType": {
                     "original": "VariantStyleType",
@@ -227,6 +226,7 @@ export class MgAlert {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "variant-style",
                 "defaultValue": "'bar-left'"
             }
         };