@ebrains/react 1.4.0 → 2.1.0

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

@@ -1,159 +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-d99780e3.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.heading = '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(`${window.location.host}-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(`${window.location.host}-matomo-consent-given`);
-    this.hideNotice();
-    this.consent.emit('in');
-  }
-  optOutAnalytics() {
-    matomoOptOut();
-    this.hideNotice();
-    this.consent.emit('out');
-  }
-  noThanks() {
-    matomoOptOut();
-    localStorage.setItem(`${window.location.host}-matomo-consent-given`, 'out');
-    this.hideNotice();
-    this.consent.emit('out');
-  }
-  /*private 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.heading,
-      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()
-    }))));
-  }
-  get el() {
-    return getElement(this);
-  }
-};
-EdsMatomoNotice.style = EdsMatomoNoticeStyle0;
-
-export { EdsMatomoNotice as eds_matomo_notice };

package/eds-rating.entry.esm.js

@@ -1,79 +0,0 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const edsRatingCss = ":host{display:inline-block}.block{display:block}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.my-4{margin-top:0.25rem;margin-bottom:0.25rem}.my-8{margin-top:0.5rem;margin-bottom:0.5rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.0625rem * var(--tw-space-x-reverse));margin-left:calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)))}";
-const EdsRatingStyle0 = edsRatingCss;
-const EdsRating = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.rating = createEvent(this, "rating", 7);
-    this.ratingType = 'star';
-    this.ratingCount = 5;
-    this.selectedRating = 0;
-  }
-  /**
-   * Lifecycle method that runs when the component has fully loaded.
-   * It emits a custom event for each `eds-button` element contained within the breadcrumb.
-   */
-  componentDidLoad() {
-    const btns = this.el.shadowRoot.querySelectorAll('eds-button');
-    btns.forEach(btn => {
-      this.emitContext(btn);
-    });
-  }
-  /**
-   * Emits a custom event called `parentContext` for a given link element.
-   * This event provides context information about the breadcrumb component.
-   *
-   * @param btnElement - The link element to which the event will be dispatched.
-   */
-  emitContext(btnElement) {
-    const event = new CustomEvent('parentContext', {
-      detail: {
-        componentName: this.el.tagName.toLowerCase(),
-        identifier: this.selectedRating
-      }
-    });
-    btnElement.dispatchEvent(event);
-  }
-  /**
-   * Handles the click event on a star.
-   * @param rating - The selected rating value.
-   */
-  handleClick(rating) {
-    this.selectedRating = rating;
-    this.rating.emit(rating);
-  }
-  render() {
-    return h("div", {
-      key: 'ece1af90e2dea3f69dfef822d7f4f55f76866cbd',
-      role: "radiogroup",
-      class: "stars flex space-x-1 my-8"
-    }, Array.from({
-      length: this.ratingCount
-    }, (_, index) => {
-      const starRating = index + 1;
-      const isSelected = starRating <= this.selectedRating;
-      // Use the mapping text if available; otherwise, fall back to a generic label.
-      return h("eds-button", {
-        icon: this.ratingType,
-        role: "radio",
-        "aria-checked": isSelected ? 'true' : 'false',
-        "aria-label": this.ratingType,
-        onClick: () => this.handleClick(starRating),
-        tabIndex: this.selectedRating === 0 && index === 0 ? 0 : isSelected ? 0 : -1,
-        intent: isSelected ? 'primary' : 'ghost',
-        size: "large",
-        "extra-class": "p-2" // Optional padding or styling for the star button
-      });
-    }));
-  }
-  get el() {
-    return getElement(this);
-  }
-};
-EdsRating.style = EdsRatingStyle0;
-
-export { EdsRating as eds_rating };

package/eds-switch.entry.esm.js

@@ -1,68 +0,0 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-d99780e3.esm.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{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)}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:#ccc;padding:0;cursor:pointer;transition:background-color 0.2s}button.switch:focus{outline:none;box-shadow:0 0 0 2px #007aff}button.switch.switch--checked{background-color:var(--green-500)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}";
-const EdsSwitchStyle0 = edsSwitchCss;
-const EdsSwitch = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.uiswitch = createEvent(this, "uiswitch", 7);
-    this.toggleSwitch = () => {
-      if (this.disabled) {
-        return;
-      }
-      this.checked = !this.checked;
-      this.uiswitch.emit(this.checked);
-      sendAnalytics({
-        category: 'ui-component',
-        tag: this.el.tagName.toLowerCase(),
-        name: this.checked ? this.labelOn : this.labelOff || '',
-        action: 'checked'
-      });
-    };
-    this.checked = false;
-    this.disabled = false;
-    this.labelOn = '';
-    this.labelOff = '';
-  }
-  render() {
-    // Compute an accessible name based on state.
-    const accessibleLabel = this.labelOn || this.labelOff ? this.checked ? this.labelOn : this.labelOff : 'Toggle switch';
-    return h("div", {
-      key: 'f2c3cd27a317b64ac05b5b2841f87827ff9f18fc',
-      class: "switch-container"
-    }, this.labelOff && h("span", {
-      key: '08e47e239c5a6de0440b731589fd5f365919df24',
-      class: "switch-label switch-label--off mr-8"
-    }, this.labelOff), h("button", {
-      key: 'd731fa56f93b67daaeaac22c1080a7171360525c',
-      type: "button",
-      role: "switch",
-      "aria-checked": this.checked ? 'true' : 'false',
-      "aria-disabled": this.disabled ? 'true' : 'false',
-      "aria-label": accessibleLabel,
-      class: {
-        switch: true,
-        'switch--checked': this.checked,
-        'switch--disabled': this.disabled
-      },
-      onClick: this.toggleSwitch,
-      disabled: this.disabled
-    }, h("span", {
-      key: '8bbe2bd4c2050dbda4723615b4eb0fa2936d35d8',
-      class: "switch-handle"
-    })), this.labelOn && h("span", {
-      key: '73991400f5a8e0e6c6d1c09196639add3e98c71f',
-      class: "switch-label switch-label--on ml-8"
-    }, this.labelOn));
-  }
-  get el() {
-    return getElement(this);
-  }
-};
-EdsSwitch.style = EdsSwitchStyle0;
-
-export { EdsSwitch as eds_switch };