@ebrains/components 0.0.1-alpha.0

package/dist/types/components/eds-code-block/eds-code-block.d.ts

@@ -0,0 +1,15 @@
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-css';
+export declare class EdsCodeBlock {
+    /** The code content to display */
+    code: string;
+    /** The language type for syntax highlighting (e.g., 'javascript', 'html', 'css') */
+    language: string;
+    /** Tooltip text for when the code is copied */
+    copied: boolean;
+    private copyToClipboard;
+    private getHighlightedCode;
+    render(): any;
+}

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

@@ -0,0 +1,120 @@
+/**
+ * `EdsDropdown` is a versatile dropdown component that provides a list of items
+ * that appear upon clicking the dropdown button. It supports various customization options,
+ * such as positioning, styling, and keyboard accessibility.
+ *
+ * Key features include:
+ * - Configurable dropdown position (left or right) and offset.
+ * - Customizable intent styles (e.g., primary, secondary).
+ * - Keyboard navigation with support for up and down arrow keys.
+ * - Option to use as a navigation menu or standard dropdown.
+ *
+ * This component is well-suited for use in menus, navigational elements, and other interactive UI patterns.
+ */
+export declare class EdsDropdown {
+    /**
+     * Icon displayed on the dropdown button.
+     * @type {string}
+     * @default 'chevron-down'
+     */
+    icon: string;
+    /**
+     * Label for the dropdown button.
+     * @type {string}
+     */
+    label: string;
+    /**
+     * Whether the dropdown button has rounded (pill) styling.
+     * @type {boolean}
+     * @default false
+     */
+    rounded: boolean;
+    /**
+     * Accessible label for the dropdown button.
+     * @type {string}
+     * @default 'Open dropdown'
+     */
+    ariaLabel: string;
+    /**
+     * Specifies whether the dropdown acts as a navigation menu.
+     * @type {boolean}
+     * @default true
+     */
+    asNav: boolean;
+    /**
+     * Position of the dropdown relative to the button.
+     * @type {'left' | 'right'}
+     * @default 'right'
+     */
+    dropdownPos: 'left' | 'right';
+    /**
+     * Offset spacing for the dropdown relative to the button.
+     * @type {boolean}
+     * @default true
+     */
+    dropdownOffset: boolean;
+    /**
+     * Visual intent of the dropdown button.
+     * Options include: 'primary', 'secondary', 'tertiary', 'ghost', 'ghostInverse'.
+     * @type {'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse'}
+     * @default 'tertiary'
+     */
+    intent?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse';
+    /**
+     * State to track if the dropdown is open.
+     * @type {boolean}
+     * @default false
+     */
+    isOpen: boolean;
+    /**
+     * Index of the currently focused item within the dropdown.
+     * @type {number}
+     * @default -1
+     */
+    focusIndex: number;
+    /**
+     * Reference to the host element.
+     */
+    host: HTMLElement;
+    private dropdownContent?;
+    private focusableItems;
+    /**
+     * Closes the dropdown when a click occurs outside of it.
+     * @param {Event} e - The click event.
+     */
+    handleWindowClick(e: Event): void;
+    /**
+     * Handles keyboard navigation and accessibility within the dropdown.
+     * @param {KeyboardEvent} event - The keyboard event.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Toggles the visibility of the dropdown and manages focus.
+     */
+    private handleClick;
+    /**
+     * Closes the dropdown and resets focus.
+     */
+    private closeDropdown;
+    /**
+     * Sets focus on the currently selected item in the dropdown.
+     */
+    private focusItem;
+    /**
+     * Lifecycle method that runs after the component has been added to the DOM.
+     * Initializes focusable items within the dropdown.
+     */
+    componentDidLoad(): void;
+    /**
+     * Emits a custom event called `parentContext` for a given button element.
+     * Provides context information about the dropdown component.
+     *
+     * @param linkElement - The button element to which the event will be dispatched.
+     */
+    emitContext(linkElement: HTMLElement): void;
+    /**
+     * Renders the dropdown component and displays its content when open.
+     * @returns {JSX.Element} The rendered dropdown component.
+     */
+    render(): any;
+}

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

@@ -0,0 +1,112 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * `EdsForm` is a comprehensive form component designed to handle form submission with validation,
+ * error handling, and customizable fields. It offers several options for handling alerts and
+ * success/error messages and supports various input types and configurations.
+ *
+ * Key Features:
+ * - Configurable validation for fields, including dynamic field validation.
+ * - Customizable success and error messages displayed upon submission.
+ * - Optionally includes a submit button, which can display a loading state during submission.
+ * - Supports file upload, hidden fields, and dynamic field parsing.
+ * - Emits `formSubmitting` event when the form is submitting.
+ *
+ * This component is ideal for implementing complex forms with specific validation and submission behaviors.
+ */
+export declare class EdsForm {
+    /**
+     * If `true`, displays a small alert for messages.
+     */
+    smallAlert?: boolean;
+    /**
+     * If `true`, includes the current form URL in the submission data.
+     */
+    setFormUrl?: boolean;
+    /**
+     * If `true`, includes a submit button in the form.
+     */
+    submitBtn?: boolean;
+    /**
+     * If `true`, includes a submit button in the form.
+     */
+    submitBtnLabel?: string;
+    /**
+     * The message displayed when the form submission is successful.
+     */
+    successMessage?: string;
+    /**
+     * The message displayed when the form submission fails.
+     */
+    errorMessage?: string;
+    /**
+     * The API endpoint where the form data will be submitted.
+     */
+    endpoint: string;
+    /**
+     * The name of the form, used for grouping inputs and identifying the form.
+     */
+    name: string;
+    /**
+     * A JSON string representing the fields in the form.
+     * Example:
+     * ```json
+     * [
+     *   { "name": "email", "label": "Email", "type": "text", "required": true },
+     *   { "name": "password", "label": "Password", "type": "password", "required": true }
+     * ]
+     * ```
+     */
+    fields: string;
+    /**
+     * Couping Auth and Submit button state
+     * Submit button's state (disabled) is coupled with the Users' auth state - if user auth true then submit btn is enabled
+     * This useful when the component is used as Survey and more types.
+     */
+    coupleAuth: boolean;
+    /**
+     * Tracks whether the form was successfully submitted.
+     */
+    formSubmitted: boolean;
+    /**
+     * Tracks whether the form has any errors.
+     */
+    hasError: boolean;
+    /**
+     * A dictionary of field names and their corresponding error messages.
+     */
+    errors: {
+        [key: string]: string[];
+    };
+    /**
+     * Indicates whether the form is currently submitting.
+     */
+    isSubmitting: boolean;
+    /**
+     * The alert message displayed after form submission or validation.
+     */
+    alertMessage: string | null;
+    /**
+     * Emits an event when the form's submission state changes.
+     */
+    formSubmitting: EventEmitter<boolean>;
+    /**
+     * Reference to the host element.
+     */
+    el: HTMLElement;
+    isAuthenticated: boolean;
+    authUser: any;
+    onAuthStatusChanged(event: CustomEvent<any>): void;
+    private formEl;
+    componentDidLoad(): void;
+    emitContext(linkElement: HTMLElement): void;
+    validateField(name: string, value: string | number, type: string, required: boolean, maxLength?: number): string[];
+    validateFieldGroup(name: string, _type: string, required: boolean): string[];
+    validateSingleBox(name: string, required: boolean): string[];
+    validateForm(): void;
+    private findFieldElement;
+    handleChange: (e: Event, field: any) => void;
+    handleSubmit: (e: Event) => Promise<void>;
+    getFormData(): Promise<FormData>;
+    get parseFields(): any;
+    render(): any;
+}

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

@@ -0,0 +1,47 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        name: {
+            control: string;
+            description: string;
+            defaultValue: string;
+        };
+        endpoint: {
+            control: string;
+            description: string;
+            defaultValue: string;
+        };
+        fields: {
+            control: string;
+            description: string;
+        };
+        successMessage: {
+            control: string;
+            description: string;
+            defaultValue: string;
+        };
+        errorMessage: {
+            control: string;
+            description: string;
+            defaultValue: string;
+        };
+        submitBtn: {
+            control: string;
+            description: string;
+            defaultValue: boolean;
+        };
+        smallAlert: {
+            control: string;
+            description: string;
+            defaultValue: boolean;
+        };
+        setFormUrl: {
+            control: string;
+            description: string;
+            defaultValue: boolean;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;

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

@@ -0,0 +1,42 @@
+/**
+ * `EdsFrame` is a versatile iframe container component that can display external content
+ * such as Storybook previews or other embedded resources. It includes customizable labels,
+ * sizing, error handling, and an optional link to the external content.
+ *
+ * Key Features:
+ * - Displays an iframe with customizable dimensions (`auto`, `small`, `medium`, `large`).
+ * - Optional link (`urlLink`) that directs to the content in a new tab.
+ * - Handles loading errors gracefully by displaying a fallback message.
+ * - Emits a `matomoEvent` with category and context information on click.
+ * - Configurable appearance with intent (`primary`, `secondary`, etc.) and background options.
+ *
+ * Ideal for showcasing embedded content within an application, especially when previewing external resources.
+ */
+export declare class EdsFrame {
+    frameLabel: string;
+    urlLabel?: string;
+    errorMessage?: string;
+    storybookUrl: string;
+    storyPath: string;
+    intent: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'strong' | 'weak' | 'inverse' | 'underline';
+    tiny: boolean;
+    size: 'auto' | 'sm' | 'md' | 'lg' | 'xl';
+    bg: boolean;
+    iframeError: boolean;
+    el: HTMLElement;
+    private articleClasses;
+    private getFrameHeight;
+    private checkIframeAvailability;
+    componentWillLoad(): void;
+    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;
+    private get storyLink();
+    private get frameSrc();
+    render(): any;
+}

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

@@ -0,0 +1,45 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        frameLabel: {
+            control: string;
+            description: string;
+        };
+        urlLabel: {
+            control: string;
+            description: string;
+        };
+        urlLink: {
+            control: string;
+            description: string;
+        };
+        src: {
+            control: string;
+            description: string;
+        };
+        intent: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+        };
+        tiny: {
+            control: string;
+            description: string;
+        };
+        bg: {
+            control: string;
+            description: string;
+        };
+        withHover: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const SmallFrame: any;
+export declare const ErrorState: any;

package/dist/types/components/eds-icon-wrapper/eds-icon-wrapper.d.ts

@@ -0,0 +1,28 @@
+/**
+ * `EdsIconWrapper` is a wrapper component for displaying icons with dynamic loading capabilities.
+ * It allows specifying the icon name, which is dynamically imported and rendered within the component.
+ *
+ * Key Features:
+ * - Dynamically loads the icon component based on the `icon` prop.
+ * - Allows additional CSS classes through the `class` prop for custom styling.
+ * - Observes changes to the `icon` prop and reloads the icon component accordingly.
+ *
+ * Ideal for scenarios where icons need to be dynamically selected and styled consistently across an application.
+ */
+export declare class EdsIconWrapper {
+    /**
+     * The name of the icon to be displayed.
+     * Default is 'arrow-right'.
+     */
+    icon: string;
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    IconComponent: any;
+    TagName: any;
+    componentWillLoad(): void;
+    iconChanged(newValue: string): void;
+    private loadIconComponent;
+    render(): any;
+}

package/dist/types/components/eds-icons/chevron/eds-icon-chevron-down/eds-icon-chevron-down.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconChevronDown {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/chevron/eds-icon-chevron-left/eds-icon-chevron-left.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconChevronLeft {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/chevron/eds-icon-chevron-right/eds-icon-chevron-right.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconChevronRight {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/chevron/eds-icon-chevron-up/eds-icon-chevron-up.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconChevronUp {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/eds-icon-arrow-diagonal/eds-icon-arrow-diagonal.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconArrowDiagonal {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    addClass: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/eds-icon-arrow-right/eds-icon-arrow-right.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconArrowRight {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/eds-icon-close/eds-icon-close.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconClose {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/eds-icon-copy/eds-icon-copy.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconCopy {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/eds-icon-eu/eds-icon-eu.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconEu {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/eds-icon-gitlab/eds-icon-gitlab.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconGitlab {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/eds-icon-loader/eds-icon-loader.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconLoader {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/eds-icon-menu/eds-icon-menu.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconMenu {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/eds-icon-more/eds-icon-more.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconMore {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/eds-icon-search/eds-icon-search.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconSearch {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/eds-icon-success/eds-icon-success.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconSuccess {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/eds-icon-user/eds-icon-user.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconUser {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/social/eds-icon-bluesky/eds-icon-bluesky.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconBluesky {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/social/eds-icon-facebook/eds-icon-facebook.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconFacebook {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/social/eds-icon-linkedin/eds-icon-linkedin.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconLinkedin {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/social/eds-icon-mastodon/eds-icon-mastodon.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconMastodon {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/social/eds-icon-twitter/eds-icon-twitter.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconTwitter {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}

package/dist/types/components/eds-icons/social/eds-icon-youtube/eds-icon-youtube.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @internal
+ */
+export declare class EdsIconYoutube {
+    /**
+     * Additional CSS classes to be applied to the icon for styling.
+     */
+    class: string;
+    render(): any;
+}