@ebrains/components 0.9.0-beta → 0.9.2-beta

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

@@ -1,221 +0,0 @@
-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 px-16 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:border-3 after:border-accent after:opacity-0",
-            'outline-none focus:outline-none focus-visible:outline-none focus-visible:after:opacity-100'
-        ], {
-            variants: {
-                position: {
-                    left: 'rounded-tl-lg border-r-0 pr-28 -mr-16 after:right-16',
-                    right: 'rounded-tr-lg border-l-0 pl-28 -ml-16 after:left-16',
-                    center: '',
-                    first: 'rounded-t-lg'
-                },
-                active: {
-                    false: 'text-lighter bg-dark hover:bg-darker border-softest',
-                    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-[#d2d2d2]'
-                    ]
-                }
-            }
-        });
-        this.id = undefined;
-        this.navAriaLabel = 'Tabs';
-        this.tabs = undefined;
-        this.parsedTabs = [];
-        this.activeIndex = -1;
-    }
-    componentWillLoad() {
-        this.parseTabs();
-        this.setActiveIndex();
-        this.tab.emit({ tabId: this.id, 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.id, 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: '2e29d6b12d150ea47cee107ae7b8cdf56723a98f', id: `${this.id}`, class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: '4b129292420834f09e80d8d897d56435edc0e576', 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: '9ba32403c167846ddc7c66536d8ccd72d736d9e0', 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));
-        })))));
-    }
-    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 {
-            "id": {
-                "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

@@ -1,54 +0,0 @@
-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-tabs tabs='${JSON.stringify(args.tabs)}'></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 }
-    ]
-};
-export const CustomTabs = Template.bind({});
-CustomTabs.args = {
-    tabs: [
-        { label: 'Dashboard', url: '#', active: true, ariaLabel: 'Dashboard Tab' },
-        { label: 'Reports', url: '#', active: false, ariaLabel: 'Reports Tab' },
-        { label: 'Analytics', url: '#', active: false, ariaLabel: 'Analytics Tab' },
-        { label: 'Settings', url: '#', active: false, ariaLabel: 'Settings Tab' }
-    ]
-};

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

@@ -1,51 +0,0 @@
-.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

@@ -1,54 +0,0 @@
-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: '0ca6de02db6bd537c7efe007c898480d07f69bc6', 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

@@ -1,25 +0,0 @@
-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.'
-};