@esfaenza/forms-and-validations 12.2.27 → 13.1.2
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.
- package/esfaenza-forms-and-validations.d.ts +1 -12
- package/esm2020/esfaenza-forms-and-validations.mjs +5 -0
- package/esm2020/lib/forms/base-form-control.mjs +482 -0
- package/esm2020/lib/forms/form-adaptive/form-adaptive.component.loc.mjs +28 -0
- package/esm2020/lib/forms/form-adaptive/form-adaptive.component.mjs +294 -0
- package/esm2020/lib/forms/form-autocomplete/form-autocomplete.component.loc.mjs +26 -0
- package/esm2020/lib/forms/form-autocomplete/form-autocomplete.component.mjs +200 -0
- package/esm2020/lib/forms/form-checkbox/form-checkbox.component.mjs +52 -0
- package/esm2020/lib/forms/form-date/form-date.component.mjs +59 -0
- package/esm2020/lib/forms/form-datetime/form-datetime.component.mjs +59 -0
- package/esm2020/lib/forms/form-empty/form-empty.component.mjs +36 -0
- package/esm2020/lib/forms/form-error/form-error.component.mjs +52 -0
- package/esm2020/lib/forms/form-file/form-file.component.loc.mjs +28 -0
- package/esm2020/lib/forms/form-file/form-file.component.mjs +119 -0
- package/esm2020/lib/forms/form-info/form-info.component.mjs +52 -0
- package/esm2020/lib/forms/form-input/form-input.component.mjs +93 -0
- package/esm2020/lib/forms/form-multiselect/form-multiselect.component.loc.mjs +29 -0
- package/esm2020/lib/forms/form-multiselect/form-multiselect.component.mjs +159 -0
- package/esm2020/lib/forms/form-select/form-select.component.loc.mjs +26 -0
- package/esm2020/lib/forms/form-select/form-select.component.mjs +129 -0
- package/esm2020/lib/forms/form-template/form-template.component.mjs +71 -0
- package/esm2020/lib/forms/form-textarea/form-textarea.component.mjs +54 -0
- package/esm2020/lib/forms/form-time/form-time.component.mjs +131 -0
- package/esm2020/lib/forms-and-validations.module.mjs +203 -0
- package/{esm2015/lib/models/AppFile.js → esm2020/lib/models/AppFile.mjs} +0 -0
- package/{esm2015/lib/models/FormsAndValidationsModuleConfig.js → esm2020/lib/models/FormsAndValidationsModuleConfig.mjs} +0 -0
- package/esm2020/lib/models/dayjs-adapter/dayjs-date-adapter.mjs +89 -0
- package/{esm2015/lib/tokens.js → esm2020/lib/tokens.mjs} +0 -0
- package/esm2020/lib/validations/base-validation.loc.mjs +28 -0
- package/esm2020/lib/validations/base-validation.mjs +232 -0
- package/esm2020/lib/validations/customValidators/CustomRequiredDirective.mjs +41 -0
- package/esm2020/lib/validations/validation-autocomplete/validation-autocomplete.component.mjs +168 -0
- package/esm2020/lib/validations/validation-currency/validation-currency.component.mjs +61 -0
- package/esm2020/lib/validations/validation-date/validation-date.component.mjs +177 -0
- package/esm2020/lib/validations/validation-datetime/validation-datetime.component.mjs +206 -0
- package/esm2020/lib/validations/validation-input/validation-input.component.mjs +207 -0
- package/esm2020/lib/validations/validation-select/validation-select.component.mjs +184 -0
- package/esm2020/lib/validations/validation-text-area/validation-text-area.component.mjs +64 -0
- package/esm2020/public-api.mjs +35 -0
- package/fesm2015/esfaenza-forms-and-validations.mjs +3620 -0
- package/fesm2015/esfaenza-forms-and-validations.mjs.map +1 -0
- package/fesm2020/esfaenza-forms-and-validations.mjs +3562 -0
- package/fesm2020/esfaenza-forms-and-validations.mjs.map +1 -0
- package/lib/forms/base-form-control.d.ts +27 -0
- package/lib/forms/form-adaptive/form-adaptive.component.d.ts +25 -0
- package/lib/forms/form-adaptive/form-adaptive.component.loc.d.ts +3 -0
- package/lib/forms/form-autocomplete/form-autocomplete.component.d.ts +19 -1
- package/lib/forms/form-autocomplete/form-autocomplete.component.loc.d.ts +3 -0
- package/lib/forms/form-checkbox/form-checkbox.component.d.ts +3 -0
- package/lib/forms/form-date/form-date.component.d.ts +3 -0
- package/lib/forms/form-datetime/form-datetime.component.d.ts +3 -0
- package/lib/forms/form-empty/form-empty.component.d.ts +3 -0
- package/lib/forms/form-error/form-error.component.d.ts +3 -0
- package/lib/forms/form-file/form-file.component.d.ts +3 -0
- package/lib/forms/form-file/form-file.component.loc.d.ts +3 -0
- package/lib/forms/form-info/form-info.component.d.ts +3 -0
- package/lib/forms/form-input/form-input.component.d.ts +3 -0
- package/lib/forms/form-multiselect/form-multiselect.component.d.ts +4 -0
- package/lib/forms/form-multiselect/form-multiselect.component.loc.d.ts +3 -0
- package/lib/forms/form-select/form-select.component.d.ts +3 -0
- package/lib/forms/form-select/form-select.component.loc.d.ts +3 -0
- package/lib/forms/form-template/form-template.component.d.ts +3 -0
- package/lib/forms/form-textarea/form-textarea.component.d.ts +3 -0
- package/lib/forms/form-time/form-time.component.d.ts +3 -0
- package/lib/forms-and-validations.module.d.ts +38 -0
- package/lib/models/dayjs-adapter/dayjs-date-adapter.d.ts +3 -0
- package/lib/validations/base-validation.d.ts +3 -0
- package/lib/validations/base-validation.loc.d.ts +3 -0
- package/lib/validations/customValidators/CustomRequiredDirective.d.ts +3 -0
- package/lib/validations/validation-autocomplete/validation-autocomplete.component.d.ts +3 -4
- package/lib/validations/validation-currency/validation-currency.component.d.ts +3 -0
- package/lib/validations/validation-date/validation-date.component.d.ts +3 -0
- package/lib/validations/validation-datetime/validation-datetime.component.d.ts +3 -0
- package/lib/validations/validation-input/validation-input.component.d.ts +3 -0
- package/lib/validations/validation-select/validation-select.component.d.ts +3 -0
- package/lib/validations/validation-text-area/validation-text-area.component.d.ts +3 -0
- package/package.json +31 -19
- package/public-api.d.ts +2 -0
- package/bundles/esfaenza-forms-and-validations.umd.js +0 -3628
- package/bundles/esfaenza-forms-and-validations.umd.js.map +0 -1
- package/esfaenza-forms-and-validations.metadata.json +0 -1
- package/esm2015/esfaenza-forms-and-validations.js +0 -17
- package/esm2015/lib/forms/base-form-control.js +0 -424
- package/esm2015/lib/forms/form-adaptive/form-adaptive.component.js +0 -219
- package/esm2015/lib/forms/form-adaptive/form-adaptive.component.loc.js +0 -23
- package/esm2015/lib/forms/form-autocomplete/form-autocomplete.component.js +0 -145
- package/esm2015/lib/forms/form-autocomplete/form-autocomplete.component.loc.js +0 -21
- package/esm2015/lib/forms/form-checkbox/form-checkbox.component.js +0 -41
- package/esm2015/lib/forms/form-date/form-date.component.js +0 -49
- package/esm2015/lib/forms/form-datetime/form-datetime.component.js +0 -49
- package/esm2015/lib/forms/form-empty/form-empty.component.js +0 -34
- package/esm2015/lib/forms/form-error/form-error.component.js +0 -49
- package/esm2015/lib/forms/form-file/form-file.component.js +0 -109
- package/esm2015/lib/forms/form-file/form-file.component.loc.js +0 -23
- package/esm2015/lib/forms/form-info/form-info.component.js +0 -49
- package/esm2015/lib/forms/form-input/form-input.component.js +0 -76
- package/esm2015/lib/forms/form-multiselect/form-multiselect.component.js +0 -153
- package/esm2015/lib/forms/form-multiselect/form-multiselect.component.loc.js +0 -24
- package/esm2015/lib/forms/form-select/form-select.component.js +0 -114
- package/esm2015/lib/forms/form-select/form-select.component.loc.js +0 -21
- package/esm2015/lib/forms/form-template/form-template.component.js +0 -64
- package/esm2015/lib/forms/form-textarea/form-textarea.component.js +0 -44
- package/esm2015/lib/forms/form-time/form-time.component.js +0 -117
- package/esm2015/lib/forms-and-validations.module.js +0 -144
- package/esm2015/lib/models/dayjs-adapter/dayjs-date-adapter.js +0 -86
- package/esm2015/lib/validations/base-validation.js +0 -208
- package/esm2015/lib/validations/base-validation.loc.js +0 -23
- package/esm2015/lib/validations/customValidators/CustomRequiredDirective.js +0 -35
- package/esm2015/lib/validations/validation-autocomplete/validation-autocomplete.component.js +0 -163
- package/esm2015/lib/validations/validation-currency/validation-currency.component.js +0 -48
- package/esm2015/lib/validations/validation-date/validation-date.component.js +0 -165
- package/esm2015/lib/validations/validation-datetime/validation-datetime.component.js +0 -193
- package/esm2015/lib/validations/validation-input/validation-input.component.js +0 -186
- package/esm2015/lib/validations/validation-select/validation-select.component.js +0 -166
- package/esm2015/lib/validations/validation-text-area/validation-text-area.component.js +0 -52
- package/esm2015/public-api.js +0 -32
- package/fesm2015/esfaenza-forms-and-validations.js +0 -3137
- package/fesm2015/esfaenza-forms-and-validations.js.map +0 -1
|
@@ -0,0 +1,3620 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { InjectionToken, Directive, Input, Injectable, Inject, EventEmitter, ViewChild, Output, Optional, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChild, Self, Host, NgModule } from '@angular/core';
|
|
3
|
+
import * as i5 from '@angular/common';
|
|
4
|
+
import { CommonModule } from '@angular/common';
|
|
5
|
+
import * as i2$1 from '@angular/forms';
|
|
6
|
+
import { NG_VALIDATORS, RequiredValidator, NgControl, NG_ASYNC_VALIDATORS, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
7
|
+
import * as i4$1 from '@angular/material/datepicker';
|
|
8
|
+
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
9
|
+
import * as i3 from '@angular/material/autocomplete';
|
|
10
|
+
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
11
|
+
import * as i4 from '@angular/material/input';
|
|
12
|
+
import { MatInputModule } from '@angular/material/input';
|
|
13
|
+
import * as i4$2 from '@angular/material/core';
|
|
14
|
+
import { MAT_DATE_LOCALE, MAT_DATE_FORMATS } from '@angular/material/core';
|
|
15
|
+
import * as i1 from '@esfaenza/localizations';
|
|
16
|
+
import { LocalizationService, LocalizationModule } from '@esfaenza/localizations';
|
|
17
|
+
import { DayJsDateAdapter, MatDayjsDateModule } from '@esfaenza/material-dayjs-adapter';
|
|
18
|
+
import * as i6 from '@esfaenza/ngx-currency-mask';
|
|
19
|
+
import { CurrencyMaskModule } from '@esfaenza/ngx-currency-mask';
|
|
20
|
+
import * as i4$3 from 'angular2-multiselect-dropdown';
|
|
21
|
+
import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown';
|
|
22
|
+
import * as i2$3 from '@angular-material-components/datetime-picker';
|
|
23
|
+
import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NGX_MAT_DATE_FORMATS, NgxMatDateAdapter } from '@angular-material-components/datetime-picker';
|
|
24
|
+
import * as i7 from 'ngx-bootstrap/tooltip';
|
|
25
|
+
import { TooltipDirective, TooltipModule } from 'ngx-bootstrap/tooltip';
|
|
26
|
+
import * as i2 from '@angular/material/form-field';
|
|
27
|
+
import * as i2$2 from '@esfaenza/extensions';
|
|
28
|
+
import * as i2$4 from '@esfaenza/access-control';
|
|
29
|
+
import { __awaiter } from 'tslib';
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Classe che identifica un file
|
|
33
|
+
*/
|
|
34
|
+
class AppFile {
|
|
35
|
+
/**
|
|
36
|
+
* @ignore
|
|
37
|
+
*/
|
|
38
|
+
constructor() {
|
|
39
|
+
this.filename = "";
|
|
40
|
+
this.fileb64 = "";
|
|
41
|
+
this.nativefiles = [];
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* Classe di configurazione del modulo
|
|
47
|
+
*/
|
|
48
|
+
class FormsAndValidationsModuleConfig {
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* Token che indica la lingua da utilizzare, sono supportate "it-IT" ed "en-US"
|
|
53
|
+
*/
|
|
54
|
+
const FAV_LOCALE = new InjectionToken('FAV_LOCALE');
|
|
55
|
+
/**
|
|
56
|
+
* Chiave che indica il prefisso dei Contesti Applicativi per permettere l'abilitazione/disabilitazione di input in maniera contestuale
|
|
57
|
+
*/
|
|
58
|
+
const ACO_CUSTOMKEY = new InjectionToken('ACO_CUSTOMKEY');
|
|
59
|
+
|
|
60
|
+
// Angular
|
|
61
|
+
/**
|
|
62
|
+
* Direttiva utilizzata per validazioni "required" custom, in modo da poter dire che anche se c'è un valore selezionato, ma quel valore lo considero null
|
|
63
|
+
* allora la validazione fallisce. Attualmente usato nell'unico punto sensato: validation-select
|
|
64
|
+
*/
|
|
65
|
+
class CustomRequiredDirective {
|
|
66
|
+
constructor() {
|
|
67
|
+
/**
|
|
68
|
+
* Lista di valori che vengono considerati "vuoti" seppur presenti
|
|
69
|
+
*/
|
|
70
|
+
this.NullValues = [];
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* @ignore
|
|
74
|
+
*/
|
|
75
|
+
validate(c) {
|
|
76
|
+
// Controllo solo per custom required a true, altrimenti qualsiasi valore mi va bene
|
|
77
|
+
if (this.customRequired != "true")
|
|
78
|
+
return null;
|
|
79
|
+
return !c.value || this.NullValues.includes(c.value) ? { required: true } : null;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
CustomRequiredDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CustomRequiredDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
83
|
+
CustomRequiredDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: CustomRequiredDirective, selector: "[customRequired]", inputs: { NullValues: ["CustomNullValues", "NullValues"], customRequired: "customRequired" }, providers: [{ provide: NG_VALIDATORS, useExisting: CustomRequiredDirective, multi: true }], ngImport: i0 });
|
|
84
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CustomRequiredDirective, decorators: [{
|
|
85
|
+
type: Directive,
|
|
86
|
+
args: [{
|
|
87
|
+
selector: '[customRequired]',
|
|
88
|
+
providers: [{ provide: NG_VALIDATORS, useExisting: CustomRequiredDirective, multi: true }]
|
|
89
|
+
}]
|
|
90
|
+
}], propDecorators: { NullValues: [{
|
|
91
|
+
type: Input,
|
|
92
|
+
args: ["CustomNullValues"]
|
|
93
|
+
}], customRequired: [{
|
|
94
|
+
type: Input,
|
|
95
|
+
args: ['customRequired']
|
|
96
|
+
}] } });
|
|
97
|
+
|
|
98
|
+
//Angular
|
|
99
|
+
/**
|
|
100
|
+
* Espansione dell'adapter di default di DayJs già utilizzato per i bind base su Material.
|
|
101
|
+
*
|
|
102
|
+
* Questa versione serve unicamente per i controlli **datetime-picker**, ma dato che io l'adapter già lo avevo lato **esfaenza/material-dayjs-adapter**
|
|
103
|
+
* qui devo semplicemente aggiungere le funzioni non presenti nella mia implementazione che servono al **datetime-picker**
|
|
104
|
+
*/
|
|
105
|
+
class NgxExpandedDayJsDateAdapter extends DayJsDateAdapter {
|
|
106
|
+
/**
|
|
107
|
+
* @ignore
|
|
108
|
+
*/
|
|
109
|
+
constructor(dateLocale) {
|
|
110
|
+
super(dateLocale);
|
|
111
|
+
}
|
|
112
|
+
// Espando il mio DayJsDateAdapter con i metodi extra del NgxMatDateAdapter che servono per il material timepicker
|
|
113
|
+
// Non potendo fare "extends" da due classi mi tocca tenerlo così senza type safety....
|
|
114
|
+
/**
|
|
115
|
+
* Identifica se due date hanno lo stesso orario
|
|
116
|
+
*
|
|
117
|
+
* @param {DayJs} a Primo elemento del controllo
|
|
118
|
+
* @param {DayJs} b Secondo elemento del controllo
|
|
119
|
+
* @returns **true** se hanno lo stess orario, **false** altrimenti
|
|
120
|
+
*/
|
|
121
|
+
isSameTime(a, b) {
|
|
122
|
+
if (a == null || b == null)
|
|
123
|
+
return true;
|
|
124
|
+
return this.getHour(a) === this.getHour(b)
|
|
125
|
+
&& this.getMinute(a) === this.getMinute(b)
|
|
126
|
+
&& this.getSecond(a) === this.getSecond(b);
|
|
127
|
+
}
|
|
128
|
+
/**
|
|
129
|
+
* Copia dell'orario da una data all'altra, Modifica direttamente l'oggetto **toDate**
|
|
130
|
+
*
|
|
131
|
+
* @param {DayJs} toDate Data in cui copiare l'orario
|
|
132
|
+
* @param {DayJs} fromDate Data da cui copiare l'orario
|
|
133
|
+
*/
|
|
134
|
+
copyTime(toDate, fromDate) {
|
|
135
|
+
this.setHour(toDate, this.getHour(fromDate));
|
|
136
|
+
this.setMinute(toDate, this.getMinute(fromDate));
|
|
137
|
+
this.setSecond(toDate, this.getSecond(fromDate));
|
|
138
|
+
}
|
|
139
|
+
/**
|
|
140
|
+
* Mette a confronto due date
|
|
141
|
+
* @param {Dayjs} first Prima data da confrontare
|
|
142
|
+
* @param {Dayjs} second Seconda data da confrontare
|
|
143
|
+
* @param {boolean} showSeconds Indica se considerare anche i secondi, di default no
|
|
144
|
+
* @returns {number} 0 se le due date sono uguali, un numero minore di 0 se la prima data è precedente alla seconda e un numero maggiore di 0 altrimenti
|
|
145
|
+
*/
|
|
146
|
+
compareDateWithTime(first, second, showSeconds) {
|
|
147
|
+
let res = super.compareDate(first, second) ||
|
|
148
|
+
this.getHour(first) - this.getHour(second) ||
|
|
149
|
+
this.getMinute(first) - this.getMinute(second);
|
|
150
|
+
if (showSeconds)
|
|
151
|
+
res = res || this.getSecond(first) - this.getSecond(second);
|
|
152
|
+
return res;
|
|
153
|
+
}
|
|
154
|
+
/**
|
|
155
|
+
* Assegna a una data i valori di ore, minuti e secondi di default.
|
|
156
|
+
*
|
|
157
|
+
* Se non specificati vengono assegnati degli '0'
|
|
158
|
+
*
|
|
159
|
+
* @param {DayJs} date Data a cui assegnare i valori di default
|
|
160
|
+
* @param {number[]} defaultTime Valori di default per ore, minuti e secondi, considerati 0 se non presenti
|
|
161
|
+
*/
|
|
162
|
+
setTimeByDefaultValues(date, defaultTime) {
|
|
163
|
+
if (!Array.isArray(defaultTime)) {
|
|
164
|
+
throw Error('@Input DefaultTime should be an array');
|
|
165
|
+
}
|
|
166
|
+
this.setHour(date, defaultTime[0] || 0);
|
|
167
|
+
this.setMinute(date, defaultTime[1] || 0);
|
|
168
|
+
this.setSecond(date, defaultTime[2] || 0);
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
NgxExpandedDayJsDateAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxExpandedDayJsDateAdapter, deps: [{ token: MAT_DATE_LOCALE }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
172
|
+
NgxExpandedDayJsDateAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxExpandedDayJsDateAdapter });
|
|
173
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: NgxExpandedDayJsDateAdapter, decorators: [{
|
|
174
|
+
type: Injectable
|
|
175
|
+
}], ctorParameters: function () {
|
|
176
|
+
return [{ type: undefined, decorators: [{
|
|
177
|
+
type: Inject,
|
|
178
|
+
args: [MAT_DATE_LOCALE]
|
|
179
|
+
}] }];
|
|
180
|
+
} });
|
|
181
|
+
|
|
182
|
+
// Angular
|
|
183
|
+
/**
|
|
184
|
+
* Classe astratta base che contiene le logiche / proprietà in comune a tutti i validatori
|
|
185
|
+
*
|
|
186
|
+
* Nota bene: I tooltip rallentano tantissimo la pagina perché il tizio che ha fatto ngx bootstrap non è capace
|
|
187
|
+
*/
|
|
188
|
+
class BaseValidation {
|
|
189
|
+
constructor() {
|
|
190
|
+
/**
|
|
191
|
+
* Variabile per tenere in memoria il fatto che il componente è forzato a invalido o no
|
|
192
|
+
*/
|
|
193
|
+
this._forceInvalid = false;
|
|
194
|
+
/**
|
|
195
|
+
* Indica se il valore è obbligatorio o opzionale
|
|
196
|
+
*/
|
|
197
|
+
this.required = false;
|
|
198
|
+
/**
|
|
199
|
+
* Indica se di default deve valutare il messaggio di errore in base al validatore che fallisce.
|
|
200
|
+
*
|
|
201
|
+
* Se fallisce il required validator scriverà che l'input è obbligatorio, se invece fallisce
|
|
202
|
+
* un eventuale pattern validator scriverà che il formato dell'input è invalido
|
|
203
|
+
*/
|
|
204
|
+
this.InferErrorMessages = true;
|
|
205
|
+
/**
|
|
206
|
+
* Messaggio da mostrare se la validazione fallisce.
|
|
207
|
+
*
|
|
208
|
+
* Se questo è valorizzato, il messaggio non viene valutato in automatico nonstante **InferErrorMessages** sia **true**
|
|
209
|
+
*/
|
|
210
|
+
this.validationFailed = "";
|
|
211
|
+
/**
|
|
212
|
+
* Indica se il componente è in sola lettura
|
|
213
|
+
*/
|
|
214
|
+
this.readonly = false;
|
|
215
|
+
/**
|
|
216
|
+
* Indica le dimensioni del componente
|
|
217
|
+
*/
|
|
218
|
+
this.widthPx = null;
|
|
219
|
+
/**
|
|
220
|
+
* Indica se il componente è disabilitato o no (più o meno stesso concetto del readonly)
|
|
221
|
+
*/
|
|
222
|
+
this.disabled = false;
|
|
223
|
+
/**
|
|
224
|
+
* Eventuale placeholder da mostrare al posto del valore quando il valore è nullo / vuoto
|
|
225
|
+
*/
|
|
226
|
+
this.placeholder = "";
|
|
227
|
+
/**
|
|
228
|
+
* Classi da applicare al componente
|
|
229
|
+
*/
|
|
230
|
+
this.class = "";
|
|
231
|
+
/**
|
|
232
|
+
* Stili da applicare al componente
|
|
233
|
+
*/
|
|
234
|
+
this.style = "";
|
|
235
|
+
/**
|
|
236
|
+
* Pattern di validazione dell'input
|
|
237
|
+
*/
|
|
238
|
+
this.pattern = "";
|
|
239
|
+
/**
|
|
240
|
+
* Indica di non validare il componente
|
|
241
|
+
*/
|
|
242
|
+
this.noValidate = false;
|
|
243
|
+
/**
|
|
244
|
+
* Indica se abilitare o meno l'autocompletamento di default del browser
|
|
245
|
+
*/
|
|
246
|
+
this.autocomplete = "off";
|
|
247
|
+
/**
|
|
248
|
+
* Evento che sostituisce l'ngModelChange facendolo funzionare in maniera un po' più consistente
|
|
249
|
+
*/
|
|
250
|
+
this.inputChange = new EventEmitter();
|
|
251
|
+
/**
|
|
252
|
+
* @ignore
|
|
253
|
+
*/
|
|
254
|
+
this.propagateChange = (_) => { };
|
|
255
|
+
}
|
|
256
|
+
/**
|
|
257
|
+
* Query che raccoglie il tooltip in maniera dinamica (ad ogni change detection)
|
|
258
|
+
*
|
|
259
|
+
* @param {TooltipDirective} comp Elemento HTML a cui è applicata la direttiva del tooltip
|
|
260
|
+
*/
|
|
261
|
+
set tooltip_static(comp) {
|
|
262
|
+
if (comp) {
|
|
263
|
+
this.tooltip = comp;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
;
|
|
267
|
+
/**
|
|
268
|
+
* Query che raccoglie l'input o direttiva che contiene il valore in maniera dinamica (ad ogni change detection)
|
|
269
|
+
*
|
|
270
|
+
* @param {NgModel} comp Elemento HTML associato al ngModel del componente
|
|
271
|
+
*/
|
|
272
|
+
set baseInput_static(comp) {
|
|
273
|
+
if (comp) {
|
|
274
|
+
this.baseInput = comp;
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
;
|
|
278
|
+
/**
|
|
279
|
+
* Imposta il componente come "submitted" scatenandone le validazioni ed eventualmente la visualizzazione del tooltip di errore
|
|
280
|
+
*
|
|
281
|
+
* @param {boolean} val **true** se si vuole impostare questo controllo come submitted, **false** altrimenti
|
|
282
|
+
*/
|
|
283
|
+
set submitted(val) {
|
|
284
|
+
this._submitted = val;
|
|
285
|
+
if (!this.baseInput)
|
|
286
|
+
return;
|
|
287
|
+
if (val)
|
|
288
|
+
this.baseInput.control.markAsTouched();
|
|
289
|
+
if (this.baseInput.control.status === "INVALID" && val)
|
|
290
|
+
this.showTooltipWithMessage();
|
|
291
|
+
else
|
|
292
|
+
this.tooltip.hide();
|
|
293
|
+
}
|
|
294
|
+
/**
|
|
295
|
+
* Imposta il componente come "invalid" a prescindere dai validatori
|
|
296
|
+
*/
|
|
297
|
+
set forceInvalid(val) {
|
|
298
|
+
this._forceInvalid = val;
|
|
299
|
+
if (val)
|
|
300
|
+
setTimeout(() => this.baseInput.control.setErrors({ forcedtoinvalid: true }));
|
|
301
|
+
else
|
|
302
|
+
setTimeout(() => {
|
|
303
|
+
this.baseInput.control.setErrors({ forcedtoinvalid: null });
|
|
304
|
+
this.baseInput.control.updateValueAndValidity();
|
|
305
|
+
});
|
|
306
|
+
}
|
|
307
|
+
/**
|
|
308
|
+
* Helper che controlla se il tooltip deve essere mostrato o meno,
|
|
309
|
+
* richiamato direttamente dall'HTML dei componenti
|
|
310
|
+
*/
|
|
311
|
+
checkTooltip() {
|
|
312
|
+
if ((this.baseInput.invalid && this.baseInput.touched))
|
|
313
|
+
this.showTooltipWithMessage();
|
|
314
|
+
}
|
|
315
|
+
/**
|
|
316
|
+
* Helper che calcola il messaggio da mostrare nel tooltip che andrà ad aprire
|
|
317
|
+
*/
|
|
318
|
+
showTooltipWithMessage() {
|
|
319
|
+
this.validationFailed = this.validationFailed ? this.validationFailed : this.InferErrorMessages ? this.inferMessage() : "";
|
|
320
|
+
if (this.validationFailed)
|
|
321
|
+
this.tooltip.show();
|
|
322
|
+
}
|
|
323
|
+
/**
|
|
324
|
+
* Calcola il messaggio da mostrare in base al valore.
|
|
325
|
+
*
|
|
326
|
+
* Entrare in questa funzione significa che lo stato di validazione è fallito, per questo si comporta semplicemente in maniera esclusiva, e cioè:
|
|
327
|
+
*
|
|
328
|
+
* 1) Se ero required e sono senza valore --> Input richiesto
|
|
329
|
+
*
|
|
330
|
+
* 2) Altrimenti se ho un valore --> Di sicuro il formato è errato
|
|
331
|
+
*/
|
|
332
|
+
inferMessage() {
|
|
333
|
+
if (this.required && !this.baseInput.value)
|
|
334
|
+
return this.lc.loc("Required Input");
|
|
335
|
+
if (this.baseInput.value)
|
|
336
|
+
return this.lc.loc("Invalid Input Format");
|
|
337
|
+
}
|
|
338
|
+
/**
|
|
339
|
+
* Forza la chiusura del tooltip
|
|
340
|
+
*/
|
|
341
|
+
closeTooltip() {
|
|
342
|
+
this.tooltip.hide();
|
|
343
|
+
}
|
|
344
|
+
/**
|
|
345
|
+
* Controlla se il controllo è valido e in caso lo sia chiude il tooltip
|
|
346
|
+
*/
|
|
347
|
+
CheckValidity() {
|
|
348
|
+
if (!this.baseInput.statusChanges)
|
|
349
|
+
return;
|
|
350
|
+
this.baseInput.statusChanges.subscribe(event => {
|
|
351
|
+
if (event === "VALID")
|
|
352
|
+
this.tooltip.hide();
|
|
353
|
+
});
|
|
354
|
+
}
|
|
355
|
+
/**
|
|
356
|
+
* @ignore
|
|
357
|
+
*/
|
|
358
|
+
setDisabledState(isDisabled) {
|
|
359
|
+
isDisabled ? this.baseInput.control.disable() : this.baseInput.control.enable();
|
|
360
|
+
this.readonly = isDisabled;
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
BaseValidation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseValidation, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
364
|
+
BaseValidation.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaseValidation, inputs: { InferErrorMessages: "InferErrorMessages", validationFailed: "validationFailed", readonly: "readonly", widthPx: "widthPx", disabled: "disabled", placeholder: "placeholder", class: "class", style: "style", pattern: "pattern", noValidate: "noValidate", autocomplete: "autocomplete", submitted: "submitted", forceInvalid: "forceInvalid" }, outputs: { inputChange: "inputChange" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: TooltipDirective, descendants: true }, { propertyName: "tooltip_static", first: true, predicate: TooltipDirective, descendants: true, static: true }, { propertyName: "baseInput", first: true, predicate: ["baseInput"], descendants: true }, { propertyName: "baseInput_static", first: true, predicate: ["baseInput"], descendants: true, static: true }], ngImport: i0 });
|
|
365
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseValidation, decorators: [{
|
|
366
|
+
type: Directive
|
|
367
|
+
}], propDecorators: { tooltip: [{
|
|
368
|
+
type: ViewChild,
|
|
369
|
+
args: [TooltipDirective, { static: false }]
|
|
370
|
+
}], tooltip_static: [{
|
|
371
|
+
type: ViewChild,
|
|
372
|
+
args: [TooltipDirective, { static: true }]
|
|
373
|
+
}], baseInput: [{
|
|
374
|
+
type: ViewChild,
|
|
375
|
+
args: ["baseInput", { static: false }]
|
|
376
|
+
}], baseInput_static: [{
|
|
377
|
+
type: ViewChild,
|
|
378
|
+
args: ["baseInput", { static: true }]
|
|
379
|
+
}], InferErrorMessages: [{
|
|
380
|
+
type: Input
|
|
381
|
+
}], validationFailed: [{
|
|
382
|
+
type: Input
|
|
383
|
+
}], readonly: [{
|
|
384
|
+
type: Input
|
|
385
|
+
}], widthPx: [{
|
|
386
|
+
type: Input
|
|
387
|
+
}], disabled: [{
|
|
388
|
+
type: Input
|
|
389
|
+
}], placeholder: [{
|
|
390
|
+
type: Input
|
|
391
|
+
}], class: [{
|
|
392
|
+
type: Input
|
|
393
|
+
}], style: [{
|
|
394
|
+
type: Input
|
|
395
|
+
}], pattern: [{
|
|
396
|
+
type: Input
|
|
397
|
+
}], noValidate: [{
|
|
398
|
+
type: Input
|
|
399
|
+
}], autocomplete: [{
|
|
400
|
+
type: Input
|
|
401
|
+
}], inputChange: [{
|
|
402
|
+
type: Output
|
|
403
|
+
}], submitted: [{
|
|
404
|
+
type: Input,
|
|
405
|
+
args: ["submitted"]
|
|
406
|
+
}], forceInvalid: [{
|
|
407
|
+
type: Input
|
|
408
|
+
}] } });
|
|
409
|
+
|
|
410
|
+
/**
|
|
411
|
+
* Classe di localizzazione in comune con tutti i Componenti di validazione
|
|
412
|
+
*/
|
|
413
|
+
class BaseValidationLoc extends LocalizationService {
|
|
414
|
+
/**
|
|
415
|
+
* @ignore
|
|
416
|
+
*/
|
|
417
|
+
constructor(LOC_LOCALE) {
|
|
418
|
+
super(LOC_LOCALE !== null && LOC_LOCALE !== void 0 ? LOC_LOCALE : 'it-IT');
|
|
419
|
+
super.set("en->it", "Required Input", ["Input Richiesto"]);
|
|
420
|
+
super.set("en->it", "Invalid Input Format", ["Formato Input Invalido"]);
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
|
+
BaseValidationLoc.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseValidationLoc, deps: [{ token: FAV_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
424
|
+
BaseValidationLoc.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseValidationLoc });
|
|
425
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseValidationLoc, decorators: [{
|
|
426
|
+
type: Injectable
|
|
427
|
+
}], ctorParameters: function () {
|
|
428
|
+
return [{ type: undefined, decorators: [{
|
|
429
|
+
type: Optional
|
|
430
|
+
}, {
|
|
431
|
+
type: Inject,
|
|
432
|
+
args: [FAV_LOCALE]
|
|
433
|
+
}] }];
|
|
434
|
+
} });
|
|
435
|
+
|
|
436
|
+
// Angular
|
|
437
|
+
/**
|
|
438
|
+
* Componente di validaizone per gli input a selezione singola
|
|
439
|
+
*/
|
|
440
|
+
class ValidationSelectComponent extends BaseValidation {
|
|
441
|
+
/**
|
|
442
|
+
* @ignore
|
|
443
|
+
*/
|
|
444
|
+
constructor(_validators, _asyncValidators, injector, cdr, lc) {
|
|
445
|
+
super();
|
|
446
|
+
this._validators = _validators;
|
|
447
|
+
this._asyncValidators = _asyncValidators;
|
|
448
|
+
this.injector = injector;
|
|
449
|
+
this.cdr = cdr;
|
|
450
|
+
this.lc = lc;
|
|
451
|
+
/**
|
|
452
|
+
* valore del campo vuoto della select
|
|
453
|
+
*/
|
|
454
|
+
this.emptyFieldValue = "-2";
|
|
455
|
+
/**
|
|
456
|
+
* Valore del placeholder
|
|
457
|
+
*/
|
|
458
|
+
this.placeHolderValue = "-1";
|
|
459
|
+
/**
|
|
460
|
+
* Per i componenti non obbligatori indica se fornire un "valore vuoto"
|
|
461
|
+
*/
|
|
462
|
+
this.emptyValue = true;
|
|
463
|
+
/**
|
|
464
|
+
* Indica se mostrare o nascondere il simboletto di validazione (Tic verde o Croce rossa)
|
|
465
|
+
*/
|
|
466
|
+
this.showValidationSymbol = true;
|
|
467
|
+
/**
|
|
468
|
+
* Contenuto della label Floattante Material-Style
|
|
469
|
+
*/
|
|
470
|
+
this.label = "";
|
|
471
|
+
/**
|
|
472
|
+
* Evento richiamato quando si perde il focus sull'input di inserimento
|
|
473
|
+
*/
|
|
474
|
+
this.onBlur = new EventEmitter();
|
|
475
|
+
/**
|
|
476
|
+
* @ignore
|
|
477
|
+
*/
|
|
478
|
+
this.onTouched = () => { }; //placeholder on touched function
|
|
479
|
+
}
|
|
480
|
+
/**
|
|
481
|
+
* @ignore
|
|
482
|
+
*/
|
|
483
|
+
ngOnInit() {
|
|
484
|
+
//controllo se è settato un required per decidere in maniera condizionale se utilizzare il validatore required nel componente interno
|
|
485
|
+
//Lo imposto ANCHE se sono in situazione di noValidate perché comporta eventuali modifiche grafiche che potrebbero servirmi, ma comunque non va a d aggiungere
|
|
486
|
+
//validatori o cose strane, quindi GG
|
|
487
|
+
if (this._validators && this._validators.some(elem => elem instanceof RequiredValidator && elem.required))
|
|
488
|
+
this.required = true;
|
|
489
|
+
}
|
|
490
|
+
/**
|
|
491
|
+
* @ignore
|
|
492
|
+
*/
|
|
493
|
+
ngOnDestroy() {
|
|
494
|
+
if (this.tooltipSubscription)
|
|
495
|
+
this.tooltipSubscription.unsubscribe();
|
|
496
|
+
}
|
|
497
|
+
/**
|
|
498
|
+
* @ignore
|
|
499
|
+
*/
|
|
500
|
+
ngAfterViewInit() {
|
|
501
|
+
this.postBinding();
|
|
502
|
+
}
|
|
503
|
+
/**
|
|
504
|
+
* Metodo che si occupa di collegare i validatori e la funzione di reset dal **ControlValueAccessor** rappresentato
|
|
505
|
+
* da questo componente al **ControlValueAccessor** rappresentato dall'effettivo elemento di Input presente lato HTML
|
|
506
|
+
*/
|
|
507
|
+
postBinding() {
|
|
508
|
+
// Eredito i validatori
|
|
509
|
+
if (!this.noValidate) {
|
|
510
|
+
this.baseInput.control.setAsyncValidators(this._asyncValidators);
|
|
511
|
+
this.baseInput.control.setValidators(this._validators);
|
|
512
|
+
}
|
|
513
|
+
this.CheckValidity();
|
|
514
|
+
const ngControl = this.injector.get(NgControl, null);
|
|
515
|
+
if (ngControl) {
|
|
516
|
+
this.parentControl = ngControl.control;
|
|
517
|
+
// se la variabile novalidate è true, elimino tutti i validatori eventualmente inseriti
|
|
518
|
+
if (this.noValidate) {
|
|
519
|
+
this.parentControl.clearValidators();
|
|
520
|
+
this.parentControl.clearAsyncValidators();
|
|
521
|
+
}
|
|
522
|
+
// faccio in modo che se chiamo il reset del controllo (o della form) dall'esterno si resetti anche il controllo nativo
|
|
523
|
+
const origFunc = this.parentControl.reset;
|
|
524
|
+
this.parentControl.reset = () => {
|
|
525
|
+
origFunc.apply(this.parentControl);
|
|
526
|
+
this.baseInput.control.reset();
|
|
527
|
+
this.tooltip.hide();
|
|
528
|
+
};
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
/**
|
|
532
|
+
* @ignore
|
|
533
|
+
*/
|
|
534
|
+
writeValue(value) {
|
|
535
|
+
this.value = value;
|
|
536
|
+
this.propagateChange(value);
|
|
537
|
+
this.cdr.markForCheck();
|
|
538
|
+
}
|
|
539
|
+
/**
|
|
540
|
+
* L'emit della modifica al valore viene gestito su un evento custom (**inputChange**) come workaround al malfunzionamento dell'**ngModelChange** nativo
|
|
541
|
+
*
|
|
542
|
+
* @param {any} toEmit valore da propagare all'esterno
|
|
543
|
+
*/
|
|
544
|
+
onModelChange(toEmit) {
|
|
545
|
+
this.writeValue(toEmit);
|
|
546
|
+
this.inputChange.emit(toEmit);
|
|
547
|
+
this.onTouched();
|
|
548
|
+
}
|
|
549
|
+
/**
|
|
550
|
+
* @ignore
|
|
551
|
+
*/
|
|
552
|
+
registerOnChange(fn) {
|
|
553
|
+
this.propagateChange = fn;
|
|
554
|
+
}
|
|
555
|
+
/**
|
|
556
|
+
* @ignore
|
|
557
|
+
*/
|
|
558
|
+
registerOnTouched(fn) {
|
|
559
|
+
this.onTouched = fn;
|
|
560
|
+
}
|
|
561
|
+
}
|
|
562
|
+
ValidationSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationSelectComponent, deps: [{ token: NG_VALIDATORS, optional: true }, { token: NG_ASYNC_VALIDATORS, optional: true }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
563
|
+
ValidationSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ValidationSelectComponent, selector: "val-select", inputs: { emptyFieldValue: "emptyFieldValue", placeHolderValue: "placeHolderValue", emptyValue: "emptyValue", showValidationSymbol: "showValidationSymbol", label: "label" }, outputs: { onBlur: "onBlur" }, providers: [
|
|
564
|
+
{ provide: LocalizationService, useClass: BaseValidationLoc },
|
|
565
|
+
{
|
|
566
|
+
provide: NG_VALUE_ACCESSOR,
|
|
567
|
+
useExisting: forwardRef(() => ValidationSelectComponent),
|
|
568
|
+
multi: true
|
|
569
|
+
}
|
|
570
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n <select matNativeControl\r\n #baseInput=\"ngModel\"\r\n name=\"val-select\"\r\n class=\"form-control\"\r\n triggers=\"\"\r\n placement=\"top\"\r\n [customRequired]=\"required ? 'true' : 'false'\"\r\n [CustomNullValues]=\"[placeHolderValue,emptyFieldValue]\"\r\n [(ngModel)]=\"value\"\r\n [tooltip]=\"tolTemplate\"\r\n [class.checking-combo]=\"!noValidate\"\r\n [class.app-option-placeholder]=\"baseInput.value === placeHolderValue\"\r\n [class.no-bg-img]=\"!showValidationSymbol\"\r\n [disabled]=\"readonly\"\r\n (focus)=\"checkTooltip()\"\r\n (blur)=\"closeTooltip(); onBlur.emit(true);\"\r\n (ngModelChange)=\"onModelChange($event)\">\r\n\r\n <option *ngIf=\"placeholder\" [value]=\"placeHolderValue\" disabled selected hidden>{{placeholder}}</option>\r\n <option *ngIf=\"required == false && emptyValue\" [value]=\"emptyFieldValue\"></option>\r\n <ng-content></ng-content>\r\n </select>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div (click)=\"closeTooltip()\">\r\n <span>{{validationFailed}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: CustomRequiredDirective, selector: "[customRequired]", inputs: ["CustomNullValues", "customRequired"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
571
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationSelectComponent, decorators: [{
|
|
572
|
+
type: Component,
|
|
573
|
+
args: [{ selector: "val-select", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
574
|
+
{ provide: LocalizationService, useClass: BaseValidationLoc },
|
|
575
|
+
{
|
|
576
|
+
provide: NG_VALUE_ACCESSOR,
|
|
577
|
+
useExisting: forwardRef(() => ValidationSelectComponent),
|
|
578
|
+
multi: true
|
|
579
|
+
}
|
|
580
|
+
], template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n <select matNativeControl\r\n #baseInput=\"ngModel\"\r\n name=\"val-select\"\r\n class=\"form-control\"\r\n triggers=\"\"\r\n placement=\"top\"\r\n [customRequired]=\"required ? 'true' : 'false'\"\r\n [CustomNullValues]=\"[placeHolderValue,emptyFieldValue]\"\r\n [(ngModel)]=\"value\"\r\n [tooltip]=\"tolTemplate\"\r\n [class.checking-combo]=\"!noValidate\"\r\n [class.app-option-placeholder]=\"baseInput.value === placeHolderValue\"\r\n [class.no-bg-img]=\"!showValidationSymbol\"\r\n [disabled]=\"readonly\"\r\n (focus)=\"checkTooltip()\"\r\n (blur)=\"closeTooltip(); onBlur.emit(true);\"\r\n (ngModelChange)=\"onModelChange($event)\">\r\n\r\n <option *ngIf=\"placeholder\" [value]=\"placeHolderValue\" disabled selected hidden>{{placeholder}}</option>\r\n <option *ngIf=\"required == false && emptyValue\" [value]=\"emptyFieldValue\"></option>\r\n <ng-content></ng-content>\r\n </select>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div (click)=\"closeTooltip()\">\r\n <span>{{validationFailed}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"] }]
|
|
581
|
+
}], ctorParameters: function () {
|
|
582
|
+
return [{ type: Array, decorators: [{
|
|
583
|
+
type: Optional
|
|
584
|
+
}, {
|
|
585
|
+
type: Inject,
|
|
586
|
+
args: [NG_VALIDATORS]
|
|
587
|
+
}] }, { type: Array, decorators: [{
|
|
588
|
+
type: Optional
|
|
589
|
+
}, {
|
|
590
|
+
type: Inject,
|
|
591
|
+
args: [NG_ASYNC_VALIDATORS]
|
|
592
|
+
}] }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }];
|
|
593
|
+
}, propDecorators: { emptyFieldValue: [{
|
|
594
|
+
type: Input
|
|
595
|
+
}], placeHolderValue: [{
|
|
596
|
+
type: Input
|
|
597
|
+
}], emptyValue: [{
|
|
598
|
+
type: Input
|
|
599
|
+
}], showValidationSymbol: [{
|
|
600
|
+
type: Input
|
|
601
|
+
}], label: [{
|
|
602
|
+
type: Input
|
|
603
|
+
}], onBlur: [{
|
|
604
|
+
type: Output
|
|
605
|
+
}] } });
|
|
606
|
+
|
|
607
|
+
// Angular
|
|
608
|
+
/**
|
|
609
|
+
* Componente di validaizone per gli input di tipo data
|
|
610
|
+
*/
|
|
611
|
+
class ValidationDateComponent extends BaseValidation {
|
|
612
|
+
/**
|
|
613
|
+
* @ignore
|
|
614
|
+
*/
|
|
615
|
+
constructor(cdr, _validators, _asyncValidators, injector, lc, dateExts) {
|
|
616
|
+
super();
|
|
617
|
+
this.cdr = cdr;
|
|
618
|
+
this._validators = _validators;
|
|
619
|
+
this._asyncValidators = _asyncValidators;
|
|
620
|
+
this.injector = injector;
|
|
621
|
+
this.lc = lc;
|
|
622
|
+
this.dateExts = dateExts;
|
|
623
|
+
/**
|
|
624
|
+
* Utilizza il Date di Javascript come modello in uscita. Il modello in entrata verrà comunque ricondotto a un DayJs
|
|
625
|
+
*/
|
|
626
|
+
this.useJsDates = false;
|
|
627
|
+
/**
|
|
628
|
+
* @ignore
|
|
629
|
+
*/
|
|
630
|
+
this.onTouched = () => { };
|
|
631
|
+
}
|
|
632
|
+
/**
|
|
633
|
+
* @ignore
|
|
634
|
+
*/
|
|
635
|
+
ngOnInit() {
|
|
636
|
+
//controllo se è settato un required per decidere in maniera condizionale se utilizzare il validatore required nel componente interno
|
|
637
|
+
if (this._validators && !this.noValidate && this._validators.some(elem => elem instanceof RequiredValidator))
|
|
638
|
+
this.required = true;
|
|
639
|
+
this._format = this.lc.token("getSmallDateDisplayFormat");
|
|
640
|
+
}
|
|
641
|
+
/**
|
|
642
|
+
* @ignore
|
|
643
|
+
*/
|
|
644
|
+
ngAfterViewInit() {
|
|
645
|
+
this.postBinding();
|
|
646
|
+
}
|
|
647
|
+
/**
|
|
648
|
+
* Metodo che si occupa di collegare i validatori e la funzione di reset dal **ControlValueAccessor** rappresentato
|
|
649
|
+
* da questo componente al **ControlValueAccessor** rappresentato dall'effettivo elemento di Input presente lato HTML
|
|
650
|
+
*/
|
|
651
|
+
postBinding() {
|
|
652
|
+
this.CheckValidity();
|
|
653
|
+
const ngControl = this.injector.get(NgControl, null);
|
|
654
|
+
if (ngControl) {
|
|
655
|
+
this.parentControl = ngControl.control;
|
|
656
|
+
if (this.noValidate) {
|
|
657
|
+
this.parentControl.clearValidators();
|
|
658
|
+
this.parentControl.clearAsyncValidators();
|
|
659
|
+
}
|
|
660
|
+
else {
|
|
661
|
+
this.baseInput.control.setAsyncValidators(this._asyncValidators);
|
|
662
|
+
this.baseInput.control.setValidators(this._validators);
|
|
663
|
+
}
|
|
664
|
+
// //faccio in modo che se chiamo il reset del controllo (o della form) dall'esterno si resetti anche il controllo nativo
|
|
665
|
+
//faccio in modo che se chiamo il reset del controllo (o della form) dall'esterno si resetti anche il controllo nativo
|
|
666
|
+
const origFunc = this.parentControl.reset;
|
|
667
|
+
this.parentControl.reset = () => {
|
|
668
|
+
origFunc.apply(this.parentControl);
|
|
669
|
+
this.baseInput.control.reset();
|
|
670
|
+
this.tooltip.hide();
|
|
671
|
+
};
|
|
672
|
+
}
|
|
673
|
+
}
|
|
674
|
+
/**
|
|
675
|
+
* @ignore
|
|
676
|
+
*/
|
|
677
|
+
writeValue(value) {
|
|
678
|
+
if (!value) {
|
|
679
|
+
this.value = null;
|
|
680
|
+
if (this.baseInput)
|
|
681
|
+
this.baseInput.reset();
|
|
682
|
+
}
|
|
683
|
+
else {
|
|
684
|
+
var date = null;
|
|
685
|
+
if (this.useJsDates) {
|
|
686
|
+
date = this.dateExts.getDateConvertion(value);
|
|
687
|
+
if (date) {
|
|
688
|
+
this.propagateChange(date.toDate());
|
|
689
|
+
this.inputChange.emit(date.toDate());
|
|
690
|
+
}
|
|
691
|
+
}
|
|
692
|
+
else
|
|
693
|
+
date = dayjs(value, this.lc.token("getSmallDateFormat"));
|
|
694
|
+
this.value = date;
|
|
695
|
+
}
|
|
696
|
+
this.cdr.markForCheck();
|
|
697
|
+
}
|
|
698
|
+
/**
|
|
699
|
+
* Metodo che si occupa di, eventualmente, aggiustare il valore da propagare ed emetterlo
|
|
700
|
+
*
|
|
701
|
+
* L'emit della modifica al valore viene gestito su un evento custom (**inputChange**) come workaround al malfunzionamento dell'**ngModelChange** nativo
|
|
702
|
+
*
|
|
703
|
+
* @param {any} toEmit valore da propagare all'esterno
|
|
704
|
+
*/
|
|
705
|
+
outputValue(toEmit) {
|
|
706
|
+
let value = toEmit.value;
|
|
707
|
+
let propagateValue;
|
|
708
|
+
if (!value)
|
|
709
|
+
propagateValue = null;
|
|
710
|
+
else if (!this.useJsDates)
|
|
711
|
+
propagateValue = value.format(this.lc.token("getSmallDateFormat"));
|
|
712
|
+
else {
|
|
713
|
+
if (value && value.isValid())
|
|
714
|
+
propagateValue = value.hour(0).minute(0).second(0).toDate();
|
|
715
|
+
else
|
|
716
|
+
propagateValue = null;
|
|
717
|
+
}
|
|
718
|
+
this.propagateChange(propagateValue);
|
|
719
|
+
this.inputChange.emit(propagateValue);
|
|
720
|
+
this.onTouched();
|
|
721
|
+
}
|
|
722
|
+
/**
|
|
723
|
+
* @ignore
|
|
724
|
+
*/
|
|
725
|
+
registerOnChange(fn) {
|
|
726
|
+
this.propagateChange = fn;
|
|
727
|
+
}
|
|
728
|
+
/**
|
|
729
|
+
* @ignore
|
|
730
|
+
*/
|
|
731
|
+
registerOnTouched(fn) {
|
|
732
|
+
this.onTouched = fn;
|
|
733
|
+
}
|
|
734
|
+
}
|
|
735
|
+
ValidationDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationDateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NG_VALIDATORS, optional: true }, { token: NG_ASYNC_VALIDATORS, optional: true }, { token: i0.Injector }, { token: i1.LocalizationService }, { token: i2$2.DateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
736
|
+
ValidationDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ValidationDateComponent, selector: "val-date", inputs: { useJsDates: "useJsDates" }, providers: [
|
|
737
|
+
{ provide: LocalizationService, useClass: BaseValidationLoc },
|
|
738
|
+
{
|
|
739
|
+
provide: NG_VALUE_ACCESSOR,
|
|
740
|
+
useExisting: forwardRef(() => ValidationDateComponent),
|
|
741
|
+
multi: true
|
|
742
|
+
}
|
|
743
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n <input matInput\r\n [matDatepicker]=\"datepicker\"\r\n #baseInput=\"ngModel\"\r\n type=\"text\"\r\n triggers=\"\"\r\n placement=\"top\"\r\n name=\"val-date\"\r\n class=\"form-control {{class}}\"\r\n autocomplete=\"{{autocomplete}}\"\r\n [(ngModel)]=\"value\"\r\n [class.checking-field]=\"!noValidate\"\r\n [tooltip]=\"tolTemplate\"\r\n [placeholder]=\"placeholder ? '' : _format\"\r\n [disabled]=\"readonly || disabled\"\r\n [isDisabled]=\"readonly || disabled\"\r\n (dateChange)=\"outputValue($event)\" />\r\n <mat-datepicker-toggle matSuffix [for]=\"datepicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #datepicker></mat-datepicker>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div (click)=\"closeTooltip()\">\r\n <span>{{validationFailed}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
744
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationDateComponent, decorators: [{
|
|
745
|
+
type: Component,
|
|
746
|
+
args: [{ selector: "val-date", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
747
|
+
{ provide: LocalizationService, useClass: BaseValidationLoc },
|
|
748
|
+
{
|
|
749
|
+
provide: NG_VALUE_ACCESSOR,
|
|
750
|
+
useExisting: forwardRef(() => ValidationDateComponent),
|
|
751
|
+
multi: true
|
|
752
|
+
}
|
|
753
|
+
], template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n <input matInput\r\n [matDatepicker]=\"datepicker\"\r\n #baseInput=\"ngModel\"\r\n type=\"text\"\r\n triggers=\"\"\r\n placement=\"top\"\r\n name=\"val-date\"\r\n class=\"form-control {{class}}\"\r\n autocomplete=\"{{autocomplete}}\"\r\n [(ngModel)]=\"value\"\r\n [class.checking-field]=\"!noValidate\"\r\n [tooltip]=\"tolTemplate\"\r\n [placeholder]=\"placeholder ? '' : _format\"\r\n [disabled]=\"readonly || disabled\"\r\n [isDisabled]=\"readonly || disabled\"\r\n (dateChange)=\"outputValue($event)\" />\r\n <mat-datepicker-toggle matSuffix [for]=\"datepicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #datepicker></mat-datepicker>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div (click)=\"closeTooltip()\">\r\n <span>{{validationFailed}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"] }]
|
|
754
|
+
}], ctorParameters: function () {
|
|
755
|
+
return [{ type: i0.ChangeDetectorRef }, { type: Array, decorators: [{
|
|
756
|
+
type: Optional
|
|
757
|
+
}, {
|
|
758
|
+
type: Inject,
|
|
759
|
+
args: [NG_VALIDATORS]
|
|
760
|
+
}] }, { type: Array, decorators: [{
|
|
761
|
+
type: Optional
|
|
762
|
+
}, {
|
|
763
|
+
type: Inject,
|
|
764
|
+
args: [NG_ASYNC_VALIDATORS]
|
|
765
|
+
}] }, { type: i0.Injector }, { type: i1.LocalizationService }, { type: i2$2.DateService }];
|
|
766
|
+
}, propDecorators: { useJsDates: [{
|
|
767
|
+
type: Input
|
|
768
|
+
}] } });
|
|
769
|
+
|
|
770
|
+
// Angular
|
|
771
|
+
/**
|
|
772
|
+
* Componente di validaizone per gli input a semplice casella di testo
|
|
773
|
+
*/
|
|
774
|
+
class ValidationInputComponent extends BaseValidation {
|
|
775
|
+
/**
|
|
776
|
+
* @ignore
|
|
777
|
+
*/
|
|
778
|
+
constructor(cdr, _validators, _asyncValidators, injector, lc) {
|
|
779
|
+
super();
|
|
780
|
+
this.cdr = cdr;
|
|
781
|
+
this._validators = _validators;
|
|
782
|
+
this._asyncValidators = _asyncValidators;
|
|
783
|
+
this.injector = injector;
|
|
784
|
+
this.lc = lc;
|
|
785
|
+
/**
|
|
786
|
+
* Indica se questo Comopnente deve rappresentare un oggetto di Input di tipo "Password"
|
|
787
|
+
*/
|
|
788
|
+
this.Password = false;
|
|
789
|
+
/**
|
|
790
|
+
* Indica se deve mostrare un indicazione di warning nel suffisso
|
|
791
|
+
*/
|
|
792
|
+
this.showWarning = false;
|
|
793
|
+
/**
|
|
794
|
+
* Classe del warning eventualmente modificabile.
|
|
795
|
+
*
|
|
796
|
+
* Default: "fa fa-warning"
|
|
797
|
+
*/
|
|
798
|
+
this.warningClass = "fa fa-warning";
|
|
799
|
+
/**
|
|
800
|
+
* Identifica se il testo di un componente di tipo "password" dev'essere visualizzato o meno
|
|
801
|
+
*/
|
|
802
|
+
this.passShown = false;
|
|
803
|
+
/**
|
|
804
|
+
* Tipo del componente, può essere "text" o "password" e viene impostato automaticamente dall'Input **Password**
|
|
805
|
+
*/
|
|
806
|
+
this.type = "text";
|
|
807
|
+
/**
|
|
808
|
+
* Indicazione se il componente ha o meno un suffisso.
|
|
809
|
+
*
|
|
810
|
+
* Valorizzato a **true** solo se viene trovata una proiezione su **suffix_internal** o se l'Input **showWarning** viene impostato a **true**
|
|
811
|
+
*/
|
|
812
|
+
this.HasSuffix = false;
|
|
813
|
+
/**
|
|
814
|
+
* Indicazione se il componente ha o meno un prefisso.
|
|
815
|
+
*
|
|
816
|
+
* Valorizzato a **true** solo se viene trovata una proiezione su **prefix_internal**
|
|
817
|
+
*/
|
|
818
|
+
this.HasPrefix = false;
|
|
819
|
+
/**
|
|
820
|
+
* @ignore
|
|
821
|
+
*/
|
|
822
|
+
this.onTouched = () => { };
|
|
823
|
+
}
|
|
824
|
+
/**
|
|
825
|
+
* @ignore
|
|
826
|
+
*/
|
|
827
|
+
ngOnInit() {
|
|
828
|
+
//controllo se è settato un required per decidere in maniera condizionale se utilizzare il validatore required nel componente interno
|
|
829
|
+
if (this._validators && !this.noValidate && this._validators.some(elem => elem instanceof RequiredValidator))
|
|
830
|
+
this.required = true;
|
|
831
|
+
if (this.Password)
|
|
832
|
+
this.type = "password";
|
|
833
|
+
}
|
|
834
|
+
/**
|
|
835
|
+
* @ignore
|
|
836
|
+
*/
|
|
837
|
+
ngOnDestroy() {
|
|
838
|
+
if (this.tooltipSubscription)
|
|
839
|
+
this.tooltipSubscription.unsubscribe();
|
|
840
|
+
}
|
|
841
|
+
/**
|
|
842
|
+
* @ignore
|
|
843
|
+
*/
|
|
844
|
+
ngAfterViewInit() {
|
|
845
|
+
this.HasSuffix = !!this.suffix_internal || this.showWarning;
|
|
846
|
+
this.HasPrefix = !!this.prefix_internal;
|
|
847
|
+
this.postBinding();
|
|
848
|
+
}
|
|
849
|
+
/**
|
|
850
|
+
* @ignore
|
|
851
|
+
*/
|
|
852
|
+
ngOnChanges(changes) {
|
|
853
|
+
const newShowWarnings = changes["showWarning"];
|
|
854
|
+
if (newShowWarnings)
|
|
855
|
+
this.HasSuffix = !!this.suffix_internal || this.showWarning;
|
|
856
|
+
}
|
|
857
|
+
/**
|
|
858
|
+
* Metodo che si occupa di collegare i validatori e la funzione di reset dal **ControlValueAccessor** rappresentato
|
|
859
|
+
* da questo componente al **ControlValueAccessor** rappresentato dall'effettivo elemento di Input presente lato HTML
|
|
860
|
+
*/
|
|
861
|
+
postBinding() {
|
|
862
|
+
this.CheckValidity();
|
|
863
|
+
const ngControl = this.injector.get(NgControl, null);
|
|
864
|
+
if (ngControl) {
|
|
865
|
+
this.parentControl = ngControl.control;
|
|
866
|
+
// Se la variabile novalidate è true, elimino tutti i validatori eventualmente inseriti
|
|
867
|
+
if (this.noValidate) {
|
|
868
|
+
this.parentControl.clearValidators();
|
|
869
|
+
this.parentControl.clearAsyncValidators();
|
|
870
|
+
}
|
|
871
|
+
else {
|
|
872
|
+
this.baseInput.control.setAsyncValidators(this._asyncValidators);
|
|
873
|
+
this.baseInput.control.setValidators(this._validators);
|
|
874
|
+
}
|
|
875
|
+
// Faccio in modo che se chiamo il reset del controllo (o della form) dall'esterno si resetti anche il controllo nativo
|
|
876
|
+
const origFunc = this.parentControl.reset;
|
|
877
|
+
this.parentControl.reset = () => {
|
|
878
|
+
origFunc.apply(this.parentControl);
|
|
879
|
+
this.baseInput.control.reset();
|
|
880
|
+
this.tooltip.hide();
|
|
881
|
+
};
|
|
882
|
+
}
|
|
883
|
+
}
|
|
884
|
+
/**
|
|
885
|
+
* @ignore
|
|
886
|
+
*/
|
|
887
|
+
writeValue(value) {
|
|
888
|
+
this.value = value;
|
|
889
|
+
this.propagateChange(value);
|
|
890
|
+
this.cdr.markForCheck();
|
|
891
|
+
}
|
|
892
|
+
/**
|
|
893
|
+
* L'emit della modifica al valore viene gestito su un evento custom (**inputChange**) come workaround al malfunzionamento dell'**ngModelChange** nativo
|
|
894
|
+
*
|
|
895
|
+
* @param {any} toEmit valore da propagare all'esterno
|
|
896
|
+
*/
|
|
897
|
+
onModelChange(toEmit) {
|
|
898
|
+
this.writeValue(toEmit);
|
|
899
|
+
this.inputChange.emit(toEmit);
|
|
900
|
+
this.onTouched();
|
|
901
|
+
}
|
|
902
|
+
/**
|
|
903
|
+
* @ignore
|
|
904
|
+
*/
|
|
905
|
+
registerOnChange(fn) {
|
|
906
|
+
this.propagateChange = fn;
|
|
907
|
+
}
|
|
908
|
+
/**
|
|
909
|
+
* @ignore
|
|
910
|
+
*/
|
|
911
|
+
registerOnTouched(fn) {
|
|
912
|
+
this.onTouched = fn;
|
|
913
|
+
}
|
|
914
|
+
}
|
|
915
|
+
ValidationInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NG_VALIDATORS, optional: true }, { token: NG_ASYNC_VALIDATORS, optional: true }, { token: i0.Injector }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
916
|
+
ValidationInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ValidationInputComponent, selector: "val-input", inputs: { Password: "Password", showWarning: "showWarning", warningTitle: "warningTitle", warningClass: "warningClass", value: "value" }, providers: [
|
|
917
|
+
{ provide: LocalizationService, useClass: BaseValidationLoc },
|
|
918
|
+
{
|
|
919
|
+
provide: NG_VALUE_ACCESSOR,
|
|
920
|
+
useExisting: forwardRef(() => ValidationInputComponent),
|
|
921
|
+
multi: true
|
|
922
|
+
}
|
|
923
|
+
], queries: [{ propertyName: "suffix_internal", first: true, predicate: ["suffix_internal"], descendants: true }, { propertyName: "prefix_internal", first: true, predicate: ["prefix_internal"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n <mat-label [class.app-margin-left-25]=\"HasPrefix\" *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n <ng-container *ngIf=\"HasPrefix\">\r\n <ng-container *ngTemplateOutlet=\"prefix_internal\"></ng-container>\r\n </ng-container>\r\n\r\n <input matInput\r\n #baseInput='ngModel'\r\n type=\"{{type}}\"\r\n triggers=\"\"\r\n placement=\"top\"\r\n autocomplete=\"{{autocomplete}}\"\r\n name=\"val-input\"\r\n class=\"form-control {{class}}\"\r\n [class.app-margin-left-25]=\"HasPrefix\"\r\n [class.mat-input-with-suffix]=\"HasSuffix || Password || showWarning\"\r\n [(ngModel)]=\"value\"\r\n [class.checking-field]=\"!noValidate && !showWarning\"\r\n [tooltip]=\"tolTemplate\"\r\n [disabled]=\"readonly || disabled\"\r\n (ngModelChange)=\"onModelChange($event)\"\r\n (focus)=\"checkTooltip();\"\r\n (blur)=\"closeTooltip();\">\r\n <ng-container *ngIf=\"HasSuffix || Password || showWarning\">\r\n <ng-container *ngIf=\"!Password && !showWarning\">\r\n <ng-container *ngTemplateOutlet=\"suffix_internal\"></ng-container>\r\n </ng-container>\r\n\r\n <span class=\"form-input-suffix\" *ngIf=\"Password || showWarning\">\r\n <ng-container *ngIf=\"Password\" matSuffix>\r\n <a *ngIf=\"passShown\" class=\"fa fa-eye-slash app-fs-16 app-pointer\" (click)=\"type = 'password'; passShown = !passShown; $event.preventDefault()\"></a>\r\n <a *ngIf=\"!passShown\" class=\"fa fa-eye app-fs-16 app-pointer\" (click)=\"type = 'text'; passShown = !passShown; $event.preventDefault()\"></a>\r\n </ng-container>\r\n <ng-container *ngIf=\"showWarning\" matSuffix>\r\n <span title=\"{{warningTitle}}\" class=\"{{warningClass}} text-warning app-fs-16\"></span>\r\n </ng-container>\r\n </span>\r\n </ng-container>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div (click)=\"closeTooltip()\">\r\n <span>{{validationFailed}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
924
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationInputComponent, decorators: [{
|
|
925
|
+
type: Component,
|
|
926
|
+
args: [{ selector: "val-input", changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
927
|
+
{ provide: LocalizationService, useClass: BaseValidationLoc },
|
|
928
|
+
{
|
|
929
|
+
provide: NG_VALUE_ACCESSOR,
|
|
930
|
+
useExisting: forwardRef(() => ValidationInputComponent),
|
|
931
|
+
multi: true
|
|
932
|
+
}
|
|
933
|
+
], encapsulation: ViewEncapsulation.None, template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n <mat-label [class.app-margin-left-25]=\"HasPrefix\" *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n <ng-container *ngIf=\"HasPrefix\">\r\n <ng-container *ngTemplateOutlet=\"prefix_internal\"></ng-container>\r\n </ng-container>\r\n\r\n <input matInput\r\n #baseInput='ngModel'\r\n type=\"{{type}}\"\r\n triggers=\"\"\r\n placement=\"top\"\r\n autocomplete=\"{{autocomplete}}\"\r\n name=\"val-input\"\r\n class=\"form-control {{class}}\"\r\n [class.app-margin-left-25]=\"HasPrefix\"\r\n [class.mat-input-with-suffix]=\"HasSuffix || Password || showWarning\"\r\n [(ngModel)]=\"value\"\r\n [class.checking-field]=\"!noValidate && !showWarning\"\r\n [tooltip]=\"tolTemplate\"\r\n [disabled]=\"readonly || disabled\"\r\n (ngModelChange)=\"onModelChange($event)\"\r\n (focus)=\"checkTooltip();\"\r\n (blur)=\"closeTooltip();\">\r\n <ng-container *ngIf=\"HasSuffix || Password || showWarning\">\r\n <ng-container *ngIf=\"!Password && !showWarning\">\r\n <ng-container *ngTemplateOutlet=\"suffix_internal\"></ng-container>\r\n </ng-container>\r\n\r\n <span class=\"form-input-suffix\" *ngIf=\"Password || showWarning\">\r\n <ng-container *ngIf=\"Password\" matSuffix>\r\n <a *ngIf=\"passShown\" class=\"fa fa-eye-slash app-fs-16 app-pointer\" (click)=\"type = 'password'; passShown = !passShown; $event.preventDefault()\"></a>\r\n <a *ngIf=\"!passShown\" class=\"fa fa-eye app-fs-16 app-pointer\" (click)=\"type = 'text'; passShown = !passShown; $event.preventDefault()\"></a>\r\n </ng-container>\r\n <ng-container *ngIf=\"showWarning\" matSuffix>\r\n <span title=\"{{warningTitle}}\" class=\"{{warningClass}} text-warning app-fs-16\"></span>\r\n </ng-container>\r\n </span>\r\n </ng-container>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div (click)=\"closeTooltip()\">\r\n <span>{{validationFailed}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"] }]
|
|
934
|
+
}], ctorParameters: function () {
|
|
935
|
+
return [{ type: i0.ChangeDetectorRef }, { type: Array, decorators: [{
|
|
936
|
+
type: Optional
|
|
937
|
+
}, {
|
|
938
|
+
type: Inject,
|
|
939
|
+
args: [NG_VALIDATORS]
|
|
940
|
+
}] }, { type: Array, decorators: [{
|
|
941
|
+
type: Optional
|
|
942
|
+
}, {
|
|
943
|
+
type: Inject,
|
|
944
|
+
args: [NG_ASYNC_VALIDATORS]
|
|
945
|
+
}] }, { type: i0.Injector }, { type: i1.LocalizationService }];
|
|
946
|
+
}, propDecorators: { Password: [{
|
|
947
|
+
type: Input
|
|
948
|
+
}], showWarning: [{
|
|
949
|
+
type: Input
|
|
950
|
+
}], warningTitle: [{
|
|
951
|
+
type: Input
|
|
952
|
+
}], warningClass: [{
|
|
953
|
+
type: Input
|
|
954
|
+
}], value: [{
|
|
955
|
+
type: Input,
|
|
956
|
+
args: ["value"]
|
|
957
|
+
}], suffix_internal: [{
|
|
958
|
+
type: ContentChild,
|
|
959
|
+
args: ["suffix_internal", { static: false }]
|
|
960
|
+
}], prefix_internal: [{
|
|
961
|
+
type: ContentChild,
|
|
962
|
+
args: ["prefix_internal", { static: false }]
|
|
963
|
+
}] } });
|
|
964
|
+
|
|
965
|
+
// Angular
|
|
966
|
+
/**
|
|
967
|
+
* Componente di validaizone per gli input con maschera di inserimento numerica
|
|
968
|
+
*/
|
|
969
|
+
class ValidationCurrencyComponent extends ValidationInputComponent {
|
|
970
|
+
/**
|
|
971
|
+
* @ignore
|
|
972
|
+
*/
|
|
973
|
+
constructor(cdr, validators, asyncValidators, injector, lc) {
|
|
974
|
+
super(cdr, validators, asyncValidators, injector, lc);
|
|
975
|
+
this.lc = lc;
|
|
976
|
+
}
|
|
977
|
+
}
|
|
978
|
+
ValidationCurrencyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationCurrencyComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NG_VALIDATORS, optional: true }, { token: NG_ASYNC_VALIDATORS, optional: true }, { token: i0.Injector }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
979
|
+
ValidationCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ValidationCurrencyComponent, selector: "val-currency", inputs: { CurrencyOptions: "CurrencyOptions" }, providers: [
|
|
980
|
+
{ provide: LocalizationService, useClass: BaseValidationLoc },
|
|
981
|
+
{
|
|
982
|
+
provide: NG_VALUE_ACCESSOR,
|
|
983
|
+
useExisting: forwardRef(() => ValidationCurrencyComponent),
|
|
984
|
+
multi: true
|
|
985
|
+
}
|
|
986
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n <input #baseInput='ngModel'\r\n currencyMask\r\n matInput\r\n [readonly]=\"readonly\"\r\n [options]='CurrencyOptions'\r\n [(ngModel)]=\"value\"\r\n name=\"val-input\"\r\n (focus)=\"checkTooltip()\"\r\n (blur)=\"closeTooltip()\"\r\n class=\"form-control {{class}}\"\r\n [class.checking-field]=\"!noValidate\"\r\n (ngModelChange)=\"onModelChange($event)\"\r\n type=\"{{type}}\"\r\n [tooltip]=\"tolTemplate\"\r\n triggers=\"\"\r\n placement=\"top\"\r\n autocomplete=\"{{autocomplete}}\" />\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div>\r\n <span class=\"close-button pull-right\" (click)=\"closeTooltip()\" aria-label=\"Close\">\r\n <span aria-hidden=\"true\">×</span>\r\n </span>\r\n <span>{{validationFailed}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n", "val-currency .mat-form-field-wrapper .form-control.checking-field.ng-touched{padding-right:25px;margin-left:-25px}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
987
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationCurrencyComponent, decorators: [{
|
|
988
|
+
type: Component,
|
|
989
|
+
args: [{ selector: "val-currency", changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
990
|
+
{ provide: LocalizationService, useClass: BaseValidationLoc },
|
|
991
|
+
{
|
|
992
|
+
provide: NG_VALUE_ACCESSOR,
|
|
993
|
+
useExisting: forwardRef(() => ValidationCurrencyComponent),
|
|
994
|
+
multi: true
|
|
995
|
+
}
|
|
996
|
+
], encapsulation: ViewEncapsulation.None, template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n <input #baseInput='ngModel'\r\n currencyMask\r\n matInput\r\n [readonly]=\"readonly\"\r\n [options]='CurrencyOptions'\r\n [(ngModel)]=\"value\"\r\n name=\"val-input\"\r\n (focus)=\"checkTooltip()\"\r\n (blur)=\"closeTooltip()\"\r\n class=\"form-control {{class}}\"\r\n [class.checking-field]=\"!noValidate\"\r\n (ngModelChange)=\"onModelChange($event)\"\r\n type=\"{{type}}\"\r\n [tooltip]=\"tolTemplate\"\r\n triggers=\"\"\r\n placement=\"top\"\r\n autocomplete=\"{{autocomplete}}\" />\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div>\r\n <span class=\"close-button pull-right\" (click)=\"closeTooltip()\" aria-label=\"Close\">\r\n <span aria-hidden=\"true\">×</span>\r\n </span>\r\n <span>{{validationFailed}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n", "val-currency .mat-form-field-wrapper .form-control.checking-field.ng-touched{padding-right:25px;margin-left:-25px}\n"] }]
|
|
997
|
+
}], ctorParameters: function () {
|
|
998
|
+
return [{ type: i0.ChangeDetectorRef }, { type: Array, decorators: [{
|
|
999
|
+
type: Optional
|
|
1000
|
+
}, {
|
|
1001
|
+
type: Inject,
|
|
1002
|
+
args: [NG_VALIDATORS]
|
|
1003
|
+
}] }, { type: Array, decorators: [{
|
|
1004
|
+
type: Optional
|
|
1005
|
+
}, {
|
|
1006
|
+
type: Inject,
|
|
1007
|
+
args: [NG_ASYNC_VALIDATORS]
|
|
1008
|
+
}] }, { type: i0.Injector }, { type: i1.LocalizationService }];
|
|
1009
|
+
}, propDecorators: { CurrencyOptions: [{
|
|
1010
|
+
type: Input
|
|
1011
|
+
}] } });
|
|
1012
|
+
|
|
1013
|
+
// Angular
|
|
1014
|
+
/**
|
|
1015
|
+
* Componente di validaizone per gli input ad area di testo
|
|
1016
|
+
*/
|
|
1017
|
+
class ValidationTextAreaComponent extends ValidationInputComponent {
|
|
1018
|
+
/**
|
|
1019
|
+
* @ignore
|
|
1020
|
+
*/
|
|
1021
|
+
constructor(cdr, validators, asyncValidators, injector, lc) {
|
|
1022
|
+
super(cdr, validators, asyncValidators, injector, lc);
|
|
1023
|
+
this.lc = lc;
|
|
1024
|
+
/**
|
|
1025
|
+
* Righe da mostrare di default per l'area di inserimento
|
|
1026
|
+
*/
|
|
1027
|
+
this.rows = 2;
|
|
1028
|
+
}
|
|
1029
|
+
}
|
|
1030
|
+
ValidationTextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationTextAreaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NG_VALIDATORS, optional: true }, { token: NG_ASYNC_VALIDATORS, optional: true }, { token: i0.Injector }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1031
|
+
ValidationTextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ValidationTextAreaComponent, selector: "val-textarea", inputs: { rows: "rows" }, providers: [
|
|
1032
|
+
{ provide: LocalizationService, useClass: BaseValidationLoc },
|
|
1033
|
+
{
|
|
1034
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1035
|
+
useExisting: forwardRef(() => ValidationTextAreaComponent),
|
|
1036
|
+
multi: true
|
|
1037
|
+
}
|
|
1038
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-full-height mat-no-border-top mat-height-auto\">\r\n <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n <textarea #baseInput=\"ngModel\"\r\n matInput\r\n [(ngModel)]=\"value\"\r\n name=\"val-textarea\"\r\n triggers=\"\"\r\n class=\"app-no-resize form-control {{class}}\"\r\n [class.checking-field]=\"!noValidate\"\r\n rows=\"{{rows}}\"\r\n [tooltip]=\"tolTemplate\"\r\n placement=\"top\"\r\n (focus)=\"checkTooltip()\"\r\n (blur)=\"closeTooltip()\"\r\n (ngModelChange)=\"onModelChange($event)\">\r\n </textarea>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div (click)=\"closeTooltip()\">\r\n <span>{{validationFailed}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1039
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationTextAreaComponent, decorators: [{
|
|
1040
|
+
type: Component,
|
|
1041
|
+
args: [{ selector: "val-textarea", providers: [
|
|
1042
|
+
{ provide: LocalizationService, useClass: BaseValidationLoc },
|
|
1043
|
+
{
|
|
1044
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1045
|
+
useExisting: forwardRef(() => ValidationTextAreaComponent),
|
|
1046
|
+
multi: true
|
|
1047
|
+
}
|
|
1048
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-full-height mat-no-border-top mat-height-auto\">\r\n <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n <textarea #baseInput=\"ngModel\"\r\n matInput\r\n [(ngModel)]=\"value\"\r\n name=\"val-textarea\"\r\n triggers=\"\"\r\n class=\"app-no-resize form-control {{class}}\"\r\n [class.checking-field]=\"!noValidate\"\r\n rows=\"{{rows}}\"\r\n [tooltip]=\"tolTemplate\"\r\n placement=\"top\"\r\n (focus)=\"checkTooltip()\"\r\n (blur)=\"closeTooltip()\"\r\n (ngModelChange)=\"onModelChange($event)\">\r\n </textarea>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div (click)=\"closeTooltip()\">\r\n <span>{{validationFailed}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"] }]
|
|
1049
|
+
}], ctorParameters: function () {
|
|
1050
|
+
return [{ type: i0.ChangeDetectorRef }, { type: Array, decorators: [{
|
|
1051
|
+
type: Optional
|
|
1052
|
+
}, {
|
|
1053
|
+
type: Inject,
|
|
1054
|
+
args: [NG_VALIDATORS]
|
|
1055
|
+
}] }, { type: Array, decorators: [{
|
|
1056
|
+
type: Optional
|
|
1057
|
+
}, {
|
|
1058
|
+
type: Inject,
|
|
1059
|
+
args: [NG_ASYNC_VALIDATORS]
|
|
1060
|
+
}] }, { type: i0.Injector }, { type: i1.LocalizationService }];
|
|
1061
|
+
}, propDecorators: { rows: [{
|
|
1062
|
+
type: Input
|
|
1063
|
+
}] } });
|
|
1064
|
+
|
|
1065
|
+
// Angular
|
|
1066
|
+
/**
|
|
1067
|
+
* Componente di validaizone per gli input di tipo data-ora
|
|
1068
|
+
*/
|
|
1069
|
+
class ValidationDateTimeComponent extends BaseValidation {
|
|
1070
|
+
/**
|
|
1071
|
+
* @ignore
|
|
1072
|
+
*/
|
|
1073
|
+
constructor(cdr, _validators, _asyncValidators, injector, lc, dateExts) {
|
|
1074
|
+
super();
|
|
1075
|
+
this.cdr = cdr;
|
|
1076
|
+
this._validators = _validators;
|
|
1077
|
+
this._asyncValidators = _asyncValidators;
|
|
1078
|
+
this.injector = injector;
|
|
1079
|
+
this.lc = lc;
|
|
1080
|
+
this.dateExts = dateExts;
|
|
1081
|
+
/**
|
|
1082
|
+
* Proprietà dell'elemento di selezione dell'orario. Mostra o nasconde gli spinner
|
|
1083
|
+
*
|
|
1084
|
+
* Attualemnte non bindata ed utilizzata solo a livello di default ma non si sa mai
|
|
1085
|
+
*/
|
|
1086
|
+
this.showSpinners = true;
|
|
1087
|
+
/**
|
|
1088
|
+
* Proprietà dell'elemento di selezione dell'orario. Mostra o nasconde i secondi
|
|
1089
|
+
*
|
|
1090
|
+
* Attualemnte non bindata ed utilizzata solo a livello di default ma non si sa mai
|
|
1091
|
+
*/
|
|
1092
|
+
this.showSeconds = true;
|
|
1093
|
+
/**
|
|
1094
|
+
* Proprietà dell'elemento di selezione dell'orario. Imposta l'incremento/decremento minimo per le ore
|
|
1095
|
+
*
|
|
1096
|
+
* Attualemnte non bindata ed utilizzata solo a livello di default ma non si sa mai
|
|
1097
|
+
*/
|
|
1098
|
+
this.stepHour = 1;
|
|
1099
|
+
/**
|
|
1100
|
+
* Proprietà dell'elemento di selezione dell'orario. Imposta l'incremento/decremento minimo per i minuti
|
|
1101
|
+
*
|
|
1102
|
+
* Attualemnte non bindata ed utilizzata solo a livello di default ma non si sa mai
|
|
1103
|
+
*/
|
|
1104
|
+
this.stepMinute = 1;
|
|
1105
|
+
/**
|
|
1106
|
+
* Proprietà dell'elemento di selezione dell'orario. Imposta l'incremento/decremento minimo per i secondi
|
|
1107
|
+
*
|
|
1108
|
+
* Attualemnte non bindata ed utilizzata solo a livello di default ma non si sa mai
|
|
1109
|
+
*/
|
|
1110
|
+
this.stepSecond = 1;
|
|
1111
|
+
/**
|
|
1112
|
+
* Utilizza il Date di Javascript come modello in uscita. Il modello in entrata verrà comunque ricondotto a un DayJs
|
|
1113
|
+
*/
|
|
1114
|
+
this.useJsDates = false;
|
|
1115
|
+
/**
|
|
1116
|
+
* @ignore
|
|
1117
|
+
*/
|
|
1118
|
+
this.onTouched = () => { };
|
|
1119
|
+
}
|
|
1120
|
+
/**
|
|
1121
|
+
* @ignore
|
|
1122
|
+
*/
|
|
1123
|
+
ngOnInit() {
|
|
1124
|
+
// Controllo se è settato un required per decidere in maniera condizionale se utilizzare il validatore required nel componente interno
|
|
1125
|
+
if (this._validators && !this.noValidate && this._validators.some(elem => elem instanceof RequiredValidator))
|
|
1126
|
+
this.required = true;
|
|
1127
|
+
this._format = this.lc.token("getSmallDateDisplayFormat");
|
|
1128
|
+
}
|
|
1129
|
+
/**
|
|
1130
|
+
* @ignore
|
|
1131
|
+
*/
|
|
1132
|
+
ngAfterViewInit() {
|
|
1133
|
+
this.postBinding();
|
|
1134
|
+
}
|
|
1135
|
+
/**
|
|
1136
|
+
* Metodo che si occupa di collegare i validatori e la funzione di reset dal **ControlValueAccessor** rappresentato
|
|
1137
|
+
* da questo componente al **ControlValueAccessor** rappresentato dall'effettivo elemento di Input presente lato HTML
|
|
1138
|
+
*/
|
|
1139
|
+
postBinding() {
|
|
1140
|
+
this.CheckValidity();
|
|
1141
|
+
const ngControl = this.injector.get(NgControl, null);
|
|
1142
|
+
if (ngControl) {
|
|
1143
|
+
this.parentControl = ngControl.control;
|
|
1144
|
+
// Se la variabile novalidate è true, elimino tutti i validatori eventualmente inseriti
|
|
1145
|
+
if (this.noValidate) {
|
|
1146
|
+
this.parentControl.clearValidators();
|
|
1147
|
+
this.parentControl.clearAsyncValidators();
|
|
1148
|
+
}
|
|
1149
|
+
else {
|
|
1150
|
+
this.baseInput.control.setAsyncValidators(this._asyncValidators);
|
|
1151
|
+
this.baseInput.control.setValidators(this._validators);
|
|
1152
|
+
}
|
|
1153
|
+
// Faccio in modo che se chiamo il reset del controllo (o della form) dall'esterno si resetti anche il controllo nativo
|
|
1154
|
+
const origFunc = this.parentControl.reset;
|
|
1155
|
+
this.parentControl.reset = () => {
|
|
1156
|
+
origFunc.apply(this.parentControl);
|
|
1157
|
+
this.baseInput.control.reset();
|
|
1158
|
+
this.tooltip.hide();
|
|
1159
|
+
};
|
|
1160
|
+
}
|
|
1161
|
+
}
|
|
1162
|
+
/**
|
|
1163
|
+
* @ignore
|
|
1164
|
+
*/
|
|
1165
|
+
writeValue(value) {
|
|
1166
|
+
if (!value) {
|
|
1167
|
+
this.value = null;
|
|
1168
|
+
if (this.baseInput)
|
|
1169
|
+
this.baseInput.reset();
|
|
1170
|
+
}
|
|
1171
|
+
else {
|
|
1172
|
+
var date = null;
|
|
1173
|
+
if (this.useJsDates) {
|
|
1174
|
+
date = this.dateExts.getDateConvertion(value);
|
|
1175
|
+
this.propagateChange(date);
|
|
1176
|
+
this.inputChange.emit(date);
|
|
1177
|
+
}
|
|
1178
|
+
else
|
|
1179
|
+
date = dayjs(value, this.lc.token("getSmallDateFormat") + " HH:mm:ss");
|
|
1180
|
+
this.value = date;
|
|
1181
|
+
}
|
|
1182
|
+
this.cdr.markForCheck();
|
|
1183
|
+
}
|
|
1184
|
+
/**
|
|
1185
|
+
* Metodo che si occupa di, eventualmente, aggiustare il valore da propagare ed emetterlo
|
|
1186
|
+
*
|
|
1187
|
+
* L'emit della modifica al valore viene gestito su un evento custom (**inputChange**) come workaround al malfunzionamento dell'**ngModelChange** nativo
|
|
1188
|
+
*
|
|
1189
|
+
* @param {any} toEmit valore da propagare all'esterno
|
|
1190
|
+
*/
|
|
1191
|
+
outputValue(toEmit) {
|
|
1192
|
+
let value = toEmit.value;
|
|
1193
|
+
let propagateValue;
|
|
1194
|
+
if (!value)
|
|
1195
|
+
propagateValue = null;
|
|
1196
|
+
else if (!this.useJsDates)
|
|
1197
|
+
propagateValue = value.format(this.lc.token("getSmallDateFormat") + " HH:mm:ss");
|
|
1198
|
+
else {
|
|
1199
|
+
if (value && value.isValid())
|
|
1200
|
+
propagateValue = value.toDate();
|
|
1201
|
+
else
|
|
1202
|
+
propagateValue = null;
|
|
1203
|
+
}
|
|
1204
|
+
this.propagateChange(propagateValue);
|
|
1205
|
+
this.inputChange.emit(propagateValue);
|
|
1206
|
+
this.onTouched();
|
|
1207
|
+
}
|
|
1208
|
+
/**
|
|
1209
|
+
* @ignore
|
|
1210
|
+
*/
|
|
1211
|
+
registerOnChange(fn) {
|
|
1212
|
+
this.propagateChange = fn;
|
|
1213
|
+
}
|
|
1214
|
+
/**
|
|
1215
|
+
* @ignore
|
|
1216
|
+
*/
|
|
1217
|
+
registerOnTouched(fn) {
|
|
1218
|
+
this.onTouched = fn;
|
|
1219
|
+
}
|
|
1220
|
+
}
|
|
1221
|
+
ValidationDateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationDateTimeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NG_VALIDATORS, optional: true }, { token: NG_ASYNC_VALIDATORS, optional: true }, { token: i0.Injector }, { token: i1.LocalizationService }, { token: i2$2.DateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1222
|
+
ValidationDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ValidationDateTimeComponent, selector: "val-datetime", inputs: { useJsDates: "useJsDates" }, providers: [
|
|
1223
|
+
{ provide: LocalizationService, useClass: BaseValidationLoc },
|
|
1224
|
+
{
|
|
1225
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1226
|
+
useExisting: forwardRef(() => ValidationDateTimeComponent),
|
|
1227
|
+
multi: true
|
|
1228
|
+
}
|
|
1229
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n\r\n <input matInput \r\n [ngxMatDatetimePicker]=\"datepicker\" \r\n #baseInput=\"ngModel\"\r\n type=\"text\"\r\n triggers=\"\"\r\n placement=\"top\"\r\n name=\"val-date\"\r\n class=\"form-control {{class}}\"\r\n autocomplete=\"{{autocomplete}}\"\r\n [(ngModel)]=\"value\"\r\n [class.checking-field]=\"!noValidate\"\r\n [tooltip]=\"tolTemplate\"\r\n [placeholder]=\"placeholder ? '' : _format\"\r\n [disabled]=\"readonly || disabled\"\r\n [isDisabled]=\"readonly || disabled\"\r\n (dateChange)=\"outputValue($event)\"/>\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"datepicker\"></mat-datepicker-toggle>\r\n\r\n <ngx-mat-datetime-picker #datepicker \r\n [showSpinners]=\"showSpinners\" \r\n [showSeconds]=\"showSeconds\" \r\n [stepHour]=\"stepHour\" \r\n [stepMinute]=\"stepMinute\" \r\n [stepSecond]=\"stepSecond\" \r\n [touchUi]=\"false\" \r\n [color]=\"'primary'\">\r\n </ngx-mat-datetime-picker>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div (click)=\"closeTooltip()\">\r\n <span>{{validationFailed}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$3.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["calendarHeaderComponent", "startAt", "startView", "defaultColor", "color", "touchUi", "hideTime", "disabled", "panelClass", "dateClass", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$3.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationDateTimeComponent, decorators: [{
|
|
1231
|
+
type: Component,
|
|
1232
|
+
args: [{ selector: "val-datetime", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1233
|
+
{ provide: LocalizationService, useClass: BaseValidationLoc },
|
|
1234
|
+
{
|
|
1235
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1236
|
+
useExisting: forwardRef(() => ValidationDateTimeComponent),
|
|
1237
|
+
multi: true
|
|
1238
|
+
}
|
|
1239
|
+
], template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n\r\n <input matInput \r\n [ngxMatDatetimePicker]=\"datepicker\" \r\n #baseInput=\"ngModel\"\r\n type=\"text\"\r\n triggers=\"\"\r\n placement=\"top\"\r\n name=\"val-date\"\r\n class=\"form-control {{class}}\"\r\n autocomplete=\"{{autocomplete}}\"\r\n [(ngModel)]=\"value\"\r\n [class.checking-field]=\"!noValidate\"\r\n [tooltip]=\"tolTemplate\"\r\n [placeholder]=\"placeholder ? '' : _format\"\r\n [disabled]=\"readonly || disabled\"\r\n [isDisabled]=\"readonly || disabled\"\r\n (dateChange)=\"outputValue($event)\"/>\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"datepicker\"></mat-datepicker-toggle>\r\n\r\n <ngx-mat-datetime-picker #datepicker \r\n [showSpinners]=\"showSpinners\" \r\n [showSeconds]=\"showSeconds\" \r\n [stepHour]=\"stepHour\" \r\n [stepMinute]=\"stepMinute\" \r\n [stepSecond]=\"stepSecond\" \r\n [touchUi]=\"false\" \r\n [color]=\"'primary'\">\r\n </ngx-mat-datetime-picker>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div (click)=\"closeTooltip()\">\r\n <span>{{validationFailed}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"] }]
|
|
1240
|
+
}], ctorParameters: function () {
|
|
1241
|
+
return [{ type: i0.ChangeDetectorRef }, { type: Array, decorators: [{
|
|
1242
|
+
type: Optional
|
|
1243
|
+
}, {
|
|
1244
|
+
type: Inject,
|
|
1245
|
+
args: [NG_VALIDATORS]
|
|
1246
|
+
}] }, { type: Array, decorators: [{
|
|
1247
|
+
type: Optional
|
|
1248
|
+
}, {
|
|
1249
|
+
type: Inject,
|
|
1250
|
+
args: [NG_ASYNC_VALIDATORS]
|
|
1251
|
+
}] }, { type: i0.Injector }, { type: i1.LocalizationService }, { type: i2$2.DateService }];
|
|
1252
|
+
}, propDecorators: { useJsDates: [{
|
|
1253
|
+
type: Input
|
|
1254
|
+
}] } });
|
|
1255
|
+
|
|
1256
|
+
// Angular
|
|
1257
|
+
/**
|
|
1258
|
+
* Componente di validaizone per gli input di Autocompletamento
|
|
1259
|
+
*/
|
|
1260
|
+
class ValidationAutocompleteComponent extends BaseValidation {
|
|
1261
|
+
/**
|
|
1262
|
+
* @ignore
|
|
1263
|
+
*/
|
|
1264
|
+
constructor(_validators, _asyncValidators, injector, lc, cdr) {
|
|
1265
|
+
super();
|
|
1266
|
+
this._validators = _validators;
|
|
1267
|
+
this._asyncValidators = _asyncValidators;
|
|
1268
|
+
this.injector = injector;
|
|
1269
|
+
this.lc = lc;
|
|
1270
|
+
this.cdr = cdr;
|
|
1271
|
+
/**
|
|
1272
|
+
* Sorgente da cui scegliere valori filtrata in base a quello che ha scritto l'utente
|
|
1273
|
+
*/
|
|
1274
|
+
this.FilteredSource = [];
|
|
1275
|
+
/**
|
|
1276
|
+
* Contenuto della label Floattante Material-Style
|
|
1277
|
+
*/
|
|
1278
|
+
this.label = "";
|
|
1279
|
+
/**
|
|
1280
|
+
* Evento che indica l'opzione selezionata dal componente. Il valore finale della selezione dovrà essere questo
|
|
1281
|
+
*/
|
|
1282
|
+
this.optionChange = new EventEmitter();
|
|
1283
|
+
/**
|
|
1284
|
+
* @ignore
|
|
1285
|
+
*/
|
|
1286
|
+
this.onTouched = () => { }; //placeholder on touched function
|
|
1287
|
+
}
|
|
1288
|
+
/**
|
|
1289
|
+
* @ignore
|
|
1290
|
+
*/
|
|
1291
|
+
ngOnInit() {
|
|
1292
|
+
//controllo se è settato un required per decidere in maniera condizionale se utilizzare il validatore required nel componente interno
|
|
1293
|
+
if (this._validators && !this.noValidate && this._validators.some(elem => elem instanceof RequiredValidator))
|
|
1294
|
+
this.required = true;
|
|
1295
|
+
}
|
|
1296
|
+
/**
|
|
1297
|
+
* @ignore
|
|
1298
|
+
*/
|
|
1299
|
+
ngOnDestroy() {
|
|
1300
|
+
if (this.tooltipSubscription)
|
|
1301
|
+
this.tooltipSubscription.unsubscribe();
|
|
1302
|
+
}
|
|
1303
|
+
/**
|
|
1304
|
+
* @ignore
|
|
1305
|
+
*/
|
|
1306
|
+
ngAfterViewInit() {
|
|
1307
|
+
this.postBinding();
|
|
1308
|
+
}
|
|
1309
|
+
/**
|
|
1310
|
+
* Metodo che si occupa di collegare i validatori e la funzione di reset dal **ControlValueAccessor** rappresentato
|
|
1311
|
+
* da questo componente al **ControlValueAccessor** rappresentato dall'effettivo elemento di Input presente lato HTML
|
|
1312
|
+
*/
|
|
1313
|
+
postBinding() {
|
|
1314
|
+
this.CheckValidity();
|
|
1315
|
+
const ngControl = this.injector.get(NgControl, null);
|
|
1316
|
+
if (ngControl) {
|
|
1317
|
+
this.parentControl = ngControl.control;
|
|
1318
|
+
//se la variabile novalidate è true, elimino tutti i validatori eventualmente inseriti
|
|
1319
|
+
if (this.noValidate) {
|
|
1320
|
+
this.parentControl.clearValidators();
|
|
1321
|
+
this.parentControl.clearAsyncValidators();
|
|
1322
|
+
}
|
|
1323
|
+
else {
|
|
1324
|
+
this.baseInput.control.setAsyncValidators(this._asyncValidators);
|
|
1325
|
+
this.baseInput.control.setValidators(this._validators);
|
|
1326
|
+
}
|
|
1327
|
+
//faccio in modo che se chiamo il reset del controllo (o della form) dall'esterno si resetti anche il controllo nativo
|
|
1328
|
+
const origFunc = this.parentControl.reset;
|
|
1329
|
+
this.parentControl.reset = () => {
|
|
1330
|
+
origFunc.apply(this.parentControl);
|
|
1331
|
+
this.baseInput.control.reset();
|
|
1332
|
+
this.tooltip.hide();
|
|
1333
|
+
};
|
|
1334
|
+
}
|
|
1335
|
+
}
|
|
1336
|
+
/**
|
|
1337
|
+
* @ignore
|
|
1338
|
+
*/
|
|
1339
|
+
writeValue(value) {
|
|
1340
|
+
var val = value && this.FilteredSource ? this.FilteredSource.find(t => t.id == value) : null;
|
|
1341
|
+
if (val)
|
|
1342
|
+
this.optionChange.emit(val.id);
|
|
1343
|
+
this.propagateChange(val ? val.id : value);
|
|
1344
|
+
this.value = val ? val.description : value;
|
|
1345
|
+
}
|
|
1346
|
+
/**
|
|
1347
|
+
* L'emit della modifica al valore viene gestito su un evento custom (**inputChange**) come workaround al malfunzionamento dell'**ngModelChange** nativo
|
|
1348
|
+
*
|
|
1349
|
+
* @param {any} toEmit valore da propagare all'esterno
|
|
1350
|
+
*/
|
|
1351
|
+
onModelChange(toEmit) {
|
|
1352
|
+
this.writeValue(toEmit);
|
|
1353
|
+
this.inputChange.emit(toEmit);
|
|
1354
|
+
this.onTouched();
|
|
1355
|
+
}
|
|
1356
|
+
/**
|
|
1357
|
+
* @ignore
|
|
1358
|
+
*/
|
|
1359
|
+
registerOnChange(fn) {
|
|
1360
|
+
this.propagateChange = fn;
|
|
1361
|
+
}
|
|
1362
|
+
/**
|
|
1363
|
+
* @ignore
|
|
1364
|
+
*/
|
|
1365
|
+
registerOnTouched(fn) {
|
|
1366
|
+
this.onTouched = fn;
|
|
1367
|
+
}
|
|
1368
|
+
}
|
|
1369
|
+
ValidationAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationAutocompleteComponent, deps: [{ token: NG_VALIDATORS, optional: true }, { token: NG_ASYNC_VALIDATORS, optional: true }, { token: i0.Injector }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1370
|
+
ValidationAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ValidationAutocompleteComponent, selector: "val-autocomplete", inputs: { FilteredSource: "FilteredSource", value: "value", label: "label" }, outputs: { optionChange: "optionChange" }, providers: [
|
|
1371
|
+
{ provide: LocalizationService, useClass: BaseValidationLoc },
|
|
1372
|
+
{
|
|
1373
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1374
|
+
useExisting: forwardRef(() => ValidationAutocompleteComponent),
|
|
1375
|
+
multi: true
|
|
1376
|
+
}
|
|
1377
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n <input matInput\r\n #baseInput='ngModel'\r\n type=\"text\"\r\n triggers=\"\"\r\n placement=\"top\"\r\n placeholder=\"{{placeholder}}\"\r\n [matAutocomplete]=\"auto\"\r\n name=\"val-input\"\r\n class=\"form-control {{class}}\"\r\n [(ngModel)]=\"value\"\r\n [class.checking-field]=\"!noValidate\"\r\n [tooltip]=\"tolTemplate\"\r\n [disabled]=\"readonly || disabled\"\r\n (ngModelChange)=\"onModelChange($event)\"\r\n (focus)=\"checkTooltip();\"\r\n (blur)=\"closeTooltip();\">\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n <mat-option *ngFor=\"let option of FilteredSource\" [value]=\"option.id\">\r\n {{option.description}}\r\n </mat-option>\r\n </mat-autocomplete>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div (click)=\"closeTooltip()\">\r\n <span>{{validationFailed}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1378
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationAutocompleteComponent, decorators: [{
|
|
1379
|
+
type: Component,
|
|
1380
|
+
args: [{ selector: "val-autocomplete", changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1381
|
+
{ provide: LocalizationService, useClass: BaseValidationLoc },
|
|
1382
|
+
{
|
|
1383
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1384
|
+
useExisting: forwardRef(() => ValidationAutocompleteComponent),
|
|
1385
|
+
multi: true
|
|
1386
|
+
}
|
|
1387
|
+
], encapsulation: ViewEncapsulation.None, template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n <input matInput\r\n #baseInput='ngModel'\r\n type=\"text\"\r\n triggers=\"\"\r\n placement=\"top\"\r\n placeholder=\"{{placeholder}}\"\r\n [matAutocomplete]=\"auto\"\r\n name=\"val-input\"\r\n class=\"form-control {{class}}\"\r\n [(ngModel)]=\"value\"\r\n [class.checking-field]=\"!noValidate\"\r\n [tooltip]=\"tolTemplate\"\r\n [disabled]=\"readonly || disabled\"\r\n (ngModelChange)=\"onModelChange($event)\"\r\n (focus)=\"checkTooltip();\"\r\n (blur)=\"closeTooltip();\">\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n <mat-option *ngFor=\"let option of FilteredSource\" [value]=\"option.id\">\r\n {{option.description}}\r\n </mat-option>\r\n </mat-autocomplete>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n <div (click)=\"closeTooltip()\">\r\n <span>{{validationFailed}}</span>\r\n </div>\r\n</ng-template>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"] }]
|
|
1388
|
+
}], ctorParameters: function () {
|
|
1389
|
+
return [{ type: Array, decorators: [{
|
|
1390
|
+
type: Optional
|
|
1391
|
+
}, {
|
|
1392
|
+
type: Inject,
|
|
1393
|
+
args: [NG_VALIDATORS]
|
|
1394
|
+
}] }, { type: Array, decorators: [{
|
|
1395
|
+
type: Optional
|
|
1396
|
+
}, {
|
|
1397
|
+
type: Inject,
|
|
1398
|
+
args: [NG_ASYNC_VALIDATORS]
|
|
1399
|
+
}] }, { type: i0.Injector }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }];
|
|
1400
|
+
}, propDecorators: { FilteredSource: [{
|
|
1401
|
+
type: Input
|
|
1402
|
+
}], value: [{
|
|
1403
|
+
type: Input
|
|
1404
|
+
}], label: [{
|
|
1405
|
+
type: Input
|
|
1406
|
+
}], optionChange: [{
|
|
1407
|
+
type: Output
|
|
1408
|
+
}] } });
|
|
1409
|
+
|
|
1410
|
+
// Angular
|
|
1411
|
+
/**
|
|
1412
|
+
* Componente base da cui tutti i componenti Form implementano
|
|
1413
|
+
*/
|
|
1414
|
+
class BaseFormControl {
|
|
1415
|
+
/**
|
|
1416
|
+
* Costruttore
|
|
1417
|
+
*
|
|
1418
|
+
* @ignore
|
|
1419
|
+
*/
|
|
1420
|
+
constructor(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY, nativeInput = false) {
|
|
1421
|
+
this.cdr = cdr;
|
|
1422
|
+
this.ngControl = ngControl;
|
|
1423
|
+
this._validators = _validators;
|
|
1424
|
+
this.ac = ac;
|
|
1425
|
+
this.AppContext = AppContext;
|
|
1426
|
+
this.ACO_CUSTOMKEY = ACO_CUSTOMKEY;
|
|
1427
|
+
this.nativeInput = nativeInput;
|
|
1428
|
+
/**
|
|
1429
|
+
* https://github.com/angular/angular/issues/14988
|
|
1430
|
+
* TL:DR; Il primo valore passato al writeValue è nullo perché quando i cagnacci fanno new FormControl()
|
|
1431
|
+
* scrivono un writeValue nullo... quindi al primo binding salto l'inizializzazione se ho la coppia null-firstBind
|
|
1432
|
+
* poi mettendo firstBind a false di lì in poi funziono come devo. Vista la casistica evito essenzialmente metà detectChanges
|
|
1433
|
+
*/
|
|
1434
|
+
this.firstBind = true;
|
|
1435
|
+
/**
|
|
1436
|
+
* Indica se il campo è obbligatorio i opzionale
|
|
1437
|
+
*/
|
|
1438
|
+
this.Required = false;
|
|
1439
|
+
/**
|
|
1440
|
+
* Indica se il Form che contiene questo campo è già stato registrato
|
|
1441
|
+
*/
|
|
1442
|
+
this.formHasBennBound = false;
|
|
1443
|
+
/**
|
|
1444
|
+
* Indica se questo campo è staccato dal Form, ad esempio nel caso sia in un ng-template proiettato nel form.
|
|
1445
|
+
*
|
|
1446
|
+
* In quel caso la variabile **Form** del componente dev'essere valorizzata
|
|
1447
|
+
*/
|
|
1448
|
+
this.detatchedFromform = false;
|
|
1449
|
+
/**
|
|
1450
|
+
* @ignore
|
|
1451
|
+
*/
|
|
1452
|
+
this.propagateChange = (_) => { };
|
|
1453
|
+
/**
|
|
1454
|
+
* @ignore
|
|
1455
|
+
*/
|
|
1456
|
+
this.onTouched = () => { };
|
|
1457
|
+
/**
|
|
1458
|
+
* @ignore Vedi getter e setter
|
|
1459
|
+
*/
|
|
1460
|
+
this._readonly = false;
|
|
1461
|
+
/**
|
|
1462
|
+
* Qualora ci fosse un contesto collegato questa variabile identifica se Sono l'Owner o meno.
|
|
1463
|
+
*
|
|
1464
|
+
* Se non lo sono, il campo risulterà in sola lettura
|
|
1465
|
+
*/
|
|
1466
|
+
this.AppContextOwnership = true;
|
|
1467
|
+
/**
|
|
1468
|
+
* Utilizza o meno il Layout di un form (Label con input di fianco), se false mostra solo l'input
|
|
1469
|
+
*/
|
|
1470
|
+
this.FormLayout = true;
|
|
1471
|
+
/**
|
|
1472
|
+
* Attiva o disattiva la validazione per questo componente
|
|
1473
|
+
*/
|
|
1474
|
+
this.Validation = true;
|
|
1475
|
+
/**
|
|
1476
|
+
* Placeholder per quando l'input è vuoto
|
|
1477
|
+
*/
|
|
1478
|
+
this.Placeholder = "";
|
|
1479
|
+
/**
|
|
1480
|
+
* Classe extra per il form-group in cui viene wrappato l'input
|
|
1481
|
+
*/
|
|
1482
|
+
this.FormGroupClass = "";
|
|
1483
|
+
/**
|
|
1484
|
+
* Messaggio da mostrare quando la validazione fallisce per questo componente. Di default viene proposta dalla libreria
|
|
1485
|
+
*/
|
|
1486
|
+
this.FailedValidationMessage = "";
|
|
1487
|
+
/**
|
|
1488
|
+
* Input che forza l'invalidità del componente
|
|
1489
|
+
*/
|
|
1490
|
+
this.ForcedError = false;
|
|
1491
|
+
/**
|
|
1492
|
+
* Mostra un testo a sinistra dell'input (FormLayout permettendo)
|
|
1493
|
+
*/
|
|
1494
|
+
this.Label = "";
|
|
1495
|
+
/**
|
|
1496
|
+
* col-md-X per la label
|
|
1497
|
+
*/
|
|
1498
|
+
this.LabelColWidth = 4;
|
|
1499
|
+
/**
|
|
1500
|
+
* col-md-X per l'input
|
|
1501
|
+
*/
|
|
1502
|
+
this.InputColWidth = 8;
|
|
1503
|
+
/**
|
|
1504
|
+
* Indica se è l'ultimo componente di un form (serve per rimuovere il margine finale)
|
|
1505
|
+
*/
|
|
1506
|
+
this.Last = false;
|
|
1507
|
+
/**
|
|
1508
|
+
* Associa il componente Form a questo input
|
|
1509
|
+
*/
|
|
1510
|
+
this.Form = null;
|
|
1511
|
+
/**
|
|
1512
|
+
* Nome della proprietà che contiene l'Id degli oggetti bindati nella **Source**
|
|
1513
|
+
*/
|
|
1514
|
+
this.IdField = 'id';
|
|
1515
|
+
/**
|
|
1516
|
+
* Espressione simil-Angular per cambiare il testo dei componenti che scelgono il proprio modello da una **Source**
|
|
1517
|
+
*
|
|
1518
|
+
* Il funzionamento è identico al binder di angular, solo con una graffa invece che 2.
|
|
1519
|
+
* È inoltre possibile aggiungere pezzi di descrizione in maniera condizionale con la sintassi **:prop?(Prop vale {prop})**
|
|
1520
|
+
*/
|
|
1521
|
+
this.Display = '{description}';
|
|
1522
|
+
/**
|
|
1523
|
+
* Risultato dell'unione fra le informazioni degli oggetti in **Source** e le impostazioni specificate nell'Input **Display**
|
|
1524
|
+
*/
|
|
1525
|
+
this.BoundSource = [];
|
|
1526
|
+
/**
|
|
1527
|
+
* Indica se è il primo Bind della Source
|
|
1528
|
+
*/
|
|
1529
|
+
this.SourceFirstBind = true;
|
|
1530
|
+
/**
|
|
1531
|
+
* Evento chiamato alla modifica del valore collegato a questo campo
|
|
1532
|
+
*/
|
|
1533
|
+
this.inputChange = new EventEmitter();
|
|
1534
|
+
/**
|
|
1535
|
+
* Cache delle condizioni scritte tipo :prop?(Roba con {prop})
|
|
1536
|
+
*/
|
|
1537
|
+
this.BindCheckingGroups = [];
|
|
1538
|
+
/**
|
|
1539
|
+
* Cache delle proprietà scritte tipo --> {prop}
|
|
1540
|
+
*/
|
|
1541
|
+
this.BindProperties = [];
|
|
1542
|
+
if (ngControl == null) {
|
|
1543
|
+
if (!this.handleNullNgControl())
|
|
1544
|
+
console.error("ngControl nullo per qualche motivo! Il 90% delle funzionalità di questo input saranno disabilitate");
|
|
1545
|
+
return;
|
|
1546
|
+
}
|
|
1547
|
+
//Se mi arriva l'injectable del contesto posso capire se questo campo deve essere in readonly o no, solo se ho già inizializzato i controller custom dell'access control
|
|
1548
|
+
if (this.AppContext && this.AppContext.name && this.ACO_CUSTOMKEY && this.ac && this.ac.InitializedCustom) {
|
|
1549
|
+
this.AppContextOwnership = !this.ac.has(this.ACO_CUSTOMKEY + ":" + this.AppContext.name);
|
|
1550
|
+
this._readonly = !this.AppContextOwnership;
|
|
1551
|
+
}
|
|
1552
|
+
ngControl.valueAccessor = this;
|
|
1553
|
+
//Se ho già un parent impostato vuol dire che sotto al tag <form> ho direttamente un tag <form-*>..
|
|
1554
|
+
//.. quindi posso impostare direttamente il riferimento del Form da usare in HTML per il submitted
|
|
1555
|
+
//Se non c'è vuol dire che dentro al tag <form> c'è uno splendido <ng-container *ngTemplateOutlet="template; context: ....">..
|
|
1556
|
+
//.. il quale a sua volta contiene il controllo <form-*> quindi avrò il form nell'input "Form"
|
|
1557
|
+
if (ngControl._parent)
|
|
1558
|
+
this.Form = ngControl._parent;
|
|
1559
|
+
else
|
|
1560
|
+
this.detatchedFromform = true;
|
|
1561
|
+
//Questa serve per impostare me stesso come si deve, il validatore invece lo passo al validation-input quando viene settato il validationControl
|
|
1562
|
+
if (this.ngControl) {
|
|
1563
|
+
//Per tutti i validatori: rigenero la funzione di validazione. Per qualche motivo a volte ho validatori senza...
|
|
1564
|
+
//... questo è un workaround per essere sicuro di averla sempre.
|
|
1565
|
+
//Solo i validatori con parametri hanno bisogno della _createValidator (es. "maxlength" che ha 1 parametro), quindi no validatori tipo "required"
|
|
1566
|
+
if (this._validators) {
|
|
1567
|
+
this._validators.forEach(v => {
|
|
1568
|
+
if (v._createValidator)
|
|
1569
|
+
v._createValidator();
|
|
1570
|
+
});
|
|
1571
|
+
}
|
|
1572
|
+
this.ngControl.control.setValidators(this._validators);
|
|
1573
|
+
this.ngControl.control.updateValueAndValidity();
|
|
1574
|
+
}
|
|
1575
|
+
}
|
|
1576
|
+
/**
|
|
1577
|
+
* Ottiene il valore della variabile **_readonly**
|
|
1578
|
+
*
|
|
1579
|
+
* @returns {boolean} **true** se sola lettura, **false** altrimenti
|
|
1580
|
+
*/
|
|
1581
|
+
get Readonly() { return this._readonly; }
|
|
1582
|
+
/**
|
|
1583
|
+
* Imposta il valore della variabile **_readonly** gestendo anche il Contesto applicativo
|
|
1584
|
+
*
|
|
1585
|
+
* @param {boolean} value Valore da impostare
|
|
1586
|
+
*/
|
|
1587
|
+
set Readonly(value) {
|
|
1588
|
+
if (this.AppContextOwnership)
|
|
1589
|
+
this._readonly = value;
|
|
1590
|
+
}
|
|
1591
|
+
/**
|
|
1592
|
+
* Permette di settare in una volta solo gli input LabelColWidth e InputColWidth, basta scriverlo con la sintassi "X Y"
|
|
1593
|
+
*
|
|
1594
|
+
* @param {string} input Input nel formato "X Y"
|
|
1595
|
+
*/
|
|
1596
|
+
set LabelInputRatio(input) {
|
|
1597
|
+
var ratio = input.split(/\s/);
|
|
1598
|
+
this.LabelColWidth = parseInt(ratio[0]);
|
|
1599
|
+
this.InputColWidth = parseInt(ratio[1]);
|
|
1600
|
+
}
|
|
1601
|
+
/**
|
|
1602
|
+
* Query sull'elemento 'validationControl' che funziona in ambiente statico
|
|
1603
|
+
*
|
|
1604
|
+
* @param {NgModel} comp Elemento HTML marcato con "#validationControl"
|
|
1605
|
+
*/
|
|
1606
|
+
set _validationControl(comp) { this.registerValComp(comp); }
|
|
1607
|
+
/**
|
|
1608
|
+
* Query sull'elemento 'validationControl' che funziona in ambiente dinamico
|
|
1609
|
+
*
|
|
1610
|
+
* @param {NgModel} comp Elemento HTML marcato con "#validationControl"
|
|
1611
|
+
*/
|
|
1612
|
+
set validationControl_static(comp) { this.registerValComp(comp); }
|
|
1613
|
+
;
|
|
1614
|
+
/**
|
|
1615
|
+
* Effettua il Bind/Parse delle varie **Source** unendo le informazioni specificate in **Display**
|
|
1616
|
+
*
|
|
1617
|
+
* Eventualmente rieffettua un bind al modello in base al valore della variabile **RebindModelAfterSource**
|
|
1618
|
+
*/
|
|
1619
|
+
tryBindSourceDisplay() {
|
|
1620
|
+
if (!this.Source)
|
|
1621
|
+
return;
|
|
1622
|
+
if (this.Source.length == 0 && !this.SourceFirstBind)
|
|
1623
|
+
this.BoundSource = [];
|
|
1624
|
+
this.SourceFirstBind = false;
|
|
1625
|
+
// Cache locale per evitare di rifare dei regex.match ogni santa volta
|
|
1626
|
+
if (this.Source.length > 0) {
|
|
1627
|
+
this.BoundSource = [];
|
|
1628
|
+
if (this.BindCheckingGroups.length == 0)
|
|
1629
|
+
this.evaluateBindCheckingGroups();
|
|
1630
|
+
if (this.BindProperties.length == 0)
|
|
1631
|
+
this.evaluateBindProperties();
|
|
1632
|
+
// Blocco per generare la descrizione finale di un elemento
|
|
1633
|
+
this.Source.forEach(s => {
|
|
1634
|
+
// Aggiungo alla BoundSource in formato standard KeyValue
|
|
1635
|
+
this.BoundSource.push(this.transformSourceItem(s));
|
|
1636
|
+
});
|
|
1637
|
+
}
|
|
1638
|
+
}
|
|
1639
|
+
/**
|
|
1640
|
+
* Valuta il contenuto della variabile BindCheckingGroups
|
|
1641
|
+
*/
|
|
1642
|
+
evaluateBindCheckingGroups() {
|
|
1643
|
+
// Blocco per tirare fuori le condizioni scritte tipo --> :prop?(Roba con {prop})
|
|
1644
|
+
var iffedMatches = this.Display.match(/:([a-z]+)\?\(([^\(\)]+)\)/g);
|
|
1645
|
+
if (iffedMatches) {
|
|
1646
|
+
iffedMatches.forEach(m => {
|
|
1647
|
+
// Stessa regex di sopra ma il tag "i" serve per tirare fuori i singoli capturing group e per qualche motivo
|
|
1648
|
+
// new RegExp(baseRegex, "g") non funziona quindi non ho potuto razionalizzarlo
|
|
1649
|
+
let groups = m.match(/:([a-z]+)\?\(([^\(\)]+)\)/i);
|
|
1650
|
+
this.BindCheckingGroups.push({ global: m, prop: groups[1], whenexists: groups[2] });
|
|
1651
|
+
});
|
|
1652
|
+
}
|
|
1653
|
+
}
|
|
1654
|
+
/**
|
|
1655
|
+
* Valuta il contenuto della variabile BindProperties
|
|
1656
|
+
*/
|
|
1657
|
+
evaluateBindProperties() {
|
|
1658
|
+
// Blocco per tirare fuori le proprietà scritte tipo --> {prop}
|
|
1659
|
+
var matches = this.Display.match(/{[a-z]+}/gi);
|
|
1660
|
+
if (matches)
|
|
1661
|
+
matches.forEach(m => { this.BindProperties.push({ global: m, prop: m.substring(1, m.length - 1) }); });
|
|
1662
|
+
}
|
|
1663
|
+
/**
|
|
1664
|
+
* Trasforma un oggetto della Source alla sua versione "nuova" basandosi sulle informazioni su gruppi e proprietà
|
|
1665
|
+
*
|
|
1666
|
+
* @param {any} item Oggetto da trasformare
|
|
1667
|
+
*
|
|
1668
|
+
* @returns {{id: string, description: string}} Oggetto finale trasformato
|
|
1669
|
+
*/
|
|
1670
|
+
transformSourceItem(s) {
|
|
1671
|
+
// Parto sempre dalla variabile di Display, poi sostituisco pezzo per pezzo
|
|
1672
|
+
let desc = this.Display;
|
|
1673
|
+
// Taglio o mantengo le condizioni in base alla proprietà su cui fare check
|
|
1674
|
+
// Dopodiché scrivo tutte le proprietà
|
|
1675
|
+
for (let i = 0; i < this.BindCheckingGroups.length; i++) {
|
|
1676
|
+
let t = this.BindCheckingGroups[i];
|
|
1677
|
+
desc = desc.replace(t.global, (s[t.prop] != null && s[t.prop] != undefined) ? t.whenexists : "");
|
|
1678
|
+
}
|
|
1679
|
+
for (let i = 0; i < this.BindProperties.length; i++) {
|
|
1680
|
+
let t = this.BindProperties[i];
|
|
1681
|
+
desc = desc.replace(t.global, s[t.prop]);
|
|
1682
|
+
}
|
|
1683
|
+
return { id: s[this.IdField], description: desc };
|
|
1684
|
+
}
|
|
1685
|
+
/**
|
|
1686
|
+
* Indica se il comopnente in questione è in grado di gestire ngControl nulli.
|
|
1687
|
+
* Di default è **false**
|
|
1688
|
+
*
|
|
1689
|
+
* @returns {boolean} **true** se gestisco ngControl nulli, **false** altrimenti
|
|
1690
|
+
*/
|
|
1691
|
+
handleNullNgControl() {
|
|
1692
|
+
return false;
|
|
1693
|
+
}
|
|
1694
|
+
/**
|
|
1695
|
+
* @ignore
|
|
1696
|
+
*/
|
|
1697
|
+
ngOnInit() {
|
|
1698
|
+
// A volte nell'ngOnInit non ci passa quindi lo metto sia qui sia nell'afterviewinit, penso che valga per i componenti di terze parti
|
|
1699
|
+
// che si collegano per i cazzi loro al form ecc, quindi la parte sopra non serve... BOH
|
|
1700
|
+
this.checkRequiredValidator();
|
|
1701
|
+
//Il nome non c'è se metto standalone : true
|
|
1702
|
+
//Dato che anche il controllo esterno viene considerato come componente del form, non posso basarmi solo sul nome ma devo aggiungere un tag. In questo caso "_internal"
|
|
1703
|
+
// ATTENZIONE: QUALSIASI SIA IL MOTIVO, SE STO COSO VIENE SPOSTATO DALL ngOnInit NON FUNZIONA PIU NULLA
|
|
1704
|
+
if (this.ngControl.name)
|
|
1705
|
+
this.GeneratedName = this.ngControl.name.toString() + "_internal";
|
|
1706
|
+
// ATTENZIONE: QUALSIASI SIA IL MOTIVO, SE STO COSO VIENE SPOSTATO DALL ngOnInit NON FUNZIONA PIU NULLA
|
|
1707
|
+
if (this.Form) {
|
|
1708
|
+
if (!this.formHasBennBound && this.validationControl) {
|
|
1709
|
+
this.Form.addControl(this.validationControl);
|
|
1710
|
+
this.formHasBennBound = true;
|
|
1711
|
+
}
|
|
1712
|
+
// Quando un form viene submittato la variabile Form.submitted viene assegnata all'input [submitted] del val-control
|
|
1713
|
+
// Essendo che però la CD è OnPush per dire ad Angular che l'Input è cambiato e permettere i sideffects di assegnare [submitted]
|
|
1714
|
+
// devo attaccarmi al submit attuale del form e prima di eseguirlo devo marcare il componente per il check
|
|
1715
|
+
let origFunc = this.Form.onSubmit;
|
|
1716
|
+
var formOutsideRef = this.Form;
|
|
1717
|
+
this.Form.onSubmit = (ev) => {
|
|
1718
|
+
this.cdr.markForCheck();
|
|
1719
|
+
return origFunc.apply(formOutsideRef);
|
|
1720
|
+
};
|
|
1721
|
+
}
|
|
1722
|
+
}
|
|
1723
|
+
/**
|
|
1724
|
+
* Elabora i validatori iniettati e capisce se il valore è obbligatorio o meno
|
|
1725
|
+
*/
|
|
1726
|
+
checkRequiredValidator() {
|
|
1727
|
+
// controllo se è settato un required per decidere in maniera condizionale se utilizzare il validatore required nel componente interno
|
|
1728
|
+
// Lo faccio qui e non in un eventuale ngOnInit o costruttore perché ngOnInit non sempre viene chiamato e da costruttore il validatore non ha ancora il valore giusto
|
|
1729
|
+
if (this._validators && this._validators.some(elem => elem instanceof RequiredValidator && elem.required))
|
|
1730
|
+
this.Required = true;
|
|
1731
|
+
}
|
|
1732
|
+
/**
|
|
1733
|
+
* @ignore
|
|
1734
|
+
*/
|
|
1735
|
+
ngAfterViewInit() {
|
|
1736
|
+
if (!this.ngControl)
|
|
1737
|
+
return;
|
|
1738
|
+
this.checkRequiredValidator();
|
|
1739
|
+
}
|
|
1740
|
+
/**
|
|
1741
|
+
* Helper che collega la funzione di reset del controllo form al controllo di validazione sottostante
|
|
1742
|
+
*/
|
|
1743
|
+
bindResetFunction() {
|
|
1744
|
+
//faccio in modo che se chiamo il reset del controllo (o della form) dall'esterno si resetti anche il controllo nativo
|
|
1745
|
+
const origFunc = this.ngControl.control.__original_reset__ || this.ngControl.control.reset;
|
|
1746
|
+
var ngControl_outsideReference = this.ngControl.control;
|
|
1747
|
+
var validationControl_outsideReference = this.validationControl.control;
|
|
1748
|
+
this.ngControl.control.reset = () => {
|
|
1749
|
+
origFunc.apply(ngControl_outsideReference);
|
|
1750
|
+
validationControl_outsideReference.reset();
|
|
1751
|
+
};
|
|
1752
|
+
//Per consentire richiami multipli di questa funzione prendendo sempre la fiunzione di reset base
|
|
1753
|
+
this.ngControl.control.__original_reset__ = origFunc;
|
|
1754
|
+
}
|
|
1755
|
+
/**
|
|
1756
|
+
* @ignore
|
|
1757
|
+
*/
|
|
1758
|
+
writeValue(obj) {
|
|
1759
|
+
if (obj == null && this.firstBind) {
|
|
1760
|
+
this.firstBind = false;
|
|
1761
|
+
return;
|
|
1762
|
+
}
|
|
1763
|
+
this.Model = obj;
|
|
1764
|
+
//Per svegliare Angular. Il valore che entra potrebbe essere valido/non valido e questo lo binda a tutto, form compreso
|
|
1765
|
+
if (this.ngControl)
|
|
1766
|
+
this.ngControl.control.updateValueAndValidity();
|
|
1767
|
+
if (this.Model)
|
|
1768
|
+
this.onNotNullValueSet();
|
|
1769
|
+
// markForCheck non va bene in quanto arrivano possibilmente 2 update su un solo ciclo di stack
|
|
1770
|
+
// setTime*ut che wrappa tutto non va bene sennò spamma delle change detection a suon di interval che rallentano tantissimo l'app
|
|
1771
|
+
this.cdr.detectChanges();
|
|
1772
|
+
}
|
|
1773
|
+
/**
|
|
1774
|
+
* @ignore
|
|
1775
|
+
*/
|
|
1776
|
+
registerOnChange(fn) {
|
|
1777
|
+
this.propagateChange = fn;
|
|
1778
|
+
}
|
|
1779
|
+
/**
|
|
1780
|
+
* @ignore
|
|
1781
|
+
*/
|
|
1782
|
+
registerOnTouched(fn) {
|
|
1783
|
+
this.onTouched = fn;
|
|
1784
|
+
}
|
|
1785
|
+
/**
|
|
1786
|
+
* Registra internamente il componente di validazione, ne imposta i validatori e collega il Form, se presente
|
|
1787
|
+
*
|
|
1788
|
+
* @param {NgModel} comp Elemento HTML marcato con "#validationControl"
|
|
1789
|
+
*/
|
|
1790
|
+
registerValComp(comp) {
|
|
1791
|
+
if (comp) {
|
|
1792
|
+
// È arrivato un nuovo validationContorl (succede solo nel form-select quando cambia la source da 0 elementi / null ad N elementi, quindi al massimo una volta)
|
|
1793
|
+
if (this.validationControl && this.Form)
|
|
1794
|
+
this.Form.removeControl(this.validationControl);
|
|
1795
|
+
this.validationControl = comp;
|
|
1796
|
+
//Questa serve per passare avanti i validatori
|
|
1797
|
+
this.validationControl.control.setValidators(this._validators);
|
|
1798
|
+
//Se sono staccato dal Form (vuol dire che sono ad esempio dentro un ng-template) aggiungo il controllo al Form passato come input (context del template)
|
|
1799
|
+
if (this.detatchedFromform && this.Form && !this.formHasBennBound) {
|
|
1800
|
+
this.Form.addControl(this.validationControl);
|
|
1801
|
+
this.formHasBennBound = true;
|
|
1802
|
+
}
|
|
1803
|
+
if (this.ngControl)
|
|
1804
|
+
this.bindResetFunction();
|
|
1805
|
+
//I val-roba questo lo fanno automaticamente dentro... gli altri no (es. semplice input checkbox)
|
|
1806
|
+
this.updateValidityForNativeInput();
|
|
1807
|
+
}
|
|
1808
|
+
}
|
|
1809
|
+
/**
|
|
1810
|
+
* Aggiorna il valore e la validità dell'input sottostante. Non viene chiamato per input nativi come le checkbox
|
|
1811
|
+
*
|
|
1812
|
+
* @param {boolean} forcedValue Forza l'aggiornamento anche se non è un input nativo (input nativo = checkbox, ad esempio)
|
|
1813
|
+
*/
|
|
1814
|
+
updateValidityForNativeInput(forcedValue = false) {
|
|
1815
|
+
if (forcedValue || this.nativeInput)
|
|
1816
|
+
this.validationControl.control.updateValueAndValidity();
|
|
1817
|
+
}
|
|
1818
|
+
/**
|
|
1819
|
+
* @ignore
|
|
1820
|
+
* Classico "spara fuori". Mantengo lo stesso nome dell'evento dei <val-*> (inputChange) per retrocompatibilità.
|
|
1821
|
+
*
|
|
1822
|
+
* Non posso tenerlo protected altrimenti posso eseguirlo solo dal .ts e non dall' .html
|
|
1823
|
+
*/
|
|
1824
|
+
changed(forcedValue = null, markForCheck = false) {
|
|
1825
|
+
this.propagateChange(forcedValue == null ? this.Model : forcedValue);
|
|
1826
|
+
this.inputChange.emit(forcedValue == null ? this.Model : forcedValue);
|
|
1827
|
+
if (markForCheck)
|
|
1828
|
+
this.cdr.markForCheck();
|
|
1829
|
+
}
|
|
1830
|
+
}
|
|
1831
|
+
BaseFormControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseFormControl, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
|
|
1832
|
+
BaseFormControl.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaseFormControl, inputs: { FormLayout: "FormLayout", Validation: "Validation", Placeholder: "Placeholder", FormGroupClass: "FormGroupClass", FailedValidationMessage: "FailedValidationMessage", ForcedError: "ForcedError", Label: "Label", LabelColWidth: "LabelColWidth", InputColWidth: "InputColWidth", Last: "Last", Form: "Form", Source: "Source", IdField: "IdField", Display: "Display", Readonly: "Readonly", LabelInputRatio: "LabelInputRatio" }, outputs: { inputChange: "inputChange" }, viewQueries: [{ propertyName: "_validationControl", first: true, predicate: ["validationControl"], descendants: true }, { propertyName: "validationControl_static", first: true, predicate: ["validationControl"], descendants: true, static: true }], ngImport: i0 });
|
|
1833
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseFormControl, decorators: [{
|
|
1834
|
+
type: Directive
|
|
1835
|
+
}], ctorParameters: function () {
|
|
1836
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i2$1.NgControl }, { type: Array }, { type: i2$4.AccessControlService, decorators: [{
|
|
1837
|
+
type: Optional
|
|
1838
|
+
}] }, { type: i2$4.ComponentContext, decorators: [{
|
|
1839
|
+
type: Optional
|
|
1840
|
+
}] }, { type: undefined, decorators: [{
|
|
1841
|
+
type: Optional
|
|
1842
|
+
}, {
|
|
1843
|
+
type: Inject,
|
|
1844
|
+
args: [ACO_CUSTOMKEY]
|
|
1845
|
+
}] }, { type: undefined }];
|
|
1846
|
+
}, propDecorators: { FormLayout: [{
|
|
1847
|
+
type: Input
|
|
1848
|
+
}], Validation: [{
|
|
1849
|
+
type: Input
|
|
1850
|
+
}], Placeholder: [{
|
|
1851
|
+
type: Input
|
|
1852
|
+
}], FormGroupClass: [{
|
|
1853
|
+
type: Input
|
|
1854
|
+
}], FailedValidationMessage: [{
|
|
1855
|
+
type: Input
|
|
1856
|
+
}], ForcedError: [{
|
|
1857
|
+
type: Input
|
|
1858
|
+
}], Label: [{
|
|
1859
|
+
type: Input
|
|
1860
|
+
}], LabelColWidth: [{
|
|
1861
|
+
type: Input
|
|
1862
|
+
}], InputColWidth: [{
|
|
1863
|
+
type: Input
|
|
1864
|
+
}], Last: [{
|
|
1865
|
+
type: Input
|
|
1866
|
+
}], Form: [{
|
|
1867
|
+
type: Input
|
|
1868
|
+
}], Source: [{
|
|
1869
|
+
type: Input
|
|
1870
|
+
}], IdField: [{
|
|
1871
|
+
type: Input
|
|
1872
|
+
}], Display: [{
|
|
1873
|
+
type: Input
|
|
1874
|
+
}], Readonly: [{
|
|
1875
|
+
type: Input
|
|
1876
|
+
}], LabelInputRatio: [{
|
|
1877
|
+
type: Input
|
|
1878
|
+
}], _validationControl: [{
|
|
1879
|
+
type: ViewChild,
|
|
1880
|
+
args: ["validationControl", { static: false }]
|
|
1881
|
+
}], validationControl_static: [{
|
|
1882
|
+
type: ViewChild,
|
|
1883
|
+
args: ["validationControl", { static: true }]
|
|
1884
|
+
}], inputChange: [{
|
|
1885
|
+
type: Output
|
|
1886
|
+
}] } });
|
|
1887
|
+
|
|
1888
|
+
/**
|
|
1889
|
+
* Classe di localizzazione per il componente **FormFileComponent**
|
|
1890
|
+
*/
|
|
1891
|
+
class FormFileComponentLoc extends LocalizationService {
|
|
1892
|
+
/**
|
|
1893
|
+
* @ignore
|
|
1894
|
+
*/
|
|
1895
|
+
constructor(LOC_LOCALE) {
|
|
1896
|
+
super(LOC_LOCALE !== null && LOC_LOCALE !== void 0 ? LOC_LOCALE : 'it-IT');
|
|
1897
|
+
super.set("en->it", "Select a file", ["Seleziona un file"]);
|
|
1898
|
+
super.set("en->it", "Files Selected", ["File Selezionati"]);
|
|
1899
|
+
}
|
|
1900
|
+
}
|
|
1901
|
+
FormFileComponentLoc.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormFileComponentLoc, deps: [{ token: FAV_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1902
|
+
FormFileComponentLoc.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormFileComponentLoc });
|
|
1903
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormFileComponentLoc, decorators: [{
|
|
1904
|
+
type: Injectable
|
|
1905
|
+
}], ctorParameters: function () {
|
|
1906
|
+
return [{ type: undefined, decorators: [{
|
|
1907
|
+
type: Optional
|
|
1908
|
+
}, {
|
|
1909
|
+
type: Inject,
|
|
1910
|
+
args: [FAV_LOCALE]
|
|
1911
|
+
}] }];
|
|
1912
|
+
} });
|
|
1913
|
+
|
|
1914
|
+
// Angular
|
|
1915
|
+
/**
|
|
1916
|
+
* Componente che permette all'utente di caricare/scaricare un file all'interno di un campo Input
|
|
1917
|
+
*/
|
|
1918
|
+
class FormFileComponent extends BaseFormControl {
|
|
1919
|
+
/**
|
|
1920
|
+
* Costruttore
|
|
1921
|
+
*
|
|
1922
|
+
* @ignore
|
|
1923
|
+
*/
|
|
1924
|
+
constructor(cdr, utiExts, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY, lc) {
|
|
1925
|
+
super(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY);
|
|
1926
|
+
this.utiExts = utiExts;
|
|
1927
|
+
this.lc = lc;
|
|
1928
|
+
/**
|
|
1929
|
+
* Permette di caricare file multipli
|
|
1930
|
+
*/
|
|
1931
|
+
this.Multiple = false;
|
|
1932
|
+
/**
|
|
1933
|
+
* Permette di scaricare l'eventuale file selezionato
|
|
1934
|
+
*/
|
|
1935
|
+
this.AllowDownload = true;
|
|
1936
|
+
//Per questo componente non posso permettermi che il modello sia nullo
|
|
1937
|
+
this.Model = new AppFile();
|
|
1938
|
+
}
|
|
1939
|
+
/**
|
|
1940
|
+
* @ignore
|
|
1941
|
+
*/
|
|
1942
|
+
writeValue(obj) {
|
|
1943
|
+
var model = obj == null ? new AppFile() : obj;
|
|
1944
|
+
super.writeValue(model);
|
|
1945
|
+
if (obj == null)
|
|
1946
|
+
this.changed();
|
|
1947
|
+
}
|
|
1948
|
+
/**
|
|
1949
|
+
* Helper per gestire la modifica del file attualmente bindato
|
|
1950
|
+
*
|
|
1951
|
+
* @param {boolean} clear Indica se bisogna svuotare l'input o meno
|
|
1952
|
+
*/
|
|
1953
|
+
fileChange(clear = false) {
|
|
1954
|
+
let files = [];
|
|
1955
|
+
let model = this.Model;
|
|
1956
|
+
let ne = this.inputEl.nativeElement;
|
|
1957
|
+
if (clear) {
|
|
1958
|
+
model.filename = "";
|
|
1959
|
+
ne.value = "";
|
|
1960
|
+
}
|
|
1961
|
+
else {
|
|
1962
|
+
for (let i = 0; i < ne.files.length; i++)
|
|
1963
|
+
files.push(ne.files.item(i));
|
|
1964
|
+
if (ne.files.length == 1)
|
|
1965
|
+
model.filename = ne.files[0].name;
|
|
1966
|
+
if (ne.files.length > 1)
|
|
1967
|
+
model.filename = ne.files.length + " " + this.lc.loc("Files Selected");
|
|
1968
|
+
model.nativefiles = files;
|
|
1969
|
+
model.fileb64 = null;
|
|
1970
|
+
}
|
|
1971
|
+
this.changed(null, true);
|
|
1972
|
+
}
|
|
1973
|
+
/**
|
|
1974
|
+
* Permette di scaricare l'eventuale file selezionato
|
|
1975
|
+
*/
|
|
1976
|
+
downloadAttachment() {
|
|
1977
|
+
let model = this.Model;
|
|
1978
|
+
this.utiExts.saveFile(model.fileb64, model.filename);
|
|
1979
|
+
}
|
|
1980
|
+
/**
|
|
1981
|
+
* @ignore
|
|
1982
|
+
*/
|
|
1983
|
+
onNotNullValueSet() { }
|
|
1984
|
+
}
|
|
1985
|
+
FormFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormFileComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$2.UtilityService }, { token: i2$1.NgControl, optional: true, self: true }, { token: NG_VALIDATORS, optional: true }, { token: i2$4.AccessControlService, optional: true }, { token: i2$4.ComponentContext, optional: true }, { token: ACO_CUSTOMKEY, optional: true }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1986
|
+
FormFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormFileComponent, selector: "form-file", inputs: { Multiple: "Multiple", AllowDownload: "AllowDownload" }, providers: [{ provide: LocalizationService, useClass: FormFileComponentLoc }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n <div class=\"input-group file-upload\">\r\n <input type=\"file\" (change)=\"fileChange()\" #fileInput class=\"file-upload-btn app-pointer\" [multiple]=\"Multiple ? true : null\" />\r\n <input type=\"text\" [class.frm-padding-left-22]=\"AllowDownload && Model.filename && Model.fileb64\" class=\"form-control checking-field\" placeholder=\"{{'Select a file' | localize : lc}}...\" [(ngModel)]=\"Model.filename\" name=\"dsfile\" #validationControl=\"ngModel\" [required]=\"Required ? true : null\" />\r\n\r\n <a class=\"fa fa-download app-pointer app-input-icon\" *ngIf=\"AllowDownload && Model.filename && Model.fileb64\" (click)=\"downloadAttachment()\"></a>\r\n <i class=\"fa fa-times delete-file\" (click)=\"fileChange(true)\" *ngIf=\"Model.filename\"></i>\r\n <span class=\"input-group-btn\">\r\n <button class=\"btn btn-primary btn-file-upload\" type=\"button\"><i class=\"fa fa-upload\"></i></button>\r\n </span>\r\n </div>\r\n</ng-template>", styles: [".frm-padding-left-22{padding-left:22px}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "localize": i1.LocalizePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1987
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormFileComponent, decorators: [{
|
|
1988
|
+
type: Component,
|
|
1989
|
+
args: [{ selector: "form-file", providers: [{ provide: LocalizationService, useClass: FormFileComponentLoc }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n <div class=\"input-group file-upload\">\r\n <input type=\"file\" (change)=\"fileChange()\" #fileInput class=\"file-upload-btn app-pointer\" [multiple]=\"Multiple ? true : null\" />\r\n <input type=\"text\" [class.frm-padding-left-22]=\"AllowDownload && Model.filename && Model.fileb64\" class=\"form-control checking-field\" placeholder=\"{{'Select a file' | localize : lc}}...\" [(ngModel)]=\"Model.filename\" name=\"dsfile\" #validationControl=\"ngModel\" [required]=\"Required ? true : null\" />\r\n\r\n <a class=\"fa fa-download app-pointer app-input-icon\" *ngIf=\"AllowDownload && Model.filename && Model.fileb64\" (click)=\"downloadAttachment()\"></a>\r\n <i class=\"fa fa-times delete-file\" (click)=\"fileChange(true)\" *ngIf=\"Model.filename\"></i>\r\n <span class=\"input-group-btn\">\r\n <button class=\"btn btn-primary btn-file-upload\" type=\"button\"><i class=\"fa fa-upload\"></i></button>\r\n </span>\r\n </div>\r\n</ng-template>", styles: [".frm-padding-left-22{padding-left:22px}\n"] }]
|
|
1990
|
+
}], ctorParameters: function () {
|
|
1991
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i2$2.UtilityService }, { type: i2$1.NgControl, decorators: [{
|
|
1992
|
+
type: Optional
|
|
1993
|
+
}, {
|
|
1994
|
+
type: Self
|
|
1995
|
+
}] }, { type: Array, decorators: [{
|
|
1996
|
+
type: Optional
|
|
1997
|
+
}, {
|
|
1998
|
+
type: Inject,
|
|
1999
|
+
args: [NG_VALIDATORS]
|
|
2000
|
+
}] }, { type: i2$4.AccessControlService, decorators: [{
|
|
2001
|
+
type: Optional
|
|
2002
|
+
}] }, { type: i2$4.ComponentContext, decorators: [{
|
|
2003
|
+
type: Optional
|
|
2004
|
+
}] }, { type: undefined, decorators: [{
|
|
2005
|
+
type: Optional
|
|
2006
|
+
}, {
|
|
2007
|
+
type: Inject,
|
|
2008
|
+
args: [ACO_CUSTOMKEY]
|
|
2009
|
+
}] }, { type: i1.LocalizationService }];
|
|
2010
|
+
}, propDecorators: { Multiple: [{
|
|
2011
|
+
type: Input
|
|
2012
|
+
}], AllowDownload: [{
|
|
2013
|
+
type: Input
|
|
2014
|
+
}], inputEl: [{
|
|
2015
|
+
type: ViewChild,
|
|
2016
|
+
args: ["fileInput", { static: false }]
|
|
2017
|
+
}] } });
|
|
2018
|
+
|
|
2019
|
+
// Angular
|
|
2020
|
+
/**
|
|
2021
|
+
* Componente che dà all'utente la possibilità di selezionare una data insieme ad un orario
|
|
2022
|
+
*/
|
|
2023
|
+
class FormDateTimeComponent extends BaseFormControl {
|
|
2024
|
+
/**
|
|
2025
|
+
* Costruttore
|
|
2026
|
+
*
|
|
2027
|
+
* @ignore
|
|
2028
|
+
*/
|
|
2029
|
+
constructor(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY) {
|
|
2030
|
+
super(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY);
|
|
2031
|
+
/**
|
|
2032
|
+
* Utilizza il Date di Javascript come modello in uscita. Il modello in entrata verrà comunque ricondotto a un DayJs
|
|
2033
|
+
*/
|
|
2034
|
+
this.JsDates = false;
|
|
2035
|
+
}
|
|
2036
|
+
/**
|
|
2037
|
+
* @ignore
|
|
2038
|
+
*/
|
|
2039
|
+
onNotNullValueSet() { }
|
|
2040
|
+
}
|
|
2041
|
+
FormDateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormDateTimeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$1.NgControl, optional: true, self: true }, { token: NG_VALIDATORS, optional: true }, { token: i2$4.AccessControlService, optional: true }, { token: i2$4.ComponentContext, optional: true }, { token: ACO_CUSTOMKEY, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2042
|
+
FormDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormDateTimeComponent, selector: "form-datetime", inputs: { JsDates: "JsDates" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n <val-datetime [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [forceInvalid]=\"ForcedError\"\r\n [readonly]=\"Readonly\"\r\n [class]=\"Readonly ? 'app-bg-lightgrey' : ''\"\r\n [useJsDates]=\"JsDates\"\r\n [(ngModel)]=\"Model\"\r\n name=\"{{GeneratedName}}\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"changed();\"\r\n [placeholder]=\"Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\">\r\n </val-datetime>\r\n</ng-template>", components: [{ type: ValidationDateTimeComponent, selector: "val-datetime", inputs: ["useJsDates"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2043
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormDateTimeComponent, decorators: [{
|
|
2044
|
+
type: Component,
|
|
2045
|
+
args: [{ selector: "form-datetime", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n <val-datetime [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [forceInvalid]=\"ForcedError\"\r\n [readonly]=\"Readonly\"\r\n [class]=\"Readonly ? 'app-bg-lightgrey' : ''\"\r\n [useJsDates]=\"JsDates\"\r\n [(ngModel)]=\"Model\"\r\n name=\"{{GeneratedName}}\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"changed();\"\r\n [placeholder]=\"Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\">\r\n </val-datetime>\r\n</ng-template>" }]
|
|
2046
|
+
}], ctorParameters: function () {
|
|
2047
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i2$1.NgControl, decorators: [{
|
|
2048
|
+
type: Optional
|
|
2049
|
+
}, {
|
|
2050
|
+
type: Self
|
|
2051
|
+
}] }, { type: Array, decorators: [{
|
|
2052
|
+
type: Optional
|
|
2053
|
+
}, {
|
|
2054
|
+
type: Inject,
|
|
2055
|
+
args: [NG_VALIDATORS]
|
|
2056
|
+
}] }, { type: i2$4.AccessControlService, decorators: [{
|
|
2057
|
+
type: Optional
|
|
2058
|
+
}] }, { type: i2$4.ComponentContext, decorators: [{
|
|
2059
|
+
type: Optional
|
|
2060
|
+
}] }, { type: undefined, decorators: [{
|
|
2061
|
+
type: Optional
|
|
2062
|
+
}, {
|
|
2063
|
+
type: Inject,
|
|
2064
|
+
args: [ACO_CUSTOMKEY]
|
|
2065
|
+
}] }];
|
|
2066
|
+
}, propDecorators: { JsDates: [{
|
|
2067
|
+
type: Input
|
|
2068
|
+
}] } });
|
|
2069
|
+
|
|
2070
|
+
/**
|
|
2071
|
+
* Classe di localizzazione per il componente **FormAdaptiveComponent**
|
|
2072
|
+
*/
|
|
2073
|
+
class FormAdaptiveComponentLoc extends LocalizationService {
|
|
2074
|
+
/**
|
|
2075
|
+
* @ignore
|
|
2076
|
+
*/
|
|
2077
|
+
constructor(LOC_LOCALE) {
|
|
2078
|
+
super(LOC_LOCALE !== null && LOC_LOCALE !== void 0 ? LOC_LOCALE : 'it-IT');
|
|
2079
|
+
super.set("en->it", "Select a file", ["Seleziona un file"]);
|
|
2080
|
+
super.set("en->it", "Files Selected", ["File Selezionati"]);
|
|
2081
|
+
}
|
|
2082
|
+
}
|
|
2083
|
+
FormAdaptiveComponentLoc.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormAdaptiveComponentLoc, deps: [{ token: FAV_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2084
|
+
FormAdaptiveComponentLoc.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormAdaptiveComponentLoc });
|
|
2085
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormAdaptiveComponentLoc, decorators: [{
|
|
2086
|
+
type: Injectable
|
|
2087
|
+
}], ctorParameters: function () {
|
|
2088
|
+
return [{ type: undefined, decorators: [{
|
|
2089
|
+
type: Optional
|
|
2090
|
+
}, {
|
|
2091
|
+
type: Inject,
|
|
2092
|
+
args: [FAV_LOCALE]
|
|
2093
|
+
}] }];
|
|
2094
|
+
} });
|
|
2095
|
+
|
|
2096
|
+
/**
|
|
2097
|
+
* Componente in grado di assumere la forma di un qualsiasi altro componente form in base al tipo specificato. Utile per la creazione di form dinamici
|
|
2098
|
+
*/
|
|
2099
|
+
class FormAdaptiveComponent extends BaseFormControl {
|
|
2100
|
+
/**
|
|
2101
|
+
* Costruttore
|
|
2102
|
+
*
|
|
2103
|
+
* @ignore
|
|
2104
|
+
*/
|
|
2105
|
+
constructor(cdr, utiExts, dateAdapter, lc, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY) {
|
|
2106
|
+
super(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY);
|
|
2107
|
+
this.utiExts = utiExts;
|
|
2108
|
+
this.dateAdapter = dateAdapter;
|
|
2109
|
+
this.lc = lc;
|
|
2110
|
+
/**
|
|
2111
|
+
* Permette di scaricare l'eventuale file presente qualora il **Type** di questo componente fosse **file**
|
|
2112
|
+
*/
|
|
2113
|
+
this.AllowDownload = true;
|
|
2114
|
+
/**
|
|
2115
|
+
* Utilizzata nel form-adapter per specificare la precisione degli input currencymap (Type: currency)
|
|
2116
|
+
*/
|
|
2117
|
+
this.Precision = 2;
|
|
2118
|
+
/**
|
|
2119
|
+
* Allineamento della currency mask
|
|
2120
|
+
*/
|
|
2121
|
+
this.Alignment = 'right';
|
|
2122
|
+
/**
|
|
2123
|
+
* Funzione di ricerca che verrà chiamata dal componente
|
|
2124
|
+
*/
|
|
2125
|
+
this.SearchFunction = null;
|
|
2126
|
+
/**
|
|
2127
|
+
* Numero minimo di caratteri con cui cercare
|
|
2128
|
+
*/
|
|
2129
|
+
this.MinChars = 3;
|
|
2130
|
+
/**
|
|
2131
|
+
* Indica se i controlli devono essere effettuati tenendo conto del Case o meno. Vale solo qualora la **Source** fosse fornita
|
|
2132
|
+
*/
|
|
2133
|
+
this.CaseSensitive = false;
|
|
2134
|
+
/**
|
|
2135
|
+
* Variabile interna che gestisce se effettuare il riallineamento dei dati o meno
|
|
2136
|
+
*/
|
|
2137
|
+
this.alignValues = false;
|
|
2138
|
+
/**
|
|
2139
|
+
* Indica se ignorare il prossimo evento writeValue che normalmente dovrebbe richiedere la nuova source. Serve per quando l'utente seleziona un elemento:
|
|
2140
|
+
* Subito dopo partirebbe un altro evento modelChange che ricaricherebbe nuovamente la source
|
|
2141
|
+
*/
|
|
2142
|
+
this.ignoreNextWriteValue = false;
|
|
2143
|
+
/**
|
|
2144
|
+
* Cache della sorgente originale POST binding, in modo da poter fare filtri in locale qualora la **SearchFunction** non fosse definita e la **Source** fosse assegnata
|
|
2145
|
+
*/
|
|
2146
|
+
this.FilteredBoundSource = [];
|
|
2147
|
+
//******************** Funzione di throttling per non spammare richieste in caso di animazioni attivate
|
|
2148
|
+
//TODO: spostarla in un metodo di utilità (esfaenza/extensions)
|
|
2149
|
+
/** @ignore */
|
|
2150
|
+
this.executionTimers = {};
|
|
2151
|
+
this.ModelFile = new AppFile();
|
|
2152
|
+
}
|
|
2153
|
+
/**
|
|
2154
|
+
* @ignore
|
|
2155
|
+
*/
|
|
2156
|
+
ngOnChanges(changes) {
|
|
2157
|
+
var _a;
|
|
2158
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
2159
|
+
const newSource = changes["Source"];
|
|
2160
|
+
const newType = changes["Type"];
|
|
2161
|
+
if (newSource) {
|
|
2162
|
+
this.tryBindSourceDisplay();
|
|
2163
|
+
// Prima assegnazione se cambia la source sotto (quindi se viene bindata direttamente da HTML)
|
|
2164
|
+
if (this.Type == "autocomplete" && (((_a = this.Model) === null || _a === void 0 ? void 0 : _a.length) || 0) >= this.MinChars && !this.SearchFunction)
|
|
2165
|
+
this.FilteredBoundSource = this.BoundSource;
|
|
2166
|
+
else
|
|
2167
|
+
this.FilteredBoundSource = [];
|
|
2168
|
+
this.cdr.markForCheck();
|
|
2169
|
+
}
|
|
2170
|
+
if (newType && this.Model)
|
|
2171
|
+
this.writeValue(this.Model);
|
|
2172
|
+
});
|
|
2173
|
+
}
|
|
2174
|
+
/**
|
|
2175
|
+
* @ignore
|
|
2176
|
+
*/
|
|
2177
|
+
writeValue(obj) {
|
|
2178
|
+
this.alignValues = false;
|
|
2179
|
+
if (!this.Type)
|
|
2180
|
+
this.Type = "string";
|
|
2181
|
+
if ((this.Type == "float" || this.Type == "number") && obj)
|
|
2182
|
+
obj = obj.toString().replace(".", ",");
|
|
2183
|
+
// Per sicurezza riallineo i valori
|
|
2184
|
+
if (this.Type == "boolean") {
|
|
2185
|
+
obj = obj ? (obj === true || obj.toLowerCase() == "true") : false;
|
|
2186
|
+
this.alignValues = true;
|
|
2187
|
+
}
|
|
2188
|
+
if (this.Type == "time") {
|
|
2189
|
+
const [hours, minutes, seconds] = (obj || "0:0:0").split(":");
|
|
2190
|
+
obj = dayjs().hour(hours !== null && hours !== void 0 ? hours : 0).minute(minutes !== null && minutes !== void 0 ? minutes : 0).second(seconds !== null && seconds !== void 0 ? seconds : 0);
|
|
2191
|
+
}
|
|
2192
|
+
if (this.Type == "file")
|
|
2193
|
+
obj = this.ModelFile;
|
|
2194
|
+
if (this.Type == "autocomplete") {
|
|
2195
|
+
if (this.SearchFunction) {
|
|
2196
|
+
this.SearchFunction(obj, true).subscribe(t => {
|
|
2197
|
+
this.Source = t;
|
|
2198
|
+
this.tryBindSourceDisplay();
|
|
2199
|
+
setTimeout(() => { this.finalizeValue(obj); });
|
|
2200
|
+
});
|
|
2201
|
+
return;
|
|
2202
|
+
}
|
|
2203
|
+
else
|
|
2204
|
+
this.finalizeValue(obj);
|
|
2205
|
+
}
|
|
2206
|
+
super.writeValue(obj);
|
|
2207
|
+
if (this.alignValues) {
|
|
2208
|
+
this.changed();
|
|
2209
|
+
this.cdr.markForCheck();
|
|
2210
|
+
}
|
|
2211
|
+
}
|
|
2212
|
+
/**
|
|
2213
|
+
* Dato un valore verifica se può restituire le informazioni trovate in **Source** con id uguale a **value** o se deve restituire il valore in se
|
|
2214
|
+
*
|
|
2215
|
+
* @param {any} value Valore scritto nell'input di testo
|
|
2216
|
+
*/
|
|
2217
|
+
finalizeValue(value) {
|
|
2218
|
+
var val = this.Source.find(t => t.id == value);
|
|
2219
|
+
this.propagateChange(val ? val.id : value);
|
|
2220
|
+
this.Model = val ? val.description : value;
|
|
2221
|
+
}
|
|
2222
|
+
/**
|
|
2223
|
+
* Evento di filtro della sorgente dati in base all'input utente
|
|
2224
|
+
*
|
|
2225
|
+
* @param {string} event Input utente
|
|
2226
|
+
*/
|
|
2227
|
+
filterSource(event) {
|
|
2228
|
+
if (this.ignoreNextWriteValue) {
|
|
2229
|
+
this.ignoreNextWriteValue = false;
|
|
2230
|
+
return;
|
|
2231
|
+
}
|
|
2232
|
+
// Quando filtro la source, se non devo ignorare l'evento devo comunque assicurarmi di impostare il valore selezionato a null
|
|
2233
|
+
super.changed("");
|
|
2234
|
+
if (!event && this.MinChars == 0 && !this.SearchFunction) {
|
|
2235
|
+
this.FilteredBoundSource = this.BoundSource;
|
|
2236
|
+
return;
|
|
2237
|
+
}
|
|
2238
|
+
if (!event || event.length < this.MinChars) {
|
|
2239
|
+
this.FilteredBoundSource = [];
|
|
2240
|
+
return;
|
|
2241
|
+
}
|
|
2242
|
+
if (!this.SearchFunction && (!this.Source || this.Source.length == 0))
|
|
2243
|
+
throw "Impossibile filtrare gli elementi senza una funzione di ricerca che restituisca una lista di { id: string, description: string }";
|
|
2244
|
+
if (this.SearchFunction) {
|
|
2245
|
+
this.throttla("filtersource", () => {
|
|
2246
|
+
this.SearchFunction(event, false).subscribe(t => {
|
|
2247
|
+
this.Source = t;
|
|
2248
|
+
this.tryBindSourceDisplay();
|
|
2249
|
+
// In questo caso è già filtrata dalla SearchFunction
|
|
2250
|
+
this.FilteredBoundSource = this.BoundSource;
|
|
2251
|
+
this.cdr.markForCheck();
|
|
2252
|
+
});
|
|
2253
|
+
}, 400);
|
|
2254
|
+
}
|
|
2255
|
+
else {
|
|
2256
|
+
this.throttla("filtersource", () => {
|
|
2257
|
+
// In questo caso devo filtrare io in memoria
|
|
2258
|
+
this.FilteredBoundSource = this.BoundSource.filter(t => (this.CaseSensitive && t.description.includes(event)) || (!this.CaseSensitive && t.description.toLowerCase().includes(event.toLowerCase())));
|
|
2259
|
+
this.cdr.markForCheck();
|
|
2260
|
+
}, 100);
|
|
2261
|
+
}
|
|
2262
|
+
}
|
|
2263
|
+
/**
|
|
2264
|
+
* Metodo richiamato quando viene modificato il modello del campo di input
|
|
2265
|
+
*/
|
|
2266
|
+
changed() {
|
|
2267
|
+
var toEmit = this.Model ? JSON.parse(JSON.stringify(this.Model)) : null;
|
|
2268
|
+
if ((this.Type == "float" || this.Type == "number") && toEmit)
|
|
2269
|
+
toEmit = toEmit.replace(".", "").replace(",", ".");
|
|
2270
|
+
if (this.Type == "boolean")
|
|
2271
|
+
toEmit = toEmit ? true : false;
|
|
2272
|
+
if (this.Type == "time") {
|
|
2273
|
+
var toEmit = this.dateAdapter.clone(this.Model);
|
|
2274
|
+
toEmit = toEmit.format("HH:mm:ss");
|
|
2275
|
+
}
|
|
2276
|
+
if (this.Type == "autocomplete")
|
|
2277
|
+
this.ignoreNextWriteValue = true;
|
|
2278
|
+
super.changed(toEmit);
|
|
2279
|
+
}
|
|
2280
|
+
/**
|
|
2281
|
+
* Helper per gestire la modifica del file attualmente bindato. Ovviamente funziona solo qualora il **Type** fosse **file**
|
|
2282
|
+
*
|
|
2283
|
+
* @param {boolean} clear Indica se bisogna svuotare l'input o meno
|
|
2284
|
+
*/
|
|
2285
|
+
fileChange(clear = false) {
|
|
2286
|
+
let files = [];
|
|
2287
|
+
let model = this.Model;
|
|
2288
|
+
let ne = this.inputEl.nativeElement;
|
|
2289
|
+
if (clear) {
|
|
2290
|
+
model.filename = "";
|
|
2291
|
+
ne.value = "";
|
|
2292
|
+
}
|
|
2293
|
+
else {
|
|
2294
|
+
for (let i = 0; i < ne.files.length; i++)
|
|
2295
|
+
files.push(ne.files.item(i));
|
|
2296
|
+
if (ne.files.length == 1)
|
|
2297
|
+
model.filename = ne.files[0].name;
|
|
2298
|
+
if (ne.files.length > 1)
|
|
2299
|
+
model.filename = ne.files.length + " " + this.lc.loc("Files Selected");
|
|
2300
|
+
model.nativefiles = files;
|
|
2301
|
+
model.fileb64 = null;
|
|
2302
|
+
}
|
|
2303
|
+
this.changed();
|
|
2304
|
+
}
|
|
2305
|
+
/**
|
|
2306
|
+
* Permette di scaricare il file collegato all'evetnuale file input rappresentato da questo componente
|
|
2307
|
+
*/
|
|
2308
|
+
downloadAttachment() {
|
|
2309
|
+
let model = this.Model;
|
|
2310
|
+
this.utiExts.saveFile(model.fileb64, model.filename);
|
|
2311
|
+
}
|
|
2312
|
+
/**
|
|
2313
|
+
* @ignore
|
|
2314
|
+
*/
|
|
2315
|
+
onNotNullValueSet() { }
|
|
2316
|
+
/** @ignore */
|
|
2317
|
+
throttla(id, func, throttleTime) {
|
|
2318
|
+
//Se ho la funzione che vuole eseguire ripulisco quel timeout
|
|
2319
|
+
if (this.executionTimers[id])
|
|
2320
|
+
clearTimeout(this.executionTimers[id]);
|
|
2321
|
+
//Ricreo il timeout per eseguire quella funzione dopo throttleTime millisecondi
|
|
2322
|
+
this.executionTimers[id] = setTimeout(() => { func(); this.executionTimers[id] = null; }, throttleTime);
|
|
2323
|
+
}
|
|
2324
|
+
}
|
|
2325
|
+
FormAdaptiveComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormAdaptiveComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$2.UtilityService }, { token: i2$3.NgxMatDateAdapter }, { token: i1.LocalizationService }, { token: i2$1.NgControl, optional: true, self: true }, { token: NG_VALIDATORS, optional: true }, { token: i2$4.AccessControlService }, { token: i2$4.ComponentContext, optional: true }, { token: ACO_CUSTOMKEY, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2326
|
+
FormAdaptiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormAdaptiveComponent, selector: "form-adaptive", inputs: { Type: "Type", TypeMissingMessage: "TypeMissingMessage", Pattern: "Pattern", AllowDownload: "AllowDownload", Precision: "Precision", Alignment: "Alignment", SearchFunction: "SearchFunction", MinChars: "MinChars", CaseSensitive: "CaseSensitive" }, providers: [{ provide: LocalizationService, useClass: FormAdaptiveComponentLoc }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n <div *ngIf=\"!Type\" class=\"app-margin-top-5\">\r\n <em>{{TypeMissingMessage}}</em>\r\n </div>\r\n \r\n <!--Se currency-->\r\n <div *ngIf=\"Type == 'currency'\">\r\n <val-currency [forceInvalid]=\"ForcedError\"\r\n [CurrencyOptions]=\"{ prefix: '', thousands: '.', decimal: ',', precision: Precision, align: Alignment }\" [noValidate]=\"!Validation\"\r\n #validationControl=\"ngModel\" type=\"text\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-currency>\r\n </div>\r\n <!--Se data-->\r\n <div *ngIf=\"Type == 'date'\">\r\n <val-date #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-date>\r\n </div>\r\n <!--Se stringa-->\r\n <div *ngIf=\"Type == 'string'\">\r\n <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || ''}}\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-input>\r\n </div>\r\n <!--Se numero-->\r\n <div *ngIf=\"Type == 'float' || Type == 'number'\">\r\n <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || '^([0-9]*[,])?[0-9]+$'}}\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-input>\r\n </div>\r\n <!--Se numero intero-->\r\n <div *ngIf=\"Type == 'int'\">\r\n <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || '^[0-9]\\\\d*$'}}\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-input>\r\n </div>\r\n <!--Se boolean-->\r\n <div class=\"m-t-5\" *ngIf=\"Type == 'boolean'\">\r\n <input #validationControl=\"ngModel\" [readonly]=\"Readonly\" type=\"checkbox\" class=\"app-pointer\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" (ngModelChange)=\"changed();\" />\r\n </div>\r\n <!--Se enum-->\r\n <div *ngIf=\"Type == 'enum'\">\r\n <val-select #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [placeHolderValue]=\"''\" [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\" [required]=\"Required\" [(ngModel)]=\"Model\" (inputChange)=\"changed();\" name=\"{{GeneratedName}}\">\r\n <option *ngFor=\"let val of BoundSource\" [value]=\"val.id\">{{val.description}}</option>\r\n </val-select>\r\n </div>\r\n <!--Se autocomplete-->\r\n <div *ngIf=\"Type == 'autocomplete'\">\r\n <val-autocomplete #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" [FilteredSource]=\"FilteredBoundSource\" (inputChange)=\"filterSource($event); changed();\"></val-autocomplete>\r\n </div>\r\n <!--Se date time-->\r\n <div *ngIf=\"Type == 'datetime'\">\r\n <val-datetime #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-datetime>\r\n </div>\r\n <!--Se time-->\r\n <div *ngIf=\"Type == 'time'\">\r\n <ngx-mat-timepicker name=\"val-time\" #elementRef #baseInput=\"ngModel\" [(ngModel)]=\"Model\" [disabled]=\"Readonly\"\r\n [showSpinners]=\"false\" [stepHour]=\"2\" [stepMinute]=\"5\" [stepSecond]=\"30\"\r\n [showSeconds]=\"true\" (ngModelChange)=\"changed()\" #validationControl=\"ngModel\">\r\n </ngx-mat-timepicker>\r\n </div>\r\n <!--Se file-->\r\n <div *ngIf=\"Type == 'file'\">\r\n <div class=\"input-group file-upload\">\r\n <input type=\"file\" (change)=\"fileChange()\" #fileInput class=\"file-upload-btn app-pointer\" [multiple]=\"null\"/>\r\n <input type=\"text\" [class.frm-padding-left-22]=\"AllowDownload && ModelFile.filename && ModelFile.fileb64\" class=\"form-control checking-field\" placeholder=\"{{'Select a file' | localize : lc}}...\" [(ngModel)]=\"ModelFile.filename\" name=\"dsfile\" #validationControl=\"ngModel\" [required]=\"Required\"/>\r\n \r\n <a class=\"fa fa-download app-pointer app-input-icon\" *ngIf=\"AllowDownload && ModelFile.filename && ModelFile.fileb64\" (click)=\"downloadAttachment()\"></a>\r\n <i class=\"fa fa-times delete-file\" (click)=\"fileChange(true)\" *ngIf=\"ModelFile.filename\"></i>\r\n <span class=\"input-group-btn\">\r\n <button class=\"btn btn-primary btn-file-upload\" type=\"button\"><i class=\"fa fa-upload\"></i></button>\r\n </span>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".frm-padding-left-22{padding-left:22px}\n"], components: [{ type: ValidationCurrencyComponent, selector: "val-currency", inputs: ["CurrencyOptions"] }, { type: ValidationDateComponent, selector: "val-date", inputs: ["useJsDates"] }, { type: ValidationInputComponent, selector: "val-input", inputs: ["Password", "showWarning", "warningTitle", "warningClass", "value"] }, { type: ValidationSelectComponent, selector: "val-select", inputs: ["emptyFieldValue", "placeHolderValue", "emptyValue", "showValidationSymbol", "label"], outputs: ["onBlur"] }, { type: ValidationAutocompleteComponent, selector: "val-autocomplete", inputs: ["FilteredSource", "value", "label"], outputs: ["optionChange"] }, { type: ValidationDateTimeComponent, selector: "val-datetime", inputs: ["useJsDates"] }, { type: i2$3.NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["disabled", "showSpinners", "stepHour", "stepMinute", "stepSecond", "showSeconds", "disableMinute", "enableMeridian", "defaultTime", "color"], exportAs: ["ngxMatTimepicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "localize": i1.LocalizePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2327
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormAdaptiveComponent, decorators: [{
|
|
2328
|
+
type: Component,
|
|
2329
|
+
args: [{ selector: "form-adaptive", providers: [{ provide: LocalizationService, useClass: FormAdaptiveComponentLoc }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n <div *ngIf=\"!Type\" class=\"app-margin-top-5\">\r\n <em>{{TypeMissingMessage}}</em>\r\n </div>\r\n \r\n <!--Se currency-->\r\n <div *ngIf=\"Type == 'currency'\">\r\n <val-currency [forceInvalid]=\"ForcedError\"\r\n [CurrencyOptions]=\"{ prefix: '', thousands: '.', decimal: ',', precision: Precision, align: Alignment }\" [noValidate]=\"!Validation\"\r\n #validationControl=\"ngModel\" type=\"text\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-currency>\r\n </div>\r\n <!--Se data-->\r\n <div *ngIf=\"Type == 'date'\">\r\n <val-date #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-date>\r\n </div>\r\n <!--Se stringa-->\r\n <div *ngIf=\"Type == 'string'\">\r\n <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || ''}}\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-input>\r\n </div>\r\n <!--Se numero-->\r\n <div *ngIf=\"Type == 'float' || Type == 'number'\">\r\n <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || '^([0-9]*[,])?[0-9]+$'}}\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-input>\r\n </div>\r\n <!--Se numero intero-->\r\n <div *ngIf=\"Type == 'int'\">\r\n <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || '^[0-9]\\\\d*$'}}\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-input>\r\n </div>\r\n <!--Se boolean-->\r\n <div class=\"m-t-5\" *ngIf=\"Type == 'boolean'\">\r\n <input #validationControl=\"ngModel\" [readonly]=\"Readonly\" type=\"checkbox\" class=\"app-pointer\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" (ngModelChange)=\"changed();\" />\r\n </div>\r\n <!--Se enum-->\r\n <div *ngIf=\"Type == 'enum'\">\r\n <val-select #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [placeHolderValue]=\"''\" [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\" [required]=\"Required\" [(ngModel)]=\"Model\" (inputChange)=\"changed();\" name=\"{{GeneratedName}}\">\r\n <option *ngFor=\"let val of BoundSource\" [value]=\"val.id\">{{val.description}}</option>\r\n </val-select>\r\n </div>\r\n <!--Se autocomplete-->\r\n <div *ngIf=\"Type == 'autocomplete'\">\r\n <val-autocomplete #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" [FilteredSource]=\"FilteredBoundSource\" (inputChange)=\"filterSource($event); changed();\"></val-autocomplete>\r\n </div>\r\n <!--Se date time-->\r\n <div *ngIf=\"Type == 'datetime'\">\r\n <val-datetime #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-datetime>\r\n </div>\r\n <!--Se time-->\r\n <div *ngIf=\"Type == 'time'\">\r\n <ngx-mat-timepicker name=\"val-time\" #elementRef #baseInput=\"ngModel\" [(ngModel)]=\"Model\" [disabled]=\"Readonly\"\r\n [showSpinners]=\"false\" [stepHour]=\"2\" [stepMinute]=\"5\" [stepSecond]=\"30\"\r\n [showSeconds]=\"true\" (ngModelChange)=\"changed()\" #validationControl=\"ngModel\">\r\n </ngx-mat-timepicker>\r\n </div>\r\n <!--Se file-->\r\n <div *ngIf=\"Type == 'file'\">\r\n <div class=\"input-group file-upload\">\r\n <input type=\"file\" (change)=\"fileChange()\" #fileInput class=\"file-upload-btn app-pointer\" [multiple]=\"null\"/>\r\n <input type=\"text\" [class.frm-padding-left-22]=\"AllowDownload && ModelFile.filename && ModelFile.fileb64\" class=\"form-control checking-field\" placeholder=\"{{'Select a file' | localize : lc}}...\" [(ngModel)]=\"ModelFile.filename\" name=\"dsfile\" #validationControl=\"ngModel\" [required]=\"Required\"/>\r\n \r\n <a class=\"fa fa-download app-pointer app-input-icon\" *ngIf=\"AllowDownload && ModelFile.filename && ModelFile.fileb64\" (click)=\"downloadAttachment()\"></a>\r\n <i class=\"fa fa-times delete-file\" (click)=\"fileChange(true)\" *ngIf=\"ModelFile.filename\"></i>\r\n <span class=\"input-group-btn\">\r\n <button class=\"btn btn-primary btn-file-upload\" type=\"button\"><i class=\"fa fa-upload\"></i></button>\r\n </span>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".frm-padding-left-22{padding-left:22px}\n"] }]
|
|
2330
|
+
}], ctorParameters: function () {
|
|
2331
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i2$2.UtilityService }, { type: i2$3.NgxMatDateAdapter }, { type: i1.LocalizationService }, { type: i2$1.NgControl, decorators: [{
|
|
2332
|
+
type: Optional
|
|
2333
|
+
}, {
|
|
2334
|
+
type: Self
|
|
2335
|
+
}] }, { type: Array, decorators: [{
|
|
2336
|
+
type: Optional
|
|
2337
|
+
}, {
|
|
2338
|
+
type: Inject,
|
|
2339
|
+
args: [NG_VALIDATORS]
|
|
2340
|
+
}] }, { type: i2$4.AccessControlService }, { type: i2$4.ComponentContext, decorators: [{
|
|
2341
|
+
type: Optional
|
|
2342
|
+
}] }, { type: undefined, decorators: [{
|
|
2343
|
+
type: Optional
|
|
2344
|
+
}, {
|
|
2345
|
+
type: Inject,
|
|
2346
|
+
args: [ACO_CUSTOMKEY]
|
|
2347
|
+
}] }];
|
|
2348
|
+
}, propDecorators: { Type: [{
|
|
2349
|
+
type: Input
|
|
2350
|
+
}], TypeMissingMessage: [{
|
|
2351
|
+
type: Input
|
|
2352
|
+
}], Pattern: [{
|
|
2353
|
+
type: Input
|
|
2354
|
+
}], inputEl: [{
|
|
2355
|
+
type: ViewChild,
|
|
2356
|
+
args: ["fileInput", { static: false }]
|
|
2357
|
+
}], AllowDownload: [{
|
|
2358
|
+
type: Input
|
|
2359
|
+
}], Precision: [{
|
|
2360
|
+
type: Input
|
|
2361
|
+
}], Alignment: [{
|
|
2362
|
+
type: Input
|
|
2363
|
+
}], SearchFunction: [{
|
|
2364
|
+
type: Input
|
|
2365
|
+
}], MinChars: [{
|
|
2366
|
+
type: Input
|
|
2367
|
+
}], CaseSensitive: [{
|
|
2368
|
+
type: Input
|
|
2369
|
+
}] } });
|
|
2370
|
+
|
|
2371
|
+
// Angular
|
|
2372
|
+
/**
|
|
2373
|
+
* Componente placeholder per la creazione dei form che rappresenta un blocchetto vuoto,
|
|
2374
|
+
* al posto del quale possono poi comparire dei componenti form senza incasinare la grafica
|
|
2375
|
+
*/
|
|
2376
|
+
class FormEmptyComponent {
|
|
2377
|
+
constructor() {
|
|
2378
|
+
/**
|
|
2379
|
+
* Indica se è l'ultimo componente di un form (serve per rimuovere il margine finale)
|
|
2380
|
+
*/
|
|
2381
|
+
this.Last = false;
|
|
2382
|
+
/**
|
|
2383
|
+
* Classe extra per il form-group in cui viene wrappato l'input finto
|
|
2384
|
+
*/
|
|
2385
|
+
this.FormGroupClass = "";
|
|
2386
|
+
/**
|
|
2387
|
+
* Valore placeholder da mostrare
|
|
2388
|
+
*/
|
|
2389
|
+
this.PlaceholderModel = "Placeholder";
|
|
2390
|
+
}
|
|
2391
|
+
}
|
|
2392
|
+
FormEmptyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2393
|
+
FormEmptyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormEmptyComponent, selector: "form-empty", inputs: { Last: "Last", FormGroupClass: "FormGroupClass" }, ngImport: i0, template: "<div class=\"form-group row app-hidden-view {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-4 m-t-5\">Placeholder:</label>\r\n <div class=\"col-md-8\">\r\n <val-input type=\"text\" [(ngModel)]=\"PlaceholderModel\" [ngModelOptions]=\"{standalone: true}\"></val-input>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>", components: [{ type: ValidationInputComponent, selector: "val-input", inputs: ["Password", "showWarning", "warningTitle", "warningClass", "value"] }], directives: [{ type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2394
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormEmptyComponent, decorators: [{
|
|
2395
|
+
type: Component,
|
|
2396
|
+
args: [{ selector: "form-empty", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group row app-hidden-view {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-4 m-t-5\">Placeholder:</label>\r\n <div class=\"col-md-8\">\r\n <val-input type=\"text\" [(ngModel)]=\"PlaceholderModel\" [ngModelOptions]=\"{standalone: true}\"></val-input>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>" }]
|
|
2397
|
+
}], propDecorators: { Last: [{
|
|
2398
|
+
type: Input
|
|
2399
|
+
}], FormGroupClass: [{
|
|
2400
|
+
type: Input
|
|
2401
|
+
}] } });
|
|
2402
|
+
|
|
2403
|
+
// Angular
|
|
2404
|
+
/**
|
|
2405
|
+
* Componente da utilizzare quando l'implementazione dell'input non è disponibile nella libreria,
|
|
2406
|
+
* fornisce la struttura standard di un form-component ma l'input vero e proprio viene proiettato dall'esterno
|
|
2407
|
+
*/
|
|
2408
|
+
class FormTemplateComponent {
|
|
2409
|
+
constructor() {
|
|
2410
|
+
/**
|
|
2411
|
+
* Indica se l'input è obbligatorio o no
|
|
2412
|
+
*/
|
|
2413
|
+
this.Required = false;
|
|
2414
|
+
/**
|
|
2415
|
+
* Mostra un testo a sinistra dell'input, **FormLayout** permettendo
|
|
2416
|
+
*/
|
|
2417
|
+
this.Label = "";
|
|
2418
|
+
/**
|
|
2419
|
+
* Utilizza o meno il Layout di un form (Label con input di fianco), se false mostra solo l'input
|
|
2420
|
+
*/
|
|
2421
|
+
this.FormLayout = true;
|
|
2422
|
+
/**
|
|
2423
|
+
* col-md-X per la label
|
|
2424
|
+
*/
|
|
2425
|
+
this.LabelColWidth = 4;
|
|
2426
|
+
/**
|
|
2427
|
+
* col-md-X per l'input
|
|
2428
|
+
*/
|
|
2429
|
+
this.InputColWidth = 8;
|
|
2430
|
+
/**
|
|
2431
|
+
* Indica se è l'ultimo componente di un form (serve per rimuovere il margine finale)
|
|
2432
|
+
*/
|
|
2433
|
+
this.Last = false;
|
|
2434
|
+
/**
|
|
2435
|
+
* Classe extra per il form-group in cui viene wrappato l'input
|
|
2436
|
+
*/
|
|
2437
|
+
this.FormGroupClass = "";
|
|
2438
|
+
}
|
|
2439
|
+
/**
|
|
2440
|
+
* Permette di settare in una volta solo gli input LabelColWidth e InputColWidth, basta scriverlo con la sintassi "X Y"
|
|
2441
|
+
*/
|
|
2442
|
+
set LabelInputRatio(input) {
|
|
2443
|
+
var ratio = input.split(/\s/);
|
|
2444
|
+
this.LabelColWidth = parseInt(ratio[0]);
|
|
2445
|
+
this.InputColWidth = parseInt(ratio[1]);
|
|
2446
|
+
}
|
|
2447
|
+
}
|
|
2448
|
+
FormTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2449
|
+
FormTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormTemplateComponent, selector: "form-template", inputs: { Required: "Required", Label: "Label", FormLayout: "FormLayout", LabelColWidth: "LabelColWidth", InputColWidth: "InputColWidth", Last: "Last", FormGroupClass: "FormGroupClass", LabelInputRatio: "LabelInputRatio" }, ngImport: i0, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-content></ng-content>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}<span *ngIf=\"Label\">:</span></label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>", directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2450
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormTemplateComponent, decorators: [{
|
|
2451
|
+
type: Component,
|
|
2452
|
+
args: [{ selector: "form-template", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-content></ng-content>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}<span *ngIf=\"Label\">:</span></label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>" }]
|
|
2453
|
+
}], propDecorators: { Required: [{
|
|
2454
|
+
type: Input
|
|
2455
|
+
}], Label: [{
|
|
2456
|
+
type: Input
|
|
2457
|
+
}], FormLayout: [{
|
|
2458
|
+
type: Input
|
|
2459
|
+
}], LabelColWidth: [{
|
|
2460
|
+
type: Input
|
|
2461
|
+
}], InputColWidth: [{
|
|
2462
|
+
type: Input
|
|
2463
|
+
}], Last: [{
|
|
2464
|
+
type: Input
|
|
2465
|
+
}], FormGroupClass: [{
|
|
2466
|
+
type: Input
|
|
2467
|
+
}], LabelInputRatio: [{
|
|
2468
|
+
type: Input
|
|
2469
|
+
}] } });
|
|
2470
|
+
|
|
2471
|
+
// Angular
|
|
2472
|
+
/**
|
|
2473
|
+
* Componente placeholder per la creazione dei form che rappresenta un blocchetto di erorre,
|
|
2474
|
+
* al posto del quale possono poi comparire dei componenti form senza incasinare la grafica
|
|
2475
|
+
*/
|
|
2476
|
+
class FormErrorComponent {
|
|
2477
|
+
constructor() {
|
|
2478
|
+
/**
|
|
2479
|
+
* col-md-X per la label (Che in questoc aso è vuota)
|
|
2480
|
+
*/
|
|
2481
|
+
this.LabelColWidth = 4;
|
|
2482
|
+
/**
|
|
2483
|
+
* col-md-X per l'input (che in questo caso contiene il messaggio d'errore proiettato nell'HTML)
|
|
2484
|
+
*/
|
|
2485
|
+
this.InputColWidth = 8;
|
|
2486
|
+
/**
|
|
2487
|
+
* Indica se è l'ultimo componente di un form (serve per rimuovere il margine finale)
|
|
2488
|
+
*/
|
|
2489
|
+
this.Last = false;
|
|
2490
|
+
/**
|
|
2491
|
+
* Classe extra per il form-group in cui viene wrappato l'input
|
|
2492
|
+
*/
|
|
2493
|
+
this.FormGroupClass = "";
|
|
2494
|
+
}
|
|
2495
|
+
/**
|
|
2496
|
+
* Permette di settare in una volta solo gli input LabelColWidth e InputColWidth, basta scriverlo con la sintassi "X Y"
|
|
2497
|
+
*/
|
|
2498
|
+
set LabelInputRatio(input) {
|
|
2499
|
+
var ratio = input.split(/\s/);
|
|
2500
|
+
this.LabelColWidth = parseInt(ratio[0]);
|
|
2501
|
+
this.InputColWidth = parseInt(ratio[1]);
|
|
2502
|
+
}
|
|
2503
|
+
}
|
|
2504
|
+
FormErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2505
|
+
FormErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormErrorComponent, selector: "form-error", inputs: { LabelColWidth: "LabelColWidth", InputColWidth: "InputColWidth", Last: "Last", FormGroupClass: "FormGroupClass", LabelInputRatio: "LabelInputRatio" }, ngImport: i0, template: "<div class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"app-hidden-view col-md-{{LabelColWidth}} m-t-5\"></label>\r\n <span class=\"help-block text-danger col-md-{{InputColWidth}}\">\r\n <ng-content></ng-content>\r\n </span>\r\n <div class=\"clearfix\"></div>\r\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2506
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormErrorComponent, decorators: [{
|
|
2507
|
+
type: Component,
|
|
2508
|
+
args: [{ selector: "form-error", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"app-hidden-view col-md-{{LabelColWidth}} m-t-5\"></label>\r\n <span class=\"help-block text-danger col-md-{{InputColWidth}}\">\r\n <ng-content></ng-content>\r\n </span>\r\n <div class=\"clearfix\"></div>\r\n</div>" }]
|
|
2509
|
+
}], propDecorators: { LabelColWidth: [{
|
|
2510
|
+
type: Input
|
|
2511
|
+
}], InputColWidth: [{
|
|
2512
|
+
type: Input
|
|
2513
|
+
}], Last: [{
|
|
2514
|
+
type: Input
|
|
2515
|
+
}], FormGroupClass: [{
|
|
2516
|
+
type: Input
|
|
2517
|
+
}], LabelInputRatio: [{
|
|
2518
|
+
type: Input
|
|
2519
|
+
}] } });
|
|
2520
|
+
|
|
2521
|
+
// Angular
|
|
2522
|
+
/**
|
|
2523
|
+
* Componente placeholder per la creazione dei form che rappresenta un blocchetto di informazioni,
|
|
2524
|
+
* al posto del quale possono poi comparire dei componenti form senza incasinare la grafica
|
|
2525
|
+
*/
|
|
2526
|
+
class FormInfoComponent {
|
|
2527
|
+
constructor() {
|
|
2528
|
+
/**
|
|
2529
|
+
* col-md-X per la label (Che in questoc aso è vuota)
|
|
2530
|
+
*/
|
|
2531
|
+
this.LabelColWidth = 4;
|
|
2532
|
+
/**
|
|
2533
|
+
* col-md-X per l'input (che in questo caso contiene il messaggio d'errore proiettato nell'HTML)
|
|
2534
|
+
*/
|
|
2535
|
+
this.InputColWidth = 8;
|
|
2536
|
+
/**
|
|
2537
|
+
* Indica se è l'ultimo componente di un form (serve per rimuovere il margine finale)
|
|
2538
|
+
*/
|
|
2539
|
+
this.Last = false;
|
|
2540
|
+
/**
|
|
2541
|
+
* Classe extra per il form-group in cui viene wrappato l'input
|
|
2542
|
+
*/
|
|
2543
|
+
this.FormGroupClass = "";
|
|
2544
|
+
}
|
|
2545
|
+
/**
|
|
2546
|
+
* Permette di settare in una volta solo gli input LabelColWidth e InputColWidth, basta scriverlo con la sintassi "X Y"
|
|
2547
|
+
*/
|
|
2548
|
+
set LabelInputRatio(input) {
|
|
2549
|
+
var ratio = input.split(/\s/);
|
|
2550
|
+
this.LabelColWidth = parseInt(ratio[0]);
|
|
2551
|
+
this.InputColWidth = parseInt(ratio[1]);
|
|
2552
|
+
}
|
|
2553
|
+
}
|
|
2554
|
+
FormInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2555
|
+
FormInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormInfoComponent, selector: "form-info", inputs: { LabelColWidth: "LabelColWidth", InputColWidth: "InputColWidth", Last: "Last", FormGroupClass: "FormGroupClass", LabelInputRatio: "LabelInputRatio" }, ngImport: i0, template: "<div class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"app-hidden-view col-md-{{LabelColWidth}} m-t-5\"></label>\r\n <span class=\"help-block col-md-{{InputColWidth}}\">\r\n <ng-content></ng-content>\r\n </span>\r\n <div class=\"clearfix\"></div>\r\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2556
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormInfoComponent, decorators: [{
|
|
2557
|
+
type: Component,
|
|
2558
|
+
args: [{ selector: "form-info", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"app-hidden-view col-md-{{LabelColWidth}} m-t-5\"></label>\r\n <span class=\"help-block col-md-{{InputColWidth}}\">\r\n <ng-content></ng-content>\r\n </span>\r\n <div class=\"clearfix\"></div>\r\n</div>" }]
|
|
2559
|
+
}], propDecorators: { LabelColWidth: [{
|
|
2560
|
+
type: Input
|
|
2561
|
+
}], InputColWidth: [{
|
|
2562
|
+
type: Input
|
|
2563
|
+
}], Last: [{
|
|
2564
|
+
type: Input
|
|
2565
|
+
}], FormGroupClass: [{
|
|
2566
|
+
type: Input
|
|
2567
|
+
}], LabelInputRatio: [{
|
|
2568
|
+
type: Input
|
|
2569
|
+
}] } });
|
|
2570
|
+
|
|
2571
|
+
// Angular
|
|
2572
|
+
/**
|
|
2573
|
+
* Componente rappresentante una checkbox
|
|
2574
|
+
*/
|
|
2575
|
+
class FormCheckboxComponent extends BaseFormControl {
|
|
2576
|
+
/**
|
|
2577
|
+
* Costruttore
|
|
2578
|
+
*
|
|
2579
|
+
* @ignore
|
|
2580
|
+
*/
|
|
2581
|
+
constructor(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY) {
|
|
2582
|
+
super(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY, true);
|
|
2583
|
+
}
|
|
2584
|
+
/**
|
|
2585
|
+
* @ignore
|
|
2586
|
+
*/
|
|
2587
|
+
onNotNullValueSet() { }
|
|
2588
|
+
}
|
|
2589
|
+
FormCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$1.NgControl, optional: true, self: true }, { token: NG_VALIDATORS, host: true, optional: true }, { token: i2$4.AccessControlService }, { token: i2$4.ComponentContext, optional: true }, { token: ACO_CUSTOMKEY, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2590
|
+
FormCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormCheckboxComponent, selector: "form-checkbox", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}} m-t-5\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n <input class=\"app-pointer\" [disabled]=\"Readonly ? true : null\" type=\"checkbox\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" #validationControl=\"ngModel\" (ngModelChange)=\"changed();\" />\r\n</ng-template>", directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2591
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormCheckboxComponent, decorators: [{
|
|
2592
|
+
type: Component,
|
|
2593
|
+
args: [{ selector: "form-checkbox", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}} m-t-5\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n <input class=\"app-pointer\" [disabled]=\"Readonly ? true : null\" type=\"checkbox\" [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\" #validationControl=\"ngModel\" (ngModelChange)=\"changed();\" />\r\n</ng-template>" }]
|
|
2594
|
+
}], ctorParameters: function () {
|
|
2595
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i2$1.NgControl, decorators: [{
|
|
2596
|
+
type: Optional
|
|
2597
|
+
}, {
|
|
2598
|
+
type: Self
|
|
2599
|
+
}] }, { type: Array, decorators: [{
|
|
2600
|
+
type: Optional
|
|
2601
|
+
}, {
|
|
2602
|
+
type: Host
|
|
2603
|
+
}, {
|
|
2604
|
+
type: Inject,
|
|
2605
|
+
args: [NG_VALIDATORS]
|
|
2606
|
+
}] }, { type: i2$4.AccessControlService }, { type: i2$4.ComponentContext, decorators: [{
|
|
2607
|
+
type: Optional
|
|
2608
|
+
}] }, { type: undefined, decorators: [{
|
|
2609
|
+
type: Optional
|
|
2610
|
+
}, {
|
|
2611
|
+
type: Inject,
|
|
2612
|
+
args: [ACO_CUSTOMKEY]
|
|
2613
|
+
}] }];
|
|
2614
|
+
} });
|
|
2615
|
+
|
|
2616
|
+
// Angular
|
|
2617
|
+
/**
|
|
2618
|
+
* Componente che dà all'utente la possibilità di selezionare una data
|
|
2619
|
+
*/
|
|
2620
|
+
class FormDateComponent extends BaseFormControl {
|
|
2621
|
+
/**
|
|
2622
|
+
* Costruttore
|
|
2623
|
+
*
|
|
2624
|
+
* @ignore
|
|
2625
|
+
*/
|
|
2626
|
+
constructor(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY) {
|
|
2627
|
+
super(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY);
|
|
2628
|
+
/**
|
|
2629
|
+
* Utilizza il Date di Javascript come modello in uscita. Il modello in entrata verrà comunque ricondotto a un DayJs
|
|
2630
|
+
*/
|
|
2631
|
+
this.JsDates = false;
|
|
2632
|
+
}
|
|
2633
|
+
/**
|
|
2634
|
+
* @ignore
|
|
2635
|
+
*/
|
|
2636
|
+
onNotNullValueSet() { }
|
|
2637
|
+
}
|
|
2638
|
+
FormDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormDateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$1.NgControl, optional: true, self: true }, { token: NG_VALIDATORS, optional: true }, { token: i2$4.AccessControlService, optional: true }, { token: i2$4.ComponentContext, optional: true }, { token: ACO_CUSTOMKEY, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2639
|
+
FormDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormDateComponent, selector: "form-date", inputs: { JsDates: "JsDates" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n <val-date [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [forceInvalid]=\"ForcedError\"\r\n [readonly]=\"Readonly\"\r\n [class]=\"Readonly ? 'app-bg-lightgrey' : ''\"\r\n [useJsDates]=\"JsDates\"\r\n [(ngModel)]=\"Model\"\r\n name=\"{{GeneratedName}}\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"changed();\"\r\n [placeholder]=\"Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\">\r\n </val-date>\r\n</ng-template>", components: [{ type: ValidationDateComponent, selector: "val-date", inputs: ["useJsDates"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2640
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormDateComponent, decorators: [{
|
|
2641
|
+
type: Component,
|
|
2642
|
+
args: [{ selector: "form-date", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n <val-date [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [forceInvalid]=\"ForcedError\"\r\n [readonly]=\"Readonly\"\r\n [class]=\"Readonly ? 'app-bg-lightgrey' : ''\"\r\n [useJsDates]=\"JsDates\"\r\n [(ngModel)]=\"Model\"\r\n name=\"{{GeneratedName}}\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"changed();\"\r\n [placeholder]=\"Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\">\r\n </val-date>\r\n</ng-template>" }]
|
|
2643
|
+
}], ctorParameters: function () {
|
|
2644
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i2$1.NgControl, decorators: [{
|
|
2645
|
+
type: Optional
|
|
2646
|
+
}, {
|
|
2647
|
+
type: Self
|
|
2648
|
+
}] }, { type: Array, decorators: [{
|
|
2649
|
+
type: Optional
|
|
2650
|
+
}, {
|
|
2651
|
+
type: Inject,
|
|
2652
|
+
args: [NG_VALIDATORS]
|
|
2653
|
+
}] }, { type: i2$4.AccessControlService, decorators: [{
|
|
2654
|
+
type: Optional
|
|
2655
|
+
}] }, { type: i2$4.ComponentContext, decorators: [{
|
|
2656
|
+
type: Optional
|
|
2657
|
+
}] }, { type: undefined, decorators: [{
|
|
2658
|
+
type: Optional
|
|
2659
|
+
}, {
|
|
2660
|
+
type: Inject,
|
|
2661
|
+
args: [ACO_CUSTOMKEY]
|
|
2662
|
+
}] }];
|
|
2663
|
+
}, propDecorators: { JsDates: [{
|
|
2664
|
+
type: Input
|
|
2665
|
+
}] } });
|
|
2666
|
+
|
|
2667
|
+
// Angular
|
|
2668
|
+
/**
|
|
2669
|
+
* Semplice componente di Input testuale, con eventuale prefisso/suffisso
|
|
2670
|
+
*/
|
|
2671
|
+
class FormInputComponent extends BaseFormControl {
|
|
2672
|
+
/**
|
|
2673
|
+
* Costruttore
|
|
2674
|
+
*
|
|
2675
|
+
* @ignore
|
|
2676
|
+
*/
|
|
2677
|
+
constructor(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY) {
|
|
2678
|
+
super(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY);
|
|
2679
|
+
/**
|
|
2680
|
+
* Indica se l'input relativo è di tipo Password
|
|
2681
|
+
*/
|
|
2682
|
+
this.Password = false;
|
|
2683
|
+
/**
|
|
2684
|
+
* Delegato per l'esecuzione di un'operazione al click del suffisso
|
|
2685
|
+
*/
|
|
2686
|
+
this.onSuffixAction = new EventEmitter();
|
|
2687
|
+
/**
|
|
2688
|
+
* Delegato per l'esecuzione di un'operazione al click del prefisso
|
|
2689
|
+
*/
|
|
2690
|
+
this.onPrefixAction = new EventEmitter();
|
|
2691
|
+
/**
|
|
2692
|
+
* Indica la presenza o meno di un suffisso, si basa sulla "truthiness" della proiezione **suffix**
|
|
2693
|
+
*/
|
|
2694
|
+
this.HasSuffix = false;
|
|
2695
|
+
/**
|
|
2696
|
+
* Indica la presenza o meno di un prefisso, si basa sulla "truthiness" della proiezione **prefix**
|
|
2697
|
+
*/
|
|
2698
|
+
this.HasPrefix = false;
|
|
2699
|
+
}
|
|
2700
|
+
/**
|
|
2701
|
+
* @ignore
|
|
2702
|
+
*/
|
|
2703
|
+
ngAfterContentInit() {
|
|
2704
|
+
this.HasSuffix = !!this.suffix;
|
|
2705
|
+
this.HasPrefix = !!this.prefix;
|
|
2706
|
+
}
|
|
2707
|
+
/**
|
|
2708
|
+
* @ignore
|
|
2709
|
+
*/
|
|
2710
|
+
onNotNullValueSet() { }
|
|
2711
|
+
}
|
|
2712
|
+
FormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$1.NgControl, optional: true, self: true }, { token: NG_VALIDATORS, optional: true }, { token: i2$4.AccessControlService, optional: true }, { token: i2$4.ComponentContext, optional: true }, { token: ACO_CUSTOMKEY, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2713
|
+
FormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormInputComponent, selector: "form-input", inputs: { Password: "Password" }, outputs: { onSuffixAction: "onSuffixAction", onPrefixAction: "onPrefixAction" }, queries: [{ propertyName: "suffix", first: true, predicate: ["suffix"], descendants: true }, { propertyName: "prefix", first: true, predicate: ["prefix"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n <val-input [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [readonly]=\"Readonly\"\r\n [forceInvalid]=\"ForcedError\"\r\n type=\"text\"\r\n [(ngModel)]=\"Model\"\r\n name=\"{{GeneratedName}}\"\r\n autocomplete=\"off\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"changed();\"\r\n [placeholder]=\"Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n [Password]=\"Password\">\r\n <ng-container *ngIf=\"HasSuffix\">\r\n <ng-template #suffix_internal>\r\n <button type=\"button\" class=\"mat-button mat-icon-button mat-button-base mat-icon-button-override mat-icon-button-override-suffix\"\r\n matSuffix (click)=\"onSuffixAction.emit(); $event.stopPropagation(); $event.preventDefault();\">\r\n <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\r\n </button>\r\n </ng-template>\r\n </ng-container>\r\n <ng-container *ngIf=\"HasPrefix\">\r\n <ng-template #prefix_internal>\r\n <button type=\"button\" class=\"mat-button mat-icon-button mat-button-base mat-icon-button-override mat-icon-button-override-prefix\"\r\n matPrefix (click)=\"onPrefixAction.emit(); $event.stopPropagation(); $event.preventDefault();\">\r\n <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\r\n </button>\r\n </ng-template>\r\n </ng-container>\r\n </val-input>\r\n</ng-template>", components: [{ type: ValidationInputComponent, selector: "val-input", inputs: ["Password", "showWarning", "warningTitle", "warningClass", "value"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }, { type: i2.MatPrefix, selector: "[matPrefix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2714
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormInputComponent, decorators: [{
|
|
2715
|
+
type: Component,
|
|
2716
|
+
args: [{ selector: "form-input", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n <val-input [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [readonly]=\"Readonly\"\r\n [forceInvalid]=\"ForcedError\"\r\n type=\"text\"\r\n [(ngModel)]=\"Model\"\r\n name=\"{{GeneratedName}}\"\r\n autocomplete=\"off\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"changed();\"\r\n [placeholder]=\"Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n [Password]=\"Password\">\r\n <ng-container *ngIf=\"HasSuffix\">\r\n <ng-template #suffix_internal>\r\n <button type=\"button\" class=\"mat-button mat-icon-button mat-button-base mat-icon-button-override mat-icon-button-override-suffix\"\r\n matSuffix (click)=\"onSuffixAction.emit(); $event.stopPropagation(); $event.preventDefault();\">\r\n <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\r\n </button>\r\n </ng-template>\r\n </ng-container>\r\n <ng-container *ngIf=\"HasPrefix\">\r\n <ng-template #prefix_internal>\r\n <button type=\"button\" class=\"mat-button mat-icon-button mat-button-base mat-icon-button-override mat-icon-button-override-prefix\"\r\n matPrefix (click)=\"onPrefixAction.emit(); $event.stopPropagation(); $event.preventDefault();\">\r\n <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\r\n </button>\r\n </ng-template>\r\n </ng-container>\r\n </val-input>\r\n</ng-template>" }]
|
|
2717
|
+
}], ctorParameters: function () {
|
|
2718
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i2$1.NgControl, decorators: [{
|
|
2719
|
+
type: Optional
|
|
2720
|
+
}, {
|
|
2721
|
+
type: Self
|
|
2722
|
+
}] }, { type: Array, decorators: [{
|
|
2723
|
+
type: Optional
|
|
2724
|
+
}, {
|
|
2725
|
+
type: Inject,
|
|
2726
|
+
args: [NG_VALIDATORS]
|
|
2727
|
+
}] }, { type: i2$4.AccessControlService, decorators: [{
|
|
2728
|
+
type: Optional
|
|
2729
|
+
}] }, { type: i2$4.ComponentContext, decorators: [{
|
|
2730
|
+
type: Optional
|
|
2731
|
+
}] }, { type: undefined, decorators: [{
|
|
2732
|
+
type: Optional
|
|
2733
|
+
}, {
|
|
2734
|
+
type: Inject,
|
|
2735
|
+
args: [ACO_CUSTOMKEY]
|
|
2736
|
+
}] }];
|
|
2737
|
+
}, propDecorators: { Password: [{
|
|
2738
|
+
type: Input
|
|
2739
|
+
}], onSuffixAction: [{
|
|
2740
|
+
type: Output
|
|
2741
|
+
}], onPrefixAction: [{
|
|
2742
|
+
type: Output
|
|
2743
|
+
}], suffix: [{
|
|
2744
|
+
type: ContentChild,
|
|
2745
|
+
args: ["suffix", { static: false }]
|
|
2746
|
+
}], prefix: [{
|
|
2747
|
+
type: ContentChild,
|
|
2748
|
+
args: ["prefix", { static: false }]
|
|
2749
|
+
}] } });
|
|
2750
|
+
|
|
2751
|
+
/**
|
|
2752
|
+
* Classe di localizzazione per il componente **FormSelectComponent**
|
|
2753
|
+
*/
|
|
2754
|
+
class FormSelectComponentLoc extends LocalizationService {
|
|
2755
|
+
/**
|
|
2756
|
+
* @ignore
|
|
2757
|
+
*/
|
|
2758
|
+
constructor(LOC_LOCALE) {
|
|
2759
|
+
super(LOC_LOCALE !== null && LOC_LOCALE !== void 0 ? LOC_LOCALE : 'it-IT');
|
|
2760
|
+
}
|
|
2761
|
+
}
|
|
2762
|
+
FormSelectComponentLoc.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormSelectComponentLoc, deps: [{ token: FAV_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2763
|
+
FormSelectComponentLoc.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormSelectComponentLoc });
|
|
2764
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormSelectComponentLoc, decorators: [{
|
|
2765
|
+
type: Injectable
|
|
2766
|
+
}], ctorParameters: function () {
|
|
2767
|
+
return [{ type: undefined, decorators: [{
|
|
2768
|
+
type: Optional
|
|
2769
|
+
}, {
|
|
2770
|
+
type: Inject,
|
|
2771
|
+
args: [FAV_LOCALE]
|
|
2772
|
+
}] }];
|
|
2773
|
+
} });
|
|
2774
|
+
|
|
2775
|
+
// Angular
|
|
2776
|
+
/**
|
|
2777
|
+
* Componente che permette di selezionare un valore da una lista di valori disponibili
|
|
2778
|
+
*/
|
|
2779
|
+
class FormSelectComponent extends BaseFormControl {
|
|
2780
|
+
/**
|
|
2781
|
+
* Costruttore
|
|
2782
|
+
*
|
|
2783
|
+
* @ignore
|
|
2784
|
+
*/
|
|
2785
|
+
constructor(cdr, lc, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY) {
|
|
2786
|
+
super(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY);
|
|
2787
|
+
this.lc = lc;
|
|
2788
|
+
/**
|
|
2789
|
+
* Permette di specificare il testo della Label flottante material-style
|
|
2790
|
+
*/
|
|
2791
|
+
this.SelectLabel = "";
|
|
2792
|
+
/**
|
|
2793
|
+
* Permette al componente di considerare questo valore come "valore placeholder"
|
|
2794
|
+
*
|
|
2795
|
+
* Si consiglia di mantenere il default
|
|
2796
|
+
*/
|
|
2797
|
+
this.PlaceholderValue = '';
|
|
2798
|
+
/**
|
|
2799
|
+
* Override del placeholder per select requried
|
|
2800
|
+
*/
|
|
2801
|
+
this.RequiredPlaceholder = null;
|
|
2802
|
+
/**
|
|
2803
|
+
* Permette al componente di considerare questo valore come "valore vuoto"
|
|
2804
|
+
*
|
|
2805
|
+
* Si consiglia di mantenere il default
|
|
2806
|
+
*/
|
|
2807
|
+
this.EmptyFieldValue = '-2';
|
|
2808
|
+
/**
|
|
2809
|
+
* Se **true** rimuove il simbolino di validazione (croce rossa o tick verde)
|
|
2810
|
+
*/
|
|
2811
|
+
this.ShowValidationSymbol = true;
|
|
2812
|
+
}
|
|
2813
|
+
/**
|
|
2814
|
+
* @ignore
|
|
2815
|
+
*/
|
|
2816
|
+
ngOnChanges(changes) {
|
|
2817
|
+
let newSource = changes["Source"];
|
|
2818
|
+
if (!newSource)
|
|
2819
|
+
return;
|
|
2820
|
+
let curr = newSource.currentValue;
|
|
2821
|
+
let prev = newSource.previousValue;
|
|
2822
|
+
// Se manca curr vuol dire che non ho un valore e posso ignorare (alla peggio deve arrivarmi un array vuoto)
|
|
2823
|
+
if (!curr)
|
|
2824
|
+
return;
|
|
2825
|
+
// Se manca prev vuol dire che è la prima assegnazione, lo considero un array vuoto e proseguo... ogni tanto viene chiamato una sola volta
|
|
2826
|
+
// ogni tanto viene chiamato due volte... è un pelo arbitrario ma vabbè
|
|
2827
|
+
if (!prev)
|
|
2828
|
+
prev = [];
|
|
2829
|
+
// Considero di aver ricevuto una nuova sorgente se:
|
|
2830
|
+
// 1: La sorgente nuova ha un numero di elementi diverso dalla sorgente vecchia
|
|
2831
|
+
// 2: Sia la sorgente nuova che vecchia hanno almeno un elemento e l'id del primo elemento della sorgente nuova è diverso dall'id del primo elemento della sorgente vecchia
|
|
2832
|
+
if (newSource && (curr.length != prev.length || (curr.length > 0 && curr[0][this.IdField] != prev[0][this.IdField]))) {
|
|
2833
|
+
/*
|
|
2834
|
+
* NGBUG:
|
|
2835
|
+
* Uso questo escamotage per distruggere il val-select e ricrearlo
|
|
2836
|
+
* Purtroppo una volta bindato a una sorgente, cambiargliela sotto significa mandare in palla material
|
|
2837
|
+
* che si mette a far floattare la label anche se il valore e' vuoto
|
|
2838
|
+
* Distruggendo il componente e ricreandolo material riparte da 0 e non da' problemi.
|
|
2839
|
+
* Ovviamente lo faccio solo quando ho una SelectLabel, altrimenti non ho problemi di floattamenti
|
|
2840
|
+
*/
|
|
2841
|
+
if (!this.SourceFirstBind && this.SelectLabel) {
|
|
2842
|
+
this.BoundSource = null;
|
|
2843
|
+
setTimeout(() => { this.tryBindSourceDisplay(); this.cdr.detectChanges(); });
|
|
2844
|
+
}
|
|
2845
|
+
else
|
|
2846
|
+
this.tryBindSourceDisplay();
|
|
2847
|
+
this.cdr.markForCheck();
|
|
2848
|
+
}
|
|
2849
|
+
}
|
|
2850
|
+
/**
|
|
2851
|
+
* @ignore
|
|
2852
|
+
*/
|
|
2853
|
+
onNotNullValueSet() { }
|
|
2854
|
+
}
|
|
2855
|
+
FormSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i2$1.NgControl, optional: true, self: true }, { token: NG_VALIDATORS, optional: true }, { token: i2$4.AccessControlService, optional: true }, { token: i2$4.ComponentContext, optional: true }, { token: ACO_CUSTOMKEY, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2856
|
+
FormSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormSelectComponent, selector: "form-select", inputs: { SelectLabel: "SelectLabel", PlaceholderValue: "PlaceholderValue", RequiredPlaceholder: "RequiredPlaceholder", EmptyFieldValue: "EmptyFieldValue", ShowValidationSymbol: "ShowValidationSymbol" }, providers: [{ provide: LocalizationService, useClass: FormSelectComponentLoc }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && BoundSource\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n\r\n <!-- Select vuota per quando non ho Sorgenti dati da cui selezionare. Uguale identica alla piena ma senza option\r\n Purtroppo devono essere due componenti distinti perch\u00E9 una select una volta creata non riesce pi\u00F9 ad adattarsi ai cambi di options -->\r\n <val-select *ngIf=\"!BoundSource || BoundSource.length == 0\"\r\n [required]=\"Required ? 'required' : null\"\r\n [noValidate]=\"!Validation\"\r\n [readonly]=\"Readonly\"\r\n [forceInvalid]=\"ForcedError\"\r\n [label]=\"SelectLabel\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('Select' | localize : lc) + '...')) : Placeholder\"\r\n [placeHolderValue]=\"PlaceholderValue\"\r\n [submitted]=\"Form?.submitted\"\r\n [emptyFieldValue]=\"Required || Placeholder || SelectLabel ? EmptyFieldValue : ''\"\r\n [(ngModel)]=\"Model\"\r\n [showValidationSymbol]=\"ShowValidationSymbol\"\r\n name=\"{{GeneratedName}}\"\r\n (inputChange)=\"Model = $event == EmptyFieldValue ? (Required? PlaceholderValue : '') : $event; changed();\"\r\n #validationControl=\"ngModel\">\r\n </val-select>\r\n\r\n <!-- Select vera e propria per quando arrivano i dati -->\r\n <val-select *ngIf=\"BoundSource && BoundSource.length > 0\"\r\n [required]=\"Required ? 'required' : null\"\r\n [noValidate]=\"!Validation\"\r\n [readonly]=\"Readonly\"\r\n [forceInvalid]=\"ForcedError\"\r\n [label]=\"SelectLabel\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n [showValidationSymbol]=\"ShowValidationSymbol\"\r\n [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('Select' | localize : lc) + '...')) : Placeholder\"\r\n [placeHolderValue]=\"PlaceholderValue\"\r\n [submitted]=\"Form?.submitted\"\r\n [emptyFieldValue]=\"Required || Placeholder || SelectLabel ? EmptyFieldValue : ''\"\r\n [(ngModel)]=\"Model\"\r\n name=\"{{GeneratedName}}\"\r\n (inputChange)=\"Model = $event == EmptyFieldValue ? (Required? PlaceholderValue : '') : $event; changed();\"\r\n #validationControl=\"ngModel\">\r\n <option *ngFor=\"let obj of BoundSource\" [value]=\"obj.id\">{{obj.description}}</option>\r\n </val-select>\r\n</ng-template>", components: [{ type: ValidationSelectComponent, selector: "val-select", inputs: ["emptyFieldValue", "placeHolderValue", "emptyValue", "showValidationSymbol", "label"], outputs: ["onBlur"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "localize": i1.LocalizePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2857
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormSelectComponent, decorators: [{
|
|
2858
|
+
type: Component,
|
|
2859
|
+
args: [{ selector: "form-select", providers: [{ provide: LocalizationService, useClass: FormSelectComponentLoc }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && BoundSource\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n\r\n <!-- Select vuota per quando non ho Sorgenti dati da cui selezionare. Uguale identica alla piena ma senza option\r\n Purtroppo devono essere due componenti distinti perch\u00E9 una select una volta creata non riesce pi\u00F9 ad adattarsi ai cambi di options -->\r\n <val-select *ngIf=\"!BoundSource || BoundSource.length == 0\"\r\n [required]=\"Required ? 'required' : null\"\r\n [noValidate]=\"!Validation\"\r\n [readonly]=\"Readonly\"\r\n [forceInvalid]=\"ForcedError\"\r\n [label]=\"SelectLabel\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('Select' | localize : lc) + '...')) : Placeholder\"\r\n [placeHolderValue]=\"PlaceholderValue\"\r\n [submitted]=\"Form?.submitted\"\r\n [emptyFieldValue]=\"Required || Placeholder || SelectLabel ? EmptyFieldValue : ''\"\r\n [(ngModel)]=\"Model\"\r\n [showValidationSymbol]=\"ShowValidationSymbol\"\r\n name=\"{{GeneratedName}}\"\r\n (inputChange)=\"Model = $event == EmptyFieldValue ? (Required? PlaceholderValue : '') : $event; changed();\"\r\n #validationControl=\"ngModel\">\r\n </val-select>\r\n\r\n <!-- Select vera e propria per quando arrivano i dati -->\r\n <val-select *ngIf=\"BoundSource && BoundSource.length > 0\"\r\n [required]=\"Required ? 'required' : null\"\r\n [noValidate]=\"!Validation\"\r\n [readonly]=\"Readonly\"\r\n [forceInvalid]=\"ForcedError\"\r\n [label]=\"SelectLabel\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n [showValidationSymbol]=\"ShowValidationSymbol\"\r\n [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('Select' | localize : lc) + '...')) : Placeholder\"\r\n [placeHolderValue]=\"PlaceholderValue\"\r\n [submitted]=\"Form?.submitted\"\r\n [emptyFieldValue]=\"Required || Placeholder || SelectLabel ? EmptyFieldValue : ''\"\r\n [(ngModel)]=\"Model\"\r\n name=\"{{GeneratedName}}\"\r\n (inputChange)=\"Model = $event == EmptyFieldValue ? (Required? PlaceholderValue : '') : $event; changed();\"\r\n #validationControl=\"ngModel\">\r\n <option *ngFor=\"let obj of BoundSource\" [value]=\"obj.id\">{{obj.description}}</option>\r\n </val-select>\r\n</ng-template>" }]
|
|
2860
|
+
}], ctorParameters: function () {
|
|
2861
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i2$1.NgControl, decorators: [{
|
|
2862
|
+
type: Optional
|
|
2863
|
+
}, {
|
|
2864
|
+
type: Self
|
|
2865
|
+
}] }, { type: Array, decorators: [{
|
|
2866
|
+
type: Optional
|
|
2867
|
+
}, {
|
|
2868
|
+
type: Inject,
|
|
2869
|
+
args: [NG_VALIDATORS]
|
|
2870
|
+
}] }, { type: i2$4.AccessControlService, decorators: [{
|
|
2871
|
+
type: Optional
|
|
2872
|
+
}] }, { type: i2$4.ComponentContext, decorators: [{
|
|
2873
|
+
type: Optional
|
|
2874
|
+
}] }, { type: undefined, decorators: [{
|
|
2875
|
+
type: Optional
|
|
2876
|
+
}, {
|
|
2877
|
+
type: Inject,
|
|
2878
|
+
args: [ACO_CUSTOMKEY]
|
|
2879
|
+
}] }];
|
|
2880
|
+
}, propDecorators: { SelectLabel: [{
|
|
2881
|
+
type: Input
|
|
2882
|
+
}], PlaceholderValue: [{
|
|
2883
|
+
type: Input
|
|
2884
|
+
}], RequiredPlaceholder: [{
|
|
2885
|
+
type: Input
|
|
2886
|
+
}], EmptyFieldValue: [{
|
|
2887
|
+
type: Input
|
|
2888
|
+
}], ShowValidationSymbol: [{
|
|
2889
|
+
type: Input
|
|
2890
|
+
}] } });
|
|
2891
|
+
|
|
2892
|
+
/**
|
|
2893
|
+
* Classe di localizzazione per il componente **FormMultiSelectComponent**
|
|
2894
|
+
*/
|
|
2895
|
+
class FormMultiSelectComponentLoc extends LocalizationService {
|
|
2896
|
+
/**
|
|
2897
|
+
* @ignore
|
|
2898
|
+
*/
|
|
2899
|
+
constructor(LOC_LOCALE) {
|
|
2900
|
+
super(LOC_LOCALE !== null && LOC_LOCALE !== void 0 ? LOC_LOCALE : 'it-IT');
|
|
2901
|
+
super.set("en->it", "Select everything", ["Seleziona tutto"]);
|
|
2902
|
+
super.set("en->it", "Deselect everything", ["Deseleziona tutto"]);
|
|
2903
|
+
super.set("en->it", "Select one or more values...", ["Seleziona uno o più valori..."]);
|
|
2904
|
+
}
|
|
2905
|
+
}
|
|
2906
|
+
FormMultiSelectComponentLoc.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormMultiSelectComponentLoc, deps: [{ token: FAV_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2907
|
+
FormMultiSelectComponentLoc.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormMultiSelectComponentLoc });
|
|
2908
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormMultiSelectComponentLoc, decorators: [{
|
|
2909
|
+
type: Injectable
|
|
2910
|
+
}], ctorParameters: function () {
|
|
2911
|
+
return [{ type: undefined, decorators: [{
|
|
2912
|
+
type: Optional
|
|
2913
|
+
}, {
|
|
2914
|
+
type: Inject,
|
|
2915
|
+
args: [FAV_LOCALE]
|
|
2916
|
+
}] }];
|
|
2917
|
+
} });
|
|
2918
|
+
|
|
2919
|
+
/**
|
|
2920
|
+
* Componente che permette di effettuare una selezione multipla fra gli oggetti passati nell'Input **Source**
|
|
2921
|
+
*
|
|
2922
|
+
* N.B: Al contrario degli altri componenti form-* questo viene tenuto con **changeDetection: ChangeDetectionStrategy.Default** in quanto il componente
|
|
2923
|
+
* utilizzato internamente (angular2-multiselect) non è stato assolutamente pensato per essere usato con **ChangeDetectionStrategy.OnPush**
|
|
2924
|
+
*/
|
|
2925
|
+
class FormMultiSelectComponent extends BaseFormControl {
|
|
2926
|
+
/**
|
|
2927
|
+
* Costruttore
|
|
2928
|
+
*
|
|
2929
|
+
* @ignore
|
|
2930
|
+
*/
|
|
2931
|
+
constructor(cdr, lc, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY) {
|
|
2932
|
+
super(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY);
|
|
2933
|
+
this.lc = lc;
|
|
2934
|
+
/**
|
|
2935
|
+
* Modello temporaneo **NON** compatibile in maniera diretta con il componente **angular2-multiselect** usato internamente
|
|
2936
|
+
*
|
|
2937
|
+
* Serve da appoggio per effettuare un re-bind qualora la sorgente cambiasse e qualora **RebindModelAfterSource** fosse true
|
|
2938
|
+
*/
|
|
2939
|
+
this.TmpModel = [];
|
|
2940
|
+
/**
|
|
2941
|
+
* Indica se la prossima modifica alla Source deve anche effettuare un re-bind del modello. Serve se la **BoundSource** passa da non avere oggetti ad averne
|
|
2942
|
+
*/
|
|
2943
|
+
this.RebindModelAfterSource = false;
|
|
2944
|
+
/**
|
|
2945
|
+
* Permette di specificare il testo della Label flottante material-style
|
|
2946
|
+
*/
|
|
2947
|
+
this.SelectLabel = "";
|
|
2948
|
+
/**
|
|
2949
|
+
* Permette al componente di gestire come modello non una lista di chiavi, ma una lista di KeyValue
|
|
2950
|
+
*/
|
|
2951
|
+
this.UseKeyValues = false;
|
|
2952
|
+
/**
|
|
2953
|
+
* Impostazioni del componente interno **angular2-multiselect**
|
|
2954
|
+
*/
|
|
2955
|
+
this.Settings = null;
|
|
2956
|
+
// Default dei settings per evitare che siano mai nulli, altrimenti il cazzo di CuppaLab salta in araia che è veramente una bellezza
|
|
2957
|
+
this.evaluateSettings(false);
|
|
2958
|
+
}
|
|
2959
|
+
/**
|
|
2960
|
+
* @ignore
|
|
2961
|
+
*/
|
|
2962
|
+
ngOnChanges(changes) {
|
|
2963
|
+
var _a, _b;
|
|
2964
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
2965
|
+
const newSource = changes["Source"];
|
|
2966
|
+
if (newSource) {
|
|
2967
|
+
this.tryBindSourceDisplay();
|
|
2968
|
+
if (this.RebindModelAfterSource) {
|
|
2969
|
+
this.writeValue(this.TmpModel);
|
|
2970
|
+
this.RebindModelAfterSource = false;
|
|
2971
|
+
}
|
|
2972
|
+
}
|
|
2973
|
+
const readonly = changes["Readonly"];
|
|
2974
|
+
this.evaluateSettings(readonly ? (_a = readonly.currentValue) !== null && _a !== void 0 ? _a : false : (_b = this.Readonly) !== null && _b !== void 0 ? _b : false);
|
|
2975
|
+
});
|
|
2976
|
+
}
|
|
2977
|
+
/**
|
|
2978
|
+
* Scrive i nuovi settings per il componente
|
|
2979
|
+
*
|
|
2980
|
+
* @param {boolean} disabled Indica se il componente dev'essere disabilitato o meno
|
|
2981
|
+
*/
|
|
2982
|
+
evaluateSettings(disabled) {
|
|
2983
|
+
this.Settings = {
|
|
2984
|
+
selectAllText: this.lc.loc("Select everything"),
|
|
2985
|
+
unSelectAllText: this.lc.loc("Deselect everything"),
|
|
2986
|
+
text: this.SelectLabel || this.lc.loc("Select one or more values..."),
|
|
2987
|
+
enableCheckAll: true,
|
|
2988
|
+
disabled: disabled,
|
|
2989
|
+
labelKey: "description",
|
|
2990
|
+
tagToBody: false
|
|
2991
|
+
};
|
|
2992
|
+
}
|
|
2993
|
+
/**
|
|
2994
|
+
* @ignore
|
|
2995
|
+
*/
|
|
2996
|
+
onNotNullValueSet() { }
|
|
2997
|
+
/**
|
|
2998
|
+
* Indica se il comopnente in questione è in grado di gestire ngControl nulli.
|
|
2999
|
+
* In questo componente è normale che sia così quindi restituisce semplicemente **true**
|
|
3000
|
+
*
|
|
3001
|
+
* @returns {boolean} **true** se gestisco ngControl nulli, **false** altrimenti
|
|
3002
|
+
*/
|
|
3003
|
+
handleNullNgControl() {
|
|
3004
|
+
return true;
|
|
3005
|
+
}
|
|
3006
|
+
/**
|
|
3007
|
+
* @ignore Override per gestire input in ingresso
|
|
3008
|
+
*/
|
|
3009
|
+
writeValue(obj) {
|
|
3010
|
+
this.TmpModel = obj;
|
|
3011
|
+
let toPass = [];
|
|
3012
|
+
//Qui arrivano solo gli id, o {id: x, description: y} in caso sono in UseKeyValues,
|
|
3013
|
+
//devo tirare fuori gli oggetti relativi e piazzarli come lista per il Model
|
|
3014
|
+
if (obj && obj.length > 0) {
|
|
3015
|
+
obj.forEach(t => {
|
|
3016
|
+
let item = this.BoundSource.find(o => o.id == (this.UseKeyValues ? t.id : t));
|
|
3017
|
+
if (item)
|
|
3018
|
+
toPass.push(JSON.parse(JSON.stringify(item)));
|
|
3019
|
+
else if (!this.BoundSource || this.BoundSource.length == 0)
|
|
3020
|
+
this.RebindModelAfterSource = true;
|
|
3021
|
+
});
|
|
3022
|
+
}
|
|
3023
|
+
super.writeValue(toPass);
|
|
3024
|
+
}
|
|
3025
|
+
/**
|
|
3026
|
+
* @ignore Override per gestire input in uscita
|
|
3027
|
+
*/
|
|
3028
|
+
changed() {
|
|
3029
|
+
let toEmit = null;
|
|
3030
|
+
if (!this.UseKeyValues)
|
|
3031
|
+
toEmit = this.Model.map(m => m.id);
|
|
3032
|
+
else
|
|
3033
|
+
toEmit = this.Model.map(m => ({ id: m.id, description: m.itemName }));
|
|
3034
|
+
super.changed(toEmit);
|
|
3035
|
+
}
|
|
3036
|
+
}
|
|
3037
|
+
FormMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormMultiSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i2$1.NgControl, optional: true, self: true }, { token: NG_VALIDATORS, optional: true }, { token: i2$4.AccessControlService, optional: true }, { token: i2$4.ComponentContext, optional: true }, { token: ACO_CUSTOMKEY, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
3038
|
+
FormMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormMultiSelectComponent, selector: "form-multiselect", inputs: { SelectLabel: "SelectLabel", UseKeyValues: "UseKeyValues" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && BoundSource\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n <div [class.ms-placeholder]=\"!Model || Model.length == 0\">\r\n <angular2-multiselect #validationControl=\"ngModel\" type=\"text\"\r\n [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\"\r\n [settings]=\"Settings\" [data]=\"BoundSource\"\r\n (onSelect)=\"changed();\" \r\n (onDeSelect)=\"changed();\" \r\n (onSelectAll)=\"changed();\"\r\n (onDeSelectAll)=\"changed();\" \r\n (onDeSelectAll)=\"Model = []; changed();\">\r\n </angular2-multiselect>\r\n </div>\r\n</ng-template>", styles: [".c-btn{background:#fff;border:1px solid #ccc;color:#333}.selected-list .c-list .c-token{background:#415269}.selected-list .c-list .c-token .c-label{color:#fff}.selected-list .c-list .c-token .c-remove svg{fill:#fff}.selected-list .c-angle-down svg,.selected-list .c-angle-up svg{fill:#333}.dropdown-list ul li:hover{background:#f5f5f5}.arrow-up,.arrow-down{border-bottom:15px solid #fff}.arrow-2{border-bottom:15px solid #ccc}.list-area{border:1px solid #ccc;background:#fff;box-shadow:0 1px 5px #959595}.select-all,.list-filter{border-bottom:1px solid #ccc}.list-filter .c-search svg{fill:#888}.list-filter .c-clear svg{fill:#888}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:#415269;background-color:#f2f2f2}.pure-checkbox input[type=checkbox]+label{color:#000}.pure-checkbox input[type=checkbox]+label:before{color:#415269;border:1px solid #415269}.pure-checkbox input[type=checkbox]+label:after{background-color:#415269}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{border-color:#fff}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=checkbox]:checked+label:before{background:#415269}.single-select-mode .pure-checkbox input[type=checkbox]:focus+label:before,.single-select-mode .pure-checkbox input[type=checkbox]:hover+label:before{border-color:#415269;background-color:#f2f2f2}.single-select-mode .pure-checkbox input[type=checkbox]+label{color:#000}.single-select-mode .pure-checkbox input[type=checkbox]+label:before{color:transparent!important;border:0px solid #415269}.single-select-mode .pure-checkbox input[type=checkbox]+label:after{background-color:transparent!important}.single-select-mode .pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.single-select-mode .pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.single-select-mode .pure-checkbox input[type=checkbox]+label:after{border-color:#415269}.single-select-mode .pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.single-select-mode .pure-checkbox input[type=checkbox]:checked+label:before{background:none!important}.selected-item{background:#e9f4ff}.btn-iceblue{background:#415269;border:1px solid #ccc;color:#fff}.cuppa-dropdown{margin-top:2px;min-width:200px}.cuppa-dropdown .c-btn{min-height:34px}.cuppa-dropdown .c-angle-down,.cuppa-dropdown .c-angle-up{margin-top:-2px}.selected-list .c-list{width:auto!important;padding-right:35px!important;margin-top:-2px!important}.selected-list .c-list .c-token{padding:3px 22px 3px 8px!important}.ms-placeholder .cuppa-dropdown .selected-list>div>span{color:#aaa}\n"], components: [{ type: i4$3.AngularMultiSelect, selector: "angular2-multiselect", inputs: ["settings", "data", "loading"], outputs: ["onSelect", "onDeSelect", "onSelectAll", "onDeSelectAll", "onOpen", "onClose", "onScrollToEnd", "onFilterSelectAll", "onFilterDeSelectAll", "onAddFilterNewItem", "onGroupSelect", "onGroupDeSelect"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], viewProviders: [{ provide: LocalizationService, useClass: FormMultiSelectComponentLoc }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
|
3039
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormMultiSelectComponent, decorators: [{
|
|
3040
|
+
type: Component,
|
|
3041
|
+
args: [{ selector: "form-multiselect", viewProviders: [{ provide: LocalizationService, useClass: FormMultiSelectComponentLoc }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && BoundSource\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n <div [class.ms-placeholder]=\"!Model || Model.length == 0\">\r\n <angular2-multiselect #validationControl=\"ngModel\" type=\"text\"\r\n [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\"\r\n [settings]=\"Settings\" [data]=\"BoundSource\"\r\n (onSelect)=\"changed();\" \r\n (onDeSelect)=\"changed();\" \r\n (onSelectAll)=\"changed();\"\r\n (onDeSelectAll)=\"changed();\" \r\n (onDeSelectAll)=\"Model = []; changed();\">\r\n </angular2-multiselect>\r\n </div>\r\n</ng-template>", styles: [".c-btn{background:#fff;border:1px solid #ccc;color:#333}.selected-list .c-list .c-token{background:#415269}.selected-list .c-list .c-token .c-label{color:#fff}.selected-list .c-list .c-token .c-remove svg{fill:#fff}.selected-list .c-angle-down svg,.selected-list .c-angle-up svg{fill:#333}.dropdown-list ul li:hover{background:#f5f5f5}.arrow-up,.arrow-down{border-bottom:15px solid #fff}.arrow-2{border-bottom:15px solid #ccc}.list-area{border:1px solid #ccc;background:#fff;box-shadow:0 1px 5px #959595}.select-all,.list-filter{border-bottom:1px solid #ccc}.list-filter .c-search svg{fill:#888}.list-filter .c-clear svg{fill:#888}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:#415269;background-color:#f2f2f2}.pure-checkbox input[type=checkbox]+label{color:#000}.pure-checkbox input[type=checkbox]+label:before{color:#415269;border:1px solid #415269}.pure-checkbox input[type=checkbox]+label:after{background-color:#415269}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{border-color:#fff}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=checkbox]:checked+label:before{background:#415269}.single-select-mode .pure-checkbox input[type=checkbox]:focus+label:before,.single-select-mode .pure-checkbox input[type=checkbox]:hover+label:before{border-color:#415269;background-color:#f2f2f2}.single-select-mode .pure-checkbox input[type=checkbox]+label{color:#000}.single-select-mode .pure-checkbox input[type=checkbox]+label:before{color:transparent!important;border:0px solid #415269}.single-select-mode .pure-checkbox input[type=checkbox]+label:after{background-color:transparent!important}.single-select-mode .pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.single-select-mode .pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.single-select-mode .pure-checkbox input[type=checkbox]+label:after{border-color:#415269}.single-select-mode .pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.single-select-mode .pure-checkbox input[type=checkbox]:checked+label:before{background:none!important}.selected-item{background:#e9f4ff}.btn-iceblue{background:#415269;border:1px solid #ccc;color:#fff}.cuppa-dropdown{margin-top:2px;min-width:200px}.cuppa-dropdown .c-btn{min-height:34px}.cuppa-dropdown .c-angle-down,.cuppa-dropdown .c-angle-up{margin-top:-2px}.selected-list .c-list{width:auto!important;padding-right:35px!important;margin-top:-2px!important}.selected-list .c-list .c-token{padding:3px 22px 3px 8px!important}.ms-placeholder .cuppa-dropdown .selected-list>div>span{color:#aaa}\n"] }]
|
|
3042
|
+
}], ctorParameters: function () {
|
|
3043
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i2$1.NgControl, decorators: [{
|
|
3044
|
+
type: Optional
|
|
3045
|
+
}, {
|
|
3046
|
+
type: Self
|
|
3047
|
+
}] }, { type: Array, decorators: [{
|
|
3048
|
+
type: Optional
|
|
3049
|
+
}, {
|
|
3050
|
+
type: Inject,
|
|
3051
|
+
args: [NG_VALIDATORS]
|
|
3052
|
+
}] }, { type: i2$4.AccessControlService, decorators: [{
|
|
3053
|
+
type: Optional
|
|
3054
|
+
}] }, { type: i2$4.ComponentContext, decorators: [{
|
|
3055
|
+
type: Optional
|
|
3056
|
+
}] }, { type: undefined, decorators: [{
|
|
3057
|
+
type: Optional
|
|
3058
|
+
}, {
|
|
3059
|
+
type: Inject,
|
|
3060
|
+
args: [ACO_CUSTOMKEY]
|
|
3061
|
+
}] }];
|
|
3062
|
+
}, propDecorators: { SelectLabel: [{
|
|
3063
|
+
type: Input
|
|
3064
|
+
}], UseKeyValues: [{
|
|
3065
|
+
type: Input
|
|
3066
|
+
}] } });
|
|
3067
|
+
|
|
3068
|
+
// Angular
|
|
3069
|
+
/**
|
|
3070
|
+
* Componente che presenta una casella di testo tipicamente utilizzata per scrivere delle note o del log breve
|
|
3071
|
+
*/
|
|
3072
|
+
class FormTextareaComponent extends BaseFormControl {
|
|
3073
|
+
/**
|
|
3074
|
+
* Costruttore
|
|
3075
|
+
*
|
|
3076
|
+
* @ignore
|
|
3077
|
+
*/
|
|
3078
|
+
constructor(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY) {
|
|
3079
|
+
super(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY);
|
|
3080
|
+
}
|
|
3081
|
+
/**
|
|
3082
|
+
* @ignore
|
|
3083
|
+
*/
|
|
3084
|
+
onNotNullValueSet() { }
|
|
3085
|
+
}
|
|
3086
|
+
FormTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormTextareaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$1.NgControl, optional: true, self: true }, { token: NG_VALIDATORS, optional: true }, { token: i2$4.AccessControlService, optional: true }, { token: i2$4.ComponentContext, optional: true }, { token: ACO_CUSTOMKEY, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
3087
|
+
FormTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormTextareaComponent, selector: "form-textarea", inputs: { Rows: "Rows" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <val-textarea [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [forceInvalid]=\"ForcedError\"\r\n [rows]=\"Rows\"\r\n [readonly]=\"Readonly\"\r\n [class]=\"Readonly ? 'app-bg-lightgrey app-no-resize' : 'app-no-resize'\"\r\n [(ngModel)]=\"Model\"\r\n name=\"{{GeneratedName}}\"\r\n autocomplete=\"off\"\r\n [placeholder]=\"Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"changed();\">\r\n </val-textarea>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>", components: [{ type: ValidationTextAreaComponent, selector: "val-textarea", inputs: ["rows"] }], directives: [{ type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3088
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormTextareaComponent, decorators: [{
|
|
3089
|
+
type: Component,
|
|
3090
|
+
args: [{ selector: "form-textarea", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <val-textarea [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [forceInvalid]=\"ForcedError\"\r\n [rows]=\"Rows\"\r\n [readonly]=\"Readonly\"\r\n [class]=\"Readonly ? 'app-bg-lightgrey app-no-resize' : 'app-no-resize'\"\r\n [(ngModel)]=\"Model\"\r\n name=\"{{GeneratedName}}\"\r\n autocomplete=\"off\"\r\n [placeholder]=\"Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"changed();\">\r\n </val-textarea>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>" }]
|
|
3091
|
+
}], ctorParameters: function () {
|
|
3092
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i2$1.NgControl, decorators: [{
|
|
3093
|
+
type: Optional
|
|
3094
|
+
}, {
|
|
3095
|
+
type: Self
|
|
3096
|
+
}] }, { type: Array, decorators: [{
|
|
3097
|
+
type: Optional
|
|
3098
|
+
}, {
|
|
3099
|
+
type: Inject,
|
|
3100
|
+
args: [NG_VALIDATORS]
|
|
3101
|
+
}] }, { type: i2$4.AccessControlService, decorators: [{
|
|
3102
|
+
type: Optional
|
|
3103
|
+
}] }, { type: i2$4.ComponentContext, decorators: [{
|
|
3104
|
+
type: Optional
|
|
3105
|
+
}] }, { type: undefined, decorators: [{
|
|
3106
|
+
type: Optional
|
|
3107
|
+
}, {
|
|
3108
|
+
type: Inject,
|
|
3109
|
+
args: [ACO_CUSTOMKEY]
|
|
3110
|
+
}] }];
|
|
3111
|
+
}, propDecorators: { Rows: [{
|
|
3112
|
+
type: Input
|
|
3113
|
+
}] } });
|
|
3114
|
+
|
|
3115
|
+
/**
|
|
3116
|
+
* Classe di localizzazione per il componente **FormAutocompleteComponent**
|
|
3117
|
+
*/
|
|
3118
|
+
class FormAutocompleteComponentLoc extends LocalizationService {
|
|
3119
|
+
/**
|
|
3120
|
+
* @ignore
|
|
3121
|
+
*/
|
|
3122
|
+
constructor(LOC_LOCALE) {
|
|
3123
|
+
super(LOC_LOCALE !== null && LOC_LOCALE !== void 0 ? LOC_LOCALE : 'it-IT');
|
|
3124
|
+
}
|
|
3125
|
+
}
|
|
3126
|
+
FormAutocompleteComponentLoc.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormAutocompleteComponentLoc, deps: [{ token: FAV_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3127
|
+
FormAutocompleteComponentLoc.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormAutocompleteComponentLoc });
|
|
3128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormAutocompleteComponentLoc, decorators: [{
|
|
3129
|
+
type: Injectable
|
|
3130
|
+
}], ctorParameters: function () {
|
|
3131
|
+
return [{ type: undefined, decorators: [{
|
|
3132
|
+
type: Optional
|
|
3133
|
+
}, {
|
|
3134
|
+
type: Inject,
|
|
3135
|
+
args: [FAV_LOCALE]
|
|
3136
|
+
}] }];
|
|
3137
|
+
} });
|
|
3138
|
+
|
|
3139
|
+
// Angular
|
|
3140
|
+
/**
|
|
3141
|
+
* Componente di input che si auto-completa in base al valore attuale
|
|
3142
|
+
*/
|
|
3143
|
+
class FormAutocompleteComponent extends BaseFormControl {
|
|
3144
|
+
/**
|
|
3145
|
+
* Costruttore
|
|
3146
|
+
*
|
|
3147
|
+
* @ignore
|
|
3148
|
+
*/
|
|
3149
|
+
constructor(cdr, lc, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY) {
|
|
3150
|
+
super(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY);
|
|
3151
|
+
this.lc = lc;
|
|
3152
|
+
/**
|
|
3153
|
+
* Permette di specificare il testo della Label flottante material-style
|
|
3154
|
+
*/
|
|
3155
|
+
this.SelectLabel = "";
|
|
3156
|
+
/**
|
|
3157
|
+
* Funzione di ricerca che verrà chiamata dal componente
|
|
3158
|
+
*/
|
|
3159
|
+
this.SearchFunction = null;
|
|
3160
|
+
/**
|
|
3161
|
+
* Numero minimo di caratteri con cui cercare
|
|
3162
|
+
*/
|
|
3163
|
+
this.MinChars = 3;
|
|
3164
|
+
/**
|
|
3165
|
+
* Override del placeholder per select requried
|
|
3166
|
+
*/
|
|
3167
|
+
this.RequiredPlaceholder = null;
|
|
3168
|
+
/**
|
|
3169
|
+
* Indica se i controlli devono essere effettuati tenendo conto del Case o meno. Vale solo qualora la **Source** fosse fornita
|
|
3170
|
+
*/
|
|
3171
|
+
this.CaseSensitive = false;
|
|
3172
|
+
/**
|
|
3173
|
+
* Indica se ignorare il prossimo evento writeValue che normalmente dovrebbe richiedere la nuova source. Serve per quando l'utente seleziona un elemento:
|
|
3174
|
+
* Subito dopo partirebbe un altro evento modelChange che ricaricherebbe nuovamente la source
|
|
3175
|
+
*/
|
|
3176
|
+
this.ignoreNextWriteValue = false;
|
|
3177
|
+
/**
|
|
3178
|
+
* Sorgente Bindata Filtrata in base al contenuto della casella di testo
|
|
3179
|
+
*/
|
|
3180
|
+
this.FilteredBoundSource = [];
|
|
3181
|
+
//******************** Funzione di throttling per non spammare richieste in caso di animazioni attivate
|
|
3182
|
+
//TODO: spostarla in un metodo di utilità (esfaenza/extensions)
|
|
3183
|
+
/** @ignore */
|
|
3184
|
+
this.executionTimers = {};
|
|
3185
|
+
}
|
|
3186
|
+
/**
|
|
3187
|
+
* @ignore
|
|
3188
|
+
*/
|
|
3189
|
+
writeValue(value) {
|
|
3190
|
+
if (!value)
|
|
3191
|
+
return;
|
|
3192
|
+
if (this.SearchFunction) {
|
|
3193
|
+
this.SearchFunction(value, true).subscribe(t => {
|
|
3194
|
+
this.Source = t;
|
|
3195
|
+
this.tryBindSourceDisplay();
|
|
3196
|
+
setTimeout(() => { this.finalizeValue(value); });
|
|
3197
|
+
});
|
|
3198
|
+
return;
|
|
3199
|
+
}
|
|
3200
|
+
this.finalizeValue(value);
|
|
3201
|
+
}
|
|
3202
|
+
/**
|
|
3203
|
+
* Dato un valore verifica se può restituire le informazioni trovate in **Source** con id uguale a **value** o se deve restituire il valore in se
|
|
3204
|
+
*
|
|
3205
|
+
* @param {any} value Valore scritto nell'input di testo
|
|
3206
|
+
*/
|
|
3207
|
+
finalizeValue(value) {
|
|
3208
|
+
var val = this.Source.find(t => t.id == value);
|
|
3209
|
+
this.propagateChange(val ? val.id : value);
|
|
3210
|
+
this.Model = val ? val.description : value;
|
|
3211
|
+
}
|
|
3212
|
+
/**
|
|
3213
|
+
* Evento di filtro della sorgente dati in base all'input utente
|
|
3214
|
+
*
|
|
3215
|
+
* @param {string} event Input utente
|
|
3216
|
+
*/
|
|
3217
|
+
filterSource(event) {
|
|
3218
|
+
if (this.ignoreNextWriteValue) {
|
|
3219
|
+
this.ignoreNextWriteValue = false;
|
|
3220
|
+
return;
|
|
3221
|
+
}
|
|
3222
|
+
// Quando filtro la source, se non devo ignorare l'evento devo comunque assicurarmi di impostare il valore selezionato a null
|
|
3223
|
+
super.changed("");
|
|
3224
|
+
if (!event && this.MinChars == 0 && !this.SearchFunction) {
|
|
3225
|
+
this.FilteredBoundSource = this.BoundSource;
|
|
3226
|
+
return;
|
|
3227
|
+
}
|
|
3228
|
+
if (!event || event.length < this.MinChars) {
|
|
3229
|
+
this.FilteredBoundSource = [];
|
|
3230
|
+
return;
|
|
3231
|
+
}
|
|
3232
|
+
if (!this.SearchFunction && (!this.Source || this.Source.length == 0))
|
|
3233
|
+
throw "Impossibile filtrare gli elementi senza una funzione di ricerca che restituisca una lista di { id: string, description: string }";
|
|
3234
|
+
if (this.SearchFunction) {
|
|
3235
|
+
this.throttla("filtersource", () => {
|
|
3236
|
+
this.SearchFunction(event, false).subscribe(t => {
|
|
3237
|
+
this.Source = t;
|
|
3238
|
+
this.tryBindSourceDisplay();
|
|
3239
|
+
// In questo caso è già filtrata dalla SearchFunction
|
|
3240
|
+
this.FilteredBoundSource = this.BoundSource;
|
|
3241
|
+
this.cdr.markForCheck();
|
|
3242
|
+
});
|
|
3243
|
+
}, 400);
|
|
3244
|
+
}
|
|
3245
|
+
else {
|
|
3246
|
+
this.throttla("filtersource", () => {
|
|
3247
|
+
// In questo caso devo filtrare io in memoria
|
|
3248
|
+
this.FilteredBoundSource = this.BoundSource.filter(t => (this.CaseSensitive && t.description.includes(event)) || (!this.CaseSensitive && t.description.toLowerCase().includes(event.toLowerCase())));
|
|
3249
|
+
this.cdr.markForCheck();
|
|
3250
|
+
}, 100);
|
|
3251
|
+
}
|
|
3252
|
+
}
|
|
3253
|
+
/**
|
|
3254
|
+
* @ignore
|
|
3255
|
+
*/
|
|
3256
|
+
ngOnChanges(changes) {
|
|
3257
|
+
var _a;
|
|
3258
|
+
let newSource = changes["Source"];
|
|
3259
|
+
if (newSource) {
|
|
3260
|
+
this.tryBindSourceDisplay();
|
|
3261
|
+
// Prima assegnazione se cambia la source sotto (quindi se viene bindata direttamente da HTML)
|
|
3262
|
+
if ((((_a = this.Model) === null || _a === void 0 ? void 0 : _a.length) || 0) >= this.MinChars && !this.SearchFunction)
|
|
3263
|
+
this.FilteredBoundSource = this.BoundSource;
|
|
3264
|
+
else
|
|
3265
|
+
this.FilteredBoundSource = [];
|
|
3266
|
+
this.cdr.markForCheck();
|
|
3267
|
+
}
|
|
3268
|
+
}
|
|
3269
|
+
/**
|
|
3270
|
+
* @ignore
|
|
3271
|
+
*
|
|
3272
|
+
* Override che marca anche il prossimo evento di filterSource da ignorare
|
|
3273
|
+
*/
|
|
3274
|
+
changed(forcedValue = null, markForCheck = false) {
|
|
3275
|
+
this.ignoreNextWriteValue = true;
|
|
3276
|
+
super.changed(forcedValue, markForCheck);
|
|
3277
|
+
}
|
|
3278
|
+
/**
|
|
3279
|
+
* @ignore
|
|
3280
|
+
*/
|
|
3281
|
+
onNotNullValueSet() { }
|
|
3282
|
+
/** @ignore */
|
|
3283
|
+
throttla(id, func, throttleTime) {
|
|
3284
|
+
//Se ho la funzione che vuole eseguire ripulisco quel timeout
|
|
3285
|
+
if (this.executionTimers[id])
|
|
3286
|
+
clearTimeout(this.executionTimers[id]);
|
|
3287
|
+
//Ricreo il timeout per eseguire quella funzione dopo throttleTime millisecondi
|
|
3288
|
+
this.executionTimers[id] = setTimeout(() => { func(); this.executionTimers[id] = null; }, throttleTime);
|
|
3289
|
+
}
|
|
3290
|
+
}
|
|
3291
|
+
FormAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i2$1.NgControl, optional: true, self: true }, { token: NG_VALIDATORS, optional: true }, { token: i2$4.AccessControlService, optional: true }, { token: i2$4.ComponentContext, optional: true }, { token: ACO_CUSTOMKEY, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
3292
|
+
FormAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormAutocompleteComponent, selector: "form-autocomplete", inputs: { SelectLabel: "SelectLabel", SearchFunction: "SearchFunction", MinChars: "MinChars", RequiredPlaceholder: "RequiredPlaceholder", CaseSensitive: "CaseSensitive" }, providers: [{ provide: LocalizationService, useClass: FormAutocompleteComponentLoc }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n <val-autocomplete [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [forceInvalid]=\"ForcedError\"\r\n [readonly]=\"Readonly\"\r\n [label]=\"SelectLabel\"\r\n type=\"text\"\r\n [(ngModel)]=\"Model\"\r\n name=\"{{GeneratedName}}\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"filterSource($event);\"\r\n (optionChange)=\"changed($event);\"\r\n [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('Select' | localize : lc) + '...')) : Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n [FilteredSource]=\"FilteredBoundSource\"\r\n >\r\n </val-autocomplete>\r\n</ng-template>", components: [{ type: ValidationAutocompleteComponent, selector: "val-autocomplete", inputs: ["FilteredSource", "value", "label"], outputs: ["optionChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "localize": i1.LocalizePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3293
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormAutocompleteComponent, decorators: [{
|
|
3294
|
+
type: Component,
|
|
3295
|
+
args: [{ selector: "form-autocomplete", providers: [{ provide: LocalizationService, useClass: FormAutocompleteComponentLoc }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}}\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n <val-autocomplete [noValidate]=\"!Validation\"\r\n [submitted]=\"Form?.submitted\"\r\n [forceInvalid]=\"ForcedError\"\r\n [readonly]=\"Readonly\"\r\n [label]=\"SelectLabel\"\r\n type=\"text\"\r\n [(ngModel)]=\"Model\"\r\n name=\"{{GeneratedName}}\"\r\n #validationControl=\"ngModel\"\r\n (inputChange)=\"filterSource($event);\"\r\n (optionChange)=\"changed($event);\"\r\n [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('Select' | localize : lc) + '...')) : Placeholder\"\r\n [validationFailed]=\"FailedValidationMessage\"\r\n [FilteredSource]=\"FilteredBoundSource\"\r\n >\r\n </val-autocomplete>\r\n</ng-template>" }]
|
|
3296
|
+
}], ctorParameters: function () {
|
|
3297
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i2$1.NgControl, decorators: [{
|
|
3298
|
+
type: Optional
|
|
3299
|
+
}, {
|
|
3300
|
+
type: Self
|
|
3301
|
+
}] }, { type: Array, decorators: [{
|
|
3302
|
+
type: Optional
|
|
3303
|
+
}, {
|
|
3304
|
+
type: Inject,
|
|
3305
|
+
args: [NG_VALIDATORS]
|
|
3306
|
+
}] }, { type: i2$4.AccessControlService, decorators: [{
|
|
3307
|
+
type: Optional
|
|
3308
|
+
}] }, { type: i2$4.ComponentContext, decorators: [{
|
|
3309
|
+
type: Optional
|
|
3310
|
+
}] }, { type: undefined, decorators: [{
|
|
3311
|
+
type: Optional
|
|
3312
|
+
}, {
|
|
3313
|
+
type: Inject,
|
|
3314
|
+
args: [ACO_CUSTOMKEY]
|
|
3315
|
+
}] }];
|
|
3316
|
+
}, propDecorators: { SelectLabel: [{
|
|
3317
|
+
type: Input
|
|
3318
|
+
}], SearchFunction: [{
|
|
3319
|
+
type: Input
|
|
3320
|
+
}], MinChars: [{
|
|
3321
|
+
type: Input
|
|
3322
|
+
}], RequiredPlaceholder: [{
|
|
3323
|
+
type: Input
|
|
3324
|
+
}], CaseSensitive: [{
|
|
3325
|
+
type: Input
|
|
3326
|
+
}] } });
|
|
3327
|
+
|
|
3328
|
+
// Angular
|
|
3329
|
+
/**
|
|
3330
|
+
* Componente che identifica la selezione di un orario
|
|
3331
|
+
*/
|
|
3332
|
+
class FormTimeComponent extends BaseFormControl {
|
|
3333
|
+
/**
|
|
3334
|
+
* @ignore
|
|
3335
|
+
*/
|
|
3336
|
+
constructor(cdr, dateAdapter, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY) {
|
|
3337
|
+
super(cdr, ngControl, _validators, ac, AppContext, ACO_CUSTOMKEY, true);
|
|
3338
|
+
this.dateAdapter = dateAdapter;
|
|
3339
|
+
/**
|
|
3340
|
+
* Mostra o meno gli spinner dove cliccare per aumentare/diminuire le componenti dell'orologio (ore, minuti e secondi)
|
|
3341
|
+
*/
|
|
3342
|
+
this.ShowSpinners = false;
|
|
3343
|
+
/**
|
|
3344
|
+
* Imposta lo step (minimo avanzamento) per la cella "ore"
|
|
3345
|
+
*/
|
|
3346
|
+
this.StepHour = 1;
|
|
3347
|
+
/**
|
|
3348
|
+
* Imposta lo step (minimo avanzamento) per la cella "minuti"
|
|
3349
|
+
*/
|
|
3350
|
+
this.StepMinute = 1;
|
|
3351
|
+
/**
|
|
3352
|
+
* Imposta lo step (minimo avanzamento) per la cella "secondi"
|
|
3353
|
+
*/
|
|
3354
|
+
this.StepSecond = 5;
|
|
3355
|
+
/**
|
|
3356
|
+
* Indica se mostrare i secondi o meno
|
|
3357
|
+
*/
|
|
3358
|
+
this.ShowSeconds = false;
|
|
3359
|
+
/**
|
|
3360
|
+
* Indica il formato da utilizzare sia in Input che in Output
|
|
3361
|
+
*
|
|
3362
|
+
* 1. Se date vengono utilizzate le Date di Javascript
|
|
3363
|
+
*
|
|
3364
|
+
* 2. Se timestring vengono utilizzate stringhe del tipo '00:00:00'
|
|
3365
|
+
*
|
|
3366
|
+
* 3. Se dayjs viene utilizzato, appunto, dayjs
|
|
3367
|
+
*/
|
|
3368
|
+
this.InOutFormat = 'timestring';
|
|
3369
|
+
}
|
|
3370
|
+
/**
|
|
3371
|
+
* @ignore Override per gestire input in ingresso
|
|
3372
|
+
*/
|
|
3373
|
+
writeValue(obj) {
|
|
3374
|
+
const [hours, minutes, seconds] = (obj || "0:0:0").split(":");
|
|
3375
|
+
//Qualsiasi cosa mi arrivi devo ricondurla a un dayjs
|
|
3376
|
+
switch (this.InOutFormat) {
|
|
3377
|
+
case 'date':
|
|
3378
|
+
obj = dayjs(obj);
|
|
3379
|
+
break;
|
|
3380
|
+
case 'timestring':
|
|
3381
|
+
obj = dayjs().hour(hours !== null && hours !== void 0 ? hours : 0).minute(minutes !== null && minutes !== void 0 ? minutes : 0).second(seconds !== null && seconds !== void 0 ? seconds : 0);
|
|
3382
|
+
break;
|
|
3383
|
+
case 'dayjs':
|
|
3384
|
+
obj = obj;
|
|
3385
|
+
break;
|
|
3386
|
+
}
|
|
3387
|
+
super.writeValue(obj);
|
|
3388
|
+
}
|
|
3389
|
+
/**
|
|
3390
|
+
* @ignore Override per gestire input in uscita
|
|
3391
|
+
*/
|
|
3392
|
+
changed() {
|
|
3393
|
+
var toEmit = this.dateAdapter.clone(this.Model);
|
|
3394
|
+
switch (this.InOutFormat) {
|
|
3395
|
+
case 'date':
|
|
3396
|
+
toEmit = toEmit.toDate();
|
|
3397
|
+
break;
|
|
3398
|
+
case 'timestring':
|
|
3399
|
+
toEmit = toEmit.format("HH:mm" + (this.ShowSeconds ? ":ss" : ""));
|
|
3400
|
+
break;
|
|
3401
|
+
case 'dayjs':
|
|
3402
|
+
toEmit = toEmit;
|
|
3403
|
+
break;
|
|
3404
|
+
}
|
|
3405
|
+
super.changed(toEmit);
|
|
3406
|
+
}
|
|
3407
|
+
/**
|
|
3408
|
+
* @ignore
|
|
3409
|
+
*/
|
|
3410
|
+
onNotNullValueSet() { }
|
|
3411
|
+
}
|
|
3412
|
+
FormTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormTimeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$3.NgxMatDateAdapter }, { token: i2$1.NgControl, optional: true, self: true }, { token: NG_VALIDATORS, host: true, optional: true }, { token: i2$4.AccessControlService }, { token: i2$4.ComponentContext, optional: true }, { token: ACO_CUSTOMKEY, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
3413
|
+
FormTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FormTimeComponent, selector: "form-time", inputs: { ShowSpinners: "ShowSpinners", StepHour: "StepHour", StepMinute: "StepMinute", StepSecond: "StepSecond", ShowSeconds: "ShowSeconds", InOutFormat: "InOutFormat" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}} m-t-5\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n\r\n <ngx-mat-timepicker name=\"val-time\" #elementRef #baseInput=\"ngModel\" [(ngModel)]=\"Model\" [disabled]=\"Readonly\"\r\n [showSpinners]=\"ShowSpinners\" [stepHour]=\"StepHour\" [stepMinute]=\"StepMinute\" [stepSecond]=\"StepSecond\"\r\n [showSeconds]=\"ShowSeconds\" (ngModelChange)=\"changed()\" #validationControl=\"ngModel\">\r\n </ngx-mat-timepicker>\r\n\r\n</ng-template>", components: [{ type: i2$3.NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["disabled", "showSpinners", "stepHour", "stepMinute", "stepSecond", "showSeconds", "disableMinute", "enableMeridian", "defaultTime", "color"], exportAs: ["ngxMatTimepicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3414
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormTimeComponent, decorators: [{
|
|
3415
|
+
type: Component,
|
|
3416
|
+
args: [{ selector: "form-time", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!FormLayout\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n <div class=\"col-md-{{InputColWidth}} m-t-5\">\r\n <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n </div>\r\n <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n\r\n <ngx-mat-timepicker name=\"val-time\" #elementRef #baseInput=\"ngModel\" [(ngModel)]=\"Model\" [disabled]=\"Readonly\"\r\n [showSpinners]=\"ShowSpinners\" [stepHour]=\"StepHour\" [stepMinute]=\"StepMinute\" [stepSecond]=\"StepSecond\"\r\n [showSeconds]=\"ShowSeconds\" (ngModelChange)=\"changed()\" #validationControl=\"ngModel\">\r\n </ngx-mat-timepicker>\r\n\r\n</ng-template>" }]
|
|
3417
|
+
}], ctorParameters: function () {
|
|
3418
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i2$3.NgxMatDateAdapter }, { type: i2$1.NgControl, decorators: [{
|
|
3419
|
+
type: Optional
|
|
3420
|
+
}, {
|
|
3421
|
+
type: Self
|
|
3422
|
+
}] }, { type: Array, decorators: [{
|
|
3423
|
+
type: Optional
|
|
3424
|
+
}, {
|
|
3425
|
+
type: Host
|
|
3426
|
+
}, {
|
|
3427
|
+
type: Inject,
|
|
3428
|
+
args: [NG_VALIDATORS]
|
|
3429
|
+
}] }, { type: i2$4.AccessControlService }, { type: i2$4.ComponentContext, decorators: [{
|
|
3430
|
+
type: Optional
|
|
3431
|
+
}] }, { type: undefined, decorators: [{
|
|
3432
|
+
type: Optional
|
|
3433
|
+
}, {
|
|
3434
|
+
type: Inject,
|
|
3435
|
+
args: [ACO_CUSTOMKEY]
|
|
3436
|
+
}] }];
|
|
3437
|
+
}, propDecorators: { ShowSpinners: [{
|
|
3438
|
+
type: Input
|
|
3439
|
+
}], StepHour: [{
|
|
3440
|
+
type: Input
|
|
3441
|
+
}], StepMinute: [{
|
|
3442
|
+
type: Input
|
|
3443
|
+
}], StepSecond: [{
|
|
3444
|
+
type: Input
|
|
3445
|
+
}], ShowSeconds: [{
|
|
3446
|
+
type: Input
|
|
3447
|
+
}], InOutFormat: [{
|
|
3448
|
+
type: Input
|
|
3449
|
+
}] } });
|
|
3450
|
+
|
|
3451
|
+
// Angular
|
|
3452
|
+
/**
|
|
3453
|
+
* Formato in display (modalità breve, senza ore, minuti e secondi) delle date per tutti i componenti che utilizzino input data.
|
|
3454
|
+
*
|
|
3455
|
+
* Da convenzione è sempre quello italiano quindi viene cablato
|
|
3456
|
+
*/
|
|
3457
|
+
const formats = {
|
|
3458
|
+
parse: { dateInput: 'DD/MM/YYYY' },
|
|
3459
|
+
display: {
|
|
3460
|
+
dateInput: 'DD/MM/YYYY',
|
|
3461
|
+
monthYearLabel: 'MM YYYY',
|
|
3462
|
+
dateA11yLabel: 'DD/MM/YYYY',
|
|
3463
|
+
monthYearA11yLabel: 'MM YYYY',
|
|
3464
|
+
}
|
|
3465
|
+
};
|
|
3466
|
+
/**
|
|
3467
|
+
* Formato in display (modalità lunga, con ore, minuti e secondi) delle date per tutti i componenti che utilizzino input data.
|
|
3468
|
+
*
|
|
3469
|
+
* Da convenzione è sempre quello italiano quindi viene cablato
|
|
3470
|
+
*/
|
|
3471
|
+
const formats_long = {
|
|
3472
|
+
parse: { dateInput: 'DD/MM/YYYY HH:mm:ss' },
|
|
3473
|
+
display: {
|
|
3474
|
+
dateInput: 'DD/MM/YYYY HH:mm:ss',
|
|
3475
|
+
monthYearLabel: 'MM YYYY',
|
|
3476
|
+
dateA11yLabel: 'DD/MM/YYYY HH:mm:ss',
|
|
3477
|
+
monthYearA11yLabel: 'MM YYYY',
|
|
3478
|
+
}
|
|
3479
|
+
};
|
|
3480
|
+
/**
|
|
3481
|
+
* Componenti Dichiarati ed esportati dalla libreria
|
|
3482
|
+
*/
|
|
3483
|
+
const COMPONENTS = [
|
|
3484
|
+
ValidationInputComponent,
|
|
3485
|
+
ValidationSelectComponent,
|
|
3486
|
+
ValidationDateComponent,
|
|
3487
|
+
CustomRequiredDirective,
|
|
3488
|
+
ValidationCurrencyComponent,
|
|
3489
|
+
ValidationTextAreaComponent,
|
|
3490
|
+
FormCheckboxComponent,
|
|
3491
|
+
FormDateComponent,
|
|
3492
|
+
FormEmptyComponent,
|
|
3493
|
+
FormInputComponent,
|
|
3494
|
+
FormSelectComponent,
|
|
3495
|
+
FormTextareaComponent,
|
|
3496
|
+
FormTemplateComponent,
|
|
3497
|
+
FormErrorComponent,
|
|
3498
|
+
FormInfoComponent,
|
|
3499
|
+
FormAdaptiveComponent,
|
|
3500
|
+
FormMultiSelectComponent,
|
|
3501
|
+
FormFileComponent,
|
|
3502
|
+
ValidationAutocompleteComponent,
|
|
3503
|
+
FormAutocompleteComponent,
|
|
3504
|
+
FormDateTimeComponent,
|
|
3505
|
+
ValidationDateTimeComponent,
|
|
3506
|
+
FormTimeComponent
|
|
3507
|
+
];
|
|
3508
|
+
/**
|
|
3509
|
+
* Moduli utilizzati solo dalla libreria
|
|
3510
|
+
*/
|
|
3511
|
+
const MODULES = [
|
|
3512
|
+
CommonModule,
|
|
3513
|
+
FormsModule,
|
|
3514
|
+
LocalizationModule,
|
|
3515
|
+
MatInputModule,
|
|
3516
|
+
MatDatepickerModule,
|
|
3517
|
+
MatDayjsDateModule,
|
|
3518
|
+
TooltipModule,
|
|
3519
|
+
CurrencyMaskModule,
|
|
3520
|
+
MatAutocompleteModule,
|
|
3521
|
+
NgxMatDatetimePickerModule,
|
|
3522
|
+
NgxMatTimepickerModule
|
|
3523
|
+
];
|
|
3524
|
+
/**
|
|
3525
|
+
* Moduli utilizzati dalla libreria e che devono essere esposti all'esterno
|
|
3526
|
+
*/
|
|
3527
|
+
const MODULES_TO_EXPORT = [
|
|
3528
|
+
AngularMultiSelectModule
|
|
3529
|
+
];
|
|
3530
|
+
class FormsAndValidationsModule {
|
|
3531
|
+
static forRoot(config) {
|
|
3532
|
+
return {
|
|
3533
|
+
ngModule: FormsAndValidationsModule,
|
|
3534
|
+
providers: [
|
|
3535
|
+
{ provide: FAV_LOCALE, useValue: (config === null || config === void 0 ? void 0 : config.locale) || 'it-IT' },
|
|
3536
|
+
{ provide: ACO_CUSTOMKEY, useValue: (config === null || config === void 0 ? void 0 : config.acocustom) || null },
|
|
3537
|
+
{ provide: MAT_DATE_LOCALE, useValue: 'it' },
|
|
3538
|
+
{ provide: MAT_DATE_FORMATS, useValue: formats },
|
|
3539
|
+
{ provide: NGX_MAT_DATE_FORMATS, useValue: formats_long },
|
|
3540
|
+
{ provide: NgxMatDateAdapter, useClass: NgxExpandedDayJsDateAdapter },
|
|
3541
|
+
]
|
|
3542
|
+
};
|
|
3543
|
+
}
|
|
3544
|
+
}
|
|
3545
|
+
FormsAndValidationsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormsAndValidationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3546
|
+
FormsAndValidationsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormsAndValidationsModule, declarations: [ValidationInputComponent,
|
|
3547
|
+
ValidationSelectComponent,
|
|
3548
|
+
ValidationDateComponent,
|
|
3549
|
+
CustomRequiredDirective,
|
|
3550
|
+
ValidationCurrencyComponent,
|
|
3551
|
+
ValidationTextAreaComponent,
|
|
3552
|
+
FormCheckboxComponent,
|
|
3553
|
+
FormDateComponent,
|
|
3554
|
+
FormEmptyComponent,
|
|
3555
|
+
FormInputComponent,
|
|
3556
|
+
FormSelectComponent,
|
|
3557
|
+
FormTextareaComponent,
|
|
3558
|
+
FormTemplateComponent,
|
|
3559
|
+
FormErrorComponent,
|
|
3560
|
+
FormInfoComponent,
|
|
3561
|
+
FormAdaptiveComponent,
|
|
3562
|
+
FormMultiSelectComponent,
|
|
3563
|
+
FormFileComponent,
|
|
3564
|
+
ValidationAutocompleteComponent,
|
|
3565
|
+
FormAutocompleteComponent,
|
|
3566
|
+
FormDateTimeComponent,
|
|
3567
|
+
ValidationDateTimeComponent,
|
|
3568
|
+
FormTimeComponent], imports: [CommonModule,
|
|
3569
|
+
FormsModule,
|
|
3570
|
+
LocalizationModule,
|
|
3571
|
+
MatInputModule,
|
|
3572
|
+
MatDatepickerModule,
|
|
3573
|
+
MatDayjsDateModule,
|
|
3574
|
+
TooltipModule,
|
|
3575
|
+
CurrencyMaskModule,
|
|
3576
|
+
MatAutocompleteModule,
|
|
3577
|
+
NgxMatDatetimePickerModule,
|
|
3578
|
+
NgxMatTimepickerModule, AngularMultiSelectModule], exports: [AngularMultiSelectModule, ValidationInputComponent,
|
|
3579
|
+
ValidationSelectComponent,
|
|
3580
|
+
ValidationDateComponent,
|
|
3581
|
+
CustomRequiredDirective,
|
|
3582
|
+
ValidationCurrencyComponent,
|
|
3583
|
+
ValidationTextAreaComponent,
|
|
3584
|
+
FormCheckboxComponent,
|
|
3585
|
+
FormDateComponent,
|
|
3586
|
+
FormEmptyComponent,
|
|
3587
|
+
FormInputComponent,
|
|
3588
|
+
FormSelectComponent,
|
|
3589
|
+
FormTextareaComponent,
|
|
3590
|
+
FormTemplateComponent,
|
|
3591
|
+
FormErrorComponent,
|
|
3592
|
+
FormInfoComponent,
|
|
3593
|
+
FormAdaptiveComponent,
|
|
3594
|
+
FormMultiSelectComponent,
|
|
3595
|
+
FormFileComponent,
|
|
3596
|
+
ValidationAutocompleteComponent,
|
|
3597
|
+
FormAutocompleteComponent,
|
|
3598
|
+
FormDateTimeComponent,
|
|
3599
|
+
ValidationDateTimeComponent,
|
|
3600
|
+
FormTimeComponent] });
|
|
3601
|
+
FormsAndValidationsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormsAndValidationsModule, imports: [[...MODULES, ...MODULES_TO_EXPORT], AngularMultiSelectModule] });
|
|
3602
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FormsAndValidationsModule, decorators: [{
|
|
3603
|
+
type: NgModule,
|
|
3604
|
+
args: [{
|
|
3605
|
+
imports: [...MODULES, ...MODULES_TO_EXPORT],
|
|
3606
|
+
declarations: [...COMPONENTS],
|
|
3607
|
+
exports: [...MODULES_TO_EXPORT, ...COMPONENTS]
|
|
3608
|
+
}]
|
|
3609
|
+
}] });
|
|
3610
|
+
|
|
3611
|
+
/*
|
|
3612
|
+
* Public API Surface of forms-and-validations
|
|
3613
|
+
*/
|
|
3614
|
+
|
|
3615
|
+
/**
|
|
3616
|
+
* Generated bundle index. Do not edit.
|
|
3617
|
+
*/
|
|
3618
|
+
|
|
3619
|
+
export { AppFile, CustomRequiredDirective, FormAdaptiveComponent, FormAutocompleteComponent, FormCheckboxComponent, FormDateComponent, FormDateTimeComponent, FormEmptyComponent, FormErrorComponent, FormFileComponent, FormInfoComponent, FormInputComponent, FormMultiSelectComponent, FormSelectComponent, FormTemplateComponent, FormTextareaComponent, FormTimeComponent, FormsAndValidationsModule, FormsAndValidationsModuleConfig, ValidationAutocompleteComponent, ValidationCurrencyComponent, ValidationDateComponent, ValidationDateTimeComponent, ValidationInputComponent, ValidationSelectComponent, ValidationTextAreaComponent };
|
|
3620
|
+
//# sourceMappingURL=esfaenza-forms-and-validations.mjs.map
|