@mgdis/mg-components 6.15.0 → 6.16.0

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

@@ -1,8 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { isObject, isValideID, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { isValideID, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { tooltipPositions, classFieldset, classReadonly, classDisabled, classVerticalList } from "./mg-input.conf";
-import { initLocales } from "../../../../locales";
-const isValidErrorMessageType = (msg) => isObject(msg) && ['summary', 'details'].every(key => typeof msg[key] === 'string');
 /**
  * @slot - Input content
  */
@@ -10,8 +8,6 @@ export class MgInput {
     constructor() {
         this.slotLabel = 'label';
         this.slotError = 'error';
-        this.slotSummary = 'summary';
-        this.slotDetails = 'details';
         this.slotHelpText = 'help-text';
         // style
         this.classInput = 'mg-c-input';
@@ -53,44 +49,6 @@ export class MgInput {
          * Element is disabled
          */
         this.isVerticalList = false;
-        /**
-         * Render error message details element
-         */
-        this.renderErrorDetailsMessage = (message) => {
-            var _a, _b;
-            // remove error slot if it is NOT a MG-DETAIL
-            if (((_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.nodeName) !== 'MG-DETAILS') {
-                (_b = this.errorMessageSlotElement) === null || _b === void 0 ? void 0 : _b.remove();
-            }
-            // create OR update error summary
-            let summarySlotElement = this.element.querySelector(`[slot=${this.slotError}] [slot=${this.slotSummary}]`);
-            if (summarySlotElement === null) {
-                summarySlotElement = document.createElement('span');
-                summarySlotElement.setAttribute('slot', this.slotSummary);
-            }
-            summarySlotElement.innerHTML = message.summary;
-            // create OR update error details
-            let detailsSlotElement = this.element.querySelector(`[slot=${this.slotError}] [slot=${this.slotDetails}]`);
-            if (detailsSlotElement === null) {
-                detailsSlotElement = document.createElement('p');
-                detailsSlotElement.setAttribute('slot', this.slotDetails);
-                detailsSlotElement.classList.add('mg-c-input__error-details');
-            }
-            detailsSlotElement.innerHTML = message.details;
-            // create error mg-details
-            let mgDetails = this.element.querySelector(`mg-details[slot=${this.slotError}]`);
-            if (mgDetails === null) {
-                mgDetails = document.createElement('mg-details');
-                mgDetails.classList.add('mg-c-input__error');
-                mgDetails.toggleClosed = this.messages.details.toggleClosed;
-                mgDetails.toggleOpened = this.messages.details.toggleOpened;
-                mgDetails.hideSummary = true;
-                mgDetails.appendChild(summarySlotElement);
-                mgDetails.appendChild(detailsSlotElement);
-                this.element.appendChild(mgDetails);
-            }
-            this.errorMessageSlotElement = mgDetails;
-        };
         /**
          * Get tooltip node
          * @returns mg-tooltip
@@ -128,14 +86,16 @@ export class MgInput {
         }
     }
     watchErrorMessage(newValue) {
-        if (isValidString(newValue) || isValidErrorMessageType(newValue)) {
+        var _a;
+        if (newValue !== undefined) {
             this.element.classList.add(this.classHasError);
+            this.renderErrorMessage();
         }
         else {
             this.element.classList.remove(this.classHasError);
+            (_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.remove();
+            this.errorMessageSlotElement = undefined;
         }
-        // update error message slot
-        this.renderErrorMessageSlot();
     }
     watchHelpText(newValue) {
         var _a;
@@ -164,12 +124,14 @@ export class MgInput {
         // Help text
         if (this.helpText !== undefined) {
             this.renderHelpText();
-            ariaDescribedbyIDs.add(this.helpTextId);
+            if (!ariaDescribedbyIDs.has(this.helpTextId))
+                ariaDescribedbyIDs.add(this.helpTextId);
         }
         // Error Message
         if (this.errorMessage !== undefined) {
-            this.renderErrorMessageSlot();
-            ariaDescribedbyIDs.add(this.helpTextErrorId);
+            this.renderErrorMessage();
+            if (!ariaDescribedbyIDs.has(this.helpTextErrorId))
+                ariaDescribedbyIDs.add(this.helpTextErrorId);
         }
         this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach(element => {
             if (ariaDescribedbyIDs.size > 0) {
@@ -235,41 +197,17 @@ export class MgInput {
         this.element.appendChild(labelSlotElement);
     }
     /**
-     * Render error message element
+     * Render error message
      */
-    renderErrorStringMessage(message) {
-        var _a;
-        // remove error slot if it is a MG-DETAIL
-        if (((_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.nodeName) === 'MG-DETAILS') {
-            this.errorMessageSlotElement.remove();
-        }
-        // create element if it does NOT exist
-        else if (this.errorMessageSlotElement === null) {
-            this.errorMessageSlotElement = document.createElement('div');
-            this.element.appendChild(this.errorMessageSlotElement);
-        }
-        this.errorMessageSlotElement.innerHTML = message;
-    }
-    /**
-     * Render error message slot element
-     */
-    renderErrorMessageSlot() {
-        var _a;
+    renderErrorMessage() {
         this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);
-        if (this.errorMessage !== undefined) {
-            if (typeof this.errorMessage === 'string') {
-                this.renderErrorStringMessage(this.errorMessage);
-            }
-            else {
-                this.renderErrorDetailsMessage(this.errorMessage);
-            }
+        if (this.errorMessageSlotElement === null) {
+            this.errorMessageSlotElement = document.createElement('div');
             this.errorMessageSlotElement.setAttribute('slot', this.slotError);
-            this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);
-        }
-        else {
-            (_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.remove();
-            this.errorMessageSlotElement = undefined;
+            this.element.appendChild(this.errorMessageSlotElement);
         }
+        this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);
+        this.errorMessageSlotElement.innerHTML = this.errorMessage;
     }
     /**
      * Render help text message
@@ -291,9 +229,6 @@ export class MgInput {
      * Check if component props are well configured on init
      */
     componentWillLoad() {
-        // Get locales
-        this.messages = initLocales(this.element).messages;
-        // Validate
         this.watchIdentifier(this.identifier);
         this.watchLabel();
         this.watchClass();
@@ -318,7 +253,7 @@ export class MgInput {
      */
     render() {
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: '0641f834a725708ce254e82a86c3a75f1c183c0a', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '7d96f125694996407b8cecd9491366c39fd0d05f', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: '43720fcecc55de1cae61607b2ae2c3b224e18dbd', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '1d9c6fc50758fd2b87d9a15b9983f6e944a9851e', class: "mg-c-input__input-container" }, h("div", { key: '983153a1e0d5777d11cc61af47a4231f093d7e9e', class: "mg-c-input__input" }, h("slot", { key: 'e3ae53d7484b193538c7c5ed68d02ddf3428eff4' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: '2981238a76e52f4a9c5da6465934bb4edd653e96', class: "mg-c-input__help-text" }, h("slot", { key: 'feee3da8096260e11419b82cb2d281c8d73541d1', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: '1d5a709cfe3c9a1f7da68a260dd480f189ee5301', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '4f9f9545ffbdc7c53b77c5153daaf9b15b360fd7', name: this.slotError }))))));
+        return (h(Host, { key: '7c4c22aaa8f8d250eafa9159a103a11e637b0cca', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '2215e7b2d96e08507579a39d8e05b3e8a3d901fb', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'a4dbf4e36dd3ae5437d6dcb05d807f4faa0924b7', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '8e382a4857f469a9d6f77cad613183798df4d1e1', class: "mg-c-input__input-container" }, h("div", { key: 'f9897f90d44aab19614d4d40d77a8eb270c92847', class: "mg-c-input__input" }, h("slot", { key: 'c8d809d4ff0d0e660849825f016f9267da3a2d7e' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: 'cebd6c083d088aebcdae6f032c6cdcf2387c3e27', class: "mg-c-input__help-text" }, h("slot", { key: '923fcc78b309d197e32522052b297ef0f58b1495', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: 'e706bff54ce21191a8c0940c60f6e99a91cfb9ec', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '6524debd3640df7b5e73ef4aa4415569eef1ecd8', name: this.slotError }))))));
     }
     static get is() { return "mg-input"; }
     static get encapsulation() { return "shadow"; }
@@ -482,15 +417,9 @@ export class MgInput {
                 "attribute": "error-message",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | ErrorMessageDetailsType",
-                    "resolved": "string | { summary: string; details: string; }",
-                    "references": {
-                        "ErrorMessageDetailsType": {
-                            "location": "import",
-                            "path": "./mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::ErrorMessageDetailsType"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,

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

@@ -4,8 +4,7 @@ import { h } from "@stencil/core";
  * @param props - MgInputCheckboxList Interface Props
  * @returns input template
  */
-export const MgInputCheckboxList = (props) => Array.isArray(props.checkboxes) &&
-    props.checkboxes.length > 0 && (h("ul", { class: "mg-c-input__input-group-container", role: "list", "aria-labelledby": props.labelledby, id: props.id }, props.checkboxes.map(input => {
+export const MgInputCheckboxList = (props) => (h("ul", { class: "mg-c-input__input-group-container", role: "list", "aria-labelledby": props.labelledby, id: props.id }, props.checkboxes.map(input => {
     var _a, _b;
     return (h("li", { key: input._id, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled } }, h("input", { type: "checkbox", id: input._id, name: props.name, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a.toString(), checked: Boolean(input.value), required: input.required, "aria-invalid": ((_b = props.invalid) === null || _b === void 0 ? void 0 : _b.toString()) || 'false', disabled: props.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }), h("label", { htmlFor: input._id }, input.title)));
 })));

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

@@ -4,7 +4,6 @@ import { checkboxTypes, SectionKind } from "./mg-input-checkbox.conf";
 import { MgInputCheckboxList } from "./MgInputCheckboxList";
 import { classDisabled, classReadonly, classFieldset, classVerticalList } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
-import { defineErrorMessage } from "../mg-input/mg-input.utils";
 import { Status } from "../../mg-tabs/mg-tabs.conf";
 /**
  * type CheckboxItem validation function
@@ -198,18 +197,8 @@ export class MgInputCheckbox {
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || (this.hasInputValue() && !this.hasInvalidInput() && this.validateRequired()));
+            this.setValidity(this.readonly || this.disabled || (!this.hasInvalidInput() && this.validateRequired()));
         };
-        /**
-         * Test if component has items
-         * @returns truthy if component has items
-         */
-        this.hasInputValue = () => { var _a; return ((_a = this.value) === 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 button text locale key
          */
@@ -251,25 +240,12 @@ export class MgInputCheckbox {
             // Set error message
             this.errorMessage = undefined;
             if (displayError && !this.valid) {
-                if (errorMessage !== undefined) {
+                if (errorMessage !== undefined)
                     this.errorMessage = errorMessage;
-                }
-                else if (!this.hasInputValue()) {
-                    this.errorMessage = this.messages.errors.noValue;
-                }
-                else if (!this.validateRequired()) {
+                else if (!this.validateRequired())
                     this.errorMessage = this.messages.errors.required;
-                }
             }
         };
-        /**
-         * Reset error message
-         */
-        this.resetErrorMessage = () => {
-            this.checkValidity();
-            this.errorMessage = undefined;
-            this.hasDisplayedError = false;
-        };
         /**
          * Method to get mg-popover identifier
          * @returns MgPopover identifier
@@ -298,14 +274,7 @@ export class MgInputCheckbox {
          * @returns The rendered readonly value.
          */
         this.renderReadonly = (readonlyValue) => {
-            if (Array.isArray(readonlyValue)) {
-                if (this.inputVerticalList) {
-                    return (h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map(value => (h("li", { key: value }, h("b", null, value))))));
-                }
-                else {
-                    return h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', '));
-                }
-            }
+            return this.inputVerticalList ? (h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map(value => (h("li", { key: value }, h("b", null, value)))))) : (h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
         };
         /**
          * Renders the MgInputCheckboxList component.
@@ -314,16 +283,9 @@ export class MgInputCheckbox {
         this.renderMgInputCheckboxList = () => (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, id: this.checkboxesId, disabled: this.disabled, name: this.name, invalid: this.invalid }));
     }
     validateValue(newValue) {
-        if ([null, undefined].includes(newValue) || newValue.length === 0) {
-            this.displayError();
-        }
-        else if (newValue.length > 0 && isCheckboxItems(newValue)) {
+        if (isCheckboxItems(newValue)) {
             this.checkboxItems = newValue.map((item, index) => (Object.assign(Object.assign({}, item), { _id: `${this.identifier}_${index}`, _handleInput: this.handleInput.bind(this), _handleBlur: this.handleBlur.bind(this), _handleKeydown: this.handleKeydown.bind(this) })));
             this.valueChange.emit(newValue);
-            // force to reset error when noValueError is displaied
-            if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
-                this.resetErrorMessage();
-            }
         }
         else {
             throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${toString(newValue)}.`);
@@ -467,7 +429,9 @@ export class MgInputCheckbox {
             // - 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();
                 });
             });
@@ -590,9 +554,8 @@ export class MgInputCheckbox {
      * @returns HTML Element
      */
     render() {
-        var _a;
         let inputContent;
-        const readonlyValue = ((_a = this.value) !== null && _a !== void 0 ? _a : []).filter(({ value }) => value).map(({ title }) => title);
+        const readonlyValue = this.value.filter(({ value }) => value).map(({ title }) => title);
         if (this.readonly) {
             inputContent = this.renderReadonly(readonlyValue);
         }
@@ -602,7 +565,7 @@ export class MgInputCheckbox {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: '6b1a72d80387da057c0d20367e141c90ff921889', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? defineErrorMessage(this.errorMessage, this.noValueErrorDetail) : undefined }, inputContent));
+        return (h("mg-input", { key: '84d13ac702497773013daa72357e4d1dcf4ebb30', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
     }
     static get is() { return "mg-input-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -977,7 +940,7 @@ export class MgInputCheckbox {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Overwrite default \"edit\" button message"
@@ -996,7 +959,7 @@ export class MgInputCheckbox {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Overwrite default \"show\" button message"
@@ -1015,7 +978,7 @@ export class MgInputCheckbox {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Overwrite default \"select\" button message"
@@ -1023,25 +986,6 @@ export class MgInputCheckbox {
                 "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
             }
         };
     }