@ebrains/components 0.0.1-alpha.0

package/dist/types/eds-docs-ui/colors/color-palette/primary.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @internal
+ */
+export declare class ColorPrimaryPalette {
+    private colors;
+    render(): any;
+}

package/dist/types/eds-docs-ui/colors/color-palette/secondary.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @internal
+ */
+export declare class ColorSecondaryPalette {
+    show: string;
+    private colors;
+    render(): any;
+}

package/dist/types/eds-docs-ui/colors/color-palette/support.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @internal
+ */
+export declare class ColorSupportPalette {
+    private colors;
+    render(): any;
+}

package/dist/types/eds-docs-ui/colors/gradient-palette/primary.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @internal
+ */
+export declare class GradientPrimaryPalette {
+    private colors;
+    render(): any;
+}

package/dist/types/eds-docs-ui/colors/gradient-palette/secondary.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @internal
+ */
+export declare class GradientSecondaryPalette {
+    private colors;
+    render(): any;
+}

package/dist/types/eds-docs-ui/colors/gradient-palette/support.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @internal
+ */
+export declare class GradientSupportPalette {
+    private colors;
+    render(): any;
+}

package/dist/types/eds-docs-ui/colors/use-of-colors/correct-use-of-colors.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `CorrectUseOfColors` is a component that combines the primary palette and support palette
+ * to display the correct use of colors.
+ */
+/**
+ * @internal
+ */
+export declare class CorrectUseOfColors {
+    render(): any;
+}

package/dist/types/eds-docs-ui/colors/use-of-colors/incorrect-use-of-colors.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `CorrectUseOfColors` is a component that combines the primary palette and support palette
+ * to display the correct use of colors.
+ */
+/**
+ * @internal
+ */
+export declare class IncorrectUseOfColors {
+    render(): any;
+}

package/dist/types/eds-docs-ui/design-tokens/token-list/token-list.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @internal
+ */
+export declare class TokenList {
+    show: string;
+    getTextColor(value: string): string;
+    resolveColor(value: string): string;
+    renderSection(sectionName: string, sectionContent: Record<string, any>): any;
+    groupTokensByCategory(tokens: Record<string, string>): Record<string, any[]>;
+    render(): any;
+}

package/dist/types/eds-docs-ui/design-tokens/token-list/token-list.stories.d.ts

@@ -0,0 +1,25 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        section: {
+            control: string;
+            options: string[];
+        };
+        category: {
+            control: string;
+            options: any[];
+        };
+    };
+    args: {
+        section: string;
+        category: string;
+    };
+    parameters: {
+        actions: {
+            handles: string[];
+        };
+    };
+};
+export default _default;
+export declare const Tokens: any;

package/dist/types/eds-docs-ui/design-tokens/token-radii/token-radii.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export declare class TokenRadii {
+    render(): any;
+}

package/dist/types/eds-docs-ui/design-tokens/token-ratios/token-ratios.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export declare class TokenRatios {
+    render(): any;
+}

package/dist/types/eds-docs-ui/design-tokens/token-shadows/token-shadows.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export declare class TokenShadows {
+    render(): any;
+}

package/dist/types/eds-docs-ui/design-tokens/token-spacing/token-spacing.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export declare class TokenSpacing {
+    render(): any;
+}

package/dist/types/eds-docs-ui/design-tokens/token-typography/token-typography.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export declare class TokenTypography {
+    render(): any;
+}

package/dist/types/eds-docs-ui/eds-components-section/eds-components-section.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @internal
+ */
+export declare class EdsComponentsSection {
+    /** Active tab index to determine the content to display */
+    tabIndex: number;
+    renderContent(): any;
+    render(): any;
+}

package/dist/types/eds-docs-ui/eds-docs-palettes/eds-docs-palettes.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @internal
+ */
+export declare class EdsDocsPalettes {
+    /** Active tab index to determine the content to display */
+    tabIndex: number;
+    renderContent(): any;
+    render(): any;
+}

package/dist/types/eds-docs-ui/eds-docs-tokens/eds-docs-tokens.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @internal
+ */
+export declare class EdsDocsContent {
+    /** Active tab index to determine the content to display */
+    tabIndex: number;
+    renderContent(): any;
+    render(): any;
+}

package/dist/types/eds-docs-ui/eds-svg-repository/eds-svg-repository.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @internal
+ */
+export declare class EdsSvgRepository {
+    private getSvgData;
+    render(): any;
+}

package/dist/types/eds-docs-ui/functional/angular.d.ts

@@ -0,0 +1,2 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+export declare const EdsDocsAngular: FunctionalComponent;

package/dist/types/eds-docs-ui/functional/installation.d.ts

@@ -0,0 +1,2 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+export declare const EdsDocsInstallation: FunctionalComponent;

package/dist/types/eds-docs-ui/functional/overview.d.ts

@@ -0,0 +1,2 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+export declare const EdsComponentsOverview: FunctionalComponent;

package/dist/types/eds-docs-ui/functional/react.d.ts

@@ -0,0 +1,2 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+export declare const EdsDocsReact: FunctionalComponent;

package/dist/types/eds-docs-ui/functional/usage.d.ts

@@ -0,0 +1,2 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+export declare const EdsDocsUsage: FunctionalComponent;

package/dist/types/eds-docs-ui/functional/vue.d.ts

@@ -0,0 +1,2 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+export declare const EdsDocsVue: FunctionalComponent;

package/dist/types/eds-docs-ui/logo/logo-space/logo-space.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export declare class LogoSpace {
+    render(): any;
+}

package/dist/types/eds-docs-ui/logo/logo-variations/horizontal/logo-variations-horizontal.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @internal
+ */
+export declare class LogoVariations {
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * The type of logo variation to display.
+     * Available options: "coloured", "mono", "dark".
+     */
+    type: 'coloured' | 'black' | 'color-white';
+    render(): any;
+}

package/dist/types/eds-docs-ui/logo/logo-variations/vertical/logo-variations-vertical.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @internal
+ */
+export declare class LogoVariations {
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * The type of logo variation to display.
+     * Available options: "coloured", "mono", "dark".
+     */
+    type: 'coloured' | 'black' | 'color-white';
+    render(): any;
+}

package/dist/types/eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export declare class LogoWrongUsage {
+    render(): any;
+}

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/types/shared-ui/eds-card-section/eds-card-section.d.ts

@@ -0,0 +1,43 @@
+/**
+ * `EdsCardSection` is a component that renders a section of cards in a customizable grid layout.
+ * Each card within the section can display various properties such as title, description, avatar, and additional content.
+ *
+ * Key Features:
+ * - Accepts a JSON string of card objects, each defining its properties like title, description, avatar, tags, URL, and image.
+ * - Configurable grid layout with adjustable column span for each card, optimizing display on different screen sizes.
+ *
+ * This component is ideal for displaying a structured section of cards with varying content in a responsive grid format.
+ */
+export declare class EdsCardSection {
+    /**
+     * JSON string representing an array of card objects.
+     * Each card object can contain properties like `title`, `description`, `avatar`, `headingLevel`, `tags`, `url`, `bg`, `tiny`, and `image`.
+     *
+     * Example:
+     * ```json
+     * '[{"title": "Card Title", "description": "Description", "avatar": "/path/to/avatar.jpg", "url": "http://example.com"}]'
+     * ```
+     */
+    cards: string;
+    /**
+     * Number of columns to span for each card in the grid layout.
+     * This value sets the column span on medium (md) and larger screen sizes.
+     * Default is `4`.
+     */
+    cols: number;
+    /**
+     * Parses the `cards` JSON string prop into an array of card objects.
+     * If parsing fails, returns an empty array.
+     *
+     * @returns {any[]} An array of parsed card objects.
+     */
+    get parsedCards(): any[];
+    /**
+     * Renders the card section as a grid layout.
+     * Each parsed card object is mapped to an `<eds-card-generic>` component,
+     * displaying card details such as title, description, avatar, etc.
+     *
+     * @returns {JSX.Element} The rendered section containing a list of cards.
+     */
+    render(): any;
+}

package/dist/types/shared-ui/eds-card-section/eds-card-section.stories.d.ts

@@ -0,0 +1,33 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        cards: {
+            control: string;
+            description: string;
+        };
+        cols: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        extraClass: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        cards: string;
+        cols: number;
+        extraClass: string;
+    };
+    parameters: {};
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};

package/dist/types/shared-ui/eds-footer/eds-footer.d.ts

@@ -0,0 +1,74 @@
+/**
+ * `EdsFooter` is a footer component designed for the EBRAINS platform, featuring social links,
+ * legal information, and an optional cookie preferences button. It includes a "Back to top"
+ * button and displays an acknowledgment for Horizon Europe funding.
+ *
+ * Key Features:
+ * - Social Network Links: Optionally display a section for social media links.
+ * - Legal and Funding Information: Includes text for legal disclaimers and funding acknowledgments.
+ * - Cookie Preferences: Optionally display a "Cookies Preferences" button.
+ * - Back to Top Button: Smoothly scrolls the page back to the top when clicked.
+ *
+ * This component is ideal for maintaining consistent branding, legal disclaimers, and navigational elements
+ * across the EBRAINS platform, with options for social links and a "Back to top" button.
+ */
+export declare class EdsFooter {
+    /**
+     * Additional CSS classes to apply to the footer for customization.
+     * @type {string}
+     */
+    extraClass: string;
+    /**
+     * Determines if the social network section should be displayed.
+     * Adds top padding when true.
+     * @type {boolean}
+     */
+    social: boolean;
+    /**
+     * Controls the display of the "Cookies Preferences" button.
+     * When true, the button appears in the footer.
+     * @type {boolean}
+     */
+    hasCookiesSetUp: boolean;
+    /**
+     * Controls the display of the "Back to Top" button.
+     * When true, the button appears in the footer.
+     * @type {boolean}
+     */
+    enableScrollTop: boolean;
+    /**
+     * Controls the display of the "Founded By" text.
+     * @type {string}
+     */
+    fundedBy: string;
+    /**
+     * Controls the display of the "Rights Reserved" text.
+     * @type {string}
+     */
+    rightsReserved: string;
+    /**
+     * Controls the display of the "Cookies Preference" text.
+     * @type {string}
+     */
+    cookiesPreference: string;
+    /**
+     * Scrolls the page smoothly back to the top.
+     * Called when the "Back to top" button is clicked.
+     * @private
+     */
+    private backToTop;
+    /**
+     * Toggles the cookie preferences popup, if available.
+     * The actual implementation for handling cookie preferences should be defined here.
+     * @private
+     */
+    private toggleCookiesPopup;
+    /**
+     * Renders the footer component with optional sections and elements,
+     * including social network links, a Horizon Europe funding acknowledgment, and
+     * legal links such as "Cookies Preferences" and copyright information.
+     *
+     * @returns {JSX.Element} The rendered JSX for the footer component.
+     */
+    render(): any;
+}

package/dist/types/shared-ui/eds-footer/eds-footer.stories.d.ts

@@ -0,0 +1,43 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        hasCookiesSetUp: {
+            control: string;
+            description: string;
+        };
+        social: {
+            control: string;
+            description: string;
+        };
+        fundedBy: {
+            control: string;
+            description: string;
+        };
+        rightsReserved: {
+            control: string;
+            description: string;
+        };
+        cookiesPreference: {
+            control: string;
+            description: string;
+        };
+        extraClass: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        hasCookiesSetUp: boolean;
+        social: boolean;
+        fundedBy: string;
+        rightsReserved: string;
+        cookiesPreference: string;
+        extraClass: string;
+    };
+    parameters: {};
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};

package/dist/types/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.d.ts

@@ -0,0 +1,57 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * `eds-fullscreen-menu` is a fullscreen menu component designed for the EBRAINS platform.
+ * It provides a responsive, full-window overlay menu with navigation links and additional options.
+ * This component is suitable for mobile and small screens, where a fullscreen menu enhances user navigation.
+ *
+ * ## Key Features:
+ * - **Links and Menu Links**: Allows configurable primary and secondary navigation links.
+ * - **Event-Driven Open/Close**: Listens for a `toggleMenu` event to open or close the menu, emitted by the `eds-header` component.
+ * - **Responsive Behavior**: Automatically closes the menu when the screen width is larger than a specified breakpoint (1024px).
+ * - **Footer Integration**: Optionally displays social links and a customizable footer section within the fullscreen menu.
+ */
+export declare class EdsFullscreenMenu {
+    /**
+     * JSON string representing the links for primary navigation.
+     * Each link should include `label`, `url`, and optionally an `icon`.
+     */
+    links: string;
+    /**
+     * JSON string representing the extra menu links a user wants for smaill screens navigation.
+     * Each link should include `label`, `url`.
+     */
+    menuLinks: string;
+    homeUrl: string;
+    inverseHeader: boolean;
+    /** State for menu visibility */
+    isMenuOpen: boolean;
+    /** Event to signal menu open/close actions */
+    menuClose: EventEmitter<void>;
+    /**
+     * Listens for the toggleMenu event to open or close the menu.
+     * This event is emitted by the eds-header component.
+     */
+    handleToggleMenu(event: CustomEvent<boolean>): void;
+    /** Opens the menu */
+    openMenu(): void;
+    /** Closes the menu */
+    closeMenu(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleResize(): void;
+    /**
+     * 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
+     */
+    get parsedLinks(): any[];
+    /**
+     * Parses the `menuLinks` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `menuLinks` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed menu link objects
+     */
+    get parsedMenuLinks(): any[];
+    render(): any;
+}

package/dist/types/shared-ui/eds-header/eds-header.d.ts

@@ -0,0 +1,98 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * `EdsHeader` is a header component designed for the EBRAINS platform.
+ * It provides a customizable and responsive navigation experience, tailored for both desktop and mobile views.
+ *
+ * Key Features:
+ * - **Logo Link**: Includes a logo that links to the homepage or a specified URL.
+ * - **Primary Navigation**: Displays an array of navigation links for core platform sections.
+ * - **User Authentication Integration**: Supports Keycloak for login and logout, displaying user authentication options when enabled.
+ * - **Mobile-Friendly Menu**: Offers a collapsible mobile menu with additional links, enhancing navigation for smaller screens.
+ * - **Event-Driven Menu Toggle**: Emits a toggle event to handle opening and closing of a fullscreen menu in sync with other components.
+ *
+ * This component is well-suited for creating a unified header across the platform with seamless integration of navigation, authentication, and responsive design elements.
+ */
+export declare class EdsHeader {
+    /**
+     * URL for the home logo link.
+     * This is the default URL that the logo points to.
+     */
+    homeUrl: string;
+    /**
+     * JSON string representing the links for primary navigation.
+     * Each link should include `label`, `url`, and optionally an `icon`.
+     */
+    links: string;
+    /**
+     * Determines if the header is rendered in inverse style.
+     * When true, the header applies styles suitable for a dark background.
+     */
+    inverseHeader: boolean;
+    /**
+     * Flag to enable or disable user authentication features.
+     * When true, displays the authentication options in the header.
+     */
+    userFeature: boolean;
+    /**
+     * Flag to enable or disable header menu toggle feature.
+     * When true, displays the toggle in the header.
+     */
+    menuEnabled: boolean;
+    /**
+     * The URL of the Keycloak server.
+     * Required if `userFeature` is enabled.
+     */
+    keycloakUrl: string;
+    /**
+     * The Keycloak Realm for authentication.
+     * Required if `userFeature` is enabled.
+     */
+    keycloakRealm: string;
+    /**
+     * The Keycloak Client ID for the application.
+     * Required if `userFeature` is enabled.
+     */
+    keycloakClientId: string;
+    /**
+     * State indicating whether the main menu is open.
+     * Controls the visibility of the fullscreen main menu.
+     */
+    isMenuOpen: boolean;
+    /**
+     * State indicating whether the user menu is open.
+     * Controls the visibility of the fullscreen user menu.
+     */
+    isUserMenuOpen: boolean;
+    isAuthenticated: boolean;
+    hostEl: HTMLElement;
+    onAuthStatusChanged(event: CustomEvent<any>): void;
+    /** Event to signal toggle menu action */
+    toggleMenu: EventEmitter<boolean>;
+    /**
+     * Lifecycle method that runs when the component has fully loaded.
+     * It emits a custom event for each `eds-link` element contained within the breadcrumb.
+     */
+    componentDidLoad(): void;
+    /**
+     * Emits a custom event called `parentContext` for a given link element.
+     * This event provides context information about the breadcrumb component.
+     *
+     * @param linkElement - The link element to which the event will be dispatched.
+     */
+    emitContext(linkElement: HTMLElement): void;
+    /** Emits an event to open or close the menu */
+    handleToggleMenu(): void;
+    /**
+     * Toggles the visibility of the user menu.
+     * Opens the user menu if closed, and closes it if open.
+     */
+    toggleUserMenu(): void;
+    /**
+     * 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
+     */
+    get parsedLinks(): any[];
+    render(): any;
+}