@ebrains/components 0.9.2-beta → 1.0.0

package/dist/hydrate/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@ebrains/components/hydrate",
+  "description": "components component hydration app.",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    }
+  }
+}

package/dist/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/index.cjs.js');

package/dist/index.js

@@ -0,0 +1 @@
+export * from './esm/index.js';

package/dist/stencil.config.js

@@ -0,0 +1,75 @@
+import { reactOutputTarget } from "@stencil/react-output-target";
+import { vueOutputTarget } from "@stencil/vue-output-target";
+import { angularOutputTarget } from "@stencil/angular-output-target";
+import { inlineSvg } from "stencil-inline-svg";
+import path from "path";
+export const config = {
+    env: {},
+    namespace: 'components',
+    //taskQueue: 'async',
+    sourceMap: false,
+    extras: {
+        experimentalImportInjection: true,
+    },
+    //globalScript: './src/utils/global.ts',
+    globalStyle: '../../dist/packages/assets/styles/output.css',
+    outputTargets: [
+        {
+            type: 'dist',
+            esmLoaderPath: '../loader',
+            copy: [
+                {
+                    // README.md next to this config file
+                    src: path.resolve(__dirname, 'README.md'),
+                    // your stencil dist folder
+                    dest: path.resolve(__dirname, '../../dist/packages/components'),
+                },
+                {
+                    // README.md next to this config file
+                    src: path.resolve(__dirname, 'LICENSE'),
+                    // your stencil dist folder
+                    dest: path.resolve(__dirname, '../../dist/packages/components'),
+                }
+            ]
+        },
+        {
+            type: 'docs-readme',
+        },
+        {
+            type: 'www',
+            serviceWorker: null, // disable service workers if not needed
+        },
+        {
+            type: 'dist-hydrate-script',
+            dir: 'dist/hydrate',
+        },
+        {
+            type: 'dist-custom-elements',
+            includeGlobalScripts: false
+        },
+        reactOutputTarget({
+            componentCorePackage: '@ebrains/components',
+            proxiesFile: '../../../packages/react/src/components.ts',
+            includeDefineCustomElements: true
+        }),
+        vueOutputTarget({
+            componentCorePackage: '@ebrains/components',
+            proxiesFile: '../../../packages/vue/src/generated/components.ts',
+            //includeImportCustomElements: true,
+            includeDefineCustomElements: true, //not use to build it
+        }),
+        angularOutputTarget({
+            componentCorePackage: '@ebrains/components',
+            outputType: 'standalone',
+            directivesProxyFile: '../../../packages/angular/src/generated/components.ts',
+            directivesArrayFile: '../../../packages/angular/src/generated/index.ts',
+        }),
+    ],
+    plugins: [
+        inlineSvg(),
+        //nodePolyfills(),
+    ],
+    devServer: {
+        port: 3333, // Set the port to 3333
+    },
+};

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

@@ -1,5 +1,5 @@
 /**
- * `EdsAvatar` is a versatile component for displaying user profile representations, including initials or profile pictures.
+ * `EdsAvatar` is a component for displaying user profile representations, including initials or profile pictures.
  * This component is customizable to adapt to various styles and use cases.
  *
  * Key features include:
@@ -8,7 +8,6 @@
  * - Customizable background color, including gradient options.
  * - Configurable shape (rounded or square) and font strength for initials.
  *
- * The avatar component offers flexibility for different user profile displays, supporting use cases from contact lists to detailed profile views.
  */
 export declare class EdsAvatar {
     /**
@@ -28,9 +27,9 @@ export declare class EdsAvatar {
      */
     initials?: string;
     /**
-     * Background color variant for the avatar, which can apply specific gradient or background colors.
+     * Background color: 'grey' for grey background, 'black' for black background with accent text.
      */
-    color?: string;
+    color: 'grey' | 'black';
     /**
      * Flag to render the avatar with rounded (pill) shape if `true`.
      */

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

@@ -15,7 +15,8 @@ declare const _default: {
             control: string;
         };
         color: {
-            control: string;
+            type: string;
+            options: string[];
         };
     };
     args: {

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

@@ -1,15 +1,10 @@
 /**
  * `EdsBlockBreak` is a divider component designed to render a horizontal line that separates content visually.
- * This component includes customizable styling options to adapt to various layouts and design needs.
- *
- * Key features include:
- * - Configurable additional classes for styling through the `extraClass` prop.
- * - Suitable for dividing sections or breaking content blocks within a page.
  */
 export declare class EdsBlockBreak {
     /**
-     * Additional classes for styling the component.
+     * Whether to use the inverse break style
      */
-    extraClass: string;
+    inverse: boolean;
     render(): any;
 }

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

@@ -68,7 +68,6 @@ export declare class EdsButton {
      */
     el: HTMLElement;
     private button;
-    private iconCva;
     private parentContext;
     handleParentContext(event: CustomEvent): void;
     private handleClick;

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

@@ -14,11 +14,6 @@ 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`.

package/dist/types/components/eds-charts/eds-gauge/eds-gauge.d.ts

@@ -0,0 +1,14 @@
+export declare class EdsGauge {
+    /** Diameter of the pie chart (pixels) */
+    size: number;
+    /** Minimum value (gauge start) */
+    valueMin: number;
+    /** Maximum value (gauge end) */
+    valueMax: number;
+    /** Current value */
+    value: number;
+    /** Thickness of inner mask as fraction of radius (0.1–0.2). Values outside this range will be clamped. */
+    thickness: number;
+    variant: 'default' | 'dark' | 'strong' | 'black';
+    render(): any;
+}

package/dist/types/components/eds-charts/eds-gauge/eds-gauge.stories.d.ts

@@ -0,0 +1,52 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        size: {
+            control: string;
+            description: string;
+        };
+        valueMin: {
+            control: string;
+            description: string;
+        };
+        valueMax: {
+            control: string;
+            description: string;
+        };
+        value: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+            };
+            description: string;
+        };
+        thickness: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        variant: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+    };
+    args: {
+        size: number;
+        valueMin: number;
+        valueMax: number;
+        value: number;
+        thickness: number;
+        variant: string;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};

package/dist/types/components/eds-charts/eds-pie/eds-pie.d.ts

@@ -0,0 +1,28 @@
+interface PieSlice {
+    id: string;
+    value: number;
+    label: string;
+    color?: string;
+}
+type DisplayMode = 'value' | 'percent';
+export declare class EdsPie {
+    /** Diameter in pixels */
+    size: number;
+    /** Array or JSON string of slices */
+    slices: PieSlice[] | string;
+    /** Inner-radius fraction (always 0.5-1) */
+    thickness: number;
+    /** Show raw value or percentage */
+    display: DisplayMode;
+    /** Show legend */
+    legend: boolean;
+    /** Color scheme: semantic, brand, or mono */
+    colorScheme: 'semantic' | 'mono';
+    private static MAX_SLICES;
+    private static PALETTES;
+    private parseSlices;
+    private polarToCartesian;
+    private describeArc;
+    render(): any;
+}
+export {};

package/dist/types/components/eds-charts/eds-pie/eds-pie.stories.d.ts

@@ -0,0 +1,60 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        size: {
+            control: string;
+            description: string;
+        };
+        slices: {
+            control: string;
+            description: string;
+        };
+        thickness: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        display: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        legend: {
+            control: string;
+            description: string;
+        };
+        colorScheme: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+    };
+    args: {
+        size: number;
+        slices: {
+            id: string;
+            value: number;
+            label: string;
+        }[];
+        thickness: number;
+        display: string;
+        legend: boolean;
+        colorScheme: string;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};
+export declare const Thickness: {
+    render: (args: any) => string;
+    args: {
+        size: number;
+        thickness: number;
+    };
+};

package/dist/types/components/eds-input-elements/eds-input-select/eds-input-select.d.ts

@@ -1,133 +1,35 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 /**
- * A custom select input component that supports both static and dynamic options.
- *
- * Options can be provided in two formats:
- * 1. Dynamic fetch configuration:
- *    [
- *      { endpoint: "http://localhost/api/applications", value: "_id", label: "title" }
- *    ]
- * 2. Static options:
- *    [
- *      { value: "react", label: "React" },
- *      { value: "angular", label: "Angular" },
- *      { value: "vue", label: "Vue.js" },
- *      // etc.
- *    ]
- *
- * The component will automatically fetch data if a dynamic configuration is provided.
+ * `eds-input-select` is a lightweight, presentational select component.
+ * It accepts a static list of { value, label } options and emits a changeEvent when selection changes.
  */
 /**
  * @internal
  */
 export declare class EdsInputSelect {
-    /**
-     * Optional id for the input. If not provided, the component uses the `name` property.
-     */
+    /** Optional id for the select element; defaults to name */
     inputId?: string;
-    /**
-     * The name attribute of the select input. Also used as the fallback id.
-     */
+    /** Name attribute of the select */
     name: string;
-    /**
-     * Placeholder text (not used in the native select, but can be used for custom implementations).
-     */
+    /** Placeholder shown as a disabled hidden option */
     placeholder?: string;
-    /**
-     * If true, the select input will be disabled.
-     */
+    /** Disable the select */
     disabled: boolean;
-    /**
-     * If true, indicates that there is an associated message (help or error).
-     */
+    /** Show associated message (help or error) */
     hasMessage: boolean;
-    /**
-     * If true, the select input is in an error state.
-     */
+    /** Mark field as invalid */
     error: boolean;
-    /**
-     * If true, the select input is marked as required.
-     */
+    /** Mark field as required */
     required: boolean;
-    /**
-     * Options can be provided in two formats:
-     *
-     * 1. Dynamic fetch configuration:
-     *    [
-     *      { endpoint: "http://localhost/api/applications", value: "_id", label: "title" }
-     *    ]
-     *
-     * 2. Static options:
-     *    [
-     *      { value: "react", label: "React" },
-     *      { value: "angular", label: "Angular" },
-     *      { value: "vue", label: "Vue.js" },
-     *      // etc.
-     *    ]
-     */
-    options: {
-        [key: string]: any;
-    }[];
-    /**
-     * For static options, this property defines the key used to retrieve the display label.
-     */
-    labelKey: string;
-    /**
-     * For static options, this property defines the key used to retrieve the option value.
-     */
-    valueKey: string;
-    /**
-     * The currently selected value.
-     */
+    /** List of static options: { value, label } */
+    options: Array<{
+        value: string | number;
+        label: string;
+    }>;
+    /** Currently selected value */
     value?: string | number;
-    /**
-     * Holds the list of options to be rendered in the select. This can be either:
-     * - The static options passed in via the `options` prop.
-     * - Or the dynamically fetched options.
-     */
-    dynamicOptions: {
-        [key: string]: any;
-    }[];
-    /**
-     * Indicates whether the component is currently loading dynamic options.
-     */
-    loading: boolean;
-    /**
-     * Internal state that holds the key used to map the option's value.
-     */
-    dynamicValueKey: string;
-    /**
-     * Internal state that holds the key used to map the option's display label.
-     */
-    dynamicLabelKey: string;
-    /**
-     * Flag to indicate if dynamic options have already been fetched.
-     * Prevents duplicate API calls on subsequent updates.
-     */
-    hasFetched: boolean;
-    /**
-     * Emitted when the value of the select input changes.
-     * @event changeEvent
-     */
-    changeEvent: EventEmitter<string | number>;
-    componentWillLoad(): void;
-    /**
-     * Watches for changes in the `options` prop and loads the options accordingly.
-     *
-     * If the first object in the options array contains an "endpoint" key,
-     * the component will fetch options from the specified endpoint using the configured keys.
-     * Otherwise, it will treat the options as static.
-     *
-     * @async
-     */
-    loadOptions(): Promise<void>;
-    /**
-     * Event handler for the select input's change event.
-     * Emits the selected value.
-     *
-     * @param event The change event from the select input.
-     */
-    handleChange: (event: Event) => void;
-    getValueByPath(obj: any, path: any): any;
+    /** Emitted when selection changes */
+    edsselect: EventEmitter<string | number>;
+    private handleChange;
     render(): any;
 }

package/dist/types/components/eds-input-field/eds-input-field.d.ts

@@ -93,7 +93,13 @@ export declare class EdsInputField {
         value: string | number;
         label: string;
     }[];
+    /**
+     * Control whether the component emits value events (`oninput` / `onchange`).
+     * Defaults to `true`. Password fields are always suppressed for security.
+     */
+    exposeValueEvents: boolean;
     hostEl: HTMLElement;
+    private shouldEmitValue;
     private handleNativeInput;
     private handleNativeChange;
     get parsedOptions(): any;

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

@@ -9,24 +9,15 @@
  * This component is useful for displaying overlay content in a structured and accessible manner, with controls for dynamic visibility and content truncation.
  */
 export declare class EdsModal {
-    /**
-     * Controls whether the modal is open or closed.
-     */
-    isOpen: boolean;
     /**
      * The title of the modal.
      */
     heading: string;
     /**
-     * A boolean indicating whether the description should be truncated.
-     * Default is `true`.
-     */
-    truncate: boolean;
-    /**
-     * The number of lines to truncate the description to.
+     * The number of lines to truncate the title to.
      * Default is 3 lines.
      */
-    truncateLines: string;
+    truncate: 1 | 2 | 3 | 4;
     /**
      * Specifies the position of the modal.
      *
@@ -37,7 +28,16 @@ export declare class EdsModal {
      * - `"left"`: The modal is positioned on the left side of the viewport, centered vertically.
      * - `"right"`: The modal is positioned on the right side of the viewport, centered vertically.
      */
-    position: 'middle' | 'top' | 'bottom' | 'left' | 'right';
+    position: 'middle' | 'top' | 'bottom';
+    /**
+     * Whether to use the inverse header style
+     * (light text on strong background) instead of the default.
+     */
+    inverseHeader: boolean;
+    /**
+     * Controls whether the modal is open or closed.
+     */
+    isOpen: boolean;
     /**
      * Reference to the host element.
      */

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

@@ -12,10 +12,27 @@ declare const _default: {
             options: string[];
             description: string;
         };
+        truncate: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+            defaultValue: number;
+        };
+        inverseHeader: {
+            control: string;
+            description: string;
+            defaultValue: boolean;
+        };
     };
     args: {
         title: string;
         position: string;
+        truncate: number;
+        inverseHeader: boolean;
     };
 };
 export default _default;

package/dist/types/components/eds-progress-bar/eds-progress-bar.d.ts

@@ -1,8 +1,8 @@
 export declare class EdsProgressBar {
-    /**
-     * The progress value (0-100).
-     */
+    /** The progress value (0-100). */
     value: number;
+    /** Whether to render with rounded corners. */
+    rounded: boolean;
     /**
      * Method to update the progress value externally.
      * @param newValue The new progress value (0-100).

package/dist/types/components/eds-progress-bar/eds-progress-bar.stories.d.ts

@@ -10,6 +10,9 @@ declare const _default: {
             };
             description: string;
         };
+        rounded: {
+            control: string;
+        };
     };
     args: {
         value: number;

package/dist/types/components/eds-section/eds-section-core/eds-section-core.d.ts

@@ -8,6 +8,9 @@
  *
  * This component is suitable for organizing content into clearly defined sections with semantic HTML structure.
  */
+/**
+ * @internal
+ */
 export declare class EdsSectionCore {
     /**
      * The HTML tag to be used for the section. Can be either 'div' or 'section'.

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

@@ -19,7 +19,8 @@ export declare class EdsSwitch {
     /**
      * Emitted when the switch is toggled.
      */
-    toggle: EventEmitter<boolean>;
+    uiswitch: EventEmitter<boolean>;
+    el: HTMLElement;
     private toggleSwitch;
     render(): any;
 }

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

@@ -10,10 +10,6 @@ declare const _default: {
             control: string;
             description: string;
         };
-        endpoint: {
-            control: string;
-            description: string;
-        };
         rowsPerPage: {
             control: {
                 type: string;
@@ -80,13 +76,9 @@ export declare const Default: {
         rowsPerPage: number;
         paginationEnabled: boolean;
         searchEnabled: boolean;
-        endpoint: string;
         columnSize: string;
     };
 };
 export declare const WithEndpoint: {
     render: (args: any) => string;
-    args: {
-        endpoint: string;
-    };
 };

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

@@ -1,3 +1,6 @@
+/**
+ * @internal
+ */
 export declare class EdsTimeline {
     /**
      * Accepts a JSON string or object of timeline events.

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

@@ -9,9 +9,10 @@ export declare class EdsToast {
     intent: 'default' | 'success' | 'error' | 'warning';
     /**
      * Determines the duration before the toast auto-dismisses (in milliseconds).
-     * Defaults to 5000ms (5 seconds).
+     * If set, the toast will auto-dismiss and show a close button.
+     * If not set (or set to 0), it will persist without a close button.
      */
-    duration: number;
+    duration?: number;
     /**
      * Internal state to control visibility of the toast.
      */