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

package/dist/components/eds-tabs-content.js

@@ -1,159 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { s as sendAnalytics } from './analytics.js';
-import { c as cva } from './index2.js';
-import { d as defineCustomElement$2 } from './eds-tab2.js';
-
-const EdsTabsContent$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabsContent extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.tabContentChange = createEvent(this, "tabContentChange", 7);
-        // 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: 'aa94a55d3ae658797df6ae75724238a17a80a169', 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: '0e38c695467c272198a605efdb2705b14239756e', class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: '525f56d02b41e236d3b713fb972b6803e3f908d5', 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: 'e5da088cec99dd0e40560b70fbd9940ac5a7f56f' }))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "tabs": ["parseTabs"]
-    }; }
-}, [4, "eds-tabs-content", {
-        "navAriaLabel": [1, "nav-aria-label"],
-        "tabs": [1],
-        "parsedTabs": [32],
-        "activeIndex": [32]
-    }, undefined, {
-        "tabs": ["parseTabs"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["eds-tabs-content", "eds-tab"];
-    components.forEach(tagName => { switch (tagName) {
-        case "eds-tabs-content":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, EdsTabsContent$1);
-            }
-            break;
-        case "eds-tab":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const EdsTabsContent = EdsTabsContent$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { EdsTabsContent, defineCustomElement };

package/dist/components/eds-user-modal.js

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

package/dist/components/eds-user-modal2.js

@@ -1,87 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$4 } from './eds-avatar2.js';
-import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$2 } from './eds-img2.js';
-import { d as defineCustomElement$1 } from './eds-link2.js';
-
-const EdsUserModal = /*@__PURE__*/ proxyCustomElement(class EdsUserModal extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        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: '4a80335b6a59b9653130ca75a6e42c04fce68f4f', class: "min-w-[280px] p-8" }, h("div", { key: '9c97f6be46216587692d4852174cecfaacb70593', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, h("eds-avatar", { key: 'c778f6bdfb21068ca7c2deff6e298f61af6dbc67', "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: '7f453546c9cc54597069abb3e4b50312fe7bf364', class: "max-w-full" }, ((_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.fullname) && (h("p", { key: '34e080ef159535820c09378701de0e6f4fd96009', 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: '2f85764e7d015dc3f3b22ca8a07126f8f57216ef', 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: '002dec51e979c29f2343f55e004449e4cee4075c', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.email))), h("div", { key: '740b78c504257fb755ba7ba04dd25f023d37ed33', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, h("div", { key: 'ac307937bdd3fc86cce502e5eeb3e922d931f418', class: "border-softer mb-10 border-b-2 pb-16" }, h("eds-link", { key: 'bdd0f1ef62ac78ffb1b40ed6873475df360cec66', 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: 'd73016ad71f3b356b7fb7d0a2a84124eabb05da5', label: "Sign out", intent: "tertiary", "extra-class": "w-full justify-center", onClick: () => this.onLogout && this.onLogout() })))));
-    }
-    static get watchers() { return {
-        "user": ["parseUserProp"],
-        "links": ["parseLinksProp"]
-    }; }
-}, [0, "eds-user-modal", {
-        "user": [1],
-        "links": [1],
-        "onLogout": [16],
-        "parsedUser": [32],
-        "parsedLinks": [32]
-    }, undefined, {
-        "user": ["parseUserProp"],
-        "links": ["parseLinksProp"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["eds-user-modal", "eds-avatar", "eds-icon-wrapper", "eds-img", "eds-link"];
-    components.forEach(tagName => { switch (tagName) {
-        case "eds-user-modal":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, EdsUserModal);
-            }
-            break;
-        case "eds-avatar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "eds-icon-wrapper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "eds-img":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "eds-link":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { EdsUserModal as E, defineCustomElement as d };