@mgdis/mg-components 6.13.1 → 6.15.0

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js

@@ -382,6 +382,7 @@ export class MgTooltip {
         return {
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -396,12 +397,12 @@ export class MgTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "createID('mg-tooltip')"
             },
             "message": {
                 "type": "string",
+                "attribute": "message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -416,11 +417,11 @@ export class MgTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "message",
                 "reflect": false
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -441,12 +442,12 @@ export class MgTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'bottom'"
             },
             "display": {
                 "type": "boolean",
+                "attribute": "display",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -461,12 +462,12 @@ export class MgTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "display",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -481,7 +482,6 @@ export class MgTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -504,4 +504,3 @@ export class MgTooltip {
             }];
     }
 }
-//# sourceMappingURL=mg-tooltip.js.map

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

@@ -10,4 +10,9 @@ export const classFieldset = 'mg-c-input--fieldset';
 export const classDisabled = 'mg-c-input--disabled';
 export const classReadonly = 'mg-c-input--readonly';
 export const classVerticalList = 'mg-c-input--vertical-list';
-//# sourceMappingURL=mg-input.conf.js.map
+/**
+ * Define cutom errors
+ */
+export const CustomError = {
+    NoValue: 'noValue',
+};

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

@@ -1,6 +1,8 @@
 import { h, Host } from "@stencil/core";
-import { isValideID, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { isObject, 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
  */
@@ -8,6 +10,8 @@ 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';
@@ -29,6 +33,10 @@ export class MgInput {
          * Define if input is required
          */
         this.required = false;
+        /**
+         * Define aria-describedby ids to link with
+         */
+        this.ariaDescribedbyIDs = [];
         /**
          * Element is fieldset
          */
@@ -45,6 +53,44 @@ 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
@@ -82,16 +128,14 @@ export class MgInput {
         }
     }
     watchErrorMessage(newValue) {
-        var _a;
-        if (newValue !== undefined) {
+        if (isValidString(newValue) || isValidErrorMessageType(newValue)) {
             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;
@@ -104,21 +148,28 @@ export class MgInput {
         }
     }
     watchAriaDescribedbyIDs() {
-        if (this.isReadonly)
+        if (this.isReadonly) {
+            return;
+        }
+        else if (typeof this.ariaDescribedbyIDs === 'string') {
+            this.ariaDescribedbyIDs = this.ariaDescribedbyIDs.split(' ');
+            return;
+        }
+        else if (!(Array.isArray(this.ariaDescribedbyIDs) && this.ariaDescribedbyIDs.every(entry => typeof entry === 'string'))) {
+            this.ariaDescribedbyIDs = [];
             return;
+        }
         // a11y IDs
         const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);
         // Help text
         if (this.helpText !== undefined) {
             this.renderHelpText();
-            if (!ariaDescribedbyIDs.has(this.helpTextId))
-                ariaDescribedbyIDs.add(this.helpTextId);
+            ariaDescribedbyIDs.add(this.helpTextId);
         }
         // Error Message
         if (this.errorMessage !== undefined) {
-            this.renderErrorMessage();
-            if (!ariaDescribedbyIDs.has(this.helpTextErrorId))
-                ariaDescribedbyIDs.add(this.helpTextErrorId);
+            this.renderErrorMessageSlot();
+            ariaDescribedbyIDs.add(this.helpTextErrorId);
         }
         this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach(element => {
             if (ariaDescribedbyIDs.size > 0) {
@@ -184,17 +235,41 @@ export class MgInput {
         this.element.appendChild(labelSlotElement);
     }
     /**
-     * Render error message
+     * Render error message element
      */
-    renderErrorMessage() {
-        this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);
-        if (this.errorMessageSlotElement === null) {
+    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.errorMessageSlotElement.setAttribute('slot', this.slotError);
             this.element.appendChild(this.errorMessageSlotElement);
         }
-        this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);
-        this.errorMessageSlotElement.innerHTML = this.errorMessage;
+        this.errorMessageSlotElement.innerHTML = message;
+    }
+    /**
+     * Render error message slot element
+     */
+    renderErrorMessageSlot() {
+        var _a;
+        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);
+            }
+            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;
+        }
     }
     /**
      * Render help text message
@@ -216,6 +291,9 @@ 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();
@@ -240,7 +318,7 @@ export class MgInput {
      */
     render() {
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: 'fb239d1d75a2fe4f2f7796e75fd3949e58c37882', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '0a0b36084782d57db0571b56798d87f8597e1256', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'd89b8b8818b24c0798c1b2dab37faf0d1573dfa1', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '61fd67410d42d49e22f14f9dbff6a20446f2b8bf', class: "mg-c-input__input-container" }, h("div", { key: 'becf5ed690f1d67782c7c3ebd4c1f6ac304d39ed', class: "mg-c-input__input" }, h("slot", { key: '92b902d304351938a538fa8a35cdda0f9ad4d932' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: 'fcec4c1057241286ed5e2791d09b642d454fceed', class: "mg-c-input__help-text" }, h("slot", { key: '8b219b2d34a73371a0edfe6d545e3023cd4b3621', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: '644c00027e4a7ba82eadb6a149c58a451c1768d3', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '612d6bcd7ee465ff671e76b8764044a72459d3d8', name: this.slotError }))))));
+        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 }))))));
     }
     static get is() { return "mg-input"; }
     static get encapsulation() { return "shadow"; }
@@ -258,6 +336,7 @@ export class MgInput {
         return {
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -272,11 +351,11 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -291,11 +370,11 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "labelOnTop": {
                 "type": "boolean",
+                "attribute": "label-on-top",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -310,12 +389,12 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-on-top",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "labelHide": {
                 "type": "boolean",
+                "attribute": "label-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -330,12 +409,12 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hide",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -350,11 +429,11 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false
             },
             "tooltipPosition": {
                 "type": "string",
+                "attribute": "tooltip-position",
                 "mutable": false,
                 "complexType": {
                     "original": "TooltipPosition",
@@ -375,12 +454,12 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip-position",
                 "reflect": false,
                 "defaultValue": "'input'"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -395,17 +474,23 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "errorMessage": {
                 "type": "string",
+                "attribute": "error-message",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "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"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
@@ -415,11 +500,11 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-message",
                 "reflect": false
             },
             "helpText": {
                 "type": "string",
+                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -434,25 +519,27 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "help-text",
                 "reflect": false
             },
             "ariaDescribedbyIDs": {
-                "type": "unknown",
-                "mutable": false,
+                "type": "string",
+                "attribute": "aria-describedby-i-ds",
+                "mutable": true,
                 "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define aria-describedby ids to link with"
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "[]"
             }
         };
     }
@@ -520,4 +607,3 @@ export class MgInput {
             }];
     }
 }
-//# sourceMappingURL=mg-input.js.map

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

@@ -0,0 +1,21 @@
+import { isValidString } from "@mgdis/core-ui-helpers/dist/utils";
+/**
+ * Define error message
+ * @param message - message to display
+ * @param details - message detail to display
+ * @returns formated MgInput["errorMessage"]
+ */
+export const defineErrorMessage = (message, details) => {
+    if (isValidString(message) && isValidString(details)) {
+        return {
+            summary: message,
+            details,
+        };
+    }
+    else if (isValidString(message)) {
+        return message;
+    }
+    else {
+        return undefined;
+    }
+};

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

@@ -4,8 +4,8 @@ import { h } from "@stencil/core";
  * @param props - MgInputCheckboxList Interface Props
  * @returns input template
  */
-export const MgInputCheckboxList = (props) => (h("ul", { class: "mg-c-input__input-group-container", role: "list", "aria-describedby": props.displaySearchInput ? 'search-results' : undefined, "aria-label": props.displaySearchInput ? props.messages.searchResults : undefined, "aria-live": props.displaySearchInput ? 'polite' : undefined, id: props.id }, props.checkboxes.map(input => {
+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 => {
     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)));
 })));
-//# sourceMappingURL=MgInputCheckboxList.js.map