@exmg/exm-form-drawer 1.1.10-alpha.19 → 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.
- package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/exm-form-drawer-base.d.ts +88 -0
- package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/exm-form-drawer-base.js +200 -0
- package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/exm-form-drawer.d.ts +10 -0
- package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/exm-form-drawer.js +23 -0
- package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/index.d.ts +3 -0
- package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/index.js +4 -0
- package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/styles/exm-form-drawer-styles-css.d.ts +1 -0
- package/.rollup.cache/root/repo/packages/exm-form-drawer/dist/styles/exm-form-drawer-styles-css.js +18 -0
- package/dist/exm-form-drawer-base.d.ts +24 -1
- package/dist/exm-form-drawer-base.js +51 -8
- package/dist/exm-form-drawer.js +4 -2
- package/dist/index.js +1 -1
- package/dist/styles/exm-form-drawer-styles-css.js +5 -2
- package/package.json +4 -4
|
@@ -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
|
+
}
|
|
@@ -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
|
|
@@ -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
|
+
}
|
|
@@ -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/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
|
|
@@ -20,6 +20,14 @@ export declare class ExmFormDrawerBase extends ExmgElement {
|
|
|
20
20
|
* @type {String}
|
|
21
21
|
*/
|
|
22
22
|
cancelBtn: string;
|
|
23
|
+
/**
|
|
24
|
+
* Hide cancel button
|
|
25
|
+
*/
|
|
26
|
+
hideCancelButton: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Show reset button
|
|
29
|
+
*/
|
|
30
|
+
showResetButton: boolean;
|
|
23
31
|
/**
|
|
24
32
|
* Whether or not to keep the form drawer opened on submit success
|
|
25
33
|
* @type {Boolean}
|
|
@@ -30,11 +38,26 @@ export declare class ExmFormDrawerBase extends ExmgElement {
|
|
|
30
38
|
* @type {Boolean}
|
|
31
39
|
*/
|
|
32
40
|
noCancelOnOutsideClick: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* No reset on close
|
|
43
|
+
* @type {Boolean}
|
|
44
|
+
*/
|
|
45
|
+
noResetOnClose: boolean;
|
|
33
46
|
/**
|
|
34
47
|
* Internall used to show button spinner.
|
|
48
|
+
* @type {Boolean}
|
|
35
49
|
*/
|
|
36
50
|
submitting: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* for showing error text
|
|
53
|
+
* @type {String}
|
|
54
|
+
*/
|
|
37
55
|
errorMessage?: string | null;
|
|
56
|
+
/**
|
|
57
|
+
* Disabled the draws form submit button
|
|
58
|
+
* @type {Boolean}
|
|
59
|
+
*/
|
|
60
|
+
disableSubmitButton?: boolean;
|
|
38
61
|
exmForm?: ExmFormBase;
|
|
39
62
|
/**
|
|
40
63
|
* Opens and shows the drawer.
|
|
@@ -60,6 +83,6 @@ export declare class ExmFormDrawerBase extends ExmgElement {
|
|
|
60
83
|
* Method should be overriden to render form content
|
|
61
84
|
*/
|
|
62
85
|
protected renderFormContent(): import("lit-html").TemplateResult<1> | undefined;
|
|
63
|
-
protected handleDrawerOpenedChanged(
|
|
86
|
+
protected handleDrawerOpenedChanged(event: CustomEvent): void;
|
|
64
87
|
protected render(): import("lit-html").TemplateResult<1>;
|
|
65
88
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __decorate } from
|
|
1
|
+
import { __decorate } from 'tslib';
|
|
2
2
|
import { html } from 'lit';
|
|
3
3
|
import { property, query } from 'lit/decorators.js';
|
|
4
4
|
import '@exmg/exm-drawer/exm-drawer.js';
|
|
@@ -6,7 +6,8 @@ import '@exmg/exm-button/exm-filled-button.js';
|
|
|
6
6
|
import '@material/web/button/text-button.js';
|
|
7
7
|
import { ExmgElement } from '@exmg/lit-base';
|
|
8
8
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
|
-
|
|
9
|
+
|
|
10
|
+
class ExmFormDrawerBase extends ExmgElement {
|
|
10
11
|
constructor() {
|
|
11
12
|
super(...arguments);
|
|
12
13
|
/**
|
|
@@ -23,7 +24,15 @@ export class ExmFormDrawerBase extends ExmgElement {
|
|
|
23
24
|
* Title of the cancel button
|
|
24
25
|
* @type {String}
|
|
25
26
|
*/
|
|
26
|
-
this.cancelBtn = '
|
|
27
|
+
this.cancelBtn = 'Cancel';
|
|
28
|
+
/**
|
|
29
|
+
* Hide cancel button
|
|
30
|
+
*/
|
|
31
|
+
this.hideCancelButton = false;
|
|
32
|
+
/**
|
|
33
|
+
* Show reset button
|
|
34
|
+
*/
|
|
35
|
+
this.showResetButton = false;
|
|
27
36
|
/**
|
|
28
37
|
* Whether or not to keep the form drawer opened on submit success
|
|
29
38
|
* @type {Boolean}
|
|
@@ -34,10 +43,21 @@ export class ExmFormDrawerBase extends ExmgElement {
|
|
|
34
43
|
* @type {Boolean}
|
|
35
44
|
*/
|
|
36
45
|
this.noCancelOnOutsideClick = false;
|
|
46
|
+
/**
|
|
47
|
+
* No reset on close
|
|
48
|
+
* @type {Boolean}
|
|
49
|
+
*/
|
|
50
|
+
this.noResetOnClose = false;
|
|
37
51
|
/**
|
|
38
52
|
* Internall used to show button spinner.
|
|
53
|
+
* @type {Boolean}
|
|
39
54
|
*/
|
|
40
55
|
this.submitting = false;
|
|
56
|
+
/**
|
|
57
|
+
* Disabled the draws form submit button
|
|
58
|
+
* @type {Boolean}
|
|
59
|
+
*/
|
|
60
|
+
this.disableSubmitButton = false;
|
|
41
61
|
}
|
|
42
62
|
/**
|
|
43
63
|
* Opens and shows the drawer.
|
|
@@ -91,14 +111,20 @@ export class ExmFormDrawerBase extends ExmgElement {
|
|
|
91
111
|
var _a;
|
|
92
112
|
return (_a = this.exmForm) === null || _a === void 0 ? void 0 : _a.renderFormContent();
|
|
93
113
|
}
|
|
94
|
-
handleDrawerOpenedChanged(
|
|
95
|
-
|
|
114
|
+
handleDrawerOpenedChanged(event) {
|
|
115
|
+
const opened = event.detail.value;
|
|
96
116
|
if (!this.exmForm) {
|
|
97
117
|
return;
|
|
98
118
|
}
|
|
99
|
-
if (
|
|
119
|
+
if (opened) {
|
|
120
|
+
this.exmForm.takeFormDataSnapshot();
|
|
100
121
|
this.exmForm.checkFormValidity();
|
|
101
122
|
}
|
|
123
|
+
else if (!this.noResetOnClose) {
|
|
124
|
+
// NOTE: Reset form data when closing the drawer
|
|
125
|
+
this.reset();
|
|
126
|
+
}
|
|
127
|
+
this.opened = opened;
|
|
102
128
|
}
|
|
103
129
|
render() {
|
|
104
130
|
return html `
|
|
@@ -123,8 +149,11 @@ export class ExmFormDrawerBase extends ExmgElement {
|
|
|
123
149
|
.errorMessage=${this.errorMessage}
|
|
124
150
|
class="form-elements"
|
|
125
151
|
@form-submit-finished=${this.handleSubmitFinished}
|
|
126
|
-
@form-cancel=${this.
|
|
152
|
+
@form-cancel=${this.close}
|
|
127
153
|
doAction=${ifDefined(this.doAction)}
|
|
154
|
+
?hide-cancel-button=${this.hideCancelButton}
|
|
155
|
+
?show-reset-button=${this.showResetButton}
|
|
156
|
+
?disable-submit-button=${this.disableSubmitButton}
|
|
128
157
|
>
|
|
129
158
|
${this.renderFormContent()}
|
|
130
159
|
</exm-form>
|
|
@@ -142,19 +171,33 @@ __decorate([
|
|
|
142
171
|
__decorate([
|
|
143
172
|
property({ type: String, attribute: 'cancel-btn-title' })
|
|
144
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);
|
|
145
180
|
__decorate([
|
|
146
181
|
property({ type: Boolean, attribute: 'keep-opened-on-submit-success' })
|
|
147
182
|
], ExmFormDrawerBase.prototype, "keepOpenedOnSubmitSuccess", void 0);
|
|
148
183
|
__decorate([
|
|
149
184
|
property({ type: Boolean, attribute: 'no-cancel-on-outside-click' })
|
|
150
185
|
], ExmFormDrawerBase.prototype, "noCancelOnOutsideClick", void 0);
|
|
186
|
+
__decorate([
|
|
187
|
+
property({ type: Boolean, attribute: 'no-reset-on-close' })
|
|
188
|
+
], ExmFormDrawerBase.prototype, "noResetOnClose", void 0);
|
|
151
189
|
__decorate([
|
|
152
190
|
property({ type: Boolean })
|
|
153
191
|
], ExmFormDrawerBase.prototype, "submitting", void 0);
|
|
154
192
|
__decorate([
|
|
155
193
|
property({ type: String })
|
|
156
194
|
], ExmFormDrawerBase.prototype, "errorMessage", void 0);
|
|
195
|
+
__decorate([
|
|
196
|
+
property({ type: Boolean, attribute: 'disable-submit-button' })
|
|
197
|
+
], ExmFormDrawerBase.prototype, "disableSubmitButton", void 0);
|
|
157
198
|
__decorate([
|
|
158
199
|
query('exm-form')
|
|
159
200
|
], ExmFormDrawerBase.prototype, "exmForm", void 0);
|
|
160
|
-
|
|
201
|
+
|
|
202
|
+
export { ExmFormDrawerBase };
|
|
203
|
+
//# sourceMappingURL=exm-form-drawer-base.js.map
|
package/dist/exm-form-drawer.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { __decorate } from
|
|
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
8
|
firstUpdated() {
|
|
8
9
|
super.firstUpdated(new Map());
|
|
@@ -19,5 +20,6 @@ ExmFormDrawer.styles = [style, formStyles];
|
|
|
19
20
|
ExmFormDrawer = __decorate([
|
|
20
21
|
customElement('exm-form-drawer')
|
|
21
22
|
], ExmFormDrawer);
|
|
23
|
+
|
|
22
24
|
export { ExmFormDrawer };
|
|
23
|
-
//# 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
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
const style = css `
|
|
3
4
|
.drawer-content {
|
|
4
5
|
height: 100%;
|
|
5
6
|
display: grid;
|
|
@@ -15,4 +16,6 @@ export const style = css `
|
|
|
15
16
|
justify-content: space-between;
|
|
16
17
|
}
|
|
17
18
|
`;
|
|
18
|
-
|
|
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.10-alpha.
|
|
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,8 +31,8 @@
|
|
|
31
31
|
},
|
|
32
32
|
"license": "MIT",
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@exmg/exm-drawer": "^1.1.10-alpha.
|
|
35
|
-
"@exmg/exm-form": "^1.1.10-alpha.
|
|
34
|
+
"@exmg/exm-drawer": "^1.1.10-alpha.26+dffd4ec",
|
|
35
|
+
"@exmg/exm-form": "^1.1.10-alpha.26+dffd4ec"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"lit": "^3.2.1",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"publishConfig": {
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "dffd4ecb68fdeb061f4e8ad585af221bfb0f8e8b"
|
|
46
46
|
}
|