@ebrains/components 0.9.3-beta → 1.1.0

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

@@ -31,6 +31,9 @@ export class EdsForm {
         this.errors = {};
         this.parsedFields = [];
     }
+    async setData(newData) {
+        this.populateFormWithInitData(newData);
+    }
     componentWillLoad() {
         this.parseFields(this.fields);
         // Emit context for each eds-link element after the component is fully loaded
@@ -173,13 +176,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) {
@@ -199,6 +206,14 @@ export class EdsForm {
         // Update the errors state and the hasError flag.
         this.errors = newErrors;
         this.hasError = Object.keys(newErrors).length > 0;
+        // Emit the updated form state.
+        this.form.emit({
+            event: 'input',
+            field: field.name,
+            value: target.type === 'checkbox' ? this.values[field.name] : target.value,
+            message: `${field.name} updated`
+            //data: this.makeFormData()
+        });
     }
     handleSubmit() {
         var _a, _b;
@@ -213,8 +228,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 +252,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 +268,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: '1418bbac3ea7c994bf363602e6ddd18ed3c6c661', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: 'ae6f05d50a1c32312e585d55f0b5d64b0dd1fc9c' }, h("slot", { key: '09c9ddd0d3b77ae9cbcb54389b799af7a6fc6c9e' }), 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: 'af6ce29d25ae2e7c71537618456308891ff8abf4', class: "mt-20" }, h("eds-button", { key: '1442f4f6b924533f9aa46bd22e1d0adf69561370', 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 +443,58 @@ 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 {
+            "setData": {
+                "complexType": {
+                    "signature": "(newData: { [key: string]: any; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "newData",
+                            "type": "{ [key: string]: any; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "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;
+}