@ebrains/components 0.9.3-beta → 1.0.0

package/dist/collection/shared-ui/eds-form/eds-form.js

@@ -173,13 +173,17 @@ export class EdsForm {
             // Handle non-checkbox input normally.
             this.values = Object.assign(Object.assign({}, this.values), { [field.name]: target.value });
         }
+        // If it’s the password field, return here for no event emission
+        if (field.name === 'password') {
+            return;
+        }
         // Emit the updated form state.
         this.form.emit({
             event: 'change',
             field: field.name,
             value: target.type === 'checkbox' ? this.values[field.name] : target.value,
-            message: `${field.name} updated`,
-            data: this.makeFormData()
+            message: `${field.name} updated`
+            //data: this.makeFormData()
         });
     }
     handleInput(e, field) {
@@ -213,8 +217,8 @@ export class EdsForm {
                 event: 'submit',
                 validated: false,
                 success: false,
-                message: this.errorMessage,
-                data: this.makeFormData()
+                message: this.errorMessage
+                //data: this.makeFormData()
             }); // Emit form status submit false validation error
             sendAnalytics({
                 category: 'ui-component',
@@ -237,8 +241,8 @@ export class EdsForm {
             event: 'submit',
             success: true,
             validated: true,
-            message: 'Form data validated successfully',
-            data: this.getFormData()
+            message: 'Form data validated successfully'
+            //data: this.getFormData()
         });
         sendAnalytics({
             category: 'ui-component',
@@ -253,16 +257,19 @@ export class EdsForm {
         this.isSubmitting = false;
         return;
     }
+    async getData() {
+        return this.makeFormData();
+    }
     render() {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
-        return (h("form", { key: '90512ed881a2380f190d82f06b7bee4ae05e9ecf', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '15184e8e234572b2d5bf538259eea923dce2719b' }, h("slot", { key: 'f583356adf08622d9c7a4d957cd17a70287a619c' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
+        return (h("form", { key: '76fbc3f587eaac0bd53553663f072e5066914ae5', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '64d99d4ac7e1cb8e4bfe436bb236648201dcbc29' }, h("slot", { key: '9c257d29146b620367773726e65eaf680d3d010b' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
             var _a, _b;
             if (!this.isFieldVisible(field)) {
                 return null;
             }
             return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, placeholder: field.placeholder, value: this.values[field.name] || null, type: field.type, icon: field.icon || null, disabled: field.disabled, required: field.required, maxLength: field.maxlength, hint: field.hint, link: field.link, message: field.message, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleInput(e, field), onChange: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
-        })), this.formBtn && (h("div", { key: 'b60ae579201c95ce875f2e576cda679226aa0402', class: "mt-20" }, h("eds-button", { key: '7d603382885467496204956b66e156ef9f5bbb4d', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+        })), this.formBtn && (h("div", { key: 'ba7908ab85c6368aeff6824fd402b78b514d2292', class: "mt-20" }, h("eds-button", { key: '84efe452f55b2898e5747a01b0dc6033ba14da7a', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
     static get is() { return "eds-form"; }
     static get encapsulation() { return "shadow"; }
@@ -425,12 +432,37 @@ export class EdsForm {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{\n    event: 'input' | 'change' | 'submit';\n    validated?: boolean;\n    field?: string;\n    value?: any;\n    message?: string;\n    success?: boolean;\n    data: any;\n  }",
-                    "resolved": "{ event: \"input\" | \"change\" | \"submit\"; validated?: boolean; field?: string; value?: any; message?: string; success?: boolean; data: any; }",
+                    "original": "{\n    event: 'input' | 'change' | 'submit';\n    validated?: boolean;\n    field?: string;\n    value?: any;\n    message?: string;\n    success?: boolean;\n  }",
+                    "resolved": "{ event: \"input\" | \"change\" | \"submit\"; validated?: boolean; field?: string; value?: any; message?: string; success?: boolean; }",
                     "references": {}
                 }
             }];
     }
+    static get methods() {
+        return {
+            "getData": {
+                "complexType": {
+                    "signature": "() => Promise<FormData>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FormData": {
+                            "location": "global",
+                            "id": "global::FormData"
+                        }
+                    },
+                    "return": "Promise<FormData>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

package/dist/collection/shared-ui/eds-frame/eds-frame.css

@@ -1,116 +1,148 @@
 .bg-inverse {
-    background-color: var(--white);
-  }
-  .min-h-156 {
-    min-height: 156px;
-  }
-  .rounded {
-    border-radius: 0.25rem;
-  }
-  .rounded-full {
-    border-radius: 9999px;
-  }
-  .rounded-lg {
-    border-radius: 16px;
-  }
-  .rounded-md {
-    border-radius: 12px;
-  }
-  .border-soft {
-    border-color: rgba(0, 0, 0, .15 );
-  }
-  .border-softer {
-    border-color: rgba(0, 0, 0, .1 );
-  }
-  .border-softest {
-    border-color: rgba(0, 0, 0, .05 );
-  }
-  .effect-focus-within {
-    outline-width: 3px;
-    outline-offset: 2px;
-    outline-color: var(--green-500);
-  }
-  .effect-focus-within:focus-within {
-    outline-style: solid;
-  }
-  .relative {
-    position: relative;
-  }
-  .flex {
-    display: flex;
-  }
-  .grow {
-    flex-grow: 1;
-  }
-  .flex-col {
-    flex-direction: column;
-  }
-  .border-2 {
-    border-width: 2px;
-  }
-  .w-full {
-    width: 100%;
-  }
-  .h-full {
-    height: 100%;
-  }
-  .h-auto {
-    height: auto;
-  }
-  .effect-height {
-    transition-duration: 300ms;
-    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-      transition-property: height;
-  }
-  .items-center {
-    align-items: center;
-  }
-  .justify-between {
-    justify-content: space-between;
-  }
-  .py-8 {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-  .px-12 {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-  }
-  .f-ui-02 {
-    font-family: var(--f-ui-02-fontFamily);
-    font-weight: var(--f-ui-02-fontWeight);
-    font-size: var(--f-ui-02-fontSize);
-    line-height: var(--f-ui-02-lineHeight);
-    letter-spacing: var(--f-ui-02-letterSpacing);
-  }
-  .ml-auto {
-    margin-left: auto;
-  }
-  .border-t-2 {
-    border-top-width: 2px;
-  }
-  .border {
-    border: 1px solid rgba(0, 0, 0, .1 );
-  }
-  .border-2 {
-    border: 1px solid rgba(0, 0, 0, .1 );
-  }
-  .container {
-    width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
-    margin-right: auto;
-    margin-left: auto;
-  }
-  .container > * {
-    --container-outer-gutter: 0;
-    --breakout-container-outer-gutter: 0;
-  }
-  .ml-8 {
-    margin-left: 0.5rem;
-  }
-  .mr-8 {
-    margin-right: 0.5rem;
-  }
-  .mt-16 {
-    margin-top: 1rem;
-  }
-  
+  background-color: var(--white);
+}
+
+.min-h-156 {
+  min-height: 156px;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-lg {
+  border-radius: 16px;
+}
+
+.rounded-md {
+  border-radius: 12px;
+}
+
+.border-soft {
+  border-color: rgba(0, 0, 0, .15);
+}
+
+.border-softer {
+  border-color: rgba(0, 0, 0, .1);
+}
+
+.border-softest {
+  border-color: rgba(0, 0, 0, .05);
+}
+
+.effect-focus-within {
+  outline-width: 3px;
+  outline-offset: 2px;
+  outline-color: var(--green-500);
+}
+
+.effect-focus-within:focus-within {
+  outline-style: solid;
+}
+
+.relative {
+  position: relative;
+}
+
+.flex {
+  display: flex;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.effect-height {
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-property: height;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.py-8 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.px-12 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.f-ui-02 {
+  font-family: var(--f-ui-02-fontFamily);
+  font-weight: var(--f-ui-02-fontWeight);
+  font-size: var(--f-ui-02-fontSize);
+  line-height: var(--f-ui-02-lineHeight);
+  letter-spacing: var(--f-ui-02-letterSpacing);
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.border-t-2 {
+  border-top-width: 2px;
+}
+
+.border {
+  border: 1px solid rgba(0, 0, 0, .1);
+}
+
+.border-2 {
+  border: 1px solid rgba(0, 0, 0, .1);
+}
+
+.container {
+  width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.container>* {
+  --container-outer-gutter: 0;
+  --breakout-container-outer-gutter: 0;
+}
+
+.ml-8 {
+  margin-left: 0.5rem;
+}
+
+.mr-8 {
+  margin-right: 0.5rem;
+}
+
+.mt-16 {
+  margin-top: 1rem;
+}

package/dist/collection/shared-ui/eds-frame/eds-frame.js

@@ -84,7 +84,7 @@ export class EdsFrame {
         }
     }
     render() {
-        return (h("div", { key: '69d47526ffca56defb1e9da214c46822fa963c14', class: this.articleClasses() }, h("div", { key: 'cab7cd55b15afaa77a4f4b713c55a6776dcb6a2d', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '99b5499c4bf992cc7101d6ea6812000283a34968', class: "f-ui-02" }, this.frameLabel), !this.iframeError ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '275490ec93896eafe8a7042b86769b1f96e8bc8f', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
+        return (h("div", { key: '61c401d6e021418e3d705cc9a4418b4f54f6bcf1', class: this.articleClasses() }, h("div", { key: '3fe7284c2ce4057d6c953c02e03489c0ef75f43d', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'a0efaa70d4ab2484c76d38e309c0bf9800edf569', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: 'e99188447abb78659865758afe3226a7ade7f8f2', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
     }
     static get is() { return "eds-frame"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.css

@@ -1,120 +1,152 @@
 .bg-default {
-    background-color: var(--grey-200);
-  }
-  .bg-darker {
-    background-color: var(--grey-400);
-  }
-  .bg-inverse {
-    background-color: var(--white);
-  }
-  .bg-strongest {
-    background-color: var(--black);
-  }
-  .fixed {
-    position: fixed;
-  }
-  .absolute {
-    position: absolute;
-  }
-  .relative {
-    position: relative;
-  }
-  .sticky {
-    position: sticky;
-  }
-  .inset-0 {
-    inset: 0rem;
-  }
-  .z-\[999999\] {
-    z-index: 999999;
-  }
-  .overflow-y-scroll {
-    overflow-y: scroll;
-  }
-  .flex {
-    display: flex;
-  }
-  .inline-flex {
-    display: inline-flex;
-  }
-  .min-h-full {
-    min-height: 100%;
-  }
-  .flex-col {
-    flex-direction: column;
-  }
-  .w-full {
-    width: 100%;
-  }
-  .top-0 {
-    top: 0rem;
-  }
-  .mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .mt-auto {
-    margin-top: auto;
-  }
-  .items-center {
-    align-items: center;
-  }
-  .justify-center {
-    justify-content: center;
-  }
-  .justify-between {
-    justify-content: space-between;
-  }
-  .mr-auto {
-    margin-right: auto;
-  }
-  .w-\[200px\] {
-    width: 200px;
-  }
-  .h-\[85px\] {
-    height: 85px;
-  }
-  .px-16 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  .py-16 {
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-  }
-  .mt-28 {
-    margin-top: 1.75rem;
-  }
-  .gap-y-8 {
-    row-gap: 0.5rem;
-  }
-  .effect-color {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 300ms;
-    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
-  .effect-focus {
-    outline-width: 3px;
-    outline-offset: 2px;
-    outline-color: var(--green-500);
-  }
-  .rounded-xs {
-    border-radius: 4px;
-  }
-  .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);
-  }
-  .hover\:text-lighter:hover {
-    color: var(--grey-600);
-  }
-  .w-fit {
-    width: -moz-fit-content;
-    width: fit-content;
-  }
+  background-color: var(--grey-200);
+}
 
+.bg-darker {
+  background-color: var(--grey-400);
+}
 
+.bg-inverse {
+  background-color: var(--white);
+}
+
+.bg-strongest {
+  background-color: var(--black);
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.inset-0 {
+  inset: 0rem;
+}
+
+.z-\[999999\] {
+  z-index: 999999;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.min-h-full {
+  min-height: 100%;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.top-0 {
+  top: 0rem;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.w-\[200px\] {
+  width: 200px;
+}
+
+.h-\[85px\] {
+  height: 85px;
+}
+
+.px-16 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-16 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.mt-28 {
+  margin-top: 1.75rem;
+}
+
+.gap-y-8 {
+  row-gap: 0.5rem;
+}
+
+.effect-color {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.effect-focus {
+  outline-width: 3px;
+  outline-offset: 2px;
+  outline-color: var(--green-500);
+}
+
+.rounded-xs {
+  border-radius: 4px;
+}
+
+.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);
+}
+
+.hover\:text-lighter:hover {
+  color: var(--grey-600);
+}
+
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}

package/dist/collection/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.js

@@ -69,7 +69,7 @@ export class EdsFullscreenMenu {
         return parseData(this.menuLinks);
     }
     render() {
-        return this.isMenuOpen ? (h("div", { class: "eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll" }, h("div", { class: "flex min-h-full flex-col" }, h("div", { class: `w-full sticky top-0 ${this.inverseHeader ? 'bg-strongest' : 'bg-default'}` }, h("div", { class: "mx-auto flex items-center justify-between" }, h("div", { class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), h("div", { class: "px-16" }, h("eds-button", { "aria-label": "Close menu", intent: "ghostInverse", icon: "close", onClick: () => this.closeMenu() })))), h("div", { class: "py-16 px-16" }, h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "arrow-right" })))), h("eds-block-break", null), h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedMenuLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "chevron-right" }))))), h("div", { class: "mt-auto" }, h("eds-footer", { social: true, "extra-class": "bg-darker" }))))) : null;
+        return this.isMenuOpen ? (h("div", { class: "eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll" }, h("div", { class: "flex min-h-full flex-col" }, h("div", { class: `w-full sticky top-0 ${this.inverseHeader ? 'bg-strongest' : 'bg-default'}` }, h("div", { class: "mx-auto flex items-center justify-between" }, h("div", { class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), h("div", { class: "px-16" }, h("eds-button", { "aria-label": "Close menu", intent: "ghostInverse", icon: "close", onClick: () => this.closeMenu() })))), h("div", { class: "py-16 px-16" }, h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "arrow-right" })))), h("eds-block-break", null), h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedMenuLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "chevron-right" })))), h("nav", { class: "mt-28 flex flex-col gap-y-8" }, h("slot", null))), h("div", { class: "mt-auto" }, h("eds-footer", { social: true, "extra-class": "bg-darker" }))))) : null;
     }
     static get is() { return "eds-fullscreen-menu"; }
     static get encapsulation() { return "shadow"; }