@ebrains/react 2.0.0 → 2.1.0

package/eds-breadcrumb.entry.esm.js

@@ -1,179 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { p as parseData } from './sharedUtils-a550989c.esm.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-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) {
-    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;
-      } else if (width <= 1024) {
-        this.maxVisibleItems = 3;
-      } else if (width <= 1280) {
-        this.maxVisibleItems = 3;
-      } else if (width <= 2200) {
-        this.maxVisibleItems = 4;
-      } else {
-        this.maxVisibleItems = 6;
-      }
-    };
-    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 = 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 h("nav", {
-      key: 'db769320b42e627fffd71676c1e0551646f1de70',
-      "aria-label": "Breadcrumb"
-    }, h("ol", {
-      key: '6cef8ed43cabcee73cb4ad4fb26f809d0690c0ec',
-      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 ? (() => {
-        const {
-          fullLabel
-        } = this.getLabels(item, isLast);
-        const linkIntent = isLast ? this.intent === 'strong' ? 'weak' : this.intent === 'weak' ? 'strong' : this.intent : this.intent;
-        return h("eds-link", Object.assign({
-          label: fullLabel,
-          url: item.url,
-          intent: linkIntent,
-          disabled: isLast,
-          current: isLast,
-          "aria-label": fullLabel,
-          size: "small",
-          "icon-small": "false"
-        }, isLast ? {
-          'aria-current': 'page'
-        } : {}));
-      })() : h("eds-link", {
-        label: "...",
-        url: "#",
-        intent: "strong",
-        current: false,
-        "aria-label": "...",
-        size: "small",
-        "icon-small": "false",
-        icon: "chevron-right"
-      }), !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 = EdsBreadcrumbStyle0;
-
-export { EdsBreadcrumb as eds_breadcrumb };