@ebrains/react 0.9.2-beta → 1.0.0

package/eds-alert.entry.esm.js

@@ -0,0 +1,112 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { c as cva } from './index-39c58238.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsAlertCss = "*,\n::before,\n::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: currentColor;\n}\n\np {\n  margin: 0;\n}\n\n.f-ui-01 {\n  font-family: var(--f-ui-01-fontFamily);\n  font-weight: var(--f-ui-01-fontWeight);\n  font-size: var(--f-ui-01-fontSize);\n  line-height: var(--f-ui-01-lineHeight);\n  letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.border-inside {\n  position: relative;\n\n  &::after {\n    pointer-events: none;\n  }\n\n  &::after {\n    position: absolute;\n  }\n\n  &::after {\n    inset: 0rem;\n  }\n\n  &::after {\n    z-index: 1;\n  }\n\n  &::after {\n    border-radius: 8px;\n  }\n\n  &::after {\n    border-width: 1px;\n  }\n\n  &::after {\n    border-width: 2px;\n  }\n\n  &::after {\n    border-color: rgba(0, 0, 0, .1);\n  }\n\n  &::after {\n    content: '';\n  }\n}\n\n.flex {\n  display: flex;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.gap-x-12 {\n  -moz-column-gap: 0.75rem;\n  column-gap: 0.75rem;\n}\n\n.space-y-12> :not([hidden])~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n\n.rounded-lg {\n  border-radius: 16px;\n}\n\n.bg-dark {\n  background-color: var(--grey-300);\n}\n\n.bg-error {\n  background-color: var(--red-200);\n}\n\n.bg-success {\n  background-color: var(--green-200);\n}\n\n.bg-warning {\n  background-color: var(--yellow-200);\n}\n\n.p-16 {\n  padding: 1rem;\n}\n\n.p-20 {\n  padding: 1.25rem;\n}\n\n.px-12 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.px-20 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.py-12 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.py-20 {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n\n.py-8 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.pr-12 {\n  padding-right: 0.75rem;\n}\n\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n[class*=underline-] {\n  text-decoration-line: underline;\n}\n\n.after\\:rounded-lg::after {\n  border-radius: 16px;\n}\n\n.after\\:border-softest::after {\n  border-color: rgba(0, 0, 0, .05);\n}";
+const EdsAlertStyle0 = edsAlertCss;
+const alertStyles = cva(['w-full bg-dark'], {
+  variants: {
+    intent: {
+      default: '',
+      warning: 'bg-warning',
+      error: 'bg-error',
+      success: 'bg-success'
+    },
+    brd: {
+      rounded: 'rounded-lg border-inside after:border-softest after:rounded-lg',
+      normal: ''
+    },
+    direction: {
+      vertical: 'space-y-12',
+      horizontal: 'flex flex-row items-center justify-between gap-x-12'
+    },
+    withBtn: {
+      false: '',
+      true: ''
+    }
+  },
+  compoundVariants: [{
+    direction: 'horizontal',
+    withBtn: true,
+    class: 'px-20 pr-12 py-12'
+  }, {
+    direction: 'horizontal',
+    withBtn: false,
+    class: 'p-20'
+  }, {
+    direction: 'vertical',
+    withBtn: true,
+    class: 'p-16'
+  }, {
+    direction: 'vertical',
+    withBtn: false,
+    class: 'px-12 py-20'
+  }],
+  defaultVariants: {
+    intent: 'default',
+    brd: 'rounded',
+    direction: 'horizontal'
+  }
+});
+const EdsAlert = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.message = undefined;
+    this.pressableLabel = undefined;
+    this.pressableUrl = undefined;
+    this.direction = 'horizontal';
+    this.intent = 'default';
+    this.brd = 'rounded';
+    this.withBtn = false;
+  }
+  componentWillLoad() {
+    this.withBtn = Boolean(this.pressableLabel);
+  }
+  componentDidLoad() {
+    var _a;
+    // Query for the 'eds-link' element inside the shadow root.
+    const lnk = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('eds-link');
+    if (lnk) {
+      this.emitContext(lnk);
+    }
+  }
+  emitContext(linkElement) {
+    const event = new CustomEvent('parentContext', {
+      detail: {
+        componentName: this.el.tagName.toLowerCase(),
+        identifier: null
+      }
+    });
+    linkElement.dispatchEvent(event);
+  }
+  render() {
+    return h("div", {
+      key: '90eae6088fb792c671eca1d74d9a6e7d212c2c1c',
+      class: alertStyles({
+        intent: this.intent,
+        brd: this.brd,
+        direction: this.direction,
+        withBtn: this.withBtn
+      }),
+      role: "alert"
+    }, h("p", {
+      key: '201a9e6352350dbe9d4f1ab137a669f212519ea5',
+      class: "f-ui-01 py-8",
+      innerHTML: this.message
+    }), this.withBtn && (this.pressableUrl ? h("eds-link", {
+      class: "eds-alert-link",
+      label: this.pressableLabel,
+      url: this.pressableUrl,
+      intent: "secondary",
+      external: true
+    }) : null));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+EdsAlert.style = EdsAlertStyle0;
+
+export { EdsAlert as eds_alert };

package/eds-app-root.entry.esm.js

@@ -0,0 +1,53 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsAppRoot = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isAuthenticated = false;
+  }
+  componentWillLoad() {
+    // Create a promise for the initKeycloak event.
+    const initKeycloakPromise = new Promise(resolve => {
+      document.addEventListener('initKeycloak', event => {
+        //console.log('initKeycloak event received:', event.detail);
+        resolve(event.detail);
+      }, {
+        once: true
+      });
+    });
+    // Create a promise for the authStatusChanged event.
+    const authStatusPromise = new Promise(resolve => {
+      document.addEventListener('authStatusChanged', event => {
+        var _a;
+        this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
+        //console.log('authStatusChanged event received:', event.detail);
+        resolve(event.detail);
+      }, {
+        once: true
+      });
+    });
+    // Combine both promises. The splash screen will hide only when both have resolved.
+    this.combinedInitPromise = Promise.all([initKeycloakPromise, authStatusPromise]);
+  }
+  render() {
+    return h("div", {
+      key: 'f7ff644cea84bfc78190afcfa33f1f6d6c6de29a'
+    }, h("eds-splash-screen", {
+      key: '5e04f163eafe8f0d55394b8f508386bac013907e',
+      inverse: true,
+      initPromise: this.combinedInitPromise
+    }), h("eds-login", {
+      key: '94c9dc0546e48fe8f9e6fc17fde9dcbf75fbe3bc',
+      "keycloak-url": "http://localhost:8080",
+      "keycloak-realm": "nigeor-realm",
+      "keycloak-client-id": "stencil-app"
+    }), h("main", {
+      key: '975cfb32924ecf0a4bb7d8f4788792eae500e166'
+    }, this.isAuthenticated ? h("h1", null, "Welcome, authenticated user!") : h("h1", null, "Please log in.")));
+  }
+};
+
+export { EdsAppRoot as eds_app_root };