@ebrains/react 0.4.0-alpha.0 → 0.6.0-alpha.0

package/eds-card-section.entry.esm.js

@@ -1,70 +0,0 @@
-import { r as registerInstance, h } from './index.esm2.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const edsCardSectionCss = ".w-full{width:100%}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-col-span-12{--container-grid-columns:12;grid-column:span 12 / span 12}.gap-y-4{row-gap:0.25rem}.gap-y-8{row-gap:0.5rem}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:gap-y-12{row-gap:0.75rem}.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 750px){.md\\:grid-col-span-4{--container-grid-columns:4;grid-column:span 4 / span 4}.md\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.md\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.md\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.md\\:w-10-cols>*{--container-grid-columns:10}}@media (min-width: 900px){.lg\\:grid-col-span-5{--container-grid-columns:5;grid-column:span 5 / span 5}.lg\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.lg\\:grid-col-start-7{grid-column-start:7}.lg\\:w-8-cols{width:calc(((8 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.lg\\:w-8-cols{width:calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.lg\\:w-8-cols>*{--container-grid-columns:8}.lg\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.lg\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.lg\\:w-10-cols>*{--container-grid-columns:10}}@media (min-width: 900px){.lg\\:order-last{order:9999}.lg\\:order-none{order:0}.lg\\:mt-0{margin-top:0rem}.lg\\:block{display:block}.lg\\:flex{display:flex}.lg\\:hidden{display:none}.lg\\:w-\\[150px\\]{width:150px}.lg\\:w-auto{width:auto}.lg\\:max-w-\\[720px\\]{max-width:720px}.lg\\:flex-row{flex-direction:row}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:gap-y-16{row-gap:1rem}.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}.lg\\:\\!pl-12{padding-left:0.75rem !important}.lg\\:\\!pr-12{padding-right:0.75rem !important}}";
-const EdsCardSectionStyle0 = edsCardSectionCss;
-const EdsCardSection = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.cards = [];
-    this.cols = 4;
-  }
-  /**
-   * Parses the `cards` JSON string prop into an array of card objects.
-   * If parsing fails, returns an empty array.
-   *
-   * @returns {any[]} An array of parsed card objects.
-   */
-  get parsedCards() {
-    // If it's already an array, return it immediately.
-    if (Array.isArray(this.cards)) {
-      return this.cards;
-    }
-    if (typeof this.cards === 'object') {
-      return this.cards;
-    } else if (typeof this.cards === 'string') {
-      try {
-        return JSON.parse(this.cards);
-      } catch (e) {
-        // eslint-disable-next-line
-        console.error('Error parsing cards prop:', e);
-        return [];
-      }
-    }
-    return [];
-  }
-  /**
-   * Renders the card section as a grid layout.
-   * Each parsed card object is mapped to an `<eds-card-generic>` component,
-   * displaying card details such as title, description, avatar, etc.
-   *
-   * @returns {JSX.Element} The rendered section containing a list of cards.
-   */
-  render() {
-    return h("section", {
-      key: 'da139da167230819e494a6426c2431f209a2e557',
-      class: "w-full"
-    }, h("ul", {
-      key: '3e8affe5c9aee91c4487480c72c437339265101a',
-      class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16"
-    }, this.parsedCards.map(card => h("li", {
-      class: `grid-col-span-12 md:grid-col-span-${this.cols} flex flex-col`
-    }, h("eds-card-generic", {
-      cardTitle: card.title,
-      description: card.description,
-      avatar: card.avatar,
-      headingLevel: card.headingLevel,
-      tags: card.tags,
-      url: card.url,
-      bg: card.bg,
-      tiny: card.tiny,
-      image: card.image,
-      withHover: card.withHover
-    })))));
-  }
-};
-EdsCardSection.style = EdsCardSectionStyle0;
-
-export { EdsCardSection as eds_card_section };

package/eds-matomo-notice.entry.esm.js

@@ -1,129 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { t as toast } from './toastManager-d9eee791.esm.js';
-import { m as matomoOptIn } from './color-bb472c37.esm.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-import './index-39c58238.esm.js';
-
-const edsMatomoNoticeCss = ".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}.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))}}";
-const EdsMatomoNoticeStyle0 = edsMatomoNoticeCss;
-const EdsMatomoNotice = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.title = 'Analytics Consent';
-    this.description = 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.';
-    this.showNotice = true;
-  }
-  /**
-   * Lifecycle method called before the component is rendered.
-   * Checks for the presence of the "mtm_consent" cookie to determine
-   * if the notice should be displayed.
-   */
-  componentWillLoad() {
-    this.checkConsentCookie();
-  }
-  /**
-   * Lifecycle method called after the component has been rendered.
-   * Emits `parentContext` events for each `eds-button` in the shadow DOM.
-   */
-  componentDidLoad() {
-    const btns = this.el.shadowRoot.querySelectorAll('eds-button');
-    btns.forEach(b => {
-      this.emitContext(b);
-    });
-  }
-  /**
-   * Emits a custom `parentContext` event for a given button element.
-   * This can be used to provide context information about the component.
-   *
-   * @param linkElement - The button 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);
-  }
-  /**
-   * Checks if the Matomo "mtm_consent" cookie exists in the browser.
-   * If the cookie is found, the notice is hidden.
-   */
-  checkConsentCookie() {
-    const consentCookie = document.cookie.split('; ').find(row => row.startsWith('mtm_consent='));
-    //this.showNotice = !consentCookie;
-    const sessionDeferred = sessionStorage.getItem('matomo-deferred');
-    this.showNotice = !consentCookie && !sessionDeferred;
-  }
-  /**
-   * Handles user consent for analytics tracking.
-   * Calls the `matomoOptIn` utility and shows a success toast notification.
-   */
-  optInAnalytics() {
-    matomoOptIn();
-    toast.show('You have opted in to analytics.', 'success');
-    this.hideNotice();
-  }
-  /**
-   * Handles user opt-out from analytics tracking.
-   * Calls the `matomoOptOut` utility and shows a warning toast notification.
-   
-  private optOutAnalytics() {
-    matomoOptOut();
-    toast.show('You have opted out of analytics.', 'warning');
-    this.hideNotice();
-  }*/
-  /**
-   * Handles "Ask me later" action by storing a session storage entry
-   * and hiding the notice for the rest of the session.
-   */
-  deferDecision() {
-    sessionStorage.setItem('matomo-deferred', 'true');
-    toast.show('You can decide later.', 'warning');
-    this.hideNotice();
-  }
-  /**
-   * Hides the notice by updating the `showNotice` state.
-   */
-  hideNotice() {
-    this.showNotice = false;
-  }
-  /**
-   * Renders the Matomo consent notice with user options.
-   * Includes an accordion for the description and two buttons for user consent.
-   */
-  render() {
-    if (!this.showNotice) {
-      return null;
-    }
-    return h("div", {
-      class: "fixed bottom-0 p-8 z-10 grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center"
-    }, h("eds-accordion", {
-      title: this.title,
-      description: this.description,
-      switchBg: true,
-      expanded: true
-    }, h("div", {
-      class: "flex items-center gap-4"
-    }, h("eds-button", {
-      intent: "primary",
-      label: "Yes, I agree",
-      "aria-label": "Opt-in for analytics",
-      onClick: () => this.optInAnalytics()
-    }), h("eds-button", {
-      intent: "ghost",
-      label: "Ask me later",
-      "aria-label": "Defer analytics decision",
-      onClick: () => this.deferDecision()
-    }))));
-  }
-  get el() {
-    return getElement(this);
-  }
-};
-EdsMatomoNotice.style = EdsMatomoNoticeStyle0;
-
-export { EdsMatomoNotice as eds_matomo_notice };