@ebrains/components 0.0.1-alpha.0

package/dist/types/components/eds-breadcrump/eds-breadcrump.d.ts

@@ -0,0 +1,97 @@
+interface Link {
+    label: string;
+    url: string;
+}
+type RenderableLink = Link & {
+    isHidden?: boolean;
+};
+/**
+ * `EdsBreadcrumb` is a navigational component that displays the user's current location within a hierarchy of pages.
+ * This component is especially useful for providing context and enhancing user navigation experiences.
+ *
+ * Key features include:
+ * - Customizable breadcrumb items passed as a JSON string or array, each with a `label` and `url`.
+ * - Configurable visual intent for breadcrumb links to match various design themes.
+ * - Automatic parsing of breadcrumb items with graceful handling of invalid JSON formats.
+ * - Emits custom events for context tracking on each breadcrumb link after the component loads.
+ *
+ * The component renders as a series of links, with the last item disabled and marked as the current page.
+ */
+export declare class EdsBreadcrumb {
+    /**
+     * An array of breadcrumb items. It can be passed as a JSON string or an array of objects.
+     * Each object should contain the properties: `label` (string) and `url` (string).
+     * Example: '[{"label": "Home", "url": "/"}, {"label": "Products", "url": "/products"}]'
+     */
+    items: string | Link[];
+    /**
+     * The visual style or intent of the breadcrumb links.
+     * Options include: 'primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline'.
+     * Default is 'ghost'.
+     */
+    intent: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'strong' | 'weak' | 'inverse' | 'underline';
+    /**
+     * Holds the parsed breadcrumb items after processing the `items` prop.
+     * This is an internal state used for rendering the breadcrumb links.
+     */
+    parsedItems: Link[];
+    /**
+     * Tracks the current screen size to adjust the breadcrumb rendering dynamically.
+     */
+    isSmallScreen: boolean;
+    /**
+     * Tracks the current screen size to adjust breadcrumb rendering.
+     */
+    maxVisibleItems: number;
+    /**
+     * Reference to the host element.
+     */
+    el: HTMLElement;
+    /**
+     * Watch for changes to the `items` prop and parse it when it changes.
+     * Converts the `items` string into an array of objects if it is a JSON string.
+     * If the format is invalid, it logs an error and sets an empty array.
+     *
+     * @param newValue - The new value for the `items` prop.
+     */
+    parseItems(newValue: string | Link[]): void;
+    /**
+     * Lifecycle method that runs when the component is about to be loaded.
+     * It parses the initial `items` prop value.
+     */
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * Updates the maximum number of visible items and tracks if the screen is small.
+     */
+    updateScreenSize: () => void;
+    /**
+     * 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;
+    /**
+     * Truncates breadcrumb items based on the maxVisibleItems value.
+     * Truncates `label` to 10 characters if `isSmallScreen` is true, except for the last label.
+     */
+    getTruncatedItems(): RenderableLink[];
+    /**
+     * Truncates the label of a breadcrumb item to a maximum of 10 characters
+     * if the screen is small.
+     */
+    truncateLabel(item: Link): Link;
+    /**
+     * Render method for the breadcrumb component.
+     * It creates a navigation element with an ordered list of breadcrumb links.
+     * The last link is disabled and marked as the current page.
+     */
+    render(): any;
+}
+export {};

package/dist/types/components/eds-button/eds-button.d.ts

@@ -0,0 +1,75 @@
+/**
+ * `EdsButton` is a versatile button component designed for a range of actions and interactions in applications.
+ * The button offers various customization options for appearance, size, and behavior.
+ *
+ * Key features include:
+ * - Configurable visual styles (`intent`) such as primary, secondary, and ghost.
+ * - Loading state indicator and disabled state for control over user interactions.
+ * - Optional icon display with customizable position and size.
+ * - Support for different element types (`button` or `a`) and pill-shaped buttons.
+ * - Emits a custom Matomo event when clicked for tracking interactions.
+ *
+ * This component is suitable for buttons, links, and other interactive elements within an interface.
+ */
+export declare class EdsButton {
+    /**
+     * The label text to be displayed inside the button.
+     */
+    label?: string;
+    /**
+     * The accessible aria-label for the button, used when there is no visible label.
+     */
+    ariaLabel: string | null;
+    /**
+     * The HTML element type for the button (e.g., 'button', 'a'). Default is 'button'.
+     */
+    elementType: string;
+    /**
+     * The visual intent or style of the button.
+     * Options include 'primary', 'secondary', 'tertiary', 'ghost', and 'ghostInverse'.
+     */
+    intent?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse';
+    /**
+     * A boolean indicating whether the button is in a loading state.
+     */
+    loading: boolean;
+    /**
+     * A boolean indicating whether the button is disabled.
+     */
+    disabled: boolean;
+    /**
+     * A boolean to determine if the button should have a pill shape (rounded).
+     */
+    pill: boolean;
+    /**
+     * The icon name to be displayed inside the button. Assumes a string for the icon name.
+     */
+    icon?: string;
+    /**
+     * The size of the button. Options are 'small' or 'large'. Default is 'small'.
+     */
+    size?: 'small' | 'large';
+    /**
+     * The position of the icon inside the button. Options are 'left' or 'right'. Default is 'right'.
+     */
+    iconPos?: 'left' | 'right';
+    /**
+     * A boolean indicating whether a smaller icon size should be used.
+     */
+    iconSmall?: boolean;
+    extraClass?: string;
+    /**
+     * Custom click handler passed to the button.
+     */
+    triggerClick?: () => void;
+    /**
+     * Reference to the host element.
+     */
+    el: HTMLElement;
+    private button;
+    private iconCva;
+    private parentContext;
+    handleParentContext(event: CustomEvent): void;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/eds-button/eds-button.stories.d.ts

@@ -0,0 +1,62 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        label: {
+            control: string;
+        };
+        ariaLabel: {
+            control: string;
+        };
+        elementType: {
+            control: string;
+            options: string[];
+        };
+        intent: {
+            control: string;
+            options: string[];
+        };
+        loading: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        pill: {
+            control: string;
+        };
+        icon: {
+            control: string;
+        };
+        iconPos: {
+            control: string;
+            options: string[];
+        };
+        iconSmall: {
+            control: string;
+        };
+        size: {
+            control: string;
+            options: string[];
+        };
+        triggerClick: {
+            action: string;
+        };
+    };
+    args: {
+        label: string;
+        ariaLabel: string;
+        elementType: string;
+        intent: string;
+        loading: boolean;
+        disabled: boolean;
+        pill: boolean;
+        icon: string;
+        iconPos: string;
+        iconSmall: boolean;
+        size: string;
+        triggerClick: any;
+    };
+};
+export default _default;
+export declare const Default: (args: any) => string;

package/dist/types/components/eds-cards/eds-card-composer/eds-card-desc/eds-card-desc.d.ts

@@ -0,0 +1,23 @@
+export declare class EdsCardDesc {
+    /**
+     * The description text to be displayed inside the card.
+     */
+    description: string;
+    /**
+     * A custom CSS class to style the description text.
+     * Default is 'f-ui-03-light'.
+     */
+    descClass: string;
+    /**
+     * A boolean indicating whether the description should be truncated.
+     * Default is `true`.
+     */
+    truncate: boolean;
+    /**
+     * The number of lines to truncate the description to.
+     * Default is 3 lines.
+     */
+    truncateLines: string;
+    private getTruncateClass;
+    render(): any;
+}

package/dist/types/components/eds-cards/eds-card-composer/eds-card-desc/eds-card-desc.stories.d.ts

@@ -0,0 +1,32 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        description: {
+            control: string;
+        };
+        descClass: {
+            control: string;
+        };
+        truncate: {
+            control: string;
+        };
+        truncateLines: {
+            control: string;
+        };
+    };
+    args: {
+        description: string;
+        descClass: string;
+        truncate: boolean;
+        truncateLines: string;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => import("lit-html").TemplateResult<1>;
+    args: {
+        description: string;
+        truncate: boolean;
+    };
+};

package/dist/types/components/eds-cards/eds-card-composer/eds-card-tags/eds-card-tags.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @internal
+ */
+export declare class EdsCardTags {
+    /**
+     * A boolean indicating whether the tags should be displayed with an accent style.
+     * If true, tags will use the 'accent' intent; otherwise, the default intent is used.
+     */
+    accent: boolean;
+    /**
+     * An array of tag strings to be displayed within the card.
+     */
+    tags: string[];
+    render(): any;
+}

package/dist/types/components/eds-cards/eds-card-composer/eds-card-title/eds-card-title.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @internal
+ */
+export declare class EdsCardTitle {
+    /**
+     * The URL that the title should link to. If provided, the title will be rendered as an anchor (`<a>`).
+     */
+    url?: string;
+    /**
+     * The CSS class applied to the title element for styling.
+     * This will be dynamically set based on the heading level.
+     */
+    titleClass: string;
+    /**
+     * The heading level for the title. Can be 'h2', 'h3', 'h4', 'h5', or 'h6'.
+     * Default is 'h3'.
+     */
+    headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Indicates whether the link should open in a new tab if the URL is provided.
+     * Default is `false`.
+     */
+    externalLink: boolean;
+    /**
+     * The text content for the title.
+     */
+    cardTitle: string;
+    /**
+     * Indicates whether the hierarchy is enabled.
+     * If true, all headings except 'h6' map to '05', and 'h6' maps to '06'.
+     */
+    hierarchy: boolean;
+    /**
+     * Dynamically generate the title class based on the heading level.
+     */
+    private getTitleClass;
+    render(): any;
+}

package/dist/types/components/eds-cards/eds-card-composer/eds-card-wrapper/eds-card-wrapper.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @internal
+ */
+export declare class EdsCardWrapper {
+    /**
+     * A boolean that determines whether the card should be displayed with a smaller height.
+     * If true, the card will use the 'tiny' height class.
+     */
+    tiny: boolean;
+    /**
+     * A boolean that determines whether the card should have a background color.
+     * If true, the card will have a background, otherwise it will not.
+     */
+    withBg: boolean;
+    /**
+     * A boolean that determines whether the card should display a hover effect.
+     * If true, the card will have a shadow effect and change its cursor on hover.
+     */
+    withHover: boolean;
+    el: HTMLElement;
+    private hasSlot;
+    render(): any;
+}

package/dist/types/components/eds-cards/eds-card-generic/eds-card-generic.d.ts

@@ -0,0 +1,87 @@
+/**
+ * `EdsCardGeneric` is a versatile card component designed to display rich content such as titles, descriptions, images, and tags.
+ * The card supports various visual configurations, including hover effects, background styling, and compact layout options.
+ *
+ * Key features include:
+ * - A customizable title with an optional link.
+ * - Display of images, avatars, or initials based on the available content.
+ * - Optional description, tag display, and hover effects for interactive use.
+ * - Integration with Matomo analytics, emitting a custom event when the card is clicked.
+ *
+ * This component is ideal for use in interfaces where structured card-like display elements are needed.
+ */
+export declare class EdsCardGeneric {
+    /**
+     * The title of the card. This is required and displayed prominently.
+     */
+    cardTitle: string;
+    /**
+     * The URL that the card title links to. If provided, the title becomes a clickable link.
+     */
+    url?: string;
+    /**
+     * The description text displayed within the card.
+     */
+    description?: string;
+    /**
+     * The image associated with the card. Can be passed as an object with image attributes.
+     */
+    image?: any;
+    /**
+     * The URL or path to the avatar image. Used as a fallback when no card image is available.
+     */
+    avatar?: string;
+    /**
+     * Short abbreviation or initials for displaying when no image or avatar is provided.
+     */
+    shortAbbreviation?: string;
+    /**
+     * The heading level for the card title, such as 'h1', 'h2', etc.
+     * Default is 'h3'.
+     */
+    headingLevel: string;
+    /**
+     * A comma-separated string of tags related to the card content.
+     */
+    tags: any;
+    /**
+     * A boolean that determines whether the card should be displayed with a smaller height.
+     * If true, the card will use the 'tiny' height class.
+     */
+    tiny: boolean;
+    /**
+     * A boolean that determines whether the card should have a background color.
+     * If true, the card will have a background, otherwise it will not.
+     */
+    bg: boolean;
+    /**
+     * A boolean that determines whether the card should display a hover effect.
+     * If true, the card will have a shadow effect and change its cursor on hover.
+     */
+    withHover: boolean;
+    /**
+     * Indicates whether the hierarchy is enabled.
+     * If true, all headings except 'h6' map to '05', and 'h6' maps to '06'.
+     */
+    hierarchy: boolean;
+    /**
+     * Reference to the host element.
+     */
+    el: HTMLElement;
+    /**
+     * Parsed image object derived from the `image` prop.
+     * @type {object}
+     */
+    parsedImage: any;
+    componentWillLoad(): void;
+    /**
+     * Parses the `tags` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `tags` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    get parsedTags(): any[];
+    articleClasses(): string;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/eds-cards/eds-card-generic/eds-card-generic.stories.d.ts

@@ -0,0 +1,94 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        cardTitle: {
+            control: string;
+            description: string;
+        };
+        url: {
+            control: string;
+            description: string;
+        };
+        description: {
+            control: string;
+            description: string;
+        };
+        image: {
+            control: string;
+            description: string;
+        };
+        avatar: {
+            control: string;
+            description: string;
+        };
+        shortAbbreviation: {
+            control: string;
+            description: string;
+        };
+        headingLevel: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        tags: {
+            control: string;
+            description: string;
+        };
+        tiny: {
+            control: string;
+            description: string;
+        };
+        bg: {
+            control: string;
+            description: string;
+        };
+        withHover: {
+            control: string;
+            description: string;
+        };
+        hierarchy: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        cardTitle: string;
+        url: string;
+        description: string;
+        headingLevel: string;
+        tags: {
+            label: string;
+            style: string;
+        }[];
+        tiny: boolean;
+        bg: boolean;
+        withHover: boolean;
+        hierarchy: boolean;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+    args: {
+        cardTitle: string;
+        description: string;
+    };
+};
+export declare const WithImageAndTags: {
+    render: (args: any) => string;
+    args: {
+        cardTitle: string;
+        description: string;
+        image: {
+            src: string;
+            alt: string;
+            width: string;
+            height: string;
+        };
+        tags: {
+            label: string;
+            style: string;
+        }[];
+    };
+};

package/dist/types/components/eds-cards/eds-card-project/eds-card-project.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @internal
+ */
+export declare class EdsCardProject {
+    /**
+     * Image data for the card. Expects a JSON string with image attributes (src, alt, srcset, sizes, etc.).
+     */
+    image?: any;
+    /**
+     * Optional editorial title displayed in the card.
+     */
+    editorialTitle?: string;
+    /**
+     * Defines the heading level for the project title. Defaults to 'h3'.
+     * Accepts values: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'.
+     */
+    headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * The category title for the card, displayed as a tag.
+     */
+    categoryTitle: string;
+    /**
+     * Color variant for the card background. It affects the background and border styles.
+     */
+    color?: string;
+    /**
+     * Determines if the background color changes on hover. Defaults to `false`.
+     */
+    bgOnHover: boolean;
+    /**
+     * If `true`, the card will be displayed vertically. Defaults to `false`.
+     */
+    vertical: boolean;
+    /**
+     * Title of the project displayed in the card.
+     */
+    titleProject?: string;
+    /**
+     * URL that the project title links to.
+     */
+    url?: string;
+    /**
+     * Parsed image object derived from the `image` prop.
+     * @type {object}
+     */
+    parsedImage: any;
+    /**
+     * Reference to the host element.
+     */
+    el: HTMLElement;
+    componentWillLoad(): void;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/eds-cards/eds-card-tool/eds-card-tool.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @internal
+ */
+export declare class EdsCardTool {
+    /**
+     * The title of the card. This is required and displayed prominently.
+     */
+    cardTitle: string;
+    /**
+     * The URL that the card title links to. If provided, the title becomes a clickable link.
+     */
+    url?: string;
+    /**
+     * The description text displayed within the card.
+     */
+    description?: string;
+    /**
+     * The image associated with the card. Can be passed as an object with image attributes.
+     */
+    image?: any;
+    /**
+     * The URL or path to the avatar image. Used as a fallback when no card image is available.
+     */
+    avatar?: string;
+    /**
+     * Short abbreviation or initials for displaying when no image or avatar is provided.
+     */
+    shortAbbreviation?: string;
+    /**
+     * The heading level for the card title, such as 'h1', 'h2', etc.
+     * Default is 'h3'.
+     */
+    headingLevel?: string;
+    /**
+     * A comma-separated string of tags related to the card content.
+     */
+    tags: any;
+    /**
+     * A boolean that determines whether the card should be displayed with a smaller height.
+     * If true, the card will use the 'tiny' height class.
+     */
+    tiny: boolean;
+    /**
+     * A boolean that determines whether the card should have a background color.
+     * If true, the card will have a background, otherwise it will not.
+     */
+    bg: boolean;
+    /**
+     * A boolean that determines whether the card should display a hover effect.
+     * If true, the card will have a shadow effect and change its cursor on hover.
+     */
+    withHover: boolean;
+    /**
+     * Indicates whether the link should open in a new tab if the URL is provided.
+     * Default is `false`.
+     */
+    external: boolean;
+    /**
+     * Indicates whether the hierarchy is enabled.
+     * If true, all headings except 'h6' map to '05', and 'h6' maps to '06'.
+     */
+    hierarchy: boolean;
+    /**
+     * Reference to the host element.
+     */
+    el: HTMLElement;
+    /**
+     * Parses the `tags` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `tags` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    get parsedTags(): any[];
+    componentWillLoad(): void;
+    parseTags(): any;
+    articleClasses(): string;
+    private handleClick;
+    render(): any;
+}