@mgdis/mg-components 6.7.0 → 6.8.0

package/dist/collection/components/molecules/mg-table/mg-table.js

@@ -0,0 +1,364 @@
+import { ClassList, toString, createID, isValidString } from "@mgdis/stencil-helpers";
+import { textAlignments, dataTypes, sizes } from "./mg-table.conf";
+import { initLocales } from "../../../locales";
+/**
+ * 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' });
+};
+/**
+ * @slot - Table content
+ */
+export class MgTable {
+    constructor() {
+        // 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 ClassList([this.componentClass]);
+    }
+    watchSize(newValue, oldValue) {
+        if (!sizes.includes(newValue)) {
+            throw new Error(`<mg-table> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${toString(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: ${toString(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 (!isValidString(captionTable.id)) {
+                captionTable.setAttribute('id', createID(`${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'));
+    }
+    static get is() { return "mg-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableSizeType",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\"",
+                    "references": {
+                        "TableSizeType": {
+                            "location": "import",
+                            "path": "./mg-table.conf",
+                            "id": "src/components/molecules/mg-table/mg-table.conf.ts::TableSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define table size"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if table fits its parent element"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "full-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "columns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColumnsType",
+                    "resolved": "{ [key: number]: { align?: \"center\" | \"right\" | \"left\"; sortable?: boolean; datatype?: \"string\" | \"numeric\" | \"date\"; }; }",
+                    "references": {
+                        "ColumnsType": {
+                            "location": "import",
+                            "path": "./mg-table.conf",
+                            "id": "src/components/molecules/mg-table/mg-table.conf.ts::ColumnsType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define column properties"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "classCollection": {}
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "watchSize"
+            }, {
+                "propName": "fullWidth",
+                "methodName": "watchFullWidth"
+            }, {
+                "propName": "columns",
+                "methodName": "watchColumns"
+            }];
+    }
+}
+//# sourceMappingURL=mg-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-table.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-table/mg-table.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -1,17 +1,6 @@
 {
   "errors": {
-    "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."
   },
   "nbCharLeft": "{counter} characters left.",
   "input": {
@@ -32,29 +21,54 @@
       "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."
+      }
     }
   },
   "form": {
@@ -101,6 +115,9 @@
     "label": "Actions"
   },
   "loader": {
-    "inProgess": "Loading in progress…"
+    "inProgress": "Loading in progress…"
+  },
+  "table": {
+    "sortableCaption": "(column headers with buttons are sortable)"
   }
 }

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

@@ -1,17 +1,6 @@
 {
   "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."
   },
   "nbCharLeft": "{counter} caractères disponibles.",
   "input": {
@@ -19,42 +8,67 @@
       "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."
+      }
     }
   },
   "form": {
@@ -101,6 +115,9 @@
     "label": "Actions"
   },
   "loader": {
-    "inProgess": "Chargement en cours…"
+    "inProgress": "Chargement en cours…"
+  },
+  "table": {
+    "sortableCaption": "(les en-têtes de colonnes avec des boutons peuvent être triés)"
   }
 }

package/dist/components/index.es.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