@mgdis/mg-components 6.16.0 → 6.18.0

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { isValideID, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
-import { tooltipPositions, classFieldset, classReadonly, classDisabled, classVerticalList } from "./mg-input.conf";
+import { tooltipPositions, classFieldset, classReadonly, classDisabled, classVerticalList, labelHeadings } from "./mg-input.conf";
 /**
  * @slot - Input content
  */
@@ -13,6 +13,9 @@ export class MgInput {
         this.classInput = 'mg-c-input';
         this.classHasError = 'mg-c-input--has-error';
         this.classLabelOnTop = 'mg-c-input--label-on-top';
+        this.classHasHeading = 'mg-c-input--has-heading';
+        this.classLabelBorderDisplay = 'mg-c-input--label-border-display';
+        this.classInputsOnBottom = 'mg-c-input--inputs-on-bottom';
         /**
          * Define if label is displayed on top
          */
@@ -21,6 +24,11 @@ export class MgInput {
          * Define if label is visible
          */
         this.labelHide = false;
+        /**
+         * Define if label border is visible
+         * You must pair this mode with `labelOnTop`and `fieldset` class
+         */
+        this.labelBorderDisplay = false;
         /**
          * Define tooltip position
          */
@@ -29,6 +37,10 @@ export class MgInput {
          * Define if input is required
          */
         this.required = false;
+        /**
+         * Display inputs after help-text and error message
+         */
+        this.inputsOnBottom = false;
         /**
          * Define aria-describedby ids to link with
          */
@@ -49,11 +61,44 @@ export class MgInput {
          * Element is disabled
          */
         this.isVerticalList = false;
+        /************
+         * Methods *
+         ************/
+        /**
+         * Update element aria-describedby
+         * @param element - element to update
+         * @param ariaDescribedbyIDs - ariaDescribedbyIDs references
+         */
+        this.updateElementAriaDescribedby = (element, ariaDescribedbyIDs) => {
+            if (ariaDescribedbyIDs.size > 0) {
+                element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));
+            }
+            else {
+                element.removeAttribute('aria-describedby');
+            }
+        };
         /**
          * Get tooltip node
          * @returns mg-tooltip
          */
         this.renderTooltip = () => (h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, h("mg-icon", { icon: "info-circle" })));
+        /**
+         * Get input container element
+         * @returns ordered elements
+         */
+        this.inputContainerElements = () => {
+            const elements = [
+                this.helptextMessageSlotElement && (h("div", { class: "mg-c-input__help-text" }, h("slot", { name: this.slotHelpText }))),
+                !this.isDisabled && this.errorMessage && (h("div", { class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { name: this.slotError }))),
+            ];
+            const inputSlot = (h("div", { class: "mg-c-input__input" }, h("slot", null), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()));
+            if (this.inputsOnBottom) {
+                return [...elements, inputSlot];
+            }
+            else {
+                return [inputSlot, ...elements];
+            }
+        };
     }
     watchIdentifier(newValue) {
         if (!isValidString(newValue)) {
@@ -80,6 +125,26 @@ export class MgInput {
             throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
         }
     }
+    watchlabelHeading(newValue) {
+        if (this.isFieldset && this.labelOnTop && labelHeadings.includes(newValue)) {
+            this.element.classList.add(this.classHasHeading);
+        }
+        else {
+            if ((!this.isFieldset && newValue !== undefined) || typeof newValue === 'string') {
+                throw new Error(`<mg-input> prop "labelHeading" must be used with a fieldset and be one of: ${labelHeadings.join(', ')}. Passed value: ${toString(newValue)}.`);
+            }
+            this.labelHeading = undefined;
+            this.element.classList.remove(this.classHasHeading);
+        }
+    }
+    watchLabelBorderDisplay(newValue) {
+        if (this.isFieldset && this.labelOnTop && newValue) {
+            this.element.classList.add(this.classLabelBorderDisplay);
+        }
+        else {
+            this.element.classList.remove(this.classLabelBorderDisplay);
+        }
+    }
     watchTooltipPosition(newValue) {
         if (!tooltipPositions.includes(newValue)) {
             throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${toString(newValue)}.`);
@@ -99,7 +164,7 @@ export class MgInput {
     }
     watchHelpText(newValue) {
         var _a;
-        if (newValue && !this.isReadonly) {
+        if (isValidString(newValue) && !this.isReadonly) {
             this.renderHelpText();
         }
         else {
@@ -107,6 +172,14 @@ export class MgInput {
             this.helptextMessageSlotElement = undefined;
         }
     }
+    watchInputsOnBottom(newValue) {
+        if (newValue) {
+            this.element.classList.add(this.classInputsOnBottom);
+        }
+        else {
+            this.element.classList.remove(this.classInputsOnBottom);
+        }
+    }
     watchAriaDescribedbyIDs() {
         if (this.isReadonly) {
             return;
@@ -122,23 +195,26 @@ export class MgInput {
         // a11y IDs
         const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);
         // Help text
-        if (this.helpText !== undefined) {
+        if (isValidString(this.helpText)) {
             this.renderHelpText();
             if (!ariaDescribedbyIDs.has(this.helpTextId))
                 ariaDescribedbyIDs.add(this.helpTextId);
         }
         // Error Message
-        if (this.errorMessage !== undefined) {
+        if (isValidString(this.errorMessage)) {
             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) {
-                element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));
-            }
-            else {
-                element.removeAttribute('aria-describedby');
+        const inputs = this.element.querySelectorAll('input,select,textarea,[role="switch"]');
+        inputs.forEach((element) => {
+            this.updateElementAriaDescribedby(element, ariaDescribedbyIDs);
+        });
+        // use timeout to await for legend render for componentWillLoad hook
+        setTimeout(() => {
+            const legend = this.element.querySelector('legend');
+            if (legend !== null) {
+                this.updateElementAriaDescribedby(legend, ariaDescribedbyIDs);
             }
         });
     }
@@ -168,9 +244,6 @@ export class MgInput {
             this.renderLabel();
         }
     }
-    /************
-     * Methods *
-     ************/
     /**
      * Render input label
      */
@@ -190,11 +263,21 @@ export class MgInput {
             labelSlotElement.setAttribute(attr, val);
         });
         // create label element
-        const label = document.createElement('span');
-        label.classList.add('mg-c-input-title__text');
-        label.textContent = this.label;
-        labelSlotElement.appendChild(label);
+        if (labelHeadings.includes(this.labelHeading)) {
+            let label = this.element.shadowRoot.querySelector(this.labelHeading);
+            if (label === null) {
+                label = document.createElement(this.labelHeading);
+                label.classList.add('mg-c-input-title__text');
+                labelSlotElement.appendChild(label);
+            }
+            label.textContent = this.label;
+        }
+        else {
+            labelSlotElement.textContent = this.label;
+        }
         this.element.appendChild(labelSlotElement);
+        // update aria-describedby
+        this.watchAriaDescribedbyIDs();
     }
     /**
      * Render error message
@@ -237,6 +320,9 @@ export class MgInput {
         this.watchTooltipPosition(this.tooltipPosition);
         this.watchHelpText(this.helpText);
         this.watchErrorMessage(this.errorMessage);
+        this.watchInputsOnBottom(this.inputsOnBottom);
+        this.watchlabelHeading(this.labelHeading);
+        this.watchLabelBorderDisplay(this.labelBorderDisplay);
     }
     /**
      * Validate slots
@@ -253,7 +339,7 @@ export class MgInput {
      */
     render() {
         const isGroup = this.isFieldset && !this.isReadonly;
-        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 }))))));
+        return (h(Host, { key: 'fbab18280a709407c83f324127e8de6cbb05fe7c', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: 'ac0924c244b9fa87d02e659a5710ee93d12a202f', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'c825af33ba0a6c209d02d6487422347f7d8acfed', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '805e1eedfdea132f3ea4fd11da761810a3d7c939', class: "mg-c-input__input-container" }, this.inputContainerElements())));
     }
     static get is() { return "mg-input"; }
     static get encapsulation() { return "shadow"; }
@@ -271,7 +357,6 @@ export class MgInput {
         return {
             "identifier": {
                 "type": "string",
-                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -286,11 +371,11 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "identifier"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -305,11 +390,11 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "labelOnTop": {
                 "type": "boolean",
-                "attribute": "label-on-top",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -325,11 +410,11 @@ export class MgInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-on-top",
                 "defaultValue": "false"
             },
             "labelHide": {
                 "type": "boolean",
-                "attribute": "label-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -345,11 +430,56 @@ export class MgInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-hide",
+                "defaultValue": "false"
+            },
+            "labelHeading": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "labelHeading",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {
+                        "labelHeading": {
+                            "location": "import",
+                            "path": "./mg-input.conf",
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::labelHeading"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define label heading, use to define label with associated semantic\nYou must pair this mode with `labelOnTop`and `fieldset` class"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-heading"
+            },
+            "labelBorderDisplay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if label border is visible\nYou must pair this mode with `labelOnTop`and `fieldset` class"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-border-display",
                 "defaultValue": "false"
             },
             "tooltip": {
                 "type": "string",
-                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -364,11 +494,11 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "tooltip"
             },
             "tooltipPosition": {
                 "type": "string",
-                "attribute": "tooltip-position",
                 "mutable": false,
                 "complexType": {
                     "original": "TooltipPosition",
@@ -390,11 +520,11 @@ export class MgInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "tooltip-position",
                 "defaultValue": "'input'"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -410,11 +540,11 @@ export class MgInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "errorMessage": {
                 "type": "string",
-                "attribute": "error-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -429,11 +559,11 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "error-message"
             },
             "helpText": {
                 "type": "string",
-                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -448,11 +578,31 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "help-text"
+            },
+            "inputsOnBottom": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Display inputs after help-text and error message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inputs-on-bottom",
+                "defaultValue": "false"
             },
             "ariaDescribedbyIDs": {
                 "type": "string",
-                "attribute": "aria-describedby-i-ds",
                 "mutable": true,
                 "complexType": {
                     "original": "string[] | string",
@@ -468,6 +618,7 @@ export class MgInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "aria-describedby-i-ds",
                 "defaultValue": "[]"
             }
         };
@@ -494,6 +645,12 @@ export class MgInput {
             }, {
                 "propName": "labelOnTop",
                 "methodName": "watchLabelConfig"
+            }, {
+                "propName": "labelHeading",
+                "methodName": "watchlabelHeading"
+            }, {
+                "propName": "labelBorderDisplay",
+                "methodName": "watchLabelBorderDisplay"
             }, {
                 "propName": "tooltipPosition",
                 "methodName": "watchTooltipPosition"
@@ -503,6 +660,9 @@ export class MgInput {
             }, {
                 "propName": "helpText",
                 "methodName": "watchHelpText"
+            }, {
+                "propName": "inputsOnBottom",
+                "methodName": "watchInputsOnBottom"
             }, {
                 "propName": "identifier",
                 "methodName": "watchAriaDescribedbyIDs"

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

@@ -76,7 +76,7 @@ export class MgInputCheckboxPaginated {
     render() {
         const listId = formatID(this.messages.label);
         const tabId = 'tab-info';
-        return (h(Host, { key: '8e58037e78fcd7990bbd681053758b0ec4d0c4e0' }, h("slot", { key: 'c64e9c8f65a526b2289d3663fff64df02a282c96', name: "header-action" }), h("div", { key: 'c5953bb7e970384b231865d7fa4708fe2da4b407', class: "mg-c-input__tabs-content" }, h("p", { key: 'c0899cb7e7a6dea282f05aacf0fb05acd60a9d20', id: tabId, class: { 'mg-c-input__popover-info': true, 'mg-u-visually-hidden': this.items.length !== 0 }, "aria-live": this.items.length !== 0 ? 'polite' : undefined }, this.items.length === 0 ? this.messages.noValue : this.messages.values.replace('{count}', this.items.length.toString())), this.items.length > 0 && (h(MgInputCheckboxList, { key: '0bb1b4160d75b00d3fb5d9c08f3a560a16105e57', checkboxes: this.items, labelledby: tabId, id: listId, disabled: this.disabled, name: this.name, invalid: this.invalid })), this.hasNext() && (h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, "full-width": true, onClick: this.handleLoadMore, "aria-controls": listId }, h("mg-icon", { key: 'fd1560d7254f437f284925427130f69539b5fd3b', icon: "chevron-down" }), this.messages.showMore)))));
+        return (h(Host, { key: '233ab4fca3f4a3121bc60650ac2f8ae06d47e6e5' }, h("slot", { key: '7d1af8c712928c06953743fc5c182e51d9a6256b', name: "header-action" }), h("div", { key: '95641bd218e36422a6b5b4ead8dd5498e8ac5fa4', class: "mg-c-input__tabs-content" }, h("p", { key: '34814dd1afc9f871cd032500b931e692d63cbd25', id: tabId, class: { 'mg-c-input__popover-info': true, 'mg-u-visually-hidden': this.items.length !== 0 }, "aria-live": this.items.length !== 0 ? 'polite' : undefined }, this.items.length === 0 ? this.messages.noValue : this.messages.values.replace('{count}', this.items.length.toString())), this.items.length > 0 && (h(MgInputCheckboxList, { key: '621077f291a401737157ad0cd9b9348537ef8bdc', checkboxes: this.items, labelledby: tabId, id: listId, disabled: this.disabled, name: this.name, invalid: this.invalid })), this.hasNext() && (h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, "full-width": true, onClick: this.handleLoadMore, "aria-controls": listId }, h("mg-icon", { key: 'cb00bbeb1575475b184cc9623db6c4cefc56c26a', icon: "chevron-down" }), this.messages.showMore)))));
     }
     static get is() { return "mg-input-checkbox-paginated"; }
     static get encapsulation() { return "scoped"; }
@@ -84,7 +84,6 @@ export class MgInputCheckboxPaginated {
         return {
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -100,11 +99,11 @@ export class MgInputCheckboxPaginated {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -120,11 +119,11 @@ export class MgInputCheckboxPaginated {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -139,11 +138,11 @@ export class MgInputCheckboxPaginated {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "name"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -158,11 +157,11 @@ export class MgInputCheckboxPaginated {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "invalid"
             },
             "checkboxes": {
                 "type": "unknown",
-                "attribute": "checkboxes",
                 "mutable": false,
                 "complexType": {
                     "original": "CheckboxItem[]",
@@ -186,7 +185,6 @@ export class MgInputCheckboxPaginated {
             },
             "messages": {
                 "type": "unknown",
-                "attribute": "messages",
                 "mutable": false,
                 "complexType": {
                     "original": "Record<string, string>",