@ebrains/components 2.4.0 → 3.0.0

package/dist/collection/shared-ui/eds-kg-web-services-select/eds-kg-web-services-select.js

@@ -0,0 +1,370 @@
+import { h } from "@stencil/core";
+const webServicesCache = new Map();
+const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
+export class EdsKgWebServicesSelect {
+    constructor() {
+        this.apiEndpoint = '/api/v1/kg/web-services/cached';
+        this.label = 'Select Web Service';
+        this.name = 'web-service';
+        this.placeholder = 'Choose a web service...';
+        this.required = false;
+        this.disabled = false;
+        this.size = 100;
+        this.searchTerm = '';
+        this.value = undefined;
+        this.hint = undefined;
+        this.message = undefined;
+        this.error = false;
+        this.errorMessage = undefined;
+        this.loading = false;
+        this.webServices = [];
+        this.fetchError = '';
+        this.selectOptions = [];
+    }
+    componentWillLoad() {
+        this.fetchWebServices();
+    }
+    async fetchWebServices() {
+        this.loading = true;
+        this.fetchError = '';
+        try {
+            const params = new URLSearchParams(Object.assign({ size: this.size.toString() }, (this.searchTerm && { search: this.searchTerm })));
+            const cacheKey = `${this.apiEndpoint}?${params.toString()}`;
+            // Check cache first
+            const cachedEntry = webServicesCache.get(cacheKey);
+            const now = Date.now();
+            if (cachedEntry && (now - cachedEntry.timestamp) < CACHE_DURATION) {
+                // Use cached data
+                this.webServices = cachedEntry.data;
+            }
+            else {
+                // Fetch fresh data
+                const response = await fetch(`${this.apiEndpoint}?${params}`);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch web services: ${response.statusText}`);
+                }
+                const data = await response.json();
+                this.webServices = data.data || [];
+                // Store in cache
+                webServicesCache.set(cacheKey, {
+                    data: this.webServices,
+                    timestamp: now
+                });
+            }
+            // Format options for eds-input-field: "Localizoom (ebrains-localizoom)"
+            this.selectOptions = this.webServices.map(service => ({
+                label: `${service.name} (${service.short_name})`,
+                value: service.short_name
+            }));
+        }
+        catch (error) {
+            console.error('[eds-kg-web-services-select] Error fetching web services:', error);
+            this.fetchError = error instanceof Error ? error.message : 'Failed to load web services';
+            this.selectOptions = [];
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    render() {
+        if (this.loading) {
+            return (h("div", { class: "loading-container" }, h("eds-input-field", { name: this.name, label: this.label, type: "select", disabled: true, placeholder: "Loading web services...", hint: this.hint, message: this.message, required: this.required })));
+        }
+        if (this.fetchError) {
+            return (h("div", { class: "error-container" }, h("eds-input-field", { name: this.name, label: this.label, type: "select", disabled: true, error: true, "error-message": this.fetchError, hint: this.hint, message: this.message, required: this.required })));
+        }
+        return (h("div", { class: "kg-web-services-select-container" }, h("eds-input-field", { name: this.name, label: this.label, type: "select", placeholder: this.placeholder, disabled: this.disabled, required: this.required, options: this.selectOptions, value: this.value, hint: this.hint, message: this.message, error: this.error, "error-message": this.errorMessage, onEdsinput: (e) => {
+                this.value = e.detail.value;
+                this.edsinput.emit(e.detail);
+            }, onEdschange: (e) => {
+                this.value = e.detail.value;
+                this.edschange.emit(e.detail);
+            } })));
+    }
+    static get is() { return "eds-kg-web-services-select"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-kg-web-services-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-kg-web-services-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "apiEndpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "API endpoint for fetching web services\nDefaults to cached endpoint for better performance"
+                },
+                "attribute": "api-endpoint",
+                "reflect": false,
+                "defaultValue": "'/api/v1/kg/web-services/cached'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the select field"
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'Select Web Service'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for the select field"
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "'web-service'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text for the select field"
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "'Choose a web service...'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required"
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is disabled"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of services to fetch"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "100"
+            },
+            "searchTerm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional search term to filter results"
+                },
+                "attribute": "search-term",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected value (web service short_name)"
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional hint text"
+                },
+                "attribute": "hint",
+                "reflect": false
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional message text"
+                },
+                "attribute": "message",
+                "reflect": false
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error state"
+                },
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message"
+                },
+                "attribute": "error-message",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "loading": {},
+            "webServices": {},
+            "fetchError": {},
+            "selectOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "edsinput",
+                "name": "edsinput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the select field value changes (input event)"
+                },
+                "complexType": {
+                    "original": "{ value: string | boolean | string[] }",
+                    "resolved": "{ value: string | boolean | string[]; }",
+                    "references": {}
+                }
+            }, {
+                "method": "edschange",
+                "name": "edschange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the select field value changes (change event)"
+                },
+                "complexType": {
+                    "original": "{ value: string | boolean | string[] }",
+                    "resolved": "{ value: string | boolean | string[]; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/shared-ui/eds-kg-web-services-select/eds-kg-web-services-select.stories.js

@@ -0,0 +1,87 @@
+export default {
+    title: 'Shared UI/KG Web Services Select',
+    component: 'eds-kg-web-services-select',
+    argTypes: {
+        apiEndpoint: {
+            control: 'text',
+            description: 'API endpoint for fetching web services'
+        },
+        label: {
+            control: 'text',
+            description: 'Label for the select field'
+        },
+        name: {
+            control: 'text',
+            description: 'Name attribute for the select field'
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text for the select field'
+        },
+        required: {
+            control: 'boolean',
+            description: 'Whether the field is required'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the field is disabled'
+        },
+        size: {
+            control: 'number',
+            description: 'Maximum number of services to fetch'
+        },
+        searchTerm: {
+            control: 'text',
+            description: 'Optional search term to filter results'
+        },
+        value: {
+            control: 'text',
+            description: 'Selected value (web service short_name)'
+        },
+        hint: {
+            control: 'text',
+            description: 'Optional hint text'
+        },
+        message: {
+            control: 'text',
+            description: 'Optional message text'
+        },
+        error: {
+            control: 'boolean',
+            description: 'Error state'
+        },
+        errorMessage: {
+            control: 'text',
+            description: 'Error message text'
+        }
+    }
+};
+const Template = (args) => {
+    return `
+    <eds-kg-web-services-select
+      ${args.apiEndpoint ? `api-endpoint="${args.apiEndpoint}"` : ''}
+      ${args.label ? `label="${args.label}"` : ''}
+      ${args.name ? `name="${args.name}"` : ''}
+      ${args.placeholder ? `placeholder="${args.placeholder}"` : ''}
+      ${args.required ? 'required' : ''}
+      ${args.disabled ? 'disabled' : ''}
+      ${args.size ? `size="${args.size}"` : ''}
+      ${args.searchTerm ? `search-term="${args.searchTerm}"` : ''}
+      ${args.value ? `value="${args.value}"` : ''}
+      ${args.hint ? `hint="${args.hint}"` : ''}
+      ${args.message ? `message="${args.message}"` : ''}
+      ${args.error ? 'error' : ''}
+      ${args.errorMessage ? `error-message="${args.errorMessage}"` : ''}
+    ></eds-kg-web-services-select>
+  `;
+};
+export const Default = Template.bind({});
+Default.args = {
+    apiEndpoint: 'https://forms.ebrains.eu/api/v1/kg/web-services/cached',
+    label: 'Select Web Service',
+    name: 'web-service',
+    placeholder: 'Choose a web service...',
+    required: false,
+    disabled: false,
+    size: 100
+};

package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.css

@@ -88,6 +88,10 @@
     gap: 0.25rem;
 }
 
+.gap-8 {
+    gap: 0.5rem;
+}
+
 @media (min-width: 750px) {
     .md\:left-1\/2 {
       left: 50%;

package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.js

@@ -106,7 +106,7 @@ export class EdsMatomoNotice {
         if (!this.showNotice) {
             return null;
         }
-        return (h("div", { class: "fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center" }, h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-4" }, this.optedOut() ? (h("eds-button", { intent: "primary", label: "Opt me in again", "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "primary", label: "Keep Me In", "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghostInverse", label: "Opt-out", "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-4" }, h("eds-button", { intent: "primary", label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }))))));
+        return (h("div", { class: "p-8" }, h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-8" }, this.optedOut() ? (h("eds-button", { intent: "brand", label: "Opt me in again", pill: true, "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "brand", label: "Keep Me In", pill: true, "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghost", label: "Opt-out", pill: true, "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-8" }, h("eds-button", { intent: "brand", pill: true, label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", pill: true, label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }))))));
     }
     static get is() { return "eds-matomo-notice"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.stories.js

@@ -9,18 +9,23 @@ export default {
         description: {
             control: 'text',
             description: 'The description explaining the purpose of collecting analytics data.'
+        },
+        forceShow: {
+            control: 'boolean',
+            description: 'Force the notice to show regardless of cookie state.'
         }
     },
     args: {
         title: 'Analytics Consent',
-        description: 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.'
+        description: 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.',
+        forceShow: false
     }
 };
 export const Default = {
     render: (args) => `
-      <eds-alert message="The component checks whether the <code>mtm_consent</code> cookie exists; if it doesn’t, the notice is displayed—otherwise, deleted the cookie from your browser and refresh the page."></eds-alert>
-      <eds-matomo-notice 
-        title="${args.title}" 
+      <eds-alert message="The component checks whether the <code>mtm_consent</code> cookie exists; if it doesn't, the notice is displayed—otherwise, deleted the cookie from your browser and refresh the page."></eds-alert>
+      <eds-matomo-notice
+        title="${args.title}"
         description="${args.description}">
       </eds-matomo-notice>
     `,
@@ -29,3 +34,65 @@ export const Default = {
         description: 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.'
     }
 };
+export const NotOptedIn = {
+    render: (args) => `
+      <eds-alert message="Shows the initial consent state with <strong>'I agree'</strong> and <strong>'No, thanks'</strong> buttons." intent="info"></eds-alert>
+      <eds-matomo-notice
+        title="${args.title}"
+        description="${args.description}"
+        force-show="true">
+      </eds-matomo-notice>
+    `,
+    args: {
+        title: 'Analytics Consent',
+        description: "We use anonymous analytics to improve our services. No data is collected unless you give your consent. If you don't wish to send data right now, you can always re-enable analytics later by clicking the Cookies Preference button in the footer."
+    }
+};
+export const AlreadyOptedIn = {
+    render: (args) => `
+      <style>
+        eds-matomo-notice::part(notice) {
+          /* Simulate opted-in state by setting cookie */
+        }
+      </style>
+      <eds-alert message="Shows the opted-in state with <strong>'Keep Me In'</strong> and <strong>'Opt-out'</strong> buttons. (Note: This is a simulated view - in production, the cookie state determines which buttons show)" intent="info"></eds-alert>
+      <div class="mb-16">
+        <strong>To see this state in production:</strong> Accept cookies first, then click "Cookie Preferences" in the footer.
+      </div>
+      <eds-matomo-notice
+        title="${args.title}"
+        opt-out-message="${args.optOutMessage}"
+        force-show="true">
+      </eds-matomo-notice>
+      <script>
+        // Set the cookie to simulate opted-in state
+        document.cookie = "mtm_consent=1; path=/; max-age=31536000";
+      </script>
+    `,
+    args: {
+        title: 'Analytics Consent',
+        optOutMessage: "You are already part of our community, and your anonymous data helps shape our product's future! Rest assured, your privacy is fully protected."
+    }
+};
+export const OptedOut = {
+    render: (args) => `
+      <eds-alert message="Shows the opted-out state with <strong>'Opt me in again'</strong> and <strong>'Opt-out'</strong> buttons. This appears when a user has opted out after previously opting in." intent="info"></eds-alert>
+      <div class="mb-16">
+        <strong>To see this state in production:</strong> Opt-out after opting in, then click "Cookie Preferences" in the footer.
+      </div>
+      <eds-matomo-notice
+        title="${args.title}"
+        opt-out-message="${args.optOutMessage}"
+        force-show="true">
+      </eds-matomo-notice>
+      <script>
+        // Set both cookies to simulate opted-out state
+        document.cookie = "mtm_consent=1; path=/; max-age=31536000";
+        document.cookie = "mtm_consent_removed=1; path=/; max-age=31536000";
+      </script>
+    `,
+    args: {
+        title: 'Analytics Consent',
+        optOutMessage: "You have opted out of analytics. You can opt back in at any time."
+    }
+};

package/dist/collection/shared-ui/examples/eds-app-root/eds-app-root.js

@@ -27,7 +27,7 @@ export class EdsAppRoot {
         this.combinedInitPromise = Promise.all([initKeycloakPromise, authStatusPromise]);
     }
     render() {
-        return (h("div", { key: 'aa412cafecaceba211d0938d42779d33a20b418f' }, h("eds-splash-screen", { key: '78de23a74a0263c09e400cb16d20e014a50913ba', inverse: true, initPromise: this.combinedInitPromise }), h("eds-login", { key: '6a690104e273cbefa9ec4e66c5479c2db0666f39', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), h("main", { key: 'e011a7d8a0a78a932f61a218d85aac8f25e8021b' }, this.isAuthenticated ? h("h1", null, "Welcome, authenticated user!") : h("h1", null, "Please log in."))));
+        return (h("div", { key: '10a75e7e117b2f3ab3d0ba8f2a26c122b2e0eed4' }, h("eds-splash-screen", { key: 'ab527af22c9a9fe861bbed4759946428e3e7fdf0', inverse: true, initPromise: this.combinedInitPromise }), h("eds-login", { key: '78e7face11e06df76b9dd29e99b7d968cc2cf32e', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), h("main", { key: '30f463e667ccc25062bbf2764fdabc8937b6097c' }, this.isAuthenticated ? h("h1", null, "Welcome, authenticated user!") : h("h1", null, "Please log in."))));
     }
     static get is() { return "eds-app-root"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/eds-form/formValidators.js

@@ -37,7 +37,6 @@ isFieldVisible) {
     const errors = {};
     let hasError = false;
     parsedFields.forEach((field) => {
-        var _a;
         // Only validate fields that are visible.
         if (!isFieldVisible(field, values)) {
             // If a field is hidden, clear its error.
@@ -76,12 +75,10 @@ isFieldVisible) {
             // NPS type
             else if (field.type === 'nps') {
                 const npsEl = findNpsElement(formEl);
-                if (npsEl && npsEl.shadowRoot) {
-                    const raw = (_a = npsEl.shadowRoot
-                        .querySelector('eds-button[tabindex="0"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-label');
-                    const parsed = raw !== null ? parseInt(raw, 10) : NaN;
-                    const value = Number.isInteger(parsed) && parsed >= 0 && parsed <= 10 ? parsed : NaN;
-                    if (isNaN(value)) {
+                if (npsEl) {
+                    const raw = npsEl.getAttribute('selected-value');
+                    const value = raw !== null ? parseInt(raw, 10) : null;
+                    if (value === null || isNaN(value)) {
                         // eslint-disable-next-line
                         if (field.required) {
                             errors[field.name] = ['This field is required.'];
@@ -89,7 +86,7 @@ isFieldVisible) {
                         }
                     }
                     else {
-                        // valid value present; if you need further range checks, add here
+                        // valid value present (0-10); if you need further range checks, add here
                     }
                 }
                 else if (field.required) {

package/dist/collection/utils/eds-form/individualValidator.js

@@ -23,9 +23,31 @@ export function validateField(name, value, type, required, maxLength, min, max)
     if (maxLength && typeof value === 'string' && value.length > maxLength) {
         errors.push(`${name} must be at most ${maxLength} characters.`);
     }
+    // Email validation
     if (type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.toString())) {
         errors.push('Invalid email format.');
     }
+    // URL validation
+    if (type === 'url' && value) {
+        try {
+            new URL(value.toString());
+        }
+        catch (_a) {
+            errors.push('Invalid URL format.');
+        }
+    }
+    // Tel validation - must contain at least one digit and only valid phone characters
+    if (type === 'tel' && value) {
+        const telValue = value.toString();
+        const hasDigit = /\d/.test(telValue);
+        const onlyValidChars = /^[\d\s\-\+\(\)\.]+$/.test(telValue);
+        if (!hasDigit) {
+            errors.push('Phone number must contain at least one digit.');
+        }
+        else if (!onlyValidChars) {
+            errors.push('Phone number contains invalid characters. Use only digits, spaces, +, -, (, ), or .');
+        }
+    }
     return errors;
 }
 export function validateFieldGroup(name, required, formEl) {