@mgdis/mg-components 5.19.2 → 5.20.0

package/dist/components/mg-illustrated-message.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface MgIllustratedMessage extends Components.MgIllustratedMessage, HTMLElement {}
 export const MgIllustratedMessage: {
-  prototype: MgIllustratedMessage;
-  new (): MgIllustratedMessage;
+    prototype: MgIllustratedMessage;
+    new (): MgIllustratedMessage;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -4,61 +4,61 @@ import { a as isTagName } from './components.utils.js';
 const mgIllustratedMessageCss = ".mg-c-illustrated-message{display:flex;max-width:47.5rem;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-illustrated-message-padding-vertical) 1.5rem;margin:auto;gap:3em 7rem;text-align:center}.mg-c-illustrated-message__illustration{max-height:18.4rem}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){width:auto;max-width:100%;height:auto;max-height:18.4rem}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small{max-height:6rem}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:6rem}.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:47.5rem}.mg-c-illustrated-message__title ::slotted([slot=title]){margin:0;font-family:var(--font-family) !important;font-size:2rem !important;font-weight:400 !important}.mg-c-illustrated-message__details ::slotted([slot=details]){margin:2rem 0 0}";
 
 const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustratedMessage extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.size = 'regular';
-    this.direction = 'vertical';
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   */
-  componentDidLoad() {
-    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-    const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
-    if (!isTagName(this.element.querySelector('[slot="title"]'), headingTags)) {
-      throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.size = 'regular';
+        this.direction = 'vertical';
     }
-    else if (slottedIllustrations.length !== 1) {
-      throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentDidLoad() {
+        const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+        const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
+        if (!isTagName(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) {
+            throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');
+        }
+        slottedIllustrations[0].setAttribute('aria-hidden', 'true');
     }
-    slottedIllustrations[0].setAttribute('aria-hidden', 'true');
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    return (h("div", { class: {
-        'mg-c-illustrated-message': true,
-        'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',
-      } }, h("div", { class: {
-        'mg-c-illustrated-message__illustration': true,
-        'mg-c-illustrated-message__illustration--small': this.size === 'small',
-      } }, h("slot", { name: "illustration" })), h("div", { class: "mg-c-illustrated-message__slots" }, h("div", { class: "mg-c-illustrated-message__title" }, h("slot", { name: "title" })), h("div", { class: "mg-c-illustrated-message__details" }, h("slot", { name: "details" })))));
-  }
-  get element() { return this; }
-  static get style() { return mgIllustratedMessageCss; }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h("div", { class: {
+                'mg-c-illustrated-message': true,
+                'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',
+            } }, h("div", { class: {
+                'mg-c-illustrated-message__illustration': true,
+                'mg-c-illustrated-message__illustration--small': this.size === 'small',
+            } }, h("slot", { name: "illustration" })), h("div", { class: "mg-c-illustrated-message__slots" }, h("div", { class: "mg-c-illustrated-message__title" }, h("slot", { name: "title" })), h("div", { class: "mg-c-illustrated-message__details" }, h("slot", { name: "details" })))));
+    }
+    get element() { return this; }
+    static get style() { return mgIllustratedMessageCss; }
 }, [1, "mg-illustrated-message", {
-    "size": [1],
-    "direction": [1]
-  }]);
+        "size": [1],
+        "direction": [1]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["mg-illustrated-message"];
-  components.forEach(tagName => { switch (tagName) {
-    case "mg-illustrated-message":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MgIllustratedMessage$1);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-illustrated-message"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-illustrated-message":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgIllustratedMessage$1);
+            }
+            break;
+    } });
 }
 defineCustomElement$1();
 

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

@@ -1 +1 @@
-{"file":"mg-illustrated-message.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,ysCAAysC;;MCQ5tCA,sBAAoB;;;;;gBAaK,SAAS;qBAKE,UAAU;;;;;;;;EASzD,gBAAgB;IACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACzD,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;IAEpF,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC,EAAE;MACzE,MAAM,IAAI,KAAK,CAAC,6DAA6D,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACxG;SAAM,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE;MAC5C,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;KAC9F;IAED,oBAAoB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;GAC7D;;;;;EAMD,MAAM;IACJ,QACE,WACE,KAAK,EAAE;QACL,0BAA0B,EAAE,IAAI;QAChC,sCAAsC,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY;OACxE,IAED,WACE,KAAK,EAAE;QACL,wCAAwC,EAAE,IAAI;QAC9C,+CAA+C,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;OACvE,IAED,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,EACN,WAAK,KAAK,EAAC,iCAAiC,IAC1C,WAAK,KAAK,EAAC,iCAAiC,IAC1C,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,WAAK,KAAK,EAAC,mCAAmC,IAC5C,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgIllustratedMessage"],"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":[".mg-c-illustrated-message{display:flex;max-width:47.5rem;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-illustrated-message-padding-vertical) 1.5rem;margin:auto;gap:3em 7rem;text-align:center}.mg-c-illustrated-message__illustration{max-height:18.4rem}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){width:auto;max-width:100%;height:auto;max-height:18.4rem}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small{max-height:6rem}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:6rem}.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:47.5rem}.mg-c-illustrated-message__title ::slotted([slot=title]){margin:0;font-family:var(--font-family) !important;font-size:2rem !important;font-weight:400 !important}.mg-c-illustrated-message__details ::slotted([slot=details]){margin:2rem 0 0}/*# sourceMappingURL=mg-illustrated-message.css.map */\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { isTagName } from '../../../utils/components.utils';\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: 'regular' | 'small' = 'regular';\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,ysCAAysC;;MCQ5tCA,sBAAoB;;;;;oBAaK,SAAS;yBAKE,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,CAAC,SAAS,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,EAAE,CAAC,CAAC;SACxG;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,WACE,KAAK,EAAE;gBACL,0BAA0B,EAAE,IAAI;gBAChC,sCAAsC,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY;aACxE,IAED,WACE,KAAK,EAAE;gBACL,wCAAwC,EAAE,IAAI;gBAC9C,+CAA+C,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aACvE,IAED,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,EACN,WAAK,KAAK,EAAC,iCAAiC,IAC1C,WAAK,KAAK,EAAC,iCAAiC,IAC1C,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,WAAK,KAAK,EAAC,mCAAmC,IAC5C,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgIllustratedMessage"],"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":[".mg-c-illustrated-message{display:flex;max-width:47.5rem;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-illustrated-message-padding-vertical) 1.5rem;margin:auto;gap:3em 7rem;text-align:center}.mg-c-illustrated-message__illustration{max-height:18.4rem}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){width:auto;max-width:100%;height:auto;max-height:18.4rem}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small{max-height:6rem}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:6rem}.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:47.5rem}.mg-c-illustrated-message__title ::slotted([slot=title]){margin:0;font-family:var(--font-family) !important;font-size:2rem !important;font-weight:400 !important}.mg-c-illustrated-message__details ::slotted([slot=details]){margin:2rem 0 0}/*# sourceMappingURL=mg-illustrated-message.css.map */\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { isTagName } from '../../../utils/components.utils';\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: 'regular' | 'small' = 'regular';\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-paginated.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface MgInputCheckboxPaginated extends Components.MgInputCheckboxPaginated, HTMLElement {}
 export const MgInputCheckboxPaginated: {
-  prototype: MgInputCheckboxPaginated;
-  new (): MgInputCheckboxPaginated;
+    prototype: MgInputCheckboxPaginated;
+    new (): MgInputCheckboxPaginated;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -16,16 +16,16 @@ const checkboxTypes = ['checkbox', 'multi'];
  */
 var SectionKind;
 (function (SectionKind) {
-  SectionKind["SELECTED"] = "selected";
-  SectionKind["NOT_SELECTED"] = "not-selected";
+    SectionKind["SELECTED"] = "selected";
+    SectionKind["NOT_SELECTED"] = "not-selected";
 })(SectionKind || (SectionKind = {}));
 /**
  * mg-input-checkbox-paginated section title kind
  */
 var SectionTitleKind;
 (function (SectionTitleKind) {
-  SectionTitleKind["BUTTON"] = "button";
-  SectionTitleKind["TEXT"] = "text";
+    SectionTitleKind["BUTTON"] = "button";
+    SectionTitleKind["TEXT"] = "text";
 })(SectionTitleKind || (SectionTitleKind = {}));
 
 /**
@@ -36,183 +36,183 @@ var SectionTitleKind;
 const MgInputCheckboxList = (props) => (
 // eslint-disable-next-line jsx-a11y/no-redundant-roles
 h("ul", { class: {
-    'mg-c-input__input-group-container': true,
-    'mg-c-input__input-group-container--vertical': props.inputVerticalList || (props.type === 'multi' && !props.readonly),
-    'mg-c-input__input-checkbox-multi-inputs': props.type === 'multi' && !props.readonly,
-  }, role: "list", "aria-describedby": props.displaySearchInput ? 'search-results' : undefined, "aria-label": props.displaySearchInput ? props.messages.searchResults : undefined, "aria-live": props.displaySearchInput ? 'polite' : undefined, id: props.id }, props.checkboxes
-  .filter(item => !props.readonly || item.value)
-  .map(input => {
-  var _a;
-  return (h("li", { key: input._id, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled } },
-    h("input", { type: "checkbox", id: input._id, name: props.name, value: input.value && input.value.toString(), checked: Boolean(input.value), required: input.required, "aria-invalid": ((_a = props.invalid) === null || _a === void 0 ? void 0 : _a.toString()) || 'false', disabled: props.readonly || props.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }),
-    h("label", { htmlFor: input._id }, input.title)));
+        'mg-c-input__input-group-container': true,
+        'mg-c-input__input-group-container--vertical': props.inputVerticalList || (props.type === 'multi' && !props.readonly),
+        'mg-c-input__input-checkbox-multi-inputs': props.type === 'multi' && !props.readonly,
+    }, role: "list", "aria-describedby": props.displaySearchInput ? 'search-results' : undefined, "aria-label": props.displaySearchInput ? props.messages.searchResults : undefined, "aria-live": props.displaySearchInput ? 'polite' : undefined, id: props.id }, props.checkboxes
+    .filter(item => !props.readonly || item.value)
+    .map(input => {
+    var _a, _b;
+    return (h("li", { key: input._id, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled } },
+        h("input", { type: "checkbox", id: input._id, name: props.name, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a.toString(), checked: Boolean(input.value), required: input.required, "aria-invalid": ((_b = props.invalid) === null || _b === void 0 ? void 0 : _b.toString()) || 'false', disabled: props.readonly || props.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }),
+        h("label", { htmlFor: input._id }, input.title)));
 })));
 
 const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class MgInputCheckboxPaginated extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.massAction = createEvent(this, "mass-action", 7);
-    /*************
-     * Constantes *
-     *************/
-    this.offset = 10;
-    /***********
-     * Methods *
-     ***********/
-    /**
-     * Mass action handler
-     */
-    this.massActionHandler = () => {
-      this.massAction.emit(this.sectionKind);
-    };
+    constructor() {
+        super();
+        this.__registerHost();
+        this.massAction = createEvent(this, "mass-action", 7);
+        /*************
+         * Constantes *
+         *************/
+        this.offset = 10;
+        /***********
+         * Methods *
+         ***********/
+        /**
+         * Mass action handler
+         */
+        this.massActionHandler = () => {
+            this.massAction.emit(this.sectionKind);
+        };
+        /**
+         * Toggle items button handler
+         */
+        this.handleToggleClick = () => {
+            this.expanded = !this.expanded;
+        };
+        /**
+         * Method to get a array range
+         * @param from - array start index
+         * @param to - array end index
+         * @returns array's range
+         */
+        this.getArrayRange = (array, from, to) => array.slice(from, to);
+        /**
+         * Method to get page count from items
+         * @param items - items to count
+         * @returns page count from items
+         */
+        this.getPageCount = (item) => Math.ceil(item.length / this.offset);
+        /**
+         * Handle mg-pagination current page change event
+         * @param event - pagination current page change event
+         */
+        this.handleCurrentPageChange = (event) => {
+            this.currentPage = Number(event.detail);
+        };
+        this.readonly = undefined;
+        this.disabled = undefined;
+        this.name = undefined;
+        this.invalid = undefined;
+        this.checkboxes = [];
+        this.sectionKind = undefined;
+        this.messages = undefined;
+        this.titleKind = undefined;
+        this.currentPage = 1;
+        this.expanded = true;
+    }
+    validateCheckboxes(newValue, oldValue) {
+        // after each array.length update we reset pagination
+        // when items fill on page, we set current page to 1
+        if (this.getPageCount(newValue) === 1)
+            this.currentPage = 1;
+        // 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
+        else if (this.getPageCount(oldValue) === this.currentPage && this.getPageCount(newValue) < this.currentPage)
+            this.currentPage = this.getPageCount(newValue);
+    }
+    validateSectionKind(newValue) {
+        if (newValue === SectionKind.SELECTED)
+            this.titleKind = SectionTitleKind.BUTTON;
+        else
+            this.titleKind = SectionTitleKind.TEXT;
+    }
     /**
-     * Toggle items button handler
+     * Get from and to index
+     * @returns [from,to] index
      */
-    this.handleToggleClick = () => {
-      this.expanded = !this.expanded;
-    };
-    /**
-     * Method to get a array range
-     * @param from - array start index
-     * @param to - array end index
-     * @returns array's range
-     */
-    this.getArrayRange = (array, from, to) => array.slice(from, to);
+    getFromToIndexes() {
+        const isFirstPage = this.currentPage === 1;
+        const checkboxItemsFromIndex = isFirstPage ? 0 : (this.currentPage - 1) * this.offset;
+        const checkboxItemsToIndex = isFirstPage ? this.offset : this.currentPage * this.offset;
+        return [checkboxItemsFromIndex, checkboxItemsToIndex];
+    }
+    /*************
+     * Lifecycle *
+     *************/
     /**
-     * Method to get page count from items
-     * @param items - items to count
-     * @returns page count from items
+     * Check if component props are well configured on init
      */
-    this.getPageCount = (item) => Math.ceil(item.length / this.offset);
+    componentWillLoad() {
+        this.validateSectionKind(this.sectionKind);
+    }
     /**
-     * Handle mg-pagination current page change event
-     * @param event - pagination current page change event
+     * Render
+     * @returns HTML Element
      */
-    this.handleCurrentPageChange = (event) => {
-      this.currentPage = Number(event.detail);
-    };
-    this.readonly = undefined;
-    this.disabled = undefined;
-    this.name = undefined;
-    this.invalid = undefined;
-    this.checkboxes = [];
-    this.sectionKind = undefined;
-    this.messages = undefined;
-    this.titleKind = undefined;
-    this.currentPage = 1;
-    this.expanded = true;
-  }
-  validateCheckboxes(newValue, oldValue) {
-    // after each array.length update we reset pagination
-    // when items fill on page, we set current page to 1
-    if (this.getPageCount(newValue) === 1)
-      this.currentPage = 1;
-    // 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
-    else if (this.getPageCount(oldValue) === this.currentPage && this.getPageCount(newValue) < this.currentPage)
-      this.currentPage = this.getPageCount(newValue);
-  }
-  validateSectionKind(newValue) {
-    if (newValue === SectionKind.SELECTED)
-      this.titleKind = SectionTitleKind.BUTTON;
-    else
-      this.titleKind = SectionTitleKind.TEXT;
-  }
-  /**
-   * Get from and to index
-   * @returns [from,to] index
-   */
-  getFromToIndexes() {
-    const isFirstPage = this.currentPage === 1;
-    const checkboxItemsFromIndex = isFirstPage ? 0 : (this.currentPage - 1) * this.offset;
-    const checkboxItemsToIndex = isFirstPage ? this.offset : this.currentPage * this.offset;
-    return [checkboxItemsFromIndex, checkboxItemsToIndex];
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   */
-  componentWillLoad() {
-    this.validateSectionKind(this.sectionKind);
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    const [checkboxItemsFromIndex, checkboxItemsToIndex] = this.getFromToIndexes();
-    const itemsContainerId = `items-${this.sectionKind}-container`;
-    const getText = (checkboxes) => h("em", null, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`);
-    return (h(Host, { hidden: this.checkboxes.length < 1 }, h("div", { class: "mg-c-input__input-checkbox-multi-section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (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', size: "small" }), h("span", { class: "mg-c-input__input-checkbox-multi-text" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__input-checkbox-multi-title" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-button", { 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 > 1 ? this.currentPage : 1, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { checkboxes: this.getArrayRange(this.checkboxes, checkboxItemsFromIndex, checkboxItemsToIndex), inputVerticalList: true, type: 'multi', displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, readonly: this.readonly, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
-  }
-  static get watchers() { return {
-    "checkboxes": ["validateCheckboxes"],
-    "sectionKind": ["validateSectionKind"]
-  }; }
+    render() {
+        const [checkboxItemsFromIndex, checkboxItemsToIndex] = this.getFromToIndexes();
+        const itemsContainerId = `items-${this.sectionKind}-container`;
+        const getText = (checkboxes) => h("em", null, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`);
+        return (h(Host, { hidden: this.checkboxes.length < 1 }, h("div", { class: "mg-c-input__input-checkbox-multi-section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (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', size: "small" }), h("span", { class: "mg-c-input__input-checkbox-multi-text" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__input-checkbox-multi-title" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-button", { 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 > 1 ? this.currentPage : 1, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { checkboxes: this.getArrayRange(this.checkboxes, checkboxItemsFromIndex, checkboxItemsToIndex), inputVerticalList: true, type: 'multi', displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, readonly: this.readonly, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
+    }
+    static get watchers() { return {
+        "checkboxes": ["validateCheckboxes"],
+        "sectionKind": ["validateSectionKind"]
+    }; }
 }, [2, "mg-input-checkbox-paginated", {
-    "readonly": [4],
-    "disabled": [4],
-    "name": [1],
-    "invalid": [4],
-    "checkboxes": [16],
-    "sectionKind": [1, "section-kind"],
-    "messages": [16],
-    "titleKind": [32],
-    "currentPage": [32],
-    "expanded": [32]
-  }, undefined, {
-    "checkboxes": ["validateCheckboxes"],
-    "sectionKind": ["validateSectionKind"]
-  }]);
+        "readonly": [4],
+        "disabled": [4],
+        "name": [1],
+        "invalid": [4],
+        "checkboxes": [16],
+        "sectionKind": [1, "section-kind"],
+        "messages": [16],
+        "titleKind": [32],
+        "currentPage": [32],
+        "expanded": [32]
+    }, undefined, {
+        "checkboxes": ["validateCheckboxes"],
+        "sectionKind": ["validateSectionKind"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["mg-input-checkbox-paginated", "mg-button", "mg-icon", "mg-input-select", "mg-input-title", "mg-pagination", "mg-tooltip", "mg-tooltip-content"];
-  components.forEach(tagName => { switch (tagName) {
-    case "mg-input-checkbox-paginated":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MgInputCheckboxPaginated);
-      }
-      break;
-    case "mg-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "mg-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "mg-input-select":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "mg-input-title":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "mg-pagination":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "mg-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "mg-tooltip-content":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-input-checkbox-paginated", "mg-button", "mg-icon", "mg-input-select", "mg-input-title", "mg-pagination", "mg-tooltip", "mg-tooltip-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-input-checkbox-paginated":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgInputCheckboxPaginated);
+            }
+            break;
+        case "mg-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "mg-input-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "mg-input-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "mg-pagination":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "mg-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "mg-tooltip-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

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

@@ -1 +1 @@
-{"file":"mg-input-checkbox-paginated2.js","mappings":";;;;;;;;;AAsBA;;;MAGa,aAAa,GAAG,CAAC,UAAU,EAAE,OAAO,EAAW;AAO5D;;;IAGY;AAAZ,WAAY,WAAW;EACrB,oCAAqB,CAAA;EACrB,4CAA6B,CAAA;AAC/B,CAAC,EAHW,WAAW,KAAX,WAAW,QAGtB;AAED;;;AAGA,IAAY,gBAGX;AAHD,WAAY,gBAAgB;EAC1B,qCAAiB,CAAA;EACjB,iCAAa,CAAA;AACf,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB;;ACxC5B;;;;;MAKa,mBAAmB,GAAkD,CAAC,KAA+B;AAChH;AACA,UACE,KAAK,EAAE;IACL,mCAAmC,EAAE,IAAI;IACzC,6CAA6C,EAAE,KAAK,CAAC,iBAAiB,KAAK,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IACrH,yCAAyC,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ;GACrF,EACD,IAAI,EAAC,MAAM,sBACO,KAAK,CAAC,kBAAkB,GAAG,gBAAgB,GAAG,SAAS,gBAC7D,KAAK,CAAC,kBAAkB,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,GAAG,SAAS,eACpE,KAAK,CAAC,kBAAkB,GAAG,QAAQ,GAAG,SAAS,EAC1D,EAAE,EAAE,KAAK,CAAC,EAAE,IAEX,KAAK,CAAC,UAAU;GACd,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC;GAC7C,GAAG,CAAC,KAAK;;EAAI,QACZ,UAAI,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,yBAAyB,EAAE,IAAI,EAAE,mCAAmC,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE;IACnI,aACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,KAAK,CAAC,GAAG,EACb,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,EAC5C,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,EAC7B,QAAQ,EAAE,KAAK,CAAC,QAAQ,kBACV,CAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,QAAQ,EAAE,KAAI,OAAO,EAClD,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC5D,aAAa,EAAE,KAAK,CAAC,KAAK,KAAK,IAAI,EACnC,OAAO,EAAE,KAAK,CAAC,YAAY,EAC3B,MAAM,EAAE,KAAK,CAAC,WAAW,EACzB,SAAS,EAAE,KAAK,CAAC,cAAc,GAC/B;IACF,aAAO,OAAO,EAAE,KAAK,CAAC,GAAG,IAAG,KAAK,CAAC,KAAK,CAAS,CAC7C,EACN;CAAA,CAAC,CACD;;MC/BM,wBAAwB;;;;;;;;IAIlB,WAAM,GAAG,EAAE,CAAC;;;;;;;IAkFrB,sBAAiB,GAAG;MAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACxC,CAAC;;;;IAKM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KAChC,CAAC;;;;;;;IAQM,kBAAa,GAAG,CAAY,KAAiB,EAAE,IAAY,EAAE,EAAU,KAAiB,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;;;;;;IAkB9G,iBAAY,GAAG,CAAC,IAAe,KAAa,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;;;;;IAMjF,4BAAuB,GAAG,CAAC,KAAkB;MACnD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KACzC,CAAC;;;;;sBAhGmC,EAAE;;;;uBAuChB,CAAC;oBAKJ,IAAI;;EA1CxB,kBAAkB,CAAC,QAAgD,EAAE,QAAgD;;;IAGnH,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC;MAAE,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;;SAEvD,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,WAAW;MAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;GAC7J;EAOD,mBAAmB,CAAC,QAAiD;IACnE,IAAI,QAAQ,KAAK,WAAW,CAAC,QAAQ;MAAE,IAAI,CAAC,SAAS,GAAG,gBAAgB,CAAC,MAAM,CAAC;;MAC3E,IAAI,CAAC,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC;GAC7C;;;;;EA0DO,gBAAgB;IACtB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,KAAK,CAAC,CAAC;IAC3C,MAAM,sBAAsB,GAAG,WAAW,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC;IACtF,MAAM,oBAAoB,GAAG,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;IACxF,OAAO,CAAC,sBAAsB,EAAE,oBAAoB,CAAC,CAAC;GACvD;;;;;;;EAwBD,iBAAiB;IACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAC5C;;;;;EAMD,MAAM;IACJ,MAAM,CAAC,sBAAsB,EAAE,oBAAoB,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC/E,MAAM,gBAAgB,GAAG,SAAS,IAAI,CAAC,WAAW,YAAY,CAAC;IAE/D,MAAM,OAAO,GAAG,CAAC,UAA0B,KAAkB,cAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,cAAc,GAAG,OAAO,CAAC,KAAK,UAAU,CAAC,MAAM,GAAG,CAAM,CAAC;IAEpK,QACE,EAAC,IAAI,IAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,IACtC,WAAK,KAAK,EAAC,iDAAiD,IACzD,IAAI,CAAC,SAAS,KAAK,gBAAgB,CAAC,MAAM,IACzC,iBAAW,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,mBAAiB,gBAAgB,mBAAiB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,IACjI,eAAS,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,YAAY,GAAG,cAAc,EAAE,IAAI,EAAC,OAAO,GAAW,EACrF,YAAM,KAAK,EAAC,uCAAuC,IAAE,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAQ,CAC3E,KAEZ,SAAG,KAAK,EAAC,wCAAwC,IAAE,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAK,CACjF,EACA,CAAC,CAAC,IAAI,CAAC,WAAW,KAAK,WAAW,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,WAAW,KAAK,WAAW,CAAC,YAAY,MAC7G,iBAAW,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACtD,IAAI,CAAC,QAAQ,CAAC,MAAM,CACX,CACb,EACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KACtD,qBACE,GAAG,EAAC,mBAAmB,EACvB,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,EAC9C,WAAW,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,2BACjC,IAAI,CAAC,uBAAuB,EACnD,oBAAoB,EAAE,IAAI,EAC1B,aAAa,EAAE,IAAI,EACnB,UAAU,EAAE,6BAA6B,IAAI,CAAC,WAAW,EAAE,GAC5C,CAClB,CACG,EACN,WAAK,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAC,kDAAkD,IACzG,EAAC,mBAAmB,IAClB,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,EAAE,sBAAsB,EAAE,oBAAoB,CAAC,EAC7F,iBAAiB,EAAE,IAAI,EACvB,IAAI,EAAE,OAAO,EACb,kBAAkB,EAAE,IAAI,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,SAAS,IAAI,CAAC,WAAW,EAAE,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,GACA,CACnB,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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\n */\nexport enum SectionKind {\n  SELECTED = 'selected',\n  NOT_SELECTED = 'not-selected',\n}\n\n/**\n * mg-input-checkbox-paginated section title kind\n */\nexport enum SectionTitleKind {\n  BUTTON = 'button',\n  TEXT = 'text',\n}\n\n/**\n * Base mg-input-checkbox interface\n */\nexport interface IMgInputCheckboxBase {\n  readonly: boolean;\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  inputVerticalList: boolean;\n  type: CheckboxType;\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  // eslint-disable-next-line jsx-a11y/no-redundant-roles\n  <ul\n    class={{\n      'mg-c-input__input-group-container': true,\n      'mg-c-input__input-group-container--vertical': props.inputVerticalList || (props.type === 'multi' && !props.readonly),\n      'mg-c-input__input-checkbox-multi-inputs': props.type === 'multi' && !props.readonly,\n    }}\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\n      .filter(item => !props.readonly || item.value)\n      .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 && input.value.toString()}\n            checked={Boolean(input.value)}\n            required={input.required}\n            aria-invalid={props.invalid?.toString() || 'false'}\n            disabled={props.readonly || 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, SectionKind, SectionTitleKind } from '../mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from '../MgInputCheckboxList';\n\n/**\n * Internal component use to manage sections instances\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\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   * Define checkboxes to paginate\n   */\n  @Prop() checkboxes: CheckboxItem[] = [];\n  @Watch('checkboxes')\n  validateCheckboxes(newValue: MgInputCheckboxPaginated['checkboxes'], oldValue: MgInputCheckboxPaginated['checkboxes']): void {\n    // after each array.length update we reset pagination\n    // when items fill on page, we set current page to 1\n    if (this.getPageCount(newValue) === 1) this.currentPage = 1;\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 (this.getPageCount(oldValue) === this.currentPage && this.getPageCount(newValue) < this.currentPage) this.currentPage = this.getPageCount(newValue);\n  }\n\n  /**\n   * Define section kind\n   */\n  @Prop() sectionKind: SectionKind;\n  @Watch('sectionKind')\n  validateSectionKind(newValue: MgInputCheckboxPaginated['sectionKind']): void {\n    if (newValue === SectionKind.SELECTED) this.titleKind = SectionTitleKind.BUTTON;\n    else this.titleKind = SectionTitleKind.TEXT;\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<MgInputCheckboxPaginated['sectionKind']>;\n\n  /**\n   * Define section title\n   */\n  @State() titleKind: SectionTitleKind;\n\n  /**\n   * Current page\n   */\n  @State() currentPage = 1;\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 checkboxItemsFromIndex = isFirstPage ? 0 : (this.currentPage - 1) * this.offset;\n    const checkboxItemsToIndex = isFirstPage ? this.offset : this.currentPage * this.offset;\n    return [checkboxItemsFromIndex, checkboxItemsToIndex];\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 = (item: unknown[]): number => Math.ceil(item.length / this.offset);\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   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateSectionKind(this.sectionKind);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const [checkboxItemsFromIndex, checkboxItemsToIndex] = this.getFromToIndexes();\n    const itemsContainerId = `items-${this.sectionKind}-container`;\n\n    const getText = (checkboxes: CheckboxItem[]): HTMLElement => <em>{`${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`}</em>;\n\n    return (\n      <Host hidden={this.checkboxes.length < 1}>\n        <div class=\"mg-c-input__input-checkbox-multi-section-header\">\n          {this.titleKind === SectionTitleKind.BUTTON ? (\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'} size=\"small\"></mg-icon>\n              <span class=\"mg-c-input__input-checkbox-multi-text\">{getText(this.checkboxes)}</span>\n            </mg-button>\n          ) : (\n            <p class=\"mg-c-input__input-checkbox-multi-title\">{getText(this.checkboxes)}</p>\n          )}\n          {((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (\n            <mg-button variant=\"link\" onClick={this.massActionHandler}>\n              {this.messages.action}\n            </mg-button>\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 > 1 ? this.currentPage : 1}\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__input-checkbox-multi-section-content\">\n          <MgInputCheckboxList\n            checkboxes={this.getArrayRange(this.checkboxes, checkboxItemsFromIndex, checkboxItemsToIndex)}\n            inputVerticalList={true}\n            type={'multi'}\n            displaySearchInput={true}\n            messages={this.messages}\n            id={`items-${this.sectionKind}`}\n            readonly={this.readonly}\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\n */\nexport enum SectionKind {\n  SELECTED = 'selected',\n  NOT_SELECTED = 'not-selected',\n}\n\n/**\n * mg-input-checkbox-paginated section title kind\n */\nexport enum SectionTitleKind {\n  BUTTON = 'button',\n  TEXT = 'text',\n}\n\n/**\n * Base mg-input-checkbox interface\n */\nexport interface IMgInputCheckboxBase {\n  readonly: boolean;\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  inputVerticalList: boolean;\n  type: CheckboxType;\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  // eslint-disable-next-line jsx-a11y/no-redundant-roles\n  <ul\n    class={{\n      'mg-c-input__input-group-container': true,\n      'mg-c-input__input-group-container--vertical': props.inputVerticalList || (props.type === 'multi' && !props.readonly),\n      'mg-c-input__input-checkbox-multi-inputs': props.type === 'multi' && !props.readonly,\n    }}\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\n      .filter(item => !props.readonly || item.value)\n      .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.readonly || 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, SectionKind, SectionTitleKind } from '../mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from '../MgInputCheckboxList';\n\n/**\n * Internal component use to manage sections instances\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\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   * Define checkboxes to paginate\n   */\n  @Prop() checkboxes: CheckboxItem[] = [];\n  @Watch('checkboxes')\n  validateCheckboxes(newValue: MgInputCheckboxPaginated['checkboxes'], oldValue: MgInputCheckboxPaginated['checkboxes']): void {\n    // after each array.length update we reset pagination\n    // when items fill on page, we set current page to 1\n    if (this.getPageCount(newValue) === 1) this.currentPage = 1;\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 (this.getPageCount(oldValue) === this.currentPage && this.getPageCount(newValue) < this.currentPage) this.currentPage = this.getPageCount(newValue);\n  }\n\n  /**\n   * Define section kind\n   */\n  @Prop() sectionKind: SectionKind;\n  @Watch('sectionKind')\n  validateSectionKind(newValue: MgInputCheckboxPaginated['sectionKind']): void {\n    if (newValue === SectionKind.SELECTED) this.titleKind = SectionTitleKind.BUTTON;\n    else this.titleKind = SectionTitleKind.TEXT;\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<HTMLMgInputCheckboxPaginatedElement['sectionKind']>;\n\n  /**\n   * Define section title\n   */\n  @State() titleKind: SectionTitleKind;\n\n  /**\n   * Current page\n   */\n  @State() currentPage = 1;\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 checkboxItemsFromIndex = isFirstPage ? 0 : (this.currentPage - 1) * this.offset;\n    const checkboxItemsToIndex = isFirstPage ? this.offset : this.currentPage * this.offset;\n    return [checkboxItemsFromIndex, checkboxItemsToIndex];\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 = (item: unknown[]): number => Math.ceil(item.length / this.offset);\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   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateSectionKind(this.sectionKind);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const [checkboxItemsFromIndex, checkboxItemsToIndex] = this.getFromToIndexes();\n    const itemsContainerId = `items-${this.sectionKind}-container`;\n\n    const getText = (checkboxes: CheckboxItem[]): HTMLElement => <em>{`${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`}</em>;\n\n    return (\n      <Host hidden={this.checkboxes.length < 1}>\n        <div class=\"mg-c-input__input-checkbox-multi-section-header\">\n          {this.titleKind === SectionTitleKind.BUTTON ? (\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'} size=\"small\"></mg-icon>\n              <span class=\"mg-c-input__input-checkbox-multi-text\">{getText(this.checkboxes)}</span>\n            </mg-button>\n          ) : (\n            <p class=\"mg-c-input__input-checkbox-multi-title\">{getText(this.checkboxes)}</p>\n          )}\n          {((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (\n            <mg-button variant=\"link\" onClick={this.massActionHandler}>\n              {this.messages.action}\n            </mg-button>\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 > 1 ? this.currentPage : 1}\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__input-checkbox-multi-section-content\">\n          <MgInputCheckboxList\n            checkboxes={this.getArrayRange(this.checkboxes, checkboxItemsFromIndex, checkboxItemsToIndex)}\n            inputVerticalList={true}\n            type={'multi'}\n            displaySearchInput={true}\n            messages={this.messages}\n            id={`items-${this.sectionKind}`}\n            readonly={this.readonly}\n            disabled={this.disabled}\n            name={this.name}\n            invalid={this.invalid}\n          ></MgInputCheckboxList>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}