@exmg/exm-form 1.1.27 → 1.1.29

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

@@ -3,7 +3,7 @@ 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-validate-mixin.js").Constructor<import("./exm-form-validate-mixin.js").FormValidateMixinInterface> & typeof ExmgElement;
+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
@@ -13,6 +13,14 @@ export declare class ExmFormBase extends ExmFormBase_base {
      * Cancel button copy
      */
     cancelBtn: string;
+    /**
+     * Hide cancel button
+     */
+    hideCancelButton: boolean;
+    /**
+     * Show reset button
+     */
+    showResetButton: boolean;
     /**
      * Internall used to show button spinner.
      */

package/dist/exm-form-base.js

@@ -9,7 +9,8 @@ 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';
-export class ExmFormBase extends ExmFormValidateMixin(ExmgElement) {
+import { ExmFormDirtyMixin } from './exm-form-dirty-mixin.js';
+export class ExmFormBase extends ExmFormDirtyMixin(ExmFormValidateMixin(ExmgElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -20,6 +21,14 @@ export class ExmFormBase extends ExmFormValidateMixin(ExmgElement) {
          * Cancel button copy
          */
         this.cancelBtn = 'Cancel';
+        /**
+         * Hide cancel button
+         */
+        this.hideCancelButton = false;
+        /**
+         * Show reset button
+         */
+        this.showResetButton = false;
         /**
          * Internall used to show button spinner.
          */
@@ -108,9 +117,20 @@ export class ExmFormBase extends ExmFormValidateMixin(ExmgElement) {
     renderActions() {
         return html `
       <footer class="actions">
-        <md-outlined-button dialogFocus @click=${() => this.fire('form-cancel')}>
-          ${this.cancelBtn}
-        </md-outlined-button>
+        ${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}
@@ -142,6 +162,12 @@ __decorate([
 __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 })
 ], ExmFormBase.prototype, "submitting", void 0);

package/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/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/package.json

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