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