@rlucan/ui 14.2.4 → 14.2.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.
Files changed (107) hide show
  1. package/esm2022/lib/action-button/action-button.component.mjs +99 -0
  2. package/esm2022/lib/action-icon/action-icon.component.mjs +37 -0
  3. package/esm2022/lib/autocomplete/autocomplete.component.mjs +391 -0
  4. package/esm2022/lib/avatar/avatar.component.mjs +34 -0
  5. package/esm2022/lib/button/button.component.mjs +57 -0
  6. package/esm2022/lib/checkbox/checkbox.component.mjs +39 -0
  7. package/{esm2020 → esm2022}/lib/checkbox-group/checkbox-group.component.mjs +91 -91
  8. package/esm2022/lib/currency/currency.component.mjs +151 -0
  9. package/esm2022/lib/date/date.component.mjs +68 -0
  10. package/{esm2020 → esm2022}/lib/dialog/dialog.component.mjs +37 -37
  11. package/esm2022/lib/directives/force-visibility/force-visibility.directive.mjs +104 -0
  12. package/esm2022/lib/editor/editor.component.mjs +119 -0
  13. package/{esm2020 → esm2022}/lib/elements/burger/burger.component.mjs +21 -21
  14. package/{esm2020 → esm2022}/lib/elements/expander/expander.component.mjs +28 -28
  15. package/{esm2020 → esm2022}/lib/elements/validation-message/validation-message.component.mjs +47 -47
  16. package/esm2022/lib/file/file.component.mjs +145 -0
  17. package/esm2022/lib/file-uploader/ui-file-uploader.component.mjs +405 -0
  18. package/esm2022/lib/input/input.component.mjs +265 -0
  19. package/esm2022/lib/input-autocomplete/input-autocomplete.component.mjs +277 -0
  20. package/esm2022/lib/layouts/base/ui-base-layout.component.mjs +22 -0
  21. package/esm2022/lib/layouts/base/ui-base.component.mjs +74 -0
  22. package/esm2022/lib/layouts/simple/ui-simple-layout.component.mjs +18 -0
  23. package/esm2022/lib/layouts/simple/ui-simple.component.mjs +166 -0
  24. package/{esm2020 → esm2022}/lib/radio/radio.component.mjs +21 -21
  25. package/esm2022/lib/radio-group/radio-group.component.mjs +53 -0
  26. package/esm2022/lib/select/select.component.mjs +115 -0
  27. package/esm2022/lib/services/message-box.service.mjs +149 -0
  28. package/{esm2020 → esm2022}/lib/services/toast.service.mjs +23 -23
  29. package/{esm2020 → esm2022}/lib/services/ui-file.service.mjs +71 -71
  30. package/{esm2020 → esm2022}/lib/services/ui-translate.service.mjs +32 -32
  31. package/{esm2020 → esm2022}/lib/submit-button/submit-button.component.mjs +72 -72
  32. package/esm2022/lib/table/table.component.mjs +97 -0
  33. package/esm2022/lib/text-area/text-area.component.mjs +46 -0
  34. package/{esm2020 → esm2022}/lib/ui.model.mjs +1 -1
  35. package/esm2022/lib/ui.module.mjs +269 -0
  36. package/esm2022/public-api.mjs +35 -0
  37. package/{esm2020 → esm2022}/rlucan-ui.mjs +4 -4
  38. package/fesm2022/rlucan-ui.mjs +3442 -0
  39. package/fesm2022/rlucan-ui.mjs.map +1 -0
  40. package/index.d.ts +5 -5
  41. package/lib/action-button/action-button.component.d.ts +32 -33
  42. package/lib/action-icon/action-icon.component.d.ts +15 -15
  43. package/lib/autocomplete/autocomplete.component.d.ts +57 -57
  44. package/lib/avatar/avatar.component.d.ts +14 -14
  45. package/lib/button/button.component.d.ts +18 -18
  46. package/lib/checkbox/checkbox.component.d.ts +15 -15
  47. package/lib/checkbox-group/checkbox-group.component.d.ts +18 -18
  48. package/lib/currency/currency.component.d.ts +31 -30
  49. package/lib/date/date.component.d.ts +24 -23
  50. package/lib/dialog/dialog.component.d.ts +13 -13
  51. package/lib/directives/force-visibility/force-visibility.directive.d.ts +22 -20
  52. package/lib/editor/editor.component.d.ts +24 -0
  53. package/lib/elements/burger/burger.component.d.ts +9 -9
  54. package/lib/elements/expander/expander.component.d.ts +10 -10
  55. package/lib/elements/validation-message/validation-message.component.d.ts +12 -12
  56. package/lib/file/file.component.d.ts +35 -29
  57. package/lib/file-uploader/ui-file-uploader.component.d.ts +102 -102
  58. package/lib/input/input.component.d.ts +42 -29
  59. package/lib/input-autocomplete/input-autocomplete.component.d.ts +44 -0
  60. package/lib/{base → layouts/base}/ui-base-layout.component.d.ts +8 -8
  61. package/lib/{base → layouts/base}/ui-base.component.d.ts +23 -23
  62. package/lib/{simple → layouts/simple}/ui-simple-layout.component.d.ts +8 -7
  63. package/lib/{simple → layouts/simple}/ui-simple.component.d.ts +40 -39
  64. package/lib/radio/radio.component.d.ts +8 -8
  65. package/lib/radio-group/radio-group.component.d.ts +18 -18
  66. package/lib/select/select.component.d.ts +35 -33
  67. package/lib/services/message-box.service.d.ts +58 -42
  68. package/lib/services/toast.service.d.ts +13 -13
  69. package/lib/services/ui-file.service.d.ts +33 -33
  70. package/lib/services/ui-translate.service.d.ts +11 -11
  71. package/lib/submit-button/submit-button.component.d.ts +21 -21
  72. package/lib/table/table.component.d.ts +36 -36
  73. package/lib/text-area/text-area.component.d.ts +18 -18
  74. package/lib/ui.model.d.ts +2 -2
  75. package/lib/ui.module.d.ts +59 -56
  76. package/package.json +22 -24
  77. package/public-api.d.ts +29 -27
  78. package/scss/ui-defaults.scss +19 -4
  79. package/src/js/editorjs.mjs +9634 -0
  80. package/ui.scss +70 -20
  81. package/esm2020/lib/action-button/action-button.component.mjs +0 -96
  82. package/esm2020/lib/action-icon/action-icon.component.mjs +0 -37
  83. package/esm2020/lib/autocomplete/autocomplete.component.mjs +0 -391
  84. package/esm2020/lib/avatar/avatar.component.mjs +0 -34
  85. package/esm2020/lib/base/ui-base-layout.component.mjs +0 -22
  86. package/esm2020/lib/base/ui-base.component.mjs +0 -74
  87. package/esm2020/lib/button/button.component.mjs +0 -57
  88. package/esm2020/lib/checkbox/checkbox.component.mjs +0 -39
  89. package/esm2020/lib/currency/currency.component.mjs +0 -148
  90. package/esm2020/lib/date/date.component.mjs +0 -64
  91. package/esm2020/lib/directives/force-visibility/force-visibility.directive.mjs +0 -96
  92. package/esm2020/lib/file/file.component.mjs +0 -88
  93. package/esm2020/lib/file-uploader/ui-file-uploader.component.mjs +0 -394
  94. package/esm2020/lib/input/input.component.mjs +0 -258
  95. package/esm2020/lib/radio-group/radio-group.component.mjs +0 -53
  96. package/esm2020/lib/select/select.component.mjs +0 -91
  97. package/esm2020/lib/services/message-box.service.mjs +0 -113
  98. package/esm2020/lib/simple/ui-simple-layout.component.mjs +0 -15
  99. package/esm2020/lib/simple/ui-simple.component.mjs +0 -154
  100. package/esm2020/lib/table/table.component.mjs +0 -97
  101. package/esm2020/lib/text-area/text-area.component.mjs +0 -46
  102. package/esm2020/lib/ui.module.mjs +0 -255
  103. package/esm2020/public-api.mjs +0 -33
  104. package/fesm2015/rlucan-ui.mjs +0 -2918
  105. package/fesm2015/rlucan-ui.mjs.map +0 -1
  106. package/fesm2020/rlucan-ui.mjs +0 -2886
  107. package/fesm2020/rlucan-ui.mjs.map +0 -1
@@ -1,2886 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Component, Input, HostBinding, InjectionToken, Injectable, Inject, EventEmitter, Optional, Host, SkipSelf, ViewChild, Output, Self, Directive, HostListener, NgModule } from '@angular/core';
3
- import * as i2 from '@angular/common';
4
- import { CommonModule } from '@angular/common';
5
- import * as i1 from '@angular/material/icon';
6
- import { MatIconModule } from '@angular/material/icon';
7
- import * as i3 from '@angular/material/progress-bar';
8
- import { MatProgressBarModule } from '@angular/material/progress-bar';
9
- import * as i4 from '@angular/material/core';
10
- import { MatRippleModule, MAT_DATE_LOCALE } from '@angular/material/core';
11
- import * as i1$3 from '@angular/material/dialog';
12
- import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
13
- import { MatButtonModule } from '@angular/material/button';
14
- import * as i3$2 from '@angular/material/checkbox';
15
- import { MatCheckboxModule, MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox';
16
- import * as i3$4 from '@angular/material/datepicker';
17
- import { MatDatepickerModule } from '@angular/material/datepicker';
18
- import * as i3$1 from '@angular/cdk/drag-drop';
19
- import { DragDropModule } from '@angular/cdk/drag-drop';
20
- import * as i1$1 from '@angular/forms';
21
- import { FormControl, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, UntypedFormGroup, UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
22
- import * as i2$1 from '@angular/material/tooltip';
23
- import { MatTooltipModule } from '@angular/material/tooltip';
24
- import * as i3$5 from '@angular/material/table';
25
- import { MatTableModule } from '@angular/material/table';
26
- import * as i4$4 from '@angular/material/sort';
27
- import { MatSort, MatSortModule } from '@angular/material/sort';
28
- import * as i4$1 from '@angular/material/select';
29
- import { MatSelectModule } from '@angular/material/select';
30
- import * as i4$2 from '@angular/material/progress-spinner';
31
- import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
32
- import { MatMenuModule } from '@angular/material/menu';
33
- import * as i8 from 'ngx-image-cropper';
34
- import { ImageCropperModule } from 'ngx-image-cropper';
35
- import { RouterModule } from '@angular/router';
36
- import * as i5 from '@angular/cdk/overlay';
37
- import { OverlayModule } from '@angular/cdk/overlay';
38
- import * as i6 from 'ngx-uploader';
39
- import { NgxUploaderModule } from 'ngx-uploader';
40
- import { MatMomentDateModule, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
41
- import { Subscription, Subject } from 'rxjs';
42
- import * as i1$2 from '@angular/platform-browser';
43
- import * as i3$3 from '@angular/material/input';
44
- import { MatInputModule } from '@angular/material/input';
45
- import * as i4$3 from '@angular/cdk/text-field';
46
- import { debounceTime } from 'rxjs/operators';
47
- import * as i3$6 from '@angular/material/radio';
48
- import { MatRadioModule, MAT_RADIO_DEFAULT_OPTIONS } from '@angular/material/radio';
49
- import * as i1$4 from '@angular/material/snack-bar';
50
- import { MatSnackBarModule } from '@angular/material/snack-bar';
51
-
52
- class ButtonComponent {
53
- constructor() {
54
- this.type = 'button';
55
- this.disabled = false;
56
- this.busy = false;
57
- this.kind = 'flat';
58
- this.color = 'primary';
59
- this.size = 'normal';
60
- this.formInvalid = false;
61
- }
62
- get class() {
63
- return this.kind +
64
- (this.color ? ' ' + this.color : '') +
65
- (this.size ? ' ' + this.size : '') +
66
- ((this.disabled || this.busy) ? ' disabled' : '');
67
- }
68
- get isDisabled() {
69
- return this.disabled || this.busy;
70
- }
71
- }
72
- ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
73
- ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: ButtonComponent, selector: "ui-button", inputs: { type: "type", matIconPrefix: "matIconPrefix", label: "label", disabled: "disabled", busy: "busy", kind: "kind", color: "color", size: "size", formInvalid: "formInvalid" }, host: { properties: { "class": "this.class", "class.formInvalid": "this.formInvalid" } }, ngImport: i0, template: "<button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy}\" [class]=\"class\">\r\n <mat-icon *ngIf=\"matIconPrefix\">{{matIconPrefix}}</mat-icon>\r\n {{label}}\r\n <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n</button>\r\n", styles: [":host{display:flex;align-items:center}:host button{font-size:1em;width:100%;cursor:pointer;outline:none;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid transparent;transition:all .15s ease-in-out}:host button mat-progress-bar{position:absolute;bottom:1px;height:2px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}:host button mat-icon{margin-right:4px;height:16px;width:16px;font-size:16px}:host.small button mat-icon{width:14px;height:14px;font-size:14px;margin-right:2px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] });
74
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ButtonComponent, decorators: [{
75
- type: Component,
76
- args: [{ selector: 'ui-button', template: "<button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy}\" [class]=\"class\">\r\n <mat-icon *ngIf=\"matIconPrefix\">{{matIconPrefix}}</mat-icon>\r\n {{label}}\r\n <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n</button>\r\n", styles: [":host{display:flex;align-items:center}:host button{font-size:1em;width:100%;cursor:pointer;outline:none;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid transparent;transition:all .15s ease-in-out}:host button mat-progress-bar{position:absolute;bottom:1px;height:2px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}:host button mat-icon{margin-right:4px;height:16px;width:16px;font-size:16px}:host.small button mat-icon{width:14px;height:14px;font-size:14px;margin-right:2px}\n"] }]
77
- }], ctorParameters: function () { return []; }, propDecorators: { type: [{
78
- type: Input
79
- }], matIconPrefix: [{
80
- type: Input
81
- }], label: [{
82
- type: Input
83
- }], disabled: [{
84
- type: Input
85
- }], busy: [{
86
- type: Input
87
- }], kind: [{
88
- type: Input
89
- }], color: [{
90
- type: Input
91
- }], size: [{
92
- type: Input
93
- }], class: [{
94
- type: HostBinding,
95
- args: ['class']
96
- }], formInvalid: [{
97
- type: HostBinding,
98
- args: ['class.formInvalid']
99
- }, {
100
- type: Input
101
- }] } });
102
-
103
- class UiBaseComponent {
104
- // get control() {
105
- // return this.controlFormGroup.get('text');
106
- // }
107
- constructor() {
108
- this.placeholder = '';
109
- this.useInputMessages = 'always';
110
- this.inputMessagesPosition = 'relative';
111
- this.size = 'normal';
112
- // control = new FormControl();
113
- // controlFormGroup;
114
- this.required = false;
115
- // this.ngControl.valueAccessor = this;
116
- }
117
- ngOnInit() {
118
- // console.log(this.controlContainer);
119
- // this.controlFormGroup.valueChanges.subscribe(v => {
120
- // this.onChange(v);
121
- // });
122
- // this.ngControl.control.statusChanges.subscribe(v => console.log(v));
123
- //
124
- // this.ngControl.control.markAsTouched = (opts?: {
125
- // onlySelf?: boolean;
126
- // }) => {
127
- // if (!this.control.touched) {
128
- // console.log('marking as touched');
129
- // this.control.markAsTouched(opts);
130
- // }
131
- // this.control.updateValueAndValidity({onlySelf: opts?.onlySelf, emitEvent: false});
132
- // }
133
- // setTimeout(() => {
134
- // this.applyValidators(this.validators);
135
- // });
136
- }
137
- // bindValidators(validators: ValidatorFn[]): void {
138
- // this.control.setValidators(validators);
139
- // }
140
- get validationErrors() {
141
- return null;
142
- }
143
- get validationMessage() {
144
- return 'obsolete...';
145
- }
146
- get isInvalid() {
147
- return false;
148
- }
149
- }
150
- UiBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
151
- UiBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: UiBaseComponent, selector: "ui-abstract-base-component", inputs: { placeholder: "placeholder", label: "label", useInputMessages: "useInputMessages", inputMessagesPosition: "inputMessagesPosition", hint: "hint", size: "size" }, host: { properties: { "class": "this.size" } }, ngImport: i0, template: '** abstract **', isInline: true });
152
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiBaseComponent, decorators: [{
153
- type: Component,
154
- args: [{
155
- selector: 'ui-abstract-base-component',
156
- template: '** abstract **'
157
- }]
158
- }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
159
- type: Input
160
- }], label: [{
161
- type: Input
162
- }], useInputMessages: [{
163
- type: Input
164
- }], inputMessagesPosition: [{
165
- type: Input
166
- }], hint: [{
167
- type: Input
168
- }], size: [{
169
- type: HostBinding,
170
- args: ['class']
171
- }, {
172
- type: Input
173
- }] } });
174
-
175
- class UiSimpleComponent extends UiBaseComponent {
176
- constructor(ngControl, // <-- obsolete
177
- controlContainer = null) {
178
- super();
179
- this.ngControl = ngControl;
180
- this.controlContainer = controlContainer;
181
- this.sub = new Subscription();
182
- this.onChange = (val) => { };
183
- this.onTouched = () => { };
184
- this.onValidatorChange = () => { };
185
- if (ngControl) {
186
- ngControl.valueAccessor = this;
187
- }
188
- else {
189
- this.componentFormControl = new FormControl();
190
- // this.componentFormControl.markAsUntouched();
191
- this.sub.add(this.componentFormControl.valueChanges.subscribe(v => {
192
- try {
193
- // console.log(v, this.componentFormControl.value);
194
- this.onChange(v);
195
- }
196
- catch (e) { /*console.error(e);*/
197
- }
198
- }));
199
- }
200
- // this.ngControl.valueAccessor = this;
201
- }
202
- get maxLenRequired() {
203
- return this.componentFormControl.value && (this.componentFormControl.value.length > (this.validators?.maxLength || 0));
204
- }
205
- get isInvalid() {
206
- // console.log(this.label, this.componentFormControl.touched);
207
- return this.componentFormControl.touched && !!this.componentFormControl.errors;
208
- }
209
- get validationErrors() {
210
- return this.componentFormControl?.errors;
211
- }
212
- ngOnDestroy() {
213
- this.sub.unsubscribe();
214
- }
215
- ngOnInit() {
216
- if (this.ngControl) {
217
- if (this.formControl) {
218
- this.componentFormControl = this.formControl;
219
- }
220
- else {
221
- this.componentFormControl = this.ngControl.control;
222
- }
223
- setTimeout(() => this.applyTemplateValidators());
224
- }
225
- else {
226
- this.parentFormControl = this.formControlName ?
227
- this.controlContainer.control.get(this.formControlName) : this.formControl;
228
- if (this.parentFormControl) {
229
- this.componentFormControl.setValidators(this.parentFormControl.validator);
230
- this.parentFormControl._componentFormControl = this.componentFormControl;
231
- if (this.parentFormControl._markAsTouched === undefined) {
232
- this.parentFormControl._markAsTouched = this.parentFormControl.markAsTouched;
233
- this.parentFormControl._setErrors = this.parentFormControl.setErrors;
234
- this.parentFormControl.markAsTouched = ({ onlySelf } = {}) => {
235
- this.parentFormControl._markAsTouched({ onlySelf });
236
- this.parentFormControl._componentFormControl.markAsTouched({ onlySelf });
237
- };
238
- this.parentFormControl.setErrors = (errors) => {
239
- this.parentFormControl._setErrors(errors);
240
- this.parentFormControl._componentFormControl.setErrors(errors);
241
- };
242
- }
243
- setTimeout(() => this.applyTemplateValidators());
244
- }
245
- }
246
- }
247
- applyTemplateValidators() {
248
- const inputValidators = this.validators;
249
- if (inputValidators) {
250
- const validators = [];
251
- Object.keys(inputValidators).forEach(v => {
252
- switch (v) {
253
- case 'required':
254
- validators.push(Validators.required);
255
- this.required = true;
256
- break;
257
- case 'maxLength':
258
- validators.push(Validators.maxLength(inputValidators.maxLength || 0));
259
- break;
260
- }
261
- });
262
- if (this.parentFormControl) {
263
- this.parentFormControl.setValidators(validators);
264
- this.parentFormControl.updateValueAndValidity({ emitEvent: false });
265
- this.componentFormControl.setValidators(this.parentFormControl.validator);
266
- }
267
- else {
268
- this.componentFormControl.addValidators(validators);
269
- this.componentFormControl.updateValueAndValidity();
270
- }
271
- }
272
- }
273
- ngOnChanges(changes) {
274
- if (changes.validators && this.componentFormControl) {
275
- this.applyTemplateValidators(); // changes.validators.currentValue as UiValidators);
276
- }
277
- }
278
- registerOnChange(fn) {
279
- this.onChange = fn;
280
- }
281
- registerOnTouched(fn) {
282
- this.onTouched = fn;
283
- }
284
- setDisabledState(isDisabled) {
285
- if (this.componentFormControl) {
286
- isDisabled ? this.componentFormControl.disable({ emitEvent: false }) : this.componentFormControl.enable({ emitEvent: false });
287
- }
288
- }
289
- writeValue(obj) {
290
- if (!this.ngControl) {
291
- if (obj && obj.error) {
292
- console.log('setting error', obj, obj.error);
293
- this.componentFormControl.setErrors(obj.error === 'clear' ? null : { custom: obj.error }, { emitEvent: false });
294
- }
295
- else {
296
- this.componentFormControl.setValue(obj);
297
- }
298
- }
299
- }
300
- registerOnValidatorChange(fn) {
301
- this.onValidatorChange = fn;
302
- }
303
- validate(control) {
304
- return null;
305
- }
306
- }
307
- UiSimpleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiSimpleComponent, deps: [{ token: i1$1.NgControl }, { token: i1$1.ControlContainer }], target: i0.ɵɵFactoryTarget.Component });
308
- UiSimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: UiSimpleComponent, selector: "ui-abstract-simple-component", inputs: { validators: "validators", formControl: "formControl", formControlName: "formControlName" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '** abstract **', isInline: true });
309
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiSimpleComponent, decorators: [{
310
- type: Component,
311
- args: [{
312
- selector: 'ui-abstract-simple-component',
313
- template: '** abstract **'
314
- }]
315
- }], ctorParameters: function () { return [{ type: i1$1.NgControl }, { type: i1$1.ControlContainer }]; }, propDecorators: { validators: [{
316
- type: Input
317
- }], formControl: [{
318
- type: Input
319
- }], formControlName: [{
320
- type: Input
321
- }] } });
322
-
323
- const UI_TRANSLATESERVICE = new InjectionToken('IUiTranslateService');
324
- class UiTranslateService {
325
- instant(code, data) {
326
- switch (code) {
327
- case 'ui.controls.ui-file-uploader.menu.change': return 'Změnit';
328
- case 'ui.controls.ui-file-uploader.menu.delete': return 'Smazat';
329
- case 'ui.controls.ui-file-uploader.uploadError': return 'Chyba při ukládání souboru';
330
- case 'ui.controls.validation.required': return 'Povinná položka';
331
- case 'ui.controls.validation.email': return 'Neplatný email';
332
- case 'ui.controls.validation.matDatepickerParse': return 'Neplatné datum';
333
- case 'ui.controls.validation.maxlength': return 'Zadej maximálně ' + data.requiredLength + ' znaků';
334
- case 'ui.controls.validation.minlength': return 'Zadej minimálně ' + data.requiredLength + ' znaků';
335
- case 'ui.controls.validation.invalidNumber': return 'Neplatné číslo';
336
- case 'ui.controls.validation.positive': return 'Musí být větší než 0';
337
- case 'ui.controls.validation.cbGroupRequired': return 'Zaškrtni alespoň jednu položku';
338
- case 'ui.controls.ui-select.clear-selection': return 'Zrušit výběr';
339
- case 'ui.controls.ui-select.all': return 'Vše';
340
- case 'ui.controls.ui-select.apply-selection': return 'Použít výběr';
341
- case 'ui.messagebox.button.cancel': return 'Zrušit';
342
- case 'ui.messagebox.button.delete': return 'Smazat';
343
- default: return code;
344
- }
345
- }
346
- }
347
- UiTranslateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
348
- UiTranslateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiTranslateService });
349
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiTranslateService, decorators: [{
350
- type: Injectable
351
- }] });
352
-
353
- class ValidationMessageComponent {
354
- constructor(translateService) {
355
- this.translateService = translateService;
356
- }
357
- ngOnInit() {
358
- }
359
- get errorMessage() {
360
- let e = { code: 'Neznámá chyba' };
361
- const errors = this.validationErrors;
362
- if (errors) {
363
- Object.keys(errors).find(a => {
364
- e = { code: a, data: errors[a] };
365
- return true;
366
- });
367
- switch (e.code) {
368
- case 'required':
369
- case 'cbGroupRequired':
370
- case 'email':
371
- case 'matDatepickerParse':
372
- case 'maxlength':
373
- case 'minlength':
374
- return this.translateService.instant('ui.controls.validation.' + e.code, e.data);
375
- case 'positive':
376
- return this.translateService.instant(isNaN(Number(e.data)) ? 'ui.controls.validation.invalidNumber' : 'ui.controls.validation.positive');
377
- case 'custom':
378
- return this.translateService.instant(e.data);
379
- default:
380
- return this.translateService.instant(e.code);
381
- }
382
- }
383
- }
384
- }
385
- ValidationMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ValidationMessageComponent, deps: [{ token: UI_TRANSLATESERVICE }], target: i0.ɵɵFactoryTarget.Component });
386
- ValidationMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: ValidationMessageComponent, selector: "ui-validation-message", inputs: { validationErrors: "validationErrors" }, ngImport: i0, template: "{{ errorMessage }}\r\n" });
387
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ValidationMessageComponent, decorators: [{
388
- type: Component,
389
- args: [{ selector: 'ui-validation-message', template: "{{ errorMessage }}\r\n" }]
390
- }], ctorParameters: function () { return [{ type: undefined, decorators: [{
391
- type: Inject,
392
- args: [UI_TRANSLATESERVICE]
393
- }] }]; }, propDecorators: { validationErrors: [{
394
- type: Input
395
- }] } });
396
-
397
- class UiBaseLayoutComponent {
398
- get class() {
399
- return `${this.ctx.isInvalid ? 'invalid ' : ''} ${this.ctx.inputMessagesPosition}`;
400
- }
401
- }
402
- UiBaseLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiBaseLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
403
- UiBaseLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: UiBaseLayoutComponent, selector: "ui-base-layout", inputs: { ctx: "ctx" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"label\" *ngIf=\"ctx.label\">\r\n <div class=\"text-container\" [matTooltip]=\"false && ctx.required ? 'Povinn\u00E1 polo\u017Eka' : undefined\" [matTooltipPosition]=\"'above'\">\r\n <div class=\"text\" >{{ctx.label}}</div>\r\n <div *ngIf=\"false && ctx.required\" class=\"required\">*</div>\r\n </div>\r\n <ng-content select=\".counter-top\"></ng-content>\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"hint-container\" *ngIf=\"ctx.useInputMessages === 'always' || (ctx.useInputMessages === 'ondemand' && (ctx.isInvalid || ctx.hint))\">\r\n <ui-validation-message class=\"invalid\" *ngIf=\"ctx.isInvalid\" [validationErrors]=\"ctx.validationErrors\"></ui-validation-message>\r\n <div class=\"hint\" *ngIf=\"!ctx.isInvalid && ctx.hint\" [innerHTML]=\"ctx.hint\"></div>\r\n <ng-container *ngIf=\"!ctx.label\">\r\n <ng-content select=\".counter-bottom\"></ng-content>\r\n </ng-container>\r\n</div>\r\n", styles: [":host{width:100%;display:flex;flex-direction:column}:host .label{display:flex;align-items:center}:host .label .text-container{display:flex;align-items:center}:host .label .text-container .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .label .text-container .required{align-self:baseline;padding:0 4px;font-size:1.2em}:host ::ng-deep .counter{margin-left:auto;padding-right:.4em}:host ::ng-deep .counter.counter-top{font-size:.8em}:host.absolute{position:relative}:host.absolute .hint-container{position:absolute;bottom:-1.6em}:host .hint-container{display:flex;height:1.6em;text-align:left;font-size:.8em;margin-top:.1em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "ui-validation-message", inputs: ["validationErrors"] }] });
404
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiBaseLayoutComponent, decorators: [{
405
- type: Component,
406
- args: [{ selector: 'ui-base-layout', template: "<div class=\"label\" *ngIf=\"ctx.label\">\r\n <div class=\"text-container\" [matTooltip]=\"false && ctx.required ? 'Povinn\u00E1 polo\u017Eka' : undefined\" [matTooltipPosition]=\"'above'\">\r\n <div class=\"text\" >{{ctx.label}}</div>\r\n <div *ngIf=\"false && ctx.required\" class=\"required\">*</div>\r\n </div>\r\n <ng-content select=\".counter-top\"></ng-content>\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"hint-container\" *ngIf=\"ctx.useInputMessages === 'always' || (ctx.useInputMessages === 'ondemand' && (ctx.isInvalid || ctx.hint))\">\r\n <ui-validation-message class=\"invalid\" *ngIf=\"ctx.isInvalid\" [validationErrors]=\"ctx.validationErrors\"></ui-validation-message>\r\n <div class=\"hint\" *ngIf=\"!ctx.isInvalid && ctx.hint\" [innerHTML]=\"ctx.hint\"></div>\r\n <ng-container *ngIf=\"!ctx.label\">\r\n <ng-content select=\".counter-bottom\"></ng-content>\r\n </ng-container>\r\n</div>\r\n", styles: [":host{width:100%;display:flex;flex-direction:column}:host .label{display:flex;align-items:center}:host .label .text-container{display:flex;align-items:center}:host .label .text-container .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .label .text-container .required{align-self:baseline;padding:0 4px;font-size:1.2em}:host ::ng-deep .counter{margin-left:auto;padding-right:.4em}:host ::ng-deep .counter.counter-top{font-size:.8em}:host.absolute{position:relative}:host.absolute .hint-container{position:absolute;bottom:-1.6em}:host .hint-container{display:flex;height:1.6em;text-align:left;font-size:.8em;margin-top:.1em}\n"] }]
407
- }], propDecorators: { ctx: [{
408
- type: Input
409
- }], class: [{
410
- type: HostBinding,
411
- args: ['class']
412
- }] } });
413
-
414
- class UiSimpleLayoutComponent {
415
- }
416
- UiSimpleLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiSimpleLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
417
- UiSimpleLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: { ctx: "ctx" }, ngImport: i0, template: "<ui-base-layout [ctx]=\"ctx\">\r\n\r\n <div *ngIf=\"ctx.validators?.maxLength\" class=\"counter counter-top\">\r\n {{ ctx.componentFormControl.value ? ctx.componentFormControl.value.length : 0 }} / {{ ctx.validators?.maxLength }}\r\n </div>\r\n\r\n <div *ngIf=\"ctx.validators?.maxLength\" class=\"counter counter-bottom\">\r\n {{ ctx.componentFormControl.value ? ctx.componentFormControl.value.length : 0 }} / {{ ctx.validators?.maxLength }}\r\n </div>\r\n\r\n <ng-content></ng-content>\r\n\r\n</ui-base-layout>\r\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UiBaseLayoutComponent, selector: "ui-base-layout", inputs: ["ctx"] }] });
418
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiSimpleLayoutComponent, decorators: [{
419
- type: Component,
420
- args: [{ selector: 'ui-simple-layout', template: "<ui-base-layout [ctx]=\"ctx\">\r\n\r\n <div *ngIf=\"ctx.validators?.maxLength\" class=\"counter counter-top\">\r\n {{ ctx.componentFormControl.value ? ctx.componentFormControl.value.length : 0 }} / {{ ctx.validators?.maxLength }}\r\n </div>\r\n\r\n <div *ngIf=\"ctx.validators?.maxLength\" class=\"counter counter-bottom\">\r\n {{ ctx.componentFormControl.value ? ctx.componentFormControl.value.length : 0 }} / {{ ctx.validators?.maxLength }}\r\n </div>\r\n\r\n <ng-content></ng-content>\r\n\r\n</ui-base-layout>\r\n" }]
421
- }], propDecorators: { ctx: [{
422
- type: Input
423
- }] } });
424
-
425
- class InputComponent extends UiSimpleComponent {
426
- constructor(controlContainer) {
427
- super(null, controlContainer);
428
- this.controlContainer = controlContainer;
429
- // UiSimpleComponent = InputComponent;
430
- // @Input() placeholder = '';
431
- // @Input() label: string | undefined;
432
- // @Input() useInputMessages: 'never' | 'always' | 'ondemand' = 'always';
433
- // @Input() hint: string | undefined;
434
- // @Input() validators: UiValidators | undefined;
435
- // @Input() size: 'small' | 'smaller' | 'normal' | 'larger' | 'large' = 'normal';
436
- // @Input() formControlName;
437
- // componentFormControl: UntypedFormControl;
438
- //
439
- // ngControl: NgControl;
440
- //
441
- // @Input() validators: UiValidators | undefined;
442
- // @Input() formControlName;
443
- //
444
- // @Input() placeholder = '';
445
- // @Input() label: string | undefined;
446
- // @Input() useInputMessages: 'never' | 'always' | 'ondemand' = 'always';
447
- // @Input() hint?: string;
448
- // @Input() size: 'small' | 'smaller' | 'normal' | 'larger' | 'large' = 'normal';
449
- this.prefix = '';
450
- this.suffix = '';
451
- this.type = 'text';
452
- this.clearButton = false;
453
- this.disableUserInput = false;
454
- // @HostBinding('class.centered')
455
- this.centered = false;
456
- this.focusChanged = new EventEmitter();
457
- this.keyPressed = new EventEmitter();
458
- // control = new FormControl();
459
- this.required = false;
460
- // this.componentFormControl = new FormControl();
461
- // super();
462
- // super(undefined, /*ngControl*/ translateService);
463
- // super(control);
464
- // console.log(control);
465
- // if (control) {
466
- // control.valueAccessor = this;
467
- // }
468
- // if (ngControl != null) {
469
- // // Setting the value accessor directly (instead of using
470
- // // the providers) to avoid running into a circular import.
471
- // ngControl.valueAccessor = this;
472
- // }
473
- }
474
- // control;
475
- // onTouched = () => {};
476
- // onChange = (value) => {};
477
- // get showInvalid(): boolean {
478
- // return true;
479
- // // return this.control.touched && !!this.control.errors;
480
- // }
481
- // get validationMessage(): string {
482
- // // console.log(this.control?.errors);
483
- // let e: any = {code: 'Neznámá chyba'};
484
- // const errors = this.control?.errors || {};
485
- // Object.keys(errors).find(a => {
486
- // e = {code: a, data: errors[a]};
487
- // return true;
488
- // });
489
- // switch (e.code) {
490
- // case 'required':
491
- // return this.translateService.instant('ui.controls.validation.required');
492
- // case 'email':
493
- // return this.translateService.instant('ui.controls.validation.email');
494
- // case 'matDatepickerParse':
495
- // return this.translateService.instant('ui.controls.validation.matDatepickerParse');
496
- // case 'maxlength':
497
- // return this.translateService.instant('ui.controls.validation.maxlength', e.data);
498
- // case 'minlength':
499
- // return this.translateService.instant('ui.controls.validation.minlength', e.data);
500
- // case 'positive':
501
- // return this.translateService.instant(isNaN(Number(e.data)) ? 'ui.controls.validation.invalidNumber' : 'ui.controls.validation.positive');
502
- // case 'custom':
503
- // return this.translateService.instant(e.data);
504
- // default:
505
- // return this.translateService.instant(e.code);
506
- // }
507
- // }
508
- get maxLenRequired() {
509
- return true;
510
- // return this.control.value && (this.control.value.length > (this.validators?.maxLength || 0));
511
- }
512
- get showClearButton() {
513
- return false;
514
- // return this.clearButton && this.control?.value !== '';
515
- }
516
- ngOnInit() {
517
- super.ngOnInit();
518
- // console.log('probiha vubec oninit?');
519
- // if (this.ngControl) {
520
- // console.log('from ngControl....??');
521
- // if (this.formControl) {
522
- // this.componentFormControl = this.formControl;
523
- // } else {
524
- // this.componentFormControl = this.ngControl.control as UntypedFormControl;
525
- // }
526
- // setTimeout(() => {
527
- // this.applyValidators();
528
- // });
529
- // } else {
530
- // const control = this.formControlName ?
531
- // (this.controlContainer as FormGroupDirective).control.get(this.formControlName) : this.formControl;
532
- // this.componentFormControl.setValidators(control.validator);
533
- // this.componentFormControl.valueChanges.subscribe(v => console.log('onitin sub', v));
534
- // control._componentFormControl = this.componentFormControl;
535
- // if (control._markAsTouched === undefined) {
536
- // // control._componentFormControl = this.componentFormControl;
537
- // console.log('overriding markAsTouched for', this.formControlName);
538
- // control._markAsTouched = control.markAsTouched;
539
- // control.markAsTouched = ({onlySelf}: { onlySelf?: boolean } = {}): void => {
540
- // console.log('marking as touched', this.componentFormControl.value, control.value, this.xxx.value, control._componentFormControl.value);
541
- // control._markAsTouched({onlySelf});
542
- // setTimeout(() => control._componentFormControl.markAsTouched(), 1000);
543
- // }
544
- // }
545
- // }
546
- }
547
- clearValue() {
548
- // this.control?.setValue('');
549
- this.input?.nativeElement.focus();
550
- }
551
- focus() {
552
- this.input?.nativeElement.focus();
553
- }
554
- onFocus(focus) {
555
- this.focusChanged.emit(focus);
556
- }
557
- onKeypressed($event) {
558
- this.keyPressed.emit($event);
559
- }
560
- // registerOnChange(onChange: any): void {
561
- // this.onChange = onChange;
562
- // }
563
- //
564
- // registerOnTouched(onTouched: any): void {
565
- // this.onTouched = onTouched;
566
- // }
567
- // registerOnValidatorChange(fn: () => void): void {
568
- // }
569
- // setDisabledState(isDisabled: boolean): void {
570
- // // isDisabled ? this.control.disable() : this.control.enable();
571
- // }
572
- // validate(control: AbstractControl): ValidationErrors | null {
573
- // // this.control = control;
574
- // // console.log(control, control.value, control.errors);
575
- // if (this.value === 'error') {
576
- // return { customError: 'muj error'}
577
- // } else {
578
- // return null;
579
- // }
580
- // // console.log('custom validate');
581
- // // return null;
582
- // }
583
- //
584
- // writeValue(obj: any): void {
585
- // console.log('writevalue: ', obj);
586
- // this.componentFormControl.setValue(obj);
587
- // // this.value = obj;
588
- // // this.control.setValue(obj);
589
- // }
590
- //
591
- // registerOnChange(fn: any): void {
592
- // }
593
- //
594
- // registerOnTouched(fn: any): void {
595
- // }
596
- //
597
- // setDisabledState(isDisabled: boolean): void {
598
- // }
599
- // modelChange($event: any) {
600
- // console.log($event);
601
- // this.onTouched();
602
- // this.onChange($event)
603
- // }
604
- // validate(control: AbstractControl): ValidationErrors | null {
605
- // console.log(this.label, 'validate');
606
- // return this.componentFormControl.errors;
607
- // // return undefined;
608
- // }
609
- validate(control) {
610
- if (this.parentFormControl) {
611
- return this.parentFormControl._componentFormControl.errors;
612
- }
613
- // console.log('validate', this.componentFormControl.errors);
614
- // // this.componentFormControl.setErrors( { custom: 'xxx' });
615
- // this.componentFormControl.setErrors( this.componentFormControl.errors);
616
- // console.log('validate 2', this.componentFormControl.errors);
617
- // return this.componentFormControl.errors;
618
- // console.log(this.componentFormControl.errors, control.errors, this.parentFormControl.errors, this);
619
- // return this.componentFormControl.errors;
620
- }
621
- }
622
- InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: InputComponent, deps: [{ token: i1$1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
623
- InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: InputComponent, selector: "ui-input", inputs: { prefix: "prefix", suffix: "suffix", type: "type", clearButton: "clearButton", disableUserInput: "disableUserInput", centered: "centered" }, outputs: { focusChanged: "focusChanged", keyPressed: "keyPressed" }, providers: [
624
- {
625
- provide: NG_VALUE_ACCESSOR,
626
- multi: true,
627
- useExisting: InputComponent
628
- },
629
- {
630
- provide: NG_VALIDATORS,
631
- multi: true,
632
- useExisting: InputComponent
633
- }
634
- ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\">\r\n <input #input [ngClass]=\"{centered: centered}\" [type]=\"type\" [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" (keydown)=\"onKeypressed($event)\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\" />\r\n <ng-content select=\"[slot=prefix]\"></ng-content>\r\n <ng-content select=\"[slot=suffix]\"></ng-content>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{width:100%}:host .control-container{width:100%;position:relative}:host ::ng-deep [slot=suffix]{position:absolute;cursor:pointer;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]{position:absolute;cursor:pointer;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep input.has-suffix,:host ::ng-deep textarea.has-suffix,:host ::ng-deep ::ng-deep .mat-select-trigger.has-suffix,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger.has-suffix{padding-right:1.8em}:host ::ng-deep input.centered,:host ::ng-deep textarea.centered,:host ::ng-deep ::ng-deep .mat-select-trigger.centered,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger.centered{text-align:center}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] });
635
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: InputComponent, decorators: [{
636
- type: Component,
637
- args: [{ selector: 'ui-input', providers: [
638
- {
639
- provide: NG_VALUE_ACCESSOR,
640
- multi: true,
641
- useExisting: InputComponent
642
- },
643
- {
644
- provide: NG_VALIDATORS,
645
- multi: true,
646
- useExisting: InputComponent
647
- }
648
- ], template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\">\r\n <input #input [ngClass]=\"{centered: centered}\" [type]=\"type\" [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" (keydown)=\"onKeypressed($event)\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\" />\r\n <ng-content select=\"[slot=prefix]\"></ng-content>\r\n <ng-content select=\"[slot=suffix]\"></ng-content>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{width:100%}:host .control-container{width:100%;position:relative}:host ::ng-deep [slot=suffix]{position:absolute;cursor:pointer;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]{position:absolute;cursor:pointer;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep input.has-suffix,:host ::ng-deep textarea.has-suffix,:host ::ng-deep ::ng-deep .mat-select-trigger.has-suffix,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger.has-suffix{padding-right:1.8em}:host ::ng-deep input.centered,:host ::ng-deep textarea.centered,:host ::ng-deep ::ng-deep .mat-select-trigger.centered,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger.centered{text-align:center}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n"] }]
649
- }], ctorParameters: function () { return [{ type: i1$1.ControlContainer, decorators: [{
650
- type: Optional
651
- }, {
652
- type: Host
653
- }, {
654
- type: SkipSelf
655
- }] }]; }, propDecorators: { prefix: [{
656
- type: Input
657
- }], suffix: [{
658
- type: Input
659
- }], type: [{
660
- type: Input
661
- }], clearButton: [{
662
- type: Input
663
- }], disableUserInput: [{
664
- type: Input
665
- }], centered: [{
666
- type: Input
667
- }], input: [{
668
- type: ViewChild,
669
- args: ['input']
670
- }], focusChanged: [{
671
- type: Output
672
- }], keyPressed: [{
673
- type: Output
674
- }] } });
675
-
676
- class SelectComponent extends UiSimpleComponent {
677
- constructor(ngControl, translateService) {
678
- super(ngControl);
679
- this.ngControl = ngControl;
680
- this.translateService = translateService;
681
- this.multiple = false;
682
- this.options = [];
683
- this.allowEmptySelection = false;
684
- this.lastCount = -1;
685
- this.overoption = false;
686
- this.optionToValue = (o) => this.valueAttribute ? o[this.valueAttribute] : o;
687
- }
688
- ngOnInit() {
689
- super.ngOnInit();
690
- if (this.optionFormatter === undefined) {
691
- this.optionFormatter = o => this.displayAttribute ? o[this.displayAttribute] : o;
692
- }
693
- if (this.multiple && this.componentFormControl) {
694
- this.lastCount = this.componentFormControl.value.length;
695
- this.componentFormControl.valueChanges.subscribe(v => {
696
- if (v.length === 1 && this.lastCount === 0 && this.overoption) {
697
- this.select.selectionChange.emit(this.optionToValue(v));
698
- this.select.close();
699
- }
700
- this.lastCount = v.length;
701
- });
702
- }
703
- }
704
- selectOption(o, select) {
705
- select.selectionChange.emit(this.optionToValue(o));
706
- select.close();
707
- }
708
- selectAll() {
709
- this.componentFormControl.setValue(this.options.map(o => this.optionToValue(o)));
710
- }
711
- clearAll() {
712
- this.componentFormControl.setValue([]);
713
- }
714
- setDisabledState(isDisabled) {
715
- }
716
- }
717
- SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: SelectComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: UI_TRANSLATESERVICE }], target: i0.ɵɵFactoryTarget.Component });
718
- SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: SelectComponent, selector: "ui-select", inputs: { multiple: "multiple", triggerFormatter: "triggerFormatter", valueAttribute: "valueAttribute", resetText: "resetText", displayAttribute: "displayAttribute", options: "options", optionFormatter: "optionFormatter", optionTemplateRef: "optionTemplateRef", triggerTemplateRef: "triggerTemplateRef", panelClass: "panelClass", allowEmptySelection: "allowEmptySelection" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<mat-select class=\"control-container\" #select [panelClass]=\"panelClass\" [placeholder]=\"placeholder\" [formControl]=\"componentFormControl\" [multiple]=\"multiple\">\r\n\r\n <mat-select-trigger *ngIf=\"triggerTemplateRef\">\r\n <ng-template [ngTemplateOutlet]=\"triggerTemplateRef\" [ngTemplateOutletContext]=\"{option:componentFormControl?.value}\" ></ng-template>\r\n </mat-select-trigger>\r\n\r\n <mat-select-trigger *ngIf=\"triggerFormatter\">{{componentFormControl?.value ? triggerFormatter(componentFormControl?.value) : ''}}</mat-select-trigger>\r\n\r\n <mat-option *ngIf=\"resetText\">{{resetText}}</mat-option>\r\n\r\n <mat-option *ngFor=\"let o of options\" [value]=\"optionToValue(o)\" >\r\n\r\n <div class=\"option-container\" (mouseenter)=\"overoption = true;\" (mouseleave)=\"overoption = false\">\r\n\r\n <ng-container *ngIf=\"optionTemplateRef\">\r\n <ng-template [ngTemplateOutlet]=\"optionTemplateRef\" [ngTemplateOutletContext]=\"{option:o}\" ></ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!optionTemplateRef\">\r\n {{optionFormatter(o)}}\r\n </ng-container>\r\n\r\n <mat-icon class=\"select-one\" *ngIf=\"multiple && componentFormControl?.value?.length === 0\" (click)=\"selectOption(o, select)\">north_west</mat-icon>\r\n </div>\r\n\r\n </mat-option>\r\n\r\n <div class=\"buttons\" *ngIf=\"multiple\">\r\n <ui-button style=\"margin-right: auto;\" [kind]=\"'basic'\" [size]=\"'smaller'\" [label]=\"translateService.instant('ui.controls.ui-select.clear-selection')\" (click)=\"clearAll()\"></ui-button>\r\n <ui-button [size]=\"'smaller'\" [label]=\"translateService.instant('ui.controls.ui-select.all')\" (click)=\"selectAll()\"></ui-button>\r\n <ui-button [size]=\"'smaller'\" style=\"padding-left: 0.2em;\" [disabled]=\"componentFormControl?.value?.length === 0 && !allowEmptySelection\" [label]=\"translateService.instant('ui.controls.ui-select.apply-selection') + (componentFormControl?.value?.length > 0 ? ' (' + componentFormControl.value.length + ')' : '')\" (click)=\"select.close()\"></ui-button>\r\n </div>\r\n\r\n</mat-select>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{width:100%}:host .control-container{width:100%;position:relative}:host ::ng-deep [slot=suffix]{position:absolute;cursor:pointer;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]{position:absolute;cursor:pointer;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep input.has-suffix,:host ::ng-deep textarea.has-suffix,:host ::ng-deep ::ng-deep .mat-select-trigger.has-suffix,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger.has-suffix{padding-right:1.8em}:host ::ng-deep input.centered,:host ::ng-deep textarea.centered,:host ::ng-deep ::ng-deep .mat-select-trigger.centered,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger.centered{text-align:center}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", "::ng-deep .mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-select-arrow-wrapper{height:1px!important}::ng-deep .mat-select-panel .select-one,::ng-deep .mat-mdc-select-panel .select-one{position:absolute;right:0;top:.3em;display:none}::ng-deep .mat-select-panel .mat-option-text:hover .select-one,::ng-deep .mat-select-panel .mat-mdc-option:hover .select-one,::ng-deep .mat-mdc-select-panel .mat-option-text:hover .select-one,::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover .select-one{display:block}::ng-deep .mat-select-panel .buttons,::ng-deep .mat-mdc-select-panel .buttons{padding:.2em;background-color:#fff;display:flex;position:sticky;bottom:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["type", "matIconPrefix", "label", "disabled", "busy", "kind", "color", "size", "formInvalid"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] });
719
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: SelectComponent, decorators: [{
720
- type: Component,
721
- args: [{ selector: 'ui-select', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<mat-select class=\"control-container\" #select [panelClass]=\"panelClass\" [placeholder]=\"placeholder\" [formControl]=\"componentFormControl\" [multiple]=\"multiple\">\r\n\r\n <mat-select-trigger *ngIf=\"triggerTemplateRef\">\r\n <ng-template [ngTemplateOutlet]=\"triggerTemplateRef\" [ngTemplateOutletContext]=\"{option:componentFormControl?.value}\" ></ng-template>\r\n </mat-select-trigger>\r\n\r\n <mat-select-trigger *ngIf=\"triggerFormatter\">{{componentFormControl?.value ? triggerFormatter(componentFormControl?.value) : ''}}</mat-select-trigger>\r\n\r\n <mat-option *ngIf=\"resetText\">{{resetText}}</mat-option>\r\n\r\n <mat-option *ngFor=\"let o of options\" [value]=\"optionToValue(o)\" >\r\n\r\n <div class=\"option-container\" (mouseenter)=\"overoption = true;\" (mouseleave)=\"overoption = false\">\r\n\r\n <ng-container *ngIf=\"optionTemplateRef\">\r\n <ng-template [ngTemplateOutlet]=\"optionTemplateRef\" [ngTemplateOutletContext]=\"{option:o}\" ></ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!optionTemplateRef\">\r\n {{optionFormatter(o)}}\r\n </ng-container>\r\n\r\n <mat-icon class=\"select-one\" *ngIf=\"multiple && componentFormControl?.value?.length === 0\" (click)=\"selectOption(o, select)\">north_west</mat-icon>\r\n </div>\r\n\r\n </mat-option>\r\n\r\n <div class=\"buttons\" *ngIf=\"multiple\">\r\n <ui-button style=\"margin-right: auto;\" [kind]=\"'basic'\" [size]=\"'smaller'\" [label]=\"translateService.instant('ui.controls.ui-select.clear-selection')\" (click)=\"clearAll()\"></ui-button>\r\n <ui-button [size]=\"'smaller'\" [label]=\"translateService.instant('ui.controls.ui-select.all')\" (click)=\"selectAll()\"></ui-button>\r\n <ui-button [size]=\"'smaller'\" style=\"padding-left: 0.2em;\" [disabled]=\"componentFormControl?.value?.length === 0 && !allowEmptySelection\" [label]=\"translateService.instant('ui.controls.ui-select.apply-selection') + (componentFormControl?.value?.length > 0 ? ' (' + componentFormControl.value.length + ')' : '')\" (click)=\"select.close()\"></ui-button>\r\n </div>\r\n\r\n</mat-select>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{width:100%}:host .control-container{width:100%;position:relative}:host ::ng-deep [slot=suffix]{position:absolute;cursor:pointer;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]{position:absolute;cursor:pointer;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep input.has-suffix,:host ::ng-deep textarea.has-suffix,:host ::ng-deep ::ng-deep .mat-select-trigger.has-suffix,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger.has-suffix{padding-right:1.8em}:host ::ng-deep input.centered,:host ::ng-deep textarea.centered,:host ::ng-deep ::ng-deep .mat-select-trigger.centered,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger.centered{text-align:center}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", "::ng-deep .mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-select-arrow-wrapper{height:1px!important}::ng-deep .mat-select-panel .select-one,::ng-deep .mat-mdc-select-panel .select-one{position:absolute;right:0;top:.3em;display:none}::ng-deep .mat-select-panel .mat-option-text:hover .select-one,::ng-deep .mat-select-panel .mat-mdc-option:hover .select-one,::ng-deep .mat-mdc-select-panel .mat-option-text:hover .select-one,::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover .select-one{display:block}::ng-deep .mat-select-panel .buttons,::ng-deep .mat-mdc-select-panel .buttons{padding:.2em;background-color:#fff;display:flex;position:sticky;bottom:0}\n"] }]
722
- }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
723
- type: Optional
724
- }, {
725
- type: Self
726
- }] }, { type: undefined, decorators: [{
727
- type: Inject,
728
- args: [UI_TRANSLATESERVICE]
729
- }] }]; }, propDecorators: { multiple: [{
730
- type: Input
731
- }], triggerFormatter: [{
732
- type: Input
733
- }], valueAttribute: [{
734
- type: Input
735
- }], resetText: [{
736
- type: Input
737
- }], displayAttribute: [{
738
- type: Input
739
- }], options: [{
740
- type: Input
741
- }], optionFormatter: [{
742
- type: Input
743
- }], optionTemplateRef: [{
744
- type: Input
745
- }], triggerTemplateRef: [{
746
- type: Input
747
- }], panelClass: [{
748
- type: Input
749
- }], allowEmptySelection: [{
750
- type: Input
751
- }], select: [{
752
- type: ViewChild,
753
- args: ['select']
754
- }] } });
755
-
756
- const UI_FILESERVICE = new InjectionToken('IUiFileService');
757
- // export const FileServiceConfigService = new InjectionToken<FileServiceConfig>('FileServiceConfig');
758
- class UiFileService {
759
- constructor(fileServiceConfig) {
760
- this.fileServiceConfig = fileServiceConfig;
761
- this.uploadInput = new EventEmitter();
762
- this.uploadSubscription = new Subject();
763
- this.filesToRemove = [];
764
- this.controls = new Set();
765
- this.uploadSubscription.subscribe((v) => {
766
- switch (v.action) {
767
- case 'register':
768
- this.controls.add(v.data);
769
- return;
770
- case 'destroy':
771
- this.controls.delete(v.data);
772
- return;
773
- case 'uploadStarted':
774
- let cnt = 0;
775
- this.controls.forEach(c => cnt += c.hasFilesToUpload ? 1 : 0);
776
- if (cnt === 0) {
777
- this.uploadSubscription.next({ action: 'uploadSuccess' });
778
- }
779
- break;
780
- case 'uploadControlFailed':
781
- case 'uploadControlSuccess':
782
- let cnt2 = 0;
783
- this.controls.forEach(c => cnt2 += c.hasFilesToUpload ? 1 : 0);
784
- if (cnt2 === 0) {
785
- this.uploadSubscription.next({ action: v.action === 'uploadControlFailed' ? 'uploadFailed' : 'uploadSuccess' });
786
- }
787
- break;
788
- }
789
- });
790
- }
791
- upload() {
792
- const promises = [];
793
- this.controls.forEach(c => promises.push(c.beforeSave()));
794
- return new Promise((res, rej) => {
795
- this.uploadSubscription.subscribe((v) => {
796
- if (v.action === 'uploadSuccess' || v.action === 'uploadFailed') {
797
- res(v.action);
798
- }
799
- });
800
- this.uploadSubscription.next({ action: 'uploadStarted' });
801
- Promise.all(promises).then((r) => {
802
- const event = {
803
- type: 'uploadAll',
804
- url: this.fileServiceConfig.uploadUrl,
805
- method: 'POST',
806
- headers: this.fileServiceConfig.getAuthHeader()
807
- };
808
- this.uploadInput.emit(event);
809
- });
810
- });
811
- }
812
- }
813
- UiFileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiFileService, deps: [{ token: UI_FILESERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
814
- UiFileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiFileService });
815
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiFileService, decorators: [{
816
- type: Injectable
817
- }], ctorParameters: function () { return [{ type: undefined, decorators: [{
818
- type: Optional
819
- }, {
820
- type: Inject,
821
- args: [UI_FILESERVICE]
822
- }] }]; } });
823
-
824
- class FileComponent {
825
- constructor(fileServiceConfig, domSanitizer, fileService) {
826
- this.fileServiceConfig = fileServiceConfig;
827
- this.domSanitizer = domSanitizer;
828
- this.fileService = fileService;
829
- this.fileSize = 'default';
830
- this.visible = false;
831
- }
832
- get width() {
833
- // return '100%';
834
- return this.fileServiceConfig.imageSizes[this.fileSize] ? this.fileServiceConfig.imageSizes[this.fileSize][0] + 'px' : undefined;
835
- }
836
- get height() {
837
- // return '100%';
838
- return this.fileServiceConfig.imageSizes[this.fileSize] ? this.fileServiceConfig.imageSizes[this.fileSize][1] + 'px' : undefined;
839
- }
840
- get isVideo() {
841
- return this.mime.startsWith('video/');
842
- }
843
- get mime() {
844
- if (this.srcUrlMimeType) {
845
- return this.srcUrlMimeType;
846
- }
847
- else {
848
- if (this.srcData.nativeFile) {
849
- return this.srcData.nativeFile.type;
850
- }
851
- return this.fileServiceConfig.getMimeType(this.srcData);
852
- }
853
- }
854
- get useRetinaSrc() {
855
- return this.fileServiceConfig.useRetinaSrc;
856
- }
857
- ngOnInit() {
858
- }
859
- ngOnChanges(changes) {
860
- if (changes.srcData) {
861
- if (changes.srcData.currentValue.nativeFile) {
862
- this.src = this.domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(changes.srcData.currentValue.nativeFile));
863
- }
864
- else {
865
- this.src = this.fileServiceConfig.getMediaSrc(this.fileSize, changes.srcData.currentValue, this.srcOptions);
866
- }
867
- }
868
- if (changes.srcUrl) {
869
- this.src = changes.srcUrl.currentValue?.src;
870
- if (this.src) {
871
- this.srcUrlMimeType = changes.srcUrl.currentValue?.mimeType || 'image/png';
872
- }
873
- else {
874
- this.srcUrlMimeType = undefined;
875
- }
876
- }
877
- }
878
- }
879
- FileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: FileComponent, deps: [{ token: UI_FILESERVICE, optional: true }, { token: i1$2.DomSanitizer }, { token: UiFileService }], target: i0.ɵɵFactoryTarget.Component });
880
- FileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: FileComponent, selector: "ui-file", inputs: { fileSize: "fileSize", srcOptions: "srcOptions", srcData: "srcData", srcUrl: "srcUrl" }, host: { properties: { "style.width": "this.width", "style.height": "this.height" } }, usesOnChanges: true, ngImport: i0, template: "<mat-spinner *ngIf=\"visible\"></mat-spinner>\r\n<img *ngIf=\"!isVideo && useRetinaSrc\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [src]=\"src\"/>\r\n<video *ngIf=\"isVideo\" muted controls [src]=\"src\"></video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}:host img,:host video{max-width:100%;max-height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
881
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: FileComponent, decorators: [{
882
- type: Component,
883
- args: [{ selector: 'ui-file', template: "<mat-spinner *ngIf=\"visible\"></mat-spinner>\r\n<img *ngIf=\"!isVideo && useRetinaSrc\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [src]=\"src\"/>\r\n<video *ngIf=\"isVideo\" muted controls [src]=\"src\"></video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}:host img,:host video{max-width:100%;max-height:100%}\n"] }]
884
- }], ctorParameters: function () { return [{ type: undefined, decorators: [{
885
- type: Optional
886
- }, {
887
- type: Inject,
888
- args: [UI_FILESERVICE]
889
- }] }, { type: i1$2.DomSanitizer }, { type: UiFileService }]; }, propDecorators: { fileSize: [{
890
- type: Input
891
- }], srcOptions: [{
892
- type: Input
893
- }], srcData: [{
894
- type: Input
895
- }], srcUrl: [{
896
- type: Input
897
- }], width: [{
898
- type: HostBinding,
899
- args: ['style.width']
900
- }], height: [{
901
- type: HostBinding,
902
- args: ['style.height']
903
- }] } });
904
-
905
- class UiFileUploaderComponent extends UiSimpleComponent {
906
- constructor(fileServiceConfig, translateService, controlContainer, fileService) {
907
- super(null, controlContainer);
908
- this.fileServiceConfig = fileServiceConfig;
909
- this.translateService = translateService;
910
- this.controlContainer = controlContainer;
911
- this.fileService = fileService;
912
- this.maxFiles = 1;
913
- this.multiple = true;
914
- this.crop = false;
915
- this.cropRounded = false;
916
- this.fileSize = 'default';
917
- this.customFileMenu = false;
918
- this.newFilePosition = 'last';
919
- this.templates = {};
920
- this.previewPosition = 'bottom';
921
- this.imageCropped = new EventEmitter();
922
- this.fileEvent = new EventEmitter();
923
- this.uploadOptions = {
924
- concurrency: this.fileServiceConfig.concurrentUploads
925
- };
926
- this.uploading = false;
927
- this.showCropper = false;
928
- this.showCropPreview = {};
929
- this.cropPreviewTimeouts = {};
930
- this.cropSourceImages = {};
931
- this.cropperImageLoaded = {};
932
- this.imagesDone = {};
933
- this.transform = {};
934
- this.canvasRotation = {};
935
- this.refreshAddInput = false;
936
- this.patchingValues = false;
937
- this.inputArray = false;
938
- this.dragging = false;
939
- this.uploaderId = Math.round(Math.random() * 1000000);
940
- this.croppedImages = {};
941
- this.fileService.uploadSubscription.next({ action: 'register', data: this });
942
- this.fileService.uploadSubscription.subscribe((v) => {
943
- switch (v.action) {
944
- case 'uploadStarted':
945
- this.uploading = true;
946
- break;
947
- case 'uploadFailed':
948
- case 'uploadSuccess':
949
- setTimeout(() => {
950
- this.uploading = false;
951
- });
952
- this.patchValues();
953
- }
954
- });
955
- }
956
- get menuTemplate() {
957
- return this.templates?.menuTemplate;
958
- }
959
- get addFileTemplate() {
960
- return this.templates?.addFileTemplate;
961
- }
962
- get fileTemplate() {
963
- return this.templates?.fileTemplate;
964
- }
965
- get uploadInput() {
966
- return this.fileService.uploadInput;
967
- }
968
- get editable() {
969
- return this.componentFormControl.enabled;
970
- }
971
- get ngAddStyle() {
972
- return {
973
- width: this.fileServiceConfig.imageSizes[this.fileSize][0] + 'px',
974
- height: this.fileServiceConfig.imageSizes[this.fileSize][1] + 'px',
975
- };
976
- }
977
- get aspectRatio() {
978
- return this.fileServiceConfig.imageSizes[this.fileSize][0] / this.fileServiceConfig.imageSizes[this.fileSize][1];
979
- }
980
- get addFileImgSrc() {
981
- return this.fileServiceConfig.addFileImgSrc;
982
- }
983
- cropDone(f) {
984
- return !f.$newFile || this.imagesDone[f.$newFile.id];
985
- }
986
- // ngOnInit(): void {
987
- // super.ngOnInit();
988
- // }
989
- ngOnDestroy() {
990
- this.fileService.uploadSubscription.next({ action: 'destroy', data: this });
991
- }
992
- remove(f) {
993
- if (f.$newFile) {
994
- this.uploadInput.emit({ type: 'remove', id: f.$newFile.id });
995
- }
996
- this.files.splice(this.files.indexOf(f), 1);
997
- this.prepareResponse();
998
- // this.onChange(this.inputArray ? this.files : (this.files.length > 0 ? this.files[0] : null));
999
- this.fileEvent.emit({ message: 'fileRemoved', data: f });
1000
- // this.patchValues();
1001
- }
1002
- patchValues() {
1003
- this.patchingValues = true;
1004
- // if (this.inputArray) {
1005
- // this.componentFormControl.setValue(this.files.map(f => f.custom));
1006
- // } else {
1007
- // this.componentFormControl.setValue(this.files.length === 0 ? null : this.files[0].custom);
1008
- // }
1009
- this.patchingValues = false;
1010
- }
1011
- get hasFilesToUpload() {
1012
- return !!this.files.find(f => f.$newFile && f.$newFile.progress.status !== 2);
1013
- }
1014
- canImagePreview(type) {
1015
- return type.startsWith('image/') || type.startsWith('video/');
1016
- }
1017
- onUploadOutput($event, skipCustomValidation = false) {
1018
- // console.log($event);
1019
- switch ($event.type) {
1020
- case 'start':
1021
- break;
1022
- case 'dragOver':
1023
- this.dragging = true;
1024
- break;
1025
- case 'dragOut':
1026
- case 'drop':
1027
- this.dragging = false;
1028
- break;
1029
- case 'addedToQueue':
1030
- if (this.crop && !$event.file.type.startsWith('image/')) {
1031
- this.uploadInput.emit({ type: 'remove', id: $event.file.id });
1032
- this.fileEvent.emit({ message: 'cropInvalidFileType', data: $event.file });
1033
- return;
1034
- }
1035
- if (!skipCustomValidation && this.fileServiceConfig.fileValidation) {
1036
- this.fileServiceConfig.fileValidation(this.fileSize, $event.file).then(valid => {
1037
- if (valid) {
1038
- this.onUploadOutput($event, true);
1039
- }
1040
- else {
1041
- this.uploadInput.emit({ type: 'remove', id: $event.file.id });
1042
- // this.fileEvent.emit({ message: 'cropInvalidFileType', data: $event.file });
1043
- }
1044
- });
1045
- }
1046
- else {
1047
- let f;
1048
- if (this.changeFileIndex !== undefined) {
1049
- f = this.files[this.changeFileIndex];
1050
- if (f.$newFile) {
1051
- this.uploadInput.emit({ type: 'remove', id: f.$newFile.id });
1052
- }
1053
- f.$newFile = $event.file;
1054
- f.custom = $event.file;
1055
- this.changeFileIndex = undefined;
1056
- }
1057
- else {
1058
- f = { custom: $event.file, $newFile: $event.file };
1059
- if (this.newFilePosition === 'last') {
1060
- this.files.push(f);
1061
- }
1062
- else {
1063
- this.files.unshift(f);
1064
- }
1065
- }
1066
- if (this.canImagePreview($event.file.type)) {
1067
- if (this.crop) {
1068
- this.canvasRotation[$event.file.id] = 0;
1069
- this.cropSourceImages[$event.file.id] = $event.file.nativeFile;
1070
- this.cropperImageLoaded[$event.file.id] = false;
1071
- }
1072
- }
1073
- this.prepareResponse();
1074
- this.fileEvent.emit({ message: 'fileAdded', data: f });
1075
- }
1076
- break;
1077
- case 'done':
1078
- const df = this.files.find(f => f.$newFile === $event.file);
1079
- if (df) {
1080
- if (df.$newFile.responseStatus === 200) {
1081
- this.files[this.files.indexOf(df)].custom = df.$newFile.response;
1082
- df.$newFile = null;
1083
- }
1084
- else {
1085
- // console.log('error on upload', df.$event);
1086
- }
1087
- }
1088
- if (!this.hasFilesToUpload) {
1089
- this.prepareResponse(false);
1090
- this.fileService.uploadSubscription.next({
1091
- action: this.files.find(f => !!f.$newFile) ? 'uploadControlFailed' : 'uploadControlSuccess'
1092
- });
1093
- }
1094
- break;
1095
- }
1096
- }
1097
- prepareResponse(doemit = true) {
1098
- if (this.inputArray) {
1099
- if (!this.responseFiles) {
1100
- this.responseFiles = [];
1101
- }
1102
- this.responseFiles.length = 0;
1103
- this.files.forEach(f => this.responseFiles.push({ ...f.custom, $newFile: f.$newFile }));
1104
- }
1105
- else {
1106
- if (this.files.length === 0) {
1107
- this.responseFiles = null;
1108
- }
1109
- else {
1110
- if (!this.responseFiles) {
1111
- this.responseFiles = {};
1112
- }
1113
- Object.keys(this.files[0].custom).forEach(k => {
1114
- this.responseFiles[k] = this.files[0].custom[k];
1115
- });
1116
- this.responseFiles.$newFile = this.files[0].$newFile;
1117
- }
1118
- }
1119
- if (doemit) {
1120
- this.onChange(this.responseFiles);
1121
- }
1122
- // console.log('emit', this.files[1], { ...this.files[1].custom, $newFile: this.files[1].$newFile });
1123
- // this.onChange(this.inputArray ?
1124
- // this.files.map(f => ({ ...f.custom, $newFile: f.$newFile})) :
1125
- // (this.files.length > 0 ? { ...this.files[0].custom, $newFile: this.files[0].$newFile } : null));
1126
- // this.onChange(this.inputArray ?
1127
- // this.files :
1128
- // (this.files.length > 0 ? this.files[0] : null));
1129
- }
1130
- beforeSave() {
1131
- return new Promise((res, rej) => {
1132
- this.files.forEach(f => {
1133
- if (f.$newFile && f.$newFile.progress.status === 2) {
1134
- f.$newFile.progress.status = 0;
1135
- }
1136
- if (this.crop && f.$newFile && !this.imagesDone[f.$newFile.id]) {
1137
- this.cropperDone(f.$newFile.id);
1138
- }
1139
- });
1140
- setTimeout(() => {
1141
- res('done');
1142
- }, 250);
1143
- });
1144
- }
1145
- fileChangeEvent(event, f) {
1146
- this.changeFileIndex = this.files.indexOf(f);
1147
- }
1148
- startCropPreview(id) {
1149
- clearTimeout(this.cropPreviewTimeouts[id]);
1150
- this.showCropPreview[id] = !!this.cropSourceImages[id];
1151
- }
1152
- stopCropPreview(id) {
1153
- this.cropPreviewTimeouts[id] = setTimeout(() => {
1154
- this.showCropPreview[id] = false;
1155
- }, 250);
1156
- }
1157
- zoomCroppedImage(dir, id) {
1158
- let scale = this.transform[id].scale;
1159
- scale += dir;
1160
- if (scale < 0.1) {
1161
- scale = 0.1;
1162
- }
1163
- this.transform[id] = {
1164
- ...this.transform[id],
1165
- scale
1166
- };
1167
- }
1168
- rotateCroppedImage(dir, id) {
1169
- this.canvasRotation[id] += dir;
1170
- const flippedH = this.transform[id].flipH;
1171
- const flippedV = this.transform[id].flipV;
1172
- this.transform[id] = {
1173
- ...this.transform[id],
1174
- flipH: flippedV,
1175
- flipV: flippedH
1176
- };
1177
- }
1178
- onImageCropped(event, id) {
1179
- this.croppedImages[id] = event.base64;
1180
- this.imageCropped.emit(event.base64);
1181
- }
1182
- imageLoaded(id) {
1183
- this.showCropper = true;
1184
- setTimeout(() => {
1185
- this.transform[id] = {
1186
- scale: 1
1187
- };
1188
- });
1189
- }
1190
- cropperReady(sourceImageDimensions, id) {
1191
- this.cropperImageLoaded[id] = true;
1192
- }
1193
- loadImageFailed() {
1194
- }
1195
- toggleMenuVisibility(f) {
1196
- this.fileMenuOpened = f;
1197
- }
1198
- menuClick() {
1199
- this.fileMenuOpened = undefined;
1200
- }
1201
- writeValue(obj) {
1202
- this.inputArray = obj instanceof Array;
1203
- if (this.inputArray) {
1204
- this.files = obj.map(f => ({ custom: f, $newFile: null }));
1205
- }
1206
- else {
1207
- this.files = obj ? [{ custom: obj, $newFile: null }] : [];
1208
- }
1209
- this.cropSourceImages = {};
1210
- }
1211
- cropperDone(id) {
1212
- const f = this.files.find(fx => fx.$newFile && fx.$newFile.id === id);
1213
- if (f) {
1214
- const url = this.croppedImages[id];
1215
- fetch(url)
1216
- .then(res => res.blob())
1217
- .then(blob => {
1218
- f.$newFile.nativeFile = new File([blob], 'crop.png', {
1219
- type: 'image/png'
1220
- });
1221
- f.$newFile.name = 'crop.png';
1222
- f.$newFile.size = f.$newFile.nativeFile.size;
1223
- f.$newFile.type = f.$newFile.nativeFile.type;
1224
- this.imagesDone[id] = true;
1225
- });
1226
- }
1227
- }
1228
- }
1229
- UiFileUploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiFileUploaderComponent, deps: [{ token: UI_FILESERVICE, optional: true }, { token: UI_TRANSLATESERVICE }, { token: i1$1.ControlContainer, host: true, optional: true, skipSelf: true }, { token: UiFileService }], target: i0.ɵɵFactoryTarget.Component });
1230
- UiFileUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: UiFileUploaderComponent, selector: "ui-file-uploader", inputs: { maxFiles: "maxFiles", multiple: "multiple", crop: "crop", cropRounded: "cropRounded", cropMaxWidth: "cropMaxWidth", fileSize: "fileSize", customFileMenu: "customFileMenu", addHint: "addHint", newFilePosition: "newFilePosition", templates: "templates", previewPosition: "previewPosition" }, outputs: { imageCropped: "imageCropped", fileEvent: "fileEvent" }, providers: [{
1231
- provide: NG_VALUE_ACCESSOR,
1232
- multi: true,
1233
- useExisting: UiFileUploaderComponent,
1234
- }], usesInheritance: true, ngImport: i0, template: "<div class=\"label\" *ngIf=\"label\">\r\n <div class=\"text-container\" [matTooltip]=\"required ? translateService.instant('ui.controls.validation.required') : undefined\" [matTooltipPosition]=\"'above'\">\r\n <div class=\"text\">{{label}}</div>\r\n <div *ngIf=\"required\" class=\"required\">*</div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"files-container\" [ngClass]=\"{dragging: dragging, disabled: uploading || !editable}\">\r\n\r\n <div class=\"existing-files\">\r\n\r\n <div class=\"file-container\" *ngFor=\"let f of files\">\r\n\r\n <div class=\"file-menu\" (click)=\"toggleMenuVisibility(f)\" *ngIf=\"!customFileMenu && editable && !uploading\">\r\n <mat-icon>menu</mat-icon>\r\n </div>\r\n <div class=\"file-menu-container mat-elevation-z2\" [ngClass]=\"{visible: f === fileMenuOpened}\" (click)=\"menuClick()\" (mouseleave)=\"menuClick()\">\r\n <ng-container *ngIf=\"!menuTemplate\">\r\n <label class=\"menu-item\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.change') }}\r\n <input *ngIf=\"!refreshAddInput\" style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </label>\r\n <div class=\"menu-item\" (click)=\"remove(f)\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.delete') }}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"menuTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{fileInput: fileInput}\"></ng-template>\r\n <ng-template #fileInput>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"crop && !cropDone(f)\" (mouseenter)=\"startCropPreview(f.$newFile.id)\" (mouseleave)=\"stopCropPreview(f.$newFile.id)\">\r\n <div class=\"crop-container\" [ngStyle]=\"ngAddStyle\">\r\n\r\n <ui-file *ngIf=\"false && files.length > 0 && !cropSourceImages\" [fileSize]=\"fileSize\" [srcData]=\"files[0].custom\" [ngClass]=\"{rounded: cropRounded}\"></ui-file>\r\n\r\n <mat-spinner *ngIf=\"!cropperImageLoaded[f.$newFile.id] && cropSourceImages[f.$newFile.id]\" [diameter]=\"75\"></mat-spinner>\r\n\r\n <image-cropper *ngIf=\"cropSourceImages[f.$newFile.id]\"\r\n [imageFile]=\"cropSourceImages[f.$newFile.id]\"\r\n [maintainAspectRatio]=\"true\"\r\n [containWithinAspectRatio]=\"false\"\r\n [aspectRatio]=\"aspectRatio\"\r\n [resizeToWidth]=\"cropMaxWidth\"\r\n [onlyScaleDown]=\"false\"\r\n [roundCropper]=\"cropRounded\"\r\n [canvasRotation]=\"canvasRotation[f.$newFile.id]\"\r\n [transform]=\"transform[f.$newFile.id]\"\r\n [alignImage]=\"'center'\"\r\n [style.display]=\"showCropper ? null : 'none'\"\r\n [format]=\"'png'\"\r\n (imageCropped)=\"onImageCropped($event, f.$newFile.id)\"\r\n (imageLoaded)=\"imageLoaded(f.$newFile.id)\"\r\n (cropperReady)=\"cropperReady($event, f.$newFile.id)\"\r\n (loadImageFailed)=\"loadImageFailed()\"\r\n ></image-cropper>\r\n\r\n <div class=\"crop-preview mat-elevation-z2\" [class]=\"previewPosition\" *ngIf=\"true || (showCropPreview[f.$newFile.id] && cropperImageLoaded[f.$newFile.id])\">\r\n <div class=\"crop-menu\">\r\n <mat-icon (click)=\"zoomCroppedImage(.1, f.$newFile.id)\">zoom_in</mat-icon>\r\n <mat-icon (click)=\"zoomCroppedImage(- .1, f.$newFile.id)\">zoom_out</mat-icon>\r\n <mat-icon (click)=\"rotateCroppedImage(-1, f.$newFile.id)\">rotate_left</mat-icon>\r\n <mat-icon (click)=\"rotateCroppedImage(1, f.$newFile.id)\">rotate_right</mat-icon>\r\n <div style=\"flex: 1 1 100%\"></div>\r\n <label class=\"menu-item\">\r\n <mat-icon>upload_file</mat-icon>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </label>\r\n <mat-icon (click)=\"remove(f)\">delete_outline</mat-icon>\r\n <div style=\"flex: 1 1 100%\"></div>\r\n <mat-icon (click)=\"cropperDone(f.$newFile.id)\">done</mat-icon>\r\n </div>\r\n <img [src]=\"croppedImages[f.$newFile.id]\" [ngClass]=\"{rounded: cropRounded}\"/>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n\r\n <ng-container *ngIf=\"!crop || cropDone(f)\">\r\n <ng-container *ngIf=\"fileTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"fileTemplate\" [ngTemplateOutletContext]=\"{file: f, fileInput: fileInput2}\"></ng-template>\r\n <ng-template #fileInput2>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ui-file *ngIf=\"!fileTemplate\" [fileSize]=\"fileSize\" [srcData]=\"f.$newFile ? f.$newFile: f.custom\" [ngClass]=\"{rounded: crop && cropRounded}\">\r\n </ui-file>\r\n\r\n <ng-container *ngIf=\"f.$newFile\">\r\n <div *ngIf=\"f.$newFile.responseStatus && f.$newFile.responseStatus !== 200\" class=\"progress-container error\">\r\n {{ translateService.instant('ui.controls.ui-file-uploader.uploadError', f.$newFile.response) }}\r\n </div>\r\n <div *ngIf=\"!f.$newFile.responseStatus && f.$newFile.progress.status === 1\" class=\"progress-container\">\r\n <div class=\"progress\" [ngStyle]=\"{width: f.$newFile.progress.data.percentage + '%'}\"></div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"file-container add\" ngFileDrop [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [ngClass]=\"{visible: files.length < maxFiles || maxFiles === 0}\" [ngStyle]=\"addFileTemplate ? {} : ngAddStyle\">\r\n <label>\r\n <ng-container *ngIf=\"addFileTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"addFileTemplate\"></ng-template>\r\n </ng-container>\r\n <ng-container *ngIf=\"!addFileTemplate\">\r\n <div class=\"upload-image-container\"></div>\r\n <img [src]=\"addFileImgSrc\" [ngClass]=\"{'with-hint': addHint}\" />\r\n <div *ngIf=\"addHint\" class=\"add-hint\">{{addHint}}</div>\r\n </ng-container>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [multiple]=\"maxFiles === 0 && multiple\">\r\n </label>\r\n </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex;flex-wrap:wrap}:host .label .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .files-container{display:flex;flex-wrap:wrap;border-style:solid}:host .files-container .existing-files{display:flex;flex-wrap:wrap}:host .files-container.dragging .add label{border:2px dashed grey;background-color:#0000001a}:host .files-container.disabled .add{opacity:.5;pointer-events:none}:host .file-container{max-width:100%;max-height:100%;position:relative;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container{position:absolute;bottom:0;left:1px;right:1px;height:20%;max-height:20px;background-color:#0000001a}:host .file-container .progress-container.error{background-color:red;color:#fff;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container .progress{background-color:#0000004d;height:100%}:host .file-container.add{display:flex;align-items:center;flex-direction:column;transition:opacity .25s;cursor:pointer}:host .file-container.add:not(.visible){display:none}:host .file-container.add img{max-width:100%;max-height:100%}:host .file-container.add img.with-hint{max-height:75%}:host .file-container.add .add-hint{margin-top:8px;font-size:80%;text-align:center}:host .file-container.add label{position:absolute;inset:0;cursor:pointer;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .file-container.add .upload-image-container{display:none}:host .file-container .file-menu-container{display:none;position:absolute;left:calc(100% - 45px);top:27px;z-index:1000}:host .file-container .file-menu-container ::ng-deep .menu-item{position:relative;padding:12px 24px;cursor:pointer;display:block}:host .file-container .file-menu-container.visible{display:block}:host .file-container .file-menu{display:flex;position:absolute;flex-direction:column;align-items:center;justify-content:center;padding:12px;right:10px;top:10px;background-color:#fff9;border-radius:50%;cursor:pointer;transition:all .25s;z-index:999}:host .file-container:hover .file-menu{background-color:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .file-container mat-progress-bar{position:absolute;bottom:0;height:6px;left:0;right:0;z-index:1000}:host image-cropper{padding:0}:host ui-file.rounded ::ng-deep img{border-radius:50%}:host .crop-container{display:flex;align-items:center;justify-content:center;position:relative}:host .crop-container mat-spinner{position:absolute;z-index:1}:host .crop-container .crop-preview{position:absolute;top:100%;left:0;right:0;padding:6px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;max-width:350px;margin-right:auto;margin-left:auto}:host .crop-container .crop-preview.left{right:calc(100% + 6px);left:unset;top:0}:host .crop-container .crop-preview.above{bottom:100%;top:unset}:host .crop-container .crop-preview .crop-menu{width:100%;flex:0 0 auto;display:flex}:host .crop-container .crop-preview .crop-menu mat-icon{margin:0 3px;width:calc(1em + 6px);height:1em;font-size:2em;cursor:pointer;user-select:none;flex:1 1 100%}:host .crop-container .crop-preview img{margin:16px 0;max-width:256px;max-height:256px}:host .crop-container .crop-preview img.rounded{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i6.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i6.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "component", type: i4$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "format", "transform", "maintainAspectRatio", "aspectRatio", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: FileComponent, selector: "ui-file", inputs: ["fileSize", "srcOptions", "srcData", "srcUrl"] }] });
1235
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiFileUploaderComponent, decorators: [{
1236
- type: Component,
1237
- args: [{ selector: 'ui-file-uploader', providers: [{
1238
- provide: NG_VALUE_ACCESSOR,
1239
- multi: true,
1240
- useExisting: UiFileUploaderComponent,
1241
- }], template: "<div class=\"label\" *ngIf=\"label\">\r\n <div class=\"text-container\" [matTooltip]=\"required ? translateService.instant('ui.controls.validation.required') : undefined\" [matTooltipPosition]=\"'above'\">\r\n <div class=\"text\">{{label}}</div>\r\n <div *ngIf=\"required\" class=\"required\">*</div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"files-container\" [ngClass]=\"{dragging: dragging, disabled: uploading || !editable}\">\r\n\r\n <div class=\"existing-files\">\r\n\r\n <div class=\"file-container\" *ngFor=\"let f of files\">\r\n\r\n <div class=\"file-menu\" (click)=\"toggleMenuVisibility(f)\" *ngIf=\"!customFileMenu && editable && !uploading\">\r\n <mat-icon>menu</mat-icon>\r\n </div>\r\n <div class=\"file-menu-container mat-elevation-z2\" [ngClass]=\"{visible: f === fileMenuOpened}\" (click)=\"menuClick()\" (mouseleave)=\"menuClick()\">\r\n <ng-container *ngIf=\"!menuTemplate\">\r\n <label class=\"menu-item\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.change') }}\r\n <input *ngIf=\"!refreshAddInput\" style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </label>\r\n <div class=\"menu-item\" (click)=\"remove(f)\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.delete') }}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"menuTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{fileInput: fileInput}\"></ng-template>\r\n <ng-template #fileInput>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"crop && !cropDone(f)\" (mouseenter)=\"startCropPreview(f.$newFile.id)\" (mouseleave)=\"stopCropPreview(f.$newFile.id)\">\r\n <div class=\"crop-container\" [ngStyle]=\"ngAddStyle\">\r\n\r\n <ui-file *ngIf=\"false && files.length > 0 && !cropSourceImages\" [fileSize]=\"fileSize\" [srcData]=\"files[0].custom\" [ngClass]=\"{rounded: cropRounded}\"></ui-file>\r\n\r\n <mat-spinner *ngIf=\"!cropperImageLoaded[f.$newFile.id] && cropSourceImages[f.$newFile.id]\" [diameter]=\"75\"></mat-spinner>\r\n\r\n <image-cropper *ngIf=\"cropSourceImages[f.$newFile.id]\"\r\n [imageFile]=\"cropSourceImages[f.$newFile.id]\"\r\n [maintainAspectRatio]=\"true\"\r\n [containWithinAspectRatio]=\"false\"\r\n [aspectRatio]=\"aspectRatio\"\r\n [resizeToWidth]=\"cropMaxWidth\"\r\n [onlyScaleDown]=\"false\"\r\n [roundCropper]=\"cropRounded\"\r\n [canvasRotation]=\"canvasRotation[f.$newFile.id]\"\r\n [transform]=\"transform[f.$newFile.id]\"\r\n [alignImage]=\"'center'\"\r\n [style.display]=\"showCropper ? null : 'none'\"\r\n [format]=\"'png'\"\r\n (imageCropped)=\"onImageCropped($event, f.$newFile.id)\"\r\n (imageLoaded)=\"imageLoaded(f.$newFile.id)\"\r\n (cropperReady)=\"cropperReady($event, f.$newFile.id)\"\r\n (loadImageFailed)=\"loadImageFailed()\"\r\n ></image-cropper>\r\n\r\n <div class=\"crop-preview mat-elevation-z2\" [class]=\"previewPosition\" *ngIf=\"true || (showCropPreview[f.$newFile.id] && cropperImageLoaded[f.$newFile.id])\">\r\n <div class=\"crop-menu\">\r\n <mat-icon (click)=\"zoomCroppedImage(.1, f.$newFile.id)\">zoom_in</mat-icon>\r\n <mat-icon (click)=\"zoomCroppedImage(- .1, f.$newFile.id)\">zoom_out</mat-icon>\r\n <mat-icon (click)=\"rotateCroppedImage(-1, f.$newFile.id)\">rotate_left</mat-icon>\r\n <mat-icon (click)=\"rotateCroppedImage(1, f.$newFile.id)\">rotate_right</mat-icon>\r\n <div style=\"flex: 1 1 100%\"></div>\r\n <label class=\"menu-item\">\r\n <mat-icon>upload_file</mat-icon>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </label>\r\n <mat-icon (click)=\"remove(f)\">delete_outline</mat-icon>\r\n <div style=\"flex: 1 1 100%\"></div>\r\n <mat-icon (click)=\"cropperDone(f.$newFile.id)\">done</mat-icon>\r\n </div>\r\n <img [src]=\"croppedImages[f.$newFile.id]\" [ngClass]=\"{rounded: cropRounded}\"/>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n\r\n <ng-container *ngIf=\"!crop || cropDone(f)\">\r\n <ng-container *ngIf=\"fileTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"fileTemplate\" [ngTemplateOutletContext]=\"{file: f, fileInput: fileInput2}\"></ng-template>\r\n <ng-template #fileInput2>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ui-file *ngIf=\"!fileTemplate\" [fileSize]=\"fileSize\" [srcData]=\"f.$newFile ? f.$newFile: f.custom\" [ngClass]=\"{rounded: crop && cropRounded}\">\r\n </ui-file>\r\n\r\n <ng-container *ngIf=\"f.$newFile\">\r\n <div *ngIf=\"f.$newFile.responseStatus && f.$newFile.responseStatus !== 200\" class=\"progress-container error\">\r\n {{ translateService.instant('ui.controls.ui-file-uploader.uploadError', f.$newFile.response) }}\r\n </div>\r\n <div *ngIf=\"!f.$newFile.responseStatus && f.$newFile.progress.status === 1\" class=\"progress-container\">\r\n <div class=\"progress\" [ngStyle]=\"{width: f.$newFile.progress.data.percentage + '%'}\"></div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"file-container add\" ngFileDrop [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [ngClass]=\"{visible: files.length < maxFiles || maxFiles === 0}\" [ngStyle]=\"addFileTemplate ? {} : ngAddStyle\">\r\n <label>\r\n <ng-container *ngIf=\"addFileTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"addFileTemplate\"></ng-template>\r\n </ng-container>\r\n <ng-container *ngIf=\"!addFileTemplate\">\r\n <div class=\"upload-image-container\"></div>\r\n <img [src]=\"addFileImgSrc\" [ngClass]=\"{'with-hint': addHint}\" />\r\n <div *ngIf=\"addHint\" class=\"add-hint\">{{addHint}}</div>\r\n </ng-container>\r\n <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [multiple]=\"maxFiles === 0 && multiple\">\r\n </label>\r\n </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex;flex-wrap:wrap}:host .label .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .files-container{display:flex;flex-wrap:wrap;border-style:solid}:host .files-container .existing-files{display:flex;flex-wrap:wrap}:host .files-container.dragging .add label{border:2px dashed grey;background-color:#0000001a}:host .files-container.disabled .add{opacity:.5;pointer-events:none}:host .file-container{max-width:100%;max-height:100%;position:relative;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container{position:absolute;bottom:0;left:1px;right:1px;height:20%;max-height:20px;background-color:#0000001a}:host .file-container .progress-container.error{background-color:red;color:#fff;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container .progress{background-color:#0000004d;height:100%}:host .file-container.add{display:flex;align-items:center;flex-direction:column;transition:opacity .25s;cursor:pointer}:host .file-container.add:not(.visible){display:none}:host .file-container.add img{max-width:100%;max-height:100%}:host .file-container.add img.with-hint{max-height:75%}:host .file-container.add .add-hint{margin-top:8px;font-size:80%;text-align:center}:host .file-container.add label{position:absolute;inset:0;cursor:pointer;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .file-container.add .upload-image-container{display:none}:host .file-container .file-menu-container{display:none;position:absolute;left:calc(100% - 45px);top:27px;z-index:1000}:host .file-container .file-menu-container ::ng-deep .menu-item{position:relative;padding:12px 24px;cursor:pointer;display:block}:host .file-container .file-menu-container.visible{display:block}:host .file-container .file-menu{display:flex;position:absolute;flex-direction:column;align-items:center;justify-content:center;padding:12px;right:10px;top:10px;background-color:#fff9;border-radius:50%;cursor:pointer;transition:all .25s;z-index:999}:host .file-container:hover .file-menu{background-color:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .file-container mat-progress-bar{position:absolute;bottom:0;height:6px;left:0;right:0;z-index:1000}:host image-cropper{padding:0}:host ui-file.rounded ::ng-deep img{border-radius:50%}:host .crop-container{display:flex;align-items:center;justify-content:center;position:relative}:host .crop-container mat-spinner{position:absolute;z-index:1}:host .crop-container .crop-preview{position:absolute;top:100%;left:0;right:0;padding:6px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;max-width:350px;margin-right:auto;margin-left:auto}:host .crop-container .crop-preview.left{right:calc(100% + 6px);left:unset;top:0}:host .crop-container .crop-preview.above{bottom:100%;top:unset}:host .crop-container .crop-preview .crop-menu{width:100%;flex:0 0 auto;display:flex}:host .crop-container .crop-preview .crop-menu mat-icon{margin:0 3px;width:calc(1em + 6px);height:1em;font-size:2em;cursor:pointer;user-select:none;flex:1 1 100%}:host .crop-container .crop-preview img{margin:16px 0;max-width:256px;max-height:256px}:host .crop-container .crop-preview img.rounded{border-radius:50%}\n"] }]
1242
- }], ctorParameters: function () { return [{ type: undefined, decorators: [{
1243
- type: Optional
1244
- }, {
1245
- type: Inject,
1246
- args: [UI_FILESERVICE]
1247
- }] }, { type: undefined, decorators: [{
1248
- type: Inject,
1249
- args: [UI_TRANSLATESERVICE]
1250
- }] }, { type: i1$1.ControlContainer, decorators: [{
1251
- type: Optional
1252
- }, {
1253
- type: Host
1254
- }, {
1255
- type: SkipSelf
1256
- }] }, { type: UiFileService }]; }, propDecorators: { maxFiles: [{
1257
- type: Input
1258
- }], multiple: [{
1259
- type: Input
1260
- }], crop: [{
1261
- type: Input
1262
- }], cropRounded: [{
1263
- type: Input
1264
- }], cropMaxWidth: [{
1265
- type: Input
1266
- }], fileSize: [{
1267
- type: Input
1268
- }], customFileMenu: [{
1269
- type: Input
1270
- }], addHint: [{
1271
- type: Input
1272
- }], newFilePosition: [{
1273
- type: Input
1274
- }], templates: [{
1275
- type: Input
1276
- }], previewPosition: [{
1277
- type: Input
1278
- }], imageCropped: [{
1279
- type: Output
1280
- }], fileEvent: [{
1281
- type: Output
1282
- }] } });
1283
-
1284
- class ExpanderComponent {
1285
- constructor() {
1286
- this.expanded = false;
1287
- this.direction = 'right-down';
1288
- }
1289
- ngOnInit() {
1290
- }
1291
- }
1292
- ExpanderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1293
- ExpanderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: ExpanderComponent, selector: "ui-expander", inputs: { expanded: "expanded", direction: "direction" }, host: { properties: { "class.expanded": "this.expanded", "class": "this.direction" } }, ngImport: i0, template: "<mat-icon>keyboard_arrow_up</mat-icon>\r\n", styles: [":host{display:inline-block;transition:transform .25s}:host.right-down{transform:rotate(90deg)}:host.expanded.up-down{transform:scaleY(-1)}:host.expanded.right-down{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
1294
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ExpanderComponent, decorators: [{
1295
- type: Component,
1296
- args: [{ selector: 'ui-expander', template: "<mat-icon>keyboard_arrow_up</mat-icon>\r\n", styles: [":host{display:inline-block;transition:transform .25s}:host.right-down{transform:rotate(90deg)}:host.expanded.up-down{transform:scaleY(-1)}:host.expanded.right-down{transform:rotate(180deg)}\n"] }]
1297
- }], ctorParameters: function () { return []; }, propDecorators: { expanded: [{
1298
- type: HostBinding,
1299
- args: ['class.expanded']
1300
- }, {
1301
- type: Input
1302
- }], direction: [{
1303
- type: HostBinding,
1304
- args: ['class']
1305
- }, {
1306
- type: Input
1307
- }] } });
1308
-
1309
- class ForceVisibilityDirective {
1310
- constructor(el) {
1311
- this.el = el;
1312
- this.visibilityPadding = 15;
1313
- this.visibilityOnRequestOnly = false;
1314
- this.visibilityEmitChange = false;
1315
- this.visibilityFromTop = 0;
1316
- this.visibilityChanged = new EventEmitter();
1317
- }
1318
- static disableFor(timeoutMs) {
1319
- this.disabled = true;
1320
- setTimeout(() => this.disabled = false, timeoutMs);
1321
- }
1322
- ngOnInit() {
1323
- if (!this.visibilityOnRequestOnly && !this.visibilityEmitChange) {
1324
- setTimeout(() => {
1325
- this.forceVisibility();
1326
- }, 125);
1327
- }
1328
- if (this.visibilityEmitChange) {
1329
- if (!this.visibilityWithin) {
1330
- throw Error('traceVisibilityChanged requires visibilityWithin');
1331
- }
1332
- else {
1333
- this.visible = this.isVisible();
1334
- this.visibilityWithin.onscroll = () => {
1335
- const v = this.isVisible();
1336
- if (v !== this.visible) {
1337
- this.visible = v;
1338
- this.visibilityChanged.emit(v);
1339
- }
1340
- };
1341
- }
1342
- }
1343
- }
1344
- isVisible() {
1345
- const rect = this.el.nativeElement.getBoundingClientRect();
1346
- const rectIn = this.visibilityWithin.getBoundingClientRect();
1347
- return rect.top + +this.visibilityPadding - rectIn.bottom < 0;
1348
- }
1349
- forceVisibility() {
1350
- if (ForceVisibilityDirective.disabled) {
1351
- return;
1352
- }
1353
- const rect = this.el.nativeElement.getBoundingClientRect();
1354
- const padding = +this.visibilityPadding;
1355
- if (this.visibilityWithin) {
1356
- const rectIn = this.visibilityWithin.getBoundingClientRect();
1357
- let diff = rect.top + rect.height + padding - rectIn.bottom;
1358
- if (diff > 0) {
1359
- this.visibilityWithin.scrollBy(0, diff);
1360
- }
1361
- else {
1362
- diff = rect.top - rectIn.top - padding;
1363
- if (diff < 0) {
1364
- this.visibilityWithin.scrollBy(0, diff);
1365
- }
1366
- }
1367
- }
1368
- else {
1369
- if (this.visibilityFromTop !== 0) {
1370
- document.getElementsByTagName('app-root')[0].scrollTo(0, rect.top - +this.visibilityFromTop);
1371
- }
1372
- else {
1373
- if (rect.bottom > window.innerHeight) {
1374
- document.getElementsByTagName('app-root')[0].scrollBy(0, rect.bottom - window.innerHeight + 15);
1375
- }
1376
- }
1377
- }
1378
- }
1379
- }
1380
- ForceVisibilityDirective.disabled = false;
1381
- ForceVisibilityDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ForceVisibilityDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
1382
- ForceVisibilityDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: ForceVisibilityDirective, selector: "[uiForceVisibility]", inputs: { visibilityWithin: "visibilityWithin", visibilityPadding: "visibilityPadding", visibilityOnRequestOnly: "visibilityOnRequestOnly", visibilityEmitChange: "visibilityEmitChange", visibilityFromTop: "visibilityFromTop" }, outputs: { visibilityChanged: "visibilityChanged" }, exportAs: ["ForceVisibilityDirective"], ngImport: i0 });
1383
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ForceVisibilityDirective, decorators: [{
1384
- type: Directive,
1385
- args: [{
1386
- selector: '[uiForceVisibility]',
1387
- exportAs: 'ForceVisibilityDirective'
1388
- }]
1389
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { visibilityWithin: [{
1390
- type: Input
1391
- }], visibilityPadding: [{
1392
- type: Input
1393
- }], visibilityOnRequestOnly: [{
1394
- type: Input
1395
- }], visibilityEmitChange: [{
1396
- type: Input
1397
- }], visibilityFromTop: [{
1398
- type: Input
1399
- }], visibilityChanged: [{
1400
- type: Output
1401
- }] } });
1402
-
1403
- class ActionIconComponent {
1404
- constructor() {
1405
- this.size = 'normal';
1406
- this.color = 'primary';
1407
- this.disabled = false;
1408
- this.busy = false;
1409
- this.matIcon = 'close';
1410
- }
1411
- get class() {
1412
- return `${this.size} ${this.color}${this.disabled ? ' disabled' : ''}${this.busy ? ' busy' : ''}`;
1413
- }
1414
- ngOnInit() {
1415
- }
1416
- }
1417
- ActionIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ActionIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1418
- ActionIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: ActionIconComponent, selector: "ui-action-icon", inputs: { size: "size", color: "color", disabled: "disabled", busy: "busy", matIcon: "matIcon" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<mat-icon>{{matIcon}}</mat-icon>\r\n", styles: [":host{display:flex}:host:not(.disabled){cursor:pointer}:host mat-icon{width:1em;height:1em;transition:color .25s}:host.small mat-icon{font-size:1em}:host.smaller mat-icon{font-size:1.25em}:host.normal mat-icon{font-size:1.5em}:host.larger mat-icon{font-size:1.75em}:host.large mat-icon{font-size:2em}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
1419
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ActionIconComponent, decorators: [{
1420
- type: Component,
1421
- args: [{ selector: 'ui-action-icon', template: "<mat-icon>{{matIcon}}</mat-icon>\r\n", styles: [":host{display:flex}:host:not(.disabled){cursor:pointer}:host mat-icon{width:1em;height:1em;transition:color .25s}:host.small mat-icon{font-size:1em}:host.smaller mat-icon{font-size:1.25em}:host.normal mat-icon{font-size:1.5em}:host.larger mat-icon{font-size:1.75em}:host.large mat-icon{font-size:2em}\n"] }]
1422
- }], ctorParameters: function () { return []; }, propDecorators: { size: [{
1423
- type: Input
1424
- }], color: [{
1425
- type: Input
1426
- }], disabled: [{
1427
- type: Input
1428
- }], busy: [{
1429
- type: Input
1430
- }], matIcon: [{
1431
- type: Input
1432
- }], class: [{
1433
- type: HostBinding,
1434
- args: ['class']
1435
- }] } });
1436
-
1437
- class DialogComponent {
1438
- constructor(dialogRef) {
1439
- this.dialogRef = dialogRef;
1440
- this.title = '';
1441
- this.draggable = false; // true;
1442
- this.hideCloseButton = false;
1443
- }
1444
- clickClose() {
1445
- if (!this.close) {
1446
- this.dialogRef.close();
1447
- }
1448
- else {
1449
- this.close();
1450
- }
1451
- }
1452
- }
1453
- DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: DialogComponent, deps: [{ token: i1$3.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
1454
- DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: DialogComponent, selector: "ui-dialog", inputs: { title: "title", draggable: "draggable", hideCloseButton: "hideCloseButton", close: "close" }, ngImport: i0, template: "<ui-action-icon *ngIf=\"title && !hideCloseButton\" (click)=\"clickClose()\" class=\"close-icon\" [matIcon]=\"'close'\" [color]=\"'warn'\"></ui-action-icon>\r\n\r\n<ng-container *ngIf=\"title\">\r\n <h1 class=\"draggable\" cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle mat-dialog-title *ngIf=\"draggable\">\r\n {{title}}\r\n </h1>\r\n <h1 mat-dialog-title *ngIf=\"!draggable\">\r\n {{title}}\r\n </h1>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column}::ng-deep .mat-mdc-dialog-container{position:relative;overflow:visible!important}::ng-deep .mat-mdc-dialog-container .mdc-dialog__content{line-height:unset!important;letter-spacing:unset!important;color:unset!important}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-title{font-size:24px;margin:0 0 5px;padding:12px 16px;border-bottom:1px solid transparent}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-title.draggable{cursor:move}::ng-deep .mat-mdc-dialog-container h1{display:flex;align-items:center}::ng-deep .mat-mdc-dialog-container .close-icon{position:absolute;right:16px;top:16px;z-index:1}::ng-deep .mat-mdc-dialog-container [mat-dialog-actions]{display:flex;flex-direction:column;border-top:1px solid transparent;padding:0}::ng-deep .mat-mdc-dialog-container [mat-dialog-actions].mat-dialog-actions{margin:0 -12px -16px}::ng-deep .mat-mdc-dialog-container [mat-dialog-actions] .buttons{display:flex;flex:1 1 auto;justify-content:flex-end;align-items:center;width:100%;padding:8px}::ng-deep .mat-mdc-dialog-container [mat-dialog-actions] .message{flex:1 1 auto;display:flex;flex-wrap:wrap;font-weight:500;font-size:90%;width:100%;padding:6px 8px}::ng-deep .mat-mdc-dialog-container [mat-dialog-content]{position:relative;max-height:calc(100vh - 150px);overflow:auto;scroll-behavior:smooth;display:flex;flex-direction:column;padding:0 6px;outline:none;flex:1}::ng-deep .mat-mdc-dialog-container [mat-dialog-content].mat-dialog-content{margin:0 -12px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: ActionIconComponent, selector: "ui-action-icon", inputs: ["size", "color", "disabled", "busy", "matIcon"] }] });
1455
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: DialogComponent, decorators: [{
1456
- type: Component,
1457
- args: [{ selector: 'ui-dialog', template: "<ui-action-icon *ngIf=\"title && !hideCloseButton\" (click)=\"clickClose()\" class=\"close-icon\" [matIcon]=\"'close'\" [color]=\"'warn'\"></ui-action-icon>\r\n\r\n<ng-container *ngIf=\"title\">\r\n <h1 class=\"draggable\" cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle mat-dialog-title *ngIf=\"draggable\">\r\n {{title}}\r\n </h1>\r\n <h1 mat-dialog-title *ngIf=\"!draggable\">\r\n {{title}}\r\n </h1>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column}::ng-deep .mat-mdc-dialog-container{position:relative;overflow:visible!important}::ng-deep .mat-mdc-dialog-container .mdc-dialog__content{line-height:unset!important;letter-spacing:unset!important;color:unset!important}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-title{font-size:24px;margin:0 0 5px;padding:12px 16px;border-bottom:1px solid transparent}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-title.draggable{cursor:move}::ng-deep .mat-mdc-dialog-container h1{display:flex;align-items:center}::ng-deep .mat-mdc-dialog-container .close-icon{position:absolute;right:16px;top:16px;z-index:1}::ng-deep .mat-mdc-dialog-container [mat-dialog-actions]{display:flex;flex-direction:column;border-top:1px solid transparent;padding:0}::ng-deep .mat-mdc-dialog-container [mat-dialog-actions].mat-dialog-actions{margin:0 -12px -16px}::ng-deep .mat-mdc-dialog-container [mat-dialog-actions] .buttons{display:flex;flex:1 1 auto;justify-content:flex-end;align-items:center;width:100%;padding:8px}::ng-deep .mat-mdc-dialog-container [mat-dialog-actions] .message{flex:1 1 auto;display:flex;flex-wrap:wrap;font-weight:500;font-size:90%;width:100%;padding:6px 8px}::ng-deep .mat-mdc-dialog-container [mat-dialog-content]{position:relative;max-height:calc(100vh - 150px);overflow:auto;scroll-behavior:smooth;display:flex;flex-direction:column;padding:0 6px;outline:none;flex:1}::ng-deep .mat-mdc-dialog-container [mat-dialog-content].mat-dialog-content{margin:0 -12px}\n"] }]
1458
- }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }]; }, propDecorators: { title: [{
1459
- type: Input
1460
- }], draggable: [{
1461
- type: Input
1462
- }], hideCloseButton: [{
1463
- type: Input
1464
- }], close: [{
1465
- type: Input
1466
- }] } });
1467
-
1468
- class MessageBoxModalComponent {
1469
- constructor(dialogRef, sanitizer, data) {
1470
- this.dialogRef = dialogRef;
1471
- this.sanitizer = sanitizer;
1472
- this.data = data;
1473
- this.buttons = [];
1474
- this.hideCloseButton = false;
1475
- this.message = this.sanitizer.bypassSecurityTrustHtml(data.message);
1476
- if (this.data.options.errorMessage) {
1477
- this.errorMessage = this.sanitizer.bypassSecurityTrustHtml(data.options.errorMessage);
1478
- }
1479
- if (this.data.options.errorDetail) {
1480
- this.errorDetail = this.sanitizer.bypassSecurityTrustHtml(data.options.errorDetail);
1481
- }
1482
- if (this.data.options.hideCloseButton !== undefined) {
1483
- this.hideCloseButton = this.data.options.hideCloseButton;
1484
- }
1485
- this.buttons = data.options.buttons ? data.options.buttons : [{ id: 'close', text: 'Close' }];
1486
- this.title = data.options.title;
1487
- }
1488
- close(result) {
1489
- this.dialogRef.close(result);
1490
- }
1491
- }
1492
- MessageBoxModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MessageBoxModalComponent, deps: [{ token: i1$3.MatDialogRef }, { token: i1$2.DomSanitizer }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
1493
- MessageBoxModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: MessageBoxModalComponent, selector: "ui-message-box-modal", ngImport: i0, template: `
1494
- <ui-dialog [title]="title" [hideCloseButton]="hideCloseButton">
1495
- <div mat-dialog-content style="padding: 12px;">
1496
- <div [innerHTML]="message" style="line-height: 24px;"></div>
1497
- <pre *ngIf="errorMessage" [innerHTML]="errorMessage"></pre>
1498
- <pre *ngIf="errorDetail" [innerHTML]="errorDetail"></pre>
1499
- </div>
1500
-
1501
- <div mat-dialog-actions>
1502
- <div class="buttons">
1503
- <ui-button *ngFor="let b of buttons" style="margin-left: 18px;" [color]="b.color || 'primary'" [tabIndex]="-1"
1504
- [kind]="b.kind || 'stroked'" (click)="close(b.id)" [label]="b.text"></ui-button>
1505
- </div>
1506
- </div>
1507
- </ui-dialog>
1508
- `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["type", "matIconPrefix", "label", "disabled", "busy", "kind", "color", "size", "formInvalid"] }, { kind: "component", type: DialogComponent, selector: "ui-dialog", inputs: ["title", "draggable", "hideCloseButton", "close"] }] });
1509
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MessageBoxModalComponent, decorators: [{
1510
- type: Component,
1511
- args: [{
1512
- selector: 'ui-message-box-modal',
1513
- template: `
1514
- <ui-dialog [title]="title" [hideCloseButton]="hideCloseButton">
1515
- <div mat-dialog-content style="padding: 12px;">
1516
- <div [innerHTML]="message" style="line-height: 24px;"></div>
1517
- <pre *ngIf="errorMessage" [innerHTML]="errorMessage"></pre>
1518
- <pre *ngIf="errorDetail" [innerHTML]="errorDetail"></pre>
1519
- </div>
1520
-
1521
- <div mat-dialog-actions>
1522
- <div class="buttons">
1523
- <ui-button *ngFor="let b of buttons" style="margin-left: 18px;" [color]="b.color || 'primary'" [tabIndex]="-1"
1524
- [kind]="b.kind || 'stroked'" (click)="close(b.id)" [label]="b.text"></ui-button>
1525
- </div>
1526
- </div>
1527
- </ui-dialog>
1528
- `
1529
- }]
1530
- }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: i1$2.DomSanitizer }, { type: undefined, decorators: [{
1531
- type: Inject,
1532
- args: [MAT_DIALOG_DATA]
1533
- }] }]; } });
1534
- class MessageBoxService {
1535
- constructor(dialog, translateService) {
1536
- this.dialog = dialog;
1537
- this.translateService = translateService;
1538
- }
1539
- confirm(message, options = {}) {
1540
- const config = new MatDialogConfig();
1541
- config.disableClose = true;
1542
- config.minWidth = '340px';
1543
- config.maxWidth = options.maxWidth || '600px';
1544
- config.width = '40vw';
1545
- config.data = { message, options };
1546
- return this.dialog.open(MessageBoxModalComponent, config).afterClosed();
1547
- }
1548
- confirmDelete(title, message) {
1549
- const options = {
1550
- title,
1551
- buttons: [
1552
- { id: 'cancel', text: this.translateService.instant('ui.messagebox.button.cancel') },
1553
- { id: 'delete', text: this.translateService.instant('ui.messagebox.button.delete'), color: 'warn', kind: 'flat' }
1554
- ]
1555
- };
1556
- // @ts-ignore
1557
- return this.confirm(message, options);
1558
- }
1559
- }
1560
- MessageBoxService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MessageBoxService, deps: [{ token: i1$3.MatDialog }, { token: UI_TRANSLATESERVICE }], target: i0.ɵɵFactoryTarget.Injectable });
1561
- MessageBoxService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MessageBoxService, providedIn: 'root' });
1562
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MessageBoxService, decorators: [{
1563
- type: Injectable,
1564
- args: [{
1565
- providedIn: 'root'
1566
- }]
1567
- }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: undefined, decorators: [{
1568
- type: Inject,
1569
- args: [UI_TRANSLATESERVICE]
1570
- }] }]; } });
1571
-
1572
- class CurrencyComponent extends UiBaseComponent {
1573
- // @HostBinding('class')
1574
- // get sizeClass(): string {
1575
- // return this.size;
1576
- // }
1577
- constructor(controlContainer) {
1578
- super();
1579
- this.controlContainer = controlContainer;
1580
- this.currencies = [];
1581
- this.currencyDisabled = false;
1582
- this.amountHidden = false;
1583
- this.formGroup = new UntypedFormGroup({
1584
- amount: new UntypedFormControl(),
1585
- currency: new UntypedFormControl()
1586
- });
1587
- this.hasFocus = false;
1588
- this.onChange = (value) => { };
1589
- }
1590
- ngOnInit() {
1591
- super.ngOnInit();
1592
- this.formGroup.valueChanges.subscribe(v => this.onChange(v));
1593
- // this.formGroup = new FormGroup({
1594
- // amount: new FormControl(this.control?.value.amount),
1595
- // currency: new FormControl(this.currencies.find(c => c.code === this.control?.value.currency.code))
1596
- // });
1597
- // this.formGroup.valueChanges.subscribe(v => {
1598
- // this.onChange(this.formGroup?.getRawValue());
1599
- // });
1600
- if (this.currencyDisabled) {
1601
- this.formGroup.get('currency')?.disable();
1602
- }
1603
- // this.ngControl.control.statusChanges.subscribe(s => {
1604
- // if (s === 'INVALID') {
1605
- // // this.formGroup?.get('amount')?.setErrors(this.control?.errors || null);
1606
- // this.formGroup?.get('currency')?.markAsTouched();
1607
- // // this.formGroup?.get('currency')?.setErrors(this.control?.errors || null);
1608
- // }
1609
- // if (s === 'DISABLED') {
1610
- // this.formGroup?.disable({emitEvent: false});
1611
- // }
1612
- // if (s === 'VALID') {
1613
- // this.formGroup?.enable({emitEvent: false});
1614
- // if (this.currencyDisabled) {
1615
- // this.formGroup?.get('currency')?.disable({emitEvent: false});
1616
- // }
1617
- // }
1618
- // });
1619
- this.parentFormControl = this.controlContainer.control.get(this.formControlName);
1620
- }
1621
- // bindValidators(validators) {
1622
- // console.log('binding validators', validators);
1623
- // if (this.formGroup) {
1624
- // this.formGroup.get('amount').setValidators(validators);
1625
- // this.formGroup.get('currency').markAsTouched();
1626
- // this.formGroup.get('currency').setErrors(validators);
1627
- // }
1628
- // }
1629
- get isInvalid() {
1630
- return this.parentFormControl.invalid;
1631
- }
1632
- get validationErrors() {
1633
- return this.parentFormControl.errors;
1634
- }
1635
- focusChanged(hasFocus) {
1636
- this.hasFocus = hasFocus;
1637
- }
1638
- registerOnChange(fn) {
1639
- this.onChange = fn;
1640
- }
1641
- registerOnTouched(fn) {
1642
- }
1643
- registerOnValidatorChange(fn) {
1644
- }
1645
- setDisabledState(isDisabled) {
1646
- if (isDisabled) {
1647
- this.formGroup.get('amount').disable();
1648
- if (!this.currencyDisabled) {
1649
- this.formGroup.get('currency').disable();
1650
- }
1651
- }
1652
- else {
1653
- this.formGroup.get('amount').enable();
1654
- if (!this.currencyDisabled) {
1655
- this.formGroup.get('currency').enable();
1656
- }
1657
- }
1658
- }
1659
- validate(control) {
1660
- return undefined;
1661
- }
1662
- writeValue(obj) {
1663
- this.formGroup.setValue(obj);
1664
- }
1665
- }
1666
- CurrencyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CurrencyComponent, deps: [{ token: i1$1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
1667
- CurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: CurrencyComponent, selector: "ui-currency", inputs: { currencies: "currencies", currencyDisabled: "currencyDisabled", formControlName: "formControlName", amountHidden: "amountHidden" }, host: { properties: { "class.amount-hidden": "this.amountHidden", "class.focus": "this.hasFocus" } }, providers: [{
1668
- provide: NG_VALUE_ACCESSOR,
1669
- multi: true,
1670
- useExisting: CurrencyComponent
1671
- }, {
1672
- provide: NG_VALIDATORS,
1673
- multi: true,
1674
- useExisting: CurrencyComponent
1675
- }
1676
- ], usesInheritance: true, ngImport: i0, template: "<ui-base-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [formGroup]=\"formGroup\">\r\n <ui-input *ngIf=\"!amountHidden\" [formControlName]=\"'amount'\" [placeholder]=\"placeholder\" #input [useInputMessages]=\"'never'\" (focusChanged)=\"focusChanged($event)\"></ui-input>\r\n <ui-select [formControlName]=\"'currency'\" [displayAttribute]=\"'symbol'\" [options]=\"currencies\" [useInputMessages]=\"'never'\"></ui-select>\r\n</div>\r\n\r\n</ui-base-layout>\r\n\r\n", styles: [":host{display:block}:host.amount-hidden ui-select{padding-left:.7em}:host .control-container{display:flex;border-style:solid}:host .control-container ui-input{flex:1 1 100%}:host .control-container ui-select{flex-grow:0;flex-shrink:1}:host ::ng-deep .mat-mdc-select-trigger{padding-left:.2em}:host ::ng-deep input{text-align:right;padding-right:.2em}:host ::ng-deep input,:host ::ng-deep .mat-mdc-select-trigger{border-width:0}:host.large ui-select{flex-basis:4.5em}:host.larger ui-select{flex-basis:5em}:host.normal ui-select{flex-basis:5.5em}:host.smaller ui-select{flex-basis:6em}:host.small ui-select{flex-basis:6em}:host.amount-hidden.large ui-select{flex-basis:5.2em}:host.amount-hidden.larger ui-select{flex-basis:4.7em}:host.amount-hidden.normal ui-select{flex-basis:4.2em}:host.amount-hidden.smaller ui-select{flex-basis:3.8em}:host.amount-hidden.smaller ui-select ::ng-deep .mat-mdc-select-trigger{width:3.2em}:host.amount-hidden.small ui-select{flex-basis:3.5em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputComponent, selector: "ui-input", inputs: ["prefix", "suffix", "type", "clearButton", "disableUserInput", "centered"], outputs: ["focusChanged", "keyPressed"] }, { kind: "component", type: SelectComponent, selector: "ui-select", inputs: ["multiple", "triggerFormatter", "valueAttribute", "resetText", "displayAttribute", "options", "optionFormatter", "optionTemplateRef", "triggerTemplateRef", "panelClass", "allowEmptySelection"] }, { kind: "component", type: UiBaseLayoutComponent, selector: "ui-base-layout", inputs: ["ctx"] }] });
1677
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CurrencyComponent, decorators: [{
1678
- type: Component,
1679
- args: [{ selector: 'ui-currency', providers: [{
1680
- provide: NG_VALUE_ACCESSOR,
1681
- multi: true,
1682
- useExisting: CurrencyComponent
1683
- }, {
1684
- provide: NG_VALIDATORS,
1685
- multi: true,
1686
- useExisting: CurrencyComponent
1687
- }
1688
- ], template: "<ui-base-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [formGroup]=\"formGroup\">\r\n <ui-input *ngIf=\"!amountHidden\" [formControlName]=\"'amount'\" [placeholder]=\"placeholder\" #input [useInputMessages]=\"'never'\" (focusChanged)=\"focusChanged($event)\"></ui-input>\r\n <ui-select [formControlName]=\"'currency'\" [displayAttribute]=\"'symbol'\" [options]=\"currencies\" [useInputMessages]=\"'never'\"></ui-select>\r\n</div>\r\n\r\n</ui-base-layout>\r\n\r\n", styles: [":host{display:block}:host.amount-hidden ui-select{padding-left:.7em}:host .control-container{display:flex;border-style:solid}:host .control-container ui-input{flex:1 1 100%}:host .control-container ui-select{flex-grow:0;flex-shrink:1}:host ::ng-deep .mat-mdc-select-trigger{padding-left:.2em}:host ::ng-deep input{text-align:right;padding-right:.2em}:host ::ng-deep input,:host ::ng-deep .mat-mdc-select-trigger{border-width:0}:host.large ui-select{flex-basis:4.5em}:host.larger ui-select{flex-basis:5em}:host.normal ui-select{flex-basis:5.5em}:host.smaller ui-select{flex-basis:6em}:host.small ui-select{flex-basis:6em}:host.amount-hidden.large ui-select{flex-basis:5.2em}:host.amount-hidden.larger ui-select{flex-basis:4.7em}:host.amount-hidden.normal ui-select{flex-basis:4.2em}:host.amount-hidden.smaller ui-select{flex-basis:3.8em}:host.amount-hidden.smaller ui-select ::ng-deep .mat-mdc-select-trigger{width:3.2em}:host.amount-hidden.small ui-select{flex-basis:3.5em}\n"] }]
1689
- }], ctorParameters: function () { return [{ type: i1$1.ControlContainer, decorators: [{
1690
- type: Optional
1691
- }, {
1692
- type: Host
1693
- }, {
1694
- type: SkipSelf
1695
- }] }]; }, propDecorators: { currencies: [{
1696
- type: Input
1697
- }], currencyDisabled: [{
1698
- type: Input
1699
- }], formControlName: [{
1700
- type: Input
1701
- }], amountHidden: [{
1702
- type: HostBinding,
1703
- args: ['class.amount-hidden']
1704
- }, {
1705
- type: Input
1706
- }], hasFocus: [{
1707
- type: HostBinding,
1708
- args: ['class.focus']
1709
- }] } });
1710
-
1711
- class CheckboxComponent extends UiSimpleComponent {
1712
- constructor(ngControl) {
1713
- super(ngControl);
1714
- this.ngControl = ngControl;
1715
- this.color = 'primary';
1716
- this.useInputMessages = 'never';
1717
- }
1718
- ngOnInit() {
1719
- super.ngOnInit();
1720
- if (this.label) {
1721
- this.text = this.label;
1722
- this.label = undefined;
1723
- }
1724
- }
1725
- setDisabledState(isDisabled) {
1726
- }
1727
- }
1728
- CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CheckboxComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
1729
- CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: CheckboxComponent, selector: "ui-checkbox", inputs: { color: "color", useInputMessages: "useInputMessages" }, usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n <div class=\"control-container\">\r\n <mat-checkbox [formControl]=\"componentFormControl\" [color]=\"color\" [class]=\"size\">\r\n <div *ngIf=\"!text\"><ng-content></ng-content></div>\r\n <div *ngIf=\"text\" [innerHTML]=\"text\"></div>\r\n <div *ngIf=\"hint\" class=\"hint\" [innerHTML]=\"hint\"></div>\r\n </mat-checkbox>\r\n </div>\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex}:host ::ng-deep .mat-checkbox{display:flex}:host ::ng-deep .mat-checkbox-inner-container{width:1em;height:1em;margin-right:.3em;margin-left:.2em}:host ::ng-deep .mat-checkbox-layout .mat-checkbox-label{line-height:1.1em;white-space:break-spaces}:host ::ng-deep .mat-checkbox-layout .mat-checkbox-label .hint{font-size:.8em;padding-top:.1em;padding-left:.2em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] });
1730
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CheckboxComponent, decorators: [{
1731
- type: Component,
1732
- args: [{ selector: 'ui-checkbox', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n <div class=\"control-container\">\r\n <mat-checkbox [formControl]=\"componentFormControl\" [color]=\"color\" [class]=\"size\">\r\n <div *ngIf=\"!text\"><ng-content></ng-content></div>\r\n <div *ngIf=\"text\" [innerHTML]=\"text\"></div>\r\n <div *ngIf=\"hint\" class=\"hint\" [innerHTML]=\"hint\"></div>\r\n </mat-checkbox>\r\n </div>\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex}:host ::ng-deep .mat-checkbox{display:flex}:host ::ng-deep .mat-checkbox-inner-container{width:1em;height:1em;margin-right:.3em;margin-left:.2em}:host ::ng-deep .mat-checkbox-layout .mat-checkbox-label{line-height:1.1em;white-space:break-spaces}:host ::ng-deep .mat-checkbox-layout .mat-checkbox-label .hint{font-size:.8em;padding-top:.1em;padding-left:.2em}\n"] }]
1733
- }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
1734
- type: Optional
1735
- }, {
1736
- type: Self
1737
- }] }]; }, propDecorators: { color: [{
1738
- type: Input
1739
- }], useInputMessages: [{
1740
- type: Input
1741
- }] } });
1742
-
1743
- class AvatarComponent {
1744
- constructor() {
1745
- this.user = {};
1746
- this.size = 'normal';
1747
- }
1748
- get contrast() {
1749
- const hexCode = this.user.shortColour.substring(1, 7);
1750
- const hexR = parseInt(hexCode.substring(0, 2), 16);
1751
- const hexG = parseInt(hexCode.substring(2, 4), 16);
1752
- const hexB = parseInt(hexCode.substring(4, 6), 16);
1753
- const contrastRatio = hexR * 0.299 + hexG * 0.587 + hexB * 0.114;
1754
- return contrastRatio >= 200 ? 'black' : 'white';
1755
- }
1756
- }
1757
- AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1758
- AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: AvatarComponent, selector: "ui-avatar", inputs: { user: "user", srcOptions: "srcOptions", size: "size" }, host: { properties: { "class": "this.size" } }, ngImport: i0, template: "<ui-file *ngIf=\"user.avatar || (!user.avatar && !user.shortName)\" [fileSize]=\"'avatar-' + size\" [srcData]=\"user.avatar || { mimeType: 'image/png'}\" [srcOptions]=\"srcOptions\" ></ui-file>\r\n<div *ngIf=\"!user.avatar && user.shortName\" [ngStyle]=\"{backgroundColor: user.shortColour, color: contrast}\">\r\n {{ user.shortName }}\r\n</div>\r\n", styles: [":host{display:block;flex:0 0 auto}:host.mini{height:20px;width:20px}:host.mini div{font-size:10px}:host.small{height:24px;width:24px}:host.small div{font-size:13px}:host.smaller{height:50px;width:50px}:host.smaller div{font-size:1.5em}:host.normal{height:74px;width:74px}:host.normal div{font-size:37px}:host.bigger{height:100px;width:100px}:host.bigger div{font-size:50px}:host.big{height:150px;width:150px}:host.big div{font-size:75px}:host ui-file ::ng-deep img{border-radius:50%}:host div{display:flex;align-items:center;justify-content:center;width:100%;font-weight:700;color:#fff;background-size:cover;height:100%;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FileComponent, selector: "ui-file", inputs: ["fileSize", "srcOptions", "srcData", "srcUrl"] }] });
1759
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: AvatarComponent, decorators: [{
1760
- type: Component,
1761
- args: [{ selector: 'ui-avatar', template: "<ui-file *ngIf=\"user.avatar || (!user.avatar && !user.shortName)\" [fileSize]=\"'avatar-' + size\" [srcData]=\"user.avatar || { mimeType: 'image/png'}\" [srcOptions]=\"srcOptions\" ></ui-file>\r\n<div *ngIf=\"!user.avatar && user.shortName\" [ngStyle]=\"{backgroundColor: user.shortColour, color: contrast}\">\r\n {{ user.shortName }}\r\n</div>\r\n", styles: [":host{display:block;flex:0 0 auto}:host.mini{height:20px;width:20px}:host.mini div{font-size:10px}:host.small{height:24px;width:24px}:host.small div{font-size:13px}:host.smaller{height:50px;width:50px}:host.smaller div{font-size:1.5em}:host.normal{height:74px;width:74px}:host.normal div{font-size:37px}:host.bigger{height:100px;width:100px}:host.bigger div{font-size:50px}:host.big{height:150px;width:150px}:host.big div{font-size:75px}:host ui-file ::ng-deep img{border-radius:50%}:host div{display:flex;align-items:center;justify-content:center;width:100%;font-weight:700;color:#fff;background-size:cover;height:100%;border-radius:50%}\n"] }]
1762
- }], ctorParameters: function () { return []; }, propDecorators: { user: [{
1763
- type: Input
1764
- }], srcOptions: [{
1765
- type: Input
1766
- }], size: [{
1767
- type: HostBinding,
1768
- args: ['class']
1769
- }, {
1770
- type: Input
1771
- }] } });
1772
-
1773
- class SubmitButtonComponent {
1774
- constructor(dialogRef, controlContainer) {
1775
- this.dialogRef = dialogRef;
1776
- this.controlContainer = controlContainer;
1777
- this.busy = false;
1778
- this.disabled = false;
1779
- this.formGroups = [];
1780
- this.label = 'Save';
1781
- this.prependCloseButton = true;
1782
- }
1783
- ngOnInit() {
1784
- if (this.formInvalid === undefined) {
1785
- if (this.formGroups === undefined && this.controlContainer && this.controlContainer.control instanceof UntypedFormGroup) {
1786
- this.formGroups = this.controlContainer.control;
1787
- }
1788
- if (!Array.isArray(this.formGroups)) {
1789
- this.formGroups = [this.formGroups];
1790
- }
1791
- }
1792
- }
1793
- get formsValid() {
1794
- if (this.formInvalid !== undefined) {
1795
- return !this.formInvalid;
1796
- }
1797
- else {
1798
- return !this.formGroups.find(f => f.invalid);
1799
- }
1800
- }
1801
- doSubmit() {
1802
- this.formGroups.forEach(f => f.markAllAsTouched());
1803
- if (this.formsValid && this.submit) {
1804
- this.submit();
1805
- }
1806
- }
1807
- }
1808
- SubmitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: SubmitButtonComponent, deps: [{ token: i1$3.MatDialogRef }, { token: i1$1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
1809
- SubmitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: SubmitButtonComponent, selector: "ui-submit-button", inputs: { busy: "busy", disabled: "disabled", formGroups: "formGroups", label: "label", submit: "submit", formInvalid: "formInvalid", prependCloseButton: "prependCloseButton" }, host: { properties: { "class.with-close": "this.prependCloseButton" } }, ngImport: i0, template: "<ui-button *ngIf=\"prependCloseButton\" [label]=\"'Close'\" (click)=\"dialogRef.close()\"></ui-button>\r\n\r\n<ui-button [busy]=\"busy\"\r\n [disabled]=\"disabled || busy\" [type]=\"'submit'\"\r\n [formInvalid]=\"!formsValid\"\r\n [label]=\"label\" (click)=\"doSubmit()\"></ui-button>\r\n", styles: [":host.with-close{display:flex;justify-content:flex-end;width:100%;margin-left:0!important}:host.with-close ui-button{margin-left:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["type", "matIconPrefix", "label", "disabled", "busy", "kind", "color", "size", "formInvalid"] }] });
1810
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: SubmitButtonComponent, decorators: [{
1811
- type: Component,
1812
- args: [{ selector: 'ui-submit-button', template: "<ui-button *ngIf=\"prependCloseButton\" [label]=\"'Close'\" (click)=\"dialogRef.close()\"></ui-button>\r\n\r\n<ui-button [busy]=\"busy\"\r\n [disabled]=\"disabled || busy\" [type]=\"'submit'\"\r\n [formInvalid]=\"!formsValid\"\r\n [label]=\"label\" (click)=\"doSubmit()\"></ui-button>\r\n", styles: [":host.with-close{display:flex;justify-content:flex-end;width:100%;margin-left:0!important}:host.with-close ui-button{margin-left:12px}\n"] }]
1813
- }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: i1$1.ControlContainer, decorators: [{
1814
- type: Optional
1815
- }, {
1816
- type: Host
1817
- }, {
1818
- type: SkipSelf
1819
- }] }]; }, propDecorators: { busy: [{
1820
- type: Input
1821
- }], disabled: [{
1822
- type: Input
1823
- }], formGroups: [{
1824
- type: Input
1825
- }], label: [{
1826
- type: Input
1827
- }], submit: [{
1828
- type: Input
1829
- }], formInvalid: [{
1830
- type: Input
1831
- }], prependCloseButton: [{
1832
- type: HostBinding,
1833
- args: ['class.with-close']
1834
- }, {
1835
- type: Input
1836
- }] } });
1837
-
1838
- class TextAreaComponent extends UiSimpleComponent {
1839
- constructor(ngControl /*, private _ngZone: NgZone, private cdr: ChangeDetectorRef*/) {
1840
- super(ngControl);
1841
- this.ngControl = ngControl;
1842
- this.rows = 5;
1843
- this.autoResize = false;
1844
- this.lastClientHeight = -1;
1845
- this.focusChanged = new EventEmitter();
1846
- }
1847
- focus() {
1848
- this.textarea.nativeElement.focus();
1849
- }
1850
- setDisabledState(isDisabled) {
1851
- }
1852
- onFocus(focus) {
1853
- this.focusChanged.emit(focus);
1854
- }
1855
- }
1856
- TextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TextAreaComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
1857
- TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: TextAreaComponent, selector: "ui-text-area", inputs: { rows: "rows", autoResize: "autoResize" }, outputs: { focusChanged: "focusChanged" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"input-wrapper\">\r\n <ng-container *ngIf=\"componentFormControl\">\r\n <textarea *ngIf=\"autoResize \"#textarea matInput\r\n cdkTextareaAutosize cdkAutosizeMinRows=\"rows\"\r\n class=\"autoresize\"\r\n [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" [rows]=\"rows\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\"></textarea>\r\n <textarea *ngIf=\"!autoResize \"#textarea matInput\r\n [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" [rows]=\"rows\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\"></textarea>\r\n </ng-container>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{width:100%}:host .control-container{width:100%;position:relative}:host ::ng-deep [slot=suffix]{position:absolute;cursor:pointer;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]{position:absolute;cursor:pointer;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep input.has-suffix,:host ::ng-deep textarea.has-suffix,:host ::ng-deep ::ng-deep .mat-select-trigger.has-suffix,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger.has-suffix{padding-right:1.8em}:host ::ng-deep input.centered,:host ::ng-deep textarea.centered,:host ::ng-deep ::ng-deep .mat-select-trigger.centered,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger.centered{text-align:center}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] });
1858
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TextAreaComponent, decorators: [{
1859
- type: Component,
1860
- args: [{ selector: 'ui-text-area', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"input-wrapper\">\r\n <ng-container *ngIf=\"componentFormControl\">\r\n <textarea *ngIf=\"autoResize \"#textarea matInput\r\n cdkTextareaAutosize cdkAutosizeMinRows=\"rows\"\r\n class=\"autoresize\"\r\n [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" [rows]=\"rows\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\"></textarea>\r\n <textarea *ngIf=\"!autoResize \"#textarea matInput\r\n [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" [rows]=\"rows\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\"></textarea>\r\n </ng-container>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{width:100%}:host .control-container{width:100%;position:relative}:host ::ng-deep [slot=suffix]{position:absolute;cursor:pointer;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]{position:absolute;cursor:pointer;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep input.has-suffix,:host ::ng-deep textarea.has-suffix,:host ::ng-deep ::ng-deep .mat-select-trigger.has-suffix,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger.has-suffix{padding-right:1.8em}:host ::ng-deep input.centered,:host ::ng-deep textarea.centered,:host ::ng-deep ::ng-deep .mat-select-trigger.centered,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger.centered{text-align:center}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n"] }]
1861
- }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
1862
- type: Optional
1863
- }, {
1864
- type: Self
1865
- }] }]; }, propDecorators: { rows: [{
1866
- type: Input
1867
- }], autoResize: [{
1868
- type: Input
1869
- }], textarea: [{
1870
- type: ViewChild,
1871
- args: ['textarea']
1872
- }], focusChanged: [{
1873
- type: Output
1874
- }] } });
1875
-
1876
- class DateComponent extends UiSimpleComponent {
1877
- constructor(ngControl) {
1878
- super(ngControl);
1879
- this.ngControl = ngControl;
1880
- // @Input() placeholder: string | undefined;
1881
- // @Input() control;
1882
- // // @Input() controlName;
1883
- // @Input() label;
1884
- // @Input() type;
1885
- // @Input() floatLabel;
1886
- this.doKeyup = new EventEmitter();
1887
- this.controlTypeName = 'date';
1888
- this.opening = false;
1889
- }
1890
- open() {
1891
- // this.opening = true;
1892
- // this.picker.open();
1893
- // setTimeout(() => {
1894
- // this.input.nativeElement.focus();
1895
- // this.opening = false;
1896
- // }); // , 150);
1897
- }
1898
- close() {
1899
- // if (!this.opening) {
1900
- // this.picker.close();h
1901
- // }
1902
- }
1903
- keyup() {
1904
- this.doKeyup.emit();
1905
- // this.onChange(this.control.value);
1906
- }
1907
- writeValue(obj) { }
1908
- registerOnChange(fn) {
1909
- this.onChange = fn;
1910
- }
1911
- registerOnTouched(fn) { }
1912
- setDisabledState(isDisabled) { }
1913
- }
1914
- DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: DateComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
1915
- DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: DateComponent, selector: "ui-date", outputs: { doKeyup: "doKeyup" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\">\r\n <input #input class=\"has-suffix\" (blur)=\"close()\" (focus)=\"open()\" [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [formControl]=\"componentFormControl\" (keyup)=\"keyup()\">\r\n <mat-icon slot=\"suffix\" (click)=\"picker.open()\">today</mat-icon>\r\n <mat-datepicker #picker></mat-datepicker>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{width:100%}:host .control-container{width:100%;position:relative}:host ::ng-deep [slot=suffix]{position:absolute;cursor:pointer;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]{position:absolute;cursor:pointer;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep input.has-suffix,:host ::ng-deep textarea.has-suffix,:host ::ng-deep ::ng-deep .mat-select-trigger.has-suffix,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger.has-suffix{padding-right:1.8em}:host ::ng-deep input.centered,:host ::ng-deep textarea.centered,:host ::ng-deep ::ng-deep .mat-select-trigger.centered,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger.centered{text-align:center}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] });
1916
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: DateComponent, decorators: [{
1917
- type: Component,
1918
- args: [{ selector: 'ui-date', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\">\r\n <input #input class=\"has-suffix\" (blur)=\"close()\" (focus)=\"open()\" [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [formControl]=\"componentFormControl\" (keyup)=\"keyup()\">\r\n <mat-icon slot=\"suffix\" (click)=\"picker.open()\">today</mat-icon>\r\n <mat-datepicker #picker></mat-datepicker>\r\n</div>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{width:100%}:host .control-container{width:100%;position:relative}:host ::ng-deep [slot=suffix]{position:absolute;cursor:pointer;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]{position:absolute;cursor:pointer;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep input.has-suffix,:host ::ng-deep textarea.has-suffix,:host ::ng-deep ::ng-deep .mat-select-trigger.has-suffix,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger.has-suffix{padding-right:1.8em}:host ::ng-deep input.centered,:host ::ng-deep textarea.centered,:host ::ng-deep ::ng-deep .mat-select-trigger.centered,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger.centered{text-align:center}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n"] }]
1919
- }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
1920
- type: Optional
1921
- }, {
1922
- type: Self
1923
- }] }]; }, propDecorators: { doKeyup: [{
1924
- type: Output
1925
- }], picker: [{
1926
- type: ViewChild,
1927
- args: ['picker']
1928
- }], input: [{
1929
- type: ViewChild,
1930
- args: ['input']
1931
- }] } });
1932
-
1933
- class TableComponent {
1934
- constructor(/*private persistService: PersistService, */ domSanitizer) {
1935
- this.domSanitizer = domSanitizer;
1936
- this.columns = [];
1937
- this.rowTemplates = {};
1938
- this.headerTemplates = {};
1939
- this.stateStoreKey = '';
1940
- }
1941
- get columnList() {
1942
- return this.columns.map(c => c.name);
1943
- }
1944
- ngOnInit() {
1945
- this.options = { ...{ sticky: false }, ...this.options };
1946
- if (this.dataSource) {
1947
- // if (this.stateStoreKey !== '') {
1948
- // const storeKey = this.stateStoreKey + '.sort';
1949
- // const ms = this.persistService.get(storeKey, { active: '', direction: ''});
1950
- // this.matSort.active = ms.active;
1951
- // this.matSort.direction = ms.direction;
1952
- // this.matSort.sortChange.subscribe(sc => {
1953
- // this.persistService.set(storeKey, sc.direction === '' ? { active: '', direction: ''} : sc);
1954
- // });
1955
- // }
1956
- if (this.columns.find(c => c.sortable !== undefined)) {
1957
- this.dataSource.sortData = (rows, sort) => {
1958
- if (sort.direction) {
1959
- const sortColumn = this.columns.find(c => c.name === sort.active);
1960
- if (sortColumn) {
1961
- const res = sort.direction === 'asc' ? 1 : -1;
1962
- return rows.sort((r1, r2) => {
1963
- if (sortColumn.sortable === true) {
1964
- return r1[sortColumn.name] < r2[sortColumn.name] ? -res : res;
1965
- }
1966
- if (typeof sortColumn.sortable === 'function') {
1967
- return sortColumn.sortable(r1, sort.direction) < sortColumn.sortable(r2, sort.direction) ? -res : res;
1968
- }
1969
- return 0;
1970
- });
1971
- }
1972
- }
1973
- return rows;
1974
- };
1975
- }
1976
- }
1977
- }
1978
- ngAfterViewInit() {
1979
- this.dataSource.sort = this.matSort;
1980
- }
1981
- display(row, col) {
1982
- if (col.formatter) {
1983
- return this.domSanitizer.bypassSecurityTrustHtml(col.formatter(row));
1984
- }
1985
- else {
1986
- return row[col.name];
1987
- }
1988
- }
1989
- rowClicked(row) {
1990
- if (this.rowAction) {
1991
- this.rowAction(row);
1992
- }
1993
- }
1994
- }
1995
- TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TableComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
1996
- TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: TableComponent, selector: "ui-table", inputs: { columns: "columns", dataSource: "dataSource", options: "options", rowTemplates: "rowTemplates", headerTemplates: "headerTemplates", stateStoreKey: "stateStoreKey", rowAction: "rowAction", matSortActive: "matSortActive", matSortDirection: "matSortDirection" }, viewQueries: [{ propertyName: "matSort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table mat-table matSort [dataSource]=\"dataSource\" style=\"width: 100%\" [matSortActive]=\"matSortActive\" [matSortDirection]=\"matSortDirection\">\n\n <ng-container *ngFor=\"let c of columns\" [matColumnDef]=\"c.name\">\n\n <ng-container *ngIf=\"c.sortable\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>{{c.label}}</th>\n </ng-container>\n\n <ng-container *ngIf=\"!c.sortable\">\n <ng-container *ngIf=\"!headerTemplates[c.name]\">\n <th mat-header-cell *matHeaderCellDef>{{c.label}}</th>\n </ng-container>\n\n <ng-container *ngIf=\"headerTemplates[c.name]\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-template [ngTemplateOutlet]=\"headerTemplates[c.name]\"></ng-template>\n </th>\n </ng-container>\n </ng-container>\n\n <td mat-cell *matCellDef=\"let element\" [colSpan]=\"c.colSpan ? c.colSpan(element) : 1\" [class]=\"c.cellClass ? c.cellClass(element) : ''\">\n <ng-container *ngIf=\"!c.colSpan || c.colSpan(element) > 0\">\n <ng-container *ngIf=\"rowTemplates[c.name]\">\n <ng-template [ngTemplateOutlet]=\"rowTemplates[c.name]\" [ngTemplateOutletContext]=\"{row:element}\" ></ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"!rowTemplates[c.name]\">\n <span [innerHTML]=\"display(element, c)\"></span>\n </ng-container>\n </ng-container>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnList; sticky: options?.sticky\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnList;\" (click)=\"rowClicked(row)\"></tr>\n</table>\n", styles: [":host table{width:100%}:host td[colspan=\"0\"]{display:none}:host .mat-header-cell{font-weight:400;font-size:14px}:host.inverse .mat-header-row{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }] });
1997
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: TableComponent, decorators: [{
1998
- type: Component,
1999
- args: [{ selector: 'ui-table', template: "<table mat-table matSort [dataSource]=\"dataSource\" style=\"width: 100%\" [matSortActive]=\"matSortActive\" [matSortDirection]=\"matSortDirection\">\n\n <ng-container *ngFor=\"let c of columns\" [matColumnDef]=\"c.name\">\n\n <ng-container *ngIf=\"c.sortable\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>{{c.label}}</th>\n </ng-container>\n\n <ng-container *ngIf=\"!c.sortable\">\n <ng-container *ngIf=\"!headerTemplates[c.name]\">\n <th mat-header-cell *matHeaderCellDef>{{c.label}}</th>\n </ng-container>\n\n <ng-container *ngIf=\"headerTemplates[c.name]\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-template [ngTemplateOutlet]=\"headerTemplates[c.name]\"></ng-template>\n </th>\n </ng-container>\n </ng-container>\n\n <td mat-cell *matCellDef=\"let element\" [colSpan]=\"c.colSpan ? c.colSpan(element) : 1\" [class]=\"c.cellClass ? c.cellClass(element) : ''\">\n <ng-container *ngIf=\"!c.colSpan || c.colSpan(element) > 0\">\n <ng-container *ngIf=\"rowTemplates[c.name]\">\n <ng-template [ngTemplateOutlet]=\"rowTemplates[c.name]\" [ngTemplateOutletContext]=\"{row:element}\" ></ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"!rowTemplates[c.name]\">\n <span [innerHTML]=\"display(element, c)\"></span>\n </ng-container>\n </ng-container>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnList; sticky: options?.sticky\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnList;\" (click)=\"rowClicked(row)\"></tr>\n</table>\n", styles: [":host table{width:100%}:host td[colspan=\"0\"]{display:none}:host .mat-header-cell{font-weight:400;font-size:14px}:host.inverse .mat-header-row{background-color:#fff}\n"] }]
2000
- }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { columns: [{
2001
- type: Input
2002
- }], dataSource: [{
2003
- type: Input
2004
- }], options: [{
2005
- type: Input
2006
- }], rowTemplates: [{
2007
- type: Input
2008
- }], headerTemplates: [{
2009
- type: Input
2010
- }], stateStoreKey: [{
2011
- type: Input
2012
- }], rowAction: [{
2013
- type: Input
2014
- }], matSortActive: [{
2015
- type: Input
2016
- }], matSortDirection: [{
2017
- type: Input
2018
- }], matSort: [{
2019
- type: ViewChild,
2020
- args: [MatSort]
2021
- }] } });
2022
-
2023
- class BurgerComponent {
2024
- constructor() {
2025
- this.open = false;
2026
- }
2027
- ngOnInit() {
2028
- }
2029
- }
2030
- BurgerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: BurgerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2031
- BurgerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: BurgerComponent, selector: "ui-burger", inputs: { open: "open" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: " <span></span>\r\n <span></span>\r\n <span></span>\r\n <span></span>\r\n", styles: [":host{width:40px;height:35px;position:relative;margin:10px auto 0;transform:rotate(0);transition:.5s ease-in-out;cursor:pointer;display:block}:host span{display:block;position:absolute;height:4px;width:100%;border-radius:9px;opacity:1;left:0;transform:rotate(0);transition:.25s ease-in-out}:host span:nth-child(1){top:0}:host span:nth-child(2),:host span:nth-child(3){top:12px}:host span:nth-child(4){top:24px}:host.open span:nth-child(1){top:12px;width:0%;left:50%}:host.open span:nth-child(2){transform:rotate(45deg)}:host.open span:nth-child(3){transform:rotate(-45deg)}:host.open span:nth-child(4){top:18px;width:0;left:50%}\n"] });
2032
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: BurgerComponent, decorators: [{
2033
- type: Component,
2034
- args: [{ selector: 'ui-burger', template: " <span></span>\r\n <span></span>\r\n <span></span>\r\n <span></span>\r\n", styles: [":host{width:40px;height:35px;position:relative;margin:10px auto 0;transform:rotate(0);transition:.5s ease-in-out;cursor:pointer;display:block}:host span{display:block;position:absolute;height:4px;width:100%;border-radius:9px;opacity:1;left:0;transform:rotate(0);transition:.25s ease-in-out}:host span:nth-child(1){top:0}:host span:nth-child(2),:host span:nth-child(3){top:12px}:host span:nth-child(4){top:24px}:host.open span:nth-child(1){top:12px;width:0%;left:50%}:host.open span:nth-child(2){transform:rotate(45deg)}:host.open span:nth-child(3){transform:rotate(-45deg)}:host.open span:nth-child(4){top:18px;width:0;left:50%}\n"] }]
2035
- }], ctorParameters: function () { return []; }, propDecorators: { open: [{
2036
- type: HostBinding,
2037
- args: ['class.open']
2038
- }, {
2039
- type: Input
2040
- }] } });
2041
-
2042
- class AutocompleteComponent extends UiBaseComponent {
2043
- constructor(controlContainer,
2044
- // @Optional() @Self() public ngControl: NgControl,
2045
- cdr) {
2046
- super();
2047
- this.controlContainer = controlContainer;
2048
- this.cdr = cdr;
2049
- this.SHOWN_USERS_DELTA = 10;
2050
- this.multiple = true;
2051
- this.allowNew = false;
2052
- this.displayAttribute = 'name';
2053
- this.idAttribute = 'id';
2054
- this.filteredOptions = [];
2055
- this.filteredMaxItemsShown = this.SHOWN_USERS_DELTA;
2056
- // skipBlur = false;
2057
- // typingStarted = false;
2058
- this.messageShown = false;
2059
- this.alreadyAdded = false;
2060
- this.optionsVisible = false;
2061
- this.inputFocused = false;
2062
- this.inputControl = new UntypedFormControl('');
2063
- this.checkboxSelection = new Set();
2064
- this.optionDisabled = () => false;
2065
- this.optionFormatter = (o) => o[this.displayAttribute];
2066
- }
2067
- buildSearchableOptions() {
2068
- return this.options.map(o => ({
2069
- ...o,
2070
- unselectable: this.optionDisabled(o),
2071
- searchString: `${this.optionFormatter(o)}`.toLowerCase()
2072
- }));
2073
- }
2074
- filterOptions(text) {
2075
- this.filteredMaxItemsShown = this.SHOWN_USERS_DELTA;
2076
- return this.searchableOptions.filter(u => u.searchString.includes(text));
2077
- }
2078
- ngOnInit() {
2079
- // console.log('ngoninit');
2080
- super.ngOnInit();
2081
- // if (this.formControlName && this.controlContainer.control) {
2082
- // this.control = this.controlContainer.control.get(this.formControlName) as FormControl;
2083
- // }
2084
- //
2085
- // this.user = this.control.value;
2086
- // this.value = this.control.value;
2087
- this.searchableOptions = this.buildSearchableOptions();
2088
- // if (this.control.disabled) {
2089
- // this.inputControl.disable();
2090
- // }
2091
- // this.control.statusChanges.subscribe(v => {
2092
- // if (v === 'DISABLED') {
2093
- // this.inputControl.disable();
2094
- // }
2095
- // if (v === 'VALID') {
2096
- // this.inputControl.enable();
2097
- // }
2098
- // });
2099
- this.inputControl.valueChanges.pipe(debounceTime(200)).subscribe(v => {
2100
- const lcv = v.toLowerCase();
2101
- this.filteredOptions = this.filterOptions(lcv);
2102
- if (this.filteredOptions.length > 0) {
2103
- this.focusedOption = this.filteredOptions[0];
2104
- }
2105
- else {
2106
- this.focusedOption = undefined;
2107
- }
2108
- if (v === '') {
2109
- this.focusedOption = undefined;
2110
- this.selectedOption = undefined;
2111
- }
2112
- // if (v !== '') {
2113
- // if (this.newUsername === v) {
2114
- // this.selectedUser = {id: null, fullName: v};
2115
- // this.initialUser = this.selectedUser;
2116
- // } else {
2117
- // if (this.filteredGroupsAndUsers.length > 0) {
2118
- // this.focusedGroup = this.filteredGroupsAndUsers[0];
2119
- // this.focusedUser = this.focusedGroup.filteredUsers[0];
2120
- // } else {
2121
- // this.focusedGroup = null;
2122
- // this.focusedUser = null;
2123
- // }
2124
- // if ((this.focusedUser && !this.focusedUser.unselectable) || this.focusedUser === this.initialUser) {
2125
- // this.selectedUser = this.focusedUser;
2126
- // } else {
2127
- // this.selectedUser = null;
2128
- // }
2129
- // }
2130
- // } else {
2131
- // this.selectedUser = null;
2132
- // this.focusedUser = null;
2133
- // this.focusedGroup = null;
2134
- // }
2135
- // this.onChange(v);
2136
- });
2137
- // if (this.user !== null) {
2138
- // let selectedUser = null;
2139
- // this.groupsAndUsers.find(g => g.users.find(u => {
2140
- // if (u.id === this.user.id) {
2141
- // selectedUser = u;
2142
- // return true;
2143
- // } else {
2144
- // return false;
2145
- // }
2146
- // }));
2147
- //
2148
- // if (selectedUser) {
2149
- // this.inputControl.setValue(selectedUser.fullName);
2150
- // this.selectedUser = selectedUser;
2151
- // } else {
2152
- // this.newUsername = this.user.fullName;
2153
- // this.inputControl.setValue(this.user.fullName);
2154
- // this.selectedUser = { id: null, fullName: this.newUsername };
2155
- // }
2156
- // } else {
2157
- // this.selectedUser = null;
2158
- // this.inputControl.setValue('');
2159
- // }
2160
- // this.initialUser = this.selectedUser;
2161
- // }
2162
- }
2163
- inputFocusChanged(focused) {
2164
- if (focused) {
2165
- this.optionsVisible = true;
2166
- }
2167
- }
2168
- // setTimeout(() => {
2169
- // if (!focused && this.skipBlur) {
2170
- // this.skipBlur = false;
2171
- // return;
2172
- // }
2173
- // if (!this.typingStarted && focused) {
2174
- // this.inputControl.setValue(this.inputControl.value);
2175
- // this.typingStarted = true;
2176
- // }
2177
- // if (!this.messageShown) {
2178
- // this.inputFocused = focused;
2179
- // if (!focused) {
2180
- // this.emitSelection('focus lost');
2181
- // }
2182
- // }
2183
- // }, 250);
2184
- // }
2185
- get hasCheckboxSelected() {
2186
- return this.checkboxSelection.size > 0;
2187
- }
2188
- optionChecked(u) {
2189
- return this.checkboxSelection.has(u[this.idAttribute]);
2190
- }
2191
- select(u) {
2192
- if (this.hasCheckboxSelected || u.unselectable) {
2193
- return;
2194
- }
2195
- if (!u.unselectable) {
2196
- this.selectedOption = u;
2197
- this.initialOption = u;
2198
- this.toggleDropdown();
2199
- }
2200
- }
2201
- toggleOptionCheckboxed(u) {
2202
- if (!u.unselectable) {
2203
- this.checkboxSelection.has(u[this.idAttribute]) ?
2204
- this.checkboxSelection.delete(u[this.idAttribute]) : this.checkboxSelection.add(u[this.idAttribute]);
2205
- }
2206
- this.input?.focus();
2207
- }
2208
- // get optionsVisible(): boolean {
2209
- // return this.inputFocused && this.typingStarted;
2210
- // }
2211
- keyPressed(keyEvent) {
2212
- this.lastEmittedId = -1;
2213
- this.optionsVisible = true;
2214
- // this.typingStarted = keyEvent.key !== 'Tab' && keyEvent.key !== 'Escape';
2215
- if (keyEvent.key === 'Escape') {
2216
- keyEvent.stopPropagation();
2217
- keyEvent.preventDefault();
2218
- this.optionsVisible = false;
2219
- return;
2220
- }
2221
- if (keyEvent.key === 'Enter' && this.hasCheckboxSelected) {
2222
- if (this.focusedOption && !this.focusedOption.unselectable) {
2223
- this.toggleOptionCheckboxed(this.focusedOption);
2224
- }
2225
- keyEvent.stopPropagation();
2226
- keyEvent.preventDefault();
2227
- return;
2228
- }
2229
- // if (keyEvent.key === 'Enter' && this.filteredGroupsAndUsers.length === 0 && this.focusedUser === null && !this.alreadyAdded) {
2230
- // this.newUser();
2231
- // keyEvent.stopPropagation();
2232
- // keyEvent.preventDefault();
2233
- // return;
2234
- // }
2235
- if (keyEvent.key === 'Enter') {
2236
- this.selectedOption = this.focusedOption;
2237
- keyEvent.stopPropagation();
2238
- keyEvent.preventDefault();
2239
- this.toggleDropdown();
2240
- return;
2241
- }
2242
- if ((keyEvent.key === 'ArrowDown' || keyEvent.key === 'ArrowUp') && !this.focusedOption) {
2243
- if (this.filteredOptions.length > 0) {
2244
- this.focusedOption = this.filteredOptions[0];
2245
- // if (!this.focusedUser.unselectable || this.focusedUser === this.initialUser) {
2246
- // this.selectedUser = this.focusedUser;
2247
- // }
2248
- this.selectedOption = this.focusedOption;
2249
- return;
2250
- }
2251
- }
2252
- if (keyEvent.key === 'ArrowDown' && this.focusedOption) {
2253
- const idx = this.filteredOptions.indexOf(this.focusedOption);
2254
- if (idx === this.filteredMaxItemsShown - 1) {
2255
- this.filteredMaxItemsShown += this.SHOWN_USERS_DELTA;
2256
- }
2257
- if (idx < this.filteredOptions.length - 1) {
2258
- this.focusedOption = this.filteredOptions[idx + 1];
2259
- this.selectedOption = this.focusedOption;
2260
- }
2261
- }
2262
- if (keyEvent.key === 'ArrowUp' && this.focusedOption) {
2263
- const idx = this.filteredOptions.indexOf(this.focusedOption);
2264
- if (idx > 0) {
2265
- this.focusedOption = this.filteredOptions[idx - 1];
2266
- this.selectedOption = this.focusedOption;
2267
- }
2268
- }
2269
- this.cdr.detectChanges();
2270
- }
2271
- toggleDropdown() {
2272
- this.optionsVisible = false;
2273
- this.emitSelection('toggle');
2274
- }
2275
- emitSelection(src) {
2276
- this.initialOption = this.selectedOption;
2277
- if (this.selectedOption) {
2278
- const checkId = this.selectedOption.id === null ? 0 : this.selectedOption.id;
2279
- if (this.lastEmittedId !== checkId) {
2280
- this.lastEmittedId = checkId;
2281
- this.onChange(this.options.find(o => o[this.idAttribute] === this.selectedOption[this.idAttribute]));
2282
- this.inputControl.setValue(this.selectedOption[this.displayAttribute]);
2283
- }
2284
- }
2285
- else {
2286
- // this.control.setValue(null);
2287
- this.onChange(null);
2288
- this.inputControl.setValue('', { emitEvent: false });
2289
- }
2290
- // if (this.selectedOption) {
2291
- // const checkId = this.selectedUser.id === null ? 0 : this.selectedUser.id;
2292
- // if (this.lastEmittedId !== checkId) {
2293
- // this.inputControl.setValue(this.selectedUser.fullName, {emitEvent: false});
2294
- // if (this.selectedUser.id) {
2295
- // this.groupsAndUsers.find(g => g.users.find(u => {
2296
- // if (u.id === this.selectedUser.id) {
2297
- // this.control.setValue(u);
2298
- // return true;
2299
- // } else {
2300
- // return false;
2301
- // }
2302
- // }));
2303
- // } else {
2304
- // this.control.setValue(this.selectedUser);
2305
- // }
2306
- // this.lastEmittedId = checkId;
2307
- // }
2308
- // } else {
2309
- // if (this.lastEmittedId !== null || this.lastEmittedId === -1/* || this.selectedUser?.unselectable*/) {
2310
- // this.control?.setValue(null);
2311
- // this.inputControl.setValue('', {emitEvent: false});
2312
- // this.lastEmittedId = null;
2313
- // }
2314
- // }
2315
- // this.typingStarted = false;
2316
- }
2317
- cancelCheckboxSelection() {
2318
- this.checkboxSelection.clear();
2319
- // this.skipBlur = true;
2320
- // this.input?.focus();
2321
- }
2322
- useCheckboxSelection() {
2323
- // this.newUsername = '';
2324
- // const users = [];
2325
- // this.groupsAndUsers.forEach(g => g.users.forEach(u => {
2326
- // if (!users.includes(u) && this.checkboxSelection.has(u.id)) {
2327
- // users.push(u);
2328
- // }
2329
- // }));
2330
- const outputOptions = this.options.filter(o => this.checkboxSelection.has(o[this.idAttribute]) && !this.optionDisabled(o));
2331
- if (outputOptions.length > 0) {
2332
- this.selectedOption = outputOptions[0];
2333
- this.inputControl.setValue(this.selectedOption[this.displayAttribute], { emitEvent: false });
2334
- this.onChange(outputOptions);
2335
- this.toggleDropdown();
2336
- // this.control?.setValue(outputOptions);
2337
- // this.typingStarted = false;
2338
- // this.skipBlur = true;
2339
- }
2340
- this.checkboxSelection.clear();
2341
- }
2342
- newOption() {
2343
- }
2344
- loadMore(visible) {
2345
- if (visible) {
2346
- this.filteredMaxItemsShown += this.SHOWN_USERS_DELTA;
2347
- }
2348
- }
2349
- focus() {
2350
- this.input?.focus();
2351
- }
2352
- registerOnChange(fn) {
2353
- this.onChange = fn;
2354
- }
2355
- registerOnTouched(fn) {
2356
- }
2357
- setDisabledState(isDisabled) {
2358
- isDisabled ? this.inputControl.disable() : this.inputControl.enable();
2359
- }
2360
- writeValue(obj) {
2361
- if (obj) {
2362
- if (obj.id) {
2363
- this.filteredOptions = this.searchableOptions.filter(so => so.id === obj.id);
2364
- }
2365
- else {
2366
- this.filteredOptions = this.filterOptions(obj[this.displayAttribute].toLowerCase());
2367
- }
2368
- if (this.filteredOptions.length === 1) {
2369
- this.selectedOption = this.filteredOptions[0];
2370
- this.focusedOption = this.filteredOptions[0];
2371
- }
2372
- this.inputControl.setValue(obj[this.displayAttribute]);
2373
- }
2374
- else {
2375
- this.filteredOptions = this.filterOptions('');
2376
- }
2377
- }
2378
- }
2379
- AutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i1$1.ControlContainer, host: true, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2380
- AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: AutocompleteComponent, selector: "ui-autocomplete", inputs: { options: "options", multiple: "multiple", allowNew: "allowNew", displayAttribute: "displayAttribute", idAttribute: "idAttribute", optionDisabled: "optionDisabled", optionFormatter: "optionFormatter" }, providers: [{
2381
- provide: NG_VALUE_ACCESSOR,
2382
- multi: true,
2383
- useExisting: AutocompleteComponent
2384
- }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "optionsTrigger", first: true, predicate: ["trigger"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" #wrapper>\r\n <div *ngIf=\"optionsVisible\" (click)=\"toggleDropdown()\" class=\"overlay\"></div>\r\n <ui-input [formControl]=\"inputControl\" #input #trigger=\"cdkOverlayOrigin\" cdkOverlayOrigin (focusChanged)=\"inputFocusChanged($event)\" (keyPressed)=\"keyPressed($event)\" [placeholder]=\"placeholder\" [useInputMessages]=\"'never'\">\r\n <div slot=\"prefix\"><ng-content select=\"[slot=acprefix]\"></ng-content></div>\r\n </ui-input>\r\n\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"optionsVisible\">\r\n <div class=\"options-box\" style=\"display: flex; flex-direction: column\" [ngStyle]=\"{width: wrapper.offsetWidth + 'px'}\">\r\n <div class=\"options\" #options>\r\n\r\n <ng-container *ngFor=\"let option of filteredOptions; index as i\">\r\n <div *ngIf=\"i < filteredMaxItemsShown\" class=\"option-container\" [ngClass]=\"{selected: focusedOption === option}\">\r\n <mat-checkbox [checked]=\"optionChecked(option) || option.unselectable\" [disabled]=\"option.unselectable\" (change)=\"toggleOptionCheckboxed(option)\">\r\n <div class=\"option-container-inner\" (click)=\"select(option)\">\r\n <div class=\"option-option\" uiForceVisibility [visibilityWithin]=\"options\" [visibilityPadding]=\"4\" *ngIf=\"focusedOption === option\" [ngClass]=\"{unselectable: option.unselectable}\">\r\n {{optionFormatter(option)}}\r\n </div>\r\n <div class=\"option-option\" *ngIf=\"focusedOption !== option\" [ngClass]=\"{unselectable: option.unselectable}\">\r\n {{optionFormatter(option)}}\r\n </div>\r\n <mat-icon *ngIf=\"!hasCheckboxSelected && !option.unselectable\">north_west</mat-icon>\r\n </div>\r\n </mat-checkbox>\r\n </div>\r\n </ng-container>\r\n\r\n <div *ngIf=\"filteredOptions.length >= filteredMaxItemsShown\" class=\"option-container\" uiForceVisibility [visibilityWithin]=\"options\" [visibilityEmitChange]=\"true\" (visibilityChanged)=\"loadMore($event)\">\r\n &nbsp;\r\n </div>\r\n\r\n\r\n <div *ngIf=\"filteredOptions.length === 0 && !focusedOption\" class=\"new-user\">\r\n <ng-container *ngIf=\"alreadyAdded\">\r\n <div style=\"text-align: center\">U\u017Eivatel {{inputControl.value}} u\u017E je mezi dlu\u017En\u00EDky</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!alreadyAdded\">\r\n <div style=\"text-align: center; padding: 1em 0\">U\u017Eivatele <strong>{{inputControl.value}}</strong> nezn\u00E1me</div>\r\n <ui-button *ngIf=\"allowNew\" style=\"margin-top: 6px;\" [size]=\"'small'\" [label]=\"'P\u0159idat jej?'\" (click)=\"newOption()\"></ui-button>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"filteredOptions.length === 0 && focusedOption\" class=\"new-user\">\r\n <div style=\"text-align: center\">Nezn\u00E1m\u00FD u\u017Eivatel {{inputControl.value}}</div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"hasCheckboxSelected && filteredOptions.length > 0\" class=\"checkbox-buttons\">\r\n <ui-button [size]=\"'small'\" [kind]=\"'basic'\" [label]=\"'Zru\u0161it v\u00FDb\u011Br'\" (click)=\"cancelCheckboxSelection()\"></ui-button>\r\n <ui-button [size]=\"'small'\" [label]=\"'Pou\u017E\u00EDt v\u00FDb\u011Br (' + checkboxSelection.size + ')'\" (click)=\"useCheckboxSelection()\"></ui-button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>\r\n\r\n", styles: [":host .wrapper{position:relative;outline:none;display:flex}:host .overlay{position:fixed;inset:0}.options-box{max-height:248px;min-width:310px;box-shadow:0 2px 4px -1px #07254833,0 4px 5px #07254824,0 1px 10px #0725481f}.options-box .checkbox-buttons{display:flex;padding:8px 4px 4px;justify-content:space-between}.options-box .options{padding:4px;overflow:auto;scroll-behavior:smooth;display:flex;flex-direction:column}.options-box .options .option-container{padding:0 0 0 12px;display:flex;align-items:center}.options-box .options .option-container:hover{cursor:pointer}.options-box .options .option-container mat-checkbox{width:100%}.options-box .options .option-container mat-checkbox ::ng-deep .mdc-form-field{width:100%}.options-box .options .option-container mat-checkbox ::ng-deep .mdc-form-field label{display:flex;width:100%}.options-box .options .option-container-inner{flex:1 1 100%;display:flex;align-items:center}.options-box .options .option-container-inner .option-option{flex:1 1 100%;padding:10px 0 10px 8px}.options-box .options .option-container-inner mat-icon{display:none;font-size:20px;height:20px;margin-right:8px}.options-box .options .option-container-inner:hover mat-icon{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["type", "matIconPrefix", "label", "disabled", "busy", "kind", "color", "size", "formInvalid"] }, { kind: "component", type: InputComponent, selector: "ui-input", inputs: ["prefix", "suffix", "type", "clearButton", "disableUserInput", "centered"], outputs: ["focusChanged", "keyPressed"] }, { kind: "directive", type: ForceVisibilityDirective, selector: "[uiForceVisibility]", inputs: ["visibilityWithin", "visibilityPadding", "visibilityOnRequestOnly", "visibilityEmitChange", "visibilityFromTop"], outputs: ["visibilityChanged"], exportAs: ["ForceVisibilityDirective"] }] });
2385
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: AutocompleteComponent, decorators: [{
2386
- type: Component,
2387
- args: [{ selector: 'ui-autocomplete', providers: [{
2388
- provide: NG_VALUE_ACCESSOR,
2389
- multi: true,
2390
- useExisting: AutocompleteComponent
2391
- }], template: "<div class=\"wrapper\" #wrapper>\r\n <div *ngIf=\"optionsVisible\" (click)=\"toggleDropdown()\" class=\"overlay\"></div>\r\n <ui-input [formControl]=\"inputControl\" #input #trigger=\"cdkOverlayOrigin\" cdkOverlayOrigin (focusChanged)=\"inputFocusChanged($event)\" (keyPressed)=\"keyPressed($event)\" [placeholder]=\"placeholder\" [useInputMessages]=\"'never'\">\r\n <div slot=\"prefix\"><ng-content select=\"[slot=acprefix]\"></ng-content></div>\r\n </ui-input>\r\n\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"optionsVisible\">\r\n <div class=\"options-box\" style=\"display: flex; flex-direction: column\" [ngStyle]=\"{width: wrapper.offsetWidth + 'px'}\">\r\n <div class=\"options\" #options>\r\n\r\n <ng-container *ngFor=\"let option of filteredOptions; index as i\">\r\n <div *ngIf=\"i < filteredMaxItemsShown\" class=\"option-container\" [ngClass]=\"{selected: focusedOption === option}\">\r\n <mat-checkbox [checked]=\"optionChecked(option) || option.unselectable\" [disabled]=\"option.unselectable\" (change)=\"toggleOptionCheckboxed(option)\">\r\n <div class=\"option-container-inner\" (click)=\"select(option)\">\r\n <div class=\"option-option\" uiForceVisibility [visibilityWithin]=\"options\" [visibilityPadding]=\"4\" *ngIf=\"focusedOption === option\" [ngClass]=\"{unselectable: option.unselectable}\">\r\n {{optionFormatter(option)}}\r\n </div>\r\n <div class=\"option-option\" *ngIf=\"focusedOption !== option\" [ngClass]=\"{unselectable: option.unselectable}\">\r\n {{optionFormatter(option)}}\r\n </div>\r\n <mat-icon *ngIf=\"!hasCheckboxSelected && !option.unselectable\">north_west</mat-icon>\r\n </div>\r\n </mat-checkbox>\r\n </div>\r\n </ng-container>\r\n\r\n <div *ngIf=\"filteredOptions.length >= filteredMaxItemsShown\" class=\"option-container\" uiForceVisibility [visibilityWithin]=\"options\" [visibilityEmitChange]=\"true\" (visibilityChanged)=\"loadMore($event)\">\r\n &nbsp;\r\n </div>\r\n\r\n\r\n <div *ngIf=\"filteredOptions.length === 0 && !focusedOption\" class=\"new-user\">\r\n <ng-container *ngIf=\"alreadyAdded\">\r\n <div style=\"text-align: center\">U\u017Eivatel {{inputControl.value}} u\u017E je mezi dlu\u017En\u00EDky</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!alreadyAdded\">\r\n <div style=\"text-align: center; padding: 1em 0\">U\u017Eivatele <strong>{{inputControl.value}}</strong> nezn\u00E1me</div>\r\n <ui-button *ngIf=\"allowNew\" style=\"margin-top: 6px;\" [size]=\"'small'\" [label]=\"'P\u0159idat jej?'\" (click)=\"newOption()\"></ui-button>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"filteredOptions.length === 0 && focusedOption\" class=\"new-user\">\r\n <div style=\"text-align: center\">Nezn\u00E1m\u00FD u\u017Eivatel {{inputControl.value}}</div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"hasCheckboxSelected && filteredOptions.length > 0\" class=\"checkbox-buttons\">\r\n <ui-button [size]=\"'small'\" [kind]=\"'basic'\" [label]=\"'Zru\u0161it v\u00FDb\u011Br'\" (click)=\"cancelCheckboxSelection()\"></ui-button>\r\n <ui-button [size]=\"'small'\" [label]=\"'Pou\u017E\u00EDt v\u00FDb\u011Br (' + checkboxSelection.size + ')'\" (click)=\"useCheckboxSelection()\"></ui-button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>\r\n\r\n", styles: [":host .wrapper{position:relative;outline:none;display:flex}:host .overlay{position:fixed;inset:0}.options-box{max-height:248px;min-width:310px;box-shadow:0 2px 4px -1px #07254833,0 4px 5px #07254824,0 1px 10px #0725481f}.options-box .checkbox-buttons{display:flex;padding:8px 4px 4px;justify-content:space-between}.options-box .options{padding:4px;overflow:auto;scroll-behavior:smooth;display:flex;flex-direction:column}.options-box .options .option-container{padding:0 0 0 12px;display:flex;align-items:center}.options-box .options .option-container:hover{cursor:pointer}.options-box .options .option-container mat-checkbox{width:100%}.options-box .options .option-container mat-checkbox ::ng-deep .mdc-form-field{width:100%}.options-box .options .option-container mat-checkbox ::ng-deep .mdc-form-field label{display:flex;width:100%}.options-box .options .option-container-inner{flex:1 1 100%;display:flex;align-items:center}.options-box .options .option-container-inner .option-option{flex:1 1 100%;padding:10px 0 10px 8px}.options-box .options .option-container-inner mat-icon{display:none;font-size:20px;height:20px;margin-right:8px}.options-box .options .option-container-inner:hover mat-icon{display:block}\n"] }]
2392
- }], ctorParameters: function () { return [{ type: i1$1.ControlContainer, decorators: [{
2393
- type: Optional
2394
- }, {
2395
- type: Host
2396
- }, {
2397
- type: SkipSelf
2398
- }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
2399
- type: Input
2400
- }], multiple: [{
2401
- type: Input
2402
- }], allowNew: [{
2403
- type: Input
2404
- }], displayAttribute: [{
2405
- type: Input
2406
- }], idAttribute: [{
2407
- type: Input
2408
- }], input: [{
2409
- type: ViewChild,
2410
- args: ['input']
2411
- }], optionsTrigger: [{
2412
- type: ViewChild,
2413
- args: ['trigger']
2414
- }], optionDisabled: [{
2415
- type: Input
2416
- }], optionFormatter: [{
2417
- type: Input
2418
- }] } });
2419
-
2420
- class ActionButtonComponent extends ButtonComponent {
2421
- constructor() {
2422
- super();
2423
- this.withPrimary = false;
2424
- this.overlayAlignment = 'left';
2425
- this.hasBackdrop = false;
2426
- this.autoClose = true;
2427
- this.primaryClick = new EventEmitter();
2428
- this.overlayToggled = new EventEmitter();
2429
- this.deferredRender = false;
2430
- this.iconHover = false;
2431
- this.rightPositions = [
2432
- { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
2433
- { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
2434
- { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
2435
- { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' }
2436
- ];
2437
- this.leftPositions = [
2438
- { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
2439
- { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
2440
- { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
2441
- { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' }
2442
- ];
2443
- this.openOverlay = false;
2444
- }
2445
- get class() {
2446
- return super.class + (this.withPrimary ? ' with-primary' : '');
2447
- }
2448
- onKeydownHandler(evt) {
2449
- if (this.openOverlay) {
2450
- this.toggleOverlay(false);
2451
- }
2452
- }
2453
- get positions() {
2454
- switch (this.overlayAlignment) {
2455
- case 'left': return this.leftPositions;
2456
- default: return this.rightPositions;
2457
- }
2458
- }
2459
- ngOnInit() {
2460
- setTimeout(() => {
2461
- this.deferredRender = true;
2462
- });
2463
- }
2464
- toggleOverlay(status) {
2465
- if (status || this.autoClose) {
2466
- this.openOverlay = status;
2467
- this.overlayToggled.emit(status);
2468
- }
2469
- }
2470
- closeOverlay() {
2471
- this.openOverlay = false;
2472
- }
2473
- togglePrimaryOverlay(status, $event) {
2474
- this.toggleOverlay(status);
2475
- $event.stopPropagation();
2476
- $event.preventDefault();
2477
- }
2478
- }
2479
- ActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2480
- ActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: ActionButtonComponent, selector: "ui-action-button", inputs: { withPrimary: "withPrimary", overlayAlignment: "overlayAlignment", hasBackdrop: "hasBackdrop", triggerTpl: "triggerTpl", autoClose: "autoClose" }, outputs: { primaryClick: "primaryClick", overlayToggled: "overlayToggled" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" }, properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "trigger1", first: true, predicate: ["trigger1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"triggerTpl\">\r\n <div style=\"display: flex;\" (click)=\"toggleOverlay(true)\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\">\r\n <ng-template [ngTemplateOutlet]=\"triggerTpl\"></ng-template>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!triggerTpl && withPrimary\">\r\n <button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy, 'icon-hover': iconHover}\" [class]=\"class\" (click)=\"primaryClick.emit()\">\r\n <div class=\"hover-container\"></div>\r\n {{label}}\r\n <div class=\"mat-icon-container\" (mouseenter)=\"iconHover = true\" (mouseleave)=\"iconHover = false\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\" (click)=\"togglePrimaryOverlay(true, $event)\">\r\n \u25BC\r\n </div>\r\n <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n </button>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!triggerTpl && !withPrimary\">\r\n <button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy}\" [class]=\"class\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\" (click)=\"toggleOverlay(true)\">\r\n {{label}}\r\n <div class=\"mat-icon-container\">\r\n \u25BC\r\n </div>\r\n <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n </button>\r\n</ng-container>\r\n\r\n<ng-template *ngIf=\"deferredRender\" cdkConnectedOverlay [cdkConnectedOverlayPositions]=\"positions\" [cdkConnectedOverlayOrigin]=\"trigger1\" [cdkConnectedOverlayOpen]=\"openOverlay\" [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\" [cdkConnectedOverlayDisableClose]=\"!autoClose\" (overlayOutsideClick)=\"toggleOverlay(false)\">\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [":host{display:flex;align-items:center}:host button{font-size:1em;width:100%;cursor:pointer;outline:none;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid transparent;transition:all .15s ease-in-out}:host button mat-progress-bar{position:absolute;bottom:1px;height:2px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}:host button mat-icon{margin-right:4px;height:16px;width:16px;font-size:16px}:host.small button mat-icon{width:14px;height:14px;font-size:14px;margin-right:2px}\n", ":host .mat-icon-container{margin-left:.25em}:host button{font-size:1em}:host.small.with-primary button{padding-right:2.4em!important}:host.small.with-primary button .mat-icon-container{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;border-left:1px solid transparent;padding-right:.6em;padding-left:.6em}:host.small.with-primary button .hover-container{position:absolute;inset:0 2.2em 0 0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] });
2481
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ActionButtonComponent, decorators: [{
2482
- type: Component,
2483
- args: [{ selector: 'ui-action-button', template: "<ng-container *ngIf=\"triggerTpl\">\r\n <div style=\"display: flex;\" (click)=\"toggleOverlay(true)\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\">\r\n <ng-template [ngTemplateOutlet]=\"triggerTpl\"></ng-template>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!triggerTpl && withPrimary\">\r\n <button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy, 'icon-hover': iconHover}\" [class]=\"class\" (click)=\"primaryClick.emit()\">\r\n <div class=\"hover-container\"></div>\r\n {{label}}\r\n <div class=\"mat-icon-container\" (mouseenter)=\"iconHover = true\" (mouseleave)=\"iconHover = false\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\" (click)=\"togglePrimaryOverlay(true, $event)\">\r\n \u25BC\r\n </div>\r\n <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n </button>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!triggerTpl && !withPrimary\">\r\n <button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy}\" [class]=\"class\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\" (click)=\"toggleOverlay(true)\">\r\n {{label}}\r\n <div class=\"mat-icon-container\">\r\n \u25BC\r\n </div>\r\n <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n </button>\r\n</ng-container>\r\n\r\n<ng-template *ngIf=\"deferredRender\" cdkConnectedOverlay [cdkConnectedOverlayPositions]=\"positions\" [cdkConnectedOverlayOrigin]=\"trigger1\" [cdkConnectedOverlayOpen]=\"openOverlay\" [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\" [cdkConnectedOverlayDisableClose]=\"!autoClose\" (overlayOutsideClick)=\"toggleOverlay(false)\">\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [":host{display:flex;align-items:center}:host button{font-size:1em;width:100%;cursor:pointer;outline:none;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid transparent;transition:all .15s ease-in-out}:host button mat-progress-bar{position:absolute;bottom:1px;height:2px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}:host button mat-icon{margin-right:4px;height:16px;width:16px;font-size:16px}:host.small button mat-icon{width:14px;height:14px;font-size:14px;margin-right:2px}\n", ":host .mat-icon-container{margin-left:.25em}:host button{font-size:1em}:host.small.with-primary button{padding-right:2.4em!important}:host.small.with-primary button .mat-icon-container{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;border-left:1px solid transparent;padding-right:.6em;padding-left:.6em}:host.small.with-primary button .hover-container{position:absolute;inset:0 2.2em 0 0}\n"] }]
2484
- }], ctorParameters: function () { return []; }, propDecorators: { withPrimary: [{
2485
- type: Input
2486
- }], overlayAlignment: [{
2487
- type: Input
2488
- }], hasBackdrop: [{
2489
- type: Input
2490
- }], triggerTpl: [{
2491
- type: Input
2492
- }], autoClose: [{
2493
- type: Input
2494
- }], primaryClick: [{
2495
- type: Output
2496
- }], overlayToggled: [{
2497
- type: Output
2498
- }], trigger1: [{
2499
- type: ViewChild,
2500
- args: ['trigger1', { static: false }]
2501
- }], class: [{
2502
- type: HostBinding,
2503
- args: ['class']
2504
- }], onKeydownHandler: [{
2505
- type: HostListener,
2506
- args: ['document:keydown.escape', ['$event']]
2507
- }] } });
2508
-
2509
- class RadioComponent {
2510
- constructor() {
2511
- this.color = 'primary';
2512
- }
2513
- }
2514
- RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2515
- RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: RadioComponent, selector: "ui-radio", inputs: { value: "value", label: "label", color: "color" }, ngImport: i0, template: "<mat-radio-button [value]=\"value\" [color]=\"color\">\r\n {{label}}\r\n</mat-radio-button>\r\n", styles: [""], dependencies: [{ kind: "component", type: i3$6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }] });
2516
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: RadioComponent, decorators: [{
2517
- type: Component,
2518
- args: [{ selector: 'ui-radio', template: "<mat-radio-button [value]=\"value\" [color]=\"color\">\r\n {{label}}\r\n</mat-radio-button>\r\n" }]
2519
- }], propDecorators: { value: [{
2520
- type: Input
2521
- }], label: [{
2522
- type: Input
2523
- }], color: [{
2524
- type: Input
2525
- }] } });
2526
-
2527
- // export interface CheckboxGroupOption {
2528
- // value: any,
2529
- // label: string,
2530
- // hint?: string
2531
- // }
2532
- class CheckboxGroupComponent extends UiSimpleComponent {
2533
- constructor(control) {
2534
- super(control);
2535
- this.control = control;
2536
- this.displayAttribute = 'label';
2537
- this.hintAttribute = 'hint';
2538
- this.optionEnabled = (option) => true;
2539
- }
2540
- // ngOnInit(): void {
2541
- // super.ngOnInit();
2542
- // }
2543
- ngOnChanges(changes) {
2544
- super.ngOnChanges(changes);
2545
- if (changes.options) {
2546
- this.cbxs = [];
2547
- this.valueMode = Array.isArray(this.control.value) ? 'array' : 'object';
2548
- Object.keys(changes.options.currentValue).forEach(k => {
2549
- const v = changes.options.currentValue[k];
2550
- const ct = new UntypedFormControl(this.valueMode === 'array' ? this.control.value.includes(v) : this.control.value[k] === true);
2551
- if (!this.optionEnabled(v)) {
2552
- ct.disable();
2553
- }
2554
- ct.valueChanges.subscribe(() => {
2555
- const value = this.valueMode === 'array' ? [] : {};
2556
- let hasChecked = false;
2557
- this.cbxs.forEach((cbx) => {
2558
- const checked = cbx.control.value;
2559
- hasChecked = hasChecked || checked;
2560
- if (this.valueMode === 'array') {
2561
- if (checked) {
2562
- value.push(cbx.value.value);
2563
- }
2564
- }
2565
- else {
2566
- value[cbx.key] = checked;
2567
- }
2568
- });
2569
- this.componentFormControl.markAsTouched();
2570
- this.componentFormControl.setValue(value);
2571
- if (this.componentFormControl.hasValidator(Validators.required) && !hasChecked) {
2572
- this.componentFormControl.setErrors({ cbGroupRequired: true });
2573
- }
2574
- else {
2575
- this.componentFormControl.setErrors(null);
2576
- }
2577
- });
2578
- this.cbxs.push({
2579
- control: ct,
2580
- value: this.valueAttribute ? v[this.valueAttribute] : v,
2581
- label: this.displayAttribute ? v[this.displayAttribute] : v,
2582
- hint: this.hintAttribute ? v[this.hintAttribute] : undefined,
2583
- key: this.valueMode === 'object' ? k : undefined
2584
- });
2585
- });
2586
- }
2587
- }
2588
- }
2589
- CheckboxGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CheckboxGroupComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
2590
- CheckboxGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: CheckboxGroupComponent, selector: "ui-checkbox-group", inputs: { valueAttribute: "valueAttribute", displayAttribute: "displayAttribute", hintAttribute: "hintAttribute", options: "options", optionEnabled: "optionEnabled" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<ui-checkbox *ngFor=\"let cbx of cbxs\" [formControl]=\"cbx.control\" [label]=\"cbx.label\" [hint]=\"cbx.hint\"></ui-checkbox>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host ui-checkbox{margin-top:.2em;margin-bottom:.2em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["color", "useInputMessages"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] });
2591
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
2592
- type: Component,
2593
- args: [{ selector: 'ui-checkbox-group', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<ui-checkbox *ngFor=\"let cbx of cbxs\" [formControl]=\"cbx.control\" [label]=\"cbx.label\" [hint]=\"cbx.hint\"></ui-checkbox>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host ui-checkbox{margin-top:.2em;margin-bottom:.2em}\n"] }]
2594
- }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
2595
- type: Optional
2596
- }, {
2597
- type: Self
2598
- }] }]; }, propDecorators: { valueAttribute: [{
2599
- type: Input
2600
- }], displayAttribute: [{
2601
- type: Input
2602
- }], hintAttribute: [{
2603
- type: Input
2604
- }], options: [{
2605
- type: Input
2606
- }], optionEnabled: [{
2607
- type: Input
2608
- }] } });
2609
-
2610
- class RadioGroupComponent extends UiSimpleComponent {
2611
- constructor(control) {
2612
- super(control);
2613
- this.control = control;
2614
- this.id = Math.round(Math.random() * 999999);
2615
- this.displayAttribute = 'name';
2616
- this.groupName = 'radio-' + this.id;
2617
- this.optionEnabled = (option) => true;
2618
- }
2619
- // ngOnInit(): void {
2620
- // super.ngOnInit();
2621
- // }
2622
- ngOnChanges(changes) {
2623
- super.ngOnChanges(changes);
2624
- if (changes.options) {
2625
- this.cbxs = [];
2626
- changes.options.currentValue.forEach(cv => {
2627
- this.cbxs.push({
2628
- value: this.valueAttribute ? cv[this.valueAttribute] : cv,
2629
- label: cv[this.displayAttribute]
2630
- });
2631
- });
2632
- }
2633
- }
2634
- }
2635
- RadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: RadioGroupComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
2636
- RadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: RadioGroupComponent, selector: "ui-radio-group", inputs: { options: "options", displayAttribute: "displayAttribute", valueAttribute: "valueAttribute", groupName: "groupName", optionEnabled: "optionEnabled" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n <mat-radio-group [formControl]=\"componentFormControl\" [name]=\"groupName\" [class]=\"size\">\r\n\r\n <mat-radio-button *ngFor=\"let cbx of cbxs\" [value]=\"cbx.value\" >{{cbx.label}}</mat-radio-button>\r\n\r\n </mat-radio-group>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host mat-radio-group{display:flex;flex-direction:column}:host mat-radio-button{margin-top:.2em;margin-bottom:.2em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$6.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] });
2637
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: RadioGroupComponent, decorators: [{
2638
- type: Component,
2639
- args: [{ selector: 'ui-radio-group', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n <mat-radio-group [formControl]=\"componentFormControl\" [name]=\"groupName\" [class]=\"size\">\r\n\r\n <mat-radio-button *ngFor=\"let cbx of cbxs\" [value]=\"cbx.value\" >{{cbx.label}}</mat-radio-button>\r\n\r\n </mat-radio-group>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host mat-radio-group{display:flex;flex-direction:column}:host mat-radio-button{margin-top:.2em;margin-bottom:.2em}\n"] }]
2640
- }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
2641
- type: Optional
2642
- }, {
2643
- type: Self
2644
- }] }]; }, propDecorators: { options: [{
2645
- type: Input
2646
- }], displayAttribute: [{
2647
- type: Input
2648
- }], valueAttribute: [{
2649
- type: Input
2650
- }], groupName: [{
2651
- type: Input
2652
- }], optionEnabled: [{
2653
- type: Input
2654
- }] } });
2655
-
2656
- class UiModule {
2657
- }
2658
- UiModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
2659
- UiModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: UiModule, declarations: [ButtonComponent,
2660
- InputComponent,
2661
- SelectComponent,
2662
- FileComponent,
2663
- UiFileUploaderComponent,
2664
- ExpanderComponent,
2665
- ForceVisibilityDirective,
2666
- MessageBoxModalComponent,
2667
- DialogComponent,
2668
- CurrencyComponent,
2669
- CheckboxComponent,
2670
- AvatarComponent,
2671
- SubmitButtonComponent,
2672
- TextAreaComponent,
2673
- DateComponent,
2674
- TableComponent,
2675
- BurgerComponent,
2676
- AutocompleteComponent,
2677
- ActionButtonComponent,
2678
- UiBaseLayoutComponent,
2679
- UiSimpleLayoutComponent,
2680
- ValidationMessageComponent,
2681
- RadioComponent,
2682
- CheckboxGroupComponent,
2683
- RadioGroupComponent,
2684
- ActionIconComponent], imports: [CommonModule,
2685
- MatButtonModule,
2686
- MatIconModule,
2687
- MatDialogModule,
2688
- MatCheckboxModule,
2689
- MatDatepickerModule,
2690
- MatMomentDateModule,
2691
- DragDropModule,
2692
- ReactiveFormsModule,
2693
- FormsModule,
2694
- MatTooltipModule,
2695
- MatProgressBarModule,
2696
- MatTableModule,
2697
- MatSortModule,
2698
- MatSelectModule,
2699
- NgxUploaderModule,
2700
- MatProgressSpinnerModule,
2701
- MatMenuModule,
2702
- ImageCropperModule,
2703
- RouterModule,
2704
- OverlayModule,
2705
- MatRippleModule,
2706
- MatInputModule,
2707
- MatRadioModule,
2708
- MatSnackBarModule], exports: [ActionButtonComponent,
2709
- ActionIconComponent,
2710
- AutocompleteComponent,
2711
- AvatarComponent,
2712
- BurgerComponent,
2713
- ButtonComponent,
2714
- CheckboxComponent,
2715
- CheckboxGroupComponent,
2716
- CurrencyComponent,
2717
- DateComponent,
2718
- DialogComponent,
2719
- ExpanderComponent,
2720
- FileComponent,
2721
- ForceVisibilityDirective,
2722
- InputComponent,
2723
- MessageBoxModalComponent,
2724
- RadioComponent,
2725
- RadioGroupComponent,
2726
- SelectComponent,
2727
- SubmitButtonComponent,
2728
- TableComponent,
2729
- TextAreaComponent,
2730
- UiFileUploaderComponent] });
2731
- UiModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiModule, providers: [
2732
- UiFileService,
2733
- { provide: UI_TRANSLATESERVICE, useClass: UiTranslateService },
2734
- { provide: MAT_DATE_LOCALE, useValue: 'cs-CZ' },
2735
- { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: false } },
2736
- { provide: MAT_RADIO_DEFAULT_OPTIONS, useValue: { color: 'primary' } },
2737
- { provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { color: 'primary' } }
2738
- ], imports: [CommonModule,
2739
- MatButtonModule,
2740
- MatIconModule,
2741
- MatDialogModule,
2742
- MatCheckboxModule,
2743
- MatDatepickerModule,
2744
- MatMomentDateModule,
2745
- DragDropModule,
2746
- ReactiveFormsModule,
2747
- FormsModule,
2748
- MatTooltipModule,
2749
- MatProgressBarModule,
2750
- MatTableModule,
2751
- MatSortModule,
2752
- MatSelectModule,
2753
- NgxUploaderModule,
2754
- MatProgressSpinnerModule,
2755
- MatMenuModule,
2756
- ImageCropperModule,
2757
- RouterModule,
2758
- OverlayModule,
2759
- MatRippleModule,
2760
- MatInputModule,
2761
- MatRadioModule,
2762
- MatSnackBarModule] });
2763
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: UiModule, decorators: [{
2764
- type: NgModule,
2765
- args: [{
2766
- declarations: [
2767
- ButtonComponent,
2768
- InputComponent,
2769
- SelectComponent,
2770
- FileComponent,
2771
- UiFileUploaderComponent,
2772
- ExpanderComponent,
2773
- ForceVisibilityDirective,
2774
- MessageBoxModalComponent,
2775
- DialogComponent,
2776
- CurrencyComponent,
2777
- CheckboxComponent,
2778
- AvatarComponent,
2779
- SubmitButtonComponent,
2780
- TextAreaComponent,
2781
- DateComponent,
2782
- TableComponent,
2783
- BurgerComponent,
2784
- AutocompleteComponent,
2785
- ActionButtonComponent,
2786
- UiBaseLayoutComponent,
2787
- UiSimpleLayoutComponent,
2788
- ValidationMessageComponent,
2789
- RadioComponent,
2790
- CheckboxGroupComponent,
2791
- RadioGroupComponent,
2792
- ActionIconComponent
2793
- ],
2794
- exports: [
2795
- ActionButtonComponent,
2796
- ActionIconComponent,
2797
- AutocompleteComponent,
2798
- AvatarComponent,
2799
- BurgerComponent,
2800
- ButtonComponent,
2801
- CheckboxComponent,
2802
- CheckboxGroupComponent,
2803
- CurrencyComponent,
2804
- DateComponent,
2805
- DialogComponent,
2806
- ExpanderComponent,
2807
- FileComponent,
2808
- ForceVisibilityDirective,
2809
- InputComponent,
2810
- MessageBoxModalComponent,
2811
- RadioComponent,
2812
- RadioGroupComponent,
2813
- SelectComponent,
2814
- SubmitButtonComponent,
2815
- TableComponent,
2816
- TextAreaComponent,
2817
- UiFileUploaderComponent,
2818
- ],
2819
- imports: [
2820
- CommonModule,
2821
- MatButtonModule,
2822
- MatIconModule,
2823
- MatDialogModule,
2824
- MatCheckboxModule,
2825
- MatDatepickerModule,
2826
- MatMomentDateModule,
2827
- DragDropModule,
2828
- ReactiveFormsModule,
2829
- FormsModule,
2830
- MatTooltipModule,
2831
- MatProgressBarModule,
2832
- MatTableModule,
2833
- MatSortModule,
2834
- MatSelectModule,
2835
- NgxUploaderModule,
2836
- MatProgressSpinnerModule,
2837
- MatMenuModule,
2838
- ImageCropperModule,
2839
- RouterModule,
2840
- OverlayModule,
2841
- MatRippleModule,
2842
- MatInputModule,
2843
- MatRadioModule,
2844
- MatSnackBarModule
2845
- ],
2846
- providers: [
2847
- UiFileService,
2848
- { provide: UI_TRANSLATESERVICE, useClass: UiTranslateService },
2849
- { provide: MAT_DATE_LOCALE, useValue: 'cs-CZ' },
2850
- { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: false } },
2851
- { provide: MAT_RADIO_DEFAULT_OPTIONS, useValue: { color: 'primary' } },
2852
- { provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { color: 'primary' } }
2853
- ]
2854
- }]
2855
- }] });
2856
-
2857
- class ToastService {
2858
- constructor(snackService) {
2859
- this.snackService = snackService;
2860
- }
2861
- open(message, options = { duration: 2500, type: 'info' }) {
2862
- this.snackService.open(message, null, {
2863
- duration: options.duration || 2500,
2864
- panelClass: [options.type || 'message']
2865
- });
2866
- }
2867
- }
2868
- ToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ToastService, deps: [{ token: i1$4.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
2869
- ToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ToastService, providedIn: 'root' });
2870
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: ToastService, decorators: [{
2871
- type: Injectable,
2872
- args: [{
2873
- providedIn: 'root'
2874
- }]
2875
- }], ctorParameters: function () { return [{ type: i1$4.MatSnackBar }]; } });
2876
-
2877
- /*
2878
- * Public API Surface of ui
2879
- */
2880
-
2881
- /**
2882
- * Generated bundle index. Do not edit.
2883
- */
2884
-
2885
- export { ActionButtonComponent, ActionIconComponent, AutocompleteComponent, AvatarComponent, BurgerComponent, ButtonComponent, CheckboxComponent, CheckboxGroupComponent, CurrencyComponent, DateComponent, DialogComponent, ExpanderComponent, FileComponent, ForceVisibilityDirective, InputComponent, MessageBoxModalComponent, MessageBoxService, RadioComponent, RadioGroupComponent, SelectComponent, SubmitButtonComponent, TableComponent, TextAreaComponent, ToastService, UI_FILESERVICE, UI_TRANSLATESERVICE, UiFileService, UiFileUploaderComponent, UiModule, UiTranslateService };
2886
- //# sourceMappingURL=rlucan-ui.mjs.map