@unicef-polymer/etools-form-builder 2.1.8 → 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 -239
  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,72 +1,72 @@
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 { LitElement, property, html, css, customElement } from 'lit-element';
8
- import { fireEvent } from '../utils/fire-custom-event';
9
- import { getTranslation } from '../utils/translate';
10
- let ConfirmationDialog = class ConfirmationDialog extends LitElement {
11
- constructor() {
12
- super();
13
- this.dialogOpened = true;
14
- this.text = '';
15
- this.dialogTitle = '';
16
- this.hideConfirmBtn = false;
17
- if (!this.language) {
18
- this.language = window.localStorage.defaultLanguage || 'en';
19
- }
20
- }
21
- set dialogData({ text, dialogTitle = 'Are you', hideConfirmBtn = false }) {
22
- this.text = text;
23
- this.dialogTitle = dialogTitle;
24
- this.hideConfirmBtn = hideConfirmBtn;
25
- this.requestUpdate();
26
- }
27
- render() {
28
- return html `
29
- <etools-dialog
30
- id="confirmation-dialog"
31
- size="md"
32
- no-padding
33
- keep-dialog-open
34
- ?hide-confirm-btn="${this.hideConfirmBtn}"
35
- cancel-btn-text="${getTranslation(this.language, this.hideConfirmBtn ? 'OK' : 'CANCEL')}"
36
- ?opened="${this.dialogOpened}"
37
- theme="confirmation"
38
- dialog-title="${this.dialogTitle}"
39
- @close="${this.onClose}"
40
- @confirm-btn-clicked="${() => this.confirm()}"
41
- >
42
- <div class="confirmation-message">${this.text}</div>
43
- </etools-dialog>
44
- `;
45
- }
46
- onClose() {
47
- fireEvent(this, 'response', { confirmed: false });
48
- }
49
- confirm() {
50
- fireEvent(this, 'response', { confirmed: true });
51
- }
52
- static get styles() {
53
- // language=CSS
54
- return [
55
- css `
56
- .confirmation-message {
57
- padding-left: 24px;
58
- }
59
- `
60
- ];
61
- }
62
- };
63
- __decorate([
64
- property()
65
- ], ConfirmationDialog.prototype, "dialogOpened", void 0);
66
- __decorate([
67
- property()
68
- ], ConfirmationDialog.prototype, "language", void 0);
69
- ConfirmationDialog = __decorate([
70
- customElement('confirmation-popup')
71
- ], ConfirmationDialog);
72
- export { ConfirmationDialog };
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 { LitElement, property, html, css, customElement } from 'lit-element';
8
+ import { fireEvent } from '../utils/fire-custom-event';
9
+ import { getTranslation } from '../utils/translate';
10
+ let ConfirmationDialog = class ConfirmationDialog extends LitElement {
11
+ constructor() {
12
+ super();
13
+ this.dialogOpened = true;
14
+ this.text = '';
15
+ this.dialogTitle = '';
16
+ this.hideConfirmBtn = false;
17
+ if (!this.language) {
18
+ this.language = window.localStorage.defaultLanguage || 'en';
19
+ }
20
+ }
21
+ set dialogData({ text, dialogTitle = 'Are you', hideConfirmBtn = false }) {
22
+ this.text = text;
23
+ this.dialogTitle = dialogTitle;
24
+ this.hideConfirmBtn = hideConfirmBtn;
25
+ this.requestUpdate();
26
+ }
27
+ render() {
28
+ return html `
29
+ <etools-dialog
30
+ id="confirmation-dialog"
31
+ size="md"
32
+ no-padding
33
+ keep-dialog-open
34
+ ?hide-confirm-btn="${this.hideConfirmBtn}"
35
+ cancel-btn-text="${getTranslation(this.language, this.hideConfirmBtn ? 'OK' : 'CANCEL')}"
36
+ ?opened="${this.dialogOpened}"
37
+ theme="confirmation"
38
+ dialog-title="${this.dialogTitle}"
39
+ @close="${this.onClose}"
40
+ @confirm-btn-clicked="${() => this.confirm()}"
41
+ >
42
+ <div class="confirmation-message">${this.text}</div>
43
+ </etools-dialog>
44
+ `;
45
+ }
46
+ onClose() {
47
+ fireEvent(this, 'response', { confirmed: false });
48
+ }
49
+ confirm() {
50
+ fireEvent(this, 'response', { confirmed: true });
51
+ }
52
+ static get styles() {
53
+ // language=CSS
54
+ return [
55
+ css `
56
+ .confirmation-message {
57
+ padding-left: 24px;
58
+ }
59
+ `
60
+ ];
61
+ }
62
+ };
63
+ __decorate([
64
+ property()
65
+ ], ConfirmationDialog.prototype, "dialogOpened", void 0);
66
+ __decorate([
67
+ property()
68
+ ], ConfirmationDialog.prototype, "language", void 0);
69
+ ConfirmationDialog = __decorate([
70
+ customElement('confirmation-popup')
71
+ ], ConfirmationDialog);
72
+ export { ConfirmationDialog };
@@ -1,21 +1,21 @@
1
- import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
2
- import '@polymer/iron-icons/iron-icons';
3
- export declare class EtoolsFbCard extends LitElement {
4
- cardTitle: string;
5
- isEditable: boolean;
6
- isCollapsible: boolean;
7
- hideEditButton: boolean;
8
- collapsed: boolean;
9
- edit: boolean;
10
- language: string;
11
- static get styles(): CSSResultArray;
12
- constructor();
13
- save(): void;
14
- cancel(): void;
15
- startEdit(): void;
16
- toggleCollapse(): void;
17
- connectedCallback(): void;
18
- disconnectedCallback(): void;
19
- handleLanguageChange(e: CustomEvent): void;
20
- protected render(): TemplateResult;
21
- }
1
+ import { CSSResultArray, LitElement, TemplateResult } from 'lit-element';
2
+ import '@polymer/iron-icons/iron-icons';
3
+ export declare class EtoolsFbCard extends LitElement {
4
+ cardTitle: string;
5
+ isEditable: boolean;
6
+ isCollapsible: boolean;
7
+ hideEditButton: boolean;
8
+ collapsed: boolean;
9
+ edit: boolean;
10
+ language: string;
11
+ static get styles(): CSSResultArray;
12
+ constructor();
13
+ save(): void;
14
+ cancel(): void;
15
+ startEdit(): void;
16
+ toggleCollapse(): void;
17
+ connectedCallback(): void;
18
+ disconnectedCallback(): void;
19
+ handleLanguageChange(e: CustomEvent): void;
20
+ protected render(): TemplateResult;
21
+ }
@@ -1,239 +1,239 @@
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, LitElement, property } from 'lit-element';
8
- import '@polymer/iron-icons/iron-icons';
9
- import { CardStyles } from '../styles/card-styles';
10
- import { elevationStyles } from '../styles/elevation-styles';
11
- import { FlexLayoutClasses } from '../styles/flex-layout-classes';
12
- import { fireEvent } from '../utils/fire-custom-event';
13
- import { getTranslation } from '../utils/translate';
14
- let EtoolsFbCard = class EtoolsFbCard extends LitElement {
15
- constructor() {
16
- super();
17
- this.isEditable = false;
18
- this.isCollapsible = false;
19
- this.hideEditButton = false;
20
- this.collapsed = false;
21
- this.edit = false;
22
- if (!this.language) {
23
- this.language = window.localStorage.defaultLanguage || 'en';
24
- }
25
- this.handleLanguageChange = this.handleLanguageChange.bind(this);
26
- }
27
- static get styles() {
28
- // language=CSS
29
- return [
30
- elevationStyles,
31
- CardStyles,
32
- FlexLayoutClasses,
33
- css `
34
- :host {
35
- display: block;
36
- }
37
-
38
- .card-container {
39
- background-color: var(--primary-background-color);
40
- }
41
-
42
- .card-title-box[is-collapsible] {
43
- padding-left: 17px;
44
- padding-right: 25px;
45
- }
46
-
47
- .card-content {
48
- padding: 0;
49
- }
50
-
51
- .card-buttons {
52
- padding: 12px 24px;
53
- }
54
-
55
- .save-button {
56
- color: var(--primary-background-color);
57
- background-color: var(--primary-color);
58
- }
59
-
60
- .edit-button {
61
- color: var(--gray-mid);
62
- }
63
-
64
- .edit-button[edit] {
65
- color: var(--primary-color);
66
- }
67
-
68
- .flex-header {
69
- display: flex;
70
- align-items: center;
71
- padding-top: auto;
72
- flex-wrap: nowrap;
73
- }
74
- .flex-header__collapse {
75
- flex-basis: auto;
76
- }
77
- .flex-header__title {
78
- font-size: 18px;
79
- flex-basis: auto;
80
- flex-grow: 1;
81
- overflow: hidden;
82
- white-space: nowrap;
83
- text-overflow: ellipsis;
84
- }
85
- .flex-header__actions {
86
- order: 1;
87
- width: auto;
88
- display: flex;
89
- flex-basis: auto;
90
- }
91
- .flex-header__postfix {
92
- order: 3;
93
- }
94
- .flex-header__edit {
95
- order: 2;
96
- }
97
- @media (max-width: 380px) {
98
- .card-title-box[is-collapsible] {
99
- padding-left: 0;
100
- padding-right: 0;
101
- }
102
- .flex-header {
103
- align-items: baseline;
104
- padding-top: 10px;
105
- flex-wrap: wrap;
106
- }
107
- .flex-header__collapse {
108
- flex-basis: 20%;
109
- }
110
- .flex-header__title {
111
- flex-basis: 60%;
112
- overflow: unset;
113
- white-space: unset;
114
- text-overflow: unset;
115
- }
116
- .flex-header__actions {
117
- order: 2;
118
- width: 100%;
119
- border-top: 1px solid lightgrey;
120
- justify-content: flex-end;
121
- }
122
- .flex-header__postfix {
123
- order: 3;
124
- }
125
- .flex-header__edit {
126
- order: 1;
127
- flex-basis: 20%;
128
- }
129
- }
130
- `
131
- ];
132
- }
133
- save() {
134
- fireEvent(this, 'save');
135
- }
136
- cancel() {
137
- this.edit = false;
138
- fireEvent(this, 'cancel');
139
- }
140
- startEdit() {
141
- this.collapsed = false;
142
- if (this.edit) {
143
- return;
144
- }
145
- this.edit = true;
146
- fireEvent(this, 'start-edit');
147
- }
148
- toggleCollapse() {
149
- this.collapsed = !this.collapsed;
150
- }
151
- connectedCallback() {
152
- super.connectedCallback();
153
- document.addEventListener('language-changed', this.handleLanguageChange.bind(this));
154
- }
155
- disconnectedCallback() {
156
- super.disconnectedCallback();
157
- document.removeEventListener('language-changed', this.handleLanguageChange.bind(this));
158
- }
159
- handleLanguageChange(e) {
160
- this.language = e.detail.language;
161
- }
162
- // language=HTML
163
- render() {
164
- return html `
165
- <div class="elevation card-container" elevation="1">
166
- <header class="card-title-box with-bottom-line flex-header" ?is-collapsible="${this.isCollapsible}">
167
- ${this.isCollapsible
168
- ? html `
169
- <paper-icon-button
170
- class="flex-header__collapse"
171
- @tap="${() => this.toggleCollapse()}"
172
- icon="${this.collapsed ? 'expand-more' : 'expand-less'}"
173
- ></paper-icon-button>
174
- `
175
- : ''}
176
- <div class="flex-header__title">${this.cardTitle}</div>
177
- <div class="flex-header__actions"><slot name="actions"></slot></div>
178
- <div class="layout horizontal center flex-header__edit">
179
- ${this.isEditable
180
- ? html `
181
- <paper-icon-button
182
- icon="create"
183
- ?edit=${this.edit}
184
- ?hidden="${this.hideEditButton}"
185
- class="edit-button"
186
- @tap="${() => this.startEdit()}"
187
- ></paper-icon-button>
188
- `
189
- : ''}
190
- </div>
191
- <div class="flex-header__postfix"><slot name="postfix"></slot></div>
192
- </header>
193
- <iron-collapse ?opened="${!this.collapsed}">
194
- <section class="card-content-block">
195
- <slot name="content"></slot>
196
-
197
- ${this.isEditable && this.edit
198
- ? html `
199
- <div class="layout horizontal end-justified card-buttons">
200
- <paper-button @tap="${() => this.cancel()}"
201
- >${getTranslation(this.language, 'CANCEL')}</paper-button
202
- >
203
- <paper-button class="save-button" @tap="${() => this.save()}"
204
- >${getTranslation(this.language, 'SAVE')}</paper-button
205
- >
206
- </div>
207
- `
208
- : ''}
209
- </section>
210
- </iron-collapse>
211
- </div>
212
- `;
213
- }
214
- };
215
- __decorate([
216
- property({ attribute: 'card-title' })
217
- ], EtoolsFbCard.prototype, "cardTitle", void 0);
218
- __decorate([
219
- property({ type: Boolean, attribute: 'is-editable' })
220
- ], EtoolsFbCard.prototype, "isEditable", void 0);
221
- __decorate([
222
- property({ type: Boolean, attribute: 'is-collapsible' })
223
- ], EtoolsFbCard.prototype, "isCollapsible", void 0);
224
- __decorate([
225
- property({ type: Boolean, attribute: 'hide-edit-button' })
226
- ], EtoolsFbCard.prototype, "hideEditButton", void 0);
227
- __decorate([
228
- property({ type: Boolean })
229
- ], EtoolsFbCard.prototype, "collapsed", void 0);
230
- __decorate([
231
- property({ type: Boolean })
232
- ], EtoolsFbCard.prototype, "edit", void 0);
233
- __decorate([
234
- property()
235
- ], EtoolsFbCard.prototype, "language", void 0);
236
- EtoolsFbCard = __decorate([
237
- customElement('etools-fb-card')
238
- ], EtoolsFbCard);
239
- export { EtoolsFbCard };
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, LitElement, property } from 'lit-element';
8
+ import '@polymer/iron-icons/iron-icons';
9
+ import { CardStyles } from '../styles/card-styles';
10
+ import { elevationStyles } from '../styles/elevation-styles';
11
+ import { FlexLayoutClasses } from '../styles/flex-layout-classes';
12
+ import { fireEvent } from '../utils/fire-custom-event';
13
+ import { getTranslation } from '../utils/translate';
14
+ let EtoolsFbCard = class EtoolsFbCard extends LitElement {
15
+ constructor() {
16
+ super();
17
+ this.isEditable = false;
18
+ this.isCollapsible = false;
19
+ this.hideEditButton = false;
20
+ this.collapsed = false;
21
+ this.edit = false;
22
+ if (!this.language) {
23
+ this.language = window.localStorage.defaultLanguage || 'en';
24
+ }
25
+ this.handleLanguageChange = this.handleLanguageChange.bind(this);
26
+ }
27
+ static get styles() {
28
+ // language=CSS
29
+ return [
30
+ elevationStyles,
31
+ CardStyles,
32
+ FlexLayoutClasses,
33
+ css `
34
+ :host {
35
+ display: block;
36
+ }
37
+
38
+ .card-container {
39
+ background-color: var(--primary-background-color);
40
+ }
41
+
42
+ .card-title-box[is-collapsible] {
43
+ padding-left: 17px;
44
+ padding-right: 25px;
45
+ }
46
+
47
+ .card-content {
48
+ padding: 0;
49
+ }
50
+
51
+ .card-buttons {
52
+ padding: 12px 24px;
53
+ }
54
+
55
+ .save-button {
56
+ color: var(--primary-background-color);
57
+ background-color: var(--primary-color);
58
+ }
59
+
60
+ .edit-button {
61
+ color: var(--gray-mid);
62
+ }
63
+
64
+ .edit-button[edit] {
65
+ color: var(--primary-color);
66
+ }
67
+
68
+ .flex-header {
69
+ display: flex;
70
+ align-items: center;
71
+ padding-top: auto;
72
+ flex-wrap: nowrap;
73
+ }
74
+ .flex-header__collapse {
75
+ flex-basis: auto;
76
+ }
77
+ .flex-header__title {
78
+ font-size: 18px;
79
+ flex-basis: auto;
80
+ flex-grow: 1;
81
+ overflow: hidden;
82
+ white-space: nowrap;
83
+ text-overflow: ellipsis;
84
+ }
85
+ .flex-header__actions {
86
+ order: 1;
87
+ width: auto;
88
+ display: flex;
89
+ flex-basis: auto;
90
+ }
91
+ .flex-header__postfix {
92
+ order: 3;
93
+ }
94
+ .flex-header__edit {
95
+ order: 2;
96
+ }
97
+ @media (max-width: 380px) {
98
+ .card-title-box[is-collapsible] {
99
+ padding-left: 0;
100
+ padding-right: 0;
101
+ }
102
+ .flex-header {
103
+ align-items: baseline;
104
+ padding-top: 10px;
105
+ flex-wrap: wrap;
106
+ }
107
+ .flex-header__collapse {
108
+ flex-basis: 20%;
109
+ }
110
+ .flex-header__title {
111
+ flex-basis: 60%;
112
+ overflow: unset;
113
+ white-space: unset;
114
+ text-overflow: unset;
115
+ }
116
+ .flex-header__actions {
117
+ order: 2;
118
+ width: 100%;
119
+ border-top: 1px solid lightgrey;
120
+ justify-content: flex-end;
121
+ }
122
+ .flex-header__postfix {
123
+ order: 3;
124
+ }
125
+ .flex-header__edit {
126
+ order: 1;
127
+ flex-basis: 20%;
128
+ }
129
+ }
130
+ `
131
+ ];
132
+ }
133
+ save() {
134
+ fireEvent(this, 'save');
135
+ }
136
+ cancel() {
137
+ this.edit = false;
138
+ fireEvent(this, 'cancel');
139
+ }
140
+ startEdit() {
141
+ this.collapsed = false;
142
+ if (this.edit) {
143
+ return;
144
+ }
145
+ this.edit = true;
146
+ fireEvent(this, 'start-edit');
147
+ }
148
+ toggleCollapse() {
149
+ this.collapsed = !this.collapsed;
150
+ }
151
+ connectedCallback() {
152
+ super.connectedCallback();
153
+ document.addEventListener('language-changed', this.handleLanguageChange.bind(this));
154
+ }
155
+ disconnectedCallback() {
156
+ super.disconnectedCallback();
157
+ document.removeEventListener('language-changed', this.handleLanguageChange.bind(this));
158
+ }
159
+ handleLanguageChange(e) {
160
+ this.language = e.detail.language;
161
+ }
162
+ // language=HTML
163
+ render() {
164
+ return html `
165
+ <div class="elevation card-container" elevation="1">
166
+ <header class="card-title-box with-bottom-line flex-header" ?is-collapsible="${this.isCollapsible}">
167
+ ${this.isCollapsible
168
+ ? html `
169
+ <paper-icon-button
170
+ class="flex-header__collapse"
171
+ @tap="${() => this.toggleCollapse()}"
172
+ icon="${this.collapsed ? 'expand-more' : 'expand-less'}"
173
+ ></paper-icon-button>
174
+ `
175
+ : ''}
176
+ <div class="flex-header__title">${this.cardTitle}</div>
177
+ <div class="flex-header__actions"><slot name="actions"></slot></div>
178
+ <div class="layout horizontal center flex-header__edit">
179
+ ${this.isEditable
180
+ ? html `
181
+ <paper-icon-button
182
+ icon="create"
183
+ ?edit=${this.edit}
184
+ ?hidden="${this.hideEditButton}"
185
+ class="edit-button"
186
+ @tap="${() => this.startEdit()}"
187
+ ></paper-icon-button>
188
+ `
189
+ : ''}
190
+ </div>
191
+ <div class="flex-header__postfix"><slot name="postfix"></slot></div>
192
+ </header>
193
+ <iron-collapse ?opened="${!this.collapsed}">
194
+ <section class="card-content-block">
195
+ <slot name="content"></slot>
196
+
197
+ ${this.isEditable && this.edit
198
+ ? html `
199
+ <div class="layout horizontal end-justified card-buttons">
200
+ <paper-button @tap="${() => this.cancel()}"
201
+ >${getTranslation(this.language, 'CANCEL')}</paper-button
202
+ >
203
+ <paper-button class="save-button" @tap="${() => this.save()}"
204
+ >${getTranslation(this.language, 'SAVE')}</paper-button
205
+ >
206
+ </div>
207
+ `
208
+ : ''}
209
+ </section>
210
+ </iron-collapse>
211
+ </div>
212
+ `;
213
+ }
214
+ };
215
+ __decorate([
216
+ property({ attribute: 'card-title' })
217
+ ], EtoolsFbCard.prototype, "cardTitle", void 0);
218
+ __decorate([
219
+ property({ type: Boolean, attribute: 'is-editable' })
220
+ ], EtoolsFbCard.prototype, "isEditable", void 0);
221
+ __decorate([
222
+ property({ type: Boolean, attribute: 'is-collapsible' })
223
+ ], EtoolsFbCard.prototype, "isCollapsible", void 0);
224
+ __decorate([
225
+ property({ type: Boolean, attribute: 'hide-edit-button' })
226
+ ], EtoolsFbCard.prototype, "hideEditButton", void 0);
227
+ __decorate([
228
+ property({ type: Boolean })
229
+ ], EtoolsFbCard.prototype, "collapsed", void 0);
230
+ __decorate([
231
+ property({ type: Boolean })
232
+ ], EtoolsFbCard.prototype, "edit", void 0);
233
+ __decorate([
234
+ property()
235
+ ], EtoolsFbCard.prototype, "language", void 0);
236
+ EtoolsFbCard = __decorate([
237
+ customElement('etools-fb-card')
238
+ ], EtoolsFbCard);
239
+ export { EtoolsFbCard };
@@ -1,2 +1,2 @@
1
- import { CSSResult } from 'lit-element';
2
- export declare const AttachmentsStyles: CSSResult;
1
+ import { CSSResult } from 'lit-element';
2
+ export declare const AttachmentsStyles: CSSResult;