lib-portal-angular 0.0.52 → 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/multi-select/multi-select.component.mjs +132 -41
- package/esm2022/lib/components/select/select.component.mjs +14 -4
- package/esm2022/lib/components/tables/data-table.component.mjs +3 -3
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/lib-portal-angular.mjs +237 -91
- package/fesm2022/lib-portal-angular.mjs.map +1 -1
- package/lib/components/components.module.d.ts +6 -5
- package/lib/components/custom-switch/custom-switch.component.d.ts +15 -0
- package/lib/components/multi-select/multi-select.component.d.ts +20 -5
- package/lib/components/select/select.component.d.ts +8 -3
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -1,21 +1,98 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, forwardRef, ViewChild, Directive, NgModule, createComponent } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i4 from '@angular/forms';
|
|
6
6
|
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
7
7
|
import hljs from 'highlight.js';
|
|
8
8
|
import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
|
|
9
9
|
import { Subject, of, Subscription, Observable } from 'rxjs';
|
|
10
|
-
import
|
|
10
|
+
import { debounceTime, startWith, switchMap, map, catchError, takeUntil } from 'rxjs/operators';
|
|
11
|
+
import * as i2 from '@angular/common/http';
|
|
12
|
+
import { HttpParams } from '@angular/common/http';
|
|
13
|
+
import * as i5 from '@ng-select/ng-select';
|
|
11
14
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
12
|
-
import
|
|
13
|
-
import * as i4 from 'lucide-angular';
|
|
15
|
+
import * as i4$1 from 'lucide-angular';
|
|
14
16
|
import { LucideAngularModule, icons } from 'lucide-angular';
|
|
15
|
-
import * as i1$2 from '@angular/common/http';
|
|
16
|
-
import { HttpParams } from '@angular/common/http';
|
|
17
17
|
import * as CryptoJS from 'crypto-js';
|
|
18
18
|
|
|
19
|
+
class AuthService {
|
|
20
|
+
constructor() {
|
|
21
|
+
this.userRoles = [];
|
|
22
|
+
this.loadUserRoles();
|
|
23
|
+
}
|
|
24
|
+
loadUserRoles() {
|
|
25
|
+
const storedUser = localStorage.getItem('user');
|
|
26
|
+
if (!storedUser) {
|
|
27
|
+
throw new Error('User not found in localStorage');
|
|
28
|
+
}
|
|
29
|
+
const { role } = JSON.parse(storedUser);
|
|
30
|
+
if (!role || !Array.isArray(role)) {
|
|
31
|
+
throw new Error('Roles not found or invalid in localStorage');
|
|
32
|
+
}
|
|
33
|
+
this.userRoles = role.flatMap((roleArray) => roleArray.map(role => role.toString()));
|
|
34
|
+
}
|
|
35
|
+
hasPermission(requiredPermissions) {
|
|
36
|
+
if (this.userRoles.length === 0) {
|
|
37
|
+
throw new Error('No roles found for the user');
|
|
38
|
+
}
|
|
39
|
+
return requiredPermissions.every(permission => this.userRoles.includes(permission));
|
|
40
|
+
}
|
|
41
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
42
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthService, providedIn: 'root' }); }
|
|
43
|
+
}
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthService, decorators: [{
|
|
45
|
+
type: Injectable,
|
|
46
|
+
args: [{
|
|
47
|
+
providedIn: 'root'
|
|
48
|
+
}]
|
|
49
|
+
}], ctorParameters: function () { return []; } });
|
|
50
|
+
|
|
51
|
+
class CustomSwitchComponent {
|
|
52
|
+
constructor(authService) {
|
|
53
|
+
this.authService = authService;
|
|
54
|
+
this.checked = false;
|
|
55
|
+
this.label = '';
|
|
56
|
+
this.permissions = [];
|
|
57
|
+
this.switchChange = new EventEmitter();
|
|
58
|
+
}
|
|
59
|
+
toggleSwitch() {
|
|
60
|
+
this.checked = !this.checked;
|
|
61
|
+
this.switchChange.emit(this.checked);
|
|
62
|
+
}
|
|
63
|
+
hasPermission() {
|
|
64
|
+
if (!this.permissions || this.permissions.length === 0) {
|
|
65
|
+
return true;
|
|
66
|
+
}
|
|
67
|
+
try {
|
|
68
|
+
return this.authService.hasPermission(this.permissions);
|
|
69
|
+
}
|
|
70
|
+
catch (error) {
|
|
71
|
+
if (error instanceof Error) {
|
|
72
|
+
console.error('Permission error:', error.message);
|
|
73
|
+
}
|
|
74
|
+
else {
|
|
75
|
+
console.error('Unknown error occurred during permission check');
|
|
76
|
+
}
|
|
77
|
+
return true;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomSwitchComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
81
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomSwitchComponent, selector: "argenta-custom-switch", inputs: { checked: "checked", label: "label", permissions: "permissions" }, outputs: { switchChange: "switchChange" }, ngImport: i0, template: "<ng-container *ngIf=\"hasPermission()\">\n <div class=\"form-check form-switch\">\n <input \n class=\"form-check-input\" \n type=\"checkbox\" \n [checked]=\"checked\" \n (change)=\"toggleSwitch()\" \n id=\"flexSwitchCheckDefault\" \n />\n <label class=\"form-check-label\" for=\"flexSwitchCheckDefault\">\n {{ label }}\n </label>\n </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.form-check{display:flex;align-items:center}.form-check-input{width: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: [{
|
|
@@ -978,7 +1023,7 @@ class InputComponent {
|
|
|
978
1023
|
[attr.pattern]="pattern"
|
|
979
1024
|
[autofocus]="autofocus">
|
|
980
1025
|
</div>
|
|
981
|
-
`, isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem;font-weight:700}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select,.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type:
|
|
1026
|
+
`, isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem;font-weight:700}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select,.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
982
1027
|
}
|
|
983
1028
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
|
|
984
1029
|
type: Component,
|
|
@@ -1055,25 +1100,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1055
1100
|
}] } });
|
|
1056
1101
|
|
|
1057
1102
|
class MultiSelectComponent {
|
|
1058
|
-
constructor() {
|
|
1103
|
+
constructor(authService, http) {
|
|
1104
|
+
this.authService = authService;
|
|
1105
|
+
this.http = http;
|
|
1059
1106
|
this.label = 'Multi Select';
|
|
1060
|
-
this.data = []; //
|
|
1107
|
+
this.data = []; // Accepts an array of generic objects
|
|
1061
1108
|
this.placeholder = 'Select items';
|
|
1062
|
-
this.selected = []; //
|
|
1109
|
+
this.selected = []; // The selected variable should be an array
|
|
1063
1110
|
this.id = 'multiSelectId';
|
|
1064
|
-
this.bindLabel = ''; //
|
|
1065
|
-
this.
|
|
1066
|
-
this.
|
|
1067
|
-
this.
|
|
1068
|
-
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
|
|
1069
1115
|
this.keyupEvent = new EventEmitter();
|
|
1070
|
-
this.
|
|
1116
|
+
this.originalData = []; // Store the original list
|
|
1117
|
+
this.allItems = []; // Store the combined list
|
|
1118
|
+
this.items = of([]); // Initialization of the property
|
|
1119
|
+
this.filteredItems = of([]); // Filtered items
|
|
1120
|
+
this.searchTerms = new Subject(); // For search debounce
|
|
1121
|
+
this.backendItems = []; // Items found from backend
|
|
1071
1122
|
this.onChangeCallback = () => { };
|
|
1072
1123
|
this.onTouchedCallback = () => { };
|
|
1073
1124
|
this.isCourseEntered = false;
|
|
1125
|
+
this.compareFn = (item1, item2) => {
|
|
1126
|
+
return item1 && item2 ? item1[this.bindValue] === item2[this.bindValue] : item1 === item2;
|
|
1127
|
+
};
|
|
1074
1128
|
}
|
|
1075
1129
|
ngOnInit() {
|
|
1076
|
-
this.
|
|
1130
|
+
this.originalData = [...this.data]; // Preserve the original data
|
|
1131
|
+
this.allItems = [...this.data]; // Initialize allItems with the original data
|
|
1132
|
+
this.items = of(this.allItems);
|
|
1133
|
+
this.filteredItems = this.searchTerms.pipe(debounceTime(700), startWith(''), // Start with an empty search to load the original list
|
|
1134
|
+
switchMap(term => this.search(term)));
|
|
1077
1135
|
}
|
|
1078
1136
|
onFocus() {
|
|
1079
1137
|
this.isCourseEntered = true;
|
|
@@ -1084,6 +1142,66 @@ class MultiSelectComponent {
|
|
|
1084
1142
|
onKeyUp(event) {
|
|
1085
1143
|
this.keyupEvent.emit(event);
|
|
1086
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
|
+
}
|
|
1087
1205
|
writeValue(value) {
|
|
1088
1206
|
this.selected = value || [];
|
|
1089
1207
|
}
|
|
@@ -1096,31 +1214,47 @@ class MultiSelectComponent {
|
|
|
1096
1214
|
setDisabledState(isDisabled) {
|
|
1097
1215
|
// No implementation needed for this example
|
|
1098
1216
|
}
|
|
1099
|
-
|
|
1100
|
-
|
|
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: [
|
|
1101
1236
|
{
|
|
1102
1237
|
provide: NG_VALUE_ACCESSOR,
|
|
1103
1238
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
1104
1239
|
multi: true
|
|
1105
1240
|
}
|
|
1106
1241
|
], ngImport: i0, template: `
|
|
1107
|
-
<div class="form-group"
|
|
1108
|
-
'margin-top': marginTop + 'rem',
|
|
1109
|
-
'margin-bottom': marginBottom + 'rem',
|
|
1110
|
-
'margin-left': marginLeft + 'rem',
|
|
1111
|
-
'margin-right': marginRight + 'rem'
|
|
1112
|
-
}">
|
|
1242
|
+
<div *ngIf="hasPermission()" class="form-group">
|
|
1113
1243
|
<label [for]="id" class="form-label">{{ label }}</label>
|
|
1114
1244
|
<ng-select
|
|
1115
1245
|
[class.course-entry]="isCourseEntered"
|
|
1116
1246
|
class="ng-select"
|
|
1117
|
-
[items]="
|
|
1247
|
+
[items]="filteredItems | async"
|
|
1118
1248
|
[multiple]="true"
|
|
1119
|
-
[closeOnSelect]="
|
|
1249
|
+
[closeOnSelect]="closeOnSelect"
|
|
1120
1250
|
[hideSelected]="true"
|
|
1121
1251
|
[bindLabel]="bindLabel"
|
|
1252
|
+
[bindValue]="bindValue"
|
|
1122
1253
|
[(ngModel)]="selected"
|
|
1254
|
+
[compareWith]="compareFn"
|
|
1255
|
+
(change)="onSelectedChange($event)"
|
|
1123
1256
|
(keyup)="onKeyUp($event)"
|
|
1257
|
+
(input)="onInputChange($event)"
|
|
1124
1258
|
[id]="id"
|
|
1125
1259
|
[placeholder]="selected && selected.length === 0 ? placeholder : ''"
|
|
1126
1260
|
(focus)="onFocus()"
|
|
@@ -1131,28 +1265,27 @@ class MultiSelectComponent {
|
|
|
1131
1265
|
</ng-template>
|
|
1132
1266
|
</ng-select>
|
|
1133
1267
|
</div>
|
|
1134
|
-
`, 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 }); }
|
|
1135
1269
|
}
|
|
1136
1270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
1137
1271
|
type: Component,
|
|
1138
|
-
args: [{ selector: '
|
|
1139
|
-
<div class="form-group"
|
|
1140
|
-
'margin-top': marginTop + 'rem',
|
|
1141
|
-
'margin-bottom': marginBottom + 'rem',
|
|
1142
|
-
'margin-left': marginLeft + 'rem',
|
|
1143
|
-
'margin-right': marginRight + 'rem'
|
|
1144
|
-
}">
|
|
1272
|
+
args: [{ selector: 'argenta-custom-multi-select', template: `
|
|
1273
|
+
<div *ngIf="hasPermission()" class="form-group">
|
|
1145
1274
|
<label [for]="id" class="form-label">{{ label }}</label>
|
|
1146
1275
|
<ng-select
|
|
1147
1276
|
[class.course-entry]="isCourseEntered"
|
|
1148
1277
|
class="ng-select"
|
|
1149
|
-
[items]="
|
|
1278
|
+
[items]="filteredItems | async"
|
|
1150
1279
|
[multiple]="true"
|
|
1151
|
-
[closeOnSelect]="
|
|
1280
|
+
[closeOnSelect]="closeOnSelect"
|
|
1152
1281
|
[hideSelected]="true"
|
|
1153
1282
|
[bindLabel]="bindLabel"
|
|
1283
|
+
[bindValue]="bindValue"
|
|
1154
1284
|
[(ngModel)]="selected"
|
|
1285
|
+
[compareWith]="compareFn"
|
|
1286
|
+
(change)="onSelectedChange($event)"
|
|
1155
1287
|
(keyup)="onKeyUp($event)"
|
|
1288
|
+
(input)="onInputChange($event)"
|
|
1156
1289
|
[id]="id"
|
|
1157
1290
|
[placeholder]="selected && selected.length === 0 ? placeholder : ''"
|
|
1158
1291
|
(focus)="onFocus()"
|
|
@@ -1169,8 +1302,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1169
1302
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
1170
1303
|
multi: true
|
|
1171
1304
|
}
|
|
1172
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".form-group{font-family:Arial,sans-serif;font-size:1rem}.form-label{font-weight:
|
|
1173
|
-
}], 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: [{
|
|
1174
1307
|
type: Input
|
|
1175
1308
|
}], data: [{
|
|
1176
1309
|
type: Input
|
|
@@ -1182,13 +1315,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1182
1315
|
type: Input
|
|
1183
1316
|
}], bindLabel: [{
|
|
1184
1317
|
type: Input
|
|
1185
|
-
}],
|
|
1318
|
+
}], bindValue: [{
|
|
1186
1319
|
type: Input
|
|
1187
|
-
}],
|
|
1320
|
+
}], permissions: [{
|
|
1188
1321
|
type: Input
|
|
1189
|
-
}],
|
|
1322
|
+
}], closeOnSelect: [{
|
|
1190
1323
|
type: Input
|
|
1191
|
-
}],
|
|
1324
|
+
}], searchUrl: [{
|
|
1192
1325
|
type: Input
|
|
1193
1326
|
}], keyupEvent: [{
|
|
1194
1327
|
type: Output
|
|
@@ -1394,7 +1527,7 @@ class SearchInputComponent {
|
|
|
1394
1527
|
useExisting: forwardRef(() => SearchInputComponent),
|
|
1395
1528
|
multi: true
|
|
1396
1529
|
}
|
|
1397
|
-
], ngImport: i0, template: "<div class=\"form-group\">\n <label [for]=\"id\" [ngStyle]=\"getLabelStyles()\">{{ label }}</label>\n <input [type]=\"type\"\n class=\"form-control custom-input\"\n [id]=\"id\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"value\"\n (input)=\"onInput($event)\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (keyup)=\"onKeyup($event)\"\n (keydown)=\"onKeydown($event)\"\n (keypress)=\"onKeypress($event)\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [required]=\"required\"\n [attr.pattern]=\"pattern\"\n [autofocus]=\"autofocus\">\n</div>\n", styles: [".form-group{font-family:Inter;font-size:1rem;font-weight:700}.custom-input{font-family:Inter;color:#333;font-size:.9rem;width:227px;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}label{font-family:Inter;font-size:16px;line-height:19.36px;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type:
|
|
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"] }] }); }
|
|
1398
1531
|
}
|
|
1399
1532
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchInputComponent, decorators: [{
|
|
1400
1533
|
type: Component,
|
|
@@ -1459,7 +1592,7 @@ class SelectComponent {
|
|
|
1459
1592
|
this.changeEvent = new EventEmitter();
|
|
1460
1593
|
this.onChangeCallback = () => { };
|
|
1461
1594
|
this.onTouchedCallback = () => { };
|
|
1462
|
-
this.
|
|
1595
|
+
this.destroy$ = new Subject();
|
|
1463
1596
|
}
|
|
1464
1597
|
onSelectChange(event) {
|
|
1465
1598
|
const selectElement = event.target;
|
|
@@ -1479,6 +1612,14 @@ class SelectComponent {
|
|
|
1479
1612
|
setDisabledState(isDisabled) {
|
|
1480
1613
|
this.disabled = isDisabled;
|
|
1481
1614
|
}
|
|
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
|
+
}
|
|
1482
1623
|
hasPermission() {
|
|
1483
1624
|
if (!this.permissions || this.permissions.length === 0) {
|
|
1484
1625
|
return true;
|
|
@@ -1497,7 +1638,8 @@ class SelectComponent {
|
|
|
1497
1638
|
}
|
|
1498
1639
|
}
|
|
1499
1640
|
ngOnDestroy() {
|
|
1500
|
-
this.
|
|
1641
|
+
this.destroy$.next();
|
|
1642
|
+
this.destroy$.complete();
|
|
1501
1643
|
}
|
|
1502
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 }); }
|
|
1503
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: [
|
|
@@ -1506,7 +1648,7 @@ class SelectComponent {
|
|
|
1506
1648
|
useExisting: forwardRef(() => SelectComponent),
|
|
1507
1649
|
multi: true
|
|
1508
1650
|
}
|
|
1509
|
-
], ngImport: i0, template: `
|
|
1651
|
+
], usesOnChanges: true, ngImport: i0, template: `
|
|
1510
1652
|
<div *ngIf="hasPermission()" class="form-group">
|
|
1511
1653
|
<label [for]="id" [ngClass]="'label-styles'">{{ label }}</label>
|
|
1512
1654
|
<div class="select-container">
|
|
@@ -1520,7 +1662,7 @@ class SelectComponent {
|
|
|
1520
1662
|
<lucide-icon name="chevron-down" [size]="16" color="#5E6366" [strokeWidth]="1.75"></lucide-icon>
|
|
1521
1663
|
</div>
|
|
1522
1664
|
</div>
|
|
1523
|
-
`, isInline: true, styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem;font-weight:700}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem 2rem .5rem .5rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;background-repeat:no-repeat;background-position:right .5rem center}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type:
|
|
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 }); }
|
|
1524
1666
|
}
|
|
1525
1667
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1526
1668
|
type: Component,
|
|
@@ -1735,11 +1877,11 @@ class DataTableComponent {
|
|
|
1735
1877
|
this.onButtonClick.emit(); // Emitindo o evento
|
|
1736
1878
|
}
|
|
1737
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 }); }
|
|
1738
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataTableComponent, selector: "argenta-list-data-table", inputs: { columns: "columns", hiddenColumns: "hiddenColumns", defaultItemsPerPage: "defaultItemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", showActionColumn: "showActionColumn", actionColumnLabel: "actionColumnLabel", totalItems: "totalItems", fetchDataFunction: "fetchDataFunction", editPermissions: "editPermissions", deletePermissions: "deletePermissions", viewPermissions: "viewPermissions", showPageInfo: "showPageInfo", pageText: "pageText", ofText: "ofText", filterDescription: "filterDescription", buttonLabel: "buttonLabel" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable", onButtonClick: "onButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"data-table-header\" style=\"margin-top: 2.5rem;\">\n <div class=\"left-section\">\n <div class=\"form-group\">\n <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{ itemsPerPageLabel }}</label>\n <select\n id=\"itemsPerPageSelect\"\n class=\"form-control form-control-sm d-inline-block w-auto custom-select\"\n [(ngModel)]=\"defaultItemsPerPage\"\n (ngModelChange)=\"onItemsPerPageChange()\">\n <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n </div>\n <div class=\"right-section\">\n <button class=\"custom-button\" (click)=\"onNewButtonClick()\">\n <lucide-icon name=\"plus\" [size]=\"28\" [strokeWidth]=\"1.75\"></lucide-icon>\n {{ buttonLabel }}\n </button>\n </div>\n</div>\n\n<div class=\"search-input-container\">\n <argenta-search-input id=\"search\" label=\"\" placeholder=\"
|
|
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 }); }
|
|
1739
1881
|
}
|
|
1740
1882
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
1741
1883
|
type: Component,
|
|
1742
|
-
args: [{ selector: 'argenta-list-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"data-table-header\" style=\"margin-top: 2.5rem;\">\n <div class=\"left-section\">\n <div class=\"form-group\">\n <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{ itemsPerPageLabel }}</label>\n <select\n id=\"itemsPerPageSelect\"\n class=\"form-control form-control-sm d-inline-block w-auto custom-select\"\n [(ngModel)]=\"defaultItemsPerPage\"\n (ngModelChange)=\"onItemsPerPageChange()\">\n <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n </div>\n <div class=\"right-section\">\n <button class=\"custom-button\" (click)=\"onNewButtonClick()\">\n <lucide-icon name=\"plus\" [size]=\"28\" [strokeWidth]=\"1.75\"></lucide-icon>\n {{ buttonLabel }}\n </button>\n </div>\n</div>\n\n<div class=\"search-input-container\">\n <argenta-search-input id=\"search\" label=\"\" placeholder=\"
|
|
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"] }]
|
|
1743
1885
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AuthService }, { type: RefreshService }]; }, propDecorators: { columns: [{
|
|
1744
1886
|
type: Input
|
|
1745
1887
|
}], hiddenColumns: [{
|
|
@@ -2034,7 +2176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2034
2176
|
// Select some icons (use an object, not an array)
|
|
2035
2177
|
class LucideIconsModule {
|
|
2036
2178
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2037
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, imports: [i4.LucideAngularModule], exports: [LucideAngularModule] }); }
|
|
2179
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, imports: [i4$1.LucideAngularModule], exports: [LucideAngularModule] }); }
|
|
2038
2180
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, imports: [LucideAngularModule.pick(icons), LucideAngularModule] }); }
|
|
2039
2181
|
}
|
|
2040
2182
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, decorators: [{
|
|
@@ -2065,7 +2207,8 @@ class ComponentsModule {
|
|
|
2065
2207
|
TreeNodeComponent,
|
|
2066
2208
|
SearchInputComponent,
|
|
2067
2209
|
AppBackgroundComponent,
|
|
2068
|
-
BasicRegistrationComponent
|
|
2210
|
+
BasicRegistrationComponent,
|
|
2211
|
+
CustomSwitchComponent], imports: [CommonModule,
|
|
2069
2212
|
FormsModule,
|
|
2070
2213
|
ReactiveFormsModule,
|
|
2071
2214
|
NgSelectModule,
|
|
@@ -2090,7 +2233,8 @@ class ComponentsModule {
|
|
|
2090
2233
|
SearchInputComponent,
|
|
2091
2234
|
LucideIconsModule,
|
|
2092
2235
|
AppBackgroundComponent,
|
|
2093
|
-
BasicRegistrationComponent
|
|
2236
|
+
BasicRegistrationComponent,
|
|
2237
|
+
CustomSwitchComponent] }); }
|
|
2094
2238
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
|
|
2095
2239
|
FormsModule,
|
|
2096
2240
|
ReactiveFormsModule,
|
|
@@ -2123,6 +2267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2123
2267
|
SearchInputComponent,
|
|
2124
2268
|
AppBackgroundComponent,
|
|
2125
2269
|
BasicRegistrationComponent,
|
|
2270
|
+
CustomSwitchComponent,
|
|
2126
2271
|
],
|
|
2127
2272
|
imports: [
|
|
2128
2273
|
CommonModule,
|
|
@@ -2154,6 +2299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2154
2299
|
LucideIconsModule,
|
|
2155
2300
|
AppBackgroundComponent,
|
|
2156
2301
|
BasicRegistrationComponent,
|
|
2302
|
+
CustomSwitchComponent,
|
|
2157
2303
|
],
|
|
2158
2304
|
}]
|
|
2159
2305
|
}] });
|
|
@@ -2242,7 +2388,7 @@ class DataPaginateService {
|
|
|
2242
2388
|
};
|
|
2243
2389
|
}));
|
|
2244
2390
|
}
|
|
2245
|
-
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 }); }
|
|
2246
2392
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, providedIn: 'root' }); }
|
|
2247
2393
|
}
|
|
2248
2394
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, decorators: [{
|
|
@@ -2250,7 +2396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2250
2396
|
args: [{
|
|
2251
2397
|
providedIn: 'root'
|
|
2252
2398
|
}]
|
|
2253
|
-
}], ctorParameters: function () { return [{ type:
|
|
2399
|
+
}], ctorParameters: function () { return [{ type: i2.HttpClient }]; } });
|
|
2254
2400
|
|
|
2255
2401
|
class RouterParameterService {
|
|
2256
2402
|
constructor() {
|
|
@@ -2315,5 +2461,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2315
2461
|
* Generated bundle index. Do not edit.
|
|
2316
2462
|
*/
|
|
2317
2463
|
|
|
2318
|
-
export { AlertComponent, AppBackgroundComponent, BadgeComponent, BasicRegistrationComponent, ButtonClasses, ButtonComponent, CardComponent, CheckboxComponent, CodeHighlightComponent, ComponentsModule, ConfirmationComponent, ConfirmationService, CustomPaginationComponent, DataPaginateService, DataTableComponent, InputComponent, LibPortalAngularModule, LucideIconsModule, MultiSelectComponent, NotificationService, RadioComponent, RefreshService, RouterParameterService, SearchInputComponent, SelectComponent, TextareaComponent, TreeNodeComponent };
|
|
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 };
|
|
2319
2465
|
//# sourceMappingURL=lib-portal-angular.mjs.map
|