@mgdis/mg-components 5.29.0 → 6.1.0

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

@@ -1,123 +1,56 @@
 import { h } from "@stencil/core";
-import { createID, ClassList, focusableElements, isValidString } from "@mgdis/stencil-helpers";
+import { createID, ClassList, isValidString, toString, isValideID } from "@mgdis/stencil-helpers";
 import { initLocales } from "../../../locales";
 import { dialogRoles } from "./mg-modal.conf";
-/*
- * @slot content - Modal content
+/**
+ * @slot - Modal content
  * @slot actions - Actions content
  */
 export class MgModal {
     constructor() {
-        /************
-         * Internal *
-         ************/
-        // Modal focusable elements
-        this.modalFocusableElements = [];
-        // Classes
-        this.classHide = 'mg-c-modal--hide';
         // IDs
         this.titleId = '';
+        /***********
+         * Handles *
+         ***********/
         /**
-         * Handle last focusable element
-         * @param event - keyboard event
-         */
-        this.handleLastFocusableElement = (event) => {
-            if (event.key === 'Tab' && !event.shiftKey) {
-                event.preventDefault();
-                this.modalFocusableElements[0].focus();
-            }
-        };
-        /**
-         * Handle first focusable element
-         * @param event - keyboard event
-         */
-        this.handleFirstFocusableElement = (event) => {
-            if (event.key === 'Tab' && event.shiftKey) {
-                event.preventDefault();
-                this.getLastFocusableElement().focus();
-            }
-        };
-        /**
-         * Get last focusablmeElement
-         * @returns last modal focusable element
-         */
-        this.getLastFocusableElement = () => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);
-        /**
-         * Method to manage focus on modal focusable elements
-         */
-        this.setFocus = () => {
-            // Get all focusable elements
-            const slottedFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));
-            // If close button is enabled or at least one of the slotted element is focusable
-            if (this.closeButton || slottedFocusableElements.length > 0) {
-                // Check if slotted focusable elements have shadowDom with focusable elements
-                this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {
-                    acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);
-                    return acc;
-                }, []);
-                // When close button is enabled it's the first focusable element.
-                if (this.closeButton && this.closeButtonElement !== undefined) {
-                    this.modalFocusableElements.unshift(this.closeButtonElement);
-                }
-                // Add event listener on last element
-                this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);
-                // Add event listener on first element (case shift + tab)
-                this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);
-            }
-        };
-        /*************
-         * Handlers *
-         *************/
-        /**
-         * Handle close button
+         * Closes the modal.
          */
         this.handleClose = () => {
-            this.hide = true;
+            this.open = false;
         };
         this.identifier = createID('mg-modal');
         this.dialogRole = dialogRoles[0];
         this.modalTitle = undefined;
         this.closeButton = false;
-        this.hide = undefined;
+        this.open = false;
         this.hasActions = false;
-        this.hasContent = false;
         this.classCollection = new ClassList(['mg-c-modal']);
     }
+    watchIdentifier(newValue) {
+        if (!isValideID(newValue)) {
+            throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
+        }
+    }
     validateDialogRole(newValue) {
         if (!dialogRoles.includes(newValue))
-            throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
+            throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${toString(newValue)}.`);
     }
     validateModalTitle(newValue) {
         if (!isValidString(newValue)) {
-            throw new Error('<mg-modal> prop "modalTitle" is required.');
+            throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${toString(newValue)}.`);
         }
     }
-    validateHide(newValue) {
-        var _a;
+    watchOpen(newValue) {
         if (newValue) {
-            this.componentHide.emit();
-            this.classCollection.add(this.classHide);
-            document.body.style.overflow = this.bodyOverflow;
-            // reset focus handlers
-            (_a = this.getLastFocusableElement()) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleLastFocusableElement);
-            if (this.modalFocusableElements.length > 0)
-                this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);
-        }
-        else if (newValue === false) {
+            this.dialog.showModal();
             this.componentShow.emit();
-            this.classCollection.delete(this.classHide);
             document.body.style.overflow = 'hidden';
-            this.setFocus();
         }
-    }
-    /**
-     * Handle 'escape' key down
-     * @param event - keydown event
-     */
-    handleKeyDown(event) {
-        // we can use 'Escape button" when this not a blocking modal, induced by closeButton value.
-        if (this.closeButton && event.key === 'Escape') {
-            this.hide = true;
+        else {
+            this.dialog.close();
+            this.componentHide.emit();
+            document.body.style.overflow = this.bodyOverflow;
         }
     }
     /*************
@@ -133,37 +66,33 @@ export class MgModal {
         this.messages = initLocales(this.element).messages;
         // Validate
         this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
-        this.hasContent = this.element.querySelector('[slot="content"]') !== null;
         this.titleId = `${this.identifier}-title`;
+        this.watchIdentifier(this.identifier);
         this.validateModalTitle(this.modalTitle);
-        this.validateHide(this.hide);
         this.validateDialogRole(this.dialogRole);
     }
     /**
-     * Add observer on component to set focus when displayed
+     * Define open state on component load
      */
     componentDidLoad() {
-        new MutationObserver(mutationList => {
-            // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation
-            if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes(mutation.target.ariaHidden))) {
-                // Set focus on first element
-                this.modalFocusableElements[0].focus();
-            }
-        }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });
+        this.watchOpen(this.open);
+        // update open prop when use escape key
+        this.dialog.addEventListener('close', () => {
+            this.open = false;
+        });
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '472cae1bd3a5291e14265d00ee594c726f179a1f', 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: '870e59e1126988fefe5c04380b5bbd593e8629af' }, h("div", { key: '9d49127cf8bf68b55549f379b760c6597b1a2d6c', class: "mg-c-modal__dialog" }, h("header", { key: 'b8629ece3524f5dd64b248080fa06f21980ddf7b', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'f38d648290d1db901fb2cc09ae8b8ed13bf7e0b6', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'b12aecfd77b5fb7588c3b2f6487c10c2cba9f097', identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
+        return (h("dialog", { key: '00881e2aa895d9b4bc48f721460a0f65f3ba1042', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, 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);
+                    this.dialog = el;
                 }
-            } }, h("mg-icon", { key: '2e5590b14d6b4da659f4f6d8630606a9bafdb9c6', icon: "cross" })))), h("h1", { key: '6ca12328af9955d0716c330c32004c68cca11b4c', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { key: '0873f01de1bfe75c2e91ea89b762d433006e7878', class: "mg-c-modal__content" }, h("slot", { key: 'dd8fd2e6527d640c40261dcbae76846d107337dc', name: "content" }))), this.hasActions && (h("footer", { key: 'e97c6d3ad9bbca892afcabeb5b15e63425d05070', class: "mg-c-modal__footer" }, h("slot", { key: 'c865f0b4244f5ea4ed5e7733813a8b10bc985504', name: "actions" })))))));
+            } }, h("mg-card", { key: '3fdda688cfa51f9f96403cd918d7469a1be5f640' }, h("div", { key: 'f7f7dd207d50ed6a50cb13043acd6b1662197b8f', class: "mg-c-modal__dialog" }, h("header", { key: '9b6f2fbc0aba552d4f921df08f5e0301fcb996d1', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'cbe67968704c82cdcf640b829daf4367e31afc87', class: "mg-c-modal__close-button" }, h("mg-button", { key: '050ce6bdd52df7363f37a7e785e7de82e5f28fc8', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton,
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick: this.handleClose }, h("mg-icon", { key: '256f467d254ba056505d8b0fdffbbef0bc426b37', icon: "cross" })))), h("h1", { key: '9812cb37e4cc713309191d53a83526b1970389c1', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: 'a83b1be738c8556d60e1c0c74c7adb24c751bdf9', class: "mg-c-modal__content" }, h("slot", { key: '3431c31ac066e43748063cc28daa785ae39f7b25' })), this.hasActions && (h("footer", { key: '0080243246ca901e0566fd947e74737c12fc2426', class: "mg-c-modal__footer" }, h("slot", { key: '044104989259ebd5a3ca8b84a24b7b1e844b7d7e', name: "actions" })))))));
     }
     static get is() { return "mg-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -256,7 +185,7 @@ export class MgModal {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "hide": {
+            "open": {
                 "type": "boolean",
                 "mutable": true,
                 "complexType": {
@@ -268,17 +197,17 @@ export class MgModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Define if modal is hidden"
+                    "text": "Define if modal is open"
                 },
-                "attribute": "hide",
-                "reflect": false
+                "attribute": "open",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
             "hasActions": {},
-            "hasContent": {},
             "classCollection": {}
         };
     }
@@ -318,23 +247,17 @@ export class MgModal {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "identifier",
+                "methodName": "watchIdentifier"
+            }, {
                 "propName": "dialogRole",
                 "methodName": "validateDialogRole"
             }, {
                 "propName": "modalTitle",
                 "methodName": "validateModalTitle"
             }, {
-                "propName": "hide",
-                "methodName": "validateHide"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "handleKeyDown",
-                "target": "window",
-                "capture": false,
-                "passive": false
+                "propName": "open",
+                "methodName": "watchOpen"
             }];
     }
 }

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/*\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"]}
+{"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 } from '@stencil/core';\nimport { createID, ClassList, isValidString, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { DialogRoleType, dialogRoles } from './mg-modal.conf';\n\n/**\n * @slot - 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 dialog: HTMLDialogElement;\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  @Watch('identifier')\n  watchIdentifier(newValue: MgModal['identifier']): void {\n    if (!isValideID(newValue)) {\n      throw new Error(`<mg-modal> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    }\n  }\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(', ')}. Passed value: ${toString(newValue)}.`);\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. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define if modal has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Define if modal is open\n   */\n  @Prop({ mutable: true }) open = false;\n  @Watch('open')\n  watchOpen(newValue: boolean): void {\n    if (newValue) {\n      this.dialog.showModal();\n      this.componentShow.emit();\n      document.body.style.overflow = 'hidden';\n    } else {\n      this.dialog.close();\n      this.componentHide.emit();\n      document.body.style.overflow = this.bodyOverflow;\n    }\n  }\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = 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   * Handles *\n   ***********/\n\n  /**\n   * Closes the modal.\n   */\n  private handleClose = (): void => {\n    this.open = false;\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.titleId = `${this.identifier}-title`;\n    this.watchIdentifier(this.identifier);\n    this.validateModalTitle(this.modalTitle);\n    this.validateDialogRole(this.dialogRole);\n  }\n\n  /**\n   * Define open state on component load\n   */\n  componentDidLoad(): void {\n    this.watchOpen(this.open);\n    // update open prop when use escape key\n    this.dialog.addEventListener('close', () => {\n      this.open = false;\n    });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <dialog\n        role={this.dialogRole}\n        id={this.identifier}\n        class={this.classCollection.join()}\n        aria-labelledby={this.titleId}\n        ref={(el: HTMLDialogElement) => {\n          if (el !== null) {\n            this.dialog = el;\n          }\n        }}\n      >\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                    is-icon\n                    variant=\"flat\"\n                    label={this.messages.modal.closeButton}\n                    // eslint-disable-next-line react/jsx-no-bind\n                    onClick={this.handleClose}\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            <article class=\"mg-c-modal__content\">\n              <slot></slot>\n            </article>\n            {this.hasActions && (\n              <footer class=\"mg-c-modal__footer\">\n                <slot name=\"actions\"></slot>\n              </footer>\n            )}\n          </div>\n        </mg-card>\n      </dialog>\n    );\n  }\n}\n"]}

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

@@ -1,6 +1,5 @@
-export var NavigationAction;
-(function (NavigationAction) {
-    NavigationAction["NEXT"] = "next";
-    NavigationAction["PREVIOUS"] = "previous";
-})(NavigationAction || (NavigationAction = {}));
+export const NavigationAction = {
+    NEXT: 'next',
+    PREVIOUS: 'previous',
+};
 //# sourceMappingURL=mg-pagination.conf.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"mg-pagination.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-pagination/mg-pagination.conf.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC1B,iCAAa,CAAA;IACb,yCAAqB,CAAA;AACvB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B","sourcesContent":["export enum NavigationAction {\n  NEXT = 'next',\n  PREVIOUS = 'previous',\n}\n"]}
+{"version":3,"file":"mg-pagination.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-pagination/mg-pagination.conf.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,UAAU;CACrB,CAAC","sourcesContent":["export const NavigationAction = {\n  NEXT: 'next',\n  PREVIOUS: 'previous',\n};\n"]}

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { createID } from "@mgdis/stencil-helpers";
+import { createID, isValideID, toString } from "@mgdis/stencil-helpers";
 import { NavigationAction } from "./mg-pagination.conf";
 import { initLocales } from "./../../../locales";
 /**
@@ -59,17 +59,22 @@ export class MgPagination {
         this.totalPages = 1;
         this.currentPage = 1;
     }
+    watchIdentifier(newValue) {
+        if (!isValideID(newValue)) {
+            console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
+        }
+    }
     validateTotalPages(newValue) {
         if (newValue < 1) {
-            throw new Error('<mg-pagination> prop "totalPages" must be greater than 0');
+            throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${toString(newValue)}.`);
         }
     }
     validateCurrentPage(newValue) {
         if (newValue < 1) {
-            throw new Error('<mg-pagination> prop "currentPage" must be greater than 0');
+            throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${toString(newValue)}.`);
         }
         else if (newValue > this.totalPages) {
-            throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page');
+            throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page.');
         }
         this.currentPageChange.emit(newValue);
     }
@@ -83,6 +88,7 @@ export class MgPagination {
         // Get locales
         this.messages = initLocales(this.element).messages;
         // Validate
+        this.watchIdentifier(this.identifier);
         this.validateTotalPages(this.totalPages);
         this.validateCurrentPage(this.currentPage);
         // Set default label
@@ -95,10 +101,10 @@ export class MgPagination {
      * @returns HTML Element
      */
     render() {
-        const navigationActionButton = (disabled, action) => (h("mg-button", { key: 'b708c70615e0fb49d1628dc6cf83e54ea5ab0a61', identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
+        const navigationActionButton = (disabled, action) => (h("mg-button", { key: '271af13e1b68e4fd00f46e99466d3fb7656b7892', 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", { key: '1c8375c68fd7729fb7ea91220ffb4f7267ac3a47', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { key: '1af0c20c2d5ce86e593b2eca82dee410a782c193', icon: "chevron-right" })));
-        return (h(Host, { key: '4490a0b9d3c0ac55519d052b4d76ab8f682f0f3a', hidden: this.totalPages < 2 }, h("nav", { key: 'eaf362cd327e88290f3af5dcfd1d46fff6178ff9', 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", { key: '06c9786c833302a4ee88ed7f2217875112ee7a20', 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: '7877dbee55a509b13c8cf881154d96bbe1c5cee7', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), h("span", { key: 'd4615625b40108526f7aaa8f8a8505b2a61e43e9', 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))));
+            onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: 'fea9b12c882c49824eef9216dc1e934f5dc8ddab', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { key: 'c91f74667fbd297b1884b5406f3fe14604e943ce', icon: "chevron-right" })));
+        return (h(Host, { key: 'd3c8eb93a223c62239ea6e93f9848da697c93171', hidden: this.totalPages < 2 }, h("nav", { key: '91607b9155cd2194583b7548ae058cafbc495339', 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("div", { key: '2065b5f99eddc5e44e13dc1f03913003dcca44da', class: "mg-c-pagination__page-count" }, h("mg-input-select", { key: '405ff290c7ce715bdbc657e1a83aef1444e64cbe', 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: '6daf535469f5672858d7ae63991ee4cb1f03e04a', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), "/ ", 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"; }
@@ -242,6 +248,9 @@ export class MgPagination {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "identifier",
+                "methodName": "watchIdentifier"
+            }, {
                 "propName": "totalPages",
                 "methodName": "validateTotalPages"
             }, {

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, isValideID, toString } 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  @Watch('identifier')\n  watchIdentifier(newValue: MgPagination['identifier']): void {\n    if (!isValideID(newValue)) {\n      console.error(`<mg-pagination> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    }\n  }\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. Passed value: ${toString(newValue)}.`);\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. Passed value: ${toString(newValue)}.`);\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.watchIdentifier(this.identifier);\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        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            <div class=\"mg-c-pagination__page-count\">\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              <span class=\"mg-u-visually-hidden\">\n                {this.messages.pagination.page} {this.currentPage}\n              </span>\n              / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n            </div>\n          )}\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

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { createID, ClassList, isValidString } from "@mgdis/stencil-helpers";
+import { createID, ClassList, isValidString, toString, isValideID } 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
  */
@@ -64,17 +64,17 @@ export class MgPanel {
          * Render collapse button
          * @returns collpase button
          */
-        this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
+        this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
         /**
          * Render edit button
          * @returns edit Button
          */
-        this.renderEditButton = () => (h("mg-button", { key: "edit-button", "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, h("mg-icon", { icon: "pen" })));
+        this.renderEditButton = () => (h("mg-button", { key: "edit-button", "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton }, h("mg-icon", { icon: "pen" })));
         /**
          * Render input button
          * @returns edit title input
          */
-        this.renderEditInput = () => (h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: (el) => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))));
+        this.renderEditInput = () => (h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, characterLeftHide: true, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: (el) => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton }, h("mg-icon", { icon: "check" }))));
         /**
          * Render title
          * @returns title element
@@ -113,9 +113,14 @@ export class MgPanel {
         this.isEditing = false;
         this.updatedPanelTitle = undefined;
     }
+    watchIdentifier(newValue) {
+        if (!isValideID(newValue)) {
+            console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
+        }
+    }
     validatePanelTitle(newValue) {
         if (!isValidString(newValue))
-            throw new Error('<mg-panel> prop "panelTitle" is required.');
+            throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${toString(newValue)}.`);
         this.titleChange.emit(newValue);
     }
     validateTitlePattern(newValue) {
@@ -124,14 +129,14 @@ export class MgPanel {
     }
     validateTitlePosition(newValue) {
         if (!titlePositions.includes(newValue))
-            throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}.`);
+            throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${toString(newValue)}.`);
     }
     handleExpanded(newValue) {
         this.expandedChange.emit(newValue);
     }
     validateExpandToggleDisplay(newValue) {
         if (!expandToggleDisplays.includes(newValue))
-            throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}.`);
+            throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${toString(newValue)}.`);
         if (newValue === 'icon' && this.titleEditable)
             this.titleEditable = false;
     }
@@ -145,6 +150,7 @@ export class MgPanel {
         // Get locales
         this.messages = initLocales(this.element).messages;
         // Validate
+        this.watchIdentifier(this.identifier);
         this.validateTitlePattern(this.titlePattern);
         this.validateTitlePattern(this.titlePatternErrorMessage);
         this.validatePanelTitle(this.panelTitle);
@@ -165,7 +171,7 @@ export class MgPanel {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: 'd01136210425cb7790aab87d6c137ba74fc02af5', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '84084da775de623fd20c069de5e49d2542755907' }, h("header", { key: '9f3ef1d0d7b2dc275d0c7b39175e0f775cbb1e1b', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '4b6cd2b1b604515d657368642fe21b21eb33b55b', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '45db8591e0b85ed5e9704dc1a42fa75d24e96e39' })))));
+        return (h("section", { key: '22da4ba224a53f828c659fe8cddf23b911051ca3', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '1180c7e9e7d4e4601205abfa30a592bf93e88cf1' }, h("header", { key: 'db9489a40dceebfd7fed16be67faabf0dfee67bc', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'f25761138798e3965e9310da0e0cc90b1ac0cfe5', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '0c0aa51490734813a5a04e5aec40149c87766e5a' })))));
     }
     static get is() { return "mg-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -406,6 +412,9 @@ export class MgPanel {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "identifier",
+                "methodName": "watchIdentifier"
+            }, {
                 "propName": "panelTitle",
                 "methodName": "validatePanelTitle"
             }, {