@mgdis/mg-components 5.19.2 → 5.20.0

package/dist/collection/components/molecules/mg-message/mg-message.js

@@ -3,320 +3,341 @@ import { createID, ClassList } from "../../../utils/components.utils";
 import { variants } from "./mg-message.conf";
 import { initLocales } from "../../../locales";
 export class MgMessage {
-  constructor() {
-    /************
-     * Internal *
-     ************/
-    // Classes
-    this.classHide = 'mg-c-message--hide';
-    // IDs
-    this.closeButtonId = '';
-    // Stored timer setted when hide action is run from setTimeOut
-    this.storedTimer = null;
-    // Manage hover
-    this.isFocused = false;
-    this.isHovered = false;
-    /**
-     * Set timer
-     */
-    this.setTimer = () => {
-      this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
-    };
-    /**
-     * Clear timer
-     */
-    this.clearTimer = () => {
-      clearTimeout(this.storedTimer);
-    };
-    /**
-     * Event to add on element
-     * @param event - event
-     */
-    this.timerEvents = (event) => {
-      this.clearTimer();
-      const isMouseEvent = event.type === 'mouseenter';
-      // Needed to ensure we don't start the timer
-      this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;
-      // Restart timer when loose focus AND mouse leave
-      this.element.addEventListener(isMouseEvent ? 'mouseleave' : 'focusout', eventOut => {
-        this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;
-        // Start timer if needed
-        if (!this.isFocused && !this.isHovered)
-          this.setTimer();
-      }, { once: true });
-    };
+    constructor() {
+        /************
+         * Internal *
+         ************/
+        // Classes
+        this.classHide = 'mg-c-message--hide';
+        // IDs
+        this.closeButtonId = '';
+        // Stored timer setted when hide action is run from setTimeOut
+        this.storedTimer = null;
+        // Manage hover
+        this.isFocused = false;
+        this.isHovered = false;
+        /**
+         * Set timer
+         */
+        this.setTimer = () => {
+            this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
+        };
+        /**
+         * Clear timer
+         */
+        this.clearTimer = () => {
+            clearTimeout(this.storedTimer);
+        };
+        /**
+         * Event to add on element
+         * @param event - event
+         */
+        this.timerEvents = (event) => {
+            this.clearTimer();
+            const isMouseEvent = event.type === 'mouseenter';
+            // Needed to ensure we don't start the timer
+            this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;
+            // Restart timer when loose focus AND mouse leave
+            this.element.addEventListener(isMouseEvent ? 'mouseleave' : 'focusout', eventOut => {
+                this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;
+                // Start timer if needed
+                if (!this.isFocused && !this.isHovered)
+                    this.setTimer();
+            }, { once: true });
+        };
+        /**
+         * Handle close button
+         */
+        this.handleClose = () => {
+            this.hide = true;
+        };
+        /**
+         * Get icon corresponding to variant
+         * @returns icon
+         */
+        this.getIcon = () => {
+            switch (this.variant) {
+                case 'info':
+                    return 'info-circle';
+                case 'warning':
+                    return 'exclamation-triangle';
+                case 'success':
+                    return 'check-circle';
+                case 'danger':
+                    return 'exclamation-circle';
+                default:
+                    break;
+            }
+        };
+        this.identifier = createID('mg-message');
+        this.delay = undefined;
+        this.variant = variants[0];
+        this.closeButton = false;
+        this.hide = false;
+        this.noAriaRole = undefined;
+        this.classCollection = new ClassList(['mg-c-message']);
+        this.hasActions = false;
+    }
+    validateDelay(newValue) {
+        if (newValue !== undefined && newValue < 2) {
+            throw new Error(`<mg-message> prop "delay" must be greater than 2 seconds.`);
+        }
+    }
+    validateVariant(newValue, oldValue) {
+        if (!variants.includes(newValue)) {
+            throw new Error(`<mg-message> prop "variant" must be one of: ${variants.join(', ')}`);
+        }
+        else {
+            if (oldValue !== undefined) {
+                this.classCollection.delete(`mg-c-message--${oldValue}`);
+            }
+            this.classCollection.add(`mg-c-message--${newValue}`);
+        }
+    }
+    validateCloseButton(newValue) {
+        if (newValue && this.hasActions) {
+            this.closeButton = false;
+            throw new Error('<mg-message> prop "close-button" can\'t be used with the actions slot.');
+        }
+    }
+    validateHide(newValue) {
+        if (newValue) {
+            this.componentHide.emit();
+            this.classCollection.add(this.classHide);
+            // Remove event Listener
+            ['focusin', 'mouseenter'].forEach(event => {
+                this.element.removeEventListener(event, this.timerEvents);
+            });
+            // Clear Timer
+            this.clearTimer();
+        }
+        else {
+            this.componentShow.emit();
+            this.classCollection.delete(this.classHide);
+            // If delay is set
+            if (this.delay > 1) {
+                // Start timer
+                this.setTimer();
+                // Stop timer when get focus or mouse enter
+                ['focusin', 'mouseenter'].forEach(event => {
+                    this.element.addEventListener(event, this.timerEvents);
+                });
+            }
+        }
+    }
+    /*************
+     * Lifecycle *
+     *************/
     /**
-     * Handle close button
+     * Check if component props are well configured on init
      */
-    this.handleClose = () => {
-      this.hide = true;
-    };
+    componentWillLoad() {
+        // Get locales
+        this.messages = initLocales(this.element).messages;
+        // Validate
+        this.validateVariant(this.variant);
+        // Check if close button is an can be activated
+        this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
+        this.validateCloseButton(this.closeButton);
+        if (this.closeButton) {
+            this.classCollection.add('mg-c-message--close-button');
+            this.closeButtonId = `${this.identifier}-close-button`;
+        }
+        this.validateDelay(this.delay);
+        this.validateHide(this.hide);
+    }
     /**
-     * Get icon corresponding to variant
-     * @returns icon
+     * Render
+     * @returns HTML Element
      */
-    this.getIcon = () => {
-      switch (this.variant) {
-        case 'info':
-          return 'info-circle';
-        case 'warning':
-          return 'exclamation-triangle';
-        case 'success':
-          return 'check-circle';
-        case 'danger':
-          return 'exclamation-circle';
-        default:
-          break;
-      }
-    };
-    this.identifier = createID('mg-message');
-    this.delay = undefined;
-    this.variant = variants[0];
-    this.closeButton = false;
-    this.hide = false;
-    this.classCollection = new ClassList(['mg-c-message']);
-    this.hasActions = false;
-  }
-  validateDelay(newValue) {
-    if (newValue !== undefined && newValue < 2) {
-      throw new Error(`<mg-message> prop "delay" must be greater than 2 seconds.`);
+    render() {
+        let role;
+        if (!this.noAriaRole)
+            role = this.variant === 'info' ? 'status' : 'alert';
+        return (h("div", { id: this.identifier, class: this.classCollection.join(), role: role }, h("mg-card", { variant: this.variant, "variant-style": "bar-left" }, h("span", { class: "mg-c-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-c-message__content" }, h("span", { class: "mg-c-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-c-message__content-separator" }), this.hasActions && (h("span", { class: "mg-c-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-c-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
     }
-  }
-  validateVariant(newValue, oldValue) {
-    if (!variants.includes(newValue)) {
-      throw new Error(`<mg-message> prop "variant" must be one of: ${variants.join(', ')}`);
+    static get is() { return "mg-message"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-message.css"]
+        };
     }
-    else {
-      if (oldValue !== undefined) {
-        this.classCollection.delete(`mg-c-message--${oldValue}`);
-      }
-      this.classCollection.add(`mg-c-message--${newValue}`);
+    static get styleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-message.css"]
+        };
     }
-  }
-  validateCloseButton(newValue) {
-    if (newValue && this.hasActions) {
-      this.closeButton = false;
-      throw new Error('<mg-message> prop "close-button" can\'t be used with the actions slot.');
+    static get properties() {
+        return {
+            "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)\nIf not set, it will be created."
+                },
+                "attribute": "identifier",
+                "reflect": false,
+                "defaultValue": "createID('mg-message')"
+            },
+            "delay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add a delay to hide/close message when it passed\nValue is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)"
+                },
+                "attribute": "delay",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "VariantType",
+                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "VariantType": {
+                            "location": "import",
+                            "path": "./mg-message.conf",
+                            "id": "src/components/molecules/mg-message/mg-message.conf.ts::VariantType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message variant"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "variants[0]"
+            },
+            "closeButton": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if message has a cross button\nRG 01: https://jira.mgdis.fr/browse/PDA9-140"
+                },
+                "attribute": "close-button",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hide": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if message is hidden"
+                },
+                "attribute": "hide",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "noAriaRole": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if aria role is unset\nFor a11y reasons, `<mg-message />` was design for `alert` needs with attached semantic role: `status`, `alert`.\nBy toggle this props to `true`, you can unset the role to benefit from the template without any semantic role.\nBe careful to set the mode according to the context needs."
+                },
+                "attribute": "no-aria-role",
+                "reflect": false
+            }
+        };
     }
-  }
-  validateHide(newValue) {
-    if (newValue) {
-      this.componentHide.emit();
-      this.classCollection.add(this.classHide);
-      // Remove event Listener
-      ['focusin', 'mouseenter'].forEach(event => {
-        this.element.removeEventListener(event, this.timerEvents);
-      });
-      // Clear Timer
-      this.clearTimer();
+    static get states() {
+        return {
+            "classCollection": {},
+            "hasActions": {}
+        };
     }
-    else {
-      this.componentShow.emit();
-      this.classCollection.delete(this.classHide);
-      // If delay is set
-      if (this.delay > 1) {
-        // Start timer
-        this.setTimer();
-        // Stop timer when get focus or mouse enter
-        ['focusin', 'mouseenter'].forEach(event => {
-          this.element.addEventListener(event, this.timerEvents);
-        });
-      }
+    static get events() {
+        return [{
+                "method": "componentShow",
+                "name": "component-show",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when message is diplayed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "componentHide",
+                "name": "component-hide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emited event when message is hidden"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
     }
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   */
-  componentWillLoad() {
-    // Get locales
-    this.messages = initLocales(this.element).messages;
-    // Validate
-    this.validateVariant(this.variant);
-    // Check if close button is an can be activated
-    this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
-    this.validateCloseButton(this.closeButton);
-    if (this.closeButton) {
-      this.classCollection.add('mg-c-message--close-button');
-      this.closeButtonId = `${this.identifier}-close-button`;
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "delay",
+                "methodName": "validateDelay"
+            }, {
+                "propName": "variant",
+                "methodName": "validateVariant"
+            }, {
+                "propName": "closeButton",
+                "methodName": "validateCloseButton"
+            }, {
+                "propName": "hide",
+                "methodName": "validateHide"
+            }];
     }
-    this.validateDelay(this.delay);
-    this.validateHide(this.hide);
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    return (h("div", { id: this.identifier, class: this.classCollection.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", { variant: this.variant, "variant-style": "bar-left" }, h("span", { class: "mg-c-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-c-message__content" }, h("span", { class: "mg-c-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-c-message__content-separator" }), this.hasActions && (h("span", { class: "mg-c-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-c-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
-  }
-  static get is() { return "mg-message"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-message.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-message.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "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)\nIf not set, it will be created."
-        },
-        "attribute": "identifier",
-        "reflect": false,
-        "defaultValue": "createID('mg-message')"
-      },
-      "delay": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Add a delay to hide/close message when it passed\nValue is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)"
-        },
-        "attribute": "delay",
-        "reflect": false
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "VariantType",
-          "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
-          "references": {
-            "VariantType": {
-              "location": "import",
-              "path": "./mg-message.conf",
-              "id": "src/components/molecules/mg-message/mg-message.conf.ts::VariantType"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Message variant"
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "variants[0]"
-      },
-      "closeButton": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if message has a cross button\nRG 01: https://jira.mgdis.fr/browse/PDA9-140"
-        },
-        "attribute": "close-button",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "hide": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if message is hidden"
-        },
-        "attribute": "hide",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "classCollection": {},
-      "hasActions": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "componentShow",
-        "name": "component-show",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emited event when message is diplayed"
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }, {
-        "method": "componentHide",
-        "name": "component-hide",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emited event when message is hidden"
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "delay",
-        "methodName": "validateDelay"
-      }, {
-        "propName": "variant",
-        "methodName": "validateVariant"
-      }, {
-        "propName": "closeButton",
-        "methodName": "validateCloseButton"
-      }, {
-        "propName": "hide",
-        "methodName": "validateHide"
-      }];
-  }
 }
 //# sourceMappingURL=mg-message.js.map