@ebrains/components 0.0.1-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-input-field/eds-input-field.css

@@ -5399,14 +5399,14 @@ video {
     }
   }
 .input-label {
-  font-family: var(--f-ui-04-fontFamily);
-  font-weight: var(--f-ui-04-fontWeight);
-  font-size: var(--f-ui-04-fontSize);
-  line-height: var(--f-ui-04-lineHeight);
-  letter-spacing: var(--f-ui-04-letterSpacing);
+  font-family: var(--f-ui-03-fontFamily);
+  font-weight: var(--f-ui-03-fontWeight);
+  font-size: var(--f-ui-03-fontSize);
+  line-height: var(--f-ui-03-lineHeight);
+  letter-spacing: var(--f-ui-03-letterSpacing);
 }
 .input-label b,.input-label strong {
-  font-weight: var(--f-ui-04---bold-weight, bold);
+  font-weight: var(--f-ui-03---bold-weight, bold);
 }
 .input {
   -webkit-appearance: none;
@@ -6193,6 +6193,16 @@ video {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-4 {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+.space-y-8 {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
 .overflow-hidden {
   overflow: hidden;
 }

package/dist/collection/components/eds-input-field/eds-input-field.js

@@ -63,11 +63,11 @@ export class EdsInputField {
             icon: this.icon,
             checked: this.checked
         };
-        return (h("div", { key: 'e1e4c68a8ca48b9526217b1c1eeaecbf3c73a652', class: "space-y-8" }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4 mt-8" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.parsedOptions.map((option) => (h("div", { class: "flex items-center gap-x-2", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { value: option.value })), h("eds-input-label", { name: `${this.name}-${option.value}`, label: option.label })))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts)), this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (h("div", null, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && h("p", { class: "f-ui-05 text-lighter ml-8" }, this.hint)), this.type === 'select' ? (h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (h("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChange, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
+        return (h("div", { key: 'e1e4c68a8ca48b9526217b1c1eeaecbf3c73a652', class: "space-y-8" }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4 mt-8" }, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && h("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)), this.parsedOptions.map((option) => (h("div", { class: "flex items-center gap-x-2", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { value: option.value })), h("eds-input-label", { name: `${this.name}-${option.value}`, label: option.label })))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts)), this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (h("div", null, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && h("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)), this.type === 'select' ? (h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (h("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChange, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
             var _a, _b, _c;
             const opt = this.parsedOptions;
             return (h("eds-input-range", { min: (_a = opt[0]) === null || _a === void 0 ? void 0 : _a.value, max: (_b = opt[1]) === null || _b === void 0 ? void 0 : _b.value, step: (_c = opt[2]) === null || _c === void 0 ? void 0 : _c.value, name: "range-slider" }));
-        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("eds-input-footer", { key: '933890d4b428f2eae2c47e1d24da969b89345709', name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
+        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("eds-input-footer", { key: '7c283d5b193f179cdefbb011862358e3c92685c5', name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
     }
     static get is() { return "eds-input-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -60,6 +60,10 @@
     background-color: var(--white);
 }
 
+.bg-dark {
+    background-color: var(--grey-300);
+}
+
 .rounded-lg {
     border-radius: 16px;
 }
@@ -174,6 +178,10 @@
     padding-top: 0.5rem;
 }
 
+.bg-opacity-90 {
+    opacity: 0.9;
+}
+
 .line-clamp-1 {
     overflow: hidden;
     display: -webkit-box;

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+//import { sendAnalytics } from '@ebrains/utils';
 /**
  * `EdsModal` is a modal dialog component that can be toggled open or closed.
  *
@@ -24,12 +25,24 @@ export class EdsModal {
      */
     async open() {
         this.isOpen = true;
+        /*sendAnalytics({
+          category: 'ui-component',
+          tag: this.el.tagName.toLowerCase(),
+          name: this.title,
+          action: 'show'
+        });*/
     }
     /**
      * Closes the modal.
      */
     async close() {
         this.isOpen = false;
+        /*sendAnalytics({
+          category: 'ui-component',
+          tag: this.el.tagName.toLowerCase(),
+          name: this.title,
+          action: 'hide'
+        });*/
     }
     /**
      * Toggles the modal open or closed.
@@ -37,10 +50,36 @@ export class EdsModal {
     async toggle() {
         this.isOpen = !this.isOpen;
     }
+    /**
+     * Lifecycle method that runs when the component has fully loaded.
+     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
+     */
+    componentDidLoad() {
+        // Emit context for each eds-link element after the component is fully loaded
+        const btns = this.el.shadowRoot.querySelectorAll('eds-button');
+        btns.forEach((btn) => {
+            this.emitContext(btn);
+        });
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given button element.
+     * This event provides context information about the eds-modal component.
+     *
+     * @param btnElement - The link element to which the event will be dispatched.
+     */
+    emitContext(btnElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        btnElement.dispatchEvent(event);
+    }
     render() {
-        return (h("div", { key: '97e718578e2801320cd38581782f3ed7adbd3ba5', class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex` }, this.isOpen && (h("div", { key: 'b7b27479b384552a02c8de602906916d2e77c8db', class: "fixed inset-0 backdrop-blur" // Add backdrop-blur utility class here
+        return (h("div", { key: '00816ecb900bd9b68b31fdf6e48bef0223f9e10a', class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex` }, this.isOpen && (h("div", { key: '570fa8625f9ad4b1ea82633f11e2b289ab01b853', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), h("div", { key: '96fa205da65fbec35777b30b8b7ff8ee9e091f05', class: "max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center " }, h("div", { key: '4f712243107cc43ebaa012e91a3165f7009a0e95', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: '7ed021a29d50f99f2624ed9913b43aa5d63dd7ac', class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), h("eds-button", { key: '1e8e3321e06e506a102613d57fc78af4c0c3aa34', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: 'b67b5636b5a619d54c83e754a4ca4418e33e5e13', class: "pt-8" }, h("slot", { key: '8dffee0db6547e58d12a78dd7240cc625a3e70f8' })))));
+            onClick: () => this.close() })), h("div", { key: 'ff658c763e3fbc98123f13483076399966b10515', class: "max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center " }, h("div", { key: 'd8b72acd90cc59ab1f82384aee4e311319f75aa9', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: 'ee61fc505c5a3eb93541d3762d37f28a5a788bae', class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), h("eds-button", { key: '3832772417d05a162eb5f2c4d0733f0ee845ed1c', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: 'f71b38be8284a37d0d198df0a9858c64202b3d91', class: "pt-8" }, h("slot", { key: '1f80948334e5b4e9fc00a3bf01c6fc402d8220c3' })))));
     }
     static get is() { return "eds-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -172,4 +211,5 @@ export class EdsModal {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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"
             }];
     }
 }