@ebrains/components 0.2.0-alpha.0 → 0.4.0-alpha.0

package/dist/collection/components/eds-section/eds-section-core/eds-section-core.stories.js

@@ -30,7 +30,13 @@ const Template = (args) => `
       <p>This is the content inside the section.</p>
     </eds-section-core>
   `;
-const TemplateForm = (args) => `
+export const Default = Template.bind({});
+Default.args = {
+    tag: 'section',
+    sectionTitle: 'Default Section Title',
+    headingLevel: 'h2'
+};
+/*const TemplateForm = (args) => `
   <eds-section-core
     tag="${args.tag}"
     section-title="${args.sectionTitle}"
@@ -60,15 +66,10 @@ const TemplateForm = (args) => `
 
   </eds-section-core>
 `;
-export const Default = Template.bind({});
-Default.args = {
-    tag: 'section',
-    sectionTitle: 'Default Section Title',
-    headingLevel: 'h2'
-};
+
 export const WithForm = TemplateForm.bind({});
 WithForm.args = {
-    tag: 'section',
-    sectionTitle: 'This a slotted Form',
-    headingLevel: 'h2'
-};
+  tag: 'section',
+  sectionTitle: 'This a slotted Form',
+  headingLevel: 'h2'
+};*/

package/dist/collection/components/eds-table/eds-table.css

@@ -135,4 +135,8 @@ table {
 
 .text-center {
     text-align: center;
+}
+
+.break-words {
+    overflow-wrap: anywhere;
 }

package/dist/collection/components/eds-table/eds-table.js

@@ -1,3 +1,4 @@
+import { sendAnalytics } from "../../../../../../../packages/utils/src/index";
 import { h } from "@stencil/core";
 /**
  * `EdsTable` is a customizable data table component with support for dynamic data fetching, column configuration, pagination, and search functionality.
@@ -12,13 +13,14 @@ import { h } from "@stencil/core";
  */
 export class EdsTable {
     constructor() {
-        this.minWidth = 400; // Minimum width for components in px
         this.data = null;
         this.endpoint = null;
         this.config = {};
         this.rowsPerPage = 10;
         this.paginationEnabled = true;
         this.searchEnabled = false;
+        this.hostWidth = undefined;
+        this.columnSize = 'default';
         this.tableData = [];
         this.columns = [];
         this.currentPage = 1;
@@ -97,10 +99,24 @@ export class EdsTable {
     }
     handlePageChange(newPage) {
         this.currentPage = newPage;
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: `${this.hostEl.tagName.toLowerCase()}/eds-pagination`,
+            name: `${newPage}` || '',
+            action: 'page'
+        });
     }
     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;
@@ -116,23 +132,40 @@ export class EdsTable {
     getVisibleColumnsCount() {
         return this.columns.filter((column) => { var _a; return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden); }).length;
     }
+    divisionFactor() {
+        let divisionFactor = 1;
+        if (this.columnSize === 'medium') {
+            divisionFactor = 2;
+        }
+        else if (this.columnSize === 'large') {
+            divisionFactor = 4;
+        }
+        return divisionFactor;
+    }
     render() {
+        // Get the paginated rows and calculate the last page.
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-        // Calculate column width based on minWidth and number of columns
-        //const columnWidth = Math.max(this.minWidth / this.columns.length, 100);
-        // Use the visible column count to calculate the column width
+        // Determine the number of visible columns (i.e., those not hidden via config)
         const visibleColumnsCount = this.getVisibleColumnsCount();
-        const columnWidth = visibleColumnsCount > 0 ? Math.max(this.minWidth / visibleColumnsCount, 100) : 100;
-        return (h("div", { key: 'c5e50673eb1ed5cf00e0294885bf9cd6d13f9366', class: "container", style: { minWidth: `${this.minWidth}px` } }, h("div", { key: '0e0814a8cb5ae1e11538a26cba630e59d39dde74' }, this.searchEnabled && (h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
+        /// Calculate container width based on the optional prop or parent's measured width.
+        const containerWidth = this.hostWidth && this.hostWidth.trim() !== ''
+            ? Number(this.hostWidth)
+            : this.hostEl.parentElement instanceof HTMLElement
+                ? this.hostEl.parentElement.getBoundingClientRect().width
+                : this.hostEl.getRootNode().host instanceof HTMLElement
+                    ? this.hostEl.getRootNode().host.getBoundingClientRect().width
+                    : 400;
+        const columnWidth = visibleColumnsCount > 0 ? Math.floor((containerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
+        return (h("div", { key: '69fd87330d2049eeb91751c781c7aa753fa89883' }, this.searchEnabled && (h("div", { key: '2f9680dd17b852b140fe560f7979e1dd58236c5a' }, 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: '65e0c9057c313f220655ecd7692a83c932f441b3', class: "mt-20" }, h("table", { key: '9e77153c2e0983f7598a21ef55ebcf3107655e09', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '38e5ac67ffae80d896c29357615d19b5dfcc52d3' }, h("tr", { key: '526c5b30da0a2aa97bb90f5b473b3e9ea41dde6b', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'd67edb24308e526a3e860a90250d58cf8bfee9c8', class: "mt-20" }, h("table", { key: '9a2ef219110e459ac670a0f9c2e62c600f6b5acd', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '81bae222447e805d06642dda19903d5bf99f2b01' }, h("tr", { key: '582d7ea661823b81ccdf3adc9769fe53cf56f04c', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
             var _a;
-            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("th", { class: "m-0 px-20 py-8 border border-softer f-ui-02", style: { minWidth: `${columnWidth}px` } }, column));
-        }))), h("tbody", { key: '5a10525ed86eac82291746be4c6cce5f65942d2d' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            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}px` } }, column));
+        }))), h("tbody", { key: 'ce7f87e665c394c5e9f2201ef2658e888ea07948' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
             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 px-20 py-8 f-ui-2", style: { minWidth: `${columnWidth}px` } }, this.renderCell(row[column], column)));
-        }))))))), h("div", { key: 'af1183fd3e635c7d7ac982231adfdd9d892f6979', class: "mt-20" }, this.shouldEnablePagination() && (h("eds-pagination", { key: 'a5de7f25054c2d67f0788bfd2bc37d07f46de02c', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+            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}px` } }, this.renderCell(row[column], column)));
+        }))))))), this.shouldEnablePagination() && (h("div", { key: '0fe6aed0d03c3aa491cd1bb17cd3bdc1e35372a0', class: "mt-20" }, h("eds-pagination", { key: '5192f3f4b2ee93d5864d1afed3341a122c826d97', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     static get is() { return "eds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -189,7 +222,7 @@ export class EdsTable {
                 "mutable": false,
                 "complexType": {
                     "original": "| string\n    | {\n        [key: string]: {\n          hidden?: boolean;\n          format?: 'uppercase' | 'bold' | 'code';\n        };\n      }",
-                    "resolved": "string | { [key: string]: { hidden?: boolean; format?: \"bold\" | \"code\" | \"uppercase\"; }; }",
+                    "resolved": "string | { [key: string]: { hidden?: boolean; format?: \"code\" | \"uppercase\" | \"bold\"; }; }",
                     "references": {}
                 },
                 "required": false,
@@ -255,6 +288,41 @@ export class EdsTable {
                 "attribute": "search-enabled",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "hostWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "host-width",
+                "reflect": false
+            },
+            "columnSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'medium' | 'large'",
+                    "resolved": "\"default\" | \"large\" | \"medium\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional property to control the column sizing mode.\n- 'default' uses containerWidth / visibleColumns.\n- 'medium' divides that result by 2.\n- 'large' divides that result by 4."
+                },
+                "attribute": "column-size",
+                "reflect": false,
+                "defaultValue": "'default'"
             }
         };
     }
@@ -276,6 +344,9 @@ export class EdsTable {
             }, {
                 "propName": "config",
                 "methodName": "handleConfigChange"
+            }, {
+                "propName": "data",
+                "methodName": "parseData"
             }];
     }
 }

package/dist/collection/components/eds-table/eds-table.stories.js

@@ -43,57 +43,6 @@ export default {
         searchEnabled: true
     }
 };
-export const Default = {
-    render: (args) => `
-    <eds-table 
-      data='${JSON.stringify(args.data)}'
-      config='${JSON.stringify(args.config)}'>
-    </eds-table>`
-};
-export const WithHiddenColumn = {
-    render: (args) => `
-    <eds-table 
-      data='${JSON.stringify(args.data)}'
-      config='${JSON.stringify(args.config)}'>
-    </eds-table>`,
-    args: {
-        data: [
-            { Property: 'username', Type: 'string', Required: 'Yes' },
-            { Property: 'password', Type: 'string', Required: 'Yes' },
-            { Property: 'email', Type: 'string', Required: 'No' }
-        ],
-        config: {
-            Required: { hidden: true }
-        }
-    }
-};
-export const WithEndpoint = {
-    render: (args) => `
-    <eds-table 
-      endpoint="${args.endpoint}">
-    </eds-table>`,
-    args: {
-        endpoint: 'http://127.0.0.1:5000/api/info'
-    }
-};
-export const WithCustomFormats = {
-    render: (args) => `
-    <eds-table 
-      data='${JSON.stringify(args.data)}'
-      config='${JSON.stringify(args.config)}'>
-    </eds-table>`,
-    args: {
-        data: [
-            { Property: 'username', Type: 'string', Role: 'User' },
-            { Property: 'password', Type: 'password', Role: 'Admin' }
-        ],
-        config: {
-            Property: { format: 'code' },
-            Type: { format: 'uppercase' },
-            Role: { format: 'bold' }
-        }
-    }
-};
 // Sample data for the table
 const sampleData = [
     { name: 'Alice', age: 25, occupation: 'Engineer' },
@@ -107,48 +56,7 @@ const sampleData = [
     { name: 'Ian', age: 27, occupation: 'Developer' },
     { name: 'Jackie', age: 33, occupation: 'Consultant' }
 ];
-const tableData = JSON.stringify(sampleData);
-export const BasicPagination = {
-    render: (args) => `
-    <eds-table
-      data=${tableData}
-      rows-per-page="${args.rowsPerPage}"
-      pagination-enabled="${args.paginationEnabled}"
-    ></eds-table>
-  `,
-    args: {
-        rowsPerPage: 5,
-        paginationEnabled: true
-    }
-};
-export const CustomRowsPerPage = {
-    render: (args) => `
-    <eds-table
-      data=${tableData}
-      rows-per-page="${args.rowsPerPage}"
-      pagination-enabled="${args.paginationEnabled}"
-    ></eds-table>
-  `,
-    args: {
-        rowsPerPage: 3,
-        paginationEnabled: true
-    }
-};
-export const CustomRowsPerPageEndpoint = {
-    render: (args) => `
-    <eds-table
-      rows-per-page="${args.rowsPerPage}"
-      pagination-enabled="${args.paginationEnabled}"
-      endpoint="${args.endpoint}"
-    ></eds-table>
-  `,
-    args: {
-        rowsPerPage: 3,
-        paginationEnabled: true,
-        endpoint: 'http://127.0.0.1:5000/api/info'
-    }
-};
-export const CompleteExample = {
+export const Default = {
     render: (args) => `
     <eds-table
       data='${JSON.stringify(args.data)}'
@@ -171,3 +79,16 @@ export const CompleteExample = {
         endpoint: '' // Leave empty for manual data entry
     }
 };
+export const WithEndpoint = {
+    render: (args) => `
+    <eds-table 
+      endpoint="${args.endpoint}"
+      rows-per-page="${args.rowsPerPage}"
+      pagination-enabled="${args.paginationEnabled}"
+      search-enabled="${args.searchEnabled}"
+      host-width="600">
+    </eds-table>`,
+    args: {
+        endpoint: 'http://127.0.0.1:5001/api/info'
+    }
+};

package/dist/collection/components/eds-timeline/eds-timeline.js

@@ -1,24 +1,35 @@
 import { h } from "@stencil/core";
-/**
- * @internal
- */
 export class EdsTimeline {
     constructor() {
+        this.events = undefined;
         this.selectedEvent = null;
         this.parsedEvents = [];
-        this.events = undefined;
     }
     parseEvents(newValue) {
-        try {
-            const parsed = JSON.parse(newValue);
-            this.parsedEvents = Array.isArray(parsed)
-                ? parsed.map((event) => (Object.assign(Object.assign({}, event), { completed: event.completed === 'true' || event.completed === true // Ensure boolean conversion
-                })))
-                : [];
+        let parsed;
+        // If events is a string, try to parse it
+        if (typeof newValue === 'string') {
+            try {
+                parsed = JSON.parse(newValue);
+            }
+            catch (e) {
+                // eslint-disable-next-line
+                console.error('Error parsing timeline events JSON', e);
+                parsed = [];
+            }
+        }
+        // If events is already an array, use it directly
+        else if (Array.isArray(newValue)) {
+            parsed = newValue;
         }
-        catch (e) {
-            this.parsedEvents = [];
+        // Otherwise, default to an empty array
+        else {
+            parsed = [];
         }
+        // Map over the parsed events to ensure boolean conversion for "completed"
+        this.parsedEvents = Array.isArray(parsed)
+            ? parsed.map((event) => (Object.assign(Object.assign({}, event), { completed: event.completed === 'true' || event.completed === true })))
+            : [];
     }
     componentWillLoad() {
         this.parseEvents(this.events);
@@ -45,7 +56,7 @@ export class EdsTimeline {
         }
     }
     render() {
-        return (h("div", { key: '8f40212e04ab17cac2688df56b7330041a605a86', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '68421d4fce08e881e2494b5c504bd5db7570e34f', class: "relative" }, h("div", { key: 'e43edd7fba6d30b3dd48ffb2b467ff24b46c8da7', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '56dd7cebb5a2761547a5e24ec76652f7052906b2', class: "space-y-16" }, this.parsedEvents.map((event, index) => (h("div", { class: "relative flex" }, h("div", { class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}` }, index % 2 === 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
+        return (h("div", { key: '6016cb89d3fe3250482b42d8a0bf500fe18cee5d', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '994cc7af75950a0f09d108804efff796602aeb93', class: "relative" }, h("div", { key: '77b15ae60feb380ea20c6466b49d0efd5d8f5180', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '60bb384ce4eedd7bfc3b15a7a637e2b89318d619', class: "space-y-16" }, this.parsedEvents.map((event, index) => (h("div", { class: "relative flex" }, h("div", { class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}` }, index % 2 === 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]
                 : [{ label: 'pending', style: 'default' }]), onClick: () => this.handleEventClick(event) }))), h("div", { class: "flex items-center justify-center relative" }, event.completed ? (h("div", { class: "w-32 h-32 bg-accent rounded-full shadow flex items-center justify-center" })) : (h("div", { class: "w-32 h-32 bg-strong rounded-full shadow flex items-center justify-center" }))), h("div", { class: `w-1/2 ${index % 2 !== 0 ? 'pl-4' : ''}` }, index % 2 !== 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]
@@ -58,15 +69,15 @@ export class EdsTimeline {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | any[]",
+                    "resolved": "any[] | string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Accepts a JSON string of timeline events."
+                    "text": "Accepts a JSON string or object of timeline events."
                 },
                 "attribute": "events",
                 "reflect": false

package/dist/collection/components/eds-toast/eds-toast.js

@@ -26,6 +26,27 @@ export class EdsToast {
         this.duration = 5000;
         this.visible = true;
     }
+    /**
+     * Lifecycle method that sets up the initial panel height and adds a resize event listener
+     * to recalculate height on window resize.
+     */
+    componentDidLoad() {
+        // Emit context for each eds-button element after the component is fully loaded
+        const btn = this.el.querySelector('eds-button');
+        this.emitContext(btn);
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given button element.
+     */
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
     connectedCallback() {
         // Auto-dismiss the toast after the specified duration
         this.dismissTimeout = setTimeout(this.dismissToast, this.duration);

package/dist/collection/components/eds-tooltip/eds-tooltip.js

@@ -1,3 +1,4 @@
+import { sendAnalytics } from "../../../../../../../packages/utils/src/index";
 import { h } from "@stencil/core";
 /**
  * `EdsTooltip` dynamically positions a tooltip centered above the slotted element.
@@ -14,9 +15,17 @@ export class EdsTooltip {
      * Show the tooltip and update its position.
      */
     async showTooltip() {
+        var _a;
         await this.updateTooltipPosition();
         this.isPositioned = true;
         this.isVisible = true;
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.content) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'hover'
+        });
     }
     /**
      * Hide the tooltip.
@@ -81,7 +90,7 @@ export class EdsTooltip {
         }
     }
     render() {
-        return (h("div", { key: '5edce5e2ca66ef992ad22604a5017e5ab02f846b', class: "relative" }, h("slot", { key: '74c9ef5978e023a45eb9c25c18f95f1875c19b13' }), this.isVisible && this.isPositioned && this.content && (h("div", { key: '4cc3ea40bd81308eb7685b5c1065e8bd30f99191', class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6", role: "tooltip", style: {
+        return (h("div", { key: '673ab0ee31378410f9c83bb5fd37b27d00a7b018', class: "relative" }, h("slot", { key: '0c0138dfdf9aafecc1e0e925c84d4b0ca957f82d' }), this.isVisible && this.isPositioned && this.content && (h("div", { key: '798d01cf631f2e5b3af9d9bb11a847041a6ee2ba', class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6", role: "tooltip", style: {
                 top: this.tooltipStyle.top,
                 left: this.tooltipStyle.left,
                 transform: this.tooltipStyle.transform

package/dist/collection/components/eds-trl/eds-trl.js

@@ -7,13 +7,23 @@ export class EdsTrl {
         this.applications = undefined;
     }
     getParsedApplications() {
-        try {
-            return JSON.parse(this.applications || '[]');
+        let apps = [];
+        // If applications is a string, attempt to parse it as JSON.
+        if (typeof this.applications === 'string') {
+            try {
+                apps = JSON.parse(this.applications || '[]');
+            }
+            catch (error) {
+                // eslint-disable-next-line
+                console.error('Invalid applications trl JSON', error);
+                apps = [];
+            }
         }
-        catch (error) {
-            //console.error('Invalid applications JSON', error);
-            return [];
+        // If applications is already an array, use it directly.
+        else if (Array.isArray(this.applications)) {
+            apps = this.applications;
         }
+        return apps;
     }
     calculateProgress(currentTrl) {
         const maxTrl = 9;
@@ -21,37 +31,34 @@ export class EdsTrl {
     }
     render() {
         const apps = this.getParsedApplications();
-        if (apps.length === 0) {
-            return h("p", null, "No applications to display.");
-        }
-        return (h("div", { class: "container mx-auto px-4 py-8" }, h("table", { class: "table-auto w-full border-collapse border border-gray-200" }, h("thead", null, h("tr", { class: "bg-gray-100" }, h("th", { class: "border border-gray-300 px-4 py-2 text-left" }, "Application"), h("th", { class: "border border-gray-300 px-4 py-2 text-left" }, "Current TRL Stage"), h("th", { class: "border border-gray-300 px-4 py-2 text-left" }, "Progress"))), h("tbody", null, apps.map((app) => (h("tr", null, h("td", { class: "border border-gray-300 px-4 py-2" }, app.name), h("td", { class: "border border-gray-300 px-4 py-2" }, "TRL ", app.currentTrl), h("td", { class: "border border-gray-300 px-4 py-2" }, h("eds-progress-bar", { value: this.calculateProgress(app.currentTrl) })))))))));
-    }
-    static get is() { return "eds-trl"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["eds-trl.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-trl.css"]
+        // Map applications into table-friendly data.
+        const tableData = apps.map((app) => ({
+            Application: app.name,
+            'Current TRL Stage': `TRL ${app.currentTrl}`,
+            Progress: (h("div", { class: "w-[200px]" }, h("eds-progress-bar", { value: this.calculateProgress(app.currentTrl) })))
+        }));
+        const tableConfig = {
+            Application: { format: 'code' },
+            'Current TRL Stage': { format: 'text' }
         };
+        return (h("div", { key: '868a7c45e6495d7a2ed8a4ad2974ac31f74535a6', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: 'ed3e2a949d0e1d66a5e80018fa5fcac9bbe64620', data: JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
     }
+    static get is() { return "eds-trl"; }
     static get properties() {
         return {
             "applications": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | any[]",
+                    "resolved": "any[] | string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accepts a JSON string or an array of application objects."
                 },
                 "attribute": "applications",
                 "reflect": false

package/dist/collection/eds-docs-ui/colors/color-palette/primary.js

@@ -33,7 +33,7 @@ export class ColorPrimaryPalette {
         ];
     }
     render() {
-        return (h("ul", { key: '20dce1081c2a9213d9df3bb19f14445881892809', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (h("ul", { key: '581f0978ebeda33a156d2baf3cc41a10897da1cf', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
     static get is() { return "color-primary-palette"; }
 }

package/dist/collection/eds-docs-ui/colors/color-palette/secondary.js

@@ -58,7 +58,7 @@ export class ColorSecondaryPalette {
         this.show = undefined;
     }
     render() {
-        return (h("ul", { key: '1eb0e9d0b681be4049209e60ab72bfd36cb09731', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (h("ul", { key: '7f2e8e7efa207bedaa1e19c0f7d87459a5c22693', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
     static get is() { return "color-secondary-palette"; }
     static get properties() {

package/dist/collection/eds-docs-ui/colors/color-palette/support.js

@@ -49,7 +49,7 @@ export class ColorSupportPalette {
         ];
     }
     render() {
-        return (h("ul", { key: 'c3dfdc3ab9ac3dcfbe1b82c7725d548d9f10a7ad', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC || 'N/A'), h("span", { class: "f-body-02" }, color.pantoneU || 'N/A'))))))));
+        return (h("ul", { key: '6cd3d5f3128a49e9ac77abc11f46ca880bc6c195', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC || 'N/A'), h("span", { class: "f-body-02" }, color.pantoneU || 'N/A'))))))));
     }
     static get is() { return "color-support-palette"; }
 }

package/dist/collection/eds-docs-ui/colors/gradient-palette/primary.js

@@ -33,7 +33,7 @@ export class GradientPrimaryPalette {
         ];
     }
     render() {
-        return (h("ul", { key: 'f943b364e509b687251bc9f75a6de5292f31533e', class: "gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (h("ul", { key: '922dbe263e6db86ed17d98d65d38e1d6f4ef25df', class: "gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
                 background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
             } }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16" }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }