@mgdis/mg-components 6.7.0 → 6.9.0

package/dist/components/mg-table.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MgTable extends Components.MgTable, HTMLElement {}
+export const MgTable: {
+    prototype: MgTable;
+    new (): MgTable;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/mg-table.js

@@ -0,0 +1,320 @@
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { k as kt, z as zt, L as Le, x as xt } 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%)}";
+
+/**
+ * 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 kt([this.componentClass]);
+    }
+    watchSize(newValue, oldValue) {
+        if (!sizes.includes(newValue)) {
+            throw new Error(`<mg-table> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${zt(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: ${zt(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 (!Le(captionTable.id)) {
+                captionTable.setAttribute('id', xt(`${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 mgTableCss; }
+}, [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
+
+//# 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","__stencil_proxyCustomElement","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/components/mg-tabs.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { G as Ge, Z as Ze, s as st, X as Xe, V as Ve, m as me, J as Je } from './index.es.js';
+import { x as xt, k as kt, M as Mt, O as Ot, z as zt, L as Le, A as At } from './index.es.js';
 import { d as defineCustomElement$3 } from './mg-badge2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
@@ -18,7 +18,6 @@ const Status = {
 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}";
-const MgTabsStyle0 = mgTabsCss;
 
 /**
  * type TabItem validation function
@@ -43,7 +42,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          * If not set, it will be created.
          */
-        this.identifier = Ge('mg-tabs');
+        this.identifier = xt('mg-tabs');
         /**
          * Define tabs size
          */
@@ -55,7 +54,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
         /**
          * Component classes
          */
-        this.classCollection = new Ze(['mg-c-tabs']);
+        this.classCollection = new kt(['mg-c-tabs']);
         /**
          * Validate that new tab status can be `Status.ACTIVE`
          * @param tab - tab item
@@ -153,7 +152,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
          */
         this.resetFocus = () => {
             // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
-            st(() => {
+            Mt(() => {
                 this.tabFocus = undefined;
                 Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
                     tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
@@ -170,30 +169,30 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
         };
     }
     watchIdentifier(newValue) {
-        if (!Xe(newValue)) {
-            console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${Ve(newValue)}.`);
+        if (!Ot(newValue)) {
+            console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${zt(newValue)}.`);
         }
     }
     validateLabel(newValue) {
-        if (!me(newValue)) {
-            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${Ve(newValue)}.`);
+        if (!Le(newValue)) {
+            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${zt(newValue)}.`);
         }
     }
     validateSize(newValue) {
         if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Ve(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${zt(newValue)}.`);
         }
         this.classCollection.add(`mg-c-tabs--size-${this.size}`);
     }
     validateItems(newValue) {
         // String array
-        if (Je(newValue))
+        if (At(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: ${Ve(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${zt(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
@@ -218,7 +217,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
             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: ${Ve(newValue)}.`);
+            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: ${zt(newValue)}.`);
         }
     }
     /*************
@@ -269,7 +268,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
         "items": ["validateItems"],
         "activeTab": ["validateActiveTab"]
     }; }
-    static get style() { return MgTabsStyle0; }
+    static get style() { return mgTabsCss; }
 }, [1, "mg-tabs", {
         "identifier": [1],
         "label": [1],
@@ -314,5 +313,6 @@ const MgTabs = MgTabs$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgTabs, defineCustomElement };
+//# sourceMappingURL=mg-tabs.js.map
 
 //# sourceMappingURL=mg-tabs.js.map