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