@ebrains/components 0.8.0-alpha.0 → 0.9.1-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-matomo-notice/eds-matomo-notice.d.ts

@@ -3,7 +3,7 @@ export declare class EdsMatomoNotice {
     /**
      * The title displayed in the notice.
      */
-    title: string;
+    heading: string;
     /**
      * The description displayed in the notice.
      */

package/dist/types/shared-ui/eds-social-networks/eds-social-networks.d.ts

@@ -6,7 +6,7 @@ export declare class EdsSocialNetworks {
     /**
      * Social Network custom title to display
      */
-    title: string;
+    heading: string;
     /**
      * Array of social network objects, each containing label, URL, and icon.
      * These are used to render the social network links.

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/shared-ui/eds-tabs/eds-tabs.d.ts

@@ -11,7 +11,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export declare class EdsTabs {
     el: HTMLElement;
     /** The Tabs identifier */
-    id: string;
+    identifier: string;
     /** Aria label for the navigation */
     navAriaLabel: string;
     /** JSON string for tabs data */

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.1-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.1-beta",
+    "@ebrains/svgs":"0.6.1-beta"
   }
 }

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

@@ -1,139 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2f63169d.js');
-const sharedUtils = require('./sharedUtils-8e287250.js');
-
-const edsBreadcrumbCss = "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}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.125rem * var(--tw-space-x-reverse));margin-left:calc(0.125rem * calc(1 - var(--tw-space-x-reverse)))}.px-2{padding-left:0.125rem;padding-right:0.125rem}.w-20{width:1.25rem}.w-28{width:1.75rem}.w-32{width:2rem}.w-44{width:2.75rem}.h-20{height:1.25rem}.h-24{height:1.5rem}.h-28{height:1.75rem}.h-32{height:2rem}@media (min-width: 750px){.md\\:block{display:block}}";
-const EdsBreadcrumbStyle0 = edsBreadcrumbCss;
-
-const EdsBreadcrumb = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * Updates the maximum number of visible items and tracks if the screen is small.
-         */
-        this.updateScreenSize = () => {
-            const width = window.innerWidth;
-            if (width < 769) {
-                this.maxVisibleItems = 3;
-                this.isSmallScreen = true;
-            }
-            else if (width <= 1024) {
-                this.maxVisibleItems = 3;
-                this.isSmallScreen = true;
-            }
-            else if (width <= 2200) {
-                this.maxVisibleItems = 4;
-                this.isSmallScreen = false;
-            }
-            else {
-                this.maxVisibleItems = 6;
-                this.isSmallScreen = false;
-            }
-        };
-        this.items = [];
-        this.intent = 'ghost';
-        this.parsedItems = [];
-        this.isSmallScreen = false;
-        this.maxVisibleItems = 6;
-    }
-    /**
-     * Watches for changes to the `items` prop and parses it.
-     */
-    parseItems(newValue) {
-        this.parsedItems = sharedUtils.parseData(newValue);
-    }
-    /**
-     * Lifecycle method that runs when the component is about to be loaded.
-     * It parses the initial `items` prop value.
-     */
-    componentWillLoad() {
-        this.parseItems(this.items);
-        this.updateScreenSize();
-        window.addEventListener('resize', this.updateScreenSize);
-    }
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.updateScreenSize);
-    }
-    /**
-     * Lifecycle method that runs when the component has fully loaded.
-     * It emits a custom event for each `eds-link` element contained within the breadcrumb.
-     */
-    componentDidLoad() {
-        var _a;
-        const links = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-link');
-        links === null || links === void 0 ? void 0 : links.forEach((link) => {
-            this.emitContext(link);
-        });
-    }
-    /**
-     * 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) {
-        const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.el.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        linkElement.dispatchEvent(event);
-    }
-    /**
-     * Returns breadcrumb items with potential truncation if there are too many.
-     * It inserts an ellipsis item where necessary.
-     */
-    getTruncatedItems() {
-        const totalItems = this.parsedItems.length;
-        const ellipsis = { label: '...', url: '', isHidden: true };
-        if (totalItems > this.maxVisibleItems) {
-            const firstItem = this.parsedItems[0];
-            const lastItems = this.parsedItems.slice(-2);
-            if (this.maxVisibleItems === 3) {
-                return [firstItem, ellipsis, ...lastItems];
-            }
-            else if (this.maxVisibleItems === 4) {
-                const middleItem = this.parsedItems[Math.floor(totalItems / 2)];
-                return [firstItem, middleItem, ellipsis, ...lastItems];
-            }
-        }
-        return this.parsedItems;
-    }
-    /**
-     * Helper to determine the display label and full label.
-     * If the label is longer than 15 characters and the item is not the current (last) item,
-     * we display a truncated version but use the full label for aria attributes.
-     */
-    getLabels(item, isCurrent) {
-        if (!isCurrent && item.label.length > 15) {
-            return { displayLabel: `${item.label.slice(0, 15)}...`, fullLabel: item.label };
-        }
-        return { displayLabel: item.label, fullLabel: item.label };
-    }
-    /**
-     * Render method for the breadcrumb component.
-     * It creates a navigation element with an ordered list of breadcrumb links.
-     * The last link is marked as the current page.
-     */
-    render() {
-        const itemsToRender = this.getTruncatedItems();
-        return (index.h("nav", { key: '75bb5629a10de2a2a7bd0b2bbef04e5f699f5fe2', "aria-label": "Breadcrumb" }, index.h("ol", { key: '7a5cc115b70d60bc878aa3d865802662f30948c1', class: "flex items-center space-x-2" }, itemsToRender.map((item, index$1) => {
-            const isLast = index$1 === itemsToRender.length - 1;
-            return (index.h("li", { class: "flex items-center" }, !item.isHidden ? ((() => {
-                const { displayLabel, fullLabel } = this.getLabels(item, isLast);
-                return (index.h("eds-link", Object.assign({ label: displayLabel, url: item.url, intent: this.intent, current: isLast, "aria-label": fullLabel, size: "small", "icon-small": "false" }, (isLast ? { 'aria-current': 'page' } : {}))));
-            })()) : (index.h("span", { class: "truncate px-2", "aria-hidden": "true" }, "...")), !isLast && !item.isHidden && (index.h("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }))));
-        }))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "items": ["parseItems"]
-    }; }
-};
-EdsBreadcrumb.style = EdsBreadcrumbStyle0;
-
-exports.eds_breadcrumb = EdsBreadcrumb;