@ebrains/components 0.9.2-beta → 0.9.3-beta

package/dist/cjs/user-a3c2230f.js

@@ -0,0 +1,18 @@
+'use strict';
+
+const user = `<svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="10" cy="6" r="3" stroke="currentColor" stroke-width="2" />
+    <path
+      d="M17 18V17C17 14.7909 15.2091 13 13 13H7C4.79086 13 3 14.7909 3 17V18"
+      stroke="currentColor"
+      stroke-width="2"
+    />
+  </svg>`;
+
+exports.user = user;

package/dist/cjs/youtube-c238a461.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const youtube = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.5821 5.18614C19.3521 4.3256 18.6743 3.64795 17.8137 3.41797C16.2542 3 10 3 10 3C10 3 3.74579 3 2.18614 3.41797C1.32557 3.64795 0.647844 4.3256 0.417841 5.18614C-2.98023e-08 6.74579 0 10 0 10C0 10 -2.98023e-08 13.2541 0.417841 14.8139C0.647844 15.6744 1.32557 16.352 2.18614 16.5821C3.74579 17 10 17 10 17C10 17 16.2542 17 17.8137 16.5821C18.6743 16.352 19.3521 15.6744 19.5821 14.8139C20 13.2541 20 10 20 10C20 10 20 6.74579 19.5821 5.18614ZM8 13V7L14 10L8 13Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+exports.youtube = youtube;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,128 @@
+{
+  "entries": [
+    "components/eds-cards/eds-card-generic/eds-card-generic.js",
+    "shared-ui/eds-card-section/eds-card-section.js",
+    "components/eds-steps/eds-steps.js",
+    "shared-ui/eds-steps-v2/eds-steps-v2.js",
+    "components/eds-accordion/eds-accordion.js",
+    "components/eds-alert/eds-alert.js",
+    "components/eds-avatar/eds-avatar.js",
+    "components/eds-block-break/eds-block-break.js",
+    "components/eds-breadcrump/eds-breadcrump.js",
+    "components/eds-button/eds-button.js",
+    "components/eds-cards/eds-card-composer/eds-card-desc/eds-card-desc.js",
+    "components/eds-cards/eds-card-composer/eds-card-tags/eds-card-tags.js",
+    "components/eds-cards/eds-card-composer/eds-card-title/eds-card-title.js",
+    "components/eds-cards/eds-card-composer/eds-card-wrapper/eds-card-wrapper.js",
+    "components/eds-cards/eds-card-project/eds-card-project.js",
+    "components/eds-cards/eds-card-tool/eds-card-tool.js",
+    "components/eds-code-block/eds-code-block.js",
+    "components/eds-dropdown/eds-dropdown.js",
+    "components/eds-icon-wrapper/eds-icon-wrapper.js",
+    "components/eds-icons/chevron/eds-icon-chevron-down/eds-icon-chevron-down.js",
+    "components/eds-icons/chevron/eds-icon-chevron-left/eds-icon-chevron-left.js",
+    "components/eds-icons/chevron/eds-icon-chevron-right/eds-icon-chevron-right.js",
+    "components/eds-icons/chevron/eds-icon-chevron-up/eds-icon-chevron-up.js",
+    "components/eds-icons/eds-icon-arrow-diagonal/eds-icon-arrow-diagonal.js",
+    "components/eds-icons/eds-icon-arrow-right/eds-icon-arrow-right.js",
+    "components/eds-icons/eds-icon-bookmark/eds-icon-bookmark.js",
+    "components/eds-icons/eds-icon-close/eds-icon-close.js",
+    "components/eds-icons/eds-icon-copy/eds-icon-copy.js",
+    "components/eds-icons/eds-icon-eu/eds-icon-eu.js",
+    "components/eds-icons/eds-icon-external/eds-icon-external.js",
+    "components/eds-icons/eds-icon-gitlab/eds-icon-gitlab.js",
+    "components/eds-icons/eds-icon-loader/eds-icon-loader.js",
+    "components/eds-icons/eds-icon-menu/eds-icon-menu.js",
+    "components/eds-icons/eds-icon-minus/eds-icon-minus.js",
+    "components/eds-icons/eds-icon-more/eds-icon-more.js",
+    "components/eds-icons/eds-icon-paper/eds-icon-paper.js",
+    "components/eds-icons/eds-icon-plus/eds-icon-plus.js",
+    "components/eds-icons/eds-icon-portal/eds-icon-portal.js",
+    "components/eds-icons/eds-icon-private/eds-icon-private.js",
+    "components/eds-icons/eds-icon-public/eds-icon-public.js",
+    "components/eds-icons/eds-icon-search/eds-icon-search.js",
+    "components/eds-icons/eds-icon-star/eds-icon-star.js",
+    "components/eds-icons/eds-icon-success/eds-icon-success.js",
+    "components/eds-icons/eds-icon-thumbs-down/eds-icon-thumbs-down.js",
+    "components/eds-icons/eds-icon-thumbs-up/eds-icon-thumbs-up.js",
+    "components/eds-icons/eds-icon-tutorial/eds-icon-tutorial.js",
+    "components/eds-icons/eds-icon-unknown/eds-icon-unknown.js",
+    "components/eds-icons/eds-icon-updown/eds-icon-updown.js",
+    "components/eds-icons/eds-icon-user/eds-icon-user.js",
+    "components/eds-icons/social/eds-icon-bluesky/eds-icon-bluesky.js",
+    "components/eds-icons/social/eds-icon-facebook/eds-icon-facebook.js",
+    "components/eds-icons/social/eds-icon-linkedin/eds-icon-linkedin.js",
+    "components/eds-icons/social/eds-icon-mastodon/eds-icon-mastodon.js",
+    "components/eds-icons/social/eds-icon-twitter/eds-icon-twitter.js",
+    "components/eds-icons/social/eds-icon-youtube/eds-icon-youtube.js",
+    "components/eds-img/eds-img.js",
+    "components/eds-input-elements/eds-input/eds-input.js",
+    "components/eds-input-elements/eds-input-footer/eds-input-footer.js",
+    "components/eds-input-elements/eds-input-label/eds-input-label.js",
+    "components/eds-input-elements/eds-input-range/eds-input-range.js",
+    "components/eds-input-elements/eds-input-search/eds-input-search.js",
+    "components/eds-input-elements/eds-input-select/eds-input-select.js",
+    "components/eds-input-field/eds-input-field.js",
+    "components/eds-link/eds-link.js",
+    "components/eds-logo/eds-logo.js",
+    "components/eds-modal/eds-modal.js",
+    "components/eds-pagination/eds-pagination.js",
+    "components/eds-progress-bar/eds-progress-bar.js",
+    "components/eds-rating/eds-rating.js",
+    "components/eds-section/eds-section-core/eds-section-core.js",
+    "components/eds-section/eds-section-heading/eds-section-heading.js",
+    "components/eds-spinner/eds-spinner.js",
+    "components/eds-switch/eds-switch.js",
+    "components/eds-table/eds-table.js",
+    "components/eds-tag/eds-tag.js",
+    "components/eds-timeline/eds-timeline.js",
+    "components/eds-toast/eds-toast.js",
+    "components/eds-tooltip/eds-tooltip.js",
+    "components/eds-trl/eds-trl.js",
+    "eds-docs-ui/colors/color-palette/primary.js",
+    "eds-docs-ui/colors/color-palette/secondary.js",
+    "eds-docs-ui/colors/color-palette/support.js",
+    "eds-docs-ui/colors/gradient-palette/primary.js",
+    "eds-docs-ui/colors/gradient-palette/secondary.js",
+    "eds-docs-ui/colors/gradient-palette/support.js",
+    "eds-docs-ui/colors/use-of-colors/correct-use-of-colors.js",
+    "eds-docs-ui/colors/use-of-colors/incorrect-use-of-colors.js",
+    "eds-docs-ui/components-section/components-section.js",
+    "eds-docs-ui/design-tokens/docs-tokens/docs-tokens.js",
+    "eds-docs-ui/design-tokens/token-list/token-list.js",
+    "eds-docs-ui/design-tokens/token-radii/token-radii.js",
+    "eds-docs-ui/design-tokens/token-ratios/token-ratios.js",
+    "eds-docs-ui/design-tokens/token-shadows/token-shadows.js",
+    "eds-docs-ui/design-tokens/token-spacing/token-spacing.js",
+    "eds-docs-ui/design-tokens/token-typography/token-typography.js",
+    "eds-docs-ui/docs-palettes/docs-palettes.js",
+    "eds-docs-ui/logo/logo-space/logo-space.js",
+    "eds-docs-ui/logo/logo-variations/horizontal/logo-variations-horizontal.js",
+    "eds-docs-ui/logo/logo-variations/vertical/logo-variations-vertical.js",
+    "eds-docs-ui/logo/logo-variations-tabs/logo-variations.js",
+    "eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.js",
+    "eds-docs-ui/svg-repository/svg-repository.js",
+    "shared-ui/eds-cookies-preference/eds-cookies-preference.js",
+    "shared-ui/eds-feedback/eds-feedback.js",
+    "shared-ui/eds-footer/eds-footer.js",
+    "shared-ui/eds-form/eds-form.js",
+    "shared-ui/eds-frame/eds-frame.js",
+    "shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.js",
+    "shared-ui/eds-header/eds-header.js",
+    "shared-ui/eds-login/eds-login.js",
+    "shared-ui/eds-matomo-notice/eds-matomo-notice.js",
+    "shared-ui/eds-social-networks/eds-social-networks.js",
+    "shared-ui/eds-splash-screen/eds-splash-screen.js",
+    "shared-ui/eds-tabs/eds-tabs.js",
+    "shared-ui/eds-toast-manager/eds-toast-manager.js",
+    "shared-ui/eds-user/eds-user.js",
+    "shared-ui/examples/eds-app-root/eds-app-root.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.22.0",
+    "typescriptVersion": "5.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/eds-accordion/eds-accordion.css

@@ -0,0 +1,264 @@
+/*
+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;
+}
+
+.min-h-56 {
+    min-height: 3.5rem;
+}
+
+.container {
+    width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.container>* {
+    --container-outer-gutter: 0;
+    --breakout-container-outer-gutter: 0;
+}
+
+.break-words {
+    overflow-wrap: break-word;
+}
+
+.block {
+    display: block;
+}
+
+.inline-block {
+    display: inline-block;
+}
+
+.inline {
+    display: inline;
+}
+
+.flex {
+    display: flex;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+.effect-color {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.border-softer {
+    border: 2px solid rgba(0, 0, 0, .1);
+}
+
+.bg-default {
+    background-color: var(--grey-200);
+}
+
+.bg-inverse {
+    background-color: var(--white);
+}
+
+.relative {
+    position: relative;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.inset-x-16 {
+    left: 1rem;
+    right: 1rem;
+}
+
+.top-16 {
+    top: 1rem;
+}
+
+.pr-32 {
+    padding-right: 2rem;
+}
+
+.pr-36 {
+    padding-right: 2.25rem;
+}
+
+.pr-40 {
+    padding-right: 2.5rem;
+}
+
+.line-clamp-1 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+}
+
+.line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+}
+
+.line-clamp-4 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+}
+
+.w-full {
+    width: 100%;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.rounded-md {
+    border-radius: 12px;
+}
+
+.outline-none {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}
+
+.focus\:outline-none:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}
+
+.text-light {
+    color: var(--grey-700);
+}
+
+.z-1 {
+    z-index: 1;
+}
+
+.z-10 {
+    z-index: 10;
+}
+
+.effect-height {
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    transition-property: height;
+}
+
+.h-0 {
+    height: 0rem;
+}
+
+.h-auto {
+    height: auto;
+}
+.pt-4 {
+    padding-top: 0.25rem;
+}
+.overflow-hidden {
+    overflow: hidden;
+}
+
+.grid {
+    display: grid;
+}
+
+.overflow-hidden {
+    overflow: hidden;
+}
+
+.rounded-lg {
+    border-radius: 16px;
+}
+
+.border-2 {
+    border-width: 2px;
+}
+
+.p-16 {
+    padding: 1rem;
+}
+
+.ml-auto {
+    margin-left: auto;
+}
+
+.mr-auto {
+    margin-right: auto;
+}
+
+.f-heading-05 {
+    font-family: var(--f-heading-05-fontFamily);
+    font-weight: var(--f-heading-05-fontWeight);
+    font-size: var(--f-heading-05-fontSize);
+    line-height: var(--f-heading-05-lineHeight);
+    letter-spacing: var(--f-heading-05-letterSpacing);
+}
+
+.f-heading-06 {
+    font-family: var(--f-heading-06-fontFamily);
+    font-weight: var(--f-heading-06-fontWeight);
+    font-size: var(--f-heading-06-fontSize);
+    line-height: var(--f-heading-06-lineHeight);
+    letter-spacing: var(--f-heading-06-letterSpacing);
+}
+
+.text-left {
+    text-align: left;
+}
+
+.text-center {
+    text-align: center;
+}

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

@@ -0,0 +1,222 @@
+import { sendAnalytics } from "../../utils/analytics";
+import { h } from "@stencil/core";
+/**
+ * `EdsAccordion` is a flexible, interactive component for expanding and collapsing content sections.
+ * It features a customizable header, optional description, and content area that can be dynamically expanded.
+ * This component supports a range of configurations, including background toggling, minimum height adjustments,
+ * and various styles to suit different layouts and display requirements.
+ *
+ * It includes an optional button or link element within the header, which can be customized for additional interactions.
+ *
+ * The `accordion` event is emitted when the accordion's expanded state changes, allowing parent components
+ * to track its open/close status.
+ *
+ * Key features include:
+ * - Header with customizable title
+ * - Expandable/collapsible content section
+ * - Background color switch on expand and hover
+ * - Compact layout option with reduced header height
+ * - Adjustable content height and text clamping
+ * - Emitted events for tracking changes in expansion state and context
+ */
+export class EdsAccordion {
+    constructor() {
+        /**
+         * Handles the click event on the accordion header to toggle expansion.
+         * Toggles the `isExpanded` state and emits the `accordion` event.
+         */
+        this.handleClick = () => {
+            var _a;
+            this.isExpanded = !this.isExpanded;
+            this.accordion.emit(this.isExpanded);
+            this.setPanelHeight();
+            sendAnalytics({
+                category: 'ui-component',
+                parentContext: null,
+                tag: this.el.tagName.toLowerCase(),
+                name: ((_a = this.heading) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+                action: this.isExpanded ? 'expanded' : 'collapsed'
+            });
+        };
+        /**
+         * Calculates and sets the panel height based on the content height
+         * and adjusts based on the `shortContent` and `isExpanded` states.
+         */
+        this.setPanelHeight = () => {
+            if (this.childContentRef) {
+                this.shortContent =
+                    this.wrapperRef.scrollWidth > 830 && !this.description
+                        ? this.childContentRef.scrollHeight <= 80
+                        : this.childContentRef.scrollHeight <= 20;
+                this.panelHeight = this.isExpanded && !this.shortContent ? this.childContentRef.scrollHeight : 0;
+            }
+            if (this.headerRef) {
+                this.headerHeight = this.headerRef.scrollHeight - 30;
+            }
+        };
+        this.heading = undefined;
+        this.description = undefined;
+        this.switchBg = true;
+        this.expanded = false;
+        this.clampText = true;
+        this.isExpanded = this.expanded;
+        this.panelHeight = 0;
+        this.shortContent = false;
+        this.headerHeight = 0;
+    }
+    /**
+     * Lifecycle method that sets up the initial panel height and adds a resize event listener
+     * to recalculate height on window resize.
+     */
+    componentDidLoad() {
+        this.setPanelHeight();
+        window.addEventListener('resize', this.setPanelHeight);
+    }
+    /**
+     * Lifecycle method that cleans up the resize event listener when the component is removed.
+     */
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.setPanelHeight);
+    }
+    /**
+     * Renders the accordion structure, including header, content, description, and any slotted content.
+     * Adjusts styles based on `switchBg`, `tiny`, `clampText`, and other props.
+     */
+    render() {
+        return (h("div", { key: 'd2fcce2468130200dd1516902a203c4ca8ae543f', ref: (el) => (this.wrapperRef = el), class: `flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
+          ${this.switchBg && this.isExpanded ? 'bg-inverse' : 'bg-default'} 
+          ${this.switchBg ? 'hover:bg-inverse' : ''}
+          ${this.description ? 'min-h-56' : ''}` }, h("h3", { key: 'f59a85e886736b483f6a311a00426340a36dcb71', ref: (el) => (this.headerRef = el), class: "mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40" }, this.heading), h("div", { key: '9fe1d99f46f3c066bbb1e8f4ef695fe87e8fad54', class: "ml-auto" }, h("eds-button", { key: '4d4c16a958df05f1e773fe74fa49647fc94766c7', id: "toggleAccordion", intent: "tertiary", "aria-expanded": this.isExpanded || this.shortContent, "aria-label": "Toggle accordion", "aria-controls": "accordionSection", class: `effect-color flex w-full items-center justify-between rounded-md outline-none focus:outline-none`, onClick: this.handleClick, icon: "chevron-down" })), h("div", { key: '5d84ffe8032834575d165f7a5e097539de73350f', class: `w-full`, style: Number.isFinite(this.headerHeight) ? { marginTop: `${this.headerHeight}px` } : {} }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: '1813aea1369b8883cd45088799f9715cf8fc0556', id: "accordionSection", role: "region", "aria-labelledby": "accordionHeader", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, h("div", { key: 'a9a95adbb819530f426045c55ca1a02f3a778f0a', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-4`, "aria-hidden": !this.isExpanded }, h("span", { key: '2518e3243e0bd199061ac255922d661e0558bdc8', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: '3f3ab74926e7e45d4aacc4c7003c05be3c6b82c3' })))))));
+    }
+    static get is() { return "eds-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-accordion.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the accordion, displayed in the header area"
+                },
+                "attribute": "title",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional description displayed above the main content"
+                },
+                "attribute": "description",
+                "reflect": false
+            },
+            "switchBg": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the background color on expand and hover"
+                },
+                "attribute": "switch-bg",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines if the accordion is expanded by default"
+                },
+                "attribute": "expanded",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "clampText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Clamps the text when the accordion is collapsed to prevent overflow"
+                },
+                "attribute": "clamp-text",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isExpanded": {},
+            "panelHeight": {},
+            "shortContent": {},
+            "headerHeight": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "accordion",
+                "name": "accordion",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the accordion toggles, indicating the new expanded/collapsed state"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}