@ebrains/components 0.9.0-beta → 0.9.2-beta

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

@@ -1,441 +0,0 @@
-import { h } from "@stencil/core";
-import { sendAnalytics } from "../../utils/analytics";
-import { parseData } from "../../utils/sharedUtils";
-import { validateFormFields } from "../../utils/eds-form/formValidators";
-import { validateInputField } from "../../utils/eds-form/validateInput";
-import { getFormInitData } from "../../utils/eds-form/formUtils";
-/**
- * `EdsFormV2` is a comprehensive form component designed to handle form submission with validation,
- * error handling, and customizable fields.
- *
- * Key Features:
- * - Configurable validation for fields, including dynamic field validation.
- * - Optionally includes a submit button, which can display a loading state during submission.
- * - Supports file upload, hidden fields, and dynamic field parsing.
- * - Emits `form` event when the form is submitting/validating or there are field updates.
- *
- * This component is ideal for implementing complex forms with specific validation and submission behaviors.
- */
-export class EdsForm {
-    constructor() {
-        this.name = 'eds-form';
-        this.setFormUrl = true;
-        this.formBtn = true;
-        this.formBtnLabel = 'Submit';
-        this.errorMessage = 'Some fields in your form are incorrect.';
-        this.fields = [];
-        this.initData = {};
-        this.values = {};
-        this.isSubmitting = false;
-        this.hasError = false;
-        this.errors = {};
-        this.parsedFields = [];
-    }
-    componentWillLoad() {
-        this.parseFields(this.fields);
-        // Emit context for each eds-link element after the component is fully loaded
-        const links = this.el.querySelectorAll('eds-button');
-        links.forEach((link) => {
-            this.emitContext(link);
-        });
-    }
-    componentDidLoad() {
-        if (this.shouldFormProcessInitData) {
-            this.populateFormWithInitData(this.initData);
-        }
-    }
-    get shouldFormProcessInitData() {
-        return !!this.initData;
-    }
-    parseFields(newValue) {
-        this.parsedFields = parseData(newValue);
-    }
-    emitContext(linkElement) {
-        const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.el.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        linkElement.dispatchEvent(event);
-    }
-    isFieldVisible(field) {
-        if (!field.condition) {
-            return true;
-        }
-        const parentValue = this.values[field.condition.field];
-        return parentValue === field.condition.value;
-    }
-    validateForm() {
-        const { errors, hasError } = validateFormFields(this.parsedFields, this.formEl, this.values, (field, values) => {
-            if (!field.condition) {
-                return true;
-            }
-            const parentValue = values[field.condition.field];
-            return parentValue === field.condition.value;
-        });
-        this.errors = errors;
-        this.hasError = hasError;
-    }
-    populateFormWithInitData(initData) {
-        const { updatedValues } = getFormInitData({
-            initData,
-            parsedFields: this.parsedFields,
-            currentValues: this.values,
-            formEl: this.formEl,
-            isFieldVisible: (field, values) => {
-                if (!field.condition) {
-                    return true;
-                }
-                const parentValue = values[field.condition.field];
-                return parentValue === field.condition.value;
-            }
-        });
-        this.values = updatedValues;
-    }
-    getFormData() {
-        const formData = new FormData();
-        // Add the form name
-        formData.append('form_name', this.name);
-        // Add the form URL
-        if (this.setFormUrl && typeof window !== 'undefined') {
-            formData.set('form_url', window.location.href);
-        }
-        // Get all input elements within `eds-input-field`
-        const elements = Array.from(this.formEl.querySelectorAll('eds-input-field'));
-        elements.forEach((element) => {
-            if (element.shadowRoot) {
-                // Get input/textarea/select from the shadow DOM
-                const input = element.shadowRoot.querySelector('input, textarea, select');
-                if (input && input.name) {
-                    if (input.type === 'checkbox' || input.type === 'radio') {
-                        // Handle checkboxes and radio buttons
-                        const checkboxes = Array.from(element.shadowRoot.querySelectorAll(`input[name="${input.name}"]:checked`));
-                        const values = checkboxes.map((checkbox) => checkbox.value);
-                        formData.append(input.name, values.join(',')); // Join multiple values with a comma
-                    }
-                    else if (input.type === 'file') {
-                        // Handle file uploads.
-                        const fileInput = input;
-                        if (fileInput.files && fileInput.files.length > 0) {
-                            // If multiple files are allowed, you can append them all.
-                            Array.from(fileInput.files).forEach((file) => {
-                                // You can either append each file under the same name (if your backend expects an array)
-                                // or you can give them unique names. Here we use the same name.
-                                formData.append(fileInput.name, file);
-                            });
-                        }
-                    }
-                    else {
-                        // Handle other input types
-                        formData.append(input.name, input.value);
-                    }
-                }
-            }
-        });
-        return formData;
-    }
-    makeFormData() {
-        const formData = new FormData();
-        // Add the form name
-        formData.append('form_name', this.name);
-        // Add the form URL
-        if (this.setFormUrl && typeof window !== 'undefined') {
-            formData.set('form_url', window.location.href);
-        }
-        Object.keys(this.values).forEach((key) => {
-            // Append each key-value pair to the FormData object.
-            formData.append(key, this.values[key]);
-        });
-        return formData;
-    }
-    handleChange(e, field) {
-        const target = e.target;
-        if (target.type === 'checkbox') {
-            // Get the current comma separated string or default to an empty string.
-            const currentStr = this.values[field.name] || '';
-            // Convert the string into an array. If the string is empty, we get an empty array.
-            let valuesArray = currentStr ? currentStr.split(',') : [];
-            if (target.checked) {
-                // Only add if it's not already in the array.
-                if (!valuesArray.includes(target.value)) {
-                    valuesArray.push(target.value);
-                }
-            }
-            else {
-                // Remove the value from the array if the checkbox is unchecked.
-                valuesArray = valuesArray.filter((item) => item !== target.value);
-            }
-            // Reassemble the comma separated string and update your form values.
-            this.values = Object.assign(Object.assign({}, this.values), { [field.name]: valuesArray.join(',') });
-        }
-        else {
-            // Handle non-checkbox input normally.
-            this.values = Object.assign(Object.assign({}, this.values), { [field.name]: target.value });
-        }
-        // 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()
-        });
-    }
-    handleInput(e, field) {
-        const target = e.target;
-        // Update the field's value in state.
-        //this.values = { ...this.values, [field.name]: target.value };
-        // Create a copy of the current errors.
-        const newErrors = Object.assign({}, this.errors);
-        // Use the utility to validate the field.
-        const fieldErrors = validateInputField(field, target.value, this.formEl);
-        if (fieldErrors.length > 0) {
-            newErrors[field.name] = fieldErrors;
-        }
-        else {
-            delete newErrors[field.name];
-        }
-        // Update the errors state and the hasError flag.
-        this.errors = newErrors;
-        this.hasError = Object.keys(newErrors).length > 0;
-    }
-    handleSubmit() {
-        var _a, _b;
-        if (this.isSubmitting) {
-            return;
-        }
-        this.isSubmitting = true;
-        this.validateForm();
-        if (this.hasError) {
-            this.isSubmitting = false;
-            this.form.emit({
-                event: 'submit',
-                validated: false,
-                success: false,
-                message: this.errorMessage,
-                data: this.makeFormData()
-            }); // Emit form status submit false validation error
-            sendAnalytics({
-                category: 'ui-component',
-                parentContext: null,
-                tag: this.el.tagName.toLowerCase(),
-                name: `${(_a = this.formBtnLabel) === null || _a === void 0 ? void 0 : _a.toLowerCase()}/non-validated` || '',
-                action: 'click'
-            });
-            return;
-        }
-        // Log each entry in FormData to see file details
-        /*formData.forEach((value, key) => {
-          if (value instanceof File) {
-            console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
-          } else {
-            console.log(`Field: ${key}, Value: ${value}`);
-          }
-        });*/
-        this.form.emit({
-            event: 'submit',
-            success: true,
-            validated: true,
-            message: 'Form data validated successfully',
-            data: this.getFormData()
-        });
-        sendAnalytics({
-            category: 'ui-component',
-            parentContext: null,
-            tag: this.el.tagName.toLowerCase(),
-            name: `${(_b = this.formBtnLabel) === null || _b === void 0 ? void 0 : _b.toLowerCase()}/validated` || '',
-            action: 'click'
-        });
-        // Reset form states
-        this.errors = {};
-        this.formEl.reset();
-        this.isSubmitting = false;
-        return;
-    }
-    render() {
-        const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
-        const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
-        return (h("form", { key: '2f5651942cd01c0574b5a5f08483480c285472cb', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '0dab281f049f6afb8cfbad146076d7f3015b8c17' }, h("slot", { key: '661b26b05023480447f87aa03e2f21b814355d00' }), 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, value: this.values[field.name] || null, type: field.type, icon: field.icon || null, 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: '3f250271116962a060359cf462b053234f059bd1', class: "mt-20" }, h("eds-button", { key: 'b234af290bcae3205c874edb4796e484320a5475', 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"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["eds-form.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-form.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the form, used for grouping inputs and identifying the form."
-                },
-                "attribute": "name",
-                "reflect": false,
-                "defaultValue": "'eds-form'"
-            },
-            "setFormUrl": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, includes the current form URL in the submission data."
-                },
-                "attribute": "set-form-url",
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "formBtn": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, includes a submit button in the form."
-                },
-                "attribute": "form-btn",
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "formBtnLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, includes a submit button in the form."
-                },
-                "attribute": "form-btn-label",
-                "reflect": false,
-                "defaultValue": "'Submit'"
-            },
-            "errorMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The message displayed when the form submission fails."
-                },
-                "attribute": "error-message",
-                "reflect": false,
-                "defaultValue": "'Some fields in your form are incorrect.'"
-            },
-            "fields": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | any[]",
-                    "resolved": "any[] | string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A JSON string representing the fields in the form.\nExample:\n```json\n[\n  { \"name\": \"email\", \"label\": \"Email\", \"type\": \"text\", \"required\": true },\n  { \"name\": \"password\", \"label\": \"Password\", \"type\": \"password\", \"required\": true }\n]\n```"
-                },
-                "attribute": "fields",
-                "reflect": false,
-                "defaultValue": "[]"
-            },
-            "initData": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "{ [key: string]: any }",
-                    "resolved": "{ [key: string]: any; }",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The init data the form will attempt to populate in the provided fields."
-                },
-                "defaultValue": "{}"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "values": {},
-            "isSubmitting": {},
-            "hasError": {},
-            "errors": {},
-            "parsedFields": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "form",
-                "name": "form",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "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; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "fields",
-                "methodName": "parseFields"
-            }];
-    }
-}

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

@@ -1,73 +0,0 @@
-import { html } from "lit-html";
-export default {
-    title: 'Shared UI/Form',
-    component: 'eds-form',
-    argTypes: {
-        name: { control: 'text', description: 'Form name', defaultValue: 'extended-form' },
-        fields: { control: 'object', description: 'Form fields as JSON array' },
-        formBtn: { control: 'boolean', description: 'Show form button', defaultValue: true },
-        formBtnLabel: {
-            control: 'text',
-            description: 'Form button Label',
-            defaultValue: 'Validate'
-        }
-    }
-};
-const Template = (args) => html `
-  <eds-form
-    name="${args.name}"
-    .fields="${JSON.stringify(args.fields)}"
-    form-btn="${args.formBtn}"
-    form-btn-label="${args.formBtnLabel}"
-  ></eds-form>
-`;
-export const Default = Template.bind({});
-Default.args = {
-    name: 'extended-form',
-    fields: [
-        { name: 'username', label: 'Username', type: 'text', required: true, maxlength: 10 },
-        { name: 'email', label: 'Email', type: 'email', required: true },
-        { name: 'number', label: 'Number', type: 'number', required: true },
-        { name: 'password', label: 'Password', type: 'password', required: true, maxlength: 50 },
-        { name: 'date', label: 'Date', type: 'date', required: true },
-        { name: 'file', label: 'File', type: 'file', required: false },
-        { name: 'hiddenField', type: 'hidden', value: 'hiddenValue' },
-        { name: 'bio', label: 'Biography', type: 'textarea', required: true, maxlength: 300 },
-        {
-            name: 'role',
-            label: 'Role',
-            type: 'select',
-            required: true,
-            options: [
-                { label: 'Admin', value: 'admin' },
-                { label: 'Editor', value: 'editor' },
-                { label: 'Viewer', value: 'viewer' }
-            ]
-        },
-        {
-            name: 'preferences',
-            type: 'checkbox',
-            label: 'Select your preferences',
-            required: true,
-            options: [
-                { value: 'option1', label: 'Option 1' },
-                { value: 'option2', label: 'Option 2' },
-                { value: 'option3', label: 'Option 3' }
-            ]
-        },
-        {
-            name: 'gender',
-            type: 'radio',
-            label: 'Select your gender',
-            required: true,
-            options: [
-                { value: 'female', label: 'Female' },
-                { value: 'male', label: 'Male' }
-            ]
-        },
-        { name: 'newsletter', label: 'Newsletter', type: 'checkbox', value: 'subscribe', required: true },
-        { name: 'range', label: 'Range bar', type: 'range', min: '0', max: '10', step: '1', required: true }
-    ],
-    formBtn: true,
-    formBtnLabel: 'Validate'
-};

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

@@ -1,116 +0,0 @@
-.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;
-  }
-