@ebrains/components 0.9.0-beta → 0.9.1-beta

package/dist/stencil.config.js

@@ -2,6 +2,7 @@ import { reactOutputTarget } from "@stencil/react-output-target";
 import { vueOutputTarget } from "@stencil/vue-output-target";
 import { angularOutputTarget } from "@stencil/angular-output-target";
 import { inlineSvg } from "stencil-inline-svg";
+import path from "path";
 export const config = {
     env: {},
     namespace: 'components',
@@ -16,6 +17,20 @@ export const config = {
         {
             type: 'dist',
             esmLoaderPath: '../loader',
+            copy: [
+                {
+                    // README.md next to this config file
+                    src: path.resolve(__dirname, 'README.md'),
+                    // your stencil dist folder
+                    dest: path.resolve(__dirname, '../../dist/packages/components'),
+                },
+                {
+                    // README.md next to this config file
+                    src: path.resolve(__dirname, 'LICENSE'),
+                    // your stencil dist folder
+                    dest: path.resolve(__dirname, '../../dist/packages/components'),
+                }
+            ]
         },
         {
             type: 'docs-readme',
@@ -30,7 +45,7 @@ export const config = {
         },
         {
             type: 'dist-custom-elements',
-            includeGlobalScripts: false,
+            includeGlobalScripts: false
         },
         reactOutputTarget({
             componentCorePackage: '@ebrains/components',

package/dist/types/components/eds-accordion/eds-accordion.d.ts

@@ -22,7 +22,7 @@ export declare class EdsAccordion {
     /** Host element reference */
     el: HTMLElement;
     /** The title of the accordion, displayed in the header area */
-    title: string;
+    heading: string;
     /** Optional description displayed above the main content */
     description?: string;
     /** Toggles the background color on expand and hover */

package/dist/types/components/eds-modal/eds-modal.d.ts

@@ -16,7 +16,7 @@ export declare class EdsModal {
     /**
      * The title of the modal.
      */
-    title: string;
+    heading: string;
     /**
      * A boolean indicating whether the description should be truncated.
      * Default is `true`.

package/dist/types/components/eds-section/eds-section-heading/eds-section-heading.d.ts

@@ -8,6 +8,9 @@
  *
  * This component is suitable for structuring page sections with visually distinct and accessible headings.
  */
+/**
+ * @internal
+ */
 export declare class EdsSectionHeading {
     /**
      * The main title for the section. This is required and displayed prominently.

package/dist/types/components/eds-switch/eds-switch.d.ts

@@ -19,7 +19,7 @@ export declare class EdsSwitch {
     /**
      * Emitted when the switch is toggled.
      */
-    change: EventEmitter<boolean>;
+    toggle: EventEmitter<boolean>;
     private toggleSwitch;
     render(): any;
 }

package/dist/types/components/eds-tag/eds-tag.d.ts

@@ -1,6 +1,6 @@
 /**
  * `EdsTag` is a stylized label component designed to display short, categorical information.
- * It supports multiple visual styles defined by the `intent` prop.
+ * It supports multiple visual styles defined by the `intent` prop and three sizes.
  */
 export declare class EdsTag {
     /**
@@ -11,5 +11,9 @@ export declare class EdsTag {
      * The visual style or intent of the tag.
      */
     intent: 'default' | 'strong' | 'accent' | 'weak' | 'inverse' | 'inverse-strong';
+    /**
+     * The size of the tag: small, medium, or large.
+     */
+    size: 'small' | 'medium' | 'large';
     render(): any;
 }

package/dist/types/components/eds-tag/eds-tag.stories.d.ts

@@ -11,10 +11,16 @@ declare const _default: {
             options: string[];
             description: string;
         };
+        size: {
+            control: string;
+            options: string[];
+            description: string;
+        };
     };
     args: {
         label: string;
         intent: string;
+        size: string;
     };
     parameters: {};
 };
@@ -24,5 +30,6 @@ export declare const Default: {
     args: {
         label: string;
         intent: string;
+        size: string;
     };
 };

package/dist/types/components.d.ts

@@ -71,13 +71,13 @@ export namespace Components {
          */
         "expanded": boolean;
         /**
-          * Toggles the background color on expand and hover
+          * The title of the accordion, displayed in the header area
          */
-        "switchBg": boolean;
+        "heading": string;
         /**
-          * The title of the accordion, displayed in the header area
+          * Toggles the background color on expand and hover
          */
-        "title": string;
+        "switchBg": boolean;
     }
     /**
      * `EdsAlert` is a versatile alert component designed for displaying contextual messages.
@@ -1409,11 +1409,11 @@ export namespace Components {
           * When true, the notice is forced to show regardless of cookies/session.
          */
         "forceShow": boolean;
-        "optOutMessage": string;
         /**
           * The title displayed in the notice.
          */
-        "title": string;
+        "heading": string;
+        "optOutMessage": string;
     }
     /**
      * `EdsModal` is a modal dialog component that can be toggled open or closed.
@@ -1428,6 +1428,10 @@ export namespace Components {
           * Closes the modal.
          */
         "close": () => Promise<void>;
+        /**
+          * The title of the modal.
+         */
+        "heading": string;
         /**
           * Opens the modal.
          */
@@ -1436,10 +1440,6 @@ export namespace Components {
           * Specifies the position of the modal.  Acceptable values are: - `"middle"` (default): The modal is centered both vertically and horizontally. - `"top"`: The modal is positioned near the top of the viewport. - `"bottom"`: The modal is positioned near the bottom of the viewport. - `"left"`: The modal is positioned on the left side of the viewport, centered vertically. - `"right"`: The modal is positioned on the right side of the viewport, centered vertically.
          */
         "position": 'middle' | 'top' | 'bottom' | 'left' | 'right';
-        /**
-          * The title of the modal.
-         */
-        "title": string;
         /**
           * Toggles the modal open or closed.
          */
@@ -1546,14 +1546,6 @@ export namespace Components {
          */
         "tag": 'div' | 'section';
     }
-    /**
-     * `EdsSectionHeading` is a configurable component for displaying section titles with customizable headings and optional container styling.
-     * Key Features:
-     * - Allows dynamic selection of HTML heading level (e.g., `h1`, `h2`) for semantic structure.
-     * - Supports wrapping the heading in a container with configurable padding.
-     * - Can be used within sections to provide consistent and accessible headings.
-     * This component is suitable for structuring page sections with visually distinct and accessible headings.
-     */
     interface EdsSectionHeading {
         /**
           * The HTML heading level for the section title (e.g., 'h1', 'h2', etc.). Default is 'h2'.
@@ -1584,7 +1576,7 @@ export namespace Components {
         /**
           * Social Network custom title to display
          */
-        "title": string;
+        "heading": string;
     }
     interface EdsSpinner {
         /**
@@ -1730,7 +1722,7 @@ export namespace Components {
         /**
           * The Tabs identifier
          */
-        "id": string;
+        "identifier": string;
         /**
           * Aria label for the navigation
          */
@@ -1742,7 +1734,7 @@ export namespace Components {
     }
     /**
      * `EdsTag` is a stylized label component designed to display short, categorical information.
-     * It supports multiple visual styles defined by the `intent` prop.
+     * It supports multiple visual styles defined by the `intent` prop and three sizes.
      */
     interface EdsTag {
         /**
@@ -1753,6 +1745,10 @@ export namespace Components {
           * The label to be displayed inside the tag.
          */
         "label": string;
+        /**
+          * The size of the tag: small, medium, or large.
+         */
+        "size": 'small' | 'medium' | 'large';
     }
     interface EdsTimeline {
         /**
@@ -2811,14 +2807,6 @@ declare global {
         prototype: HTMLEdsSectionCoreElement;
         new (): HTMLEdsSectionCoreElement;
     };
-    /**
-     * `EdsSectionHeading` is a configurable component for displaying section titles with customizable headings and optional container styling.
-     * Key Features:
-     * - Allows dynamic selection of HTML heading level (e.g., `h1`, `h2`) for semantic structure.
-     * - Supports wrapping the heading in a container with configurable padding.
-     * - Can be used within sections to provide consistent and accessible headings.
-     * This component is suitable for structuring page sections with visually distinct and accessible headings.
-     */
     interface HTMLEdsSectionHeadingElement extends Components.EdsSectionHeading, HTMLStencilElement {
     }
     var HTMLEdsSectionHeadingElement: {
@@ -2893,7 +2881,7 @@ declare global {
         new (): HTMLEdsStepsV2Element;
     };
     interface HTMLEdsSwitchElementEventMap {
-        "change": boolean;
+        "toggle": boolean;
     }
     interface HTMLEdsSwitchElement extends Components.EdsSwitch, HTMLStencilElement {
         addEventListener<K extends keyof HTMLEdsSwitchElementEventMap>(type: K, listener: (this: HTMLEdsSwitchElement, ev: EdsSwitchCustomEvent<HTMLEdsSwitchElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2955,7 +2943,7 @@ declare global {
     };
     /**
      * `EdsTag` is a stylized label component designed to display short, categorical information.
-     * It supports multiple visual styles defined by the `intent` prop.
+     * It supports multiple visual styles defined by the `intent` prop and three sizes.
      */
     interface HTMLEdsTagElement extends Components.EdsTag, HTMLStencilElement {
     }
@@ -3280,6 +3268,10 @@ declare namespace LocalJSX {
           * Determines if the accordion is expanded by default
          */
         "expanded"?: boolean;
+        /**
+          * The title of the accordion, displayed in the header area
+         */
+        "heading"?: string;
         /**
           * Event emitted when the accordion toggles, indicating the new expanded/collapsed state
          */
@@ -3288,10 +3280,6 @@ declare namespace LocalJSX {
           * Toggles the background color on expand and hover
          */
         "switchBg"?: boolean;
-        /**
-          * The title of the accordion, displayed in the header area
-         */
-        "title"?: string;
     }
     /**
      * `EdsAlert` is a versatile alert component designed for displaying contextual messages.
@@ -4671,15 +4659,15 @@ declare namespace LocalJSX {
           * When true, the notice is forced to show regardless of cookies/session.
          */
         "forceShow"?: boolean;
+        /**
+          * The title displayed in the notice.
+         */
+        "heading"?: string;
         /**
           * Event emitted when the rating is changed.
          */
         "onConsent"?: (event: EdsMatomoNoticeCustomEvent<'in' | 'out' | 'defer'>) => void;
         "optOutMessage"?: string;
-        /**
-          * The title displayed in the notice.
-         */
-        "title"?: string;
     }
     /**
      * `EdsModal` is a modal dialog component that can be toggled open or closed.
@@ -4691,13 +4679,13 @@ declare namespace LocalJSX {
      */
     interface EdsModal {
         /**
-          * Specifies the position of the modal.  Acceptable values are: - `"middle"` (default): The modal is centered both vertically and horizontally. - `"top"`: The modal is positioned near the top of the viewport. - `"bottom"`: The modal is positioned near the bottom of the viewport. - `"left"`: The modal is positioned on the left side of the viewport, centered vertically. - `"right"`: The modal is positioned on the right side of the viewport, centered vertically.
+          * The title of the modal.
          */
-        "position"?: 'middle' | 'top' | 'bottom' | 'left' | 'right';
+        "heading"?: string;
         /**
-          * The title of the modal.
+          * Specifies the position of the modal.  Acceptable values are: - `"middle"` (default): The modal is centered both vertically and horizontally. - `"top"`: The modal is positioned near the top of the viewport. - `"bottom"`: The modal is positioned near the bottom of the viewport. - `"left"`: The modal is positioned on the left side of the viewport, centered vertically. - `"right"`: The modal is positioned on the right side of the viewport, centered vertically.
          */
-        "title"?: string;
+        "position"?: 'middle' | 'top' | 'bottom' | 'left' | 'right';
         /**
           * A boolean indicating whether the description should be truncated. Default is `true`.
          */
@@ -4799,14 +4787,6 @@ declare namespace LocalJSX {
          */
         "tag"?: 'div' | 'section';
     }
-    /**
-     * `EdsSectionHeading` is a configurable component for displaying section titles with customizable headings and optional container styling.
-     * Key Features:
-     * - Allows dynamic selection of HTML heading level (e.g., `h1`, `h2`) for semantic structure.
-     * - Supports wrapping the heading in a container with configurable padding.
-     * - Can be used within sections to provide consistent and accessible headings.
-     * This component is suitable for structuring page sections with visually distinct and accessible headings.
-     */
     interface EdsSectionHeading {
         /**
           * The HTML heading level for the section title (e.g., 'h1', 'h2', etc.). Default is 'h2'.
@@ -4837,7 +4817,7 @@ declare namespace LocalJSX {
         /**
           * Social Network custom title to display
          */
-        "title"?: string;
+        "heading"?: string;
     }
     interface EdsSpinner {
         /**
@@ -4939,7 +4919,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the switch is toggled.
          */
-        "onChange"?: (event: EdsSwitchCustomEvent<boolean>) => void;
+        "onToggle"?: (event: EdsSwitchCustomEvent<boolean>) => void;
     }
     /**
      * `EdsTable` is a customizable data table component with support for dynamic data fetching, column configuration, pagination, and search functionality.
@@ -4999,7 +4979,7 @@ declare namespace LocalJSX {
         /**
           * The Tabs identifier
          */
-        "id"?: string;
+        "identifier"?: string;
         /**
           * Aria label for the navigation
          */
@@ -5016,7 +4996,7 @@ declare namespace LocalJSX {
     }
     /**
      * `EdsTag` is a stylized label component designed to display short, categorical information.
-     * It supports multiple visual styles defined by the `intent` prop.
+     * It supports multiple visual styles defined by the `intent` prop and three sizes.
      */
     interface EdsTag {
         /**
@@ -5027,6 +5007,10 @@ declare namespace LocalJSX {
           * The label to be displayed inside the tag.
          */
         "label": string;
+        /**
+          * The size of the tag: small, medium, or large.
+         */
+        "size"?: 'small' | 'medium' | 'large';
     }
     interface EdsTimeline {
         /**
@@ -5552,14 +5536,6 @@ declare module "@stencil/core" {
              * This component is suitable for organizing content into clearly defined sections with semantic HTML structure.
              */
             "eds-section-core": LocalJSX.EdsSectionCore & JSXBase.HTMLAttributes<HTMLEdsSectionCoreElement>;
-            /**
-             * `EdsSectionHeading` is a configurable component for displaying section titles with customizable headings and optional container styling.
-             * Key Features:
-             * - Allows dynamic selection of HTML heading level (e.g., `h1`, `h2`) for semantic structure.
-             * - Supports wrapping the heading in a container with configurable padding.
-             * - Can be used within sections to provide consistent and accessible headings.
-             * This component is suitable for structuring page sections with visually distinct and accessible headings.
-             */
             "eds-section-heading": LocalJSX.EdsSectionHeading & JSXBase.HTMLAttributes<HTMLEdsSectionHeadingElement>;
             /**
              * Component representing a list of social network links for EBRAINS.
@@ -5592,7 +5568,7 @@ declare module "@stencil/core" {
             "eds-tabs": LocalJSX.EdsTabs & JSXBase.HTMLAttributes<HTMLEdsTabsElement>;
             /**
              * `EdsTag` is a stylized label component designed to display short, categorical information.
-             * It supports multiple visual styles defined by the `intent` prop.
+             * It supports multiple visual styles defined by the `intent` prop and three sizes.
              */
             "eds-tag": LocalJSX.EdsTag & JSXBase.HTMLAttributes<HTMLEdsTagElement>;
             "eds-timeline": LocalJSX.EdsTimeline & JSXBase.HTMLAttributes<HTMLEdsTimelineElement>;

package/dist/types/shared-ui/eds-matomo-notice/eds-matomo-notice.d.ts

@@ -3,7 +3,7 @@ export declare class EdsMatomoNotice {
     /**
      * The title displayed in the notice.
      */
-    title: string;
+    heading: string;
     /**
      * The description displayed in the notice.
      */

package/dist/types/shared-ui/eds-social-networks/eds-social-networks.d.ts

@@ -6,7 +6,7 @@ export declare class EdsSocialNetworks {
     /**
      * Social Network custom title to display
      */
-    title: string;
+    heading: string;
     /**
      * Array of social network objects, each containing label, URL, and icon.
      * These are used to render the social network links.

package/dist/types/shared-ui/eds-tabs/eds-tabs.d.ts

@@ -11,7 +11,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export declare class EdsTabs {
     el: HTMLElement;
     /** The Tabs identifier */
-    id: string;
+    identifier: string;
     /** Aria label for the navigation */
     navAriaLabel: string;
     /** JSON string for tabs data */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebrains/components",
-  "version": "0.9.0-beta",
+  "version": "0.9.1-beta",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",
@@ -14,7 +14,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@ebrains/assets":"0.6.0-beta",
-    "@ebrains/svgs":"0.6.0-beta"
+    "@ebrains/assets":"0.6.1-beta",
+    "@ebrains/svgs":"0.6.1-beta"
   }
 }

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

@@ -1,139 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2f63169d.js');
-const sharedUtils = require('./sharedUtils-8e287250.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 EdsBreadcrumbStyle0 = edsBreadcrumbCss;
-
-const EdsBreadcrumb = class {
-    constructor(hostRef) {
-        index.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 = 3;
-                this.isSmallScreen = true;
-            }
-            else if (width <= 2200) {
-                this.maxVisibleItems = 4;
-                this.isSmallScreen = false;
-            }
-            else {
-                this.maxVisibleItems = 6;
-                this.isSmallScreen = false;
-            }
-        };
-        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 = sharedUtils.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 (index.h("nav", { key: '75bb5629a10de2a2a7bd0b2bbef04e5f699f5fe2', "aria-label": "Breadcrumb" }, index.h("ol", { key: '7a5cc115b70d60bc878aa3d865802662f30948c1', class: "flex items-center space-x-2" }, itemsToRender.map((item, index$1) => {
-            const isLast = index$1 === itemsToRender.length - 1;
-            return (index.h("li", { class: "flex items-center" }, !item.isHidden ? ((() => {
-                const { displayLabel, fullLabel } = this.getLabels(item, isLast);
-                return (index.h("eds-link", Object.assign({ label: displayLabel, url: item.url, intent: this.intent, current: isLast, "aria-label": fullLabel, size: "small", "icon-small": "false" }, (isLast ? { 'aria-current': 'page' } : {}))));
-            })()) : (index.h("span", { class: "truncate px-2", "aria-hidden": "true" }, "...")), !isLast && !item.isHidden && (index.h("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }))));
-        }))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "items": ["parseItems"]
-    }; }
-};
-EdsBreadcrumb.style = EdsBreadcrumbStyle0;
-
-exports.eds_breadcrumb = EdsBreadcrumb;

package/dist/components/p-032f9f64.entry.js

@@ -1 +0,0 @@
-import{r as e,c as i,h as t,g as n}from"./p-cccacbd3.js";import{s as o}from"./p-13efafb9.js";const r=class{constructor(t){e(this,t),this.accordion=i(this,"accordion",7),this.handleClick=()=>{var e;this.isExpanded=!this.isExpanded,this.accordion.emit(this.isExpanded),this.setPanelHeight(),o({category:"ui-component",parentContext:null,tag:this.el.tagName.toLowerCase(),name:(null===(e=this.title)||void 0===e?void 0:e.toLowerCase())||"",action:this.isExpanded?"expanded":"collapsed"})},this.setPanelHeight=()=>{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),this.headerRef&&(this.headerHeight=this.headerRef.scrollHeight-30)},this.title=void 0,this.description=void 0,this.switchBg=!0,this.expanded=!1,this.clampText=!0,this.isExpanded=this.expanded,this.panelHeight=0,this.shortContent=!1,this.headerHeight=0}componentDidLoad(){this.setPanelHeight(),window.addEventListener("resize",this.setPanelHeight)}disconnectedCallback(){window.removeEventListener("resize",this.setPanelHeight)}render(){return t("div",{key:"db04fa9db1f53e95a7ac758656b32e75281f5749",ref:e=>this.wrapperRef=e,class:`flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 \n          ${this.switchBg&&this.isExpanded?"bg-inverse":"bg-default"} \n          ${this.switchBg?"hover:bg-inverse":""}\n          ${this.description?"min-h-56":""}`},t("h3",{key:"a6fc54388e0eab3ddfb81dfb5907c55a1d6d40e1",ref:e=>this.headerRef=e,class:"mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40"},this.title),t("div",{key:"96a1e4ae2849300e6cd3c737357a7e6e9a0439d5",class:"ml-auto"},t("eds-button",{key:"ca53eed446f9bc7a96182da9e9e3a45b1c63dba2",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"})),t("div",{key:"2e1c52759fa07ecf63fed47f79c0384a79cd81c6",class:"w-full",style:Number.isFinite(this.headerHeight)?{marginTop:`${this.headerHeight}px`}:{}},this.description?t("span",{class:"text-light "+(!this.isExpanded&&this.clampText?"line-clamp-1":"")},this.description):null,t("section",{key:"6ca819b2d9cb989f0942b98f32cd7243771b6ae9",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"}},t("div",{key:"aa33297747aca21c3b3ed33eb3eabc2998192aeb",ref:e=>this.childContentRef=e,class:"accordion-content effect-color pt-4","aria-hidden":!this.isExpanded},t("span",{key:"af5b6e2218419a3c95e21e7e432696b073b7752b",class:!this.isExpanded&&this.clampText?"line-clamp-2":""},t("slot",{key:"2a9d1ef2d2537c831b28fbecb02a6125a1412019"}))))))}get el(){return n(this)}};r.style="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}";export{r as eds_accordion}

package/dist/components/p-058cf100.entry.js

@@ -1 +0,0 @@
-import{r as e,h as t}from"./p-cccacbd3.js";import{c as i}from"./p-112122d6.js";const a=class{constructor(t){e(this,t),this.description=void 0,this.descClass="f-ui-03-light",this.truncate=!0,this.truncateLines="3"}getTruncateClass(){return this.truncate&&this.truncateLines?`line-clamp-${this.truncateLines}`:""}render(){return t("p",{key:"96ba520be4ef9acf871a6e992d5ea74aaf17c962",class:`text-light ${this.descClass}`},t("span",{key:"951358bd0c992426175e3c1b3c580f2f9be4027f",class:this.getTruncateClass()},this.description))}};a.style=".f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.text-light{color:var(--grey-700)}.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}";const r=class{constructor(t){e(this,t),this.url=void 0,this.titleClass=void 0,this.headingLevel="h3",this.externalLink=!1,this.cardTitle=void 0,this.hierarchy=!0}getTitleClass(){return`f-heading-${(this.hierarchy?{h1:"05",h2:"05",h3:"05",h4:"05",h5:"05",h6:"06"}:{h1:"01",h2:"02",h3:"03",h4:"04",h5:"05",h6:"06"})[this.headingLevel]}`}render(){return t(this.headingLevel,{key:"57ce97f35ee52623d32fac0b6b1a576ca8b5aa70",class:this.getTitleClass()},t("a",{key:"60fb313d2b8753974658f73aaddd359a63548a79",class:"break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none",href:this.url,target:this.externalLink?"_blank":void 0,rel:this.externalLink?"noopener noreferrer":void 0},this.cardTitle))}};r.style="a{all:unset;display:inline;color:inherit;text-decoration:none;cursor:pointer}h1,h2,h3,h4,h5,h6{margin:0}.f-heading-01{font-family:var(--f-heading-01-fontFamily);font-weight:var(--f-heading-01-fontWeight);font-size:var(--f-heading-01-fontSize);line-height:var(--f-heading-01-lineHeight);letter-spacing:var(--f-heading-01-letterSpacing)}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.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)}.break-words{overflow-wrap:break-word}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:z-10::after{z-index:10}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}";const n=i(["f-ui-05 py-1 px-4 border-2 rounded-pill"],{variants:{intent:{default:"border-default",strong:"text-inverse bg-strongest border-default",accent:"text-[#0034CB] border-[#0034CB]",weak:"text-light bg-strongest-soft border-transparent",inverse:"border-inverse text-inverse","inverse-strong":"bg-inverse border-inverse text-lighter"}},defaultVariants:{intent:"default"}}),o=class{constructor(t){e(this,t),this.label=void 0,this.intent="default"}render(){const e=n({intent:this.intent});return t("span",{key:"55a6039b040436e5dded9aaf1007668b97091ba3",class:e},this.label)}};o.style=".f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.py-1{padding-top:0.0625rem;padding-bottom:0.0625rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.border-2{border-width:2px}.rounded-pill{border-radius:100px}.border-default{border:2px solid var(--black)}.text-inverse{color:var(--white)}.bg-strongest{background-color:var(--black)}.text-\\[\\#0034CB\\]{--tw-text-opacity:1;color:rgb(0 52 203 / var(--tw-text-opacity))}.border-\\[\\#0034CB\\]{--tw-border-opacity:1;border:2px solid rgb(0 52 203 / var(--tw-border-opacity))}.text-light{color:var(--grey-700)}.bg-strongest-soft{background-color:rgba(0, 0, 0, .05)}.border-transparent{border-color:var(--transparent)}.border-inverse{border-color:var(--white)}.bg-inverse{background-color:var(--white)}.text-lighter{color:var(--grey-600)}";export{a as eds_card_desc,r as eds_card_title,o as eds_tag}

package/dist/components/p-1b4e9576.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as a,g as s}from"./p-cccacbd3.js";import{m as n,a as o}from"./p-13efafb9.js";const r=class{constructor(a){t(this,a),this.consent=e(this,"consent",7),this.title="Analytics Consent",this.description="We use anonymous analytics to improve our services. No data is collected unless you give your consent. If you don't wish to send data right now, you can always re-enable analytics later by clicking the Cookies Preference button in the footer. However, by opting in today, you're joining a community that shapes our product's future—all while keeping your data completely anonymous.",this.optOutMessage="You are already part of our community, and your anonymous data helps shape our product's future! Rest assured, your privacy is fully protected.",this.forceShow=!1,this.showNotice=!0}toggleCookiesConsent(){this.showNotice=!this.showNotice}hasCookieConsent(){return!!document.cookie.split("; ").find((t=>t.startsWith("mtm_consent=")))}optedOut(){return!!document.cookie.split("; ").find((t=>t.startsWith("mtm_consent_removed")))}getStorageKey(){return`${window.location.host}-matomo-deferred`}componentWillLoad(){if("out"===localStorage.getItem("matomo-consent-given")||this.optedOut())this.showNotice=!1;else if(this.forceShow)this.showNotice=!0;else if(this.hasCookieConsent())this.showNotice=!1;else{const t=sessionStorage.getItem(this.getStorageKey());this.showNotice=!t}}componentDidLoad(){this.el.shadowRoot.querySelectorAll("eds-button").forEach((t=>{this.emitContext(t)}))}emitContext(t){const e=new CustomEvent("parentContext",{detail:{componentName:this.el.tagName.toLowerCase(),identifier:null}});t.dispatchEvent(e)}optInAnalytics(){n(),localStorage.removeItem("matomo-consent-given"),this.hideNotice(),this.consent.emit("in")}optOutAnalytics(){o(),this.hideNotice(),this.consent.emit("out")}noThanks(){localStorage.setItem("matomo-consent-given","out"),this.hideNotice()}deferDecision(){sessionStorage.setItem(this.getStorageKey(),"true"),this.hideNotice(),this.consent.emit("defer")}keepMeIn(){this.hideNotice()}hideNotice(){this.showNotice=!1}render(){return this.showNotice?a("div",{class:"fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center"},a("eds-accordion",{title:this.title,description:this.hasCookieConsent()?this.optOutMessage:this.description,switchBg:!0,expanded:!0},this.hasCookieConsent()?a("div",{class:"flex items-center gap-4"},this.optedOut()?a("eds-button",{intent:"primary",label:"Opt me in again","aria-label":"Opt me in again",onClick:()=>this.optInAnalytics()}):a("eds-button",{intent:"primary",label:"Keep Me In","aria-label":"Keep Me In",onClick:()=>this.keepMeIn()}),a("eds-button",{intent:"ghostInverse",label:"Opt-out","aria-label":"Opt-out from analytics",onClick:()=>this.optOutAnalytics()})):a("div",{class:"flex items-center gap-4"},a("eds-button",{intent:"primary",label:"I agree","aria-label":"Opt-in for analytics",onClick:()=>this.optInAnalytics()}),a("eds-button",{intent:"ghost",label:"No, thanks","aria-label":"Opt-out from analytics",onClick:()=>this.noThanks()}),a("eds-button",{intent:"ghost",label:"Ask me later","aria-label":"Defer analytics decision",onClick:()=>this.deferDecision()})))):null}get el(){return s(this)}};r.style=".fixed{position:fixed}.absolute{position:absolute}.w-full{width:100%}.bottom-0{bottom:0rem}.bottom-4{bottom:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.z-10{z-index:10}.z-\\[999999\\]{z-index:999999}.left-0{left:0rem}.left-1\\/2{left:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex{display:flex}.gap-12{gap:0.75rem}.gap-20{gap:1.25rem}.gap-4{gap:0.25rem}@media (min-width: 750px){.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}";export{r as eds_matomo_notice}