lib-portal-angular 0.0.51 → 0.0.53
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/imput/input.component.mjs +5 -20
- package/esm2022/lib/components/multi-select/multi-select.component.mjs +132 -41
- package/esm2022/lib/components/select/select.component.mjs +71 -51
- package/esm2022/lib/components/tables/data-table.component.mjs +3 -3
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/lib-portal-angular.mjs +291 -152
- 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/imput/input.component.d.ts +0 -13
- package/lib/components/multi-select/multi-select.component.d.ts +20 -5
- package/lib/components/select/select.component.d.ts +15 -7
- 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 i5 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:50px;height:24px;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-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:50px;height:24px;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-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: [{
|
|
@@ -945,21 +990,6 @@ class InputComponent {
|
|
|
945
990
|
return true;
|
|
946
991
|
}
|
|
947
992
|
}
|
|
948
|
-
getLabelStyles() {
|
|
949
|
-
return {
|
|
950
|
-
'font-weight': this.labelFontWeight,
|
|
951
|
-
'width': '623px',
|
|
952
|
-
'height': '19px',
|
|
953
|
-
'top': '1608px',
|
|
954
|
-
'left': '133px',
|
|
955
|
-
'gap': '0px',
|
|
956
|
-
'opacity': '0px',
|
|
957
|
-
'font-family': 'Inter',
|
|
958
|
-
'font-size': '16px',
|
|
959
|
-
'line-height': '19.36px',
|
|
960
|
-
'text-align': 'left'
|
|
961
|
-
};
|
|
962
|
-
}
|
|
963
993
|
ngOnDestroy() {
|
|
964
994
|
this.subscriptions.forEach(sub => sub.unsubscribe());
|
|
965
995
|
}
|
|
@@ -972,7 +1002,7 @@ class InputComponent {
|
|
|
972
1002
|
}
|
|
973
1003
|
], ngImport: i0, template: `
|
|
974
1004
|
<div *ngIf="hasPermission()" class="form-group">
|
|
975
|
-
<label [for]="id" [
|
|
1005
|
+
<label [for]="id" [ngClass]="'label-styles'">{{ label }}</label>
|
|
976
1006
|
<input [type]="type"
|
|
977
1007
|
class="form-control custom-input"
|
|
978
1008
|
[id]="id"
|
|
@@ -993,13 +1023,13 @@ class InputComponent {
|
|
|
993
1023
|
[attr.pattern]="pattern"
|
|
994
1024
|
[autofocus]="autofocus">
|
|
995
1025
|
</div>
|
|
996
|
-
`, isInline: true, styles: [".form-group{font-family:Inter;font-size:1rem;font-weight:700}.form-check-input{font-family:Inter;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter;font-size:16px;line-height:19.36px;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.
|
|
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 }); }
|
|
997
1027
|
}
|
|
998
1028
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
|
|
999
1029
|
type: Component,
|
|
1000
1030
|
args: [{ selector: 'argenta-custom-input', template: `
|
|
1001
1031
|
<div *ngIf="hasPermission()" class="form-group">
|
|
1002
|
-
<label [for]="id" [
|
|
1032
|
+
<label [for]="id" [ngClass]="'label-styles'">{{ label }}</label>
|
|
1003
1033
|
<input [type]="type"
|
|
1004
1034
|
class="form-control custom-input"
|
|
1005
1035
|
[id]="id"
|
|
@@ -1026,7 +1056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1026
1056
|
useExisting: forwardRef(() => InputComponent),
|
|
1027
1057
|
multi: true
|
|
1028
1058
|
}
|
|
1029
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".form-group{font-family:Inter;font-size:1rem;font-weight:700}.form-check-input{font-family:Inter;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter;font-size:16px;line-height:19.36px;text-align:left}\n"] }]
|
|
1059
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
1030
1060
|
}], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { label: [{
|
|
1031
1061
|
type: Input
|
|
1032
1062
|
}], placeholder: [{
|
|
@@ -1070,25 +1100,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1070
1100
|
}] } });
|
|
1071
1101
|
|
|
1072
1102
|
class MultiSelectComponent {
|
|
1073
|
-
constructor() {
|
|
1103
|
+
constructor(authService, http) {
|
|
1104
|
+
this.authService = authService;
|
|
1105
|
+
this.http = http;
|
|
1074
1106
|
this.label = 'Multi Select';
|
|
1075
|
-
this.data = []; //
|
|
1107
|
+
this.data = []; // Accepts an array of generic objects
|
|
1076
1108
|
this.placeholder = 'Select items';
|
|
1077
|
-
this.selected = []; //
|
|
1109
|
+
this.selected = []; // The selected variable should be an array
|
|
1078
1110
|
this.id = 'multiSelectId';
|
|
1079
|
-
this.bindLabel = ''; //
|
|
1080
|
-
this.
|
|
1081
|
-
this.
|
|
1082
|
-
this.
|
|
1083
|
-
this.marginRight = 0;
|
|
1111
|
+
this.bindLabel = ''; // Generic dynamic label
|
|
1112
|
+
this.bindValue = ''; // Generic dynamic value
|
|
1113
|
+
this.closeOnSelect = false; // New property to control dropdown close behavior
|
|
1114
|
+
this.searchUrl = ''; // URL for backend search
|
|
1084
1115
|
this.keyupEvent = new EventEmitter();
|
|
1085
|
-
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
|
|
1086
1122
|
this.onChangeCallback = () => { };
|
|
1087
1123
|
this.onTouchedCallback = () => { };
|
|
1088
1124
|
this.isCourseEntered = false;
|
|
1125
|
+
this.compareFn = (item1, item2) => {
|
|
1126
|
+
return item1 && item2 ? item1[this.bindValue] === item2[this.bindValue] : item1 === item2;
|
|
1127
|
+
};
|
|
1089
1128
|
}
|
|
1090
1129
|
ngOnInit() {
|
|
1091
|
-
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
|
+
this.filteredItems = this.searchTerms.pipe(debounceTime(700), startWith(''), // Start with an empty search to load the original list
|
|
1134
|
+
switchMap(term => this.search(term)));
|
|
1092
1135
|
}
|
|
1093
1136
|
onFocus() {
|
|
1094
1137
|
this.isCourseEntered = true;
|
|
@@ -1099,6 +1142,66 @@ class MultiSelectComponent {
|
|
|
1099
1142
|
onKeyUp(event) {
|
|
1100
1143
|
this.keyupEvent.emit(event);
|
|
1101
1144
|
}
|
|
1145
|
+
onSelectedChange(event) {
|
|
1146
|
+
const newlySelectedItems = event.filter((item) => !this.selected.includes(item));
|
|
1147
|
+
this.selected = event;
|
|
1148
|
+
// Check if any newly selected item is from backendItems
|
|
1149
|
+
const addedFromBackend = this.backendItems.filter((item) => newlySelectedItems.includes(item));
|
|
1150
|
+
if (addedFromBackend.length > 0) {
|
|
1151
|
+
// Transform the backend items to match the format expected by the component
|
|
1152
|
+
const transformedItems = addedFromBackend.map((item) => ({
|
|
1153
|
+
[this.bindValue]: item[this.bindValue],
|
|
1154
|
+
[this.bindLabel]: item[this.bindLabel]
|
|
1155
|
+
}));
|
|
1156
|
+
// Add backend items to the allItems list and update the observable
|
|
1157
|
+
this.originalData = [...this.originalData, ...transformedItems];
|
|
1158
|
+
this.allItems = [...this.originalData];
|
|
1159
|
+
this.items = of(this.allItems); // Update the observable with new data
|
|
1160
|
+
this.backendItems = []; // Clear backend items after processing
|
|
1161
|
+
this.searchTerms.next(''); // Reset the search term to update the list
|
|
1162
|
+
console.log('Added items from backend to the list and reset the dropdown.');
|
|
1163
|
+
}
|
|
1164
|
+
this.onChangeCallback(this.selected);
|
|
1165
|
+
}
|
|
1166
|
+
onInputChange(event) {
|
|
1167
|
+
const input = event.target.value;
|
|
1168
|
+
this.searchTerms.next(input);
|
|
1169
|
+
}
|
|
1170
|
+
search(term) {
|
|
1171
|
+
if (!term.trim()) {
|
|
1172
|
+
// If the search term is empty, show the complete list
|
|
1173
|
+
return of(this.allItems);
|
|
1174
|
+
}
|
|
1175
|
+
const filtered = this.allItems.filter((item) => item[this.bindLabel].toLowerCase().includes(term.toLowerCase()));
|
|
1176
|
+
if (filtered.length > 0) {
|
|
1177
|
+
console.log('Items filtered locally.');
|
|
1178
|
+
return of(filtered);
|
|
1179
|
+
}
|
|
1180
|
+
else if (this.searchUrl) {
|
|
1181
|
+
return this.http.get(`${this.searchUrl}?term=${term}`).pipe(map((response) => {
|
|
1182
|
+
if (response && response.length > 0) {
|
|
1183
|
+
// Transform the backend items to match the format expected by the component
|
|
1184
|
+
const transformedItems = response.map((item) => ({
|
|
1185
|
+
[this.bindValue]: item[this.bindValue],
|
|
1186
|
+
[this.bindLabel]: item[this.bindLabel]
|
|
1187
|
+
}));
|
|
1188
|
+
this.backendItems = transformedItems;
|
|
1189
|
+
return [...filtered, ...transformedItems];
|
|
1190
|
+
}
|
|
1191
|
+
else {
|
|
1192
|
+
console.log('No items found in the backend search.');
|
|
1193
|
+
return filtered;
|
|
1194
|
+
}
|
|
1195
|
+
}), catchError((error) => {
|
|
1196
|
+
console.error('Error fetching from backend:', error);
|
|
1197
|
+
return of(filtered);
|
|
1198
|
+
}));
|
|
1199
|
+
}
|
|
1200
|
+
else {
|
|
1201
|
+
console.log('No search URL provided and no items found locally.');
|
|
1202
|
+
return of(filtered);
|
|
1203
|
+
}
|
|
1204
|
+
}
|
|
1102
1205
|
writeValue(value) {
|
|
1103
1206
|
this.selected = value || [];
|
|
1104
1207
|
}
|
|
@@ -1111,31 +1214,47 @@ class MultiSelectComponent {
|
|
|
1111
1214
|
setDisabledState(isDisabled) {
|
|
1112
1215
|
// No implementation needed for this example
|
|
1113
1216
|
}
|
|
1114
|
-
|
|
1115
|
-
|
|
1217
|
+
hasPermission() {
|
|
1218
|
+
if (!this.permissions || this.permissions.length === 0) {
|
|
1219
|
+
return true;
|
|
1220
|
+
}
|
|
1221
|
+
try {
|
|
1222
|
+
return this.authService.hasPermission(this.permissions);
|
|
1223
|
+
}
|
|
1224
|
+
catch (error) {
|
|
1225
|
+
if (error instanceof Error) {
|
|
1226
|
+
console.error('Permission error:', error.message);
|
|
1227
|
+
}
|
|
1228
|
+
else {
|
|
1229
|
+
console.error('Unknown error occurred during permission check');
|
|
1230
|
+
}
|
|
1231
|
+
return true;
|
|
1232
|
+
}
|
|
1233
|
+
}
|
|
1234
|
+
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 }); }
|
|
1235
|
+
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" }, outputs: { keyupEvent: "keyupEvent" }, providers: [
|
|
1116
1236
|
{
|
|
1117
1237
|
provide: NG_VALUE_ACCESSOR,
|
|
1118
1238
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
1119
1239
|
multi: true
|
|
1120
1240
|
}
|
|
1121
1241
|
], ngImport: i0, template: `
|
|
1122
|
-
<div class="form-group"
|
|
1123
|
-
'margin-top': marginTop + 'rem',
|
|
1124
|
-
'margin-bottom': marginBottom + 'rem',
|
|
1125
|
-
'margin-left': marginLeft + 'rem',
|
|
1126
|
-
'margin-right': marginRight + 'rem'
|
|
1127
|
-
}">
|
|
1242
|
+
<div *ngIf="hasPermission()" class="form-group">
|
|
1128
1243
|
<label [for]="id" class="form-label">{{ label }}</label>
|
|
1129
1244
|
<ng-select
|
|
1130
1245
|
[class.course-entry]="isCourseEntered"
|
|
1131
1246
|
class="ng-select"
|
|
1132
|
-
[items]="
|
|
1247
|
+
[items]="filteredItems | async"
|
|
1133
1248
|
[multiple]="true"
|
|
1134
|
-
[closeOnSelect]="
|
|
1249
|
+
[closeOnSelect]="closeOnSelect"
|
|
1135
1250
|
[hideSelected]="true"
|
|
1136
1251
|
[bindLabel]="bindLabel"
|
|
1252
|
+
[bindValue]="bindValue"
|
|
1137
1253
|
[(ngModel)]="selected"
|
|
1254
|
+
[compareWith]="compareFn"
|
|
1255
|
+
(change)="onSelectedChange($event)"
|
|
1138
1256
|
(keyup)="onKeyUp($event)"
|
|
1257
|
+
(input)="onInputChange($event)"
|
|
1139
1258
|
[id]="id"
|
|
1140
1259
|
[placeholder]="selected && selected.length === 0 ? placeholder : ''"
|
|
1141
1260
|
(focus)="onFocus()"
|
|
@@ -1146,28 +1265,27 @@ class MultiSelectComponent {
|
|
|
1146
1265
|
</ng-template>
|
|
1147
1266
|
</ng-select>
|
|
1148
1267
|
</div>
|
|
1149
|
-
`, isInline: true, styles: [".form-group{font-family:Arial,sans-serif;font-size:1rem}.form-label{font-weight:
|
|
1268
|
+
`, 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}.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}\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 }); }
|
|
1150
1269
|
}
|
|
1151
1270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
1152
1271
|
type: Component,
|
|
1153
|
-
args: [{ selector: '
|
|
1154
|
-
<div class="form-group"
|
|
1155
|
-
'margin-top': marginTop + 'rem',
|
|
1156
|
-
'margin-bottom': marginBottom + 'rem',
|
|
1157
|
-
'margin-left': marginLeft + 'rem',
|
|
1158
|
-
'margin-right': marginRight + 'rem'
|
|
1159
|
-
}">
|
|
1272
|
+
args: [{ selector: 'argenta-custom-multi-select', template: `
|
|
1273
|
+
<div *ngIf="hasPermission()" class="form-group">
|
|
1160
1274
|
<label [for]="id" class="form-label">{{ label }}</label>
|
|
1161
1275
|
<ng-select
|
|
1162
1276
|
[class.course-entry]="isCourseEntered"
|
|
1163
1277
|
class="ng-select"
|
|
1164
|
-
[items]="
|
|
1278
|
+
[items]="filteredItems | async"
|
|
1165
1279
|
[multiple]="true"
|
|
1166
|
-
[closeOnSelect]="
|
|
1280
|
+
[closeOnSelect]="closeOnSelect"
|
|
1167
1281
|
[hideSelected]="true"
|
|
1168
1282
|
[bindLabel]="bindLabel"
|
|
1283
|
+
[bindValue]="bindValue"
|
|
1169
1284
|
[(ngModel)]="selected"
|
|
1285
|
+
[compareWith]="compareFn"
|
|
1286
|
+
(change)="onSelectedChange($event)"
|
|
1170
1287
|
(keyup)="onKeyUp($event)"
|
|
1288
|
+
(input)="onInputChange($event)"
|
|
1171
1289
|
[id]="id"
|
|
1172
1290
|
[placeholder]="selected && selected.length === 0 ? placeholder : ''"
|
|
1173
1291
|
(focus)="onFocus()"
|
|
@@ -1184,8 +1302,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1184
1302
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
1185
1303
|
multi: true
|
|
1186
1304
|
}
|
|
1187
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".form-group{font-family:Arial,sans-serif;font-size:1rem}.form-label{font-weight:
|
|
1188
|
-
}], propDecorators: { label: [{
|
|
1305
|
+
], 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}\n"] }]
|
|
1306
|
+
}], ctorParameters: function () { return [{ type: AuthService }, { type: i2.HttpClient }]; }, propDecorators: { label: [{
|
|
1189
1307
|
type: Input
|
|
1190
1308
|
}], data: [{
|
|
1191
1309
|
type: Input
|
|
@@ -1197,13 +1315,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1197
1315
|
type: Input
|
|
1198
1316
|
}], bindLabel: [{
|
|
1199
1317
|
type: Input
|
|
1200
|
-
}],
|
|
1318
|
+
}], bindValue: [{
|
|
1201
1319
|
type: Input
|
|
1202
|
-
}],
|
|
1320
|
+
}], permissions: [{
|
|
1203
1321
|
type: Input
|
|
1204
|
-
}],
|
|
1322
|
+
}], closeOnSelect: [{
|
|
1205
1323
|
type: Input
|
|
1206
|
-
}],
|
|
1324
|
+
}], searchUrl: [{
|
|
1207
1325
|
type: Input
|
|
1208
1326
|
}], keyupEvent: [{
|
|
1209
1327
|
type: Output
|
|
@@ -1409,7 +1527,7 @@ class SearchInputComponent {
|
|
|
1409
1527
|
useExisting: forwardRef(() => SearchInputComponent),
|
|
1410
1528
|
multi: true
|
|
1411
1529
|
}
|
|
1412
|
-
], 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:
|
|
1530
|
+
], 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"] }] }); }
|
|
1413
1531
|
}
|
|
1414
1532
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchInputComponent, decorators: [{
|
|
1415
1533
|
type: Component,
|
|
@@ -1465,18 +1583,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1465
1583
|
}] } });
|
|
1466
1584
|
|
|
1467
1585
|
class SelectComponent {
|
|
1468
|
-
constructor() {
|
|
1586
|
+
constructor(authService) {
|
|
1587
|
+
this.authService = authService;
|
|
1469
1588
|
this.label = 'Default Label';
|
|
1470
1589
|
this.id = 'selectId';
|
|
1471
1590
|
this.disabled = false;
|
|
1472
1591
|
this.options = [];
|
|
1473
|
-
this.marginTop = 0;
|
|
1474
|
-
this.marginBottom = 0;
|
|
1475
|
-
this.marginLeft = 0;
|
|
1476
|
-
this.marginRight = 0;
|
|
1477
1592
|
this.changeEvent = new EventEmitter();
|
|
1478
1593
|
this.onChangeCallback = () => { };
|
|
1479
1594
|
this.onTouchedCallback = () => { };
|
|
1595
|
+
this.destroy$ = new Subject();
|
|
1480
1596
|
}
|
|
1481
1597
|
onSelectChange(event) {
|
|
1482
1598
|
const selectElement = event.target;
|
|
@@ -1496,48 +1612,73 @@ class SelectComponent {
|
|
|
1496
1612
|
setDisabledState(isDisabled) {
|
|
1497
1613
|
this.disabled = isDisabled;
|
|
1498
1614
|
}
|
|
1499
|
-
|
|
1500
|
-
|
|
1615
|
+
ngOnChanges(changes) {
|
|
1616
|
+
if (changes['options'] && changes['options'].currentValue !== changes['options'].previousValue) {
|
|
1617
|
+
this.updateOptions(changes['options'].currentValue);
|
|
1618
|
+
}
|
|
1619
|
+
}
|
|
1620
|
+
updateOptions(newOptions) {
|
|
1621
|
+
this.options = newOptions;
|
|
1622
|
+
}
|
|
1623
|
+
hasPermission() {
|
|
1624
|
+
if (!this.permissions || this.permissions.length === 0) {
|
|
1625
|
+
return true;
|
|
1626
|
+
}
|
|
1627
|
+
try {
|
|
1628
|
+
return this.authService.hasPermission(this.permissions);
|
|
1629
|
+
}
|
|
1630
|
+
catch (error) {
|
|
1631
|
+
if (error instanceof Error) {
|
|
1632
|
+
console.error('Permission error:', error.message);
|
|
1633
|
+
}
|
|
1634
|
+
else {
|
|
1635
|
+
console.error('Unknown error occurred during permission check');
|
|
1636
|
+
}
|
|
1637
|
+
return true;
|
|
1638
|
+
}
|
|
1639
|
+
}
|
|
1640
|
+
ngOnDestroy() {
|
|
1641
|
+
this.destroy$.next();
|
|
1642
|
+
this.destroy$.complete();
|
|
1643
|
+
}
|
|
1644
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1645
|
+
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: [
|
|
1501
1646
|
{
|
|
1502
1647
|
provide: NG_VALUE_ACCESSOR,
|
|
1503
1648
|
useExisting: forwardRef(() => SelectComponent),
|
|
1504
1649
|
multi: true
|
|
1505
1650
|
}
|
|
1506
|
-
], ngImport: i0, template: `
|
|
1507
|
-
<div class="form-group"
|
|
1508
|
-
'
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
<option *ngFor="let option of options" [value]="option.value">{{ option.label }}</option>
|
|
1520
|
-
</select>
|
|
1651
|
+
], usesOnChanges: true, ngImport: i0, template: `
|
|
1652
|
+
<div *ngIf="hasPermission()" class="form-group">
|
|
1653
|
+
<label [for]="id" [ngClass]="'label-styles'">{{ label }}</label>
|
|
1654
|
+
<div class="select-container">
|
|
1655
|
+
<select class="form-control custom-select"
|
|
1656
|
+
[id]="id"
|
|
1657
|
+
[value]="value"
|
|
1658
|
+
(change)="onSelectChange($event)"
|
|
1659
|
+
[disabled]="disabled">
|
|
1660
|
+
<option *ngFor="let option of options" [value]="option.value">{{ option.label }}</option>
|
|
1661
|
+
</select>
|
|
1662
|
+
<lucide-icon name="chevron-down" [size]="16" color="#5E6366" [strokeWidth]="1.75"></lucide-icon>
|
|
1663
|
+
</div>
|
|
1521
1664
|
</div>
|
|
1522
|
-
`, isInline: true, styles: [".form-group{
|
|
1665
|
+
`, 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 }); }
|
|
1523
1666
|
}
|
|
1524
1667
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1525
1668
|
type: Component,
|
|
1526
|
-
args: [{ selector: '
|
|
1527
|
-
<div class="form-group"
|
|
1528
|
-
'
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
<option *ngFor="let option of options" [value]="option.value">{{ option.label }}</option>
|
|
1540
|
-
</select>
|
|
1669
|
+
args: [{ selector: 'argenta-custom-select', template: `
|
|
1670
|
+
<div *ngIf="hasPermission()" class="form-group">
|
|
1671
|
+
<label [for]="id" [ngClass]="'label-styles'">{{ label }}</label>
|
|
1672
|
+
<div class="select-container">
|
|
1673
|
+
<select class="form-control custom-select"
|
|
1674
|
+
[id]="id"
|
|
1675
|
+
[value]="value"
|
|
1676
|
+
(change)="onSelectChange($event)"
|
|
1677
|
+
[disabled]="disabled">
|
|
1678
|
+
<option *ngFor="let option of options" [value]="option.value">{{ option.label }}</option>
|
|
1679
|
+
</select>
|
|
1680
|
+
<lucide-icon name="chevron-down" [size]="16" color="#5E6366" [strokeWidth]="1.75"></lucide-icon>
|
|
1681
|
+
</div>
|
|
1541
1682
|
</div>
|
|
1542
1683
|
`, providers: [
|
|
1543
1684
|
{
|
|
@@ -1545,8 +1686,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1545
1686
|
useExisting: forwardRef(() => SelectComponent),
|
|
1546
1687
|
multi: true
|
|
1547
1688
|
}
|
|
1548
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".form-group{
|
|
1549
|
-
}], propDecorators: { label: [{
|
|
1689
|
+
], 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;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"] }]
|
|
1690
|
+
}], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { label: [{
|
|
1550
1691
|
type: Input
|
|
1551
1692
|
}], id: [{
|
|
1552
1693
|
type: Input
|
|
@@ -1554,13 +1695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1554
1695
|
type: Input
|
|
1555
1696
|
}], options: [{
|
|
1556
1697
|
type: Input
|
|
1557
|
-
}],
|
|
1558
|
-
type: Input
|
|
1559
|
-
}], marginBottom: [{
|
|
1560
|
-
type: Input
|
|
1561
|
-
}], marginLeft: [{
|
|
1562
|
-
type: Input
|
|
1563
|
-
}], marginRight: [{
|
|
1698
|
+
}], permissions: [{
|
|
1564
1699
|
type: Input
|
|
1565
1700
|
}], changeEvent: [{
|
|
1566
1701
|
type: Output
|
|
@@ -1742,11 +1877,11 @@ class DataTableComponent {
|
|
|
1742
1877
|
this.onButtonClick.emit(); // Emitindo o evento
|
|
1743
1878
|
}
|
|
1744
1879
|
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 }); }
|
|
1745
|
-
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\">\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=\"
|
|
1880
|
+
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 }); }
|
|
1746
1881
|
}
|
|
1747
1882
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
1748
1883
|
type: Component,
|
|
1749
|
-
args: [{ selector: 'argenta-list-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"data-table-header\">\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=\"
|
|
1884
|
+
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"] }]
|
|
1750
1885
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AuthService }, { type: RefreshService }]; }, propDecorators: { columns: [{
|
|
1751
1886
|
type: Input
|
|
1752
1887
|
}], hiddenColumns: [{
|
|
@@ -2041,7 +2176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2041
2176
|
// Select some icons (use an object, not an array)
|
|
2042
2177
|
class LucideIconsModule {
|
|
2043
2178
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2044
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, imports: [
|
|
2179
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, imports: [i4$1.LucideAngularModule], exports: [LucideAngularModule] }); }
|
|
2045
2180
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, imports: [LucideAngularModule.pick(icons), LucideAngularModule] }); }
|
|
2046
2181
|
}
|
|
2047
2182
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, decorators: [{
|
|
@@ -2072,7 +2207,8 @@ class ComponentsModule {
|
|
|
2072
2207
|
TreeNodeComponent,
|
|
2073
2208
|
SearchInputComponent,
|
|
2074
2209
|
AppBackgroundComponent,
|
|
2075
|
-
BasicRegistrationComponent
|
|
2210
|
+
BasicRegistrationComponent,
|
|
2211
|
+
CustomSwitchComponent], imports: [CommonModule,
|
|
2076
2212
|
FormsModule,
|
|
2077
2213
|
ReactiveFormsModule,
|
|
2078
2214
|
NgSelectModule,
|
|
@@ -2097,7 +2233,8 @@ class ComponentsModule {
|
|
|
2097
2233
|
SearchInputComponent,
|
|
2098
2234
|
LucideIconsModule,
|
|
2099
2235
|
AppBackgroundComponent,
|
|
2100
|
-
BasicRegistrationComponent
|
|
2236
|
+
BasicRegistrationComponent,
|
|
2237
|
+
CustomSwitchComponent] }); }
|
|
2101
2238
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
|
|
2102
2239
|
FormsModule,
|
|
2103
2240
|
ReactiveFormsModule,
|
|
@@ -2130,6 +2267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2130
2267
|
SearchInputComponent,
|
|
2131
2268
|
AppBackgroundComponent,
|
|
2132
2269
|
BasicRegistrationComponent,
|
|
2270
|
+
CustomSwitchComponent,
|
|
2133
2271
|
],
|
|
2134
2272
|
imports: [
|
|
2135
2273
|
CommonModule,
|
|
@@ -2161,6 +2299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2161
2299
|
LucideIconsModule,
|
|
2162
2300
|
AppBackgroundComponent,
|
|
2163
2301
|
BasicRegistrationComponent,
|
|
2302
|
+
CustomSwitchComponent,
|
|
2164
2303
|
],
|
|
2165
2304
|
}]
|
|
2166
2305
|
}] });
|
|
@@ -2249,7 +2388,7 @@ class DataPaginateService {
|
|
|
2249
2388
|
};
|
|
2250
2389
|
}));
|
|
2251
2390
|
}
|
|
2252
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, deps: [{ token:
|
|
2391
|
+
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 }); }
|
|
2253
2392
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, providedIn: 'root' }); }
|
|
2254
2393
|
}
|
|
2255
2394
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, decorators: [{
|
|
@@ -2257,7 +2396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2257
2396
|
args: [{
|
|
2258
2397
|
providedIn: 'root'
|
|
2259
2398
|
}]
|
|
2260
|
-
}], ctorParameters: function () { return [{ type:
|
|
2399
|
+
}], ctorParameters: function () { return [{ type: i2.HttpClient }]; } });
|
|
2261
2400
|
|
|
2262
2401
|
class RouterParameterService {
|
|
2263
2402
|
constructor() {
|
|
@@ -2322,5 +2461,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2322
2461
|
* Generated bundle index. Do not edit.
|
|
2323
2462
|
*/
|
|
2324
2463
|
|
|
2325
|
-
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 };
|
|
2464
|
+
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 };
|
|
2326
2465
|
//# sourceMappingURL=lib-portal-angular.mjs.map
|