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

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 (6) hide show
  1. package/dist/exm-form-drawer-base.d.ts +9 -25
  2. package/dist/exm-form-drawer-base.js +52 -90
  3. package/dist/exm-form-drawer.d.ts +1 -1
  4. package/dist/exm-form-drawer.js +9 -2
  5. package/dist/styles/exm-form-drawer-styles-css.js +9 -51
  6. package/package.json +7 -9
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,12 @@ 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;
27
23
  /**
28
24
  * Whether or not to keep the form drawer opened on submit success
29
25
  * @type {Boolean}
@@ -34,21 +30,12 @@ export declare class ExmFormDrawerBase extends ExmFormDrawerBase_base {
34
30
  * @type {Boolean}
35
31
  */
36
32
  noCancelOnOutsideClick: boolean;
37
- /**
38
- * Disable sticky header in drawer
39
- * @type {Boolean}
40
- */
41
- disableStickyHeader: boolean;
42
33
  /**
43
34
  * Internall used to show button spinner.
44
35
  */
45
36
  submitting: boolean;
46
- /**
47
- * Scroll action of the drawer
48
- * @type {'lock' | 'refit' | 'cancel' | undefined}
49
- */
50
- scrollAction?: 'lock' | 'refit' | 'cancel' | undefined;
51
37
  errorMessage?: string | null;
38
+ exmForm?: ExmFormBase;
52
39
  /**
53
40
  * Opens and shows the drawer.
54
41
  */
@@ -67,15 +54,12 @@ export declare class ExmFormDrawerBase extends ExmFormDrawerBase_base {
67
54
  * @param {CustomEvent} e
68
55
  */
69
56
  doAction?(formData: unknown): Promise<void> | void;
70
- protected handleSubmit(): Promise<void>;
71
- private handleCancelBtnClick;
72
- showError(message: string): void;
57
+ protected firstUpdated(_changedProperties: PropertyValues): void;
58
+ private handleSubmitFinished;
73
59
  /**
74
60
  * Method should be overriden to render form content
75
61
  */
76
- protected renderFormContent(): import("lit-html").TemplateResult<1>;
77
- protected renderError(): import("lit-html").TemplateResult<1>;
62
+ protected renderFormContent(): import("lit-html").TemplateResult<1> | undefined;
78
63
  protected handleDrawerOpenedChanged(e: CustomEvent): void;
79
64
  protected render(): import("lit-html").TemplateResult<1>;
80
65
  }
81
- export {};
package/dist/exm-form-drawer-base.js CHANGED
@@ -1,14 +1,12 @@
1
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';
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
+ export class ExmFormDrawerBase extends ExmgElement {
12
10
  constructor() {
13
11
  super(...arguments);
14
12
  /**
@@ -20,17 +18,12 @@ export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
20
18
  * The title of the 'submit' button
21
19
  * @type {String}
22
20
  */
23
- this.submitBtnTitle = 'Submit';
24
- /**
25
- * Whether or not to hide the submit button
26
- * @type {Boolean}
27
- */
28
- this.submitBtnHidden = false;
21
+ this.submitBtn = 'Submit';
29
22
  /**
30
23
  * Title of the cancel button
31
24
  * @type {String}
32
25
  */
33
- this.cancelBtnTitle = 'Cancel';
26
+ this.cancelBtn = 'Reset';
34
27
  /**
35
28
  * Whether or not to keep the form drawer opened on submit success
36
29
  * @type {Boolean}
@@ -41,11 +34,6 @@ export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
41
34
  * @type {Boolean}
42
35
  */
43
36
  this.noCancelOnOutsideClick = false;
44
- /**
45
- * Disable sticky header in drawer
46
- * @type {Boolean}
47
- */
48
- this.disableStickyHeader = false;
49
37
  /**
50
38
  * Internall used to show button spinner.
51
39
  */
@@ -75,62 +63,41 @@ export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
75
63
  }
76
64
  }
77
65
  reset() {
66
+ if (!this.exmForm) {
67
+ return;
68
+ }
78
69
  this.errorMessage = null;
79
- const form = this.getForm();
70
+ const form = this.exmForm.getForm();
80
71
  form.reset();
81
72
  }
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) {
73
+ firstUpdated(_changedProperties) {
74
+ var _a;
75
+ if (!this.exmForm && !this.doAction) {
89
76
  return;
90
77
  }
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();
78
+ // By default form doAction is undefined, TS does not like that
79
+ // @ts-ignore
80
+ this.exmForm.doAction = (_a = this.doAction) === null || _a === void 0 ? void 0 : _a.bind(this);
117
81
  }
118
- showError(message) {
119
- this.errorMessage = message;
82
+ handleSubmitFinished({ detail }) {
83
+ if (detail.success && !this.keepOpenedOnSubmitSuccess) {
84
+ this.opened = false;
85
+ }
120
86
  }
121
87
  /**
122
88
  * Method should be overriden to render form content
123
89
  */
124
90
  renderFormContent() {
125
- return html `<slot></slot>`;
126
- }
127
- renderError() {
128
- return html `<div class="error"><div>${this.errorMessage}</div></div>`;
91
+ var _a;
92
+ return (_a = this.exmForm) === null || _a === void 0 ? void 0 : _a.renderFormContent();
129
93
  }
130
94
  handleDrawerOpenedChanged(e) {
131
95
  this.opened = e.detail.value;
96
+ if (!this.exmForm) {
97
+ return;
98
+ }
132
99
  if (this.opened) {
133
- this.checkFormValidity();
100
+ this.exmForm.checkFormValidity();
134
101
  }
135
102
  }
136
103
  render() {
@@ -139,28 +106,29 @@ export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
139
106
  ?opened="${this.opened}"
140
107
  ?no-cancel-on-outside-click="${this.noCancelOnOutsideClick}"
141
108
  @exm-drawer-opened-changed=${this.handleDrawerOpenedChanged}
142
- scroll-action=${ifDefined(this.scrollAction)}
143
109
  maxWidth="${this.style.maxWidth || '547px'}"
144
110
  >
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>
111
+ <section class="drawer-content">
112
+ <header class="header">
113
+ <slot name="title" class="title">${this.title}</slot>
114
+ <div class="actions">
115
+ <md-icon-button @click=${this.close}>
116
+ <md-icon>close</md-icon>
117
+ </md-icon-button>
118
+ </div>
119
+ </header>
120
+ <exm-form
121
+ submitBtn=${this.submitBtn}
122
+ cancelBtn=${this.cancelBtn}
123
+ .errorMessage=${this.errorMessage}
124
+ class="form-elements"
125
+ @form-submit-finished=${this.handleSubmitFinished}
126
+ @form-cancel=${this.reset}
127
+ doAction=${ifDefined(this.doAction)}
128
+ >
129
+ ${this.renderFormContent()}
130
+ </exm-form>
131
+ </section>
164
132
  </exm-drawer>
165
133
  `;
166
134
  }
@@ -170,29 +138,23 @@ __decorate([
170
138
  ], ExmFormDrawerBase.prototype, "opened", void 0);
171
139
  __decorate([
172
140
  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);
141
+ ], ExmFormDrawerBase.prototype, "submitBtn", void 0);
177
142
  __decorate([
178
143
  property({ type: String, attribute: 'cancel-btn-title' })
179
- ], ExmFormDrawerBase.prototype, "cancelBtnTitle", void 0);
144
+ ], ExmFormDrawerBase.prototype, "cancelBtn", void 0);
180
145
  __decorate([
181
146
  property({ type: Boolean, attribute: 'keep-opened-on-submit-success' })
182
147
  ], ExmFormDrawerBase.prototype, "keepOpenedOnSubmitSuccess", void 0);
183
148
  __decorate([
184
149
  property({ type: Boolean, attribute: 'no-cancel-on-outside-click' })
185
150
  ], ExmFormDrawerBase.prototype, "noCancelOnOutsideClick", void 0);
186
- __decorate([
187
- property({ type: Boolean, attribute: 'disable-sticky-header' })
188
- ], ExmFormDrawerBase.prototype, "disableStickyHeader", void 0);
189
151
  __decorate([
190
152
  property({ type: Boolean })
191
153
  ], ExmFormDrawerBase.prototype, "submitting", void 0);
192
- __decorate([
193
- property({ type: String, attribute: 'scroll-action' })
194
- ], ExmFormDrawerBase.prototype, "scrollAction", void 0);
195
154
  __decorate([
196
155
  property({ type: String })
197
156
  ], ExmFormDrawerBase.prototype, "errorMessage", void 0);
157
+ __decorate([
158
+ query('exm-form')
159
+ ], ExmFormDrawerBase.prototype, "exmForm", void 0);
198
160
  //# 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
@@ -4,8 +4,15 @@ 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
  let ExmFormDrawer = class ExmFormDrawer extends ExmFormDrawerBase {
7
- getForm() {
8
- return this.querySelector('form');
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');
9
16
  }
10
17
  };
11
18
  ExmFormDrawer.styles = [style, formStyles];
package/dist/styles/exm-form-drawer-styles-css.js CHANGED
@@ -1,60 +1,18 @@
1
1
  import { css } from 'lit';
2
2
  export const style = css `
3
- :host {
4
- display: flex;
5
- }
6
-
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
+ .drawer-content {
4
+ height: 100%;
5
+ display: grid;
6
+ grid-template-rows: auto 1fr;
15
7
  }
16
8
 
17
- :host .header .title {
9
+ .header {
18
10
  font-size: 1.4rem;
19
- }
20
-
21
- :host .form-elements {
22
- padding: 0 0px;
23
- }
24
-
25
- .header-buttons {
11
+ padding: 1rem;
26
12
  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;
13
+ min-height: 3rem;
14
+ align-items: center;
15
+ justify-content: space-between;
58
16
  }
59
17
  `;
60
18
  //# 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.19+20be399",
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.19+20be399",
35
+ "@exmg/exm-form": "^1.1.10-alpha.19+20be399"
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": "20be399892ecc54f71f080f17a677a370d9f2b9c"
48
46
  }