@exmg/exm-form 0.0.2-alpha.0

package/README.md

@@ -0,0 +1,82 @@
+# `<exm-button>` [![Published on npm](https://img.shields.io/npm/v/@exmg/exm-button.svg)](https://www.npmjs.com/package/@exmg/exm-button)
+
+# exm-form
+
+The Exmg Form enhances form design by offering a more intuitive layout visualization, streamlining the user experience with several key features. These include:
+
+- Automated form validity checks, ensuring data integrity
+- Dynamic submit button control, which enables or disables the button based on form completeness
+- JSON output capability, allowing for easy data serialization and integration
+- A loading spinner, providing a visual indicator for asynchronous form submissions
+
+## Installation
+
+```sh
+npm install @exmg/exm-form
+```
+
+## Example Usage
+
+### Text
+
+```html
+<exm-form class="has-aside" @dialog-submit="${doFormAction}">
+  <div slot="toolbar" class="toolbar"><div class="title">Create contact</div></div>
+  <form>
+    <div class="row">
+      <md-filled-text-field name="firstname" dialogFocus label="First Name" required></md-filled-text-field>
+      <md-filled-text-field name="lastname" label="Last Name" required></md-filled-text-field>
+    </div>
+    <div class="row">
+      <md-filled-text-field name="company" label="Company"></md-filled-text-field>
+      <md-filled-text-field name="amount" label="Amount" type="number" min="0" max="10"></md-filled-text-field>
+    </div>
+    <md-filled-text-field
+      name="email"
+      label="Email"
+      pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$"
+      required
+    ></md-filled-text-field>
+    <md-filled-text-field name="phone" label="Phone" required></md-filled-text-field>
+  </form>
+  <div slot="aside">
+    Ex Machina will send notices about the Data <a href="#">Processing Terms</a> and EU General Data Protection
+    Regulation to your primary contact. If your organization has a data protection officer or an EU representative, add
+    their contact information.
+  </div>
+</exm-form>
+```
+
+```js
+   async function doFormAction(e: CustomEvent<unknown>) {
+    const formDialog = e.target as ExmForm;
+    try {
+      formDialog.submitting = true;
+      // Do server call
+      // Show success message
+    } catch (error) {
+      console.error(error instanceof Error ? error.message : 'Unknown error');
+    } finally {
+      formDialog.submitting = false;
+    }
+  }
+```
+
+## API
+
+### Properties/Attributes
+
+| Name              | Type      | Default  | Description                                               |
+| ----------------- | --------- | -------- | --------------------------------------------------------- |
+| `submitBtn`       | `string`  | `Save`   | Submit button copy                                        |
+| `cancelBtn`       | `string`  | `Cancel` | Cancel button copy                                        |
+| `submitting`      | `boolean` | false    | Indicated form submit in progress and disables the button |
+| `hasAsideContent` | `boolean` | false    | Indicated if form has a side help section                 |
+
+For other options see the m3 docs:
+
+- [Material 3 Button Docs](https://github.com/material-components/material-web/blob/main/docs/components/button.md)
+
+## Additional references
+
+- [Demo / Docs](https://exmg.github.io/exmachina-web-components/demo/?el=exm-button)

package/dist/exm-form-base.d.ts

@@ -0,0 +1,43 @@
+import '@exmg/exm-button/exm-text-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/divider/divider.js';
+import { ExmgElement } from '@exmg/lit-base';
+export declare const CLOSE_ACTION = "close";
+export declare const serializeForm: (form: any) => {};
+declare const ExmFormBase_base: import("./exm-form-validate-mixin.js").Constructor<import("./exm-form-validate-mixin.js").FormValidateMixinInterface> & typeof ExmgElement;
+export declare class ExmFormBase extends ExmFormBase_base {
+    /**
+     * Submit button copy
+     */
+    submitBtn: string;
+    /**
+     * Cancel button copy
+     */
+    cancelBtn: string;
+    /**
+     * Internall used to show button spinner.
+     */
+    submitting: boolean;
+    boundHandleBlur?: (e: Event) => void;
+    boundHandleKeyup?: (e: Event) => void;
+    hasAsideContent: boolean;
+    errorMessage?: string | null;
+    reset(): void;
+    submit(): void;
+    /**
+     * Action method that needs to be implemented
+     * @param {CustomEvent} e
+     */
+    doAction?(formData: unknown): Promise<void> | void;
+    protected handleSubmit(): Promise<void>;
+    showError(message: string): void;
+    protected renderToolbar(): import("lit-html").TemplateResult<1>;
+    protected renderFormContent(): import("lit-html").TemplateResult<1>;
+    protected renderAside(): import("lit-html").TemplateResult<1>;
+    handleAsideSlotChange(e: CustomEvent): void;
+    protected renderError(): import("lit-html").TemplateResult<1>;
+    protected renderActions(): import("lit-html").TemplateResult<1>;
+    protected renderContainer(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist/exm-form-base.js

@@ -0,0 +1,194 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import '@exmg/exm-button/exm-text-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/divider/divider.js';
+import { ExmgElement } from '@exmg/lit-base';
+import { classMap } from 'lit/directives/class-map.js';
+import { ExmFormValidateMixin } from './exm-form-validate-mixin.js';
+export const CLOSE_ACTION = 'close';
+export const serializeForm = (form) => {
+    const obj = {};
+    const formElements = form === null || form === void 0 ? void 0 : form.elements;
+    const formElementsArray = Array.from(formElements);
+    /**
+     * Create list of checkbox elements. If no value is set the return value of the checkbox for 'on' will be a boolean
+     */
+    const checkboxNames = formElementsArray
+        .filter((input) => {
+        return input.value === 'on' && (input.type === 'checkbox' || input.tagName.toLowerCase().includes('checkbox'));
+    })
+        .map((input) => input.name);
+    /* Same for the radio items */
+    const radioNames = formElementsArray
+        .filter((input) => {
+        return input.type === 'radio' || input.tagName.toLowerCase().includes('radio');
+    })
+        .map((input) => input.name);
+    const numberNames = formElementsArray
+        .filter((input) => {
+        return input.type === 'number';
+    })
+        .map((input) => input.name);
+    const formData = new FormData(form);
+    for (const pair of formData.entries()) {
+        const key = pair[0];
+        const val = pair[1];
+        if (Object.hasOwnProperty.call(obj, key)) {
+            if (!Array.isArray(obj[key])) {
+                obj[key] = [obj[key]];
+            }
+            obj[key].push(val);
+            continue;
+        }
+        if (numberNames.includes(key)) {
+            obj[key] = val ? parseFloat(`${val}`) : undefined;
+            continue;
+        }
+        // When set to on convert to boolean return value
+        // @ts-ignore
+        if (checkboxNames.includes(key)) {
+            obj[key] = val === 'on';
+            continue;
+        }
+        // Check for a default value of on for radio items to set to true, if not, set to the value
+        if (radioNames.includes(key)) {
+            if (val === 'on') {
+                obj[key] = val === 'on';
+            }
+            else {
+                obj[key] = val;
+            }
+            continue;
+        }
+        obj[key] = formData.get(key);
+    }
+    // All checkboxes that are not checked will not be included in the form data and need to return false
+    for (const name of checkboxNames) {
+        // check for
+        if (!Object.hasOwnProperty.call(obj, name)) {
+            obj[name] = false;
+        }
+    }
+    return obj;
+};
+export class ExmFormBase extends ExmFormValidateMixin(ExmgElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Submit button copy
+         */
+        this.submitBtn = 'Save';
+        /**
+         * Cancel button copy
+         */
+        this.cancelBtn = 'Cancel';
+        /**
+         * Internall used to show button spinner.
+         */
+        this.submitting = false;
+        this.hasAsideContent = false;
+    }
+    reset() {
+        const form = this.getForm();
+        form === null || form === void 0 ? void 0 : form.reset();
+    }
+    submit() {
+        this.handleSubmit();
+    }
+    async handleSubmit() {
+        this.errorMessage = null;
+        const form = this.getForm();
+        // Check form validity
+        this.checkFormValidity();
+        // Return when there are invalid fields
+        if (!this.formValid) {
+            return;
+        }
+        // Serialize form data
+        const data = serializeForm(form);
+        if (this.doAction) {
+            try {
+                this.submitting = true;
+                await this.doAction(data);
+            }
+            catch (error) {
+                this.showError(error instanceof Error ? error.message : 'Unknown error');
+                this.fire('form-error', { message: error instanceof Error ? error.message : 'Unknown error' }, true);
+            }
+            finally {
+                this.submitting = false;
+            }
+        }
+        else {
+            this.fire('form-submit', data, true);
+        }
+    }
+    showError(message) {
+        this.errorMessage = message;
+    }
+    renderToolbar() {
+        return html `<div class="toolbar-container"><slot name="toolbar"></slot></div>`;
+    }
+    renderFormContent() {
+        return html `<slot></slot>`;
+    }
+    renderAside() {
+        return html `<slot name="aside" @slotchange="${this.handleAsideSlotChange}"></slot>`;
+    }
+    handleAsideSlotChange(e) {
+        const slot = e.target;
+        // @ts-ignore
+        const nodes = slot.assignedNodes({ flatten: true });
+        this.hasAsideContent = nodes.length > 0;
+    }
+    renderError() {
+        return html `<div class="form-error"><div>${this.errorMessage}</div></div>`;
+    }
+    renderActions() {
+        return html `
+      <div class="actions">
+        <md-text-button slot="footer" dialogFocus @click=${() => this.fire('form-cancel')}
+          >${this.cancelBtn}</md-text-button
+        >
+        <exm-text-button
+          slot="footer"
+          @click=${this.handleSubmit}
+          ?disabled=${this.submitting || !this.formValid}
+          ?loading=${this.submitting}
+          >${this.submitBtn}</exm-text-button
+        >
+      </div>
+    `;
+    }
+    renderContainer() {
+        return html ` <div class="container">
+      <div class="content">${this.renderFormContent()}</div>
+      <div class="aside ${classMap({ empty: !this.hasAsideContent })}">${this.renderAside()}</div>
+    </div>`;
+    }
+    render() {
+        return html `
+      ${this.renderToolbar()} ${this.errorMessage ? this.renderError() : nothing} ${this.renderContainer()}
+      <div class="divider"><md-divider></md-divider></div>
+      ${this.renderActions()}
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], ExmFormBase.prototype, "submitBtn", void 0);
+__decorate([
+    property({ type: String })
+], ExmFormBase.prototype, "cancelBtn", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmFormBase.prototype, "submitting", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmFormBase.prototype, "hasAsideContent", void 0);
+__decorate([
+    property({ type: String })
+], ExmFormBase.prototype, "errorMessage", void 0);
+//# sourceMappingURL=exm-form-base.js.map

package/dist/exm-form-validate-mixin.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+export type Constructor<T> = new (...args: any[]) => T;
+export declare abstract class FormValidateMixinClass extends LitElement {
+}
+export declare class FormValidateMixinInterface {
+    formValid: boolean;
+    getForm(): HTMLFormElement | null;
+    checkFormValidity(): void;
+}
+export declare const ExmFormValidateMixin: <T extends Constructor<LitElement & FormValidateMixinClass>>(superClass: T) => Constructor<FormValidateMixinInterface> & T;

package/dist/exm-form-validate-mixin.js

@@ -0,0 +1,60 @@
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
+import { async, debounce } from '@exmg/lit-base/index.js';
+import { state } from 'lit/decorators.js';
+export class FormValidateMixinClass extends LitElement {
+}
+export const ExmFormValidateMixin = (superClass) => {
+    class FormvalidateMixinElement extends superClass {
+        constructor() {
+            super(...arguments);
+            this.formValid = false;
+        }
+        getForm() {
+            return this.shadowRoot.querySelector('form');
+        }
+        checkFormValidity() {
+            const form = this.getForm();
+            const formElements = form === null || form === void 0 ? void 0 : form.elements;
+            let allValid = true;
+            for (const el of formElements || []) {
+                let isValid = true;
+                // @ts-ignore
+                if (typeof el.reportValidity === 'function') {
+                    // @ts-ignore
+                    isValid = el.checkValidity();
+                }
+                if (!isValid) {
+                    allValid = false;
+                }
+            }
+            this.formValid = allValid;
+        }
+        _handleInputChange(e) {
+            const target = e.target;
+            // Only check validation every 200ms max
+            this._debouncer = debounce.Debouncer.debounce(this._debouncer, async.timeOut.after(200), () => {
+                // @ts-ignore
+                typeof target.reportValidity === 'function' && target.reportValidity();
+                this.checkFormValidity();
+            });
+        }
+        firstUpdated() {
+            const form = this.getForm();
+            this.boundHandleChange = this._handleInputChange.bind(this);
+            form.addEventListener('keyup', this.boundHandleChange, true);
+            form.addEventListener('input', this.boundHandleChange, true);
+        }
+        disconnectedCallback() {
+            const form = this.getForm();
+            this.boundHandleChange && form.addEventListener('keyup', this.boundHandleChange, true);
+            this.boundHandleChange && form.addEventListener('input', this.boundHandleChange, true);
+            super.disconnectedCallback();
+        }
+    }
+    __decorate([
+        state()
+    ], FormvalidateMixinElement.prototype, "formValid", void 0);
+    return FormvalidateMixinElement;
+};
+//# sourceMappingURL=exm-form-validate-mixin.js.map

package/dist/exm-form.d.ts

@@ -0,0 +1,10 @@
+import { ExmFormBase } from './exm-form-base.js';
+export declare class ExmForm extends ExmFormBase {
+    static styles: import("lit").CSSResult[];
+    getForm(): HTMLFormElement | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-form': ExmForm;
+    }
+}

package/dist/exm-form.js

@@ -0,0 +1,15 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { style } from './styles/exm-form-base-css.js';
+import { ExmFormBase } from './exm-form-base.js';
+let ExmForm = class ExmForm extends ExmFormBase {
+    getForm() {
+        return this.querySelector('form');
+    }
+};
+ExmForm.styles = [style];
+ExmForm = __decorate([
+    customElement('exm-form')
+], ExmForm);
+export { ExmForm };
+//# sourceMappingURL=exm-form.js.map

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { ExmForm } from './exm-form.js';
+export { ExmFormValidateMixin, Constructor } from './exm-form-validate-mixin.js';
+export { ExmFormBase, serializeForm } from './exm-form-base.js';
+export { style as formStyles } from './styles/exm-form-css.js';
+export { style as formBaseStyles } from './styles/exm-form-base-css.js';

package/dist/index.js

@@ -0,0 +1,6 @@
+export { ExmForm } from './exm-form.js';
+export { ExmFormValidateMixin } from './exm-form-validate-mixin.js';
+export { ExmFormBase, serializeForm } from './exm-form-base.js';
+export { style as formStyles } from './styles/exm-form-css.js';
+export { style as formBaseStyles } from './styles/exm-form-base-css.js';
+//# sourceMappingURL=index.js.map

package/dist/styles/exm-form-base-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/dist/styles/exm-form-base-css.js

@@ -0,0 +1,81 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    display: block;
+    --_exm-form-content-margin-left: var(--exm-form-content-margin-left, 0);
+    --_exm-form-container-margin-top: var(--exm-form-container-margin-top, 1rem);
+    --_exm-form-container-margin-bottom: var(--exm-form-container-margin-bottom, 1rem);
+    --_exm-form-divider-margin-top: var(--exm-form-divider-margin-top, 2rem);
+    --_exm-form-aside-font-size: var(--exm-form-aside-font-size, 0.875rem);
+    --_exm-form-aside-line-height: var(--exm-form-aside-line-height, 1.25rem);
+    --_exm-form-aside-letter-spacing: var(--exm-form-aside-letter-spacing, 0.0142857143em);
+    --_exm-form-aside-font-weight: var(--exm-form-aside-font-weight, 400);
+    --_exm-form-aside-margin-left: var(--exm-form-aside-margin-left, 1rem);
+    --_exm-form-aside-margin-right: var(--exm-form-aside-margin-right, 5rem);
+    --_exm-form-aside-min-width: var(--exm-form-aside-min-width, 180px);
+  }
+
+  .aside {
+    line-height: var(--_exm-form-aside-line-height);
+    font-size: var(--_exm-form-aside-font-size);
+    letter-spacing: var(--_exm-form-aside-letter-spacing);
+    font-weight: var(--_exm-form-aside-font-weight);
+    color: var(--_exm-form-aside-color, var(--md-sys-color-on-surface));
+    border-left: 1px solid var(--md-sys-color-outline-variant);
+    box-sizing: border-box;
+    margin-left: var(--_exm-form-aside-margin-left);
+    margin-right: var(--_exm-form-aside-margin-right);
+    min-height: 2rem;
+    padding-left: 1rem;
+    vertical-align: top;
+    height: 100%;
+    min-width: var(--_exm-form-aside-min-width);
+    flex: 0;
+  }
+
+  .aside.empty {
+    display: none;
+  }
+
+  .content,
+  .container {
+    display: flex;
+  }
+
+  .content {
+    flex: 1;
+  }
+
+  .container {
+    margin-top: var(--_exm-form-container-margin-top);
+    margin-bottom: var(--_exm-form-container-margin-bottom);
+  }
+
+  .actions {
+    display: flex;
+    padding: 8px 4px;
+    justify-content: flex-end;
+  }
+
+  .actions > * {
+    margin-right: 8px;
+  }
+
+  .divider {
+    margin-top: var(--_exm-form-divider-margin-top);
+  }
+
+  .content {
+    margin-left: var(--_exm-form-content-margin-left);
+  }
+
+  .form-error {
+    background-color: var(--_exm-form-error-background, var(--md-sys-color-error-container, red));
+    color: var(--_exm-form-error-color, var(--md-sys-color-on-error-container, white));
+  }
+
+  .form-error > div {
+    padding: 1rem;
+  }
+`;
+//# sourceMappingURL=exm-form-base-css.js.map

package/dist/styles/exm-form-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/dist/styles/exm-form-css.js

@@ -0,0 +1,113 @@
+import { css } from 'lit';
+export const style = css `
+  .section-title {
+    line-height: 1.5rem;
+    font-size: 1rem;
+    letter-spacing: 0.00625em;
+    font-weight: 500;
+    color: var(--_exm-form-title-color, var(--md-sys-color-on-surface));
+    padding-bottom: 8px;
+  }
+
+  .aside {
+    --_exm-form-aside-font-size: var(--exm-form-aside-font-size, 0.875rem);
+    --_exm-form-aside-line-height: var(--exm-form-aside-line-height, 1.25rem);
+    --_exm-form-aside-letter-spacing: var(--exm-form-aside-letter-spacing, 0.0142857143em);
+    --_exm-form-aside-font-weight: var(--exm-form-aside-font-weight, 400);
+    --_exm-form-aside-margin-left: var(--exm-form-aside-margin-left, 1rem);
+    --_exm-form-aside-margin-right: var(--exm-form-aside-margin-right, 5rem);
+    --_exm-form-aside-min-width: var(--exm-form-aside-min-width, 180px);
+    line-height: var(--_exm-form-aside-line-height);
+    font-size: var(--_exm-form-aside-font-size);
+    letter-spacing: var(--_exm-form-aside-letter-spacing);
+    font-weight: var(--_exm-form-aside-font-weight);
+    color: var(--md-sys-color-on-surface);
+    border-left: 1px solid var(--md-sys-color-outline-variant);
+    box-sizing: border-box;
+    margin-left: var(--_exm-form-aside-margin-left);
+    margin-right: var(--_exm-form-aside-margin-right);
+    min-height: 2rem;
+    padding-left: 1rem;
+    vertical-align: top;
+    height: 100%;
+    min-width: var(--_exm-form-aside-min-width);
+    flex: 0;
+  }
+
+  form {
+    margin: 0 1rem;
+    width: 100%;
+  }
+
+  form .row {
+    display: flex;
+    gap: 6px;
+    height: 76px;
+    align-items: flex-start;
+  }
+
+  form .row > * {
+    flex: 1;
+    height: fit-content;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-top: 0.5rem;
+  }
+
+  form > * {
+    display: contents;
+  }
+
+  .actions > * {
+    margin-right: 8px;
+  }
+
+  .no-flex {
+    display: block;
+  }
+
+  .extra-margin {
+    margin-top: 2rem;
+    display: block;
+  }
+
+  label.checkbox {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    font-size: 1rem;
+    font-weight: 500;
+    margin: 0.5rem 1rem;
+  }
+
+  label.checkbox md-checkbox {
+    margin-right: 1rem;
+  }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    padding: 8px 4px 8px 16px;
+    height: 56px;
+    box-sizing: border-box;
+  }
+
+  .toolbar .title {
+    line-height: 1.5rem;
+    font-size: 1rem;
+    letter-spacing: 0.00625em;
+    font-weight: 500;
+    color: var(--md-sys-color-on-surface);
+    box-sizing: border-box;
+    overflow-wrap: break-word;
+  }
+
+  a {
+    color: var(--md-sys-color-primary);
+  }
+`;
+//# sourceMappingURL=exm-form-css.js.map

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@exmg/exm-form",
+  "version": "0.0.2-alpha.0+df24e0c",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./exm-form.js": "./dist/exm-form.js",
+    "./exm-form-validate-mixin.js": "./dist/exm-form-validate-mixin.js"
+  },
+  "description": "Form element",
+  "contributors": [
+    "Ex Machina"
+  ],
+  "keywords": [
+    "web-components",
+    "lit",
+    "form"
+  ],
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@bitbucket.org:exmachina/exm-web-components.git",
+    "directory": "packages/exm-form"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@exmg/exm-button": "^0.0.2-alpha.0+df24e0c"
+  },
+  "peerDependencies": {
+    "lit": "^3.2.1",
+    "tslib": "^2.6.2"
+  },
+  "scripts": {},
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "df24e0c74a76a7e1c258f69386036e24e7860256"
+}