@ebrains/components 0.9.2-beta → 0.9.3-beta

package/dist/components/eds-login.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsLogin extends Components.EdsLogin, HTMLElement {}
+export const EdsLogin: {
+    prototype: EdsLogin;
+    new (): EdsLogin;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-login.js

@@ -0,0 +1,6 @@
+import { E as EdsLogin$1, d as defineCustomElement$1 } from './eds-login2.js';
+
+const EdsLogin = EdsLogin$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsLogin, defineCustomElement };

package/dist/components/{eds-login.entry.js → eds-login2.js}

@@ -1,5 +1,7 @@
-import { r as registerInstance, a as createEvent, h } from './index-9d277061.js';
-import { t as toast } from './toastManager-b716afd8.js';
+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
@@ -1347,9 +1349,6 @@ function Keycloak (config) {
                 },
 
                 redirectUri: function(options, encodeHash) {
-                    if (arguments.length == 1) {
-                        encodeHash = true;
-                    }
 
                     if (options && options.redirectUri) {
                         return options.redirectUri;
@@ -1904,13 +1903,6 @@ function initKeycloak(config, silentCheck = true) {
     });
     return keycloakInitPromise;
 }
-// Get the username of the authenticated user
-function getUsername() {
-    if (keycloak && keycloak.tokenParsed) {
-        return keycloak.tokenParsed.preferred_username || 'Unknown';
-    }
-    return 'Unknown';
-}
 function getUser() {
     if ((keycloak === null || keycloak === void 0 ? void 0 : keycloak.authenticated) && (keycloak === null || keycloak === void 0 ? void 0 : keycloak.idTokenParsed)) {
         return {
@@ -1958,9 +1950,11 @@ async function checkServerAvailability(url) {
     }
 }
 
-const EdsLogin = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+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);
         /**
@@ -2045,8 +2039,38 @@ const EdsLogin = class {
         }
     }
     render() {
-        return (h("div", { key: 'ac10895096f36f2fb3a79622972d5a8c519685eb', class: "block" }, !this.authenticated && (h("eds-button", { key: '55aab5ee63214d6a1ccdefc303273df99aa309cf', label: "Login", intent: "primary", "extra-class": "text-default", "aria-label": "Login", triggerClick: this.handleLogin.bind(this) }))));
+        return (h("div", { key: '041846174aaad541acce03588a087793d10daa1e', class: "block" }, !this.authenticated && (h("eds-button", { key: '360a84ec79a15c9293e3898b77df649c469d9529', 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 eds_login };
+export { EdsLogin as E, defineCustomElement as d };

package/dist/components/eds-logo.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsLogo extends Components.EdsLogo, HTMLElement {}
+export const EdsLogo: {
+    prototype: EdsLogo;
+    new (): EdsLogo;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-logo.js

@@ -0,0 +1,6 @@
+import { E as EdsLogo$1, d as defineCustomElement$1 } from './eds-logo2.js';
+
+const EdsLogo = EdsLogo$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsLogo, defineCustomElement };

package/dist/components/{eds-logo.entry.js → eds-logo2.js}

@@ -1,12 +1,16 @@
-import { r as registerInstance, h, g as getElement } from './index-9d277061.js';
-import { K as hLogoColor, M as hLogoBlack, N as hLogoColorWhite, O as hLogoWhite, P as hLogoWhiteNoBg, Q as vLogoColor, R as vLogoBlack, S as vLogoColorWhite, T as vLogoWhite, U as vLogoWhiteNoBg } from './index-7281d120.js';
-import { s as sendAnalytics } from './analytics-e29fcd53.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { h as hLogoColor } from './logo-color.js';
+import { h as hLogoBlack, a as hLogoColorWhite, b as hLogoWhite, c as hLogoWhiteNoBg, v as vLogoColor, d as vLogoBlack, e as vLogoColorWhite, f as vLogoWhite, g as vLogoWhiteNoBg } from './logo-white-no-bg.js';
+import { s as sendAnalytics } from './analytics.js';
 
 const edsLogoCss = ".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-current{color:currentColor}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.h-full{height:100%}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}@media (min-width: 900px){.lg\\:w-\\[150px\\]{width:150px}}";
+const EdsLogoStyle0 = edsLogoCss;
 
-const EdsLogo = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const EdsLogo = /*@__PURE__*/ proxyCustomElement(class EdsLogo extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.href = '/';
         this.orientation = 'horizontal';
         this.type = undefined;
@@ -63,10 +67,28 @@ const EdsLogo = class {
     }
     render() {
         const logoContent = this.getLogo();
-        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 })));
+        return (h("a", { key: 'a23e44227ebaa3b999c961e1354c268f2c916a6f', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: 'cba53a54e6d31aabfa62ddcd8aa53bda56b8b706', innerHTML: logoContent })));
     }
-    get el() { return getElement(this); }
-};
-EdsLogo.style = edsLogoCss;
+    get el() { return this; }
+    static get style() { return EdsLogoStyle0; }
+}, [1, "eds-logo", {
+        "href": [1],
+        "orientation": [1],
+        "type": [1],
+        "label": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-logo"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-logo":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsLogo);
+            }
+            break;
+    } });
+}
 
-export { EdsLogo as eds_logo };
+export { EdsLogo as E, defineCustomElement as d };

package/dist/components/eds-matomo-notice.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsMatomoNotice extends Components.EdsMatomoNotice, HTMLElement {}
+export const EdsMatomoNotice: {
+    prototype: EdsMatomoNotice;
+    new (): EdsMatomoNotice;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { E as EdsMatomoNotice$1, d as defineCustomElement$1 } from './eds-matomo-notice2.js';
+
+const EdsMatomoNotice = EdsMatomoNotice$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsMatomoNotice, defineCustomElement };

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

@@ -0,0 +1,158 @@
+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';
+import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
+
+const edsMatomoNoticeCss = ".fixed{position:fixed}.absolute{position:absolute}.w-full{width:100%}.bottom-0{bottom:0rem}.bottom-4{bottom:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.z-10{z-index:10}.z-\\[999999\\]{z-index:999999}.left-0{left:0rem}.left-1\\/2{left:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex{display:flex}.gap-12{gap:0.75rem}.gap-20{gap:1.25rem}.gap-4{gap:0.25rem}@media (min-width: 750px){.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}";
+const EdsMatomoNoticeStyle0 = edsMatomoNoticeCss;
+
+const EdsMatomoNotice = /*@__PURE__*/ proxyCustomElement(class EdsMatomoNotice extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.consent = createEvent(this, "consent", 7);
+        this.heading = 'Analytics Consent';
+        this.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. However, by opting in today, you're joining a community that shapes our product's future—all while keeping your data completely anonymous.";
+        this.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.";
+        this.forceShow = false;
+        this.showNotice = true;
+    }
+    /**
+     * Listens for global custom events to open the matomo-consent.
+     */
+    toggleCookiesConsent() {
+        this.showNotice = !this.showNotice;
+    }
+    /**
+     * Checks if the consent cookie exists.
+     */
+    hasCookieConsent() {
+        return !!document.cookie.split('; ').find((row) => row.startsWith('mtm_consent='));
+    }
+    /**
+     * Checks if the user has opted out after has opted in.
+     */
+    optedOut() {
+        return !!document.cookie.split('; ').find((row) => row.startsWith('mtm_consent_removed'));
+    }
+    /**
+     * Generate a unique storage key based on appId or the app's domain.
+     */
+    getStorageKey() {
+        return `${window.location.host}-matomo-deferred`;
+    }
+    /**
+     * Check cookies and sessionStorage (unless forceShow is true) to decide if the notice should be shown.
+     */
+    componentWillLoad() {
+        // If a decision has been made previously (opted in or out), don't show the notice.
+        const consentGiven = localStorage.getItem(`${window.location.host}-matomo-consent-given`);
+        if (consentGiven === 'out' || this.optedOut()) {
+            this.showNotice = false;
+            return;
+        }
+        if (this.forceShow) {
+            // If forceShow is true, always show the notice
+            this.showNotice = true;
+        }
+        else {
+            // 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() {
+        const btns = this.el.shadowRoot.querySelectorAll('eds-button');
+        btns.forEach((b) => {
+            this.emitContext(b);
+        });
+    }
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    optInAnalytics() {
+        matomoOptIn();
+        localStorage.removeItem(`${window.location.host}-matomo-consent-given`);
+        this.hideNotice();
+        this.consent.emit('in');
+    }
+    optOutAnalytics() {
+        matomoOptOut();
+        this.hideNotice();
+        this.consent.emit('out');
+    }
+    noThanks() {
+        localStorage.setItem(`${window.location.host}-matomo-consent-given`, 'out');
+        this.hideNotice();
+    }
+    deferDecision() {
+        sessionStorage.setItem(this.getStorageKey(), 'true');
+        this.hideNotice();
+        this.consent.emit('defer');
+    }
+    keepMeIn() {
+        this.hideNotice();
+    }
+    hideNotice() {
+        this.showNotice = false;
+    }
+    render() {
+        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() }), h("eds-button", { intent: "ghost", label: "Ask me later", "aria-label": "Defer analytics decision", onClick: () => this.deferDecision() }))))));
+    }
+    get el() { return this; }
+    static get style() { return EdsMatomoNoticeStyle0; }
+}, [1, "eds-matomo-notice", {
+        "heading": [1, "title"],
+        "description": [1],
+        "optOutMessage": [1, "opt-out-message"],
+        "forceShow": [4, "force-show"],
+        "showNotice": [32]
+    }, [[16, "cookies", "toggleCookiesConsent"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-matomo-notice", "eds-accordion", "eds-button", "eds-icon-wrapper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-matomo-notice":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsMatomoNotice);
+            }
+            break;
+        case "eds-accordion":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { EdsMatomoNotice as E, defineCustomElement as d };

package/dist/components/eds-modal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsModal extends Components.EdsModal, HTMLElement {}
+export const EdsModal: {
+    prototype: EdsModal;
+    new (): EdsModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-modal.js

@@ -0,0 +1,166 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './analytics.js';
+import { d as defineCustomElement$3 } from './eds-button2.js';
+import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
+
+const edsModalCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.z-50{z-index:50}.z-9999999{z-index:9999999}.w-full{width:100%}.min-w-full{min-width:100%}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.left-20{left:1.25rem}.right-20{right:1.25rem}.top-1\\/2{top:50%}.top-0{top:0rem}.left-0{left:0rem}.top-20{top:1.25rem}.bottom-0{bottom:0rem}.bottom-20{bottom:1.25rem}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strong{background-color:var(--grey-700)}.bg-strongest{background-color:var(--black)}.ml-8{margin-left:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}@media (min-width: 750px){.md\\:bottom-20{bottom:1.25rem}.md\\:w-auto{width:auto}.md\\:top-20{top:1.25rem}.md\\:top-1\\/2{top:50%}.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:gap-y-12{row-gap:0.75rem}}";
+const EdsModalStyle0 = edsModalCss;
+
+const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.heading = '';
+        this.truncate = 1;
+        this.position = 'middle';
+        this.inverseHeader = false;
+        this.isOpen = false;
+    }
+    getTruncateClass() {
+        return this.truncate ? `line-clamp-${this.truncate}` : '';
+    }
+    /**
+     * Returns the Tailwind CSS classes to position the modal based on the `position` prop.
+     *
+     * @private
+     * @returns {string} The concatenated CSS classes for modal positioning.
+     */
+    getModalPositionClasses() {
+        switch (this.position) {
+            case 'top':
+                return [
+                    // mobile: pinned to top, full-width
+                    'top-0',
+                    'left-0',
+                    'w-full',
+                    // desktop: half-width centred and offset down
+                    'md:left-1/2',
+                    'md:w-auto',
+                    'md:-translate-x-1/2',
+                    'md:top-20'
+                ].join(' ');
+            case 'bottom':
+                return ['bottom-0', 'left-0', 'w-full', 'md:left-1/2', 'md:w-auto', 'md:-translate-x-1/2', 'md:bottom-20'].join(' ');
+            /*case 'left':
+              …
+            case 'right':
+              …*/
+            case 'middle':
+            default:
+                return [
+                    // mobile: full-width, start from top with a little padding
+                    'top-0',
+                    'left-0',
+                    'w-full',
+                    'pt-4',
+                    // desktop: centred both axes
+                    'md:left-1/2',
+                    'md:top-1/2',
+                    'md:w-auto',
+                    'md:-translate-x-1/2',
+                    'md:-translate-y-1/2'
+                ].join(' ');
+        }
+    }
+    /**
+     * Opens the modal.
+     */
+    async open() {
+        var _a;
+        this.isOpen = true;
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.heading) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'opened'
+        });
+    }
+    /**
+     * Closes the modal.
+     */
+    async close() {
+        var _a;
+        this.isOpen = false;
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.heading) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'closed'
+        });
+    }
+    /**
+     * Toggles the modal open or closed.
+     */
+    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.
+     */
+    handleKeyDown(event) {
+        if (this.isOpen && event.key === 'Escape') {
+            this.close();
+        }
+    }
+    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: '3a2446813eebf215f2c7aafc26d5688f58020c54', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: '7081928b01c09e692cac0f61dbc58b4f5578271d', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+            ,
+            onClick: () => this.close() })), h("div", { key: '0fc5f4716022cb01c2da9a28738586710625c70f', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '8e4bdffba2f69b18e8846e4c2709c5c423b0a99e', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { key: '6e0d237fc95c1b74b1b0c0456848684578367302', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '3499de216da4ba38edb66cdcd688872f51b41aaf', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: 'f723dded796961e925cc2b046c31e7345fd3e159', class: "pt-8 px-20 py-20" }, h("slot", { key: 'ffe1213b65e60dfaf7c220e3c7e3dd8495706dcf' })))));
+    }
+    get el() { return this; }
+    static get style() { return EdsModalStyle0; }
+}, [1, "eds-modal", {
+        "heading": [1, "title"],
+        "truncate": [2],
+        "position": [1],
+        "inverseHeader": [4, "inverse-header"],
+        "isOpen": [32],
+        "open": [64],
+        "close": [64],
+        "toggle": [64]
+    }, [[0, "eds-modal-open", "handleGlobalOpen"], [0, "eds-modal-close", "handleGlobalClose"], [8, "keydown", "handleKeyDown"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-modal", "eds-button", "eds-icon-wrapper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsModal$1);
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsModal = EdsModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsModal, defineCustomElement };

package/dist/components/eds-pagination.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsPagination extends Components.EdsPagination, HTMLElement {}
+export const EdsPagination: {
+    prototype: EdsPagination;
+    new (): EdsPagination;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-pagination.js

@@ -0,0 +1,6 @@
+import { E as EdsPagination$1, d as defineCustomElement$1 } from './eds-pagination2.js';
+
+const EdsPagination = EdsPagination$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsPagination, defineCustomElement };