@ebrains/components 0.0.1-alpha.0

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

@@ -0,0 +1,148 @@
+import { r as registerInstance, h, g as getElement } from './index-b384416e.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 EdsBreadcrumb = class {
+    constructor(hostRef) {
+        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 = 4;
+                this.isSmallScreen = true;
+            }
+            else {
+                this.maxVisibleItems = 6;
+                this.isSmallScreen = false;
+            }
+        };
+        this.items = [];
+        this.intent = 'ghost';
+        this.parsedItems = [];
+        this.isSmallScreen = false;
+        this.maxVisibleItems = 6;
+    }
+    /**
+     * Watch for changes to the `items` prop and parse it when it changes.
+     * Converts the `items` string into an array of objects if it is a JSON string.
+     * If the format is invalid, it logs an error and sets an empty array.
+     *
+     * @param newValue - The new value for the `items` prop.
+     */
+    parseItems(newValue) {
+        try {
+            if (typeof newValue === 'string') {
+                this.parsedItems = JSON.parse(newValue);
+            }
+            else {
+                this.parsedItems = newValue;
+            }
+        }
+        catch (e) {
+            this.parsedItems = [];
+        }
+    }
+    /**
+     * 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() {
+        // Emit context for each eds-link element after the component is fully loaded
+        const links = this.el.shadowRoot.querySelectorAll('eds-link');
+        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);
+    }
+    /**
+     * Truncates breadcrumb items based on the maxVisibleItems value.
+     * Truncates `label` to 10 characters if `isSmallScreen` is true, except for the last label.
+     */
+    getTruncatedItems() {
+        const totalItems = this.parsedItems.length;
+        if (totalItems > this.maxVisibleItems) {
+            const firstItem = this.parsedItems[0];
+            const lastItems = this.parsedItems.slice(-2);
+            const ellipsis = { label: '...', url: '', isHidden: true };
+            if (this.maxVisibleItems === 3) {
+                return [
+                    this.truncateLabel(firstItem),
+                    ellipsis,
+                    ...lastItems.map((item, index) => (index === lastItems.length - 1 ? item : this.truncateLabel(item)))
+                ];
+            }
+            else if (this.maxVisibleItems === 4) {
+                const middleItem = this.parsedItems[Math.floor(totalItems / 2)];
+                return [
+                    this.truncateLabel(firstItem),
+                    this.truncateLabel(middleItem),
+                    ellipsis,
+                    ...lastItems.map((item, index) => (index === lastItems.length - 1 ? item : this.truncateLabel(item)))
+                ];
+            }
+        }
+        return this.parsedItems.map((item, index) => index === this.parsedItems.length - 1 ? item : this.truncateLabel(item));
+    }
+    /**
+     * Truncates the label of a breadcrumb item to a maximum of 10 characters
+     * if the screen is small.
+     */
+    truncateLabel(item) {
+        if (item.label.length > 15) {
+            return Object.assign(Object.assign({}, item), { label: `${item.label.slice(0, 15)}...` });
+        }
+        return item;
+    }
+    /**
+     * Render method for the breadcrumb component.
+     * It creates a navigation element with an ordered list of breadcrumb links.
+     * The last link is disabled and marked as the current page.
+     */
+    render() {
+        const itemsToRender = this.getTruncatedItems();
+        return (h("nav", { key: 'b3f515670374a7451981638d658f8e37f07ab10c', "aria-label": "Breadcrumb" }, h("ol", { key: '999b2035f3c996016e753be3826881a11054e184', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+            const isLast = index === itemsToRender.length - 1;
+            return (h("li", { class: "flex items-center" }, !item.isHidden ? (h("eds-link", { label: item.label, url: item.url, intent: this.intent, current: isLast, "aria-label": item.label, size: "small", "icon-small": "false" })) : (h("span", { class: "truncate px-2 ", "aria-hidden": "true" }, "...")), !isLast && !item.isHidden && (h("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }))));
+        }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "items": ["parseItems"]
+    }; }
+};
+EdsBreadcrumb.style = edsBreadcrumbCss;
+
+export { EdsBreadcrumb as eds_breadcrumb };

package/dist/components/eds-breadcrumb.js

@@ -0,0 +1,186 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$2 } from './eds-link2.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 EdsBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class EdsBreadcrumb extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * 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 = 4;
+                this.isSmallScreen = true;
+            }
+            else {
+                this.maxVisibleItems = 6;
+                this.isSmallScreen = false;
+            }
+        };
+        this.items = [];
+        this.intent = 'ghost';
+        this.parsedItems = [];
+        this.isSmallScreen = false;
+        this.maxVisibleItems = 6;
+    }
+    /**
+     * Watch for changes to the `items` prop and parse it when it changes.
+     * Converts the `items` string into an array of objects if it is a JSON string.
+     * If the format is invalid, it logs an error and sets an empty array.
+     *
+     * @param newValue - The new value for the `items` prop.
+     */
+    parseItems(newValue) {
+        try {
+            if (typeof newValue === 'string') {
+                this.parsedItems = JSON.parse(newValue);
+            }
+            else {
+                this.parsedItems = newValue;
+            }
+        }
+        catch (e) {
+            this.parsedItems = [];
+        }
+    }
+    /**
+     * 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() {
+        // Emit context for each eds-link element after the component is fully loaded
+        const links = this.el.shadowRoot.querySelectorAll('eds-link');
+        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);
+    }
+    /**
+     * Truncates breadcrumb items based on the maxVisibleItems value.
+     * Truncates `label` to 10 characters if `isSmallScreen` is true, except for the last label.
+     */
+    getTruncatedItems() {
+        const totalItems = this.parsedItems.length;
+        if (totalItems > this.maxVisibleItems) {
+            const firstItem = this.parsedItems[0];
+            const lastItems = this.parsedItems.slice(-2);
+            const ellipsis = { label: '...', url: '', isHidden: true };
+            if (this.maxVisibleItems === 3) {
+                return [
+                    this.truncateLabel(firstItem),
+                    ellipsis,
+                    ...lastItems.map((item, index) => (index === lastItems.length - 1 ? item : this.truncateLabel(item)))
+                ];
+            }
+            else if (this.maxVisibleItems === 4) {
+                const middleItem = this.parsedItems[Math.floor(totalItems / 2)];
+                return [
+                    this.truncateLabel(firstItem),
+                    this.truncateLabel(middleItem),
+                    ellipsis,
+                    ...lastItems.map((item, index) => (index === lastItems.length - 1 ? item : this.truncateLabel(item)))
+                ];
+            }
+        }
+        return this.parsedItems.map((item, index) => index === this.parsedItems.length - 1 ? item : this.truncateLabel(item));
+    }
+    /**
+     * Truncates the label of a breadcrumb item to a maximum of 10 characters
+     * if the screen is small.
+     */
+    truncateLabel(item) {
+        if (item.label.length > 15) {
+            return Object.assign(Object.assign({}, item), { label: `${item.label.slice(0, 15)}...` });
+        }
+        return item;
+    }
+    /**
+     * Render method for the breadcrumb component.
+     * It creates a navigation element with an ordered list of breadcrumb links.
+     * The last link is disabled and marked as the current page.
+     */
+    render() {
+        const itemsToRender = this.getTruncatedItems();
+        return (h("nav", { key: 'b3f515670374a7451981638d658f8e37f07ab10c', "aria-label": "Breadcrumb" }, h("ol", { key: '999b2035f3c996016e753be3826881a11054e184', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+            const isLast = index === itemsToRender.length - 1;
+            return (h("li", { class: "flex items-center" }, !item.isHidden ? (h("eds-link", { label: item.label, url: item.url, intent: this.intent, current: isLast, "aria-label": item.label, size: "small", "icon-small": "false" })) : (h("span", { class: "truncate px-2 ", "aria-hidden": "true" }, "...")), !isLast && !item.isHidden && (h("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }))));
+        }))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "items": ["parseItems"]
+    }; }
+    static get style() { return edsBreadcrumbCss; }
+}, [1, "eds-breadcrumb", {
+        "items": [1],
+        "intent": [1],
+        "parsedItems": [32],
+        "isSmallScreen": [32],
+        "maxVisibleItems": [32]
+    }, undefined, {
+        "items": ["parseItems"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-breadcrumb", "eds-icon-wrapper", "eds-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-breadcrumb":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsBreadcrumb$1);
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsBreadcrumb = EdsBreadcrumb$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsBreadcrumb, defineCustomElement };

package/dist/components/eds-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsButton extends Components.EdsButton, HTMLElement {}
+export const EdsButton: {
+    prototype: EdsButton;
+    new (): EdsButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;