@ebrains/react 0.3.0-alpha.0 → 0.4.0-alpha.0

package/eds-modal.entry.esm.js

@@ -1,114 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const edsModalCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.top-1\\/2{top: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}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.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)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.ml-8{margin-left:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}";
-const EdsModalStyle0 = edsModalCss;
-const EdsModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.isOpen = false;
-    this.title = '';
-    this.truncate = true;
-    this.truncateLines = '1';
-  }
-  getTruncateClass() {
-    return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
-  }
-  /**
-   * Opens the modal.
-   */
-  async open() {
-    this.isOpen = true;
-    /*sendAnalytics({
-      category: 'ui-component',
-      tag: this.el.tagName.toLowerCase(),
-      name: this.title,
-      action: 'show'
-    });*/
-  }
-  /**
-   * Closes the modal.
-   */
-  async close() {
-    this.isOpen = false;
-    /*sendAnalytics({
-      category: 'ui-component',
-      tag: this.el.tagName.toLowerCase(),
-      name: this.title,
-      action: 'hide'
-    });*/
-  }
-  /**
-   * Toggles the modal open or closed.
-   */
-  async toggle() {
-    this.isOpen = !this.isOpen;
-  }
-  /**
-   * 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() {
-    // Emit context for each eds-link element after the component is fully loaded
-    const btns = this.el.shadowRoot.querySelectorAll('eds-button');
-    btns.forEach(btn => {
-      this.emitContext(btn);
-    });
-  }
-  /**
-   * Emits a custom event called `parentContext` for a given button element.
-   * This event provides context information about the eds-modal 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: null
-      }
-    });
-    btnElement.dispatchEvent(event);
-  }
-  render() {
-    return h("div", {
-      key: '00816ecb900bd9b68b31fdf6e48bef0223f9e10a',
-      class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex`
-    }, this.isOpen && h("div", {
-      key: '570fa8625f9ad4b1ea82633f11e2b289ab01b853',
-      class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
-      ,
-
-      onClick: () => this.close()
-    }), h("div", {
-      key: 'ff658c763e3fbc98123f13483076399966b10515',
-      class: "max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center "
-    }, h("div", {
-      key: 'd8b72acd90cc59ab1f82384aee4e311319f75aa9',
-      class: "flex justify-between items-center border-b-2 border-softer pb-8"
-    }, h("span", {
-      key: 'ee61fc505c5a3eb93541d3762d37f28a5a788bae',
-      class: `f-heading-04 text-lighter ${this.getTruncateClass()}`
-    }, this.title), h("eds-button", {
-      key: '3832772417d05a162eb5f2c4d0733f0ee845ed1c',
-      intent: "tertiary",
-      icon: "close",
-      "aria-label": "Close modal",
-      onClick: () => this.close(),
-      "extra-class": "ml-8"
-    })), h("div", {
-      key: 'f71b38be8284a37d0d198df0a9858c64202b3d91',
-      class: "pt-8"
-    }, h("slot", {
-      key: '1f80948334e5b4e9fc00a3bf01c6fc402d8220c3'
-    }))));
-  }
-  get el() {
-    return getElement(this);
-  }
-};
-EdsModal.style = EdsModalStyle0;
-
-export { EdsModal as eds_modal };