@mgdis/mg-components 6.15.0 → 6.16.0

package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js

@@ -1,8 +1,6 @@
 import { h } from "@stencil/core";
 import { ClassList, allItemsAreString, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { classDisabled, classReadonly } from "../mg-input/mg-input.conf";
-import { initLocales } from "../../../../locales";
-import { defineErrorMessage } from "../mg-input/mg-input.utils";
 /**
  * type Option validation function
  * @param option - radio option
@@ -60,29 +58,6 @@ export class MgInputToggle {
          * Checked internal value
          */
         this.checked = false;
-        /**
-         * Check if input is valid
-         */
-        this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || this.hasInputItems());
-        };
-        /**
-         * Reset error message
-         */
-        this.resetErrorMessage = () => {
-            this.checkValidity();
-            this.errorMessage = undefined;
-        };
-        /**
-         * Test if component has items
-         * @returns truthy if component has items
-         */
-        this.hasInputItems = () => { var _a; return ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 0; };
-        /**
-         * Test if component has no value error message displayed
-         * @returns truthy if compent display no value error message
-         */
-        this.hasNoValueErrorMessageDisplay = () => this.errorMessage === this.messages.errors.noValue;
         /**
          * Set input error message
          * @param errorMessage - errorMessage override
@@ -91,13 +66,8 @@ export class MgInputToggle {
             // Set error message
             this.errorMessage = undefined;
             // Does have a custom error message
-            if (!this.valid) {
-                if (errorMessage !== undefined) {
-                    this.errorMessage = errorMessage;
-                }
-                else if (!this.hasInputItems()) {
-                    this.errorMessage = this.messages.errors.noValue;
-                }
+            if (!this.valid && errorMessage !== undefined) {
+                this.errorMessage = errorMessage;
             }
         };
         /**
@@ -112,7 +82,7 @@ export class MgInputToggle {
         this.validateSlots = () => {
             const slots = Array.from(this.element.children);
             if (slots.length !== 2) {
-                console.error('<mg-input-toggle> 2 slots are required.');
+                throw new Error('<mg-input-toggle> 2 slots are required.');
             }
             else if (!this.isIcon) {
                 // Due to text-overflow set to ellipsis
@@ -143,28 +113,16 @@ export class MgInputToggle {
         this.valueChange.emit(newValue);
     }
     validateItems(newValue) {
-        if ([undefined, null].includes(newValue) || (Array.isArray(newValue) && newValue.length === 0)) {
-            this.options = [];
-            this.displayError();
-        }
-        else if (Array.isArray(newValue) && this.items.length !== 2) {
+        if (typeof newValue === 'object' && this.items.length !== 2) {
             throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${toString(newValue)}.`);
         }
         // String array
         else if (allItemsAreString(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item }));
-            // force to reset error when noValueError is displaied
-            if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
-                this.resetErrorMessage();
-            }
         }
         // Object array
         else if (Array.isArray(newValue) && newValue.every(isOption)) {
             this.options = newValue;
-            // force to reset error when noValueError is displaied
-            if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
-                this.resetErrorMessage();
-            }
         }
         else {
             throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${toString(newValue)}.`);
@@ -226,7 +184,8 @@ export class MgInputToggle {
             throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
         }
         else {
-            this.setValidity(valid);
+            this.valid = valid;
+            this.inputValid.emit(valid);
             this.setErrorMessage(valid ? undefined : errorMessage);
         }
     }
@@ -245,43 +204,12 @@ export class MgInputToggle {
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    this.resetErrorMessage();
+                    this.errorMessage = undefined;
                     resolve();
                 });
             });
         }
     }
-    /**
-     * Display input error if it exists.
-     */
-    displayError() {
-        // Use `Promise` as requested for stencil method
-        // Use `requestAnimationFrame` to ensure:
-        // - DOM is fully updated before validation
-        // - Async operations are completed
-        // - No timing issues with Stencil's render cycle
-        // - Keep everything in sync both inside and outside the component
-        return new Promise(resolve => {
-            requestAnimationFrame(() => {
-                this.checkValidity();
-                this.setErrorMessage();
-                resolve();
-            });
-        });
-    }
-    /**
-     * Method to set validity values
-     * @param newValue - valid new value
-     */
-    setValidity(newValue) {
-        const oldValidValue = this.valid;
-        this.valid = newValue;
-        this.invalid = !this.valid;
-        // We need to send valid event even if it is the same value
-        if (this.valid !== oldValidValue) {
-            this.inputValid.emit(this.valid);
-        }
-    }
     /**
      * set checked state
      */
@@ -300,9 +228,6 @@ export class MgInputToggle {
             const selectedValue = this.value === this.options[optionTrueValueIndex].value;
             this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;
         }
-        else if (Array.isArray(this.options) && this.options.length === 0) {
-            return;
-        }
         else {
             this.checked = this.value === this.options[1].value;
         }
@@ -314,8 +239,6 @@ export class MgInputToggle {
      * Check if component props are well configured on init
      */
     componentWillLoad() {
-        // Get locales
-        this.messages = initLocales(this.element).messages;
         // Check items format
         this.validateItems(this.items);
         // Check slots
@@ -334,7 +257,7 @@ export class MgInputToggle {
      */
     render() {
         const checkedItem = this.getCheckedItem(this.checked);
-        return (h("mg-input", { key: 'a17e505f60d3c7e37f18db5d5c94e8d4a03b3949', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: defineErrorMessage(this.errorMessage, this.noValueErrorDetail) }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly || !this.hasInputItems(), onClick: this.toggleChecked, ref: el => {
+        return (h("mg-input", { key: '7611cffaf1c01e30c3fa7a27555f94ab357dd374', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked, ref: el => {
                 if (el !== null)
                     this.button = el;
             } }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
@@ -637,63 +560,6 @@ export class MgInputToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            },
-            "noValueErrorDetail": {
-                "type": "string",
-                "attribute": "no-value-error-detail",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Define no value error detail"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "valid": {
-                "type": "boolean",
-                "attribute": "valid",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define input valid state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "invalid": {
-                "type": "boolean",
-                "attribute": "invalid",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define input invalid state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
             }
         };
     }
@@ -702,6 +568,7 @@ export class MgInputToggle {
             "classCollection": {},
             "options": {},
             "errorMessage": {},
+            "valid": {},
             "checked": {}
         };
     }

package/dist/collection/locales/en/messages.json

@@ -1,7 +1,6 @@
 {
   "errors": {
-    "required": "This field is required.",
-    "noValue": "No value."
+    "required": "This field is required."
   },
   "nbCharLeft": "{counter} characters left.",
   "input": {
@@ -116,8 +115,8 @@
     "confirm": "Confirm",
     "cancel": "Cancel",
     "close": "Close",
-    "next": "next",
-    "previous": "previous",
+    "next": "Next",
+    "previous": "Previous",
     "reset": "reset"
   },
   "menuItem": {
@@ -135,9 +134,5 @@
   },
   "table": {
     "sortableCaption": "(column headers with buttons are sortable)"
-  },
-  "details": {
-    "toggleClosed": "Show details",
-    "toggleOpened": "Hide details"
   }
 }

package/dist/collection/locales/fr/messages.json

@@ -1,7 +1,6 @@
 {
   "errors": {
-    "required": "Ce champ est obligatoire.",
-    "noValue": "Aucune valeur."
+    "required": "Ce champ est obligatoire."
   },
   "nbCharLeft": "{counter} caractères disponibles.",
   "input": {
@@ -116,8 +115,8 @@
     "confirm": "Valider",
     "cancel": "Annuler",
     "close": "Fermer",
-    "next": "suivant",
-    "previous": "précédent",
+    "next": "Suivant",
+    "previous": "Précédent",
     "reset": "réinitialiser"
   },
   "menuItem": {
@@ -135,9 +134,5 @@
   },
   "table": {
     "sortableCaption": "(les en-têtes de colonnes avec des boutons peuvent être triés)"
-  },
-  "details": {
-    "toggleClosed": "Voir le detail",
-    "toggleOpened": "Masquer le detail"
   }
 }

package/dist/components/index2.js

@@ -405,4 +405,4 @@ const getChildWindows = (localWindow, windows = []) => {
     return windows;
 };
 
-export { ClassList as C, Paginate as P, isValideID as a, isTagName as b, createID as c, allItemsAreString as d, Cursor as e, formatID as f, getWindows as g, isObject as h, isValidString as i, Page as j, getObjectValueFromKey as k, focusableElements as l, cleanString as m, nextTick as n, dateRegExp as o, dateToString as p, isValidNumber as q, toString as t };
+export { ClassList as C, Paginate as P, isValideID as a, isTagName as b, createID as c, allItemsAreString as d, Cursor as e, formatID as f, getWindows as g, Page as h, isValidString as i, getObjectValueFromKey as j, isObject as k, focusableElements as l, cleanString as m, nextTick as n, dateRegExp as o, dateToString as p, isValidNumber as q, toString as t };

package/dist/components/index3.js

@@ -1,6 +1,5 @@
 const errors$1 = {
-	required: "This field is required.",
-	noValue: "No value."
+	required: "This field is required."
 };
 const nbCharLeft$1 = "{counter} characters left.";
 const input$1 = {
@@ -117,8 +116,8 @@ const general$1 = {
 	confirm: "Confirm",
 	cancel: "Cancel",
 	close: "Close",
-	next: "next",
-	previous: "previous",
+	next: "Next",
+	previous: "Previous",
 	reset: "reset"
 };
 const menuItem$1 = {
@@ -137,10 +136,6 @@ const loader$1 = {
 const table$1 = {
 	sortableCaption: "(column headers with buttons are sortable)"
 };
-const details$1 = {
-	toggleClosed: "Show details",
-	toggleOpened: "Hide details"
-};
 var en = {
 	errors: errors$1,
 	nbCharLeft: nbCharLeft$1,
@@ -156,13 +151,11 @@ var en = {
 	itemMore: itemMore$1,
 	actionMore: actionMore$1,
 	loader: loader$1,
-	table: table$1,
-	details: details$1
+	table: table$1
 };
 
 const errors = {
-	required: "Ce champ est obligatoire.",
-	noValue: "Aucune valeur."
+	required: "Ce champ est obligatoire."
 };
 const nbCharLeft = "{counter} caractères disponibles.";
 const input = {
@@ -279,8 +272,8 @@ const general = {
 	confirm: "Valider",
 	cancel: "Annuler",
 	close: "Fermer",
-	next: "suivant",
-	previous: "précédent",
+	next: "Suivant",
+	previous: "Précédent",
 	reset: "réinitialiser"
 };
 const menuItem = {
@@ -299,10 +292,6 @@ const loader = {
 const table = {
 	sortableCaption: "(les en-têtes de colonnes avec des boutons peuvent être triés)"
 };
-const details = {
-	toggleClosed: "Voir le detail",
-	toggleOpened: "Masquer le detail"
-};
 var fr = {
 	errors: errors,
 	nbCharLeft: nbCharLeft,
@@ -318,8 +307,7 @@ var fr = {
 	itemMore: itemMore,
 	actionMore: actionMore,
 	loader: loader,
-	table: table,
-	details: details
+	table: table
 };
 
 /**

package/dist/components/mg-details.js

@@ -1,4 +1,100 @@
-import { M as MgDetails$1, d as defineCustomElement$1 } from './mg-details2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { i as isValidString } from './index2.js';
+import { d as defineCustomElement$2 } from './mg-icon2.js';
+
+const mgDetailsCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details.mg-c-details--empty-summary summary{gap:unset}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}";
+
+const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.expandedChange = createEvent(this, "expanded-change", 7);
+        /**
+         * Hide summary element
+         */
+        this.hideSummary = false;
+        /**
+         * Define if details are diplayed
+         */
+        this.expanded = false;
+        /**
+         * Handle details toggle
+         */
+        this.handleToggle = () => {
+            this.expanded = this.details.open;
+        };
+    }
+    validateTitles(newValue) {
+        if (!isValidString(newValue)) {
+            throw new Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`);
+        }
+    }
+    handleExpanded(newValue) {
+        this.expandedChange.emit(newValue);
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad() {
+        this.validateTitles(this.toggleClosed);
+        this.validateTitles(this.toggleOpened);
+        // Check if summary slot is empty
+        const summarySlot = this.element.querySelector('[slot="summary"]');
+        this.isEmptySummary = summarySlot === null || !isValidString(summarySlot.textContent);
+        // Add event listener to prevent default action on summary click
+        this.element.addEventListener('click', (event) => {
+            if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]') !== null) {
+                event.preventDefault();
+            }
+        });
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h("details", { key: '4da17afd7a964a14b5b101bcfadc241be569d55a', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '515d6c4e117b547fe80a310fb90e114900f645e8' }, h("slot", { key: '0c9c0dcc47dd418e34e541d878bfc03ca137c68d', name: "summary" }), h("span", { key: 'c94f52994843b10c1161c0d85f38f8cb917ea806', class: "mg-c-details__toggle" }, h("mg-icon", { key: '9421452572af3deb03146a8dfd189369b249ba2d', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'dbfb0b34da00e37f55ec07236611c2babdd6b7c5', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '1b18b65a98e39a8663fa5d7e51eef5fbe2b92f76', class: "mg-c-details__details" }, h("slot", { key: '81c213594b1b67747db439624090784eaa5e6fcd', name: "details" }))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "toggleClosed": ["validateTitles"],
+        "toggleOpened": ["validateTitles"],
+        "expanded": ["handleExpanded"]
+    }; }
+    static get style() { return mgDetailsCss; }
+}, [257, "mg-details", {
+        "toggleClosed": [1, "toggle-closed"],
+        "toggleOpened": [1, "toggle-opened"],
+        "hideSummary": [4, "hide-summary"],
+        "expanded": [1028]
+    }, undefined, {
+        "toggleClosed": ["validateTitles"],
+        "toggleOpened": ["validateTitles"],
+        "expanded": ["handleExpanded"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-details", "mg-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-details":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgDetails$1);
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const MgDetails = MgDetails$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -8,8 +8,7 @@ import { d as defineCustomElement$1 } from './mg-icon2.js';
  * @param props - MgInputCheckboxList Interface Props
  * @returns input template
  */
-const MgInputCheckboxList = (props) => Array.isArray(props.checkboxes) &&
-    props.checkboxes.length > 0 && (h("ul", { class: "mg-c-input__input-group-container", role: "list", "aria-labelledby": props.labelledby, id: props.id }, props.checkboxes.map(input => {
+const MgInputCheckboxList = (props) => (h("ul", { class: "mg-c-input__input-group-container", role: "list", "aria-labelledby": props.labelledby, 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.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }),