@mgdis/mg-components 6.3.0 → 6.5.0

package/dist/components/mg-illustrated-message.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { K as Ke } from './index.es.js';
+import { Z as Ze } from './index.es.js';
 
-const mgIllustratedMessageCss = "/*!\n * @prop --mg-c-illustrated-message-spacing-vertical: Defines the vertical padding of the illustrated message. Default value: `--mg-b-size-40`.\n */.mg-c-illustrated-message{display:flex;max-width:calc(60*var(--mg-b-size-8));box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-c-illustrated-message-spacing-vertical) var(--mg-b-size-16);margin:auto;gap:var(--mg-b-size-32) var(--mg-b-size-64);text-align:center}.mg-c-illustrated-message__illustration{max-height:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){width:auto;max-width:100%;height:auto;max-height:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small{max-height:var(--mg-b-size-64)}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal{max-width:unset;flex-flow:row wrap;align-items:center}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__slots,.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__illustration{max-width:calc(60*var(--mg-b-size-8))}.mg-c-illustrated-message__title ::slotted([slot=title]){margin:0;font-family:var(--mg-b-font-family) !important;font-size:var(--mg-b-font-size-h2) !important;font-weight:400 !important}.mg-c-illustrated-message__details ::slotted([slot=details]){margin:var(--mg-b-size-16) 0 0}";
+const mgIllustratedMessageCss = "/*!\n * @prop --mg-c-illustrated-message-spacing-vertical: Defines the vertical padding of the illustrated message. Default value: `--mg-b-size-40`.\n */.mg-c-illustrated-message{display:flex;max-width:calc(60*var(--mg-b-size-8));box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-c-illustrated-message-spacing-vertical) var(--mg-b-size-16);margin:auto;gap:var(--mg-b-size-32) var(--mg-b-size-64);text-align:center}.mg-c-illustrated-message__illustration{max-height:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){width:100%;max-width:100%;height:auto;max-height:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small{max-height:var(--mg-b-size-64)}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal{max-width:unset;flex-flow:row wrap;align-items:center}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__slots,.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__illustration{max-width:calc(60*var(--mg-b-size-8))}.mg-c-illustrated-message__title ::slotted([slot=title]){margin:0;font-family:var(--mg-b-font-family) !important;font-size:var(--mg-b-font-size-h2) !important;font-weight:400 !important}.mg-c-illustrated-message__details ::slotted([slot=details]){margin:var(--mg-b-size-16) 0 0}";
 const MgIllustratedMessageStyle0 = mgIllustratedMessageCss;
 
 const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustratedMessage extends HTMLElement {
@@ -9,7 +9,13 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Define illustration size
+         */
         this.size = 'medium';
+        /**
+         * Define component orientation
+         */
         this.direction = 'vertical';
     }
     /*************
@@ -21,7 +27,7 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
     componentDidLoad() {
         const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
         const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
-        if (!Ke(this.element.querySelector('[slot="title"]'), headingTags)) {
+        if (!Ze(this.element.querySelector('[slot="title"]'), headingTags)) {
             throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}.`);
         }
         else if (slottedIllustrations.length !== 1) {
@@ -34,13 +40,13 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '475cdb177405fc41e5dde86d9a3884de5fb88bef', class: {
+        return (h("div", { key: 'ae59b32d798c888eef5f2b3464160177b7a2e9d8', class: {
                 'mg-c-illustrated-message': true,
                 'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',
-            } }, h("div", { key: '0e007f09bcdcd85d50bd16ed37f9f4d399c14e28', class: {
+            } }, h("div", { key: '05d260716090d503dde8e0dddc79db0a5f553f0b', class: {
                 'mg-c-illustrated-message__illustration': true,
                 'mg-c-illustrated-message__illustration--small': this.size === 'small',
-            } }, h("slot", { key: '41190bb4bc5d13cecbf7b847c58af7975ffc0255', name: "illustration" })), h("div", { key: 'c338cba5ecac003b1642800441139e497f3c3769', class: "mg-c-illustrated-message__slots" }, h("div", { key: '804f5fc5a96d87d4e533d64eb80d275377dec0cf', class: "mg-c-illustrated-message__title" }, h("slot", { key: 'c5db8d1c61b0b85bc94905dc4b4bfe3ce44d48d1', name: "title" })), h("div", { key: 'e5be01c4e24a60a039a072946d12275bf46b681d', class: "mg-c-illustrated-message__details" }, h("slot", { key: '76eaf55622ed37c42f40ec832ec48ca6ab66e42c', name: "details" })))));
+            } }, h("slot", { key: '119f517d66d9d4fe1bbc84341fccab9db1070c06', name: "illustration" })), h("div", { key: 'cc00f05411b3d8103e566d01d48a6ab66438027c', class: "mg-c-illustrated-message__slots" }, h("div", { key: '1832b69ce391c8c018bfc3acad75ded56dc0d484', class: "mg-c-illustrated-message__title" }, h("slot", { key: 'd0dfb8c433246571c140797f99f434cb64c67e7e', name: "title" })), h("div", { key: '75b18511e74d1d4d049e698c3fb43ad4f00450c3', class: "mg-c-illustrated-message__details" }, h("slot", { key: '78e11fa31da149666973e03fe707e302d60f8989', name: "details" })))));
     }
     get element() { return this; }
     static get style() { return MgIllustratedMessageStyle0; }

package/dist/components/mg-illustrated-message.js.map

@@ -1 +1 @@
-{"file":"mg-illustrated-message.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,siDAAsiD,CAAC;AACvkD,mCAAe,uBAAuB;;MCazBA,sBAAoB;;;;;oBAaY,QAAQ;yBAKJ,UAAU;;;;;;;;IASzD,gBAAgB;QACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QACzD,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;QAEpF,IAAI,CAACC,EAAS,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC,EAAE;YACzE,MAAM,IAAI,KAAK,CAAC,6DAA6D,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SACzG;aAAM,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE;YAC5C,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;SAC9F;QAED,oBAAoB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;KAC7D;;;;;IAMD,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,0BAA0B,EAAE,IAAI;gBAChC,sCAAsC,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY;aACxE,IAED,4DACE,KAAK,EAAE;gBACL,wCAAwC,EAAE,IAAI;gBAC9C,+CAA+C,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aACvE,IAED,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,EACN,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,4DAAK,KAAK,EAAC,mCAAmC,IAC5C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgIllustratedMessage","isTagName"],"sources":["../styles/dist/components/mg-illustrated-message.css?tag=mg-illustrated-message&encapsulation=shadow","src/components/molecules/mg-illustrated-message/mg-illustrated-message.tsx"],"sourcesContent":["/*!\n * @prop --mg-c-illustrated-message-spacing-vertical: Defines the vertical padding of the illustrated message. Default value: `--mg-b-size-40`.\n */.mg-c-illustrated-message{display:flex;max-width:calc(60*var(--mg-b-size-8));box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-c-illustrated-message-spacing-vertical) var(--mg-b-size-16);margin:auto;gap:var(--mg-b-size-32) var(--mg-b-size-64);text-align:center}.mg-c-illustrated-message__illustration{max-height:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){width:auto;max-width:100%;height:auto;max-height:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small{max-height:var(--mg-b-size-64)}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal{max-width:unset;flex-flow:row wrap;align-items:center}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__slots,.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__illustration{max-width:calc(60*var(--mg-b-size-8))}.mg-c-illustrated-message__title ::slotted([slot=title]){margin:0;font-family:var(--mg-b-font-family) !important;font-size:var(--mg-b-font-size-h2) !important;font-weight:400 !important}.mg-c-illustrated-message__details ::slotted([slot=details]){margin:var(--mg-b-size-16) 0 0}/*# sourceMappingURL=mg-illustrated-message.css.map */\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { isTagName } from '@mgdis/stencil-helpers';\nimport type { IllustratedMessageSizeType } from './mg-illustrated-message.conf';\n\n/**\n * @slot illustration - Illustration content\n * @slot title - Title content\n * @slot details - Details content\n */\n@Component({\n  tag: 'mg-illustrated-message',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-illustrated-message.css',\n  shadow: true,\n})\nexport class MgIllustratedMessage {\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgIllustratedMessageElement;\n\n  /**\n   * Define illustration size\n   */\n  @Prop() size: IllustratedMessageSizeType = 'medium';\n\n  /**\n   * Define component orientation\n   */\n  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n    const slottedIllustrations = this.element.querySelectorAll('[slot=\"illustration\"]');\n\n    if (!isTagName(this.element.querySelector('[slot=\"title\"]'), headingTags)) {\n      throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}.`);\n    } else if (slottedIllustrations.length !== 1) {\n      throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');\n    }\n\n    slottedIllustrations[0].setAttribute('aria-hidden', 'true');\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div\n        class={{\n          'mg-c-illustrated-message': true,\n          'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',\n        }}\n      >\n        <div\n          class={{\n            'mg-c-illustrated-message__illustration': true,\n            'mg-c-illustrated-message__illustration--small': this.size === 'small',\n          }}\n        >\n          <slot name=\"illustration\"></slot>\n        </div>\n        <div class=\"mg-c-illustrated-message__slots\">\n          <div class=\"mg-c-illustrated-message__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <div class=\"mg-c-illustrated-message__details\">\n            <slot name=\"details\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-illustrated-message.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,siDAAsiD,CAAC;AACvkD,mCAAe,uBAAuB;;MCazBA,sBAAoB;IALjC;;;;;;;QAkBU,SAAI,GAA+B,QAAQ,CAAC;;;;QAK5C,cAAS,GAA8B,UAAU,CAAC;KAqD3D;;;;;;;IA5CC,gBAAgB;QACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QACzD,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;QAEpF,IAAI,CAACC,EAAS,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC,EAAE;YACzE,MAAM,IAAI,KAAK,CAAC,6DAA6D,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SACzG;aAAM,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE;YAC5C,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;SAC9F;QAED,oBAAoB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;KAC7D;;;;;IAMD,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,0BAA0B,EAAE,IAAI;gBAChC,sCAAsC,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY;aACxE,IAED,4DACE,KAAK,EAAE;gBACL,wCAAwC,EAAE,IAAI;gBAC9C,+CAA+C,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aACvE,IAED,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,EACN,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,4DAAK,KAAK,EAAC,mCAAmC,IAC5C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgIllustratedMessage","isTagName"],"sources":["../styles/dist/components/mg-illustrated-message.css?tag=mg-illustrated-message&encapsulation=shadow","src/components/molecules/mg-illustrated-message/mg-illustrated-message.tsx"],"sourcesContent":["/*!\n * @prop --mg-c-illustrated-message-spacing-vertical: Defines the vertical padding of the illustrated message. Default value: `--mg-b-size-40`.\n */.mg-c-illustrated-message{display:flex;max-width:calc(60*var(--mg-b-size-8));box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-c-illustrated-message-spacing-vertical) var(--mg-b-size-16);margin:auto;gap:var(--mg-b-size-32) var(--mg-b-size-64);text-align:center}.mg-c-illustrated-message__illustration{max-height:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){width:100%;max-width:100%;height:auto;max-height:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small{max-height:var(--mg-b-size-64)}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal{max-width:unset;flex-flow:row wrap;align-items:center}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__slots,.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__illustration{max-width:calc(60*var(--mg-b-size-8))}.mg-c-illustrated-message__title ::slotted([slot=title]){margin:0;font-family:var(--mg-b-font-family) !important;font-size:var(--mg-b-font-size-h2) !important;font-weight:400 !important}.mg-c-illustrated-message__details ::slotted([slot=details]){margin:var(--mg-b-size-16) 0 0}/*# sourceMappingURL=mg-illustrated-message.css.map */\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { isTagName } from '@mgdis/stencil-helpers';\nimport type { IllustratedMessageSizeType } from './mg-illustrated-message.conf';\n\n/**\n * @slot illustration - Illustration content\n * @slot title - Title content\n * @slot details - Details content\n */\n@Component({\n  tag: 'mg-illustrated-message',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-illustrated-message.css',\n  shadow: true,\n})\nexport class MgIllustratedMessage {\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgIllustratedMessageElement;\n\n  /**\n   * Define illustration size\n   */\n  @Prop() size: IllustratedMessageSizeType = 'medium';\n\n  /**\n   * Define component orientation\n   */\n  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n    const slottedIllustrations = this.element.querySelectorAll('[slot=\"illustration\"]');\n\n    if (!isTagName(this.element.querySelector('[slot=\"title\"]'), headingTags)) {\n      throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}.`);\n    } else if (slottedIllustrations.length !== 1) {\n      throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');\n    }\n\n    slottedIllustrations[0].setAttribute('aria-hidden', 'true');\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div\n        class={{\n          'mg-c-illustrated-message': true,\n          'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',\n        }}\n      >\n        <div\n          class={{\n            'mg-c-illustrated-message__illustration': true,\n            'mg-c-illustrated-message__illustration--small': this.size === 'small',\n          }}\n        >\n          <slot name=\"illustration\"></slot>\n        </div>\n        <div class=\"mg-c-illustrated-message__slots\">\n          <div class=\"mg-c-illustrated-message__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <div class=\"mg-c-illustrated-message__details\">\n            <slot name=\"details\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-input-checkbox-paginated2.js

@@ -41,6 +41,18 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class MgInputC
          * Constantes *
          *************/
         this.offset = 10;
+        /**
+         * Current page
+         */
+        this.currentPage = 1;
+        /**
+         * Define checkboxes to paginate
+         */
+        this.checkboxes = [];
+        /**
+         * Is checked items values expanded
+         */
+        this.expanded = true;
         /***********
          * Methods *
          ***********/
@@ -76,14 +88,6 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class MgInputC
         this.handleCurrentPageChange = (event) => {
             this.currentPage = Number(event.detail);
         };
-        this.readonly = undefined;
-        this.disabled = undefined;
-        this.name = undefined;
-        this.invalid = undefined;
-        this.currentPage = 1;
-        this.checkboxes = [];
-        this.messages = undefined;
-        this.expanded = true;
     }
     watchCheckboxes(newValue, oldValue) {
         const pageCountNewValue = this.getPageCount(newValue);
@@ -123,10 +127,10 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class MgInputC
      * @returns HTML Element
      */
     render() {
-        const getText = (checkboxes) => (h("em", { key: '05d577bded8e2602d1dedf9a36f695904d491242', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`));
+        const getText = (checkboxes) => (h("em", { key: '8f20e5be81047106e04cd101385b9c6555c0c38d', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`));
         const [from, to] = this.getFromToIndexes();
         const itemsContainerId = `items-${this.sectionKind}-container`;
-        return (h(Host, { key: '49b95a0882cc475aab4a810ccd8f292d83b59a9a', hidden: this.checkboxes.length < 1 }, h("div", { key: '2db5103f9784add1effb7a5dcafa8f8196601d14', class: "mg-c-input__section-header" }, this.sectionKind === SectionKind.SELECTED ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), h("span", { class: "mg-c-input__section-header-title" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__section-header-title mg-c-input__section-header-title--static" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-tooltip", { key: '946506778c280928acd6e3e7256c828b7a7598b5', class: "mg-c-input__section-header-tootlip", message: this.messages.tooltip }, h("mg-button", { key: 'b71a4e10a764bfaf438430dd44b6f82785d0f5d4', variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { key: '06af47b1e9f0a6d0a11741dae03f75ce71e32666', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__section-content" }, h(MgInputCheckboxList, { key: 'aba29baa719288ad0b172326c669d146c803a4e4', checkboxes: this.getArrayRange(this.checkboxes, from, to), displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
+        return (h(Host, { key: '39d0fc41abe4b537b240bdc14e80fc42cb41033d', hidden: this.checkboxes.length < 1 }, h("div", { key: 'fec430cfffc005a217694f9a4ba68412a6a08c7b', class: "mg-c-input__section-header" }, this.sectionKind === SectionKind.SELECTED ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), h("span", { class: "mg-c-input__section-header-title" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__section-header-title mg-c-input__section-header-title--static" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-tooltip", { key: 'e1b38d93875962af3024ac27e1892c040dbf9bdb', class: "mg-c-input__section-header-tootlip", message: this.messages.tooltip }, h("mg-button", { key: 'f593b3d5ca5bd8b3080253842a5c513709f16e3a', variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { key: '74c18984938188e2861cd79b56d919a94f32064f', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__section-content" }, h(MgInputCheckboxList, { key: '15c2f6fe98d772ce5b0a0d4ec448986e91592107', checkboxes: this.getArrayRange(this.checkboxes, from, to), displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
     }
     static get watchers() { return {
         "checkboxes": ["watchCheckboxes"]

package/dist/components/mg-input-checkbox-paginated2.js.map

@@ -1 +1 @@
-{"file":"mg-input-checkbox-paginated2.js","mappings":"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","names":[],"sources":["src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts","src/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.tsx","src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.tsx"],"sourcesContent":["/**\n * interface CheckboxValue\n * use to match returned value\n */\nexport interface CheckboxValue {\n  title: string;\n  value: boolean | null;\n  disabled?: boolean;\n  required?: boolean;\n}\n\n/**\n * interface CheckboxItem\n * use to match checkbox attributes\n */\nexport interface CheckboxItem extends CheckboxValue {\n  _id: string;\n  _handleInput: (event: InputEvent & { target: HTMLInputElement }) => void;\n  _handleBlur: () => void;\n  _handleKeydown: (event: KeyboardEvent & { target: HTMLElement }) => void;\n}\n\n/**\n * List of all availables checkbox type\n */\nexport const checkboxTypes = ['checkbox', 'multi'] as const;\n\n/**\n * ChecboxType from checkbox types\n */\nexport type CheckboxType = (typeof checkboxTypes)[number];\n\n/**\n * mg-input-checkbox-paginated section kind type\n */\nexport type SectionKindType = 'selected' | 'not-selected';\n\n/**\n * mg-input-checkbox-paginated section kind value\n */\nexport const SectionKind: Record<string, SectionKindType> = {\n  SELECTED: 'selected',\n  NOT_SELECTED: 'not-selected',\n};\n\n/**\n * Base mg-input-checkbox interface\n */\nexport interface IMgInputCheckboxBase {\n  disabled?: boolean;\n  name?: string;\n  invalid?: boolean;\n}\n\n/**\n * mg-input-checkbox-list interface\n */\nexport interface MgInputCheckboxListProps extends IMgInputCheckboxBase {\n  displaySearchInput: boolean;\n  messages: Record<string, unknown>;\n  checkboxes: CheckboxItem[];\n  id: string;\n}\n","import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { MgInputCheckboxListProps } from './mg-input-checkbox.conf';\n\n/**\n * Get checkboxes list template\n * @param props - MgInputCheckboxList Interface Props\n * @returns input template\n */\nexport const MgInputCheckboxList: FunctionalComponent<MgInputCheckboxListProps> = (props: MgInputCheckboxListProps): VNode[] => (\n  <ul\n    class=\"mg-c-input__input-group-container\"\n    role=\"list\"\n    aria-describedby={props.displaySearchInput ? 'search-results' : undefined}\n    aria-label={props.displaySearchInput ? props.messages.searchResults : undefined}\n    aria-live={props.displaySearchInput ? 'polite' : undefined}\n    id={props.id}\n  >\n    {props.checkboxes.map(input => (\n      <li key={input._id} class={{ 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled }}>\n        <input\n          type=\"checkbox\"\n          id={input._id}\n          name={props.name}\n          value={input.value?.toString()}\n          checked={Boolean(input.value)}\n          required={input.required}\n          aria-invalid={props.invalid?.toString() || 'false'}\n          disabled={props.disabled || input.disabled}\n          indeterminate={input.value === null}\n          onInput={input._handleInput}\n          onBlur={input._handleBlur}\n          onKeyDown={input._handleKeydown}\n        />\n        <label htmlFor={input._id}>{input.title}</label>\n      </li>\n    ))}\n  </ul>\n);\n","import { Component, h, Prop, State, Event, EventEmitter, Watch, Host } from '@stencil/core';\nimport { CheckboxItem, IMgInputCheckboxBase, type SectionKindType, SectionKind } from '../mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from '../MgInputCheckboxList';\n\n/**\n * Internal component use to manage sections instances\n * @internal\n */\n@Component({\n  tag: 'mg-input-checkbox-paginated',\n  shadow: false,\n  scoped: true,\n})\nexport class MgInputCheckboxPaginated implements IMgInputCheckboxBase {\n  /*************\n   * Constantes *\n   *************/\n  private readonly offset = 10;\n  private sectionKind: SectionKindType;\n\n  /*************\n   * Decorators *\n   *************/\n\n  /**\n   * Define if mg-input-checkbox-list is readonly\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Define if mg-input-checkbox-list is disabled\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Define mg-input-checkbox input name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Define mg-input-checkbox input invalid\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Current page\n   */\n  @Prop({ mutable: true }) currentPage = 1;\n\n  /**\n   * Define checkboxes to paginate\n   */\n  @Prop() checkboxes: CheckboxItem[] = [];\n  @Watch('checkboxes')\n  watchCheckboxes(newValue: MgInputCheckboxPaginated['checkboxes'], oldValue?: MgInputCheckboxPaginated['checkboxes']): void {\n    const pageCountNewValue = this.getPageCount(newValue);\n    const pageCountOldValue = this.getPageCount(oldValue);\n    // after each array.length update we reset pagination\n    // when items fill on page, we set current page to 1\n    if (pageCountNewValue === 1 || (pageCountNewValue !== 0 && this.currentPage === 0)) {\n      this.currentPage = 1;\n    }\n    // when old items page numbers match the current page AND new items page number is lower than current page, we set the new last page\n    else if (pageCountOldValue === this.currentPage && pageCountNewValue < this.currentPage) {\n      this.currentPage--;\n    }\n    this.sectionKind = newValue[0].value ? SectionKind.SELECTED : SectionKind.NOT_SELECTED;\n  }\n\n  /**\n   * Define component message\n   */\n  @Prop() messages: Record<string, string>;\n\n  /**\n   * Emit 'mass-action' event\n   * used to informe that select-all/unselect-all button listner is triggered\n   */\n  @Event({ eventName: 'mass-action' }) massAction: EventEmitter<SectionKindType>;\n\n  /**\n   * Is checked items values expanded\n   */\n  @State() expanded = true;\n\n  /***********\n   * Methods *\n   ***********/\n\n  /**\n   * Mass action handler\n   */\n  private massActionHandler = (): void => {\n    this.massAction.emit(this.sectionKind);\n  };\n\n  /**\n   * Toggle items button handler\n   */\n  private handleToggleClick = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  /**\n   * Method to get a array range\n   * @param from - array start index\n   * @param to - array end index\n   * @returns array's range\n   */\n  private getArrayRange = <ItemType,>(array: ItemType[], from: number, to: number): ItemType[] => array.slice(from, to);\n\n  /**\n   * Get from and to index\n   * @returns [from,to] index\n   */\n  private getFromToIndexes(): number[] {\n    const isFirstPage = this.currentPage === 1;\n    const from = isFirstPage ? 0 : (this.currentPage - 1) * this.offset;\n    const to = isFirstPage ? this.offset : this.currentPage * this.offset;\n    return [from, to];\n  }\n\n  /**\n   * Method to get page count from items\n   * @param items - items to count\n   * @returns page count from items\n   */\n  private getPageCount = (items: unknown[]): number => (items?.length > 0 ? Math.ceil(items.length / this.offset) : 0);\n\n  /**\n   * Handle mg-pagination current page change event\n   * @param event - pagination current page change event\n   */\n  private handleCurrentPageChange = (event: CustomEvent): void => {\n    this.currentPage = Number(event.detail);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    this.watchCheckboxes(this.checkboxes);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const getText = (checkboxes: CheckboxItem[]): HTMLElement => (\n      <em class=\"mg-c-input__section-header-title-label\">{`${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`}</em>\n    );\n    const [from, to] = this.getFromToIndexes();\n    const itemsContainerId = `items-${this.sectionKind}-container`;\n\n    return (\n      <Host hidden={this.checkboxes.length < 1}>\n        <div class=\"mg-c-input__section-header\">\n          {this.sectionKind === SectionKind.SELECTED ? (\n            <mg-button variant=\"flat\" onClick={this.handleToggleClick} aria-controls={itemsContainerId} aria-expanded={this.expanded.toString()}>\n              <mg-icon icon={this.expanded ? 'chevron-up' : 'chevron-down'}></mg-icon>\n              <span class=\"mg-c-input__section-header-title\">{getText(this.checkboxes)}</span>\n            </mg-button>\n          ) : (\n            <p class=\"mg-c-input__section-header-title mg-c-input__section-header-title--static\">{getText(this.checkboxes)}</p>\n          )}\n          {((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (\n            <mg-tooltip class=\"mg-c-input__section-header-tootlip\" message={this.messages.tooltip}>\n              <mg-button variant=\"link\" onClick={this.massActionHandler}>\n                {this.messages.action}\n              </mg-button>\n            </mg-tooltip>\n          )}\n          {this.expanded && this.getPageCount(this.checkboxes) > 1 && (\n            <mg-pagination\n              key=\"search-pagination\"\n              totalPages={this.getPageCount(this.checkboxes)}\n              currentPage={this.currentPage}\n              onCurrent-page-change={this.handleCurrentPageChange}\n              hideNavigationLabels={true}\n              hidePageCount={true}\n              identifier={`input-checkbox-pagination-${this.sectionKind}`}\n            ></mg-pagination>\n          )}\n        </div>\n        <div hidden={!this.expanded} id={itemsContainerId} class=\"mg-c-input__section-content\">\n          <MgInputCheckboxList\n            checkboxes={this.getArrayRange(this.checkboxes, from, to)}\n            displaySearchInput={true}\n            messages={this.messages}\n            id={`items-${this.sectionKind}`}\n            disabled={this.disabled}\n            name={this.name}\n            invalid={this.invalid}\n          ></MgInputCheckboxList>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-input-checkbox-paginated2.js","mappings":"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","names":[],"sources":["src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts","src/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.tsx","src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.tsx"],"sourcesContent":["/**\n * interface CheckboxValue\n * use to match returned value\n */\nexport interface CheckboxValue {\n  title: string;\n  value: boolean | null;\n  disabled?: boolean;\n  required?: boolean;\n}\n\n/**\n * interface CheckboxItem\n * use to match checkbox attributes\n */\nexport interface CheckboxItem extends CheckboxValue {\n  _id: string;\n  _handleInput: (event: InputEvent & { target: HTMLInputElement }) => void;\n  _handleBlur: () => void;\n  _handleKeydown: (event: KeyboardEvent & { target: HTMLElement }) => void;\n}\n\n/**\n * List of all availables checkbox type\n */\nexport const checkboxTypes = ['checkbox', 'multi'] as const;\n\n/**\n * ChecboxType from checkbox types\n */\nexport type CheckboxType = (typeof checkboxTypes)[number];\n\n/**\n * mg-input-checkbox-paginated section kind type\n */\nexport type SectionKindType = 'selected' | 'not-selected';\n\n/**\n * mg-input-checkbox-paginated section kind value\n */\nexport const SectionKind: Record<string, SectionKindType> = {\n  SELECTED: 'selected',\n  NOT_SELECTED: 'not-selected',\n};\n\n/**\n * Base mg-input-checkbox interface\n */\nexport interface IMgInputCheckboxBase {\n  disabled?: boolean;\n  name?: string;\n  invalid?: boolean;\n}\n\n/**\n * mg-input-checkbox-list interface\n */\nexport interface MgInputCheckboxListProps extends IMgInputCheckboxBase {\n  displaySearchInput: boolean;\n  messages: Record<string, unknown>;\n  checkboxes: CheckboxItem[];\n  id: string;\n}\n","import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { MgInputCheckboxListProps } from './mg-input-checkbox.conf';\n\n/**\n * Get checkboxes list template\n * @param props - MgInputCheckboxList Interface Props\n * @returns input template\n */\nexport const MgInputCheckboxList: FunctionalComponent<MgInputCheckboxListProps> = (props: MgInputCheckboxListProps): VNode[] => (\n  <ul\n    class=\"mg-c-input__input-group-container\"\n    role=\"list\"\n    aria-describedby={props.displaySearchInput ? 'search-results' : undefined}\n    aria-label={props.displaySearchInput ? props.messages.searchResults : undefined}\n    aria-live={props.displaySearchInput ? 'polite' : undefined}\n    id={props.id}\n  >\n    {props.checkboxes.map(input => (\n      <li key={input._id} class={{ 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled }}>\n        <input\n          type=\"checkbox\"\n          id={input._id}\n          name={props.name}\n          value={input.value?.toString()}\n          checked={Boolean(input.value)}\n          required={input.required}\n          aria-invalid={props.invalid?.toString() || 'false'}\n          disabled={props.disabled || input.disabled}\n          indeterminate={input.value === null}\n          onInput={input._handleInput}\n          onBlur={input._handleBlur}\n          onKeyDown={input._handleKeydown}\n        />\n        <label htmlFor={input._id}>{input.title}</label>\n      </li>\n    ))}\n  </ul>\n);\n","import { Component, h, Prop, State, Event, EventEmitter, Watch, Host } from '@stencil/core';\nimport { CheckboxItem, IMgInputCheckboxBase, type SectionKindType, SectionKind } from '../mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from '../MgInputCheckboxList';\n\n/**\n * Internal component use to manage sections instances\n * @internal\n */\n@Component({\n  tag: 'mg-input-checkbox-paginated',\n  shadow: false,\n  scoped: true,\n})\nexport class MgInputCheckboxPaginated implements IMgInputCheckboxBase {\n  /*************\n   * Constantes *\n   *************/\n  private readonly offset = 10;\n  private sectionKind: SectionKindType;\n\n  /*************\n   * Decorators *\n   *************/\n\n  /**\n   * Define if mg-input-checkbox-list is readonly\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Define if mg-input-checkbox-list is disabled\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Define mg-input-checkbox input name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Define mg-input-checkbox input invalid\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Current page\n   */\n  @Prop({ mutable: true }) currentPage = 1;\n\n  /**\n   * Define checkboxes to paginate\n   */\n  @Prop() checkboxes: CheckboxItem[] = [];\n  @Watch('checkboxes')\n  watchCheckboxes(newValue: MgInputCheckboxPaginated['checkboxes'], oldValue?: MgInputCheckboxPaginated['checkboxes']): void {\n    const pageCountNewValue = this.getPageCount(newValue);\n    const pageCountOldValue = this.getPageCount(oldValue);\n    // after each array.length update we reset pagination\n    // when items fill on page, we set current page to 1\n    if (pageCountNewValue === 1 || (pageCountNewValue !== 0 && this.currentPage === 0)) {\n      this.currentPage = 1;\n    }\n    // when old items page numbers match the current page AND new items page number is lower than current page, we set the new last page\n    else if (pageCountOldValue === this.currentPage && pageCountNewValue < this.currentPage) {\n      this.currentPage--;\n    }\n    this.sectionKind = newValue[0].value ? SectionKind.SELECTED : SectionKind.NOT_SELECTED;\n  }\n\n  /**\n   * Define component message\n   */\n  @Prop() messages: Record<string, string>;\n\n  /**\n   * Emit 'mass-action' event\n   * used to informe that select-all/unselect-all button listner is triggered\n   */\n  @Event({ eventName: 'mass-action' }) massAction: EventEmitter<SectionKindType>;\n\n  /**\n   * Is checked items values expanded\n   */\n  @State() expanded = true;\n\n  /***********\n   * Methods *\n   ***********/\n\n  /**\n   * Mass action handler\n   */\n  private massActionHandler = (): void => {\n    this.massAction.emit(this.sectionKind);\n  };\n\n  /**\n   * Toggle items button handler\n   */\n  private handleToggleClick = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  /**\n   * Method to get a array range\n   * @param from - array start index\n   * @param to - array end index\n   * @returns array's range\n   */\n  private getArrayRange = <ItemType,>(array: ItemType[], from: number, to: number): ItemType[] => array.slice(from, to);\n\n  /**\n   * Get from and to index\n   * @returns [from,to] index\n   */\n  private getFromToIndexes(): number[] {\n    const isFirstPage = this.currentPage === 1;\n    const from = isFirstPage ? 0 : (this.currentPage - 1) * this.offset;\n    const to = isFirstPage ? this.offset : this.currentPage * this.offset;\n    return [from, to];\n  }\n\n  /**\n   * Method to get page count from items\n   * @param items - items to count\n   * @returns page count from items\n   */\n  private getPageCount = (items: unknown[]): number => (items?.length > 0 ? Math.ceil(items.length / this.offset) : 0);\n\n  /**\n   * Handle mg-pagination current page change event\n   * @param event - pagination current page change event\n   */\n  private handleCurrentPageChange = (event: CustomEvent): void => {\n    this.currentPage = Number(event.detail);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    this.watchCheckboxes(this.checkboxes);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const getText = (checkboxes: CheckboxItem[]): HTMLElement => (\n      <em class=\"mg-c-input__section-header-title-label\">{`${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`}</em>\n    );\n    const [from, to] = this.getFromToIndexes();\n    const itemsContainerId = `items-${this.sectionKind}-container`;\n\n    return (\n      <Host hidden={this.checkboxes.length < 1}>\n        <div class=\"mg-c-input__section-header\">\n          {this.sectionKind === SectionKind.SELECTED ? (\n            <mg-button variant=\"flat\" onClick={this.handleToggleClick} aria-controls={itemsContainerId} aria-expanded={this.expanded.toString()}>\n              <mg-icon icon={this.expanded ? 'chevron-up' : 'chevron-down'}></mg-icon>\n              <span class=\"mg-c-input__section-header-title\">{getText(this.checkboxes)}</span>\n            </mg-button>\n          ) : (\n            <p class=\"mg-c-input__section-header-title mg-c-input__section-header-title--static\">{getText(this.checkboxes)}</p>\n          )}\n          {((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (\n            <mg-tooltip class=\"mg-c-input__section-header-tootlip\" message={this.messages.tooltip}>\n              <mg-button variant=\"link\" onClick={this.massActionHandler}>\n                {this.messages.action}\n              </mg-button>\n            </mg-tooltip>\n          )}\n          {this.expanded && this.getPageCount(this.checkboxes) > 1 && (\n            <mg-pagination\n              key=\"search-pagination\"\n              totalPages={this.getPageCount(this.checkboxes)}\n              currentPage={this.currentPage}\n              onCurrent-page-change={this.handleCurrentPageChange}\n              hideNavigationLabels={true}\n              hidePageCount={true}\n              identifier={`input-checkbox-pagination-${this.sectionKind}`}\n            ></mg-pagination>\n          )}\n        </div>\n        <div hidden={!this.expanded} id={itemsContainerId} class=\"mg-c-input__section-content\">\n          <MgInputCheckboxList\n            checkboxes={this.getArrayRange(this.checkboxes, from, to)}\n            displaySearchInput={true}\n            messages={this.messages}\n            id={`items-${this.sectionKind}`}\n            disabled={this.disabled}\n            name={this.name}\n            invalid={this.invalid}\n          ></MgInputCheckboxList>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-input-checkbox.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { e as et, m as me, X as Xe, Y as Ye } from './index.es.js';
+import { K as Ke, t as tt, m as me, V as Ve } from './index.es.js';
 import { d as defineCustomElement$a, S as SectionKind, M as MgInputCheckboxList, c as checkboxTypes } from './mg-input-checkbox-paginated2.js';
 import { d as defineCustomElement$b, c as classFieldset, a as classVerticalList, b as classReadonly, e as classDisabled } from './mg-input2.js';
 import { i as initLocales } from './index2.js';
@@ -46,6 +46,55 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         this.searchStart = 10;
         // popover variables
         this.hasOpenedPopover = false;
+        /**
+         * Define input name
+         * If not set the value equals the identifier
+         */
+        this.name = this.identifier;
+        /**
+         * Define if label is visible
+         */
+        this.labelHide = false;
+        /**
+         * Define if inputs are display verticaly
+         */
+        this.inputVerticalList = false;
+        /**
+         * Define if mg-input-checkbox is required
+         */
+        this.required = false;
+        /**
+         * Define if mg-input-checkbox is readonly
+         */
+        this.readonly = false;
+        /**
+         * Define if input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Define tooltip position
+         */
+        this.tooltipPosition = 'input';
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ke([this.baseClassName, classFieldset]);
+        /**
+         * Formated value to display in list
+         */
+        this.checkboxItems = [];
+        /**
+         * Search value query
+         */
+        this.searchValue = '';
+        /**
+         * Search current page
+         */
+        this.searchResults = [];
+        /**
+         * Select values button text local key
+         */
+        this.selectValuesButtonKey = 'editButton';
         /**
          * Handle input event
          * @param event - input event
@@ -147,7 +196,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
          * Method to update searchResults
          */
         this.updateSearchResults = () => {
-            this.searchResults = this.checkboxItems.filter(item => et(item.title).includes(et(this.searchValue)));
+            this.searchResults = this.checkboxItems.filter(item => tt(item.title).includes(tt(this.searchValue)));
         };
         /**
          * Method to validate if one of inputs value is checked id required
@@ -234,33 +283,6 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
          * @returns The rendered MgInputCheckboxList component.
          */
         this.renderMgInputCheckboxList = () => (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid }));
-        this.value = undefined;
-        this.type = undefined;
-        this.identifier = undefined;
-        this.name = this.identifier;
-        this.label = undefined;
-        this.labelOnTop = undefined;
-        this.labelHide = false;
-        this.inputVerticalList = false;
-        this.required = false;
-        this.readonly = false;
-        this.displaySelectedValues = undefined;
-        this.disabled = false;
-        this.tooltip = undefined;
-        this.tooltipPosition = 'input';
-        this.helpText = undefined;
-        this.valid = undefined;
-        this.invalid = undefined;
-        this.editButtonMessage = undefined;
-        this.showButtonMessage = undefined;
-        this.selectButtonMessage = undefined;
-        this.classCollection = new Xe([this.baseClassName, classFieldset]);
-        this.errorMessage = undefined;
-        this.checkboxItems = [];
-        this.displaySearchInput = undefined;
-        this.searchValue = '';
-        this.searchResults = [];
-        this.selectValuesButtonKey = 'editButton';
     }
     validateValue(newValue) {
         if (isCheckboxItems(newValue)) {
@@ -268,12 +290,12 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
             this.valueChange.emit(newValue);
         }
         else {
-            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${Ve(newValue)}.`);
         }
     }
     validateType(newValue) {
         if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
-            throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${Ve(newValue)}.`);
         }
         else if (newValue === undefined) {
             this.mode = 'auto';
@@ -345,10 +367,21 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
     /**
      * Display input error if it exists.
      */
-    async displayError() {
-        this.checkValidity();
-        this.setErrorMessage();
-        this.hasDisplayedError = this.invalid;
+    displayError() {
+        // Use `Promise` as requested for stencil method
+        // Use `requestAnimationFrame` to ensure:
+        // - DOM is fully updated before validation
+        // - Async operations are completed
+        // - No timing issues with Stencil's render cycle
+        // - Keep everything in sync both inside and outside the component
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                this.checkValidity();
+                this.setErrorMessage();
+                this.hasDisplayedError = this.invalid;
+                resolve();
+            });
+        });
     }
     /**
      * Set an error and display a custom error message.
@@ -499,7 +532,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: '5a6c84d1f533159645c5aec09bb6e82a7cd30cc7', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
+        return (h("mg-input", { key: '08c3ca7708ff929696a83a8d7c4fe627e7651963', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-input-checkbox.js.map

@@ -1 +1 @@
-{"file":"mg-input-checkbox.js","mappings":"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","names":["MgInputCheckbox","cleanString","isValidString","ClassList","toString"],"sources":["../styles/dist/components/mg-input-checkbox.css?tag=mg-input-checkbox&encapsulation=shadow","src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.tsx"],"sourcesContent":[".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.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-input.mg-c-input--checkbox-multi .mg-c-input__input-group-container{padding:var(--mg-b-size-4) var(--mg-b-size-8);margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container{display:flex;width:unset;flex:unset;flex-wrap:wrap;column-gap:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container-list{display:flex;flex-flow:row wrap;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__sections{max-height:80vh;padding-right:var(--mg-b-size-8);overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header{display:flex;min-height:var(--mg-b-size-min-height);flex-wrap:wrap;flex-wrap:nowrap;align-items:center;gap:var(--mg-b-size-8);text-wrap:nowrap}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-tootlip{display:inline-block;width:auto;height:auto;margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title{display:inline;margin:0;color:var(--mg-b-color-neutral-80)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title-label{font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title--static.mg-c-input__section-header-title{margin:0 var(--mg-b-size-12)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-value{display:inline-flex;min-width:var(--mg-b-size-min-height);min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-radius:var(--mg-b-size-4);background-color:var(--mg-b-color-neutral-20);font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-no-result{text-align:center}.mg-c-input.mg-c-input--checkbox-multi b{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container b{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--with-values .mg-c-input__input-container{gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content{display:flex;width:calc(var(--mg-b-size-floating-element-max-width) - var(--mg-b-size-16));height:calc(50*var(--mg-b-size-8));flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__section-header-tootlip){margin-left:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-c-card-spacing: var(--mg-b-size-8)}.mg-c-input.mg-c-input--readonly ul{display:flex;min-height:var(--mg-b-font-size);flex-flow:column wrap;padding:0;margin:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) 0 0;list-style:none;row-gap:var(--mg-b-size-8)}/*# sourceMappingURL=mg-input-checkbox.css.map */\n","import { Component, Element, Event, h, Prop, EventEmitter, State, Watch, Method } from '@stencil/core';\nimport { ClassList, cleanString, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { CheckboxItem, CheckboxType, CheckboxValue, checkboxTypes, SectionKind, MgInputCheckboxListProps, SectionKindType } from './mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from './MgInputCheckboxList';\nimport { classDisabled, type TooltipPosition, classReadonly, classFieldset, classVerticalList } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\n\n/**\n * type CheckboxItem validation function\n * @param items - Checkbox item\n * @returns match item type\n */\nconst isCheckboxItems = (items: unknown): items is CheckboxItem[] =>\n  Array.isArray(items) &&\n  items.every(item => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined);\n\n@Component({\n  tag: 'mg-input-checkbox',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-checkbox.css',\n  shadow: true,\n})\nexport class MgInputCheckbox implements Omit<MgInputCheckboxListProps, 'id' | 'checkboxes' | 'messages'> {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private mgPopover: HTMLMgPopoverElement;\n  private searchInput: HTMLInputElement;\n\n  // Locales\n  private messages;\n\n  // hasDisplayedError (triggered by blur event)\n  private hasDisplayedError = false;\n\n  private mode: 'custom' | 'auto' = 'custom';\n\n  // style\n  private readonly baseClassName = 'mg-c-input--checkbox';\n  private readonly classTypeMulti = 'mg-c-input--checkbox-multi';\n  private readonly classWithValues = 'mg-c-input--with-values';\n  private readonly classSearchMode = 'mg-c-input--search-mode';\n\n  // \"multi\" setup\n  private readonly multiStart = 5;\n  private readonly searchStart = 10;\n\n  // popover variables\n  private hasOpenedPopover = false;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputCheckboxElement;\n\n  /**\n   * Component value\n   * If item.value is `null`, checkbox will be indeterminate by default\n   */\n  @Prop({ mutable: true }) value!: CheckboxValue[];\n  @Watch('value')\n  validateValue(newValue: MgInputCheckbox['value']): void {\n    if (isCheckboxItems(newValue)) {\n      this.checkboxItems = newValue.map((item, index) => ({\n        ...item,\n        _id: `${this.identifier}_${index}`,\n        _handleInput: this.handleInput.bind(this),\n        _handleBlur: this.handleBlur.bind(this),\n        _handleKeydown: this.handleKeydown.bind(this),\n      }));\n      this.valueChange.emit(newValue);\n    } else {\n      throw new Error(`<mg-input-checkbox> prop \"value\" is required and all values must be the same type, CheckboxItem. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define checkbox type\n   * When it's undefined the type is dynamic:\n   * - With 0-5 items type is 'checkbox'\n   * - With 5-10 items type is 'multi'\n   * When it set the type is locked to the defined value.\n   * When type is dynamic OR with 'multi' type AND Over 10 items \"search\" feature is enabled\n   */\n  @Prop({ mutable: true }) type: CheckboxType;\n  @Watch('type')\n  validateType(newValue: MgInputCheckbox['type']): void {\n    if (newValue !== undefined && !checkboxTypes.includes(newValue)) {\n      throw new Error(`<mg-input-checkbox> prop \"type\" must be a CheckboxType. Passed value: ${toString(newValue)}.`);\n    } else if (newValue === undefined) {\n      this.mode = 'auto';\n      this.type = checkboxTypes[0];\n    } else if (newValue === 'multi') {\n      this.classCollection.add(this.classTypeMulti);\n      this.element.dataset.mgPopoverGuard = this.getMgPopoverIdentifier();\n    } else {\n      this.classCollection.delete(this.classTypeMulti);\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Define input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name = this.identifier;\n\n  /**\n   * Define input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop?: boolean;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Define if inputs are display verticaly\n   */\n  @Prop() inputVerticalList = false;\n  @Watch('inputVerticalList')\n  watchInputVerticalList(newValue: MgInputCheckbox['inputVerticalList']): void {\n    if (newValue) this.classCollection.add(classVerticalList);\n    else this.classCollection.delete(classVerticalList);\n  }\n\n  /**\n   * Define if mg-input-checkbox is required\n   */\n  @Prop() required = false;\n\n  /**\n   * Define if mg-input-checkbox is readonly\n   */\n  @Prop() readonly = false;\n  @Watch('readonly')\n  watchReadonly(newValue: MgInputCheckbox['readonly']): void {\n    if (newValue) this.classCollection.add(classReadonly);\n    else this.classCollection.delete(classReadonly);\n  }\n\n  /**\n   * Display selected values list in \"multi\" type\n   * This prop is only applied with prop type \"multi\" or when an \"unset\" mode render a \"multi\" type.\n   */\n  @Prop() displaySelectedValues?: boolean;\n  @Watch('displaySelectedValues')\n  watchDisplaySelectedValues(newValue: MgInputCheckbox['displaySelectedValues']): void {\n    if (newValue) this.classCollection.add(this.classWithValues);\n    else this.classCollection.delete(this.classWithValues);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n    if (prop !== 'readonly') this.updateCheckboxItems(prop, newValue);\n    this.checkValidity();\n    if (this.hasDisplayedError) {\n      this.hasDisplayedError = prop !== 'required';\n      this.setErrorMessage(this.hasDisplayedError);\n    }\n    this.setButtonTextKey();\n  }\n\n  @Watch('disabled')\n  validateDisabled(newValue: MgInputCheckbox['disabled']): void {\n    if (newValue) this.classCollection.add(classDisabled);\n    else this.classCollection.delete(classDisabled);\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText?: string;\n\n  /**\n   * Define input valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define input invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Overwrite default \"edit\" button message\n   */\n  @Prop() editButtonMessage: string;\n  /**\n   * Overwrite default \"show\" button message\n   */\n  @Prop() showButtonMessage: string;\n\n  /**\n   * Overwrite default \"select\" button message\n   */\n  @Prop() selectButtonMessage: string;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList([this.baseClassName, classFieldset]);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Formated value to display in list\n   */\n  @State() checkboxItems: CheckboxItem[] = [];\n  @Watch('checkboxItems')\n  validateCheckboxItems(newValue: MgInputCheckbox['checkboxItems']): void {\n    // For the 'auto' mode we update the type depending on the new value's length.\n    if (this.mode === 'auto') this.type = newValue.length > this.multiStart ? 'multi' : 'checkbox';\n    // If the type is multi and the new value's length is greater than the search gauge, display the search input.\n    this.displaySearchInput = this.type === 'multi' && newValue.length > this.searchStart;\n    // refresh search values\n    if (this.displaySearchInput) this.updateSearchResults();\n    this.setButtonTextKey();\n  }\n\n  /**\n   * Display search input\n   */\n  @State() displaySearchInput: boolean;\n  @Watch('displaySearchInput')\n  watchDisplaySearchInput(newValue: MgInputCheckbox['displaySearchInput']): void {\n    if (newValue) this.classCollection.add(this.classSearchMode);\n    else this.classCollection.delete(this.classSearchMode);\n  }\n\n  /**\n   * Search value query\n   */\n  @State() searchValue = '';\n  @Watch('searchValue')\n  validateSearchValue(): void {\n    // refresh search values\n    this.updateSearchResults();\n  }\n\n  /**\n   * Search current page\n   */\n  @State() searchResults: CheckboxItem[] = [];\n\n  /**\n   * Select values button text local key\n   */\n  @State() selectValuesButtonKey: 'editButton' | 'showButton' | 'selectButton' = 'editButton';\n\n  /**\n   * Emitted event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputCheckboxElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputCheckboxElement['valid']>;\n\n  /**\n   * Display input error if it exists.\n   */\n  @Method()\n  async displayError(): Promise<void> {\n    this.checkValidity();\n    this.setErrorMessage();\n    this.hasDisplayedError = this.invalid;\n  }\n\n  /**\n   * Set an error and display a custom error message.\n   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n   * It must be paired with an error message to display for the given context.\n   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n   * @param valid - value indicating the validity\n   * @param errorMessage - the error message to display\n   */\n  @Method()\n  async setError(valid: MgInputCheckbox['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-checkbox> method \"setError()\" param \"valid\" must be a boolean.');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-checkbox> method \"setError()\" param \"errorMessage\" must be a string.');\n    } else {\n      this.setValidity(valid);\n      this.setErrorMessage(undefined, valid ? undefined : errorMessage);\n      this.hasDisplayedError = this.invalid;\n    }\n  }\n\n  /**\n   * Reset value, validity and error state\n   */\n  @Method()\n  async reset(): Promise<void> {\n    if (!this.readonly) {\n      this.value = this.value.map(item => ({ ...item, value: false }));\n      this.checkValidity();\n      this.errorMessage = undefined;\n      this.hasDisplayedError = false;\n    }\n  }\n\n  /**\n   * Method to set validity values\n   * @param newValue - valid new value\n   */\n  private setValidity(newValue: MgInputCheckbox['valid']) {\n    const oldValidValue = this.valid;\n    this.valid = newValue;\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    if (this.valid !== oldValidValue) this.inputValid.emit(this.valid);\n  }\n\n  /**\n   * Handle input event\n   * @param event - input event\n   */\n  private handleInput = (event: InputEvent & { target: HTMLInputElement }): void => {\n    this.updateCheckboxItems('value', Boolean(event.target.checked), item => item._id === event.target.id);\n    this.updateValues();\n    this.checkValidity();\n    this.setErrorMessage();\n  };\n\n  /**\n   * Keyboard handler\n   * @param event - to track \"tab\" key\n   */\n  private handleKeydown = (event: KeyboardEvent & { target: HTMLElement }): void => {\n    // track \"Tab\" key event when popover display (is \"multi\" type selected)\n    if (event.key === 'Tab' && this.mgPopover?.display) {\n      // when search input and do a back tab we close the popover\n      if (Boolean(this.searchInput) && event.shiftKey && this.searchInput.id === event.target.id) {\n        this.mgPopover.display = false;\n        return;\n      }\n\n      const enableInputs = Array.from(this.element.shadowRoot.querySelectorAll('input'))\n        .filter(input => !input.hasAttribute('disabled'))\n        .map(({ id }) => id);\n      const originInputIndex = enableInputs.findIndex(id => id === event.target.id);\n\n      // close popover when tab trigger focus outside its DOM\n      if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) || (originInputIndex === 0 && event.shiftKey && this.searchInput === undefined))\n        this.mgPopover.display = false;\n    }\n  };\n\n  /**\n   * Handle blur event\n   */\n  private handleBlur = (): void => {\n    // Check validity\n    this.checkValidity();\n    this.setErrorMessage();\n  };\n\n  /**\n   * Handle input search value-change event\n   * @param event - input value-change event\n   */\n  private handleSearchChange = (event: CustomEvent): void => {\n    this.searchValue = event.detail;\n    event.stopPropagation();\n  };\n\n  /**\n   * popover display-change handler\n   * @param event - mg-popover display-change custom event\n   */\n  private handleMgPopoverDisplayChange = (event: CustomEvent): void => {\n    // 1. update hasOpenedPopover guard with event value\n    this.hasOpenedPopover = event.detail;\n\n    // 2. update selected valued button text\n    this.setButtonTextKey();\n\n    // 3. when popover display change to hide, update reset needeed props and run checkValidity\n    if (!event.detail) {\n      // reset search value\n      this.searchValue = '';\n      // reset pagintated section current page\n      Array.from(this.element.shadowRoot.querySelectorAll('mg-input-checkbox-paginated')).forEach(element => {\n        element.currentPage = 1;\n      });\n      this.checkValidity();\n    }\n  };\n\n  /**\n   * Handle select all button\n   * @param event - mass action event trigger a global select/unselect on values\n   */\n  private handleMassAction = (event: CustomEvent<SectionKindType>): void => {\n    const displayItems = this.getDisplayItems();\n\n    // update only displayed items\n    displayItems.forEach(item => {\n      item.value = event.detail !== SectionKind.SELECTED;\n    });\n    this.updateValues();\n  };\n\n  /**\n   * Update values\n   */\n  private updateValues = (): void => {\n    this.value = this.checkboxItems.map(o => {\n      delete o._handleBlur;\n      delete o._handleInput;\n      delete o._handleKeydown;\n      delete o._id;\n      return o;\n    });\n  };\n\n  /**\n   * Update ckecboxes item\n   * @param key - property to update\n   * @param newValue - value to update with\n   * @param condition - condtion to applu change on item\n   */\n  private updateCheckboxItems(key: string, newValue: unknown, condition?: (item: CheckboxItem) => boolean): void {\n    this.checkboxItems = this.checkboxItems.map(item => {\n      if ((typeof condition === 'function' && condition(item)) || condition === undefined) item[key] = newValue;\n      return item;\n    });\n  }\n\n  /**\n   * has invalid input\n   * @returns true if at least one input is invalid\n   */\n  private hasInvalidInput = (): boolean =>\n    Array.from(this.element.shadowRoot.querySelectorAll('input[type=\"checkbox\"]')).some((input: HTMLInputElement) => !input.disabled && !input.checkValidity());\n\n  /**\n   * Method to update searchResults\n   */\n  private updateSearchResults = (): void => {\n    this.searchResults = this.checkboxItems.filter(item => cleanString(item.title).includes(cleanString(this.searchValue)));\n  };\n\n  /**\n   * Method to validate if one of inputs value is checked id required\n   * @returns truthy if condition is valid\n   */\n  private validateRequired = (): boolean => !this.required || this.checkboxItems.some(({ value }) => value);\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || (!this.hasInvalidInput() && this.validateRequired()));\n  };\n\n  /**\n   * Set button text locale key\n   */\n  private setButtonTextKey = (): void => {\n    // prevent key update while popover is openned\n    if (this.hasOpenedPopover) return;\n    let messageKey: MgInputCheckbox['selectValuesButtonKey'] = 'editButton';\n    if (this.disabled) messageKey = 'showButton';\n    else if (this.getSelectedItems().length < 1) messageKey = 'selectButton';\n\n    this.selectValuesButtonKey = messageKey;\n  };\n\n  /**\n   * Get select values button message\n   * @returns message to display\n   */\n  private getSelectValuesButtonMessage = (): string => {\n    if (this.selectValuesButtonKey === 'editButton' && isValidString(this.editButtonMessage)) {\n      return this.editButtonMessage;\n    } else if (this.selectValuesButtonKey === 'showButton' && isValidString(this.showButtonMessage)) {\n      return this.showButtonMessage;\n    } else if (this.selectValuesButtonKey === 'selectButton' && isValidString(this.selectButtonMessage)) {\n      return this.selectButtonMessage;\n    } else {\n      return this.messages.input.checkbox[this.selectValuesButtonKey];\n    }\n  };\n\n  /**\n   * Set input error message\n   * @param displayError - dispay error condition\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (displayError = true, errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    if (displayError && !this.valid) {\n      if (errorMessage !== undefined) this.errorMessage = errorMessage;\n      else if (!this.validateRequired()) this.errorMessage = this.messages.errors.required;\n    }\n  };\n\n  /**\n   * Method to get mg-popover identifier\n   * @returns MgPopover identifier\n   */\n  private getMgPopoverIdentifier = (): string => `${this.identifier}-input-mg-popover`;\n\n  /**\n   * Manage items to display depending on the search state\n   * @returns items to display\n   */\n  private getDisplayItems = (): CheckboxItem[] => (this.searchValue.length > 0 ? this.searchResults : this.checkboxItems);\n\n  /**\n   * get list of selected checkboxItems\n   * @returns selected checkboxItems\n   */\n  private getSelectedItems = (): CheckboxItem[] => this.checkboxItems.filter(({ value }) => value);\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   * @returns timeout\n   */\n  componentWillLoad(): ReturnType<typeof setTimeout> {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n\n    // Validate\n    // `validateType` must be done before `validateValue` because we need to set mode['auto'|'custom'] from type\n    // and `validateValue` updates `this.checkboxItems` watcher which requires a defined `this.type`.\n    this.validateType(this.type);\n    this.validateValue(this.value);\n    this.validateDisabled(this.disabled);\n    this.watchReadonly(this.readonly);\n    this.watchInputVerticalList(this.inputVerticalList);\n    this.watchDisplaySelectedValues(this.displaySelectedValues);\n    this.watchDisplaySearchInput(this.displaySearchInput);\n    // Check validity when component is ready\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      this.checkValidity();\n    }, 0);\n  }\n\n  /**\n   * add listeners and DOM attributed\n   */\n  componentDidLoad(): void {\n    if (!this.readonly) {\n      this.searchInput = this.element.shadowRoot.querySelector('mg-input-text')?.shadowRoot.querySelector('input');\n      this.searchInput?.addEventListener('keydown', this.handleKeydown);\n    }\n  }\n\n  /**\n   * Render checkboxes by section\n   * @param checkboxes - checkboxes to render\n   * @returns render sections of checkboxes\n   */\n  private renderCheckboxBySection(checkboxes: CheckboxItem[]): HTMLElement[] {\n    const [checkedValues, notCheckedValues] = checkboxes.reduce(\n      (acc, curr) => {\n        acc[curr.value ? 0 : 1].push(curr);\n        return acc;\n      },\n      [[], []],\n    );\n\n    const baseSection = {\n      readonly: this.readonly,\n      disabled: this.disabled,\n      identifier: this.identifier,\n    };\n\n    const sections = [\n      {\n        ...baseSection,\n        checkboxes: checkedValues,\n        messages: this.messages.input.checkbox.sections.selected,\n      },\n      {\n        ...baseSection,\n        checkboxes: notCheckedValues,\n        messages: this.messages.input.checkbox.sections.notSelected,\n      },\n    ];\n\n    return sections\n      .filter(section => section.checkboxes.length)\n      .map(section => <mg-input-checkbox-paginated {...section} onMass-action={this.handleMassAction} key={section.messages}></mg-input-checkbox-paginated>);\n  }\n\n  /**\n   * render checkbox multi element\n   * @returns html element\n   */\n  private renderCheckboxMulti(): HTMLElement {\n    const selectedValuesNb = this.getSelectedItems().length;\n    const checkboxes = this.getDisplayItems();\n\n    return (\n      <div class=\"mg-c-input__input-container\">\n        <mg-popover\n          arrowHide={true}\n          identifier={this.getMgPopoverIdentifier()}\n          display={this.hasOpenedPopover}\n          onDisplay-change={this.handleMgPopoverDisplayChange}\n          ref={(el: HTMLMgPopoverElement) => {\n            if (el !== null) this.mgPopover = el;\n          }}\n        >\n          <mg-button variant=\"secondary\" aria-describedby={`${this.identifier}-title`}>\n            <mg-icon icon=\"list\"></mg-icon>\n            {this.getSelectValuesButtonMessage()}\n          </mg-button>\n          <div slot=\"content\" class=\"mg-c-input__content\">\n            {this.displaySearchInput ? (\n              [\n                <mg-input-text\n                  key=\"input-search\"\n                  identifier={`${this.identifier}-input-search`}\n                  icon=\"magnifying-glass\"\n                  type=\"search\"\n                  placeholder={this.messages.input.checkbox.label}\n                  label={this.messages.input.checkbox.label}\n                  mgWidth=\"full\"\n                  value={this.searchValue}\n                  labelHide={true}\n                  characterLeftHide={true}\n                  name=\"q\"\n                  onValue-change={this.handleSearchChange}\n                  aria-controls=\"search-results items-list\"\n                ></mg-input-text>,\n                <p key=\"search-results\" role=\"status\" class=\"mg-u-visually-hidden\" id=\"search-results\">\n                  {`${checkboxes.length} ${this.messages.input.checkbox[checkboxes.length > 0 ? 'results' : 'result']}`}\n                </p>,\n                <div key=\"sections-container\" class=\"mg-c-input__sections\">\n                  {this.renderCheckboxBySection(checkboxes)}\n                </div>,\n              ]\n            ) : (\n              <MgInputCheckboxList\n                checkboxes={checkboxes}\n                displaySearchInput={this.displaySearchInput}\n                messages={this.messages.input.checkbox}\n                id=\"checkboxes-list\"\n                disabled={this.disabled}\n                name={this.name}\n                invalid={this.invalid}\n              ></MgInputCheckboxList>\n            )}\n            {this.displaySearchInput && checkboxes.length === 0 && <p class=\"mg-c-input__input-no-result\">{this.messages.input.checkbox.noResult}</p>}\n          </div>\n        </mg-popover>\n        {this.displaySelectedValues ? (\n          selectedValuesNb > 0 && (\n            <ul role=\"list\" class=\"mg-c-input__input-container-list\">\n              {this.getSelectedItems().map(({ title }) => (\n                <li class=\"mg-c-input__input-value\" key={title}>\n                  {title}\n                </li>\n              ))}\n            </ul>\n          )\n        ) : (\n          <b>{this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)}</b>\n        )}\n      </div>\n    );\n  }\n\n  /**\n   * Renders the readonly value of the input.\n   * @returns The rendered readonly value.\n   */\n  private renderReadonly = (readonlyValue: string[]): HTMLElement => {\n    return this.inputVerticalList ? (\n      <ul class=\"mg-c-input__readonly-value\">\n        {readonlyValue.map(value => (\n          <li key={value}>\n            <b>{value}</b>\n          </li>\n        ))}\n      </ul>\n    ) : (\n      <b class=\"mg-c-input__readonly-value\">{readonlyValue.join(', ')}</b>\n    );\n  };\n\n  /**\n   * Renders the MgInputCheckboxList component.\n   * @returns The rendered MgInputCheckboxList component.\n   */\n  private renderMgInputCheckboxList = () => (\n    <MgInputCheckboxList\n      checkboxes={this.checkboxItems}\n      displaySearchInput={this.displaySearchInput}\n      messages={this.messages.input.checkbox}\n      id=\"checkboxes-list\"\n      disabled={this.disabled}\n      name={this.name}\n      invalid={this.invalid}\n    ></MgInputCheckboxList>\n  );\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    let inputContent: HTMLElement;\n    const readonlyValue = this.value.filter(({ value }) => value).map(({ title }) => title);\n\n    if (this.readonly) {\n      inputContent = this.renderReadonly(readonlyValue);\n    } else if (this.type === 'checkbox') {\n      inputContent = this.renderMgInputCheckboxList();\n    } else {\n      inputContent = this.renderCheckboxMulti();\n    }\n\n    return (\n      <mg-input\n        label={this.label}\n        identifier={this.identifier}\n        class={this.classCollection.join()}\n        ariaDescribedbyIDs={[]}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={!this.readonly ? this.required : undefined} // required is only used display asterisk\n        tooltip={this.tooltip}\n        tooltipPosition={this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition}\n        helpText={!this.readonly ? this.helpText : undefined}\n        errorMessage={!this.readonly ? this.errorMessage : undefined}\n      >\n        {inputContent}\n      </mg-input>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-input-checkbox.js","mappings":"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","names":["MgInputCheckbox","ClassList","cleanString","isValidString","toString"],"sources":["../styles/dist/components/mg-input-checkbox.css?tag=mg-input-checkbox&encapsulation=shadow","src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.tsx"],"sourcesContent":[".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.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-input.mg-c-input--checkbox-multi .mg-c-input__input-group-container{padding:var(--mg-b-size-4) var(--mg-b-size-8);margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container{display:flex;width:unset;flex:unset;flex-wrap:wrap;column-gap:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container-list{display:flex;flex-flow:row wrap;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__sections{max-height:80vh;padding-right:var(--mg-b-size-8);overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header{display:flex;min-height:var(--mg-b-size-min-height);flex-wrap:wrap;flex-wrap:nowrap;align-items:center;gap:var(--mg-b-size-8);text-wrap:nowrap}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-tootlip{display:inline-block;width:auto;height:auto;margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title{display:inline;margin:0;color:var(--mg-b-color-neutral-80)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title-label{font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title--static.mg-c-input__section-header-title{margin:0 var(--mg-b-size-12)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-value{display:inline-flex;min-width:var(--mg-b-size-min-height);min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-radius:var(--mg-b-size-4);background-color:var(--mg-b-color-neutral-20);font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-no-result{text-align:center}.mg-c-input.mg-c-input--checkbox-multi b{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container b{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--with-values .mg-c-input__input-container{gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content{display:flex;width:calc(var(--mg-b-size-floating-element-max-width) - var(--mg-b-size-16));height:calc(50*var(--mg-b-size-8));flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__section-header-tootlip){margin-left:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-c-card-spacing: var(--mg-b-size-8)}.mg-c-input.mg-c-input--readonly ul{display:flex;min-height:var(--mg-b-font-size);flex-flow:column wrap;padding:0;margin:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) 0 0;list-style:none;row-gap:var(--mg-b-size-8)}/*# sourceMappingURL=mg-input-checkbox.css.map */\n","import { Component, Element, Event, h, Prop, EventEmitter, State, Watch, Method } from '@stencil/core';\nimport { ClassList, cleanString, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { CheckboxItem, CheckboxType, CheckboxValue, checkboxTypes, SectionKind, MgInputCheckboxListProps, SectionKindType } from './mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from './MgInputCheckboxList';\nimport { classDisabled, type TooltipPosition, classReadonly, classFieldset, classVerticalList } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\n\n/**\n * type CheckboxItem validation function\n * @param items - Checkbox item\n * @returns match item type\n */\nconst isCheckboxItems = (items: unknown): items is CheckboxItem[] =>\n  Array.isArray(items) &&\n  items.every(item => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined);\n\n@Component({\n  tag: 'mg-input-checkbox',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-checkbox.css',\n  shadow: true,\n})\nexport class MgInputCheckbox implements Omit<MgInputCheckboxListProps, 'id' | 'checkboxes' | 'messages'> {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private mgPopover: HTMLMgPopoverElement;\n  private searchInput: HTMLInputElement;\n\n  // Locales\n  private messages;\n\n  // hasDisplayedError (triggered by blur event)\n  private hasDisplayedError = false;\n\n  private mode: 'custom' | 'auto' = 'custom';\n\n  // style\n  private readonly baseClassName = 'mg-c-input--checkbox';\n  private readonly classTypeMulti = 'mg-c-input--checkbox-multi';\n  private readonly classWithValues = 'mg-c-input--with-values';\n  private readonly classSearchMode = 'mg-c-input--search-mode';\n\n  // \"multi\" setup\n  private readonly multiStart = 5;\n  private readonly searchStart = 10;\n\n  // popover variables\n  private hasOpenedPopover = false;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputCheckboxElement;\n\n  /**\n   * Component value\n   * If item.value is `null`, checkbox will be indeterminate by default\n   */\n  @Prop({ mutable: true }) value!: CheckboxValue[];\n  @Watch('value')\n  validateValue(newValue: MgInputCheckbox['value']): void {\n    if (isCheckboxItems(newValue)) {\n      this.checkboxItems = newValue.map((item, index) => ({\n        ...item,\n        _id: `${this.identifier}_${index}`,\n        _handleInput: this.handleInput.bind(this),\n        _handleBlur: this.handleBlur.bind(this),\n        _handleKeydown: this.handleKeydown.bind(this),\n      }));\n      this.valueChange.emit(newValue);\n    } else {\n      throw new Error(`<mg-input-checkbox> prop \"value\" is required and all values must be the same type, CheckboxItem. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define checkbox type\n   * When it's undefined the type is dynamic:\n   * - With 0-5 items type is 'checkbox'\n   * - With 5-10 items type is 'multi'\n   * When it set the type is locked to the defined value.\n   * When type is dynamic OR with 'multi' type AND Over 10 items \"search\" feature is enabled\n   */\n  @Prop({ mutable: true }) type: CheckboxType;\n  @Watch('type')\n  validateType(newValue: MgInputCheckbox['type']): void {\n    if (newValue !== undefined && !checkboxTypes.includes(newValue)) {\n      throw new Error(`<mg-input-checkbox> prop \"type\" must be a CheckboxType. Passed value: ${toString(newValue)}.`);\n    } else if (newValue === undefined) {\n      this.mode = 'auto';\n      this.type = checkboxTypes[0];\n    } else if (newValue === 'multi') {\n      this.classCollection.add(this.classTypeMulti);\n      this.element.dataset.mgPopoverGuard = this.getMgPopoverIdentifier();\n    } else {\n      this.classCollection.delete(this.classTypeMulti);\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Define input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name = this.identifier;\n\n  /**\n   * Define input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop?: boolean;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Define if inputs are display verticaly\n   */\n  @Prop() inputVerticalList = false;\n  @Watch('inputVerticalList')\n  watchInputVerticalList(newValue: MgInputCheckbox['inputVerticalList']): void {\n    if (newValue) this.classCollection.add(classVerticalList);\n    else this.classCollection.delete(classVerticalList);\n  }\n\n  /**\n   * Define if mg-input-checkbox is required\n   */\n  @Prop() required = false;\n\n  /**\n   * Define if mg-input-checkbox is readonly\n   */\n  @Prop() readonly = false;\n  @Watch('readonly')\n  watchReadonly(newValue: MgInputCheckbox['readonly']): void {\n    if (newValue) this.classCollection.add(classReadonly);\n    else this.classCollection.delete(classReadonly);\n  }\n\n  /**\n   * Display selected values list in \"multi\" type\n   * This prop is only applied with prop type \"multi\" or when an \"unset\" mode render a \"multi\" type.\n   */\n  @Prop() displaySelectedValues?: boolean;\n  @Watch('displaySelectedValues')\n  watchDisplaySelectedValues(newValue: MgInputCheckbox['displaySelectedValues']): void {\n    if (newValue) this.classCollection.add(this.classWithValues);\n    else this.classCollection.delete(this.classWithValues);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n    if (prop !== 'readonly') this.updateCheckboxItems(prop, newValue);\n    this.checkValidity();\n    if (this.hasDisplayedError) {\n      this.hasDisplayedError = prop !== 'required';\n      this.setErrorMessage(this.hasDisplayedError);\n    }\n    this.setButtonTextKey();\n  }\n\n  @Watch('disabled')\n  validateDisabled(newValue: MgInputCheckbox['disabled']): void {\n    if (newValue) this.classCollection.add(classDisabled);\n    else this.classCollection.delete(classDisabled);\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * Define tooltip position\n   */\n  @Prop() tooltipPosition: TooltipPosition = 'input';\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText?: string;\n\n  /**\n   * Define input valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define input invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Overwrite default \"edit\" button message\n   */\n  @Prop() editButtonMessage: string;\n  /**\n   * Overwrite default \"show\" button message\n   */\n  @Prop() showButtonMessage: string;\n\n  /**\n   * Overwrite default \"select\" button message\n   */\n  @Prop() selectButtonMessage: string;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList([this.baseClassName, classFieldset]);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Formated value to display in list\n   */\n  @State() checkboxItems: CheckboxItem[] = [];\n  @Watch('checkboxItems')\n  validateCheckboxItems(newValue: MgInputCheckbox['checkboxItems']): void {\n    // For the 'auto' mode we update the type depending on the new value's length.\n    if (this.mode === 'auto') this.type = newValue.length > this.multiStart ? 'multi' : 'checkbox';\n    // If the type is multi and the new value's length is greater than the search gauge, display the search input.\n    this.displaySearchInput = this.type === 'multi' && newValue.length > this.searchStart;\n    // refresh search values\n    if (this.displaySearchInput) this.updateSearchResults();\n    this.setButtonTextKey();\n  }\n\n  /**\n   * Display search input\n   */\n  @State() displaySearchInput: boolean;\n  @Watch('displaySearchInput')\n  watchDisplaySearchInput(newValue: MgInputCheckbox['displaySearchInput']): void {\n    if (newValue) this.classCollection.add(this.classSearchMode);\n    else this.classCollection.delete(this.classSearchMode);\n  }\n\n  /**\n   * Search value query\n   */\n  @State() searchValue = '';\n  @Watch('searchValue')\n  validateSearchValue(): void {\n    // refresh search values\n    this.updateSearchResults();\n  }\n\n  /**\n   * Search current page\n   */\n  @State() searchResults: CheckboxItem[] = [];\n\n  /**\n   * Select values button text local key\n   */\n  @State() selectValuesButtonKey: 'editButton' | 'showButton' | 'selectButton' = 'editButton';\n\n  /**\n   * Emitted event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputCheckboxElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputCheckboxElement['valid']>;\n\n  /**\n   * Display input error if it exists.\n   */\n  @Method()\n  displayError(): Promise<void> {\n    // Use `Promise` as requested for stencil method\n    // Use `requestAnimationFrame` to ensure:\n    // - DOM is fully updated before validation\n    // - Async operations are completed\n    // - No timing issues with Stencil's render cycle\n    // - Keep everything in sync both inside and outside the component\n    return new Promise(resolve => {\n      requestAnimationFrame(() => {\n        this.checkValidity();\n        this.setErrorMessage();\n        this.hasDisplayedError = this.invalid;\n        resolve()\n      })\n    })\n  }\n\n  /**\n   * Set an error and display a custom error message.\n   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n   * It must be paired with an error message to display for the given context.\n   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n   * @param valid - value indicating the validity\n   * @param errorMessage - the error message to display\n   */\n  @Method()\n  async setError(valid: MgInputCheckbox['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-checkbox> method \"setError()\" param \"valid\" must be a boolean.');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-checkbox> method \"setError()\" param \"errorMessage\" must be a string.');\n    } else {\n      this.setValidity(valid);\n      this.setErrorMessage(undefined, valid ? undefined : errorMessage);\n      this.hasDisplayedError = this.invalid;\n    }\n  }\n\n  /**\n   * Reset value, validity and error state\n   */\n  @Method()\n  async reset(): Promise<void> {\n    if (!this.readonly) {\n      this.value = this.value.map(item => ({ ...item, value: false }));\n      this.checkValidity();\n      this.errorMessage = undefined;\n      this.hasDisplayedError = false;\n    }\n  }\n\n  /**\n   * Method to set validity values\n   * @param newValue - valid new value\n   */\n  private setValidity(newValue: MgInputCheckbox['valid']) {\n    const oldValidValue = this.valid;\n    this.valid = newValue;\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    if (this.valid !== oldValidValue) this.inputValid.emit(this.valid);\n  }\n\n  /**\n   * Handle input event\n   * @param event - input event\n   */\n  private handleInput = (event: InputEvent & { target: HTMLInputElement }): void => {\n    this.updateCheckboxItems('value', Boolean(event.target.checked), item => item._id === event.target.id);\n    this.updateValues();\n    this.checkValidity();\n    this.setErrorMessage();\n  };\n\n  /**\n   * Keyboard handler\n   * @param event - to track \"tab\" key\n   */\n  private handleKeydown = (event: KeyboardEvent & { target: HTMLElement }): void => {\n    // track \"Tab\" key event when popover display (is \"multi\" type selected)\n    if (event.key === 'Tab' && this.mgPopover?.display) {\n      // when search input and do a back tab we close the popover\n      if (Boolean(this.searchInput) && event.shiftKey && this.searchInput.id === event.target.id) {\n        this.mgPopover.display = false;\n        return;\n      }\n\n      const enableInputs = Array.from(this.element.shadowRoot.querySelectorAll('input'))\n        .filter(input => !input.hasAttribute('disabled'))\n        .map(({ id }) => id);\n      const originInputIndex = enableInputs.findIndex(id => id === event.target.id);\n\n      // close popover when tab trigger focus outside its DOM\n      if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) || (originInputIndex === 0 && event.shiftKey && this.searchInput === undefined))\n        this.mgPopover.display = false;\n    }\n  };\n\n  /**\n   * Handle blur event\n   */\n  private handleBlur = (): void => {\n    // Check validity\n    this.checkValidity();\n    this.setErrorMessage();\n  };\n\n  /**\n   * Handle input search value-change event\n   * @param event - input value-change event\n   */\n  private handleSearchChange = (event: CustomEvent): void => {\n    this.searchValue = event.detail;\n    event.stopPropagation();\n  };\n\n  /**\n   * popover display-change handler\n   * @param event - mg-popover display-change custom event\n   */\n  private handleMgPopoverDisplayChange = (event: CustomEvent): void => {\n    // 1. update hasOpenedPopover guard with event value\n    this.hasOpenedPopover = event.detail;\n\n    // 2. update selected valued button text\n    this.setButtonTextKey();\n\n    // 3. when popover display change to hide, update reset needeed props and run checkValidity\n    if (!event.detail) {\n      // reset search value\n      this.searchValue = '';\n      // reset pagintated section current page\n      Array.from(this.element.shadowRoot.querySelectorAll('mg-input-checkbox-paginated')).forEach(element => {\n        element.currentPage = 1;\n      });\n      this.checkValidity();\n    }\n  };\n\n  /**\n   * Handle select all button\n   * @param event - mass action event trigger a global select/unselect on values\n   */\n  private handleMassAction = (event: CustomEvent<SectionKindType>): void => {\n    const displayItems = this.getDisplayItems();\n\n    // update only displayed items\n    displayItems.forEach(item => {\n      item.value = event.detail !== SectionKind.SELECTED;\n    });\n    this.updateValues();\n  };\n\n  /**\n   * Update values\n   */\n  private updateValues = (): void => {\n    this.value = this.checkboxItems.map(o => {\n      delete o._handleBlur;\n      delete o._handleInput;\n      delete o._handleKeydown;\n      delete o._id;\n      return o;\n    });\n  };\n\n  /**\n   * Update ckecboxes item\n   * @param key - property to update\n   * @param newValue - value to update with\n   * @param condition - condtion to applu change on item\n   */\n  private updateCheckboxItems(key: string, newValue: unknown, condition?: (item: CheckboxItem) => boolean): void {\n    this.checkboxItems = this.checkboxItems.map(item => {\n      if ((typeof condition === 'function' && condition(item)) || condition === undefined) item[key] = newValue;\n      return item;\n    });\n  }\n\n  /**\n   * has invalid input\n   * @returns true if at least one input is invalid\n   */\n  private hasInvalidInput = (): boolean =>\n    Array.from(this.element.shadowRoot.querySelectorAll('input[type=\"checkbox\"]')).some((input: HTMLInputElement) => !input.disabled && !input.checkValidity());\n\n  /**\n   * Method to update searchResults\n   */\n  private updateSearchResults = (): void => {\n    this.searchResults = this.checkboxItems.filter(item => cleanString(item.title).includes(cleanString(this.searchValue)));\n  };\n\n  /**\n   * Method to validate if one of inputs value is checked id required\n   * @returns truthy if condition is valid\n   */\n  private validateRequired = (): boolean => !this.required || this.checkboxItems.some(({ value }) => value);\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || (!this.hasInvalidInput() && this.validateRequired()));\n  };\n\n  /**\n   * Set button text locale key\n   */\n  private setButtonTextKey = (): void => {\n    // prevent key update while popover is openned\n    if (this.hasOpenedPopover) return;\n    let messageKey: MgInputCheckbox['selectValuesButtonKey'] = 'editButton';\n    if (this.disabled) messageKey = 'showButton';\n    else if (this.getSelectedItems().length < 1) messageKey = 'selectButton';\n\n    this.selectValuesButtonKey = messageKey;\n  };\n\n  /**\n   * Get select values button message\n   * @returns message to display\n   */\n  private getSelectValuesButtonMessage = (): string => {\n    if (this.selectValuesButtonKey === 'editButton' && isValidString(this.editButtonMessage)) {\n      return this.editButtonMessage;\n    } else if (this.selectValuesButtonKey === 'showButton' && isValidString(this.showButtonMessage)) {\n      return this.showButtonMessage;\n    } else if (this.selectValuesButtonKey === 'selectButton' && isValidString(this.selectButtonMessage)) {\n      return this.selectButtonMessage;\n    } else {\n      return this.messages.input.checkbox[this.selectValuesButtonKey];\n    }\n  };\n\n  /**\n   * Set input error message\n   * @param displayError - dispay error condition\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (displayError = true, errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    if (displayError && !this.valid) {\n      if (errorMessage !== undefined) this.errorMessage = errorMessage;\n      else if (!this.validateRequired()) this.errorMessage = this.messages.errors.required;\n    }\n  };\n\n  /**\n   * Method to get mg-popover identifier\n   * @returns MgPopover identifier\n   */\n  private getMgPopoverIdentifier = (): string => `${this.identifier}-input-mg-popover`;\n\n  /**\n   * Manage items to display depending on the search state\n   * @returns items to display\n   */\n  private getDisplayItems = (): CheckboxItem[] => (this.searchValue.length > 0 ? this.searchResults : this.checkboxItems);\n\n  /**\n   * get list of selected checkboxItems\n   * @returns selected checkboxItems\n   */\n  private getSelectedItems = (): CheckboxItem[] => this.checkboxItems.filter(({ value }) => value);\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   * @returns timeout\n   */\n  componentWillLoad(): ReturnType<typeof setTimeout> {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n\n    // Validate\n    // `validateType` must be done before `validateValue` because we need to set mode['auto'|'custom'] from type\n    // and `validateValue` updates `this.checkboxItems` watcher which requires a defined `this.type`.\n    this.validateType(this.type);\n    this.validateValue(this.value);\n    this.validateDisabled(this.disabled);\n    this.watchReadonly(this.readonly);\n    this.watchInputVerticalList(this.inputVerticalList);\n    this.watchDisplaySelectedValues(this.displaySelectedValues);\n    this.watchDisplaySearchInput(this.displaySearchInput);\n    // Check validity when component is ready\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      this.checkValidity();\n    }, 0);\n  }\n\n  /**\n   * add listeners and DOM attributed\n   */\n  componentDidLoad(): void {\n    if (!this.readonly) {\n      this.searchInput = this.element.shadowRoot.querySelector('mg-input-text')?.shadowRoot.querySelector('input');\n      this.searchInput?.addEventListener('keydown', this.handleKeydown);\n    }\n  }\n\n  /**\n   * Render checkboxes by section\n   * @param checkboxes - checkboxes to render\n   * @returns render sections of checkboxes\n   */\n  private renderCheckboxBySection(checkboxes: CheckboxItem[]): HTMLElement[] {\n    const [checkedValues, notCheckedValues] = checkboxes.reduce(\n      (acc, curr) => {\n        acc[curr.value ? 0 : 1].push(curr);\n        return acc;\n      },\n      [[], []],\n    );\n\n    const baseSection = {\n      readonly: this.readonly,\n      disabled: this.disabled,\n      identifier: this.identifier,\n    };\n\n    const sections = [\n      {\n        ...baseSection,\n        checkboxes: checkedValues,\n        messages: this.messages.input.checkbox.sections.selected,\n      },\n      {\n        ...baseSection,\n        checkboxes: notCheckedValues,\n        messages: this.messages.input.checkbox.sections.notSelected,\n      },\n    ];\n\n    return sections\n      .filter(section => section.checkboxes.length)\n      .map(section => <mg-input-checkbox-paginated {...section} onMass-action={this.handleMassAction} key={section.messages}></mg-input-checkbox-paginated>);\n  }\n\n  /**\n   * render checkbox multi element\n   * @returns html element\n   */\n  private renderCheckboxMulti(): HTMLElement {\n    const selectedValuesNb = this.getSelectedItems().length;\n    const checkboxes = this.getDisplayItems();\n\n    return (\n      <div class=\"mg-c-input__input-container\">\n        <mg-popover\n          arrowHide={true}\n          identifier={this.getMgPopoverIdentifier()}\n          display={this.hasOpenedPopover}\n          onDisplay-change={this.handleMgPopoverDisplayChange}\n          ref={(el: HTMLMgPopoverElement) => {\n            if (el !== null) this.mgPopover = el;\n          }}\n        >\n          <mg-button variant=\"secondary\" aria-describedby={`${this.identifier}-title`}>\n            <mg-icon icon=\"list\"></mg-icon>\n            {this.getSelectValuesButtonMessage()}\n          </mg-button>\n          <div slot=\"content\" class=\"mg-c-input__content\">\n            {this.displaySearchInput ? (\n              [\n                <mg-input-text\n                  key=\"input-search\"\n                  identifier={`${this.identifier}-input-search`}\n                  icon=\"magnifying-glass\"\n                  type=\"search\"\n                  placeholder={this.messages.input.checkbox.label}\n                  label={this.messages.input.checkbox.label}\n                  mgWidth=\"full\"\n                  value={this.searchValue}\n                  labelHide={true}\n                  characterLeftHide={true}\n                  name=\"q\"\n                  onValue-change={this.handleSearchChange}\n                  aria-controls=\"search-results items-list\"\n                ></mg-input-text>,\n                <p key=\"search-results\" role=\"status\" class=\"mg-u-visually-hidden\" id=\"search-results\">\n                  {`${checkboxes.length} ${this.messages.input.checkbox[checkboxes.length > 0 ? 'results' : 'result']}`}\n                </p>,\n                <div key=\"sections-container\" class=\"mg-c-input__sections\">\n                  {this.renderCheckboxBySection(checkboxes)}\n                </div>,\n              ]\n            ) : (\n              <MgInputCheckboxList\n                checkboxes={checkboxes}\n                displaySearchInput={this.displaySearchInput}\n                messages={this.messages.input.checkbox}\n                id=\"checkboxes-list\"\n                disabled={this.disabled}\n                name={this.name}\n                invalid={this.invalid}\n              ></MgInputCheckboxList>\n            )}\n            {this.displaySearchInput && checkboxes.length === 0 && <p class=\"mg-c-input__input-no-result\">{this.messages.input.checkbox.noResult}</p>}\n          </div>\n        </mg-popover>\n        {this.displaySelectedValues ? (\n          selectedValuesNb > 0 && (\n            <ul role=\"list\" class=\"mg-c-input__input-container-list\">\n              {this.getSelectedItems().map(({ title }) => (\n                <li class=\"mg-c-input__input-value\" key={title}>\n                  {title}\n                </li>\n              ))}\n            </ul>\n          )\n        ) : (\n          <b>{this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)}</b>\n        )}\n      </div>\n    );\n  }\n\n  /**\n   * Renders the readonly value of the input.\n   * @returns The rendered readonly value.\n   */\n  private renderReadonly = (readonlyValue: string[]): HTMLElement => {\n    return this.inputVerticalList ? (\n      <ul class=\"mg-c-input__readonly-value\">\n        {readonlyValue.map(value => (\n          <li key={value}>\n            <b>{value}</b>\n          </li>\n        ))}\n      </ul>\n    ) : (\n      <b class=\"mg-c-input__readonly-value\">{readonlyValue.join(', ')}</b>\n    );\n  };\n\n  /**\n   * Renders the MgInputCheckboxList component.\n   * @returns The rendered MgInputCheckboxList component.\n   */\n  private renderMgInputCheckboxList = () => (\n    <MgInputCheckboxList\n      checkboxes={this.checkboxItems}\n      displaySearchInput={this.displaySearchInput}\n      messages={this.messages.input.checkbox}\n      id=\"checkboxes-list\"\n      disabled={this.disabled}\n      name={this.name}\n      invalid={this.invalid}\n    ></MgInputCheckboxList>\n  );\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    let inputContent: HTMLElement;\n    const readonlyValue = this.value.filter(({ value }) => value).map(({ title }) => title);\n\n    if (this.readonly) {\n      inputContent = this.renderReadonly(readonlyValue);\n    } else if (this.type === 'checkbox') {\n      inputContent = this.renderMgInputCheckboxList();\n    } else {\n      inputContent = this.renderCheckboxMulti();\n    }\n\n    return (\n      <mg-input\n        label={this.label}\n        identifier={this.identifier}\n        class={this.classCollection.join()}\n        ariaDescribedbyIDs={[]}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={!this.readonly ? this.required : undefined} // required is only used display asterisk\n        tooltip={this.tooltip}\n        tooltipPosition={this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition}\n        helpText={!this.readonly ? this.helpText : undefined}\n        errorMessage={!this.readonly ? this.errorMessage : undefined}\n      >\n        {inputContent}\n      </mg-input>\n    );\n  }\n}\n"],"version":3}