@exmg/exm-form-drawer 1.1.35 → 1.1.37-alpha.31

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.
@@ -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
@@ -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';
@@ -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
@@ -0,0 +1 @@
1
+ export declare const style: import("lit").CSSResult;
@@ -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
@@ -1,4 +1,4 @@
1
- import { __decorate } from "tslib";
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
- export class ExmFormDrawerBase extends ExmgElement {
9
+
10
+ class ExmFormDrawerBase extends ExmgElement {
10
11
  constructor() {
11
12
  super(...arguments);
12
13
  /**
@@ -197,4 +198,6 @@ __decorate([
197
198
  __decorate([
198
199
  query('exm-form')
199
200
  ], ExmFormDrawerBase.prototype, "exmForm", void 0);
200
- //# sourceMappingURL=exm-form-drawer-base.js.map
201
+
202
+ export { ExmFormDrawerBase };
203
+ //# sourceMappingURL=exm-form-drawer-base.js.map
@@ -1,8 +1,9 @@
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
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
- export const style = css `
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
- //# 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.35",
3
+ "version": "1.1.37-alpha.31+513140a",
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.35",
35
- "@exmg/exm-form": "^1.1.35"
34
+ "@exmg/exm-drawer": "^1.1.37-alpha.31+513140a",
35
+ "@exmg/exm-form": "^1.1.37-alpha.31+513140a"
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": "1e671cd5dd060b682c8d9bb8c8a519a690c87782"
45
+ "gitHead": "513140a59e3a5a9a0fa572147ba6c0cf9801816e"
46
46
  }