@ebrains/components 2.3.1 → 2.4.0

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

@@ -0,0 +1,299 @@
+import { h, Host } from "@stencil/core";
+export class EdsSidebar {
+    constructor() {
+        this.toggleItem = (itemId, ev) => {
+            if (ev) {
+                ev.stopPropagation();
+            }
+            const newOpen = new Set(this.openItems);
+            if (newOpen.has(itemId)) {
+                newOpen.delete(itemId);
+            }
+            else {
+                newOpen.add(itemId);
+            }
+            this.openItems = newOpen;
+        };
+        this.navigate = (url, ev) => {
+            if (!this.enableRouting || !url) {
+                return;
+            }
+            if (ev) {
+                ev.preventDefault();
+                ev.stopPropagation();
+            }
+            // Emit custom event for routing
+            this.sidebar.emit(url);
+            // Update browser history if available
+            if (typeof window !== 'undefined' && window.history) {
+                window.history.pushState({}, '', url);
+            }
+        };
+        this.handleItemClick = (item, ev) => {
+            var _a;
+            // If item has children, ONLY toggle (don't navigate)
+            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+                this.toggleItem(item.id, ev);
+                return;
+            }
+            // Only navigate if no children and has URL
+            if (item.url) {
+                this.navigate(item.url, ev);
+            }
+        };
+        this.items = '[]';
+        this.theme = 'default';
+        this.activeUrl = '';
+        this.enableRouting = true;
+        this.maxLevel = 4;
+        this.openItems = new Set();
+        this.parsedItems = [];
+    }
+    // ---------------------------------------------------------------------------
+    // Lifecycle
+    // ---------------------------------------------------------------------------
+    componentWillLoad() {
+        this.parsedItems = this.parseItems(this.items);
+        this.initializeOpenItems(this.parsedItems);
+    }
+    // ---------------------------------------------------------------------------
+    // Watchers
+    // ---------------------------------------------------------------------------
+    handleItemsChange(newItems) {
+        this.parsedItems = this.parseItems(newItems);
+        this.initializeOpenItems(this.parsedItems);
+    }
+    handleActiveUrlChange() {
+        this.initializeOpenItems(this.parsedItems);
+    }
+    // ---------------------------------------------------------------------------
+    // Utils
+    // ---------------------------------------------------------------------------
+    parseItems(items) {
+        if (Array.isArray(items)) {
+            return items;
+        }
+        if (typeof items === 'string') {
+            if (!items || items.trim() === '') {
+                return [];
+            }
+            try {
+                const parsed = JSON.parse(items);
+                return Array.isArray(parsed) ? parsed : [];
+            }
+            catch (e) {
+                console.error('eds-sidebar: Failed to parse items JSON:', e);
+                console.error('Received string:', items);
+                return [];
+            }
+        }
+        return [];
+    }
+    initializeOpenItems(items, level = 0) {
+        if (level === 0) {
+            // reset before recomputing
+            this.openItems = new Set();
+        }
+        if (level >= this.maxLevel) {
+            return;
+        }
+        items.forEach((item) => {
+            var _a;
+            const isActive = this.activeUrl && item.url === this.activeUrl;
+            const hasActiveChild = this.hasActiveDescendant(item);
+            if (item.open || isActive || hasActiveChild) {
+                this.openItems.add(item.id);
+            }
+            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+                this.initializeOpenItems(item.children, level + 1);
+            }
+        });
+    }
+    hasActiveDescendant(item) {
+        var _a;
+        if (item.url === this.activeUrl) {
+            return true;
+        }
+        if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length)) {
+            return false;
+        }
+        return item.children.some((child) => this.hasActiveDescendant(child));
+    }
+    // ---------------------------------------------------------------------------
+    // Render
+    // ---------------------------------------------------------------------------
+    renderItem(item, level = 0) {
+        if (level >= this.maxLevel) {
+            return null;
+        }
+        const isOpen = this.openItems.has(item.id);
+        const isActive = !!item.url && this.activeUrl === item.url;
+        const hasChildren = !!(item.children && item.children.length);
+        const itemId = `eds-sidebar-${item.id}`;
+        const childrenId = `${itemId}-children`;
+        return (h("li", { class: {
+                'sidebar-item': true,
+                open: isOpen,
+                active: isActive,
+                'has-children': hasChildren,
+                [`level-${level}`]: true
+            } }, h("div", { class: "sidebar-item-content", onClick: (e) => this.handleItemClick(item, e), role: hasChildren ? 'button' : item.url ? 'link' : 'button', tabindex: "0", "aria-current": isActive ? 'page' : undefined, "aria-expanded": hasChildren ? (isOpen ? 'true' : 'false') : undefined, "aria-controls": hasChildren ? childrenId : undefined, onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleItemClick(item, e);
+                }
+            } }, hasChildren && (h("span", { class: "sidebar-toggle mt-2 -ml-4", "aria-hidden": "true" }, h("eds-icon-wrapper", { icon: isOpen ? 'chevron-down' : 'chevron-right' }))), h("span", { class: "sidebar-link-wrapper" }, h("eds-link", { label: item.title, url: item.url || '#', intent: isActive ? 'strong' : 'weak', size: "small", "aria-label": item.title, "extra-class": "sidebar-link", tabindex: "-1" }))), hasChildren && isOpen && (h("ul", { id: childrenId, class: "sidebar-children" }, item.children.map((child) => this.renderItem(child, level + 1))))));
+    }
+    render() {
+        return (h(Host, { key: '4334d20e5d72671243633253910ab05b4da013da', class: {
+                'eds-sidebar': true,
+                [`theme-${this.theme}`]: true
+            } }, h("nav", { key: '319f6f42416d4229f1b011bf1216b39c8627302d', class: "sidebar-nav", "aria-label": "Sidebar" }, h("ul", { key: '687ceae3eca3e844e8f6a361db4a76d127d27813', class: "sidebar-list" }, this.parsedItems.map((item) => this.renderItem(item, 0))))));
+    }
+    static get is() { return "eds-sidebar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-sidebar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-sidebar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SidebarItem[] | string",
+                    "resolved": "SidebarItem[] | string",
+                    "references": {
+                        "SidebarItem": {
+                            "location": "local",
+                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-sidebar/eds-sidebar.tsx",
+                            "id": "../../../packages/components/src/components/eds-sidebar/eds-sidebar.tsx::SidebarItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sidebar items data structure\nCan be passed as JSON string in HTML or as object via JavaScript"
+                },
+                "attribute": "items",
+                "reflect": false,
+                "defaultValue": "'[]'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'minimal' | 'ebrains'",
+                    "resolved": "\"default\" | \"ebrains\" | \"minimal\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme variant: 'default' or 'minimal'"
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "activeUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current active URL for routing"
+                },
+                "attribute": "active-url",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "enableRouting": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable/disable routing behavior"
+                },
+                "attribute": "enable-routing",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "maxLevel": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum nesting level to display"
+                },
+                "attribute": "max-level",
+                "reflect": false,
+                "defaultValue": "4"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "openItems": {},
+            "parsedItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sidebar",
+                "name": "sidebar",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the routing is changed."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "handleItemsChange"
+            }, {
+                "propName": "activeUrl",
+                "methodName": "handleActiveUrlChange"
+            }];
+    }
+}

package/dist/collection/components/eds-sidebar/eds-sidebar.stories.js

@@ -0,0 +1,141 @@
+export default {
+    title: 'Components/Sidebar',
+    component: 'eds-sidebar',
+    argTypes: {
+        theme: {
+            control: { type: 'select' },
+            options: ['default', 'minimal', 'ebrains'],
+            mapping: {
+                default: 'default',
+                minimal: 'minimal',
+                ebrains: 'ebrains'
+            },
+            description: 'Theme variant: "default" (subtle, no active background), "minimal" (with left border), or "ebrains" (green background on active).'
+        },
+        items: {
+            control: { type: 'object' },
+            description: 'An array of sidebar item objects. Each object should include "id", "title", optional "url", "icon", and "children" properties.'
+        },
+        activeUrl: {
+            control: 'text',
+            description: 'The current active URL for routing. Items matching this URL will be highlighted.'
+        },
+        maxLevel: {
+            control: { type: 'number', min: 1, max: 5 },
+            description: 'Maximum nesting level to display. Default is 4.'
+        }
+    },
+    args: {
+        theme: 'default',
+        items: [
+            {
+                id: '1',
+                title: 'Dashboard',
+                url: '/dashboard'
+            },
+            {
+                id: '2',
+                title: 'Projects',
+                children: [
+                    {
+                        id: '2-1',
+                        title: 'Active Projects',
+                        url: '/projects/active'
+                    },
+                    {
+                        id: '2-2',
+                        title: 'Archived',
+                        url: '/projects/archived'
+                    }
+                ]
+            },
+            {
+                id: '3',
+                title: 'Settings',
+                children: [
+                    {
+                        id: '3-1',
+                        title: 'Profile',
+                        url: '/settings/profile'
+                    },
+                    {
+                        id: '3-2',
+                        title: 'Security',
+                        url: '/settings/security'
+                    },
+                    {
+                        id: '3-3',
+                        title: 'Notifications',
+                        url: '/settings/notifications'
+                    }
+                ]
+            },
+            {
+                id: '4',
+                title: 'Help',
+                url: '/help'
+            }
+        ],
+        activeUrl: '/dashboard',
+        maxLevel: 4
+    }
+};
+const renderSidebar = (args) => `
+    <div style="height: 600px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
+      <eds-sidebar
+        theme="${args.theme}"
+        items='${JSON.stringify(args.items)}'
+        active-url="${args.activeUrl}"
+        max-level="${args.maxLevel}"
+      ></eds-sidebar>
+    </div>
+  `;
+export const Default = {
+    render: (args) => renderSidebar(args)
+};
+export const MinimalTheme = {
+    args: {
+        theme: 'minimal',
+        activeUrl: '/projects/active'
+    },
+    render: (args) => renderSidebar(args)
+};
+export const EbrainsTheme = {
+    args: {
+        theme: 'ebrains',
+        activeUrl: '/settings/profile'
+    },
+    render: (args) => renderSidebar(args)
+};
+export const DeepNesting = {
+    args: {
+        items: [
+            {
+                id: '1',
+                title: 'Level 1',
+                children: [
+                    {
+                        id: '1-1',
+                        title: 'Level 2',
+                        children: [
+                            {
+                                id: '1-1-1',
+                                title: 'Level 3',
+                                children: [
+                                    {
+                                        id: '1-1-1-1',
+                                        title: 'Level 4',
+                                        url: '/level-4'
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ],
+        activeUrl: '/level-4',
+        maxLevel: 5
+    },
+    render: (args) => renderSidebar(args)
+};

package/dist/collection/components/eds-social-networks/eds-social-networks.js

@@ -51,7 +51,7 @@ export class EdsSocialNetworks {
      * Each social network link uses the `eds-link` component with specific classes and styles.
      */
     render() {
-        return (h("nav", { key: 'fd46b4205a2f03697d14a5a274698726aa9f406a', "aria-label": "Social media" }, h("p", { key: 'b2b5bacadc28417e948832562fbf413ed812aa1a', class: "f-ui-02" }, this.heading), h("ul", { key: '675682966b92c971be9afddc39c632070192da77', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: "strong" })))))));
+        return (h("nav", { key: 'f56d034a9c934e1be2003a0fedaf6c9ec4fc5909', "aria-label": "Social media" }, h("p", { key: '66d7c2384206143eef36cdb085780d4a1590fe76', class: "f-ui-02" }, this.heading), h("ul", { key: '0ccb5fd44ee30f77c19fdb67dc1cc19fadd3561e', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: "strong" })))))));
     }
     static get is() { return "eds-social-networks"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class EdsSpinner {
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (h(Host, { key: 'e4c2f4762d214028c2e97666040e05ad5651debf' }, h("div", { key: 'e12572cb0195a84402847b0fc723ad2198196661', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '6aa3b28a4e79951a5bbb46f6d7d845baf3761d14', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '5817378b525ecb8d8a211105b73a2db00067fbe3', class: "f-body-01" }, this.message))));
+        return (h(Host, { key: 'c50ca410eb23855b3076babb78b4849246722cf7' }, h("div", { key: '9b3722b00777a0dd77288c4c3b29419a9b87640b', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '5479d0195b6d8991613df8ae03eee34b2a095b6b', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '448c3b0e6ce0aac6c21b53c58b97e423a1739864', class: "f-body-01" }, this.message))));
     }
     static get is() { return "eds-spinner"; }
     static get encapsulation() { return "shadow"; }