@exmg/exm-form 1.1.9 → 1.1.10-alpha.26

package/.rollup.cache/root/repo/packages/exm-form/dist/exm-form-base.d.ts

@@ -0,0 +1,56 @@
+import '@exmg/exm-button/exm-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';
+declare const ExmFormBase_base: import("./exm-form-dirty-mixin.js").Constructor<import("./exm-form-dirty-mixin.js").FormDirtyMixinInterface> & 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;
+    /**
+     * Hide cancel button
+     */
+    hideCancelButton: boolean;
+    /**
+     * Show reset button
+     */
+    showResetButton: boolean;
+    /**
+     * Disabled the submit,
+     */
+    disableSubmitButton?: boolean;
+    /**
+     * Internall used to show button spinner.
+     */
+    submitting: boolean;
+    boundHandleBlur?: (e: Event) => void;
+    boundHandleKeyup?: (e: Event) => void;
+    hasDescription: boolean;
+    hasHeader: 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;
+    slotHasContent(slot: HTMLSlotElement): boolean;
+    handleDescriptionSlotChange(event: CustomEvent): void;
+    handleHeaderSlotChange(event: CustomEvent): void;
+    protected renderToolbar(): import("lit-html").TemplateResult<1>;
+    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 render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/.rollup.cache/root/repo/packages/exm-form/dist/exm-form-base.js

@@ -0,0 +1,190 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import '@exmg/exm-button/exm-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';
+import { serializeFormData } from './utils/serializeFormData.js';
+import { ExmFormDirtyMixin } from './exm-form-dirty-mixin.js';
+export class ExmFormBase extends ExmFormDirtyMixin(ExmFormValidateMixin(ExmgElement)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Submit button copy
+         */
+        this.submitBtn = 'Save';
+        /**
+         * Cancel button copy
+         */
+        this.cancelBtn = 'Cancel';
+        /**
+         * Hide cancel button
+         */
+        this.hideCancelButton = false;
+        /**
+         * Show reset button
+         */
+        this.showResetButton = false;
+        /**
+         * Disabled the submit,
+         */
+        this.disableSubmitButton = false;
+        /**
+         * Internall used to show button spinner.
+         */
+        this.submitting = false;
+        this.hasDescription = false;
+        this.hasHeader = 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 = 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');
+                this.fire('form-error', { message: error instanceof Error ? error.message : 'Unknown error' }, true);
+            }
+            finally {
+                this.submitting = false;
+                this.fire('form-submit-finished', { success: !this.errorMessage });
+            }
+        }
+        else {
+            this.fire('form-submit', data, true);
+        }
+    }
+    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 `
+      <header class="toolbar-container">
+        <slot name="toolbar" @slotchange="${this.handleHeaderSlotChange}"></slot>
+      </header>
+    `;
+    }
+    renderFormContent() {
+        return html `
+      <section class="content">
+        <slot></slot>
+      </section>
+    `;
+    }
+    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>
+    `;
+    }
+    renderActions() {
+        return html `
+      <footer class="actions">
+        ${this.showResetButton
+            ? html `
+              <md-icon-button ?disabled=${!this.dirty} @click=${this.reset}>
+                <md-icon>restart_alt</md-icon>
+              </md-icon-button>
+            `
+            : nothing}
+        ${this.hideCancelButton
+            ? nothing
+            : html `
+              <md-outlined-button dialogFocus @click=${() => this.fire('form-cancel')}>
+                ${this.cancelBtn}
+              </md-outlined-button>
+            `}
+        <md-filled-button
+          type="button"
+          @click=${this.handleSubmit}
+          ?disabled=${this.disableSubmitButton || this.submitting || !this.formValid}
+          ?loading=${this.submitting}
+        >
+          ${this.submitBtn}
+        </md-filled-button>
+      </footer>
+    `;
+    }
+    render() {
+        const classNames = {
+            'has-description': this.hasDescription,
+            'has-header': this.hasHeader,
+            'has-error': !!this.errorMessage,
+        };
+        return html `
+      <article class="form-container ${classMap(classNames)}">
+        ${this.renderToolbar()} ${this.renderDescription()} ${this.errorMessage ? this.renderError() : nothing}
+        ${this.renderFormContent()} ${this.renderActions()}
+      </article>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], ExmFormBase.prototype, "submitBtn", void 0);
+__decorate([
+    property({ type: String })
+], ExmFormBase.prototype, "cancelBtn", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-cancel-button' })
+], ExmFormBase.prototype, "hideCancelButton", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-reset-button' })
+], ExmFormBase.prototype, "showResetButton", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disable-submit-button' })
+], ExmFormBase.prototype, "disableSubmitButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmFormBase.prototype, "submitting", void 0);
+__decorate([
+    state()
+], ExmFormBase.prototype, "hasDescription", void 0);
+__decorate([
+    state()
+], ExmFormBase.prototype, "hasHeader", void 0);
+__decorate([
+    property({ type: String })
+], ExmFormBase.prototype, "errorMessage", void 0);
+//# sourceMappingURL=exm-form-base.js.map

package/.rollup.cache/root/repo/packages/exm-form/dist/exm-form-dirty-mixin.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+export type Constructor<T> = new (...args: any[]) => T;
+export declare class FormDirtyMixinClass extends LitElement {
+}
+export declare class FormDirtyMixinInterface {
+    dirty: boolean;
+    getForm(): HTMLFormElement | null;
+    takeFormDataSnapshot(): void;
+}
+export declare const ExmFormDirtyMixin: <T extends Constructor<LitElement & FormDirtyMixinClass>>(superClass: T) => Constructor<FormDirtyMixinInterface> & T;

package/.rollup.cache/root/repo/packages/exm-form/dist/exm-form-dirty-mixin.js

@@ -0,0 +1,92 @@
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
+import { state } from 'lit/decorators.js';
+export class FormDirtyMixinClass extends LitElement {
+}
+export const ExmFormDirtyMixin = (superClass) => {
+    class FormDirtyMixinElement extends superClass {
+        constructor(...args) {
+            super(...args);
+            this.dirty = false;
+            this.onFormChanged = this.updateDirtyState.bind(this);
+        }
+        getForm() {
+            var _a, _b;
+            return (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('form')) !== null && _b !== void 0 ? _b : null;
+        }
+        getCurrentFormData() {
+            const form = this.getForm();
+            if (!form)
+                return;
+            return new FormData(form);
+        }
+        // NOTE: We have to compare formdata like this... we can't do a direct comparison unfortunately
+        formDataEquals(formData1, formData2) {
+            if (!formData1 || !formData2)
+                return false;
+            return JSON.stringify([...formData1]) === JSON.stringify([...formData2]);
+        }
+        fireDirtyChanged() {
+            this.dispatchEvent(new CustomEvent('form-dirty-changed', {
+                detail: this.dirty,
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        async updateDirtyState() {
+            await this.updateComplete;
+            const current = this.getCurrentFormData();
+            if (!current)
+                return;
+            if (this.formDataEquals(current, this.formDataSnapshot)) {
+                this.resetDirtyState();
+                return;
+            }
+            if (!this.dirty) {
+                this.dirty = true;
+                this.fireDirtyChanged();
+            }
+        }
+        resetDirtyState() {
+            if (this.dirty) {
+                this.dirty = false;
+                this.fireDirtyChanged();
+            }
+        }
+        // NOTE: Sometimes we want to make a snapshot from a form on for example drawer open instead of on firstUpdated
+        takeFormDataSnapshot() {
+            const form = this.getForm();
+            if (!form)
+                return;
+            this.formDataSnapshot = new FormData(form);
+        }
+        async firstUpdated() {
+            var _a;
+            // @ts-ignore
+            (_a = super.firstUpdated) === null || _a === void 0 ? void 0 : _a.call(this);
+            await this.updateComplete;
+            const form = this.getForm();
+            if (!form)
+                return;
+            this.takeFormDataSnapshot();
+            form.addEventListener('input', this.onFormChanged);
+            form.addEventListener('change', this.onFormChanged);
+            form.addEventListener('reset', this.onFormChanged);
+        }
+        async disconnectedCallback() {
+            var _a;
+            const form = this.getForm();
+            if (form) {
+                form.removeEventListener('input', this.onFormChanged);
+                form.removeEventListener('change', this.onFormChanged);
+                form.removeEventListener('reset', this.onFormChanged);
+            }
+            (_a = super.disconnectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        }
+    }
+    __decorate([
+        state()
+    ], FormDirtyMixinElement.prototype, "dirty", void 0);
+    return FormDirtyMixinElement;
+};
+//# sourceMappingURL=exm-form-dirty-mixin.js.map

package/.rollup.cache/root/repo/packages/exm-form/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 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/.rollup.cache/root/repo/packages/exm-form/dist/exm-form-validate-mixin.js

@@ -0,0 +1,66 @@
+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 === 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 || []) {
+                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();
+            });
+        }
+        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);
+        }
+        async 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/.rollup.cache/root/repo/packages/exm-form/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/.rollup.cache/root/repo/packages/exm-form/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/.rollup.cache/root/repo/packages/exm-form/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { ExmForm } from './exm-form.js';
+export { ExmFormValidateMixin, Constructor } from './exm-form-validate-mixin.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/.rollup.cache/root/repo/packages/exm-form/dist/index.js

@@ -0,0 +1,7 @@
+export { ExmForm } from './exm-form.js';
+export { ExmFormValidateMixin } from './exm-form-validate-mixin.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/.rollup.cache/root/repo/packages/exm-form/dist/styles/exm-form-base-css.d.ts

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

package/.rollup.cache/root/repo/packages/exm-form/dist/styles/exm-form-base-css.js

@@ -0,0 +1,91 @@
+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);
+  }
+
+  .form-container {
+    display: grid;
+    grid-template-rows: auto auto auto 1fr auto;
+    height: 100%;
+  }
+
+  ::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;
+  }
+
+  ::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;
+  }
+
+  .has-header ::slotted(.toolbar) {
+    display: flex;
+  }
+
+  .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%;
+  }
+
+  .has-description .description {
+    display: initial;
+  }
+
+  .content {
+    grid-area: 4/1/5/2;
+    padding: 0.5rem 1rem;
+    overflow: auto;
+  }
+
+  .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 {
+    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/.rollup.cache/root/repo/packages/exm-form/dist/styles/exm-form-css.d.ts

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

package/.rollup.cache/root/repo/packages/exm-form/dist/styles/exm-form-css.js

@@ -0,0 +1,59 @@
+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;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: 100%;
+  }
+
+  form > * {
+    display: contents;
+  }
+
+  form .row {
+    display: flex;
+    gap: 0.75rem;
+  }
+
+  form .row > * {
+    flex: 1;
+    height: fit-content;
+  }
+
+  .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;
+  }
+
+  a {
+    color: var(--md-sys-color-primary);
+  }
+`;
+//# sourceMappingURL=exm-form-css.js.map

package/.rollup.cache/root/repo/packages/exm-form/dist/utils/serializeFormData.d.ts

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