@ebrains/components 0.9.3-beta → 1.1.0

package/dist/components/eds-table2.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as sendAnalytics } from './analytics.js';
 import { p as parseData } from './sharedUtils.js';
 import { d as defineCustomElement$a } from './eds-icon-wrapper2.js';
@@ -12,7 +12,7 @@ import { d as defineCustomElement$3 } from './eds-input-select2.js';
 import { d as defineCustomElement$2 } from './eds-link2.js';
 import { d as defineCustomElement$1 } from './eds-pagination2.js';
 
-const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}";
+const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-8{padding-left:0.5rem;padding-right:0.5rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}";
 const EdsTableStyle0 = edsTableCss;
 
 const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLElement {
@@ -20,6 +20,7 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.rowaction = createEvent(this, "rowaction", 7);
         this.handleResize = () => {
             this.updateContainerWidth();
         };
@@ -31,6 +32,10 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         this.searchEnabled = false;
         this.hostWidth = undefined;
         this.columnSize = 'default';
+        this.actions = [];
+        this.actionTemplate = undefined;
+        this.parsedActions = [];
+        this.dataColumns = [];
         this.tbData = [];
         this.columns = [];
         this.currentPage = 1;
@@ -45,8 +50,18 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
     handleConfigChange() {
         this.parseConfig();
     }
+    handleActionsChange() {
+        try {
+            this.parsedActions = typeof this.actions === 'string' ? JSON.parse(this.actions) : this.actions;
+        }
+        catch (_a) {
+            console.error('Failed to parse actions JSON');
+            this.parsedActions = [];
+        }
+    }
     componentWillLoad() {
         this.parseConfig();
+        this.handleActionsChange();
         this.data ? this.parseData() : this.endpoint && this.fetchData();
     }
     componentDidLoad() {
@@ -75,24 +90,20 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
     parseData() {
         try {
             this.tbData = parseData(this.data);
-            //this.tbData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
             this.totalRows = this.tbData.length;
             this.updateColumns();
             this.currentPage = 1;
         }
         catch (error) {
-            // eslint-disable-next-line
             console.error('Failed to parse data:', error);
             this.tbData = [];
         }
     }
     parseConfig() {
         try {
-            //this.parsedConfig = parseData(this.config);
             this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
         }
         catch (error) {
-            // eslint-disable-next-line
             console.error('Failed to parse config:', error);
             this.parsedConfig = {};
         }
@@ -104,7 +115,6 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
             this.data = data;
         }
         catch (error) {
-            // eslint-disable-next-line
             console.error('Failed to fetch data:', error);
         }
     }
@@ -140,24 +150,52 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
     handleSearch(event) {
         this.searchQuery = event.target.value;
         this.currentPage = 1;
-        /*sendAnalytics({
-          category: 'ui-component',
-          parentContext: null,
-          tag: `${this.hostEl.tagName.toLowerCase()}/eds-input-field/search`,
-          name: `${this.searchQuery}` || '',
-          action: 'page'
-        });*/
     }
     renderCell(value, column) {
         var _a;
         const format = (_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.format;
         return format === 'uppercase' ? (value === null || value === void 0 ? void 0 : value.toString().toUpperCase()) : format === 'svg' ? (h("div", { innerHTML: value })) : format === 'bold' ? (h("strong", null, value)) : format === 'code' ? (h("code", null, value)) : (value);
     }
+    /**
+     * Renders one action (button or checkbox) for a specific action‐name.
+     * Used by the “Actions” column below.
+     */
+    renderSingleActionCell(actionName, row) {
+        var _a;
+        const act = this.parsedActions.find((a) => a.name === actionName);
+        if (this.actionTemplate) {
+            return this.actionTemplate(row);
+        }
+        const type = act.type || 'button';
+        if (type === 'checkbox') {
+            const boundField = (_a = act.field) !== null && _a !== void 0 ? _a : act.name;
+            const checked = !!row[boundField];
+            return (h("eds-input-field", { name: `chc-${actionName}`, label: act.label, type: "checkbox", checked: checked, onChange: (e) => this.emitAction(act.name, row, e.target.checked) }));
+        }
+        return h("eds-link", { label: act.label, intent: "weak", onClick: () => this.emitAction(act.name, row) });
+    }
+    emitAction(actionName, row, checked) {
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: `${this.hostEl.tagName.toLowerCase()}/action`,
+            name: actionName,
+            action: 'click'
+        });
+        this.rowaction.emit({ action: actionName, row, checked: !!checked });
+    }
     shouldEnablePagination() {
         return this.paginationEnabled && this.totalRows > this.rowsPerPage;
     }
     updateColumns() {
+        var _a, _b;
+        // 1) Grab all data‐keys from the first row (if any) as before:
         this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
+        // 2) Instead of pushing each action.name, we add just a single “actions” column
+        //    (you can call it anything; we’ll detect it in render())
+        if (((_b = (_a = this.parsedActions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 && this.tbData.length > 0) {
+            this.columns.push('actions');
+        }
     }
     getVisibleColumnsCount() {
         return this.columns.filter((column) => { var _a; return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden); }).length;
@@ -172,28 +210,45 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         }
         return divisionFactor;
     }
+    capitalize(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+    }
     render() {
-        // Use containerWidth state that is updated on resize.
         const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
-        // Calculate the number of visible columns and the column width.
         const visibleColumnsCount = this.getVisibleColumnsCount();
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-        return (h("div", { key: '9ac7ad4f02237c02eaf5d3b351ded21bce29bd6c' }, this.searchEnabled && (h("div", { key: '1cecf9a9089391c3bce72dd53a6f5ffa92692661' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
-            // @ts-ignore
-            onInput: (event) => this.handleSearch(event) }))), h("div", { key: '435bbfd0a4dd3ddd0a7766863cdd8c2eaf41eb8f', class: "mt-20" }, h("table", { key: '4785490532015b7069be068e80135220f37c3955', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '8a99a961cf350bca26b1f73b8ffd6c8e1c48378f' }, h("tr", { key: 'a4ee04e342687830e905a3bd5217e53e513f0167', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+        return (h("div", { key: '5034177431626ab2bfc5fd0118c006d11a4f6e96' }, this.searchEnabled && (h("div", { key: '86e1a6ffc4bed69f290b3a53031341ab276eaf04' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'bc11838d819ecf89c5ba1cc1cfe7ac0af0e82b59', class: "mt-20" }, h("table", { key: '97f16b65eb1d9387e9ca7588184c9e68c1afcc2e', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'f4d64ada28c225db1b224277513e663a99de1cec' }, h("tr", { key: 'c6a69e159cceada0f7143c0acb787e5c23242ae7', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
             var _a;
-            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, column));
-        }))), h("tbody", { key: '3c764ac7137d1b21f45003c6df5324e7d0db749f' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            // 3) For the “actions” column, override the header to “Actions”
+            if (col === 'actions') {
+                // You can choose a smaller min‐width here if you wish:
+                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, "Actions"));
+            }
+            // Otherwise, render column name or action label if you do want to override:
+            if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
+                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.capitalize(col)));
+            }
+            return null;
+        }))), h("tbody", { key: '133af82fdd1f820e853734ab48123cb3db527e15' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
             var _a;
-            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[column], column)));
-        }))))))), this.shouldEnablePagination() && (h("div", { key: '98a1179b45fbc1b2f079825c899410ef4faf8c45', class: "mt-20" }, h("eds-pagination", { key: '662c479139658ea7f3d2a3955c77e24d44dd6e74', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+            if (col === 'actions') {
+                // 4) Render ALL actions inside a single <td> for this row:
+                return (h("td", { class: "text-center border border-softer m-0 f-ui-02 break-words actions-cell", style: { minWidth: `${columnWidth - 4}px` } }, h("div", { style: { display: 'flex', gap: '0.5rem', justifyContent: 'center', flexWrap: 'wrap' } }, this.parsedActions.map((act) => (h("span", { style: { whiteSpace: 'nowrap' } }, this.renderSingleActionCell(act.name, row)))))));
+            }
+            if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
+                // Regular data cell:
+                return (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[col], col)));
+            }
+            return null;
+        }))))))), this.shouldEnablePagination() && (h("div", { key: '85032d06cd0ac5dae9b504d423fceba3cd074861', class: "mt-20" }, h("eds-pagination", { key: '8caf6f57960e222c04d45f57a5811cd7bd524f4c', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     get hostEl() { return this; }
     static get watchers() { return {
         "data": ["handleDataChange", "parseData"],
-        "config": ["handleConfigChange"]
+        "config": ["handleConfigChange"],
+        "actions": ["handleActionsChange"]
     }; }
     static get style() { return EdsTableStyle0; }
 }, [1, "eds-table", {
@@ -205,6 +260,10 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         "searchEnabled": [4, "search-enabled"],
         "hostWidth": [1, "host-width"],
         "columnSize": [1, "column-size"],
+        "actions": [1],
+        "actionTemplate": [16],
+        "parsedActions": [32],
+        "dataColumns": [32],
         "tbData": [32],
         "columns": [32],
         "currentPage": [32],
@@ -214,7 +273,8 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         "containerWidth": [32]
     }, undefined, {
         "data": ["handleDataChange", "parseData"],
-        "config": ["handleConfigChange"]
+        "config": ["handleConfigChange"],
+        "actions": ["handleActionsChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {