@mgdis/mg-components 6.15.0 → 6.16.0

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

@@ -1,9 +1,8 @@
 import { h } from "@stencil/core";
 import { allItemsAreString, ClassList, getObjectValueFromKey, isValidString, nextTick, Page, Paginate, Cursor, toString, isObject, formatID, } from "@mgdis/core-ui-helpers/dist/utils";
-import { widths, classReadonly, classDisabled, CustomError } from "../mg-input/mg-input.conf";
+import { widths, classReadonly, classDisabled } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 import { Keys } from "../../../../utils/events.utils";
-import { defineErrorMessage } from "../mg-input/mg-input.utils";
 /**
  * Check if object is an item
  * @param item - object to check
@@ -127,12 +126,10 @@ export class MgInputCombobox {
          */
         this.handleFilterInput = () => {
             this.checkValidity();
-            if (this.hasDisplayedError) {
+            if (this.hasDisplayedError)
                 this.setErrorMessage();
-            }
-            if (!this.popoverDisplay) {
+            if (!this.popoverDisplay)
                 this.popoverDisplay = true;
-            }
             // update filter with debounce to prevent filter update overload
             if (!this.debounce) {
                 this.debounce = true;
@@ -178,6 +175,7 @@ export class MgInputCombobox {
          * @param event - keyboard event
          */
         this.handleFilterKeydown = (event) => {
+            var _a;
             if (this.disabled || event.ctrlKey || event.shiftKey)
                 return;
             let guard = false;
@@ -186,10 +184,11 @@ export class MgInputCombobox {
                 case Keys.TAB:
                 case Keys.ENTER:
                     guard = event.key === Keys.ENTER;
-                    const option = this.option || this.options.items.find(this.isCurrentOption);
+                    const option = (_a = this.option) !== null && _a !== void 0 ? _a : this.options.items.find(this.isCurrentOption);
                     // Sets the value to the content of the focused option in the listbox.
-                    if (this.popoverDisplay)
+                    if (this.popoverDisplay) {
                         this.setValue(option);
+                    }
                     // Closes the popover.
                     this.popoverDisplay = false;
                     break;
@@ -310,46 +309,27 @@ export class MgInputCombobox {
             else
                 return '';
         };
-        /**
-         * Test if component has no value error message displayed
-         * @returns truthy if compent display no value error message
-         */
-        this.hasNoValueError = () => this.customError === CustomError.NoValue;
         /**
          * Check if input is valid
          */
         this.checkValidity = () => {
-            // force validity with readonly|disabled states
-            this.setValidity(this.readonly || this.disabled);
+            this.setValidity(this.readonly || this.disabled || this.input.checkValidity());
         };
         /**
          * Set input error message
+         * @param errorMessage - errorMessage override
          */
-        this.setErrorMessage = () => {
+        this.setErrorMessage = (errorMessage) => {
             // Set error message
             this.errorMessage = undefined;
-            if (!this.valid) {
-                // Does have a custom error message
-                if (this.customError !== undefined && !Object.values(CustomError).includes(this.customError)) {
-                    this.errorMessage = this.customError;
-                }
-                // no items
-                else if (this.hasNoValueError()) {
-                    this.errorMessage = this.messages.errors.noValue;
-                }
-                // required
-                else if (this.input.validity.valueMissing) {
-                    this.errorMessage = this.messages.errors.required;
-                }
+            // Does have a custom error message
+            if (!this.valid && errorMessage !== undefined) {
+                this.errorMessage = errorMessage;
+            }
+            // required
+            else if (!this.valid && this.input.validity.valueMissing) {
+                this.errorMessage = this.messages.errors.required;
             }
-        };
-        /**
-         * Reset error message
-         */
-        this.resetErrorMessage = () => {
-            this.checkValidity();
-            this.errorMessage = undefined;
-            this.hasDisplayedError = false;
         };
         /**
          * Get filtered options from `filter` input value
@@ -423,14 +403,14 @@ export class MgInputCombobox {
          */
         this.goToNextPage = () => {
             this.showMore.emit();
-            if (this.fetchurl !== undefined) {
+            if (Boolean(this.fetchurl)) {
                 return this.getOptions(typeof this.page.next === 'string' ? this.page.next : undefined).then(nextPage => {
-                    if (isObject(nextPage)) {
-                        // merge items from current page and next page
-                        const items = [...this.page.items, ...nextPage.items];
-                        // create new options pagination withe merged items
-                        this.options = new Paginate(items, { total: nextPage.total, next: nextPage.next, top: items.length });
-                    }
+                    if (!Boolean(nextPage))
+                        return;
+                    // merge items from current page and next page
+                    const items = [...this.page.items, ...nextPage.items];
+                    // create new options pagination withe merged items
+                    this.options = new Paginate(items, { total: nextPage.total, next: nextPage.next, top: items.length });
                 });
             }
             else {
@@ -447,20 +427,12 @@ export class MgInputCombobox {
          * @returns promise
          */
         this.updatePage = async () => {
-            if (this.fetchurl !== undefined) {
+            if (Boolean(this.fetchurl)) {
                 return this.getOptions().then(page => {
-                    if (isObject(page)) {
-                        // reset current options pagination from API response
-                        this.options = new Paginate(page.items, { total: page.total, next: page.next, top: page.top });
-                        // has items aren't updated with fetch mode we run the noValueError control here
-                        if (this.filter.length === 0 && page.total === 0) {
-                            this.displayError();
-                        }
-                        // force to reset error when noValueError is displaied
-                        else if (this.invalid && this.hasNoValueError()) {
-                            this.resetErrorMessage();
-                        }
-                    }
+                    if (!Boolean(page))
+                        return;
+                    // reset current options pagination from API response
+                    this.options = new Paginate(page.items, { total: page.total, next: page.next, top: page.top });
                 });
             }
             else {
@@ -479,16 +451,14 @@ export class MgInputCombobox {
                 const response = await fetch(updateUrl, this.fetchoptions);
                 if (!response.ok) {
                     this.fetchError.emit(new Error(`${response.status} - ${response.statusText}`));
-                    this.displayError();
                     return;
                 }
                 const json = await response.json();
-                const defaultItems = [];
-                const items = getObjectValueFromKey(json, this.fetchmappings.response.items, defaultItems).map((item) => ({
-                    title: getObjectValueFromKey(item, this.fetchmappings.response.itemTitle, typeof item === 'string' ? item : JSON.stringify(item)),
-                    value: getObjectValueFromKey(item, this.fetchmappings.response.itemValue, item),
+                const items = getObjectValueFromKey(json, this.fetchmappings.response.items).map((item) => ({
+                    title: getObjectValueFromKey(item, this.fetchmappings.response.itemTitle),
+                    value: this.fetchmappings.response.itemValue !== undefined ? getObjectValueFromKey(item, this.fetchmappings.response.itemValue) : item,
                 }));
-                const total = Number(getObjectValueFromKey(json, this.fetchmappings.response.total, defaultItems.length));
+                const total = Number(getObjectValueFromKey(json, this.fetchmappings.response.total, 0));
                 let next = getObjectValueFromKey(json, this.fetchmappings.response.next);
                 if (URL.canParse(updateUrl) && Boolean(next) && !URL.canParse(next)) {
                     const previousUrl = new URL(updateUrl);
@@ -500,7 +470,6 @@ export class MgInputCombobox {
             }
             catch (error) {
                 this.fetchError.emit(error);
-                this.displayError();
             }
         };
     }
@@ -509,35 +478,24 @@ export class MgInputCombobox {
         this.valueChange.emit(newValue);
     }
     watchItems(newValue) {
-        // fetch items
-        if (![undefined, null].includes(this.fetchurl) && [undefined, null].includes(newValue)) {
+        if (Boolean(this.fetchurl) && !Boolean(newValue)) {
             // skip newValue check
             return;
         }
-        // invalid items
-        else if (![undefined, null].includes(this.fetchurl) && Array.isArray(newValue)) {
+        else if (Boolean(this.fetchurl) && Boolean(newValue)) {
             throw new Error(`<mg-input-combobox> prop "items" values cannot be use with "fetchurl" prop defined. Passed value: ${toString(newValue)}.`);
         }
-        // Empty items
-        else if ([undefined, null].includes(newValue) || (Array.isArray(newValue) && newValue.length === 0)) {
+        // Empty options
+        else if (Array.isArray(newValue) && newValue.length === 0) {
             this.options = new Paginate([]);
-            this.displayError();
         }
         // String array
         else if (allItemsAreString(newValue)) {
             this.options = new Paginate(newValue.map(item => ({ title: item, value: item })), { total: newValue.length });
-            // force to reset error when noValueError is displayed
-            if (this.invalid && this.hasNoValueError()) {
-                this.resetErrorMessage();
-            }
         }
         // Object array
         else if (isItems(newValue)) {
             this.options = new Paginate(newValue, { total: newValue.length });
-            // force to reset error when noValueError is displayed
-            if (this.invalid && this.hasNoValueError()) {
-                this.resetErrorMessage();
-            }
         }
         else {
             throw new Error(`<mg-input-combobox> prop "items" values must be the same type, string or Option. Passed value: ${toString(newValue)}.`);
@@ -605,7 +563,7 @@ export class MgInputCombobox {
         }
     }
     watchOptions(newValue) {
-        this.page = newValue.getPage(0, this.filter.length > 0 ? this.optionsFilter : undefined);
+        this.page = newValue.getPage(0, Boolean(this.filter) ? this.optionsFilter : undefined);
     }
     watchFilter(newValue) {
         this.loadingWrapper({ name: 'load-data' });
@@ -671,8 +629,8 @@ export class MgInputCombobox {
             throw new Error('<mg-input-combobox> method "setError()" param "errorMessage" must be a string.');
         }
         else {
-            this.setValidity(valid, errorMessage);
-            this.setErrorMessage();
+            this.setValidity(valid);
+            this.setErrorMessage(valid ? undefined : errorMessage);
             this.hasDisplayedError = this.invalid;
         }
     }
@@ -692,7 +650,9 @@ export class MgInputCombobox {
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    this.resetErrorMessage();
+                    this.checkValidity();
+                    this.errorMessage = undefined;
+                    this.hasDisplayedError = false;
                     resolve();
                 });
             });
@@ -715,34 +675,15 @@ export class MgInputCombobox {
     }
     /**
      * Method to set validity values
-     * @param newValidValue - new valid value. `true` will bypass input check.
-     * @param customErrorMessage - custom error message
+     * @param newValue - valid new value
      */
-    setValidity(newValidValue, customErrorMessage) {
-        var _a;
+    setValidity(newValue) {
         const oldValidValue = this.valid;
-        let valid = newValidValue;
-        // Set custom validity
-        if (!valid && this.input !== undefined) {
-            // custom errror, start by reset it
-            this.customError = undefined;
-            if (isValidString(customErrorMessage)) {
-                this.customError = customErrorMessage;
-            }
-            // no value
-            else if ((this.fetchurl === undefined ? ((_a = this.items) !== null && _a !== void 0 ? _a : []).length : this.page.total) === 0) {
-                this.customError = CustomError.NoValue;
-            }
-            // get new input validity from validity state
-            valid = this.input.checkValidity() && this.customError === undefined;
-        }
-        // set valid/invalid props
-        this.valid = valid;
+        this.valid = newValue;
         this.invalid = !this.valid;
         // We need to send valid event even if it is the same value
-        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue)) {
+        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
             this.inputValid.emit(this.valid);
-        }
     }
     /*************
      * Lifecycle *
@@ -783,19 +724,15 @@ export class MgInputCombobox {
         const listId = `${this.identifier}-list`;
         const readonlyValue = this.getValueTitle();
         const withResetButton = this.value && !this.disabled;
-        const disabled = this.disabled || this.hasNoValueError();
         let popoverContent;
-        if (((_a = this.page) === null || _a === void 0 ? void 0 : _a.items.length) > 0) {
+        if (((_a = this.page) === null || _a === void 0 ? void 0 : _a.items.length) > 0)
             popoverContent = 'list';
-        }
-        else if (((_b = this.page) === null || _b === void 0 ? void 0 : _b.items.length) === 0 && this.filter.length > 0) {
+        else if (((_b = this.page) === null || _b === void 0 ? void 0 : _b.items.length) === 0 && Boolean(this.filter))
             popoverContent = 'notfound';
-        }
-        else if (((_c = this.page) === null || _c === void 0 ? void 0 : _c.items.length) === 0) {
+        else if (((_c = this.page) === null || _c === void 0 ? void 0 : _c.items.length) === 0)
             popoverContent = 'notavailable';
-        }
         let activeDescendant;
-        if (![null, undefined].includes((_d = this.option) === null || _d === void 0 ? void 0 : _d.value)) {
+        if (Boolean((_d = this.option) === null || _d === void 0 ? void 0 : _d.value)) {
             activeDescendant = this.option.value;
         }
         else if (typeof this.value === 'string') {
@@ -804,12 +741,12 @@ export class MgInputCombobox {
         else {
             activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
         }
-        return (h("mg-input", { key: 'fa0977713a1150c39b4f989bbb139e0e345b4c5f', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: defineErrorMessage(this.errorMessage, this.noValueErrorDetail) }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: "bottom-start", display: this.popoverDisplay, "arrow-hide": true, style: {
+        return (h("mg-input", { key: '79e5263cd3b1c0fa0b3f386a547f2bdd48a33b28', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: "bottom-start", display: this.popoverDisplay, "arrow-hide": true, style: {
                 '--mg-c-input-list-width': Boolean((_f = this.input) === null || _f === void 0 ? void 0 : _f.offsetWidth) ? `${this.input.offsetWidth}px` : undefined,
-            }, "data-fallback-placement": "bottom-end", "onDisplay-change": this.handlePopoverDisplay }, h("div", { class: "mg-c-input__input-group-container" }, h("mg-icon", { icon: "magnifying-glass" }), h("input", { type: "text", role: "combobox", class: "mg-c-input__box mg-c-input__box--width", value: this.filter, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: disabled, required: this.required, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.popoverDisplay.toString(), "aria-controls": listId, "aria-invalid": (this.invalid === true).toString(), "aria-activedescendant": formatID(activeDescendant), onInput: this.handleFilterInput, onBlur: this.handleFilterBlur, onFocus: this.handleFilterFocus, onKeyDown: this.handleFilterKeydown, ref: (el) => {
+            }, "data-fallback-placement": "bottom-end", "onDisplay-change": this.handlePopoverDisplay }, h("div", { class: "mg-c-input__input-group-container" }, h("mg-icon", { icon: "magnifying-glass" }), h("input", { type: "text", role: "combobox", class: "mg-c-input__box mg-c-input__box--width", value: this.filter, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.popoverDisplay.toString(), "aria-controls": listId, "aria-invalid": (this.invalid === true).toString(), "aria-activedescendant": formatID(activeDescendant), onInput: this.handleFilterInput, onBlur: this.handleFilterBlur, onFocus: this.handleFilterFocus, onKeyDown: this.handleFilterKeydown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
-            } }), withResetButton ? (h("mg-button", { class: "mg-c-input__box-append mg-c-input__reset", variant: "flat", "is-icon": true, label: this.messages.general.reset, "aria-controls": this.identifier, tabindex: "-1", onClick: this.handleResetButton, disabled: disabled }, h("mg-icon", { icon: "cross" }))) : (h("mg-button", { class: "mg-c-input__box-append", variant: "flat", "is-icon": true, label: this.itemsLabel, tabindex: "-1", disabled: disabled }, h("mg-icon", { icon: `chevron-${this.popoverDisplay ? 'up' : 'down'}` })))), h("div", { slot: "content", class: "mg-c-input__popover-container" }, popoverContent === 'list' && [
+            } }), withResetButton ? (h("mg-button", { class: "mg-c-input__box-append mg-c-input__reset", variant: "flat", "is-icon": true, label: this.messages.general.reset, "aria-controls": this.identifier, tabindex: "-1", onClick: this.handleResetButton }, h("mg-icon", { icon: "cross" }))) : (h("mg-button", { class: "mg-c-input__box-append", variant: "flat", "is-icon": true, label: this.itemsLabel, tabindex: "-1", disabled: this.disabled }, h("mg-icon", { icon: `chevron-${this.popoverDisplay ? 'up' : 'down'}` })))), h("div", { slot: "content", class: "mg-c-input__popover-container" }, popoverContent === 'list' && [
             // eslint-disable-next-line jsx-a11y/role-supports-aria-props
             h("ul", { key: "list", class: "mg-c-input__input-list", role: "listbox", id: listId, "aria-label": this.itemsLabel, "aria-setsize": this.page.total }, this.page.items.map(option => {
                 var _a;
@@ -1268,25 +1205,6 @@ export class MgInputCombobox {
                 "getter": false,
                 "setter": 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",

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

@@ -2,7 +2,6 @@ import { h } from "@stencil/core";
 import { ClassList, allItemsAreString, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { classReadonly, classDisabled, classFieldset } 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
@@ -75,21 +74,11 @@ export class MgInputRadio {
             // reset guard
             this.handlerInProgress = undefined;
         };
-        /**
-         * 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;
         /**
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || (this.hasInputValue() && this.getInvalidElement() === undefined));
+            this.setValidity(this.readonly || this.disabled || this.getInvalidElement() === undefined);
         };
         /**
          * Set input error message
@@ -103,22 +92,11 @@ export class MgInputRadio {
                 if (errorMessage !== undefined) {
                     this.errorMessage = errorMessage;
                 }
-                else if (!this.hasInputValue()) {
-                    this.errorMessage = this.messages.errors.noValue;
-                }
                 else if (invalidElement.validity.valueMissing) {
                     this.errorMessage = this.messages.errors.required;
                 }
             }
         };
-        /**
-         * Reset error message
-         */
-        this.resetErrorMessage = () => {
-            this.checkValidity();
-            this.errorMessage = undefined;
-            this.hasDisplayedError = false;
-        };
         /**
          * get invalid element
          * @returns element
@@ -140,29 +118,17 @@ export class MgInputRadio {
         this.valueChange.emit(newValue);
     }
     validateItems(newValue) {
-        if ([undefined, null].includes(newValue) || (Array.isArray(newValue) && newValue.length === 0)) {
-            this.options = [];
-            this.displayError();
-        }
         // Validate if items have required min length
-        else if (Array.isArray(newValue) && newValue.length < 2) {
+        if (typeof newValue === 'object' && newValue.length < 2) {
             throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${toString(newValue)}.`);
         }
         // String array
         else if (allItemsAreString(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
-            // 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)) {
+        else if (newValue && newValue.every(item => isOption(item))) {
             this.options = newValue;
-            // force to reset error when noValueError is displaied
-            if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
-                this.resetErrorMessage();
-            }
         }
         else {
             throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${toString(newValue)}.`);
@@ -258,7 +224,9 @@ export class MgInputRadio {
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    this.resetErrorMessage();
+                    this.checkValidity();
+                    this.errorMessage = undefined;
+                    this.hasDisplayedError = false;
                     resolve();
                 });
             });
@@ -304,12 +272,10 @@ export class MgInputRadio {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'ecb4efa3a4ccfae5ff56c4a304158c7a03c73153', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: defineErrorMessage(this.errorMessage, this.noValueErrorDetail) }, this.readonly
-            ? this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)
-            : this.options.length > 0 && (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
-                    if (el !== null)
-                        this.inputs[index] = el;
-                } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title))))))));
+        return (h("mg-input", { key: '048aa732e7f8593701c9397e571b97584bc5e37b', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
+                if (el !== null)
+                    this.inputs[index] = el;
+            } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title))))))));
     }
     static get is() { return "mg-input-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -610,25 +576,6 @@ export class MgInputRadio {
                 "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",

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

@@ -2,7 +2,6 @@ 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
@@ -134,16 +133,6 @@ 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
          */
@@ -163,7 +152,7 @@ export class MgInputSelect {
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || (this.hasInputValue() && this.input.checkValidity())));
+            this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || this.input.checkValidity()));
         };
         /**
          * Set input error message
@@ -176,22 +165,11 @@ 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
@@ -209,11 +187,9 @@ export class MgInputSelect {
         this.valueChange.emit(newValue);
     }
     validateItems(newValue) {
-        let resetMessage = false;
         // Empty options
-        if ([undefined, null].includes(newValue) || (Array.isArray(newValue) && newValue.length === 0)) {
+        if (newValue.length === 0) {
             this.options = [];
-            this.displayError();
         }
         // String array
         else if (allItemsAreString(newValue)) {
@@ -221,8 +197,6 @@ 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)) {
@@ -235,15 +209,10 @@ 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)
@@ -337,7 +306,9 @@ export class MgInputSelect {
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    this.resetErrorMessage();
+                    this.checkValidity();
+                    this.errorMessage = undefined;
+                    this.hasDisplayedError = false;
                     resolve();
                 });
             });
@@ -389,7 +360,7 @@ export class MgInputSelect {
      */
     render() {
         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) => {
+        return (h("mg-input", { key: '1394827503d3f2dd71efc6efa389ac707573d2ec', 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: this.errorMessage }, 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, 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
@@ -758,25 +729,6 @@ export class MgInputSelect {
                 "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",