@ebrains/components 0.7.0-alpha.0 → 0.8.0-alpha.0

package/dist/stencil.config.js

@@ -3,12 +3,7 @@ import { vueOutputTarget } from "@stencil/vue-output-target";
 import { angularOutputTarget } from "@stencil/angular-output-target";
 import { inlineSvg } from "stencil-inline-svg";
 export const config = {
-    env: {
-        STORYBOOK_URL: process.env.NX_STORYBOOK_URL,
-        KEYCLOAK_URL: process.env.NX_KEYCLOAK_URL,
-        KEYCLOAK_REALM: process.env.NX_KEYCLOAK_REALM,
-        KEYCLOAK_CLIENT_ID: process.env.NX_KEYCLOAK_CLIENT_ID,
-    },
+    env: {},
     namespace: 'components',
     //taskQueue: 'async',
     sourceMap: false,
@@ -50,7 +45,7 @@ export const config = {
         }),
         angularOutputTarget({
             componentCorePackage: '@ebrains/components',
-            //outputType: 'standalone',
+            outputType: 'standalone',
             directivesProxyFile: '../../../packages/angular/src/generated/components.ts',
             directivesArrayFile: '../../../packages/angular/src/generated/index.ts',
         }),

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

@@ -33,20 +33,22 @@ export declare class EdsAccordion {
     @Prop() tiny: boolean = false;*/
     /** Clamps the text when the accordion is collapsed to prevent overflow */
     clampText: boolean;
-    /** Applies a minimum height to the content area for consistent spacing */
-    minHeightContent: boolean;
     /** Internal state to track if the accordion is expanded */
     isExpanded: boolean;
     /** Internal state to dynamically set the panel height for proper expansion and collapse */
     panelHeight: number;
     /** Tracks if the content is considered "short" based on the current layout */
     shortContent: boolean;
+    /** Holds the height of the header (<h3>) element */
+    headerHeight: number;
     /** Event emitted when the accordion toggles, indicating the new expanded/collapsed state */
     accordion: EventEmitter<boolean>;
     /** Reference to the wrapper element for the accordion */
     private wrapperRef;
     /** Reference to the element containing the main content */
     private childContentRef;
+    /** Reference to the header element (h3) */
+    private headerRef;
     /**
      * Lifecycle method that sets up the initial panel height and adds a resize event listener
      * to recalculate height on window resize.

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

@@ -48,7 +48,7 @@ export declare const Default: {
         minHeightContent: boolean;
     };
 };
-export declare const SlotComponent: {
+export declare const WithEdsAlert: {
     render: (args: any) => string;
     args: {
         title: string;

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

@@ -31,6 +31,11 @@ export declare class EdsAlert {
      * The visual intent or style of the alert, indicating the alert type.
      */
     intent: 'default' | 'warning' | 'error' | 'success';
+    /**
+     * The border style of the alert. Defaults to "rounded" (rounded borders).
+     * Set to "normal" to have non-rounded (square) borders.
+     */
+    brd: 'rounded' | 'normal';
     withBtn: boolean;
     /**
      * Reference to the host element.

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

@@ -16,6 +16,11 @@ declare const _default: {
             options: string[];
             description: string;
         };
+        brd: {
+            control: string;
+            options: string[];
+            description: string;
+        };
         pressableLabel: {
             control: string;
             description: string;
@@ -29,6 +34,7 @@ declare const _default: {
         message: string;
         intent: string;
         direction: string;
+        brd: string;
         pressableLabel: string;
         pressableUrl: string;
     };
@@ -40,6 +46,7 @@ export declare const Default: {
         message: string;
         intent: string;
         direction: string;
+        brd: string;
         pressableLabel: string;
         pressableUrl: string;
     };

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

@@ -34,11 +34,9 @@ export declare class EdsAvatar {
     /**
      * Flag to render the avatar with rounded (pill) shape if `true`.
      */
-    rounded: boolean;
     /**
      * Determines if the initials should use a stronger (larger) font style.
      */
-    initialsStrong: boolean;
     /**
      * Computed initials based on the provided `initials` prop or derived from `firstName` and `lastName`.
      * @returns {string | undefined} Initials for display in the avatar.

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

@@ -17,12 +17,6 @@ declare const _default: {
         color: {
             control: string;
         };
-        rounded: {
-            control: string;
-        };
-        initialsStrong: {
-            control: string;
-        };
     };
     args: {
         firstName: string;
@@ -30,8 +24,6 @@ declare const _default: {
         picture: string;
         initials: string;
         color: string;
-        rounded: boolean;
-        initialsStrong: boolean;
     };
 };
 export default _default;
@@ -40,6 +32,5 @@ export declare const Default: {
     args: {
         firstName: string;
         lastName: string;
-        rounded: boolean;
     };
 };

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

@@ -5,7 +5,6 @@ declare const _default: {
         items: {
             control: string;
             description: string;
-            defaultValue: string;
         };
         intent: {
             control: string;
@@ -15,7 +14,10 @@ declare const _default: {
         };
     };
     args: {
-        items: string;
+        items: {
+            label: string;
+            url: string;
+        }[];
         intent: string;
     };
 };
@@ -23,7 +25,10 @@ export default _default;
 export declare const Default: {
     render: (args: any) => string;
     args: {
-        items: string;
+        items: {
+            label: string;
+            url: string;
+        }[];
         intent: string;
     };
 };

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

@@ -6,6 +6,9 @@
  * whether or not the text is truncated and to how many lines.
  *
  */
+/**
+ * @internal
+ */
 export declare class EdsCardDesc {
     /**
      * The description text to be displayed inside the card.

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

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

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

@@ -2,9 +2,22 @@
  * @internal
  */
 export declare class EdsInputLabel {
+    /**
+     * The text content of the label.
+     */
     label: string;
+    /**
+     * The value that associates the label to a form control.
+     * This value should match the `id` of the input element.
+     */
     name: string;
+    /**
+     * Indicates whether the associated form control is required.
+     */
     required: boolean;
+    /**
+     * Indicates whether the associated form control is disabled.
+     */
     disabled: boolean;
     render(): any;
 }

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

@@ -5,12 +5,33 @@
  * @internal
  */
 export declare class EdsInputRange {
+    /**
+     * The name attribute for the input element.
+     */
     name: string;
+    /**
+     * Optional id for the input; defaults to 'range'.
+     */
     inputId?: string;
+    /**
+     * If true, the slider will be disabled.
+     */
     disabled: boolean;
+    /**
+     * If true, the slider is marked as required.
+     */
     required: boolean;
+    /**
+     * Minimum value for the slider.
+     */
     min: number;
+    /**
+     * Maximum value for the slider.
+     */
     max: number;
+    /**
+     * Step for the slider.
+     */
     step: number;
     sliderVal: number;
     /**

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

@@ -7,13 +7,44 @@ import { EventEmitter } from '../../../stencil-public-runtime';
  * @internal
  */
 export declare class EdsInputSearch {
+    /**
+     * The name attribute for the input element.
+     */
     name: string;
+    /**
+     * The id attribute for the input element.
+     * Defaults to 'search-main' if not provided.
+     */
     inputId?: string;
+    /**
+     * Placeholder text for the search input.
+     */
     placeholder: string;
+    /**
+     * The value of the search input.
+     */
     value?: string;
+    /**
+     * If true, the search input will be disabled.
+     */
     disabled: boolean;
+    /**
+     * If true, the search input is marked as required.
+     */
     required: boolean;
+    /**
+     * Additional CSS classes for styling the input.
+     */
     decorate: string;
+    /**
+     * Accessible label for the search input.
+     * This is used for screen readers.
+     */
+    label: string;
+    /**
+     * Event emitted when the search input changes.
+     * Contains the event type ('change') and the current input value.
+     */
     search: EventEmitter<{
         event: 'input' | 'change';
         value: any;
@@ -23,7 +54,15 @@ export declare class EdsInputSearch {
      */
     el: HTMLElement;
     private inputElement;
+    /**
+     * Keydown event listener to detect Command+K (Mac) or Ctrl+K (Windows/Linux)
+     * and focus the input element when triggered.
+     *
+     * @param e - The keyboard event.
+     */
+    private keydownListener;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
     getInputElement(): Promise<HTMLInputElement>;
     onChange: (e: any) => void;
     render(): any;

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

@@ -18,13 +18,6 @@ declare const _default: {
             control: string;
             description: string;
         };
-        mode: {
-            control: {
-                type: string;
-            };
-            options: string[];
-            description: string;
-        };
         prevLabel: {
             control: string;
             description: string;
@@ -59,7 +52,6 @@ declare const _default: {
         lastPage: number;
         perPage: number;
         total: number;
-        mode: string;
         prevLabel: string;
         nextLabel: string;
         prevUrl: string;

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

@@ -27,6 +27,23 @@ export declare class EdsSteps {
      * Emits when a step is clicked, providing the step's index.
      */
     step: EventEmitter<number>;
+    /**
+     * Reference to the host element.
+     */
+    el: HTMLElement;
+    /**
+     * Lifecycle method that runs when the component has fully loaded.
+     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
+     */
+    componentDidLoad(): void;
+    activeStepChanged(newValue: number): 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 handleStepClick;
     /**
      * Parse the JSON string into an array of steps.

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

@@ -38,7 +38,7 @@ export declare class EdsTable {
      */
     columnSize?: 'default' | 'medium' | 'large';
     /** Internal state for pagination and data */
-    tableData: {
+    tbData: {
         [key: string]: any;
     }[];
     columns: string[];
@@ -51,12 +51,16 @@ export declare class EdsTable {
     };
     totalRows: number;
     searchQuery: string;
+    containerWidth: number;
     hostEl: HTMLElement;
     handleDataChange(): void;
     handleConfigChange(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
+    disconnectedCallback(): void;
+    private handleResize;
+    private updateContainerWidth;
     private parseData;
     private parseConfig;
     private fetchData;