@ebrains/components 0.8.0-alpha.0 → 0.9.0-beta

package/dist/types/eds-docs-ui/colors/color-palette/support.d.ts

@@ -3,5 +3,6 @@
  */
 export declare class ColorSupportPalette {
     private colors;
+    private getTextColor;
     render(): any;
 }

package/dist/types/eds-docs-ui/{eds-logo-variations/eds-logo-variations.d.ts → components-section/components-section.d.ts}

@@ -1,7 +1,7 @@
 /**
  * @internal
  */
-export declare class EdsLogoVariations {
+export declare class ComponentsSection {
     /** Active tab index to determine the content to display */
     tabIndex: number;
     renderContent(): any;

package/dist/types/eds-docs-ui/components-section/functional/angular.d.ts

@@ -0,0 +1,2 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+export declare const DocsAngular: FunctionalComponent;

package/dist/types/eds-docs-ui/components-section/functional/installation.d.ts

@@ -0,0 +1,2 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+export declare const DocsInstallation: FunctionalComponent;

package/dist/types/eds-docs-ui/components-section/functional/overview.d.ts

@@ -0,0 +1,2 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+export declare const DocsOverview: FunctionalComponent;

package/dist/types/eds-docs-ui/components-section/functional/react.d.ts

@@ -0,0 +1,2 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+export declare const DocsReact: FunctionalComponent;

package/dist/types/eds-docs-ui/components-section/functional/usage.d.ts

@@ -0,0 +1,2 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+export declare const DocsUsage: FunctionalComponent;

package/dist/types/eds-docs-ui/components-section/functional/vue.d.ts

@@ -0,0 +1,2 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+export declare const DocsVue: FunctionalComponent;

package/dist/types/eds-docs-ui/{eds-docs-tokens/eds-docs-tokens.d.ts → design-tokens/docs-tokens/docs-tokens.d.ts}

@@ -1,7 +1,7 @@
 /**
  * @internal
  */
-export declare class EdsDocsContent {
+export declare class DocsContent {
     /** Active tab index to determine the content to display */
     tabIndex: number;
     renderContent(): any;

package/dist/types/eds-docs-ui/{eds-docs-palettes/eds-docs-palettes.d.ts → docs-palettes/docs-palettes.d.ts}

@@ -1,7 +1,7 @@
 /**
  * @internal
  */
-export declare class EdsDocsPalettes {
+export declare class DocsPalettes {
     /** Active tab index to determine the content to display */
     tabIndex: number;
     renderContent(): any;

package/dist/types/eds-docs-ui/{eds-components-section/eds-components-section.d.ts → logo/logo-variations-tabs/logo-variations.d.ts}

@@ -1,7 +1,7 @@
 /**
  * @internal
  */
-export declare class EdsComponentsSection {
+export declare class LogoVariationsTabs {
     /** Active tab index to determine the content to display */
     tabIndex: number;
     renderContent(): any;

package/dist/types/eds-docs-ui/{eds-svg-repository/eds-svg-repository.d.ts → svg-repository/svg-repository.d.ts}

@@ -1,7 +1,7 @@
 /**
  * @internal
  */
-export declare class EdsSvgRepository {
+export declare class SvgRepository {
     hostEl: HTMLElement;
     private getSvgData;
     get hostWidth(): number;

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

@@ -92,6 +92,7 @@ export declare class EdsForm {
         [key: string]: any;
     }): void;
     getFormData(): FormData;
+    makeFormData(): FormData;
     handleChange(e: Event, field: any): void;
     handleInput(e: Event, field: any): void;
     handleSubmit(): void;

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

@@ -12,13 +12,20 @@
  *
  * Ideal for showcasing embedded content within an application, especially when previewing external resources.
  */
+/**
+ * @internal
+ */
 export declare class EdsFrame {
     /**
      * The label displayed at the top left of the frame.
      */
     frameLabel: string;
     /**
-     * The label for the external link at the top right of the frame. Defaults to 'Open in Storybook'.
+     * The frame src url to be displayed.
+     */
+    frameSrc: string;
+    /**
+     * The label for the external link at the top right of the frame. Defaults to 'Open'.
      */
     urlLabel?: string;
     /**
@@ -26,13 +33,9 @@ export declare class EdsFrame {
      */
     errorMessage?: string;
     /**
-     * The base URL of the Storybook instance.
-     */
-    storybookUrl: string;
-    /**
-     * The story path identifier used to generate the iframe URL.
+     * The base URL of the external reference.
      */
-    storyPath: string;
+    url: string;
     /**
      * The intent for styling the link (e.g., primary, secondary, tertiary, etc.).
      */
@@ -56,7 +59,5 @@ export declare class EdsFrame {
     private articleClasses;
     private getFrameHeight;
     private checkIframeAvailability;
-    private get storyLink();
-    private get frameSrc();
     render(): any;
 }

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

@@ -6,15 +6,15 @@ declare const _default: {
             control: string;
             description: string;
         };
-        urlLabel: {
+        frameSrc: {
             control: string;
             description: string;
         };
-        storybookUrl: {
+        urlLabel: {
             control: string;
             description: string;
         };
-        storyPath: {
+        url: {
             control: string;
             description: string;
         };

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

@@ -1,4 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @internal
+ */
 export declare class EdsLogin {
     /**
      * The URL of the Keycloak server.

package/dist/types/shared-ui/eds-splash-screen/eds-splash-screen.d.ts

@@ -25,6 +25,8 @@ export declare class EdsSplashScreen {
         message: string;
     }>;
     componentWillLoad(): void;
+    watchInitPromise(newPromise: Promise<any>): Promise<void>;
+    private handleInitPromise;
     handleHideSplash(): void;
     private hideSplash;
     render(): any;

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

@@ -23,7 +23,7 @@ export interface PopulateDraftOptions {
 /**
  * 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): {
+export declare function getFormInitData({ initData, parsedFields, currentValues }: PopulateInitOptions): {
     updatedValues: {
         [key: string]: any;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebrains/components",
-  "version": "0.8.0-alpha.0",
+  "version": "0.9.0-beta",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",
@@ -8,13 +8,13 @@
   "types": "./dist/types/index.d.ts",
   "collection": "./dist/collection/collection-manifest.json",
   "collection:main": "./dist/collection/index.js",
-  "unpkg": "./dist/components/components.js",
+  "unpkg": "./dist/components/components.esm.js",
   "files": [
     "dist/",
     "loader/"
   ],
   "dependencies": {
-    "@ebrains/assets":"0.5.0-alpha.0",
-    "@ebrains/svgs":"0.5.0-alpha.0"
+    "@ebrains/assets":"0.6.0-beta",
+    "@ebrains/svgs":"0.6.0-beta"
   }
 }

package/README.md

@@ -1,370 +0,0 @@
-# How to run components package
-
-
-## Test it locally
-
-Update the `index.html` that is found under the components package with the components you want to test. 
-
-```bash
-nx serve components
-```
-
-Then: `http://localhost:3333/`
-
-
-## Build it 
-
-```bash
-nx build components
-```
-
-It produces the packages below: 
-- react 
-- vue
-- angular 
-
-## Unit tests 
-
-```bash
-nx test components
-```
-
-## E2E tests 
-
-```bash
-nx e2e components
-```
-
-## Lint components 
-
-```bash
-nx lint components
-```
-
-## Storybook components 
-
-```bash
-nx storybook components
-```
-
-
-## Using in Standalone Apps (no NX application)
-
-### React 
-
-1. install `npm install @ebrains/components`
-
-2. Depending now on the configuration and bundling of your REACT application importing it as:
-
-`import { EdsFooter } from '@ebrains/react'`
-
-could work. 
-
-However, react wrappers internally make use of the `@ebrains/components/loader` to properly work. Thats been said it might be that to RESOLVE the path to the `node_modules/@ebrains/components` -> `@ebrains/components/loader` to point to `@ebrains/components/loader/index.js` using your bundler like `webpack` for instance that would be 
-
-`resolve alias` like below:
-
-```
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-module.exports = {
-  entry: './src/index.tsx',
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'bundle.js',
-  },
-  resolve: {
-    alias: {
-      '@ebrains/components/loader': '@ebrains/components/loader/index.js',
-    },
-    extensions: ['.js', '.jsx', '.ts', '.tsx', '.mjs'],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'babel-loader',
-        exclude: /node_modules/,
-      },
-    ],
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: './public/index.html',
-    }),
-  ],
-  devServer: {
-    static: './dist',
-    port: 3333,
-  },
-};
-```
-
-#### Example App.js
-
-```
-import React from "react";
-
-import { EdsHeader, EdsFooter, EdsLink, EdsToastManager } from "@ebrains/react";
-
-const App = () => {
-  return (
-    <div>
-      <EdsToastManager></EdsToastManager>
-      <EdsHeader
-        home-url="/"
-        user-feature={true}
-        keycloak-url="http://localhost:8080"
-        keycloak-realm="nigeor-realm"
-        keycloak-client-id="stencil-app"
-        links='[
-                    { "label": "About", "url": "/about" },
-                    { "label": "Focus Areas", "url": "/focus-areas" },
-                    { "label": "News & Events", "url": "/news-and-events" },
-                    { "label": "Contact", "url": "/contact" }
-                ]'
-      ></EdsHeader>
-      <img src="https://unpkg.com/@ebrains/svgs/src/img/loader.svg" />
-      <h1>Hello, React with TypeScript!</h1>
-      <EdsLink
-        label="Hello there this is a web component"
-        intent="primary"
-        icon="loader"
-      ></EdsLink>
-      <EdsFooter />
-    </div>
-  );
-};
-
-export default App;
-```
-
-### No framework used in this application - pure html/css/js
-
-```npx serve -l 3333```
-
-#### using npm 
-
-`npm init -y`
-
-to init the workspace and the `package.json`
-
-#### install @ebrains/component and use them like 
-
-```
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simple Web App</title>
-    <!--<script defer type="module" src="https://unpkg.com/nigeor-test-stencil@1.1.5"></script>-->
-  <link rel="stylesheet" href="./node_modules/@ebrains/assets/styles/output.css">
-
-  <script type="module">
-    import {defineCustomElements} from "./node_modules/@ebrains/components/loader/index.js";
-    defineCustomElements(window);
-  </script>
-
-</head>
-<body>
-    <eds-header home-url="/"></eds-header>
-    <eds-link label="No framework at  all" intent="primary" icon="chevron-right"></eds-link>
-    <h1>Hello, World!</h1>
-</body>
-</html>
-```
-
-#### Load from unpkg CDN directly like
-
-```
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simple Web App</title>
-    <!--<script defer type="module" src="https://unpkg.com/nigeor-test-stencil@1.1.5"></script>-->
-  <link rel="stylesheet" href="https://unpkg.com/@ebrains/assets/styles/output.css">
-
-  <script type="module">
-    import {defineCustomElements} from "https://unpkg.com/@ebrains/components/loader/index.js";
-    defineCustomElements(window);
-  </script>
-
-</head>
-<body>
-    <eds-header home-url="/"></eds-header>
-    <eds-link label="No framework at  all" intent="primary" icon="chevron-right"></eds-link>
-    <h1>Hello, World!</h1>
-</body>
-</html>
-``` 
-
-Just make sure to wait loading the html until components are fully loaded. that could be using a spinner (asyn/wait)
-
-
-#### Load the .esm.js directly 
-
-Another way to load the web-components is to use direclty the `components.esm.js` module 
-
-```
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Simple Web App</title>
-
-    <link rel="stylesheet" href="style.css" />
-    <script
-      type="module"
-      src="./node_modules/@ebrains/components/dist/components/components.esm.js"
-    ></script>
-  </head>
-  <body>
-    <eds-toast-manager></eds-toast-manager>
-    <eds-header
-      home-url="/"
-      user-feature="true"
-      keycloak-url="http://localhost:8080"
-      keycloak-realm="nigeor-realm"
-      keycloak-client-id="stencil-app"
-      links='[
-        { "label": "About", "url": "/about" },
-        { "label": "Focus Areas", "url": "/focus-areas" },
-        { "label": "News & Events", "url": "/news-and-events" },
-        { "label": "Contact", "url": "/contact" }
-      ]'
-    ></eds-header>
-    <h1>Hello, World!</h1>
-  </body>
-</html>
-```
-
-#### Load the style from your global css 
-
-style.css
-```
-@import url("https://unpkg.com/@ebrains/assets/styles/output.css");
-```
-
-```
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simple Web App</title>
-
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-    <eds-header home-url="/"></eds-header>
-    <h1>Hello, World!</h1>
-</body>
-</html>
-```
-
-#### Load an SVG 
-
-The best way to load an SVG file is loading directly from unpck CDN 
-
-```
-<img src="https://unpkg.com/@ebrains/svgs/src/img/logo/vLogoBlack.svg" />
-```
-
-or using the UI component direclty:
-
-```
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Simple Web App</title>
-
-    <link rel="stylesheet" href="style.css" />
-    <script
-      type="module"
-      src="https://unpkg.com/@ebrains/components/dist/components/components.esm.js"
-    ></script>
-  </head>
-  <body>
-    <eds-img src="https://unpkg.com/@ebrains/svgs/src/img/eu.svg" ></eds-img>
-  </body>
-</html>
-```
-
-Make sure again to wait for the request to be served!
-
-
-### Vue App 
-
-In your `App.vue` do:
-
-```
-<template>
-  <h1 className="f-heading-02">Vue App</h1>
-  <eds-header
-    home-url="https://ebrains.eu"
-    user-feature="true"
-    links='[
-        { "label": "Aboutt", "url": "/about" },
-        { "label": "Focus Areas", "url": "/focus-areas" },
-        { "label": "News & Events", "url": "/news-and-events" },
-        { "label": "Contact", "url": "/contact" }
-      ]'
-  ></eds-header>
-</template>
-
-<script>
-  import { EdsHeader } from '@ebrains/vue';
-
-  export default {
-    name: 'App',
-    components: {
-      EdsHeader
-    },
-    mounted() {
-      console.log('process.env:', process.env); // Log process.env
-      
-      //renderWebComponents(testCmps, 'root');
-    },
-  };
-</script>
-
-```
-
-
-### Angular App
-
-To get started, first install our Web Components package:
-
-`npm install @ebrains/components`
-
-Before you can use the Web Components in Angular, you must import and add Angular’s `CUSTOM_ELEMENTS_SCHEMA`. This allows the use of Web Components in HTML markup, without the compiler producing errors. The CUSTOM_ELEMENTS_SCHEMA needs to be included in any module that uses custom elements. Typically, this can be added to AppModule:
-
-```
-// Import custom elements schema
-import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
-
-@NgModule({
-  // ...
-  // Add custom elements schema to NgModule
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class AppModule { }
-```
-
-The final step is to load and register the components in the browser. @ebrains/components includes a main function that handles this. That function is called defineCustomElements() and it needs to be called once during the bootstrapping of your application. One convenient place to do this is in main.ts as such:
-
-// Import EBRAINS Web Components
-import { defineCustomElements } from "@ebrains/components/lib/loader";
-
-// Register EBRAINS Web Components
-defineCustomElements(window);
-Once included, components can be used in your HTML markup as in the following example:
-
-<eds-button label="Angular Button"></eds-button>