@mgdis/mg-components 6.2.0 → 6.4.0

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 } 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"]}
+{"version":3,"file":"mg-modal.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-modal/mg-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAkB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9D;;;GAGG;AAMH,MAAM,OAAO,OAAO;IALpB;QAaE,MAAM;QACE,YAAO,GAAG,EAAE,CAAC;QAiBrB;;;WAGG;QACK,eAAU,GAAW,QAAQ,CAAC,UAAU,CAAC,CAAC;QAQlD;;WAEG;QACK,eAAU,GAAmB,WAAW,CAAC,CAAC,CAAC,CAAC;QAiBpD;;WAEG;QACK,gBAAW,GAAG,KAAK,CAAC;QAE5B;;WAEG;QACsB,SAAI,GAAG,KAAK,CAAC;QActC;;WAEG;QACM,eAAU,GAAG,KAAK,CAAC;QAE5B;;WAEG;QACM,oBAAe,GAAc,IAAI,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;QAiBpE;;qBAEa;QAEb;;WAEG;QACK,gBAAW,GAAG,GAAS,EAAE;YAC/B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;QAC7B,CAAC,CAAC;KA8EH;IAjKC,eAAe,CAAC,QAA+B;QAC7C,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,MAAM,IAAI,KAAK,CAAC,gEAAgE,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACzG,CAAC;IACH,CAAC;IAOD,kBAAkB,CAAC,QAA+B;QAChD,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,gDAAgD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IACvK,CAAC;IAOD,kBAAkB,CAAC,QAA+B;QAChD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,2DAA2D,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACpG,CAAC;IACH,CAAC;IAYD,SAAS,CAAC,QAAiB;QACzB,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;YACxB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;YAC1B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACpB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;YAC1B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC;QACnD,CAAC;IACH,CAAC;IAuCD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,sBAAsB;QACtB,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QACjD,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;QACnD,WAAW;QACX,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;QAC1E,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,CAAC,UAAU,QAAQ,CAAC;QAC1C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC3C,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1B,uCAAuC;QACvC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YACzC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,+DACE,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,qBACjB,IAAI,CAAC,OAAO,EAC7B,GAAG,EAAE,CAAC,EAAqB,EAAE,EAAE;gBAC7B,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC;oBAChB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;gBACnB,CAAC;YACH,CAAC;YAED;gBACE,4DAAK,KAAK,EAAC,oBAAoB;oBAC7B,+DAAQ,KAAK,EAAC,oBAAoB;wBAC/B,IAAI,CAAC,WAAW,IAAI,CACnB,6DAAM,KAAK,EAAC,0BAA0B;4BACpC,mFAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW;gCACjG,gEAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACP,CACR;wBACD,2DAAI,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,IAC3C,IAAI,CAAC,UAAU,CACb,CACE;oBACT,gEAAS,KAAK,EAAC,qBAAqB;wBAClC,8DAAa,CACL;oBACT,IAAI,CAAC,UAAU,IAAI,CAClB,+DAAQ,KAAK,EAAC,oBAAoB;wBAChC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACrB,CACV,CACG,CACE,CACH,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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   * 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"]}

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

@@ -26,6 +26,19 @@ import { initLocales } from "./../../../locales";
 const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
 export class MgPagination {
     constructor() {
+        /**
+         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+         * If not set, it will be created.
+         */
+        this.identifier = createID('mg-pagination');
+        /**
+         * Component total pages
+         */
+        this.totalPages = 1;
+        /**
+         * Component current page
+         */
+        this.currentPage = 1;
         /**
          * Change current page from target
          * @param target - target page
@@ -52,12 +65,6 @@ export class MgPagination {
         this.handleGoToPage = (action, disabled) => {
             !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
         };
-        this.identifier = createID('mg-pagination');
-        this.label = undefined;
-        this.hideNavigationLabels = undefined;
-        this.hidePageCount = undefined;
-        this.totalPages = 1;
-        this.currentPage = 1;
     }
     watchIdentifier(newValue) {
         if (!isValideID(newValue)) {
@@ -101,10 +108,10 @@ export class MgPagination {
      * @returns HTML Element
      */
     render() {
-        const navigationActionButton = (disabled, action) => (h("mg-button", { key: '271af13e1b68e4fd00f46e99466d3fb7656b7892', label: this.messages.pagination[`${action}Page`],
+        const navigationActionButton = (disabled, action) => (h("mg-button", { key: '223001cd79932ca02a46d6cc8be58346bd535f98', 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: '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))));
+            onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: '6dd38be4df1a9c540c1e04567f6a6ff858805014', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { key: '226f0fcd8ce73dbcae38300bc9e559968c6413d7', icon: "chevron-right" })));
+        return (h(Host, { key: '871b799015c76975770cc775c0a7c0a58551b491', hidden: this.totalPages < 2 }, h("nav", { key: 'faff3bc618af20b0273fe0272c3437198df0dc53', 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: 'c4dabd89aa82b89436fdc3405090a635e51384aa', class: "mg-c-pagination__page-count" }, h("mg-input-select", { key: '6a3796ec81c0b862837750c6ecd71986fb77a9c1', 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: '5e6555ab6fb9da09ebf4687c652177c5040c4f0d', 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"; }
@@ -134,6 +141,8 @@ export class MgPagination {
                     "tags": [],
                     "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "createID('mg-pagination')"
@@ -152,6 +161,8 @@ export class MgPagination {
                     "tags": [],
                     "text": "Panignation label. Is a short description.\nCustomize default value can be usefull to improve accessibility"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -169,6 +180,8 @@ export class MgPagination {
                     "tags": [],
                     "text": "Hide navigation label"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hide-navigation-labels",
                 "reflect": false
             },
@@ -186,6 +199,8 @@ export class MgPagination {
                     "tags": [],
                     "text": "Hide select input"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hide-page-count",
                 "reflect": false
             },
@@ -203,6 +218,8 @@ export class MgPagination {
                     "tags": [],
                     "text": "Component total pages"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "total-pages",
                 "reflect": false,
                 "defaultValue": "1"
@@ -221,6 +238,8 @@ export class MgPagination {
                     "tags": [],
                     "text": "Component current page"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "current-page",
                 "reflect": true,
                 "defaultValue": "1"

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, 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-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

@@ -8,6 +8,35 @@ import { expandToggleDisplays, titlePositions } from "./mg-panel.conf";
  */
 export class MgPanel {
     constructor() {
+        /**
+         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+         * If not set, it will be created.
+         */
+        this.identifier = createID('mg-panel');
+        /**
+         * Define if panel title is editable
+         */
+        this.titleEditable = false;
+        /**
+         * Define title position
+         */
+        this.titlePosition = titlePositions[0];
+        /**
+         * Panel is opened
+         */
+        this.expanded = false;
+        /**
+         * Define expand toggle button display
+         */
+        this.expandToggleDisplay = expandToggleDisplays[0];
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-panel']);
+        /**
+         * Title is in edition mode
+         */
+        this.isEditing = false;
         /************
          * Methods *
          ************/
@@ -100,18 +129,6 @@ export class MgPanel {
             ];
             return this.titlePosition === 'right' ? children.reverse() : children;
         };
-        this.identifier = createID('mg-panel');
-        this.panelTitle = undefined;
-        this.titlePattern = undefined;
-        this.titlePatternErrorMessage = undefined;
-        this.titleEditable = false;
-        this.titlePosition = titlePositions[0];
-        this.expanded = false;
-        this.expandToggleDisplay = expandToggleDisplays[0];
-        this.expandToggleDisabled = undefined;
-        this.classCollection = new ClassList(['mg-c-panel']);
-        this.isEditing = false;
-        this.updatedPanelTitle = undefined;
     }
     watchIdentifier(newValue) {
         if (!isValideID(newValue)) {
@@ -171,7 +188,7 @@ export class MgPanel {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        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' })))));
+        return (h("section", { key: 'b4471d72f38c4e6f5b21aef7cc08696f745fd6b7', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: 'f51e3e4c51d56b9019ed4a3bc91fbb4b9ffcb543' }, h("header", { key: '9cfcb8fb0e01b570cddee46b2ef9737440c7e192', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'b5f8c6cb02f97f24b45b567ca25c00cf6930ca2f', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '5efc9246ad9d6c457abc9a80705df00a5d9e1cb1' })))));
     }
     static get is() { return "mg-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -201,6 +218,8 @@ export class MgPanel {
                     "tags": [],
                     "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "createID('mg-panel')"
@@ -219,6 +238,8 @@ export class MgPanel {
                     "tags": [],
                     "text": "Panel title"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "panel-title",
                 "reflect": false
             },
@@ -236,6 +257,8 @@ export class MgPanel {
                     "tags": [],
                     "text": "Panel title pattern"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "title-pattern",
                 "reflect": false
             },
@@ -253,6 +276,8 @@ export class MgPanel {
                     "tags": [],
                     "text": "Panel title pattern error message"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "title-pattern-error-message",
                 "reflect": false
             },
@@ -270,6 +295,8 @@ export class MgPanel {
                     "tags": [],
                     "text": "Define if panel title is editable"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "title-editable",
                 "reflect": false,
                 "defaultValue": "false"
@@ -294,6 +321,8 @@ export class MgPanel {
                     "tags": [],
                     "text": "Define title position"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "title-position",
                 "reflect": false,
                 "defaultValue": "titlePositions[0]"
@@ -312,6 +341,8 @@ export class MgPanel {
                     "tags": [],
                     "text": "Panel is opened"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "expanded",
                 "reflect": false,
                 "defaultValue": "false"
@@ -336,6 +367,8 @@ export class MgPanel {
                     "tags": [],
                     "text": "Define expand toggle button display"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "expand-toggle-display",
                 "reflect": false,
                 "defaultValue": "expandToggleDisplays[0]"
@@ -354,6 +387,8 @@ export class MgPanel {
                     "tags": [],
                     "text": "Disable possibility to toggle expand"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "expand-toggle-disabled",
                 "reflect": false
             }

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

@@ -1 +1 @@
-{"version":3,"file":"mg-panel.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-panel/mg-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["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","sourceRoot":"","sources":["../../../../src/components/molecules/mg-panel/mg-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -6,14 +6,20 @@ import { initLocales } from "../../../../locales";
  */
 export class MgPopoverContent {
     constructor() {
+        /**
+         * Define if popover has a cross button
+         */
+        this.closeButton = false;
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-popover-content']);
         /**
          * Handle action for close button
          */
         this.handleCloseButton = () => {
             this.hideContent.emit();
         };
-        this.closeButton = false;
-        this.classCollection = new ClassList(['mg-c-popover-content']);
     }
     /*************
      * Lifecycle *
@@ -70,6 +76,8 @@ export class MgPopoverContent {
                     "tags": [],
                     "text": "Define if popover has a cross button"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "close-button",
                 "reflect": false,
                 "defaultValue": "false"

package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-popover-content.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD;;GAEG;AAMH,MAAM,OAAO,gBAAgB;;QAgC3B;;WAEG;QACK,sBAAiB,GAAG,GAAS,EAAE;YACrC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC;2BAjBoB,KAAK;+BAKW,IAAI,SAAS,CAAC,CAAC,sBAAsB,CAAC,CAAC;;IAc7E;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IACrD,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAEzD,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,mBAAmB,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAE,CAAC;YACxE,MAAM,IAAI,KAAK,CAAC,iDAAiD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC9F,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,gEAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;gBACxC,IAAI,CAAC,WAAW,IAAI,CACnB,mFAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB;oBACnG,gEAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACb;gBACD,4DAAK,KAAK,EAAC,6BAA6B;oBACtC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;gBACN,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACpB;YACV,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, EventEmitter, Event, State } from '@stencil/core';\nimport { isTagName, ClassList } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-popover-content',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-popover-content.css',\n  shadow: true,\n})\nexport class MgPopoverContent {\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: HTMLMgPopoverContentElement;\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-popover-content']);\n\n  /**\n   * Emited event when close button is clicked\n   */\n  @Event({ eventName: 'hide-content' }) hideContent: EventEmitter<void>;\n\n  /**\n   * Handle action for close button\n   */\n  private handleCloseButton = (): void => {\n    this.hideContent.emit();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are valide\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Check if component slots are valide\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\n    const slottedTitleElement = this.element.querySelector('[slot=\"title\"]');\n    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {\n      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <mg-card class={this.classCollection.join()}>\n          {this.closeButton && (\n            <mg-button is-icon variant=\"flat\" label={this.messages.general.close} onClick={this.handleCloseButton}>\n              <mg-icon icon=\"cross\"></mg-icon>\n            </mg-button>\n          )}\n          <div class=\"mg-c-popover-content__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <slot name=\"content\"></slot>\n        </mg-card>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-popover-content.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD;;GAEG;AAMH,MAAM,OAAO,gBAAgB;IAL7B;QAsBE;;WAEG;QACK,gBAAW,GAAG,KAAK,CAAC;QAE5B;;WAEG;QACM,oBAAe,GAAc,IAAI,SAAS,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC;QAO9E;;WAEG;QACK,sBAAiB,GAAG,GAAS,EAAE;YACrC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC;KAgDH;IA9CC;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IACrD,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAEzD,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,mBAAmB,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAE,CAAC;YACxE,MAAM,IAAI,KAAK,CAAC,iDAAiD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC9F,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,gEAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;gBACxC,IAAI,CAAC,WAAW,IAAI,CACnB,mFAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB;oBACnG,gEAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACb;gBACD,4DAAK,KAAK,EAAC,6BAA6B;oBACtC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;gBACN,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACpB;YACV,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, EventEmitter, Event, State } from '@stencil/core';\nimport { isTagName, ClassList } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-popover-content',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-popover-content.css',\n  shadow: true,\n})\nexport class MgPopoverContent {\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: HTMLMgPopoverContentElement;\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-popover-content']);\n\n  /**\n   * Emited event when close button is clicked\n   */\n  @Event({ eventName: 'hide-content' }) hideContent: EventEmitter<void>;\n\n  /**\n   * Handle action for close button\n   */\n  private handleCloseButton = (): void => {\n    this.hideContent.emit();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are valide\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Check if component slots are valide\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\n    const slottedTitleElement = this.element.querySelector('[slot=\"title\"]');\n    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {\n      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <mg-card class={this.classCollection.join()}>\n          {this.closeButton && (\n            <mg-button is-icon variant=\"flat\" label={this.messages.general.close} onClick={this.handleCloseButton}>\n              <mg-icon icon=\"cross\"></mg-icon>\n            </mg-button>\n          )}\n          <div class=\"mg-c-popover-content__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <slot name=\"content\"></slot>\n        </mg-card>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"]}