@mgdis/mg-components 5.26.0 → 5.27.1

package/dist/collection/components/molecules/mg-item-more/mg-item-more.js

@@ -1,8 +1,8 @@
 import { h, Host } from "@stencil/core";
-import { initLocales } from "../../../locales";
-import { OverflowBehavior } from "../../../utils/behaviors.utils";
-import { Direction } from "../menu/mg-menu/mg-menu.conf";
 import { isValidString } from "@mgdis/stencil-helpers";
+import { Direction } from "../menu/mg-menu/mg-menu.conf";
+import { OverflowBehavior } from "../../../utils/behaviors.utils";
+import { initLocales } from "../../../locales";
 export class MgItemMore {
     constructor() {
         /************
@@ -24,6 +24,7 @@ export class MgItemMore {
             });
             const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));
             Array.from(this.moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {
+                const proxified = allMenuItem[index];
                 // manage click on proxy to mirror it on initial element
                 proxy.addEventListener('click', () => {
                     // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom
@@ -34,8 +35,13 @@ export class MgItemMore {
                 // add id suffix to prevent duplicate key. default html id is: '';
                 if (isValidString(proxy.id))
                     proxy.id = `${proxy.id}-proxy`;
-                // manage status change miror in proxy
-                allMenuItem[index].addEventListener('status-change', (event) => {
+                // update properties and DOM when proxyfied item is updated
+                proxified.addEventListener('item-updated', (event) => {
+                    Object.assign(proxy, event.target);
+                    proxy.innerHTML = event.target.innerHTML;
+                });
+                // manage status change miror in proxyfied element
+                proxified.addEventListener('status-change', (event) => {
                     proxy.setAttribute('status', event.detail);
                 });
             });
@@ -54,7 +60,7 @@ export class MgItemMore {
         if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
             throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);
         else if (typeof newValue.label !== 'string')
-            this.slotlabel.label = this.messages.moreLabel;
+            this.slotlabel.label = this.messages.menuLabel;
     }
     validateSize(newValue) {
         if (newValue && typeof newValue !== 'string')
@@ -68,7 +74,7 @@ export class MgItemMore {
      */
     componentWillLoad() {
         // init variables
-        this.messages = initLocales(this.element).messages.plusMenu;
+        this.messages = initLocales(this.element).messages.itemMore;
         // validate props
         this.validateIcon(this.icon);
         this.validateSlotLabel(this.slotlabel);
@@ -76,6 +82,7 @@ export class MgItemMore {
     }
     /**
      * Ensure parent DOM is fully rendered with timeout method before parse elements
+     * @returns timeout
      */
     componentDidLoad() {
         // ensure parent menu is fully rendered
@@ -105,10 +112,10 @@ export class MgItemMore {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '2dfe9d844f42403de5120e0db85f3617d9d580a8', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
+        return (h(Host, { key: 'c64a37d994cb6c3c388939b151588f2acf23e372', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
                 if (el)
                     this.moreElementMenuItem = el;
-            } }, h("mg-icon", { icon: this.icon.icon, slot: "image" }), h("span", { class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: this.size })))));
+            } }, h("mg-icon", { icon: this.icon.icon, slot: "image" }), h("span", { class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
     }
     static get is() { return "mg-item-more"; }
     static get encapsulation() { return "shadow"; }
@@ -129,7 +136,7 @@ export class MgItemMore {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "{ icon: string; }",
+                    "resolved": "{ icon: \"filter\" | \"copy\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"history\" | \"location\" | \"key\" | \"loader\" | \"address-card\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building-outline\" | \"calculator\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-outline\" | \"comment-sms\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-slash\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-download\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"list\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-slash\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"question-circle\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tags\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"; }",
                     "references": {
                         "IconType": {
                             "location": "import",
@@ -139,7 +146,7 @@ export class MgItemMore {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define icon"
@@ -161,7 +168,7 @@ export class MgItemMore {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define slot label element"
@@ -183,7 +190,7 @@ export class MgItemMore {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define component child menu size."

package/dist/collection/components/molecules/mg-item-more/mg-item-more.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-item-more.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-item-more/mg-item-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { OverflowBehavior } from '../../../utils/behaviors.utils';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport type { IconType, MessageType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n  tag: 'mg-item-more',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css',\n  shadow: true,\n})\nexport class MgItemMore {\n  /************\n   * Internal *\n   ************/\n  private readonly name = 'mg-item-more';\n  private messages: MessageType;\n  private parentMenuItems: HTMLMgMenuItemElement[];\n  private moreElementMenuItem: HTMLMgMenuItemElement;\n  private overflowBehavior: OverflowBehavior;\n  private canRenderMgMenuItemOverflowElement = true;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgItemMoreElement;\n\n  /**\n   * Define icon\n   */\n  @Prop() icon: IconType = { icon: 'ellipsis-vertical' };\n  @Watch('icon')\n  validateIcon(newValue: MgItemMore['icon']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n      throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type.`);\n  }\n\n  /**\n   * Define slot label element\n   */\n  @Prop() slotlabel: SlotLabelType = { display: false };\n  @Watch('slotlabel')\n  validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n      throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type.`);\n    else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.moreLabel;\n  }\n\n  /**\n   * Define component child menu size.\n   */\n  @Prop() size: SizeType;\n  @Watch('size')\n  validateSize(newValue: MgItemMore['size']): void {\n    if (newValue && typeof newValue !== 'string') throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type.`);\n  }\n\n  /**\n   * Define component parent menu.\n   */\n  @State() parentMenu: HTMLMgMenuElement;\n\n  /***********\n   * Methods *\n   ***********/\n\n  /**\n   * render mg-item-more overflow element\n   * @returns mg-item-more element\n   */\n  private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n    // create menu items proxy element from item clones\n    this.parentMenuItems.forEach((child: HTMLMgMenuItemElement) => {\n      this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n    });\n\n    const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));\n\n    Array.from(this.moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {\n      // manage click on proxy to mirror it on initial element\n      proxy.addEventListener('click', () => {\n        // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom\n        const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');\n        if (navElement instanceof HTMLButtonElement || navElement instanceof HTMLAnchorElement) navElement.click();\n      });\n\n      // add id suffix to prevent duplicate key. default html id is: '';\n      if (isValidString(proxy.id)) proxy.id = `${proxy.id}-proxy`;\n\n      // manage status change miror in proxy\n      allMenuItem[index].addEventListener('status-change', (event: CustomEvent) => {\n        proxy.setAttribute('status', event.detail);\n      });\n    });\n\n    return this.element;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Set variables and validate props\n   */\n  componentWillLoad(): void {\n    // init variables\n    this.messages = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu;\n\n    // validate props\n    this.validateIcon(this.icon);\n    this.validateSlotLabel(this.slotlabel);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Ensure parent DOM is fully rendered with timeout method before parse elements\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // ensure parent menu is fully rendered\n    return setTimeout(() => {\n      this.parentMenu = this.element.closest('mg-menu');\n    });\n  }\n\n  /**\n   * Set OverflowBehavior when parentMenu state is upate AND defined\n   */\n  componentDidUpdate(): void {\n    if (this.parentMenu && this.canRenderMgMenuItemOverflowElement) {\n      this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n      this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n      this.canRenderMgMenuItemOverflowElement = false;\n    }\n  }\n\n  /**\n   * Disconnect overflow ResizeObserver\n   */\n  disconnectedCallback(): void {\n    this.overflowBehavior?.disconnect();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"listitem\">\n        {this.parentMenu && (\n          <mg-menu-item\n            data-overflow-more\n            data-size={this.parentMenu.size}\n            ref={el => {\n              if (el) this.moreElementMenuItem = el;\n            }}\n          >\n            <mg-icon icon={this.icon.icon} slot=\"image\"></mg-icon>\n            <span class={{ 'mg-u-visually-hidden': !this.slotlabel.display }} slot=\"label\">\n              {this.slotlabel.label}\n            </span>\n            <mg-menu direction={Direction.VERTICAL} label={this.messages.moreLabel} size={this.size}></mg-menu>\n          </mg-menu-item>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-item-more.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-item-more/mg-item-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport { OverflowBehavior } from '../../../utils/behaviors.utils';\nimport { initLocales } from '../../../locales';\nimport type { IconType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport type { MessageType } from '../../../locales/index.conf';\n\n@Component({\n  tag: 'mg-item-more',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css',\n  shadow: true,\n})\nexport class MgItemMore {\n  /************\n   * Internal *\n   ************/\n  private readonly name = 'mg-item-more';\n  private messages: MessageType;\n  private parentMenuItems: HTMLMgMenuItemElement[];\n  private moreElementMenuItem: HTMLMgMenuItemElement;\n  private overflowBehavior: OverflowBehavior;\n  private canRenderMgMenuItemOverflowElement = true;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgItemMoreElement;\n\n  /**\n   * Define icon\n   */\n  @Prop() icon?: IconType = { icon: 'ellipsis-vertical' };\n  @Watch('icon')\n  validateIcon(newValue: MgItemMore['icon']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n      throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type.`);\n  }\n\n  /**\n   * Define slot label element\n   */\n  @Prop() slotlabel?: SlotLabelType = { display: false };\n  @Watch('slotlabel')\n  validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n      throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type.`);\n    else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.menuLabel;\n  }\n\n  /**\n   * Define component child menu size.\n   */\n  @Prop() size?: SizeType;\n  @Watch('size')\n  validateSize(newValue: MgItemMore['size']): void {\n    if (newValue && typeof newValue !== 'string') throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type.`);\n  }\n\n  /**\n   * Define component parent menu.\n   */\n  @State() parentMenu: HTMLMgMenuElement;\n\n  /***********\n   * Methods *\n   ***********/\n\n  /**\n   * render mg-item-more overflow element\n   * @returns mg-item-more element\n   */\n  private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n    // create menu items proxy element from item clones\n    this.parentMenuItems.forEach((child: HTMLMgMenuItemElement) => {\n      this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n    });\n\n    const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));\n\n    Array.from(this.moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {\n      const proxified = allMenuItem[index];\n      // manage click on proxy to mirror it on initial element\n      proxy.addEventListener('click', () => {\n        // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom\n        const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');\n        if (navElement instanceof HTMLButtonElement || navElement instanceof HTMLAnchorElement) navElement.click();\n      });\n\n      // add id suffix to prevent duplicate key. default html id is: '';\n      if (isValidString(proxy.id)) proxy.id = `${proxy.id}-proxy`;\n\n      // update properties and DOM when proxyfied item is updated\n      proxified.addEventListener('item-updated', (event: CustomEvent & { target: HTMLElement }) => {\n        Object.assign(proxy, event.target);\n        proxy.innerHTML = event.target.innerHTML;\n      });\n\n      // manage status change miror in proxyfied element\n      proxified.addEventListener('status-change', (event: CustomEvent) => {\n        proxy.setAttribute('status', event.detail);\n      });\n    });\n\n    return this.element;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Set variables and validate props\n   */\n  componentWillLoad(): void {\n    // init variables\n    this.messages = initLocales(this.element).messages.itemMore as MessageType;\n\n    // validate props\n    this.validateIcon(this.icon);\n    this.validateSlotLabel(this.slotlabel);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Ensure parent DOM is fully rendered with timeout method before parse elements\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // ensure parent menu is fully rendered\n    return setTimeout(() => {\n      this.parentMenu = this.element.closest('mg-menu');\n    });\n  }\n\n  /**\n   * Set OverflowBehavior when parentMenu state is upate AND defined\n   */\n  componentDidUpdate(): void {\n    if (this.parentMenu && this.canRenderMgMenuItemOverflowElement) {\n      this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n      this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n      this.canRenderMgMenuItemOverflowElement = false;\n    }\n  }\n\n  /**\n   * Disconnect overflow ResizeObserver\n   */\n  disconnectedCallback(): void {\n    this.overflowBehavior?.disconnect();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"listitem\">\n        {this.parentMenu && (\n          <mg-menu-item\n            data-overflow-more\n            data-size={this.parentMenu.size}\n            ref={el => {\n              if (el) this.moreElementMenuItem = el;\n            }}\n          >\n            <mg-icon icon={this.icon.icon} slot=\"image\"></mg-icon>\n            <span class={{ 'mg-u-visually-hidden': !this.slotlabel.display }} slot=\"label\">\n              {this.slotlabel.label}\n            </span>\n            <mg-menu direction={Direction.VERTICAL} label={this.messages.menuLabel} size={this.size}></mg-menu>\n          </mg-menu-item>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -27,7 +27,7 @@ export class MgLoader {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'f308fffd47bf8ef4ca08364bc55f2966ed626a9f', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '3d99e25ed45daed36673314dee7f9d2f1672ef99', icon: "loader", spin: true }), h("span", { key: 'bcdbaa246385817265f386df86cb29b848c9797b', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgess)));
+        return (h("div", { key: '7f1fed85371b79f77fbfc9cc26b80e1c96c5de0e', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '1756ee0034e15479e7d47e46b6d8e757d4d845f9', icon: "loader", spin: true }), h("span", { key: '341cc3c7531397e63ab6cf776b8932f3c9c7fd7a', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgess)));
     }
     static get is() { return "mg-loader"; }
     static get encapsulation() { return "shadow"; }
@@ -52,7 +52,7 @@ export class MgLoader {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Override loader message"
@@ -69,7 +69,7 @@ export class MgLoader {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Hide message"

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

@@ -1 +1 @@
-{"version":3,"file":"mg-loader.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-loader/mg-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAOvD,MAAM,OAAO,QAAQ;;;;;IAsBnB,YAAY,CAAC,QAA6B;QACxC,IAAI,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;IAClH,CAAC;IAOD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;QAEnD,iBAAiB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,aAAa,eAAW,QAAQ;YACzC,gEAAS,IAAI,EAAC,QAAQ,EAAC,IAAI,SAAW;YACtC,6DAAM,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAQ,CAC9G,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n  tag: 'mg-loader',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-loader.css',\n  shadow: true,\n})\nexport class MgLoader {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgLoaderElement;\n\n  /**\n   * Override loader message\n   */\n  @Prop() message: string;\n  @Watch('message')\n  watchMessage(newValue: MgLoader['message']): void {\n    if (newValue && !isValidString(newValue)) throw new Error('<mg-loader> prop \"message\" must be a valid string.');\n  }\n\n  /**\n   * Hide message\n   */\n  @Prop() messageHide: boolean;\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\n    // validate props\n    this.watchMessage(this.message);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class=\"mg-c-loader\" aria-live=\"polite\">\n        <mg-icon icon=\"loader\" spin></mg-icon>\n        <span class={{ 'mg-u-visually-hidden': this.messageHide }}>{this.message || this.messages.loader.inProgess}</span>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-loader.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-loader/mg-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAOvD,MAAM,OAAO,QAAQ;;;;;IAsBnB,YAAY,CAAC,QAA6B;QACxC,IAAI,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;IAClH,CAAC;IAOD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;QAEnD,iBAAiB;QACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,aAAa,eAAW,QAAQ;YACzC,gEAAS,IAAI,EAAC,QAAQ,EAAC,IAAI,SAAW;YACtC,6DAAM,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAQ,CAC9G,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n  tag: 'mg-loader',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-loader.css',\n  shadow: true,\n})\nexport class MgLoader {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgLoaderElement;\n\n  /**\n   * Override loader message\n   */\n  @Prop() message?: string;\n  @Watch('message')\n  watchMessage(newValue: MgLoader['message']): void {\n    if (newValue && !isValidString(newValue)) throw new Error('<mg-loader> prop \"message\" must be a valid string.');\n  }\n\n  /**\n   * Hide message\n   */\n  @Prop() messageHide?: boolean;\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\n    // validate props\n    this.watchMessage(this.message);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class=\"mg-c-loader\" aria-live=\"polite\">\n        <mg-icon icon=\"loader\" spin></mg-icon>\n        <span class={{ 'mg-u-visually-hidden': this.messageHide }}>{this.message || this.messages.loader.inProgess}</span>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -2,6 +2,10 @@ import { h } from "@stencil/core";
 import { createID, ClassList } from "@mgdis/stencil-helpers";
 import { variants } from "./mg-message.conf";
 import { initLocales } from "../../../locales";
+/*
+ * @slot - Message content
+ * @slot actions - Actions content
+ */
 export class MgMessage {
     constructor() {
         /************
@@ -154,7 +158,7 @@ export class MgMessage {
         let role;
         if (!this.noAriaRole)
             role = this.variant === 'info' ? 'status' : 'alert';
-        return (h("div", { key: 'fb10ca559b2039f9d7842e4b2ce88e25a1999c96', id: this.identifier, class: this.classCollection.join(), role: role }, h("mg-card", { key: 'c0afc8ad8c56f9e5fb5041aaa201de208f3fc6fd', variant: this.variant, "variant-style": "bar-left" }, h("span", { key: '949f48302c8feb721f1b9acb663bf21acfc166e1', class: "mg-c-message__icon" }, h("mg-icon", { key: 'a3daa1da6d312c6b6b921cc01edae9763a81225f', icon: this.getIcon() })), h("div", { key: 'c53239107f094fe341f6abb1441096767b648796', class: "mg-c-message__content" }, h("span", { key: 'fb4da55da5853179204771cf9f5d01a02ed8a9ce', class: "mg-c-message__content-slot" }, h("slot", { key: 'e7339501b750d02a3e433e40903d460588dd4b33' })), 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" })))))));
+        return (h("div", { key: '2a2a66325834f5072ee6e89de0bcc40c3e0e6753', id: this.identifier, class: this.classCollection.join(), role: role }, h("mg-card", { key: '573448d09a88125eecf6b0c482cc589602238fea', variant: this.variant, "variant-style": "bar-left" }, h("span", { key: '81295346d39fdfeda74b9cdab5c468cce52cbc43', class: "mg-c-message__icon" }, h("mg-icon", { key: 'b8d655f6cffd963d601b8001f6b066e9e6ca379f', icon: this.getIcon() })), h("div", { key: '831938b7c2be97edb8dd37d2f28af6798bb32896', class: "mg-c-message__content" }, h("span", { key: '2c2d085285ec3feca97fa046ae038c725d0f05db', class: "mg-c-message__content-slot" }, h("slot", { key: '1907d1d60816a5e2d53e6ae87e60f66df253208b' })), 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"; }
@@ -197,7 +201,7 @@ export class MgMessage {
                     "references": {}
                 },
                 "required": false,
-                "optional": 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)"
@@ -274,7 +278,7 @@ export class MgMessage {
                     "references": {}
                 },
                 "required": false,
-                "optional": 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."

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@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, 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"]}

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

@@ -2,6 +2,10 @@ import { h } from "@stencil/core";
 import { createID, ClassList, focusableElements, isValidString } from "@mgdis/stencil-helpers";
 import { initLocales } from "../../../locales";
 import { dialogRoles } from "./mg-modal.conf";
+/*
+ * @slot content - Modal content
+ * @slot actions - Actions content
+ */
 export class MgModal {
     constructor() {
         /************
@@ -152,14 +156,14 @@ export class MgModal {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '5cf37ab3cd51af984852f3ef6dfeb9e9adf851aa', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", { key: 'e9246015018d985cb28396f1f3ab01466e763f0c' }, h("div", { key: '3b94fd3d16a8f54e63fd75ef7fb13c7c17ff16b6', class: "mg-c-modal__dialog" }, h("header", { key: '5f6cd3f002c135c62e0b4851f483a5581bcf50d2', class: "mg-c-modal__header" }, this.closeButton && (h("span", { class: "mg-c-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
+        return (h("div", { key: 'a6d02e454214fe334e4fb9b7278b97b6713db306', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", { key: 'd192af0bfa6105f8ddb43ec73cfffb1d0469aca8' }, h("div", { key: '4f4f5b08ce39f20ca4f65686da294487d955ebd4', class: "mg-c-modal__dialog" }, h("header", { key: 'fd87c3a17a5b2783f4ffb79d23c6005cbf82af53', class: "mg-c-modal__header" }, this.closeButton && (h("span", { class: "mg-c-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
                 if (el !== null) {
                     // store closeButton Element
                     this.closeButtonElement = el;
                     // add close button element to modalFocusableElements when it is render
                     this.modalFocusableElements.unshift(this.closeButtonElement);
                 }
-            } }, h("mg-icon", { icon: "cross" })))), h("h1", { key: '2bbb2a19e3936bc5487bfdb90d8d952ba49844be', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-c-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-c-modal__footer" }, h("slot", { name: "actions" })))))));
+            } }, h("mg-icon", { icon: "cross" })))), h("h1", { key: '363962112d7d1db2f13cf91a7964588c4c2be71f', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-c-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-c-modal__footer" }, h("slot", { name: "actions" })))))));
     }
     static get is() { return "mg-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"mg-modal.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-modal/mg-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Watch, Element, Event, EventEmitter, Listen } from '@stencil/core';\nimport { createID, ClassList, focusableElements, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { DialogRoleType, dialogRoles } from './mg-modal.conf';\n\n@Component({\n  tag: 'mg-modal',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-modal.css',\n  shadow: true,\n})\nexport class MgModal {\n  /************\n   * Internal *\n   ************/\n\n  // Modal focusable elements\n  private modalFocusableElements: HTMLElement[] = [];\n  private closeButtonElement: HTMLMgButtonElement;\n\n  // Classes\n  private readonly classHide = 'mg-c-modal--hide';\n\n  // IDs\n  private titleId = '';\n\n  // Locales\n  private messages;\n\n  // body overflow default\n  private bodyOverflow: string;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgModalElement;\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-modal');\n\n  /**\n   * Modal dialog role.\n   */\n  @Prop() dialogRole: DialogRoleType = dialogRoles[0];\n  @Watch('dialogRole')\n  validateDialogRole(newValue: MgModal['dialogRole']): void {\n    if (!dialogRoles.includes(newValue)) throw new Error(`<mg-modal> prop \"dialogRole\" must be one of: ${dialogRoles.join(', ')}.`);\n  }\n\n  /**\n   * Displayed modal title\n   */\n  @Prop() modalTitle!: string;\n  @Watch('modalTitle')\n  validateModalTitle(newValue: MgModal['modalTitle']): void {\n    if (!isValidString(newValue)) {\n      throw new Error('<mg-modal> prop \"modalTitle\" is required.');\n    }\n  }\n\n  /**\n   * Define if modal has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Define if modal is hidden\n   */\n  @Prop({ mutable: true }) hide: boolean;\n  @Watch('hide')\n  validateHide(newValue: MgModal['hide']): void {\n    if (newValue) {\n      this.componentHide.emit();\n      this.classCollection.add(this.classHide);\n      document.body.style.overflow = this.bodyOverflow;\n      // reset focus handlers\n      this.getLastFocusableElement()?.removeEventListener('keydown', this.handleLastFocusableElement);\n      if (this.modalFocusableElements.length > 0) this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);\n    } else if (newValue === false) {\n      this.componentShow.emit();\n      this.classCollection.delete(this.classHide);\n      document.body.style.overflow = 'hidden';\n      this.setFocus();\n    }\n  }\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Define if component is using content slot\n   */\n  @State() hasContent = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-modal']);\n\n  /**\n   * Emmited event when modal is diplayed\n   */\n  @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n  /**\n   * Emmited event when modal is hidden\n   */\n  @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n  /**\n   * Handle 'escape' key down\n   * @param event - keydown event\n   */\n  @Listen('keydown', {\n    target: 'window',\n  })\n  handleKeyDown(event: KeyboardEvent): void {\n    // we can use 'Escape button\" when this not a blocking modal, induced by closeButton value.\n    if (this.closeButton && event.key === 'Escape') {\n      this.hide = true;\n    }\n  }\n\n  /**\n   * Handle last focusable element\n   * @param event - keyboard event\n   */\n  private handleLastFocusableElement = (event): void => {\n    if (event.key === 'Tab' && !event.shiftKey) {\n      event.preventDefault();\n      this.modalFocusableElements[0].focus();\n    }\n  };\n\n  /**\n   * Handle first focusable element\n   * @param event - keyboard event\n   */\n  private handleFirstFocusableElement = (event): void => {\n    if (event.key === 'Tab' && event.shiftKey) {\n      event.preventDefault();\n      this.getLastFocusableElement().focus();\n    }\n  };\n\n  /**\n   * Get last focusablmeElement\n   * @returns last modal focusable element\n   */\n  private getLastFocusableElement = (): HTMLElement | null => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);\n\n  /**\n   * Method to manage focus on modal focusable elements\n   */\n  private setFocus = (): void => {\n    // Get all focusable elements\n    const slottedFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));\n    // If close button is enabled or at least one of the slotted element is focusable\n    if (this.closeButton || slottedFocusableElements.length > 0) {\n      // Check if slotted focusable elements have shadowDom with focusable elements\n      this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {\n        acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);\n        return acc;\n      }, []);\n      // When close button is enabled it's the first focusable element.\n      if (this.closeButton && this.closeButtonElement !== undefined) {\n        this.modalFocusableElements.unshift(this.closeButtonElement);\n      }\n      // Add event listener on last element\n      this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);\n      // Add event listener on first element (case shift + tab)\n      this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);\n    }\n  };\n\n  /*************\n   * Handlers *\n   *************/\n\n  /**\n   * Handle close button\n   */\n  private handleClose = (): void => {\n    this.hide = true;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Store body overflow\n    this.bodyOverflow = document.body.style.overflow;\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n    this.hasContent = this.element.querySelector('[slot=\"content\"]') !== null;\n    this.titleId = `${this.identifier}-title`;\n    this.validateModalTitle(this.modalTitle);\n    this.validateHide(this.hide);\n    this.validateDialogRole(this.dialogRole);\n  }\n\n  /**\n   * Add observer on component to set focus when displayed\n   */\n  componentDidLoad(): void {\n    new MutationObserver(mutationList => {\n      // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation\n      if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes((mutation.target as HTMLElement).ariaHidden))) {\n        // Set focus on first element\n        this.modalFocusableElements[0].focus();\n      }\n    }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div role={this.dialogRole} id={this.identifier} class={this.classCollection.join()} tabindex=\"-1\" aria-labelledby={this.titleId} aria-modal=\"true\" aria-hidden={this.hide}>\n        <mg-card>\n          <div class=\"mg-c-modal__dialog\">\n            <header class=\"mg-c-modal__header\">\n              {this.closeButton && (\n                <span class=\"mg-c-modal__close-button\">\n                  <mg-button\n                    identifier={`${this.identifier}-close-button`}\n                    is-icon\n                    variant=\"flat\"\n                    label={this.messages.modal.closeButton}\n                    onClick={this.handleClose}\n                    ref={(el: HTMLMgButtonElement) => {\n                      if (el !== null) {\n                        // store closeButton Element\n                        this.closeButtonElement = el;\n                        // add close button element to modalFocusableElements when it is render\n                        this.modalFocusableElements.unshift(this.closeButtonElement);\n                      }\n                    }}\n                  >\n                    <mg-icon icon=\"cross\"></mg-icon>\n                  </mg-button>\n                </span>\n              )}\n              <h1 class=\"mg-c-modal__title\" id={this.titleId}>\n                {this.modalTitle}\n              </h1>\n            </header>\n\n            {this.hasContent && (\n              <article class=\"mg-c-modal__content\">\n                <slot name=\"content\"></slot>\n              </article>\n            )}\n\n            {this.hasActions && (\n              <footer class=\"mg-c-modal__footer\">\n                <slot name=\"actions\"></slot>\n              </footer>\n            )}\n          </div>\n        </mg-card>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-modal.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-modal/mg-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Watch, Element, Event, EventEmitter, Listen } from '@stencil/core';\nimport { createID, ClassList, focusableElements, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { DialogRoleType, dialogRoles } from './mg-modal.conf';\n\n/*\n * @slot content - Modal content\n * @slot actions - Actions content\n */\n@Component({\n  tag: 'mg-modal',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-modal.css',\n  shadow: true,\n})\nexport class MgModal {\n  /************\n   * Internal *\n   ************/\n\n  // Modal focusable elements\n  private modalFocusableElements: HTMLElement[] = [];\n  private closeButtonElement: HTMLMgButtonElement;\n\n  // Classes\n  private readonly classHide = 'mg-c-modal--hide';\n\n  // IDs\n  private titleId = '';\n\n  // Locales\n  private messages;\n\n  // body overflow default\n  private bodyOverflow: string;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgModalElement;\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-modal');\n\n  /**\n   * Modal dialog role.\n   */\n  @Prop() dialogRole: DialogRoleType = dialogRoles[0];\n  @Watch('dialogRole')\n  validateDialogRole(newValue: MgModal['dialogRole']): void {\n    if (!dialogRoles.includes(newValue)) throw new Error(`<mg-modal> prop \"dialogRole\" must be one of: ${dialogRoles.join(', ')}.`);\n  }\n\n  /**\n   * Displayed modal title\n   */\n  @Prop() modalTitle!: string;\n  @Watch('modalTitle')\n  validateModalTitle(newValue: MgModal['modalTitle']): void {\n    if (!isValidString(newValue)) {\n      throw new Error('<mg-modal> prop \"modalTitle\" is required.');\n    }\n  }\n\n  /**\n   * Define if modal has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Define if modal is hidden\n   */\n  @Prop({ mutable: true }) hide: boolean;\n  @Watch('hide')\n  validateHide(newValue: MgModal['hide']): void {\n    if (newValue) {\n      this.componentHide.emit();\n      this.classCollection.add(this.classHide);\n      document.body.style.overflow = this.bodyOverflow;\n      // reset focus handlers\n      this.getLastFocusableElement()?.removeEventListener('keydown', this.handleLastFocusableElement);\n      if (this.modalFocusableElements.length > 0) this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);\n    } else if (newValue === false) {\n      this.componentShow.emit();\n      this.classCollection.delete(this.classHide);\n      document.body.style.overflow = 'hidden';\n      this.setFocus();\n    }\n  }\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Define if component is using content slot\n   */\n  @State() hasContent = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-modal']);\n\n  /**\n   * Emmited event when modal is diplayed\n   */\n  @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n  /**\n   * Emmited event when modal is hidden\n   */\n  @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n  /**\n   * Handle 'escape' key down\n   * @param event - keydown event\n   */\n  @Listen('keydown', {\n    target: 'window',\n  })\n  handleKeyDown(event: KeyboardEvent): void {\n    // we can use 'Escape button\" when this not a blocking modal, induced by closeButton value.\n    if (this.closeButton && event.key === 'Escape') {\n      this.hide = true;\n    }\n  }\n\n  /**\n   * Handle last focusable element\n   * @param event - keyboard event\n   */\n  private handleLastFocusableElement = (event): void => {\n    if (event.key === 'Tab' && !event.shiftKey) {\n      event.preventDefault();\n      this.modalFocusableElements[0].focus();\n    }\n  };\n\n  /**\n   * Handle first focusable element\n   * @param event - keyboard event\n   */\n  private handleFirstFocusableElement = (event): void => {\n    if (event.key === 'Tab' && event.shiftKey) {\n      event.preventDefault();\n      this.getLastFocusableElement().focus();\n    }\n  };\n\n  /**\n   * Get last focusablmeElement\n   * @returns last modal focusable element\n   */\n  private getLastFocusableElement = (): HTMLElement | null => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);\n\n  /**\n   * Method to manage focus on modal focusable elements\n   */\n  private setFocus = (): void => {\n    // Get all focusable elements\n    const slottedFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));\n    // If close button is enabled or at least one of the slotted element is focusable\n    if (this.closeButton || slottedFocusableElements.length > 0) {\n      // Check if slotted focusable elements have shadowDom with focusable elements\n      this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {\n        acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);\n        return acc;\n      }, []);\n      // When close button is enabled it's the first focusable element.\n      if (this.closeButton && this.closeButtonElement !== undefined) {\n        this.modalFocusableElements.unshift(this.closeButtonElement);\n      }\n      // Add event listener on last element\n      this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);\n      // Add event listener on first element (case shift + tab)\n      this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);\n    }\n  };\n\n  /*************\n   * Handlers *\n   *************/\n\n  /**\n   * Handle close button\n   */\n  private handleClose = (): void => {\n    this.hide = true;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Store body overflow\n    this.bodyOverflow = document.body.style.overflow;\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n    this.hasContent = this.element.querySelector('[slot=\"content\"]') !== null;\n    this.titleId = `${this.identifier}-title`;\n    this.validateModalTitle(this.modalTitle);\n    this.validateHide(this.hide);\n    this.validateDialogRole(this.dialogRole);\n  }\n\n  /**\n   * Add observer on component to set focus when displayed\n   */\n  componentDidLoad(): void {\n    new MutationObserver(mutationList => {\n      // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation\n      if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes((mutation.target as HTMLElement).ariaHidden))) {\n        // Set focus on first element\n        this.modalFocusableElements[0].focus();\n      }\n    }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div role={this.dialogRole} id={this.identifier} class={this.classCollection.join()} tabindex=\"-1\" aria-labelledby={this.titleId} aria-modal=\"true\" aria-hidden={this.hide}>\n        <mg-card>\n          <div class=\"mg-c-modal__dialog\">\n            <header class=\"mg-c-modal__header\">\n              {this.closeButton && (\n                <span class=\"mg-c-modal__close-button\">\n                  <mg-button\n                    identifier={`${this.identifier}-close-button`}\n                    is-icon\n                    variant=\"flat\"\n                    label={this.messages.modal.closeButton}\n                    onClick={this.handleClose}\n                    ref={(el: HTMLMgButtonElement) => {\n                      if (el !== null) {\n                        // store closeButton Element\n                        this.closeButtonElement = el;\n                        // add close button element to modalFocusableElements when it is render\n                        this.modalFocusableElements.unshift(this.closeButtonElement);\n                      }\n                    }}\n                  >\n                    <mg-icon icon=\"cross\"></mg-icon>\n                  </mg-button>\n                </span>\n              )}\n              <h1 class=\"mg-c-modal__title\" id={this.titleId}>\n                {this.modalTitle}\n              </h1>\n            </header>\n\n            {this.hasContent && (\n              <article class=\"mg-c-modal__content\">\n                <slot name=\"content\"></slot>\n              </article>\n            )}\n\n            {this.hasActions && (\n              <footer class=\"mg-c-modal__footer\">\n                <slot name=\"actions\"></slot>\n              </footer>\n            )}\n          </div>\n        </mg-card>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -95,10 +95,10 @@ export class MgPagination {
      * @returns HTML Element
      */
     render() {
-        const navigationActionButton = (disabled, action) => (h("mg-button", { key: '117897c3594d7b6322e85c659020083a78710979', identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
+        const navigationActionButton = (disabled, action) => (h("mg-button", { key: '762b566216021bdfdcbfea249c7a1dbfa409c831', identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
             // eslint-disable-next-line react/jsx-no-bind
             onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
-        return (h(Host, { key: '83d52cfe35e330057417a26bdb7ae528255e3e5e', hidden: this.totalPages < 2 }, h("nav", { key: 'cdd2ab05092bfea927719b354c12629f90e44472', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), h("span", { key: '501099379d9ca210abed5bb10726c56383b15c6f', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), h("span", { key: 'e3ce99fb7aaf68322176c6135d70e90f910f6bdd', class: { 'mg-u-visually-hidden': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
+        return (h(Host, { key: '9bfc7cd582798b28f847f1be74bc966a10afaf01', hidden: this.totalPages < 2 }, h("nav", { key: 'e79017c814781d4452868bb2f50a71682c4da1f1', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), h("span", { key: '5e9cdd8126ee7d00db9199d5b738d76f651c8585', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), h("span", { key: '55d248aabdc782a0e3a06b28fd2df36aca4733b0', class: { 'mg-u-visually-hidden': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
     }
     static get is() { return "mg-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -158,7 +158,7 @@ export class MgPagination {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Hide navigation label"
@@ -175,7 +175,7 @@ export class MgPagination {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Hide select input"

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

@@ -1 +1 @@
-{"version":3,"file":"mg-pagination.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-pagination/mg-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID } from '@mgdis/stencil-helpers';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/**\n * Range generator\n *\n * ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n *\n * range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n */\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);\n\n@Component({\n  tag: 'mg-pagination',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-pagination.css',\n  shadow: true,\n})\nexport class MgPagination {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPaginationElement;\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-pagination');\n\n  /**\n   * Panignation label. Is a short description.\n   * Customize default value can be usefull to improve accessibility\n   */\n  @Prop({ mutable: true }) label: string;\n\n  /**\n   * Hide navigation label\n   */\n  @Prop() hideNavigationLabels: boolean;\n\n  /**\n   * Hide select input\n   */\n  @Prop() hidePageCount: boolean;\n\n  /**\n   * Component total pages\n   */\n  @Prop() totalPages = 1;\n  @Watch('totalPages')\n  validateTotalPages(newValue: number): void {\n    if (newValue < 1) {\n      throw new Error('<mg-pagination> prop \"totalPages\" must be greater than 0');\n    }\n  }\n\n  /**\n   * Component current page\n   */\n  @Prop({ reflect: true, mutable: true }) currentPage = 1;\n  @Watch('currentPage')\n  validateCurrentPage(newValue: number): void {\n    if (newValue < 1) {\n      throw new Error('<mg-pagination> prop \"currentPage\" must be greater than 0');\n    } else if (newValue > this.totalPages) {\n      throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page');\n    }\n\n    this.currentPageChange.emit(newValue);\n  }\n\n  /**\n   * Emmited event when current page change\n   */\n  @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n  /**\n   * Change current page from target\n   * @param target - target page\n   */\n  private goToPage = (target: number): void => {\n    this.currentPage = target;\n  };\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * select handler\n   * @param event - value change event\n   */\n  private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n    const to = Number(event.target.value);\n    this.goToPage(to > 0 ? to : 1);\n  };\n\n  /**\n   * Go to 'previous/next' page button handler\n   * @param action - navigation action\n   * @param disabled - button disable state\n   */\n  private handleGoToPage = (action: string, disabled: boolean): void => {\n    !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateTotalPages(this.totalPages);\n    this.validateCurrentPage(this.currentPage);\n    // Set default label\n    if (this.label === undefined || this.label === '') {\n      this.label = this.messages.pagination.label;\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const navigationActionButton = (disabled: boolean, action: string) => (\n      <mg-button\n        identifier={`${this.identifier}-button-${action}`}\n        label={this.messages.pagination[`${action}Page`]}\n        // eslint-disable-next-line react/jsx-no-bind\n        onClick={() => this.handleGoToPage(action, disabled)}\n        disabled={disabled}\n        variant=\"flat\"\n        isIcon={this.hideNavigationLabels}\n      >\n        {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n        {!this.hideNavigationLabels && this.messages.general[action]}\n        {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n      </mg-button>\n    );\n\n    return (\n      <Host hidden={this.totalPages < 2}>\n        <nav role=\"navigation\" aria-label={this.label} id={this.identifier} class={{ 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount }}>\n          {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n          {!this.hidePageCount && (\n            <mg-input-select\n              identifier={`${this.identifier}-select`}\n              items={range(1, this.totalPages).map(page => page.toString())}\n              label={this.messages.pagination.selectPage}\n              label-hide={true}\n              on-value-change={this.handleSelect}\n              value={this.currentPage.toString()}\n              placeholder-hide\n            ></mg-input-select>\n          )}\n          <span class=\"mg-u-visually-hidden\">\n            {this.messages.pagination.page} {this.currentPage}\n          </span>\n          <span class={{ 'mg-u-visually-hidden': this.hidePageCount }}>\n            / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n          </span>\n          {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-pagination.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-pagination/mg-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID } from '@mgdis/stencil-helpers';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/**\n * Range generator\n *\n * ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n *\n * range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n */\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);\n\n@Component({\n  tag: 'mg-pagination',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-pagination.css',\n  shadow: true,\n})\nexport class MgPagination {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPaginationElement;\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-pagination');\n\n  /**\n   * Panignation label. Is a short description.\n   * Customize default value can be usefull to improve accessibility\n   */\n  @Prop({ mutable: true }) label: string;\n\n  /**\n   * Hide navigation label\n   */\n  @Prop() hideNavigationLabels?: boolean;\n\n  /**\n   * Hide select input\n   */\n  @Prop() hidePageCount?: boolean;\n\n  /**\n   * Component total pages\n   */\n  @Prop() totalPages = 1;\n  @Watch('totalPages')\n  validateTotalPages(newValue: number): void {\n    if (newValue < 1) {\n      throw new Error('<mg-pagination> prop \"totalPages\" must be greater than 0');\n    }\n  }\n\n  /**\n   * Component current page\n   */\n  @Prop({ reflect: true, mutable: true }) currentPage = 1;\n  @Watch('currentPage')\n  validateCurrentPage(newValue: number): void {\n    if (newValue < 1) {\n      throw new Error('<mg-pagination> prop \"currentPage\" must be greater than 0');\n    } else if (newValue > this.totalPages) {\n      throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page');\n    }\n\n    this.currentPageChange.emit(newValue);\n  }\n\n  /**\n   * Emmited event when current page change\n   */\n  @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n  /**\n   * Change current page from target\n   * @param target - target page\n   */\n  private goToPage = (target: number): void => {\n    this.currentPage = target;\n  };\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * select handler\n   * @param event - value change event\n   */\n  private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n    const to = Number(event.target.value);\n    this.goToPage(to > 0 ? to : 1);\n  };\n\n  /**\n   * Go to 'previous/next' page button handler\n   * @param action - navigation action\n   * @param disabled - button disable state\n   */\n  private handleGoToPage = (action: string, disabled: boolean): void => {\n    !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateTotalPages(this.totalPages);\n    this.validateCurrentPage(this.currentPage);\n    // Set default label\n    if (this.label === undefined || this.label === '') {\n      this.label = this.messages.pagination.label;\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const navigationActionButton = (disabled: boolean, action: string) => (\n      <mg-button\n        identifier={`${this.identifier}-button-${action}`}\n        label={this.messages.pagination[`${action}Page`]}\n        // eslint-disable-next-line react/jsx-no-bind\n        onClick={() => this.handleGoToPage(action, disabled)}\n        disabled={disabled}\n        variant=\"flat\"\n        isIcon={this.hideNavigationLabels}\n      >\n        {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n        {!this.hideNavigationLabels && this.messages.general[action]}\n        {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n      </mg-button>\n    );\n\n    return (\n      <Host hidden={this.totalPages < 2}>\n        <nav role=\"navigation\" aria-label={this.label} id={this.identifier} class={{ 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount }}>\n          {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n          {!this.hidePageCount && (\n            <mg-input-select\n              identifier={`${this.identifier}-select`}\n              items={range(1, this.totalPages).map(page => page.toString())}\n              label={this.messages.pagination.selectPage}\n              label-hide={true}\n              on-value-change={this.handleSelect}\n              value={this.currentPage.toString()}\n              placeholder-hide\n            ></mg-input-select>\n          )}\n          <span class=\"mg-u-visually-hidden\">\n            {this.messages.pagination.page} {this.currentPage}\n          </span>\n          <span class={{ 'mg-u-visually-hidden': this.hidePageCount }}>\n            / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n          </span>\n          {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -2,6 +2,10 @@ import { h } from "@stencil/core";
 import { createID, ClassList, isValidString } from "@mgdis/stencil-helpers";
 import { initLocales } from "../../../locales";
 import { expandToggleDisplays, titlePositions } from "./mg-panel.conf";
+/*
+ * @slot - Panel content
+ * @slot header-right - Header right panel content
+ */
 export class MgPanel {
     constructor() {
         /************
@@ -161,7 +165,7 @@ export class MgPanel {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: '75410a66bcf5910175605ee2e4c7a56efb2d5d21', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '208cdc102ba7874b90f2eecd91026b5ed0c609af' }, h("header", { key: '2beb22b8e9e8e985db5a169207b13e10ed63fa8e', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '06cf2f69238065eb7388c9dc4c836eb033336a31', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '0b64911842875cb212136ffde476136d925dde01' })))));
+        return (h("section", { key: '75509a6a7fdba04cea71380d46f5d0b66bbc9602', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '8ec07f87babeae31db85b5181d5884119010e8ce' }, h("header", { key: '045e43ab54c95691e1c4b758504bffc995f63340', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '096d93e147c30c6ece4a6a3f5ee3acff05dc5143', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '37f2d61903662b519e583eca0ca90c044386e539' })))));
     }
     static get is() { return "mg-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -221,7 +225,7 @@ export class MgPanel {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Panel title pattern"
@@ -238,7 +242,7 @@ export class MgPanel {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Panel title pattern error message"
@@ -339,7 +343,7 @@ export class MgPanel {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Disable possibility to toggle expand"