@unicef-polymer/etools-form-builder 2.1.7 → 2.1.9

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 (87) hide show
  1. package/LICENSE +674 -674
  2. package/README.md +1 -1
  3. package/dist/assets/translations.d.ts +6 -6
  4. package/dist/assets/translations.js +67 -67
  5. package/dist/form-attachments-popup/form-attachments-popup.d.ts +86 -86
  6. package/dist/form-attachments-popup/form-attachments-popup.helper.d.ts +8 -8
  7. package/dist/form-attachments-popup/form-attachments-popup.helper.js +14 -14
  8. package/dist/form-attachments-popup/form-attachments-popup.js +255 -255
  9. package/dist/form-attachments-popup/form-attachments-popup.tpl.d.ts +3 -3
  10. package/dist/form-attachments-popup/form-attachments-popup.tpl.js +91 -91
  11. package/dist/form-attachments-popup/index.d.ts +2 -2
  12. package/dist/form-attachments-popup/index.js +2 -2
  13. package/dist/form-fields/abstract-field-base.class.d.ts +33 -33
  14. package/dist/form-fields/abstract-field-base.class.js +213 -213
  15. package/dist/form-fields/field-renderer-component.d.ts +20 -20
  16. package/dist/form-fields/field-renderer-component.js +255 -255
  17. package/dist/form-fields/index.d.ts +12 -12
  18. package/dist/form-fields/index.js +12 -12
  19. package/dist/form-fields/repeatable-fields/repeatable-attachment-field.d.ts +17 -17
  20. package/dist/form-fields/repeatable-fields/repeatable-attachment-field.js +209 -209
  21. package/dist/form-fields/repeatable-fields/repeatable-base-field.d.ts +20 -20
  22. package/dist/form-fields/repeatable-fields/repeatable-base-field.js +124 -124
  23. package/dist/form-fields/repeatable-fields/repeatable-number-field.d.ts +10 -10
  24. package/dist/form-fields/repeatable-fields/repeatable-number-field.js +67 -67
  25. package/dist/form-fields/repeatable-fields/repeatable-scale-field.d.ts +15 -15
  26. package/dist/form-fields/repeatable-fields/repeatable-scale-field.js +108 -108
  27. package/dist/form-fields/repeatable-fields/repeatable-text-field.d.ts +8 -8
  28. package/dist/form-fields/repeatable-fields/repeatable-text-field.js +53 -53
  29. package/dist/form-fields/single-fields/attachment-field.d.ts +16 -16
  30. package/dist/form-fields/single-fields/attachment-field.js +98 -98
  31. package/dist/form-fields/single-fields/base-field.d.ts +11 -11
  32. package/dist/form-fields/single-fields/base-field.js +58 -58
  33. package/dist/form-fields/single-fields/boolean-field.d.ts +8 -8
  34. package/dist/form-fields/single-fields/boolean-field.js +49 -49
  35. package/dist/form-fields/single-fields/number-field.d.ts +10 -10
  36. package/dist/form-fields/single-fields/number-field.js +67 -67
  37. package/dist/form-fields/single-fields/scale-field.d.ts +18 -18
  38. package/dist/form-fields/single-fields/scale-field.js +108 -108
  39. package/dist/form-fields/single-fields/text-field.d.ts +8 -8
  40. package/dist/form-fields/single-fields/text-field.js +54 -54
  41. package/dist/form-groups/form-abstract-group.d.ts +71 -71
  42. package/dist/form-groups/form-abstract-group.js +398 -398
  43. package/dist/form-groups/form-card.d.ts +32 -32
  44. package/dist/form-groups/form-card.js +113 -113
  45. package/dist/form-groups/form-collapsed-card.d.ts +71 -71
  46. package/dist/form-groups/form-collapsed-card.js +259 -259
  47. package/dist/form-groups/index.d.ts +3 -3
  48. package/dist/form-groups/index.js +3 -3
  49. package/dist/index.d.ts +3 -3
  50. package/dist/index.js +3 -3
  51. package/dist/lib/additional-components/confirmation-dialog.d.ts +18 -18
  52. package/dist/lib/additional-components/confirmation-dialog.js +72 -72
  53. package/dist/lib/additional-components/etools-fb-card.d.ts +21 -21
  54. package/dist/lib/additional-components/etools-fb-card.js +239 -238
  55. package/dist/lib/styles/attachments.styles.d.ts +2 -2
  56. package/dist/lib/styles/attachments.styles.js +72 -72
  57. package/dist/lib/styles/card-styles.d.ts +2 -2
  58. package/dist/lib/styles/card-styles.js +154 -154
  59. package/dist/lib/styles/dialog.styles.d.ts +2 -2
  60. package/dist/lib/styles/dialog.styles.js +85 -85
  61. package/dist/lib/styles/elevation-styles.d.ts +9 -9
  62. package/dist/lib/styles/elevation-styles.js +43 -43
  63. package/dist/lib/styles/flex-layout-classes.d.ts +2 -2
  64. package/dist/lib/styles/flex-layout-classes.js +319 -319
  65. package/dist/lib/styles/form-builder-card.styles.d.ts +2 -2
  66. package/dist/lib/styles/form-builder-card.styles.js +49 -49
  67. package/dist/lib/styles/input-styles.d.ts +2 -2
  68. package/dist/lib/styles/input-styles.js +138 -138
  69. package/dist/lib/styles/page-layout-styles.d.ts +2 -2
  70. package/dist/lib/styles/page-layout-styles.js +201 -201
  71. package/dist/lib/styles/shared-styles.d.ts +2 -2
  72. package/dist/lib/styles/shared-styles.js +70 -70
  73. package/dist/lib/types/form-builder.interfaces.d.ts +83 -83
  74. package/dist/lib/types/form-builder.interfaces.js +0 -0
  75. package/dist/lib/types/form-builder.types.d.ts +59 -59
  76. package/dist/lib/types/form-builder.types.js +0 -0
  77. package/dist/lib/types/global.types.d.ts +4 -4
  78. package/dist/lib/types/global.types.js +0 -0
  79. package/dist/lib/utils/dialog.d.ts +10 -10
  80. package/dist/lib/utils/dialog.js +21 -21
  81. package/dist/lib/utils/fire-custom-event.d.ts +1 -1
  82. package/dist/lib/utils/fire-custom-event.js +7 -7
  83. package/dist/lib/utils/translate.d.ts +1 -1
  84. package/dist/lib/utils/translate.js +9 -9
  85. package/dist/lib/utils/validations.helper.d.ts +26 -26
  86. package/dist/lib/utils/validations.helper.js +42 -42
  87. package/package.json +56 -56
@@ -1,32 +1,32 @@
1
- import { TemplateResult } from 'lit-element';
2
- import { IFormBuilderCard } from '../lib/types/form-builder.interfaces';
3
- import { FormAbstractGroup } from './form-abstract-group';
4
- import { GenericObject } from '../lib/types/global.types';
5
- import '@polymer/iron-collapse';
6
- export declare class FormCard extends FormAbstractGroup implements IFormBuilderCard {
7
- protected _value: GenericObject;
8
- /**
9
- * Show save button only if value was changed by user
10
- */
11
- private showSaveButton;
12
- /**
13
- * Overrides value property. Saves originalValue.
14
- * We need to update inner _value only if it wasn't change
15
- * @param value
16
- */
17
- set value(value: GenericObject);
18
- get value(): GenericObject;
19
- protected originalValue: GenericObject;
20
- /**
21
- * Extends parent render method,
22
- * adds card-container html wrapper and dynamic save button
23
- */
24
- render(): TemplateResult;
25
- /**
26
- * Updates value property, stops event propagation.
27
- * We need to fire value-changed event only after save button click
28
- */
29
- valueChanged(event: CustomEvent, name: string): void;
30
- saveChanges(): void;
31
- confirmRemove(groupName: string): void;
32
- }
1
+ import { TemplateResult } from 'lit-element';
2
+ import { IFormBuilderCard } from '../lib/types/form-builder.interfaces';
3
+ import { FormAbstractGroup } from './form-abstract-group';
4
+ import { GenericObject } from '../lib/types/global.types';
5
+ import '@polymer/iron-collapse';
6
+ export declare class FormCard extends FormAbstractGroup implements IFormBuilderCard {
7
+ protected _value: GenericObject;
8
+ /**
9
+ * Show save button only if value was changed by user
10
+ */
11
+ private showSaveButton;
12
+ /**
13
+ * Overrides value property. Saves originalValue.
14
+ * We need to update inner _value only if it wasn't change
15
+ * @param value
16
+ */
17
+ set value(value: GenericObject);
18
+ get value(): GenericObject;
19
+ protected originalValue: GenericObject;
20
+ /**
21
+ * Extends parent render method,
22
+ * adds card-container html wrapper and dynamic save button
23
+ */
24
+ render(): TemplateResult;
25
+ /**
26
+ * Updates value property, stops event propagation.
27
+ * We need to fire value-changed event only after save button click
28
+ */
29
+ valueChanged(event: CustomEvent, name: string): void;
30
+ saveChanges(): void;
31
+ confirmRemove(groupName: string): void;
32
+ }
@@ -1,113 +1,113 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { html, property, customElement } from 'lit-element';
8
- import { fireEvent } from '../lib/utils/fire-custom-event';
9
- import { clone, equals } from 'ramda';
10
- import { FormAbstractGroup } from './form-abstract-group';
11
- import '@polymer/iron-collapse';
12
- import { openDialog } from '../lib/utils/dialog';
13
- import { getTranslation } from '../lib/utils/translate';
14
- let FormCard = class FormCard extends FormAbstractGroup {
15
- constructor() {
16
- super(...arguments);
17
- this._value = {};
18
- /**
19
- * Show save button only if value was changed by user
20
- */
21
- this.showSaveButton = false;
22
- this.originalValue = {};
23
- }
24
- /**
25
- * Overrides value property. Saves originalValue.
26
- * We need to update inner _value only if it wasn't change
27
- * @param value
28
- */
29
- set value(value) {
30
- if (!this.showSaveButton) {
31
- this._value = clone(value);
32
- }
33
- this.originalValue = value;
34
- }
35
- get value() {
36
- return this._value;
37
- }
38
- /**
39
- * Extends parent render method,
40
- * adds card-container html wrapper and dynamic save button
41
- */
42
- render() {
43
- return html `
44
- <section class="elevation page-content card-container form-card" elevation="1">
45
- <div class="card-header">
46
- <div class="title">${this.groupStructure.title}</div>
47
- <div
48
- class="remove-group"
49
- ?hidden="${!this.groupStructure.repeatable}"
50
- @click="${() => this.confirmRemove(this.groupStructure.title || getTranslation(this.language, 'THIS_GROUP'))}"
51
- >
52
- Remove
53
- ${!this.groupStructure.title || this.groupStructure.title.length > 15
54
- ? getTranslation(this.language, 'GROUP')
55
- : this.groupStructure.title}
56
- <paper-icon-button icon="delete" class="attachments-warning"></paper-icon-button>
57
- </div>
58
- </div>
59
- ${super.render()}
60
-
61
- <iron-collapse ?opened="${this.showSaveButton}">
62
- <div class="layout horizontal end-justified card-buttons actions-container">
63
- <paper-button class="save-button" @tap="${() => this.saveChanges()}"
64
- >${getTranslation(this.language, 'SAVE')}</paper-button
65
- >
66
- </div>
67
- </iron-collapse>
68
- </section>
69
- `;
70
- }
71
- /**
72
- * Updates value property, stops event propagation.
73
- * We need to fire value-changed event only after save button click
74
- */
75
- valueChanged(event, name) {
76
- if (!this._value) {
77
- this._value = {};
78
- }
79
- this._value[name] = event.detail.value;
80
- event.stopPropagation();
81
- this.showSaveButton = !equals(this.value, this.originalValue);
82
- }
83
- saveChanges() {
84
- if (Object.keys(this._errors).length) {
85
- fireEvent(this, 'toast', { text: getTranslation(this.language, 'CHECK_FIELDS_TRY_AGAIN') });
86
- return;
87
- }
88
- fireEvent(this, 'value-changed', { value: this.value });
89
- this.showSaveButton = false;
90
- }
91
- confirmRemove(groupName) {
92
- openDialog({
93
- dialog: 'confirmation-popup',
94
- dialogData: {
95
- text: `${getTranslation(this.language, 'CONFIRM_DELETE')} ${groupName}`
96
- }
97
- }).then((response) => {
98
- if (response.confirmed) {
99
- fireEvent(this, 'remove-group');
100
- }
101
- });
102
- }
103
- };
104
- __decorate([
105
- property()
106
- ], FormCard.prototype, "_value", void 0);
107
- __decorate([
108
- property()
109
- ], FormCard.prototype, "showSaveButton", void 0);
110
- FormCard = __decorate([
111
- customElement('form-card')
112
- ], FormCard);
113
- export { FormCard };
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { html, property, customElement } from 'lit-element';
8
+ import { fireEvent } from '../lib/utils/fire-custom-event';
9
+ import { clone, equals } from 'ramda';
10
+ import { FormAbstractGroup } from './form-abstract-group';
11
+ import '@polymer/iron-collapse';
12
+ import { openDialog } from '../lib/utils/dialog';
13
+ import { getTranslation } from '../lib/utils/translate';
14
+ let FormCard = class FormCard extends FormAbstractGroup {
15
+ constructor() {
16
+ super(...arguments);
17
+ this._value = {};
18
+ /**
19
+ * Show save button only if value was changed by user
20
+ */
21
+ this.showSaveButton = false;
22
+ this.originalValue = {};
23
+ }
24
+ /**
25
+ * Overrides value property. Saves originalValue.
26
+ * We need to update inner _value only if it wasn't change
27
+ * @param value
28
+ */
29
+ set value(value) {
30
+ if (!this.showSaveButton) {
31
+ this._value = clone(value);
32
+ }
33
+ this.originalValue = value;
34
+ }
35
+ get value() {
36
+ return this._value;
37
+ }
38
+ /**
39
+ * Extends parent render method,
40
+ * adds card-container html wrapper and dynamic save button
41
+ */
42
+ render() {
43
+ return html `
44
+ <section class="elevation page-content card-container form-card" elevation="1">
45
+ <div class="card-header">
46
+ <div class="title">${this.groupStructure.title}</div>
47
+ <div
48
+ class="remove-group"
49
+ ?hidden="${!this.groupStructure.repeatable}"
50
+ @click="${() => this.confirmRemove(this.groupStructure.title || getTranslation(this.language, 'THIS_GROUP'))}"
51
+ >
52
+ Remove
53
+ ${!this.groupStructure.title || this.groupStructure.title.length > 15
54
+ ? getTranslation(this.language, 'GROUP')
55
+ : this.groupStructure.title}
56
+ <paper-icon-button icon="delete" class="attachments-warning"></paper-icon-button>
57
+ </div>
58
+ </div>
59
+ ${super.render()}
60
+
61
+ <iron-collapse ?opened="${this.showSaveButton}">
62
+ <div class="layout horizontal end-justified card-buttons actions-container">
63
+ <paper-button class="save-button" @tap="${() => this.saveChanges()}"
64
+ >${getTranslation(this.language, 'SAVE')}</paper-button
65
+ >
66
+ </div>
67
+ </iron-collapse>
68
+ </section>
69
+ `;
70
+ }
71
+ /**
72
+ * Updates value property, stops event propagation.
73
+ * We need to fire value-changed event only after save button click
74
+ */
75
+ valueChanged(event, name) {
76
+ if (!this._value) {
77
+ this._value = {};
78
+ }
79
+ this._value[name] = event.detail.value;
80
+ event.stopPropagation();
81
+ this.showSaveButton = !equals(this.value, this.originalValue);
82
+ }
83
+ saveChanges() {
84
+ if (Object.keys(this._errors).length) {
85
+ fireEvent(this, 'toast', { text: getTranslation(this.language, 'CHECK_FIELDS_TRY_AGAIN') });
86
+ return;
87
+ }
88
+ fireEvent(this, 'value-changed', { value: this.value });
89
+ this.showSaveButton = false;
90
+ }
91
+ confirmRemove(groupName) {
92
+ openDialog({
93
+ dialog: 'confirmation-popup',
94
+ dialogData: {
95
+ text: `${getTranslation(this.language, 'CONFIRM_DELETE')} ${groupName}`
96
+ }
97
+ }).then((response) => {
98
+ if (response.confirmed) {
99
+ fireEvent(this, 'remove-group');
100
+ }
101
+ });
102
+ }
103
+ };
104
+ __decorate([
105
+ property()
106
+ ], FormCard.prototype, "_value", void 0);
107
+ __decorate([
108
+ property()
109
+ ], FormCard.prototype, "showSaveButton", void 0);
110
+ FormCard = __decorate([
111
+ customElement('form-card')
112
+ ], FormCard);
113
+ export { FormCard };
@@ -1,71 +1,71 @@
1
- import { TemplateResult } from 'lit-element';
2
- import { IFormBuilderCard, IFormBuilderCollapsedCard } from '../lib/types/form-builder.interfaces';
3
- import { FormAbstractGroup } from './form-abstract-group';
4
- import '../lib/additional-components/etools-fb-card';
5
- import { GenericObject } from '../lib/types/global.types';
6
- import '../lib/additional-components/confirmation-dialog';
7
- export declare class FormCollapsedCard extends FormAbstractGroup implements IFormBuilderCollapsedCard, IFormBuilderCard {
8
- collapsed: boolean;
9
- /**
10
- * Overrides readonly property
11
- * In collapsed card it must consider isEditMode property,
12
- * components inside card are readonly if isEditMode is off or if card is readonly
13
- */
14
- set readonly(state: boolean);
15
- get readonly(): boolean;
16
- protected isEditMode: boolean;
17
- protected _readonly: boolean;
18
- /**
19
- * Overrides errors setter
20
- * In collapsed card it must consider isEditMode property,
21
- * We must to enable isEditMode if errors comes from backend
22
- */
23
- set errors(errors: GenericObject | string[] | null);
24
- /**
25
- * Overrides value property
26
- * We need to save originalValue to have Cancel possibility in collapsed card.
27
- * Don't override current edited value if isEditMode enabled
28
- * (It can be happened if other sibling card or component updates their value during current card edition)
29
- */
30
- set value(value: GenericObject);
31
- get value(): GenericObject;
32
- protected _value: GenericObject;
33
- protected originalValue: GenericObject;
34
- /**
35
- * Extends parent render method for handling additional types (StructureTypes.ATTACHMENTS_BUTTON in our case)
36
- * and adds etools-card as container wrapper
37
- */
38
- render(): TemplateResult;
39
- /**
40
- * Filters StructureTypes.ATTACHMENTS_BUTTON type. It will be rendered as button,
41
- * allows parent renderChild method to render other types
42
- */
43
- renderGroupChildren(): (TemplateResult | TemplateResult[])[];
44
- /**
45
- * Generate open Attachments popup button.
46
- * It is hidden if tab is readonly and no attachments uploaded
47
- */
48
- getAdditionalButtons(): TemplateResult;
49
- retrieveTitle(target: string): string;
50
- startEdit(): void;
51
- /**
52
- * We need to rerender view to update all changes that was happen,
53
- * because only fields are updating during @value-change event.
54
- * Only then we can reset all changed values to their original
55
- */
56
- cancelEdit(): void;
57
- /**
58
- * Updates value property, stops event propagation.
59
- * We need to fire value-changed event only after save button click
60
- */
61
- valueChanged(event: CustomEvent, name: string): void;
62
- saveChanges(): void;
63
- /**
64
- * Tries to save changed attachments on popup confirm
65
- * Generates value-changed event with originalValue clone if isEditMode enabled.
66
- * In this case it will take only attachments changes and ignore other changes that may happen during card edit
67
- */
68
- openAttachmentsPopup(): void;
69
- confirmRemove(groupName: string): void;
70
- protected getAttachmentsBtnText(attachmentsCount?: number): string;
71
- }
1
+ import { TemplateResult } from 'lit-element';
2
+ import { IFormBuilderCard, IFormBuilderCollapsedCard } from '../lib/types/form-builder.interfaces';
3
+ import { FormAbstractGroup } from './form-abstract-group';
4
+ import '../lib/additional-components/etools-fb-card';
5
+ import { GenericObject } from '../lib/types/global.types';
6
+ import '../lib/additional-components/confirmation-dialog';
7
+ export declare class FormCollapsedCard extends FormAbstractGroup implements IFormBuilderCollapsedCard, IFormBuilderCard {
8
+ collapsed: boolean;
9
+ /**
10
+ * Overrides readonly property
11
+ * In collapsed card it must consider isEditMode property,
12
+ * components inside card are readonly if isEditMode is off or if card is readonly
13
+ */
14
+ set readonly(state: boolean);
15
+ get readonly(): boolean;
16
+ protected isEditMode: boolean;
17
+ protected _readonly: boolean;
18
+ /**
19
+ * Overrides errors setter
20
+ * In collapsed card it must consider isEditMode property,
21
+ * We must to enable isEditMode if errors comes from backend
22
+ */
23
+ set errors(errors: GenericObject | string[] | null);
24
+ /**
25
+ * Overrides value property
26
+ * We need to save originalValue to have Cancel possibility in collapsed card.
27
+ * Don't override current edited value if isEditMode enabled
28
+ * (It can be happened if other sibling card or component updates their value during current card edition)
29
+ */
30
+ set value(value: GenericObject);
31
+ get value(): GenericObject;
32
+ protected _value: GenericObject;
33
+ protected originalValue: GenericObject;
34
+ /**
35
+ * Extends parent render method for handling additional types (StructureTypes.ATTACHMENTS_BUTTON in our case)
36
+ * and adds etools-card as container wrapper
37
+ */
38
+ render(): TemplateResult;
39
+ /**
40
+ * Filters StructureTypes.ATTACHMENTS_BUTTON type. It will be rendered as button,
41
+ * allows parent renderChild method to render other types
42
+ */
43
+ renderGroupChildren(): (TemplateResult | TemplateResult[])[];
44
+ /**
45
+ * Generate open Attachments popup button.
46
+ * It is hidden if tab is readonly and no attachments uploaded
47
+ */
48
+ getAdditionalButtons(): TemplateResult;
49
+ retrieveTitle(target: string): string;
50
+ startEdit(): void;
51
+ /**
52
+ * We need to rerender view to update all changes that was happen,
53
+ * because only fields are updating during @value-change event.
54
+ * Only then we can reset all changed values to their original
55
+ */
56
+ cancelEdit(): void;
57
+ /**
58
+ * Updates value property, stops event propagation.
59
+ * We need to fire value-changed event only after save button click
60
+ */
61
+ valueChanged(event: CustomEvent, name: string): void;
62
+ saveChanges(): void;
63
+ /**
64
+ * Tries to save changed attachments on popup confirm
65
+ * Generates value-changed event with originalValue clone if isEditMode enabled.
66
+ * In this case it will take only attachments changes and ignore other changes that may happen during card edit
67
+ */
68
+ openAttachmentsPopup(): void;
69
+ confirmRemove(groupName: string): void;
70
+ protected getAttachmentsBtnText(attachmentsCount?: number): string;
71
+ }