@ebrains/components 0.9.0-beta → 0.9.2-beta

package/dist/collection/components/eds-pagination/eds-pagination.js

@@ -1,418 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * `EdsPagination` is a component for navigating paginated data.
- *
- * Key Features:
- * - Supports two display modes: "default" (shows numbered page links) and "navigator" (shows Previous/Next buttons).
- * - Emits a `page` event when the page is changed in "default" mode.
- * - Automatically generates pagination links based on the `currentPage` and `lastPage`.
- *
- * This component is designed for flexible and accessible pagination controls, suitable for various display needs.
- */
-export class EdsPagination {
-    constructor() {
-        this.currentPage = undefined;
-        this.lastPage = undefined;
-        this.perPage = 10;
-        this.total = 0;
-        this.url = '';
-        this.mode = 'default';
-        this.prevLabel = 'Prev';
-        this.nextLabel = 'Next';
-        this.prevUrl = '';
-        this.nextUrl = '';
-        this.links = [];
-    }
-    /** Lifecycle hook to generate pagination links on component load */
-    componentWillLoad() {
-        if (this.mode === 'default') {
-            this.generateLinks();
-        }
-    }
-    componentDidLoad() {
-        // Emit context for each eds-link element after the component is fully loaded
-        const links = this.hostEl.shadowRoot.querySelectorAll('eds-link');
-        links.forEach((lnk) => {
-            this.emitContext(lnk);
-        });
-        /*if (links.length > 0) {
-          // Emit context for the first link
-          this.emitContext(links[0]);
-    
-          // Emit context for the last link, if it's different from the first
-          if (links.length > 1) {
-            this.emitContext(links[links.length - 1]);
-          }
-        }*/
-    }
-    /**
-     * 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.hostEl.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        linkElement.dispatchEvent(event);
-    }
-    onPageOrLastPageChange() {
-        if (this.mode === 'default') {
-            this.generateLinks();
-        }
-    }
-    /**
-     * Checks if the current page is the first page
-     * @returns {boolean} - true if current page is the first page
-     */
-    isFirstPage() {
-        return this.currentPage === 1;
-    }
-    /**
-     * Checks if the current page is the last page
-     * @returns {boolean} - true if current page is the last page
-     */
-    isLastPage() {
-        return this.currentPage === this.lastPage;
-    }
-    /**
-     * Generates a pagination link object
-     * @param {number} page - Page number for the link
-     * @returns {Link} - Link object with page details
-     */
-    generateLink(page) {
-        const urlHasQuery = this.url.includes('?');
-        return {
-            ariaLabel: `Page ${page}`,
-            url: `${this.url}${urlHasQuery ? '&' : '?'}page=${page}`,
-            label: page.toString(),
-            current: this.currentPage === page,
-            disabled: false
-        };
-    }
-    /** Generates pagination links based on the last page and current page */
-    generateLinks() {
-        if (this.lastPage && this.lastPage > 5) {
-            this.links = this.getPaginationGenerator(this.currentPage || 1, this.lastPage).map((page) => typeof page === 'number' ? this.generateLink(page) : page);
-        }
-        else if (this.lastPage) {
-            this.links = Array.from({ length: this.lastPage }).map((_, i) => this.generateLink(i + 1));
-        }
-    }
-    /**
-     * Creates a pagination range based on delta, current, and total pages
-     * @param {number} current - Current page number
-     * @param {number} total - Total number of pages
-     * @param {number} delta - Range of pages to display around the current page
-     * @returns {(number | string)[]} - Range of page numbers or ellipses
-     */
-    getPaginationGenerator(current, total) {
-        const delta = 1; // Show one page before and one after the current page
-        const range = [];
-        if (total <= 5) {
-            // If total pages are 5 or less, show all pages
-            for (let i = 1; i <= total; i++) {
-                range.push(i);
-            }
-        }
-        else {
-            // Always show the first page
-            range.push(1);
-            // Add ellipsis if there’s a gap between the first page and the current range start
-            if (current - delta > 2) {
-                range.push('...');
-            }
-            // Determine range for pages around the current page
-            for (let i = Math.max(2, current - delta); i <= Math.min(total - 1, current + delta); i++) {
-                range.push(i);
-            }
-            // Add ellipsis if there’s a gap between the current range end and the last page
-            if (current + delta < total - 1) {
-                range.push('...');
-            }
-            // Always show the last page
-            range.push(total);
-        }
-        return range;
-    }
-    /**
-     * Formats the current page results information for display
-     * @returns {string} - Formatted page result information
-     */
-    pageResults() {
-        if (this.total > 0) {
-            return this.total > this.perPage
-                ? `${this.perPage * ((this.currentPage || 1) - 1) + 1} - ${this.perPage * (this.currentPage || 1) >= this.total ? this.total : this.perPage * (this.currentPage || 1)} of ${this.total}`
-                : `${this.total}`;
-        }
-        return '';
-    }
-    /**
-     * Handles a page click event, updating the current page and dispatching an event
-     * @param {MouseEvent} event - Click event
-     * @param {number} newPage - New page number
-     */
-    handlePageClick(event, newPage) {
-        if (this.mode === 'navigator') {
-            return; // No page clicking logic for navigator mode
-        }
-        event.preventDefault(); // Prevent default link navigation
-        if (newPage !== this.currentPage) {
-            this.links = this.links.map((link) => typeof link === 'object' ? Object.assign(Object.assign({}, link), { current: parseInt(link.label) === newPage }) : link);
-            const pageChangeEvent = new CustomEvent('page', {
-                detail: newPage,
-                bubbles: true,
-                composed: true
-            });
-            this.hostEl.dispatchEvent(pageChangeEvent);
-            this.currentPage = newPage;
-        }
-    }
-    render() {
-        return (h("div", { key: 'b33415e05457ccc78ea3744a1baa9affbf38ca4a' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'e555e94a3fd13cf0d57108bd2cca3fb97cd0c688', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'c63f1d5aa6154a23d714c74dcd9a0a75b68df579', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
-                ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
-                : this.isFirstPage()
-                    ? '#'
-                    : this.generateLink(this.currentPage - 1).url, disabled: this.mode === 'navigator'
-                ? !this.prevUrl // Disable if prevUrl is not provided
-                : this.isFirstPage(), "aria-label": "Previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "strong", "hide-label-on-small-screen": true, class: "!p-8 lg:!pr-12", onClick: (event) => {
-                if (this.mode === 'default') {
-                    if (this.isFirstPage()) {
-                        event.preventDefault(); // Prevent click if disabled
-                    }
-                    else {
-                        this.handlePageClick(event, (this.currentPage || 1) - 1);
-                    }
-                }
-            } })), this.mode === 'default' &&
-            this.links.map((link, index) => (h("li", { key: index, class: "f-ui-02 flex h-36 items-center justify-center" }, typeof link === 'string' ? (h("span", { class: "flex items-center justify-center" }, link)) : (h("eds-link", { url: link.url, "aria-label": link.ariaLabel, label: link.label, current: link.current, size: "small", class: "!p-8", intent: link.current ? 'secondary' : 'ghost', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))))), h("li", { class: "ml-auto" }, h("eds-link", { label: this.nextLabel, url: this.mode === 'navigator'
-                ? this.nextUrl || '#' // Use nextUrl if provided, otherwise disable with '#'
-                : this.isLastPage()
-                    ? '#'
-                    : this.generateLink(this.currentPage + 1).url, disabled: this.mode === 'navigator'
-                ? !this.nextUrl // Disable if nextUrl is not provided
-                : this.isLastPage(), "aria-label": "Next page", size: "small", "icon-small": "true", icon: "chevron-right", intent: "strong", "hide-label-on-small-screen": true, class: "!p-8 lg:!pl-12 flex items-center gap-1 py-4 transition-colors", onClick: (event) => {
-                if (this.mode === 'default') {
-                    if (this.isLastPage()) {
-                        event.preventDefault(); // Prevent click if disabled
-                    }
-                    else {
-                        this.handlePageClick(event, (this.currentPage || 1) + 1);
-                    }
-                }
-            } }))))) : null));
-    }
-    static get is() { return "eds-pagination"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["eds-pagination.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-pagination.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "currentPage": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The current active page"
-                },
-                "attribute": "current-page",
-                "reflect": false
-            },
-            "lastPage": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The last page number available"
-                },
-                "attribute": "last-page",
-                "reflect": false
-            },
-            "perPage": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The number of items per page"
-                },
-                "attribute": "per-page",
-                "reflect": false,
-                "defaultValue": "10"
-            },
-            "total": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The total number of items"
-                },
-                "attribute": "total",
-                "reflect": false,
-                "defaultValue": "0"
-            },
-            "url": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Base URL for the pagination links"
-                },
-                "attribute": "url",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "mode": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'default' | 'navigator'",
-                    "resolved": "\"default\" | \"navigator\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Mode of pagination display - 'default' shows page numbers, 'navigator' shows Previous/Next buttons only"
-                },
-                "attribute": "mode",
-                "reflect": false,
-                "defaultValue": "'default'"
-            },
-            "prevLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label for the previous button in navigator mode"
-                },
-                "attribute": "prev-label",
-                "reflect": false,
-                "defaultValue": "'Prev'"
-            },
-            "nextLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label for the next button in navigator mode"
-                },
-                "attribute": "next-label",
-                "reflect": false,
-                "defaultValue": "'Next'"
-            },
-            "prevUrl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "URL for the previous page in navigator mode"
-                },
-                "attribute": "prev-url",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "nextUrl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "URL for the next page in navigator mode"
-                },
-                "attribute": "next-url",
-                "reflect": false,
-                "defaultValue": "''"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "links": {}
-        };
-    }
-    static get elementRef() { return "hostEl"; }
-    static get watchers() {
-        return [{
-                "propName": "currentPage",
-                "methodName": "onPageOrLastPageChange"
-            }, {
-                "propName": "lastPage",
-                "methodName": "onPageOrLastPageChange"
-            }];
-    }
-}

package/dist/collection/components/eds-pagination/eds-pagination.stories.js

@@ -1,135 +0,0 @@
-export default {
-    title: 'Components/Pagination',
-    component: 'eds-pagination',
-    argTypes: {
-        currentPage: {
-            control: 'number',
-            description: 'Current active page in the pagination'
-        },
-        lastPage: {
-            control: 'number',
-            description: 'Total number of pages'
-        },
-        perPage: {
-            control: 'number',
-            description: 'Number of items per page'
-        },
-        total: {
-            control: 'number',
-            description: 'Total items available for pagination'
-        },
-        prevLabel: {
-            control: 'text',
-            description: 'Custom label for the "Previous" button in navigator mode',
-            table: {
-                category: 'Navigator Mode Only'
-            }
-        },
-        nextLabel: {
-            control: 'text',
-            description: 'Custom label for the "Next" button in navigator mode',
-            table: {
-                category: 'Navigator Mode Only'
-            }
-        },
-        prevUrl: {
-            control: 'text',
-            description: 'URL for the previous page link in navigator mode',
-            table: {
-                category: 'Navigator Mode Only'
-            }
-        },
-        nextUrl: {
-            control: 'text',
-            description: 'URL for the next page link in navigator mode',
-            table: {
-                category: 'Navigator Mode Only'
-            }
-        }
-    },
-    args: {
-        currentPage: 1,
-        lastPage: 5,
-        perPage: 10,
-        total: 50,
-        prevLabel: 'Previous',
-        nextLabel: 'Next',
-        prevUrl: '',
-        nextUrl: ''
-    }
-};
-export const DefaultPagination = {
-    render: (args) => `
-    <eds-pagination
-      current-page="${args.currentPage}"
-      last-page="${args.lastPage}"
-      per-page="${args.perPage}"
-      total="${args.total}"
-      mode="default">
-    </eds-pagination>
-  `,
-    args: {
-        currentPage: 1,
-        lastPage: 5,
-        perPage: 10,
-        total: 50
-    }
-};
-export const NavigatorMode = {
-    render: (args) => `
-    <eds-pagination
-      current-page="${args.currentPage}"
-      last-page="${args.lastPage}"
-      per-page="${args.perPage}"
-      total="${args.total}"
-      mode="navigator"
-      prev-label="${args.prevLabel}"
-      next-label="${args.nextLabel}"
-      prev-url="${args.prevUrl}"
-      next-url="${args.nextUrl}">
-    </eds-pagination>
-  `,
-    args: {
-        currentPage: 1,
-        lastPage: 5,
-        mode: 'navigator',
-        prevLabel: 'Prev',
-        nextLabel: 'Next',
-        prevUrl: '#',
-        nextUrl: '#'
-    }
-};
-export const SmallNumberOfPages = {
-    render: (args) => `
-    <eds-pagination
-      current-page="${args.currentPage}"
-      last-page="${args.lastPage}"
-      per-page="${args.perPage}"
-      total="${args.total}"
-      mode="default">
-    </eds-pagination>
-  `,
-    args: {
-        currentPage: 1,
-        lastPage: 3,
-        perPage: 5,
-        total: 15
-    }
-};
-export const LargeNumberOfPages = {
-    render: (args) => `
-    <eds-pagination
-      current-page="${args.currentPage}"
-      last-page="${args.lastPage}"
-      per-page="${args.perPage}"
-      total="${args.total}"
-      mode="default">
-    </eds-pagination>
-  `,
-    args: {
-        currentPage: 1,
-        lastPage: 50,
-        perPage: 10,
-        total: 500
-    }
-};

package/dist/collection/components/eds-progress-bar/eds-progress-bar.css

@@ -1,62 +0,0 @@
-
-  .w-full {
-    width: 100%;
-  }
-  .h-full {
-    height: 100%;
-  }
-  .bg-default {
-    background-color: var(--grey-200);
-  }
-  .rounded-lg {
-    border-radius: 16px;
-  }
-  .h-24 {
-    height: 1.5rem;
-  }
-  .border {
-    border-width: 1px;
-  }
-  .border-softer {
-    border: 2px solid rgba(0, 0, 0, .1 );
-  }
-  .overflow-hidden {
-    overflow: hidden;
-  }
-  .bg-accent {
-    background-color: var(--green-500);
-  }
-  .bg-\[\#0034CB\] {
-    --tw-text-opacity: 1;
-    background-color: rgb(0 52 203 / var(--tw-text-opacity));
-  }
-  .transition-all {
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-  .duration-300 {
-    transition-duration: 300ms;
-  }
-  .flex {
-    display: flex;
-  }
-  .items-center {
-    align-items: center;
-  }
-  .justify-center {
-    justify-content: center;
-  }
-  .text-default {
-    color: var(--black);
-  }
-  .text-inverse {
-    color: var(--white);
-  }
-  .f-body-02 {
-    font-family: var(--f-body-02-fontFamily);
-    font-weight: var(--f-body-02-fontWeight);
-    font-size: var(--f-body-02-fontSize);
-    line-height: var(--f-body-02-lineHeight);
-    letter-spacing: var(--f-body-02-letterSpacing);
-  }

package/dist/collection/components/eds-progress-bar/eds-progress-bar.js

@@ -1,79 +0,0 @@
-import { h } from "@stencil/core";
-export class EdsProgressBar {
-    constructor() {
-        this.value = 0;
-    }
-    /**
-     * Method to update the progress value externally.
-     * @param newValue The new progress value (0-100).
-     */
-    async updateValue(newValue) {
-        this.value = Math.min(100, Math.max(0, newValue)); // Clamp value between 0 and 100
-    }
-    render() {
-        const progressValue = this.value;
-        return (h("div", { key: '9a7fa42058034305b22818d464e7b633d7831d67', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, h("div", { key: '90b0ac9a538b575a30163c0dbbf437e1cfe8ce39', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
-    }
-    static get is() { return "eds-progress-bar"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["eds-progress-bar.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-progress-bar.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "value": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The progress value (0-100)."
-                },
-                "attribute": "value",
-                "reflect": false,
-                "defaultValue": "0"
-            }
-        };
-    }
-    static get methods() {
-        return {
-            "updateValue": {
-                "complexType": {
-                    "signature": "(newValue: number) => Promise<void>",
-                    "parameters": [{
-                            "name": "newValue",
-                            "type": "number",
-                            "docs": "The new progress value (0-100)."
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Method to update the progress value externally.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "newValue The new progress value (0-100)."
-                        }]
-                }
-            }
-        };
-    }
-}