@ebrains/components 0.9.2-beta → 1.0.0

package/dist/collection/shared-ui/eds-tabs/eds-tabs.js

@@ -0,0 +1,221 @@
+import { sendAnalytics } from "../../utils/analytics";
+import { h } from "@stencil/core";
+import { cva } from "class-variance-authority";
+import { parseData } from "../../utils/sharedUtils";
+/**
+ * `EdsTabs` is a tabs component that renders a navigational tab bar.
+ * Each tab can be configured with various properties such as label, URL, active state, and more.
+ * It includes interactive features like handling tab clicks, scrolling to the active tab,
+ * and emitting events for tab changes and analytics tracking.
+ *
+ * This component is ideal for building a customizable tab navigation system with accessibility features
+ * and is designed to fit seamlessly into any layout.
+ */
+export class EdsTabs {
+    constructor() {
+        // cva configuration
+        this.tabCva = cva([
+            'relative py-12',
+            'f-ui-03 whitespace-nowrap',
+            'effect-color',
+            'focus-visible:text-default hover:text-default',
+            'border-2',
+            "after:content-[''] after:absolute after:inset-0 after:rounded-t-lg after:opacity-0",
+            'outline-none focus:outline-none focus-visible:outline-none focus-visible:after:opacity-100'
+        ], {
+            variants: {
+                position: {
+                    first: 'px-16 rounded-t-lg',
+                    center: 'px-16',
+                    left: 'pl-16 pr-28 rounded-tl-lg border-r-0 -mr-16 after:right-16',
+                    right: 'pl-28 pr-16 rounded-tr-lg border-l-0 -ml-16 after:left-16'
+                },
+                active: {
+                    false: 'text-lighter bg-dark hover:bg-darker border-softest after:border-0',
+                    true: [
+                        'bg-default text-default z-99',
+                        'rounded-t-lg',
+                        "before:content-[''] before:absolute before:-bottom-2 z-1 before:inset-x-0 before:h-3 before:bg-default",
+                        'border-soft'
+                    ]
+                }
+            }
+        });
+        this.identifier = undefined;
+        this.navAriaLabel = 'Tabs';
+        this.tabs = undefined;
+        this.parsedTabs = [];
+        this.activeIndex = -1;
+    }
+    componentWillLoad() {
+        this.parseTabs();
+        this.setActiveIndex();
+        this.tab.emit({ tabId: this.identifier, index: 0 });
+    }
+    /**
+     * Parses the `links` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    /**
+     * Parses the `links` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    parseTabs() {
+        this.parsedTabs = parseData(this.tabs);
+    }
+    componentDidLoad() {
+        this.scrollToActiveTab();
+    }
+    setActiveIndex() {
+        this.activeIndex = this.parsedTabs.findIndex((tab) => tab.active);
+    }
+    scrollToActiveTab() {
+        var _a;
+        const activeTab = (_a = this.tabContainer) === null || _a === void 0 ? void 0 : _a.querySelector('[data-tab-active]');
+        if (activeTab) {
+            setTimeout(() => {
+                activeTab.scrollIntoView({
+                    inline: 'center',
+                    block: 'nearest'
+                });
+            }, 316);
+        }
+    }
+    getTabOptions(active, index) {
+        const position = active
+            ? 'center'
+            : this.activeIndex === -1 && index === 0
+                ? 'first'
+                : index < this.activeIndex
+                    ? 'left'
+                    : 'right';
+        return Object.assign({ class: this.tabCva({
+                active,
+                position
+            }), style: {
+                zIndex: `${active ? this.parsedTabs.length + 99 : position === 'left' ? index : this.parsedTabs.length + 1 - index}`
+            } }, (active ? { 'data-tab-active': 'true' } : {}));
+    }
+    handleTabClick(index, tabLabel) {
+        // Update the active index and set all tabs' active state accordingly
+        this.activeIndex = index;
+        this.parsedTabs = this.parsedTabs.map((tab, tabIndex) => (Object.assign(Object.assign({}, tab), { active: tabIndex === index })));
+        this.tab.emit({ tabId: this.identifier, index: index, name: tabLabel });
+        sendAnalytics({
+            category: 'ui-component',
+            tag: this.el.tagName.toLowerCase(),
+            name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
+            action: 'click'
+        });
+    }
+    render() {
+        return (h("div", { key: 'b6752f90f4c1a9501816c574baf92a0c8b95e802', id: `${this.identifier}` }, h("div", { key: '266813bd461bae3d5df1b76563b949b8dd900482', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: 'b16c4f78ee24dace9a188097a8c5995476d7da41', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+            const TabComponent = tab.active ? 'span' : 'a';
+            const tabProps = this.getTabOptions(tab.active, index);
+            return (h(TabComponent, Object.assign({}, tabProps, { "aria-label": tab.label, "aria-current": index === this.activeIndex, onClick: () => this.handleTabClick(index, tab.label) }), tab.label || tab.ariaLabel));
+        }))), h("div", { key: '09c25532583d443eac47da606955955e1e66f2e8', class: "tab-panels" }, this.parsedTabs.map((_, index) => (h("div", { hidden: index !== this.activeIndex }, h("slot", { name: `panel-${index}` })))))));
+    }
+    static get is() { return "eds-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The Tabs identifier"
+                },
+                "attribute": "id",
+                "reflect": false
+            },
+            "navAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label for the navigation"
+                },
+                "attribute": "nav-aria-label",
+                "reflect": false,
+                "defaultValue": "'Tabs'"
+            },
+            "tabs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | { label: string; url: string; active: boolean; ariaLabel?: string }[]",
+                    "resolved": "string | { label: string; url: string; active: boolean; ariaLabel?: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON string for tabs data"
+                },
+                "attribute": "tabs",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedTabs": {},
+            "activeIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tab",
+                "name": "tab",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    tabId: string;\n    index: number;\n    name?: string;\n  }",
+                    "resolved": "{ tabId: string; index: number; name?: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "tabs",
+                "methodName": "parseTabs"
+            }];
+    }
+}

package/dist/collection/shared-ui/eds-tabs/eds-tabs.stories.js

@@ -0,0 +1,64 @@
+export default {
+    title: 'Shared Ui/Tabs',
+    component: 'eds-tabs',
+    argTypes: {
+        tabs: {
+            control: 'object',
+            defaultValue: [
+                { label: 'Home', url: '#', active: true },
+                { label: 'Profile', url: '#', active: false },
+                { label: 'Settings', url: '#', active: false }
+            ]
+        }
+    }
+};
+const Template = (args) => {
+    // Create a container element
+    const container = document.createElement('div');
+    // Insert the eds-tabs element and an output element for dynamic updates.
+    container.innerHTML = `
+    <eds-alert message="Implementation with slot content" pressable-label="Example" pressable-url="https://design.ebrains.eu/shared-ui/eds-tabs/#example-with-slot-content"></eds-alert>
+    
+    <eds-tabs tabs='${JSON.stringify(args.tabs)}'>
+      <!-- Define each panel with matching slot names -->
+      <div class="container mt-8" slot="panel-0">
+        <h2 class="f-heading-05">Home</h2>
+        <p>Welcome to our homepage! Here’s the latest news and updates.</p>
+      </div>
+
+      <div class="container mt-8" slot="panel-1">
+        <h2 class="f-heading-05">Profile</h2>
+        <p>See and update your profile settings.</p>
+      </div>
+
+      <div class="container mt-8" slot="panel-2">
+        <h2 class="f-heading-05">Settings</h2>
+        <p>Update the app's settings.</p>
+      </div>
+    </eds-tabs>
+    
+    <p id="active-tab-output" style="margin-top: 16px; font-family: sans-serif; font-weight: bold;"></p>
+  `;
+    // Query the eds-tabs element and the output element after the content is rendered.
+    // We use setTimeout to ensure that the custom element has upgraded.
+    setTimeout(() => {
+        const edsTabs = container.querySelector('eds-tabs');
+        const output = container.querySelector('#active-tab-output');
+        if (edsTabs) {
+            // Listen for the "tabChange" event
+            edsTabs.addEventListener('tab', (event) => {
+                const { index, name } = event.detail;
+                output.textContent = `Active Tab Index: ${index}, Tab Name: ${name}`;
+            });
+        }
+    }, 0);
+    return container;
+};
+export const Default = Template.bind({});
+Default.args = {
+    tabs: [
+        { label: 'Home', url: '#', active: true },
+        { label: 'Profile', url: '#', active: false },
+        { label: 'Settings', url: '#', active: false }
+    ]
+};

package/dist/collection/shared-ui/eds-toast-manager/eds-toast-manager.css

@@ -0,0 +1,51 @@
+.toast-container {
+  position: fixed;
+  top: 1rem;
+  /* Top margin */
+  left: 50%;
+  /* Center the container */
+  transform: translateX(-50%);
+  /* Center alignment adjustment */
+  z-index: 99999;
+  /* Ensure it's on top of everything */
+  display: flex;
+  flex-direction: column;
+  /* Stack toasts vertically */
+  align-items: center;
+  /* Align toasts in the center */
+  gap: 1rem;
+  /* Space between toasts */
+  width: 100%;
+  /* Full-width container */
+  max-width: 36rem;
+  /* Limit max width to avoid overly wide toasts */
+}
+
+.toast-wrapper {
+  width: 100%;
+  /* Each toast takes full width of the container */
+  padding: 0 1rem;
+  /* Horizontal padding */
+}
+
+.eds-toast {
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  /* Add subtle shadow */
+  border-radius: 0.5rem;
+  /* Rounded corners for visual appeal */
+  animation: fade-in 0.3s ease-out;
+  /* Smooth fade-in effect */
+}
+
+/* Fade-in animation */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/dist/collection/shared-ui/eds-toast-manager/eds-toast-manager.js

@@ -0,0 +1,54 @@
+import { h } from "@stencil/core";
+import { toast } from "../../utils/toastManager";
+/**
+ * @internal
+ */
+export class EdsToastManager {
+    constructor() {
+        this.toastId = 0;
+        this.toasts = [];
+    }
+    connectedCallback() {
+        // Initialize the ToastManager singleton with this element
+        toast.init(this.hostElement);
+        // Listen for custom events
+        this.hostElement.addEventListener('show-toast', (event) => {
+            const { message, intent } = event.detail;
+            this.addToast(message, intent);
+        });
+    }
+    /**
+     * Adds a new toast.
+     */
+    addToast(message, intent) {
+        const id = this.toastId++;
+        this.toasts = [...this.toasts, { id, message, intent }];
+    }
+    /**
+     * Removes a toast by ID.
+     */
+    removeToast(id) {
+        this.toasts = this.toasts.filter((t) => t.id !== id);
+    }
+    render() {
+        return (h("div", { key: 'b86b71e71fa88b56acab6d7060e7b05beec344e1', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+    }
+    static get is() { return "eds-toast-manager"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-toast-manager.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-toast-manager.css"]
+        };
+    }
+    static get states() {
+        return {
+            "toasts": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}

package/dist/collection/shared-ui/eds-toast-manager/eds-toast-manager.stories.js

@@ -0,0 +1,25 @@
+export default {
+    title: 'Shared Ui/Toast Manager',
+    component: 'eds-toast-manager',
+    argTypes: {
+        message: {
+            control: 'text',
+            description: 'The message to display in the toast'
+        }
+    }
+};
+const Template = (args) => `
+    <div>
+      <eds-toast-manager></eds-toast-manager>
+      <eds-button
+        intent="primary"
+        label="Show Random Toast"
+        onclick="document.querySelector('eds-toast-manager').dispatchEvent(new CustomEvent('show-toast', { detail: { message: '${args.message}', intent: ['default', 'success', 'error', 'warning'][Math.floor(Math.random() * 4)] }, bubbles: true }));"
+      >
+      </eds-button>
+    </div>
+  `;
+export const RandomIntent = Template.bind({});
+RandomIntent.args = {
+    message: 'This is a random toast message.'
+};

package/dist/collection/shared-ui/eds-user/eds-user.css

@@ -0,0 +1,71 @@
+hr,
+p {
+  margin: 0;
+}
+
+.block {
+  display: block;
+}
+.flex {
+  display: flex;
+}
+.flex-col {
+  flex-direction: column;
+}
+.items-center {
+  align-items: center;
+}
+.text-default {
+  color: var(--black);
+}
+.min-w-\[280px\] {
+  min-width: 280px;
+}
+.p-8 {
+  padding: 0.5rem;
+}
+.gap-x-16 {
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+}
+.gap-y-8 {
+  row-gap: 0.5rem;
+}
+.pb-16 {
+  padding-bottom: 1rem;
+}
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+.border-softer {
+  border-color: rgba(0, 0, 0, .1 );
+}
+.max-w-full {
+  max-width: 100%;
+}
+.w-full {
+  width: 100%;
+}
+.f-ui-01 {
+  font-family: var(--f-ui-01-fontFamily);
+  font-weight: var(--f-ui-01-fontWeight);
+  font-size: var(--f-ui-01-fontSize);
+  line-height: var(--f-ui-01-lineHeight);
+  letter-spacing: var(--f-ui-01-letterSpacing);
+}
+.f-ui-03-light {
+  font-family: var(--f-ui-03-light-fontFamily);
+  font-weight: var(--f-ui-03-light-fontWeight);
+  font-size: var(--f-ui-03-light-fontSize);
+  line-height: var(--f-ui-03-light-lineHeight);
+  letter-spacing: var(--f-ui-03-light-letterSpacing);
+}
+.text-light {
+  color: var(--grey-700);
+}
+.mt-4 {
+  margin-top: 0.25rem;
+}
+.mt-16 {
+  margin-top: 1rem;
+}

package/dist/collection/shared-ui/eds-user/eds-user.js

@@ -0,0 +1,77 @@
+import { h } from "@stencil/core";
+/**
+ * `EdsUser` is a user component for managing and displaying
+ * the user's auth information. Displays a user dropdown menu when authenticated.
+ *
+ * This component is ideal for embedding into any layout requiring user authentication.
+ */
+export class EdsUser {
+    constructor() {
+        this.user = undefined;
+    }
+    /**
+     * Helper getter to ensure we work with a User object.
+     */
+    get parsedUser() {
+        if (typeof this.user === 'string') {
+            try {
+                return JSON.parse(this.user);
+            }
+            catch (error) {
+                //console.error('Failed to parse user JSON:', error);
+                return {};
+            }
+        }
+        return this.user;
+    }
+    async componentWillLoad() { }
+    get initials() {
+        var _a, _b, _c, _d;
+        const user = this.parsedUser;
+        const initials = `${((_a = user.given_name) === null || _a === void 0 ? void 0 : _a.charAt(0)) || ''}${((_b = user.family_name) === null || _b === void 0 ? void 0 : _b.charAt(0)) || ''}`.toUpperCase();
+        return initials || ((_d = (_c = user.name) === null || _c === void 0 ? void 0 : _c.charAt(0)) === null || _d === void 0 ? void 0 : _d.toUpperCase()) || '';
+    }
+    render() {
+        const user = this.parsedUser;
+        return (h("div", { key: '9e2a8da09c2c15080e3b1ccf5b8e0e93b679d34b', class: "block" }, h("div", { key: 'ccc34b3c7b0ab8d515eebfa1962264365d20c788', class: "flex items-center" }, h("eds-dropdown", { key: '5283fb61297cd5f631d04da9ca19371a3778068c', label: `Welcome, ${user.preferred_username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, h("div", { key: 'd39e041e54fb59a409520e8b88f6f569d55cc6fc', class: "min-w-[280px] p-8" }, h("div", { key: '50e571e30a6902b8443b9766dfb1018c76a2f68e', class: "flex gap-x-16" }, h("eds-avatar", { key: '88a675a256466366aba1028831626253d11d2474', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "grey" }), h("div", { key: '99626794a7fa243bc599e9e77b0bc1b717d14c96', class: "max-w-full" }, user.name && h("p", { key: '1f1e33e19fd2b266f442b596953100f6b5e6dfcd', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: 'a36ebac6fdae9fa059887f7cc5d1009179f8eef9', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: '976cd925af318831a22f1d43242e0295614bb2a1', class: "f-ui-03-light text-light mt-4" }, user.email))), h("eds-block-break", { key: '7d189caaab8a9b593017312d6e3d6943c36de22b' }), h("div", { key: 'efcfc9a2c1f774abfab09b09682d7839bd1d5d2c', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: 'f54425f35d804753b94bb61e1d8e211a1583ac3b' })))))));
+    }
+    static get is() { return "eds-user"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-user.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-user.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "user": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | User",
+                    "resolved": "User | string",
+                    "references": {
+                        "User": {
+                            "location": "global",
+                            "id": "global::User"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The user object containing user information, or a JSON string to be parsed."
+                },
+                "attribute": "user",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+}

package/dist/collection/shared-ui/eds-user/eds-user.stories.js

@@ -0,0 +1,45 @@
+export default {
+    title: 'Shared Ui/User',
+    component: 'eds-user',
+    argTypes: {
+        user: {
+            control: 'object',
+            description: 'User object containing authentication information'
+        }
+    },
+    args: {
+        user: {
+            given_name: 'John',
+            family_name: 'Doe',
+            preferred_username: 'johndoe',
+            name: 'John Doe',
+            email: 'john.doe@example.com'
+        }
+    }
+};
+export const Default = {
+    render: (args) => {
+        // Create a container element
+        const container = document.createElement('div');
+        container.innerHTML = `
+        <eds-header>
+          <div class="px-16">
+            <eds-user></eds-user>
+          </div>
+        </eds-header>
+      `;
+        // Grab the eds-user element and assign the user property
+        const edsUser = container.querySelector('eds-user');
+        edsUser.user = args.user;
+        return container;
+    },
+    args: {
+        user: {
+            given_name: 'John',
+            family_name: 'Doe',
+            preferred_username: 'johndoe',
+            name: 'John Doe',
+            email: 'john.doe@example.com'
+        }
+    }
+};

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

@@ -0,0 +1,39 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsAppRoot {
+    constructor() {
+        this.isAuthenticated = false;
+    }
+    componentWillLoad() {
+        // Create a promise for the initKeycloak event.
+        const initKeycloakPromise = new Promise((resolve) => {
+            document.addEventListener('initKeycloak', (event) => {
+                //console.log('initKeycloak event received:', event.detail);
+                resolve(event.detail);
+            }, { once: true });
+        });
+        // Create a promise for the authStatusChanged event.
+        const authStatusPromise = new Promise((resolve) => {
+            document.addEventListener('authStatusChanged', (event) => {
+                var _a;
+                this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
+                //console.log('authStatusChanged event received:', event.detail);
+                resolve(event.detail);
+            }, { once: true });
+        });
+        // Combine both promises. The splash screen will hide only when both have resolved.
+        this.combinedInitPromise = Promise.all([initKeycloakPromise, authStatusPromise]);
+    }
+    render() {
+        return (h("div", { key: 'f7ff644cea84bfc78190afcfa33f1f6d6c6de29a' }, h("eds-splash-screen", { key: '5e04f163eafe8f0d55394b8f508386bac013907e', inverse: true, initPromise: this.combinedInitPromise }), h("eds-login", { key: '94c9dc0546e48fe8f9e6fc17fde9dcbf75fbe3bc', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), h("main", { key: '975cfb32924ecf0a4bb7d8f4788792eae500e166' }, 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"; }
+    static get states() {
+        return {
+            "isAuthenticated": {}
+        };
+    }
+}