@ebrains/react 0.9.0-beta → 0.9.2-beta

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

@@ -1,162 +0,0 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import { m as matomoOptIn, a as matomoOptOut } from './analytics-44b1416b.esm.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-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}.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))}}";
-const EdsMatomoNoticeStyle0 = edsMatomoNoticeCss;
-const EdsMatomoNotice = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.consent = createEvent(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 = false;
-    this.showNotice = true;
-  }
-  /**
-   * Listens for global custom events to open the matomo-consent.
-   */
-  toggleCookiesConsent() {
-    this.showNotice = !this.showNotice;
-  }
-  /**
-   * Checks if the consent cookie exists.
-   */
-  hasCookieConsent() {
-    return !!document.cookie.split('; ').find(row => row.startsWith('mtm_consent='));
-  }
-  /**
-   * Checks if the user has opted out after has opted in.
-   */
-  optedOut() {
-    return !!document.cookie.split('; ').find(row => row.startsWith('mtm_consent_removed'));
-  }
-  /**
-   * Generate a unique storage key based on appId or the app's domain.
-   */
-  getStorageKey() {
-    return `${window.location.host}-matomo-deferred`;
-  }
-  /**
-   * Check cookies and sessionStorage (unless forceShow is true) to decide if the notice should be shown.
-   */
-  componentWillLoad() {
-    // If a decision has been made previously (opted in or out), don't show the notice.
-    const consentGiven = localStorage.getItem('matomo-consent-given');
-    if (consentGiven === 'out' || this.optedOut()) {
-      this.showNotice = false;
-      return;
-    }
-    if (this.forceShow) {
-      // If forceShow is true, always show the notice
-      this.showNotice = true;
-    } else {
-      // If user has already consented, hide the notice
-      // eslint-disable-next-line
-      if (this.hasCookieConsent()) {
-        this.showNotice = false;
-      } else {
-        // Otherwise check if user deferred in this session
-        const sessionDeferred = sessionStorage.getItem(this.getStorageKey());
-        this.showNotice = !sessionDeferred;
-      }
-    }
-  }
-  componentDidLoad() {
-    const btns = this.el.shadowRoot.querySelectorAll('eds-button');
-    btns.forEach(b => {
-      this.emitContext(b);
-    });
-  }
-  emitContext(linkElement) {
-    const event = new CustomEvent('parentContext', {
-      detail: {
-        componentName: this.el.tagName.toLowerCase(),
-        identifier: null
-      }
-    });
-    linkElement.dispatchEvent(event);
-  }
-  optInAnalytics() {
-    matomoOptIn();
-    localStorage.removeItem('matomo-consent-given');
-    this.hideNotice();
-    this.consent.emit('in');
-  }
-  optOutAnalytics() {
-    matomoOptOut();
-    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 = false;
-  }
-  render() {
-    if (!this.showNotice) {
-      return null;
-    }
-    return h("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"
-    }, h("eds-accordion", {
-      title: this.title,
-      description: this.hasCookieConsent() ? this.optOutMessage : this.description,
-      switchBg: true,
-      expanded: true
-    }, this.hasCookieConsent() ? h("div", {
-      class: "flex items-center gap-4"
-    }, this.optedOut() ? h("eds-button", {
-      intent: "primary",
-      label: "Opt me in again",
-      "aria-label": "Opt me in again",
-      onClick: () => this.optInAnalytics()
-    }) : h("eds-button", {
-      intent: "primary",
-      label: "Keep Me In",
-      "aria-label": "Keep Me In",
-      onClick: () => this.keepMeIn()
-    }), h("eds-button", {
-      intent: "ghostInverse",
-      label: "Opt-out",
-      "aria-label": "Opt-out from analytics",
-      onClick: () => this.optOutAnalytics()
-    })) : h("div", {
-      class: "flex items-center gap-4"
-    }, h("eds-button", {
-      intent: "primary",
-      label: "I agree",
-      "aria-label": "Opt-in for analytics",
-      onClick: () => this.optInAnalytics()
-    }), h("eds-button", {
-      intent: "ghost",
-      label: "No, thanks",
-      "aria-label": "Opt-out from analytics",
-      onClick: () => this.noThanks()
-    }), 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 };

package/eds-modal.entry.esm.js

@@ -1,142 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const edsModalCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.z-50{z-index:50}.z-9999999{z-index:9999999}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.left-20{left:1.25rem}.right-20{right:1.25rem}.top-1\\/2{top:50%}.top-20{top:1.25rem}.bottom-20{bottom:1.25rem}.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}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.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)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.ml-8{margin-left:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.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}@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))}.md\\:gap-y-12{row-gap:0.75rem}}";
-const EdsModalStyle0 = edsModalCss;
-const EdsModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.isOpen = false;
-    this.title = '';
-    this.truncate = true;
-    this.truncateLines = '1';
-    this.position = 'middle';
-  }
-  getTruncateClass() {
-    return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
-  }
-  /**
-   * Returns the Tailwind CSS classes to position the modal based on the `position` prop.
-   *
-   * @private
-   * @returns {string} The concatenated CSS classes for modal positioning.
-   */
-  getModalPositionClasses() {
-    switch (this.position) {
-      case 'top':
-        return 'md:left-1/2 top-20 md:-translate-x-1/2';
-      case 'bottom':
-        return 'md:left-1/2 bottom-20 md:-translate-x-1/2';
-      case 'left':
-        return 'left-20 top-1/2 -translate-y-1/2';
-      case 'right':
-        return 'right-20 top-1/2 -translate-y-1/2';
-      case 'middle':
-      default:
-        return 'md:left-1/2 top-1/2 md:-translate-x-1/2 -translate-y-1/2';
-    }
-  }
-  /**
-   * Opens the modal.
-   */
-  async open() {
-    var _a;
-    this.isOpen = true;
-    sendAnalytics({
-      category: 'ui-component',
-      parentContext: null,
-      tag: this.el.tagName.toLowerCase(),
-      name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
-      action: 'opened'
-    });
-  }
-  /**
-   * Closes the modal.
-   */
-  async close() {
-    var _a;
-    this.isOpen = false;
-    sendAnalytics({
-      category: 'ui-component',
-      parentContext: null,
-      tag: this.el.tagName.toLowerCase(),
-      name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
-      action: 'closed'
-    });
-  }
-  /**
-   * Toggles the modal open or closed.
-   */
-  async toggle() {
-    this.isOpen = !this.isOpen;
-  }
-  /**
-   * Listens for global custom events to open the modal.
-   */
-  handleGlobalOpen() {
-    this.open();
-  }
-  /**
-   * Listens for global custom events to close the modal.
-   */
-  handleGlobalClose() {
-    this.close();
-  }
-  /**
-   * Closes the modal when the Escape key is pressed.
-   */
-  handleKeyDown(event) {
-    if (this.isOpen && event.key === 'Escape') {
-      this.close();
-    }
-  }
-  render() {
-    // Generate a unique id for the title so we can reference it for aria-labelledby.
-    const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
-    return h("div", {
-      key: 'eb2b985e84912dabea52a9a62eb908087004c958',
-      id: "eds-modal",
-      class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": titleId
-    }, this.isOpen && h("div", {
-      key: 'ad47334539d1a8a8694f34ba1e90a38b7dce07ab',
-      class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
-      ,
-
-      onClick: () => this.close()
-    }), h("div", {
-      key: '69d449b6ec986b5cfd73e50cc060363236035915',
-      class: `container max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center`
-    }, h("div", {
-      key: '17395806ef17a06b5465174055087178db9f5356',
-      class: "flex justify-between items-center border-b-2 border-softer pb-8"
-    }, h("span", {
-      key: 'daa5d63b73eab57b9b58ca06d0197f1a7002ca15',
-      id: titleId,
-      class: `f-heading-04 text-lighter ${this.getTruncateClass()}`
-    }, this.title), h("eds-button", {
-      key: '267ee7d1f10819c19af5eed6715465f2ba5f4831',
-      intent: "tertiary",
-      icon: "close",
-      "aria-label": "Close modal",
-      onClick: () => this.close(),
-      "extra-class": "ml-8"
-    })), h("div", {
-      key: 'fbd3351c851ab1089035117cca2b3ad769c26d18',
-      class: "pt-8"
-    }, h("slot", {
-      key: '9958a61e24320183bef12aef381791f11e421597'
-    }))));
-  }
-  get el() {
-    return getElement(this);
-  }
-};
-EdsModal.style = EdsModalStyle0;
-
-export { EdsModal as eds_modal };