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

package/dist/esm/eds-login.entry.js

@@ -61,7 +61,7 @@ const EdsLogin = class {
         return this.authenticated ? 'Logout' : 'Login';
     }
     render() {
-        return (h("div", { key: '3e9fdf8fa303948f00da83a1c8c1efc35e2c3c1a' }, h("eds-button", { key: '452b1c6ba9dda0ae5570accedf5e61b8391aeadb', label: this.getBtnLabel(), intent: "primary", loading: false, disabled: false, pill: false, icon: "arrow-diagonal", size: "small", "icon-pos": "right", "aria-label": this.getBtnLabel(), "element-type": "button", triggerClick: this.authenticated ? this.handleLogout : this.handleLogin.bind(this) })));
+        return (h("eds-button", { key: '35f298ecf951d5b1087f988262ae7d312c5e2d38', label: this.getBtnLabel(), intent: "primary", "extra-class": "text-default", "aria-label": this.getBtnLabel(), triggerClick: this.authenticated ? this.handleLogout : this.handleLogin.bind(this) }));
     }
 };
 

package/dist/esm/eds-logo-variations.entry.js

@@ -0,0 +1,23 @@
+import { r as registerInstance, h } from './index-e96badea.js';
+
+const EdsLogoVariations = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tabIndex = undefined;
+    }
+    renderContent() {
+        switch (this.tabIndex) {
+            case 0:
+                return h("logo-variations-horizontal", null);
+            case 1:
+                return h("logo-variations-vertical", null);
+            default:
+                return h("p", null, "Content not available.");
+        }
+    }
+    render() {
+        return h("div", { key: '9d6ce0e75030d6e636aab423181b0ce999f6f1b0', class: "container" }, this.renderContent());
+    }
+};
+
+export { EdsLogoVariations as eds_logo_variations };

package/dist/esm/{eds-pagination.entry.js → eds-pagination_2.entry.js}

@@ -205,4 +205,160 @@ const EdsPagination = class {
 };
 EdsPagination.style = EdsPaginationStyle0;
 
-export { EdsPagination as eds_pagination };
+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 EdsTableStyle0 = edsTableCss;
+
+const EdsTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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;
+        this.parsedConfig = {};
+        this.totalRows = 0;
+        this.searchQuery = '';
+    }
+    handleDataChange() {
+        this.parseData();
+    }
+    handleConfigChange() {
+        this.parseConfig();
+    }
+    componentWillLoad() {
+        this.parseConfig();
+        this.data ? this.parseData() : this.endpoint && this.fetchData();
+    }
+    componentDidLoad() {
+        this.setupPaginationListener();
+    }
+    componentDidUpdate() {
+        this.setupPaginationListener();
+    }
+    parseData() {
+        try {
+            this.tableData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
+            this.totalRows = this.tableData.length;
+            this.updateColumns();
+            this.currentPage = 1;
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Failed to parse data:', error);
+            this.tableData = [];
+        }
+    }
+    parseConfig() {
+        try {
+            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 = {};
+        }
+    }
+    async fetchData() {
+        try {
+            const response = await fetch(this.endpoint);
+            const data = await response.json();
+            this.data = data;
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Failed to fetch data:', error);
+        }
+    }
+    setupPaginationListener() {
+        if (!this.shouldEnablePagination()) {
+            return;
+        }
+        const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
+        if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
+            paginationEl.addEventListener('pageChange', (event) => this.handlePageChange(event.detail));
+            paginationEl.setAttribute('listener-attached', 'true');
+        }
+    }
+    getFilteredRows() {
+        return this.tableData.filter((row) => Object.values(row).some((value) => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
+    }
+    getPaginatedRows() {
+        const filteredRows = this.getFilteredRows();
+        this.totalRows = filteredRows.length;
+        const start = (this.currentPage - 1) * this.rowsPerPage;
+        return filteredRows.slice(start, start + this.rowsPerPage);
+    }
+    handlePageChange(newPage) {
+        this.currentPage = newPage;
+    }
+    handleSearch(event) {
+        this.searchQuery = event.target.value;
+        this.currentPage = 1;
+    }
+    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);
+    }
+    shouldEnablePagination() {
+        return this.paginationEnabled && this.totalRows > this.rowsPerPage;
+    }
+    updateColumns() {
+        this.columns = this.tableData.length > 0 ? Object.keys(this.tableData[0]) : [];
+    }
+    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);
+        // Determine the number of visible columns (i.e., those not hidden via config)
+        const visibleColumnsCount = this.getVisibleColumnsCount();
+        /// 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;
+        //console.log('containerWidth:', containerWidth);
+        const columnWidth = visibleColumnsCount > 0 ? Math.floor((containerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
+        console.log('columnWidth:', columnWidth);
+        return (h("div", { key: '178a33c07e6eae9d5edc170f842b6ef29ae21d9c' }, this.searchEnabled && (h("div", { key: 'f1212a4e515a1db218df28b71367c6ffa42e3063' }, 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: 'da6ac91e4b4d56780b044a3d35088e7722efe143', class: "mt-20" }, h("table", { key: '3c5734d2370b31d2445ed4f043a80bf87c6d4bde', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '3803a39b4c987ff39bf22e2567bd1bc3d513e1f4' }, h("tr", { key: 'a67fa7bdd48549c69cfa9721083a908ab036a559', 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 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth}px` } }, column));
+        }))), h("tbody", { key: '8e3f21bf2ee5b1bd84cfa93411ca2671f43ced45' }, 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 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth}px` } }, this.renderCell(row[column], column)));
+        }))))))), this.shouldEnablePagination() && (h("div", { key: '24931f257ef9ced394c1b5b1e589cacedd8035e6', class: "mt-20" }, h("eds-pagination", { key: '996b26ae090ee4fe08cc821fb11362d94879ff72', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+    }
+    get hostEl() { return getElement(this); }
+    static get watchers() { return {
+        "data": ["handleDataChange", "parseData"],
+        "config": ["handleConfigChange"]
+    }; }
+};
+EdsTable.style = EdsTableStyle0;
+
+export { EdsPagination as eds_pagination, EdsTable as eds_table };

package/dist/esm/eds-progress-bar.entry.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, h } from './index-e96badea.js';
+
+const edsProgressBarCss = ".w-full{width:100%}.h-full{height:100%}.bg-default{background-color:var(--grey-200)}.rounded-lg{border-radius:16px}.h-24{height:1.5rem}.border{border-width:1px}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.overflow-hidden{overflow:hidden}.bg-accent{background-color:var(--green-500)}.bg-\\[\\#0034CB\\]{--tw-text-opacity:1;background-color:rgb(0 52 203 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}";
+const EdsProgressBarStyle0 = edsProgressBarCss;
+
+const EdsProgressBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.value = 0;
+    }
+    /**
+     * Method to update the progress value externally.
+     * @param newValue The new progress value (0-100).
+     */
+    async updateValue(newValue) {
+        this.value = Math.min(100, Math.max(0, newValue)); // Clamp value between 0 and 100
+    }
+    render() {
+        const progressValue = this.value;
+        return (h("div", { key: '3131f56034a9fd72ca51e448bc2bcc6281669b25', class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, h("div", { key: 'f1665a254f8dbe1ccb9e512e5f2e7c1e5ab88c07', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
+    }
+};
+EdsProgressBar.style = EdsProgressBarStyle0;
+
+export { EdsProgressBar as eds_progress_bar };

package/dist/esm/eds-svg-repository.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-e96badea.js';
+import { r as registerInstance, h, g as getElement } from './index-e96badea.js';
 import { e as euSvg } from './eu-9ddde93a.js';
 import { h as hLogoColor } from './logo-color-7f1fd803.js';
 import { h as hLogoBlack, a as hLogoColorWhite, b as hLogoWhite, c as hLogoWhiteNoBg, v as vLogoColor, d as vLogoBlack, e as vLogoColorWhite, f as vLogoWhite, g as vLogoWhiteNoBg } from './logo-white-no-bg-f382f86f.js';
@@ -302,6 +302,11 @@ const EdsSvgRepository = class {
             icon: svgContent // Pass SVG content as innerHTML
         }));
     }
+    get hostWidth() {
+        // Instead of using window.innerWidth, use the parent element's width.
+        const containerWidth = this.hostEl.parentElement ? this.hostEl.parentElement.offsetWidth : 400;
+        return containerWidth;
+    }
     render() {
         const svgData = this.getSvgData();
         // Define table configuration
@@ -309,8 +314,9 @@ const EdsSvgRepository = class {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (h("eds-table", { key: 'd5b4cdb69826e22d716bf9bf4ff7fb9ab1f65044', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true }));
+        return (h("eds-table", { key: 'a1d4a1db6f0886a43513fc34707cdd6140ab685d', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true, "host-width": this.hostWidth }));
     }
+    get hostEl() { return getElement(this); }
 };
 
 export { EdsSvgRepository as eds_svg_repository };

package/dist/esm/eds-tabs-content.entry.js

@@ -114,11 +114,11 @@ const EdsTabsContent = class {
         });
     }
     render() {
-        return (h("div", { key: 'b1bfb55fbdee21a10fcc600d4c3ce2842684c519', class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: '1d1aeb094b6c350355abec1bf74928561a1c0f2d', class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: '5d5b04ddf5ddb60c2a9b49d19f4efe026cc2557d', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (h("div", { key: '7bc954d9251bd15b5e3a49d5c74b83805f802b07', class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: '1bfda380604f1eae1cc5be147a5e3e6b537e0396', class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: 'b2ed26b52fd629ec99b01c7dc8e612eae4f3886d', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             //const TabComponent = tab.active ? 'span' : 'a';
             const tabProps = this.getTabOptions(tab.active, index);
             return (h("eds-tab", Object.assign({}, tabProps, { label: tab.label, url: tab.url, active: index === this.activeIndex, ariaLabel: tab.ariaLabel, onClick: () => this.handleTabClick(index, tab.label) })));
-        })), h("slot", { key: '58e9281516d0a4485ba0779f9b79c0fa5e989166' }))));
+        })), h("slot", { key: '5072b877786a23358d540d6d242d5fbdb3c63d7f' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/eds-tabs.entry.js

@@ -48,12 +48,33 @@ const EdsTabs = class {
         this.setActiveIndex();
         this.tabChange.emit({ tabId: this.id, index: 0 });
     }
+    /**
+     * Parses the `links` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    /**
+     * Parses the `links` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
     parseTabs() {
-        try {
-            this.parsedTabs = JSON.parse(this.tabs);
+        if (Array.isArray(this.tabs)) {
+            this.parsedTabs = this.tabs;
         }
-        catch (error) {
-            //console.error('Invalid JSON format for tabs:', error);
+        else if (typeof this.tabs === 'string') {
+            try {
+                this.parsedTabs = JSON.parse(this.tabs);
+            }
+            catch (e) {
+                //console.error('Error parsing tabs prop:', e);
+                this.parsedTabs = [];
+            }
+        }
+        else {
+            // If the type is not an array or string, assume an empty array.
             this.parsedTabs = [];
         }
     }
@@ -103,7 +124,7 @@ const EdsTabs = class {
         });
     }
     render() {
-        return (h("div", { key: '25078703609dbdaa2025013d0e266b169c880c50', id: `${this.id}`, class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: '8aa1b4ab1f15692c912db3ee39486a59d634c6a5', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: '33728823ca0f039e1037a691da90b295cbe3f3ac', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (h("div", { key: '540bb667084b36ae2151ec39ef6b54a9ac6a4c4a', id: `${this.id}`, class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: 'f0266d39c943b82725ded757cce0b35fb85fa874', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: 'fcedf94e6f6c14635291d9c8e6d672efc8055433', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             //const TabComponent = tab.active ? 'span' : 'a';
             const tabProps = this.getTabOptions(tab.active, index);
             return (h("eds-tab", Object.assign({}, tabProps, { label: tab.label || tab.ariaLabel, url: tab.url, active: index === this.activeIndex, onClick: () => this.handleTabClick(index, tab.label) })));

package/dist/esm/eds-timeline.entry.js

@@ -0,0 +1,72 @@
+import { r as registerInstance, h, g as getElement } from './index-e96badea.js';
+
+const EdsTimeline = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.events = undefined;
+        this.selectedEvent = null;
+        this.parsedEvents = [];
+    }
+    parseEvents(newValue) {
+        let parsed;
+        // If events is a string, try to parse it
+        if (typeof newValue === 'string') {
+            try {
+                parsed = JSON.parse(newValue);
+            }
+            catch (e) {
+                console.error('Error parsing events JSON', e);
+                parsed = [];
+            }
+        }
+        // If events is already an array, use it directly
+        else if (Array.isArray(newValue)) {
+            parsed = newValue;
+        }
+        // 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);
+    }
+    componentDidLoad() {
+        const cards = this.el.querySelectorAll('eds-card-generic');
+        cards.forEach((card) => {
+            this.emitContext(card);
+        });
+    }
+    emitContext(cardElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        cardElement.dispatchEvent(event);
+    }
+    handleEventClick(event) {
+        this.selectedEvent = event;
+        if (this.modalRef && typeof this.modalRef.open === 'function') {
+            this.modalRef.open();
+        }
+    }
+    render() {
+        return (h("div", { key: '29e360adb412c67e7516f04671c276a12197d830', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: 'c556578a505bfb2da435616cb1f39cb91859ec7e', class: "relative" }, h("div", { key: '8e1d307b2b3b470c643ba992d8307457581e9d4f', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '7b40b6a8944aad01d01524e13056fbafeaa8a8a8', 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' }]
+                : [{ label: 'pending', style: 'default' }]), onClick: () => this.handleEventClick(event) }))))))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "events": ["parseEvents"]
+    }; }
+};
+
+export { EdsTimeline as eds_timeline };

package/dist/esm/eds-trl.entry.js

@@ -0,0 +1,48 @@
+import { r as registerInstance, h } from './index-e96badea.js';
+
+const EdsTrl = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.applications = undefined;
+    }
+    getParsedApplications() {
+        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) {
+                // Uncomment the next line for debugging
+                // console.error('Invalid applications JSON', error);
+                apps = [];
+            }
+        }
+        // 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;
+        return Math.ceil((currentTrl / maxTrl) * 100); // Calculate percentage and round up
+    }
+    render() {
+        const apps = this.getParsedApplications();
+        console.log('apps:', apps);
+        // 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: '71e903734b5cd1ef74bf93e8fcdc57afacb51f07', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: 'cb8e4324c9c8481dcc2daf74f06c6928257e6f8b', data: JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
+    }
+};
+
+export { EdsTrl as eds_trl };

package/dist/esm/incorrect-use-of-colors.entry.js

@@ -39,7 +39,7 @@ const IncorrectUseOfColors = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '024316623703e89a7d5d226a75c25c145be9b2c6', class: "container" }, h("p", { key: 'c2ddb12f2d87bf1c5bb7f49bcf2b76d42ccfd310', class: "f-body-01" }, "Each of the four colour tones cannot be mixed in the same composition."), h("div", { key: 'c5f1acb20614d5732836240dd65b23a8dd074447', class: "flex" }, h("div", { key: 'cb2fb1c0355b744e53977c573383989be12fe1ad', class: "w-full" }, h("ul", { key: '9ceb752231d8a7764221d45653c4ef73fad4573d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '494eaadc1547f91e11d93655b91424f98de6a635', class: "w-full" }, h("ul", { key: '51de6e25df144ab9014ca95ad645a437b6469441', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: '2e660e9a788e46e68d6695ae8aa475bbb1ca395e', class: "container" }, h("eds-alert", { key: '1dc4552a33d88055a3a0c33eeb18c53a8379039a', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" }), h("div", { key: 'fd6bf7f0205422b1bd3ceb3f8374d5a9a73aaca0', class: "flex" }, h("div", { key: 'dae745447f5e9792136f059b1dcfc868e473dfd5', class: "w-full" }, h("ul", { key: 'daeec7514f4027ec3f688f05fb4f1e027b846a81', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '1ca202afa9384e78e3ed9c0674e06c51184d3a5a', class: "w-full" }, h("ul", { key: '7bdef2e7d64f3c5553193d127bac69ee89a93686', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
 };
 

package/dist/esm/index-e96badea.js

@@ -52,18 +52,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'eds-alert_28':
+                case 'eds-avatar_17':
                     return import(
                       /* webpackMode: "lazy" */
-                      './eds-alert_28.entry.js').then(processMod, consoleError);
+                      './eds-avatar_17.entry.js').then(processMod, consoleError);
                 case 'correct-use-of-colors':
                     return import(
                       /* webpackMode: "lazy" */
                       './correct-use-of-colors.entry.js').then(processMod, consoleError);
-                case 'eds-breadcrumb':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-breadcrumb.entry.js').then(processMod, consoleError);
                 case 'eds-card-project':
                     return import(
                       /* webpackMode: "lazy" */
@@ -96,14 +92,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './eds-docs-tokens.entry.js').then(processMod, consoleError);
-                case 'eds-frame':
+                case 'eds-form':
                     return import(
                       /* webpackMode: "lazy" */
-                      './eds-frame.entry.js').then(processMod, consoleError);
-                case 'eds-fullscreen-menu':
+                      './eds-form.entry.js').then(processMod, consoleError);
+                case 'eds-frame':
                     return import(
                       /* webpackMode: "lazy" */
-                      './eds-fullscreen-menu.entry.js').then(processMod, consoleError);
+                      './eds-frame.entry.js').then(processMod, consoleError);
                 case 'eds-icon-arrow-diagonal':
                     return import(
                       /* webpackMode: "lazy" */
@@ -196,6 +192,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './eds-login.entry.js').then(processMod, consoleError);
+                case 'eds-logo-variations':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-logo-variations.entry.js').then(processMod, consoleError);
                 case 'eds-matomo-notice':
                     return import(
                       /* webpackMode: "lazy" */
@@ -224,10 +224,18 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './eds-tabs-content.entry.js').then(processMod, consoleError);
+                case 'eds-timeline':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-timeline.entry.js').then(processMod, consoleError);
                 case 'eds-tooltip':
                     return import(
                       /* webpackMode: "lazy" */
                       './eds-tooltip.entry.js').then(processMod, consoleError);
+                case 'eds-trl':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-trl.entry.js').then(processMod, consoleError);
                 case 'incorrect-use-of-colors':
                     return import(
                       /* webpackMode: "lazy" */
@@ -236,14 +244,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './logo-space.entry.js').then(processMod, consoleError);
-                case 'logo-variations-horizontal':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './logo-variations-horizontal.entry.js').then(processMod, consoleError);
-                case 'logo-variations-vertical':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './logo-variations-vertical.entry.js').then(processMod, consoleError);
                 case 'logo-wrong-usage':
                     return import(
                       /* webpackMode: "lazy" */
@@ -268,38 +268,46 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './eds-accordion.entry.js').then(processMod, consoleError);
-                case 'eds-footer':
+                case 'eds-progress-bar':
                     return import(
                       /* webpackMode: "lazy" */
-                      './eds-footer.entry.js').then(processMod, consoleError);
-                case 'eds-table':
+                      './eds-progress-bar.entry.js').then(processMod, consoleError);
+                case 'logo-variations-horizontal_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './eds-table.entry.js').then(processMod, consoleError);
+                      './logo-variations-horizontal_2.entry.js').then(processMod, consoleError);
                 case 'token-list_3':
                     return import(
                       /* webpackMode: "lazy" */
                       './token-list_3.entry.js').then(processMod, consoleError);
-                case 'eds-pagination':
+                case 'eds-card-generic':
                     return import(
                       /* webpackMode: "lazy" */
-                      './eds-pagination.entry.js').then(processMod, consoleError);
+                      './eds-card-generic.entry.js').then(processMod, consoleError);
                 case 'eds-section-core_2':
                     return import(
                       /* webpackMode: "lazy" */
                       './eds-section-core_2.entry.js').then(processMod, consoleError);
-                case 'eds-social-networks':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-social-networks.entry.js').then(processMod, consoleError);
                 case 'eds-tab':
                     return import(
                       /* webpackMode: "lazy" */
                       './eds-tab.entry.js').then(processMod, consoleError);
-                case 'eds-block-break':
+                case 'eds-pagination_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-pagination_2.entry.js').then(processMod, consoleError);
+                case 'eds-alert':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-alert.entry.js').then(processMod, consoleError);
+                case 'eds-card-desc_3':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './eds-card-desc_3.entry.js').then(processMod, consoleError);
+                case 'eds-input_7':
                     return import(
                       /* webpackMode: "lazy" */
-                      './eds-block-break.entry.js').then(processMod, consoleError);
+                      './eds-input_7.entry.js').then(processMod, consoleError);
                 case 'eds-code-block':
                     return import(
                       /* webpackMode: "lazy" */