@exmg/exm-form 1.1.12 → 1.1.13

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

@@ -1,9 +1,8 @@
 import '@exmg/exm-button/exm-text-button.js';
-import '@material/web/button/text-button.js';
+import '@material/web/button/outlined-button.js';
+import '@material/web/button/filled-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 {
     /**
@@ -20,7 +19,8 @@ export declare class ExmFormBase extends ExmFormBase_base {
     submitting: boolean;
     boundHandleBlur?: (e: Event) => void;
     boundHandleKeyup?: (e: Event) => void;
-    hasAsideContent: boolean;
+    hasDescription: boolean;
+    hasHeader: boolean;
     errorMessage?: string | null;
     reset(): void;
     submit(): void;
@@ -31,13 +31,14 @@ export declare class ExmFormBase extends ExmFormBase_base {
     doAction?(formData: unknown): Promise<void> | void;
     protected handleSubmit(): Promise<void>;
     showError(message: string): void;
+    slotHasContent(slot: HTMLSlotElement): boolean;
+    handleDescriptionSlotChange(event: CustomEvent): void;
+    handleHeaderSlotChange(event: CustomEvent): 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;
+    renderFormContent(): import("lit-html").TemplateResult<1>;
+    protected renderDescription(): import("lit-html").TemplateResult<1>;
     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

@@ -1,78 +1,14 @@
 import { __decorate } from "tslib";
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import '@exmg/exm-button/exm-text-button.js';
-import '@material/web/button/text-button.js';
+import '@material/web/button/outlined-button.js';
+import '@material/web/button/filled-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;
-};
+import { serializeFormData } from './utils/serializeFormData.js';
 export class ExmFormBase extends ExmFormValidateMixin(ExmgElement) {
     constructor() {
         super(...arguments);
@@ -88,7 +24,8 @@ export class ExmFormBase extends ExmFormValidateMixin(ExmgElement) {
          * Internall used to show button spinner.
          */
         this.submitting = false;
-        this.hasAsideContent = false;
+        this.hasDescription = false;
+        this.hasHeader = false;
     }
     reset() {
         const form = this.getForm();
@@ -107,11 +44,12 @@ export class ExmFormBase extends ExmFormValidateMixin(ExmgElement) {
             return;
         }
         // Serialize form data
-        const data = serializeForm(form);
+        const data = serializeFormData(form);
         if (this.doAction) {
             try {
                 this.submitting = true;
                 await this.doAction(data);
+                this.fire('form-success', null, true);
             }
             catch (error) {
                 this.showError(error instanceof Error ? error.message : 'Unknown error');
@@ -119,6 +57,7 @@ export class ExmFormBase extends ExmFormValidateMixin(ExmgElement) {
             }
             finally {
                 this.submitting = false;
+                this.fire('form-submit-finished', { success: !this.errorMessage });
             }
         }
         else {
@@ -128,51 +67,72 @@ export class ExmFormBase extends ExmFormValidateMixin(ExmgElement) {
     showError(message) {
         this.errorMessage = message;
     }
+    slotHasContent(slot) {
+        const nodes = slot.assignedNodes({ flatten: true });
+        return nodes.length > 0;
+    }
+    handleDescriptionSlotChange(event) {
+        this.hasDescription = this.slotHasContent(event.target);
+    }
+    handleHeaderSlotChange(event) {
+        this.hasHeader = this.slotHasContent(event.target);
+    }
     renderToolbar() {
-        return html `<div class="toolbar-container"><slot name="toolbar"></slot></div>`;
+        return html `
+      <header class="toolbar-container">
+        <slot name="toolbar" @slotchange="${this.handleHeaderSlotChange}"></slot>
+      </header>
+    `;
     }
     renderFormContent() {
-        return html `<slot></slot>`;
-    }
-    renderAside() {
-        return html `<slot name="aside" @slotchange="${this.handleAsideSlotChange}"></slot>`;
+        return html `
+      <section class="content">
+        <slot></slot>
+      </section>
+    `;
     }
-    handleAsideSlotChange(e) {
-        const slot = e.target;
-        // @ts-ignore
-        const nodes = slot.assignedNodes({ flatten: true });
-        this.hasAsideContent = nodes.length > 0;
+    renderDescription() {
+        return html `
+      <section class="description">
+        <slot name="description" @slotchange="${this.handleDescriptionSlotChange}"></slot>
+      </section>
+    `;
     }
     renderError() {
-        return html `<div class="form-error"><div>${this.errorMessage}</div></div>`;
+        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"
+      <footer class="actions">
+        <md-outlined-button dialogFocus @click=${() => this.fire('form-cancel')}>
+          ${this.cancelBtn}
+        </md-outlined-button>
+        <md-filled-button
+          type="button"
           @click=${this.handleSubmit}
           ?disabled=${this.submitting || !this.formValid}
           ?loading=${this.submitting}
-          >${this.submitBtn}</exm-text-button
         >
-      </div>
+          ${this.submitBtn}
+        </md-filled-button>
+      </footer>
     `;
     }
-    renderContainer() {
-        return html ` <div class="container">
-      <div class="content">${this.renderFormContent()}</div>
-      <div class="aside ${classMap({ empty: !this.hasAsideContent })}">${this.renderAside()}</div>
-    </div>`;
-    }
     render() {
+        const classNames = {
+            'has-description': this.hasDescription,
+            'has-header': this.hasHeader,
+            'has-error': !!this.errorMessage,
+        };
         return html `
-      ${this.renderToolbar()} ${this.errorMessage ? this.renderError() : nothing} ${this.renderContainer()}
-      <div class="divider"><md-divider></md-divider></div>
-      ${this.renderActions()}
+      <article class="form-container ${classMap(classNames)}">
+        ${this.renderToolbar()} ${this.renderDescription()} ${this.errorMessage ? this.renderError() : nothing}
+        ${this.renderFormContent()} ${this.renderActions()}
+      </article>
     `;
     }
 }
@@ -186,8 +146,11 @@ __decorate([
     property({ type: Boolean })
 ], ExmFormBase.prototype, "submitting", void 0);
 __decorate([
-    property({ type: Boolean })
-], ExmFormBase.prototype, "hasAsideContent", void 0);
+    state()
+], ExmFormBase.prototype, "hasDescription", void 0);
+__decorate([
+    state()
+], ExmFormBase.prototype, "hasHeader", void 0);
 __decorate([
     property({ type: String })
 ], ExmFormBase.prototype, "errorMessage", void 0);

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

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 export type Constructor<T> = new (...args: any[]) => T;
-export declare abstract class FormValidateMixinClass extends LitElement {
+export declare class FormValidateMixinClass extends LitElement {
 }
 export declare class FormValidateMixinInterface {
     formValid: boolean;

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

@@ -11,10 +11,13 @@ export const ExmFormValidateMixin = (superClass) => {
             this.formValid = false;
         }
         getForm() {
-            return this.shadowRoot.querySelector('form');
+            return this === null || this === void 0 ? void 0 : this.shadowRoot.querySelector('form');
         }
         checkFormValidity() {
             const form = this.getForm();
+            if (!form) {
+                return;
+            }
             const formElements = form === null || form === void 0 ? void 0 : form.elements;
             let allValid = true;
             for (const el of formElements || []) {
@@ -33,19 +36,22 @@ export const ExmFormValidateMixin = (superClass) => {
         _handleInputChange(e) {
             const target = e.target;
             // Only check validation every 200ms max
-            this._debouncer = debounce.Debouncer.debounce(this._debouncer, async.timeOut.after(200), () => {
+            this.debouncer = debounce.Debouncer.debounce(this.debouncer, async.timeOut.after(200), () => {
                 // @ts-ignore
                 typeof target.reportValidity === 'function' && target.reportValidity();
                 this.checkFormValidity();
             });
         }
-        firstUpdated() {
+        async firstUpdated() {
             const form = this.getForm();
+            if (!form) {
+                return;
+            }
             this.boundHandleChange = this._handleInputChange.bind(this);
             form.addEventListener('keyup', this.boundHandleChange, true);
             form.addEventListener('input', this.boundHandleChange, true);
         }
-        disconnectedCallback() {
+        async disconnectedCallback() {
             const form = this.getForm();
             this.boundHandleChange && form.addEventListener('keyup', this.boundHandleChange, true);
             this.boundHandleChange && form.addEventListener('input', this.boundHandleChange, true);

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { ExmForm } from './exm-form.js';
 export { ExmFormValidateMixin, Constructor } from './exm-form-validate-mixin.js';
-export { ExmFormBase, serializeForm } from './exm-form-base.js';
+export { ExmFormBase } from './exm-form-base.js';
+export { serializeFormData } from './utils/serializeFormData.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

@@ -1,6 +1,7 @@
 export { ExmForm } from './exm-form.js';
 export { ExmFormValidateMixin } from './exm-form-validate-mixin.js';
-export { ExmFormBase, serializeForm } from './exm-form-base.js';
+export { ExmFormBase } from './exm-form-base.js';
+export { serializeFormData } from './utils/serializeFormData.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.js

@@ -15,67 +15,77 @@ export const style = css `
     --_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;
+  .form-container {
+    display: grid;
+    grid-template-rows: auto auto auto 1fr auto;
     height: 100%;
-    min-width: var(--_exm-form-aside-min-width);
-    flex: 0;
   }
 
-  .aside.empty {
+  ::slotted(.toolbar) {
+    grid-area: 1/1/2/2;
     display: none;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    min-height: 3.5rem;
+    box-sizing: border-box;
   }
 
-  .content,
-  .container {
-    display: flex;
-  }
-
-  .content {
-    flex: 1;
-  }
-
-  .container {
-    margin-top: var(--_exm-form-container-margin-top);
-    margin-bottom: var(--_exm-form-container-margin-bottom);
+  ::slotted(.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;
   }
 
-  .actions {
+  .has-header ::slotted(.toolbar) {
     display: flex;
-    padding: 8px 4px;
-    justify-content: flex-end;
   }
 
-  .actions > * {
-    margin-right: 8px;
+  .description {
+    grid-area: 2/1/3/2;
+    display: none;
+    padding: 0.5rem 1rem;
+    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));
+    height: 100%;
   }
 
-  .divider {
-    margin-top: var(--_exm-form-divider-margin-top);
+  .has-description .description {
+    display: initial;
   }
 
   .content {
-    margin-left: var(--_exm-form-content-margin-left);
+    grid-area: 4/1/5/2;
+    padding: 0.5rem 1rem;
+    overflow: scroll;
+  }
+
+  .actions {
+    grid-area: 5/1/6/2;
+    display: flex;
+    padding: 1rem;
+    margin-top: 1rem;
+    gap: 0.5rem;
+    justify-content: flex-end;
+    border-top: 1px solid var(--md-sys-color-outline-variant);
   }
 
   .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));
+    grid-area: 3/1/4/2;
+    padding: 0.5rem 1rem;
   }
 
   .form-error > div {
     padding: 1rem;
+    border-radius: 1rem;
+    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));
   }
 `;
 //# sourceMappingURL=exm-form-base-css.js.map

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

@@ -9,41 +9,20 @@ export const style = css `
     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;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
     width: 100%;
   }
 
+  form > * {
+    display: contents;
+  }
+
   form .row {
     display: flex;
-    gap: 6px;
-    height: 76px;
-    align-items: flex-start;
+    gap: 0.75rem;
   }
 
   form .row > * {
@@ -51,21 +30,6 @@ export const style = css `
     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;
   }
@@ -88,24 +52,6 @@ export const style = css `
     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);
   }

package/dist/utils/serializeFormData.d.ts

@@ -0,0 +1 @@
+export declare const serializeFormData: (form: HTMLFormElement) => {};

package/dist/utils/serializeFormData.js

@@ -0,0 +1,64 @@
+export const serializeFormData = (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 [key, value] of formData.entries()) {
+        if (Object.hasOwnProperty.call(obj, key)) {
+            if (!Array.isArray(obj[key])) {
+                obj[key] = [obj[key]];
+            }
+            obj[key].push(value);
+            continue;
+        }
+        if (numberNames.includes(key)) {
+            obj[key] = value ? parseFloat(`${value}`) : undefined;
+            continue;
+        }
+        // When set to on convert to boolean return value
+        // @ts-ignore
+        if (checkboxNames.includes(key)) {
+            obj[key] = value === '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 (value === 'on') {
+                obj[key] = value === 'on';
+            }
+            else {
+                obj[key] = value;
+            }
+            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;
+};
+//# sourceMappingURL=serializeFormData.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-form",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@exmg/exm-button": "^1.1.12"
+    "@exmg/exm-button": "^1.1.13"
   },
   "peerDependencies": {
     "lit": "^3.2.1",
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1478e41cdcc8b109995cf78f8ccfadd7699c22aa"
+  "gitHead": "f482775e785f3e1fe8dde56cf7614428ff9a7e80"
 }