@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,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 { BaseField } from './base-field';
9
- import '@polymer/paper-input/paper-input';
10
- import { InputStyles } from '../../lib/styles/input-styles';
11
- import { getTranslation } from '../../lib/utils/translate';
12
- let NumberField = class NumberField extends BaseField {
13
- constructor() {
14
- super(...arguments);
15
- this.isInteger = false;
16
- }
17
- controlTemplate() {
18
- return html `
19
- ${InputStyles}
20
- <paper-input
21
- class="no-padding-left"
22
- no-label-float
23
- placeholder="${this.isReadonly ? '—' : this.placeholder}"
24
- .value="${this.value}"
25
- @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
26
- @focus="${() => (this.touched = true)}"
27
- placeholder="&#8212;"
28
- ?invalid="${this.errorMessage}"
29
- error-message="${this.errorMessage}"
30
- ?readonly="${this.isReadonly}"
31
- >
32
- </paper-input>
33
- `;
34
- }
35
- valueChanged(newValue) {
36
- const formatted = Number(newValue);
37
- const isNumber = !isNaN(formatted) && `${newValue}` !== '' && `${newValue}` !== 'null';
38
- super.valueChanged(isNumber ? formatted : newValue);
39
- }
40
- customValidation(value) {
41
- if (!value) {
42
- return null;
43
- }
44
- if (isNaN(value)) {
45
- return 'Must be a 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
- ...BaseField.styles,
54
- css `
55
- @media (max-width: 380px) {
56
- .no-padding-left {
57
- padding-left: 0;
58
- }
59
- }
60
- `
61
- ];
62
- }
63
- };
64
- NumberField = __decorate([
65
- customElement('number-field')
66
- ], NumberField);
67
- export { NumberField };
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 { BaseField } from './base-field';
9
+ import '@polymer/paper-input/paper-input';
10
+ import { InputStyles } from '../../lib/styles/input-styles';
11
+ import { getTranslation } from '../../lib/utils/translate';
12
+ let NumberField = class NumberField extends BaseField {
13
+ constructor() {
14
+ super(...arguments);
15
+ this.isInteger = false;
16
+ }
17
+ controlTemplate() {
18
+ return html `
19
+ ${InputStyles}
20
+ <paper-input
21
+ class="no-padding-left"
22
+ no-label-float
23
+ placeholder="${this.isReadonly ? '—' : this.placeholder}"
24
+ .value="${this.value}"
25
+ @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
26
+ @focus="${() => (this.touched = true)}"
27
+ placeholder="&#8212;"
28
+ ?invalid="${this.errorMessage}"
29
+ error-message="${this.errorMessage}"
30
+ ?readonly="${this.isReadonly}"
31
+ >
32
+ </paper-input>
33
+ `;
34
+ }
35
+ valueChanged(newValue) {
36
+ const formatted = Number(newValue);
37
+ const isNumber = !isNaN(formatted) && `${newValue}` !== '' && `${newValue}` !== 'null';
38
+ super.valueChanged(isNumber ? formatted : newValue);
39
+ }
40
+ customValidation(value) {
41
+ if (!value) {
42
+ return null;
43
+ }
44
+ if (isNaN(value)) {
45
+ return 'Must be a 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
+ ...BaseField.styles,
54
+ css `
55
+ @media (max-width: 380px) {
56
+ .no-padding-left {
57
+ padding-left: 0;
58
+ }
59
+ }
60
+ `
61
+ ];
62
+ }
63
+ };
64
+ NumberField = __decorate([
65
+ customElement('number-field')
66
+ ], NumberField);
67
+ export { NumberField };
@@ -1,18 +1,18 @@
1
- import { TemplateResult, CSSResultArray } from 'lit-element';
2
- import { BaseField } from './base-field';
3
- import '@polymer/paper-radio-group/paper-radio-group';
4
- import '@polymer/paper-radio-button/paper-radio-button';
5
- import { PaperRadioButtonElement } from '@polymer/paper-radio-button/paper-radio-button';
6
- export declare type FieldOption = {
7
- value: any;
8
- label: string;
9
- };
10
- export declare class ScaleField extends BaseField<string | number | null> {
11
- options: (FieldOption | string | number)[];
12
- protected controlTemplate(): TemplateResult;
13
- protected getLabel(option: FieldOption | string | number): unknown;
14
- protected getValue(option: FieldOption | string | number): unknown;
15
- protected onSelect(item: PaperRadioButtonElement): void;
16
- protected customValidation(): string | null;
17
- static get styles(): CSSResultArray;
18
- }
1
+ import { TemplateResult, CSSResultArray } from 'lit-element';
2
+ import { BaseField } from './base-field';
3
+ import '@polymer/paper-radio-group/paper-radio-group';
4
+ import '@polymer/paper-radio-button/paper-radio-button';
5
+ import { PaperRadioButtonElement } from '@polymer/paper-radio-button/paper-radio-button';
6
+ export declare type FieldOption = {
7
+ value: any;
8
+ label: string;
9
+ };
10
+ export declare class ScaleField extends BaseField<string | number | null> {
11
+ options: (FieldOption | string | number)[];
12
+ protected controlTemplate(): TemplateResult;
13
+ protected getLabel(option: FieldOption | string | number): unknown;
14
+ protected getValue(option: FieldOption | string | number): unknown;
15
+ protected onSelect(item: PaperRadioButtonElement): void;
16
+ protected customValidation(): string | null;
17
+ static get styles(): CSSResultArray;
18
+ }
@@ -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 { BaseField } from './base-field';
9
- import { repeat } from 'lit-html/directives/repeat';
10
- import '@polymer/paper-radio-group/paper-radio-group';
11
- import '@polymer/paper-radio-button/paper-radio-button';
12
- import { InputStyles } from '../../lib/styles/input-styles';
13
- import { getTranslation } from '../../lib/utils/translate';
14
- let ScaleField = class ScaleField extends BaseField {
15
- constructor() {
16
- super(...arguments);
17
- this.options = [];
18
- }
19
- controlTemplate() {
20
- return html `
21
- ${InputStyles}
22
- <div class="container">
23
- <paper-radio-group
24
- class="radio-group"
25
- selected="${this.value}"
26
- @iron-select="${({ detail }) => this.onSelect(detail.item)}"
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 ?hidden="${this.isReadonly}" @click="${() => this.valueChanged(null)}" class="clear-button">
36
- <iron-icon icon="clear"></iron-icon>${getTranslation(this.language, 'CLEAR')}
37
- </paper-button>
38
- </div>
39
- <div ?hidden="${!this.errorMessage}" class="error-text">${this.errorMessage}</div>
40
- `;
41
- }
42
- getLabel(option) {
43
- return typeof option === 'object' ? option.label : option;
44
- }
45
- getValue(option) {
46
- return typeof option === 'object' ? option.value : option;
47
- }
48
- onSelect(item) {
49
- const newValue = item.get('name');
50
- if (newValue !== this.value) {
51
- this.touched = true;
52
- }
53
- this.valueChanged(newValue);
54
- }
55
- customValidation() {
56
- return null;
57
- }
58
- static get styles() {
59
- // language=CSS
60
- return [
61
- ...BaseField.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
- ], ScaleField.prototype, "options", void 0);
105
- ScaleField = __decorate([
106
- customElement('scale-field')
107
- ], ScaleField);
108
- export { ScaleField };
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 { BaseField } from './base-field';
9
+ import { repeat } from 'lit-html/directives/repeat';
10
+ import '@polymer/paper-radio-group/paper-radio-group';
11
+ import '@polymer/paper-radio-button/paper-radio-button';
12
+ import { InputStyles } from '../../lib/styles/input-styles';
13
+ import { getTranslation } from '../../lib/utils/translate';
14
+ let ScaleField = class ScaleField extends BaseField {
15
+ constructor() {
16
+ super(...arguments);
17
+ this.options = [];
18
+ }
19
+ controlTemplate() {
20
+ return html `
21
+ ${InputStyles}
22
+ <div class="container">
23
+ <paper-radio-group
24
+ class="radio-group"
25
+ selected="${this.value}"
26
+ @iron-select="${({ detail }) => this.onSelect(detail.item)}"
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 ?hidden="${this.isReadonly}" @click="${() => this.valueChanged(null)}" class="clear-button">
36
+ <iron-icon icon="clear"></iron-icon>${getTranslation(this.language, 'CLEAR')}
37
+ </paper-button>
38
+ </div>
39
+ <div ?hidden="${!this.errorMessage}" class="error-text">${this.errorMessage}</div>
40
+ `;
41
+ }
42
+ getLabel(option) {
43
+ return typeof option === 'object' ? option.label : option;
44
+ }
45
+ getValue(option) {
46
+ return typeof option === 'object' ? option.value : option;
47
+ }
48
+ onSelect(item) {
49
+ const newValue = item.get('name');
50
+ if (newValue !== this.value) {
51
+ this.touched = true;
52
+ }
53
+ this.valueChanged(newValue);
54
+ }
55
+ customValidation() {
56
+ return null;
57
+ }
58
+ static get styles() {
59
+ // language=CSS
60
+ return [
61
+ ...BaseField.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
+ ], ScaleField.prototype, "options", void 0);
105
+ ScaleField = __decorate([
106
+ customElement('scale-field')
107
+ ], ScaleField);
108
+ export { ScaleField };
@@ -1,8 +1,8 @@
1
- import { CSSResultArray, TemplateResult } from 'lit-element';
2
- import { BaseField } from './base-field';
3
- import '@polymer/paper-input/paper-textarea';
4
- export declare class TextField extends BaseField<string> {
5
- protected controlTemplate(): TemplateResult;
6
- protected customValidation(): string | null;
7
- static get styles(): CSSResultArray;
8
- }
1
+ import { CSSResultArray, TemplateResult } from 'lit-element';
2
+ import { BaseField } from './base-field';
3
+ import '@polymer/paper-input/paper-textarea';
4
+ export declare class TextField extends BaseField<string> {
5
+ protected controlTemplate(): TemplateResult;
6
+ protected customValidation(): string | null;
7
+ static get styles(): CSSResultArray;
8
+ }
@@ -1,54 +1,54 @@
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 { BaseField } from './base-field';
9
- import '@polymer/paper-input/paper-textarea';
10
- import { InputStyles } from '../../lib/styles/input-styles';
11
- let TextField = class TextField extends BaseField {
12
- controlTemplate() {
13
- return html `
14
- ${InputStyles}
15
- <paper-textarea
16
- id="textarea"
17
- class="no-padding-left"
18
- no-label-float
19
- placeholder="${this.isReadonly ? '—' : this.placeholder}"
20
- .value="${this.value}"
21
- @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
22
- @focus="${() => (this.touched = true)}"
23
- placeholder="&#8212;"
24
- ?readonly="${this.isReadonly}"
25
- ?invalid="${this.errorMessage}"
26
- error-message="${this.errorMessage}"
27
- >
28
- </paper-textarea>
29
- `;
30
- }
31
- customValidation() {
32
- return null;
33
- }
34
- static get styles() {
35
- // language=CSS
36
- return [
37
- ...BaseField.styles,
38
- css `
39
- :host(.wide) paper-textarea {
40
- padding-left: 0;
41
- }
42
- @media (max-width: 380px) {
43
- .no-padding-left {
44
- padding-left: 0;
45
- }
46
- }
47
- `
48
- ];
49
- }
50
- };
51
- TextField = __decorate([
52
- customElement('text-field')
53
- ], TextField);
54
- export { TextField };
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 { BaseField } from './base-field';
9
+ import '@polymer/paper-input/paper-textarea';
10
+ import { InputStyles } from '../../lib/styles/input-styles';
11
+ let TextField = class TextField extends BaseField {
12
+ controlTemplate() {
13
+ return html `
14
+ ${InputStyles}
15
+ <paper-textarea
16
+ id="textarea"
17
+ class="no-padding-left"
18
+ no-label-float
19
+ placeholder="${this.isReadonly ? '—' : this.placeholder}"
20
+ .value="${this.value}"
21
+ @value-changed="${({ detail }) => this.valueChanged(detail.value)}"
22
+ @focus="${() => (this.touched = true)}"
23
+ placeholder="&#8212;"
24
+ ?readonly="${this.isReadonly}"
25
+ ?invalid="${this.errorMessage}"
26
+ error-message="${this.errorMessage}"
27
+ >
28
+ </paper-textarea>
29
+ `;
30
+ }
31
+ customValidation() {
32
+ return null;
33
+ }
34
+ static get styles() {
35
+ // language=CSS
36
+ return [
37
+ ...BaseField.styles,
38
+ css `
39
+ :host(.wide) paper-textarea {
40
+ padding-left: 0;
41
+ }
42
+ @media (max-width: 380px) {
43
+ .no-padding-left {
44
+ padding-left: 0;
45
+ }
46
+ }
47
+ `
48
+ ];
49
+ }
50
+ };
51
+ TextField = __decorate([
52
+ customElement('text-field')
53
+ ], TextField);
54
+ export { TextField };
@@ -1,71 +1,71 @@
1
- import { LitElement, TemplateResult, CSSResultArray } from 'lit-element';
2
- import '../form-fields/single-fields/text-field';
3
- import '../form-fields/single-fields/number-field';
4
- import '../form-fields/single-fields/scale-field';
5
- import '@polymer/paper-input/paper-textarea';
6
- import { IFormBuilderAbstractGroup } from '../lib/types/form-builder.interfaces';
7
- import { BlueprintField, BlueprintGroup, BlueprintMetadata, Information } from '../lib/types/form-builder.types';
8
- import { GenericObject } from '../lib/types/global.types';
9
- export declare enum FieldTypes {
10
- FILE_TYPE = "file",
11
- TEXT_TYPE = "text",
12
- NUMBER_TYPE = "number",
13
- BOOL_TYPE = "bool",
14
- SCALE_TYPE = "likert_scale",
15
- NUMBER_INTEGER_TYPE = "number-integer",
16
- NUMBER_FLOAT_TYPE = "number-float"
17
- }
18
- export declare enum StructureTypes {
19
- WIDE = "wide",
20
- ADDITIONAL = "additional",
21
- CARD = "card",
22
- ABSTRACT = "abstract",
23
- COLLAPSED = "collapse",
24
- ATTACHMENTS_BUTTON = "floating_attachments"
25
- }
26
- export declare class FormAbstractGroup extends LitElement implements IFormBuilderAbstractGroup {
27
- groupStructure: BlueprintGroup;
28
- metadata: BlueprintMetadata;
29
- parentGroupName: string;
30
- collapsed: boolean;
31
- language: string;
32
- readonly: boolean;
33
- protected _errors: GenericObject;
34
- protected _value: GenericObject;
35
- computedPath: string[];
36
- /**
37
- * Make value property immutable
38
- * @param value
39
- */
40
- set value(value: GenericObject);
41
- get value(): GenericObject;
42
- /**
43
- * Setter for handling error.
44
- * Normally we wouldn't have errors as string or string[] for FormGroups.
45
- * In cases they appear - show toast with error text and reset it.
46
- * Otherwise it will be impossible to clear that error from field elements
47
- * @param errors
48
- */
49
- set errors(errors: GenericObject | string[] | null);
50
- constructor();
51
- connectedCallback(): void;
52
- disconnectedCallback(): void;
53
- countCollapsePanels(groupStructure: BlueprintGroup | BlueprintField | Information, res: {
54
- count: number;
55
- }): {
56
- count: number;
57
- };
58
- handleLanguageChange(e: CustomEvent): void;
59
- render(): TemplateResult;
60
- renderChild(child: BlueprintGroup | BlueprintField | Information): TemplateResult | TemplateResult[];
61
- renderField(blueprintField: BlueprintField): TemplateResult;
62
- renderInformation(information: Information): TemplateResult;
63
- renderGroup(groupStructure: BlueprintGroup): TemplateResult | TemplateResult[];
64
- getGroupTemplate(groupStructure: BlueprintGroup, index?: number): TemplateResult;
65
- valueChanged(event: CustomEvent, name: string, index?: number): void;
66
- errorChanged(event: CustomEvent, name: string, index?: number): void;
67
- addGroup(name: string): void;
68
- removeGroup(group: BlueprintGroup, index?: number): void;
69
- protected getErrorMessage(fieldName: string): string | null;
70
- static get styles(): CSSResultArray;
71
- }
1
+ import { LitElement, TemplateResult, CSSResultArray } from 'lit-element';
2
+ import '../form-fields/single-fields/text-field';
3
+ import '../form-fields/single-fields/number-field';
4
+ import '../form-fields/single-fields/scale-field';
5
+ import '@polymer/paper-input/paper-textarea';
6
+ import { IFormBuilderAbstractGroup } from '../lib/types/form-builder.interfaces';
7
+ import { BlueprintField, BlueprintGroup, BlueprintMetadata, Information } from '../lib/types/form-builder.types';
8
+ import { GenericObject } from '../lib/types/global.types';
9
+ export declare enum FieldTypes {
10
+ FILE_TYPE = "file",
11
+ TEXT_TYPE = "text",
12
+ NUMBER_TYPE = "number",
13
+ BOOL_TYPE = "bool",
14
+ SCALE_TYPE = "likert_scale",
15
+ NUMBER_INTEGER_TYPE = "number-integer",
16
+ NUMBER_FLOAT_TYPE = "number-float"
17
+ }
18
+ export declare enum StructureTypes {
19
+ WIDE = "wide",
20
+ ADDITIONAL = "additional",
21
+ CARD = "card",
22
+ ABSTRACT = "abstract",
23
+ COLLAPSED = "collapse",
24
+ ATTACHMENTS_BUTTON = "floating_attachments"
25
+ }
26
+ export declare class FormAbstractGroup extends LitElement implements IFormBuilderAbstractGroup {
27
+ groupStructure: BlueprintGroup;
28
+ metadata: BlueprintMetadata;
29
+ parentGroupName: string;
30
+ collapsed: boolean;
31
+ language: string;
32
+ readonly: boolean;
33
+ protected _errors: GenericObject;
34
+ protected _value: GenericObject;
35
+ computedPath: string[];
36
+ /**
37
+ * Make value property immutable
38
+ * @param value
39
+ */
40
+ set value(value: GenericObject);
41
+ get value(): GenericObject;
42
+ /**
43
+ * Setter for handling error.
44
+ * Normally we wouldn't have errors as string or string[] for FormGroups.
45
+ * In cases they appear - show toast with error text and reset it.
46
+ * Otherwise it will be impossible to clear that error from field elements
47
+ * @param errors
48
+ */
49
+ set errors(errors: GenericObject | string[] | null);
50
+ constructor();
51
+ connectedCallback(): void;
52
+ disconnectedCallback(): void;
53
+ countCollapsePanels(groupStructure: BlueprintGroup | BlueprintField | Information, res: {
54
+ count: number;
55
+ }): {
56
+ count: number;
57
+ };
58
+ handleLanguageChange(e: CustomEvent): void;
59
+ render(): TemplateResult;
60
+ renderChild(child: BlueprintGroup | BlueprintField | Information): TemplateResult | TemplateResult[];
61
+ renderField(blueprintField: BlueprintField): TemplateResult;
62
+ renderInformation(information: Information): TemplateResult;
63
+ renderGroup(groupStructure: BlueprintGroup): TemplateResult | TemplateResult[];
64
+ getGroupTemplate(groupStructure: BlueprintGroup, index?: number): TemplateResult;
65
+ valueChanged(event: CustomEvent, name: string, index?: number): void;
66
+ errorChanged(event: CustomEvent, name: string, index?: number): void;
67
+ addGroup(name: string): void;
68
+ removeGroup(group: BlueprintGroup, index?: number): void;
69
+ protected getErrorMessage(fieldName: string): string | null;
70
+ static get styles(): CSSResultArray;
71
+ }