@ebrains/components 1.3.0 → 1.4.0

package/dist/hydrate/index.mjs

@@ -7139,11 +7139,25 @@ class EdsFooter {
 }
 
 // utils/validators.ts
-function validateField(name, value, type, required, maxLength) {
+function validateField(name, value, type, required, maxLength, min, max) {
     const errors = [];
     if (required && !value) {
         errors.push(`${name} is required.`);
     }
+    if (type === 'number') {
+        const parsed = typeof value === 'number' ? value : parseFloat(value);
+        if (isNaN(parsed)) {
+            errors.push(`${name} must be a valid number.`);
+        }
+        else {
+            if (typeof min === 'number' && parsed < min) {
+                errors.push(`${name} must be greater than or equal to ${min}.`);
+            }
+            if (typeof max === 'number' && parsed > max) {
+                errors.push(`${name} must be less than or equal to ${max}.`);
+            }
+        }
+    }
     if (maxLength && typeof value === 'string' && value.length > maxLength) {
         errors.push(`${name} must be at most ${maxLength} characters.`);
     }
@@ -7237,7 +7251,7 @@ isFieldVisible) {
                 const inputEl = findFieldElement(formEl, field.name);
                 if (inputEl) {
                     const value = inputEl.value;
-                    const fieldErrors = validateField(field.name, value, field.type, field.required, field.maxlength);
+                    const fieldErrors = validateField(field.name, value, field.type, field.required, field.maxlength, field.min, field.max);
                     if (fieldErrors.length > 0) {
                         errors[field.name] = fieldErrors;
                         hasError = true;
@@ -7262,7 +7276,7 @@ function validateInputField(field, value, formEl) {
         }
         return validateSingleBox(field.name, field.required, formEl);
     }
-    return validateField(field.name, value, field.type, field.required, field.maxlength);
+    return validateField(field.name, value, field.type, field.required, field.maxlength, field.min, field.max);
 }
 
 /**
@@ -7347,11 +7361,12 @@ class EdsForm {
         linkElement.dispatchEvent(event);
     }
     isFieldVisible(field) {
-        if (!field.condition) {
+        if (!field.condition)
             return true;
-        }
-        const parentValue = this.values[field.condition.field];
-        return parentValue === field.condition.value;
+        const actual = this.values[field.condition.field];
+        const expected = field.condition.value;
+        // Handle loose match between booleans and strings
+        return String(actual) === String(expected);
     }
     validateForm() {
         const { errors, hasError } = validateFormFields(this.parsedFields, this.formEl, this.values, (field, values) => {
@@ -7438,6 +7453,7 @@ class EdsForm {
     }
     handleChange(e, field) {
         const target = e.target;
+        let newValue = target.value;
         if (target.type === 'checkbox') {
             // Get the current comma separated string or default to an empty string.
             const currentStr = this.values[field.name] || '';
@@ -7453,13 +7469,14 @@ class EdsForm {
                 // Remove the value from the array if the checkbox is unchecked.
                 valuesArray = valuesArray.filter((item) => item !== target.value);
             }
-            // Reassemble the comma separated string and update your form values.
-            this.values = Object.assign(Object.assign({}, this.values), { [field.name]: valuesArray.join(',') });
+            newValue = valuesArray.join(',');
         }
-        else {
-            // Handle non-checkbox input normally.
-            this.values = Object.assign(Object.assign({}, this.values), { [field.name]: target.value });
+        else if (target.type === 'radio') {
+            if (!target.checked)
+                return; // Only react to the selected radio
+            newValue = target.value;
         }
+        this.values = Object.assign(Object.assign({}, this.values), { [field.name]: newValue });
         // If it’s the password field, return here for no event emission
         if (field.name === 'password') {
             return;
@@ -7468,13 +7485,16 @@ class EdsForm {
         this.form.emit({
             event: 'change',
             field: field.name,
-            value: target.type === 'checkbox' ? this.values[field.name] : target.value,
+            value: newValue,
             message: `${field.name} updated`
             //data: this.makeFormData()
         });
     }
     handleInput(e, field) {
         const target = e.target;
+        if (target.type === 'radio' && !target.checked)
+            return;
+        const newValue = target.value;
         // Update the field's value in state.
         //this.values = { ...this.values, [field.name]: target.value };
         // Create a copy of the current errors.
@@ -7494,7 +7514,7 @@ class EdsForm {
         this.form.emit({
             event: 'input',
             field: field.name,
-            value: target.type === 'checkbox' ? this.values[field.name] : target.value,
+            value: newValue,
             message: `${field.name} updated`
             //data: this.makeFormData()
         });
@@ -7558,13 +7578,13 @@ class EdsForm {
     render() {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
-        return (hAsync("form", { key: '1a53a4f0d2b8420a14db6fe35548a86cfeb8b698', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, hAsync("div", { key: '8fdd2fa6b73f24c025b43d6f0b34cdbb22e0ec82' }, hAsync("slot", { key: '385f8c71b86b7ab9a74c1b7a0204331d0022467f' }), hiddenFields.map((field, index) => (hAsync("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
+        return (hAsync("form", { key: '98825e73a0279bed49b82caf2cc0529f30b53c70', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, hAsync("div", { key: '6b9abe2a6c2d091d57ea9ca383d9edb5d48445dc' }, hAsync("slot", { key: '930bcd24d9b1c6ec1b29ccb1c3150897fa9d0a35' }), hiddenFields.map((field, index) => (hAsync("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
             var _a, _b;
             if (!this.isFieldVisible(field)) {
                 return null;
             }
-            return (hAsync("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, placeholder: field.placeholder, value: this.values[field.name] || null, type: field.type, icon: field.icon || null, disabled: field.disabled, required: field.required, maxLength: field.maxlength, hint: field.hint, link: field.link, message: field.message, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
-        })), this.formBtn && (hAsync("div", { key: '0a120557c574112a8686087cfe2dbf3aae3feaa5', class: "mt-20" }, hAsync("eds-button", { key: '277a39f0d82e01f549966aa0c91347e090a82bc7', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+            return (hAsync("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, placeholder: field.placeholder, value: this.values[field.name] || null, min: field.min, max: field.max, step: field.step, type: field.type, icon: field.icon || null, disabled: field.disabled, required: field.required, maxLength: field.maxlength, hint: field.hint, link: field.link, message: field.message, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
+        })), this.formBtn && (hAsync("div", { key: 'e0ab2f16ff4a677a2b09a1069212e374f6d6eff8', class: "mt-20" }, hAsync("eds-button", { key: '781250d5e456a3f0176ade6e28356063c6981bb7', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -10927,6 +10947,9 @@ class EdsInput {
         this.maxLength = undefined;
         this.options = [];
         this.extraClass = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.step = undefined;
         this.innerVal = '';
         this.maxLengthReached = false;
     }
@@ -10949,12 +10972,18 @@ class EdsInput {
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (hAsync("div", { key: '5c66c14b19aa3d5fc37e7a77a2d1194fa0be9b8c', class: "relative flex items-center" }, this.type === 'textarea' ? (hAsync("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (hAsync("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (hAsync("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (hAsync("input", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined, class: `
+        return (hAsync("div", { key: '8645092d1b4c53609cbac2077fd0575f7bae4aaa', class: "relative flex items-center" }, this.type === 'textarea' ? (hAsync("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (hAsync("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (hAsync("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (hAsync("input", Object.assign({ id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined }, (this.type === 'number'
+            ? {
+                min: this.min,
+                max: this.max,
+                step: this.step,
+            }
+            : {}), { class: `
               ${this.extraClass || ''} 
               input ${this.type === 'radio' ? 'input-radio' : this.type === 'checkbox' ? 'input-checkbox' : ''}
               ${withIcon && this.type !== 'radio' && this.type !== 'checkbox' ? 'input-icon pl-36' : ''} 
               ${this.error ? 'input-error' : ''}
-              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })), this.maxLength && this.type === 'textarea' && (hAsync("span", { key: '4326db3729dea8bbddb7a109a90424aa832aded7', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (hAsync("eds-icon-wrapper", { key: 'df2f5598aedd36b9cb2ce886fb8ea08da58dc5ff', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
+              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput }))), this.maxLength && this.type === 'textarea' && (hAsync("span", { key: '3cbf1dbffabb0cb895c6b69651933867584606d0', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (hAsync("eds-icon-wrapper", { key: 'fb3a7051ecb72a5f425a0590dae14ee731e40a60', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -10978,6 +11007,9 @@ class EdsInput {
             "maxLength": [2, "max-length"],
             "options": [16],
             "extraClass": [1, "extra-class"],
+            "min": [2],
+            "max": [2],
+            "step": [2],
             "innerVal": [32],
             "maxLengthReached": [32]
         },
@@ -10996,19 +11028,52 @@ class EdsInputField {
         this.edsinput = createEvent(this, "edsinput", 7);
         this.edschange = createEvent(this, "edschange", 7);
         this.handleNativeInput = (ev) => {
-            var _a;
+            var _a, _b;
             (_a = this.onInput) === null || _a === void 0 ? void 0 : _a.call(this, ev);
             if (this.shouldEmitValue()) {
-                const newValue = ev.target.value;
-                this.edsinput.emit({ value: newValue });
+                const target = ev.target;
+                let value = target.value;
+                if (this.type === 'checkbox' && ((_b = this.parsedOptions) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                    // checkbox group case
+                    const checkboxes = this.hostEl.querySelectorAll(`input[type="checkbox"][name="${this.name}"]`);
+                    value = Array.from(checkboxes)
+                        .filter(cb => cb.checked)
+                        .map(cb => cb.value);
+                }
+                else if (this.type === 'checkbox') {
+                    value = target.checked;
+                }
+                else if (this.type === 'radio') {
+                    value = target.value;
+                }
+                else {
+                    value = target.value;
+                }
+                this.edsinput.emit({ value });
             }
         };
         this.handleNativeChange = (ev) => {
-            var _a;
+            var _a, _b;
             (_a = this.onChangeNative) === null || _a === void 0 ? void 0 : _a.call(this, ev);
             if (this.shouldEmitValue()) {
                 const target = ev.target;
-                const value = target.value;
+                let value = target.value;
+                if (this.type === 'checkbox' && ((_b = this.parsedOptions) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                    // checkbox group case
+                    const checkboxes = this.hostEl.querySelectorAll(`input[type="checkbox"][name="${this.name}"]`);
+                    value = Array.from(checkboxes)
+                        .filter(cb => cb.checked)
+                        .map(cb => cb.value);
+                }
+                else if (this.type === 'checkbox') {
+                    value = target.checked;
+                }
+                else if (this.type === 'radio') {
+                    value = target.value;
+                }
+                else {
+                    value = target.value;
+                }
                 this.edschange.emit({ value });
             }
         };
@@ -11027,6 +11092,9 @@ class EdsInputField {
         this.errorMessage = undefined;
         this.value = undefined;
         this.maxLength = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.step = undefined;
         this.options = undefined;
         this.type = 'text';
         this.onChangeNative = undefined;
@@ -11051,22 +11119,9 @@ class EdsInputField {
         return [];
     }
     render() {
-        const inputOpts = {
-            name: this.name,
-            id: this.inputId,
-            placeholder: this.placeholder,
-            disabled: this.disabled,
-            onInput: this.handleNativeInput,
-            onChange: this.handleNativeChange,
-            type: this.type,
-            required: this.required,
-            value: this.value,
-            error: this.error,
-            icon: this.icon,
-            checked: this.checked
-        };
-        return (hAsync("div", { key: '6f048dc1418d0738fc097d3c48148ccfdf70fbdc' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (hAsync("fieldset", { class: "space-y-4 mt-8" }, hAsync("div", { class: "flex justify-between" }, this.label && (hAsync("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (hAsync("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.parsedOptions.map((option) => (hAsync("div", { class: "flex items-center gap-x-2", key: option.value }, hAsync("eds-input", Object.assign({}, inputOpts, { value: option.value, checked: typeof this.value === 'string' &&
-                this.value.split(',').includes(String(option.value)) })), hAsync("eds-input-label", { name: `${this.name}-${option.value}`, label: option.label })))))) : (hAsync("div", { class: "flex items-center gap-x-8" }, hAsync("eds-input", Object.assign({}, inputOpts, { value: this.value, checked: this.value === 'on' })), this.label && (hAsync("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (hAsync("div", null, hAsync("div", { class: "flex justify-between" }, this.label && (hAsync("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (hAsync("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.type === 'select' ? (hAsync("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (hAsync("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChangeNative, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (hAsync("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
+        const inputOpts = Object.assign({ name: this.name, id: this.inputId, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleNativeInput, onChange: this.handleNativeChange, type: this.type, required: this.required, value: this.value, error: this.error, icon: this.icon, checked: this.checked }, (this.type === 'number' ? { min: this.min, max: this.max, step: this.step } : {}));
+        return (hAsync("div", { key: '48926c14240f7e26d2277729d829d98ab17f9eee' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (hAsync("fieldset", { class: "space-y-4 mt-8" }, hAsync("div", { class: "flex justify-between" }, this.label && (hAsync("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (hAsync("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.parsedOptions.map((option) => (hAsync("div", { class: "flex items-center gap-x-2", key: option.value }, hAsync("eds-input", Object.assign({}, inputOpts, { value: option.value, checked: typeof this.value === 'string' &&
+                this.value.split(',').includes(String(option.value)) })), hAsync("eds-input-label", { name: `${this.name}-${option.value}`, label: option.label })))))) : (hAsync("div", { class: "flex items-center gap-x-8" }, hAsync("eds-input", Object.assign({}, inputOpts, { value: this.value, checked: this.value === 'on' || this.checked })), this.label && (hAsync("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (hAsync("div", null, hAsync("div", { class: "flex justify-between" }, this.label && (hAsync("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (hAsync("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.type === 'select' ? (hAsync("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (hAsync("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChangeNative, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (hAsync("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
             var _a, _b, _c;
             const rangeProps = {
                 name: inputOpts.name,
@@ -11079,7 +11134,7 @@ class EdsInputField {
             const opt = this.parsedOptions;
             const numberValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value || 0;
             return (hAsync("eds-input-range", Object.assign({}, rangeProps, { 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, value: numberValue })));
-        })()) : (hAsync("eds-input", Object.assign({}, inputOpts))))), hAsync("div", { key: '27fb201362b478009fdc68a285395bfc24e84d45', class: "mt-4" }, hAsync("eds-input-footer", { key: 'cd3d5742879b13ab62f9ba989971290b527be3ca', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }))));
+        })()) : (hAsync("eds-input", Object.assign({}, inputOpts))))), hAsync("div", { key: '72b565ac1c52a56d7e563e227baf187d72f2ba21', class: "mt-4" }, hAsync("eds-input-footer", { key: '65c40184d6fd5dfc730a46ffe8e826687c7d6f36', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }))));
     }
     get hostEl() { return getElement(this); }
     static get style() { return EdsInputFieldStyle0; }
@@ -11102,6 +11157,9 @@ class EdsInputField {
             "errorMessage": [1, "error-message"],
             "value": [8],
             "maxLength": [2, "max-length"],
+            "min": [2],
+            "max": [2],
+            "step": [2],
             "options": [1],
             "type": [1],
             "onChangeNative": [16],
@@ -13258,10 +13316,9 @@ class EdsTable {
     }
     updateColumns() {
         var _a, _b;
-        // 1) Grab all data‐keys from the first row (if any) as before:
+        // Grab all data‐keys from the first row (if any) as before:
         this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
-        // 2) Instead of pushing each action.name, we add just a single “actions” column
-        //    (you can call it anything; we’ll detect it in render())
+        // Instead of pushing each action.name, add just a single “actions” column
         if (((_b = (_a = this.parsedActions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 && this.tbData.length > 0) {
             this.columns.push('actions');
         }
@@ -13288,30 +13345,26 @@ class EdsTable {
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-        return (hAsync("div", { key: '5034177431626ab2bfc5fd0118c006d11a4f6e96' }, this.searchEnabled && (hAsync("div", { key: '86e1a6ffc4bed69f290b3a53031341ab276eaf04' }, hAsync("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), hAsync("div", { key: 'bc11838d819ecf89c5ba1cc1cfe7ac0af0e82b59', class: "mt-20" }, hAsync("table", { key: '97f16b65eb1d9387e9ca7588184c9e68c1afcc2e', class: "block overflow-x-auto mt-6 p-0" }, hAsync("thead", { key: 'f4d64ada28c225db1b224277513e663a99de1cec' }, hAsync("tr", { key: 'c6a69e159cceada0f7143c0acb787e5c23242ae7', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
+        return (hAsync("div", { key: 'f188b98870101f250e8515178d50763bb708ade5' }, this.searchEnabled && (hAsync("div", { key: '96f046ad286df6cb46e9f9f6d3e45a69f90af108' }, hAsync("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), hAsync("div", { key: 'bbf27504732266f3e3ae299fcf742a653a23fdef', class: "mt-20" }, hAsync("table", { key: 'a1c76a7b0d4c4a1382c34cf58a49896567610403', class: "block overflow-x-auto mt-6 p-0" }, hAsync("thead", { key: 'ea7e4b5d1c48c63094a96ba5c8fb38bf8e805024' }, hAsync("tr", { key: '6e49bc93f9678f5f6449269728ca893a88ceb51a', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
             var _a;
-            // 3) For the “actions” column, override the header to “Actions”
             if (col === 'actions') {
-                // You can choose a smaller min‐width here if you wish:
-                return (hAsync("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, "Actions"));
+                return (hAsync("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }));
             }
-            // Otherwise, render column name or action label if you do want to override:
             if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
                 return (hAsync("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.capitalize(col)));
             }
             return null;
-        }))), hAsync("tbody", { key: '133af82fdd1f820e853734ab48123cb3db527e15' }, paginatedRows.map((row) => (hAsync("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
+        }))), hAsync("tbody", { key: '7f09b3133241c4a19ad75c27134c04192e9dc357' }, paginatedRows.map((row) => (hAsync("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
             var _a;
             if (col === 'actions') {
-                // 4) Render ALL actions inside a single <td> for this row:
                 return (hAsync("td", { class: "text-center border border-softer m-0 f-ui-02 break-words actions-cell", style: { minWidth: `${columnWidth - 4}px` } }, hAsync("div", { style: { display: 'flex', gap: '0.5rem', justifyContent: 'center', flexWrap: 'wrap' } }, this.parsedActions.map((act) => (hAsync("span", { style: { whiteSpace: 'nowrap' } }, this.renderSingleActionCell(act.name, row)))))));
             }
             if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
-                // Regular data cell:
+                // Regular data cell
                 return (hAsync("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[col], col)));
             }
             return null;
-        }))))))), this.shouldEnablePagination() && (hAsync("div", { key: '85032d06cd0ac5dae9b504d423fceba3cd074861', class: "mt-20" }, hAsync("eds-pagination", { key: '8caf6f57960e222c04d45f57a5811cd7bd524f4c', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+        }))))))), this.shouldEnablePagination() && (hAsync("div", { key: 'ceb320ba2e1cb14e4220c653c92bb2a9e8bf3593', class: "mt-20" }, hAsync("eds-pagination", { key: '19c22566443e476742fd7f5e232c9240ecb34bec', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
@@ -13623,7 +13676,7 @@ class EdsTimeline {
 const edsToastCss = ".relative{position:relative}.right-4{right:0.25rem}.bottom-4{bottom:0.25rem}.w-auto{width:auto}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:0.25rem}.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)}.ml-8{margin-left:0.5rem}.p-12{padding:0.75rem}.rounded-lg{border-radius:16px}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),\n        0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),\n        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-dark{background-color:var(--grey-300)}.bg-success{background-color:var(--green-200)}.bg-error{background-color:var(--red-200)}.bg-warning{background-color:var(--yellow-200)}.text-light{color:var(--grey-700)}.text-current{color:currentColor}.text-default{color:var(--black)}";
 var EdsToastStyle0 = edsToastCss;
 
-const toastStyles = cva(['relative right-4 bottom-4 w-auto p-12 rounded-lg shadow-md'], {
+const toastStyles = cva(['relative bottom-4 w-auto p-12 rounded-lg shadow-md'], {
     variants: {
         intent: {
             default: 'bg-dark text-light',
@@ -13639,10 +13692,12 @@ const toastStyles = cva(['relative right-4 bottom-4 w-auto p-12 rounded-lg shado
 class EdsToast {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.toast = createEvent(this, "toast", 7);
         /**
          * Dismisses the toast.
          */
         this.dismissToast = () => {
+            this.toast.emit({ visible: false, label: 'dismissed' });
             this.visible = false;
         };
         this.message = undefined;

package/dist/stencil.config.js

@@ -25,10 +25,16 @@ export const config = {
                     dest: path.resolve(__dirname, '../../dist/packages/components'),
                 },
                 {
-                    // README.md next to this config file
+                    // LICENSE next to this config file
                     src: path.resolve(__dirname, 'LICENSE'),
                     // your stencil dist folder
                     dest: path.resolve(__dirname, '../../dist/packages/components'),
+                },
+                {
+                    // CHANGELOG.md next to this config file
+                    src: path.resolve(__dirname, 'CHANGELOG.md'),
+                    // your stencil dist folder
+                    dest: path.resolve(__dirname, '../../dist/packages/components'),
                 }
             ]
         },

package/dist/types/components/eds-input-elements/eds-input/eds-input.d.ts

@@ -19,6 +19,9 @@ export declare class EdsInput {
         value: string;
     }[];
     extraClass?: string;
+    min?: number;
+    max?: number;
+    step?: number;
     innerVal: string | number;
     maxLengthReached: boolean;
     /**

package/dist/types/components/eds-input-field/eds-input-field.d.ts

@@ -33,6 +33,12 @@ export declare class EdsInputField {
     value?: string | number;
     /** The maximum allowed length for text input. */
     maxLength?: number;
+    /** Minimum value for number or range inputs */
+    min?: number;
+    /** Maximum value for number or range inputs */
+    max?: number;
+    /** Step value for number or range inputs */
+    step?: number;
     /**
      * Options for select, checkbox, radio, or range inputs.
      * Can be a JSON string or an array of `{ value, label }` objects.
@@ -63,14 +69,14 @@ export declare class EdsInputField {
      * Use `event.detail.value` to access the new value.
      */
     edsinput: EventEmitter<{
-        value: string;
+        value: string | boolean | string[];
     }>;
     /**
      * Emits on blur or change event (e.g., selecting an option, leaving the field).
      * Use `event.detail.value` to access the final value.
      */
     edschange: EventEmitter<{
-        value: string;
+        value: string | boolean | string[];
     }>;
     /** Reference to the host element. */
     hostEl: HTMLElement;

package/dist/types/components/eds-input-field/eds-input-field.stories.d.ts

@@ -43,6 +43,18 @@ declare const _default: {
             control: string;
             description: string;
         };
+        min: {
+            control: string;
+            description: string;
+        };
+        max: {
+            control: string;
+            description: string;
+        };
+        step: {
+            control: string;
+            description: string;
+        };
         message: {
             control: string;
             description: string;

package/dist/types/components/eds-toast/eds-toast.d.ts

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class EdsToast {
     /**
      * The main message or text to be displayed in the toast.
@@ -18,6 +19,10 @@ export declare class EdsToast {
      */
     visible: boolean;
     el: HTMLElement;
+    toast: EventEmitter<{
+        visible: boolean;
+        label: 'dismissed' | 'shown';
+    }>;
     private dismissTimeout;
     componentDidLoad(): void;
     /**

package/dist/types/components.d.ts

@@ -1070,11 +1070,14 @@ export namespace Components {
         "hasMessage": boolean;
         "icon"?: string;
         "inputId"?: string;
+        "max"?: number;
         "maxLength"?: number;
+        "min"?: number;
         "name": string;
         "options"?: { label: string; value: string }[];
         "placeholder"?: string;
         "required": boolean;
+        "step"?: number;
         "type": string;
         "value"?: string | number;
     }
@@ -1119,6 +1122,10 @@ export namespace Components {
           * Optional link associated with the input (for help or docs).
          */
         "link"?: { url: string; label: string };
+        /**
+          * Maximum value for number or range inputs
+         */
+        "max"?: number;
         /**
           * The maximum allowed length for text input.
          */
@@ -1127,6 +1134,10 @@ export namespace Components {
           * Message shown below the input (e.g., additional info or validation message).
          */
         "message"?: string;
+        /**
+          * Minimum value for number or range inputs
+         */
+        "min"?: number;
         /**
           * The `name` attribute of the input element. Required for form submission.
          */
@@ -1151,6 +1162,10 @@ export namespace Components {
           * If `true`, the input is required.
          */
         "required": boolean;
+        /**
+          * Step value for number or range inputs
+         */
+        "step"?: number;
         /**
           * Type of the input: e.g., `text`, `checkbox`, `select`, `range`, etc.
          */
@@ -1962,6 +1977,10 @@ export interface EdsTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEdsTabsElement;
 }
+export interface EdsToastCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLEdsToastElement;
+}
 declare global {
     interface HTMLColorPrimaryPaletteElement extends Components.ColorPrimaryPalette, HTMLStencilElement {
     }
@@ -2629,8 +2648,8 @@ declare global {
         new (): HTMLEdsInputElement;
     };
     interface HTMLEdsInputFieldElementEventMap {
-        "edsinput": { value: string };
-        "edschange": { value: string };
+        "edsinput": { value: string | boolean | string[] };
+        "edschange": { value: string | boolean | string[] };
     }
     interface HTMLEdsInputFieldElement extends Components.EdsInputField, HTMLStencilElement {
         addEventListener<K extends keyof HTMLEdsInputFieldElementEventMap>(type: K, listener: (this: HTMLEdsInputFieldElement, ev: EdsInputFieldCustomEvent<HTMLEdsInputFieldElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2987,7 +3006,18 @@ declare global {
         prototype: HTMLEdsTimelineElement;
         new (): HTMLEdsTimelineElement;
     };
+    interface HTMLEdsToastElementEventMap {
+        "toast": { visible: boolean; label: 'dismissed' | 'shown' };
+    }
     interface HTMLEdsToastElement extends Components.EdsToast, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLEdsToastElementEventMap>(type: K, listener: (this: HTMLEdsToastElement, ev: EdsToastCustomEvent<HTMLEdsToastElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLEdsToastElementEventMap>(type: K, listener: (this: HTMLEdsToastElement, ev: EdsToastCustomEvent<HTMLEdsToastElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLEdsToastElement: {
         prototype: HTMLEdsToastElement;
@@ -4321,11 +4351,14 @@ declare namespace LocalJSX {
         "hasMessage"?: boolean;
         "icon"?: string;
         "inputId"?: string;
+        "max"?: number;
         "maxLength"?: number;
+        "min"?: number;
         "name": string;
         "options"?: { label: string; value: string }[];
         "placeholder"?: string;
         "required"?: boolean;
+        "step"?: number;
         "type"?: string;
         "value"?: string | number;
     }
@@ -4370,6 +4403,10 @@ declare namespace LocalJSX {
           * Optional link associated with the input (for help or docs).
          */
         "link"?: { url: string; label: string };
+        /**
+          * Maximum value for number or range inputs
+         */
+        "max"?: number;
         /**
           * The maximum allowed length for text input.
          */
@@ -4378,6 +4415,10 @@ declare namespace LocalJSX {
           * Message shown below the input (e.g., additional info or validation message).
          */
         "message"?: string;
+        /**
+          * Minimum value for number or range inputs
+         */
+        "min"?: number;
         /**
           * The `name` attribute of the input element. Required for form submission.
          */
@@ -4389,11 +4430,11 @@ declare namespace LocalJSX {
         /**
           * Emits on blur or change event (e.g., selecting an option, leaving the field). Use `event.detail.value` to access the final value.
          */
-        "onEdschange"?: (event: EdsInputFieldCustomEvent<{ value: string }>) => void;
+        "onEdschange"?: (event: EdsInputFieldCustomEvent<{ value: string | boolean | string[] }>) => void;
         /**
           * Emits on every user input (key press, typing, etc.). Use `event.detail.value` to access the new value.
          */
-        "onEdsinput"?: (event: EdsInputFieldCustomEvent<{ value: string }>) => void;
+        "onEdsinput"?: (event: EdsInputFieldCustomEvent<{ value: string | boolean | string[] }>) => void;
         /**
           * Native `onInput` handler for React/Vue wrappers. Enables use without manually attaching DOM event listeners.
          */
@@ -4410,6 +4451,10 @@ declare namespace LocalJSX {
           * If `true`, the input is required.
          */
         "required"?: boolean;
+        /**
+          * Step value for number or range inputs
+         */
+        "step"?: number;
         /**
           * Type of the input: e.g., `text`, `checkbox`, `select`, `range`, etc.
          */
@@ -5099,6 +5144,7 @@ declare namespace LocalJSX {
           * The main message or text to be displayed in the toast.
          */
         "message": string;
+        "onToast"?: (event: EdsToastCustomEvent<{ visible: boolean; label: 'dismissed' | 'shown' }>) => void;
     }
     interface EdsToastManager {
     }

package/dist/types/utils/eds-form/individualValidator.d.ts

@@ -1,3 +1,3 @@
-export declare function validateField(name: string, value: string | number, type: string, required: boolean, maxLength?: number): string[];
+export declare function validateField(name: string, value: string | number, type: string, required: boolean, maxLength?: number, min?: number, max?: number): string[];
 export declare function validateFieldGroup(name: string, required: boolean, formEl: HTMLFormElement): string[];
 export declare function validateSingleBox(name: string, required: boolean, formEl: HTMLFormElement): string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebrains/components",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",