lib-portal-angular 0.0.54 → 0.0.56
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2022/lib/components/confirmation/confirmation.component.mjs +3 -3
- package/esm2022/lib/components/custom-switch/custom-switch.component.mjs +2 -2
- package/esm2022/lib/components/multi-select/multi-select.component.mjs +78 -46
- package/fesm2022/lib-portal-angular.mjs +81 -49
- package/fesm2022/lib-portal-angular.mjs.map +1 -1
- package/lib/components/multi-select/multi-select.component.d.ts +10 -5
- package/package.json +1 -1
|
@@ -78,11 +78,11 @@ class CustomSwitchComponent {
|
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomSwitchComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
81
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomSwitchComponent, selector: "argenta-custom-switch", inputs: { checked: "checked", label: "label", permissions: "permissions" }, outputs: { switchChange: "switchChange" }, ngImport: i0, template: "<ng-container *ngIf=\"hasPermission()\">\n <div class=\"form-check form-switch\">\n <input \n class=\"form-check-input\" \n type=\"checkbox\" \n [checked]=\"checked\" \n (change)=\"toggleSwitch()\" \n id=\"flexSwitchCheckDefault\" \n />\n <label class=\"form-check-label\" for=\"flexSwitchCheckDefault\">\n {{ label }}\n </label>\n </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.form-check{display:flex;align-items:center}.form-check-input{width:60px;height:34px;margin-right:10px;cursor:pointer}.form-check-input:
|
|
81
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomSwitchComponent, selector: "argenta-custom-switch", inputs: { checked: "checked", label: "label", permissions: "permissions" }, outputs: { switchChange: "switchChange" }, ngImport: i0, template: "<ng-container *ngIf=\"hasPermission()\">\n <div class=\"form-check form-switch\">\n <input \n class=\"form-check-input\" \n type=\"checkbox\" \n [checked]=\"checked\" \n (change)=\"toggleSwitch()\" \n id=\"flexSwitchCheckDefault\" \n />\n <label class=\"form-check-label\" for=\"flexSwitchCheckDefault\">\n {{ label }}\n </label>\n </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.form-check{display:flex;align-items:center}.form-check-input{width:60px;height:34px;margin-right:10px;cursor:pointer;position:relative;appearance:none;background-color:#e5e5e5;border:2px solid #00444C;border-radius:34px;outline:none;transition:background-color .3s,border-color .3s}.form-check-input:focus{outline:none;box-shadow:none}.form-check-input:checked{background-color:#00444c;border-color:#00444c}.form-check-input:before{content:\"\";position:absolute;width:26px;height:26px;background-color:#00444c;border-radius:50%;top:3px;left:3px;transition:transform .3s,background-color .3s}.form-check-input:checked:before{transform:translate(26px);background-color:#fff}.form-check-label{color:#00444c;font-family:Inter,sans-serif;font-size:16px;font-weight:600;height:24px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
82
82
|
}
|
|
83
83
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomSwitchComponent, decorators: [{
|
|
84
84
|
type: Component,
|
|
85
|
-
args: [{ selector: 'argenta-custom-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"hasPermission()\">\n <div class=\"form-check form-switch\">\n <input \n class=\"form-check-input\" \n type=\"checkbox\" \n [checked]=\"checked\" \n (change)=\"toggleSwitch()\" \n id=\"flexSwitchCheckDefault\" \n />\n <label class=\"form-check-label\" for=\"flexSwitchCheckDefault\">\n {{ label }}\n </label>\n </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.form-check{display:flex;align-items:center}.form-check-input{width:60px;height:34px;margin-right:10px;cursor:pointer}.form-check-input:
|
|
85
|
+
args: [{ selector: 'argenta-custom-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"hasPermission()\">\n <div class=\"form-check form-switch\">\n <input \n class=\"form-check-input\" \n type=\"checkbox\" \n [checked]=\"checked\" \n (change)=\"toggleSwitch()\" \n id=\"flexSwitchCheckDefault\" \n />\n <label class=\"form-check-label\" for=\"flexSwitchCheckDefault\">\n {{ label }}\n </label>\n </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.form-check{display:flex;align-items:center}.form-check-input{width:60px;height:34px;margin-right:10px;cursor:pointer;position:relative;appearance:none;background-color:#e5e5e5;border:2px solid #00444C;border-radius:34px;outline:none;transition:background-color .3s,border-color .3s}.form-check-input:focus{outline:none;box-shadow:none}.form-check-input:checked{background-color:#00444c;border-color:#00444c}.form-check-input:before{content:\"\";position:absolute;width:26px;height:26px;background-color:#00444c;border-radius:50%;top:3px;left:3px;transition:transform .3s,background-color .3s}.form-check-input:checked:before{transform:translate(26px);background-color:#fff}.form-check-label{color:#00444c;font-family:Inter,sans-serif;font-size:16px;font-weight:600;height:24px;line-height:24px}\n"] }]
|
|
86
86
|
}], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { checked: [{
|
|
87
87
|
type: Input
|
|
88
88
|
}], label: [{
|
|
@@ -848,11 +848,11 @@ class ConfirmationComponent {
|
|
|
848
848
|
// Clear any subscriptions if there were any
|
|
849
849
|
}
|
|
850
850
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationComponent, deps: [{ token: i1$1.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
851
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmationComponent, selector: "app-confirmation", inputs: { title: "title", message: "message", confirmButtonText: "confirmButtonText", cancelButtonText: "cancelButtonText" }, ngImport: i0, template: "<div class=\"modal-header\">\n <h5 class=\"modal-title\" id=\"confirmationModalLabel\">{{ title }}</h5>\n</div>\n<div class=\"modal-body\">\n <p>{{ message }}</p>\n</div>\n<div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancel()\">{{ cancelButtonText }}</button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"confirm()\" appAutofocus>{{ confirmButtonText }}</button>\n</div>\n", styles: ["@charset \"UTF-8\";.modal-header{
|
|
851
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmationComponent, selector: "app-confirmation", inputs: { title: "title", message: "message", confirmButtonText: "confirmButtonText", cancelButtonText: "cancelButtonText" }, ngImport: i0, template: "<div class=\"modal-header\">\n <h5 class=\"modal-title\" id=\"confirmationModalLabel\">{{ title }}</h5>\n</div>\n<div class=\"modal-body\">\n <p>{{ message }}</p>\n</div>\n<div class=\"modal-footer d-flex justify-content-end\">\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancel()\">{{ cancelButtonText }}</button>\n <button type=\"button\" class=\"btn btn-primary ms-2\" (click)=\"confirm()\" appAutofocus>{{ confirmButtonText }}</button>\n</div>\n", styles: ["@charset \"UTF-8\";.modal-header{border-bottom:none}.modal-footer{border-top:none;padding-top:0;padding-bottom:15px;display:flex;justify-content:flex-end}.modal-title{font-family:Inter,sans-serif;color:#151920;font-size:19px}.modal-body{text-align:left}.modal-body p{color:#15192080;font-family:Inter,sans-serif;font-size:14px}.btn-primary{font-family:Inter,sans-serif;background-color:#00444c;border:1px solid #00444C;border-radius:8px;width:130px;height:42px;color:#fff;transition:opacity .3s,transform .1s}.btn-primary:hover{opacity:.8}.btn-primary:active{transform:scale(.98);background-color:#00444c;border:1px solid #00444C}.btn-secondary{font-family:Inter,sans-serif;background-color:transparent;border-radius:8px;width:96px;height:42px;border:1px solid rgba(21,25,32,.5019607843);color:#15192080;transition:opacity .3s,transform .1s;margin-right:8px}.btn-secondary:hover{opacity:.8}.btn-secondary:active{transform:scale(.98)}.ms-2{margin-left:8px}\n"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[appAutofocus]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
852
852
|
}
|
|
853
853
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationComponent, decorators: [{
|
|
854
854
|
type: Component,
|
|
855
|
-
args: [{ selector: 'app-confirmation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal-header\">\n <h5 class=\"modal-title\" id=\"confirmationModalLabel\">{{ title }}</h5>\n</div>\n<div class=\"modal-body\">\n <p>{{ message }}</p>\n</div>\n<div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancel()\">{{ cancelButtonText }}</button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"confirm()\" appAutofocus>{{ confirmButtonText }}</button>\n</div>\n", styles: ["@charset \"UTF-8\";.modal-header{
|
|
855
|
+
args: [{ selector: 'app-confirmation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal-header\">\n <h5 class=\"modal-title\" id=\"confirmationModalLabel\">{{ title }}</h5>\n</div>\n<div class=\"modal-body\">\n <p>{{ message }}</p>\n</div>\n<div class=\"modal-footer d-flex justify-content-end\">\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancel()\">{{ cancelButtonText }}</button>\n <button type=\"button\" class=\"btn btn-primary ms-2\" (click)=\"confirm()\" appAutofocus>{{ confirmButtonText }}</button>\n</div>\n", styles: ["@charset \"UTF-8\";.modal-header{border-bottom:none}.modal-footer{border-top:none;padding-top:0;padding-bottom:15px;display:flex;justify-content:flex-end}.modal-title{font-family:Inter,sans-serif;color:#151920;font-size:19px}.modal-body{text-align:left}.modal-body p{color:#15192080;font-family:Inter,sans-serif;font-size:14px}.btn-primary{font-family:Inter,sans-serif;background-color:#00444c;border:1px solid #00444C;border-radius:8px;width:130px;height:42px;color:#fff;transition:opacity .3s,transform .1s}.btn-primary:hover{opacity:.8}.btn-primary:active{transform:scale(.98);background-color:#00444c;border:1px solid #00444C}.btn-secondary{font-family:Inter,sans-serif;background-color:transparent;border-radius:8px;width:96px;height:42px;border:1px solid rgba(21,25,32,.5019607843);color:#15192080;transition:opacity .3s,transform .1s;margin-right:8px}.btn-secondary:hover{opacity:.8}.btn-secondary:active{transform:scale(.98)}.ms-2{margin-left:8px}\n"] }]
|
|
856
856
|
}], ctorParameters: function () { return [{ type: i1$1.NgbActiveModal }]; }, propDecorators: { title: [{
|
|
857
857
|
type: Input
|
|
858
858
|
}], message: [{
|
|
@@ -1112,13 +1112,13 @@ class MultiSelectComponent {
|
|
|
1112
1112
|
this.closeOnSelect = false; // New property to control dropdown close behavior
|
|
1113
1113
|
this.searchUrl = ''; // URL for backend search
|
|
1114
1114
|
this.multiple = true; // New property to control single or multiple selection
|
|
1115
|
+
this.searchParams = {}; // Parâmetros de busca dinâmicos
|
|
1115
1116
|
this.keyupEvent = new EventEmitter();
|
|
1116
|
-
this.
|
|
1117
|
+
this.backupData = []; // Backup of the initial data
|
|
1117
1118
|
this.allItems = []; // Store the combined list
|
|
1118
1119
|
this.items = of([]); // Initialization of the property
|
|
1119
1120
|
this.filteredItems = of([]); // Filtered items
|
|
1120
1121
|
this.searchTerms = new Subject(); // For search debounce
|
|
1121
|
-
this.backendItems = []; // Items found from backend
|
|
1122
1122
|
this.onChangeCallback = () => { };
|
|
1123
1123
|
this.onTouchedCallback = () => { };
|
|
1124
1124
|
this.isCourseEntered = false;
|
|
@@ -1127,20 +1127,20 @@ class MultiSelectComponent {
|
|
|
1127
1127
|
};
|
|
1128
1128
|
}
|
|
1129
1129
|
ngOnInit() {
|
|
1130
|
-
this.
|
|
1131
|
-
this.allItems = [...this.data]; // Initialize allItems with the
|
|
1130
|
+
this.backupData = [...this.data]; // Backup initial data
|
|
1131
|
+
this.allItems = [...this.data]; // Initialize allItems with the initial data
|
|
1132
1132
|
this.items = of(this.allItems);
|
|
1133
|
-
|
|
1134
|
-
this.
|
|
1135
|
-
this.allItems = data;
|
|
1136
|
-
this.items = of(this.allItems);
|
|
1137
|
-
this.filteredItems = this.searchTerms.pipe(debounceTime(700), startWith(''), // Start with an empty search to load the original list
|
|
1138
|
-
switchMap(term => this.search(term)));
|
|
1139
|
-
});
|
|
1140
|
-
}
|
|
1141
|
-
else {
|
|
1133
|
+
this.fetchInitialData().subscribe(data => {
|
|
1134
|
+
this.updateData(data);
|
|
1142
1135
|
this.filteredItems = this.searchTerms.pipe(debounceTime(700), startWith(''), // Start with an empty search to load the original list
|
|
1143
1136
|
switchMap(term => this.search(term)));
|
|
1137
|
+
// Adicionar itens selecionados à lista após buscar dados iniciais
|
|
1138
|
+
this.addSelectedItemsToData();
|
|
1139
|
+
});
|
|
1140
|
+
}
|
|
1141
|
+
ngOnChanges(changes) {
|
|
1142
|
+
if (changes['selected'] && !changes['selected'].isFirstChange()) {
|
|
1143
|
+
this.addSelectedItemsToData();
|
|
1144
1144
|
}
|
|
1145
1145
|
}
|
|
1146
1146
|
fetchInitialData() {
|
|
@@ -1157,6 +1157,32 @@ class MultiSelectComponent {
|
|
|
1157
1157
|
return of([]);
|
|
1158
1158
|
}));
|
|
1159
1159
|
}
|
|
1160
|
+
updateData(newData) {
|
|
1161
|
+
newData.forEach((item) => {
|
|
1162
|
+
const existsInList = this.allItems.some(listItem => this.compareFn(listItem, item));
|
|
1163
|
+
if (!existsInList) {
|
|
1164
|
+
this.allItems.push(item);
|
|
1165
|
+
}
|
|
1166
|
+
});
|
|
1167
|
+
this.items = of(this.allItems);
|
|
1168
|
+
}
|
|
1169
|
+
addSelectedItemsToData() {
|
|
1170
|
+
if (this.selected) {
|
|
1171
|
+
const selectedItems = this.multiple ? this.selected : [this.selected];
|
|
1172
|
+
selectedItems.forEach((item) => {
|
|
1173
|
+
const existsInList = this.allItems.some(listItem => this.compareFn(listItem, item));
|
|
1174
|
+
if (!existsInList) {
|
|
1175
|
+
const newItem = {
|
|
1176
|
+
[this.bindValue]: item[this.bindValue] || item,
|
|
1177
|
+
[this.bindLabel]: item[this.bindLabel] || item
|
|
1178
|
+
};
|
|
1179
|
+
this.data.push(newItem);
|
|
1180
|
+
this.allItems.push(newItem);
|
|
1181
|
+
}
|
|
1182
|
+
});
|
|
1183
|
+
this.items = of(this.allItems);
|
|
1184
|
+
}
|
|
1185
|
+
}
|
|
1160
1186
|
onFocus() {
|
|
1161
1187
|
this.isCourseEntered = true;
|
|
1162
1188
|
}
|
|
@@ -1167,32 +1193,25 @@ class MultiSelectComponent {
|
|
|
1167
1193
|
this.keyupEvent.emit(event);
|
|
1168
1194
|
}
|
|
1169
1195
|
onSelectedChange(event) {
|
|
1196
|
+
const previousSelected = this.selected;
|
|
1170
1197
|
if (this.multiple) {
|
|
1171
1198
|
this.selected = event;
|
|
1172
1199
|
}
|
|
1173
1200
|
else {
|
|
1174
1201
|
this.selected = event ? event : null;
|
|
1175
1202
|
}
|
|
1176
|
-
const newlySelectedItems = this.multiple
|
|
1177
|
-
? event.filter((item) => !this.selected.includes(item))
|
|
1178
|
-
: [this.selected];
|
|
1179
|
-
// Check if any newly selected item is from backendItems
|
|
1180
|
-
const addedFromBackend = this.backendItems.filter((item) => newlySelectedItems.includes(item));
|
|
1181
|
-
if (addedFromBackend.length > 0) {
|
|
1182
|
-
// Transform the backend items to match the format expected by the component
|
|
1183
|
-
const transformedItems = addedFromBackend.map((item) => ({
|
|
1184
|
-
[this.bindValue]: item[this.bindValue],
|
|
1185
|
-
[this.bindLabel]: item[this.bindLabel]
|
|
1186
|
-
}));
|
|
1187
|
-
// Add backend items to the allItems list and update the observable
|
|
1188
|
-
this.originalData = [...this.originalData, ...transformedItems];
|
|
1189
|
-
this.allItems = [...this.originalData];
|
|
1190
|
-
this.items = of(this.allItems); // Update the observable with new data
|
|
1191
|
-
this.backendItems = []; // Clear backend items after processing
|
|
1192
|
-
this.searchTerms.next(''); // Reset the search term to update the list
|
|
1193
|
-
console.log('Added items from backend to the list and reset the dropdown.');
|
|
1194
|
-
}
|
|
1195
1203
|
this.onChangeCallback(this.selected);
|
|
1204
|
+
// Verificar se um item foi removido
|
|
1205
|
+
if (previousSelected && Array.isArray(previousSelected) && previousSelected.length > event.length) {
|
|
1206
|
+
const removedItems = previousSelected.filter(item => !event.includes(item));
|
|
1207
|
+
removedItems.forEach(item => {
|
|
1208
|
+
const existsInData = this.data.some(dataItem => this.compareFn(dataItem, item));
|
|
1209
|
+
if (!existsInData) {
|
|
1210
|
+
this.data.push(item);
|
|
1211
|
+
this.allItems.push(item); // Adicionar de volta aos itens disponíveis
|
|
1212
|
+
}
|
|
1213
|
+
});
|
|
1214
|
+
}
|
|
1196
1215
|
}
|
|
1197
1216
|
onInputChange(event) {
|
|
1198
1217
|
const input = event.target.value;
|
|
@@ -1200,41 +1219,52 @@ class MultiSelectComponent {
|
|
|
1200
1219
|
}
|
|
1201
1220
|
search(term) {
|
|
1202
1221
|
if (!term.trim()) {
|
|
1203
|
-
//
|
|
1222
|
+
// Se o termo de busca estiver vazio, retorna a lista completa
|
|
1204
1223
|
return of(this.allItems);
|
|
1205
1224
|
}
|
|
1225
|
+
// Filtra os itens localmente
|
|
1206
1226
|
const filtered = this.allItems.filter((item) => item[this.bindLabel].toLowerCase().includes(term.toLowerCase()));
|
|
1207
1227
|
if (filtered.length > 0) {
|
|
1208
1228
|
console.log('Items filtered locally.');
|
|
1209
1229
|
return of(filtered);
|
|
1210
1230
|
}
|
|
1211
1231
|
else if (this.searchUrl) {
|
|
1212
|
-
|
|
1232
|
+
// Construir os parâmetros de busca dinamicamente
|
|
1233
|
+
const params = new URLSearchParams(this.searchParams);
|
|
1234
|
+
params.append('term', term);
|
|
1235
|
+
return this.http.get(`${this.searchUrl}?${params.toString()}`).pipe(map((response) => {
|
|
1213
1236
|
if (response && response.length > 0) {
|
|
1214
|
-
//
|
|
1237
|
+
// Transforma os itens do backend para o formato esperado pelo componente
|
|
1215
1238
|
const transformedItems = response.map((item) => ({
|
|
1216
1239
|
[this.bindValue]: item[this.bindValue],
|
|
1217
1240
|
[this.bindLabel]: item[this.bindLabel]
|
|
1218
1241
|
}));
|
|
1219
|
-
|
|
1220
|
-
|
|
1242
|
+
// Atualiza os dados com os novos itens buscados
|
|
1243
|
+
this.updateData(transformedItems);
|
|
1244
|
+
return this.allItems;
|
|
1221
1245
|
}
|
|
1222
1246
|
else {
|
|
1223
1247
|
console.log('No items found in the backend search.');
|
|
1224
|
-
return
|
|
1248
|
+
return this.allItems;
|
|
1225
1249
|
}
|
|
1226
1250
|
}), catchError((error) => {
|
|
1227
1251
|
console.error('Error fetching from backend:', error);
|
|
1228
|
-
return of(
|
|
1252
|
+
return of(this.allItems);
|
|
1229
1253
|
}));
|
|
1230
1254
|
}
|
|
1231
1255
|
else {
|
|
1232
1256
|
console.log('No search URL provided and no items found locally.');
|
|
1233
|
-
return of(
|
|
1257
|
+
return of(this.allItems);
|
|
1234
1258
|
}
|
|
1235
1259
|
}
|
|
1236
1260
|
writeValue(value) {
|
|
1237
|
-
|
|
1261
|
+
if (this.multiple) {
|
|
1262
|
+
this.selected = value || [];
|
|
1263
|
+
}
|
|
1264
|
+
else {
|
|
1265
|
+
this.selected = value || null;
|
|
1266
|
+
}
|
|
1267
|
+
this.addSelectedItemsToData();
|
|
1238
1268
|
}
|
|
1239
1269
|
registerOnChange(fn) {
|
|
1240
1270
|
this.onChangeCallback = fn;
|
|
@@ -1263,23 +1293,23 @@ class MultiSelectComponent {
|
|
|
1263
1293
|
}
|
|
1264
1294
|
}
|
|
1265
1295
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: AuthService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1266
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectComponent, selector: "argenta-custom-multi-select", inputs: { label: "label", data: "data", placeholder: "placeholder", selected: "selected", id: "id", bindLabel: "bindLabel", bindValue: "bindValue", permissions: "permissions", closeOnSelect: "closeOnSelect", searchUrl: "searchUrl", multiple: "multiple" }, outputs: { keyupEvent: "keyupEvent" }, providers: [
|
|
1296
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectComponent, selector: "argenta-custom-multi-select", inputs: { label: "label", data: "data", placeholder: "placeholder", selected: "selected", id: "id", bindLabel: "bindLabel", bindValue: "bindValue", permissions: "permissions", closeOnSelect: "closeOnSelect", searchUrl: "searchUrl", multiple: "multiple", searchParams: "searchParams" }, outputs: { keyupEvent: "keyupEvent" }, providers: [
|
|
1267
1297
|
{
|
|
1268
1298
|
provide: NG_VALUE_ACCESSOR,
|
|
1269
1299
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
1270
1300
|
multi: true
|
|
1271
1301
|
}
|
|
1272
|
-
], ngImport: i0, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n
|
|
1302
|
+
], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n <label [for]=\"id\" class=\"form-label\" style=\"margin-top: 1rem;\">{{ label }}</label>\n <ng-select\n [class.course-entry]=\"isCourseEntered\"\n class=\"ng-select custom-ng-select\"\n [items]=\"filteredItems | async\"\n [multiple]=\"multiple\"\n [closeOnSelect]=\"closeOnSelect\"\n [hideSelected]=\"true\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [(ngModel)]=\"selected\"\n [compareWith]=\"compareFn\"\n (change)=\"onSelectedChange($event)\"\n (keyup)=\"onKeyUp($event)\"\n (input)=\"onInputChange($event)\"\n [id]=\"id\"\n [placeholder]=\"selected && (multiple ? selected.length === 0 : !selected) ? placeholder : ''\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n <ng-template ng-option-tmp let-item=\"item\">\n {{ item[bindLabel] }}\n </ng-template>\n </ng-select>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem 2rem .5rem .5rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;background-repeat:no-repeat;background-position:right .5rem center}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.2rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}.ng-select{display:block;width:100%;font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.ng-select .ng-select-container{display:flex;align-items:center;border:1px solid #ccc;border-radius:4px;padding:.5rem;background-color:#fff;color:#333}.ng-select .ng-select-container .ng-value-container{display:flex;align-items:center;flex-grow:1}.ng-select .ng-select-container .ng-clear{display:none}.ng-select .ng-select-container .ng-input{flex-grow:1;border:none;outline:none}.custom-ng-select.ng-select .ng-select-container .ng-input>input{box-sizing:border-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:.5rem!important;cursor:default;width:100%}.ng-select .ng-dropdown-panel{border:1px solid #ccc;border-radius:4px;background-color:#fff;color:#333;box-shadow:0 2px 4px #0000001a}.ng-select .ng-dropdown-panel .ng-option{padding:8px;cursor:pointer}.ng-select .ng-dropdown-panel .ng-option:hover{background-color:#f1f1f1}.ng-select .ng-dropdown-panel .ng-option.selected{background-color:#007bff;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1273
1303
|
}
|
|
1274
1304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
1275
1305
|
type: Component,
|
|
1276
|
-
args: [{ selector: 'argenta-custom-multi-select',
|
|
1306
|
+
args: [{ selector: 'argenta-custom-multi-select', providers: [
|
|
1277
1307
|
{
|
|
1278
1308
|
provide: NG_VALUE_ACCESSOR,
|
|
1279
1309
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
1280
1310
|
multi: true
|
|
1281
1311
|
}
|
|
1282
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem 2rem .5rem .5rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;background-repeat:no-repeat;background-position:right .5rem center}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.
|
|
1312
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n <label [for]=\"id\" class=\"form-label\" style=\"margin-top: 1rem;\">{{ label }}</label>\n <ng-select\n [class.course-entry]=\"isCourseEntered\"\n class=\"ng-select custom-ng-select\"\n [items]=\"filteredItems | async\"\n [multiple]=\"multiple\"\n [closeOnSelect]=\"closeOnSelect\"\n [hideSelected]=\"true\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [(ngModel)]=\"selected\"\n [compareWith]=\"compareFn\"\n (change)=\"onSelectedChange($event)\"\n (keyup)=\"onKeyUp($event)\"\n (input)=\"onInputChange($event)\"\n [id]=\"id\"\n [placeholder]=\"selected && (multiple ? selected.length === 0 : !selected) ? placeholder : ''\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n <ng-template ng-option-tmp let-item=\"item\">\n {{ item[bindLabel] }}\n </ng-template>\n </ng-select>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem 2rem .5rem .5rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;background-repeat:no-repeat;background-position:right .5rem center}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.2rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}.ng-select{display:block;width:100%;font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.ng-select .ng-select-container{display:flex;align-items:center;border:1px solid #ccc;border-radius:4px;padding:.5rem;background-color:#fff;color:#333}.ng-select .ng-select-container .ng-value-container{display:flex;align-items:center;flex-grow:1}.ng-select .ng-select-container .ng-clear{display:none}.ng-select .ng-select-container .ng-input{flex-grow:1;border:none;outline:none}.custom-ng-select.ng-select .ng-select-container .ng-input>input{box-sizing:border-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:.5rem!important;cursor:default;width:100%}.ng-select .ng-dropdown-panel{border:1px solid #ccc;border-radius:4px;background-color:#fff;color:#333;box-shadow:0 2px 4px #0000001a}.ng-select .ng-dropdown-panel .ng-option{padding:8px;cursor:pointer}.ng-select .ng-dropdown-panel .ng-option:hover{background-color:#f1f1f1}.ng-select .ng-dropdown-panel .ng-option.selected{background-color:#007bff;color:#fff}\n"] }]
|
|
1283
1313
|
}], ctorParameters: function () { return [{ type: AuthService }, { type: i2.HttpClient }]; }, propDecorators: { label: [{
|
|
1284
1314
|
type: Input
|
|
1285
1315
|
}], data: [{
|
|
@@ -1302,6 +1332,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1302
1332
|
type: Input
|
|
1303
1333
|
}], multiple: [{
|
|
1304
1334
|
type: Input
|
|
1335
|
+
}], searchParams: [{
|
|
1336
|
+
type: Input
|
|
1305
1337
|
}], keyupEvent: [{
|
|
1306
1338
|
type: Output
|
|
1307
1339
|
}] } });
|