@mgdis/mg-components 6.14.0 → 6.15.0

package/dist/components/mg-tabs2.js

@@ -0,0 +1,313 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as createID, C as ClassList, n as nextTick, a as isValideID, t as toString, i as isValidString, d as allItemsAreString } from './index2.js';
+import { K as Keys } from './events.utils.js';
+import { d as defineCustomElement$2 } from './mg-badge2.js';
+import { d as defineCustomElement$1 } from './mg-icon2.js';
+
+/**
+ * Available tabs items status
+ */
+const Status = {
+    VISIBLE: 'visible',
+    HIDDEN: 'hidden',
+    DISABLED: 'disabled',
+    ACTIVE: 'active',
+};
+/**
+ * List of all possibles sizes
+ */
+const sizes = ['medium', 'large'];
+
+const mgTabsCss = "/*!\n * @prop --mg-c-tabs-color: Defines tabs global color, used for bottom line and active tabs. Default value: `--mg-b-color-app`.\n * @prop --mg-c-tabs-color-text: Defines tabs text color. Unset by default, fallback on `--mg-b-color-dark`.\n */.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium{padding:var(--mg-b-size-12) var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium.mg-c-tabs__navigation-button--horizontal{padding-bottom:var(--mg-b-size-12)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium.mg-c-tabs__navigation-button--vertical{padding-left:var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large{padding:var(--mg-b-size-16) var(--mg-b-size-32)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=metadata]){font-size:var(--mg-b-font-size-h4)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--horizontal{padding-bottom:var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--vertical{padding-left:var(--mg-b-size-32)}.mg-c-tabs__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:var(--mg-c-tabs-color-text, var(--mg-b-color-dark));column-gap:var(--mg-c-tabs-navigation-button-column-gap, var(--mg-b-size-8));cursor:pointer;font-family:var(--mg-b-font-family);font-weight:400;line-height:var(--mg-b-line-height);text-decoration:none;white-space:nowrap}.mg-c-tabs__navigation-button:disabled,.mg-c-tabs__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-tabs__navigation-button:focus-visible{z-index:10}.mg-c-tabs__navigation-button:hover:not(.mg-c-tabs__navigation-button--disabled),.mg-c-tabs__navigation-button:focus-visible:not(.mg-c-tabs__navigation-button--disabled){background-color:color-mix(in srgb, var(--mg-c-tabs-color), transparent 90%)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active{color:var(--mg-c-tabs-color);font-weight:600}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--horizontal{box-shadow:inset 0 calc(-1*var(--mg-b-size-4)) var(--mg-c-tabs-color)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--vertical{box-shadow:inset var(--mg-b-size-4) 0 var(--mg-c-tabs-color)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--hidden{display:none}.mg-c-tabs__header{display:flex;flex-flow:row wrap;border-bottom:var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-c-tabs-color), transparent 90%)}.mg-c-tabs__content-container:focus-visible{outline:none}.mg-c-tabs__navigation-button-text{flex:0 0 content}";
+
+/**
+ * type TabItem validation function
+ * @param tab - tab item
+ * @returns tab item type is valid
+ */
+const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
+const MgTabs = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.activeTabChange = createEvent(this, "active-tab-change", 7);
+        /************
+         * Internal *
+         ************/
+        // classes
+        this.tabPanel = 'panel';
+        this.buttonTabBaseClass = 'mg-c-tabs__navigation-button';
+        this.startIndex = 1;
+        /**
+         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+         * If not set, it will be created.
+         */
+        this.identifier = createID('mg-tabs');
+        /**
+         * Define tabs size
+         */
+        this.size = 'medium';
+        /**
+         * Component tabs
+         */
+        this.tabs = [];
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-tabs']);
+        /**
+         * Validate that new tab status can be `Status.ACTIVE`
+         * @param tab - tab item
+         * @returns true when tab match condition to get a `Status.ACTIVE`
+         */
+        this.isActivableTab = (tab) => [undefined, Status.ACTIVE, Status.VISIBLE].includes(tab.status);
+        /**
+         * Method to know if given tab has the given status
+         * @param tab - item tab key to set to ACTIVE status
+         * @param status - status to valide
+         * @returns status comparaison
+         */
+        this.tabHasStatus = (tab, status) => tab.status === status;
+        /**
+         * Method to get element id from index
+         * @param element - to get id
+         * @param index - to generate id
+         * @returns generated element id
+         */
+        this.getElementId = (element, index) => `${element}-${this.getTabItemIndex(index)}`;
+        /**
+         * Method to get tab item index
+         * @param index - to get
+         * @returns index
+         */
+        this.getTabItemIndex = (index) => index + this.startIndex;
+        /**
+         * Handle click events on tabs
+         * @param event - mouse event
+         */
+        this.handleClick = (event) => {
+            const tabId = event.currentTarget.dataset.index;
+            if (!this.isActivableTab(this.tabs[Number(tabId) - this.startIndex])) {
+                event.preventDefault();
+            }
+            else {
+                this.activeTab = Number(tabId);
+                this.tabFocus = undefined;
+            }
+        };
+        /**
+         * get navigation button class from given status
+         * @param status - button tab status
+         * @returns button class/selector variant
+         */
+        this.getNavigationButtonClass = (status) => `${this.buttonTabBaseClass}--${status}`;
+        /**
+         * Handle keyboard event on tabs
+         * @param event - mouse event
+         */
+        this.handleKeydown = (event) => {
+            const parent = event.target.parentElement;
+            if ([Keys.ARROWLEFT, Keys.ARROWRIGHT].includes(event.key)) {
+                this.tabFocus = Number(event.target.dataset.index);
+                parent.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute('tabindex', '-1');
+                // Move right
+                if (event.key === Keys.ARROWRIGHT) {
+                    this.tabFocus++;
+                    // If we're at the end, go to the start
+                    if (this.tabFocus > this.tabs.length)
+                        this.tabFocus = this.startIndex;
+                    // Move left
+                }
+                else if (event.key === Keys.ARROWLEFT) {
+                    this.tabFocus--;
+                    // If we're at the start, move to the end
+                    if (this.tabFocus < this.startIndex)
+                        this.tabFocus = this.tabs.length;
+                }
+                const parentButtonElement = parent.querySelector(`[data-index="${this.tabFocus}"]`);
+                // if focus item is ['hidden'] we recursively repeat action
+                if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {
+                    parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));
+                    // else run focus methods on tabFocus element
+                }
+                else {
+                    parentButtonElement.setAttribute('tabindex', '0');
+                    parentButtonElement.focus();
+                }
+            }
+            else if (event.key === Keys.TAB) {
+                this.resetFocus();
+            }
+        };
+        /**
+         * Reset focus on document click
+         * @param event - mouse event
+         */
+        this.handleDocumentClick = (event) => {
+            if (event.target.closest('mg-tabs') !== this.element)
+                this.resetFocus();
+        };
+        /**
+         * Method to reset focus behavior
+         */
+        this.resetFocus = () => {
+            // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
+            nextTick(() => {
+                this.tabFocus = undefined;
+                Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
+                    tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
+                });
+            });
+        };
+        /**
+         * Validate slots setting
+         */
+        this.validateSlots = () => {
+            const slots = Array.from(this.element.children).filter(slot => { var _a; return (_a = slot.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.includes('tab_content-'); });
+            if (slots.length !== this.tabs.length)
+                throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
+        };
+    }
+    watchIdentifier(newValue) {
+        if (!isValideID(newValue)) {
+            console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
+        }
+    }
+    validateLabel(newValue) {
+        if (!isValidString(newValue)) {
+            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${toString(newValue)}.`);
+        }
+    }
+    validateSize(newValue) {
+        if (!sizes.includes(newValue)) {
+            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);
+        }
+        this.classCollection.add(`mg-c-tabs--size-${this.size}`);
+    }
+    validateItems(newValue) {
+        // String array
+        if (allItemsAreString(newValue))
+            this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
+        // Object array
+        else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
+            this.tabs = newValue;
+        else
+            throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${toString(newValue)}.`);
+    }
+    validateActiveTab(newValue) {
+        // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
+        // after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update
+        if (newValue === undefined) {
+            this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))
+                ? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))
+                : this.startIndex;
+        }
+        else if (typeof newValue === 'number' && newValue >= this.startIndex && newValue <= this.tabs.length && this.isActivableTab(this.tabs[newValue - this.startIndex])) {
+            // if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE
+            this.tabs.forEach((tab, index) => {
+                const isNewActiveTab = index === newValue - this.startIndex;
+                // reset active tabs
+                if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab)
+                    tab.status = Status.VISIBLE;
+                // set active tab from given tab key
+                else if (this.isActivableTab(tab) && isNewActiveTab)
+                    tab.status = Status.ACTIVE;
+            });
+            // emit change active tab key event
+            this.activeTabChange.emit(newValue);
+        }
+        else {
+            throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${toString(newValue)}.`);
+        }
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad() {
+        // Check tabs format
+        this.watchIdentifier(this.identifier);
+        this.validateLabel(this.label);
+        this.validateItems(this.items);
+        this.validateActiveTab(this.activeTab);
+        this.validateSize(this.size);
+        this.validateSlots();
+    }
+    /**
+     * add listners
+     */
+    componentDidLoad() {
+        document.addEventListener('click', this.handleDocumentClick, false);
+    }
+    /**
+     * remove listeners
+     */
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this.handleDocumentClick);
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h("div", { key: '97f18baca4ae45b85401fd38570fe16d8df46c2b', class: this.classCollection.join() }, h("header", { key: '46cffaf2e14dde2a4994e894358caee7553b3bd6', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
+                [`${this.buttonTabBaseClass}`]: true,
+                [`${this.buttonTabBaseClass}--horizontal`]: true,
+                [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
+                [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),
+                [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),
+            }, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' }))))), this.tabs.map((tab, index) => (h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-c-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "identifier": ["watchIdentifier"],
+        "label": ["validateLabel"],
+        "size": ["validateSize"],
+        "items": ["validateItems"],
+        "activeTab": ["validateActiveTab"]
+    }; }
+    static get style() { return mgTabsCss; }
+}, [257, "mg-tabs", {
+        "identifier": [1],
+        "label": [1],
+        "size": [1],
+        "items": [16],
+        "activeTab": [1538, "active-tab"],
+        "tabs": [32],
+        "classCollection": [32]
+    }, undefined, {
+        "identifier": ["watchIdentifier"],
+        "label": ["validateLabel"],
+        "size": ["validateSize"],
+        "items": ["validateItems"],
+        "activeTab": ["validateActiveTab"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-tabs", "mg-badge", "mg-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-tabs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgTabs);
+            }
+            break;
+        case "mg-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { MgTabs as M, Status as S, defineCustomElement as d };

package/dist/components/mg-tag.js

@@ -100,7 +100,7 @@ const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement
         "soft": ["validateSoft"]
     }; }
     static get style() { return mgTagCss; }
-}, [1, "mg-tag", {
+}, [257, "mg-tag", {
         "variant": [1],
         "outline": [4],
         "soft": [4],

package/dist/components/mg-tooltip-content2.js

@@ -19,7 +19,7 @@ const MgTooltipContent = /*@__PURE__*/ proxyCustomElement(class MgTooltipContent
         return (h(Host, { key: '2221de3ca0ef7c9d6e46e24b19c69007fababf81', role: "tooltip" }, h("span", { key: '9e14f7f5b3f5e5060ed9f42e8d7259b17575168e', innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { key: 'bc083567d77e8f4ffccee98b96036ba8ac494fb6', name: "arrow" })));
     }
     static get style() { return mgTooltipContentCss; }
-}, [1, "mg-tooltip-content", {
+}, [257, "mg-tooltip-content", {
         "message": [1]
     }]);
 function defineCustomElement() {

package/dist/components/mg-tooltip2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createID, n as nextTick, a as isValideID, t as toString, i as isValidString, g as getWindows, m as focusableElements } from './index2.js';
+import { c as createID, n as nextTick, a as isValideID, t as toString, i as isValidString, g as getWindows, l as focusableElements } from './index2.js';
 import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
 import { c as createPopper } from './popper.js';
 
@@ -384,7 +384,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
         "disabled": ["watchDisabled"]
     }; }
     static get style() { return mgTooltipCss; }
-}, [1, "mg-tooltip", {
+}, [257, "mg-tooltip", {
         "identifier": [1],
         "message": [1],
         "placement": [1],

package/dist/esm/{index-Bv7NHR-W.js → index-CKB-AnCZ.js}

@@ -1,8 +1,10 @@
 const errors$1 = {
-	required: "This field is required."
+	required: "This field is required.",
+	noValue: "No value."
 };
 const nbCharLeft$1 = "{counter} characters left.";
 const input$1 = {
+	showMore: "Show more",
 	select: {
 		placeholder: "Select a value"
 	},
@@ -12,23 +14,29 @@ const input$1 = {
 		editButton: "Edit",
 		selectButton: "Select values",
 		showButton: "Show",
-		label: "Enter a value",
-		result: "result",
-		results: "results",
-		searchResults: "Search result(s) list.",
-		noResult: "No result.",
 		sections: {
+			label: "Values grouped by: \"Selected\" or \"Available\"",
+			badge: {
+				label: "value(s)"
+			},
+			search: {
+				label: "Enter a value",
+				values: "{count} value(s) found",
+				noValue: "No values found"
+			},
 			selected: {
 				title: "Selected",
-				titlePlural: "Selected",
 				action: "Unselect all",
-				tooltip: "Unselect all current search results"
+				tooltip: "Unselect all current values",
+				values: "{count} value(s) selected",
+				noValue: "No value selected"
 			},
 			notSelected: {
-				title: "Not selected",
-				titlePlural: "Not selected",
+				title: "Available",
 				action: "Select all",
-				tooltip: "Select all current search results"
+				tooltip: "Select all current values",
+				values: "{count} value(s) available",
+				noValue: "All values are selected"
 			}
 		}
 	},
@@ -60,9 +68,8 @@ const input$1 = {
 		hide: "Hide password value"
 	},
 	combobox: {
-		notFound: "No elements match your input",
-		notAvailable: "No elements available",
-		loadMore: "Load more",
+		notFound: "No value matches your input",
+		notAvailable: "No value available",
 		search: "Search…"
 	},
 	text: {
@@ -130,6 +137,10 @@ 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,
@@ -145,14 +156,17 @@ var en = {
 	itemMore: itemMore$1,
 	actionMore: actionMore$1,
 	loader: loader$1,
-	table: table$1
+	table: table$1,
+	details: details$1
 };
 
 const errors = {
-	required: "Ce champ est obligatoire."
+	required: "Ce champ est obligatoire.",
+	noValue: "Aucune valeur."
 };
 const nbCharLeft = "{counter} caractères disponibles.";
 const input = {
+	showMore: "Afficher plus",
 	select: {
 		placeholder: "Sélectionnez une valeur"
 	},
@@ -162,23 +176,29 @@ const input = {
 		editButton: "Modifier",
 		selectButton: "Sélectionner des valeurs",
 		showButton: "Voir",
-		label: "Saisissez une valeur",
-		result: "résultat",
-		results: "résultats",
-		searchResults: "Liste de résultat(s) de la recherche.",
-		noResult: "Aucun résultat.",
 		sections: {
+			label: "Valeurs regroupées par: \"Sélectionnées\" ou \"Disponibles\"",
+			badge: {
+				label: "valeur(s)"
+			},
+			search: {
+				label: "Saisissez une valeur",
+				values: "{count} résultat(s)",
+				noValue: "Aucune valeur n'a été trouvée."
+			},
 			selected: {
-				title: "Sélectionné",
-				titlePlural: "Sélectionnés",
+				title: "Sélectionnées",
 				action: "Tout désélectionner",
-				tooltip: "Désélectionne tous les résultats de la recherche en cours"
+				tooltip: "Désélectionne toutes les valeurs de la section",
+				values: "{count} valeur(s) sélectionnée(s)",
+				noValue: "Aucune valeur sélectionnée"
 			},
 			notSelected: {
-				title: "Non sélectionné",
-				titlePlural: "Non sélectionnés",
+				title: "Disponibles",
 				action: "Tout sélectionner",
-				tooltip: "Sélectionne tous les résultats de la recherche en cours"
+				tooltip: "Sélectionne toutes les valeurs de la section",
+				values: "{count} valeur(s) disponible(s)",
+				noValue: "Toutes les valeurs sont sélectionnées"
 			}
 		}
 	},
@@ -210,9 +230,8 @@ const input = {
 		hide: "Masquer le mot de passe"
 	},
 	combobox: {
-		notFound: "Aucun élément ne correspondont a votre saisie",
-		notAvailable: "Aucun élément disponible",
-		loadMore: "Afficher plus",
+		notFound: "Aucune valeur ne correspondont à votre saisie",
+		notAvailable: "Aucune valeur disponible",
 		search: "Recherche…"
 	},
 	text: {
@@ -280,6 +299,10 @@ 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,
@@ -295,7 +318,8 @@ var fr = {
 	itemMore: itemMore,
 	actionMore: actionMore,
 	loader: loader,
-	table: table
+	table: table,
+	details: details
 };
 
 /**

package/dist/esm/{index-Degtjvph.js → index-DhAOnZJn.js}

@@ -5,7 +5,7 @@ const globalScripts = () => {};
 const globalStyles = ":root{--mg-b-size-4:0.4rem;--mg-b-size-8:0.8rem;--mg-b-size-12:1.2rem;--mg-b-size-16:1.6rem;--mg-b-size-20:2rem;--mg-b-size-24:2.4rem;--mg-b-size-32:3.2rem;--mg-b-size-40:4rem;--mg-b-size-48:4.8rem;--mg-b-size-56:5.6rem;--mg-b-size-64:6.4rem;--mg-b-size-72:7.2rem;--mg-b-size-120:12rem;--mg-b-size-border:0.1rem;--mg-b-size-radius:var(--mg-b-size-4);--mg-b-size-floating-element-max-width:40rem;--mg-b-size-min-height:3.5rem;--mg-b-spacing-actions:var(--mg-b-size-8);--mg-b-color-blue-10:rgb(227, 244, 255);--mg-b-color-blue-20:rgb(209, 237, 255);--mg-b-color-blue-30:rgb(166, 219, 255);--mg-b-color-blue-40:rgb(106, 195, 255);--mg-b-color-blue-50:rgb(64, 179, 255);--mg-b-color-blue-60:rgb(22, 162, 255);--mg-b-color-blue-70:rgb(0, 132, 220);--mg-b-color-blue-80:rgb(0, 94, 156);--mg-b-color-blue-90:rgb(0, 67, 111);--mg-b-color-blue-100:rgb(0, 39, 66);--mg-b-color-green-10:rgb(234, 251, 244);--mg-b-color-green-20:rgb(212, 247, 234);--mg-b-color-green-30:rgb(181, 240, 219);--mg-b-color-green-40:rgb(144, 232, 202);--mg-b-color-green-50:rgb(97, 223, 179);--mg-b-color-green-60:rgb(50, 213, 156);--mg-b-color-green-70:rgb(46, 194, 142);--mg-b-color-green-80:rgb(36, 151, 111);--mg-b-color-green-90:rgb(21, 89, 66);--mg-b-color-green-100:rgb(13, 54, 40);--mg-b-color-red-10:rgb(251, 233, 234);--mg-b-color-red-20:rgb(248, 216, 217);--mg-b-color-red-30:rgb(242, 174, 178);--mg-b-color-red-40:rgb(236, 134, 139);--mg-b-color-red-50:rgb(229, 96, 103);--mg-b-color-red-60:rgb(221, 42, 52);--mg-b-color-red-70:rgb(219, 31, 41);--mg-b-color-red-80:rgb(152, 21, 28);--mg-b-color-red-90:rgb(120, 17, 23);--mg-b-color-red-100:rgb(92, 13, 13);--mg-b-color-yellow-10:rgb(255, 247, 230);--mg-b-color-yellow-20:rgb(255, 240, 207);--mg-b-color-yellow-30:rgb(255, 226, 162);--mg-b-color-yellow-40:rgb(255, 212, 118);--mg-b-color-yellow-50:rgb(255, 195, 62);--mg-b-color-yellow-60:rgb(232, 177, 56);--mg-b-color-yellow-70:rgb(181, 138, 44);--mg-b-color-yellow-80:rgb(140, 107, 34);--mg-b-color-yellow-90:rgb(86, 66, 21);--mg-b-color-yellow-100:rgb(53, 41, 13);--mg-b-color-neutral-0:rgb(255, 255, 255);--mg-b-color-neutral-10:rgb(250, 251, 251);--mg-b-color-neutral-20:rgb(236, 238, 238);--mg-b-color-neutral-30:rgb(225, 227, 228);--mg-b-color-neutral-40:rgb(197, 201, 203);--mg-b-color-neutral-50:rgb(182, 188, 190);--mg-b-color-neutral-60:rgb(157, 165, 167);--mg-b-color-neutral-70:rgb(129, 139, 142);--mg-b-color-neutral-80:rgb(101, 113, 117);--mg-b-color-neutral-90:rgb(75, 89, 94);--mg-b-color-neutral-100:rgb(47, 64, 69);--mg-b-color-neutral-110:rgb(21, 40, 46);--mg-b-color-neutral-120:rgb(5, 9, 11);--mg-b-color-dark:var(--mg-b-color-neutral-110);--mg-b-color-light:var(--mg-b-color-neutral-0);--mg-b-color-danger:var(--mg-b-color-red-70);--mg-b-color-text-on-danger:var(--mg-b-color-light);--mg-b-color-info:var(--mg-b-color-blue-80);--mg-b-color-text-on-info:var(--mg-b-color-light);--mg-b-color-success:var(--mg-b-color-green-60);--mg-b-color-text-on-success:var(--mg-b-color-dark);--mg-b-color-warning:var(--mg-b-color-yellow-50);--mg-b-color-text-on-warning:var(--mg-b-color-dark);--mg-b-color-app:var(--mg-b-color-blue-80);--mg-b-color-primary:var(--mg-b-color-neutral-110);--mg-b-color-text-on-primary:var(--mg-b-color-light);--mg-b-color-secondary:var(--mg-b-color-neutral-10);--mg-b-color-text-on-secondary:var(--mg-b-color-dark);--mg-b-font-size:1.3rem;--mg-b-font-size-small:1.17rem;--mg-b-font-size-h1:calc(var(--mg-b-font-size) * 1.85);--mg-b-font-size-h2:calc(var(--mg-b-font-size) * 1.65);--mg-b-font-size-h3:calc(var(--mg-b-font-size) * 1.35);--mg-b-font-size-h4:calc(var(--mg-b-font-size) * 1.2);--mg-b-font-size-h5:calc(var(--mg-b-font-size) * 1.1);--mg-b-font-size-h6:calc(var(--mg-b-font-size) * 0.8);--mg-b-small-font-size:0.9em;--mg-b-font-family:\"Open Sans\", sans-serif;--mg-b-font-family-heading:var(--mg-b-font-family);--mg-b-line-height:1.4;--mg-b-box-shadow:0 0.3rem 0.8rem 0 color-mix(in srgb, var(--mg-b-color-dark), transparent 85%);--mg-b-opacity-element-disabled:0.4}:root{--mg-c-badge-size:var(--mg-b-size-16);--mg-c-badge-font-size:var(--mg-b-font-size-small);--mg-c-button-border-radius:var(--mg-b-size-radius);--mg-c-button-icon-border-radius:var(--mg-b-size-min-height);--mg-c-button-color-background-danger:var(--mg-b-color-danger);--mg-c-button-color-border-danger:var(--mg-b-color-red-80);--mg-c-button-color-gradient-danger:var(--mg-b-color-red-80);--mg-c-button-color-text-danger:var(--mg-b-color-text-on-danger);--mg-c-button-color-background-info:var(--mg-b-color-info);--mg-c-button-color-border-info:var(--mg-b-color-blue-90);--mg-c-button-color-gradient-info:var(--mg-b-color-blue-90);--mg-c-button-color-text-info:var(--mg-b-color-text-on-info);--mg-c-button-color-background-success:var(--mg-b-color-success);--mg-c-button-color-border-success:var(--mg-b-color-green-70);--mg-c-button-color-gradient-success:var(--mg-b-color-green-70);--mg-c-button-color-text-success:var(--mg-b-color-text-on-success);--mg-c-button-color-background-warning:var(--mg-b-color-warning);--mg-c-button-color-border-warning:var(--mg-b-color-yellow-60);--mg-c-button-color-gradient-warning:var(--mg-b-color-yellow-60);--mg-c-button-color-text-warning:var(--mg-b-color-text-on-warning);--mg-c-button-color-background-primary:var(--mg-b-color-primary);--mg-c-button-color-border-primary:var(--mg-b-color-neutral-120);--mg-c-button-color-gradient-primary:var(--mg-b-color-neutral-120);--mg-c-button-color-text-primary:var(--mg-b-color-text-on-primary);--mg-c-button-color-background-secondary:var(--mg-b-color-secondary);--mg-c-button-color-border-secondary:var(--mg-b-color-neutral-20);--mg-c-button-color-gradient-secondary:var(--mg-b-color-neutral-20);--mg-c-button-color-text-secondary:var(--mg-b-color-text-on-secondary);--mg-c-button-color-background-danger-alt:var(--mg-b-color-neutral-10);--mg-c-button-color-border-danger-alt:var(--mg-b-color-neutral-20);--mg-c-button-color-gradient-danger-alt:var(--mg-b-color-neutral-20);--mg-c-button-color-text-danger-alt:var(--mg-b-color-danger);--mg-c-card-spacing-default:var(--mg-b-size-16);--mg-c-card-border-radius-default:var(--mg-b-size-12);--mg-c-card-color-background-default:var(--mg-b-color-light);--mg-c-card-border-default:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);--mg-c-card-box-shadow-default:var(--mg-b-box-shadow);--mg-c-divider-color-background:color-mix(in srgb, var(--mg-b-color-dark), transparent 85%);--mg-c-divider-thickness:var(--mg-b-size-border);--mg-c-divider-spacing-vertical:var(--mg-b-size-40);--mg-c-icon-border-radius:50%;--mg-c-tag-height:var(--mg-b-size-24);--mg-c-tag-border-radius:var(--mg-b-size-radius);--mg-c-tag-font-size:var(--mg-b-font-size-small);--mg-c-tooltip-border-radius:var(--mg-b-size-radius);--mg-c-tooltip-color-background:var(--mg-b-color-dark);--mg-c-tooltip-color-text:var(--mg-b-color-light);--mg-c-details-spacing:var(--mg-b-size-8);--mg-c-illustrated-message-spacing-vertical:var(--mg-b-size-40);--mg-c-input-border-width:var(--mg-b-size-border);--mg-c-input-border-radius:var(--mg-b-size-radius);--mg-c-input-color-border:rgb(181 194 201);--mg-c-input-placeholder-color-text:rgb(181 194 201);--mg-c-input-color-icon:rgb(181 194 201);--mg-c-input-color-box-shadow-focus:rgb(0 221 255 / 50%);--mg-c-input-error-color-background:color-mix(in srgb, var(--mg-b-color-danger), white 95%);--mg-c-input-toggle-border-radius-ratio:2;--mg-c-input-check-size:var(--mg-b-size-16);--mg-c-menu-item-color:var(--mg-b-color-app);--mg-c-message-border-radius:var(--mg-b-size-radius);--mg-c-modal-border-radius:var(--mg-b-size-radius);--mg-c-modal-title-font-size:var(--mg-b-font-size-h3);--mg-c-panel-border-radius:var(--mg-b-size-radius);--mg-c-panel-box-shadow:var(--mg-b-box-shadow);--mg-c-panel-content-spacing:var(--mg-b-size-16);--mg-c-popover-color-background:var(--mg-b-color-light);--mg-c-popover-color-text:var(--mg-b-color-dark);--mg-c-popover-title-font-size:var(--mg-b-font-size-h5);--mg-c-popover-max-width:var(--mg-b-size-floating-element-max-width);--mg-c-progress-size:var(--mg-b-size-8);--mg-c-progress-border-color:var(--mg-b-color-neutral-80);--mg-c-progress-bar-color-background:var(--mg-b-color-neutral-30);--mg-c-progress-fill-color-background:var(--mg-b-color-app);--mg-c-tabs-color:var(--mg-b-color-app)}html{font-size:62.5%}body{font-family:var(--mg-b-font-family);font-size:var(--mg-b-font-size);-webkit-font-smoothing:antialiased;line-height:var(--mg-b-line-height)}:root{--mg-b-font-family:system-ui, sans-serif}";
 
 /*
- Stencil Client Platform v4.36.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.36.2 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -626,6 +626,12 @@ createSupportsRuleRe("::slotted");
 createSupportsRuleRe(":host");
 createSupportsRuleRe(":host-context");
 var parsePropertyValue = (propValue, propType, isFormAssociated) => {
+  if (typeof propValue === "string" && (propType & 16 /* Unknown */ || propType & 8 /* Any */) && (propValue.startsWith("{") && propValue.endsWith("}") || propValue.startsWith("[") && propValue.endsWith("]"))) {
+    try {
+      return JSON.parse(propValue);
+    } catch (e) {
+    }
+  }
   if (propValue != null && !isComplexType(propValue)) {
     if (propType & 4 /* Boolean */) {
       {

package/dist/esm/{index-Dr7GYvIz.js → index-WtiuOkLj.js}

@@ -65,10 +65,10 @@ const getObjectValueFromKey = (object, path, defaultValue) => {
     }
     const [current, ...next] = path.split(separator);
     if (next.length) {
-        return getObjectValueFromKey(object[current], next.join(separator));
+        return getObjectValueFromKey(object[current], next.join(separator), defaultValue);
     }
     else {
-        return object[current];
+        return object[current] ?? defaultValue;
     }
 };