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

package/dist/collection/collection-manifest.json

@@ -60,8 +60,10 @@
     "components/eds-tab/eds-tab.js",
     "components/eds-table/eds-table.js",
     "components/eds-tag/eds-tag.js",
+    "components/eds-timeline/eds-timeline.js",
     "components/eds-toast/eds-toast.js",
     "components/eds-tooltip/eds-tooltip.js",
+    "components/eds-trl/eds-trl.js",
     "eds-docs-ui/colors/color-palette/primary.js",
     "eds-docs-ui/colors/color-palette/secondary.js",
     "eds-docs-ui/colors/color-palette/support.js",
@@ -79,6 +81,7 @@
     "eds-docs-ui/eds-components-section/eds-components-section.js",
     "eds-docs-ui/eds-docs-palettes/eds-docs-palettes.js",
     "eds-docs-ui/eds-docs-tokens/eds-docs-tokens.js",
+    "eds-docs-ui/eds-logo-variations/eds-logo-variations.js",
     "eds-docs-ui/eds-svg-repository/eds-svg-repository.js",
     "eds-docs-ui/logo/logo-space/logo-space.js",
     "eds-docs-ui/logo/logo-variations/horizontal/logo-variations-horizontal.js",

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

@@ -90,10 +90,10 @@ export class EdsAccordion {
      */
     render() {
         const minHeightContentClass = this.minHeightContent ? 'min-h-56' : '';
-        return (h("div", { key: 'fc5727e75b74058ee2ce86f99f77cf0b09fca4aa', ref: (el) => (this.wrapperRef = el), class: `container flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
+        return (h("div", { key: '1f8ea188c4b39f6d1a8d10cdbf43d3df88d1281f', ref: (el) => (this.wrapperRef = el), class: `container flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
           ${this.switchBg && this.isExpanded ? 'bg-inverse' : 'bg-default'} 
           ${this.switchBg ? 'hover:bg-inverse' : ''} 
-          ${minHeightContentClass}` }, h("h3", { key: 'e58c2839cf6ee75be7752acc5c54497fe8bf3dde', class: "mr-auto f-heading-06 text-left absolute inset-x-16 top-16 line-clamp-1" }, this.title), h("div", { key: '55724b741d8654b66da22c88a764cca1af240e78', class: "ml-auto" }, h("eds-button", { key: '9020e6cf183bdbc6dc83fe5c7d387f53e248bc98', id: "accordionId", intent: "tertiary", "aria-expanded": this.isExpanded || this.shortContent, "aria-controls": "accordionId", class: `effect-color flex w-full items-center justify-between rounded-md outline-none focus:outline-none`, onClick: this.handleClick, icon: "chevron-down" })), h("div", { key: '2e0510604a57a9f4c9aee0de3c9b295e22946363', class: `w-full` }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: 'f39f19fe2e1a6489853b5fea2ac2da2b9e954787', id: "sectionId", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, h("div", { key: '91c64ddbc22197fb929f55f8b6a9022c92ed729e', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-20`, "aria-hidden": !this.isExpanded }, h("span", { key: 'c1c496948b8bfdc22573b9ec83dfbaab484db901', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: '758757e3cb9d4d71ecfab9764cffda697fabeaf8' })))))));
+          ${minHeightContentClass}` }, h("h3", { key: '4490bdc1a18b99850e8db8ae1c38fcb37912ec0d', class: "mr-auto f-heading-06 text-left absolute inset-x-16 top-16 line-clamp-1" }, this.title), h("div", { key: '82df433a9cc6805a735300fd1bb52f41c639c992', class: "ml-auto" }, h("eds-button", { key: '9965d5eecfa02fbea08c23c44d325417767f6495', id: "accordionId", intent: "tertiary", "aria-expanded": this.isExpanded || this.shortContent, "aria-controls": "accordionId", class: `effect-color flex w-full items-center justify-between rounded-md outline-none focus:outline-none`, onClick: this.handleClick, icon: "chevron-down" })), h("div", { key: '7ab8d2d07d55fa05c5e5647d1d00d1165f0d40ce', class: `w-full` }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: 'cb122dd5433d7012cba6f3769f79e92a155c45d7', id: "sectionId", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, h("div", { key: '0c2e1d9b38f21f0cb7f50aa3923edcc448418e3f', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-20`, "aria-hidden": !this.isExpanded }, h("span", { key: 'd119c88d54e8d5e83d4cc3d4d16d1cd53d689bc7', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: 'b2a6917ec65bc808389a2d1c77cd1183f00cbaa1' })))))));
     }
     static get is() { return "eds-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,22 +38,23 @@ export class EdsBreadcrumb {
         this.maxVisibleItems = 6;
     }
     /**
-     * Watch for changes to the `items` prop and parse it when it changes.
-     * Converts the `items` string into an array of objects if it is a JSON string.
-     * If the format is invalid, it logs an error and sets an empty array.
-     *
-     * @param newValue - The new value for the `items` prop.
+     * Watches for changes to the `items` prop and parses it.
      */
     parseItems(newValue) {
-        try {
-            if (typeof newValue === 'string') {
-                this.parsedItems = JSON.parse(newValue);
+        if (typeof newValue === 'string') {
+            try {
+                const parsed = JSON.parse(newValue);
+                this.parsedItems = Array.isArray(parsed) ? parsed : [];
             }
-            else {
-                this.parsedItems = newValue;
+            catch (e) {
+                console.error('Error parsing breadcrumb items:', e);
+                this.parsedItems = [];
             }
         }
-        catch (e) {
+        else if (Array.isArray(newValue)) {
+            this.parsedItems = newValue;
+        }
+        else {
             this.parsedItems = [];
         }
     }
@@ -141,7 +142,7 @@ export class EdsBreadcrumb {
      */
     render() {
         const itemsToRender = this.getTruncatedItems();
-        return (h("nav", { key: 'b3f515670374a7451981638d658f8e37f07ab10c', "aria-label": "Breadcrumb" }, h("ol", { key: '999b2035f3c996016e753be3826881a11054e184', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+        return (h("nav", { key: '1491f7e548ba859e0661129de2ec320552a2bb42', "aria-label": "Breadcrumb" }, h("ol", { key: '93525aad588295e9f2a3f02d143824c7c58ea512', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
             const isLast = index === itemsToRender.length - 1;
             return (h("li", { class: "flex items-center" }, !item.isHidden ? (h("eds-link", { label: item.label, url: item.url, intent: this.intent, current: isLast, "aria-label": item.label, size: "small", "icon-small": "false" })) : (h("span", { class: "truncate px-2 ", "aria-hidden": "true" }, "...")), !isLast && !item.isHidden && (h("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }))));
         }))));

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

@@ -226,7 +226,7 @@ export class EdsButton {
             show: !this.loading
         });
         const ElementType = this.elementType;
-        return (h(ElementType, { key: '04381724e90b1f71960832e705f3a1db46e3a200', "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.elementType === 'button' ? this.disabled : undefined, disabled: this.elementType === 'button' ? this.disabled : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event) }, this.label && h("span", { key: 'f9b77e3a0eee7afa676fa2b7a4bdce8b3ac124cd', class: this.loading ? 'opacity-0' : '' }, this.label), this.loading && (h("span", { key: '0e645a9f7c3d8e87f209ccd1a556ead976143094', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: 'e7810efb3f5e9853f67afb9491f35b19509700e9', class: "loader", style: {
+        return (h(ElementType, { key: '1053db0332f574db35e58453d789567eaf235d30', "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.elementType === 'button' ? this.disabled : undefined, disabled: this.elementType === 'button' ? this.disabled : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event) }, this.label && h("span", { key: 'ff95b889b008075d46b89a1d23e51ad8afa20918', class: this.loading ? 'opacity-0' : '' }, this.label), this.loading && (h("span", { key: '942f3fffcaef08defd3d0ef0dbb275b9d189c907', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: '91e53dcee9d4f2a842ea922498c9da7f15ffe109', class: "loader", style: {
                 border: `3px solid ${this.intent === 'secondary' ? 'rgba(255, 255, 255, .3)' : 'rgba(0, 0, 0, .3)'}`,
                 borderBottomColor: this.intent === 'secondary' ? '#fff' : '#000'
             } }))), this.icon ? h("eds-icon-wrapper", { class: iconClasses, icon: this.icon }) : null));
@@ -254,7 +254,7 @@ export class EdsButton {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The label text to be displayed inside the button."
@@ -306,7 +306,7 @@ export class EdsButton {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The visual intent or style of the button.\nOptions include 'primary', 'secondary', 'tertiary', 'ghost', and 'ghostInverse'."

package/dist/collection/components/eds-cards/eds-card-generic/eds-card-generic.js

@@ -14,6 +14,7 @@ import { h } from "@stencil/core";
  */
 export class EdsCardGeneric {
     constructor() {
+        this.parentContext = null; // Accepts the entire event detail or null
         this.cardTitle = undefined;
         this.url = undefined;
         this.description = undefined;
@@ -47,6 +48,15 @@ export class EdsCardGeneric {
             }
         }
     }
+    handleParentContext(event) {
+        if (event.target !== this.el) {
+            // Ignore the event if it's not targeted at this specific instance
+            return;
+        }
+        //console.log(event.detail);
+        this.parentContext = event.detail;
+        event.stopPropagation();
+    }
     /**
      * Parses the `tags` prop into an array of link objects.
      * Returns an empty array if parsing fails or if `tags` is not a valid JSON string or object.
@@ -81,13 +91,14 @@ export class EdsCardGeneric {
         var _a;
         sendAnalytics({
             category: 'ui-component',
+            parentContext: this.parentContext,
             tag: this.el.tagName.toLowerCase(),
             name: ((_a = this.cardTitle) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
             action: 'click'
         });
     }
     render() {
-        return (h("article", { key: 'e8965da0703c85bcba94c324028c0d8c0b6c8e13', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: '54b1fff3f3a32c26ef68cd33c85c2f2fd8a0fc52', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: '8ee395e5f84e6bdf7651554d9806147d03a9324c', class: "mt-8", "truncate-lines": "3", description: this.description })), this.parsedImage ? (h("eds-img", Object.assign({ class: "mt-8" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: 'd73e14a888d2015a39f86913b6cc9428fda67f59', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label })))), ' '));
+        return (h("article", { key: '17d1f00f232a4436756fa3846684bbae8c716036', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: 'd99ee1716c4e308a3ea446f0f7cedfaeac30f2ed', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: 'c5bdc76e68a8d660609630aa8184ec3a9508ab61', class: "mt-8", "truncate-lines": "3", description: this.description })), this.parsedImage ? (h("eds-img", Object.assign({ class: "mt-8" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: 'fa993e3c60d357eb0d9a63e612bdd2bf026e7a85', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label })))), ' '));
     }
     static get is() { return "eds-card-generic"; }
     static get encapsulation() { return "shadow"; }
@@ -321,4 +332,13 @@ export class EdsCardGeneric {
         };
     }
     static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "parentContext",
+                "method": "handleParentContext",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -6193,6 +6193,16 @@
     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-form/eds-form.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { toast } from "../../utils/toastManager";
 /**
  * `EdsForm` is a comprehensive form component designed to handle form submission with validation,
  * error handling, and customizable fields. It offers several options for handling alerts and
@@ -16,23 +17,50 @@ import { h } from "@stencil/core";
 export class EdsForm {
     constructor() {
         this.handleChange = (e, field) => {
-            if (field.type === 'text') {
-                const target = e.target;
-                const { name, type, required, maxlength } = field;
-                const value = target.value;
-                const fieldErrors = this.validateField(name, value, type, required, maxlength);
+            const target = e.target;
+            // Update the field's value in state.
+            this.values = Object.assign(Object.assign({}, this.values), { [field.name]: target.value });
+            // Create a copy of the current errors.
+            const newErrors = Object.assign({}, this.errors);
+            // Validate only the changed field.
+            if (field.type === 'checkbox' || field.type === 'radio') {
+                if (field.options) {
+                    // Validate group of checkboxes or radio buttons.
+                    const fieldErrors = this.validateFieldGroup(field.name, field.type, field.required);
+                    if (fieldErrors.length > 0) {
+                        newErrors[field.name] = fieldErrors;
+                    }
+                    else {
+                        delete newErrors[field.name];
+                    }
+                }
+                else {
+                    // Validate a single checkbox.
+                    const fieldErrors = this.validateSingleBox(field.name, field.required);
+                    if (fieldErrors.length > 0) {
+                        newErrors[field.name] = fieldErrors;
+                    }
+                    else {
+                        delete newErrors[field.name];
+                    }
+                }
+            }
+            else {
+                // Validate standard text (or similar) inputs.
+                const fieldErrors = this.validateField(field.name, target.value, field.type, field.required, field.maxlength);
                 if (fieldErrors.length > 0) {
-                    this.errors = Object.assign(Object.assign({}, this.errors), { [name]: fieldErrors });
-                    this.hasError = true;
+                    newErrors[field.name] = fieldErrors;
                 }
                 else {
-                    delete this.errors[name];
-                    this.hasError = Object.keys(this.errors).length > 0;
+                    delete newErrors[field.name];
                 }
-                this.alertMessage = null;
             }
+            // Update the errors state and hasError flag.
+            this.errors = newErrors;
+            this.hasError = Object.keys(newErrors).length > 0;
         };
         this.handleSubmit = async (e) => {
+            var _a;
             e.preventDefault();
             if (this.isSubmitting) {
                 return;
@@ -58,6 +86,9 @@ export class EdsForm {
             if (this.setFormUrl && typeof window !== 'undefined') {
                 formData.set('form_url', window.location.href);
             }
+            if (this.authUser) {
+                formData.set('form_user', (_a = this.authUser) === null || _a === void 0 ? void 0 : _a.email);
+            }
             /*const formDataObject = Object.fromEntries((formData as any).entries());
             console.log(JSON.stringify(formDataObject));*/
             const headers = this.coupleAuth
@@ -73,18 +104,21 @@ export class EdsForm {
                 if (!response.ok) {
                     const errorData = await response.json();
                     this.hasError = true;
-                    this.alertMessage = errorData.error || this.errorMessage;
+                    toast.show(errorData.error || this.errorMessage, 'error');
+                    //this.alertMessage = errorData.error || this.errorMessage;
                     return;
                 }
                 const data = await response.json();
                 this.formSubmitted = true;
-                this.alertMessage = data.message || this.successMessage;
+                //this.alertMessage = data.message || this.successMessage;
+                toast.show(data.message || this.successMessage, 'success');
                 this.formEl.reset();
             }
             catch (err) {
                 this.hasError = true;
                 //when api is unreachable will trigger the error message
-                this.alertMessage = `${this.errorMessage}:: ${err}`;
+                //this.alertMessage = `${err}`;
+                toast.show(`${err}`, 'error');
             }
             finally {
                 this.isSubmitting = false;
@@ -97,9 +131,11 @@ export class EdsForm {
         this.submitBtnLabel = 'Submit';
         this.successMessage = 'Your message has been sent.';
         this.errorMessage = 'Some fields in your form are incorrect.';
+        this.submitBtnHintMessage = 'To participate, please sign in using your EBRAINS account. If you do not have an account yet, you can easily create one on the EBRAINS portal.';
         this.endpoint = undefined;
         this.name = 'form';
         this.fields = undefined;
+        this.values = {};
         this.coupleAuth = false;
         this.formSubmitted = false;
         this.hasError = false;
@@ -130,6 +166,14 @@ export class EdsForm {
         });
         linkElement.dispatchEvent(event);
     }
+    // Visibility helper
+    isFieldVisible(field) {
+        if (!field.condition) {
+            return true;
+        }
+        const parentValue = this.values[field.condition.field];
+        return parentValue === field.condition.value;
+    }
     // Validate individual fields dynamically
     validateField(name, value, type, required, maxLength) {
         const errors = [];
@@ -145,7 +189,11 @@ export class EdsForm {
         return errors;
     }
     validateFieldGroup(name, _type, required) {
-        const groupElements = Array.from(this.formEl.querySelectorAll(`[name="${name}"]`));
+        // Find all eds-input-field components that contain this specific name
+        const groupFields = Array.from(this.formEl.querySelectorAll('eds-input-field')).filter((edsField) => { var _a, _b; return ((_b = (_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`input[name="${name}"]`)) === null || _b === void 0 ? void 0 : _b.length) > 0; });
+        // Collect all input elements with the matching name inside those fields
+        const groupElements = groupFields.flatMap((edsField) => { var _a; return Array.from(((_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`input[name="${name}"]`)) || []); });
+        //console.log(`validateFieldGroup - Found ${groupElements.length} elements for ${name}:`, groupElements);
         const isChecked = groupElements.some((el) => el.checked);
         const errors = [];
         if (required && !isChecked) {
@@ -154,8 +202,19 @@ export class EdsForm {
         return errors;
     }
     validateSingleBox(name, required) {
+        var _a;
         const errors = [];
-        const checkboxElement = this.formEl.querySelector(`[name='${name}']`);
+        // Find the eds-input-field that contains the input
+        const edsField = Array.from(this.formEl.querySelectorAll('eds-input-field')).find((field) => { var _a; return (_a = field.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`); });
+        // If not found, handle the error or return early.
+        if (!edsField) {
+            if (required) {
+                errors.push(`${name} is required.`);
+            }
+            return errors;
+        }
+        // Now query within the shadow root of the found component.
+        const checkboxElement = (_a = edsField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${name}"]`);
         if (required && checkboxElement && !checkboxElement.checked) {
             errors.push(`${name} is required.`);
         }
@@ -225,6 +284,18 @@ export class EdsForm {
                         const values = checkboxes.map((checkbox) => checkbox.value);
                         formData.append(input.name, values.join(',')); // Join multiple values with a comma
                     }
+                    else if (input.type === 'file') {
+                        // Handle file uploads.
+                        const fileInput = input;
+                        if (fileInput.files && fileInput.files.length > 0) {
+                            // If multiple files are allowed, you can append them all.
+                            Array.from(fileInput.files).forEach((file) => {
+                                // You can either append each file under the same name (if your backend expects an array)
+                                // or you can give them unique names. Here we use the same name.
+                                formData.append(fileInput.name, file);
+                            });
+                        }
+                    }
                     else {
                         // Handle other input types
                         formData.append(input.name, input.value);
@@ -240,12 +311,13 @@ export class EdsForm {
     render() {
         const hiddenFields = this.parseFields.filter((field) => field.type === 'hidden');
         const otherFields = this.parseFields.filter((field) => field.type !== 'hidden');
-        return (h("form", { key: '8c3e1ba967145566e669ae821bc373d727f47ff7', ref: (el) => (this.formEl = el), enctype: "multipart/form-data", autocomplete: "on", method: "post", onSubmit: this.handleSubmit }, h("div", { key: '0cebec16d61d15b296fca220af6228744042aa30' }, h("slot", { key: '20c166f9d5905b228cb876d74b48c9d229d294e5' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
+        return (h("form", { key: 'fdb974998dfd27c0d857d0fbfbbe9e769e55d7bb', ref: (el) => (this.formEl = el), enctype: "multipart/form-data", autocomplete: "on", method: "post", onSubmit: this.handleSubmit }, h("div", { key: 'dfbe5adce9e5685736169e88408590088aba5b1e' }, h("slot", { key: 'f5c5356a8b87bf63fdd21901da81291c596f1487' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
             var _a, _b;
-            return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, type: field.type, icon: field.icon || null, required: field.required, maxLength: field.maxlength, hint: field.hint, 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 />'),
-                // @ts-ignore
-                onInput: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
-        })), this.submitBtn && (h("div", { key: 'e7f2bfd9a6a9f5822553b421fc5e6e5cee53682c', class: "mt-20" }, h("eds-button", { key: 'da2663e6d033fd610e2a8b6bc66b1316b3f40f71', intent: "primary", label: this.submitBtnLabel, disabled: this.isSubmitting || (this.coupleAuth && !this.isAuthenticated), loading: this.isSubmitting, onClick: (e) => this.handleSubmit(e) }))), this.alertMessage && (this.formSubmitted || this.hasError) && (h("div", { key: '19c6803d24e9dd3d7299fe31f3536b48b1839eaa', class: "mt-20" }, h("eds-alert", { key: '0e613546e7a9d58ada6ce9dbf2a6da4b2a608359', message: this.alertMessage, intent: this.hasError ? 'error' : 'success', direction: "horizontal" })))));
+            if (!this.isFieldVisible(field)) {
+                return null;
+            }
+            return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, type: field.type, icon: field.icon || null, required: field.required, maxLength: field.maxlength, hint: field.hint, 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.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
+        })), this.submitBtn && (h("div", { key: '2c3165a56d5bec9135a8695cae1b87981167c949', class: "mt-20" }, h("eds-button", { key: 'f311628ff58cd03ebbd0f7ccb0623df817d416da', intent: "primary", label: this.submitBtnLabel, disabled: this.isSubmitting || (this.coupleAuth && !this.isAuthenticated), loading: this.isSubmitting, onClick: (e) => this.handleSubmit(e) }), this.coupleAuth && !this.isAuthenticated ? (h("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.submitBtnHintMessage)) : null)), this.alertMessage && (this.formSubmitted || this.hasError) && (h("div", { key: '1c7adc93081294eb86b71e808933215fe04fa033', class: "mt-20" }, h("eds-alert", { key: 'd221dd0674be734a8b7382ea2eeb97509f6bc3a6', message: this.alertMessage, intent: this.hasError ? 'error' : 'success', direction: "horizontal" })))));
     }
     static get is() { return "eds-form"; }
     static get originalStyleUrls() {
@@ -368,6 +440,24 @@ export class EdsForm {
                 "reflect": false,
                 "defaultValue": "'Some fields in your form are incorrect.'"
             },
+            "submitBtnHintMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The message displayed when the form submission fails."
+                },
+                "attribute": "submit-btn-hint-message",
+                "reflect": false,
+                "defaultValue": "'To participate, please sign in using your EBRAINS account. If you do not have an account yet, you can easily create one on the EBRAINS portal.'"
+            },
             "endpoint": {
                 "type": "string",
                 "mutable": false,
@@ -442,6 +532,7 @@ export class EdsForm {
     }
     static get states() {
         return {
+            "values": {},
             "formSubmitted": {},
             "hasError": {},
             "errors": {},