@mgdis/mg-components 6.20.0 → 6.21.0

package/dist/components/mg-table.js

@@ -1,319 +1 @@
-import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-import { C as ClassList, t as toString, i as isValidString, c as createID } from './index2.js';
-import { i as initLocales } from './index3.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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}@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-size:var(--mg-b-font-size-h1);font-weight:bold}h2,.mg-u-h2{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h2);font-weight:bold}h3,.mg-u-h3{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h3);font-weight:bold}h4,.mg-u-h4{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h4);font-weight:bold}h5,.mg-u-h5{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h5);font-weight:bold}h6,.mg-u-h6{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h6);font-weight:bold}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:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);border-radius:var(--mg-b-size-12);background:var(--mg-b-color-light);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{height:var(--mg-c-table-header-cell-height)}.mg-c-table thead,.mg-c-table tfoot{background-color:var(--mg-b-color-neutral-10)}.mg-c-table thead td,.mg-c-table tfoot td,.mg-c-table th{font-weight:600}.mg-c-table tr th,.mg-c-table tr td{border-block-end:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-table tfoot tr:last-of-type th,.mg-c-table tfoot tr:last-of-type td{border-block-end:none}.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{display:inline-flex;align-items:center;padding:0;border:none;margin:0;background:none;color:inherit;font-size:inherit;font-weight:600;gap:var(--mg-b-size-4);text-align:left}.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: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:var(--mg-b-color-neutral-20)}";
-
-/**
- * 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(registerHost) {
-        super();
-        if (registerHost !== false) {
-            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 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};&>*{display:inline-block;}}`);
-                }
-                // 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;&>*{display:inline-block;}}`);
-                }
-                // 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.push(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'));
-    }
-    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 };
+import{transformTag as t,proxyCustomElement as e,HTMLElement as a}from"@stencil/core/internal/client";import{C as i,t as o,i as n,c as l}from"./index2.js";import{i as r}from"./index3.js";import{d as s}from"./mg-icon2.js";const c=["small","medium","large","xlarge"],h=["left","center","right"],m=["string","numeric","date"],g=e(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.componentClass="mg-c-table",this.componentWrapperClass="mg-c-table-wrapper",this.classFullWidth="mg-c-table--full-width",this.alignmentStylesheet=new CSSStyleSheet,this.size="medium",this.fullWidth=!1,this.classCollection=new i([this.componentClass])}watchSize(t,e){if(!c.includes(t))throw Error(`<mg-table> prop "size" must be one of: ${c.join(", ")}. Passed value: ${o(t)}.`);void 0!==e&&this.classCollection.delete("mg-c-table--size-"+e),this.classCollection.add("mg-c-table--size-"+t)}watchFullWidth(t){t?this.classCollection.add(this.classFullWidth):this.classCollection.delete(this.classFullWidth)}watchColumns(t){if(void 0!==t&&!(t=>"object"==typeof t&&!Array.isArray(t)&&Object.entries(t).every((([t,e])=>!isNaN(parseInt(t))&&"object"==typeof e&&!Array.isArray(e)&&(void 0!==e.align&&h.includes(e.align)||void 0!==e.sortable&&"boolean"==typeof e.sortable||void 0!==e.datatype&&m.includes(e.datatype))&&Object.keys(e).every((t=>["align","sortable","datatype"].includes(t))))))(t))throw Error(`<mg-table> prop "columns" must be a ColumnsType object. Passed value: ${o(t)}.`)}renderTable(t){let e=!1;if(t.className="",t.classList.add(...this.classCollection.classes),void 0!==this.columns){const a=Array.from(t.querySelectorAll("tbody tr"));Object.entries(this.columns).forEach((([i,o])=>{if(void 0!==o.align?this.alignmentStylesheet.insertRule(`.${this.componentClass} th:nth-child(${i}),td:nth-child(${i}){text-align:${o.align};&>*{display:inline-block;}}`):"numeric"===o.datatype&&this.alignmentStylesheet.insertRule(`.${this.componentClass} th:nth-child(${i}),td:nth-child(${i}){text-align:right;&>*{display:inline-block;}}`),o.sortable){e=!0;const n=t.querySelector(`thead td:nth-child(${i}),thead th:nth-child(${i})`),l=document.createElement("button");l.classList.add("mg-c-table__sort-button");const r=n.innerHTML;n.innerHTML="",l.innerHTML=r;const s=document.createElement("mg-icon");s.setAttribute("icon","arrows-up-down"),l.append(s),n.append(l),l.addEventListener("click",(()=>{t.querySelectorAll(`thead td:not(:nth-child(${i})) [aria-pressed],thead th:not(:nth-child(${i})) [aria-pressed]`).forEach((t=>{t.removeAttribute("aria-pressed"),t.querySelector("mg-icon").setAttribute("icon","arrows-up-down")})),t.querySelectorAll(`thead td:not(:nth-child(${i}))[aria-sort],thead th:not(:nth-child(${i}))[aria-sort]`).forEach((t=>{t.removeAttribute("aria-sort")})),l.setAttribute("aria-pressed","true");let e=n.getAttribute("aria-sort");n.setAttribute("aria-sort",[null,"none"].includes(e)?"ascending":"ascending"===e?"descending":"none"),e=n.getAttribute("aria-sort");const r=l.querySelector("mg-icon");let s="arrows-up-down";if("ascending"===e?s="arrow-up":"descending"===e&&(s="arrow-down"),r.setAttribute("icon",s),"none"===e)return void a.forEach((e=>t.querySelector("tbody").append(e)));const c=Array.from(t.querySelectorAll("tbody tr"));c.sort(((t,a)=>{var n,l;const r=t.querySelector(`td:nth-child(${i}),th:nth-child(${i})`),s=a.querySelector(`td:nth-child(${i}),th:nth-child(${i})`);return((t,e,a,i)=>{if(a){const a=t;t=e,e=a}return"date"===i?new Date(t).getTime()-new Date(e).getTime():t.localeCompare(e,void 0,{numeric:"numeric"===i})})(null!==(n=r.dataset.sort)&&void 0!==n?n:r.textContent,null!==(l=s.dataset.sort)&&void 0!==l?l:s.textContent,"descending"===e,o.datatype)})),c.forEach((e=>t.querySelector("tbody").append(e)))}))}}))}this.element.shadowRoot.adoptedStyleSheets.push(this.alignmentStylesheet);const a=document.createElement("div");a.setAttribute("class",this.componentWrapperClass),a.setAttribute("tabindex","0"),a.setAttribute("role","region");let i=t.querySelector("caption");null===i&&e&&(i=document.createElement("caption"),t.prepend(i)),null!==i&&(i.className="mg-u-visually-hidden",n(i.id)||i.setAttribute("id",l(this.componentClass+"-caption")),a.setAttribute("aria-labelledby",i.id),e&&(i.innerHTML=`${i.innerHTML} ${this.messages.table.sortableCaption}`.trim())),a.append(t);const o=this.element.shadowRoot.querySelector("."+this.componentWrapperClass);null!==o&&o.remove(),this.element.shadowRoot.append(a)}componentWillLoad(){this.messages=r(this.element).messages}componentDidLoad(){this.watchSize(this.size),this.watchFullWidth(this.fullWidth),this.watchColumns(this.columns),this.renderTable(this.element.querySelector("table"))}componentWillUpdate(){this.renderTable(this.element.shadowRoot.querySelector("table"))}get element(){return this}static get watchers(){return{size:[{watchSize:0}],fullWidth:[{watchFullWidth:0}],columns:[{watchColumns:0}]}}static get style(){return'.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}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}@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-size:var(--mg-b-font-size-h1);font-weight:bold}h2,.mg-u-h2{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h2);font-weight:bold}h3,.mg-u-h3{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h3);font-weight:bold}h4,.mg-u-h4{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h4);font-weight:bold}h5,.mg-u-h5{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h5);font-weight:bold}h6,.mg-u-h6{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h6);font-weight:bold}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:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);border-radius:var(--mg-b-size-12);background:var(--mg-b-color-light);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{height:var(--mg-c-table-header-cell-height)}.mg-c-table thead,.mg-c-table tfoot{background-color:var(--mg-b-color-neutral-10)}.mg-c-table thead td,.mg-c-table tfoot td,.mg-c-table th{font-weight:600}.mg-c-table tr th,.mg-c-table tr td{border-block-end:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-table tfoot tr:last-of-type th,.mg-c-table tfoot tr:last-of-type td{border-block-end:none}.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{display:inline-flex;align-items:center;padding:0;border:none;margin:0;background:none;color:inherit;font-size:inherit;font-weight:600;gap:var(--mg-b-size-4);text-align:left}.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: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:var(--mg-b-color-neutral-20)}'}},[1,"mg-table",{size:[1],fullWidth:[4,"full-width"],columns:[16],classCollection:[32]},void 0,{size:[{watchSize:0}],fullWidth:[{watchFullWidth:0}],columns:[{watchColumns:0}]}]);function d(){"undefined"!=typeof customElements&&["mg-table","mg-icon"].forEach((e=>{switch(e){case"mg-table":customElements.get(t(e))||customElements.define(t(e),g);break;case"mg-icon":customElements.get(t(e))||s()}}))}d();const b=g,f=d;export{b as MgTable,f as defineCustomElement}

package/dist/components/mg-tabs.js

@@ -1,6 +1 @@
-import { M as MgTabs$1, d as defineCustomElement$1 } from './mg-tabs2.js';
-
-const MgTabs = MgTabs$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgTabs, defineCustomElement };
+import{M as s,d as o}from"./mg-tabs2.js";const t=s,a=o;export{t as MgTabs,a as defineCustomElement}