lib-portal-angular 0.0.54 → 0.0.56
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/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
|
}] } });
|