@mgdis/mg-components 6.20.0 → 6.22.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 o,t as i,i as r,c as n}from"./index2.js";import{i as l}from"./index3.js";import{d as s}from"./mg-icon2.js";const h=["small","medium","large","xlarge"],c=["left","center","right"],d=["string","numeric","date"],m=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.classBorderHide="mg-c-table--border-hide",this.alignmentStylesheet=new CSSStyleSheet,this.size="medium",this.fullWidth=!1,this.borderHide=!1,this.classCollection=new o([this.componentClass])}watchSize(t,e){if(!h.includes(t))throw Error(`<mg-table> prop "size" must be one of: ${h.join(", ")}. Passed value: ${i(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)}watchBorderHide(t){t?this.classCollection.add(this.classBorderHide):this.classCollection.delete(this.classBorderHide)}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&&c.includes(e.align)||void 0!==e.sortable&&"boolean"==typeof e.sortable||void 0!==e.datatype&&d.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: ${i(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((([o,i])=>{if(void 0!==i.align?this.alignmentStylesheet.insertRule(`.${this.componentClass} th:nth-child(${o}),td:nth-child(${o}){text-align:${i.align};&>*{display:inline-block;}}`):"numeric"===i.datatype&&this.alignmentStylesheet.insertRule(`.${this.componentClass} th:nth-child(${o}),td:nth-child(${o}){text-align:right;&>*{display:inline-block;}}`),i.sortable){e=!0;const r=t.querySelector(`thead td:nth-child(${o}),thead th:nth-child(${o})`),n=document.createElement("button");n.classList.add("mg-c-table__sort-button");const l=r.innerHTML;r.innerHTML="",n.innerHTML=l;const s=document.createElement("mg-icon");s.setAttribute("icon","arrows-up-down"),n.append(s),r.append(n),n.addEventListener("click",(()=>{t.querySelectorAll(`thead td:not(:nth-child(${o})) [aria-pressed],thead th:not(:nth-child(${o})) [aria-pressed]`).forEach((t=>{t.removeAttribute("aria-pressed"),t.querySelector("mg-icon").setAttribute("icon","arrows-up-down")})),t.querySelectorAll(`thead td:not(:nth-child(${o}))[aria-sort],thead th:not(:nth-child(${o}))[aria-sort]`).forEach((t=>{t.removeAttribute("aria-sort")})),n.setAttribute("aria-pressed","true");let e=r.getAttribute("aria-sort");r.setAttribute("aria-sort",[null,"none"].includes(e)?"ascending":"ascending"===e?"descending":"none"),e=r.getAttribute("aria-sort");const l=n.querySelector("mg-icon");let s="arrows-up-down";if("ascending"===e?s="arrow-up":"descending"===e&&(s="arrow-down"),l.setAttribute("icon",s),"none"===e)return void a.forEach((e=>t.querySelector("tbody").append(e)));const h=Array.from(t.querySelectorAll("tbody tr"));h.sort(((t,a)=>{var r,n;const l=t.querySelector(`td:nth-child(${o}),th:nth-child(${o})`),s=a.querySelector(`td:nth-child(${o}),th:nth-child(${o})`);return((t,e,a,o)=>{if(a){const a=t;t=e,e=a}return"date"===o?new Date(t).getTime()-new Date(e).getTime():t.localeCompare(e,void 0,{numeric:"numeric"===o})})(null!==(r=l.dataset.sort)&&void 0!==r?r:l.textContent,null!==(n=s.dataset.sort)&&void 0!==n?n:s.textContent,"descending"===e,i.datatype)})),h.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 o=t.querySelector("caption");null===o&&e&&(o=document.createElement("caption"),t.prepend(o)),null!==o&&(o.className="mg-u-visually-hidden",r(o.id)||o.setAttribute("id",n(this.componentClass+"-caption")),a.setAttribute("aria-labelledby",o.id),e&&(o.innerHTML=`${o.innerHTML} ${this.messages.table.sortableCaption}`.trim())),a.append(t);const i=this.element.shadowRoot.querySelector("."+this.componentWrapperClass);null!==i&&i.remove(),this.element.shadowRoot.append(a)}componentWillLoad(){this.messages=l(this.element).messages}componentDidLoad(){this.watchSize(this.size),this.watchFullWidth(this.fullWidth),this.watchBorderHide(this.borderHide),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}],borderHide:[{watchBorderHide: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);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-c-table-color-head-foot-background, var(--mg-b-color-neutral-10));color:var(--mg-b-color-neutral-90)}.mg-c-table tfoot tr:first-of-type :where(th,td){border-block-start:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-table thead td,.mg-c-table tfoot td,.mg-c-table th{font-weight:600}.mg-c-table tr :where(th,td){border-block-end:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-table tbody:last-of-type tr:last-of-type :where(th,td),.mg-c-table tfoot tr:last-of-type :where(th,td){border-block-end:none}.mg-c-table tfoot :where(th,td)[rowspan][scope=rowgroup],.mg-c-table tbody:last-of-type :where(th,td)[rowspan][scope=rowgroup]{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.mg-c-table--size-large{--mg-c-table-cell-height:calc(var(--mg-b-size-min-height) + 2 * var(--mg-b-size-8))}.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.mg-c-table--full-width{width:100%}.mg-c-table.mg-c-table--border-hide{border:unset;border-radius:unset}.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"],borderHide:[4,"border-hide"],columns:[16],classCollection:[32]},void 0,{size:[{watchSize:0}],fullWidth:[{watchFullWidth:0}],borderHide:[{watchBorderHide:0}],columns:[{watchColumns:0}]}]);function g(){"undefined"!=typeof customElements&&["mg-table","mg-icon"].forEach((e=>{switch(e){case"mg-table":customElements.get(t(e))||customElements.define(t(e),m);break;case"mg-icon":customElements.get(t(e))||s()}}))}g();const b=m,f=g;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}