@mgdis/mg-components 6.7.0 → 6.8.0

package/dist/components/mg-table.js

@@ -0,0 +1,320 @@
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { Z as Ze, V as Ve, m as me, G as Ge } from './index.es.js';
+import { i as initLocales } from './index2.js';
+import { d as defineCustomElement$2 } from './mg-icon2.js';
+
+/**
+ * Sizes
+ */
+// Define possible sizes
+const sizes = ['small', 'medium', 'large', 'xlarge'];
+/**
+ * Columns
+ */
+// Define possible text alignments
+const textAlignments = ['left', 'center', 'right'];
+// Define possible data types
+const dataTypes = ['string', 'numeric', 'date'];
+
+const mgTableCss = ".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}}@font-face{font-family:\"Open Sans\";src:url(\"fonts/OpenSans-Regular.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:600;src:url(\"fonts/OpenSans-SemiBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:700;src:url(\"fonts/OpenSans-Bold.ttf\") format(\"truetype\")}p{margin:0}p+p{margin-top:var(--mg-b-size-8)}h1,.mg-u-h1{font-family:var(--mg-b-font-family-heading);font-weight:bold}h2,.mg-u-h2{font-family:var(--mg-b-font-family-heading);font-weight:bold}h3,.mg-u-h3{font-family:var(--mg-b-font-family-heading);font-weight:bold}h4,.mg-u-h4{font-family:var(--mg-b-font-family-heading);font-weight:bold}h5,.mg-u-h5{font-family:var(--mg-b-font-family-heading);font-weight:bold}h6,.mg-u-h6{font-family:var(--mg-b-font-family-heading);font-weight:bold}h1,.mg-u-h1{font-size:var(--mg-b-font-size-h1)}h2,.mg-u-h2{font-size:var(--mg-b-font-size-h2)}h3,.mg-u-h3{font-size:var(--mg-b-font-size-h3)}h4,.mg-u-h4{font-size:var(--mg-b-font-size-h4)}h5,.mg-u-h5{font-size:var(--mg-b-font-size-h5)}h6,.mg-u-h6{font-size:var(--mg-b-font-size-h6)}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}small{font-size:var(--mg-b-small-font-size)}.mg-u-text-left{text-align:left !important}.mg-u-text-center{text-align:center !important}.mg-u-text-right{text-align:right !important}.mg-c-table{--mg-c-table-cell-spacing:var(--mg-b-size-8) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-40);--mg-c-table-header-cell-height:calc(var(--mg-b-size-min-height) + 2 * var(--mg-b-size-8));overflow:hidden;border:none;border-radius:var(--mg-b-size-8);background:var(--mg-b-color-light);border-collapse:separate;border-spacing:0;color:var(--mg-b-color-dark)}.mg-c-table td,.mg-c-table th{height:var(--mg-c-table-cell-height);box-sizing:border-box;padding:var(--mg-c-table-cell-spacing);text-align:start}.mg-c-table thead td,.mg-c-table th{font-weight:600}.mg-c-table thead{height:var(--mg-c-table-header-cell-height);background-color:var(--mg-b-color-app);color:var(--mg-b-color-light)}.mg-c-table :not(thead) tr:nth-child(even){background:color-mix(in srgb, var(--mg-b-color-app), transparent 80%)}.mg-c-table.mg-c-table--size-small{--mg-c-table-cell-spacing:var(--mg-b-size-4) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-32);--mg-c-table-header-cell-height:var(--mg-b-size-32)}.mg-c-table.mg-c-table--size-large{--mg-c-table-cell-height:var(--mg-c-table-header-cell-height)}.mg-c-table.mg-c-table--size-xlarge{--mg-c-table-cell-spacing:var(--mg-b-size-12) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-64);--mg-c-table-header-cell-height:var(--mg-b-size-64)}.mg-c-table.mg-c-table--full-width{width:100%}.mg-c-table-wrapper{overflow:auto}.mg-c-table thead td,.mg-c-table thead th{position:relative}.mg-c-table thead td .mg-c-table__sort-button,.mg-c-table thead th .mg-c-table__sort-button{padding:0;border:none;margin:0;background:none;color:inherit;font-size:inherit;font-weight:600}.mg-c-table thead td .mg-c-table__sort-button::after,.mg-c-table thead th .mg-c-table__sort-button::after{position:absolute;content:\"\";inset:0}.mg-c-table thead td .mg-c-table__sort-button:hover,.mg-c-table thead th .mg-c-table__sort-button:hover{cursor:pointer}.mg-c-table thead td .mg-c-table__sort-button mg-icon,.mg-c-table thead th .mg-c-table__sort-button mg-icon{margin-left:var(--mg-b-size-4)}.mg-c-table thead td:has(.mg-c-table__sort-button):hover,.mg-c-table thead td[aria-sort=descending],.mg-c-table thead td[aria-sort=ascending],.mg-c-table thead th:has(.mg-c-table__sort-button):hover,.mg-c-table thead th[aria-sort=descending],.mg-c-table thead th[aria-sort=ascending]{background-color:color-mix(in srgb, var(--mg-b-color-app), black 10%)}";
+const MgTableStyle0 = mgTableCss;
+
+/**
+ * Check if value is a valid align object
+ * @param newValue - New value
+ * @returns True if value is a valid align object
+ */
+const isValidColumnsObject = (newValue) => 
+// ensure newValue is an object
+typeof newValue === 'object' &&
+    !Array.isArray(newValue) &&
+    // Ensure every property is well formatted
+    Object.entries(newValue).every(([key, value]) => 
+    // ensure key is a number
+    !isNaN(parseInt(key)) &&
+        // ensure value is an object
+        typeof value === 'object' &&
+        !Array.isArray(value) &&
+        // ensure value has at least one of the following properties
+        ((value.align !== undefined && textAlignments.includes(value.align)) ||
+            (value.sortable !== undefined && typeof value.sortable === 'boolean') ||
+            (value.datatype !== undefined && dataTypes.includes(value.datatype))) &&
+        // ensure no extra properties are present
+        Object.keys(value).every(key => ['align', 'sortable', 'datatype'].includes(key)));
+/**
+ * Compare values
+ * @param firstValue - First value
+ * @param secondValue - Second value
+ * @param descending - Define descending order
+ * @param datatype - Data type
+ * @returns Comparison result
+ * @example
+ * compareValues('a', 'b', false, 'string'); // -1
+ */
+const compareValues = (firstValue, secondValue, descending, datatype) => {
+    if (descending) {
+        const temp = firstValue;
+        firstValue = secondValue;
+        secondValue = temp;
+    }
+    if (datatype === 'date') {
+        return new Date(firstValue).getTime() - new Date(secondValue).getTime();
+    }
+    return firstValue.localeCompare(secondValue, undefined, { numeric: datatype === 'numeric' });
+};
+const MgTable$1 = /*@__PURE__*/ proxyCustomElement(class MgTable extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        // Classes
+        this.componentClass = 'mg-c-table';
+        this.componentWrapperClass = 'mg-c-table-wrapper';
+        this.classFullWidth = 'mg-c-table--full-width';
+        // Alignment stylesheet
+        this.alignmentStylesheet = new CSSStyleSheet();
+        /**
+         * Define table size
+         */
+        this.size = 'medium';
+        /**
+         * Define if table fits its parent element
+         */
+        this.fullWidth = false;
+        /**
+         * Class collection
+         */
+        this.classCollection = new Ze([this.componentClass]);
+    }
+    watchSize(newValue, oldValue) {
+        if (!sizes.includes(newValue)) {
+            throw new Error(`<mg-table> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Ve(newValue)}.`);
+        }
+        else {
+            if (oldValue !== undefined) {
+                this.classCollection.delete(`mg-c-table--size-${oldValue}`);
+            }
+            this.classCollection.add(`mg-c-table--size-${newValue}`);
+        }
+    }
+    watchFullWidth(newValue) {
+        if (newValue) {
+            this.classCollection.add(this.classFullWidth);
+        }
+        else {
+            this.classCollection.delete(this.classFullWidth);
+        }
+    }
+    watchColumns(newValue) {
+        if (newValue !== undefined && !isValidColumnsObject(newValue)) {
+            throw new Error(`<mg-table> prop "columns" must be a ColumnsType object. Passed value: ${Ve(newValue)}.`);
+        }
+    }
+    /**
+     * Render Table
+     * @param table - Table element
+     */
+    renderTable(table) {
+        let isSortable = false;
+        // Remove table classes
+        table.className = '';
+        // Add table classes
+        table.classList.add(...this.classCollection.classes);
+        // Set columns based on columns prop
+        if (this.columns !== undefined) {
+            // Store original rows
+            const rowsDefault = Array.from(table.querySelectorAll('tbody tr'));
+            // Apply columns settings
+            Object.entries(this.columns).forEach(([key, value]) => {
+                // Add alignment to stylesheet
+                if (value.align !== undefined) {
+                    this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:${value.align}}}`);
+                }
+                // if align is not defined and datatype is number, align right
+                else if (value.datatype === 'numeric') {
+                    this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:right}}`);
+                }
+                // Define if column is sortable
+                if (value.sortable) {
+                    isSortable = true;
+                    // Add sortable class to table header
+                    const sortableHeader = table.querySelector(`thead td:nth-child(${key}),thead th:nth-child(${key})`);
+                    // Create button
+                    const button = document.createElement('button');
+                    button.classList.add('mg-c-table__sort-button');
+                    // Append button to header
+                    const sortableHeaderContent = sortableHeader.innerHTML;
+                    sortableHeader.innerHTML = '';
+                    button.innerHTML = sortableHeaderContent;
+                    // Set icon
+                    const icon = document.createElement('mg-icon');
+                    icon.setAttribute('icon', 'arrows-up-down');
+                    // Append icon to button
+                    button.append(icon);
+                    sortableHeader.append(button);
+                    // Add event listener
+                    button.addEventListener('click', () => {
+                        // Reset aria pressed
+                        table.querySelectorAll(`thead td:not(:nth-child(${key})) [aria-pressed],thead th:not(:nth-child(${key})) [aria-pressed]`).forEach(ariaPressed => {
+                            ariaPressed.removeAttribute('aria-pressed');
+                            ariaPressed.querySelector('mg-icon').setAttribute('icon', 'arrows-up-down');
+                        });
+                        // Reset aria sort
+                        table.querySelectorAll(`thead td:not(:nth-child(${key}))[aria-sort],thead th:not(:nth-child(${key}))[aria-sort]`).forEach(ariaSort => {
+                            ariaSort.removeAttribute('aria-sort');
+                        });
+                        // Set aria pressed
+                        button.setAttribute('aria-pressed', 'true');
+                        // Manage sort order
+                        // Get sort order
+                        let sortOrder = sortableHeader.getAttribute('aria-sort');
+                        // First click sort asc
+                        if ([null, 'none'].includes(sortOrder)) {
+                            sortableHeader.setAttribute('aria-sort', 'ascending');
+                        }
+                        // Second click sort desc
+                        else if (sortOrder === 'ascending') {
+                            sortableHeader.setAttribute('aria-sort', 'descending');
+                        }
+                        // Third click remove sort
+                        else {
+                            sortableHeader.setAttribute('aria-sort', 'none');
+                        }
+                        // Update sort order
+                        sortOrder = sortableHeader.getAttribute('aria-sort');
+                        // Update button icon
+                        const icon = button.querySelector('mg-icon');
+                        let iconType = 'arrows-up-down';
+                        if (sortOrder === 'ascending') {
+                            iconType = 'arrow-up';
+                        }
+                        else if (sortOrder === 'descending') {
+                            iconType = 'arrow-down';
+                        }
+                        icon.setAttribute('icon', iconType);
+                        // If sort order is none, return to original order
+                        if (sortOrder === 'none') {
+                            // Append rows to table
+                            rowsDefault.forEach(row => table.querySelector('tbody').append(row));
+                            return;
+                        }
+                        // Set a copy of rows
+                        const rows = Array.from(table.querySelectorAll('tbody tr'));
+                        // Sort rows
+                        rows.sort((a, b) => {
+                            var _a, _b;
+                            // Get cells
+                            const cellA = a.querySelector(`td:nth-child(${key}),th:nth-child(${key})`);
+                            const cellB = b.querySelector(`td:nth-child(${key}),th:nth-child(${key})`);
+                            // Get cell values
+                            const cellValueA = (_a = cellA.dataset.sort) !== null && _a !== void 0 ? _a : cellA.textContent;
+                            const cellValueB = (_b = cellB.dataset.sort) !== null && _b !== void 0 ? _b : cellB.textContent;
+                            // Sort cells based on sort order
+                            return compareValues(cellValueA, cellValueB, sortOrder === 'descending', value.datatype);
+                        });
+                        // Append rows to table
+                        rows.forEach(row => table.querySelector('tbody').append(row));
+                    });
+                }
+            });
+        }
+        // Add alignment to columns
+        this.element.shadowRoot.adoptedStyleSheets = [...this.element.shadowRoot.adoptedStyleSheets, this.alignmentStylesheet];
+        // Create div wrapper for responsive behavior
+        const divWrapper = document.createElement('div');
+        divWrapper.setAttribute('class', this.componentWrapperClass);
+        divWrapper.setAttribute('tabindex', '0');
+        divWrapper.setAttribute('role', 'region');
+        // Get table title
+        let captionTable = table.querySelector('caption');
+        // If table is sortable we must add a caption
+        if (captionTable === null && isSortable) {
+            captionTable = document.createElement('caption');
+            table.prepend(captionTable);
+        }
+        if (captionTable !== null) {
+            // Ensure caption is not visible (otherwhise the table does not have rounded corners)
+            captionTable.className = 'mg-u-visually-hidden';
+            // Link caption to div
+            if (!me(captionTable.id)) {
+                captionTable.setAttribute('id', Ge(`${this.componentClass}-caption`));
+            }
+            divWrapper.setAttribute('aria-labelledby', captionTable.id);
+            // Add sortable caption if neeeded
+            if (isSortable) {
+                captionTable.innerHTML = `${captionTable.innerHTML} ${this.messages.table.sortableCaption}`.trim();
+            }
+        }
+        divWrapper.append(table);
+        // Remove existing table from shadow root
+        const existingTable = this.element.shadowRoot.querySelector(`.${this.componentWrapperClass}`);
+        if (existingTable !== null) {
+            existingTable.remove();
+        }
+        // Append table
+        this.element.shadowRoot.append(divWrapper);
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    componentWillLoad() {
+        this.messages = initLocales(this.element).messages;
+    }
+    /**
+     * Set variables and validate props
+     */
+    componentDidLoad() {
+        this.watchSize(this.size);
+        this.watchFullWidth(this.fullWidth);
+        this.watchColumns(this.columns);
+        this.renderTable(this.element.querySelector('table'));
+    }
+    /**
+     * Update table
+     */
+    componentWillUpdate() {
+        this.renderTable(this.element.shadowRoot.querySelector('table'));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "size": ["watchSize"],
+        "fullWidth": ["watchFullWidth"],
+        "columns": ["watchColumns"]
+    }; }
+    static get style() { return MgTableStyle0; }
+}, [1, "mg-table", {
+        "size": [1],
+        "fullWidth": [4, "full-width"],
+        "columns": [16],
+        "classCollection": [32]
+    }, undefined, {
+        "size": ["watchSize"],
+        "fullWidth": ["watchFullWidth"],
+        "columns": ["watchColumns"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-table", "mg-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-table":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgTable$1);
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const MgTable = MgTable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MgTable, defineCustomElement };
+
+//# sourceMappingURL=mg-table.js.map

package/dist/components/mg-table.js.map

@@ -0,0 +1 @@
+{"file":"mg-table.js","mappings":"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","names":["MgTable","ClassList","toString","isValidString","createID"],"sources":["src/components/molecules/mg-table/mg-table.conf.ts","../styles/dist/components/mg-table.css?tag=mg-table&encapsulation=shadow","src/components/molecules/mg-table/mg-table.tsx"],"sourcesContent":["import type { Size } from '../../../types';\n/**\n * Sizes\n */\n// Define possible sizes\nexport const sizes = ['small', 'medium', 'large', 'xlarge'] as const;\n// Define Table size type and ensure it is a valid size\nexport type TableSizeType = Size & (typeof sizes)[number];\n/**\n * Columns\n */\n// Define possible text alignments\nexport const textAlignments = ['left', 'center', 'right'] as const;\n// Define possible data types\nexport const dataTypes = ['string', 'numeric', 'date'] as const;\n// Define possible data types\nexport type datatypesType = (typeof dataTypes)[number];\n// Define columns type\nexport type ColumnsType = {\n  [key: number]: { align?: (typeof textAlignments)[number]; sortable?: boolean; datatype?: datatypesType };\n};\n",".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}}@font-face{font-family:\"Open Sans\";src:url(\"fonts/OpenSans-Regular.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:600;src:url(\"fonts/OpenSans-SemiBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:700;src:url(\"fonts/OpenSans-Bold.ttf\") format(\"truetype\")}p{margin:0}p+p{margin-top:var(--mg-b-size-8)}h1,.mg-u-h1{font-family:var(--mg-b-font-family-heading);font-weight:bold}h2,.mg-u-h2{font-family:var(--mg-b-font-family-heading);font-weight:bold}h3,.mg-u-h3{font-family:var(--mg-b-font-family-heading);font-weight:bold}h4,.mg-u-h4{font-family:var(--mg-b-font-family-heading);font-weight:bold}h5,.mg-u-h5{font-family:var(--mg-b-font-family-heading);font-weight:bold}h6,.mg-u-h6{font-family:var(--mg-b-font-family-heading);font-weight:bold}h1,.mg-u-h1{font-size:var(--mg-b-font-size-h1)}h2,.mg-u-h2{font-size:var(--mg-b-font-size-h2)}h3,.mg-u-h3{font-size:var(--mg-b-font-size-h3)}h4,.mg-u-h4{font-size:var(--mg-b-font-size-h4)}h5,.mg-u-h5{font-size:var(--mg-b-font-size-h5)}h6,.mg-u-h6{font-size:var(--mg-b-font-size-h6)}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}small{font-size:var(--mg-b-small-font-size)}.mg-u-text-left{text-align:left !important}.mg-u-text-center{text-align:center !important}.mg-u-text-right{text-align:right !important}.mg-c-table{--mg-c-table-cell-spacing: var(--mg-b-size-8) var(--mg-b-size-16);--mg-c-table-cell-height: var(--mg-b-size-40);--mg-c-table-header-cell-height: calc(var(--mg-b-size-min-height) + 2 * var(--mg-b-size-8));overflow:hidden;border:none;border-radius:var(--mg-b-size-8);background:var(--mg-b-color-light);border-collapse:separate;border-spacing:0;color:var(--mg-b-color-dark)}.mg-c-table td,.mg-c-table th{height:var(--mg-c-table-cell-height);box-sizing:border-box;padding:var(--mg-c-table-cell-spacing);text-align:start}.mg-c-table thead td,.mg-c-table th{font-weight:600}.mg-c-table thead{height:var(--mg-c-table-header-cell-height);background-color:var(--mg-b-color-app);color:var(--mg-b-color-light)}.mg-c-table :not(thead) tr:nth-child(even){background:color-mix(in srgb, var(--mg-b-color-app), transparent 80%)}.mg-c-table.mg-c-table--size-small{--mg-c-table-cell-spacing: var(--mg-b-size-4) var(--mg-b-size-16);--mg-c-table-cell-height: var(--mg-b-size-32);--mg-c-table-header-cell-height: var(--mg-b-size-32)}.mg-c-table.mg-c-table--size-large{--mg-c-table-cell-height: var(--mg-c-table-header-cell-height)}.mg-c-table.mg-c-table--size-xlarge{--mg-c-table-cell-spacing: var(--mg-b-size-12) var(--mg-b-size-16);--mg-c-table-cell-height: var(--mg-b-size-64);--mg-c-table-header-cell-height: var(--mg-b-size-64)}.mg-c-table.mg-c-table--full-width{width:100%}.mg-c-table-wrapper{overflow:auto}.mg-c-table thead td,.mg-c-table thead th{position:relative}.mg-c-table thead td .mg-c-table__sort-button,.mg-c-table thead th .mg-c-table__sort-button{padding:0;border:none;margin:0;background:none;color:inherit;font-size:inherit;font-weight:600}.mg-c-table thead td .mg-c-table__sort-button::after,.mg-c-table thead th .mg-c-table__sort-button::after{position:absolute;content:\"\";inset:0}.mg-c-table thead td .mg-c-table__sort-button:hover,.mg-c-table thead th .mg-c-table__sort-button:hover{cursor:pointer}.mg-c-table thead td .mg-c-table__sort-button mg-icon,.mg-c-table thead th .mg-c-table__sort-button mg-icon{margin-left:var(--mg-b-size-4)}.mg-c-table thead td:has(.mg-c-table__sort-button):hover,.mg-c-table thead td[aria-sort=descending],.mg-c-table thead td[aria-sort=ascending],.mg-c-table thead th:has(.mg-c-table__sort-button):hover,.mg-c-table thead th[aria-sort=descending],.mg-c-table thead th[aria-sort=ascending]{background-color:color-mix(in srgb, var(--mg-b-color-app), black 10%)}/*# sourceMappingURL=mg-table.css.map */\n","import { Component, Element, State, Prop, Watch } from '@stencil/core';\nimport { ClassList, toString, createID, isValidString } from '@mgdis/stencil-helpers';\nimport { type TableSizeType, type ColumnsType, type datatypesType, textAlignments, dataTypes, sizes } from './mg-table.conf';\nimport { initLocales } from '../../../locales';\n\n/**\n * Check if value is a valid align object\n * @param newValue - New value\n * @returns True if value is a valid align object\n */\nconst isValidColumnsObject = (newValue: ColumnsType): boolean =>\n  // ensure newValue is an object\n  typeof newValue === 'object' &&\n  !Array.isArray(newValue) &&\n  // Ensure every property is well formatted\n  Object.entries(newValue).every(\n    ([key, value]) =>\n      // ensure key is a number\n      !isNaN(parseInt(key)) &&\n      // ensure value is an object\n      typeof value === 'object' &&\n      !Array.isArray(value) &&\n      // ensure value has at least one of the following properties\n      ((value.align !== undefined && textAlignments.includes(value.align)) ||\n        (value.sortable !== undefined && typeof value.sortable === 'boolean') ||\n        (value.datatype !== undefined && dataTypes.includes(value.datatype))) &&\n      // ensure no extra properties are present\n      Object.keys(value).every(key => ['align', 'sortable', 'datatype'].includes(key)),\n  );\n\n/**\n * Compare values\n * @param firstValue - First value\n * @param secondValue - Second value\n * @param descending - Define descending order\n * @param datatype - Data type\n * @returns Comparison result\n * @example\n * compareValues('a', 'b', false, 'string'); // -1\n */\nconst compareValues = (firstValue: string, secondValue: string, descending: boolean, datatype: datatypesType): number => {\n  if (descending) {\n    const temp = firstValue;\n    firstValue = secondValue;\n    secondValue = temp;\n  }\n  if (datatype === 'date') {\n    return new Date(firstValue).getTime() - new Date(secondValue).getTime();\n  }\n  return firstValue.localeCompare(secondValue, undefined, { numeric: datatype === 'numeric' });\n};\n\n/**\n * @slot - Table content\n */\n@Component({\n  tag: 'mg-table',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-table.css',\n  shadow: true,\n})\nexport class MgTable {\n  /************\n   * Internal *\n   ************/\n\n  private messages;\n\n  // Classes\n  private readonly componentClass = 'mg-c-table';\n  private readonly componentWrapperClass = 'mg-c-table-wrapper';\n  private readonly classFullWidth = 'mg-c-table--full-width';\n\n  // Alignment stylesheet\n  private alignmentStylesheet = new CSSStyleSheet();\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgTableElement;\n\n  /**\n   * Define table size\n   */\n  @Prop() size: TableSizeType = 'medium';\n  @Watch('size')\n  watchSize(newValue: MgTable['size'], oldValue?: MgTable['size']): void {\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<mg-table> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-table--size-${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-table--size-${newValue}`);\n    }\n  }\n\n  /**\n   * Define if table fits its parent element\n   */\n  @Prop() fullWidth = false;\n  @Watch('fullWidth')\n  watchFullWidth(newValue: MgTable['fullWidth']): void {\n    if (newValue) {\n      this.classCollection.add(this.classFullWidth);\n    } else {\n      this.classCollection.delete(this.classFullWidth);\n    }\n  }\n\n  /**\n   * Define column properties\n   */\n  @Prop() columns: ColumnsType;\n  @Watch('columns')\n  watchColumns(newValue: ColumnsType): void {\n    if (newValue !== undefined && !isValidColumnsObject(newValue)) {\n      throw new Error(`<mg-table> prop \"columns\" must be a ColumnsType object. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Class collection\n   */\n  @State() classCollection: ClassList = new ClassList([this.componentClass]);\n\n  /**\n   * Render Table\n   * @param table - Table element\n   */\n  private renderTable(table: HTMLTableElement): void {\n    let isSortable = false;\n    // Remove table classes\n    table.className = '';\n    // Add table classes\n    table.classList.add(...this.classCollection.classes);\n\n    // Set columns based on columns prop\n    if (this.columns !== undefined) {\n      // Store original rows\n      const rowsDefault = Array.from(table.querySelectorAll('tbody tr'));\n\n      // Apply columns settings\n      Object.entries(this.columns).forEach(([key, value]) => {\n        // Add alignment to stylesheet\n        if (value.align !== undefined) {\n          this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:${value.align}}}`);\n        }\n        // if align is not defined and datatype is number, align right\n        else if (value.datatype === 'numeric') {\n          this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:right}}`);\n        }\n\n        // Define if column is sortable\n        if (value.sortable) {\n          isSortable = true;\n          // Add sortable class to table header\n          const sortableHeader = table.querySelector(`thead td:nth-child(${key}),thead th:nth-child(${key})`);\n\n          // Create button\n          const button = document.createElement('button');\n          button.classList.add('mg-c-table__sort-button');\n\n          // Append button to header\n          const sortableHeaderContent = sortableHeader.innerHTML;\n          sortableHeader.innerHTML = '';\n          button.innerHTML = sortableHeaderContent;\n\n          // Set icon\n          const icon = document.createElement('mg-icon');\n          icon.setAttribute('icon', 'arrows-up-down');\n\n          // Append icon to button\n          button.append(icon);\n          sortableHeader.append(button);\n\n          // Add event listener\n          button.addEventListener('click', (): void => {\n            // Reset aria pressed\n            table.querySelectorAll(`thead td:not(:nth-child(${key})) [aria-pressed],thead th:not(:nth-child(${key})) [aria-pressed]`).forEach(ariaPressed => {\n              ariaPressed.removeAttribute('aria-pressed');\n              ariaPressed.querySelector('mg-icon').setAttribute('icon', 'arrows-up-down');\n            });\n            // Reset aria sort\n            table.querySelectorAll(`thead td:not(:nth-child(${key}))[aria-sort],thead th:not(:nth-child(${key}))[aria-sort]`).forEach(ariaSort => {\n              ariaSort.removeAttribute('aria-sort');\n            });\n\n            // Set aria pressed\n            button.setAttribute('aria-pressed', 'true');\n\n            // Manage sort order\n            // Get sort order\n            let sortOrder = sortableHeader.getAttribute('aria-sort');\n\n            // First click sort asc\n            if ([null, 'none'].includes(sortOrder)) {\n              sortableHeader.setAttribute('aria-sort', 'ascending');\n            }\n            // Second click sort desc\n            else if (sortOrder === 'ascending') {\n              sortableHeader.setAttribute('aria-sort', 'descending');\n            }\n            // Third click remove sort\n            else {\n              sortableHeader.setAttribute('aria-sort', 'none');\n            }\n\n            // Update sort order\n            sortOrder = sortableHeader.getAttribute('aria-sort');\n\n            // Update button icon\n            const icon = button.querySelector('mg-icon');\n            let iconType = 'arrows-up-down';\n            if (sortOrder === 'ascending') {\n              iconType = 'arrow-up';\n            } else if (sortOrder === 'descending') {\n              iconType = 'arrow-down';\n            }\n            icon.setAttribute('icon', iconType);\n\n            // If sort order is none, return to original order\n            if (sortOrder === 'none') {\n              // Append rows to table\n              rowsDefault.forEach(row => table.querySelector('tbody').append(row));\n              return;\n            }\n\n            // Set a copy of rows\n            const rows = Array.from(table.querySelectorAll('tbody tr'));\n\n            // Sort rows\n            rows.sort((a, b) => {\n              // Get cells\n              const cellA: HTMLTableCellElement = a.querySelector(`td:nth-child(${key}),th:nth-child(${key})`);\n              const cellB: HTMLTableCellElement = b.querySelector(`td:nth-child(${key}),th:nth-child(${key})`);\n\n              // Get cell values\n              const cellValueA = cellA.dataset.sort ?? cellA.textContent;\n              const cellValueB = cellB.dataset.sort ?? cellB.textContent;\n\n              // Sort cells based on sort order\n              return compareValues(cellValueA, cellValueB, sortOrder === 'descending', value.datatype);\n            });\n\n            // Append rows to table\n            rows.forEach(row => table.querySelector('tbody').append(row));\n          });\n        }\n      });\n    }\n\n    // Add alignment to columns\n    this.element.shadowRoot.adoptedStyleSheets = [...this.element.shadowRoot.adoptedStyleSheets, this.alignmentStylesheet];\n\n    // Create div wrapper for responsive behavior\n    const divWrapper = document.createElement('div');\n    divWrapper.setAttribute('class', this.componentWrapperClass);\n    divWrapper.setAttribute('tabindex', '0');\n    divWrapper.setAttribute('role', 'region');\n\n    // Get table title\n    let captionTable = table.querySelector('caption');\n\n    // If table is sortable we must add a caption\n    if (captionTable === null && isSortable) {\n      captionTable = document.createElement('caption');\n      table.prepend(captionTable);\n    }\n\n    if (captionTable !== null) {\n      // Ensure caption is not visible (otherwhise the table does not have rounded corners)\n      captionTable.className = 'mg-u-visually-hidden';\n\n      // Link caption to div\n      if (!isValidString(captionTable.id)) {\n        captionTable.setAttribute('id', createID(`${this.componentClass}-caption`));\n      }\n      divWrapper.setAttribute('aria-labelledby', captionTable.id);\n\n      // Add sortable caption if neeeded\n      if (isSortable) {\n        captionTable.innerHTML = `${captionTable.innerHTML} ${this.messages.table.sortableCaption}`.trim();\n      }\n    }\n    divWrapper.append(table);\n\n    // Remove existing table from shadow root\n    const existingTable = this.element.shadowRoot.querySelector(`.${this.componentWrapperClass}`);\n    if (existingTable !== null) {\n      existingTable.remove();\n    }\n    // Append table\n    this.element.shadowRoot.append(divWrapper);\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  componentWillLoad(): void {\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Set variables and validate props\n   */\n  componentDidLoad(): void {\n    this.watchSize(this.size);\n    this.watchFullWidth(this.fullWidth);\n    this.watchColumns(this.columns);\n    this.renderTable(this.element.querySelector('table'));\n  }\n\n  /**\n   * Update table\n   */\n  componentWillUpdate(): void {\n    this.renderTable(this.element.shadowRoot.querySelector('table'));\n  }\n}\n"],"version":3}

package/dist/esm/index-5059254f.js

@@ -57,10 +57,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'mg-action-more_36':
+                case 'mg-action-more_37':
                     return import(
                       /* webpackMode: "lazy" */
-                      './mg-action-more_36.entry.js').then(processMod, consoleError);
+                      './mg-action-more_37.entry.js').then(processMod, consoleError);
                 case 'mg-alert':
                     return import(
                       /* webpackMode: "lazy" */

package/dist/esm/{index-a58f8b91.js → index-544778a7.js}

@@ -1,18 +1,7 @@
-import { h as ht } from './index.es-b80b758c.js';
+import { h as ht } from './index.es-517b1bf2.js';
 
 const errors$1 = {
-	required: "This field is required.",
-	date: {
-		badInput: "The date is incorrect, the format must be {pattern}",
-		min: "The date cannot be earlier than {min}",
-		max: "The date cannot be later than {max}",
-		minMax: "The date must be between {min} and {max}"
-	},
-	numeric: {
-		min: "The value cannot be less than {min}",
-		max: "The value cannot be greater than {max}",
-		minMax: "The value must be between {min} and {max}"
-	}
+	required: "This field is required."
 };
 const nbCharLeft$1 = "{counter} characters left.";
 const input$1 = {
@@ -33,29 +22,54 @@ const input$1 = {
 		sections: {
 			selected: {
 				title: "Selected",
-				titlePlurial: "Selected",
+				titlePlural: "Selected",
 				action: "Unselect all",
 				tooltip: "Unselect all current search results"
 			},
 			notSelected: {
 				title: "Not selected",
-				titlePlurial: "Not selected",
+				titlePlural: "Not selected",
 				action: "Select all",
 				tooltip: "Select all current search results"
 			}
 		}
 	},
 	date: {
-		helpText: "Expected format: {pattern} (ex: {date})",
 		pattern: {
 			dd: "dd",
 			mm: "mm",
 			yyyy: "yyyy"
+		},
+		helpText: {
+			expectedFormat: "Expected format: {pattern} (ex: {date})",
+			min: "The date must be after {min}",
+			max: "The date must be before {max}",
+			minMax: "The date must be between {min} and {max}"
+		},
+		error: {
+			badInput: "The date is incorrect, the format must be {pattern} (ex: {date})"
+		}
+	},
+	numeric: {
+		helpText: {
+			min: "The value must be greater than {min}",
+			max: "The value must be less than {max}",
+			minMax: "The value must be between {min} and {max}"
 		}
 	},
 	password: {
 		display: "Display password value",
 		hide: "Hide password value"
+	},
+	text: {
+		helpText: {
+			email: "Expected format: name@example.com",
+			emails: "Expected format: first@example.com, second@example.com",
+			url: "Expected format: https://example.com"
+		},
+		errors: {
+			typeMismatch: "The value is incorrect."
+		}
 	}
 };
 const form$1 = {
@@ -102,7 +116,10 @@ const actionMore$1 = {
 	label: "Actions"
 };
 const loader$1 = {
-	inProgess: "Loading in progress…"
+	inProgress: "Loading in progress…"
+};
+const table$1 = {
+	sortableCaption: "(column headers with buttons are sortable)"
 };
 const en = {
 	errors: errors$1,
@@ -118,22 +135,12 @@ const en = {
 	menuItem: menuItem$1,
 	itemMore: itemMore$1,
 	actionMore: actionMore$1,
-	loader: loader$1
+	loader: loader$1,
+	table: table$1
 };
 
 const errors = {
-	required: "Ce champ est obligatoire.",
-	date: {
-		badInput: "La date est incorrecte, le format doit être du type {pattern}",
-		min: "La date ne peut pas être antérieure au {min}",
-		max: "La date ne peut pas être postérieure au {max}",
-		minMax: "La date doit être comprise entre le {min} et le {max}"
-	},
-	numeric: {
-		min: "La valeur ne peut pas être inférieure à {min}",
-		max: "La valeur ne peut pas être supérieure à {max}",
-		minMax: "La valeur doit être comprise entre {min} et {max}"
-	}
+	required: "Ce champ est obligatoire."
 };
 const nbCharLeft = "{counter} caractères disponibles.";
 const input = {
@@ -141,42 +148,67 @@ const input = {
 		placeholder: "Sélectionnez une valeur"
 	},
 	checkbox: {
-		selectedValues: "{nb} valeurs selectionnées",
-		selectedValue: "{nb} valeur selectionnée",
+		selectedValues: "{nb} valeurs sélectionnées",
+		selectedValue: "{nb} valeur sélectionnée",
 		editButton: "Modifier",
 		selectButton: "Sélectionner des valeurs",
 		showButton: "Voir",
 		label: "Saisissez une valeur",
 		result: "résultat",
 		results: "résultats",
-		searchResults: "List de résultat(s) de la recherche.",
+		searchResults: "Liste de résultat(s) de la recherche.",
 		noResult: "Aucun résultat.",
 		sections: {
 			selected: {
 				title: "Sélectionné",
-				titlePlurial: "Sélectionnés",
+				titlePlural: "Sélectionnés",
 				action: "Tout désélectionner",
 				tooltip: "Désélectionne tous les résultats de la recherche en cours"
 			},
 			notSelected: {
 				title: "Non sélectionné",
-				titlePlurial: "Non sélectionnés",
+				titlePlural: "Non sélectionnés",
 				action: "Tout sélectionner",
 				tooltip: "Sélectionne tous les résultats de la recherche en cours"
 			}
 		}
 	},
 	date: {
-		helpText: "Format attendu : {pattern} (ex : {date})",
 		pattern: {
 			dd: "jj",
 			mm: "mm",
 			yyyy: "aaaa"
+		},
+		helpText: {
+			expectedFormat: "Format attendu : {pattern} (ex : {date})",
+			min: "La date doit être postérieure au {min}",
+			max: "La date doit être antérieure au {max}",
+			minMax: "La date doit être comprise entre le {min} et le {max}"
+		},
+		error: {
+			badInput: "La date est incorrecte, le format doit être du type {pattern} (ex : {date})"
+		}
+	},
+	numeric: {
+		helpText: {
+			min: "La valeur doit être supérieure à {min}",
+			max: "La valeur doit être inférieure à {max}",
+			minMax: "La valeur doit être comprise entre {min} et {max}"
 		}
 	},
 	password: {
 		display: "Afficher le mot de passe",
 		hide: "Masquer le mot de passe"
+	},
+	text: {
+		helpText: {
+			email: "Format attendu : nom@exemple.fr",
+			emails: "Format attendu : premier@exemple.fr, second@exemple.fr",
+			url: "Format attendu : https://exemple.fr"
+		},
+		errors: {
+			typeMismatch: "La valeur est incorrecte."
+		}
 	}
 };
 const form = {
@@ -223,7 +255,10 @@ const actionMore = {
 	label: "Actions"
 };
 const loader = {
-	inProgess: "Chargement en cours…"
+	inProgress: "Chargement en cours…"
+};
+const table = {
+	sortableCaption: "(les en-têtes de colonnes avec des boutons peuvent être triés)"
 };
 const fr = {
 	errors: errors,
@@ -239,7 +274,8 @@ const fr = {
 	menuItem: menuItem,
 	itemMore: itemMore,
 	actionMore: actionMore,
-	loader: loader
+	loader: loader,
+	table: table
 };
 
 const defaultLocale = 'en';
@@ -253,4 +289,4 @@ const initLocales = ht(messages, defaultLocale);
 
 export { initLocales as i };
 
-//# sourceMappingURL=index-a58f8b91.js.map
+//# sourceMappingURL=index-544778a7.js.map

package/dist/esm/index-544778a7.js.map

@@ -0,0 +1 @@
+{"file":"index-544778a7.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,aAAa,GAAG,IAAI,CAAC;AAC3B,MAAM,QAAQ,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAE5B;;;;;MAKa,WAAW,GAAGA,EAAa,CAAC,QAAQ,EAAE,aAAa;;;;","names":["defineLocales"],"sources":["src/locales/index.ts"],"sourcesContent":["import en from './en/messages.json';\nimport fr from './fr/messages.json';\nimport { defineLocales } from '@mgdis/stencil-helpers';\n\nconst defaultLocale = 'en';\nconst messages = { en, fr };\n\n/**\n * Get Intl object\n * @param element - element we need to get the language\n * @returns messages object\n */\nexport const initLocales = defineLocales(messages, defaultLocale);\n"],"version":3}

package/dist/esm/{index.es-b80b758c.js → index.es-517b1bf2.js}

@@ -112,7 +112,7 @@ const ft = (e) => {
     locale: i,
     messages: t[o] || t[s] || { lang: s }
   };
-}, ut = (e, t, s) => new Intl.NumberFormat(t, { style: "currency", currency: s }).format(e), dt = (e, t, s = 0) => new Intl.NumberFormat(t, { minimumFractionDigits: s }).format(s > 0 ? Number(e == null ? void 0 : e.toFixed(s)) : e), gt = (e, t, s = 0) => new Intl.NumberFormat(t, {
+}, ut = (e, t, s) => new Intl.NumberFormat(t, { style: "currency", currency: s }).format(e), dt = (e, t, s = 0) => new Intl.NumberFormat(t, { minimumFractionDigits: s }).format(Number(e)), gt = (e, t, s = 0) => new Intl.NumberFormat(t, {
   style: "percent",
   minimumFractionDigits: s,
   maximumFractionDigits: s
@@ -126,4 +126,4 @@ const ft = (e) => {
 
 export { $t as $, Ge as G, Je as J, Ke as K, Qe as Q, Ve as V, Xe as X, Ye as Y, Ze as Z, dt as d, et as e, ft as f, gt as g, ht as h, me as m, pt as p, st as s, tt as t, ut as u, we as w, ze as z };
 
-//# sourceMappingURL=index.es-b80b758c.js.map
+//# sourceMappingURL=index.es-517b1bf2.js.map