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

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

@@ -1,80 +1,26 @@
-import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * `EdsUser` is a user authentication component for managing and displaying
- * the user's authentication state using Keycloak. It provides login and logout
- * functionality, displays a user dropdown menu when authenticated, and emits
- * authentication status changes.
+ * `EdsUser` is a user component for managing and displaying
+ * the user's auth information. Displays a user dropdown menu when authenticated.
  *
- * This component is ideal for embedding into any layout requiring secure user authentication, with built-in integration for Keycloak and optional login/logout functionality.
+ * This component is ideal for embedding into any layout requiring user authentication.
  */
 export declare class EdsUser {
-    /**
-     * The URL of the Keycloak server.
-     * This is the base URL where your Keycloak instance is hosted.
-     */
-    keycloakUrl: string;
-    /**
-     * The Keycloak Realm.
-     * A realm in Keycloak is a space where you manage a set of users, roles,
-     * groups, and credentials.
-     */
-    keycloakRealm: string;
-    /**
-     * The Keycloak Client ID.
-     * The client ID represents the client application that Keycloak protects.
-     * It's configured in the Keycloak admin console and used to identify the app
-     * requesting authentication.
-     * Example: `my-client-app`
-     */
-    keycloakClientId: string;
     /**
      * The user object containing user information.
-     * This is populated after a successful authentication.
-     */
-    user: any;
-    /**
-     * Indicates whether the user is authenticated.
-     * This is set to `true` if the user is successfully authenticated with Keycloak.
-     */
-    authenticated: boolean;
-    /**
-     * The username of the authenticated user.
-     * This is extracted from the `user` object after successful authentication.
-     */
-    username: string;
-    /**
-     * Indicates whether the Keycloak server is available.
-     */
-    serverAvailable: boolean;
-    /**
-     * Event emitted when the authentication status changes.
-     * It emits an object {authenticated, user} indicating the new authentication status and the user's information.
-     */
-    authStatusChanged: EventEmitter<{
-        authenticated: boolean;
-        user: any;
-    }>;
+     * */
+    user: {
+        email: string;
+        name: string;
+        given_name: string;
+        family_name: string;
+        preferred_username: string;
+    };
     hostEl: HTMLElement;
     /**
      * Lifecycle method that runs when the component is about to load.
      * It initializes authentication by calling the `initAuth` method.
      */
     componentWillLoad(): Promise<void>;
-    /**
-     * Initializes the Keycloak authentication by configuring Keycloak with the provided props.
-     * Sets the `authenticated` state and `user` data if the user is authenticated.
-     * Emits `authStatusChanged` event with the authentication status.
-     */
-    initAuth(): Promise<void>;
-    /**
-     * Handles user login by invoking the Keycloak `login` function.
-     * Only triggers login if the user is not already authenticated.
-     */
-    handleLogin: () => void;
-    /**
-     * Handles user logout by invoking the Keycloak `logout` function.
-     * Resets the `authenticated` state to `false` after logout.
-     */
-    handleLogout: () => Promise<void>;
+    private get initials();
     render(): any;
 }

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

@@ -0,0 +1,32 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        user: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        user: {
+            given_name: string;
+            family_name: string;
+            preferred_username: string;
+            name: string;
+            email: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => HTMLDivElement;
+    args: {
+        user: {
+            given_name: string;
+            family_name: string;
+            preferred_username: string;
+            name: string;
+            email: string;
+        };
+    };
+};

package/dist/types/shared-ui/examples/eds-app-root/eds-app-root.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @internal
+ */
+export declare class EdsAppRoot {
+    isAuthenticated: boolean;
+    combinedInitPromise: Promise<any>;
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/utils/api.d.ts

@@ -0,0 +1,5 @@
+export interface ApiOptions {
+    headers?: Record<string, string>;
+}
+export declare function get(url: string, options?: ApiOptions): Promise<any>;
+export declare function post(url: string, body: any, options?: ApiOptions): Promise<any>;

package/dist/types/utils/eds-form/formUtils.d.ts

@@ -0,0 +1,38 @@
+export interface PopulateInitOptions {
+    initData: any;
+    parsedFields: any[];
+    currentValues: {
+        [key: string]: any;
+    };
+    formEl: HTMLFormElement;
+    isFieldVisible: (field: any, values: {
+        [key: string]: any;
+    }) => boolean;
+}
+export interface PopulateDraftOptions {
+    draftData: any;
+    parsedFields: any[];
+    currentValues: {
+        [key: string]: any;
+    };
+    formEl: HTMLFormElement;
+    isFieldVisible: (field: any, values: {
+        [key: string]: any;
+    }) => boolean;
+}
+/**
+ * Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
+ */
+export declare function getFormInitData({ initData, parsedFields, currentValues, formEl, isFieldVisible }: PopulateInitOptions): {
+    updatedValues: {
+        [key: string]: any;
+    };
+};
+/**
+ * Updates state values based on draft data and, after a delay, updates the corresponding DOM inputs.
+ */
+export declare function getFormDraftData({ draftData, parsedFields, currentValues, formEl, isFieldVisible }: PopulateDraftOptions): {
+    updatedValues: {
+        [key: string]: any;
+    };
+};

package/dist/types/utils/eds-form/formValidators.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Finds the first input element for a given field name inside eds-input-field components.
+ */
+export declare function findFieldElement(formEl: HTMLFormElement, name: string): HTMLInputElement | null;
+/**
+ * Validates all fields and returns an object containing the errors and a flag indicating any errors.
+ */
+export declare function validateFormFields(parsedFields: any[], formEl: HTMLFormElement, values: {
+    [key: string]: any;
+}, isFieldVisible: (field: any, values: {
+    [key: string]: any;
+}) => boolean): {
+    errors: {
+        [key: string]: string[];
+    };
+    hasError: boolean;
+};

package/dist/types/utils/eds-form/individualValidator.d.ts

@@ -0,0 +1,3 @@
+export declare function validateField(name: string, value: string | number, type: string, required: boolean, maxLength?: number): string[];
+export declare function validateFieldGroup(name: string, required: boolean, formEl: HTMLFormElement): string[];
+export declare function validateSingleBox(name: string, required: boolean, formEl: HTMLFormElement): string[];

package/dist/types/utils/eds-form/validateInput.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Validates a field based on its type and returns an array of error messages.
+ * @param field - The field configuration object.
+ * @param value - The input value (if applicable).
+ * @param formEl - The form element used for DOM queries.
+ */
+export declare function validateInputField(field: any, value: string, formEl: HTMLFormElement): string[];
+export declare function isFieldVisible(field: any, values: {
+    [key: string]: any;
+}): boolean;

package/dist/types/utils/sharedUtils.d.ts

@@ -0,0 +1 @@
+export declare function parseData<T>(input: string | T[]): T[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebrains/components",
-  "version": "0.5.0-alpha.0",
+  "version": "0.7.0-alpha.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",
@@ -14,7 +14,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@ebrains/assets":"0.3.0-alpha.0",
-    "@ebrains/svgs":"0.3.0-alpha.0"
+    "@ebrains/assets":"0.4.0-alpha.0",
+    "@ebrains/svgs":"0.4.0-alpha.0"
   }
 }

package/dist/cjs/eds-accordion.cjs.entry.js

@@ -1,84 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-f08e4f5c.js');
-const analytics = require('./analytics-223ea8e5.js');
-
-const edsAccordionCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.min-h-36{min-height:2.25rem}.min-h-44{min-height:2.75rem}.min-h-56{min-height:3.5rem}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.relative{position:relative}.absolute{position:absolute}.inset-x-16{left:1rem;right:1rem}.top-16{top:1rem}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-md{border-radius:12px}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.text-light{color:var(--grey-700)}.z-1{z-index:1}.z-10{z-index:10}.effect-height{transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-property:height}.h-0{height:0rem}.h-auto{height:auto}.pt-20{padding-top:1.25rem}.overflow-hidden{overflow:hidden}.grid{display:grid}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-16{padding:1rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.text-left{text-align:left}.text-center{text-align:center}";
-const EdsAccordionStyle0 = edsAccordionCss;
-
-const EdsAccordion = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.accordionChange = index.createEvent(this, "accordionChange", 7);
-        /**
-         * Handles the click event on the accordion header to toggle expansion.
-         * Toggles the `isExpanded` state and emits the `accordionChange` event.
-         */
-        this.handleClick = () => {
-            var _a;
-            this.isExpanded = !this.isExpanded;
-            this.accordionChange.emit(this.isExpanded);
-            this.setPanelHeight();
-            analytics.sendAnalytics({
-                category: 'ui-component',
-                parentContext: null,
-                tag: this.el.tagName.toLowerCase(),
-                name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
-                action: this.isExpanded ? 'expanded' : 'collapsed'
-            });
-        };
-        /**
-         * Calculates and sets the panel height based on the content height
-         * and adjusts based on the `shortContent` and `isExpanded` states.
-         */
-        this.setPanelHeight = () => {
-            if (this.childContentRef) {
-                this.shortContent =
-                    this.wrapperRef.scrollWidth > 830 && !this.description
-                        ? this.childContentRef.scrollHeight <= 80
-                        : this.childContentRef.scrollHeight <= 20;
-                this.panelHeight = this.isExpanded && !this.shortContent ? this.childContentRef.scrollHeight : 0;
-            }
-        };
-        this.title = undefined;
-        this.description = undefined;
-        this.switchBg = true;
-        this.expanded = false;
-        this.clampText = true;
-        this.minHeightContent = false;
-        this.isExpanded = this.expanded;
-        this.panelHeight = 0;
-        this.shortContent = false;
-    }
-    /**
-     * Lifecycle method that sets up the initial panel height and adds a resize event listener
-     * to recalculate height on window resize.
-     */
-    componentDidLoad() {
-        this.setPanelHeight();
-        window.addEventListener('resize', this.setPanelHeight);
-    }
-    /**
-     * Lifecycle method that cleans up the resize event listener when the component is removed.
-     */
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.setPanelHeight);
-    }
-    /**
-     * Renders the accordion structure, including header, content, description, and any slotted content.
-     * Adjusts styles based on `switchBg`, `tiny`, `clampText`, and other props.
-     */
-    render() {
-        const minHeightContentClass = this.minHeightContent ? 'min-h-56' : '';
-        return (index.h("div", { key: '00bd9a34ceb469bef74c827bd1f48bf3d4b545b6', ref: (el) => (this.wrapperRef = el), class: `container flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
-          ${this.switchBg && this.isExpanded ? 'bg-inverse' : 'bg-default'} 
-          ${this.switchBg ? 'hover:bg-inverse' : ''} 
-          ${minHeightContentClass}` }, index.h("h3", { key: 'ab6a953797e0a8379a01a9a2f00a4988d4fc8357', class: "mr-auto f-heading-06 text-left absolute inset-x-16 top-16 line-clamp-1" }, this.title), index.h("div", { key: 'cfd6f4ad2ec5e412cdf2348d188dfcf90770012d', class: "ml-auto" }, index.h("eds-button", { key: 'beaee69d610727b397645fc0a507b234003fde5e', id: "toggleAccordion", intent: "tertiary", "aria-expanded": this.isExpanded || this.shortContent, "aria-label": "Toggle accordion", "aria-controls": "accordionSection", class: `effect-color flex w-full items-center justify-between rounded-md outline-none focus:outline-none`, onClick: this.handleClick, icon: "chevron-down" })), index.h("div", { key: '795f14c0930a0b0862a86451cc7b7e807cb79c37', class: `w-full` }, this.description ? (index.h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, index.h("section", { key: '28f6cba233cdee58743faaacc992bf7497c2ff2e', id: "accordionSection", role: "region", "aria-labelledby": "accordionHeader", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, index.h("div", { key: '939e442c55babfd3f1750d20d9b95f664c3a67c8', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-20`, "aria-hidden": !this.isExpanded }, index.h("span", { key: '648d16ed84cb3da227a10e6370004c6479789aed', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, index.h("slot", { key: '90ca94f15e408b4b05c0eac4bd20fa21766cbb19' })))))));
-    }
-    get el() { return index.getElement(this); }
-};
-EdsAccordion.style = EdsAccordionStyle0;
-
-exports.eds_accordion = EdsAccordion;