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