@mgdis/mg-components 6.13.1 → 6.15.0

package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js

@@ -308,7 +308,7 @@ export class MgInputRichTextEditor {
      * @returns HTML mg-input Element
      */
     render() {
-        return (h("mg-input", { key: 'b11d79ea82720eff4256206374e179efaefa9268', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { ref: el => {
+        return (h("mg-input", { key: 'b7f7fe282aa00b695418fe7f055955045bbd932d', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { ref: el => {
                 this.wrapperElement = el;
             }, id: this.identifier, class: "mg-c-input__wrapper" }, h("div", null)))));
     }
@@ -328,6 +328,7 @@ export class MgInputRichTextEditor {
         return {
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -342,12 +343,12 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -362,11 +363,11 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -381,11 +382,11 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "labelOnTop": {
                 "type": "boolean",
+                "attribute": "label-on-top",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -400,12 +401,12 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-on-top",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "labelHide": {
                 "type": "boolean",
+                "attribute": "label-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -420,12 +421,12 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hide",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -440,11 +441,11 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "rows": {
                 "type": "number",
+                "attribute": "rows",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -459,12 +460,12 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "rows",
                 "reflect": false,
                 "defaultValue": "5"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -479,12 +480,12 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -499,12 +500,12 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -519,12 +520,12 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "pattern": {
                 "type": "string",
+                "attribute": "pattern",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -539,11 +540,11 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pattern",
                 "reflect": false
             },
             "patternErrorMessage": {
                 "type": "string",
+                "attribute": "pattern-error-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -558,11 +559,11 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pattern-error-message",
                 "reflect": false
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -577,11 +578,11 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false
             },
             "tooltipPosition": {
                 "type": "string",
+                "attribute": "tooltip-position",
                 "mutable": false,
                 "complexType": {
                     "original": "TooltipPosition",
@@ -602,12 +603,12 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip-position",
                 "reflect": false,
                 "defaultValue": "'input'"
             },
             "helpText": {
                 "type": "string",
+                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -622,11 +623,11 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "help-text",
                 "reflect": false
             },
             "modules": {
                 "type": "unknown",
+                "attribute": "modules",
                 "mutable": false,
                 "complexType": {
                     "original": "EditorOptionsType['modules']",
@@ -650,6 +651,7 @@ export class MgInputRichTextEditor {
             },
             "valid": {
                 "type": "boolean",
+                "attribute": "valid",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -664,11 +666,11 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "valid",
                 "reflect": false
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -683,7 +685,6 @@ export class MgInputRichTextEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false
             }
         };
@@ -883,4 +884,3 @@ export class MgInputRichTextEditor {
             }];
     }
 }
-//# sourceMappingURL=mg-input-rich-text-editor.js.map

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

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=mg-input-select.conf.js.map

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { ClassList, allItemsAreString, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { classReadonly, classDisabled, widths } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
+import { defineErrorMessage } from "../mg-input/mg-input.utils";
 /**
  * Check if item is a well configured option
  * @param option - select option
@@ -89,6 +90,22 @@ export class MgInputSelect {
          * Component classes
          */
         this.classCollection = new ClassList(['mg-c-input--select']);
+        /**
+         * Method to get readonly value from value
+         * @returns readonly value
+         */
+        this.getReadonlyValue = () => {
+            var _a;
+            if (allItemsAreString(this.items) && typeof this.value === 'string') {
+                return this.items.find(item => item === this.value);
+            }
+            else if (allItemsAreOptions(this.items)) {
+                return (_a = this.items.find(item => item.value === this.value)) === null || _a === void 0 ? void 0 : _a.title;
+            }
+            else {
+                return null;
+            }
+        };
         /**
          * Handle input event
          */
@@ -117,6 +134,16 @@ export class MgInputSelect {
          * @returns truthy if input.value is an item
          */
         this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
+        /**
+         * Test if component has items
+         * @returns truthy if component has items
+         */
+        this.hasInputValue = () => { 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;
         /**
          * Handle blur event
          */
@@ -136,7 +163,7 @@ export class MgInputSelect {
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || this.input.checkValidity()));
+            this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || (this.hasInputValue() && this.input.checkValidity())));
         };
         /**
          * Set input error message
@@ -149,11 +176,22 @@ export class MgInputSelect {
                 if (errorMessage !== undefined) {
                     this.errorMessage = errorMessage;
                 }
+                else if (!this.hasInputValue()) {
+                    this.errorMessage = this.messages.errors.noValue;
+                }
                 else if (this.input.validity.valueMissing) {
                     this.errorMessage = this.messages.errors.required;
                 }
             }
         };
+        /**
+         * Reset error message
+         */
+        this.resetErrorMessage = () => {
+            this.checkValidity();
+            this.errorMessage = undefined;
+            this.hasDisplayedError = false;
+        };
         /**
          * Render option
          * @param option - to render
@@ -162,16 +200,6 @@ export class MgInputSelect {
         this.renderOption = (option) => (h("option", { key: option.title, value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
     }
     validateValue(newValue) {
-        var _a, _b;
-        if (allItemsAreString(this.items) && typeof newValue === 'string') {
-            this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== undefined ? this.input.value : newValue;
-        }
-        else if (allItemsAreOptions(this.items)) {
-            this.readonlyValue = (_b = this.items.find(item => item.value === newValue)) === null || _b === void 0 ? void 0 : _b.title;
-        }
-        else {
-            this.readonlyValue = null;
-        }
         setTimeout(() => {
             this.checkValidity();
             if (this.hasDisplayedError) {
@@ -181,9 +209,11 @@ export class MgInputSelect {
         this.valueChange.emit(newValue);
     }
     validateItems(newValue) {
+        let resetMessage = false;
         // Empty options
-        if (newValue.length === 0) {
+        if ([undefined, null].includes(newValue) || (Array.isArray(newValue) && newValue.length === 0)) {
             this.options = [];
+            this.displayError();
         }
         // String array
         else if (allItemsAreString(newValue)) {
@@ -191,6 +221,8 @@ export class MgInputSelect {
                 this.valueExist = newValue.includes(this.value);
             }
             this.options = newValue.map(item => ({ title: item, value: item }));
+            // force to reset error when noValueError is displaied
+            resetMessage = this.invalid && this.hasNoValueErrorMessageDisplay();
         }
         // Object array
         else if (allItemsAreOptions(newValue)) {
@@ -203,10 +235,15 @@ export class MgInputSelect {
             else {
                 this.options = newValue;
             }
+            // force to reset error when noValueError is displaied
+            resetMessage = this.invalid && this.hasNoValueErrorMessageDisplay();
         }
         else {
             throw new Error(`<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option. Passed value: ${toString(newValue)}.`);
         }
+        if (resetMessage) {
+            this.resetErrorMessage();
+        }
     }
     watchReadonly(newValue) {
         if (newValue)
@@ -300,9 +337,7 @@ export class MgInputSelect {
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    this.checkValidity();
-                    this.errorMessage = undefined;
-                    this.hasDisplayedError = false;
+                    this.resetErrorMessage();
                     resolve();
                 });
             });
@@ -353,7 +388,8 @@ export class MgInputSelect {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'c755e68979b8cb479f409c0ac99d4fc47d1e4c25', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        const readonlyValue = this.getReadonlyValue();
+        return (h("mg-input", { key: 'b980e7e5bd2e1eac6e0075e61f3a6d8ab993216a', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: defineErrorMessage(this.errorMessage, this.noValueErrorDetail) }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled || !this.hasInputValue(), required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
@@ -375,6 +411,7 @@ export class MgInputSelect {
         return {
             "value": {
                 "type": "any",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "any",
@@ -389,11 +426,11 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "items": {
                 "type": "unknown",
+                "attribute": "items",
                 "mutable": false,
                 "complexType": {
                     "original": "(string | SelectOption)[]",
@@ -417,6 +454,7 @@ export class MgInputSelect {
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -431,11 +469,11 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -450,12 +488,12 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.identifier"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -470,11 +508,11 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "labelOnTop": {
                 "type": "boolean",
+                "attribute": "label-on-top",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -489,12 +527,12 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-on-top",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "labelHide": {
                 "type": "boolean",
+                "attribute": "label-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -509,12 +547,12 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hide",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -529,11 +567,11 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "placeholderHide": {
                 "type": "boolean",
+                "attribute": "placeholder-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -548,12 +586,12 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder-hide",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "placeholderDisabled": {
                 "type": "boolean",
+                "attribute": "placeholder-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -568,12 +606,12 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder-disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -588,12 +626,12 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -608,12 +646,12 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -628,12 +666,12 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "mgWidth": {
                 "type": "any",
+                "attribute": "mg-width",
                 "mutable": false,
                 "complexType": {
                     "original": "Width",
@@ -654,11 +692,11 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "mg-width",
                 "reflect": true
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -673,11 +711,11 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false
             },
             "tooltipPosition": {
                 "type": "string",
+                "attribute": "tooltip-position",
                 "mutable": false,
                 "complexType": {
                     "original": "TooltipPosition",
@@ -698,12 +736,12 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip-position",
                 "reflect": false,
                 "defaultValue": "'input'"
             },
             "helpText": {
                 "type": "string",
+                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -718,11 +756,30 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "help-text",
+                "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",
@@ -737,11 +794,11 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "valid",
                 "reflect": false
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -756,7 +813,6 @@ export class MgInputSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false
             }
         };
@@ -766,8 +822,7 @@ export class MgInputSelect {
             "classCollection": {},
             "errorMessage": {},
             "options": {},
-            "valueExist": {},
-            "readonlyValue": {}
+            "valueExist": {}
         };
     }
     static get events() {
@@ -932,4 +987,3 @@ export class MgInputSelect {
             }];
     }
 }
-//# sourceMappingURL=mg-input-select.js.map