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

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

@@ -1,194 +0,0 @@
-import { sendAnalytics } from "../../utils/analytics";
-import { h } from "@stencil/core";
-import { cva } from "class-variance-authority";
-/**
- * @internal
- */
-export class EdsTabsContent {
-    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.navAriaLabel = 'Tabs';
-        this.tabs = undefined;
-        this.parsedTabs = [];
-        this.activeIndex = -1;
-    }
-    componentWillLoad() {
-        this.parseTabs();
-        this.setActiveIndex();
-    }
-    parseTabs() {
-        try {
-            this.parsedTabs = JSON.parse(this.tabs);
-        }
-        catch (error) {
-            //console.error('Invalid JSON format for tabs:', error);
-            this.parsedTabs = [];
-        }
-    }
-    componentDidLoad() {
-        this.initializeTabContentVisibility();
-        this.el.addEventListener('tabContentChange', (e) => {
-            this.updateTabContentVisibility(e.detail.index);
-        });
-        this.scrollToActiveTab();
-    }
-    initializeTabContentVisibility() {
-        const allContent = this.el.querySelectorAll('.tab-content');
-        allContent.forEach((content, index) => {
-            content.setAttribute('style', `display: ${index === this.activeIndex ? 'block' : 'none'}`);
-        });
-    }
-    updateTabContentVisibility(index) {
-        const allContent = this.el.querySelectorAll('.tab-content');
-        allContent.forEach((content, contentIndex) => {
-            content.setAttribute('style', `display: ${contentIndex === index ? 'block' : 'none'}`);
-        });
-    }
-    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.tabContentChange.emit({ 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: 'd94df79c55522088de5445587758a5eea028b313', 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: 'e7d01a2e6b424c25749c0d70305fb1c8c55bef74', class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: 'ef8ff8a02e570dfcf8143997ace793a65917e6ca', 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("eds-tab", Object.assign({}, tabProps, { label: tab.label, url: tab.url, active: index === this.activeIndex, ariaLabel: tab.ariaLabel, onClick: () => this.handleTabClick(index, tab.label) })));
-        })), h("slot", { key: '8f014081c3bc2a8a3013aea3aff32690d6f71c85' }))));
-    }
-    static get is() { return "eds-tabs-content"; }
-    static get properties() {
-        return {
-            "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",
-                    "resolved": "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": "tabContentChange",
-                "name": "tabContentChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ index: number; name: string }",
-                    "resolved": "{ 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-content/eds-tabs-content.stories.js

@@ -1,112 +0,0 @@
-export default {
-    title: 'Shared Ui/Tabs-Content',
-    component: 'eds-tabs-content',
-    includeStories: [], // Excludes all stories in this file
-    argTypes: {
-        tabs: {
-            control: 'text',
-            defaultValue: JSON.stringify([
-                { label: 'Home', url: '#', active: true, ariaLabel: 'Home Tab' },
-                { label: 'Profile', url: '#', active: false, ariaLabel: 'Profile Tab' },
-                {
-                    label: 'Settings',
-                    url: '#',
-                    active: false,
-                    ariaLabel: 'Settings Tab'
-                }
-            ])
-        }
-    }
-};
-const Template = (args) => `
-    <eds-tabs-content 
-      tabs='${args.tabs}'
-    >
-      <div class="container">
-        <div class="tab-content" slot="tab-content-0">
-            <p>This is the Home content.</p>
-        </div>
-        <div class="tab-content hidden" slot="tab-content-1">
-            <p>This is the Profile content.</p>
-        </div>
-        <div class="tab-content hidden" slot="tab-content-2">
-            <p>This is the Settings content.</p>
-        </div>
-      </div>
-    </eds-tabs-content>
-  `;
-const TemplateWithForm = (args) => `
-  <eds-tabs-content 
-    nav-aria-label="${args.navAriaLabel}" 
-    tabs='${args.tabs}'
-  >
-    <div class="container">
-      <div class="tab-content" slot="tab-content-0">
-          <p>This is the Home content.</p>
-      </div>
-      <div class="tab-content" slot="tab-content-1">
-          <eds-form
-            name="extended-form"
-            endpoint="https://example.com/api/submit"
-            fields='[
-                    {"name": "username", "label": "Username", "type": "text", "required": true, "maxlength": 10},
-                    {"name": "email", "label": "Email", "type": "email", "required": true},
-                    {"name": "password", "label": "Password", "type": "password", "required": true, "maxlength": 50},
-                    {"name": "bio", "label": "Biography", "type": "textarea", "required": true, "maxlength": 300},
-                    {"name": "role", "label": "Role", "type": "select", "required": true, "options": [
-                      {"label": "Admin", "value": "admin"},
-                      {"label": "Editor", "value": "editor"},
-                      {"label": "Viewer", "value": "viewer"}
-                    ]},
-                    {"name": "hiddenField", "type": "hidden", "value": "hiddenValue"}
-                  ]'
-            success-message="Form submitted successfully!"
-            error-message="Please fix the errors in the form."
-            submit-btn="true"
-            small-alert="false"
-            set-form-url="true"
-          ></eds-form>
-      </div>
-      <div class="tab-content" slot="tab-content-2">
-          <p>This is the Settings content.</p>
-      </div>
-    </div>
-  </eds-tabs-content>
-`;
-export const Default = Template.bind({});
-Default.args = {
-    navAriaLabel: 'Tabs',
-    tabs: JSON.stringify([
-        { label: 'Home', url: '#', active: true, ariaLabel: 'Home Tab' },
-        { label: 'Profile', url: '#', active: false, ariaLabel: 'Profile Tab' },
-        { label: 'Settings', url: '#', active: false, ariaLabel: 'Settings Tab' }
-    ])
-};
-export const ProfileActive = Template.bind({});
-ProfileActive.args = {
-    navAriaLabel: 'User Profile Tabs',
-    tabs: JSON.stringify([
-        { label: 'Home', url: '#', active: false, ariaLabel: 'Home Tab' },
-        { label: 'Profile', url: '#', active: true, ariaLabel: 'Profile Tab' },
-        { label: 'Settings', url: '#', active: false, ariaLabel: 'Settings Tab' }
-    ])
-};
-export const CustomTabs = Template.bind({});
-CustomTabs.args = {
-    navAriaLabel: 'Custom Navigation Tabs',
-    tabs: JSON.stringify([
-        { 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' }
-    ])
-};
-export const WithFormTab = TemplateWithForm.bind({});
-WithFormTab.args = {
-    navAriaLabel: 'Tabs with Form',
-    tabs: JSON.stringify([
-        { label: 'Home', url: '#', active: false, ariaLabel: 'Home Tab' },
-        { label: 'Form', url: '#', active: true, ariaLabel: 'Form Tab' },
-        { label: 'Settings', url: '#', active: false, ariaLabel: 'Settings Tab' }
-    ])
-};

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

@@ -1,109 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @internal
- */
-export class EdsUserModal {
-    constructor() {
-        this.user = undefined;
-        this.links = undefined;
-        this.onLogout = undefined;
-        this.parsedUser = {};
-        this.parsedLinks = [];
-    }
-    parseUserProp(newValue) {
-        this.parsedUser = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
-    }
-    parseLinksProp(newValue) {
-        this.parsedLinks = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
-    }
-    componentWillLoad() {
-        this.parseUserProp(this.user);
-        this.parseLinksProp(this.links);
-    }
-    get initials() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const initials = `${((_b = (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname) === null || _b === void 0 ? void 0 : _b.charAt(0)) || ''}${((_d = (_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.lastname) === null || _d === void 0 ? void 0 : _d.charAt(0)) || ''}`.toUpperCase();
-        return initials || ((_g = (_f = (_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.fullname) === null || _f === void 0 ? void 0 : _f.charAt(0)) === null || _g === void 0 ? void 0 : _g.toUpperCase()) || '';
-    }
-    get hasLogout() {
-        return typeof this.onLogout === 'function';
-    }
-    render() {
-        var _a, _b, _c, _d, _e;
-        return (h("div", { key: '866e4e08b5a5330d341845c7cd68f18845732bb6', class: "min-w-[280px] p-8" }, h("div", { key: 'c3c0c56a0ba0bb035efbc474dacc69454f2f9831', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, h("eds-avatar", { key: '053e545eb7b8f66b9b9463f77ac89083b2bc87a4', "first-name": (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname, "last-name": (_b = this.parsedUser) === null || _b === void 0 ? void 0 : _b.lastname, initials: this.initials, color: "grey", rounded: true, "initials-strong": true }), h("div", { key: 'c2d3a51f5aa92dda20058b51aaab3405a85dfbc0', class: "max-w-full" }, ((_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.fullname) && (h("p", { key: 'fcc11680037eb282316cfde3988beb7550a51059', class: "f-ui-01 text-default w-full text-ellipsis" }, this.parsedUser.fullname)), ((_d = this.parsedUser) === null || _d === void 0 ? void 0 : _d.username) && h("p", { key: '2f6aac63baecb3da750f3eb9a09f8793120d8977', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.username), ((_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.email) && h("p", { key: '04f3cf2dab10351bc52c94f53c6e9b75d3d34fe7', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.email))), h("div", { key: 'b5bb3171c338891669251b8cde0cdbc810562065', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, h("div", { key: '7020f1d94ad9ed10d8b1e1fce88837c70ef310b8', class: "border-softer mb-10 border-b-2 pb-16" }, h("eds-link", { key: '26946fa26bd53953e99f2f61b4d9f47e60f5dc6f', label: "My EBRAINS", "aria-label": "My EBRAINS", url: "https://www.ebrains.eu/dashboard", intent: "primary", "extra-class": "w-full", external: true })), h("eds-link", { key: 1, label: "Account Settings", url: "https://iam.ebrains.eu/auth/realms/hbp/account/", intent: "secondary", icon: "arrow-diagonal", external: true, "extra-class": "w-full" }), this.hasLogout && (h("eds-link", { key: 'e53f2b7588fea91fd16c0effe81609e1ded97304', label: "Sign out", intent: "tertiary", "extra-class": "w-full justify-center", onClick: () => this.onLogout && this.onLogout() })))));
-    }
-    static get is() { return "eds-user-modal"; }
-    static get properties() {
-        return {
-            "user": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "User | string",
-                    "resolved": "User | string",
-                    "references": {
-                        "User": {
-                            "location": "global",
-                            "id": "global::User"
-                        }
-                    }
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The user object containing user information.\nCan be passed as an object or a JSON string."
-                },
-                "attribute": "user",
-                "reflect": false
-            },
-            "links": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Array of links to be displayed in the modal.\nCan be passed as an array or a JSON string."
-                },
-                "attribute": "links",
-                "reflect": false
-            },
-            "onLogout": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "() => void",
-                    "resolved": "() => void",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Logout callback function."
-                }
-            }
-        };
-    }
-    static get states() {
-        return {
-            "parsedUser": {},
-            "parsedLinks": {}
-        };
-    }
-    static get watchers() {
-        return [{
-                "propName": "user",
-                "methodName": "parseUserProp"
-            }, {
-                "propName": "links",
-                "methodName": "parseLinksProp"
-            }];
-    }
-}

package/dist/components/eds-navigator.js

@@ -1,75 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$2 } from './eds-link2.js';
-
-const EdsNavigator$1 = /*@__PURE__*/ proxyCustomElement(class EdsNavigator extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.prevLabel = undefined;
-        this.nextLabel = undefined;
-        this.prevUrl = undefined;
-        this.nextUrl = undefined;
-        this.linkSize = 'small';
-        this.linkIntent = 'tertiary';
-    }
-    componentDidLoad() {
-        // Emit context for each eds-link element after the component is fully loaded
-        const links = this.el.querySelectorAll('eds-link');
-        links.forEach((link) => {
-            this.emitContext(link);
-        });
-    }
-    /**
-     * Emits a custom event 'parentContext' for a given link element with the component's context.
-     * @param linkElement - The eds-link element to emit the event for.
-     */
-    emitContext(linkElement) {
-        const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.el.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        linkElement.dispatchEvent(event);
-    }
-    render() {
-        return (h("ul", { key: '712287e683436cc98c2d6ef195501add1929522e', class: "flex lg:flex grow items-center justify-center gap-x-8" }, this.prevLabel && (h("eds-link", { key: '4fda36ce37897284d7062f88133f147831d96a6f', label: this.prevLabel, url: this.prevUrl || undefined, disabled: !this.prevUrl, "aria-label": this.prevLabel, size: this.linkSize, intent: this.linkIntent, class: "mr-auto !p-8 lg:!pr-12" }, h("eds-icon-wrapper", { key: '9bfa6bbbdc68641f65bec49f207d96f075b9a5b0', icon: "chevron-left" }), this.prevLabel)), this.nextLabel && (h("eds-link", { key: '6ee8ebee011a2c30a74645b072c7c37929d0a55f', label: this.nextLabel, url: this.nextUrl || undefined, disabled: !this.nextUrl, "aria-label": this.nextLabel, size: this.linkSize, intent: this.linkIntent, class: "ml-auto !p-8 lg:!pl-12" }, this.nextLabel, h("eds-icon-wrapper", { key: '44ebd4dcce0e367df7d9035bb445e49fde35e913', icon: "chevron-right", class: "w-20 h-20" })))));
-    }
-    get el() { return this; }
-}, [0, "eds-navigator", {
-        "prevLabel": [1, "prev-label"],
-        "nextLabel": [1, "next-label"],
-        "prevUrl": [1, "prev-url"],
-        "nextUrl": [1, "next-url"],
-        "linkSize": [1, "link-size"],
-        "linkIntent": [1, "link-intent"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["eds-navigator", "eds-icon-wrapper", "eds-link"];
-    components.forEach(tagName => { switch (tagName) {
-        case "eds-navigator":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, EdsNavigator$1);
-            }
-            break;
-        case "eds-icon-wrapper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "eds-link":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const EdsNavigator = EdsNavigator$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { EdsNavigator, defineCustomElement };

package/dist/components/eds-tab.js

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

package/dist/components/eds-tab2.js

@@ -1,55 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as cva } from './index2.js';
-
-const EdsTab = /*@__PURE__*/ proxyCustomElement(class EdsTab extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.tabCva = cva([
-            'cursor-pointer',
-            //'px-16 py-12',
-            //'border-b-2',
-            'text-gray-700',
-            'hover:text-black',
-            'focus:outline-none',
-            'focus-visible:ring'
-        ], {
-            variants: {
-                active: {
-                    true: 'border-blue-500 font-bold text-blue-600',
-                    false: 'border-transparent'
-                }
-            },
-            defaultVariants: {
-                active: false
-            }
-        });
-        this.label = undefined;
-        this.url = undefined;
-        this.active = false;
-        this.ariaLabel = undefined;
-    }
-    render() {
-        return (h("a", { key: 'a55be2a07e554ab13a0d7e913710382d6126da57', "aria-label": this.label, "aria-current": this.active, class: this.tabCva({ active: this.active }) }, this.label));
-    }
-}, [0, "eds-tab", {
-        "label": [1],
-        "url": [1],
-        "active": [4],
-        "ariaLabel": [1, "aria-label"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["eds-tab"];
-    components.forEach(tagName => { switch (tagName) {
-        case "eds-tab":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, EdsTab);
-            }
-            break;
-    } });
-}
-
-export { EdsTab as E, defineCustomElement as d };