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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/exm-form-drawer-base.d.ts +88 -0
  2. package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/exm-form-drawer-base.js +200 -0
  3. package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/exm-form-drawer.d.ts +10 -0
  4. package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/exm-form-drawer.js +23 -0
  5. package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/index.d.ts +3 -0
  6. package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/index.js +4 -0
  7. package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/styles/exm-form-drawer-styles-css.d.ts +1 -0
  8. package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/styles/exm-form-drawer-styles-css.js +18 -0
  9. package/dist/exm-form-drawer-base.d.ts +28 -21
  10. package/dist/exm-form-drawer-base.js +96 -91
  11. package/dist/exm-form-drawer.d.ts +1 -1
  12. package/dist/exm-form-drawer.js +13 -4
  13. package/dist/index.js +1 -1
  14. package/dist/styles/exm-form-drawer-styles-css.js +13 -52
  15. package/package.json +7 -9
package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/exm-form-drawer-base.d.ts ADDED
@@ -0,0 +1,88 @@
1
+ import { PropertyValues } from 'lit';
2
+ import '@exmg/exm-drawer/exm-drawer.js';
3
+ import '@exmg/exm-button/exm-filled-button.js';
4
+ import '@material/web/button/text-button.js';
5
+ import { ExmFormBase } from '@exmg/exm-form';
6
+ import { ExmgElement } from '@exmg/lit-base';
7
+ export declare class ExmFormDrawerBase extends ExmgElement {
8
+ /**
9
+ * Opened state of the form-drawer
10
+ * @type {Boolean}
11
+ */
12
+ opened: boolean;
13
+ /**
14
+ * The title of the 'submit' button
15
+ * @type {String}
16
+ */
17
+ submitBtn: string;
18
+ /**
19
+ * Title of the cancel button
20
+ * @type {String}
21
+ */
22
+ cancelBtn: string;
23
+ /**
24
+ * Hide cancel button
25
+ */
26
+ hideCancelButton: boolean;
27
+ /**
28
+ * Show reset button
29
+ */
30
+ showResetButton: boolean;
31
+ /**
32
+ * Whether or not to keep the form drawer opened on submit success
33
+ * @type {Boolean}
34
+ */
35
+ keepOpenedOnSubmitSuccess: boolean;
36
+ /**
37
+ * No cancel on outside click
38
+ * @type {Boolean}
39
+ */
40
+ noCancelOnOutsideClick: boolean;
41
+ /**
42
+ * No reset on close
43
+ * @type {Boolean}
44
+ */
45
+ noResetOnClose: boolean;
46
+ /**
47
+ * Internall used to show button spinner.
48
+ * @type {Boolean}
49
+ */
50
+ submitting: boolean;
51
+ /**
52
+ * for showing error text
53
+ * @type {String}
54
+ */
55
+ errorMessage?: string | null;
56
+ /**
57
+ * Disabled the draws form submit button
58
+ * @type {Boolean}
59
+ */
60
+ disableSubmitButton?: boolean;
61
+ exmForm?: ExmFormBase;
62
+ /**
63
+ * Opens and shows the drawer.
64
+ */
65
+ show(): void;
66
+ /**
67
+ * Closes the drawer.
68
+ */
69
+ close(): void;
70
+ /**
71
+ * Opens and shows the dialog if it is closed; otherwise closes it.
72
+ */
73
+ toggleShow(): void;
74
+ reset(): void;
75
+ /**
76
+ * Action method that needs to be implemented
77
+ * @param {CustomEvent} e
78
+ */
79
+ doAction?(formData: unknown): Promise<void> | void;
80
+ protected firstUpdated(_changedProperties: PropertyValues): void;
81
+ private handleSubmitFinished;
82
+ /**
83
+ * Method should be overriden to render form content
84
+ */
85
+ protected renderFormContent(): import("lit-html").TemplateResult<1> | undefined;
86
+ protected handleDrawerOpenedChanged(event: CustomEvent): void;
87
+ protected render(): import("lit-html").TemplateResult<1>;
88
+ }
package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/exm-form-drawer-base.js ADDED
@@ -0,0 +1,200 @@
1
+ import { __decorate } from "tslib";
2
+ import { html } from 'lit';
3
+ import { property, query } from 'lit/decorators.js';
4
+ import '@exmg/exm-drawer/exm-drawer.js';
5
+ import '@exmg/exm-button/exm-filled-button.js';
6
+ import '@material/web/button/text-button.js';
7
+ import { ExmgElement } from '@exmg/lit-base';
8
+ import { ifDefined } from 'lit/directives/if-defined.js';
9
+ export class ExmFormDrawerBase extends ExmgElement {
10
+ constructor() {
11
+ super(...arguments);
12
+ /**
13
+ * Opened state of the form-drawer
14
+ * @type {Boolean}
15
+ */
16
+ this.opened = false;
17
+ /**
18
+ * The title of the 'submit' button
19
+ * @type {String}
20
+ */
21
+ this.submitBtn = 'Submit';
22
+ /**
23
+ * Title of the cancel button
24
+ * @type {String}
25
+ */
26
+ this.cancelBtn = 'Cancel';
27
+ /**
28
+ * Hide cancel button
29
+ */
30
+ this.hideCancelButton = false;
31
+ /**
32
+ * Show reset button
33
+ */
34
+ this.showResetButton = false;
35
+ /**
36
+ * Whether or not to keep the form drawer opened on submit success
37
+ * @type {Boolean}
38
+ */
39
+ this.keepOpenedOnSubmitSuccess = false;
40
+ /**
41
+ * No cancel on outside click
42
+ * @type {Boolean}
43
+ */
44
+ this.noCancelOnOutsideClick = false;
45
+ /**
46
+ * No reset on close
47
+ * @type {Boolean}
48
+ */
49
+ this.noResetOnClose = false;
50
+ /**
51
+ * Internall used to show button spinner.
52
+ * @type {Boolean}
53
+ */
54
+ this.submitting = false;
55
+ /**
56
+ * Disabled the draws form submit button
57
+ * @type {Boolean}
58
+ */
59
+ this.disableSubmitButton = false;
60
+ }
61
+ /**
62
+ * Opens and shows the drawer.
63
+ */
64
+ show() {
65
+ this.opened = true;
66
+ }
67
+ /**
68
+ * Closes the drawer.
69
+ */
70
+ close() {
71
+ this.opened = false;
72
+ }
73
+ /**
74
+ * Opens and shows the dialog if it is closed; otherwise closes it.
75
+ */
76
+ toggleShow() {
77
+ if (this.opened) {
78
+ this.close();
79
+ }
80
+ else {
81
+ this.show();
82
+ }
83
+ }
84
+ reset() {
85
+ if (!this.exmForm) {
86
+ return;
87
+ }
88
+ this.errorMessage = null;
89
+ const form = this.exmForm.getForm();
90
+ form.reset();
91
+ }
92
+ firstUpdated(_changedProperties) {
93
+ var _a;
94
+ if (!this.exmForm && !this.doAction) {
95
+ return;
96
+ }
97
+ // By default form doAction is undefined, TS does not like that
98
+ // @ts-ignore
99
+ this.exmForm.doAction = (_a = this.doAction) === null || _a === void 0 ? void 0 : _a.bind(this);
100
+ }
101
+ handleSubmitFinished({ detail }) {
102
+ if (detail.success && !this.keepOpenedOnSubmitSuccess) {
103
+ this.opened = false;
104
+ }
105
+ }
106
+ /**
107
+ * Method should be overriden to render form content
108
+ */
109
+ renderFormContent() {
110
+ var _a;
111
+ return (_a = this.exmForm) === null || _a === void 0 ? void 0 : _a.renderFormContent();
112
+ }
113
+ handleDrawerOpenedChanged(event) {
114
+ const opened = event.detail.value;
115
+ if (!this.exmForm) {
116
+ return;
117
+ }
118
+ if (opened) {
119
+ this.exmForm.takeFormDataSnapshot();
120
+ this.exmForm.checkFormValidity();
121
+ }
122
+ else if (!this.noResetOnClose) {
123
+ // NOTE: Reset form data when closing the drawer
124
+ this.reset();
125
+ }
126
+ this.opened = opened;
127
+ }
128
+ render() {
129
+ return html `
130
+ <exm-drawer
131
+ ?opened="${this.opened}"
132
+ ?no-cancel-on-outside-click="${this.noCancelOnOutsideClick}"
133
+ @exm-drawer-opened-changed=${this.handleDrawerOpenedChanged}
134
+ maxWidth="${this.style.maxWidth || '547px'}"
135
+ >
136
+ <section class="drawer-content">
137
+ <header class="header">
138
+ <slot name="title" class="title">${this.title}</slot>
139
+ <div class="actions">
140
+ <md-icon-button @click=${this.close}>
141
+ <md-icon>close</md-icon>
142
+ </md-icon-button>
143
+ </div>
144
+ </header>
145
+ <exm-form
146
+ submitBtn=${this.submitBtn}
147
+ cancelBtn=${this.cancelBtn}
148
+ .errorMessage=${this.errorMessage}
149
+ class="form-elements"
150
+ @form-submit-finished=${this.handleSubmitFinished}
151
+ @form-cancel=${this.close}
152
+ doAction=${ifDefined(this.doAction)}
153
+ ?hide-cancel-button=${this.hideCancelButton}
154
+ ?show-reset-button=${this.showResetButton}
155
+ ?disable-submit-button=${this.disableSubmitButton}
156
+ >
157
+ ${this.renderFormContent()}
158
+ </exm-form>
159
+ </section>
160
+ </exm-drawer>
161
+ `;
162
+ }
163
+ }
164
+ __decorate([
165
+ property({ type: Boolean })
166
+ ], ExmFormDrawerBase.prototype, "opened", void 0);
167
+ __decorate([
168
+ property({ type: String, attribute: 'submit-btn-title' })
169
+ ], ExmFormDrawerBase.prototype, "submitBtn", void 0);
170
+ __decorate([
171
+ property({ type: String, attribute: 'cancel-btn-title' })
172
+ ], ExmFormDrawerBase.prototype, "cancelBtn", void 0);
173
+ __decorate([
174
+ property({ type: Boolean, attribute: 'hide-cancel-button' })
175
+ ], ExmFormDrawerBase.prototype, "hideCancelButton", void 0);
176
+ __decorate([
177
+ property({ type: Boolean, attribute: 'show-reset-button' })
178
+ ], ExmFormDrawerBase.prototype, "showResetButton", void 0);
179
+ __decorate([
180
+ property({ type: Boolean, attribute: 'keep-opened-on-submit-success' })
181
+ ], ExmFormDrawerBase.prototype, "keepOpenedOnSubmitSuccess", void 0);
182
+ __decorate([
183
+ property({ type: Boolean, attribute: 'no-cancel-on-outside-click' })
184
+ ], ExmFormDrawerBase.prototype, "noCancelOnOutsideClick", void 0);
185
+ __decorate([
186
+ property({ type: Boolean, attribute: 'no-reset-on-close' })
187
+ ], ExmFormDrawerBase.prototype, "noResetOnClose", void 0);
188
+ __decorate([
189
+ property({ type: Boolean })
190
+ ], ExmFormDrawerBase.prototype, "submitting", void 0);
191
+ __decorate([
192
+ property({ type: String })
193
+ ], ExmFormDrawerBase.prototype, "errorMessage", void 0);
194
+ __decorate([
195
+ property({ type: Boolean, attribute: 'disable-submit-button' })
196
+ ], ExmFormDrawerBase.prototype, "disableSubmitButton", void 0);
197
+ __decorate([
198
+ query('exm-form')
199
+ ], ExmFormDrawerBase.prototype, "exmForm", void 0);
200
+ //# sourceMappingURL=exm-form-drawer-base.js.map
package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/exm-form-drawer.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { ExmFormDrawerBase } from './exm-form-drawer-base.js';
2
+ export declare class ExmFormDrawer extends ExmFormDrawerBase {
3
+ static styles: import("lit").CSSResult[];
4
+ protected firstUpdated(): void;
5
+ }
6
+ declare global {
7
+ interface HTMLElementTagNameMap {
8
+ 'exm-form-drawer': ExmFormDrawer;
9
+ }
10
+ }
package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/exm-form-drawer.js ADDED
@@ -0,0 +1,23 @@
1
+ import { __decorate } from "tslib";
2
+ import { customElement } from 'lit/decorators.js';
3
+ import { style } from './styles/exm-form-drawer-styles-css.js';
4
+ import { ExmFormDrawerBase } from './exm-form-drawer-base.js';
5
+ import { formStyles } from '@exmg/exm-form';
6
+ let ExmFormDrawer = class ExmFormDrawer extends ExmFormDrawerBase {
7
+ firstUpdated() {
8
+ super.firstUpdated(new Map());
9
+ if (!this.exmForm) {
10
+ return;
11
+ }
12
+ /**
13
+ * We have to overwrite the getForm method because for whatever reason the form is not properly accessible from within the exm-form component
14
+ */
15
+ this.exmForm.getForm = () => this.querySelector('form');
16
+ }
17
+ };
18
+ ExmFormDrawer.styles = [style, formStyles];
19
+ ExmFormDrawer = __decorate([
20
+ customElement('exm-form-drawer')
21
+ ], ExmFormDrawer);
22
+ export { ExmFormDrawer };
23
+ //# sourceMappingURL=exm-form-drawer.js.map
package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { ExmFormDrawer } from './exm-form-drawer.js';
2
+ export { ExmFormDrawerBase } from './exm-form-drawer-base.js';
3
+ export { style as formDrawerStyles } from './styles/exm-form-drawer-styles-css.js';
package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/index.js ADDED
@@ -0,0 +1,4 @@
1
+ export { ExmFormDrawer } from './exm-form-drawer.js';
2
+ export { ExmFormDrawerBase } from './exm-form-drawer-base.js';
3
+ export { style as formDrawerStyles } from './styles/exm-form-drawer-styles-css.js';
4
+ //# sourceMappingURL=index.js.map
package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/styles/exm-form-drawer-styles-css.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const style: import("lit").CSSResult;
package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/styles/exm-form-drawer-styles-css.js ADDED
@@ -0,0 +1,18 @@
1
+ import { css } from 'lit';
2
+ export const style = css `
3
+ .drawer-content {
4
+ height: 100%;
5
+ display: grid;
6
+ grid-template-rows: auto 1fr;
7
+ }
8
+
9
+ .header {
10
+ font-size: 1.4rem;
11
+ padding: 1rem;
12
+ display: flex;
13
+ min-height: 3rem;
14
+ align-items: center;
15
+ justify-content: space-between;
16
+ }
17
+ `;
18
+ //# sourceMappingURL=exm-form-drawer-styles-css.js.map
package/dist/exm-form-drawer-base.d.ts CHANGED
@@ -1,9 +1,10 @@
1
+ import { PropertyValues } from 'lit';
1
2
  import '@exmg/exm-drawer/exm-drawer.js';
2
3
  import '@exmg/exm-button/exm-filled-button.js';
3
4
  import '@material/web/button/text-button.js';
5
+ import { ExmFormBase } from '@exmg/exm-form';
4
6
  import { ExmgElement } from '@exmg/lit-base';
5
- declare const ExmFormDrawerBase_base: import("@exmg/exm-form").Constructor<import("@exmg/exm-form/dist/exm-form-validate-mixin.js").FormValidateMixinInterface> & typeof ExmgElement;
6
- export declare class ExmFormDrawerBase extends ExmFormDrawerBase_base {
7
+ export declare class ExmFormDrawerBase extends ExmgElement {
7
8
  /**
8
9
  * Opened state of the form-drawer
9
10
  * @type {Boolean}
@@ -13,17 +14,20 @@ export declare class ExmFormDrawerBase extends ExmFormDrawerBase_base {
13
14
  * The title of the 'submit' button
14
15
  * @type {String}
15
16
  */
16
- submitBtnTitle: string;
17
- /**
18
- * Whether or not to hide the submit button
19
- * @type {Boolean}
20
- */
21
- submitBtnHidden: boolean;
17
+ submitBtn: string;
22
18
  /**
23
19
  * Title of the cancel button
24
20
  * @type {String}
25
21
  */
26
- cancelBtnTitle: string;
22
+ cancelBtn: string;
23
+ /**
24
+ * Hide cancel button
25
+ */
26
+ hideCancelButton: boolean;
27
+ /**
28
+ * Show reset button
29
+ */
30
+ showResetButton: boolean;
27
31
  /**
28
32
  * Whether or not to keep the form drawer opened on submit success
29
33
  * @type {Boolean}
@@ -35,20 +39,26 @@ export declare class ExmFormDrawerBase extends ExmFormDrawerBase_base {
35
39
  */
36
40
  noCancelOnOutsideClick: boolean;
37
41
  /**
38
- * Disable sticky header in drawer
42
+ * No reset on close
39
43
  * @type {Boolean}
40
44
  */
41
- disableStickyHeader: boolean;
45
+ noResetOnClose: boolean;
42
46
  /**
43
47
  * Internall used to show button spinner.
48
+ * @type {Boolean}
44
49
  */
45
50
  submitting: boolean;
46
51
  /**
47
- * Scroll action of the drawer
48
- * @type {'lock' | 'refit' | 'cancel' | undefined}
52
+ * for showing error text
53
+ * @type {String}
49
54
  */
50
- scrollAction?: 'lock' | 'refit' | 'cancel' | undefined;
51
55
  errorMessage?: string | null;
56
+ /**
57
+ * Disabled the draws form submit button
58
+ * @type {Boolean}
59
+ */
60
+ disableSubmitButton?: boolean;
61
+ exmForm?: ExmFormBase;
52
62
  /**
53
63
  * Opens and shows the drawer.
54
64
  */
@@ -67,15 +77,12 @@ export declare class ExmFormDrawerBase extends ExmFormDrawerBase_base {
67
77
  * @param {CustomEvent} e
68
78
  */
69
79
  doAction?(formData: unknown): Promise<void> | void;
70
- protected handleSubmit(): Promise<void>;
71
- private handleCancelBtnClick;
72
- showError(message: string): void;
80
+ protected firstUpdated(_changedProperties: PropertyValues): void;
81
+ private handleSubmitFinished;
73
82
  /**
74
83
  * Method should be overriden to render form content
75
84
  */
76
- protected renderFormContent(): import("lit-html").TemplateResult<1>;
77
- protected renderError(): import("lit-html").TemplateResult<1>;
78
- protected handleDrawerOpenedChanged(e: CustomEvent): void;
85
+ protected renderFormContent(): import("lit-html").TemplateResult<1> | undefined;
86
+ protected handleDrawerOpenedChanged(event: CustomEvent): void;
79
87
  protected render(): import("lit-html").TemplateResult<1>;
80
88
  }
81
- export {};
package/dist/exm-form-drawer-base.js CHANGED
@@ -1,14 +1,13 @@
1
- import { __decorate } from "tslib";
2
- import { html, nothing } from 'lit';
3
- import { property } from 'lit/decorators.js';
4
- import { ifDefined } from 'lit/directives/if-defined.js';
1
+ import { __decorate } from 'tslib';
2
+ import { html } from 'lit';
3
+ import { property, query } from 'lit/decorators.js';
5
4
  import '@exmg/exm-drawer/exm-drawer.js';
6
5
  import '@exmg/exm-button/exm-filled-button.js';
7
6
  import '@material/web/button/text-button.js';
8
7
  import { ExmgElement } from '@exmg/lit-base';
9
- import { serializeForm } from '@exmg/exm-form';
10
- import { ExmFormValidateMixin } from '@exmg/exm-form';
11
- export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
8
+ import { ifDefined } from 'lit/directives/if-defined.js';
9
+
10
+ class ExmFormDrawerBase extends ExmgElement {
12
11
  constructor() {
13
12
  super(...arguments);
14
13
  /**
@@ -20,17 +19,20 @@ export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
20
19
  * The title of the 'submit' button
21
20
  * @type {String}
22
21
  */
23
- this.submitBtnTitle = 'Submit';
24
- /**
25
- * Whether or not to hide the submit button
26
- * @type {Boolean}
27
- */
28
- this.submitBtnHidden = false;
22
+ this.submitBtn = 'Submit';
29
23
  /**
30
24
  * Title of the cancel button
31
25
  * @type {String}
32
26
  */
33
- this.cancelBtnTitle = 'Cancel';
27
+ this.cancelBtn = 'Cancel';
28
+ /**
29
+ * Hide cancel button
30
+ */
31
+ this.hideCancelButton = false;
32
+ /**
33
+ * Show reset button
34
+ */
35
+ this.showResetButton = false;
34
36
  /**
35
37
  * Whether or not to keep the form drawer opened on submit success
36
38
  * @type {Boolean}
@@ -42,14 +44,20 @@ export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
42
44
  */
43
45
  this.noCancelOnOutsideClick = false;
44
46
  /**
45
- * Disable sticky header in drawer
47
+ * No reset on close
46
48
  * @type {Boolean}
47
49
  */
48
- this.disableStickyHeader = false;
50
+ this.noResetOnClose = false;
49
51
  /**
50
52
  * Internall used to show button spinner.
53
+ * @type {Boolean}
51
54
  */
52
55
  this.submitting = false;
56
+ /**
57
+ * Disabled the draws form submit button
58
+ * @type {Boolean}
59
+ */
60
+ this.disableSubmitButton = false;
53
61
  }
54
62
  /**
55
63
  * Opens and shows the drawer.
@@ -75,63 +83,48 @@ export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
75
83
  }
76
84
  }
77
85
  reset() {
86
+ if (!this.exmForm) {
87
+ return;
88
+ }
78
89
  this.errorMessage = null;
79
- const form = this.getForm();
90
+ const form = this.exmForm.getForm();
80
91
  form.reset();
81
92
  }
82
- async handleSubmit() {
83
- const form = this.getForm();
84
- this.errorMessage = null;
85
- // Check form validity
86
- this.checkFormValidity();
87
- // Return when there are invalid fields
88
- if (!this.formValid) {
93
+ firstUpdated(_changedProperties) {
94
+ var _a;
95
+ if (!this.exmForm && !this.doAction) {
89
96
  return;
90
97
  }
91
- // Serialize form data
92
- const data = serializeForm(form);
93
- if (this.doAction) {
94
- try {
95
- this.submitting = true;
96
- await this.doAction(data);
97
- this.fire('action-success');
98
- }
99
- catch (error) {
100
- this.errorMessage = error instanceof Error ? error.message : 'Unkbnown error';
101
- this.fire('action-error', { message: this.errorMessage }, true);
102
- }
103
- finally {
104
- this.submitting = false;
105
- if (this.errorMessage === null && !this.keepOpenedOnSubmitSuccess) {
106
- this.opened = false;
107
- }
108
- }
109
- }
110
- else {
111
- this.fire('action-submit', data, true);
112
- }
113
- }
114
- handleCancelBtnClick() {
115
- this.reset();
116
- this.close();
98
+ // By default form doAction is undefined, TS does not like that
99
+ // @ts-ignore
100
+ this.exmForm.doAction = (_a = this.doAction) === null || _a === void 0 ? void 0 : _a.bind(this);
117
101
  }
118
- showError(message) {
119
- this.errorMessage = message;
102
+ handleSubmitFinished({ detail }) {
103
+ if (detail.success && !this.keepOpenedOnSubmitSuccess) {
104
+ this.opened = false;
105
+ }
120
106
  }
121
107
  /**
122
108
  * Method should be overriden to render form content
123
109
  */
124
110
  renderFormContent() {
125
- return html `<slot></slot>`;
126
- }
127
- renderError() {
128
- return html `<div class="error"><div>${this.errorMessage}</div></div>`;
111
+ var _a;
112
+ return (_a = this.exmForm) === null || _a === void 0 ? void 0 : _a.renderFormContent();
129
113
  }
130
- handleDrawerOpenedChanged(e) {
131
- this.opened = e.detail.value;
132
- if (this.opened) {
133
- this.checkFormValidity();
114
+ handleDrawerOpenedChanged(event) {
115
+ const opened = event.detail.value;
116
+ if (!this.exmForm) {
117
+ return;
134
118
  }
119
+ if (opened) {
120
+ this.exmForm.takeFormDataSnapshot();
121
+ this.exmForm.checkFormValidity();
122
+ }
123
+ else if (!this.noResetOnClose) {
124
+ // NOTE: Reset form data when closing the drawer
125
+ this.reset();
126
+ }
127
+ this.opened = opened;
135
128
  }
136
129
  render() {
137
130
  return html `
@@ -139,28 +132,32 @@ export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
139
132
  ?opened="${this.opened}"
140
133
  ?no-cancel-on-outside-click="${this.noCancelOnOutsideClick}"
141
134
  @exm-drawer-opened-changed=${this.handleDrawerOpenedChanged}
142
- scroll-action=${ifDefined(this.scrollAction)}
143
135
  maxWidth="${this.style.maxWidth || '547px'}"
144
136
  >
145
- <div class="header">
146
- <slot name="title" class="title">${this.title}</slot>
147
- <div class="header-buttons">
148
- <md-text-button slot="footer" dialogFocus @click=${() => this.handleCancelBtnClick()}
149
- >${this.cancelBtnTitle}</md-text-button
150
- >
151
- ${this.submitBtnHidden
152
- ? ''
153
- : html ` <exm-filled-button
154
- slot="footer"
155
- @click=${this.handleSubmit}
156
- ?disabled=${this.submitting || !this.formValid}
157
- ?loading=${this.submitting}
158
- >${this.submitBtnTitle}</exm-filled-button
159
- >`}
160
- </div>
161
- </div>
162
- ${this.errorMessage ? this.renderError() : nothing}
163
- <div class="form-elements">${this.renderFormContent()}</div>
137
+ <section class="drawer-content">
138
+ <header class="header">
139
+ <slot name="title" class="title">${this.title}</slot>
140
+ <div class="actions">
141
+ <md-icon-button @click=${this.close}>
142
+ <md-icon>close</md-icon>
143
+ </md-icon-button>
144
+ </div>
145
+ </header>
146
+ <exm-form
147
+ submitBtn=${this.submitBtn}
148
+ cancelBtn=${this.cancelBtn}
149
+ .errorMessage=${this.errorMessage}
150
+ class="form-elements"
151
+ @form-submit-finished=${this.handleSubmitFinished}
152
+ @form-cancel=${this.close}
153
+ doAction=${ifDefined(this.doAction)}
154
+ ?hide-cancel-button=${this.hideCancelButton}
155
+ ?show-reset-button=${this.showResetButton}
156
+ ?disable-submit-button=${this.disableSubmitButton}
157
+ >
158
+ ${this.renderFormContent()}
159
+ </exm-form>
160
+ </section>
164
161
  </exm-drawer>
165
162
  `;
166
163
  }
@@ -170,13 +167,16 @@ __decorate([
170
167
  ], ExmFormDrawerBase.prototype, "opened", void 0);
171
168
  __decorate([
172
169
  property({ type: String, attribute: 'submit-btn-title' })
173
- ], ExmFormDrawerBase.prototype, "submitBtnTitle", void 0);
174
- __decorate([
175
- property({ type: Boolean, attribute: 'submit-btn-hidden' })
176
- ], ExmFormDrawerBase.prototype, "submitBtnHidden", void 0);
170
+ ], ExmFormDrawerBase.prototype, "submitBtn", void 0);
177
171
  __decorate([
178
172
  property({ type: String, attribute: 'cancel-btn-title' })
179
- ], ExmFormDrawerBase.prototype, "cancelBtnTitle", void 0);
173
+ ], ExmFormDrawerBase.prototype, "cancelBtn", void 0);
174
+ __decorate([
175
+ property({ type: Boolean, attribute: 'hide-cancel-button' })
176
+ ], ExmFormDrawerBase.prototype, "hideCancelButton", void 0);
177
+ __decorate([
178
+ property({ type: Boolean, attribute: 'show-reset-button' })
179
+ ], ExmFormDrawerBase.prototype, "showResetButton", void 0);
180
180
  __decorate([
181
181
  property({ type: Boolean, attribute: 'keep-opened-on-submit-success' })
182
182
  ], ExmFormDrawerBase.prototype, "keepOpenedOnSubmitSuccess", void 0);
@@ -184,15 +184,20 @@ __decorate([
184
184
  property({ type: Boolean, attribute: 'no-cancel-on-outside-click' })
185
185
  ], ExmFormDrawerBase.prototype, "noCancelOnOutsideClick", void 0);
186
186
  __decorate([
187
- property({ type: Boolean, attribute: 'disable-sticky-header' })
188
- ], ExmFormDrawerBase.prototype, "disableStickyHeader", void 0);
187
+ property({ type: Boolean, attribute: 'no-reset-on-close' })
188
+ ], ExmFormDrawerBase.prototype, "noResetOnClose", void 0);
189
189
  __decorate([
190
190
  property({ type: Boolean })
191
191
  ], ExmFormDrawerBase.prototype, "submitting", void 0);
192
- __decorate([
193
- property({ type: String, attribute: 'scroll-action' })
194
- ], ExmFormDrawerBase.prototype, "scrollAction", void 0);
195
192
  __decorate([
196
193
  property({ type: String })
197
194
  ], ExmFormDrawerBase.prototype, "errorMessage", void 0);
198
- //# sourceMappingURL=exm-form-drawer-base.js.map
195
+ __decorate([
196
+ property({ type: Boolean, attribute: 'disable-submit-button' })
197
+ ], ExmFormDrawerBase.prototype, "disableSubmitButton", void 0);
198
+ __decorate([
199
+ query('exm-form')
200
+ ], ExmFormDrawerBase.prototype, "exmForm", void 0);
201
+
202
+ export { ExmFormDrawerBase };
203
+ //# sourceMappingURL=exm-form-drawer-base.js.map
package/dist/exm-form-drawer.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ExmFormDrawerBase } from './exm-form-drawer-base.js';
2
2
  export declare class ExmFormDrawer extends ExmFormDrawerBase {
3
3
  static styles: import("lit").CSSResult[];
4
- getForm(): HTMLFormElement | null;
4
+ protected firstUpdated(): void;
5
5
  }
6
6
  declare global {
7
7
  interface HTMLElementTagNameMap {
package/dist/exm-form-drawer.js CHANGED
@@ -1,16 +1,25 @@
1
- import { __decorate } from "tslib";
1
+ import { __decorate } from 'tslib';
2
2
  import { customElement } from 'lit/decorators.js';
3
3
  import { style } from './styles/exm-form-drawer-styles-css.js';
4
4
  import { ExmFormDrawerBase } from './exm-form-drawer-base.js';
5
5
  import { formStyles } from '@exmg/exm-form';
6
+
6
7
  let ExmFormDrawer = class ExmFormDrawer extends ExmFormDrawerBase {
7
- getForm() {
8
- return this.querySelector('form');
8
+ firstUpdated() {
9
+ super.firstUpdated(new Map());
10
+ if (!this.exmForm) {
11
+ return;
12
+ }
13
+ /**
14
+ * We have to overwrite the getForm method because for whatever reason the form is not properly accessible from within the exm-form component
15
+ */
16
+ this.exmForm.getForm = () => this.querySelector('form');
9
17
  }
10
18
  };
11
19
  ExmFormDrawer.styles = [style, formStyles];
12
20
  ExmFormDrawer = __decorate([
13
21
  customElement('exm-form-drawer')
14
22
  ], ExmFormDrawer);
23
+
15
24
  export { ExmFormDrawer };
16
- //# sourceMappingURL=exm-form-drawer.js.map
25
+ //# sourceMappingURL=exm-form-drawer.js.map
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
1
  export { ExmFormDrawer } from './exm-form-drawer.js';
2
2
  export { ExmFormDrawerBase } from './exm-form-drawer-base.js';
3
3
  export { style as formDrawerStyles } from './styles/exm-form-drawer-styles-css.js';
4
- //# sourceMappingURL=index.js.map
4
+ //# sourceMappingURL=index.js.map
package/dist/styles/exm-form-drawer-styles-css.js CHANGED
@@ -1,60 +1,21 @@
1
1
  import { css } from 'lit';
2
- export const style = css `
3
- :host {
4
- display: flex;
5
- }
6
2
 
7
- :host .header {
8
- display: flex;
9
- flex-direction: row;
10
- align-items: center;
11
- margin: 0;
12
- padding: 20px;
13
- border-bottom: 1px solid
14
- var(--exm-form-drawer-header-separator-color, var(--mdc-theme-on-surface, rgba(2, 24, 43, 0.1)));
3
+ const style = css `
4
+ .drawer-content {
5
+ height: 100%;
6
+ display: grid;
7
+ grid-template-rows: auto 1fr;
15
8
  }
16
9
 
17
- :host .header .title {
10
+ .header {
18
11
  font-size: 1.4rem;
19
- }
20
-
21
- :host .form-elements {
22
- padding: 0 0px;
23
- }
24
-
25
- .header-buttons {
12
+ padding: 1rem;
26
13
  display: flex;
27
- flex-direction: row;
28
- flex: 1;
29
- justify-content: flex-end;
30
- }
31
-
32
- .header-buttons > * {
33
- margin-left: 20px;
34
- }
35
-
36
- :host(:not([disable-sticky-header])) .header {
37
- position: sticky;
38
- top: 0;
39
- color: var(--exm-drawer-color, var(--md-sys-color-on-surface-variant, black));
40
- background-color: var(--exm-drawer-bg-color, var(--md-sys-color-surface-variant, white));
41
- z-index: 2;
42
- }
43
-
44
- form {
45
- margin: 1rem 0 !important;
46
- padding: 0.5rem 1rem;
47
- box-sizing: border-box;
48
- }
49
-
50
- .error {
51
- background-color: var(--md-sys-color-error-container);
52
- color: var(--md-sys-color-on-error-container);
53
- padding: 0.5rem;
54
- }
55
-
56
- .error > * {
57
- margin: 1rem;
14
+ min-height: 3rem;
15
+ align-items: center;
16
+ justify-content: space-between;
58
17
  }
59
18
  `;
60
- //# sourceMappingURL=exm-form-drawer-styles-css.js.map
19
+
20
+ export { style };
21
+ //# sourceMappingURL=exm-form-drawer-styles-css.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@exmg/exm-form-drawer",
3
- "version": "1.1.9",
3
+ "version": "1.1.10-alpha.26+dffd4ec",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -31,18 +31,16 @@
31
31
  },
32
32
  "license": "MIT",
33
33
  "dependencies": {
34
- "@exmg/exm-drawer": "^1.1.9",
35
- "@exmg/exm-form": "^1.1.9",
36
- "@material/typography": "^14.0.0",
37
- "lit": "^3.0.0",
38
- "tslib": "^2.6.2"
34
+ "@exmg/exm-drawer": "^1.1.10-alpha.26+dffd4ec",
35
+ "@exmg/exm-form": "^1.1.10-alpha.26+dffd4ec"
39
36
  },
40
- "devDependencies": {
41
- "@exmg/lit-cli": "1.1.13"
37
+ "peerDependencies": {
38
+ "lit": "^3.2.1",
39
+ "tslib": "^2.6.2"
42
40
  },
43
41
  "scripts": {},
44
42
  "publishConfig": {
45
43
  "access": "public"
46
44
  },
47
- "gitHead": "ac876ab3f3d6d83a43a3944c052c8e71de300832"
45
+ "gitHead": "dffd4ecb68fdeb061f4e8ad585af221bfb0f8e8b"
48
46
  }