@ebrains/components 0.9.2-beta → 0.9.3-beta

package/dist/collection/components/eds-block-break/eds-block-break.css

@@ -0,0 +1,49 @@
+.border-soft {
+    border-color: rgba(0, 0, 0, .15);
+}
+
+.border-softer {
+    border-color: rgba(0, 0, 0, .1);
+}
+
+.border-softest {
+    border-color: rgba(0, 0, 0, .05);
+}
+
+.my-16 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+.my-20 {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+}
+
+.block {
+    display: block;
+}
+
+.inline-block {
+    display: inline-block;
+}
+
+.inline {
+    display: inline;
+}
+
+.flex {
+    display: flex;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+.w-full {
+    width: 100%;
+}
+
+.border-t-2 {
+    border-top-width: 2px;
+}

package/dist/collection/components/eds-block-break/eds-block-break.js

@@ -0,0 +1,51 @@
+import { h } from "@stencil/core";
+/**
+ * `EdsBlockBreak` is a divider component designed to render a horizontal line that separates content visually.
+ * This component includes customizable styling options to adapt to various layouts and design needs.
+ *
+ * Key features include:
+ * - Configurable additional classes for styling through the `extraClass` prop.
+ * - Suitable for dividing sections or breaking content blocks within a page.
+ */
+export class EdsBlockBreak {
+    constructor() {
+        this.extraClass = '';
+    }
+    render() {
+        return h("hr", { key: '413a82abc03188a5395ef6344de527029e8f3118', class: `border-softer my-20 inline-block w-full border-t-2 ${this.extraClass}` });
+    }
+    static get is() { return "eds-block-break"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-block-break.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-block-break.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "extraClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional classes for styling the component."
+                },
+                "attribute": "extra-class",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+}

package/dist/collection/components/eds-breadcrump/eds-breadcrumb.css

@@ -0,0 +1,112 @@
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+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;
+  }
+}

package/dist/collection/components/eds-breadcrump/eds-breadcrumb.stories.js

@@ -0,0 +1,40 @@
+export default {
+    title: 'Components/Breadcrumb',
+    component: 'eds-breadcrumb',
+    argTypes: {
+        items: {
+            control: 'object',
+            description: 'An array of breadcrumb items as a JSON string.'
+        },
+        intent: {
+            control: 'select',
+            options: ['primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline'],
+            description: 'The visual style or intent of the breadcrumb links.',
+            defaultValue: 'ghost'
+        }
+    },
+    args: {
+        items: [
+            { label: 'Home', url: '/' },
+            { label: 'Electronics', url: '/electronics' },
+            { label: 'Laptops', url: '/electronics/laptops' }
+        ],
+        intent: 'ghost'
+    }
+};
+const sampleitems = [
+    { label: 'Home', url: '/' },
+    { label: 'Electronics', url: '/electronics' },
+    { label: 'Laptops', url: '/electronics/laptops' }
+];
+export const Default = {
+    render: (args) => `
+      <eds-breadcrumb 
+        items='${JSON.stringify(args.items)}'
+        intent='${args.intent}'
+      ></eds-breadcrumb>`,
+    args: {
+        items: sampleitems,
+        intent: 'ghost'
+    }
+};

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

@@ -0,0 +1,212 @@
+import { h } from "@stencil/core";
+import { parseData } from "../../utils/sharedUtils";
+/**
+ * `EdsBreadcrumb` is a navigational component that displays the user's current location within a hierarchy of pages.
+ * This component is especially useful for providing context and enhancing user navigation experiences.
+ *
+ * Key features include:
+ * - Customizable breadcrumb items passed as a JSON string or array, each with a `label` and `url`.
+ * - Configurable visual intent for breadcrumb links to match various design themes.
+ * - Automatic parsing of breadcrumb items with graceful handling of invalid JSON formats.
+ * - Emits custom events for context tracking on each breadcrumb link after the component loads.
+ *
+ * The component renders as a series of links, with the last item disabled and marked as the current page.
+ */
+export class EdsBreadcrumb {
+    constructor() {
+        /**
+         * 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: '2651e18e4c157f49e1da2ef93d4f68b9497118e4', "aria-label": "Breadcrumb" }, h("ol", { key: 'd1f5bb18bb35df9455a4c7a566850d59eb657242', 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" }))));
+        }))));
+    }
+    static get is() { return "eds-breadcrumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-breadcrumb.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-breadcrumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Link[]",
+                    "resolved": "Link[] | string",
+                    "references": {
+                        "Link": {
+                            "location": "global",
+                            "id": "global::Link"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of breadcrumb items. It can be passed as a JSON string or an array of objects.\nEach object should contain the properties: `label` (string) and `url` (string).\nExample: '[{\"label\": \"Home\", \"url\": \"/\"}, {\"label\": \"Products\", \"url\": \"/products\"}]'"
+                },
+                "attribute": "items",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost' | 'strong' | 'weak' | 'inverse' | 'underline'",
+                    "resolved": "\"ghost\" | \"inverse\" | \"primary\" | \"secondary\" | \"strong\" | \"tertiary\" | \"underline\" | \"weak\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual style or intent of the breadcrumb links.\nOptions include: 'primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline'.\nDefault is 'ghost'."
+                },
+                "attribute": "intent",
+                "reflect": false,
+                "defaultValue": "'ghost'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedItems": {},
+            "isSmallScreen": {},
+            "maxVisibleItems": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "parseItems"
+            }];
+    }
+}