@ebrains/components 0.0.1-alpha.0 → 0.2.0-alpha.0

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

@@ -1,148 +0,0 @@
-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 };