@mgdis/mg-components 5.28.2 → 6.0.0

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

@@ -1,5 +1,9 @@
 /**
- * List of all possibles message variants
+ * List available variants
  */
 export const variants = ['info', 'warning', 'success', 'danger'];
+/**
+ * List available variant styles
+ */
+export const variantStyles = ['bar-left', 'background'];
 //# sourceMappingURL=mg-message.conf.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"mg-message.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-message/mg-message.conf.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAC","sourcesContent":["/**\n * List of all possibles message variants\n */\nexport const variants = ['info', 'warning', 'success', 'danger'] as const;\n\n/**\n * Variant type\n */\nexport type VariantType = (typeof variants)[number];\n"]}
+{"version":3,"file":"mg-message.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-message/mg-message.conf.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAC;AAO1E;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,UAAU,EAAE,YAAY,CAAU,CAAC","sourcesContent":["import type { Variant, VariantStyle } from '../../../types';\n\n/**\n * List available variants\n */\nexport const variants = ['info', 'warning', 'success', 'danger'] as const;\n\n/**\n * Variant type\n */\nexport type VariantType = Variant & (typeof variants)[number];\n\n/**\n * List available variant styles\n */\nexport const variantStyles = ['bar-left', 'background'] as const;\n\n/**\n * VariantStyle type\n */\nexport type VariantStyleType = VariantStyle & (typeof variantStyles)[number];\n"]}

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

@@ -1,8 +1,7 @@
 import { h } from "@stencil/core";
-import { createID, ClassList } from "@mgdis/stencil-helpers";
-import { variants } from "./mg-message.conf";
-import { initLocales } from "../../../locales";
-/*
+import { ClassList, toString } from "@mgdis/stencil-helpers";
+import { variants, variantStyles } from "./mg-message.conf";
+/**
  * @slot - Message content
  * @slot actions - Actions content
  */
@@ -11,50 +10,7 @@ export class MgMessage {
         /************
          * 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;
-        };
+        this.classBase = 'mg-c-message';
         /**
          * Get icon corresponding to variant
          * @returns icon
@@ -73,60 +29,31 @@ export class MgMessage {
                     break;
             }
         };
-        this.identifier = createID('mg-message');
-        this.delay = undefined;
-        this.variant = variants[0];
-        this.closeButton = false;
-        this.hide = false;
-        this.noAriaRole = undefined;
+        this.variant = 'info';
+        this.variantStyle = 'bar-left';
         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) {
+    watchVariant(newValue, oldValue) {
         if (!variants.includes(newValue)) {
-            throw new Error(`<mg-message> prop "variant" must be one of: ${variants.join(', ')}`);
+            throw new Error(`<mg-message> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);
         }
         else {
-            if (oldValue !== undefined) {
-                this.classCollection.delete(`mg-c-message--${oldValue}`);
-            }
-            this.classCollection.add(`mg-c-message--${newValue}`);
+            if (newValue !== undefined)
+                this.classCollection.add(`${this.classBase}--${newValue}`);
+            if (oldValue !== undefined)
+                this.classCollection.delete(`${this.classBase}--${oldValue}`);
         }
     }
-    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();
+    watchVariantStyle(newValue, oldValue) {
+        if (!variantStyles.includes(newValue)) {
+            throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${toString(newValue)}.`);
         }
         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);
-                });
-            }
+            if (newValue !== undefined)
+                this.classCollection.add(`${this.classBase}--${newValue}`);
+            if (oldValue !== undefined)
+                this.classCollection.delete(`${this.classBase}--${oldValue}`);
         }
     }
     /*************
@@ -136,29 +63,21 @@ export class MgMessage {
      * 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.watchVariant(this.variant);
+        this.watchVariantStyle(this.variantStyle);
+        // Check if component has actions slot
         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);
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        let role;
-        if (!this.noAriaRole)
-            role = this.variant === 'info' ? 'status' : 'alert';
-        return (h("div", { key: 'a30da97a75717852677dc66ba0e9bc0a000c8c35', id: this.identifier, class: this.classCollection.join(), role: role }, h("mg-card", { key: '9cea0e509146e245a91290e76bc3908fcf3e3806', variant: this.variant, "variant-style": "bar-left" }, h("span", { key: '0beb527b84230d6cafed7ac1d2c9caa59ad1f80f', class: "mg-c-message__icon" }, h("mg-icon", { key: 'e0346db73f7c2c4595bb09e1be93039763106a5d', icon: this.getIcon() })), h("div", { key: '128567f70f2d664688cf012ab995a57eea2bca17', class: "mg-c-message__content" }, h("span", { key: '2b1cc03309002908b6c54b95c6ad58bdc966e787', class: "mg-c-message__content-slot" }, h("slot", { key: 'fd7b3e74c3bd2a70d2cbbef0a9519cdee38da5ce' })), this.hasActions && h("span", { key: 'adb6d3b819226a5e6173f077650be05c64e69f13', class: "mg-c-message__content-separator" }), this.hasActions && (h("span", { key: '136b8a00d7b0dbb14750d7637bce7d83d8cfd112', class: "mg-c-message__content-actions-slot" }, h("slot", { key: '926939a26ee3fa4e3b4625cdc4003dccc9d2e2e3', name: "actions" })))), this.closeButton && (h("span", { key: '770a2313622d50f5dc027d65b878e2955a134ca3', class: "mg-c-message__close-button" }, h("mg-button", { key: '094652edc8aa518cb3c0322025b5bf5c66b3fa33', identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '2b0ee538aec157e9507bf3c14026e71c422fc365', icon: "cross" })))))));
+        return (h("div", { key: '9ce1d7b25bf12d974a7b0b296d9d71b9b2c984e1', class: this.classCollection.join() }, h("mg-card", { key: '7c7c1d5891d988adc7c5090b02d809aab32565f8' }, this.variantStyle === 'bar-left' && h("span", { key: 'd6c291fcf93ab6e84ba0288a1a0c4ec405b57e78', class: "mg-c-message__bar" }), h("span", { key: 'afc3dcf95dbf4ee96ca1041c54c0d4c37d435601', class: "mg-c-message__icon" }, h("mg-icon", { key: 'd9b79cb3be22fedee6a04cf43c72641202cc80f7', icon: this.getIcon() })), h("div", { key: 'f70d488459d28a464a3714b122b7a708c3562741', class: "mg-c-message__content" }, h("span", { key: 'd24b0ed1c326cb04bc7944f0c4f1fe19efa3fc9c', class: "mg-c-message__content-slot" }, h("slot", { key: 'bb491533bc09600c04699d561c7af608ee1567e5' })), this.hasActions && [
+            h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
+            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '43547919e1ec8b34f23ea1ad5e75d5b0da23c831', name: "actions" })),
+        ]))));
     }
     static get is() { return "mg-message"; }
     static get encapsulation() { return "shadow"; }
@@ -174,41 +93,6 @@ export class MgMessage {
     }
     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": true,
-                "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,
@@ -227,64 +111,35 @@ export class MgMessage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Message variant"
+                    "text": "Define variant"
                 },
                 "attribute": "variant",
                 "reflect": false,
-                "defaultValue": "variants[0]"
+                "defaultValue": "'info'"
             },
-            "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,
+            "variantStyle": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "VariantStyleType",
+                    "resolved": "\"background\" | \"bar-left\"",
+                    "references": {
+                        "VariantStyleType": {
+                            "location": "import",
+                            "path": "./mg-message.conf",
+                            "id": "src/components/molecules/mg-message/mg-message.conf.ts::VariantStyleType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Define if message is hidden"
+                    "text": "Define variant style"
                 },
-                "attribute": "hide",
+                "attribute": "variant-style",
                 "reflect": false,
-                "defaultValue": "false"
-            },
-            "noAriaRole": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "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
+                "defaultValue": "'bar-left'"
             }
         };
     }
@@ -294,53 +149,14 @@ export class MgMessage {
             "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": "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": {}
-                }
-            }];
-    }
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
-                "propName": "delay",
-                "methodName": "validateDelay"
-            }, {
                 "propName": "variant",
-                "methodName": "validateVariant"
-            }, {
-                "propName": "closeButton",
-                "methodName": "validateCloseButton"
+                "methodName": "watchVariant"
             }, {
-                "propName": "hide",
-                "methodName": "validateHide"
+                "propName": "variantStyle",
+                "methodName": "watchVariantStyle"
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"mg-message.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-message/mg-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '@mgdis/stencil-helpers';\nimport { variants, VariantType } from './mg-message.conf';\nimport { initLocales } from '../../../locales';\nimport { type MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n/*\n * @slot - Message content\n * @slot actions - Actions content\n */\n@Component({\n  tag: 'mg-message',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-message.css',\n  shadow: true,\n})\nexport class MgMessage {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classHide = 'mg-c-message--hide';\n\n  // IDs\n  private closeButtonId = '';\n\n  // Stored timer setted when hide action is run from setTimeOut\n  private storedTimer: ReturnType<typeof setTimeout> = null;\n\n  // Manage hover\n  private isFocused = false;\n  private isHovered = false;\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMessageElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   * If not set, it will be created.\n   */\n  @Prop() identifier: string = createID('mg-message');\n\n  /**\n   * Add a delay to hide/close message when it passed\n   * Value is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)\n   */\n  @Prop() delay?: number;\n  @Watch('delay')\n  validateDelay(newValue: MgMessage['delay']): void {\n    if (newValue !== undefined && newValue < 2) {\n      throw new Error(`<mg-message> prop \"delay\" must be greater than 2 seconds.`);\n    }\n  }\n\n  /**\n   * Message variant\n   */\n  @Prop() variant: VariantType = variants[0]; // info\n  @Watch('variant')\n  validateVariant(newValue: MgMessage['variant'], oldValue?: MgMessage['variant']): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-message> prop \"variant\" must be one of: ${variants.join(', ')}`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-message--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-message--${newValue}`);\n    }\n  }\n\n  /**\n   * Define if message has a cross button\n   * RG 01: https://jira.mgdis.fr/browse/PDA9-140\n   */\n  @Prop({ mutable: true }) closeButton = false;\n  @Watch('closeButton')\n  validateCloseButton(newValue: MgMessage['closeButton']): void {\n    if (newValue && this.hasActions) {\n      this.closeButton = false;\n      throw new Error('<mg-message> prop \"close-button\" can\\'t be used with the actions slot.');\n    }\n  }\n\n  /**\n   * Define if message is hidden\n   */\n  @Prop({ mutable: true }) hide = false;\n  @Watch('hide')\n  validateHide(newValue: MgMessage['hide']): void {\n    if (newValue) {\n      this.componentHide.emit();\n      this.classCollection.add(this.classHide);\n      // Remove event Listener\n      ['focusin', 'mouseenter'].forEach(event => {\n        this.element.removeEventListener(event, this.timerEvents);\n      });\n      // Clear Timer\n      this.clearTimer();\n    } else {\n      this.componentShow.emit();\n      this.classCollection.delete(this.classHide);\n      // If delay is set\n      if (this.delay > 1) {\n        // Start timer\n        this.setTimer();\n        // Stop timer when get focus or mouse enter\n        ['focusin', 'mouseenter'].forEach(event => {\n          this.element.addEventListener(event, this.timerEvents);\n        });\n      }\n    }\n  }\n\n  /**\n   * Define if aria role is unset\n   * For a11y reasons, `<mg-message />` was design for `alert` needs with attached semantic role: `status`, `alert`.\n   * By toggle this props to `true`, you can unset the role to benefit from the template without any semantic role.\n   * Be careful to set the mode according to the context needs.\n   */\n  @Prop() noAriaRole?: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-message']);\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Emited event when message is diplayed\n   */\n  @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n  /**\n   * Emited event when message is hidden\n   */\n  @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n  /**\n   * Set timer\n   */\n  private setTimer = (): void => {\n    this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);\n  };\n\n  /**\n   * Clear timer\n   */\n  private clearTimer = (): void => {\n    clearTimeout(this.storedTimer);\n  };\n\n  /**\n   * Event to add on element\n   * @param event - event\n   */\n  private timerEvents = (event: MouseEvent | FocusEvent): void => {\n    this.clearTimer();\n    const isMouseEvent: boolean = event.type === 'mouseenter';\n    // Needed to ensure we don't start the timer\n    this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;\n\n    // Restart timer when loose focus AND mouse leave\n    this.element.addEventListener(\n      isMouseEvent ? 'mouseleave' : 'focusout',\n      eventOut => {\n        this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;\n        // Start timer if needed\n        if (!this.isFocused && !this.isHovered) this.setTimer();\n      },\n      { once: true },\n    );\n  };\n\n  /**\n   * Handle close button\n   */\n  private handleClose = (): void => {\n    this.hide = true;\n  };\n\n  /**\n   * Get icon corresponding to variant\n   * @returns icon\n   */\n  private getIcon = (): MgIcon['icon'] => {\n    switch (this.variant) {\n      case 'info':\n        return 'info-circle';\n      case 'warning':\n        return 'exclamation-triangle';\n      case 'success':\n        return 'check-circle';\n      case 'danger':\n        return 'exclamation-circle';\n      default:\n        break;\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateVariant(this.variant);\n    // Check if close button is an can be activated\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n    this.validateCloseButton(this.closeButton);\n    if (this.closeButton) {\n      this.classCollection.add('mg-c-message--close-button');\n      this.closeButtonId = `${this.identifier}-close-button`;\n    }\n    this.validateDelay(this.delay);\n    this.validateHide(this.hide);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    let role;\n\n    if (!this.noAriaRole) role = this.variant === 'info' ? 'status' : 'alert';\n\n    return (\n      <div id={this.identifier} class={this.classCollection.join()} role={role}>\n        <mg-card variant={this.variant} variant-style=\"bar-left\">\n          <span class=\"mg-c-message__icon\">\n            <mg-icon icon={this.getIcon()}></mg-icon>\n          </span>\n          <div class=\"mg-c-message__content\">\n            <span class=\"mg-c-message__content-slot\">\n              <slot></slot>\n            </span>\n            {this.hasActions && <span class=\"mg-c-message__content-separator\"></span>}\n            {this.hasActions && (\n              <span class=\"mg-c-message__content-actions-slot\">\n                <slot name=\"actions\"></slot>\n              </span>\n            )}\n          </div>\n          {this.closeButton && (\n            <span class=\"mg-c-message__close-button\">\n              <mg-button identifier={this.closeButtonId} is-icon variant=\"flat\" label={this.messages.message.closeButton} onClick={this.handleClose}>\n                <mg-icon icon=\"cross\"></mg-icon>\n              </mg-button>\n            </span>\n          )}\n        </mg-card>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-message.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-message/mg-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport { ClassList, toString } from '@mgdis/stencil-helpers';\nimport { variants, variantStyles, VariantStyleType, VariantType } from './mg-message.conf';\nimport { type MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n/**\n * @slot - Message content\n * @slot actions - Actions content\n */\n@Component({\n  tag: 'mg-message',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-message.css',\n  shadow: true,\n})\nexport class MgMessage {\n  /************\n   * Internal *\n   ************/\n\n  private readonly classBase = 'mg-c-message';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMessageElement;\n\n  /**\n   * Define variant\n   */\n  @Prop() variant: VariantType = 'info';\n  @Watch('variant')\n  watchVariant(newValue: MgMessage['variant'], oldValue?: MgMessage['variant']): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-message> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n    } else {\n      if (newValue !== undefined) this.classCollection.add(`${this.classBase}--${newValue}`);\n      if (oldValue !== undefined) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n    }\n  }\n\n  /**\n   * Define variant style\n   */\n  @Prop() variantStyle: VariantStyleType = 'bar-left';\n  @Watch('variantStyle')\n  watchVariantStyle(newValue: MgMessage['variantStyle'], oldValue?: MgMessage['variantStyle']): void {\n    if (!variantStyles.includes(newValue)) {\n      throw new Error(`<mg-message> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}. Passed value: ${toString(newValue)}.`);\n    } else {\n      if (newValue !== undefined) this.classCollection.add(`${this.classBase}--${newValue}`);\n      if (oldValue !== undefined) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-message']);\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Get icon corresponding to variant\n   * @returns icon\n   */\n  private getIcon = (): MgIcon['icon'] => {\n    switch (this.variant) {\n      case 'info':\n        return 'info-circle';\n      case 'warning':\n        return 'exclamation-triangle';\n      case 'success':\n        return 'check-circle';\n      case 'danger':\n        return 'exclamation-circle';\n      default:\n        break;\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Validate\n    this.watchVariant(this.variant);\n    this.watchVariantStyle(this.variantStyle);\n    // Check if component has actions slot\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class={this.classCollection.join()}>\n        <mg-card>\n          {this.variantStyle === 'bar-left' && <span class=\"mg-c-message__bar\"></span>}\n          <span class=\"mg-c-message__icon\">\n            <mg-icon icon={this.getIcon()}></mg-icon>\n          </span>\n          <div class=\"mg-c-message__content\">\n            <span class=\"mg-c-message__content-slot\">\n              <slot></slot>\n            </span>\n            {this.hasActions && [\n              <span class=\"mg-c-message__content-separator\" key=\"content-separator\"></span>,\n              <span class=\"mg-c-message__content-actions-slot\" key=\"content-actions-slot\">\n                <slot name=\"actions\"></slot>\n              </span>,\n            ]}\n          </div>\n        </mg-card>\n      </div>\n    );\n  }\n}\n"]}