@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,124 +1,124 @@
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
- return html `
26
- <div class="finding-container">
27
- <div class="question layout start"><slot>${this.questionTemplate()}</slot></div>
28
- <div class="question-control layout vertical center-justified start">
29
- ${values.map((value, index) => html `<div class="layout horizontal center full-width">
30
- ${this.controlTemplate(value, index)}
31
- <iron-icon
32
- icon="close"
33
- ?hidden="${this.isReadonly || values.length < 2}"
34
- @click="${() => this.removeControl(index)}"
35
- ></iron-icon>
36
- </div>`)}
37
- <paper-button class="add-button" ?hidden="${this.isReadonly}" @click="${() => this.addNewField()}">
38
- ${getTranslation(this.language, 'ADD')}
39
- </paper-button>
40
- </div>
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,
110
- css `
111
- :host(:not([is-readonly])) .question-control,
112
- :host(:not([is-readonly])) .question {
113
- padding-bottom: 10px;
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);
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
+ return html `
26
+ <div class="finding-container">
27
+ <div class="question layout start"><slot>${this.questionTemplate()}</slot></div>
28
+ <div class="question-control layout vertical center-justified start">
29
+ ${values.map((value, index) => html `<div class="layout horizontal center full-width">
30
+ ${this.controlTemplate(value, index)}
31
+ <iron-icon
32
+ icon="close"
33
+ ?hidden="${this.isReadonly || values.length < 2}"
34
+ @click="${() => this.removeControl(index)}"
35
+ ></iron-icon>
36
+ </div>`)}
37
+ <paper-button class="add-button" ?hidden="${this.isReadonly}" @click="${() => this.addNewField()}">
38
+ ${getTranslation(this.language, 'ADD')}
39
+ </paper-button>
40
+ </div>
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,
110
+ css `
111
+ :host(:not([is-readonly])) .question-control,
112
+ :host(:not([is-readonly])) .question {
113
+ padding-bottom: 10px;
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);
@@ -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,67 +1,67 @@
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
- return html `
20
- ${InputStyles}
21
- <paper-input
22
- class="no-padding-left"
23
- no-label-float
24
- placeholder="${this.isReadonly ? '—' : this.placeholder}"
25
- .value="${value}"
26
- @value-changed="${({ detail }) => this.valueChanged(detail.value, index)}"
27
- placeholder="&#8212;"
28
- ?invalid="${this.errorMessage[index]}"
29
- error-message="${this.errorMessage[index]}"
30
- ?readonly="${this.isReadonly}"
31
- >
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,
54
- css `
55
- @media (max-width: 380px) {
56
- .no-padding-left {
57
- padding-left: 0;
58
- }
59
- }
60
- `
61
- ];
62
- }
63
- };
64
- RepeatableNumberField = __decorate([
65
- customElement('repeatable-number-field')
66
- ], RepeatableNumberField);
67
- export { RepeatableNumberField };
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
+ return html `
20
+ ${InputStyles}
21
+ <paper-input
22
+ class="no-padding-left"
23
+ no-label-float
24
+ placeholder="${this.isReadonly ? '—' : this.placeholder}"
25
+ .value="${value}"
26
+ @value-changed="${({ detail }) => this.valueChanged(detail.value, index)}"
27
+ placeholder="&#8212;"
28
+ ?invalid="${this.errorMessage[index]}"
29
+ error-message="${this.errorMessage[index]}"
30
+ ?readonly="${this.isReadonly}"
31
+ >
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,
54
+ css `
55
+ @media (max-width: 380px) {
56
+ .no-padding-left {
57
+ padding-left: 0;
58
+ }
59
+ }
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
+ }
@@ -1,108 +1,108 @@
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, css, customElement } from 'lit-element';
8
- import { repeat } from 'lit-html/directives/repeat';
9
- import '@polymer/paper-radio-group/paper-radio-group';
10
- import '@polymer/paper-radio-button/paper-radio-button';
11
- import { InputStyles } from '../../lib/styles/input-styles';
12
- import { RepeatableBaseField } from './repeatable-base-field';
13
- import { AbstractFieldBaseClass } from '../abstract-field-base.class';
14
- let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseField {
15
- constructor() {
16
- super(...arguments);
17
- this.options = [];
18
- }
19
- controlTemplate(value, index) {
20
- return html `
21
- ${InputStyles}
22
- <div class="container">
23
- <paper-radio-group
24
- class="radio-group"
25
- selected="${value}"
26
- @iron-select="${({ detail }) => this.onSelect(detail.item, index)}"
27
- >
28
- ${repeat(this.options, (option) => html `
29
- <paper-radio-button class="radio-button" name="${this.getValue(option)}">
30
- ${this.getLabel(option)}
31
- </paper-radio-button>
32
- `)}
33
- </paper-radio-group>
34
-
35
- <paper-button
36
- ?hidden="${this.isReadonly}"
37
- @click="${() => this.valueChanged(null, index)}"
38
- class="clear-button"
39
- >
40
- <iron-icon icon="clear"></iron-icon>Clear
41
- </paper-button>
42
- </div>
43
- `;
44
- }
45
- onSelect(item, index) {
46
- const newValue = item.get('name');
47
- this.valueChanged(newValue, index);
48
- }
49
- getLabel(option) {
50
- return typeof option === 'object' ? option.label : option;
51
- }
52
- getValue(option) {
53
- return typeof option === 'object' ? option.value : option;
54
- }
55
- customValidation() {
56
- return null;
57
- }
58
- static get styles() {
59
- // language=CSS
60
- return [
61
- ...AbstractFieldBaseClass.styles,
62
- css `
63
- .container {
64
- position: relative;
65
- min-height: 48px;
66
- display: flex;
67
- align-items: center;
68
- flex-direction: row;
69
- }
70
-
71
- .radio-group {
72
- display: flex;
73
- flex-direction: row;
74
- flex-wrap: wrap;
75
- }
76
-
77
- :host([is-readonly]) paper-radio-group {
78
- pointer-events: none;
79
- opacity: 0.55;
80
- }
81
-
82
- @media (max-width: 1080px) {
83
- .container {
84
- flex-direction: column;
85
- align-items: flex-start;
86
- }
87
- .radio-group {
88
- flex-direction: column;
89
- }
90
- .radio-button {
91
- padding-left: 3px;
92
- }
93
- .clear-button {
94
- margin: 0;
95
- padding-left: 0;
96
- }
97
- }
98
- `
99
- ];
100
- }
101
- };
102
- __decorate([
103
- property({ type: Array })
104
- ], RepeatableScaleField.prototype, "options", void 0);
105
- RepeatableScaleField = __decorate([
106
- customElement('repeatable-scale-field')
107
- ], RepeatableScaleField);
108
- export { RepeatableScaleField };
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, css, customElement } from 'lit-element';
8
+ import { repeat } from 'lit-html/directives/repeat';
9
+ import '@polymer/paper-radio-group/paper-radio-group';
10
+ import '@polymer/paper-radio-button/paper-radio-button';
11
+ import { InputStyles } from '../../lib/styles/input-styles';
12
+ import { RepeatableBaseField } from './repeatable-base-field';
13
+ import { AbstractFieldBaseClass } from '../abstract-field-base.class';
14
+ let RepeatableScaleField = class RepeatableScaleField extends RepeatableBaseField {
15
+ constructor() {
16
+ super(...arguments);
17
+ this.options = [];
18
+ }
19
+ controlTemplate(value, index) {
20
+ return html `
21
+ ${InputStyles}
22
+ <div class="container">
23
+ <paper-radio-group
24
+ class="radio-group"
25
+ selected="${value}"
26
+ @iron-select="${({ detail }) => this.onSelect(detail.item, index)}"
27
+ >
28
+ ${repeat(this.options, (option) => html `
29
+ <paper-radio-button class="radio-button" name="${this.getValue(option)}">
30
+ ${this.getLabel(option)}
31
+ </paper-radio-button>
32
+ `)}
33
+ </paper-radio-group>
34
+
35
+ <paper-button
36
+ ?hidden="${this.isReadonly}"
37
+ @click="${() => this.valueChanged(null, index)}"
38
+ class="clear-button"
39
+ >
40
+ <iron-icon icon="clear"></iron-icon>Clear
41
+ </paper-button>
42
+ </div>
43
+ `;
44
+ }
45
+ onSelect(item, index) {
46
+ const newValue = item.get('name');
47
+ this.valueChanged(newValue, index);
48
+ }
49
+ getLabel(option) {
50
+ return typeof option === 'object' ? option.label : option;
51
+ }
52
+ getValue(option) {
53
+ return typeof option === 'object' ? option.value : option;
54
+ }
55
+ customValidation() {
56
+ return null;
57
+ }
58
+ static get styles() {
59
+ // language=CSS
60
+ return [
61
+ ...AbstractFieldBaseClass.styles,
62
+ css `
63
+ .container {
64
+ position: relative;
65
+ min-height: 48px;
66
+ display: flex;
67
+ align-items: center;
68
+ flex-direction: row;
69
+ }
70
+
71
+ .radio-group {
72
+ display: flex;
73
+ flex-direction: row;
74
+ flex-wrap: wrap;
75
+ }
76
+
77
+ :host([is-readonly]) paper-radio-group {
78
+ pointer-events: none;
79
+ opacity: 0.55;
80
+ }
81
+
82
+ @media (max-width: 1080px) {
83
+ .container {
84
+ flex-direction: column;
85
+ align-items: flex-start;
86
+ }
87
+ .radio-group {
88
+ flex-direction: column;
89
+ }
90
+ .radio-button {
91
+ padding-left: 3px;
92
+ }
93
+ .clear-button {
94
+ margin: 0;
95
+ padding-left: 0;
96
+ }
97
+ }
98
+ `
99
+ ];
100
+ }
101
+ };
102
+ __decorate([
103
+ property({ type: Array })
104
+ ], RepeatableScaleField.prototype, "options", void 0);
105
+ RepeatableScaleField = __decorate([
106
+ customElement('repeatable-scale-field')
107
+ ], RepeatableScaleField);
108
+ export { RepeatableScaleField };