@ebrains/react 0.9.3-beta → 1.1.0

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

@@ -3,37 +3,48 @@ import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
-const edsProgressBarCss = ".w-full{width:100%}.h-full{height:100%}.bg-default{background-color:var(--grey-200)}.rounded-lg{border-radius:16px}.h-24{height:1.5rem}.border{border-width:1px}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.overflow-hidden{overflow:hidden}.bg-accent{background-color:var(--green-500)}.bg-\\[\\#0034CB\\]{--tw-text-opacity:1;background-color:rgb(0 52 203 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.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)}";
+const edsProgressBarCss = ".w-full{width:100%}.h-full{height:100%}.bg-default{background-color:var(--grey-200)}.rounded-lg{border-radius:16px}.h-24{height:1.5rem}.border{border-width:1px}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.overflow-hidden{overflow:hidden}.bg-accent{background-color:var(--green-500)}.bg-\\[\\#0034CB\\]{--tw-text-opacity:1;background-color:rgb(0 52 203 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.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)}.absolute{position:absolute}.relative{position:relative}.z-0{z-index:0}.z-10{z-index:10}.inset-0{inset:0rem}.pointer-events-none{pointer-events:none}";
 const EdsProgressBarStyle0 = edsProgressBarCss;
 const EdsProgressBar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.value = 0;
+    this.rounded = true;
   }
   /**
    * Method to update the progress value externally.
    * @param newValue The new progress value (0-100).
    */
   async updateValue(newValue) {
-    this.value = Math.min(100, Math.max(0, newValue)); // Clamp value between 0 and 100
+    this.value = Math.min(100, Math.max(0, newValue)); // Clamp 0–100
   }
   render() {
-    const progressValue = this.value;
+    const progressValue = Math.min(100, Math.max(0, this.value));
+    // Outer container classes (conditionally rounded)
+    const outerClasses = ['outer', 'w-full', 'h-24', 'bg-default', 'border', 'border-softer', 'overflow-hidden', this.rounded ? 'rounded-lg' : '', 'relative'].filter(Boolean).join(' ');
+    // Fill bar classes (conditionally rounded only when >0)
+    const fillClasses = ['inner', 'h-full', 'transition-all', 'duration-300', 'bg-accent', progressValue > 0 && this.rounded ? 'rounded-lg' : '', 'z-0'].filter(Boolean).join(' ');
     return h("div", {
-      key: '0f47fedbf9d44887f65b399e184215f0937b1df1',
+      key: '3360c1a9e61c83fee5312d007f6d2965a8983eba',
       role: "progressbar",
       "aria-valuemin": "0",
       "aria-valuemax": "100",
       "aria-valuenow": progressValue,
       "aria-valuetext": `${progressValue}%`,
-      class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden"
+      class: outerClasses
     }, h("div", {
-      key: 'a2d095d778842c969832ea6b1ba7f7ef917d1390',
-      class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`,
+      key: '7210dc5931f08626b286c30ae790a3a864533632',
+      class: fillClasses,
       style: {
         width: `${progressValue}%`
       }
-    }, progressValue, "%"));
+    }), h("div", {
+      key: '7586cd593b4e851f4605ad33b96781841ee0b1aa',
+      class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10"
+    }, h("span", {
+      key: '21fa3de543e5e717ed4fd76c689aa47c3fa6a853',
+      class: "text-default f-body-02"
+    }, progressValue, "%")));
   }
 };
 EdsProgressBar.style = EdsProgressBarStyle0;

package/eds-rating.entry.esm.js

@@ -48,7 +48,7 @@ const EdsRating = class {
   }
   render() {
     return h("div", {
-      key: 'd1650c37f02bf467f888d0afd0a025198bc0eedc',
+      key: '6686575f0b8b9017bf19b105208f6adbfd46dabd',
       role: "radiogroup",
       class: "stars flex space-x-1 my-8"
     }, Array.from({

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: 'f07162204271dca0f1ec8a3d309ab9d38a9fff4f'
+      key: '43f8d599041ae0c9761988fdec4872ec4a8ca037'
     }, h("eds-section-heading", {
-      key: 'c4db2a67151fcec22306f624b071725518292e65',
+      key: 'd120ddd851a0485e2edb43e2a6f508a661f35c07',
       headingLevel: this.headingLevel,
       sectionTitle: this.sectionTitle
     }), h("slot", {
-      key: 'e610f4777f1b334e20482862504085f5317a63df'
+      key: '9818b82a3eebcb741f5bccc9781e4212f2c5fa3d'
     }));
   }
 };
@@ -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: 'efa6dd7e228db2b86961efdff9b5dd9729a1a24b',
+      key: '740ed8b3208e07091a1f4c79888e172dec33773a',
       class: {
         'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
         container: this.withContainer,
@@ -60,7 +60,7 @@ const EdsSectionHeading = class {
         'pt-28': !this.spacingLarge
       }
     }, h(HeadingTag, {
-      key: 'dd50f0fe3baf084c71dc4c8fa745484645a58f76',
+      key: '4d4ceef35b7cb06bfbff2fdae47e66dd7ac10c49',
       class: this.getHeadingClass()
     }, this.sectionTitle));
   }

package/eds-spinner.entry.esm.js

@@ -50,13 +50,13 @@ const EdsSpinner = class {
       justifyContent: 'center'
     };
     return h(Host, {
-      key: '77f17386e37b3dae21c2893dab53ef046d74b8fb'
+      key: 'f687ccbbb05840b7699202f3758ec4a8d0de1bc4'
     }, h("div", {
-      key: 'c9420f866d61331901df7d6d681d09f75e31846c',
+      key: '4bb5c697f1ccd90d2d65d519fcfb3ec809b106ac',
       class: "spinner-overlay",
       style: overlayStyle
     }, h("span", {
-      key: '83497de6228b75fad77225a1b6fee9a614d68fe4',
+      key: 'a07722d9ee9c94d03d9766a4b297a498998c00be',
       class: "spinner",
       style: spinnerStyle
     })));

package/eds-splash-screen.entry.esm.js

@@ -0,0 +1,87 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsSplashScreenCss = ".splash-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999999;background-color:var(--grey-200);display:flex;flex-direction:column;align-items:center;justify-content:center}.logo-container{width:200px;height:200px;margin-bottom:1rem}.content-container{position:relative;width:5rem;height:5rem;display:flex;align-items:center;justify-content:center}";
+const EdsSplashScreenStyle0 = edsSplashScreenCss;
+const EdsSplashScreen = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.splash = createEvent(this, "splash", 7);
+    this.inverse = false;
+    this.initPromise = undefined;
+    this.isVisible = true;
+  }
+  // When the component loads, check if there is a promise.
+  componentWillLoad() {
+    if (this.initPromise) {
+      this.handleInitPromise(this.initPromise);
+    }
+  }
+  // Watch for changes on initPromise.
+  async watchInitPromise(newPromise) {
+    if (newPromise) {
+      this.handleInitPromise(newPromise);
+    }
+  }
+  async handleInitPromise(promise) {
+    try {
+      await promise;
+      //console.log('Promises resolved');
+      this.hideSplash();
+    } catch (error) {
+      //console.error('Initialization error:', error);
+      this.splash.emit({
+        type: 'error',
+        message: error.message || 'Unknown error'
+      });
+    }
+  }
+  handleHideSplash() {
+    this.hideSplash();
+  }
+  hideSplash() {
+    this.isVisible = false;
+    this.splash.emit({
+      type: 'hidden',
+      message: 'Splash screen hidden successfully'
+    });
+  }
+  render() {
+    if (!this.isVisible) {
+      return null;
+    }
+    return h(Host, null, h("div", {
+      class: "splash-overlay",
+      style: {
+        background: this.inverse ? 'black' : 'var(--grey-200)'
+      }
+    }, h("div", {
+      class: "logo-container"
+    }, this.inverse ? h("eds-logo", {
+      orientation: "vertical",
+      type: "color-white"
+    }) : h("eds-logo", {
+      orientation: "vertical",
+      type: "color"
+    })), h("div", {
+      class: "content-container"
+    }, h("eds-spinner", {
+      size: "1rem",
+      thickness: "3px",
+      "border-color": "var(--grey-400)",
+      "bottom-color": "var(--grey-900)",
+      background: "none",
+      fullscreen: false
+    }))));
+  }
+  static get watchers() {
+    return {
+      "initPromise": ["watchInitPromise"]
+    };
+  }
+};
+EdsSplashScreen.style = EdsSplashScreenStyle0;
+
+export { EdsSplashScreen as eds_splash_screen };

package/eds-switch.entry.esm.js

@@ -1,20 +1,27 @@
-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 { 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-size:14px;margin:0 8px}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)}";
+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.toggle = createEvent(this, "toggle", 7);
+    this.uiswitch = createEvent(this, "uiswitch", 7);
     this.toggleSwitch = () => {
       if (this.disabled) {
         return;
       }
       this.checked = !this.checked;
-      this.toggle.emit(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;
@@ -25,13 +32,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: 'ef70db7a5ed4f8e8db7e1a9e94334a3686ec1d0e',
+      key: '385c1463b11e83ff5b982218e0f28c54299210fd',
       class: "switch-container"
     }, this.labelOff && h("span", {
-      key: '4a18de129ba0b4e643a0929b6fc797b7bc35cb4c',
-      class: "switch-label switch-label--off"
+      key: 'f7e825a34487a1cec466b5172d77c2802029607c',
+      class: "switch-label switch-label--off mr-8"
     }, this.labelOff), h("button", {
-      key: '2d75656fadf36a38269d361fef176e243e1291c2',
+      key: 'fd1e8ffab675ee79edc6b99de4dfff42545d91af',
       type: "button",
       role: "switch",
       "aria-checked": this.checked ? 'true' : 'false',
@@ -45,13 +52,16 @@ const EdsSwitch = class {
       onClick: this.toggleSwitch,
       disabled: this.disabled
     }, h("span", {
-      key: '71bd3c8c042ac337c1392977c27e8f4ccde5e79f',
+      key: '0d185957ffe2577ffc8798c298820c84c838a2a4',
       class: "switch-handle"
     })), this.labelOn && h("span", {
-      key: '7cfa0b1f805271c9281853a872cedf93db7e07d8',
-      class: "switch-label switch-label--on"
+      key: 'f12b752ff94a363bb9593bd00cf43e7110e4399e',
+      class: "switch-label switch-label--on ml-8"
     }, this.labelOn));
   }
+  get el() {
+    return getElement(this);
+  }
 };
 EdsSwitch.style = EdsSwitchStyle0;