@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -1,365 +1,380 @@
 import { h, Host } from "@stencil/core";
 import { variants } from "./mg-button.conf";
-import { ClassList, isValidString } from "../../../utils/components.utils";
+import { ClassList, isValidString, nextTick } from "../../../utils/components.utils";
 export class MgButton {
-  constructor() {
-    /************
-     * Internal *
-     ************/
-    this.onClickElementFn = null;
-    this.classDisabled = 'mg-c-button--disabled';
-    this.classLoading = 'mg-c-button--loading';
-    this.classFullWidth = 'mg-c-button--full-width';
+    constructor() {
+        /************
+         * Internal *
+         ************/
+        this.onClickElementFn = null;
+        this.classDisabled = 'mg-c-button--disabled';
+        this.classLoading = 'mg-c-button--loading';
+        this.classFullWidth = 'mg-c-button--full-width';
+        /**
+         * Trigger actions onClick event
+         * @param event - click event
+         */
+        this.handleClick = (event) => {
+            if (this.disabled)
+                event.stopPropagation();
+            // Used to prevent multi-click.
+            else if (this.disableOnClick) {
+                this.loading = true;
+                this.disabled = true;
+            }
+        };
+        /**
+         * Handle onKeydown event
+         * @param event - keyboard event
+         */
+        this.handleKeydown = (event) => {
+            if (!this.disabled && event.key === ' ') {
+                event.preventDefault();
+            }
+            else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {
+                event.preventDefault();
+                this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+            }
+        };
+        /**
+         * Handle onKeyup event
+         * @param event - keyboard event
+         */
+        this.handleKeyup = (event) => {
+            if (!this.disabled && event.key === ' ') {
+                event.preventDefault();
+                this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+            }
+        };
+        this.variant = variants[0];
+        this.identifier = undefined;
+        this.label = undefined;
+        this.type = undefined;
+        this.fullWidth = false;
+        this.form = undefined;
+        this.disabled = undefined;
+        this.isIcon = false;
+        this.disableOnClick = false;
+        this.loading = false;
+        this.classCollection = new ClassList(['mg-c-button']);
+    }
+    validateVariant(newValue, oldValue) {
+        if (!variants.includes(newValue)) {
+            throw new Error(`<mg-button> prop "variant" must be one of: ${variants.join(', ')}`);
+        }
+        else {
+            if (oldValue !== undefined) {
+                this.classCollection.delete(`mg-c-button--${oldValue}`);
+            }
+            this.classCollection.add(`mg-c-button--${newValue}`);
+        }
+    }
+    validateFullWidth(newValue) {
+        if (newValue && this.isIcon) {
+            throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');
+        }
+        else if (newValue) {
+            this.classCollection.add(this.classFullWidth);
+        }
+        else {
+            this.classCollection.delete(this.classFullWidth);
+        }
+    }
+    disabledHandler(isDisabled) {
+        // Remove loading when enable
+        // Will be set back onclick
+        if (!isDisabled && this.disableOnClick) {
+            this.loading = false;
+        }
+        // Manage if onclick
+        this.element.onclick = isDisabled ? undefined : this.onClickElementFn;
+        // apply style
+        if (isDisabled) {
+            this.classCollection.add(this.classDisabled);
+        }
+        else {
+            this.classCollection.delete(this.classDisabled);
+        }
+        // emit value update
+        this.disabledChange.emit(isDisabled);
+    }
+    loadingHandler(newValue) {
+        // we add loading style if it newvalue is true else we remove it
+        if (newValue) {
+            this.classCollection.add(this.classLoading);
+        }
+        else {
+            this.classCollection.delete(this.classLoading);
+        }
+    }
     /**
-     * Trigger actions onClick event
-     * @param event - click event
+     * Check if props are well configured on init
      */
-    this.handleClick = (event) => {
-      if (this.disabled)
-        event.stopPropagation();
-      // Used to prevent multi-click.
-      else if (this.disableOnClick) {
-        this.loading = true;
-        this.disabled = true;
-      }
-    };
+    componentWillLoad() {
+        this.validateVariant(this.variant);
+        this.validateFullWidth(this.fullWidth);
+        if (this.isIcon) {
+            this.classCollection.add(`mg-c-button--icon`);
+            if (!isValidString(this.label)) {
+                throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
+            }
+        }
+        // Store the onclick fn
+        this.onClickElementFn = this.element.onclick;
+        this.disabledHandler(this.disabled);
+    }
     /**
-     * Handle onKeydown event
-     * @param event - keyboard event
+     * Add listners
      */
-    this.handleKeydown = (event) => {
-      if (!this.disabled && event.key === ' ') {
-        event.preventDefault();
-      }
-      else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {
-        event.preventDefault();
-        this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-      }
-    };
+    componentDidLoad() {
+        nextTick(() => {
+            var _a;
+            const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
+            // submit buttons should trigger form submition;
+            if (!!closestForm && ['submit', undefined].includes(this.type)) {
+                this.element.addEventListener('click', () => {
+                    closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
+                });
+            }
+        });
+    }
     /**
-     * Handle onKeyup event
-     * @param event - keyboard event
+     * Render component
+     * @returns html element
      */
-    this.handleKeyup = (event) => {
-      if (!this.disabled && event.key === ' ') {
-        event.preventDefault();
-        this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-      }
-    };
-    this.variant = variants[0];
-    this.identifier = undefined;
-    this.label = undefined;
-    this.type = undefined;
-    this.fullWidth = false;
-    this.form = undefined;
-    this.disabled = undefined;
-    this.isIcon = false;
-    this.disableOnClick = false;
-    this.loading = false;
-    this.classCollection = new ClassList(['mg-c-button']);
-  }
-  validateVariant(newValue, oldValue) {
-    if (!variants.includes(newValue)) {
-      throw new Error(`<mg-button> prop "variant" must be one of: ${variants.join(', ')}`);
-    }
-    else {
-      if (oldValue !== undefined) {
-        this.classCollection.delete(`mg-c-button--${oldValue}`);
-      }
-      this.classCollection.add(`mg-c-button--${newValue}`);
+    render() {
+        var _a;
+        return (h(Host, { role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-c-button__content" }, h("slot", null)))));
     }
-  }
-  validateFullWidth(newValue) {
-    if (newValue && this.isIcon) {
-      throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');
+    static get is() { return "mg-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-button.css"]
+        };
     }
-    else if (newValue) {
-      this.classCollection.add(this.classFullWidth);
+    static get styleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-button.css"]
+        };
     }
-    else {
-      this.classCollection.delete(this.classFullWidth);
-    }
-  }
-  disabledHandler(isDisabled) {
-    // Remove loading when enable
-    // Will be set back onclick
-    if (!isDisabled && this.disableOnClick) {
-      this.loading = false;
-    }
-    // Manage if onclick
-    this.element.onclick = isDisabled ? undefined : this.onClickElementFn;
-    // apply style
-    if (isDisabled) {
-      this.classCollection.add(this.classDisabled);
-    }
-    else {
-      this.classCollection.delete(this.classDisabled);
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "VariantType",
+                    "resolved": "\"danger\" | \"danger-alt\" | \"flat\" | \"info\" | \"link\" | \"primary\" | \"secondary\" | \"success\"",
+                    "references": {
+                        "VariantType": {
+                            "location": "import",
+                            "path": "./mg-button.conf",
+                            "id": "src/components/atoms/mg-button/mg-button.conf.ts::VariantType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define button variant"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "variants[0]"
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)"
+                },
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "aria-label\nIn case button text is not explicit enough"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonType",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "ButtonType": {
+                            "location": "import",
+                            "path": "./mg-button.conf",
+                            "id": "src/components/atoms/mg-button/mg-button.conf.ts::ButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define button type"
+                },
+                "attribute": "type",
+                "reflect": false
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set button to full-width"
+                },
+                "attribute": "full-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "form": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define form id to attach button with.\nIf this attribute is not set, the <button> is associated with its ancestor <form> element."
+                },
+                "attribute": "form",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable button"
+                },
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "isIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if button is round.\nUsed for icon button."
+                },
+                "attribute": "is-icon",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disableOnClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Option to set input disable on click, in order to prevent multi-click.\nParent component have to remove the attribute 'disabled' when the process ends."
+                },
+                "attribute": "disable-on-click",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
     }
-    // emit value update
-    this.disabledChange.emit(isDisabled);
-  }
-  loadingHandler(newValue) {
-    // we add loading style if it newvalue is true else we remove it
-    if (newValue) {
-      this.classCollection.add(this.classLoading);
+    static get states() {
+        return {
+            "loading": {},
+            "classCollection": {}
+        };
     }
-    else {
-      this.classCollection.delete(this.classLoading);
+    static get events() {
+        return [{
+                "method": "disabledChange",
+                "name": "disabled-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emmited event when disabled change"
+                },
+                "complexType": {
+                    "original": "HTMLMgButtonElement['disabled']",
+                    "resolved": "boolean",
+                    "references": {
+                        "HTMLMgButtonElement": {
+                            "location": "global",
+                            "id": "global::HTMLMgButtonElement"
+                        }
+                    }
+                }
+            }];
     }
-  }
-  /**
-   * Check if props are well configured on init
-   */
-  componentWillLoad() {
-    this.validateVariant(this.variant);
-    this.validateFullWidth(this.fullWidth);
-    if (this.isIcon) {
-      this.classCollection.add(`mg-c-button--icon`);
-      if (!isValidString(this.label)) {
-        throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
-      }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "variant",
+                "methodName": "validateVariant"
+            }, {
+                "propName": "fullWidth",
+                "methodName": "validateFullWidth"
+            }, {
+                "propName": "disabled",
+                "methodName": "disabledHandler"
+            }, {
+                "propName": "loading",
+                "methodName": "loadingHandler"
+            }];
     }
-    // Store the onclick fn
-    this.onClickElementFn = this.element.onclick;
-    this.disabledHandler(this.disabled);
-  }
-  /**
-   * Render component
-   * @returns html element
-   */
-  render() {
-    var _a;
-    return (h(Host, { role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-c-button__content" }, h("slot", null)))));
-  }
-  static get is() { return "mg-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-button.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "VariantType",
-          "resolved": "\"danger\" | \"danger-alt\" | \"flat\" | \"info\" | \"link\" | \"primary\" | \"secondary\" | \"success\"",
-          "references": {
-            "VariantType": {
-              "location": "import",
-              "path": "./mg-button.conf",
-              "id": "src/components/atoms/mg-button/mg-button.conf.ts::VariantType"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define button variant"
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "variants[0]"
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)"
-        },
-        "attribute": "identifier",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "aria-label\nIn case button text is not explicit enough"
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ButtonType",
-          "resolved": "\"button\" | \"reset\" | \"submit\"",
-          "references": {
-            "ButtonType": {
-              "location": "import",
-              "path": "./mg-button.conf",
-              "id": "src/components/atoms/mg-button/mg-button.conf.ts::ButtonType"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define button type"
-        },
-        "attribute": "type",
-        "reflect": false
-      },
-      "fullWidth": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set button to full-width"
-        },
-        "attribute": "full-width",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "form": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define form id to attach button with.\nIf this attribute is not set, the <button> is associated with its ancestor <form> element."
-        },
-        "attribute": "form",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Disable button"
-        },
-        "attribute": "disabled",
-        "reflect": false
-      },
-      "isIcon": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if button is round.\nUsed for icon button."
-        },
-        "attribute": "is-icon",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disableOnClick": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Option to set input disable on click, in order to prevent multi-click.\nParent component have to remove the attribute 'disabled' when the process ends."
-        },
-        "attribute": "disable-on-click",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "loading": {},
-      "classCollection": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "disabledChange",
-        "name": "disabled-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emmited event when disabled change"
-        },
-        "complexType": {
-          "original": "MgButton['disabled']",
-          "resolved": "boolean",
-          "references": {
-            "MgButton": {
-              "location": "global",
-              "id": "global::MgButton"
-            }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "variant",
-        "methodName": "validateVariant"
-      }, {
-        "propName": "fullWidth",
-        "methodName": "validateFullWidth"
-      }, {
-        "propName": "disabled",
-        "methodName": "disabledHandler"
-      }, {
-        "propName": "loading",
-        "methodName": "loadingHandler"
-      }];
-  }
 }
 //# sourceMappingURL=mg-button.js.map