@ebrains/react 0.5.0-alpha.0 → 0.7.0-alpha.0

package/{eds-dropdown_2.entry.esm.js → eds-dropdown.entry.esm.js}

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
+import { r as registerInstance, c as createEvent, 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';
@@ -9,6 +9,7 @@ const EdsDropdownStyle0 = edsDropdownCss;
 const EdsDropdown = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.dropdown = createEvent(this, "dropdown", 7);
     this.focusableItems = [];
     /**
      * Toggles the visibility of the dropdown and manages focus.
@@ -22,6 +23,9 @@ const EdsDropdown = class {
       } else {
         this.closeDropdown();
       }
+      this.dropdown.emit({
+        expanded: this.isOpen
+      });
       sendAnalytics({
         category: 'ui-component',
         parentContext: null,
@@ -48,6 +52,9 @@ const EdsDropdown = class {
   handleWindowClick(e) {
     if (!this.host.contains(e.target)) {
       this.closeDropdown();
+      this.dropdown.emit({
+        expanded: false
+      });
     }
   }
   /**
@@ -60,6 +67,9 @@ const EdsDropdown = class {
       switch (key) {
         case 'Tab':
           this.closeDropdown();
+          this.dropdown.emit({
+            expanded: false
+          });
           break;
         case 'ArrowUp':
           event.preventDefault();
@@ -80,6 +90,9 @@ const EdsDropdown = class {
   closeDropdown() {
     this.isOpen = false;
     this.focusIndex = -1;
+    this.dropdown.emit({
+      expanded: false
+    });
   }
   /**
    * Sets focus on the currently selected item in the dropdown.
@@ -102,11 +115,11 @@ const EdsDropdown = class {
    */
   render() {
     return h("div", {
-      key: '84f4cea78ea1c40c7897a356fe03ac83922fccb8',
+      key: '3edd3453afbd52ee9e3c4d925baa46e07cfdbfc0',
       class: "z-focus relative",
       ref: el => this.dropdownContent = el
     }, h("eds-button", {
-      key: '99dc51632dc82830054502a2d6d77d9fcefe9337',
+      key: '7c69acb6d6213af2cec8c1e00c68d83a5d23d676',
       label: this.label,
       "aria-label": this.ariaLabel,
       icon: this.icon,
@@ -115,7 +128,7 @@ const EdsDropdown = class {
       "aria-expanded": this.isOpen.toString(),
       "aria-haspopup": "menu"
     }), h("nav", {
-      key: 'a63613a7ecf709fd1d22d77da4b2d286905fef3e',
+      key: '5048b1c3cb42418736d471c2331330afef49cbc5',
       role: "menu",
       class: {
         'shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8': true,
@@ -131,7 +144,7 @@ const EdsDropdown = class {
       "aria-label": "Dropdown",
       "aria-hidden": !this.isOpen
     }, h("slot", {
-      key: 'dda70b865ed03dc7ad36a32934587bbcb0a16c1b'
+      key: '842f316e9a7910aa8b34823e883c54c1979668d1'
     })));
   }
   get host() {
@@ -139,97 +152,5 @@ const EdsDropdown = class {
   }
 };
 EdsDropdown.style = EdsDropdownStyle0;
-const EdsUserModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.user = undefined;
-    this.links = undefined;
-    this.onLogout = undefined;
-    this.parsedUser = {};
-    this.parsedLinks = [];
-  }
-  parseUserProp(newValue) {
-    this.parsedUser = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
-  }
-  parseLinksProp(newValue) {
-    this.parsedLinks = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
-  }
-  componentWillLoad() {
-    this.parseUserProp(this.user);
-    this.parseLinksProp(this.links);
-  }
-  get initials() {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const initials = `${((_b = (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname) === null || _b === void 0 ? void 0 : _b.charAt(0)) || ''}${((_d = (_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.lastname) === null || _d === void 0 ? void 0 : _d.charAt(0)) || ''}`.toUpperCase();
-    return initials || ((_g = (_f = (_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.fullname) === null || _f === void 0 ? void 0 : _f.charAt(0)) === null || _g === void 0 ? void 0 : _g.toUpperCase()) || '';
-  }
-  get hasLogout() {
-    return typeof this.onLogout === 'function';
-  }
-  render() {
-    var _a, _b, _c, _d, _e;
-    return h("div", {
-      key: '4a80335b6a59b9653130ca75a6e42c04fce68f4f',
-      class: "min-w-[280px] p-8"
-    }, h("div", {
-      key: '9c97f6be46216587692d4852174cecfaacb70593',
-      class: "flex gap-x-16 pb-16 border-b-2 border-softer"
-    }, h("eds-avatar", {
-      key: 'c778f6bdfb21068ca7c2deff6e298f61af6dbc67',
-      "first-name": (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname,
-      "last-name": (_b = this.parsedUser) === null || _b === void 0 ? void 0 : _b.lastname,
-      initials: this.initials,
-      color: "grey",
-      rounded: true,
-      "initials-strong": true
-    }), h("div", {
-      key: '7f453546c9cc54597069abb3e4b50312fe7bf364',
-      class: "max-w-full"
-    }, ((_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.fullname) && h("p", {
-      key: '34e080ef159535820c09378701de0e6f4fd96009',
-      class: "f-ui-01 text-default w-full text-ellipsis"
-    }, this.parsedUser.fullname), ((_d = this.parsedUser) === null || _d === void 0 ? void 0 : _d.username) && h("p", {
-      key: '2f85764e7d015dc3f3b22ca8a07126f8f57216ef',
-      class: "f-ui-03-light text-light mt-4"
-    }, this.parsedUser.username), ((_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.email) && h("p", {
-      key: '002dec51e979c29f2343f55e004449e4cee4075c',
-      class: "f-ui-03-light text-light mt-4"
-    }, this.parsedUser.email))), h("div", {
-      key: '740b78c504257fb755ba7ba04dd25f023d37ed33',
-      class: "text-default mt-16 flex w-full flex-col gap-y-8"
-    }, h("div", {
-      key: 'ac307937bdd3fc86cce502e5eeb3e922d931f418',
-      class: "border-softer mb-10 border-b-2 pb-16"
-    }, h("eds-link", {
-      key: 'bdd0f1ef62ac78ffb1b40ed6873475df360cec66',
-      label: "My EBRAINS",
-      "aria-label": "My EBRAINS",
-      url: "https://www.ebrains.eu/dashboard",
-      intent: "primary",
-      "extra-class": "w-full",
-      external: true
-    })), h("eds-link", {
-      key: 1,
-      label: "Account Settings",
-      url: "https://iam.ebrains.eu/auth/realms/hbp/account/",
-      intent: "secondary",
-      icon: "arrow-diagonal",
-      external: true,
-      "extra-class": "w-full"
-    }), this.hasLogout && h("eds-link", {
-      key: 'd73016ad71f3b356b7fb7d0a2a84124eabb05da5',
-      label: "Sign out",
-      intent: "tertiary",
-      "extra-class": "w-full justify-center",
-      onClick: () => this.onLogout && this.onLogout()
-    })));
-  }
-  static get watchers() {
-    return {
-      "user": ["parseUserProp"],
-      "links": ["parseLinksProp"]
-    };
-  }
-};
 
-export { EdsDropdown as eds_dropdown, EdsUserModal as eds_user_modal };
+export { EdsDropdown as eds_dropdown };

package/eds-feedback.entry.esm.js

@@ -0,0 +1,82 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
+import { p as parseData } from './sharedUtils-a550989c.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsFeedbackCss = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-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)}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.inline{display:inline}.grid{display:grid}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.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}";
+const EdsFeedbackStyle0 = edsFeedbackCss;
+const EdsFeedback = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.rating = createEvent(this, "rating", 7);
+    this.type = 'star';
+    this.count = 5;
+    this.label = 'Rate your Experience!';
+    this.description = 'This is a description!';
+    this.textMapping = ['Very Poor', 'Poor', 'Average', 'Good', 'Excellent'];
+    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);
+  }
+  /**
+   * Parses the `textMapping` prop into an array of strings.
+   */
+  get parsedMappings() {
+    return parseData(this.textMapping);
+  }
+  /**
+   * Listens for global custom events to open the modal.
+   */
+  ratingUpdated(e) {
+    this.selectedRating = e.detail;
+  }
+  render() {
+    return h("div", {
+      key: '125299e9780486a10213fc3c59b15e7a4fb62616',
+      class: "grid inline"
+    }, h("p", {
+      key: '6a02d78d34a590bc213cd5bf311ec8bed44f8959',
+      class: "f-heading-03 my-4"
+    }, this.label), h("p", {
+      key: '76146fbade2f864ba7b72429a85218ebf6a24ea7',
+      class: "f-body-02 text-light"
+    }, this.description), h("eds-rating", {
+      key: '38e0ec9219adaf85f674fab6be471112f06e42ff',
+      "rating-type": this.type,
+      "rating-count": this.count
+    }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && h("span", {
+      key: 'beab34888d3db63ca2ee374a2d10d407bfc948cc',
+      class: "f-ui-04 text-lighter"
+    }, this.parsedMappings[this.selectedRating - 1]));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+EdsFeedback.style = EdsFeedbackStyle0;
+
+export { EdsFeedback as eds_feedback };