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

package/dist/collection/components/eds-input-elements/eds-input-select/eds-input-select.js

@@ -1,9 +1,31 @@
 import { h } from "@stencil/core";
+import { toast } from "../../../utils/toastManager";
 /**
- * @internal
+ * A custom select input component that supports both static and dynamic options.
+ *
+ * Options can be provided in two formats:
+ * 1. Dynamic fetch configuration:
+ *    [
+ *      { endpoint: "http://localhost/api/applications", value: "_id", label: "title" }
+ *    ]
+ * 2. Static options:
+ *    [
+ *      { value: "react", label: "React" },
+ *      { value: "angular", label: "Angular" },
+ *      { value: "vue", label: "Vue.js" },
+ *      // etc.
+ *    ]
+ *
+ * The component will automatically fetch data if a dynamic configuration is provided.
  */
 export class EdsInputSelect {
     constructor() {
+        /**
+         * Event handler for the select input's change event.
+         * Emits the selected value.
+         *
+         * @param event The change event from the select input.
+         */
         this.handleChange = (event) => {
             const target = event.target;
             this.changeEvent.emit(target.value);
@@ -16,10 +38,60 @@ export class EdsInputSelect {
         this.error = false;
         this.required = false;
         this.options = [];
+        this.labelKey = 'label';
+        this.valueKey = 'value';
         this.value = undefined;
+        this.dynamicOptions = [];
+        this.loading = false;
+        this.dynamicValueKey = 'value';
+        this.dynamicLabelKey = 'label';
+    }
+    componentWillLoad() {
+        this.loadOptions();
+    }
+    /**
+     * Watches for changes in the `options` prop and loads the options accordingly.
+     *
+     * If the first object in the options array contains an "endpoint" key,
+     * the component will fetch options from the specified endpoint using the configured keys.
+     * Otherwise, it will treat the options as static.
+     *
+     * @async
+     */
+    async loadOptions() {
+        // If the first option contains an "endpoint" key, assume dynamic fetch mode.
+        if (this.options && this.options.length > 0 && this.options[0].endpoint) {
+            const config = this.options[0];
+            const endpoint = config.endpoint;
+            this.dynamicValueKey = config.value || 'value';
+            this.dynamicLabelKey = config.label || 'label';
+            this.loading = true;
+            try {
+                const response = await fetch(endpoint);
+                if (!response.ok) {
+                    toast.show(`<eds-input-select> HTTP error! Status: ${response.status}`, 'error');
+                }
+                const data = await response.json();
+                // Assume the API returns an array of objects.
+                this.dynamicOptions = data;
+            }
+            catch (error) {
+                //console.error('Error fetching dynamic options:', error);
+                toast.show(`<eds-input-select> Error fetching dynamic options ${error}`, 'error');
+            }
+            finally {
+                this.loading = false;
+            }
+        }
+        else {
+            // No dynamic configuration found, assume static options.
+            this.dynamicOptions = this.options;
+            this.dynamicValueKey = this.valueKey;
+            this.dynamicLabelKey = this.labelKey;
+        }
     }
     render() {
-        return (h("div", { key: '9aaa3bf4491078f5b5df6f5f0d3d5f3739f25716', class: "relative" }, h("select", { key: '5f860de772d8d92eb36648bdaaca0c93146e8a68', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: '2d1e8fa6c5583e0580cbd92d731b731cdd7ecca8', value: "", disabled: true, hidden: true }, "Please select ", this.name), this.options.map((option, index) => (h("option", { key: index, value: option.value }, option.label)))), h("span", { key: 'f62edaae154ce443c964849689b5dc92d9303958', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled ? 'text-lightest bg-transparent' : ''}` }, h("eds-icon-wrapper", { key: '07d186b6e0a6742a4f6ce39dd275ff1a6f905927', class: "w-20 h-20", icon: "chevron-right" }))));
+        return (h("div", { key: '0b45eaae992171cd9795f7bf01883b0f3efbcc13', class: "relative" }, h("select", { key: '0ee8bccb24f7bd65e9347c0b79905154db39dca7', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled || this.loading, required: this.required, onChange: this.handleChange }, h("option", { key: 'b1b53dcf8dd3155e8dba28327f05b4725a013435', value: "", disabled: true, hidden: true }, this.loading ? 'Loading options...' : `Please select ${this.name}`), this.dynamicOptions.map((option, index) => (h("option", { key: index, value: option[this.dynamicValueKey] }, option[this.dynamicLabelKey])))), h("span", { key: '3f652e7ed7570b602565af3f0e3c5c91506e4089', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled || this.loading ? 'text-lightest bg-transparent' : ''}` }, h("eds-icon-wrapper", { key: '2237727060af6286c346f749d2e8e3f7f86c7c70', class: "w-20 h-20", icon: "chevron-right" }))));
     }
     static get is() { return "eds-input-select"; }
     static get properties() {
@@ -36,7 +108,7 @@ export class EdsInputSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Optional id for the input. If not provided, the component uses the `name` property."
                 },
                 "attribute": "input-id",
                 "reflect": false
@@ -53,7 +125,7 @@ export class EdsInputSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The name attribute of the select input. Also used as the fallback id."
                 },
                 "attribute": "name",
                 "reflect": false
@@ -70,7 +142,7 @@ export class EdsInputSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder text (not used in the native select, but can be used for custom implementations)."
                 },
                 "attribute": "placeholder",
                 "reflect": false
@@ -87,7 +159,7 @@ export class EdsInputSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "If true, the select input will be disabled."
                 },
                 "attribute": "disabled",
                 "reflect": false,
@@ -105,7 +177,7 @@ export class EdsInputSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "If true, indicates that there is an associated message (help or error)."
                 },
                 "attribute": "has-message",
                 "reflect": false,
@@ -123,7 +195,7 @@ export class EdsInputSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "If true, the select input is in an error state."
                 },
                 "attribute": "error",
                 "reflect": false,
@@ -141,7 +213,7 @@ export class EdsInputSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "If true, the select input is marked as required."
                 },
                 "attribute": "required",
                 "reflect": false,
@@ -151,18 +223,54 @@ export class EdsInputSelect {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "{ label: string; value: string }[]",
-                    "resolved": "{ label: string; value: string; }[]",
+                    "original": "{ [key: string]: any }[]",
+                    "resolved": "{ [key: string]: any; }[]",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Options can be provided in two formats:\n\n1. Dynamic fetch configuration:\n   [\n     { endpoint: \"http://localhost/api/applications\", value: \"_id\", label: \"title\" }\n   ]\n\n2. Static options:\n   [\n     { value: \"react\", label: \"React\" },\n     { value: \"angular\", label: \"Angular\" },\n     { value: \"vue\", label: \"Vue.js\" },\n     // etc.\n   ]"
                 },
                 "defaultValue": "[]"
             },
+            "labelKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "For static options, this property defines the key used to retrieve the display label."
+                },
+                "attribute": "label-key",
+                "reflect": false,
+                "defaultValue": "'label'"
+            },
+            "valueKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "For static options, this property defines the key used to retrieve the option value."
+                },
+                "attribute": "value-key",
+                "reflect": false,
+                "defaultValue": "'value'"
+            },
             "value": {
                 "type": "any",
                 "mutable": false,
@@ -175,13 +283,21 @@ export class EdsInputSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The currently selected value."
                 },
                 "attribute": "value",
                 "reflect": false
             }
         };
     }
+    static get states() {
+        return {
+            "dynamicOptions": {},
+            "loading": {},
+            "dynamicValueKey": {},
+            "dynamicLabelKey": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "changeEvent",
@@ -190,8 +306,11 @@ export class EdsInputSelect {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "event",
+                            "text": "changeEvent"
+                        }],
+                    "text": "Emitted when the value of the select input changes."
                 },
                 "complexType": {
                     "original": "string | number",
@@ -200,4 +319,10 @@ export class EdsInputSelect {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "loadOptions"
+            }];
+    }
 }

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

@@ -12,13 +12,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;
@@ -116,23 +117,42 @@ 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;
+        //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: '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: '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 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: '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 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: '24931f257ef9ced394c1b5b1e589cacedd8035e6', class: "mt-20" }, h("eds-pagination", { key: '996b26ae090ee4fe08cc821fb11362d94879ff72', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     static get is() { return "eds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -255,6 +275,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 +331,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,34 @@
 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) {
+                console.error('Error parsing 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 +55,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: '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' }]
@@ -58,15 +68,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