lib-portal-angular 0.0.52 → 0.0.54
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/basic-registration/basic-registration.component.mjs +3 -3
- package/esm2022/lib/components/components.module.mjs +8 -3
- package/esm2022/lib/components/custom-switch/custom-switch.component.mjs +49 -0
- package/esm2022/lib/components/multi-select/multi-select.component.mjs +153 -83
- package/esm2022/lib/components/select/select.component.mjs +14 -4
- package/esm2022/lib/components/tables/data-table.component.mjs +3 -3
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/lib-portal-angular.mjs +257 -132
- package/fesm2022/lib-portal-angular.mjs.map +1 -1
- package/lib/components/components.module.d.ts +6 -5
- package/lib/components/custom-switch/custom-switch.component.d.ts +15 -0
- package/lib/components/multi-select/multi-select.component.d.ts +23 -6
- package/lib/components/select/select.component.d.ts +8 -3
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
@@ -1,21 +1,98 @@
|
|
1
1
|
import * as i0 from '@angular/core';
|
2
|
-
import {
|
2
|
+
import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, forwardRef, ViewChild, Directive, NgModule, createComponent } from '@angular/core';
|
3
3
|
import * as i1 from '@angular/common';
|
4
4
|
import { CommonModule } from '@angular/common';
|
5
|
-
import * as
|
5
|
+
import * as i4 from '@angular/forms';
|
6
6
|
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
7
7
|
import hljs from 'highlight.js';
|
8
8
|
import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
|
9
9
|
import { Subject, of, Subscription, Observable } from 'rxjs';
|
10
|
-
import
|
10
|
+
import { debounceTime, startWith, switchMap, map, catchError, takeUntil } from 'rxjs/operators';
|
11
|
+
import * as i2 from '@angular/common/http';
|
12
|
+
import { HttpParams } from '@angular/common/http';
|
13
|
+
import * as i5 from '@ng-select/ng-select';
|
11
14
|
import { NgSelectModule } from '@ng-select/ng-select';
|
12
|
-
import
|
13
|
-
import * as i4 from 'lucide-angular';
|
15
|
+
import * as i4$1 from 'lucide-angular';
|
14
16
|
import { LucideAngularModule, icons } from 'lucide-angular';
|
15
|
-
import * as i1$2 from '@angular/common/http';
|
16
|
-
import { HttpParams } from '@angular/common/http';
|
17
17
|
import * as CryptoJS from 'crypto-js';
|
18
18
|
|
19
|
+
class AuthService {
|
20
|
+
constructor() {
|
21
|
+
this.userRoles = [];
|
22
|
+
this.loadUserRoles();
|
23
|
+
}
|
24
|
+
loadUserRoles() {
|
25
|
+
const storedUser = localStorage.getItem('user');
|
26
|
+
if (!storedUser) {
|
27
|
+
throw new Error('User not found in localStorage');
|
28
|
+
}
|
29
|
+
const { role } = JSON.parse(storedUser);
|
30
|
+
if (!role || !Array.isArray(role)) {
|
31
|
+
throw new Error('Roles not found or invalid in localStorage');
|
32
|
+
}
|
33
|
+
this.userRoles = role.flatMap((roleArray) => roleArray.map(role => role.toString()));
|
34
|
+
}
|
35
|
+
hasPermission(requiredPermissions) {
|
36
|
+
if (this.userRoles.length === 0) {
|
37
|
+
throw new Error('No roles found for the user');
|
38
|
+
}
|
39
|
+
return requiredPermissions.every(permission => this.userRoles.includes(permission));
|
40
|
+
}
|
41
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
42
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthService, providedIn: 'root' }); }
|
43
|
+
}
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthService, decorators: [{
|
45
|
+
type: Injectable,
|
46
|
+
args: [{
|
47
|
+
providedIn: 'root'
|
48
|
+
}]
|
49
|
+
}], ctorParameters: function () { return []; } });
|
50
|
+
|
51
|
+
class CustomSwitchComponent {
|
52
|
+
constructor(authService) {
|
53
|
+
this.authService = authService;
|
54
|
+
this.checked = false;
|
55
|
+
this.label = '';
|
56
|
+
this.permissions = [];
|
57
|
+
this.switchChange = new EventEmitter();
|
58
|
+
}
|
59
|
+
toggleSwitch() {
|
60
|
+
this.checked = !this.checked;
|
61
|
+
this.switchChange.emit(this.checked);
|
62
|
+
}
|
63
|
+
hasPermission() {
|
64
|
+
if (!this.permissions || this.permissions.length === 0) {
|
65
|
+
return true;
|
66
|
+
}
|
67
|
+
try {
|
68
|
+
return this.authService.hasPermission(this.permissions);
|
69
|
+
}
|
70
|
+
catch (error) {
|
71
|
+
if (error instanceof Error) {
|
72
|
+
console.error('Permission error:', error.message);
|
73
|
+
}
|
74
|
+
else {
|
75
|
+
console.error('Unknown error occurred during permission check');
|
76
|
+
}
|
77
|
+
return true;
|
78
|
+
}
|
79
|
+
}
|
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:checked{background-color:#00444c;border-color:#00444c}.form-check-input:not(:checked){border-color:#3ec9d6;box-shadow:0 0 5px #e5e5e5}.form-check-input:not(:checked):before{content:\"\";position:absolute;width:26px;height:26px;background-color:#00444c;border-radius:50%;top:4px;left:4px;transition:background-color .3s,transform .3s}.form-check-input:checked:before{transform:translate(26px)}.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
|
+
}
|
83
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomSwitchComponent, decorators: [{
|
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:checked{background-color:#00444c;border-color:#00444c}.form-check-input:not(:checked){border-color:#3ec9d6;box-shadow:0 0 5px #e5e5e5}.form-check-input:not(:checked):before{content:\"\";position:absolute;width:26px;height:26px;background-color:#00444c;border-radius:50%;top:4px;left:4px;transition:background-color .3s,transform .3s}.form-check-input:checked:before{transform:translate(26px)}.form-check-label{color:#00444c;font-family:Inter,sans-serif;font-size:16px;font-weight:600;height:24px;line-height:24px}\n"] }]
|
86
|
+
}], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { checked: [{
|
87
|
+
type: Input
|
88
|
+
}], label: [{
|
89
|
+
type: Input
|
90
|
+
}], permissions: [{
|
91
|
+
type: Input
|
92
|
+
}], switchChange: [{
|
93
|
+
type: Output
|
94
|
+
}] } });
|
95
|
+
|
19
96
|
class AlertComponent {
|
20
97
|
constructor() {
|
21
98
|
this.alerts = [];
|
@@ -281,38 +358,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
281
358
|
args: ['mouseup']
|
282
359
|
}] } });
|
283
360
|
|
284
|
-
class AuthService {
|
285
|
-
constructor() {
|
286
|
-
this.userRoles = [];
|
287
|
-
this.loadUserRoles();
|
288
|
-
}
|
289
|
-
loadUserRoles() {
|
290
|
-
const storedUser = localStorage.getItem('user');
|
291
|
-
if (!storedUser) {
|
292
|
-
throw new Error('User not found in localStorage');
|
293
|
-
}
|
294
|
-
const { role } = JSON.parse(storedUser);
|
295
|
-
if (!role || !Array.isArray(role)) {
|
296
|
-
throw new Error('Roles not found or invalid in localStorage');
|
297
|
-
}
|
298
|
-
this.userRoles = role.flatMap((roleArray) => roleArray.map(role => role.toString()));
|
299
|
-
}
|
300
|
-
hasPermission(requiredPermissions) {
|
301
|
-
if (this.userRoles.length === 0) {
|
302
|
-
throw new Error('No roles found for the user');
|
303
|
-
}
|
304
|
-
return requiredPermissions.every(permission => this.userRoles.includes(permission));
|
305
|
-
}
|
306
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
307
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthService, providedIn: 'root' }); }
|
308
|
-
}
|
309
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthService, decorators: [{
|
310
|
-
type: Injectable,
|
311
|
-
args: [{
|
312
|
-
providedIn: 'root'
|
313
|
-
}]
|
314
|
-
}], ctorParameters: function () { return []; } });
|
315
|
-
|
316
361
|
class ButtonComponent {
|
317
362
|
constructor(authService) {
|
318
363
|
this.authService = authService;
|
@@ -558,11 +603,11 @@ class BasicRegistrationComponent {
|
|
558
603
|
this.saveClick.emit(event);
|
559
604
|
}
|
560
605
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BasicRegistrationComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
|
561
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BasicRegistrationComponent, selector: "argenta-basic-registration", inputs: { cancelLabel: "cancelLabel", saveLabel: "saveLabel", cancelPermissions: "cancelPermissions", savePermissions: "savePermissions" }, outputs: { cancelClick: "cancelClick", saveClick: "saveClick" }, ngImport: i0, template: "<div class=\"row row-car\">\n <div class=\"card\">\n <div class=\"card-content\">\n <ng-content></ng-content> <!-- Permite a inclus\u00E3o de conte\u00FAdo din\u00E2mico -->\n </div>\n <div class=\"card-footer\">\n <div class=\"button-group\">\n <argenta-custom-button\n *ngIf=\"hasPermission(cancelPermissions)\"\n [type]=\"'button'\"\n [label]=\"cancelLabel\"\n [btnClass]=\"ButtonClasses.Light\"\n (onButtonClick)=\"handleCancel($event)\"\n class=\"argenta-custom-button\">\n </argenta-custom-button>\n <argenta-custom-button\n *ngIf=\"hasPermission(savePermissions)\"\n [type]=\"'submit'\"\n [label]=\"saveLabel\"\n [btnClass]=\"ButtonClasses.Primary\"\n (onButtonClick)=\"handleSave($event)\"\n class=\"argenta-custom-button\">\n </argenta-custom-button>\n </div>\n </div>\n </div> \n</div>\n", styles: ["@charset \"UTF-8\";.card{border-radius:10px;padding:1rem;background-color:#fff;border:none}.card-footer{display:flex;justify-content:flex-end;margin-top:1rem;padding-top:1rem;border-radius:.25rem}.button-group{display:flex;gap:1rem;height:3rem}.argenta-custom-button{height:100%}.row-car{margin-left:-.8rem;margin-right:-.8rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "argenta-custom-button", inputs: ["type", "label", "btnClass", "fontSize", "disabled", "autofocus", "form", "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget", "name", "value", "permissions"], outputs: ["onButtonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
606
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BasicRegistrationComponent, selector: "argenta-basic-registration", inputs: { cancelLabel: "cancelLabel", saveLabel: "saveLabel", cancelPermissions: "cancelPermissions", savePermissions: "savePermissions" }, outputs: { cancelClick: "cancelClick", saveClick: "saveClick" }, ngImport: i0, template: "<div class=\"row row-car\">\n <div class=\"card\">\n <div class=\"card-content\" style=\"margin-top: 2.5rem;\">\n <ng-content></ng-content> <!-- Permite a inclus\u00E3o de conte\u00FAdo din\u00E2mico -->\n </div>\n <div class=\"card-footer\">\n <div class=\"button-group\">\n <argenta-custom-button\n *ngIf=\"hasPermission(cancelPermissions)\"\n [type]=\"'button'\"\n [label]=\"cancelLabel\"\n [btnClass]=\"ButtonClasses.Light\"\n (onButtonClick)=\"handleCancel($event)\"\n class=\"argenta-custom-button\">\n </argenta-custom-button>\n <argenta-custom-button\n *ngIf=\"hasPermission(savePermissions)\"\n [type]=\"'submit'\"\n [label]=\"saveLabel\"\n [btnClass]=\"ButtonClasses.Primary\"\n (onButtonClick)=\"handleSave($event)\"\n class=\"argenta-custom-button\">\n </argenta-custom-button>\n </div>\n </div>\n </div> \n</div>\n", styles: ["@charset \"UTF-8\";.card{border-radius:10px;padding:1rem;background-color:#fff;border:none}.card-footer{display:flex;justify-content:flex-end;margin-top:1rem;padding-top:1rem;border-radius:.25rem}.button-group{display:flex;gap:1rem;height:3rem}.argenta-custom-button{height:100%}.row-car{margin-left:-.8rem;margin-right:-.8rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "argenta-custom-button", inputs: ["type", "label", "btnClass", "fontSize", "disabled", "autofocus", "form", "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget", "name", "value", "permissions"], outputs: ["onButtonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
562
607
|
}
|
563
608
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BasicRegistrationComponent, decorators: [{
|
564
609
|
type: Component,
|
565
|
-
args: [{ selector: 'argenta-basic-registration', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row row-car\">\n <div class=\"card\">\n <div class=\"card-content\">\n <ng-content></ng-content> <!-- Permite a inclus\u00E3o de conte\u00FAdo din\u00E2mico -->\n </div>\n <div class=\"card-footer\">\n <div class=\"button-group\">\n <argenta-custom-button\n *ngIf=\"hasPermission(cancelPermissions)\"\n [type]=\"'button'\"\n [label]=\"cancelLabel\"\n [btnClass]=\"ButtonClasses.Light\"\n (onButtonClick)=\"handleCancel($event)\"\n class=\"argenta-custom-button\">\n </argenta-custom-button>\n <argenta-custom-button\n *ngIf=\"hasPermission(savePermissions)\"\n [type]=\"'submit'\"\n [label]=\"saveLabel\"\n [btnClass]=\"ButtonClasses.Primary\"\n (onButtonClick)=\"handleSave($event)\"\n class=\"argenta-custom-button\">\n </argenta-custom-button>\n </div>\n </div>\n </div> \n</div>\n", styles: ["@charset \"UTF-8\";.card{border-radius:10px;padding:1rem;background-color:#fff;border:none}.card-footer{display:flex;justify-content:flex-end;margin-top:1rem;padding-top:1rem;border-radius:.25rem}.button-group{display:flex;gap:1rem;height:3rem}.argenta-custom-button{height:100%}.row-car{margin-left:-.8rem;margin-right:-.8rem}\n"] }]
|
610
|
+
args: [{ selector: 'argenta-basic-registration', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row row-car\">\n <div class=\"card\">\n <div class=\"card-content\" style=\"margin-top: 2.5rem;\">\n <ng-content></ng-content> <!-- Permite a inclus\u00E3o de conte\u00FAdo din\u00E2mico -->\n </div>\n <div class=\"card-footer\">\n <div class=\"button-group\">\n <argenta-custom-button\n *ngIf=\"hasPermission(cancelPermissions)\"\n [type]=\"'button'\"\n [label]=\"cancelLabel\"\n [btnClass]=\"ButtonClasses.Light\"\n (onButtonClick)=\"handleCancel($event)\"\n class=\"argenta-custom-button\">\n </argenta-custom-button>\n <argenta-custom-button\n *ngIf=\"hasPermission(savePermissions)\"\n [type]=\"'submit'\"\n [label]=\"saveLabel\"\n [btnClass]=\"ButtonClasses.Primary\"\n (onButtonClick)=\"handleSave($event)\"\n class=\"argenta-custom-button\">\n </argenta-custom-button>\n </div>\n </div>\n </div> \n</div>\n", styles: ["@charset \"UTF-8\";.card{border-radius:10px;padding:1rem;background-color:#fff;border:none}.card-footer{display:flex;justify-content:flex-end;margin-top:1rem;padding-top:1rem;border-radius:.25rem}.button-group{display:flex;gap:1rem;height:3rem}.argenta-custom-button{height:100%}.row-car{margin-left:-.8rem;margin-right:-.8rem}\n"] }]
|
566
611
|
}], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { cancelLabel: [{
|
567
612
|
type: Input
|
568
613
|
}], saveLabel: [{
|
@@ -978,7 +1023,7 @@ class InputComponent {
|
|
978
1023
|
[attr.pattern]="pattern"
|
979
1024
|
[autofocus]="autofocus">
|
980
1025
|
</div>
|
981
|
-
`, isInline: true, styles: ["@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;font-weight:700}.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,.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;font-weight:700}.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:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type:
|
1026
|
+
`, isInline: true, styles: ["@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;font-weight:700}.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,.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;font-weight:700}.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:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
982
1027
|
}
|
983
1028
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
|
984
1029
|
type: Component,
|
@@ -1055,25 +1100,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
1055
1100
|
}] } });
|
1056
1101
|
|
1057
1102
|
class MultiSelectComponent {
|
1058
|
-
constructor() {
|
1103
|
+
constructor(authService, http) {
|
1104
|
+
this.authService = authService;
|
1105
|
+
this.http = http;
|
1059
1106
|
this.label = 'Multi Select';
|
1060
|
-
this.data = []; //
|
1107
|
+
this.data = []; // Accepts an array of generic objects
|
1061
1108
|
this.placeholder = 'Select items';
|
1062
|
-
this.selected = []; // A variável selected deve ser um array
|
1063
1109
|
this.id = 'multiSelectId';
|
1064
|
-
this.bindLabel = ''; //
|
1065
|
-
this.
|
1066
|
-
this.
|
1067
|
-
this.
|
1068
|
-
this.
|
1110
|
+
this.bindLabel = ''; // Generic dynamic label
|
1111
|
+
this.bindValue = ''; // Generic dynamic value
|
1112
|
+
this.closeOnSelect = false; // New property to control dropdown close behavior
|
1113
|
+
this.searchUrl = ''; // URL for backend search
|
1114
|
+
this.multiple = true; // New property to control single or multiple selection
|
1069
1115
|
this.keyupEvent = new EventEmitter();
|
1070
|
-
this.
|
1116
|
+
this.originalData = []; // Store the original list
|
1117
|
+
this.allItems = []; // Store the combined list
|
1118
|
+
this.items = of([]); // Initialization of the property
|
1119
|
+
this.filteredItems = of([]); // Filtered items
|
1120
|
+
this.searchTerms = new Subject(); // For search debounce
|
1121
|
+
this.backendItems = []; // Items found from backend
|
1071
1122
|
this.onChangeCallback = () => { };
|
1072
1123
|
this.onTouchedCallback = () => { };
|
1073
1124
|
this.isCourseEntered = false;
|
1125
|
+
this.compareFn = (item1, item2) => {
|
1126
|
+
return item1 && item2 ? item1[this.bindValue] === item2[this.bindValue] : item1 === item2;
|
1127
|
+
};
|
1074
1128
|
}
|
1075
1129
|
ngOnInit() {
|
1076
|
-
this.
|
1130
|
+
this.originalData = [...this.data]; // Preserve the original data
|
1131
|
+
this.allItems = [...this.data]; // Initialize allItems with the original data
|
1132
|
+
this.items = of(this.allItems);
|
1133
|
+
if (this.searchUrl) {
|
1134
|
+
this.fetchInitialData().subscribe(data => {
|
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 {
|
1142
|
+
this.filteredItems = this.searchTerms.pipe(debounceTime(700), startWith(''), // Start with an empty search to load the original list
|
1143
|
+
switchMap(term => this.search(term)));
|
1144
|
+
}
|
1145
|
+
}
|
1146
|
+
fetchInitialData() {
|
1147
|
+
return this.http.get(this.searchUrl).pipe(map((response) => {
|
1148
|
+
if (response && response.length > 0) {
|
1149
|
+
return response.map((item) => ({
|
1150
|
+
[this.bindValue]: item[this.bindValue],
|
1151
|
+
[this.bindLabel]: item[this.bindLabel]
|
1152
|
+
}));
|
1153
|
+
}
|
1154
|
+
return [];
|
1155
|
+
}), catchError((error) => {
|
1156
|
+
console.error('Error fetching initial data from backend:', error);
|
1157
|
+
return of([]);
|
1158
|
+
}));
|
1077
1159
|
}
|
1078
1160
|
onFocus() {
|
1079
1161
|
this.isCourseEntered = true;
|
@@ -1084,8 +1166,75 @@ class MultiSelectComponent {
|
|
1084
1166
|
onKeyUp(event) {
|
1085
1167
|
this.keyupEvent.emit(event);
|
1086
1168
|
}
|
1169
|
+
onSelectedChange(event) {
|
1170
|
+
if (this.multiple) {
|
1171
|
+
this.selected = event;
|
1172
|
+
}
|
1173
|
+
else {
|
1174
|
+
this.selected = event ? event : null;
|
1175
|
+
}
|
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
|
+
this.onChangeCallback(this.selected);
|
1196
|
+
}
|
1197
|
+
onInputChange(event) {
|
1198
|
+
const input = event.target.value;
|
1199
|
+
this.searchTerms.next(input);
|
1200
|
+
}
|
1201
|
+
search(term) {
|
1202
|
+
if (!term.trim()) {
|
1203
|
+
// If the search term is empty, show the complete list
|
1204
|
+
return of(this.allItems);
|
1205
|
+
}
|
1206
|
+
const filtered = this.allItems.filter((item) => item[this.bindLabel].toLowerCase().includes(term.toLowerCase()));
|
1207
|
+
if (filtered.length > 0) {
|
1208
|
+
console.log('Items filtered locally.');
|
1209
|
+
return of(filtered);
|
1210
|
+
}
|
1211
|
+
else if (this.searchUrl) {
|
1212
|
+
return this.http.get(`${this.searchUrl}?term=${term}`).pipe(map((response) => {
|
1213
|
+
if (response && response.length > 0) {
|
1214
|
+
// Transform the backend items to match the format expected by the component
|
1215
|
+
const transformedItems = response.map((item) => ({
|
1216
|
+
[this.bindValue]: item[this.bindValue],
|
1217
|
+
[this.bindLabel]: item[this.bindLabel]
|
1218
|
+
}));
|
1219
|
+
this.backendItems = transformedItems;
|
1220
|
+
return [...filtered, ...transformedItems];
|
1221
|
+
}
|
1222
|
+
else {
|
1223
|
+
console.log('No items found in the backend search.');
|
1224
|
+
return filtered;
|
1225
|
+
}
|
1226
|
+
}), catchError((error) => {
|
1227
|
+
console.error('Error fetching from backend:', error);
|
1228
|
+
return of(filtered);
|
1229
|
+
}));
|
1230
|
+
}
|
1231
|
+
else {
|
1232
|
+
console.log('No search URL provided and no items found locally.');
|
1233
|
+
return of(filtered);
|
1234
|
+
}
|
1235
|
+
}
|
1087
1236
|
writeValue(value) {
|
1088
|
-
this.selected = value || [];
|
1237
|
+
this.selected = value || (this.multiple ? [] : null);
|
1089
1238
|
}
|
1090
1239
|
registerOnChange(fn) {
|
1091
1240
|
this.onChangeCallback = fn;
|
@@ -1096,81 +1245,42 @@ class MultiSelectComponent {
|
|
1096
1245
|
setDisabledState(isDisabled) {
|
1097
1246
|
// No implementation needed for this example
|
1098
1247
|
}
|
1099
|
-
|
1100
|
-
|
1248
|
+
hasPermission() {
|
1249
|
+
if (!this.permissions || this.permissions.length === 0) {
|
1250
|
+
return true;
|
1251
|
+
}
|
1252
|
+
try {
|
1253
|
+
return this.authService.hasPermission(this.permissions);
|
1254
|
+
}
|
1255
|
+
catch (error) {
|
1256
|
+
if (error instanceof Error) {
|
1257
|
+
console.error('Permission error:', error.message);
|
1258
|
+
}
|
1259
|
+
else {
|
1260
|
+
console.error('Unknown error occurred during permission check');
|
1261
|
+
}
|
1262
|
+
return true;
|
1263
|
+
}
|
1264
|
+
}
|
1265
|
+
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: [
|
1101
1267
|
{
|
1102
1268
|
provide: NG_VALUE_ACCESSOR,
|
1103
1269
|
useExisting: forwardRef(() => MultiSelectComponent),
|
1104
1270
|
multi: true
|
1105
1271
|
}
|
1106
|
-
], ngImport: i0, template:
|
1107
|
-
<div class="form-group" [ngStyle]="{
|
1108
|
-
'margin-top': marginTop + 'rem',
|
1109
|
-
'margin-bottom': marginBottom + 'rem',
|
1110
|
-
'margin-left': marginLeft + 'rem',
|
1111
|
-
'margin-right': marginRight + 'rem'
|
1112
|
-
}">
|
1113
|
-
<label [for]="id" class="form-label">{{ label }}</label>
|
1114
|
-
<ng-select
|
1115
|
-
[class.course-entry]="isCourseEntered"
|
1116
|
-
class="ng-select"
|
1117
|
-
[items]="items | async"
|
1118
|
-
[multiple]="true"
|
1119
|
-
[closeOnSelect]="false"
|
1120
|
-
[hideSelected]="true"
|
1121
|
-
[bindLabel]="bindLabel"
|
1122
|
-
[(ngModel)]="selected"
|
1123
|
-
(keyup)="onKeyUp($event)"
|
1124
|
-
[id]="id"
|
1125
|
-
[placeholder]="selected && selected.length === 0 ? placeholder : ''"
|
1126
|
-
(focus)="onFocus()"
|
1127
|
-
(blur)="onBlur()"
|
1128
|
-
>
|
1129
|
-
<ng-template ng-option-tmp let-item="item">
|
1130
|
-
{{ item[bindLabel] }}
|
1131
|
-
</ng-template>
|
1132
|
-
</ng-select>
|
1133
|
-
</div>
|
1134
|
-
`, isInline: true, styles: [".form-group{font-family:Arial,sans-serif;font-size:1rem}.form-label{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.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: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
1272
|
+
], ngImport: i0, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n <label [for]=\"id\" class=\"form-label\" style=\"margin-top: 2rem;\">{{ label }}</label>\n <ng-select\n [class.course-entry]=\"isCourseEntered\"\n class=\"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 >\n <ng-template ng-option-tmp let-item=\"item\">\n {{ item[bindLabel] }}\n </ng-template>\n </ng-select>\n </div>", 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:.5rem}.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}.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 }); }
|
1135
1273
|
}
|
1136
1274
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
1137
1275
|
type: Component,
|
1138
|
-
args: [{ selector: '
|
1139
|
-
<div class="form-group" [ngStyle]="{
|
1140
|
-
'margin-top': marginTop + 'rem',
|
1141
|
-
'margin-bottom': marginBottom + 'rem',
|
1142
|
-
'margin-left': marginLeft + 'rem',
|
1143
|
-
'margin-right': marginRight + 'rem'
|
1144
|
-
}">
|
1145
|
-
<label [for]="id" class="form-label">{{ label }}</label>
|
1146
|
-
<ng-select
|
1147
|
-
[class.course-entry]="isCourseEntered"
|
1148
|
-
class="ng-select"
|
1149
|
-
[items]="items | async"
|
1150
|
-
[multiple]="true"
|
1151
|
-
[closeOnSelect]="false"
|
1152
|
-
[hideSelected]="true"
|
1153
|
-
[bindLabel]="bindLabel"
|
1154
|
-
[(ngModel)]="selected"
|
1155
|
-
(keyup)="onKeyUp($event)"
|
1156
|
-
[id]="id"
|
1157
|
-
[placeholder]="selected && selected.length === 0 ? placeholder : ''"
|
1158
|
-
(focus)="onFocus()"
|
1159
|
-
(blur)="onBlur()"
|
1160
|
-
>
|
1161
|
-
<ng-template ng-option-tmp let-item="item">
|
1162
|
-
{{ item[bindLabel] }}
|
1163
|
-
</ng-template>
|
1164
|
-
</ng-select>
|
1165
|
-
</div>
|
1166
|
-
`, providers: [
|
1276
|
+
args: [{ selector: 'argenta-custom-multi-select', template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n <label [for]=\"id\" class=\"form-label\" style=\"margin-top: 2rem;\">{{ label }}</label>\n <ng-select\n [class.course-entry]=\"isCourseEntered\"\n class=\"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 >\n <ng-template ng-option-tmp let-item=\"item\">\n {{ item[bindLabel] }}\n </ng-template>\n </ng-select>\n </div>", providers: [
|
1167
1277
|
{
|
1168
1278
|
provide: NG_VALUE_ACCESSOR,
|
1169
1279
|
useExisting: forwardRef(() => MultiSelectComponent),
|
1170
1280
|
multi: true
|
1171
1281
|
}
|
1172
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".form-group{font-family:Arial,sans-serif;font-size:1rem}.form-label{font-weight:
|
1173
|
-
}], propDecorators: { label: [{
|
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:.5rem}.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}.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
|
+
}], ctorParameters: function () { return [{ type: AuthService }, { type: i2.HttpClient }]; }, propDecorators: { label: [{
|
1174
1284
|
type: Input
|
1175
1285
|
}], data: [{
|
1176
1286
|
type: Input
|
@@ -1182,13 +1292,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
1182
1292
|
type: Input
|
1183
1293
|
}], bindLabel: [{
|
1184
1294
|
type: Input
|
1185
|
-
}],
|
1295
|
+
}], bindValue: [{
|
1186
1296
|
type: Input
|
1187
|
-
}],
|
1297
|
+
}], permissions: [{
|
1188
1298
|
type: Input
|
1189
|
-
}],
|
1299
|
+
}], closeOnSelect: [{
|
1190
1300
|
type: Input
|
1191
|
-
}],
|
1301
|
+
}], searchUrl: [{
|
1302
|
+
type: Input
|
1303
|
+
}], multiple: [{
|
1192
1304
|
type: Input
|
1193
1305
|
}], keyupEvent: [{
|
1194
1306
|
type: Output
|
@@ -1394,7 +1506,7 @@ class SearchInputComponent {
|
|
1394
1506
|
useExisting: forwardRef(() => SearchInputComponent),
|
1395
1507
|
multi: true
|
1396
1508
|
}
|
1397
|
-
], ngImport: i0, template: "<div class=\"form-group\">\n <label [for]=\"id\" [ngStyle]=\"getLabelStyles()\">{{ label }}</label>\n <input [type]=\"type\"\n class=\"form-control custom-input\"\n [id]=\"id\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"value\"\n (input)=\"onInput($event)\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (keyup)=\"onKeyup($event)\"\n (keydown)=\"onKeydown($event)\"\n (keypress)=\"onKeypress($event)\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [required]=\"required\"\n [attr.pattern]=\"pattern\"\n [autofocus]=\"autofocus\">\n</div>\n", styles: [".form-group{font-family:Inter;font-size:1rem;font-weight:700}.custom-input{font-family:Inter;color:#333;font-size:.9rem;width:227px;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}label{font-family:Inter;font-size:16px;line-height:19.36px;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type:
|
1509
|
+
], ngImport: i0, template: "<div class=\"form-group\">\n <label [for]=\"id\" [ngStyle]=\"getLabelStyles()\">{{ label }}</label>\n <input [type]=\"type\"\n class=\"form-control custom-input\"\n [id]=\"id\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"value\"\n (input)=\"onInput($event)\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (keyup)=\"onKeyup($event)\"\n (keydown)=\"onKeydown($event)\"\n (keypress)=\"onKeypress($event)\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [required]=\"required\"\n [attr.pattern]=\"pattern\"\n [autofocus]=\"autofocus\">\n</div>\n", styles: [".form-group{font-family:Inter;font-size:1rem;font-weight:700}.custom-input{font-family:Inter;color:#333;font-size:.9rem;width:227px;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}label{font-family:Inter;font-size:16px;line-height:19.36px;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
1398
1510
|
}
|
1399
1511
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchInputComponent, decorators: [{
|
1400
1512
|
type: Component,
|
@@ -1459,7 +1571,7 @@ class SelectComponent {
|
|
1459
1571
|
this.changeEvent = new EventEmitter();
|
1460
1572
|
this.onChangeCallback = () => { };
|
1461
1573
|
this.onTouchedCallback = () => { };
|
1462
|
-
this.
|
1574
|
+
this.destroy$ = new Subject();
|
1463
1575
|
}
|
1464
1576
|
onSelectChange(event) {
|
1465
1577
|
const selectElement = event.target;
|
@@ -1479,6 +1591,14 @@ class SelectComponent {
|
|
1479
1591
|
setDisabledState(isDisabled) {
|
1480
1592
|
this.disabled = isDisabled;
|
1481
1593
|
}
|
1594
|
+
ngOnChanges(changes) {
|
1595
|
+
if (changes['options'] && changes['options'].currentValue !== changes['options'].previousValue) {
|
1596
|
+
this.updateOptions(changes['options'].currentValue);
|
1597
|
+
}
|
1598
|
+
}
|
1599
|
+
updateOptions(newOptions) {
|
1600
|
+
this.options = newOptions;
|
1601
|
+
}
|
1482
1602
|
hasPermission() {
|
1483
1603
|
if (!this.permissions || this.permissions.length === 0) {
|
1484
1604
|
return true;
|
@@ -1497,7 +1617,8 @@ class SelectComponent {
|
|
1497
1617
|
}
|
1498
1618
|
}
|
1499
1619
|
ngOnDestroy() {
|
1500
|
-
this.
|
1620
|
+
this.destroy$.next();
|
1621
|
+
this.destroy$.complete();
|
1501
1622
|
}
|
1502
1623
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
|
1503
1624
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectComponent, selector: "argenta-custom-select", inputs: { label: "label", id: "id", disabled: "disabled", options: "options", permissions: "permissions" }, outputs: { changeEvent: "changeEvent" }, providers: [
|
@@ -1506,7 +1627,7 @@ class SelectComponent {
|
|
1506
1627
|
useExisting: forwardRef(() => SelectComponent),
|
1507
1628
|
multi: true
|
1508
1629
|
}
|
1509
|
-
], ngImport: i0, template: `
|
1630
|
+
], usesOnChanges: true, ngImport: i0, template: `
|
1510
1631
|
<div *ngIf="hasPermission()" class="form-group">
|
1511
1632
|
<label [for]="id" [ngClass]="'label-styles'">{{ label }}</label>
|
1512
1633
|
<div class="select-container">
|
@@ -1520,7 +1641,7 @@ class SelectComponent {
|
|
1520
1641
|
<lucide-icon name="chevron-down" [size]="16" color="#5E6366" [strokeWidth]="1.75"></lucide-icon>
|
1521
1642
|
</div>
|
1522
1643
|
</div>
|
1523
|
-
`, isInline: true, 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;font-weight:700}.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;font-weight:700}.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:.5rem}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type:
|
1644
|
+
`, isInline: true, 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;font-weight:700}.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;font-weight:700}.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:.5rem}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: i4$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
1524
1645
|
}
|
1525
1646
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectComponent, decorators: [{
|
1526
1647
|
type: Component,
|
@@ -1735,11 +1856,11 @@ class DataTableComponent {
|
|
1735
1856
|
this.onButtonClick.emit(); // Emitindo o evento
|
1736
1857
|
}
|
1737
1858
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AuthService }, { token: RefreshService }], target: i0.ɵɵFactoryTarget.Component }); }
|
1738
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataTableComponent, selector: "argenta-list-data-table", inputs: { columns: "columns", hiddenColumns: "hiddenColumns", defaultItemsPerPage: "defaultItemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", showActionColumn: "showActionColumn", actionColumnLabel: "actionColumnLabel", totalItems: "totalItems", fetchDataFunction: "fetchDataFunction", editPermissions: "editPermissions", deletePermissions: "deletePermissions", viewPermissions: "viewPermissions", showPageInfo: "showPageInfo", pageText: "pageText", ofText: "ofText", filterDescription: "filterDescription", buttonLabel: "buttonLabel" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable", onButtonClick: "onButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"data-table-header\" style=\"margin-top: 2.5rem;\">\n <div class=\"left-section\">\n <div class=\"form-group\">\n <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{ itemsPerPageLabel }}</label>\n <select\n id=\"itemsPerPageSelect\"\n class=\"form-control form-control-sm d-inline-block w-auto custom-select\"\n [(ngModel)]=\"defaultItemsPerPage\"\n (ngModelChange)=\"onItemsPerPageChange()\">\n <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n </div>\n <div class=\"right-section\">\n <button class=\"custom-button\" (click)=\"onNewButtonClick()\">\n <lucide-icon name=\"plus\" [size]=\"28\" [strokeWidth]=\"1.75\"></lucide-icon>\n {{ buttonLabel }}\n </button>\n </div>\n</div>\n\n<div class=\"search-input-container\">\n <argenta-search-input id=\"search\" label=\"\" placeholder=\"
|
1859
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataTableComponent, selector: "argenta-list-data-table", inputs: { columns: "columns", hiddenColumns: "hiddenColumns", defaultItemsPerPage: "defaultItemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", showActionColumn: "showActionColumn", actionColumnLabel: "actionColumnLabel", totalItems: "totalItems", fetchDataFunction: "fetchDataFunction", editPermissions: "editPermissions", deletePermissions: "deletePermissions", viewPermissions: "viewPermissions", showPageInfo: "showPageInfo", pageText: "pageText", ofText: "ofText", filterDescription: "filterDescription", buttonLabel: "buttonLabel" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable", onButtonClick: "onButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"data-table-header\" style=\"margin-top: 2.5rem;\">\n <div class=\"left-section\">\n <div class=\"form-group\">\n <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{ itemsPerPageLabel }}</label>\n <select\n id=\"itemsPerPageSelect\"\n class=\"form-control form-control-sm d-inline-block w-auto custom-select\"\n [(ngModel)]=\"defaultItemsPerPage\"\n (ngModelChange)=\"onItemsPerPageChange()\">\n <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n </div>\n <div class=\"right-section\">\n <button class=\"custom-button\" (click)=\"onNewButtonClick()\">\n <lucide-icon name=\"plus\" [size]=\"28\" [strokeWidth]=\"1.75\"></lucide-icon>\n {{ buttonLabel }}\n </button>\n </div>\n</div>\n\n<div class=\"search-input-container\">\n <argenta-search-input id=\"search\" label=\"\" placeholder=\"Buscar\" [(ngModel)]=\"filterDescription\" (search)=\"onSearch($event)\"></argenta-search-input>\n</div>\n\n<div class=\"table-responsive\" style=\"margin-top: 1rem;\">\n <table class=\"table table-hover\">\n <thead>\n <tr>\n <ng-container *ngFor=\"let column of columns\">\n <th *ngIf=\"!isColumnHidden(column.prop)\" (click)=\"onSort(column.prop)\">\n {{ column.label }}\n </th>\n </ng-container>\n <th *ngIf=\"showActionColumn\" class=\"text-end\" style=\"padding-right: 6.3rem;\">{{ actionColumnLabel }}</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of pagedData; let i = index\">\n <ng-container *ngFor=\"let column of columns\">\n <td *ngIf=\"!isColumnHidden(column.prop)\">\n {{ item[column.prop] }}\n </td>\n </ng-container>\n <td *ngIf=\"showActionColumn\" class=\"text-end\">\n <div class=\"d-flex justify-content-end\">\n <div *ngIf=\"hasPermission(editPermissions) && onEditTable.observers.length > 0\" (click)=\"handleAction('edit', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n <lucide-icon name=\"square-pen\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n </div>\n <div *ngIf=\"hasPermission(viewPermissions) && onViewTable.observers.length > 0\" (click)=\"handleAction('view', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n <lucide-icon name=\"user-round\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n </div>\n <div *ngIf=\"hasPermission(deletePermissions) && onDeleteTable.observers.length > 0\" (click)=\"handleAction('delete', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n <i-lucide name=\"trash-2\" [size]=\"20\" color=\"#F26E6E\" [strokeWidth]=\"1.75\"></i-lucide>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"text-center pagination-controls\">\n <custom-pagination\n [totalItems]=\"totalItems\"\n [itemsPerPage]=\"defaultItemsPerPage\"\n [currentPage]=\"currentPage\"\n [showPageInfo]=\"showPageInfo\"\n (pageChange)=\"onPageChange($event)\">\n </custom-pagination>\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}.clickable-icon{cursor:pointer}:host{font-family:Inter,Arial,sans-serif}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:-.2rem}.left-section,.right-section{display:flex;align-items:center}.search-input-container{display:flex;justify-content:flex-start}.left-section .form-group{display:flex;align-items:center}.items-per-page-label{font-family:Inter,Arial,sans-serif;font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:Inter,Arial,sans-serif;font-size:14px;color:#666;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px;border:1px solid #ccc;border-radius:.25rem;padding:.375rem 1.75rem .375rem .75rem;appearance:none;-webkit-appearance:none;-moz-appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.table{font-family:Inter,Arial,sans-serif;font-size:var(--table-font-size, 14px);color:var(--table-font-color, #737B7B);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}.table thead tr{height:60px}.table thead th{background-color:#00444c;color:#fff;font-family:Inter,Arial,sans-serif;font-size:13px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{text-align:left;padding-left:1.4rem}.table tbody td{font-family:Inter,Arial,sans-serif;font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table tbody tr:last-child td{border-bottom:.1rem solid #dcdcdc}.table tbody td{border-right:none;border-left:none}.table thead th:first-child{border-top-left-radius:0}.table thead th:last-child{border-top-right-radius:0}.table tbody tr:last-child td:first-child{border-bottom-left-radius:0}.table tbody tr:last-child td:last-child{border-bottom-right-radius:0}.btn-icon{width:24px;height:24px;background-size:cover;display:inline-block;cursor:pointer;margin-right:16px}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.custom-button{display:flex;align-items:center;padding:.5rem 1rem .5rem .5rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:Inter,sans-serif;font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:#2ca58d;border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{background-color:#217d6b}.custom-button:active{background-color:#3acaae}.custom-button:focus{outline:none;box-shadow:0 0 0 .2rem #2ca58d40}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: i4$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: CustomPaginationComponent, selector: "custom-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "showPageInfo"], outputs: ["pageChange"] }, { kind: "component", type: SearchInputComponent, selector: "argenta-search-input", inputs: ["id", "label", "type", "placeholder", "value", "disabled", "readonly", "autofocus", "maxlength", "minlength", "required", "pattern", "debounceTime"], outputs: ["search", "inputChange", "change", "focus", "blur", "keyup", "keydown", "keypress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
1739
1860
|
}
|
1740
1861
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, decorators: [{
|
1741
1862
|
type: Component,
|
1742
|
-
args: [{ selector: 'argenta-list-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"data-table-header\" style=\"margin-top: 2.5rem;\">\n <div class=\"left-section\">\n <div class=\"form-group\">\n <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{ itemsPerPageLabel }}</label>\n <select\n id=\"itemsPerPageSelect\"\n class=\"form-control form-control-sm d-inline-block w-auto custom-select\"\n [(ngModel)]=\"defaultItemsPerPage\"\n (ngModelChange)=\"onItemsPerPageChange()\">\n <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n </div>\n <div class=\"right-section\">\n <button class=\"custom-button\" (click)=\"onNewButtonClick()\">\n <lucide-icon name=\"plus\" [size]=\"28\" [strokeWidth]=\"1.75\"></lucide-icon>\n {{ buttonLabel }}\n </button>\n </div>\n</div>\n\n<div class=\"search-input-container\">\n <argenta-search-input id=\"search\" label=\"\" placeholder=\"
|
1863
|
+
args: [{ selector: 'argenta-list-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"data-table-header\" style=\"margin-top: 2.5rem;\">\n <div class=\"left-section\">\n <div class=\"form-group\">\n <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{ itemsPerPageLabel }}</label>\n <select\n id=\"itemsPerPageSelect\"\n class=\"form-control form-control-sm d-inline-block w-auto custom-select\"\n [(ngModel)]=\"defaultItemsPerPage\"\n (ngModelChange)=\"onItemsPerPageChange()\">\n <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n </div>\n <div class=\"right-section\">\n <button class=\"custom-button\" (click)=\"onNewButtonClick()\">\n <lucide-icon name=\"plus\" [size]=\"28\" [strokeWidth]=\"1.75\"></lucide-icon>\n {{ buttonLabel }}\n </button>\n </div>\n</div>\n\n<div class=\"search-input-container\">\n <argenta-search-input id=\"search\" label=\"\" placeholder=\"Buscar\" [(ngModel)]=\"filterDescription\" (search)=\"onSearch($event)\"></argenta-search-input>\n</div>\n\n<div class=\"table-responsive\" style=\"margin-top: 1rem;\">\n <table class=\"table table-hover\">\n <thead>\n <tr>\n <ng-container *ngFor=\"let column of columns\">\n <th *ngIf=\"!isColumnHidden(column.prop)\" (click)=\"onSort(column.prop)\">\n {{ column.label }}\n </th>\n </ng-container>\n <th *ngIf=\"showActionColumn\" class=\"text-end\" style=\"padding-right: 6.3rem;\">{{ actionColumnLabel }}</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of pagedData; let i = index\">\n <ng-container *ngFor=\"let column of columns\">\n <td *ngIf=\"!isColumnHidden(column.prop)\">\n {{ item[column.prop] }}\n </td>\n </ng-container>\n <td *ngIf=\"showActionColumn\" class=\"text-end\">\n <div class=\"d-flex justify-content-end\">\n <div *ngIf=\"hasPermission(editPermissions) && onEditTable.observers.length > 0\" (click)=\"handleAction('edit', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n <lucide-icon name=\"square-pen\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n </div>\n <div *ngIf=\"hasPermission(viewPermissions) && onViewTable.observers.length > 0\" (click)=\"handleAction('view', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n <lucide-icon name=\"user-round\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n </div>\n <div *ngIf=\"hasPermission(deletePermissions) && onDeleteTable.observers.length > 0\" (click)=\"handleAction('delete', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n <i-lucide name=\"trash-2\" [size]=\"20\" color=\"#F26E6E\" [strokeWidth]=\"1.75\"></i-lucide>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"text-center pagination-controls\">\n <custom-pagination\n [totalItems]=\"totalItems\"\n [itemsPerPage]=\"defaultItemsPerPage\"\n [currentPage]=\"currentPage\"\n [showPageInfo]=\"showPageInfo\"\n (pageChange)=\"onPageChange($event)\">\n </custom-pagination>\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}.clickable-icon{cursor:pointer}:host{font-family:Inter,Arial,sans-serif}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:-.2rem}.left-section,.right-section{display:flex;align-items:center}.search-input-container{display:flex;justify-content:flex-start}.left-section .form-group{display:flex;align-items:center}.items-per-page-label{font-family:Inter,Arial,sans-serif;font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:Inter,Arial,sans-serif;font-size:14px;color:#666;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px;border:1px solid #ccc;border-radius:.25rem;padding:.375rem 1.75rem .375rem .75rem;appearance:none;-webkit-appearance:none;-moz-appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.table{font-family:Inter,Arial,sans-serif;font-size:var(--table-font-size, 14px);color:var(--table-font-color, #737B7B);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}.table thead tr{height:60px}.table thead th{background-color:#00444c;color:#fff;font-family:Inter,Arial,sans-serif;font-size:13px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{text-align:left;padding-left:1.4rem}.table tbody td{font-family:Inter,Arial,sans-serif;font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table tbody tr:last-child td{border-bottom:.1rem solid #dcdcdc}.table tbody td{border-right:none;border-left:none}.table thead th:first-child{border-top-left-radius:0}.table thead th:last-child{border-top-right-radius:0}.table tbody tr:last-child td:first-child{border-bottom-left-radius:0}.table tbody tr:last-child td:last-child{border-bottom-right-radius:0}.btn-icon{width:24px;height:24px;background-size:cover;display:inline-block;cursor:pointer;margin-right:16px}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.custom-button{display:flex;align-items:center;padding:.5rem 1rem .5rem .5rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:Inter,sans-serif;font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:#2ca58d;border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{background-color:#217d6b}.custom-button:active{background-color:#3acaae}.custom-button:focus{outline:none;box-shadow:0 0 0 .2rem #2ca58d40}\n"] }]
|
1743
1864
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AuthService }, { type: RefreshService }]; }, propDecorators: { columns: [{
|
1744
1865
|
type: Input
|
1745
1866
|
}], hiddenColumns: [{
|
@@ -2034,7 +2155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2034
2155
|
// Select some icons (use an object, not an array)
|
2035
2156
|
class LucideIconsModule {
|
2036
2157
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
2037
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, imports: [i4.LucideAngularModule], exports: [LucideAngularModule] }); }
|
2158
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, imports: [i4$1.LucideAngularModule], exports: [LucideAngularModule] }); }
|
2038
2159
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, imports: [LucideAngularModule.pick(icons), LucideAngularModule] }); }
|
2039
2160
|
}
|
2040
2161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, decorators: [{
|
@@ -2065,7 +2186,8 @@ class ComponentsModule {
|
|
2065
2186
|
TreeNodeComponent,
|
2066
2187
|
SearchInputComponent,
|
2067
2188
|
AppBackgroundComponent,
|
2068
|
-
BasicRegistrationComponent
|
2189
|
+
BasicRegistrationComponent,
|
2190
|
+
CustomSwitchComponent], imports: [CommonModule,
|
2069
2191
|
FormsModule,
|
2070
2192
|
ReactiveFormsModule,
|
2071
2193
|
NgSelectModule,
|
@@ -2090,7 +2212,8 @@ class ComponentsModule {
|
|
2090
2212
|
SearchInputComponent,
|
2091
2213
|
LucideIconsModule,
|
2092
2214
|
AppBackgroundComponent,
|
2093
|
-
BasicRegistrationComponent
|
2215
|
+
BasicRegistrationComponent,
|
2216
|
+
CustomSwitchComponent] }); }
|
2094
2217
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
|
2095
2218
|
FormsModule,
|
2096
2219
|
ReactiveFormsModule,
|
@@ -2123,6 +2246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2123
2246
|
SearchInputComponent,
|
2124
2247
|
AppBackgroundComponent,
|
2125
2248
|
BasicRegistrationComponent,
|
2249
|
+
CustomSwitchComponent,
|
2126
2250
|
],
|
2127
2251
|
imports: [
|
2128
2252
|
CommonModule,
|
@@ -2154,6 +2278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2154
2278
|
LucideIconsModule,
|
2155
2279
|
AppBackgroundComponent,
|
2156
2280
|
BasicRegistrationComponent,
|
2281
|
+
CustomSwitchComponent,
|
2157
2282
|
],
|
2158
2283
|
}]
|
2159
2284
|
}] });
|
@@ -2242,7 +2367,7 @@ class DataPaginateService {
|
|
2242
2367
|
};
|
2243
2368
|
}));
|
2244
2369
|
}
|
2245
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, deps: [{ token:
|
2370
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, deps: [{ token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
2246
2371
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, providedIn: 'root' }); }
|
2247
2372
|
}
|
2248
2373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, decorators: [{
|
@@ -2250,7 +2375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2250
2375
|
args: [{
|
2251
2376
|
providedIn: 'root'
|
2252
2377
|
}]
|
2253
|
-
}], ctorParameters: function () { return [{ type:
|
2378
|
+
}], ctorParameters: function () { return [{ type: i2.HttpClient }]; } });
|
2254
2379
|
|
2255
2380
|
class RouterParameterService {
|
2256
2381
|
constructor() {
|
@@ -2315,5 +2440,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2315
2440
|
* Generated bundle index. Do not edit.
|
2316
2441
|
*/
|
2317
2442
|
|
2318
|
-
export { AlertComponent, AppBackgroundComponent, BadgeComponent, BasicRegistrationComponent, ButtonClasses, ButtonComponent, CardComponent, CheckboxComponent, CodeHighlightComponent, ComponentsModule, ConfirmationComponent, ConfirmationService, CustomPaginationComponent, DataPaginateService, DataTableComponent, InputComponent, LibPortalAngularModule, LucideIconsModule, MultiSelectComponent, NotificationService, RadioComponent, RefreshService, RouterParameterService, SearchInputComponent, SelectComponent, TextareaComponent, TreeNodeComponent };
|
2443
|
+
export { AlertComponent, AppBackgroundComponent, BadgeComponent, BasicRegistrationComponent, ButtonClasses, ButtonComponent, CardComponent, CheckboxComponent, CodeHighlightComponent, ComponentsModule, ConfirmationComponent, ConfirmationService, CustomPaginationComponent, CustomSwitchComponent, DataPaginateService, DataTableComponent, InputComponent, LibPortalAngularModule, LucideIconsModule, MultiSelectComponent, NotificationService, RadioComponent, RefreshService, RouterParameterService, SearchInputComponent, SelectComponent, TextareaComponent, TreeNodeComponent };
|
2319
2444
|
//# sourceMappingURL=lib-portal-angular.mjs.map
|