npm - @mgdis/mg-components - Versions diffs - 5.23.2 → 5.25.0 - Mend

@mgdis/mg-components 5.23.2 → 5.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (187) hide show

package/dist/collection/components/atoms/mg-card/mg-card.js CHANGED Viewed

@@ -56,7 +56,7 @@ export class MgCard {
      */
     render() {
         var _a;
-        return (h("div", { key: '4d2a509e9c4d834d5d70068fa2d7515d8044ba7e', class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-c-card__bar" }), h("slot", { key: 'e3b08a0e5997533ceb4c5d24463a1e748a789683' })));
+        return (h("div", { key: '8eb3843ddbe71df4ae6a6f56896c1c68b5d8c17f', class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-c-card__bar" }), h("slot", { key: '77d242d0d83844071e1ee8b62d1816cd732e13c1' })));
     }
     static get is() { return "mg-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/mg-character-left/mg-character-left.js CHANGED Viewed

@@ -26,7 +26,7 @@ export class MgCharacterLeft {
      * @returns HTML Element
      */
     render() {
-        return (h("span", { key: '6b4b475c61f5183961a263187cfad0c6609a2c6f', id: this.identifier, "aria-live": "polite" }, h("span", { key: '85fba95f7f827ee9f4ddb1fc3dd5751c04473ccc', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: 'ef1da0c4d3b361670718726a59ba71a4d0a119b2', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
+        return (h("span", { key: 'c18bde23c2d962cd943540eb182381de1c6dd791', id: this.identifier, "aria-live": "polite" }, h("span", { key: 'bf678c1d055607bbdc32a34fbf247fdd189f2d99', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: 'd18fc90eae95b1c807f6024a9681269b6552a1cf', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
     }
     static get is() { return "mg-character-left"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/atoms/mg-divider/mg-divider.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class MgDivider {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '7250dfa7ca66ea0831292a25ea7e76c29ca36500', class: {
+        return (h("div", { key: 'fd34b566182d17e5cadbb19a923ce07b53cd749d', class: {
                 'mg-c-divider': true,
                 'mg-c-divider--full': this.size === 'full',
             } }));

package/dist/collection/components/atoms/mg-input-title/mg-input-title.js CHANGED Viewed

@@ -33,7 +33,7 @@ export class MgInputTitle {
     render() {
         const TagName = this.readonly ? 'span' : this.tagName;
         // \u00A0 represent a &nbsp;
-        return (h(TagName, { key: '6d9a02cd0ebaede9bcb6aa92368c89cf0da83cd6', class: "mg-c-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", { key: 'e5b41b42d0988f21896a11a1dea864b025b2a9eb' }), this.required && (h("span", { class: "mg-c-input-title__required" }, "\u00A0", h("span", { class: "mg-u-is-asterisk" }, "*")))));
+        return (h(TagName, { key: '0fbbce483f0d178036c4bf8ada139ddba9c16694', class: "mg-c-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", { key: '1db71caf002de0874f566d55b4bd0031ddf10650' }), this.required && (h("span", { class: "mg-c-input-title__required" }, "\u00A0", h("span", { class: "mg-u-is-asterisk" }, "*")))));
     }
     static get is() { return "mg-input-title"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/molecules/inputs/MgInput.conf.js CHANGED Viewed

@@ -10,4 +10,5 @@ export var Handler;
     Handler["BLUR"] = "blur";
     Handler["FOCUS"] = "focus";
 })(Handler || (Handler = {}));
+export const tooltipPositions = ['input', 'label'];
 //# sourceMappingURL=MgInput.conf.js.map

package/dist/collection/components/molecules/inputs/MgInput.conf.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MgInput.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/inputs/MgInput.conf.ts"],"names":[],"mappings":"~~AAAA~~;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,CAAU,CAAC;~~AAmBlD~~;;GAEG;AACH,MAAM,CAAN,IAAY,OAGX;AAHD,WAAY,OAAO;IACjB,wBAAa,CAAA;IACb,0BAAe,CAAA;AACjB,CAAC,EAHW,OAAO,KAAP,OAAO,QAGlB","sourcesContent":["/*\n Possible input width\n /\nexport const widths = [2, 4, 16, 'full'] as const;\n\nexport type Width = (typeof widths)[number];\n\n/\n Possible Input types\n /\n\nexport type HTMLMgInputsElement =\n \| HTMLMgInputCheckboxElement\n \| HTMLMgInputDateElement\n \| HTMLMgInputNumericElement\n \| HTMLMgInputPasswordElement\n \| HTMLMgInputRadioElement\n \| HTMLMgInputSelectElement\n \| HTMLMgInputTextElement\n \| HTMLMgInputTextareaElement\n \| (HTMLMgInputToggleElement & { required: true; invalid: false; displayError: () => void });\n\n/\n Available handlers\n */\nexport enum Handler {\n BLUR = 'blur',\n FOCUS = 'focus',\n}\n"]}
1	+ {"version":3,"file":"MgInput.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/inputs/MgInput.conf.ts"],"names":[],"mappings":"AAgCA;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,CAAU,CAAC;AAkBlD;;GAEG;AACH,MAAM,CAAN,IAAY,OAGX;AAHD,WAAY,OAAO;IACjB,wBAAa,CAAA;IACb,0BAAe,CAAA;AACjB,CAAC,EAHW,OAAO,KAAP,OAAO,QAGlB;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAAO,EAAE,OAAO,CAAU,CAAC","sourcesContent":["import type { MgInputTitle } from '../../atoms/mg-input-title/mg-input-title';\nimport type { ClassList } from '@mgdis/stencil-helpers';\n\n/*\n MgInput component props\n /\nexport interface MgInputProps {\n // Global\n identifier: string;\n classCollection: ClassList;\n // Label\n label: string;\n labelOnTop: boolean;\n labelHide: boolean;\n isFieldset: MgInputTitle['isLegend'];\n // Input\n value: string;\n readonlyValue: string \| string[];\n required: boolean;\n readonly: boolean;\n mgWidth: Width;\n disabled: boolean;\n // Tooltip\n tooltip: string;\n tooltipPosition: TooltipPosition;\n // Help Text\n helpText: string;\n // Error Message\n errorMessage: string;\n // ariaDescribedbyIDs\n ariaDescribedbyIDs: string[];\n}\n/\n Possible input width\n /\nexport const widths = [2, 4, 16, 'full'] as const;\n\nexport type Width = (typeof widths)[number];\n\n/\n Possible Input types\n /\nexport type HTMLMgInputsElement =\n \| HTMLMgInputCheckboxElement\n \| HTMLMgInputDateElement\n \| HTMLMgInputNumericElement\n \| HTMLMgInputPasswordElement\n \| HTMLMgInputRadioElement\n \| HTMLMgInputSelectElement\n \| HTMLMgInputTextElement\n \| HTMLMgInputTextareaElement\n \| (HTMLMgInputToggleElement & { required: true; invalid: false; displayError: () => void });\n\n/\n Available handlers\n */\nexport enum Handler {\n BLUR = 'blur',\n FOCUS = 'focus',\n}\n\nexport const tooltipPositions = ['input', 'label'] as const;\n\nexport type TooltipPosition = (typeof tooltipPositions)[number];\n"]}

package/dist/collection/components/molecules/inputs/MgInput.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { widths } from "./MgInput.conf";
+import { widths, tooltipPositions } from "./MgInput.conf";
 import { isValidString } from "@mgdis/stencil-helpers";
 /**
  * Apply in all input child node the aria-describedby attribute
@@ -37,12 +37,33 @@ const manageClasses = (props) => {
     if (props.mgWidth !== undefined)
         props.classCollection.add(`mg-c-input--width-${props.mgWidth}`);
 };
+/**
+ * Check props configuration
+ * @param props - MgInput Interface Props
+ */
+const checkPropsConfig = (props) => {
+    if (!isValidString(props.identifier)) {
+        throw new Error('<mg-input> prop "identifier" is required.');
+    }
+    if (!isValidString(props.label)) {
+        throw new Error('<mg-input> prop "label" is required.');
+    }
+    if (props.labelOnTop && props.labelHide) {
+        throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
+    }
+    if (!tooltipPositions.includes(props.tooltipPosition)) {
+        throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}`);
+    }
+};
 /**
  * Get tagname
  * @param isFieldset - is fieldset
  * @returns tag name
  */
 const getTagName = (isFieldset, readOnly) => (!isFieldset || readOnly ? 'div' : 'fieldset');
+/**
+ * MgInput Interface
+ */
 /**
  * Get input template
  * @param props - MgInput Interface Props
@@ -52,17 +73,9 @@ const getTagName = (isFieldset, readOnly) => (!isFieldset || readOnly ? 'div' :
  */
 export const MgInput = (props, children, utils) => {
     /**
-     * Check required properties
+     * Check props config
      */
-    if (!isValidString(props.identifier)) {
-        throw new Error('<mg-input> prop "identifier" is required.');
-    }
-    if (!isValidString(props.label)) {
-        throw new Error('<mg-input> prop "label" is required.');
-    }
-    if (props.labelOnTop && props.labelHide) {
-        throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
-    }
+    checkPropsConfig(props);
     /**
      * Set readonly value
      */
@@ -89,15 +102,15 @@ export const MgInput = (props, children, utils) => {
     /**
      * Return template
      *
-     * +--------+--------------+---------+
-     * |  label | input        | tooltip |
-     * |        +--------------+---------+
-     * |        | nb Char Left           |
-     * |        +------------------------+
-     * |        | Help Text              |
-     * |        +------------------------+
-     * |        | Error                  |
-     * +--------+------------------------+
+     * +--------+---------+--------------+---------+
+     * |  label | tooltip | input        | tooltip |
+     * |--------+---------+--------------+---------+
+     * |                  | nb Char Left           |
+     * |                  +------------------------+
+     * |                  | Help Text              |
+     * |                  +------------------------+
+     * |                  | Error                  |
+     * +------------------+------------------------+
      *
      * Error message is based on this aria method: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change
      */
@@ -107,12 +120,6 @@ export const MgInput = (props, children, utils) => {
      * @returns mg-tooltip
      */
     const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip }, h("mg-icon", { icon: "info-circle" })));
-    /**
-     * Get input title (label) node
-     * Display asterisk only if not disabled and not readonly
-     * @returns mg-input-title
-     */
-    const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, readonly: props.readonly, class: props.labelHide ? 'mg-u-visually-hidden' : undefined, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label));
-    return (h(TagName, { class: props.classCollection.join() }, props.labelOnTop ? (h("div", { class: "mg-c-input__title" }, getInputTitle(), !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()), props.readonly ? (h("div", { class: "mg-c-input__input-container" }, h("strong", null, props.readonlyValue), children.filter(child => Object.values(child).includes('append-input')))) : (h("div", { class: "mg-c-input__input-container" }, h("div", { class: { 'mg-c-input__input': true, 'mg-c-input__input--has-error': props.errorMessage !== undefined } }, applyAriadescribedBy(children, ariaDescribedbyIDs, utils), !props.labelOnTop && props.tooltip && getTooltip()), props.helpText && h("div", { id: helpTextId, class: "mg-c-input__help-text", innerHTML: props.helpText }), props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-c-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
+    return (h(TagName, { class: props.classCollection.join() }, h("div", { class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': props.labelHide } }, h("mg-input-title", { identifier: props.identifier, readonly: props.readonly, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label), props.tooltip && !props.readonly && (props.tooltipPosition === 'label' || props.labelOnTop) && !props.labelHide && getTooltip()), props.readonly ? (h("div", { class: "mg-c-input__input-container" }, Array.isArray(props.readonlyValue) ? (h("ul", null, props.readonlyValue.map(value => (h("li", { key: value }, h("strong", null, value)))))) : (h("strong", null, props.readonlyValue)), children.filter(child => Object.values(child).includes('append-input')))) : (h("div", { class: "mg-c-input__input-container" }, h("div", { class: { 'mg-c-input__input': true, 'mg-c-input__input--has-error': props.errorMessage !== undefined } }, applyAriadescribedBy(children, ariaDescribedbyIDs, utils), props.tooltip && !props.readonly && !props.labelOnTop && (props.tooltipPosition === 'input' || props.labelHide) && getTooltip()), props.helpText && h("div", { id: helpTextId, class: "mg-c-input__help-text", innerHTML: props.helpText }), props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-c-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
 };
 //# sourceMappingURL=MgInput.js.map

package/dist/collection/components/molecules/inputs/MgInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MgInput.js","sourceRoot":"","sources":["../../../../src/components/molecules/inputs/MgInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode, FunctionalUtilities } from '@stencil/core';\nimport { widths, Width } from './MgInput.conf';\nimport { ClassList, isValidString } from '@mgdis/stencil-helpers';\nimport { MgInputTitle } from '../../atoms/mg-input-title/mg-input-title';\n\n/*\n Apply in all input child node the aria-describedby attribute\n * @param children - Represent scoped elements\n * @param ariaDescribedbyIDs - List of IDs\n * @param utils - Stencil.js utils\n * @returns Children with aria-describedby attribute\n /\nconst applyAriadescribedBy = (children: VNode[], ariaDescribedbyIDs: Set<string>, utils: FunctionalUtilities): VNode[] =>\n utils.map(children, child => {\n if (['input', 'select', 'textarea'].includes(child.vtag as string)) {\n return {\n ...child,\n vattrs: {\n ...child.vattrs,\n 'aria-describedby': [...ariaDescribedbyIDs].join(' '),\n },\n };\n }\n\n // we recursively apply ariadescribedBy attributes to child input nodes if exists\n if (child.vchildren === null) return { ...child };\n return {\n ...child,\n vchildren: applyAriadescribedBy(child.vchildren, ariaDescribedbyIDs, utils),\n };\n });\n\n/\n Add classes based on props\n * @param props - MgInput Interface Props\n /\nconst manageClasses = (props: MgInputProps): void => {\n props.classCollection.add('mg-c-input');\n\n if (props.labelOnTop) props.classCollection.add('mg-c-input--label-on-top');\n else props.classCollection.delete('mg-c-input--label-on-top');\n\n if (props.readonly) props.classCollection.add('mg-c-input--readonly');\n else props.classCollection.delete('mg-c-input--readonly');\n\n widths.forEach(width => {\n props.classCollection.delete(`mg-c-input--width-${width}`);\n });\n if (props.mgWidth !== undefined) props.classCollection.add(`mg-c-input--width-${props.mgWidth}`);\n};\n\n/\n Get tagname\n * @param isFieldset - is fieldset\n * @returns tag name\n /\nconst getTagName = (isFieldset: MgInputProps['isFieldset'], readOnly: MgInputProps['readonly']): string => (!isFieldset \|\| readOnly ? 'div' : 'fieldset');\n\n/\n MgInput Interface\n /\ninterface MgInputProps {\n // Global\n identifier: string;\n classCollection: ClassList;\n // Label\n label: string;\n labelOnTop: boolean;\n labelHide: boolean;\n isFieldset: MgInputTitle['isLegend'];\n // Input\n value: string;\n readonlyValue: string;\n required: boolean;\n readonly: boolean;\n mgWidth: Width;\n disabled: boolean;\n // Tooltip\n tooltip: string;\n // Help Text\n helpText: string;\n // Error Message\n errorMessage: string;\n // ariaDescribedbyIDs\n ariaDescribedbyIDs: string[];\n}\n\n/\n Get input template\n * @param props - MgInput Interface Props\n * @param children - Represent scoped elements\n * @param utils - Stencil.js utils\n * @returns input template\n /\nexport const MgInput: FunctionalComponent<MgInputProps> = (props: MgInputProps, children: VNode[], utils: FunctionalUtilities): VNode[] => {\n /\n Check required properties\n /\n if (!isValidString(props.identifier)) {\n throw new Error('<mg-input> prop \"identifier\" is required.');\n }\n if (!isValidString(props.label)) {\n throw new Error('<mg-input> prop \"label\" is required.');\n }\n if (props.labelOnTop && props.labelHide) {\n throw new Error('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\".');\n }\n\n /\n Set readonly value\n /\n if (props.readonlyValue === undefined) props.readonlyValue = props.value;\n\n /\n Component classes\n /\n manageClasses(props);\n\n /\n a11y IDs\n /\n const ariaDescribedbyIDs: Set<string> = new Set(props.ariaDescribedbyIDs);\n\n // Help text\n const helpTextId = `${props.identifier}-help-text`;\n if (typeof props.helpText === 'string' && props.helpText !== '') {\n ariaDescribedbyIDs.add(helpTextId);\n }\n\n // Error Message\n const helpTextErrorId = `${props.identifier}-error`;\n if (typeof props.errorMessage === 'string' && props.errorMessage !== '') {\n ariaDescribedbyIDs.add(helpTextErrorId);\n }\n\n /\n Return template\n \n +--------+--------------+---------+\n * \| label \| input \| tooltip \|\n * \| +--------------+---------+\n * \| \| nb Char Left \|\n * \| +------------------------+\n * \| \| Help Text \|\n * \| +------------------------+\n * \| \| Error \|\n * +--------+------------------------+\n \n Error message is based on this aria method: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change\n /\n\n const TagName = getTagName(props.isFieldset, props.readonly);\n\n /\n Get tooltip node\n * @returns mg-tooltip\n /\n const getTooltip = (): VNode[] => (\n <mg-tooltip identifier={`${props.identifier}-tooltip`} message={props.tooltip}>\n <mg-icon icon=\"info-circle\"></mg-icon>\n </mg-tooltip>\n );\n\n /\n Get input title (label) node\n * Display asterisk only if not disabled and not readonly\n * @returns mg-input-title\n */\n const getInputTitle = (): VNode[] => (\n <mg-input-title\n identifier={props.identifier}\n readonly={props.readonly}\n class={props.labelHide ? 'mg-u-visually-hidden' : undefined}\n required={props.required && !props.disabled && !props.readonly}\n is-legend={props.isFieldset}\n >\n {props.label}\n </mg-input-title>\n );\n\n return (\n <TagName class={props.classCollection.join()}>\n {props.labelOnTop ? (\n <div class=\"mg-c-input__title\">\n {getInputTitle()}\n {!props.readonly && props.tooltip && getTooltip()}\n </div>\n ) : (\n getInputTitle()\n )}\n {props.readonly ? (\n <div class=\"mg-c-input__input-container\">\n <strong>{props.readonlyValue}</strong>\n {children.filter(child => Object.values(child).includes('append-input'))}\n </div>\n ) : (\n <div class=\"mg-c-input__input-container\">\n <div class={{ 'mg-c-input__input': true, 'mg-c-input__input--has-error': props.errorMessage !== undefined }}>\n {applyAriadescribedBy(children, ariaDescribedbyIDs, utils)}\n {!props.labelOnTop && props.tooltip && getTooltip()}\n </div>\n {props.helpText && <div id={helpTextId} class=\"mg-c-input__help-text\" innerHTML={props.helpText}></div>}\n {props.errorMessage && !props.readonly && !props.disabled && (\n <div id={helpTextErrorId} class=\"mg-c-input__error\" innerHTML={props.errorMessage} aria-live=\"assertive\"></div>\n )}\n </div>\n )}\n </TagName>\n );\n};\n"]}
1	+ {"version":3,"file":"MgInput.js","sourceRoot":"","sources":["../../../../src/components/molecules/inputs/MgInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode, FunctionalUtilities } from '@stencil/core';\nimport { widths, tooltipPositions, type MgInputProps } from './MgInput.conf';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n/*\n Apply in all input child node the aria-describedby attribute\n * @param children - Represent scoped elements\n * @param ariaDescribedbyIDs - List of IDs\n * @param utils - Stencil.js utils\n * @returns Children with aria-describedby attribute\n /\nconst applyAriadescribedBy = (children: VNode[], ariaDescribedbyIDs: Set<string>, utils: FunctionalUtilities): VNode[] =>\n utils.map(children, child => {\n if (['input', 'select', 'textarea'].includes(child.vtag as string)) {\n return {\n ...child,\n vattrs: {\n ...child.vattrs,\n 'aria-describedby': [...ariaDescribedbyIDs].join(' '),\n },\n };\n }\n\n // we recursively apply ariadescribedBy attributes to child input nodes if exists\n if (child.vchildren === null) return { ...child };\n return {\n ...child,\n vchildren: applyAriadescribedBy(child.vchildren, ariaDescribedbyIDs, utils),\n };\n });\n\n/\n Add classes based on props\n * @param props - MgInput Interface Props\n /\nconst manageClasses = (props: MgInputProps): void => {\n props.classCollection.add('mg-c-input');\n\n if (props.labelOnTop) props.classCollection.add('mg-c-input--label-on-top');\n else props.classCollection.delete('mg-c-input--label-on-top');\n\n if (props.readonly) props.classCollection.add('mg-c-input--readonly');\n else props.classCollection.delete('mg-c-input--readonly');\n\n widths.forEach(width => {\n props.classCollection.delete(`mg-c-input--width-${width}`);\n });\n if (props.mgWidth !== undefined) props.classCollection.add(`mg-c-input--width-${props.mgWidth}`);\n};\n\n/\n Check props configuration\n * @param props - MgInput Interface Props\n /\nconst checkPropsConfig = (props: MgInputProps): void => {\n if (!isValidString(props.identifier)) {\n throw new Error('<mg-input> prop \"identifier\" is required.');\n }\n if (!isValidString(props.label)) {\n throw new Error('<mg-input> prop \"label\" is required.');\n }\n if (props.labelOnTop && props.labelHide) {\n throw new Error('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\".');\n }\n if (!tooltipPositions.includes(props.tooltipPosition)) {\n throw new Error(`<mg-input> prop \"tooltipPosition\" must be one of: ${tooltipPositions.join(', ')}`);\n }\n};\n\n/\n Get tagname\n * @param isFieldset - is fieldset\n * @returns tag name\n /\nconst getTagName = (isFieldset: MgInputProps['isFieldset'], readOnly: MgInputProps['readonly']): string => (!isFieldset \|\| readOnly ? 'div' : 'fieldset');\n\n/\n MgInput Interface\n /\n\n/\n Get input template\n * @param props - MgInput Interface Props\n * @param children - Represent scoped elements\n * @param utils - Stencil.js utils\n * @returns input template\n /\nexport const MgInput: FunctionalComponent<MgInputProps> = (props: MgInputProps, children: VNode[], utils: FunctionalUtilities): VNode[] => {\n /\n Check props config\n /\n checkPropsConfig(props);\n\n /\n Set readonly value\n /\n if (props.readonlyValue === undefined) props.readonlyValue = props.value;\n\n /\n Component classes\n /\n manageClasses(props);\n\n /\n a11y IDs\n /\n const ariaDescribedbyIDs: Set<string> = new Set(props.ariaDescribedbyIDs);\n\n // Help text\n const helpTextId = `${props.identifier}-help-text`;\n if (typeof props.helpText === 'string' && props.helpText !== '') {\n ariaDescribedbyIDs.add(helpTextId);\n }\n\n // Error Message\n const helpTextErrorId = `${props.identifier}-error`;\n if (typeof props.errorMessage === 'string' && props.errorMessage !== '') {\n ariaDescribedbyIDs.add(helpTextErrorId);\n }\n\n /\n Return template\n \n +--------+---------+--------------+---------+\n * \| label \| tooltip \| input \| tooltip \|\n * \|--------+---------+--------------+---------+\n * \| \| nb Char Left \|\n * \| +------------------------+\n * \| \| Help Text \|\n * \| +------------------------+\n * \| \| Error \|\n * +------------------+------------------------+\n \n Error message is based on this aria method: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change\n /\n\n const TagName = getTagName(props.isFieldset, props.readonly);\n\n /\n Get tooltip node\n * @returns mg-tooltip\n */\n const getTooltip = (): VNode[] => (\n <mg-tooltip identifier={`${props.identifier}-tooltip`} message={props.tooltip}>\n <mg-icon icon=\"info-circle\"></mg-icon>\n </mg-tooltip>\n );\n\n return (\n <TagName class={props.classCollection.join()}>\n <div class={{ 'mg-c-input__title': true, 'mg-u-visually-hidden': props.labelHide }}>\n <mg-input-title identifier={props.identifier} readonly={props.readonly} required={props.required && !props.disabled && !props.readonly} is-legend={props.isFieldset}>\n {props.label}\n </mg-input-title>\n {props.tooltip && !props.readonly && (props.tooltipPosition === 'label' \|\| props.labelOnTop) && !props.labelHide && getTooltip()}\n </div>\n {props.readonly ? (\n <div class=\"mg-c-input__input-container\">\n {Array.isArray(props.readonlyValue) ? (\n <ul>\n {props.readonlyValue.map(value => (\n <li key={value}>\n <strong>{value}</strong>\n </li>\n ))}\n </ul>\n ) : (\n <strong>{props.readonlyValue}</strong>\n )}\n {children.filter(child => Object.values(child).includes('append-input'))}\n </div>\n ) : (\n <div class=\"mg-c-input__input-container\">\n <div class={{ 'mg-c-input__input': true, 'mg-c-input__input--has-error': props.errorMessage !== undefined }}>\n {applyAriadescribedBy(children, ariaDescribedbyIDs, utils)}\n {props.tooltip && !props.readonly && !props.labelOnTop && (props.tooltipPosition === 'input' \|\| props.labelHide) && getTooltip()}\n </div>\n {props.helpText && <div id={helpTextId} class=\"mg-c-input__help-text\" innerHTML={props.helpText}></div>}\n {props.errorMessage && !props.readonly && !props.disabled && (\n <div id={helpTextErrorId} class=\"mg-c-input__error\" innerHTML={props.errorMessage} aria-live=\"assertive\"></div>\n )}\n </div>\n )}\n </TagName>\n );\n};\n"]}

package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js CHANGED Viewed

@@ -8,12 +8,10 @@ export 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 => {
+        'mg-c-input__input-group-container--vertical': props.inputVerticalList || props.type === 'multi',
+        'mg-c-input__input-checkbox-multi-inputs': props.type === 'multi',
+    }, 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.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)));
+    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.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }), h("label", { htmlFor: input._id }, input.title)));
 })));
 //# sourceMappingURL=MgInputCheckboxList.js.map

package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MgInputCheckboxList.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAS,MAAM,eAAe,CAAC;AAG9D;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAkD,CAAC,KAA+B,EAAW,EAAE,CAAC;AAC9H,uDAAuD;AACvD,UACE,KAAK,EAAE;QACL,mCAAmC,EAAE,IAAI;QACzC,6CAA6C,EAAE,KAAK,CAAC,iBAAiB,IAAI,~~CAAC,~~KAAK,CAAC,IAAI,KAAK,OAAO~~,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC~~;~~QACrH~~,yCAAyC,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO~~,IAAI,CAAC,KAAK,CAAC,QAAQ~~;~~KACrF~~,EACD,IAAI,EAAC,MAAM,sBACO,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,gBAC7D,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,eACpE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC1D,EAAE,EAAE,KAAK,CAAC,EAAE,IAEX,KAAK,CAAC,UAAU~~;KACd~~,~~MAAM,~~CAAC,~~IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC;KAC7C,~~GAAG,CAAC,KAAK,CAAC,EAAE;;IAAC,OAAA,~~CACZ~~,UAAI,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,yBAAyB,EAAE,IAAI,EAAE,mCAAmC,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE;QACnI,aACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,KAAK,CAAC,GAAG,EACb,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,0CAAE,QAAQ,EAAE,EAC9B,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;QACF,aAAO,OAAO,EAAE,KAAK,CAAC,GAAG,IAAG,KAAK,CAAC,KAAK,CAAS,CAC7C,CACN,CAAA;CAAA,CAAC,~~CACD~~,CACN,CAAC","sourcesContent":["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"]}
1	+ {"version":3,"file":"MgInputCheckboxList.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAS,MAAM,eAAe,CAAC;AAG9D;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAkD,CAAC,KAA+B,EAAW,EAAE,CAAC;AAC9H,uDAAuD;AACvD,UACE,KAAK,EAAE;QACL,mCAAmC,EAAE,IAAI;QACzC,6CAA6C,EAAE,KAAK,CAAC,iBAAiB,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;QAChG,yCAAyC,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO;KAClE,EACD,IAAI,EAAC,MAAM,sBACO,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,gBAC7D,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,eACpE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC1D,EAAE,EAAE,KAAK,CAAC,EAAE,IAEX,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;;IAAC,OAAA,CAC7B,UAAI,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,yBAAyB,EAAE,IAAI,EAAE,mCAAmC,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE;QACnI,aACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,KAAK,CAAC,GAAG,EACb,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,0CAAE,QAAQ,EAAE,EAC9B,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,EAC1C,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;QACF,aAAO,OAAO,EAAE,KAAK,CAAC,GAAG,IAAG,KAAK,CAAC,KAAK,CAAS,CAC7C,CACN,CAAA;CAAA,CAAC,CACC,CACN,CAAC","sourcesContent":["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',\n 'mg-c-input__input-checkbox-multi-inputs': props.type === 'multi',\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.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"]}

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js CHANGED Viewed

@@ -102,7 +102,7 @@ export class MgInputCheckboxPaginated {
         const getText = (checkboxes) => (h("em", { key: '28eedd949445bc6c7a5a750359af7159055657d8', class: "mg-c-input__input-checkbox-multi-section-header-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: 'a7ade87a72bb1cba4d0c20dde425cefc5c7fbff4', hidden: this.checkboxes.length < 1 }, h("div", { key: '38711edade3945e940ba29b44492424c3e5b7063', 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-tooltip", { class: "mg-c-input__input-checkbox-multi-section-header-tootlip", message: this.messages.tooltip, "data-popper-strategy": "absolute" }, 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, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { key: '3a514d5711da9ebb57d21e70609b7f6f2d1e621e', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { key: 'd86fc1faa7ae0312b402a2fc26a1ef04c30cd410', checkboxes: this.getArrayRange(this.checkboxes, from, to), 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 }))));
+        return (h(Host, { key: 'a7ade87a72bb1cba4d0c20dde425cefc5c7fbff4', hidden: this.checkboxes.length < 1 }, h("div", { key: '38711edade3945e940ba29b44492424c3e5b7063', 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-tooltip", { class: "mg-c-input__input-checkbox-multi-section-header-tootlip", message: this.messages.tooltip, "data-popper-strategy": "absolute" }, 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, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { key: '3a514d5711da9ebb57d21e70609b7f6f2d1e621e', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { key: '84223d73e67e355ce01a4f70ef75a42a18fd96b4', checkboxes: this.getArrayRange(this.checkboxes, from, to), inputVerticalList: true, type: 'multi', displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
     }
     static get is() { return "mg-input-checkbox-paginated"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-input-checkbox-paginated.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.tsx"],"names":[],"mappings":"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","sourcesContent":["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 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 validateCheckboxes(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 }\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 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 = (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 getText = (checkboxes: CheckboxItem[]): HTMLElement => (\n <em class=\"mg-c-input__input-checkbox-multi-section-header-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__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-tooltip class=\"mg-c-input__input-checkbox-multi-section-header-tootlip\" message={this.messages.tooltip} data-popper-strategy=\"absolute\">\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__input-checkbox-multi-section-content\">\n <MgInputCheckboxList\n checkboxes={this.getArrayRange(this.checkboxes, from, to)}\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"]}
1	+ {"version":3,"file":"mg-input-checkbox-paginated.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.tsx"],"names":[],"mappings":"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","sourcesContent":["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 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 validateCheckboxes(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 }\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 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 = (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 getText = (checkboxes: CheckboxItem[]): HTMLElement => (\n <em class=\"mg-c-input__input-checkbox-multi-section-header-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__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-tooltip class=\"mg-c-input__input-checkbox-multi-section-header-tootlip\" message={this.messages.tooltip} data-popper-strategy=\"absolute\">\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__input-checkbox-multi-section-content\">\n <MgInputCheckboxList\n checkboxes={this.getArrayRange(this.checkboxes, from, to)}\n inputVerticalList={true}\n type={'multi'}\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"]}

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-input-checkbox.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts"],"names":[],"mappings":"AAsBA;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,UAAU,EAAE,OAAO,CAAU,CAAC;AAO5D;;GAEG;AACH,MAAM,CAAN,IAAY,WAGX;AAHD,WAAY,WAAW;IACrB,oCAAqB,CAAA;IACrB,4CAA6B,CAAA;AAC/B,CAAC,EAHW,WAAW,KAAX,WAAW,QAGtB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC1B,qCAAiB,CAAA;IACjB,iCAAa,CAAA;AACf,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B;~~AAwBD~~;;GAEG;AACH,MAAM,CAAN,IAAY,qBAIX;AAJD,WAAY,qBAAqB;IAC/B,4CAAmB,CAAA;IACnB,4CAAmB,CAAA;IACnB,gDAAuB,CAAA;AACzB,CAAC,EAJW,qBAAqB,KAArB,qBAAqB,QAIhC","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\n/\n Define select values button key\n */\nexport enum SelectValuesButtonKey {\n EDIT = 'editButton',\n SHOW = 'showButton',\n SELECT = 'selectButton',\n}\n"]}
1	+ {"version":3,"file":"mg-input-checkbox.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts"],"names":[],"mappings":"AAsBA;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,UAAU,EAAE,OAAO,CAAU,CAAC;AAO5D;;GAEG;AACH,MAAM,CAAN,IAAY,WAGX;AAHD,WAAY,WAAW;IACrB,oCAAqB,CAAA;IACrB,4CAA6B,CAAA;AAC/B,CAAC,EAHW,WAAW,KAAX,WAAW,QAGtB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC1B,qCAAiB,CAAA;IACjB,iCAAa,CAAA;AACf,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B;AAuBD;;GAEG;AACH,MAAM,CAAN,IAAY,qBAIX;AAJD,WAAY,qBAAqB;IAC/B,4CAAmB,CAAA;IACnB,4CAAmB,CAAA;IACnB,gDAAuB,CAAA;AACzB,CAAC,EAJW,qBAAqB,KAArB,qBAAqB,QAIhC","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 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\n/\n Define select values button key\n */\nexport enum SelectValuesButtonKey {\n EDIT = 'editButton',\n SHOW = 'showButton',\n SELECT = 'selectButton',\n}\n"]}

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js CHANGED Viewed

@@ -119,6 +119,16 @@ export class MgInputCheckbox {
                 return o;
             });
         };
+        /**
+         * Get readonly values
+         * @returns formated readonly value
+         */
+        this.getReadonlyValues = () => this.inputVerticalList
+            ? this.value.filter(({ value }) => value).map(({ title }) => title)
+            : this.value
+                .filter(({ value }) => value)
+                .map(({ title }) => title)
+                .join(', ');
         /**
          * has invalid input
          * @returns true if at least one input is invalid
@@ -198,6 +208,7 @@ export class MgInputCheckbox {
         this.displaySelectedValues = undefined;
         this.disabled = false;
         this.tooltip = undefined;
+        this.tooltipPosition = 'input';
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
@@ -351,9 +362,11 @@ export class MgInputCheckbox {
      */
     componentDidLoad() {
         var _a, _b;
-        this.element.shadowRoot.querySelector('legend').setAttribute('id', this.legendId);
-        this.searchInput = (_a = this.element.shadowRoot.querySelector('mg-input-text')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('input');
-        (_b = this.searchInput) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.handleKeydown);
+        if (!this.readonly) {
+            this.element.shadowRoot.querySelector('legend').setAttribute('id', this.legendId);
+            this.searchInput = (_a = this.element.shadowRoot.querySelector('mg-input-text')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('input');
+            (_b = this.searchInput) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.handleKeydown);
+        }
     }
     /**
      * Render checkboxes by section
@@ -395,7 +408,7 @@ export class MgInputCheckbox {
             h("mg-input-text", { key: "input-search", identifier: `${this.identifier}-input-search`, icon: "magnifying-glass", type: "search", placeholder: this.messages.input.checkbox.label, label: this.messages.input.checkbox.label, mgWidth: "full", value: this.searchValue, labelHide: true, displayCharacterLeft: false, name: "q", "onValue-change": this.handleSearchChange, "aria-controls": "search-results items-list" }),
             h("p", { key: "search-results", role: "status", class: "mg-u-visually-hidden", id: "search-results" }, `${checkboxes.length} ${this.messages.input.checkbox[checkboxes.length > 0 ? 'results' : 'result']}`),
             h("div", { key: "sections-container", class: "mg-c-input__input-checkbox-multi-sections-container" }, this.renderCheckboxBySection(checkboxes)),
-        ]) : (h(MgInputCheckboxList, { checkboxes: checkboxes, inputVerticalList: true, type: this.type, readonly: this.readonly, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })), this.displaySearchInput && checkboxes.length === 0 && h("p", { class: "mg-c-input__input-checkbox-multi-no-result" }, this.messages.input.checkbox.noResult))), this.displaySelectedValues ? (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-checkbox-multi-values-container" }, this.getSelectedItems().map(({ title }) => (h("li", { class: "mg-c-input__input-checkbox-multi-value", key: title }, title)))))) : (h("strong", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
+        ]) : (h(MgInputCheckboxList, { checkboxes: checkboxes, inputVerticalList: true, type: this.type, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })), this.displaySearchInput && checkboxes.length === 0 && h("p", { class: "mg-c-input__input-checkbox-multi-no-result" }, this.messages.input.checkbox.noResult))), this.displaySelectedValues ? (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-checkbox-multi-values-container" }, this.getSelectedItems().map(({ title }) => (h("li", { class: "mg-c-input__input-checkbox-multi-value", key: title }, title)))))) : (h("strong", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
     }
     /**
      * Render
@@ -403,7 +416,7 @@ export class MgInputCheckbox {
      */
     render() {
         var _a;
-        return (h(MgInput, { key: '30d2be938b51f423015a2fba6f70c9a424402c8f', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, this.type === 'checkbox' || this.readonly ? (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, inputVerticalList: this.inputVerticalList, type: this.type, readonly: this.readonly, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })) : (this.renderCheckboxMulti())));
+        return (h(MgInput, { key: 'a36e398ac67e25249ea078b9ad70af146f045fde', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), readonlyValue: this.getReadonlyValues(), tooltip: !this.readonly ? this.tooltip : undefined, tooltipPosition: this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, this.type === 'checkbox' ? (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, inputVerticalList: this.inputVerticalList, type: this.type, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })) : (this.renderCheckboxMulti())));
     }
     static get is() { return "mg-input-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -656,6 +669,30 @@ export class MgInputCheckbox {
                 "attribute": "tooltip",
                 "reflect": false
             },
+            "tooltipPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipPosition",
+                    "resolved": "\"input\" | \"label\"",
+                    "references": {
+                        "TooltipPosition": {
+                            "location": "import",
+                            "path": "../MgInput.conf",
+                            "id": "src/components/molecules/inputs/MgInput.conf.ts::TooltipPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define tooltip position"
+                },
+                "attribute": "tooltip-position",
+                "reflect": false,
+                "defaultValue": "'input'"
+            },
             "helpText": {
                 "type": "string",
                 "mutable": false,