@unicef-polymer/etools-form-builder 2.1.4 → 2.1.6
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/dist/assets/translations.d.ts +6 -6
- package/dist/assets/translations.js +67 -67
- package/dist/form-attachments-popup/form-attachments-popup.d.ts +86 -86
- package/dist/form-attachments-popup/form-attachments-popup.helper.d.ts +8 -8
- package/dist/form-attachments-popup/form-attachments-popup.helper.js +14 -14
- package/dist/form-attachments-popup/form-attachments-popup.js +207 -207
- package/dist/form-attachments-popup/form-attachments-popup.tpl.d.ts +3 -3
- package/dist/form-attachments-popup/form-attachments-popup.tpl.js +11 -11
- package/dist/form-attachments-popup/index.d.ts +2 -2
- package/dist/form-attachments-popup/index.js +2 -2
- package/dist/form-fields/abstract-field-base.class.d.ts +33 -33
- package/dist/form-fields/abstract-field-base.class.js +117 -98
- package/dist/form-fields/field-renderer-component.d.ts +20 -20
- package/dist/form-fields/field-renderer-component.js +114 -108
- package/dist/form-fields/index.d.ts +12 -12
- package/dist/form-fields/index.js +12 -12
- package/dist/form-fields/repeatable-fields/repeatable-attachment-field.d.ts +17 -17
- package/dist/form-fields/repeatable-fields/repeatable-attachment-field.js +100 -100
- package/dist/form-fields/repeatable-fields/repeatable-base-field.d.ts +20 -20
- package/dist/form-fields/repeatable-fields/repeatable-base-field.js +102 -102
- package/dist/form-fields/repeatable-fields/repeatable-number-field.d.ts +10 -10
- package/dist/form-fields/repeatable-fields/repeatable-number-field.js +47 -47
- package/dist/form-fields/repeatable-fields/repeatable-scale-field.d.ts +15 -15
- package/dist/form-fields/repeatable-fields/repeatable-scale-field.js +49 -49
- package/dist/form-fields/repeatable-fields/repeatable-text-field.d.ts +8 -8
- package/dist/form-fields/repeatable-fields/repeatable-text-field.js +30 -30
- package/dist/form-fields/single-fields/attachment-field.d.ts +16 -16
- package/dist/form-fields/single-fields/attachment-field.js +85 -85
- package/dist/form-fields/single-fields/base-field.d.ts +11 -11
- package/dist/form-fields/single-fields/base-field.js +58 -58
- package/dist/form-fields/single-fields/boolean-field.d.ts +8 -8
- package/dist/form-fields/single-fields/boolean-field.js +29 -29
- package/dist/form-fields/single-fields/number-field.d.ts +10 -10
- package/dist/form-fields/single-fields/number-field.js +46 -46
- package/dist/form-fields/single-fields/scale-field.d.ts +18 -18
- package/dist/form-fields/single-fields/scale-field.js +52 -52
- package/dist/form-fields/single-fields/text-field.d.ts +8 -8
- package/dist/form-fields/single-fields/text-field.js +29 -29
- package/dist/form-groups/form-abstract-group.d.ts +65 -65
- package/dist/form-groups/form-abstract-group.js +255 -255
- package/dist/form-groups/form-card.d.ts +32 -32
- package/dist/form-groups/form-card.js +89 -89
- package/dist/form-groups/form-collapsed-card.d.ts +70 -70
- package/dist/form-groups/form-collapsed-card.js +225 -225
- package/dist/form-groups/index.d.ts +3 -3
- package/dist/form-groups/index.js +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +3 -3
- package/dist/lib/additional-components/confirmation-dialog.d.ts +18 -18
- package/dist/lib/additional-components/confirmation-dialog.js +52 -52
- package/dist/lib/additional-components/etools-fb-card.d.ts +21 -21
- package/dist/lib/additional-components/etools-fb-card.js +99 -99
- package/dist/lib/styles/attachments.styles.d.ts +2 -2
- package/dist/lib/styles/attachments.styles.js +3 -3
- package/dist/lib/styles/card-styles.d.ts +2 -2
- package/dist/lib/styles/card-styles.js +3 -3
- package/dist/lib/styles/dialog.styles.d.ts +2 -2
- package/dist/lib/styles/dialog.styles.js +3 -3
- package/dist/lib/styles/elevation-styles.d.ts +9 -9
- package/dist/lib/styles/elevation-styles.js +10 -10
- package/dist/lib/styles/flex-layout-classes.d.ts +2 -2
- package/dist/lib/styles/flex-layout-classes.js +3 -3
- package/dist/lib/styles/form-builder-card.styles.d.ts +2 -2
- package/dist/lib/styles/form-builder-card.styles.js +3 -3
- package/dist/lib/styles/input-styles.d.ts +2 -2
- package/dist/lib/styles/input-styles.js +3 -3
- package/dist/lib/styles/page-layout-styles.d.ts +2 -2
- package/dist/lib/styles/page-layout-styles.js +3 -3
- package/dist/lib/styles/shared-styles.d.ts +2 -2
- package/dist/lib/styles/shared-styles.js +3 -3
- package/dist/lib/types/form-builder.interfaces.d.ts +83 -83
- package/dist/lib/types/form-builder.types.d.ts +59 -59
- package/dist/lib/types/global.types.d.ts +4 -4
- package/dist/lib/utils/dialog.d.ts +10 -10
- package/dist/lib/utils/dialog.js +21 -21
- package/dist/lib/utils/fire-custom-event.d.ts +1 -1
- package/dist/lib/utils/fire-custom-event.js +7 -7
- package/dist/lib/utils/translate.d.ts +1 -1
- package/dist/lib/utils/translate.js +9 -9
- package/dist/lib/utils/validations.helper.d.ts +26 -26
- package/dist/lib/utils/validations.helper.js +42 -42
- package/package.json +4 -4
|
@@ -1,36 +1,36 @@
|
|
|
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 '@unicef-polymer/etools-upload/etools-upload';
|
|
8
|
-
import { RepeatableBaseField } from './repeatable-base-field';
|
|
9
|
-
import { AttachmentsHelper } from '../../form-attachments-popup';
|
|
10
|
-
import { html, css, customElement } from 'lit-element';
|
|
11
|
-
import { fireEvent } from '../../lib/utils/fire-custom-event';
|
|
12
|
-
import { SharedStyles } from '../../lib/styles/shared-styles';
|
|
13
|
-
import { AttachmentsStyles } from '../../lib/styles/attachments.styles';
|
|
14
|
-
import { getTranslation } from '../../lib/utils/translate';
|
|
15
|
-
let RepeatableAttachmentField = class RepeatableAttachmentField extends RepeatableBaseField {
|
|
16
|
-
constructor() {
|
|
17
|
-
super(...arguments);
|
|
18
|
-
this.computedPath = [];
|
|
19
|
-
}
|
|
20
|
-
get uploadUrl() {
|
|
21
|
-
return AttachmentsHelper.uploadUrl;
|
|
22
|
-
}
|
|
23
|
-
get jwtLocalStorageKey() {
|
|
24
|
-
return AttachmentsHelper.jwtLocalStorageKey;
|
|
25
|
-
}
|
|
26
|
-
render() {
|
|
27
|
-
var _a;
|
|
28
|
-
const values = this.getValues();
|
|
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 '@unicef-polymer/etools-upload/etools-upload';
|
|
8
|
+
import { RepeatableBaseField } from './repeatable-base-field';
|
|
9
|
+
import { AttachmentsHelper } from '../../form-attachments-popup';
|
|
10
|
+
import { html, css, customElement } from 'lit-element';
|
|
11
|
+
import { fireEvent } from '../../lib/utils/fire-custom-event';
|
|
12
|
+
import { SharedStyles } from '../../lib/styles/shared-styles';
|
|
13
|
+
import { AttachmentsStyles } from '../../lib/styles/attachments.styles';
|
|
14
|
+
import { getTranslation } from '../../lib/utils/translate';
|
|
15
|
+
let RepeatableAttachmentField = class RepeatableAttachmentField extends RepeatableBaseField {
|
|
16
|
+
constructor() {
|
|
17
|
+
super(...arguments);
|
|
18
|
+
this.computedPath = [];
|
|
19
|
+
}
|
|
20
|
+
get uploadUrl() {
|
|
21
|
+
return AttachmentsHelper.uploadUrl;
|
|
22
|
+
}
|
|
23
|
+
get jwtLocalStorageKey() {
|
|
24
|
+
return AttachmentsHelper.jwtLocalStorageKey;
|
|
25
|
+
}
|
|
26
|
+
render() {
|
|
27
|
+
var _a;
|
|
28
|
+
const values = this.getValues();
|
|
29
29
|
return html `
|
|
30
30
|
<div class="finding-container">
|
|
31
31
|
<div class="question layout start"><slot>${this.questionTemplate()}</slot></div>
|
|
32
32
|
<div class="question-control layout vertical center-justified start">
|
|
33
|
-
${values.map((value, index) => value
|
|
33
|
+
${values.map((value, index) => value
|
|
34
34
|
? html `
|
|
35
35
|
<div class="layout horizontal file-container">
|
|
36
36
|
<!-- File name component -->
|
|
@@ -58,7 +58,7 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
|
|
|
58
58
|
${getTranslation(this.language, 'DELETE')}
|
|
59
59
|
</paper-button>
|
|
60
60
|
</div>
|
|
61
|
-
`
|
|
61
|
+
`
|
|
62
62
|
: '')}
|
|
63
63
|
<!-- Upload button -->
|
|
64
64
|
<etools-upload-multi
|
|
@@ -73,68 +73,68 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
|
|
|
73
73
|
<div ?hidden="${!this.isReadonly || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length)}">—</div>
|
|
74
74
|
</div>
|
|
75
75
|
</div>
|
|
76
|
-
`;
|
|
77
|
-
}
|
|
78
|
-
controlTemplate() {
|
|
79
|
-
return html ``;
|
|
80
|
-
}
|
|
81
|
-
customValidation() {
|
|
82
|
-
return null;
|
|
83
|
-
}
|
|
84
|
-
attachmentsUploaded({ success, error }) {
|
|
85
|
-
success === null || success === void 0 ? void 0 : success.forEach((file, index) => {
|
|
86
|
-
var _a, _b;
|
|
87
|
-
const newIndex = ((_b = Number((_a = this.editedValues) === null || _a === void 0 ? void 0 : _a.length)) !== null && _b !== void 0 ? _b : 0) + index;
|
|
88
|
-
if (this.isUploadedAttachment(file)) {
|
|
89
|
-
this.valueChanged({
|
|
90
|
-
url: file.file_link,
|
|
91
|
-
attachment: file.id,
|
|
92
|
-
filename: file.filename,
|
|
93
|
-
file_type: null
|
|
94
|
-
}, newIndex);
|
|
95
|
-
}
|
|
96
|
-
else if (this.isOfflineSavedAttachment(file)) {
|
|
97
|
-
this.valueChanged({
|
|
98
|
-
attachment: file.id,
|
|
99
|
-
filename: file.filename,
|
|
100
|
-
composedPath: [],
|
|
101
|
-
file_type: null
|
|
102
|
-
}, newIndex);
|
|
103
|
-
}
|
|
104
|
-
else {
|
|
105
|
-
console.warn('Missing fields in parsed attachment');
|
|
106
|
-
}
|
|
107
|
-
});
|
|
108
|
-
if (error && error.length) {
|
|
109
|
-
console.error(error);
|
|
110
|
-
fireEvent(this, 'toast', { text: 'Can not upload attachments. Please try again later' });
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
downloadFile(attachment) {
|
|
114
|
-
if (!(attachment === null || attachment === void 0 ? void 0 : attachment.url)) {
|
|
115
|
-
return;
|
|
116
|
-
}
|
|
117
|
-
const link = document.createElement('a');
|
|
118
|
-
link.target = '_blank';
|
|
119
|
-
link.href = attachment.url;
|
|
120
|
-
link.click();
|
|
121
|
-
window.URL.revokeObjectURL(attachment.url);
|
|
122
|
-
}
|
|
123
|
-
isUploadedAttachment(attachment) {
|
|
124
|
-
return (attachment.hasOwnProperty('filename') &&
|
|
125
|
-
attachment.hasOwnProperty('id') &&
|
|
126
|
-
attachment.hasOwnProperty('file_link') &&
|
|
127
|
-
!attachment.hasOwnProperty('unsynced'));
|
|
128
|
-
}
|
|
129
|
-
isOfflineSavedAttachment(attachment) {
|
|
130
|
-
return (attachment.hasOwnProperty('filename') && attachment.hasOwnProperty('id') && attachment.hasOwnProperty('unsynced'));
|
|
131
|
-
}
|
|
132
|
-
static get styles() {
|
|
133
|
-
// language=CSS
|
|
134
|
-
return [
|
|
135
|
-
...RepeatableBaseField.styles,
|
|
136
|
-
SharedStyles,
|
|
137
|
-
AttachmentsStyles,
|
|
76
|
+
`;
|
|
77
|
+
}
|
|
78
|
+
controlTemplate() {
|
|
79
|
+
return html ``;
|
|
80
|
+
}
|
|
81
|
+
customValidation() {
|
|
82
|
+
return null;
|
|
83
|
+
}
|
|
84
|
+
attachmentsUploaded({ success, error }) {
|
|
85
|
+
success === null || success === void 0 ? void 0 : success.forEach((file, index) => {
|
|
86
|
+
var _a, _b;
|
|
87
|
+
const newIndex = ((_b = Number((_a = this.editedValues) === null || _a === void 0 ? void 0 : _a.length)) !== null && _b !== void 0 ? _b : 0) + index;
|
|
88
|
+
if (this.isUploadedAttachment(file)) {
|
|
89
|
+
this.valueChanged({
|
|
90
|
+
url: file.file_link,
|
|
91
|
+
attachment: file.id,
|
|
92
|
+
filename: file.filename,
|
|
93
|
+
file_type: null
|
|
94
|
+
}, newIndex);
|
|
95
|
+
}
|
|
96
|
+
else if (this.isOfflineSavedAttachment(file)) {
|
|
97
|
+
this.valueChanged({
|
|
98
|
+
attachment: file.id,
|
|
99
|
+
filename: file.filename,
|
|
100
|
+
composedPath: [],
|
|
101
|
+
file_type: null
|
|
102
|
+
}, newIndex);
|
|
103
|
+
}
|
|
104
|
+
else {
|
|
105
|
+
console.warn('Missing fields in parsed attachment');
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
if (error && error.length) {
|
|
109
|
+
console.error(error);
|
|
110
|
+
fireEvent(this, 'toast', { text: 'Can not upload attachments. Please try again later' });
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
downloadFile(attachment) {
|
|
114
|
+
if (!(attachment === null || attachment === void 0 ? void 0 : attachment.url)) {
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
const link = document.createElement('a');
|
|
118
|
+
link.target = '_blank';
|
|
119
|
+
link.href = attachment.url;
|
|
120
|
+
link.click();
|
|
121
|
+
window.URL.revokeObjectURL(attachment.url);
|
|
122
|
+
}
|
|
123
|
+
isUploadedAttachment(attachment) {
|
|
124
|
+
return (attachment.hasOwnProperty('filename') &&
|
|
125
|
+
attachment.hasOwnProperty('id') &&
|
|
126
|
+
attachment.hasOwnProperty('file_link') &&
|
|
127
|
+
!attachment.hasOwnProperty('unsynced'));
|
|
128
|
+
}
|
|
129
|
+
isOfflineSavedAttachment(attachment) {
|
|
130
|
+
return (attachment.hasOwnProperty('filename') && attachment.hasOwnProperty('id') && attachment.hasOwnProperty('unsynced'));
|
|
131
|
+
}
|
|
132
|
+
static get styles() {
|
|
133
|
+
// language=CSS
|
|
134
|
+
return [
|
|
135
|
+
...RepeatableBaseField.styles,
|
|
136
|
+
SharedStyles,
|
|
137
|
+
AttachmentsStyles,
|
|
138
138
|
css `
|
|
139
139
|
.file-selector__type-dropdown {
|
|
140
140
|
flex-basis: 25%;
|
|
@@ -199,11 +199,11 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
|
|
|
199
199
|
padding-bottom: 10px;
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
|
-
`
|
|
203
|
-
];
|
|
204
|
-
}
|
|
205
|
-
};
|
|
206
|
-
RepeatableAttachmentField = __decorate([
|
|
207
|
-
customElement('repeatable-attachments-field')
|
|
208
|
-
], RepeatableAttachmentField);
|
|
209
|
-
export { RepeatableAttachmentField };
|
|
202
|
+
`
|
|
203
|
+
];
|
|
204
|
+
}
|
|
205
|
+
};
|
|
206
|
+
RepeatableAttachmentField = __decorate([
|
|
207
|
+
customElement('repeatable-attachments-field')
|
|
208
|
+
], RepeatableAttachmentField);
|
|
209
|
+
export { RepeatableAttachmentField };
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { CSSResultArray, TemplateResult } from 'lit-element';
|
|
2
|
-
import { AbstractFieldBaseClass } from '../abstract-field-base.class';
|
|
3
|
-
export declare abstract class RepeatableBaseField<T> extends AbstractFieldBaseClass<T[]> {
|
|
4
|
-
set errorMessage(messages: (string | null)[]);
|
|
5
|
-
get errorMessage(): (string | null)[];
|
|
6
|
-
protected _errorMessage: (string | null)[];
|
|
7
|
-
protected editedValues: (T | null)[] | null;
|
|
8
|
-
protected render(): TemplateResult;
|
|
9
|
-
protected questionTemplate(): TemplateResult;
|
|
10
|
-
protected valueChanged(newValue: T, index: number): void;
|
|
11
|
-
protected setValue(value: (T | null)[]): void;
|
|
12
|
-
protected validateField(value: T[]): void;
|
|
13
|
-
protected validateField(value: T, index: number): void;
|
|
14
|
-
protected addNewField(): void;
|
|
15
|
-
protected removeControl(index: number): void;
|
|
16
|
-
protected getValues(): (T | null)[];
|
|
17
|
-
private isArrayData;
|
|
18
|
-
protected abstract controlTemplate(value: T | null, index: number): TemplateResult;
|
|
19
|
-
static get styles(): CSSResultArray;
|
|
20
|
-
}
|
|
1
|
+
import { CSSResultArray, TemplateResult } from 'lit-element';
|
|
2
|
+
import { AbstractFieldBaseClass } from '../abstract-field-base.class';
|
|
3
|
+
export declare abstract class RepeatableBaseField<T> extends AbstractFieldBaseClass<T[]> {
|
|
4
|
+
set errorMessage(messages: (string | null)[]);
|
|
5
|
+
get errorMessage(): (string | null)[];
|
|
6
|
+
protected _errorMessage: (string | null)[];
|
|
7
|
+
protected editedValues: (T | null)[] | null;
|
|
8
|
+
protected render(): TemplateResult;
|
|
9
|
+
protected questionTemplate(): TemplateResult;
|
|
10
|
+
protected valueChanged(newValue: T, index: number): void;
|
|
11
|
+
protected setValue(value: (T | null)[]): void;
|
|
12
|
+
protected validateField(value: T[]): void;
|
|
13
|
+
protected validateField(value: T, index: number): void;
|
|
14
|
+
protected addNewField(): void;
|
|
15
|
+
protected removeControl(index: number): void;
|
|
16
|
+
protected getValues(): (T | null)[];
|
|
17
|
+
private isArrayData;
|
|
18
|
+
protected abstract controlTemplate(value: T | null, index: number): TemplateResult;
|
|
19
|
+
static get styles(): CSSResultArray;
|
|
20
|
+
}
|
|
@@ -1,27 +1,27 @@
|
|
|
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 { css, html, property } from 'lit-element';
|
|
8
|
-
import { AbstractFieldBaseClass } from '../abstract-field-base.class';
|
|
9
|
-
import { fireEvent } from '../../lib/utils/fire-custom-event';
|
|
10
|
-
import { getTranslation } from '../../lib/utils/translate';
|
|
11
|
-
export class RepeatableBaseField extends AbstractFieldBaseClass {
|
|
12
|
-
constructor() {
|
|
13
|
-
super(...arguments);
|
|
14
|
-
this._errorMessage = [];
|
|
15
|
-
this.editedValues = null;
|
|
16
|
-
}
|
|
17
|
-
set errorMessage(messages) {
|
|
18
|
-
this._errorMessage = messages || [];
|
|
19
|
-
}
|
|
20
|
-
get errorMessage() {
|
|
21
|
-
return this.isReadonly ? [] : this._errorMessage;
|
|
22
|
-
}
|
|
23
|
-
render() {
|
|
24
|
-
const values = this.getValues();
|
|
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 { css, html, property } from 'lit-element';
|
|
8
|
+
import { AbstractFieldBaseClass } from '../abstract-field-base.class';
|
|
9
|
+
import { fireEvent } from '../../lib/utils/fire-custom-event';
|
|
10
|
+
import { getTranslation } from '../../lib/utils/translate';
|
|
11
|
+
export class RepeatableBaseField extends AbstractFieldBaseClass {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments);
|
|
14
|
+
this._errorMessage = [];
|
|
15
|
+
this.editedValues = null;
|
|
16
|
+
}
|
|
17
|
+
set errorMessage(messages) {
|
|
18
|
+
this._errorMessage = messages || [];
|
|
19
|
+
}
|
|
20
|
+
get errorMessage() {
|
|
21
|
+
return this.isReadonly ? [] : this._errorMessage;
|
|
22
|
+
}
|
|
23
|
+
render() {
|
|
24
|
+
const values = this.getValues();
|
|
25
25
|
return html `
|
|
26
26
|
<div class="finding-container">
|
|
27
27
|
<div class="question layout start"><slot>${this.questionTemplate()}</slot></div>
|
|
@@ -39,86 +39,86 @@ export class RepeatableBaseField extends AbstractFieldBaseClass {
|
|
|
39
39
|
</paper-button>
|
|
40
40
|
</div>
|
|
41
41
|
</div>
|
|
42
|
-
`;
|
|
43
|
-
}
|
|
44
|
-
questionTemplate() {
|
|
45
|
-
return html `<span class="question-text">${this.questionText}</span>`;
|
|
46
|
-
}
|
|
47
|
-
valueChanged(newValue, index) {
|
|
48
|
-
if (!this.isReadonly) {
|
|
49
|
-
this.validateField(newValue, index);
|
|
50
|
-
}
|
|
51
|
-
else {
|
|
52
|
-
this._errorMessage = [];
|
|
53
|
-
}
|
|
54
|
-
if (this.editedValues && newValue !== this.editedValues[index]) {
|
|
55
|
-
this.editedValues[index] = newValue;
|
|
56
|
-
this.setValue(this.editedValues);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
setValue(value) {
|
|
60
|
-
this.editedValues = value;
|
|
61
|
-
this.value = value.filter((value) => Boolean(value));
|
|
62
|
-
fireEvent(this, 'value-changed', { value: this.value });
|
|
63
|
-
}
|
|
64
|
-
validateField(value, index) {
|
|
65
|
-
if (this.isArrayData(value)) {
|
|
66
|
-
return value.forEach((item, index) => this.validateField(item, index));
|
|
67
|
-
}
|
|
68
|
-
let errorMessage;
|
|
69
|
-
if (this.required && !value && value !== null && typeof value !== 'number') {
|
|
70
|
-
errorMessage = getTranslation(this.language, 'REQUIRED_FIELD');
|
|
71
|
-
}
|
|
72
|
-
else {
|
|
73
|
-
errorMessage = this.metaValidation(value);
|
|
74
|
-
}
|
|
75
|
-
const oldError = (this._errorMessage || [])[index] || null;
|
|
76
|
-
if (oldError !== errorMessage) {
|
|
77
|
-
const errors = this.editedValues.map((_, index) => (this._errorMessage && this._errorMessage[index]) || null);
|
|
78
|
-
errors.splice(index, 1, errorMessage);
|
|
79
|
-
const newErrors = errors.some((error) => error !== null) ? errors : null;
|
|
80
|
-
fireEvent(this, 'error-changed', { error: newErrors });
|
|
81
|
-
this._errorMessage = errors;
|
|
82
|
-
this.requestUpdate();
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
addNewField() {
|
|
86
|
-
this.editedValues = [...this.editedValues, null];
|
|
87
|
-
}
|
|
88
|
-
removeControl(index) {
|
|
89
|
-
this.editedValues.splice(index, 1);
|
|
90
|
-
this.value = this.editedValues.filter((value) => Boolean(value));
|
|
91
|
-
fireEvent(this, 'value-changed', { value: this.value });
|
|
92
|
-
this.requestUpdate();
|
|
93
|
-
}
|
|
94
|
-
getValues() {
|
|
95
|
-
if (this.isReadonly) {
|
|
96
|
-
this.editedValues = Array.isArray(this.value) && this.value.length ? this.value : [null];
|
|
97
|
-
}
|
|
98
|
-
else if (!this.editedValues) {
|
|
99
|
-
this.editedValues = Array.isArray(this.value) && this.value.length ? this.value : [null];
|
|
100
|
-
}
|
|
101
|
-
return this.editedValues || [null];
|
|
102
|
-
}
|
|
103
|
-
isArrayData(value) {
|
|
104
|
-
return Array.isArray(value);
|
|
105
|
-
}
|
|
106
|
-
static get styles() {
|
|
107
|
-
// language=CSS
|
|
108
|
-
return [
|
|
109
|
-
...AbstractFieldBaseClass.styles,
|
|
42
|
+
`;
|
|
43
|
+
}
|
|
44
|
+
questionTemplate() {
|
|
45
|
+
return html `<span class="question-text">${this.questionText}</span>`;
|
|
46
|
+
}
|
|
47
|
+
valueChanged(newValue, index) {
|
|
48
|
+
if (!this.isReadonly) {
|
|
49
|
+
this.validateField(newValue, index);
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
this._errorMessage = [];
|
|
53
|
+
}
|
|
54
|
+
if (this.editedValues && newValue !== this.editedValues[index]) {
|
|
55
|
+
this.editedValues[index] = newValue;
|
|
56
|
+
this.setValue(this.editedValues);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
setValue(value) {
|
|
60
|
+
this.editedValues = value;
|
|
61
|
+
this.value = value.filter((value) => Boolean(value));
|
|
62
|
+
fireEvent(this, 'value-changed', { value: this.value });
|
|
63
|
+
}
|
|
64
|
+
validateField(value, index) {
|
|
65
|
+
if (this.isArrayData(value)) {
|
|
66
|
+
return value.forEach((item, index) => this.validateField(item, index));
|
|
67
|
+
}
|
|
68
|
+
let errorMessage;
|
|
69
|
+
if (this.required && !value && value !== null && typeof value !== 'number') {
|
|
70
|
+
errorMessage = getTranslation(this.language, 'REQUIRED_FIELD');
|
|
71
|
+
}
|
|
72
|
+
else {
|
|
73
|
+
errorMessage = this.metaValidation(value);
|
|
74
|
+
}
|
|
75
|
+
const oldError = (this._errorMessage || [])[index] || null;
|
|
76
|
+
if (oldError !== errorMessage) {
|
|
77
|
+
const errors = this.editedValues.map((_, index) => (this._errorMessage && this._errorMessage[index]) || null);
|
|
78
|
+
errors.splice(index, 1, errorMessage);
|
|
79
|
+
const newErrors = errors.some((error) => error !== null) ? errors : null;
|
|
80
|
+
fireEvent(this, 'error-changed', { error: newErrors });
|
|
81
|
+
this._errorMessage = errors;
|
|
82
|
+
this.requestUpdate();
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
addNewField() {
|
|
86
|
+
this.editedValues = [...this.editedValues, null];
|
|
87
|
+
}
|
|
88
|
+
removeControl(index) {
|
|
89
|
+
this.editedValues.splice(index, 1);
|
|
90
|
+
this.value = this.editedValues.filter((value) => Boolean(value));
|
|
91
|
+
fireEvent(this, 'value-changed', { value: this.value });
|
|
92
|
+
this.requestUpdate();
|
|
93
|
+
}
|
|
94
|
+
getValues() {
|
|
95
|
+
if (this.isReadonly) {
|
|
96
|
+
this.editedValues = Array.isArray(this.value) && this.value.length ? this.value : [null];
|
|
97
|
+
}
|
|
98
|
+
else if (!this.editedValues) {
|
|
99
|
+
this.editedValues = Array.isArray(this.value) && this.value.length ? this.value : [null];
|
|
100
|
+
}
|
|
101
|
+
return this.editedValues || [null];
|
|
102
|
+
}
|
|
103
|
+
isArrayData(value) {
|
|
104
|
+
return Array.isArray(value);
|
|
105
|
+
}
|
|
106
|
+
static get styles() {
|
|
107
|
+
// language=CSS
|
|
108
|
+
return [
|
|
109
|
+
...AbstractFieldBaseClass.styles,
|
|
110
110
|
css `
|
|
111
111
|
:host(:not([is-readonly])) .question-control,
|
|
112
112
|
:host(:not([is-readonly])) .question {
|
|
113
113
|
padding-bottom: 10px;
|
|
114
114
|
}
|
|
115
|
-
`
|
|
116
|
-
];
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
__decorate([
|
|
120
|
-
property()
|
|
121
|
-
], RepeatableBaseField.prototype, "_errorMessage", void 0);
|
|
122
|
-
__decorate([
|
|
123
|
-
property()
|
|
124
|
-
], RepeatableBaseField.prototype, "editedValues", void 0);
|
|
115
|
+
`
|
|
116
|
+
];
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
__decorate([
|
|
120
|
+
property()
|
|
121
|
+
], RepeatableBaseField.prototype, "_errorMessage", void 0);
|
|
122
|
+
__decorate([
|
|
123
|
+
property()
|
|
124
|
+
], RepeatableBaseField.prototype, "editedValues", void 0);
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { CSSResultArray, TemplateResult } from 'lit-element';
|
|
2
|
-
import '@polymer/paper-input/paper-input';
|
|
3
|
-
import { RepeatableBaseField } from './repeatable-base-field';
|
|
4
|
-
export declare class RepeatableNumberField extends RepeatableBaseField<number> {
|
|
5
|
-
isInteger: boolean;
|
|
6
|
-
protected controlTemplate(value: number | null, index: number): TemplateResult;
|
|
7
|
-
protected valueChanged(newValue: number, index: number): void;
|
|
8
|
-
protected customValidation(value: number): string | null;
|
|
9
|
-
static get styles(): CSSResultArray;
|
|
10
|
-
}
|
|
1
|
+
import { CSSResultArray, TemplateResult } from 'lit-element';
|
|
2
|
+
import '@polymer/paper-input/paper-input';
|
|
3
|
+
import { RepeatableBaseField } from './repeatable-base-field';
|
|
4
|
+
export declare class RepeatableNumberField extends RepeatableBaseField<number> {
|
|
5
|
+
isInteger: boolean;
|
|
6
|
+
protected controlTemplate(value: number | null, index: number): TemplateResult;
|
|
7
|
+
protected valueChanged(newValue: number, index: number): void;
|
|
8
|
+
protected customValidation(value: number): string | null;
|
|
9
|
+
static get styles(): CSSResultArray;
|
|
10
|
+
}
|
|
@@ -1,21 +1,21 @@
|
|
|
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 { css, customElement, html } from 'lit-element';
|
|
8
|
-
import '@polymer/paper-input/paper-input';
|
|
9
|
-
import { InputStyles } from '../../lib/styles/input-styles';
|
|
10
|
-
import { RepeatableBaseField } from './repeatable-base-field';
|
|
11
|
-
import { AbstractFieldBaseClass } from '../abstract-field-base.class';
|
|
12
|
-
import { getTranslation } from '../../lib/utils/translate';
|
|
13
|
-
let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseField {
|
|
14
|
-
constructor() {
|
|
15
|
-
super(...arguments);
|
|
16
|
-
this.isInteger = false;
|
|
17
|
-
}
|
|
18
|
-
controlTemplate(value, index) {
|
|
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 { css, customElement, html } from 'lit-element';
|
|
8
|
+
import '@polymer/paper-input/paper-input';
|
|
9
|
+
import { InputStyles } from '../../lib/styles/input-styles';
|
|
10
|
+
import { RepeatableBaseField } from './repeatable-base-field';
|
|
11
|
+
import { AbstractFieldBaseClass } from '../abstract-field-base.class';
|
|
12
|
+
import { getTranslation } from '../../lib/utils/translate';
|
|
13
|
+
let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseField {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments);
|
|
16
|
+
this.isInteger = false;
|
|
17
|
+
}
|
|
18
|
+
controlTemplate(value, index) {
|
|
19
19
|
return html `
|
|
20
20
|
${InputStyles}
|
|
21
21
|
<paper-input
|
|
@@ -30,38 +30,38 @@ let RepeatableNumberField = class RepeatableNumberField extends RepeatableBaseFi
|
|
|
30
30
|
?readonly="${this.isReadonly}"
|
|
31
31
|
>
|
|
32
32
|
</paper-input>
|
|
33
|
-
`;
|
|
34
|
-
}
|
|
35
|
-
valueChanged(newValue, index) {
|
|
36
|
-
const formatted = Number(newValue);
|
|
37
|
-
const isNumber = !isNaN(formatted) && `${newValue}` !== '' && `${newValue}` !== 'null';
|
|
38
|
-
super.valueChanged(isNumber ? formatted : newValue, index);
|
|
39
|
-
}
|
|
40
|
-
customValidation(value) {
|
|
41
|
-
if (!value) {
|
|
42
|
-
return null;
|
|
43
|
-
}
|
|
44
|
-
if (isNaN(value)) {
|
|
45
|
-
return getTranslation(this.language, 'MUST_BE_NUMBER');
|
|
46
|
-
}
|
|
47
|
-
const integerValidation = !this.isInteger || value - Math.floor(value) === 0;
|
|
48
|
-
return integerValidation ? null : getTranslation(this.language, 'MUST_BE_INTEGER');
|
|
49
|
-
}
|
|
50
|
-
static get styles() {
|
|
51
|
-
// language=CSS
|
|
52
|
-
return [
|
|
53
|
-
...AbstractFieldBaseClass.styles,
|
|
33
|
+
`;
|
|
34
|
+
}
|
|
35
|
+
valueChanged(newValue, index) {
|
|
36
|
+
const formatted = Number(newValue);
|
|
37
|
+
const isNumber = !isNaN(formatted) && `${newValue}` !== '' && `${newValue}` !== 'null';
|
|
38
|
+
super.valueChanged(isNumber ? formatted : newValue, index);
|
|
39
|
+
}
|
|
40
|
+
customValidation(value) {
|
|
41
|
+
if (!value) {
|
|
42
|
+
return null;
|
|
43
|
+
}
|
|
44
|
+
if (isNaN(value)) {
|
|
45
|
+
return getTranslation(this.language, 'MUST_BE_NUMBER');
|
|
46
|
+
}
|
|
47
|
+
const integerValidation = !this.isInteger || value - Math.floor(value) === 0;
|
|
48
|
+
return integerValidation ? null : getTranslation(this.language, 'MUST_BE_INTEGER');
|
|
49
|
+
}
|
|
50
|
+
static get styles() {
|
|
51
|
+
// language=CSS
|
|
52
|
+
return [
|
|
53
|
+
...AbstractFieldBaseClass.styles,
|
|
54
54
|
css `
|
|
55
55
|
@media (max-width: 380px) {
|
|
56
56
|
.no-padding-left {
|
|
57
57
|
padding-left: 0;
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
|
-
`
|
|
61
|
-
];
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
RepeatableNumberField = __decorate([
|
|
65
|
-
customElement('repeatable-number-field')
|
|
66
|
-
], RepeatableNumberField);
|
|
67
|
-
export { RepeatableNumberField };
|
|
60
|
+
`
|
|
61
|
+
];
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
RepeatableNumberField = __decorate([
|
|
65
|
+
customElement('repeatable-number-field')
|
|
66
|
+
], RepeatableNumberField);
|
|
67
|
+
export { RepeatableNumberField };
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { TemplateResult, CSSResultArray } from 'lit-element';
|
|
2
|
-
import '@polymer/paper-radio-group/paper-radio-group';
|
|
3
|
-
import '@polymer/paper-radio-button/paper-radio-button';
|
|
4
|
-
import { PaperRadioButtonElement } from '@polymer/paper-radio-button/paper-radio-button';
|
|
5
|
-
import { RepeatableBaseField } from './repeatable-base-field';
|
|
6
|
-
import { FieldOption } from '..';
|
|
7
|
-
export declare class RepeatableScaleField extends RepeatableBaseField<string | number | null> {
|
|
8
|
-
options: (FieldOption | string | number)[];
|
|
9
|
-
protected controlTemplate(value: string | null, index: number): TemplateResult;
|
|
10
|
-
protected onSelect(item: PaperRadioButtonElement, index: number): void;
|
|
11
|
-
protected getLabel(option: FieldOption | string | number): unknown;
|
|
12
|
-
protected getValue(option: FieldOption | string | number): unknown;
|
|
13
|
-
protected customValidation(): string | null;
|
|
14
|
-
static get styles(): CSSResultArray;
|
|
15
|
-
}
|
|
1
|
+
import { TemplateResult, CSSResultArray } from 'lit-element';
|
|
2
|
+
import '@polymer/paper-radio-group/paper-radio-group';
|
|
3
|
+
import '@polymer/paper-radio-button/paper-radio-button';
|
|
4
|
+
import { PaperRadioButtonElement } from '@polymer/paper-radio-button/paper-radio-button';
|
|
5
|
+
import { RepeatableBaseField } from './repeatable-base-field';
|
|
6
|
+
import { FieldOption } from '..';
|
|
7
|
+
export declare class RepeatableScaleField extends RepeatableBaseField<string | number | null> {
|
|
8
|
+
options: (FieldOption | string | number)[];
|
|
9
|
+
protected controlTemplate(value: string | null, index: number): TemplateResult;
|
|
10
|
+
protected onSelect(item: PaperRadioButtonElement, index: number): void;
|
|
11
|
+
protected getLabel(option: FieldOption | string | number): unknown;
|
|
12
|
+
protected getValue(option: FieldOption | string | number): unknown;
|
|
13
|
+
protected customValidation(): string | null;
|
|
14
|
+
static get styles(): CSSResultArray;
|
|
15
|
+
}
|