@ebrains/react 0.9.2-beta → 0.9.3-beta

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

@@ -0,0 +1,41 @@
+import { r as registerInstance, h } from './index.esm2.js';
+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 EdsProgressBarStyle0 = edsProgressBarCss;
+const EdsProgressBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.value = 0;
+  }
+  /**
+   * 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
+  }
+  render() {
+    const progressValue = this.value;
+    return h("div", {
+      key: '0f47fedbf9d44887f65b399e184215f0937b1df1',
+      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"
+    }, 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`,
+      style: {
+        width: `${progressValue}%`
+      }
+    }, progressValue, "%"));
+  }
+};
+EdsProgressBar.style = EdsProgressBarStyle0;
+
+export { EdsProgressBar as eds_progress_bar };

package/eds-rating.entry.esm.js

@@ -0,0 +1,79 @@
+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: 'd1650c37f02bf467f888d0afd0a025198bc0eedc',
+      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-section-core_2.entry.esm.js

@@ -0,0 +1,69 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsSectionCoreCss = "";
+const EdsSectionCoreStyle0 = edsSectionCoreCss;
+const EdsSectionCore = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tag = 'section';
+    this.sectionTitle = '';
+    this.headingLevel = 'h2';
+  }
+  render() {
+    const TagType = this.tag; // Set dynamic tag type (div or section)
+    return h(TagType, {
+      key: 'f07162204271dca0f1ec8a3d309ab9d38a9fff4f'
+    }, h("eds-section-heading", {
+      key: 'c4db2a67151fcec22306f624b071725518292e65',
+      headingLevel: this.headingLevel,
+      sectionTitle: this.sectionTitle
+    }), h("slot", {
+      key: 'e610f4777f1b334e20482862504085f5317a63df'
+    }));
+  }
+};
+EdsSectionCore.style = EdsSectionCoreStyle0;
+const EdsSectionHeading = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sectionTitle = undefined;
+    this.withContainer = true;
+    this.headingLevel = 'h2';
+    this.tag = 'div';
+    this.spacingLarge = false;
+  }
+  getHeadingClass() {
+    // Map heading levels to their respective classes
+    const headingClasses = {
+      h1: 'f-heading-01',
+      h2: 'f-heading-02',
+      h3: 'f-heading-03',
+      h4: 'f-heading-04',
+      h5: 'f-heading-05',
+      h6: 'f-heading-06'
+    };
+    // Return the class based on the heading level
+    return headingClasses[this.headingLevel];
+  }
+  render() {
+    const TagType = this.tag; // Dynamically set tag type for the container
+    const HeadingTag = this.headingLevel; // Dynamically set heading level
+    return h(TagType, {
+      key: 'efa6dd7e228db2b86961efdff9b5dd9729a1a24b',
+      class: {
+        'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
+        container: this.withContainer,
+        'pt-48': this.spacingLarge,
+        'pt-28': !this.spacingLarge
+      }
+    }, h(HeadingTag, {
+      key: 'dd50f0fe3baf084c71dc4c8fa745484645a58f76',
+      class: this.getHeadingClass()
+    }, this.sectionTitle));
+  }
+};
+
+export { EdsSectionCore as eds_section_core, EdsSectionHeading as eds_section_heading };

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: '77f17386e37b3dae21c2893dab53ef046d74b8fb'
+    }, h("div", {
+      key: 'c9420f866d61331901df7d6d681d09f75e31846c',
+      class: "spinner-overlay",
+      style: overlayStyle
+    }, h("span", {
+      key: '83497de6228b75fad77225a1b6fee9a614d68fe4',
+      class: "spinner",
+      style: spinnerStyle
+    })));
+  }
+};
+EdsSpinner.style = EdsSpinnerStyle0;
+
+export { EdsSpinner as eds_spinner };

package/eds-switch.entry.esm.js

@@ -0,0 +1,58 @@
+import { r as registerInstance, c as createEvent, h } from './index.esm2.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 EdsSwitchStyle0 = edsSwitchCss;
+const EdsSwitch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.toggle = createEvent(this, "toggle", 7);
+    this.toggleSwitch = () => {
+      if (this.disabled) {
+        return;
+      }
+      this.checked = !this.checked;
+      this.toggle.emit(this.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: 'ef70db7a5ed4f8e8db7e1a9e94334a3686ec1d0e',
+      class: "switch-container"
+    }, this.labelOff && h("span", {
+      key: '4a18de129ba0b4e643a0929b6fc797b7bc35cb4c',
+      class: "switch-label switch-label--off"
+    }, this.labelOff), h("button", {
+      key: '2d75656fadf36a38269d361fef176e243e1291c2',
+      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: '71bd3c8c042ac337c1392977c27e8f4ccde5e79f',
+      class: "switch-handle"
+    })), this.labelOn && h("span", {
+      key: '7cfa0b1f805271c9281853a872cedf93db7e07d8',
+      class: "switch-label switch-label--on"
+    }, this.labelOn));
+  }
+};
+EdsSwitch.style = EdsSwitchStyle0;
+
+export { EdsSwitch as eds_switch };