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

package/dist/cjs/eds-tab.cjs.entry.js

@@ -1,40 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-f08e4f5c.js');
-const index$1 = require('./index-ab9fbefe.js');
-
-const EdsTab = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.tabCva = index$1.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 (index.h("a", { key: 'a55be2a07e554ab13a0d7e913710382d6126da57', "aria-label": this.label, "aria-current": this.active, class: this.tabCva({ active: this.active }) }, this.label));
-    }
-};
-
-exports.eds_tab = EdsTab;

package/dist/cjs/eds-tabs-content.cjs.entry.js

@@ -1,133 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-f08e4f5c.js');
-const analytics = require('./analytics-d8fb3fdd.js');
-const index$1 = require('./index-ab9fbefe.js');
-
-const EdsTabsContent = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.tabContentChange = index.createEvent(this, "tabContentChange", 7);
-        // cva configuration
-        this.tabCva = index$1.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 });
-        analytics.sendAnalytics({
-            category: 'ui-component',
-            tag: this.el.tagName.toLowerCase(),
-            name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
-            action: 'click'
-        });
-    }
-    render() {
-        return (index.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-['']" }, index.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" }, index.h("nav", { key: 'ef8ff8a02e570dfcf8143997ace793a65917e6ca', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index$1) => {
-            //const TabComponent = tab.active ? 'span' : 'a';
-            const tabProps = this.getTabOptions(tab.active, index$1);
-            return (index.h("eds-tab", Object.assign({}, tabProps, { label: tab.label, url: tab.url, active: index$1 === this.activeIndex, ariaLabel: tab.ariaLabel, onClick: () => this.handleTabClick(index$1, tab.label) })));
-        })), index.h("slot", { key: '8f014081c3bc2a8a3013aea3aff32690d6f71c85' }))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "tabs": ["parseTabs"]
-    }; }
-};
-
-exports.eds_tabs_content = EdsTabsContent;

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

@@ -1,68 +0,0 @@
-import { html } from "lit-html";
-export default {
-    title: 'Components/Frame',
-    component: 'eds-frame',
-    argTypes: {
-        frameLabel: { control: 'text', description: 'The label of the frame. This is displayed as the title.' },
-        urlLabel: { control: 'text', description: 'The label for the URL link.' },
-        urlLink: {
-            control: 'text',
-            description: 'The URL that the iframe will display and the title links to, if provided.'
-        },
-        src: { control: 'text', description: 'The source URL for the iframe.' },
-        intent: {
-            control: { type: 'select' },
-            options: ['primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline'],
-            description: 'Intent for styling the link.'
-        },
-        tiny: { control: 'boolean', description: 'Determines whether the frame has a smaller height.' },
-        bg: { control: 'boolean', description: 'Determines whether the frame has a background color.' },
-        withHover: { control: 'boolean', description: 'Determines whether the frame has a hover effect.' }
-    }
-};
-const Template = ({ frameLabel, urlLabel, urlLink, src, intent, tiny, bg, withHover }) => html `
-  <eds-frame
-    frame-label=${frameLabel}
-    url-label=${urlLabel}
-    url-link=${urlLink}
-    src=${src}
-    intent=${intent}
-    ?tiny=${tiny}
-    ?bg=${bg}
-    ?with-hover=${withHover}
-  ></eds-frame>
-`;
-export const Default = Template.bind({});
-Default.args = {
-    frameLabel: 'Default Frame',
-    urlLabel: 'Visit Site',
-    urlLink: 'https://gitlab-org.gitlab.io/gitlab-ui?path=%2Fstory%2Fbase-card--default',
-    src: 'https://gitlab-org.gitlab.io/gitlab-ui/iframe.html?id=base-card--default&viewMode=story',
-    intent: 'primary',
-    tiny: false,
-    bg: true,
-    withHover: true
-};
-/*export const SmallFrame = Template.bind({});
-SmallFrame.args = {
-  frameLabel: 'Small Frame',
-  urlLabel: 'Small Frame Link',
-  urlLink: 'https://gitlab-org.gitlab.io/gitlab-ui?path=%2Fstory%2Fbase-card--default',
-  src: 'https://gitlab-org.gitlab.io/gitlab-ui/iframe.html?id=base-card--default&viewMode=story',
-  intent: 'secondary',
-  tiny: true,
-  bg: true,
-  withHover: false
-};
-
-export const ErrorState = Template.bind({});
-ErrorState.args = {
-  frameLabel: 'Error Frame',
-  urlLabel: 'Error Link',
-  urlLink: 'https://errorframe.com',
-  src: 'https://invalid-url.com', // Simulating a broken URL to trigger the error state
-  intent: 'inverse',
-  tiny: false,
-  bg: false,
-  withHover: true
-};*/

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

@@ -1,147 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @internal
- */
-export class EdsNavigator {
-    constructor() {
-        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" })))));
-    }
-    static get is() { return "eds-navigator"; }
-    static get properties() {
-        return {
-            "prevLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Label for the previous navigation link."
-                },
-                "attribute": "prev-label",
-                "reflect": false
-            },
-            "nextLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Label for the next navigation link."
-                },
-                "attribute": "next-label",
-                "reflect": false
-            },
-            "prevUrl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "URL for the previous navigation link. If not provided, the link will be disabled."
-                },
-                "attribute": "prev-url",
-                "reflect": false
-            },
-            "nextUrl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "URL for the next navigation link. If not provided, the link will be disabled."
-                },
-                "attribute": "next-url",
-                "reflect": false
-            },
-            "linkSize": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'small' | 'large'",
-                    "resolved": "\"large\" | \"small\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Size of the links. Can be 'small', 'medium', or 'large'.\nDefault is 'small'."
-                },
-                "attribute": "link-size",
-                "reflect": false,
-                "defaultValue": "'small'"
-            },
-            "linkIntent": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'ghost' | 'primary' | 'secondary' | 'tertiary' | 'ghost'",
-                    "resolved": "\"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Intent of the links. Can be 'ghost', 'primary', 'secondary', etc.\nDefault is 'ghost'."
-                },
-                "attribute": "link-intent",
-                "reflect": false,
-                "defaultValue": "'tertiary'"
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-}

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

@@ -1,101 +0,0 @@
-export default {
-    title: 'Components/Navigator',
-    component: 'eds-navigator',
-    includeStories: [], // Excludes all stories in this file
-    argTypes: {
-        prevLabel: {
-            control: 'text',
-            description: 'Label for the previous navigation link.',
-            defaultValue: 'Previous Page'
-        },
-        nextLabel: {
-            control: 'text',
-            description: 'Label for the next navigation link.',
-            defaultValue: 'Next Page'
-        },
-        prevUrl: {
-            control: 'text',
-            description: 'URL for the previous navigation link. If not provided, the link will be disabled.',
-            defaultValue: '#'
-        },
-        nextUrl: {
-            control: 'text',
-            description: 'URL for the next navigation link. If not provided, the link will be disabled.',
-            defaultValue: '#'
-        },
-        linkSize: {
-            control: 'select',
-            options: ['small', 'large'],
-            description: 'Size of the links. Can be small, medium, or large.',
-            defaultValue: 'small'
-        },
-        linkIntent: {
-            control: 'select',
-            options: ['ghost', 'primary', 'secondary', 'tertiary'],
-            description: 'Intent of the links. Can be ghost, primary, secondary, etc.',
-            defaultValue: 'ghost'
-        }
-    }
-};
-const Template = (args) => `
-    <eds-navigator
-      prev-label="${args.prevLabel}"
-      next-label="${args.nextLabel}"
-      prev-url="${args.prevUrl}"
-      next-url="${args.nextUrl}"
-      link-size="${args.linkSize}"
-      link-intent="${args.linkIntent}"
-    ></eds-navigator>
-  `;
-export const Default = Template.bind({});
-Default.args = {
-    prevLabel: 'Previous Page',
-    nextLabel: 'Next Page',
-    prevUrl: '#',
-    nextUrl: '#',
-    linkSize: 'small',
-    linkIntent: 'ghost'
-};
-export const MediumPrimaryLinks = Template.bind({});
-MediumPrimaryLinks.args = {
-    prevLabel: 'Back',
-    nextLabel: 'Continue',
-    prevUrl: '#',
-    nextUrl: '#',
-    linkSize: 'small',
-    linkIntent: 'primary'
-};
-export const LargeSecondaryLinks = Template.bind({});
-LargeSecondaryLinks.args = {
-    prevLabel: 'Go Back',
-    nextLabel: 'Next Step',
-    prevUrl: '#',
-    nextUrl: '#',
-    linkSize: 'large',
-    linkIntent: 'secondary'
-};
-export const OnlyNextLink = Template.bind({});
-OnlyNextLink.args = {
-    prevLabel: '',
-    nextLabel: 'Proceed',
-    nextUrl: '#',
-    linkSize: 'small',
-    linkIntent: 'primary'
-};
-export const OnlyPrevLink = Template.bind({});
-OnlyPrevLink.args = {
-    prevLabel: 'Return',
-    nextLabel: '',
-    prevUrl: '#',
-    linkSize: 'small',
-    linkIntent: 'secondary'
-};
-export const DisabledLinks = Template.bind({});
-DisabledLinks.args = {
-    prevLabel: 'Previous (Disabled)',
-    nextLabel: 'Next (Disabled)',
-    prevUrl: '',
-    nextUrl: '',
-    linkSize: 'small',
-    linkIntent: 'ghost'
-};

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

@@ -1,109 +0,0 @@
-import { h } from "@stencil/core";
-import { cva } from "class-variance-authority";
-/**
- * @internal
- */
-export class EdsTab {
-    constructor() {
-        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));
-    }
-    static get is() { return "eds-tab"; }
-    static get properties() {
-        return {
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The label of the tab"
-                },
-                "attribute": "label",
-                "reflect": false
-            },
-            "url": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The URL or href of the tab"
-                },
-                "attribute": "url",
-                "reflect": false
-            },
-            "active": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the tab is active"
-                },
-                "attribute": "active",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "ariaLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Aria label for accessibility"
-                },
-                "attribute": "aria-label",
-                "reflect": false
-            }
-        };
-    }
-}