@ebrains/components 0.0.1-alpha.0

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

@@ -0,0 +1,414 @@
+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 `pageChange` 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');
+        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('pageChange', {
+                detail: newPage,
+                bubbles: true,
+                composed: true
+            });
+            this.hostEl.dispatchEvent(pageChangeEvent);
+            this.currentPage = newPage;
+        }
+    }
+    render() {
+        return (h("div", { key: '2385b59b0a8b2bbdc40bfc5032b846c0ec20065e' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '6aea281a4df247874f354469bbabae039424ad9e', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'eeb5f0ea902505c3853a30d51026cef9d9785e48', 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

@@ -0,0 +1,141 @@
+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'
+        },
+        mode: {
+            control: { type: 'select' },
+            options: ['default', 'navigator'],
+            description: 'Pagination display mode'
+        },
+        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,
+        mode: 'default',
+        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

@@ -0,0 +1,62 @@
+
+  .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

@@ -0,0 +1,79 @@
+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: '3131f56034a9fd72ca51e448bc2bcc6281669b25', class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, h("div", { key: 'f1665a254f8dbe1ccb9e512e5f2e7c1e5ab88c07', 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)."
+                        }]
+                }
+            }
+        };
+    }
+}