@mgdis/mg-components 6.8.0 → 6.10.0

package/dist/components/mg-modal.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { G as Ge, Z as Ze, X as Xe, V as Ve, m as me } from './index.es.js';
+import { P as Pt, Z as Zt, U as Ut, G as Gt, D as De } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$4 } from './mg-button2.js';
 import { d as defineCustomElement$3 } from './mg-card2.js';
@@ -11,7 +11,6 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
 const dialogRoles = ['dialog', 'alertdialog'];
 
 const mgModalCss = "/*!\n * @prop --mg-c-modal-border-radius: Defines the border radius of the modal. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-modal-title-font-size: Defines the font size of the modal title. Default value: `--mg-b-font-size-h3`.\n */:host{--mg-c-card-border-radius:var(--mg-c-modal-border-radius);--mg-c-card-spacing:var(--mg-b-size-16) var(--mg-b-size-24);--mg-c-card-border:none}.mg-c-modal{border:none;background:none;color:inherit}.mg-c-modal[open]{display:flex;padding:var(--mg-b-size-24) var(--mg-b-size-8)}.mg-c-modal::backdrop{background-color:var(--mg-b-color-light);opacity:.85}.mg-c-modal mg-card{display:flex;width:calc(75*var(--mg-b-size-8));max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:var(--mg-b-size-24)}.mg-c-modal__title{margin:0;font-family:var(--mg-b-font-family-heading);font-size:var(--mg-c-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-c-modal-title-font-size);margin-top:calc((var(--mg-b-size-min-height) - var(--mg-c-modal-title-font-size)*var(--mg-b-line-height))/2*-1);margin-right:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2*-1);margin-left:var(--mg-b-size-16);float:right}.mg-c-modal__content{padding:var(--mg-b-size-16);margin:calc(var(--mg-b-size-16)*-1);overflow-y:auto}.mg-c-modal ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
-const MgModalStyle0 = mgModalCss;
 
 const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLElement {
     constructor() {
@@ -27,11 +26,11 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          * If not set, it will be created.
          */
-        this.identifier = Ge('mg-modal');
+        this.identifier = Pt('mg-modal');
         /**
          * Modal dialog role.
          */
-        this.dialogRole = dialogRoles[0];
+        this.dialogRole = 'dialog';
         /**
          * Define if modal has a cross button
          */
@@ -47,7 +46,7 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
         /**
          * Component classes
          */
-        this.classCollection = new Ze(['mg-c-modal']);
+        this.classCollection = new Zt(['mg-c-modal']);
         /***********
          * Handles *
          ***********/
@@ -60,17 +59,17 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
         };
     }
     watchIdentifier(newValue) {
-        if (!Xe(newValue)) {
-            throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${Ve(newValue)}.`);
+        if (!Ut(newValue)) {
+            throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
         }
     }
     validateDialogRole(newValue) {
         if (!dialogRoles.includes(newValue))
-            throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${Ve(newValue)}.`);
+            throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${Gt(newValue)}.`);
     }
     validateModalTitle(newValue) {
-        if (!me(newValue)) {
-            throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${Ve(newValue)}.`);
+        if (!De(newValue)) {
+            throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${Gt(newValue)}.`);
         }
     }
     watchOpen(newValue) {
@@ -119,11 +118,11 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
      * @returns HTML Element
      */
     render() {
-        return (h("dialog", { key: 'd9bc9c48122e4a607122ad62afb1229061860e70', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
+        return (h("dialog", { key: '4b7346b707b895a8a110bb7553f0db32d1c5778c', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
                 if (el !== null) {
                     this.dialog = el;
                 }
-            } }, h("mg-card", { key: 'fdddd50b0d87d50025eb65297ffdde890db84daa' }, h("div", { key: 'a168d0ec2be896b381ed6079f2f50f0e06fbef0c', class: "mg-c-modal__dialog" }, h("header", { key: 'f6c902fb1c424d14a0cf36fbe6904137e1f25a77', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: '3bfd0399c679cd4695b7ec6baf93852f551f500f', class: "mg-c-modal__close-button" }, h("mg-button", { key: '65d9a1001c74869bde17c5b10e4d7f6d40927d5c', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '4afd89c06bb4667d03dc8f57cafc2de937989539', icon: "cross" })))), h("h1", { key: '0e8714311653249fc9f567072bb83a82f40be657', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: '8bea86261d774672f59161b8356d88bb8ce6934f', class: "mg-c-modal__content" }, h("slot", { key: 'e1be91919ea7c4c6564bdab5fd4637a1f70670af' })), this.hasActions && (h("footer", { key: 'ed52ba51f38a5638e8ab525863631304ec32e4f8', class: "mg-c-modal__footer" }, h("slot", { key: '2ea047455de5f22876a0fc97e95321360aa55b33', name: "actions" })))))));
+            } }, h("mg-card", { key: '2aaabab2e1be14013bcae66d100ac56c1a9bbf4d' }, h("div", { key: '56a03d6cbda094d7ae4444ca3fab924982f73e2a', class: "mg-c-modal__dialog" }, h("header", { key: 'e7eb70e614a9e6c6b3f14f9e165bf801b780b031', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'c57ccc8f049893c5e46d769b527cc2e2c5ff14c0', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'b1b4357af8c875aab9f1104895de3cc228d12feb', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: 'cfe5fba2577ece682368332d3836cf709bb1b0e1', icon: "cross" })))), h("h1", { key: '718527902ea4814d55bf4d1c89d111a965233f0a', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: '78603fdb8fffa93e5caa6cf0ece9c6dbdbdfefde', class: "mg-c-modal__content" }, h("slot", { key: '1cd5a0415e53cb836428f8b9c4fc02dac11447a9' })), this.hasActions && (h("footer", { key: 'da72e5c2f43308d0f94d4e2eb36e317a13b5b16e', class: "mg-c-modal__footer" }, h("slot", { key: '49467ef13123cb4f4e2b315d293379d857ca3245', name: "actions" })))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -132,7 +131,7 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
         "modalTitle": ["validateModalTitle"],
         "open": ["watchOpen"]
     }; }
-    static get style() { return MgModalStyle0; }
+    static get style() { return mgModalCss; }
 }, [1, "mg-modal", {
         "identifier": [1],
         "dialogRole": [1, "dialog-role"],
@@ -181,5 +180,6 @@ const MgModal = MgModal$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgModal, defineCustomElement };
+//# sourceMappingURL=mg-modal.js.map
 
 //# sourceMappingURL=mg-modal.js.map

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

@@ -1 +1 @@
-{"file":"mg-modal.js","mappings":"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","names":["MgModal","createID","ClassList","isValideID","toString","isValidString"],"sources":["src/components/molecules/mg-modal/mg-modal.conf.ts","../styles/dist/components/mg-modal.css?tag=mg-modal&encapsulation=shadow","src/components/molecules/mg-modal/mg-modal.tsx"],"sourcesContent":["/**\n * List of all possibles dialog roles\n */\nexport const dialogRoles = ['dialog', 'alertdialog'] as const;\n\n/**\n * DialogRole type from dialog roles\n */\nexport type DialogRoleType = (typeof dialogRoles)[number];\n","/*!\n * @prop --mg-c-modal-border-radius: Defines the border radius of the modal. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-modal-title-font-size: Defines the font size of the modal title. Default value: `--mg-b-font-size-h3`.\n */:host{--mg-c-card-border-radius: var(--mg-c-modal-border-radius);--mg-c-card-spacing: var(--mg-b-size-16) var(--mg-b-size-24);--mg-c-card-border: none}.mg-c-modal{border:none;background:none;color:inherit}.mg-c-modal[open]{display:flex;padding:var(--mg-b-size-24) var(--mg-b-size-8)}.mg-c-modal::backdrop{background-color:var(--mg-b-color-light);opacity:.85}.mg-c-modal mg-card{display:flex;width:calc(75*var(--mg-b-size-8));max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:var(--mg-b-size-24)}.mg-c-modal__title{margin:0;font-family:var(--mg-b-font-family-heading);font-size:var(--mg-c-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-c-modal-title-font-size);margin-top:calc((var(--mg-b-size-min-height) - var(--mg-c-modal-title-font-size)*var(--mg-b-line-height))/2*-1);margin-right:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2*-1);margin-left:var(--mg-b-size-16);float:right}.mg-c-modal__content{padding:var(--mg-b-size-16);margin:calc(var(--mg-b-size-16)*-1);overflow-y:auto}.mg-c-modal ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border: var(--mg-c-card-border-default);--mg-c-card-spacing: var(--mg-c-card-spacing-default);--mg-c-card-border-radius: var(--mg-c-card-border-radius-default);--mg-c-card-color-background: var(--mg-c-card-color-background-default);--mg-c-card-box-shadow: var(--mg-c-card-box-shadow-default);--mg-c-card-max-width: unset;--mg-c-card-min-width: unset}/*# sourceMappingURL=mg-modal.css.map */\n","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   * Emmited event when modal is closed\n   */\n  @Event({ eventName: 'component-close' }) componentClose: EventEmitter<void>;\n\n  /***********\n   * Handles *\n   ***********/\n\n  /**\n   * Closes the modal.\n   */\n  private handleClose = (): void => {\n    this.open = false;\n    this.componentClose.emit();\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      this.componentClose.emit();\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 is-icon variant=\"flat\" label={this.messages.modal.closeButton} onClick={this.handleClose}>\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"],"version":3}
+{"file":"mg-modal.js","mappings":"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","names":["MgModal","__stencil_proxyCustomElement","createID","ClassList","isValideID","toString","isValidString"],"sources":["src/components/molecules/mg-modal/mg-modal.conf.ts","../styles/dist/components/mg-modal.css?tag=mg-modal&encapsulation=shadow","src/components/molecules/mg-modal/mg-modal.tsx"],"sourcesContent":["/**\n * List of all possibles dialog roles\n */\nexport const dialogRoles = ['dialog', 'alertdialog'] as const;\n\n/**\n * DialogRole type from dialog roles\n */\nexport type DialogRoleType = (typeof dialogRoles)[number];\n","/*!\n * @prop --mg-c-modal-border-radius: Defines the border radius of the modal. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-modal-title-font-size: Defines the font size of the modal title. Default value: `--mg-b-font-size-h3`.\n */:host{--mg-c-card-border-radius: var(--mg-c-modal-border-radius);--mg-c-card-spacing: var(--mg-b-size-16) var(--mg-b-size-24);--mg-c-card-border: none}.mg-c-modal{border:none;background:none;color:inherit}.mg-c-modal[open]{display:flex;padding:var(--mg-b-size-24) var(--mg-b-size-8)}.mg-c-modal::backdrop{background-color:var(--mg-b-color-light);opacity:.85}.mg-c-modal mg-card{display:flex;width:calc(75*var(--mg-b-size-8));max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:var(--mg-b-size-24)}.mg-c-modal__title{margin:0;font-family:var(--mg-b-font-family-heading);font-size:var(--mg-c-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-c-modal-title-font-size);margin-top:calc((var(--mg-b-size-min-height) - var(--mg-c-modal-title-font-size)*var(--mg-b-line-height))/2*-1);margin-right:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2*-1);margin-left:var(--mg-b-size-16);float:right}.mg-c-modal__content{padding:var(--mg-b-size-16);margin:calc(var(--mg-b-size-16)*-1);overflow-y:auto}.mg-c-modal ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border: var(--mg-c-card-border-default);--mg-c-card-spacing: var(--mg-c-card-spacing-default);--mg-c-card-border-radius: var(--mg-c-card-border-radius-default);--mg-c-card-color-background: var(--mg-c-card-color-background-default);--mg-c-card-box-shadow: var(--mg-c-card-box-shadow-default);--mg-c-card-max-width: unset;--mg-c-card-min-width: unset}/*# sourceMappingURL=mg-modal.css.map */\n","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 = 'dialog';\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   * Emmited event when modal is closed\n   */\n  @Event({ eventName: 'component-close' }) componentClose: EventEmitter<void>;\n\n  /***********\n   * Handles *\n   ***********/\n\n  /**\n   * Closes the modal.\n   */\n  private handleClose = (): void => {\n    this.open = false;\n    this.componentClose.emit();\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      this.componentClose.emit();\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 is-icon variant=\"flat\" label={this.messages.modal.closeButton} onClick={this.handleClose}>\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"],"version":3}

package/dist/components/mg-pagination.js

@@ -4,5 +4,6 @@ const MgPagination = MgPagination$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgPagination, defineCustomElement };
+//# sourceMappingURL=mg-pagination.js.map
 
 //# sourceMappingURL=mg-pagination.js.map

package/dist/components/mg-pagination2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { G as Ge, X as Xe, V as Ve } from './index.es.js';
+import { P as Pt, U as Ut, G as Gt } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$7 } from './mg-button2.js';
 import { d as defineCustomElement$6 } from './mg-icon2.js';
@@ -15,7 +15,6 @@ const NavigationAction = {
 };
 
 const mgPaginationCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-pagination{display:flex;align-items:center;gap:var(--mg-b-spacing-actions)}.mg-c-pagination__page-count{display:flex;align-items:center;gap:var(--mg-b-size-4)}.mg-c-pagination.mg-c-pagination--hide-page-count{gap:0}";
-const MgPaginationStyle0 = mgPaginationCss;
 
 /**
  * Range generator
@@ -49,7 +48,15 @@ const MgPagination = /*@__PURE__*/ proxyCustomElement(class MgPagination extends
          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          * If not set, it will be created.
          */
-        this.identifier = Ge('mg-pagination');
+        this.identifier = Pt('mg-pagination');
+        /**
+         * Hide navigation label
+         */
+        this.hideNavigationLabels = false;
+        /**
+         * Hide select input
+         */
+        this.hidePageCount = false;
         /**
          * Component total pages
          */
@@ -86,18 +93,18 @@ const MgPagination = /*@__PURE__*/ proxyCustomElement(class MgPagination extends
         };
     }
     watchIdentifier(newValue) {
-        if (!Xe(newValue)) {
-            console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${Ve(newValue)}.`);
+        if (!Ut(newValue)) {
+            console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
         }
     }
     validateTotalPages(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${Ve(newValue)}.`);
+            throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${Gt(newValue)}.`);
         }
     }
     validateCurrentPage(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${Ve(newValue)}.`);
+            throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${Gt(newValue)}.`);
         }
         else if (newValue > this.totalPages) {
             throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page.');
@@ -127,10 +134,10 @@ const MgPagination = /*@__PURE__*/ proxyCustomElement(class MgPagination extends
      * @returns HTML Element
      */
     render() {
-        const navigationActionButton = (disabled, action) => (h("mg-button", { key: 'adf311f317e6d071e73e6ee11f323f2957a6c7c5', label: this.messages.pagination[`${action}Page`],
+        const navigationActionButton = (disabled, action) => (h("mg-button", { key: 'b6983bde889955b35b1e580ffd5ece96a2919eca', 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: '23cd025ff4d5085f60a762ca02bec7ea4d08b47a', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { key: '5e178d7571d840b691349999a0dc9986ea9a97d1', icon: "chevron-right" })));
-        return (h(Host, { key: '549c2a5e08db08ff4db40f283dc941e3c918aa48', hidden: this.totalPages < 2 }, h("nav", { key: '6dad6fcdc86313bd8a89a253bf8b34417b5d7a9b', 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: '779c725432c4e35c82a25c9b48619b30d94aa3fd', class: "mg-c-pagination__page-count" }, h("mg-input-select", { key: '9ebbb2eb315ceb906b87c1866a2230a07fc456eb', 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: '562ef9a11ec557bf498ac4d62be095cbc4c71d22', 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))));
+            onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: '64316742287d7cb9adf0c4bb3cb902a3c1cea6b5', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { key: '2c405c1530509f3e6938e7c1d754b7aff216a6f7', icon: "chevron-right" })));
+        return (h(Host, { key: 'a341519e24868b594c1bb91c12549c0338fc0f49', hidden: this.totalPages < 2 }, h("nav", { key: '1102f256da9b8c25e8dbe6be64b934267d58f4b8', 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: '32498b13867e363f6f51ffbaff6f18623cbd698d', class: "mg-c-pagination__page-count" }, h("mg-input-select", { key: 'ff80a43e9fa1bf7cc13c7104e41730df0c044c3e', 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: 'c3e331768f997740ed95cde7dc7433df7d065122', 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))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -138,7 +145,7 @@ const MgPagination = /*@__PURE__*/ proxyCustomElement(class MgPagination extends
         "totalPages": ["validateTotalPages"],
         "currentPage": ["validateCurrentPage"]
     }; }
-    static get style() { return MgPaginationStyle0; }
+    static get style() { return mgPaginationCss; }
 }, [1, "mg-pagination", {
         "identifier": [1],
         "label": [1025],
@@ -202,5 +209,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgPagination as M, defineCustomElement as d };
+//# sourceMappingURL=mg-pagination2.js.map
 
 //# sourceMappingURL=mg-pagination2.js.map

package/dist/components/mg-pagination2.js.map

@@ -1 +1 @@
-{"file":"mg-pagination2.js","mappings":"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","names":["createID","isValideID","toString"],"sources":["src/components/molecules/mg-pagination/mg-pagination.conf.ts","../styles/dist/components/mg-pagination.css?tag=mg-pagination&encapsulation=shadow","src/components/molecules/mg-pagination/mg-pagination.tsx"],"sourcesContent":["export const NavigationAction = {\n  NEXT: 'next',\n  PREVIOUS: 'previous',\n};\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-pagination{display:flex;align-items:center;gap:var(--mg-b-spacing-actions)}.mg-c-pagination__page-count{display:flex;align-items:center;gap:var(--mg-b-size-4)}.mg-c-pagination.mg-c-pagination--hide-page-count{gap:0}/*# sourceMappingURL=mg-pagination.css.map */\n","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"],"version":3}
+{"file":"mg-pagination2.js","mappings":"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","names":["__stencil_proxyCustomElement","createID","isValideID","toString"],"sources":["src/components/molecules/mg-pagination/mg-pagination.conf.ts","../styles/dist/components/mg-pagination.css?tag=mg-pagination&encapsulation=shadow","src/components/molecules/mg-pagination/mg-pagination.tsx"],"sourcesContent":["export const NavigationAction = {\n  NEXT: 'next',\n  PREVIOUS: 'previous',\n};\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-pagination{display:flex;align-items:center;gap:var(--mg-b-spacing-actions)}.mg-c-pagination__page-count{display:flex;align-items:center;gap:var(--mg-b-size-4)}.mg-c-pagination.mg-c-pagination--hide-page-count{gap:0}/*# sourceMappingURL=mg-pagination.css.map */\n","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 = false;\n\n  /**\n   * Hide select input\n   */\n  @Prop() hidePageCount = false;\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    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"],"version":3}

package/dist/components/mg-panel.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { G as Ge, Z as Ze, X as Xe, V as Ve, m as me } from './index.es.js';
+import { P as Pt, Z as Zt, U as Ut, G as Gt, D as De } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$a } from './mg-button2.js';
 import { d as defineCustomElement$9 } from './mg-card2.js';
@@ -21,7 +21,6 @@ const expandToggleDisplays = ['text', 'icon'];
 const titlePositions = ['left', 'right'];
 
 const mgPanelCss = "/*!\n * @prop --mg-c-panel-border-radius: Defines the border radius of the panel. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-panel-color-background: Defines the background of the panel. Default value: `color-mix(in srgb, var(--mg-b-color-info), white 97%)`.\n * @prop --mg-c-panel-box-shadow: Defines the box shadow of the panel. Default value: `--mg-b-box-shadow`.\n * @prop --mg-c-panel-content-spacing: Defines the padding of the panel content. Default value: `--mg-b-size-16`.\n */:host{--mg-c-card-border:none;--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-panel-border-radius);--mg-c-card-color-background:var(--mg-c-panel-color-background);--mg-c-card-box-shadow:var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size:var(--mg-b-font-size-h5);--mg-c-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
-const MgPanelStyle0 = mgPanelCss;
 
 const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLElement {
     constructor() {
@@ -34,7 +33,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          * If not set, it will be created.
          */
-        this.identifier = Ge('mg-panel');
+        this.identifier = Pt('mg-panel');
         /**
          * Define if panel title is editable
          */
@@ -42,7 +41,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
         /**
          * Define title position
          */
-        this.titlePosition = titlePositions[0];
+        this.titlePosition = 'left';
         /**
          * Panel is opened
          */
@@ -50,11 +49,15 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
         /**
          * Define expand toggle button display
          */
-        this.expandToggleDisplay = expandToggleDisplays[0];
+        this.expandToggleDisplay = 'text';
+        /**
+         * Disable possibility to toggle expand
+         */
+        this.expandToggleDisabled = false;
         /**
          * Component classes
          */
-        this.classCollection = new Ze(['mg-c-panel']);
+        this.classCollection = new Zt(['mg-c-panel']);
         /**
          * Title is in edition mode
          */
@@ -153,13 +156,13 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
         };
     }
     watchIdentifier(newValue) {
-        if (!Xe(newValue)) {
-            console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${Ve(newValue)}.`);
+        if (!Ut(newValue)) {
+            console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
         }
     }
     validatePanelTitle(newValue) {
-        if (!me(newValue))
-            throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${Ve(newValue)}.`);
+        if (!De(newValue))
+            throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${Gt(newValue)}.`);
         this.titleChange.emit(newValue);
     }
     validateTitlePattern(newValue) {
@@ -168,14 +171,14 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
     }
     validateTitlePosition(newValue) {
         if (!titlePositions.includes(newValue))
-            throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${Ve(newValue)}.`);
+            throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${Gt(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(', ')}. Passed value: ${Ve(newValue)}.`);
+            throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${Gt(newValue)}.`);
         if (newValue === 'icon' && this.titleEditable)
             this.titleEditable = false;
     }
@@ -210,7 +213,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: 'ffe1c2453e1247f8a5a3c439f6f87fc1ceefe06b', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '77dfb890d2090af6eca0f332aaff07f737946f50' }, h("header", { key: '2c20eab45a175c8f176dd7c003fc336b4f98d058', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '2c359205023c9b25c2b88ae6aad404663330d3a5', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: 'f4c5ce16b3709529d5808a51c1d1f7a0677d82f2' })))));
+        return (h("section", { key: '73b9b1ab03307718bc7085799675da7447787c73', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '91702feab4cde0548c276f3d32fa193ff1093cae' }, h("header", { key: '442a17d42f86e73648ffa33124a1745fef3b07e3', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '0df72fb9e53f0a8307c062d506e8c744fd6780f3', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '44fa7501182e1c671d229929ebc12031c3048fdb' })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -222,7 +225,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
         "expanded": ["handleExpanded"],
         "expandToggleDisplay": ["validateExpandToggleDisplay"]
     }; }
-    static get style() { return MgPanelStyle0; }
+    static get style() { return mgPanelCss; }
 }, [1, "mg-panel", {
         "identifier": [1],
         "panelTitle": [1025, "panel-title"],
@@ -309,5 +312,6 @@ const MgPanel = MgPanel$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgPanel, defineCustomElement };
+//# sourceMappingURL=mg-panel.js.map
 
 //# sourceMappingURL=mg-panel.js.map

package/dist/components/mg-panel.js.map

@@ -1 +1 @@
-{"file":"mg-panel.js","mappings":"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","names":["MgPanel","createID","ClassList","isValideID","toString","isValidString"],"sources":["src/components/molecules/mg-panel/mg-panel.conf.ts","../styles/dist/components/mg-panel.css?tag=mg-panel&encapsulation=shadow","src/components/molecules/mg-panel/mg-panel.tsx"],"sourcesContent":["/**\n * Available expand toggle display options\n */\nexport const expandToggleDisplays = ['text', 'icon'] as const;\n\n/**\n * Generated expand toggle display type from available expand toggle display options\n */\nexport type ExpandToggleDisplayType = (typeof expandToggleDisplays)[number];\n\n/**\n * Available title positions\n */\nexport const titlePositions = ['left', 'right'] as const;\n\n/**\n * Generated title positions type from available title positions\n */\nexport type TitlePositionType = (typeof titlePositions)[number];\n","/*!\n * @prop --mg-c-panel-border-radius: Defines the border radius of the panel. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-panel-color-background: Defines the background of the panel. Default value: `color-mix(in srgb, var(--mg-b-color-info), white 97%)`.\n * @prop --mg-c-panel-box-shadow: Defines the box shadow of the panel. Default value: `--mg-b-box-shadow`.\n * @prop --mg-c-panel-content-spacing: Defines the padding of the panel content. Default value: `--mg-b-size-16`.\n */:host{--mg-c-card-border: none;--mg-c-card-spacing: 0;--mg-c-card-border-radius: var(--mg-c-panel-border-radius);--mg-c-card-color-background: var(--mg-c-panel-color-background);--mg-c-card-box-shadow: var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size: var(--mg-b-font-size-h5);--mg-c-button-font-weight: 600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border: var(--mg-c-card-border-default);--mg-c-card-spacing: var(--mg-c-card-spacing-default);--mg-c-card-border-radius: var(--mg-c-card-border-radius-default);--mg-c-card-color-background: var(--mg-c-card-color-background-default);--mg-c-card-box-shadow: var(--mg-c-card-box-shadow-default);--mg-c-card-max-width: unset;--mg-c-card-min-width: unset}/*# sourceMappingURL=mg-panel.css.map */\n","import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList, isValidString, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n/**\n * @slot - Panel content\n * @slot header-right - Header right panel content\n */\n@Component({\n  tag: 'mg-panel',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-panel.css',\n  shadow: true,\n})\nexport class MgPanel {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private editInputElement: HTMLMgInputTextElement;\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPanelElement;\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-panel');\n  @Watch('identifier')\n  watchIdentifier(newValue: MgPanel['identifier']): void {\n    if (!isValideID(newValue)) {\n      console.error(`<mg-panel> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Panel title\n   */\n  @Prop({ mutable: true }) panelTitle!: string;\n  @Watch('panelTitle')\n  validatePanelTitle(newValue: MgPanel['panelTitle']): void {\n    if (!isValidString(newValue)) throw new Error(`<mg-panel> prop \"panelTitle\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n    this.titleChange.emit(newValue);\n  }\n\n  /**\n   * Panel title pattern\n   */\n  @Prop() titlePattern?: string;\n\n  /**\n   * Panel title pattern error message\n   */\n  @Prop() titlePatternErrorMessage?: string;\n  @Watch('titlePattern')\n  @Watch('titlePatternErrorMessage')\n  validateTitlePattern(newValue: string): void {\n    if (newValue !== undefined && !this.titleEditable) throw new Error(`<mg-panel> prop \"titleEditable\" must be set to \"true\".`);\n  }\n\n  /**\n   * Define if panel title is editable\n   */\n  @Prop({ mutable: true }) titleEditable = false;\n\n  /**\n   * Define title position\n   */\n  @Prop() titlePosition: TitlePositionType = titlePositions[0];\n  @Watch('titlePosition')\n  validateTitlePosition(newValue: MgPanel['titlePosition']) {\n    if (!titlePositions.includes(newValue)) throw new Error(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}. Passed value: ${toString(newValue)}.`);\n  }\n\n  /**\n   * Panel is opened\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  handleExpanded(newValue: MgPanel['expanded']): void {\n    this.expandedChange.emit(newValue);\n  }\n\n  /**\n   * Define expand toggle button display\n   */\n  @Prop() expandToggleDisplay: ExpandToggleDisplayType = expandToggleDisplays[0];\n  @Watch('expandToggleDisplay')\n  validateExpandToggleDisplay(newValue: MgPanel['expandToggleDisplay']) {\n    if (!expandToggleDisplays.includes(newValue))\n      throw new Error(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${toString(newValue)}.`);\n    if (newValue === 'icon' && this.titleEditable) this.titleEditable = false;\n  }\n\n  /**\n   * Disable possibility to toggle expand\n   */\n  @Prop() expandToggleDisabled?: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-panel']);\n\n  /**\n   * Title is in edition mode\n   */\n  @State() isEditing = false;\n\n  /**\n   * Cache for updated panel title before validation\n   */\n  @State() updatedPanelTitle: string;\n\n  /**\n   * Emmited event when title change\n   */\n  @Event({ eventName: 'title-change' }) titleChange: EventEmitter<HTMLMgPanelElement['panelTitle']>;\n\n  /**\n   * Emmited event when expanded change\n   */\n  @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgPanelElement['expanded']>;\n\n  /************\n   * Methods *\n   ************/\n\n  /**\n   * Toggle is editing state\n   */\n  private toggleIsEditing = (): void => {\n    this.isEditing = !this.isEditing;\n  };\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * Collapse button click handler\n   */\n  private handleCollapseButton = (): void => {\n    if (!this.expandToggleDisabled) this.expanded = !this.expanded;\n  };\n\n  /**\n   * Edit button click handler\n   */\n  private handleEditButton = (): void => {\n    this.toggleIsEditing();\n  };\n\n  /**\n   * Update title handler\n   * @param event - input value change event\n   */\n  private handleUpdateTitle = (event: CustomEvent<HTMLMgInputTextElement['value']>): void => {\n    this.updatedPanelTitle = event.detail;\n  };\n\n  /**\n   * Cancel edition button handler\n   */\n  private handleCancelEditButton = (): void => {\n    this.updatedPanelTitle = undefined;\n    this.toggleIsEditing();\n  };\n\n  /**\n   * Validate edition button handler\n   */\n  private handleValidateEditButton = (): void => {\n    if (!this.editInputElement.valid) return;\n    if (this.updatedPanelTitle !== undefined) this.panelTitle = this.updatedPanelTitle;\n    this.toggleIsEditing();\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.validateTitlePattern(this.titlePattern);\n    this.validateTitlePattern(this.titlePatternErrorMessage);\n    this.validatePanelTitle(this.panelTitle);\n    this.validateExpandToggleDisplay(this.expandToggleDisplay);\n    this.validateTitlePosition(this.titlePosition);\n  }\n\n  /**\n   * Edit DOM after render\n   */\n  componentDidRender(): void {\n    // when we are editing we get focus on edition input\n    if (this.isEditing) this.editInputElement.setFocus();\n  }\n\n  /*************\n   * Render *\n   *************/\n\n  /**\n   * Render collapse button\n   * @returns collpase button\n   */\n  private renderCollapseButton = (): HTMLMgButtonElement => (\n    <mg-button\n      onClick={this.handleCollapseButton}\n      variant=\"flat\"\n      aria-expanded={this.expanded.toString()}\n      aria-controls={`${this.identifier}-content`}\n      disabled={this.expandToggleDisabled}\n      isIcon={this.expandToggleDisplay === 'icon'}\n      label={this.panelTitle}\n    >\n      <span class=\"mg-c-panel__collapse-button-content\">\n        <mg-icon icon=\"chevron-up\" class={{ 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded }}></mg-icon>\n        {!this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle}\n      </span>\n    </mg-button>\n  );\n\n  /**\n   * Render edit button\n   * @returns edit Button\n   */\n  private renderEditButton = (): HTMLMgButtonElement => (\n    <mg-button key=\"edit-button\" is-icon variant=\"flat\" label={this.messages.panel.editLabel} onClick={this.handleEditButton}>\n      <mg-icon icon=\"pen\"></mg-icon>\n    </mg-button>\n  );\n\n  /**\n   * Render input button\n   * @returns edit title input\n   */\n  private renderEditInput = (): HTMLMgInputTextElement => (\n    <mg-input-text\n      key=\"edition-input\"\n      label={this.messages.panel.editLabel}\n      label-hide\n      value={this.panelTitle}\n      onValue-change={this.handleUpdateTitle}\n      characterLeftHide={true}\n      pattern={this.titlePattern}\n      pattern-error-message={this.titlePatternErrorMessage}\n      identifier={`${this.identifier}-edition-input`}\n      ref={(el: HTMLMgInputTextElement) => (this.editInputElement = el)}\n    >\n      <mg-button slot=\"append-input\" label={this.messages.general.cancel} is-icon variant=\"secondary\" onClick={this.handleCancelEditButton}>\n        <mg-icon icon=\"cross\"></mg-icon>\n      </mg-button>\n      <mg-button slot=\"append-input\" label={this.messages.general.confirm} is-icon variant=\"secondary\" onClick={this.handleValidateEditButton}>\n        <mg-icon icon=\"check\"></mg-icon>\n      </mg-button>\n    </mg-input-text>\n  );\n\n  /**\n   * Render title\n   * @returns title element\n   */\n  private renderTitle = (): HTMLElement[] => {\n    const elementsToRender: HTMLElement[] = [this.renderCollapseButton()];\n    if (this.titleEditable) {\n      if (!this.isEditing) elementsToRender.push(this.renderEditButton());\n      else elementsToRender.push(this.renderEditInput());\n    }\n\n    return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;\n  };\n\n  /**\n   * Render header children\n   * @returns header child\n   */\n  private renderHeaderChildren = (): HTMLElement[] => {\n    const children = [\n      <div\n        class={{ 'mg-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }}\n        key={this.panelTitle}\n      >\n        {this.renderTitle()}\n      </div>,\n      <div class=\"mg-c-panel__header-content\" key=\"slot-header\">\n        <slot name=\"header-right\"></slot>\n      </div>,\n    ];\n    return this.titlePosition === 'right' ? children.reverse() : children;\n  };\n\n  /**\n   * Render component\n   * @returns rendered component\n   */\n  render(): HTMLElement {\n    const headerId = `${this.identifier}-header`;\n    return (\n      <section class={this.classCollection.join()} id={this.identifier}>\n        <mg-card>\n          <header class={{ 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n            {this.renderHeaderChildren()}\n          </header>\n          <article class=\"mg-c-panel__content\" id={`${this.identifier}-content`} aria-labelledby={headerId} hidden={!this.expanded}>\n            <slot></slot>\n          </article>\n        </mg-card>\n      </section>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-panel.js","mappings":";;;;;;;;;;;;;AAAA;;AAEG;AACI,MAAM,oBAAoB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAU;AAO7D;;AAEG;AACI,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,OAAO,CAAU;;ACbxD,MAAM,UAAU,GAAG,8lEAA8lE;;MCcpmEA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;;;AAyBE;;;AAGG;AACK,QAAA,IAAA,CAAA,UAAU,GAAWC,EAAQ,CAAC,UAAU,CAAC;AAiCjD;;AAEG;AACsB,QAAA,IAAa,CAAA,aAAA,GAAG,KAAK;AAE9C;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAsB,MAAM;AAMjD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAMzC;;AAEG;AACK,QAAA,IAAmB,CAAA,mBAAA,GAA4B,MAAM;AAQ7D;;AAEG;AACK,QAAA,IAAoB,CAAA,oBAAA,GAAG,KAAK;AAEpC;;AAEG;QACM,IAAe,CAAA,eAAA,GAAc,IAAIC,EAAS,CAAC,CAAC,YAAY,CAAC,CAAC;AAEnE;;AAEG;AACM,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAiB1B;;AAEc;AAEd;;AAEG;AACK,QAAA,IAAe,CAAA,eAAA,GAAG,MAAW;AACnC,YAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS;AAClC,SAAC;AAED;;AAEc;AAEd;;AAEG;AACK,QAAA,IAAoB,CAAA,oBAAA,GAAG,MAAW;YACxC,IAAI,CAAC,IAAI,CAAC,oBAAoB;AAAE,gBAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;AAChE,SAAC;AAED;;AAEG;AACK,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAW;YACpC,IAAI,CAAC,eAAe,EAAE;AACxB,SAAC;AAED;;;AAGG;AACK,QAAA,IAAA,CAAA,iBAAiB,GAAG,CAAC,KAAmD,KAAU;AACxF,YAAA,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,MAAM;AACvC,SAAC;AAED;;AAEG;AACK,QAAA,IAAsB,CAAA,sBAAA,GAAG,MAAW;AAC1C,YAAA,IAAI,CAAC,iBAAiB,GAAG,SAAS;YAClC,IAAI,CAAC,eAAe,EAAE;AACxB,SAAC;AAED;;AAEG;AACK,QAAA,IAAwB,CAAA,wBAAA,GAAG,MAAW;AAC5C,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK;gBAAE;AAClC,YAAA,IAAI,IAAI,CAAC,iBAAiB,KAAK,SAAS;AAAE,gBAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,iBAAiB;YAClF,IAAI,CAAC,eAAe,EAAE;AACxB,SAAC;AA6BD;;AAEe;AAEf;;;AAGG;QACK,IAAoB,CAAA,oBAAA,GAAG,OAC7B,CACE,CAAA,WAAA,EAAA,EAAA,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,OAAO,EAAC,MAAM,EAAA,eAAA,EACC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAA,eAAA,EACxB,CAAA,EAAG,IAAI,CAAC,UAAU,CAAU,QAAA,CAAA,EAC3C,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,MAAM,EAAE,IAAI,CAAC,mBAAmB,KAAK,MAAM,EAC3C,KAAK,EAAE,IAAI,CAAC,UAAU,EAAA,EAEtB,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,qCAAqC,EAAA,EAC/C,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,kCAAkC,EAAE,IAAI,EAAE,2CAA2C,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAY,CAAA,EACtJ,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,mBAAmB,KAAK,MAAM,IAAI,IAAI,CAAC,UAAU,CACrE,CACG,CACb;AAED;;;AAGG;QACK,IAAA,CAAA,gBAAgB,GAAG,OACzB,CAAA,CAAA,WAAA,EAAA,EAAW,GAAG,EAAC,aAAa,EAAA,SAAA,EAAA,IAAA,EAAS,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAA,EACtH,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,KAAK,EAAW,CAAA,CACpB,CACb;AAED;;;AAGG;AACK,QAAA,IAAA,CAAA,eAAe,GAAG,OACxB,CAAA,CAAA,eAAA,EAAA,EACE,GAAG,EAAC,eAAe,EACnB,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,EAEpC,YAAA,EAAA,IAAA,EAAA,KAAK,EAAE,IAAI,CAAC,UAAU,EACN,gBAAA,EAAA,IAAI,CAAC,iBAAiB,EACtC,iBAAiB,EAAE,IAAI,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EAAA,uBAAA,EACH,IAAI,CAAC,wBAAwB,EACpD,UAAU,EAAE,CAAA,EAAG,IAAI,CAAC,UAAU,CAAgB,cAAA,CAAA,EAC9C,GAAG,EAAE,CAAC,EAA0B,MAAM,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EAAA,EAEjE,CAAW,CAAA,WAAA,EAAA,EAAA,IAAI,EAAC,cAAc,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAA,SAAA,EAAA,IAAA,EAAU,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,CAAC,sBAAsB,EAAA,EAClI,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,OAAO,EAAA,CAAW,CACtB,EACZ,CAAW,CAAA,WAAA,EAAA,EAAA,IAAI,EAAC,cAAc,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAA,SAAA,EAAA,IAAA,EAAU,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,EAAA,EACrI,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACE,CACjB;AAED;;;AAGG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,MAAoB;YACxC,MAAM,gBAAgB,GAAkB,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;AACrE,YAAA,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,IAAI,CAAC,SAAS;oBAAE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;;oBAC9D,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;;AAGpD,YAAA,OAAO,IAAI,CAAC,aAAa,KAAK,OAAO,GAAG,gBAAgB,CAAC,OAAO,EAAE,GAAG,gBAAgB;AACvF,SAAC;AAED;;;AAGG;AACK,QAAA,IAAoB,CAAA,oBAAA,GAAG,MAAoB;AACjD,YAAA,MAAM,QAAQ,GAAG;AACf,gBAAA,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,EAAE,0BAA0B,EAAE,IAAI,EAAE,gCAAgC,EAAE,IAAI,CAAC,SAAS,EAAE,mCAAmC,EAAE,IAAI,CAAC,aAAa,KAAK,OAAO,EAAE,EAClK,GAAG,EAAE,IAAI,CAAC,UAAU,EAEnB,EAAA,IAAI,CAAC,WAAW,EAAE,CACf;gBACN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,GAAG,EAAC,aAAa,EAAA,EACvD,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,cAAc,EAAA,CAAQ,CAC7B;aACP;AACD,YAAA,OAAO,IAAI,CAAC,aAAa,KAAK,OAAO,GAAG,QAAQ,CAAC,OAAO,EAAE,GAAG,QAAQ;AACvE,SAAC;AAqBF;AAjSC,IAAA,eAAe,CAAC,QAA+B,EAAA;AAC7C,QAAA,IAAI,CAACC,EAAU,CAAC,QAAQ,CAAC,EAAE;YACzB,OAAO,CAAC,KAAK,CAAC,CAAgE,6DAAA,EAAAC,EAAQ,CAAC,QAAQ,CAAC,CAAG,CAAA,CAAA,CAAC;;;AASxG,IAAA,kBAAkB,CAAC,QAA+B,EAAA;AAChD,QAAA,IAAI,CAACC,EAAa,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,CAAgF,6EAAA,EAAAD,EAAQ,CAAC,QAAQ,CAAC,CAAG,CAAA,CAAA,CAAC;AACpJ,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAcjC,IAAA,oBAAoB,CAAC,QAAgB,EAAA;AACnC,QAAA,IAAI,QAAQ,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,aAAa;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,sDAAA,CAAwD,CAAC;;AAa9H,IAAA,qBAAqB,CAAC,QAAkC,EAAA;AACtD,QAAA,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,QAAQ,CAAC;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,CAAmD,gDAAA,EAAA,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmBA,EAAQ,CAAC,QAAQ,CAAC,CAAA,CAAA,CAAG,CAAC;;AAQ/K,IAAA,cAAc,CAAC,QAA6B,EAAA;AAC1C,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAQpC,IAAA,2BAA2B,CAAC,QAAwC,EAAA;AAClE,QAAA,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,QAAQ,CAAC;AAC1C,YAAA,MAAM,IAAI,KAAK,CAAC,CAAyD,sDAAA,EAAA,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmBA,EAAQ,CAAC,QAAQ,CAAC,CAAA,CAAA,CAAG,CAAC;AACnJ,QAAA,IAAI,QAAQ,KAAK,MAAM,IAAI,IAAI,CAAC,aAAa;AAAE,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;AAuF3E;;AAEe;AAEf;;AAEG;IACH,iBAAiB,GAAA;;QAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ;;AAElD,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC;AACrC,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC;AAC5C,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,wBAAwB,CAAC;AACxD,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;AACxC,QAAA,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,mBAAmB,CAAC;AAC1D,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,aAAa,CAAC;;AAGhD;;AAEG;IACH,kBAAkB,GAAA;;QAEhB,IAAI,IAAI,CAAC,SAAS;AAAE,YAAA,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE;;AAiGtD;;;AAGG;IACH,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,CAAA,EAAG,IAAI,CAAC,UAAU,SAAS;QAC5C,QACE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,EAAA,EAC9D,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,aAAa,KAAK,OAAO,EAAE,EAAE,EAAE,EAAE,QAAQ,IACvH,IAAI,CAAC,oBAAoB,EAAE,CACrB,EACT,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAC,qBAAqB,EAAC,EAAE,EAAE,CAAA,EAAG,IAAI,CAAC,UAAU,CAAU,QAAA,CAAA,EAAA,iBAAA,EAAmB,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAA,EACtH,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACL,CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgPanel","__stencil_proxyCustomElement","createID","ClassList","isValideID","toString","isValidString"],"sources":["src/components/molecules/mg-panel/mg-panel.conf.ts","../styles/dist/components/mg-panel.css?tag=mg-panel&encapsulation=shadow","src/components/molecules/mg-panel/mg-panel.tsx"],"sourcesContent":["/**\n * Available expand toggle display options\n */\nexport const expandToggleDisplays = ['text', 'icon'] as const;\n\n/**\n * Generated expand toggle display type from available expand toggle display options\n */\nexport type ExpandToggleDisplayType = (typeof expandToggleDisplays)[number];\n\n/**\n * Available title positions\n */\nexport const titlePositions = ['left', 'right'] as const;\n\n/**\n * Generated title positions type from available title positions\n */\nexport type TitlePositionType = (typeof titlePositions)[number];\n","/*!\n * @prop --mg-c-panel-border-radius: Defines the border radius of the panel. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-panel-color-background: Defines the background of the panel. Default value: `color-mix(in srgb, var(--mg-b-color-info), white 97%)`.\n * @prop --mg-c-panel-box-shadow: Defines the box shadow of the panel. Default value: `--mg-b-box-shadow`.\n * @prop --mg-c-panel-content-spacing: Defines the padding of the panel content. Default value: `--mg-b-size-16`.\n */:host{--mg-c-card-border: none;--mg-c-card-spacing: 0;--mg-c-card-border-radius: var(--mg-c-panel-border-radius);--mg-c-card-color-background: var(--mg-c-panel-color-background);--mg-c-card-box-shadow: var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size: var(--mg-b-font-size-h5);--mg-c-button-font-weight: 600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border: var(--mg-c-card-border-default);--mg-c-card-spacing: var(--mg-c-card-spacing-default);--mg-c-card-border-radius: var(--mg-c-card-border-radius-default);--mg-c-card-color-background: var(--mg-c-card-color-background-default);--mg-c-card-box-shadow: var(--mg-c-card-box-shadow-default);--mg-c-card-max-width: unset;--mg-c-card-min-width: unset}/*# sourceMappingURL=mg-panel.css.map */\n","import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList, isValidString, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n/**\n * @slot - Panel content\n * @slot header-right - Header right panel content\n */\n@Component({\n  tag: 'mg-panel',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-panel.css',\n  shadow: true,\n})\nexport class MgPanel {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private editInputElement: HTMLMgInputTextElement;\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPanelElement;\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-panel');\n  @Watch('identifier')\n  watchIdentifier(newValue: MgPanel['identifier']): void {\n    if (!isValideID(newValue)) {\n      console.error(`<mg-panel> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Panel title\n   */\n  @Prop({ mutable: true }) panelTitle!: string;\n  @Watch('panelTitle')\n  validatePanelTitle(newValue: MgPanel['panelTitle']): void {\n    if (!isValidString(newValue)) throw new Error(`<mg-panel> prop \"panelTitle\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n    this.titleChange.emit(newValue);\n  }\n\n  /**\n   * Panel title pattern\n   */\n  @Prop() titlePattern?: string;\n\n  /**\n   * Panel title pattern error message\n   */\n  @Prop() titlePatternErrorMessage?: string;\n  @Watch('titlePattern')\n  @Watch('titlePatternErrorMessage')\n  validateTitlePattern(newValue: string): void {\n    if (newValue !== undefined && !this.titleEditable) throw new Error(`<mg-panel> prop \"titleEditable\" must be set to \"true\".`);\n  }\n\n  /**\n   * Define if panel title is editable\n   */\n  @Prop({ mutable: true }) titleEditable = false;\n\n  /**\n   * Define title position\n   */\n  @Prop() titlePosition: TitlePositionType = 'left';\n  @Watch('titlePosition')\n  validateTitlePosition(newValue: MgPanel['titlePosition']) {\n    if (!titlePositions.includes(newValue)) throw new Error(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}. Passed value: ${toString(newValue)}.`);\n  }\n\n  /**\n   * Panel is opened\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  handleExpanded(newValue: MgPanel['expanded']): void {\n    this.expandedChange.emit(newValue);\n  }\n\n  /**\n   * Define expand toggle button display\n   */\n  @Prop() expandToggleDisplay: ExpandToggleDisplayType = 'text';\n  @Watch('expandToggleDisplay')\n  validateExpandToggleDisplay(newValue: MgPanel['expandToggleDisplay']) {\n    if (!expandToggleDisplays.includes(newValue))\n      throw new Error(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${toString(newValue)}.`);\n    if (newValue === 'icon' && this.titleEditable) this.titleEditable = false;\n  }\n\n  /**\n   * Disable possibility to toggle expand\n   */\n  @Prop() expandToggleDisabled = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-panel']);\n\n  /**\n   * Title is in edition mode\n   */\n  @State() isEditing = false;\n\n  /**\n   * Cache for updated panel title before validation\n   */\n  @State() updatedPanelTitle: string;\n\n  /**\n   * Emmited event when title change\n   */\n  @Event({ eventName: 'title-change' }) titleChange: EventEmitter<HTMLMgPanelElement['panelTitle']>;\n\n  /**\n   * Emmited event when expanded change\n   */\n  @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgPanelElement['expanded']>;\n\n  /************\n   * Methods *\n   ************/\n\n  /**\n   * Toggle is editing state\n   */\n  private toggleIsEditing = (): void => {\n    this.isEditing = !this.isEditing;\n  };\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * Collapse button click handler\n   */\n  private handleCollapseButton = (): void => {\n    if (!this.expandToggleDisabled) this.expanded = !this.expanded;\n  };\n\n  /**\n   * Edit button click handler\n   */\n  private handleEditButton = (): void => {\n    this.toggleIsEditing();\n  };\n\n  /**\n   * Update title handler\n   * @param event - input value change event\n   */\n  private handleUpdateTitle = (event: CustomEvent<HTMLMgInputTextElement['value']>): void => {\n    this.updatedPanelTitle = event.detail;\n  };\n\n  /**\n   * Cancel edition button handler\n   */\n  private handleCancelEditButton = (): void => {\n    this.updatedPanelTitle = undefined;\n    this.toggleIsEditing();\n  };\n\n  /**\n   * Validate edition button handler\n   */\n  private handleValidateEditButton = (): void => {\n    if (!this.editInputElement.valid) return;\n    if (this.updatedPanelTitle !== undefined) this.panelTitle = this.updatedPanelTitle;\n    this.toggleIsEditing();\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.validateTitlePattern(this.titlePattern);\n    this.validateTitlePattern(this.titlePatternErrorMessage);\n    this.validatePanelTitle(this.panelTitle);\n    this.validateExpandToggleDisplay(this.expandToggleDisplay);\n    this.validateTitlePosition(this.titlePosition);\n  }\n\n  /**\n   * Edit DOM after render\n   */\n  componentDidRender(): void {\n    // when we are editing we get focus on edition input\n    if (this.isEditing) this.editInputElement.setFocus();\n  }\n\n  /*************\n   * Render *\n   *************/\n\n  /**\n   * Render collapse button\n   * @returns collpase button\n   */\n  private renderCollapseButton = (): HTMLMgButtonElement => (\n    <mg-button\n      onClick={this.handleCollapseButton}\n      variant=\"flat\"\n      aria-expanded={this.expanded.toString()}\n      aria-controls={`${this.identifier}-content`}\n      disabled={this.expandToggleDisabled}\n      isIcon={this.expandToggleDisplay === 'icon'}\n      label={this.panelTitle}\n    >\n      <span class=\"mg-c-panel__collapse-button-content\">\n        <mg-icon icon=\"chevron-up\" class={{ 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded }}></mg-icon>\n        {!this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle}\n      </span>\n    </mg-button>\n  );\n\n  /**\n   * Render edit button\n   * @returns edit Button\n   */\n  private renderEditButton = (): HTMLMgButtonElement => (\n    <mg-button key=\"edit-button\" is-icon variant=\"flat\" label={this.messages.panel.editLabel} onClick={this.handleEditButton}>\n      <mg-icon icon=\"pen\"></mg-icon>\n    </mg-button>\n  );\n\n  /**\n   * Render input button\n   * @returns edit title input\n   */\n  private renderEditInput = (): HTMLMgInputTextElement => (\n    <mg-input-text\n      key=\"edition-input\"\n      label={this.messages.panel.editLabel}\n      label-hide\n      value={this.panelTitle}\n      onValue-change={this.handleUpdateTitle}\n      characterLeftHide={true}\n      pattern={this.titlePattern}\n      pattern-error-message={this.titlePatternErrorMessage}\n      identifier={`${this.identifier}-edition-input`}\n      ref={(el: HTMLMgInputTextElement) => (this.editInputElement = el)}\n    >\n      <mg-button slot=\"append-input\" label={this.messages.general.cancel} is-icon variant=\"secondary\" onClick={this.handleCancelEditButton}>\n        <mg-icon icon=\"cross\"></mg-icon>\n      </mg-button>\n      <mg-button slot=\"append-input\" label={this.messages.general.confirm} is-icon variant=\"secondary\" onClick={this.handleValidateEditButton}>\n        <mg-icon icon=\"check\"></mg-icon>\n      </mg-button>\n    </mg-input-text>\n  );\n\n  /**\n   * Render title\n   * @returns title element\n   */\n  private renderTitle = (): HTMLElement[] => {\n    const elementsToRender: HTMLElement[] = [this.renderCollapseButton()];\n    if (this.titleEditable) {\n      if (!this.isEditing) elementsToRender.push(this.renderEditButton());\n      else elementsToRender.push(this.renderEditInput());\n    }\n\n    return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;\n  };\n\n  /**\n   * Render header children\n   * @returns header child\n   */\n  private renderHeaderChildren = (): HTMLElement[] => {\n    const children = [\n      <div\n        class={{ 'mg-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }}\n        key={this.panelTitle}\n      >\n        {this.renderTitle()}\n      </div>,\n      <div class=\"mg-c-panel__header-content\" key=\"slot-header\">\n        <slot name=\"header-right\"></slot>\n      </div>,\n    ];\n    return this.titlePosition === 'right' ? children.reverse() : children;\n  };\n\n  /**\n   * Render component\n   * @returns rendered component\n   */\n  render(): HTMLElement {\n    const headerId = `${this.identifier}-header`;\n    return (\n      <section class={this.classCollection.join()} id={this.identifier}>\n        <mg-card>\n          <header class={{ 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n            {this.renderHeaderChildren()}\n          </header>\n          <article class=\"mg-c-panel__content\" id={`${this.identifier}-content`} aria-labelledby={headerId} hidden={!this.expanded}>\n            <slot></slot>\n          </article>\n        </mg-card>\n      </section>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-popover-content.js

@@ -4,5 +4,6 @@ const MgPopoverContent = MgPopoverContent$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgPopoverContent, defineCustomElement };
+//# sourceMappingURL=mg-popover-content.js.map
 
 //# sourceMappingURL=mg-popover-content.js.map