@ebrains/components 0.6.0-alpha.0 → 0.7.0-alpha.1

package/dist/components/eds-input-footer2.js

@@ -12,7 +12,7 @@ const EdsInputFooter = /*@__PURE__*/ proxyCustomElement(class EdsInputFooter ext
         this.link = undefined;
     }
     render() {
-        return (h("div", { key: 'c088f6c9bf4c3ca1efce1a1ff41ece8d4f8a6756', class: "space-y-4" }, this.error && this.errorMessage && (h("div", { key: '7404a329f2b5da7f9444f986178c5e4dbbe838ad', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '8f9d83b1d8dda824cac17d9c2ce3cb6cc5a58945', icon: "warning" }), h("p", { key: 'f223076bc18088e264b4888d18bb9673f803d875', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '40bdbc35ba4985802177d7f9b2c44f893e4cb40c', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: 'e6297a49f63ce2ab14bac8df0186fb42fab4416d', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        return (h("div", { key: 'a1b8f8eec2a2d41559ae2d560a1311eaee7bd028', class: "space-y-4" }, this.error && this.errorMessage && (h("div", { key: 'ac41ed481f7718079476cb46ac7a10b58854ccce', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '1c20946efeac10c5b8afa4c83d25b5eb505b8589', icon: "warning" }), h("p", { key: 'fc1c52f7cf5f619cef9951587dfe513772125cdf', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: 'de5357f9a1365f93365bcea27cb45b4320386401', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: '3639cd34dbfe3a5d2df3096a92399dd7d0deab27', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
     }
 }, [0, "eds-input-footer", {
         "name": [1],

package/dist/components/eds-input-label2.js

@@ -10,7 +10,7 @@ const EdsInputLabel = /*@__PURE__*/ proxyCustomElement(class EdsInputLabel exten
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: '38be7206acfad300657a99218c3138e91069d710', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '1e80610f66d51a1c46918086bb5b5153c0e35a3c' }, h("span", { key: '83d15d62c0539f1847746b4a2b9c9971b4852da8', "aria-hidden": "true" }, "*"), h("span", { key: '3f45f5a436c41cf7e55570a2abe8844c8daa7525', class: "sr-only" }, "required")))));
+        return (h("label", { key: '8dec4a891bafa61129673f2ce6eb6f738c938d1b', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '49f05c988b072c30d9f98f258e134e6f67424208' }, h("span", { key: '75b458aa32b7b6f8e1d386624911eb7fd519d3bb', "aria-hidden": "true" }, "*"), h("span", { key: 'e83b09c594b966022332fa44fb73548445ef9ed4', class: "sr-only" }, "required")))));
     }
 }, [0, "eds-input-label", {
         "label": [1],

package/dist/components/eds-input-range2.js

@@ -26,9 +26,9 @@ const EdsInputRange = /*@__PURE__*/ proxyCustomElement(class EdsInputRange exten
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '6a70b857cfbeb152e6f099b6dfc91cc9fec5bf11', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: 'da4c0158b1d33804404f4373b3c55c53b5b2f53b', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input",
+        return (h("div", { key: '22cff1442ba41eaad3f59f549c20d1070a827157', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: 'aa34e6a24b758e71f7bd1d314e6f77c02fc4e646', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input",
             //aria-describedby={describedBy}
-            onInput: this.onInput }), h("p", { key: '66bc2e755e4eb38015e32441599a9f9bade7c679', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
+            onInput: this.onInput }), h("p", { key: '0f7317f564f63ec2ffcaa65c9f90847e21bbf62e', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
     }
     get el() { return this; }
 }, [0, "eds-input-range", {

package/dist/components/eds-input-search2.js

@@ -1,24 +1,37 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './analytics.js';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
 const EdsInputSearch = /*@__PURE__*/ proxyCustomElement(class EdsInputSearch extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.onInput = (e) => {
-            // eslint-disable-next-line
-            console.log('on input:', e);
-        };
+        this.search = createEvent(this, "search", 7);
+        /*onInput = (e: any) => {
+          // eslint-disable-next-line
+          console.log('on input:', e);
+        };*/
         this.onChange = (e) => {
             // eslint-disable-next-line
-            console.log('on change:', e.target.value);
+            this.search.emit({
+                event: 'change',
+                value: e.target.value
+            });
+            sendAnalytics({
+                category: 'ui-component',
+                parentContext: null,
+                tag: this.el.tagName.toLowerCase(),
+                name: e.target.value || '',
+                action: 'search'
+            });
         };
         this.name = undefined;
-        this.inputId = 'search';
+        this.inputId = 'search-main';
         this.placeholder = 'Search...';
         this.value = undefined;
         this.disabled = false;
         this.required = false;
+        this.decorate = undefined;
     }
     componentDidLoad() {
         // Assign the native input element after the component loads
@@ -29,9 +42,10 @@ const EdsInputSearch = /*@__PURE__*/ proxyCustomElement(class EdsInputSearch ext
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: 'df7ee546beed6eedfba5a19e0fdf349d9aaece90', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '4663fdd0a9ba4eace47dc90f9c7f50fc2e6f7925', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest" }), h("input", { key: 'e3e72f3dea068cbab3d398de36dd09e4a7f1ce93', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", class: "search-input w-full py-6 input input-icon pl-36",
+        return (h("div", { key: '79e968e751010d897e1daa1de3793e39b4ccb46b', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: 'fee0e9f6fa852774b6628f4b1a3dc7ee968cf11c', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest" }), h("input", { key: 'd7e5ad3adc769f5152339a253a413c184c0df9d2', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", class: `search-input w-full rounded-sm f-body-01 pl-36 px-6 py-6 gap-x-12 block appearance-none border-0 effect-color effect-focus ${this.decorate}`,
             //aria-describedby={describedBy}
-            onInput: this.onInput, onChange: this.onChange })));
+            //onInput={this.onInput}
+            onChange: this.onChange })));
     }
     get el() { return this; }
 }, [0, "eds-input-search", {
@@ -41,6 +55,7 @@ const EdsInputSearch = /*@__PURE__*/ proxyCustomElement(class EdsInputSearch ext
         "value": [1],
         "disabled": [4],
         "required": [4],
+        "decorate": [1],
         "getInputElement": [64]
     }]);
 function defineCustomElement() {

package/dist/components/eds-input-select2.js

@@ -86,7 +86,7 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
         return path.split('.').reduce((acc, part) => acc && acc[part], obj);
     }
     render() {
-        return (h("div", { key: 'c1469a270fa5e775ac4d17f1c7e259d02477d7a2', class: "relative" }, h("select", { key: '3aab6ec60d386e51ce27c1cfc26059132d96957f', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled || this.loading, required: this.required, onChange: this.handleChange }, h("option", { key: 'ee3aa20ed1b99bddd7bafa3aac43f3c06db07b8f', value: "", disabled: true, hidden: true }, this.loading ? 'Loading options...' : `Please select ${this.name}`), this.dynamicOptions.map((option, index) => (h("option", { key: index, value: this.getValueByPath(option, this.dynamicValueKey) }, this.getValueByPath(option, this.dynamicLabelKey))))), h("span", { key: '7e70051ac49efd053f00521b51ad19e88cf5cdb7', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled || this.loading ? 'text-lightest bg-transparent' : ''}` }, h("eds-icon-wrapper", { key: '2ef2d0d744216a1f931ac0bfe1058f54c9af4402', class: "w-20 h-20", icon: "chevron-right" }))));
+        return (h("div", { key: '450ff9166ab5912ab3e214941a0ab2536c5e470a', class: "relative" }, h("select", { key: 'afc462bfef01f8b47a52e2e6fa5fde9027029821', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled || this.loading, required: this.required, onChange: this.handleChange }, h("option", { key: '52a6848516672ceaf0094ddeea6943529bf26b1d', value: "", disabled: true, hidden: true }, this.loading ? 'Loading options...' : `Please select ${this.name}`), this.dynamicOptions.map((option, index) => (h("option", { key: index, value: this.getValueByPath(option, this.dynamicValueKey) }, this.getValueByPath(option, this.dynamicLabelKey))))), h("span", { key: '8a3759be564dc46b82fb16a3ed6b321d2b7f857c', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled || this.loading ? 'text-lightest bg-transparent' : ''}` }, h("eds-icon-wrapper", { key: '0eb96b11cc1a79f218d3684f7b36b487b87e14e6', class: "w-20 h-20", icon: "chevron-right" }))));
     }
     static get watchers() { return {
         "options": ["loadOptions"]

package/dist/components/eds-input2.js

@@ -50,12 +50,12 @@ const EdsInput = /*@__PURE__*/ proxyCustomElement(class EdsInput extends HTMLEle
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (h("div", { key: 'e67c7566fe5a1574d6ff0fff61178b163c5881f9', class: "relative flex items-center" }, this.type === 'textarea' ? (h("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' ? (h("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) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (h("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 (h("div", { key: '86b74d87c87c5abdc7eeb1bb720e218a57fc1fad', class: "relative flex items-center" }, this.type === 'textarea' ? (h("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' ? (h("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) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (h("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: `
               ${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' && (h("span", { key: '35bc563715e65073898259d12b4ef2c467b14439', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: '54cab667a1b8b1bb906c2359cdbd2fb23171ba8b', 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' && (h("span", { key: 'a8905b63699167cb5ccbea4c47e7d2ac6301e357', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: 'dd19dbdda2f5114cf1ea0614169a54d8ae108833', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/eds-link2.js

@@ -204,7 +204,7 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h(ComponentType, { key: '965b2bf54c59752e7ed3cafbc167a8f2d1a2a9b1', class: `${classes || ''} ${this.extraClass || ''}`, href: !this.disabled ? this.url : undefined, target: this.external && !this.disabled ? '_blank' : undefined, rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined, "aria-label": computedAriaLabel, "aria-disabled": this.disabled ? 'true' : null, "aria-current": this.current ? 'page' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, h("span", { key: '7df72410c98bab3c0ef204e5cd33f1e069976d24', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: '208b4fa88695bd8e8ed961d4c7639b117341110c', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (h(ComponentType, { key: '66edcff91c1051899df25c8d214620cf039a52ad', class: `${classes || ''} ${this.extraClass || ''}`, href: !this.disabled ? this.url : undefined, target: this.external && !this.disabled ? '_blank' : undefined, rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined, "aria-label": computedAriaLabel, "aria-disabled": this.disabled ? 'true' : null, "aria-current": this.current ? 'page' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, h("span", { key: 'f0754612e2c88ea1075266b2fc8e70277fbd63e2', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: '17a6de3e392f51057894aeca8f05a7852f8c7f1e', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     get el() { return this; }
     static get style() { return EdsLinkStyle0; }

package/dist/components/eds-login.js

@@ -1,121 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as login, a as logout, i as initKeycloak, b as isAuthenticated, g as getUser } from './keycloak.js';
-import { t as toast } from './toastManager.js';
-import { d as defineCustomElement$3 } from './eds-button2.js';
-import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
-
-const EdsLogin$1 = /*@__PURE__*/ proxyCustomElement(class EdsLogin extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.authStatusChanged = createEvent(this, "authStatusChanged", 7);
-        /**
-         * Handles user login by invoking the Keycloak `login` function.
-         * Only triggers login if the user is not already authenticated.
-         */
-        this.handleLogin = async () => {
-            if (!this.authenticated) {
-                try {
-                    await login();
-                    toast.show('You are authenticated', 'success');
-                }
-                catch (error) {
-                    toast.show(error.message, 'error');
-                }
-            }
-        };
-        /**
-         * Handles user logout by invoking the Keycloak `logout` function.
-         * Resets the `authenticated` state to `false` after logout.
-         */
-        this.handleLogout = async () => {
-            try {
-                await logout();
-            }
-            catch (error) {
-                toast.show(error.message, 'error');
-            }
-            this.authenticated = false;
-            this.user = null;
-        };
-        this.keycloakUrl = undefined;
-        this.keycloakRealm = undefined;
-        this.keycloakClientId = undefined;
-        this.authenticated = false;
-        this.user = null;
-    }
-    /**
-     * Lifecycle method that runs when the component is about to load.
-     * It initializes authentication by calling the `initAuth` method.
-     */
-    async componentWillLoad() {
-        // Check if required props are provided (optional check)
-        if (!this.keycloakUrl || !this.keycloakRealm || !this.keycloakClientId) {
-            // eslint-disable-next-line
-            console.error('Keycloak configuration props are missing.');
-            return;
-        }
-        await this.initAuth();
-    }
-    /**
-     * Initializes the Keycloak authentication by configuring Keycloak with the provided props.
-     * Sets the `authenticated` state and `user` data if the user is authenticated.
-     * Emits `authStatusChanged` event with the authentication status.
-     */
-    async initAuth() {
-        try {
-            await initKeycloak({
-                url: this.keycloakUrl,
-                realm: this.keycloakRealm,
-                clientId: this.keycloakClientId
-            }, true);
-            if (isAuthenticated()) {
-                this.user = getUser();
-                this.authenticated = true;
-                this.authStatusChanged.emit({
-                    authenticated: this.authenticated,
-                    user: this.user
-                }); // Emit auth status change
-            }
-        }
-        catch (error) {
-            toast.show(error.message, 'error');
-        }
-    }
-    render() {
-        return (h("div", { key: '62768f8a6cc8ac16b13f9b2bb9cf5835f7f63844', class: "block" }, !this.authenticated && (h("eds-button", { key: '31e341d628242fed472f673c0fe8346c7871515d', label: "Login", intent: "primary", "extra-class": "text-default", "aria-label": "Login", triggerClick: this.handleLogin.bind(this) }))));
-    }
-}, [1, "eds-login", {
-        "keycloakUrl": [1, "keycloak-url"],
-        "keycloakRealm": [1, "keycloak-realm"],
-        "keycloakClientId": [1, "keycloak-client-id"],
-        "authenticated": [32],
-        "user": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["eds-login", "eds-button", "eds-icon-wrapper"];
-    components.forEach(tagName => { switch (tagName) {
-        case "eds-login":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, EdsLogin$1);
-            }
-            break;
-        case "eds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "eds-icon-wrapper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { E as EdsLogin$1, d as defineCustomElement$1 } from './eds-login2.js';
 
 const EdsLogin = EdsLogin$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/{cjs/keycloak-93fc0315.js → components/eds-login2.js}

@@ -1,4 +1,7 @@
-'use strict';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { t as toast } from './toastManager.js';
+import { d as defineCustomElement$2 } from './eds-button2.js';
+import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
 /*
  * Copyright 2016 Red Hat, Inc. and/or its affiliates
@@ -1947,9 +1950,127 @@ async function checkServerAvailability(url) {
     }
 }
 
-exports.checkServerAvailability = checkServerAvailability;
-exports.getUser = getUser;
-exports.initKeycloak = initKeycloak;
-exports.isAuthenticated = isAuthenticated;
-exports.login = login;
-exports.logout = logout;
+const EdsLogin = /*@__PURE__*/ proxyCustomElement(class EdsLogin extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.keycloak = createEvent(this, "keycloak", 7);
+        this.auth = createEvent(this, "auth", 7);
+        /**
+         * Handles user login by invoking the Keycloak `login` function.
+         * Only triggers login if the user is not already authenticated.
+         */
+        this.handleLogin = async () => {
+            if (!this.authenticated) {
+                try {
+                    await login();
+                }
+                catch (error) {
+                    toast.show(error.message, 'error');
+                }
+            }
+        };
+        /**
+         * Handles user logout by invoking the Keycloak `logout` function.
+         * Resets the `authenticated` state to `false` after logout.
+         */
+        this.handleLogout = async () => {
+            try {
+                await logout();
+            }
+            catch (error) {
+                toast.show(error.message, 'error');
+            }
+            this.authenticated = false;
+            this.user = null;
+        };
+        this.keycloakUrl = undefined;
+        this.keycloakRealm = undefined;
+        this.keycloakClientId = undefined;
+        this.authenticated = false;
+        this.user = null;
+        this.serverAvailable = false;
+    }
+    /**
+     * Lifecycle method that runs when the component is about to load.
+     * It initializes authentication by calling the `initAuth` method.
+     */
+    async componentWillLoad() {
+        // Check if required props are provided (optional check)
+        if (!this.keycloakUrl || !this.keycloakRealm || !this.keycloakClientId) {
+            // eslint-disable-next-line
+            console.error('Keycloak configuration props are missing.');
+            return;
+        }
+        this.serverAvailable = await checkServerAvailability(`${this.keycloakUrl}/realms/${this.keycloakRealm}`);
+        if (!this.serverAvailable) {
+            toast.show('Keycloak server is unavailable.', 'error');
+            return; // Do not proceed further
+        }
+        await this.initAuth();
+    }
+    /**
+     * Initializes the Keycloak authentication by configuring Keycloak with the provided props.
+     * Sets the `authenticated` state and `user` data if the user is authenticated.
+     * Emits `authStatusChanged` event with the authentication status.
+     */
+    async initAuth() {
+        try {
+            const res = await initKeycloak({
+                url: this.keycloakUrl,
+                realm: this.keycloakRealm,
+                clientId: this.keycloakClientId
+            }, true);
+            this.keycloak.emit({
+                init: res
+            });
+            if (isAuthenticated()) {
+                this.user = getUser();
+                this.authenticated = true;
+                this.auth.emit({
+                    authenticated: this.authenticated,
+                    user: this.user
+                }); // Emit auth status change
+            }
+        }
+        catch (error) {
+            toast.show(error.message, 'error');
+        }
+    }
+    render() {
+        return (h("div", { key: '074566b791eeb9ea4a0558b4ed83a96e4b673356', class: "block" }, !this.authenticated && (h("eds-button", { key: '3a05ff97a90d73204eb77c5dad0d328294d72d3e', label: "Login", intent: "primary", "extra-class": "text-default", "aria-label": "Login", triggerClick: this.handleLogin.bind(this) }))));
+    }
+}, [1, "eds-login", {
+        "keycloakUrl": [1, "keycloak-url"],
+        "keycloakRealm": [1, "keycloak-realm"],
+        "keycloakClientId": [1, "keycloak-client-id"],
+        "authenticated": [32],
+        "user": [32],
+        "serverAvailable": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-login", "eds-button", "eds-icon-wrapper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-login":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsLogin);
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { EdsLogin as E, defineCustomElement as d };

package/dist/components/eds-logo-variations.js

@@ -20,7 +20,7 @@ const EdsLogoVariations$1 = /*@__PURE__*/ proxyCustomElement(class EdsLogoVariat
         }
     }
     render() {
-        return h("div", { key: '0494cbb3e7b4902e91a0c78c691bc3405b9f11cc', class: "container" }, this.renderContent());
+        return h("div", { key: '0b23fee608fcbe7059fce155bd65a0c0a4d16e07', class: "container" }, this.renderContent());
     }
 }, [0, "eds-logo-variations", {
         "tabIndex": [2, "tab-index"]

package/dist/components/eds-logo2.js

@@ -67,7 +67,7 @@ const EdsLogo = /*@__PURE__*/ proxyCustomElement(class EdsLogo extends HTMLEleme
     }
     render() {
         const logoContent = this.getLogo();
-        return (h("a", { key: 'ee8de4071b0137020341982b4c5cb2c938f1c4df', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '1eb620afbcc5a2a5c6914cc1c91a45ca62d0068c', innerHTML: logoContent })));
+        return (h("a", { key: '5656cc942833ab3f5511ab634c502d694e982db7', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '3e0763fdd94b7624182af3aee50b314c81f064d6', innerHTML: logoContent })));
     }
     get el() { return this; }
     static get style() { return EdsLogoStyle0; }

package/dist/components/eds-matomo-notice2.js

@@ -1,5 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { t as toast } from './toastManager.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { m as matomoOptIn, a as matomoOptOut } from './analytics.js';
 import { d as defineCustomElement$3 } from './eds-accordion2.js';
 import { d as defineCustomElement$2 } from './eds-button2.js';
@@ -13,11 +12,9 @@ const EdsMatomoNotice = /*@__PURE__*/ proxyCustomElement(class EdsMatomoNotice e
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.consent = createEvent(this, "consent", 7);
         this.title = 'Analytics Consent';
         this.description = 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.';
-        this.deferMsgToast = 'You can decide later.';
-        this.optInMsgToast = 'You have opted in to analytics.';
-        this.optOutMsgToast = 'You have opted out of analytics.';
         this.forceShow = false;
         this.showNotice = true;
     }
@@ -38,11 +35,20 @@ const EdsMatomoNotice = /*@__PURE__*/ proxyCustomElement(class EdsMatomoNotice e
      */
     componentWillLoad() {
         if (this.forceShow) {
+            // If forceShow is true, always show the notice
             this.showNotice = true;
         }
         else {
-            const sessionDeferred = sessionStorage.getItem(this.getStorageKey());
-            this.showNotice = !sessionDeferred;
+            // If user has already consented, hide the notice
+            // eslint-disable-next-line
+            if (this.hasCookieConsent()) {
+                this.showNotice = false;
+            }
+            else {
+                // Otherwise check if user deferred in this session
+                const sessionDeferred = sessionStorage.getItem(this.getStorageKey());
+                this.showNotice = !sessionDeferred;
+            }
         }
     }
     componentDidLoad() {
@@ -62,18 +68,18 @@ const EdsMatomoNotice = /*@__PURE__*/ proxyCustomElement(class EdsMatomoNotice e
     }
     optInAnalytics() {
         matomoOptIn();
-        toast.show(this.optInMsgToast, 'success');
         this.hideNotice();
+        this.consent.emit('in');
     }
     optOutAnalytics() {
         matomoOptOut();
-        toast.show(this.optOutMsgToast, 'warning');
         this.hideNotice();
+        this.consent.emit('out');
     }
     deferDecision() {
         sessionStorage.setItem(this.getStorageKey(), 'true');
-        toast.show(this.deferMsgToast, 'warning');
         this.hideNotice();
+        this.consent.emit('defer');
     }
     hideNotice() {
         this.showNotice = false;
@@ -89,9 +95,6 @@ const EdsMatomoNotice = /*@__PURE__*/ proxyCustomElement(class EdsMatomoNotice e
 }, [1, "eds-matomo-notice", {
         "title": [1],
         "description": [1],
-        "deferMsgToast": [1, "defer-msg-toast"],
-        "optInMsgToast": [1, "opt-in-msg-toast"],
-        "optOutMsgToast": [1, "opt-out-msg-toast"],
         "forceShow": [4, "force-show"],
         "showNotice": [32]
     }]);

package/dist/components/eds-modal.js

@@ -75,6 +75,18 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
     async toggle() {
         this.isOpen = !this.isOpen;
     }
+    /**
+     * Listens for global custom events to open the modal.
+     */
+    handleGlobalOpen() {
+        this.open();
+    }
+    /**
+     * Listens for global custom events to close the modal.
+     */
+    handleGlobalClose() {
+        this.close();
+    }
     /**
      * Closes the modal when the Escape key is pressed.
      */
@@ -86,9 +98,9 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
     render() {
         // Generate a unique id for the title so we can reference it for aria-labelledby.
         const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
-        return (h("div", { key: 'cd976fb0cd0c0663279dcd4dbd5823e26b6c32f7', class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: '40a2febed5d0ec15d5370183c97cfd05abd72007', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        return (h("div", { key: '980f396b79c32a36005b5f7813cc52b2e97457fa', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: 'a2e4bb022c17c66266809f1a8dd706523a6ff07b', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), h("div", { key: '50f2c23d80a2007aca4d0a8911816141e43b71ee', class: `max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: 'e1cba5879bc488a99b896c48c8a780336b2195e7', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: '8f018e3d2890346d23e7dcb115676051048bcacb', id: titleId, class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), h("eds-button", { key: '4ae4013dd45573648817ac95ee4370ed615aa6a0', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: 'ac4e3d8f273d04ad02e0123c23b36b89bfc89db2', class: "pt-8" }, h("slot", { key: '60917e9f750bfd7948e580acc817cffe6424608a' })))));
+            onClick: () => this.close() })), h("div", { key: '53c0c2a9559a6a5116f88caa2a7d92810560521e', class: `container max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '576b58f6bd78a969436c6a892f4dfec84a486cc4', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: '63e682d4297a346426dc7559cf0d80e21cc51f4c', id: titleId, class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), h("eds-button", { key: 'eed35b30903d65694f2944431e7f387a8ef3f3e9', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: '6c6e673640ed2ef2ae6139ae1931a4b0a0db9aa9', class: "pt-8" }, h("slot", { key: 'eaaf2c17470681dc799b74f5eaebbe2496564c0e' })))));
     }
     get el() { return this; }
     static get style() { return EdsModalStyle0; }
@@ -101,7 +113,7 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
         "open": [64],
         "close": [64],
         "toggle": [64]
-    }, [[8, "keydown", "handleKeyDown"]]]);
+    }, [[0, "eds-modal-open", "handleGlobalOpen"], [0, "eds-modal-close", "handleGlobalClose"], [8, "keydown", "handleKeyDown"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/eds-pagination2.js

@@ -162,7 +162,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         event.preventDefault(); // Prevent default link navigation
         if (newPage !== this.currentPage) {
             this.links = this.links.map((link) => typeof link === 'object' ? Object.assign(Object.assign({}, link), { current: parseInt(link.label) === newPage }) : link);
-            const pageChangeEvent = new CustomEvent('pageChange', {
+            const pageChangeEvent = new CustomEvent('page', {
                 detail: newPage,
                 bubbles: true,
                 composed: true
@@ -172,7 +172,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         }
     }
     render() {
-        return (h("div", { key: '8c8418eec263acc153a928b752775458f897504f' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '02a5a69772a4812f10b29e8df117b72df210614d', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'ef9804843100c722643c24e31a05f86f2d55efa0', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
+        return (h("div", { key: 'b33415e05457ccc78ea3744a1baa9affbf38ca4a' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'e555e94a3fd13cf0d57108bd2cca3fb97cd0c688', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'c63f1d5aa6154a23d714c74dcd9a0a75b68df579', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
                 ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
                 : this.isFirstPage()
                     ? '#'

package/dist/components/eds-progress-bar2.js

@@ -19,7 +19,7 @@ const EdsProgressBar = /*@__PURE__*/ proxyCustomElement(class EdsProgressBar ext
     }
     render() {
         const progressValue = this.value;
-        return (h("div", { key: '0f47fedbf9d44887f65b399e184215f0937b1df1', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, h("div", { key: 'a2d095d778842c969832ea6b1ba7f7ef917d1390', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
+        return (h("div", { key: '9a7fa42058034305b22818d464e7b633d7831d67', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, h("div", { key: '90b0ac9a538b575a30163c0dbbf437e1cfe8ce39', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
     }
     static get style() { return EdsProgressBarStyle0; }
 }, [1, "eds-progress-bar", {