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

package/eds-progress-bar.entry.esm.js

@@ -20,7 +20,7 @@ const EdsProgressBar = class {
   render() {
     const progressValue = this.value;
     return h("div", {
-      key: '0f47fedbf9d44887f65b399e184215f0937b1df1',
+      key: '9a7fa42058034305b22818d464e7b633d7831d67',
       role: "progressbar",
       "aria-valuemin": "0",
       "aria-valuemax": "100",
@@ -28,7 +28,7 @@ const EdsProgressBar = class {
       "aria-valuetext": `${progressValue}%`,
       class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden"
     }, h("div", {
-      key: 'a2d095d778842c969832ea6b1ba7f7ef917d1390',
+      key: '90b0ac9a538b575a30163c0dbbf437e1cfe8ce39',
       class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`,
       style: {
         width: `${progressValue}%`

package/eds-rating.entry.esm.js

@@ -1,34 +1,42 @@
-import { r as registerInstance, c as createEvent, h } from './index.esm2.js';
+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;font-size:2rem}.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)}.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)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.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}";
+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.ratingChange = createEvent(this, "ratingChange", 7);
-    this.stars = 5;
-    this.label = 'Rate your experience';
-    this.textMapping = ['Very Poor', 'Poor', 'Average', 'Good', 'Excellent'];
+    this.rating = createEvent(this, "rating", 7);
+    this.ratingType = 'star';
+    this.ratingCount = 5;
     this.selectedRating = 0;
   }
   /**
-   * Parses the `textMapping` prop into an array of strings.
+   * Lifecycle method that runs when the component has fully loaded.
+   * It emits a custom event for each `eds-button` element contained within the breadcrumb.
    */
-  get parsedMappings() {
-    if (typeof this.textMapping === 'object') {
-      return this.textMapping;
-    } else if (typeof this.textMapping === 'string') {
-      try {
-        return JSON.parse(this.textMapping);
-      } catch (e) {
-        //console.error('Error parsing textMapping prop:', e);
-        return [];
+  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
       }
-    }
-    return [];
+    });
+    btnElement.dispatchEvent(event);
   }
   /**
    * Handles the click event on a star.
@@ -36,42 +44,34 @@ const EdsRating = class {
    */
   handleClick(rating) {
     this.selectedRating = rating;
-    this.ratingChange.emit(rating);
+    this.rating.emit(rating);
   }
   render() {
     return h("div", {
-      key: 'b613863ad54ae9b381a5741bce4b188eff806ef0',
-      class: "relative w-full flex flex-col"
-    }, h("span", {
-      key: 'f35cef9c3691aab73995e2ca6e2554cc19bae837',
-      class: "f-heading-05"
-    }, this.label), h("div", {
-      key: '37082eb4bbadf5c211c197f3f81501d0b0e61404',
+      key: '2ab4f3dbc4cc3dd5272143e99c67b23086b03e18',
       role: "radiogroup",
-      "aria-label": this.label,
-      class: "stars flex space-x-2"
+      class: "stars flex space-x-1 my-8"
     }, Array.from({
-      length: this.stars
+      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.
-      const mappingText = this.parsedMappings[starRating - 1] || `Rating ${starRating}`;
       return h("eds-button", {
-        label: "\u2605",
+        icon: this.ratingType,
         role: "radio",
         "aria-checked": isSelected ? 'true' : 'false',
-        "aria-label": mappingText,
+        "aria-label": this.ratingType,
         onClick: () => this.handleClick(starRating),
         tabIndex: this.selectedRating === 0 && index === 0 ? 0 : isSelected ? 0 : -1,
         intent: isSelected ? 'primary' : 'ghost',
-        size: "small",
+        size: "large",
         "extra-class": "p-2" // Optional padding or styling for the star button
       });
-    })), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && h("span", {
-      key: '61b4b92e476cfa0dd9bf405cb080dedd995ff9c6',
-      class: "f-ui-04 text-lighter mt-4"
-    }, this.parsedMappings[this.selectedRating - 1]));
+    }));
+  }
+  get el() {
+    return getElement(this);
   }
 };
 EdsRating.style = EdsRatingStyle0;

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

@@ -15,13 +15,13 @@ const EdsSectionCore = class {
   render() {
     const TagType = this.tag; // Set dynamic tag type (div or section)
     return h(TagType, {
-      key: 'e7ef9e7a589d8cde8aa54d73dff8421d74a7d0ac'
+      key: '39c4280156ca46b83538de499baa9b152360b1b4'
     }, h("eds-section-heading", {
-      key: '379c6bc644612d3e0865ce2acd8eacb4d67c7769',
+      key: '34da742e606f0e9bb485faac8aba1519eccc8934',
       headingLevel: this.headingLevel,
       sectionTitle: this.sectionTitle
     }), h("slot", {
-      key: '5828a28c2c8ac65fbc56652f733f148a0d0198b7'
+      key: '517b8ecc112565e8c6bb0bf85b02525deaa6f9df'
     }));
   }
 };
@@ -52,7 +52,7 @@ const EdsSectionHeading = class {
     const TagType = this.tag; // Dynamically set tag type for the container
     const HeadingTag = this.headingLevel; // Dynamically set heading level
     return h(TagType, {
-      key: 'c15f83f8aaa4fb01c884fb1390965fcf9dbd61fb',
+      key: '766d3f317904f2d735b7b531cf6ad582f22084e3',
       class: {
         'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8 pb-20': true,
         container: this.withContainer,
@@ -60,7 +60,7 @@ const EdsSectionHeading = class {
         'pt-28': !this.spacingLarge
       }
     }, h(HeadingTag, {
-      key: 'e65e13820553eefa5aec8bc9740e5e9da828ac92',
+      key: '41a9db3f627cf93f58d14cdebf3b991be6a6facf',
       class: this.getHeadingClass()
     }, this.sectionTitle));
   }

package/eds-spinner.entry.esm.js

@@ -0,0 +1,67 @@
+import { r as registerInstance, h, H as Host } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsSpinnerCss = ":host{display:block}.spinner{box-sizing:border-box;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}";
+const EdsSpinnerStyle0 = edsSpinnerCss;
+const EdsSpinner = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.size = '1rem';
+    this.thickness = '10px';
+    this.borderColor = 'var(--grey-400)';
+    this.bottomColor = 'var(--grey-900)';
+    this.background = 'var(--grey-200)';
+    this.fullscreen = false;
+  }
+  render() {
+    const spinnerStyle = Object.assign({
+      width: this.size,
+      height: this.size,
+      border: `${this.thickness} solid ${this.borderColor}`,
+      borderBottomColor: this.bottomColor
+    }, !this.fullscreen && {
+      display: 'inline-block'
+    });
+    // Overlay style: use fixed positioning for fullscreen,
+    // and absolute positioning for inline mode.
+    const overlayStyle = this.fullscreen ? {
+      position: 'fixed',
+      top: '0',
+      left: '0',
+      width: '100vw',
+      height: '100vh',
+      zIndex: '9999999',
+      backgroundColor: this.background,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    } : {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      width: '100%',
+      height: '100%',
+      zIndex: '1000',
+      backgroundColor: this.background,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    };
+    return h(Host, {
+      key: '1e1e4ea2734fff8a680e55ca5163e69d2000a55d'
+    }, h("div", {
+      key: 'acf09f69d43404f317240c0d24e644ec0d046cd7',
+      class: "spinner-overlay",
+      style: overlayStyle
+    }, h("span", {
+      key: '3728629fdff738a0b753cd499dc26052b1e3cb7b',
+      class: "spinner",
+      style: spinnerStyle
+    })));
+  }
+};
+EdsSpinner.style = EdsSpinnerStyle0;
+
+export { EdsSpinner as eds_spinner };

package/eds-steps.entry.esm.js

@@ -1,22 +1,25 @@
 import { r as registerInstance, c as createEvent, h } from './index.esm2.js';
+import { p as parseData } from './sharedUtils-a550989c.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
-const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:24px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.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-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.text-default{color:var(--black)}.text-error{color:var(--red-700)}.text-extra-light{color:var(--grey-300)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mb-28{margin-bottom:1.75rem}";
+const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.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-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.text-default{color:var(--black)}.text-error{color:var(--red-700)}.text-extra-light{color:var(--grey-300)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mb-28{margin-bottom:1.75rem}";
 const EdsStepsStyle0 = edsStepsCss;
 const EdsSteps = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.stepClick = createEvent(this, "stepClick", 7);
+    this.step = createEvent(this, "step", 7);
     this.handleNext = () => {
+      this.activeStep = this.activeStep + 1;
       if (this.activeStep < this.parsedSteps.length) {
-        this.activeStep = this.activeStep + 1;
+        this.step.emit(this.activeStep);
       }
     };
     this.handleBack = () => {
       if (this.activeStep > 0) {
         this.activeStep = this.activeStep - 1;
+        this.step.emit(this.activeStep);
       }
     };
     this.steps = [];
@@ -24,7 +27,7 @@ const EdsSteps = class {
     this.activeStep = 0;
   }
   handleStepClick(index) {
-    this.stepClick.emit(index);
+    this.step.emit(index);
     // In linear mode, update the active step on header click.
     if (this.type === 'linear') {
       this.activeStep = index;
@@ -34,20 +37,8 @@ const EdsSteps = class {
    * Parse the JSON string into an array of steps.
    */
   get parsedSteps() {
-    if (typeof this.steps === 'string') {
-      try {
-        const stepsStr = this.steps;
-        return JSON.parse(stepsStr);
-      } catch (error) {
-        //console.error('Invalid steps JSON', error);
-        return [];
-      }
-    }
-    return this.steps;
+    return parseData(this.steps);
   }
-  /*private handleReset = () => {
-    this.activeStep = 0;
-  };*/
   render() {
     const steps = this.parsedSteps;
     if (this.type === 'linear') {

package/eds-svg-repository.entry.esm.js

@@ -24,6 +24,9 @@ import { m as menu } from './menu-340ea948.esm.js';
 import { m as more } from './more-4449d549.esm.js';
 import { u as user } from './user-71ebdc15.esm.js';
 import { c as copy } from './copy-03b72cb6.esm.js';
+import { t as thumbsUp } from './thumbs-up-c19a71bc.esm.js';
+import { t as thumbsDown } from './thumbs-down-a18fd049.esm.js';
+import { s as star } from './star-0da9b5e9.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
@@ -277,7 +280,10 @@ const svgs = /*#__PURE__*/Object.freeze({
   search: search,
   success: success,
   warning: warning,
-  unknown: unknown
+  unknown: unknown,
+  thumbsUp: thumbsUp,
+  thumbsDown: thumbsDown,
+  star: star
 });
 const EdsSvgRepository = class {
   constructor(hostRef) {
@@ -308,7 +314,7 @@ const EdsSvgRepository = class {
       }
     };
     return h("eds-table", {
-      key: 'a7d7fa426da72e174880a300202390c1016b74df',
+      key: 'e4c454638f02e043a5ad466ee95558be8723d214',
       data: JSON.stringify(svgData),
       config: JSON.stringify(tableConfig),
       "rows-per-page": 10,

package/eds-switch.entry.esm.js

@@ -25,13 +25,13 @@ const EdsSwitch = class {
     // 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: 'd4c727cbb562921b2bcba269e84f25c359c7061b',
+      key: '624776d666ada7b31cb8e84b08380b888451b1a5',
       class: "switch-container"
     }, this.labelOff && h("span", {
-      key: '90b18fff27bd21501466deb5879e5fe6ff607043',
+      key: 'ced31e91b88f4cb032744bd846811dd012cb9dcd',
       class: "switch-label switch-label--off"
     }, this.labelOff), h("button", {
-      key: '8675f5d9f972d3932710fa7f9b28f74f95a83003',
+      key: '8cb4594687313076f18f30fc26062e1440ae0ab9',
       type: "button",
       role: "switch",
       "aria-checked": this.checked ? 'true' : 'false',
@@ -45,10 +45,10 @@ const EdsSwitch = class {
       onClick: this.toggleSwitch,
       disabled: this.disabled
     }, h("span", {
-      key: '26aa30a01b10419c1665b1fd58b5696a02d1504a',
+      key: '88897b4368c337ea2dc4a017a8503171117a2070',
       class: "switch-handle"
     })), this.labelOn && h("span", {
-      key: '3680d67555e9193a97e129c0639b411263e070a8',
+      key: 'bb66f4fd1d09935598d3e9485d3cdf28e182620e',
       class: "switch-label switch-label--on"
     }, this.labelOn));
   }