lib-portal-angular 0.0.51 → 0.0.53
Sign up to get free protection for your applications and to get access to all the features.
- 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
|