ln-20-lib-components 0.0.21 → 0.0.23

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.
Files changed (68) hide show
  1. package/fesm2022/{ln-20-lib-components-ln-20-lib-components-CCPElo0q.mjs → ln-20-lib-components-ln-20-lib-components-8f4EprRn.mjs} +3 -2
  2. package/fesm2022/ln-20-lib-components-ln-20-lib-components-8f4EprRn.mjs.map +1 -0
  3. package/fesm2022/{ln-20-lib-components-ln-20-lib-components-DWmur7QC.mjs → ln-20-lib-components-ln-20-lib-components-CRqQg8f2.mjs} +54 -12
  4. package/fesm2022/ln-20-lib-components-ln-20-lib-components-CRqQg8f2.mjs.map +1 -0
  5. package/fesm2022/{ln-20-lib-components-ln-20-lib-components-BUXK0MSP.mjs → ln-20-lib-components-ln-20-lib-components-Cc5ecdIV.mjs} +12 -8
  6. package/fesm2022/ln-20-lib-components-ln-20-lib-components-Cc5ecdIV.mjs.map +1 -0
  7. package/fesm2022/{ln-20-lib-components-selected-items-management.component-B-nBh3Ep.mjs → ln-20-lib-components-selected-items-management.component-BjEQgQFR.mjs} +2 -2
  8. package/fesm2022/{ln-20-lib-components-selected-items-management.component-B-nBh3Ep.mjs.map → ln-20-lib-components-selected-items-management.component-BjEQgQFR.mjs.map} +1 -1
  9. package/fesm2022/{ln-20-lib-components-selected-items-management.component-BCZwVd3Y.mjs → ln-20-lib-components-selected-items-management.component-BzZ6QigF.mjs} +2 -2
  10. package/fesm2022/{ln-20-lib-components-selected-items-management.component-BCZwVd3Y.mjs.map → ln-20-lib-components-selected-items-management.component-BzZ6QigF.mjs.map} +1 -1
  11. package/fesm2022/{ln-20-lib-components-selected-items-management.component-BhFaYf5S.mjs → ln-20-lib-components-selected-items-management.component-DtcrlOxB.mjs} +2 -2
  12. package/fesm2022/{ln-20-lib-components-selected-items-management.component-BhFaYf5S.mjs.map → ln-20-lib-components-selected-items-management.component-DtcrlOxB.mjs.map} +1 -1
  13. package/fesm2022/ln-20-lib-components.mjs +1 -1
  14. package/lib/components/origin/form/index.d.ts +1 -0
  15. package/lib/components/origin/pick-list/components/container-elements/container-elements.component.d.ts +1 -1
  16. package/lib/components/origin/pick-list/pick-list.component.d.ts +2 -2
  17. package/ln-20-lib-components-0.0.23.tgz +0 -0
  18. package/package.json +1 -1
  19. package/fesm2022/ln-20-lib-components-ln-20-lib-components-B25V41uq.mjs +0 -3123
  20. package/fesm2022/ln-20-lib-components-ln-20-lib-components-B25V41uq.mjs.map +0 -1
  21. package/fesm2022/ln-20-lib-components-ln-20-lib-components-BEuylZRH.mjs +0 -3124
  22. package/fesm2022/ln-20-lib-components-ln-20-lib-components-BEuylZRH.mjs.map +0 -1
  23. package/fesm2022/ln-20-lib-components-ln-20-lib-components-BUXK0MSP.mjs.map +0 -1
  24. package/fesm2022/ln-20-lib-components-ln-20-lib-components-CCPElo0q.mjs.map +0 -1
  25. package/fesm2022/ln-20-lib-components-ln-20-lib-components-CUPJus-K.mjs +0 -3185
  26. package/fesm2022/ln-20-lib-components-ln-20-lib-components-CUPJus-K.mjs.map +0 -1
  27. package/fesm2022/ln-20-lib-components-ln-20-lib-components-D1Uef6K2.mjs +0 -3124
  28. package/fesm2022/ln-20-lib-components-ln-20-lib-components-D1Uef6K2.mjs.map +0 -1
  29. package/fesm2022/ln-20-lib-components-ln-20-lib-components-D9U6aJG_.mjs +0 -3124
  30. package/fesm2022/ln-20-lib-components-ln-20-lib-components-D9U6aJG_.mjs.map +0 -1
  31. package/fesm2022/ln-20-lib-components-ln-20-lib-components-DWmur7QC.mjs.map +0 -1
  32. package/fesm2022/ln-20-lib-components-ln-20-lib-components-DjLrfBm4.mjs +0 -3124
  33. package/fesm2022/ln-20-lib-components-ln-20-lib-components-DjLrfBm4.mjs.map +0 -1
  34. package/fesm2022/ln-20-lib-components-ln-20-lib-components-DpjfMHb6.mjs +0 -3124
  35. package/fesm2022/ln-20-lib-components-ln-20-lib-components-DpjfMHb6.mjs.map +0 -1
  36. package/fesm2022/ln-20-lib-components-ln-20-lib-components-VU9YyM5w.mjs +0 -3123
  37. package/fesm2022/ln-20-lib-components-ln-20-lib-components-VU9YyM5w.mjs.map +0 -1
  38. package/fesm2022/ln-20-lib-components-ln-20-lib-components-cBRcSsDx.mjs +0 -3124
  39. package/fesm2022/ln-20-lib-components-ln-20-lib-components-cBRcSsDx.mjs.map +0 -1
  40. package/fesm2022/ln-20-lib-components-ln-20-lib-components-drEBS_nb.mjs +0 -3124
  41. package/fesm2022/ln-20-lib-components-ln-20-lib-components-drEBS_nb.mjs.map +0 -1
  42. package/fesm2022/ln-20-lib-components-selected-items-management.component-BjEvcT0z.mjs +0 -55
  43. package/fesm2022/ln-20-lib-components-selected-items-management.component-BjEvcT0z.mjs.map +0 -1
  44. package/fesm2022/ln-20-lib-components-selected-items-management.component-Bz080gSd.mjs +0 -55
  45. package/fesm2022/ln-20-lib-components-selected-items-management.component-Bz080gSd.mjs.map +0 -1
  46. package/fesm2022/ln-20-lib-components-selected-items-management.component-CC-CL4wx.mjs +0 -55
  47. package/fesm2022/ln-20-lib-components-selected-items-management.component-CC-CL4wx.mjs.map +0 -1
  48. package/fesm2022/ln-20-lib-components-selected-items-management.component-DqP7p5a3.mjs +0 -55
  49. package/fesm2022/ln-20-lib-components-selected-items-management.component-DqP7p5a3.mjs.map +0 -1
  50. package/fesm2022/ln-20-lib-components-selected-items-management.component-Dx4WCILE.mjs +0 -55
  51. package/fesm2022/ln-20-lib-components-selected-items-management.component-Dx4WCILE.mjs.map +0 -1
  52. package/fesm2022/ln-20-lib-components-selected-items-management.component-Lw8konTj.mjs +0 -55
  53. package/fesm2022/ln-20-lib-components-selected-items-management.component-Lw8konTj.mjs.map +0 -1
  54. package/fesm2022/ln-20-lib-components-selected-items-management.component-PNMgQwSq.mjs +0 -55
  55. package/fesm2022/ln-20-lib-components-selected-items-management.component-PNMgQwSq.mjs.map +0 -1
  56. package/fesm2022/ln-20-lib-components-selected-items-management.component-_kQsgC9q.mjs +0 -55
  57. package/fesm2022/ln-20-lib-components-selected-items-management.component-_kQsgC9q.mjs.map +0 -1
  58. package/fesm2022/ln-20-lib-components-selected-items-management.component-kbv7ZZP2.mjs +0 -55
  59. package/fesm2022/ln-20-lib-components-selected-items-management.component-kbv7ZZP2.mjs.map +0 -1
  60. package/fesm2022/ln-20-lib-components-selected-items-management.component-tLy_XEg2.mjs +0 -55
  61. package/fesm2022/ln-20-lib-components-selected-items-management.component-tLy_XEg2.mjs.map +0 -1
  62. package/ln-20-lib-components-0.0.15.tgz +0 -0
  63. package/ln-20-lib-components-0.0.16.tgz +0 -0
  64. package/ln-20-lib-components-0.0.17.tgz +0 -0
  65. package/ln-20-lib-components-0.0.18.tgz +0 -0
  66. package/ln-20-lib-components-0.0.19.tgz +0 -0
  67. package/ln-20-lib-components-0.0.20.tgz +0 -0
  68. package/ln-20-lib-components-0.0.21.tgz +0 -0
@@ -1,3124 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Injectable, Component, model, input, computed, output, forwardRef, ChangeDetectionStrategy, effect, signal, ContentChildren, inject, Pipe, viewChild, ContentChild, ViewChild } from '@angular/core';
3
- import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
4
- import * as i1 from '@angular/forms';
5
- import { ReactiveFormsModule, NG_VALUE_ACCESSOR, FormsModule, NonNullableFormBuilder, FormGroup } from '@angular/forms';
6
- import { switchMap, debounceTime, filter, map, distinctUntilChanged, Subject } from 'rxjs';
7
- import * as i1$1 from '@angular/common';
8
- import { NgClass, CommonModule } from '@angular/common';
9
- import { CheckboxModule } from 'primeng/checkbox';
10
- import * as i2 from 'primeng/datepicker';
11
- import { DatePickerModule } from 'primeng/datepicker';
12
- import { IftaLabelModule } from 'primeng/iftalabel';
13
- import * as i6 from 'primeng/inputotp';
14
- import { InputOtpModule } from 'primeng/inputotp';
15
- import * as i3 from 'primeng/multiselect';
16
- import { MultiSelectModule } from 'primeng/multiselect';
17
- import * as i4 from 'primeng/select';
18
- import { SelectModule } from 'primeng/select';
19
- import * as i5 from 'primeng/togglebutton';
20
- import { ToggleButtonModule } from 'primeng/togglebutton';
21
- import * as i7 from 'primeng/toggleswitch';
22
- import { ToggleSwitchModule } from 'primeng/toggleswitch';
23
- import * as i10 from 'primeng/tooltip';
24
- import { TooltipModule } from 'primeng/tooltip';
25
- import * as i8 from 'primeng/inputnumber';
26
- import { InputNumberModule } from 'primeng/inputnumber';
27
- import * as i9 from 'primeng/textarea';
28
- import { TextareaModule } from 'primeng/textarea';
29
- import * as i2$1 from 'primeng/inputtext';
30
- import { InputTextModule } from 'primeng/inputtext';
31
- import { InputMaskModule } from 'primeng/inputmask';
32
- import * as i9$1 from 'primeng/knob';
33
- import { KnobModule } from 'primeng/knob';
34
- import * as i11 from 'primeng/chip';
35
- import { ChipModule } from 'primeng/chip';
36
- import * as i4$1 from 'primeng/api';
37
- import { PrimeTemplate, FilterService } from 'primeng/api';
38
- import * as i1$2 from 'primeng/button';
39
- import { ButtonModule } from 'primeng/button';
40
- import jsPDF from 'jspdf';
41
- import autoTable from 'jspdf-autotable';
42
- import * as i2$2 from 'primeng/table';
43
- import { TableModule } from 'primeng/table';
44
- import * as XLSX from 'xlsx';
45
- import * as i1$3 from 'primeng/badge';
46
- import { BadgeModule } from 'primeng/badge';
47
- import * as i1$4 from 'primeng/toolbar';
48
- import { ToolbarModule } from 'primeng/toolbar';
49
- import { DialogService, DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog';
50
-
51
- class LibComponentsService {
52
- constructor() { }
53
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LibComponentsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
54
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LibComponentsService, providedIn: 'root' });
55
- }
56
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LibComponentsService, decorators: [{
57
- type: Injectable,
58
- args: [{
59
- providedIn: 'root'
60
- }]
61
- }], ctorParameters: () => [] });
62
-
63
- class LibComponentsComponent {
64
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LibComponentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
65
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: LibComponentsComponent, isStandalone: true, selector: "lib-lib-components", ngImport: i0, template: `
66
- <p>
67
- lib-components works!
68
- </p>
69
- `, isInline: true, styles: [""] });
70
- }
71
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LibComponentsComponent, decorators: [{
72
- type: Component,
73
- args: [{ selector: 'lib-lib-components', imports: [], template: `
74
- <p>
75
- lib-components works!
76
- </p>
77
- ` }]
78
- }] });
79
-
80
- var ETypeInput;
81
- (function (ETypeInput) {
82
- ETypeInput["TEXT"] = "text";
83
- ETypeInput["PASSWORD"] = "password";
84
- ETypeInput["EMAIL"] = "email";
85
- ETypeInput["EMAIL_PASSWORD"] = "email-password";
86
- ETypeInput["NUMBER"] = "number";
87
- ETypeInput["DATE"] = "date";
88
- ETypeInput["TIME"] = "time";
89
- ETypeInput["DATETIME_LOCAL"] = "datetime-local";
90
- ETypeInput["SEARCH"] = "search";
91
- ETypeInput["TEL"] = "tel";
92
- ETypeInput["URL"] = "url";
93
- ETypeInput["COLOR"] = "color";
94
- ETypeInput["MONTH"] = "month";
95
- ETypeInput["WEEK"] = "week";
96
- ETypeInput["FILE"] = "file";
97
- ETypeInput["CHECKBOX"] = "checkbox";
98
- ETypeInput["RADIO"] = "radio";
99
- ETypeInput["RANGE"] = "range";
100
- ETypeInput["HIDDEN"] = "hidden";
101
- ETypeInput["TEXTAREA"] = "textarea";
102
- ETypeInput["SELECT"] = "select";
103
- ETypeInput["MULTISELECT"] = "multiselect";
104
- ETypeInput["AUTOCOMPLETE"] = "autocomplete";
105
- ETypeInput["SWITCH"] = "switch";
106
- ETypeInput["CALENDAR"] = "calendar";
107
- ETypeInput["DROPDOWN"] = "dropdown";
108
- ETypeInput["CHIPS"] = "chips";
109
- ETypeInput["TOGGLE"] = "toggle";
110
- ETypeInput["OTP"] = "otp";
111
- ETypeInput["CURRENCY"] = "currency";
112
- ETypeInput["KNOB"] = "knob";
113
- ETypeInput["BADGE"] = "badge";
114
- ETypeInput["DECIMAL"] = "decimal";
115
- ETypeInput["IMAGE"] = "image";
116
- ETypeInput["COMPONENT"] = "component";
117
- })(ETypeInput || (ETypeInput = {}));
118
-
119
- class DisabledContainerComponent {
120
- disabled = model(false);
121
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DisabledContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
122
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: DisabledContainerComponent, isStandalone: true, selector: "lib-disabled-container", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, ngImport: i0, template: "<fieldset [disabled]=\"disabled()\" class=\"disabled-container\">\r\n <ng-content></ng-content>\r\n</fieldset>\r\n", styles: [".disabled-container{border:none;margin:0;padding:0;min-width:0}.disabled-container:disabled{opacity:.6;cursor:not-allowed}.disabled-container:disabled *{pointer-events:none}\n"] });
123
- }
124
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DisabledContainerComponent, decorators: [{
125
- type: Component,
126
- args: [{ selector: 'lib-disabled-container', imports: [], template: "<fieldset [disabled]=\"disabled()\" class=\"disabled-container\">\r\n <ng-content></ng-content>\r\n</fieldset>\r\n", styles: [".disabled-container{border:none;margin:0;padding:0;min-width:0}.disabled-container:disabled{opacity:.6;cursor:not-allowed}.disabled-container:disabled *{pointer-events:none}\n"] }]
127
- }] });
128
-
129
- class CustomInputComponent {
130
- controlData = input.required();
131
- controlUpperName = computed(() => this.controlData().controlName.toLocaleUpperCase());
132
- showPassword = false;
133
- output = output();
134
- onTouched = () => { };
135
- onChange = (_value) => { };
136
- constructor() { }
137
- writeValue(value) {
138
- if (value !== this.controlData().control.value) {
139
- this.controlData().control.setValue(value, { emitEvent: false });
140
- }
141
- }
142
- get showLabel() {
143
- return !this.controlData().hideLabel;
144
- }
145
- get inputTypesEnum() {
146
- return ETypeInput;
147
- }
148
- onCheckboxChange(event, control) {
149
- const input = event.target;
150
- const isChecked = input.checked;
151
- control.setValue(isChecked);
152
- }
153
- registerOnChange(fn) {
154
- this.onChange = fn;
155
- }
156
- registerOnTouched(fn) {
157
- this.onTouched = fn;
158
- }
159
- // setDisabledState(isDisabled: boolean): void {
160
- // if (isDisabled) {
161
- // this.controlData().control.disable()
162
- // } else {
163
- // this.controlData().control.enable()
164
- // }
165
- // }
166
- generateUniqueId(baseString) {
167
- const timestamp = new Date().getTime();
168
- const random = Math.random().toString(36).substring(2, 8);
169
- return `${baseString}-${timestamp}-${random}`;
170
- }
171
- togglePasswordVisibility() {
172
- this.showPassword = !this.showPassword;
173
- }
174
- onSelectChange() {
175
- this.output.emit(this.controlData());
176
- }
177
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
178
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CustomInputComponent, isStandalone: true, selector: "lib-custom-input", inputs: { controlData: { classPropertyName: "controlData", publicName: "controlData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { output: "output" }, providers: [{
179
- provide: NG_VALUE_ACCESSOR,
180
- useExisting: forwardRef(() => CustomInputComponent),
181
- multi: true
182
- }], ngImport: i0, template: "@let localControl = controlData().control;\r\n@let placeholder = controlData().label || controlUpperName();\r\n@let name = controlData().controlName;\r\n@let typeInput = controlData().typeInput;\r\n@let readonly = controlData().readonly || false;\r\n@let dateConfig = controlData().dateConfig;\r\n@let multiSelectConfig = controlData().multiSelectConfig;\r\n@let selectConfig = controlData().selectConfig;\r\n@let toggleConfig = controlData().toggleConfig;\r\n@let textareaConfig = controlData().textareaConfig;\r\n@let currencyConfig = controlData().currencyConfig;\r\n<div class=\"flex flex-col gap-1 \">\r\n <lib-disabled-container [disabled]=\"readonly\">\r\n\r\n <p style=\"font-size: 12px; letter-spacing: 0.5px;\" class=\"text-sm text-gray-600 dark:text-gray-300 truncate\"\r\n [pTooltip]=\"placeholder\" tooltipPosition=\"top\" [showDelay]=\"300\">\r\n {{ placeholder }}\r\n </p>\r\n @switch (typeInput) {\r\n @case (inputTypesEnum.EMAIL_PASSWORD) {\r\n <input \r\n [formControl]=\"localControl\" \r\n (blur)=\"onTouched()\" \r\n pInputText \r\n [id]=\"generateUniqueId(name)\" \r\n [name]=\"name\"\r\n [type]=\"typeInput\"\r\n [readOnly]=\"readonly\" \r\n autocomplete=\"email\" \r\n autocorrect=\"on\" \r\n autocapitalize=\"on\" \r\n spellcheck=\"true\" \r\n [ngClass]=\"{\r\n 'border-red-500 focus:ring-red-500':\r\n localControl.invalid &&\r\n (localControl.dirty || localControl.touched),\r\n 'bg-gray-100 cursor-not-allowed': readonly,\r\n }\"\r\n class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n <input \r\n type=\"password\" \r\n autocomplete=\"current-password\" \r\n tabindex=\"-1\" \r\n style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none;\"\r\n aria-hidden=\"true\" />\r\n }\r\n @case (inputTypesEnum.EMAIL) {\r\n <input \r\n [formControl]=\"localControl\" \r\n (blur)=\"onTouched()\" \r\n pInputText \r\n [id]=\"generateUniqueId(name)\" \r\n [name]=\"name\"\r\n [type]=\"typeInput\"\r\n [readOnly]=\"readonly\" \r\n autocomplete=\"email\" \r\n autocorrect=\"on\" \r\n autocapitalize=\"on\" \r\n spellcheck=\"true\" \r\n [ngClass]=\"{\r\n 'border-red-500 focus:ring-red-500':\r\n localControl.invalid &&\r\n (localControl.dirty || localControl.touched),\r\n 'bg-gray-100 cursor-not-allowed': readonly,\r\n }\"\r\n class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n }\r\n @case (inputTypesEnum.CURRENCY) {\r\n <p-inputnumber [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\"\r\n [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n }\r\n @case (inputTypesEnum.DATE) {\r\n <lib-disabled-container [disabled]=\"readonly\">\r\n <p-datepicker [formControl]=\"localControl\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\"\r\n [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" class=\"custom-datepicker\"\r\n appendTo=\"body\" />\r\n </lib-disabled-container>\r\n }\r\n @case (inputTypesEnum.TOGGLE) {\r\n <div class=\"flex justify-center items-center p-4\">\r\n <p-togglebutton [formControl]=\"localControl\" [onLabel]=\"toggleConfig?.onLabel || 'Si'\"\r\n [offLabel]=\"toggleConfig?.offLabel || 'No'\" class=\"custom-toggle\" />\r\n </div>\r\n }\r\n @case (inputTypesEnum.MULTISELECT) {\r\n <p-multiselect [filter]=\"true\" [options]=\"multiSelectConfig?.options\" [formControl]=\"localControl\"\r\n [optionLabel]=\"multiSelectConfig?.optionLabel ?? 'name'\" placeholder=\"\" [maxSelectedLabels]=\"3\"\r\n class=\"custom-multiselect\" appendTo=\"body\" />\r\n }\r\n @case (inputTypesEnum.SELECT) {\r\n <p-select [filter]=\"true\" [options]=\"selectConfig?.options\" [formControl]=\"localControl\"\r\n [optionLabel]=\"selectConfig?.optionLabel ?? 'name'\" placeholder=\"\" class=\"custom-select\"\r\n (onChange)=\"onSelectChange()\" appendTo=\"body\" [disabled]=\"readonly\" [readonly]=\"readonly\" [styleClass]=\"\r\n (localControl.invalid && (localControl.dirty || localControl.touched) ? 'border-red-500 focus:ring-red-500 ' : '') +\r\n (readonly ? 'bg-gray-100 cursor-not-allowed' : '')\r\n \" />\r\n }\r\n @case (inputTypesEnum.PASSWORD) {\r\n <div class=\"relative\">\r\n <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n autocomplete=\"new-password\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\"\r\n class=\"custom-password w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-all duration-200\"\r\n aria-describedby=\"password-help\" [formControl]=\"localControl\" />\r\n <button type=\"button\"\r\n class=\"custom-password-toggle absolute inset-y-0 right-0 flex items-center justify-center w-12 h-full text-gray-400 transition-colors duration-200 ease-in-out hover:text-gray-600 focus:outline-none focus:text-gray-600 active:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 dark:focus:text-gray-300\"\r\n (click)=\"togglePasswordVisibility()\" [attr.aria-label]=\"\r\n showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\r\n \">\r\n <i class=\"fas text-lg transition-all duration-200 ease-in-out\" [ngClass]=\"{\r\n 'fa-solid fa-eye': !showPassword,\r\n 'fa-solid fa-eye-slash': showPassword,\r\n }\"></i>\r\n </button>\r\n </div>\r\n }\r\n @case (inputTypesEnum.CHECKBOX) {\r\n <div class=\"flex justify-center items-center p-4\">\r\n <input [id]=\"generateUniqueId(name)\" [readOnly]=\"readonly\" [type]=\"typeInput\" [checked]=\"localControl.value\"\r\n (change)=\"onCheckboxChange($event, localControl)\"\r\n class=\"custom-checkbox h-5 w-5 border-2 border-gray-300 dark:border-transparent rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n [formControl]=\"localControl\" />\r\n </div>\r\n }\r\n @case (inputTypesEnum.OTP) {\r\n <div class=\"flex justify-center items-center p-4\">\r\n <p-inputotp [id]=\"generateUniqueId(name)\" (onBlur)=\"onTouched()\" [mask]=\"controlData().otpConfig?.mask ?? false\"\r\n [length]=\"controlData().otpConfig?.length ?? 6\" [integerOnly]=\"controlData().otpConfig?.integerOnly ?? false\"\r\n class=\"custom-otp border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n [formControl]=\"localControl\" />\r\n </div>\r\n }\r\n @case (inputTypesEnum.SWITCH) {\r\n <div class=\"flex justify-center items-center p-4\">\r\n <p-toggleswitch [id]=\"generateUniqueId(name)\" [formControl]=\"localControl\"\r\n class=\"custom-switch border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n (change)=\"onCheckboxChange($event, localControl)\">\r\n <ng-template #handle let-checked=\"checked\">\r\n <span class=\"text-xs bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-full px-1\">\r\n @if (checked) {\r\n Si\r\n }\r\n @else {\r\n No\r\n }\r\n </span>\r\n </ng-template>\r\n </p-toggleswitch>\r\n </div>\r\n }\r\n @case (inputTypesEnum.DECIMAL) {\r\n <p-inputnumber [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n [locale]=\"'es-CO'\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n }\r\n @case (inputTypesEnum.TEXTAREA) {\r\n <textarea pTextarea [formControl]=\"localControl\" [rows]=\"textareaConfig?.rows ?? 3\"\r\n [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" [readonly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\"\r\n autocapitalize=\"off\" spellcheck=\"false\"\r\n class=\"custom-textarea w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"></textarea>\r\n }\r\n @default {\r\n <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [type]=\"typeInput\"\r\n [readOnly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" [ngClass]=\"{\r\n 'border-red-500 focus:ring-red-500':\r\n localControl.invalid &&\r\n (localControl.dirty || localControl.touched),\r\n 'bg-gray-100 cursor-not-allowed': readonly,\r\n }\"\r\n class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n }\r\n }\r\n </lib-disabled-container>\r\n\r\n</div>\r\n\r\n@if (localControl.invalid && (localControl.dirty || localControl.touched)) {\r\n<div class=\"custom-error mt-1 text-sm text-red-600 dark:text-red-400\">\r\n @if (localControl.errors?.[\"required\"]) {\r\n <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n 'El campo es requerido' }}</span>\r\n }\r\n @if (localControl.errors?.[\"min\"]) {\r\n <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00EDnimo es de ' +\r\n localControl.errors?.[\"min\"].min.toFixed(2) }}</span>\r\n }\r\n @if (localControl.errors?.[\"max\"]) {\r\n <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00E1ximo es de ' +\r\n localControl.errors?.[\"max\"].max.toFixed(2) }}</span>\r\n }\r\n @if (localControl.errors?.[\"minlength\"]) {\r\n <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n 'El largo m\u00EDnimo es de ' + localControl.errors?.[\"minlength\"].requiredLength\r\n }}</span>\r\n }\r\n @if (localControl.errors?.[\"maxlength\"]) {\r\n <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n 'El largo m\u00E1ximo es de ' + localControl.errors?.[\"maxlength\"].requiredLength\r\n }}</span>\r\n }\r\n @if (localControl.errors?.[\"email\"]) {\r\n <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n 'El correo electr\u00F3nico no es v\u00E1lido' }}</span>\r\n }\r\n @if (localControl.errors?.[\"pattern\"]) {\r\n <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n 'El formato no es v\u00E1lido' }}</span>\r\n }\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";:host ::ng-deep p-datepicker>span>.p-inputtext{width:100%;border-radius:.5rem;outline:none;background-color:#f9fafb;height:44px;padding-right:2.5rem;color:#111827;transition:all .2s ease-in-out}:host ::ng-deep p-datepicker>.p-datepicker>.p-inputtext{background:transparent;color:#111827;height:44px;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-datepicker>.p-datepicker>.p-inputtext{background:transparent;background-color:#374151;color:#f3f4f6}:host ::ng-deep p-datepicker>span{width:100%;position:relative;display:inline-flex}:host ::ng-deep p-datepicker .p-datepicker-trigger{position:absolute!important;right:0!important;top:0!important;height:44px!important;width:2.5rem!important;background:transparent!important;border:none!important;box-shadow:none!important;color:#6b7280!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:1!important}:host ::ng-deep .my-app-dark p-datepicker .p-datepicker-trigger{color:#9ca3af!important}:host ::ng-deep p-datepicker .p-datepicker-trigger .p-button-icon{font-size:.875rem}:host ::ng-deep p-multiselect{border:1px solid #d1d5db;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-multiselect{background:transparent;color:#f3f4f6}:host ::ng-deep p-select{background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-select{background:transparent;color:#f3f4f6}:host ::ng-deep p-select>.p-select-label{font-size:small;position:relative}:host ::ng-deep p-inputnumber{background:transparent;color:#111827;height:44px;width:100%;border:1px solid #d1d5db;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6;background-color:#374151}:host-context(.my-app-dark) ::ng-deep p-datepicker>span>.p-inputtext{background-color:#374151;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .p-inputtext{background-color:#374151;color:#f3f4f6;border-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: IftaLabelModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i5.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i6.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["invalid", "disabled", "readonly", "variant", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i7.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i8.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "component", type: DisabledContainerComponent, selector: "lib-disabled-container", inputs: ["disabled"], outputs: ["disabledChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
183
- }
184
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomInputComponent, decorators: [{
185
- type: Component,
186
- args: [{ selector: 'lib-custom-input', imports: [
187
- ReactiveFormsModule,
188
- IftaLabelModule,
189
- NgClass,
190
- DatePickerModule,
191
- CheckboxModule,
192
- MultiSelectModule,
193
- SelectModule,
194
- ToggleButtonModule,
195
- InputOtpModule,
196
- ToggleSwitchModule,
197
- InputNumberModule,
198
- TextareaModule,
199
- DisabledContainerComponent,
200
- TooltipModule,
201
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
202
- provide: NG_VALUE_ACCESSOR,
203
- useExisting: forwardRef(() => CustomInputComponent),
204
- multi: true
205
- }], template: "@let localControl = controlData().control;\r\n@let placeholder = controlData().label || controlUpperName();\r\n@let name = controlData().controlName;\r\n@let typeInput = controlData().typeInput;\r\n@let readonly = controlData().readonly || false;\r\n@let dateConfig = controlData().dateConfig;\r\n@let multiSelectConfig = controlData().multiSelectConfig;\r\n@let selectConfig = controlData().selectConfig;\r\n@let toggleConfig = controlData().toggleConfig;\r\n@let textareaConfig = controlData().textareaConfig;\r\n@let currencyConfig = controlData().currencyConfig;\r\n<div class=\"flex flex-col gap-1 \">\r\n <lib-disabled-container [disabled]=\"readonly\">\r\n\r\n <p style=\"font-size: 12px; letter-spacing: 0.5px;\" class=\"text-sm text-gray-600 dark:text-gray-300 truncate\"\r\n [pTooltip]=\"placeholder\" tooltipPosition=\"top\" [showDelay]=\"300\">\r\n {{ placeholder }}\r\n </p>\r\n @switch (typeInput) {\r\n @case (inputTypesEnum.EMAIL_PASSWORD) {\r\n <input \r\n [formControl]=\"localControl\" \r\n (blur)=\"onTouched()\" \r\n pInputText \r\n [id]=\"generateUniqueId(name)\" \r\n [name]=\"name\"\r\n [type]=\"typeInput\"\r\n [readOnly]=\"readonly\" \r\n autocomplete=\"email\" \r\n autocorrect=\"on\" \r\n autocapitalize=\"on\" \r\n spellcheck=\"true\" \r\n [ngClass]=\"{\r\n 'border-red-500 focus:ring-red-500':\r\n localControl.invalid &&\r\n (localControl.dirty || localControl.touched),\r\n 'bg-gray-100 cursor-not-allowed': readonly,\r\n }\"\r\n class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n <input \r\n type=\"password\" \r\n autocomplete=\"current-password\" \r\n tabindex=\"-1\" \r\n style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none;\"\r\n aria-hidden=\"true\" />\r\n }\r\n @case (inputTypesEnum.EMAIL) {\r\n <input \r\n [formControl]=\"localControl\" \r\n (blur)=\"onTouched()\" \r\n pInputText \r\n [id]=\"generateUniqueId(name)\" \r\n [name]=\"name\"\r\n [type]=\"typeInput\"\r\n [readOnly]=\"readonly\" \r\n autocomplete=\"email\" \r\n autocorrect=\"on\" \r\n autocapitalize=\"on\" \r\n spellcheck=\"true\" \r\n [ngClass]=\"{\r\n 'border-red-500 focus:ring-red-500':\r\n localControl.invalid &&\r\n (localControl.dirty || localControl.touched),\r\n 'bg-gray-100 cursor-not-allowed': readonly,\r\n }\"\r\n class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n }\r\n @case (inputTypesEnum.CURRENCY) {\r\n <p-inputnumber [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\"\r\n [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n }\r\n @case (inputTypesEnum.DATE) {\r\n <lib-disabled-container [disabled]=\"readonly\">\r\n <p-datepicker [formControl]=\"localControl\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\"\r\n [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" class=\"custom-datepicker\"\r\n appendTo=\"body\" />\r\n </lib-disabled-container>\r\n }\r\n @case (inputTypesEnum.TOGGLE) {\r\n <div class=\"flex justify-center items-center p-4\">\r\n <p-togglebutton [formControl]=\"localControl\" [onLabel]=\"toggleConfig?.onLabel || 'Si'\"\r\n [offLabel]=\"toggleConfig?.offLabel || 'No'\" class=\"custom-toggle\" />\r\n </div>\r\n }\r\n @case (inputTypesEnum.MULTISELECT) {\r\n <p-multiselect [filter]=\"true\" [options]=\"multiSelectConfig?.options\" [formControl]=\"localControl\"\r\n [optionLabel]=\"multiSelectConfig?.optionLabel ?? 'name'\" placeholder=\"\" [maxSelectedLabels]=\"3\"\r\n class=\"custom-multiselect\" appendTo=\"body\" />\r\n }\r\n @case (inputTypesEnum.SELECT) {\r\n <p-select [filter]=\"true\" [options]=\"selectConfig?.options\" [formControl]=\"localControl\"\r\n [optionLabel]=\"selectConfig?.optionLabel ?? 'name'\" placeholder=\"\" class=\"custom-select\"\r\n (onChange)=\"onSelectChange()\" appendTo=\"body\" [disabled]=\"readonly\" [readonly]=\"readonly\" [styleClass]=\"\r\n (localControl.invalid && (localControl.dirty || localControl.touched) ? 'border-red-500 focus:ring-red-500 ' : '') +\r\n (readonly ? 'bg-gray-100 cursor-not-allowed' : '')\r\n \" />\r\n }\r\n @case (inputTypesEnum.PASSWORD) {\r\n <div class=\"relative\">\r\n <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n autocomplete=\"new-password\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\"\r\n class=\"custom-password w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-all duration-200\"\r\n aria-describedby=\"password-help\" [formControl]=\"localControl\" />\r\n <button type=\"button\"\r\n class=\"custom-password-toggle absolute inset-y-0 right-0 flex items-center justify-center w-12 h-full text-gray-400 transition-colors duration-200 ease-in-out hover:text-gray-600 focus:outline-none focus:text-gray-600 active:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 dark:focus:text-gray-300\"\r\n (click)=\"togglePasswordVisibility()\" [attr.aria-label]=\"\r\n showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\r\n \">\r\n <i class=\"fas text-lg transition-all duration-200 ease-in-out\" [ngClass]=\"{\r\n 'fa-solid fa-eye': !showPassword,\r\n 'fa-solid fa-eye-slash': showPassword,\r\n }\"></i>\r\n </button>\r\n </div>\r\n }\r\n @case (inputTypesEnum.CHECKBOX) {\r\n <div class=\"flex justify-center items-center p-4\">\r\n <input [id]=\"generateUniqueId(name)\" [readOnly]=\"readonly\" [type]=\"typeInput\" [checked]=\"localControl.value\"\r\n (change)=\"onCheckboxChange($event, localControl)\"\r\n class=\"custom-checkbox h-5 w-5 border-2 border-gray-300 dark:border-transparent rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n [formControl]=\"localControl\" />\r\n </div>\r\n }\r\n @case (inputTypesEnum.OTP) {\r\n <div class=\"flex justify-center items-center p-4\">\r\n <p-inputotp [id]=\"generateUniqueId(name)\" (onBlur)=\"onTouched()\" [mask]=\"controlData().otpConfig?.mask ?? false\"\r\n [length]=\"controlData().otpConfig?.length ?? 6\" [integerOnly]=\"controlData().otpConfig?.integerOnly ?? false\"\r\n class=\"custom-otp border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n [formControl]=\"localControl\" />\r\n </div>\r\n }\r\n @case (inputTypesEnum.SWITCH) {\r\n <div class=\"flex justify-center items-center p-4\">\r\n <p-toggleswitch [id]=\"generateUniqueId(name)\" [formControl]=\"localControl\"\r\n class=\"custom-switch border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n (change)=\"onCheckboxChange($event, localControl)\">\r\n <ng-template #handle let-checked=\"checked\">\r\n <span class=\"text-xs bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-full px-1\">\r\n @if (checked) {\r\n Si\r\n }\r\n @else {\r\n No\r\n }\r\n </span>\r\n </ng-template>\r\n </p-toggleswitch>\r\n </div>\r\n }\r\n @case (inputTypesEnum.DECIMAL) {\r\n <p-inputnumber [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n [locale]=\"'es-CO'\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n }\r\n @case (inputTypesEnum.TEXTAREA) {\r\n <textarea pTextarea [formControl]=\"localControl\" [rows]=\"textareaConfig?.rows ?? 3\"\r\n [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" [readonly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\"\r\n autocapitalize=\"off\" spellcheck=\"false\"\r\n class=\"custom-textarea w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"></textarea>\r\n }\r\n @default {\r\n <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [type]=\"typeInput\"\r\n [readOnly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" [ngClass]=\"{\r\n 'border-red-500 focus:ring-red-500':\r\n localControl.invalid &&\r\n (localControl.dirty || localControl.touched),\r\n 'bg-gray-100 cursor-not-allowed': readonly,\r\n }\"\r\n class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n }\r\n }\r\n </lib-disabled-container>\r\n\r\n</div>\r\n\r\n@if (localControl.invalid && (localControl.dirty || localControl.touched)) {\r\n<div class=\"custom-error mt-1 text-sm text-red-600 dark:text-red-400\">\r\n @if (localControl.errors?.[\"required\"]) {\r\n <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n 'El campo es requerido' }}</span>\r\n }\r\n @if (localControl.errors?.[\"min\"]) {\r\n <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00EDnimo es de ' +\r\n localControl.errors?.[\"min\"].min.toFixed(2) }}</span>\r\n }\r\n @if (localControl.errors?.[\"max\"]) {\r\n <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00E1ximo es de ' +\r\n localControl.errors?.[\"max\"].max.toFixed(2) }}</span>\r\n }\r\n @if (localControl.errors?.[\"minlength\"]) {\r\n <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n 'El largo m\u00EDnimo es de ' + localControl.errors?.[\"minlength\"].requiredLength\r\n }}</span>\r\n }\r\n @if (localControl.errors?.[\"maxlength\"]) {\r\n <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n 'El largo m\u00E1ximo es de ' + localControl.errors?.[\"maxlength\"].requiredLength\r\n }}</span>\r\n }\r\n @if (localControl.errors?.[\"email\"]) {\r\n <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n 'El correo electr\u00F3nico no es v\u00E1lido' }}</span>\r\n }\r\n @if (localControl.errors?.[\"pattern\"]) {\r\n <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n 'El formato no es v\u00E1lido' }}</span>\r\n }\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";:host ::ng-deep p-datepicker>span>.p-inputtext{width:100%;border-radius:.5rem;outline:none;background-color:#f9fafb;height:44px;padding-right:2.5rem;color:#111827;transition:all .2s ease-in-out}:host ::ng-deep p-datepicker>.p-datepicker>.p-inputtext{background:transparent;color:#111827;height:44px;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-datepicker>.p-datepicker>.p-inputtext{background:transparent;background-color:#374151;color:#f3f4f6}:host ::ng-deep p-datepicker>span{width:100%;position:relative;display:inline-flex}:host ::ng-deep p-datepicker .p-datepicker-trigger{position:absolute!important;right:0!important;top:0!important;height:44px!important;width:2.5rem!important;background:transparent!important;border:none!important;box-shadow:none!important;color:#6b7280!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:1!important}:host ::ng-deep .my-app-dark p-datepicker .p-datepicker-trigger{color:#9ca3af!important}:host ::ng-deep p-datepicker .p-datepicker-trigger .p-button-icon{font-size:.875rem}:host ::ng-deep p-multiselect{border:1px solid #d1d5db;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-multiselect{background:transparent;color:#f3f4f6}:host ::ng-deep p-select{background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-select{background:transparent;color:#f3f4f6}:host ::ng-deep p-select>.p-select-label{font-size:small;position:relative}:host ::ng-deep p-inputnumber{background:transparent;color:#111827;height:44px;width:100%;border:1px solid #d1d5db;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6;background-color:#374151}:host-context(.my-app-dark) ::ng-deep p-datepicker>span>.p-inputtext{background-color:#374151;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .p-inputtext{background-color:#374151;color:#f3f4f6;border-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}\n"] }]
206
- }], ctorParameters: () => [] });
207
-
208
- class FormChildComponent {
209
- controlsData = input.required();
210
- formGroup = input.required();
211
- formSubmit = output();
212
- constructor() {
213
- }
214
- submit() {
215
- this.formSubmit.emit(this.formGroup());
216
- }
217
- onSelectChange(controlConfig) {
218
- controlConfig.selectConfig?.change?.(controlConfig);
219
- }
220
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
221
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: FormChildComponent, isStandalone: true, selector: "lib-form-child", inputs: { controlsData: { classPropertyName: "controlsData", publicName: "controlsData", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "@let controls = controlsData();\r\n\r\n<form\r\n [formGroup]=\"formGroup()\"\r\n (submit)=\"submit()\"\r\n autocomplete=\"off\"\r\n class=\"grid grid-cols-12 gap-3\"\r\n>\r\n @for (controlData of controls; track controlData.controlName) {\r\n <div\r\n class=\"flex flex-col w-full\"\r\n [ngClass]=\"{\r\n 'col-span-1': !controlData.colSpan,\r\n 'col-span-2': controlData.colSpan === 2,\r\n 'col-span-3': controlData.colSpan === 3,\r\n 'col-span-4': controlData.colSpan === 4,\r\n 'col-span-5': controlData.colSpan === 5,\r\n 'col-span-6': controlData.colSpan === 6,\r\n 'col-span-7': controlData.colSpan === 7,\r\n 'col-span-8': controlData.colSpan === 8,\r\n 'col-span-9': controlData.colSpan === 9,\r\n 'col-span-10': controlData.colSpan === 10,\r\n 'col-span-11': controlData.colSpan === 11,\r\n 'col-span-12': controlData.colSpan === 12,\r\n }\"\r\n >\r\n <lib-custom-input\r\n [id]=\"controlData.controlName\"\r\n [controlData]=\"controlData\"\r\n [formControlName]=\"controlData.controlName\"\r\n class=\"w-full\"\r\n (output)=\"onSelectChange($event)\"\r\n >\r\n </lib-custom-input>\r\n </div>\r\n }\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CustomInputComponent, selector: "lib-custom-input", inputs: ["controlData"], outputs: ["output"] }] });
222
- }
223
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormChildComponent, decorators: [{
224
- type: Component,
225
- args: [{ selector: 'lib-form-child', imports: [
226
- ReactiveFormsModule,
227
- CommonModule,
228
- CustomInputComponent
229
- ], template: "@let controls = controlsData();\r\n\r\n<form\r\n [formGroup]=\"formGroup()\"\r\n (submit)=\"submit()\"\r\n autocomplete=\"off\"\r\n class=\"grid grid-cols-12 gap-3\"\r\n>\r\n @for (controlData of controls; track controlData.controlName) {\r\n <div\r\n class=\"flex flex-col w-full\"\r\n [ngClass]=\"{\r\n 'col-span-1': !controlData.colSpan,\r\n 'col-span-2': controlData.colSpan === 2,\r\n 'col-span-3': controlData.colSpan === 3,\r\n 'col-span-4': controlData.colSpan === 4,\r\n 'col-span-5': controlData.colSpan === 5,\r\n 'col-span-6': controlData.colSpan === 6,\r\n 'col-span-7': controlData.colSpan === 7,\r\n 'col-span-8': controlData.colSpan === 8,\r\n 'col-span-9': controlData.colSpan === 9,\r\n 'col-span-10': controlData.colSpan === 10,\r\n 'col-span-11': controlData.colSpan === 11,\r\n 'col-span-12': controlData.colSpan === 12,\r\n }\"\r\n >\r\n <lib-custom-input\r\n [id]=\"controlData.controlName\"\r\n [controlData]=\"controlData\"\r\n [formControlName]=\"controlData.controlName\"\r\n class=\"w-full\"\r\n (output)=\"onSelectChange($event)\"\r\n >\r\n </lib-custom-input>\r\n </div>\r\n }\r\n</form>\r\n" }]
230
- }], ctorParameters: () => [] });
231
-
232
- class HttpMessageComponent {
233
- httpMessage = model();
234
- clearMessage() {
235
- this.httpMessage.set(undefined);
236
- }
237
- get isError() {
238
- const message = this.httpMessage();
239
- return message?.type === 'error';
240
- }
241
- get isSuccess() {
242
- const message = this.httpMessage();
243
- return message?.type === 'success';
244
- }
245
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HttpMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
246
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: HttpMessageComponent, isStandalone: true, selector: "lib-http-message", inputs: { httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { httpMessage: "httpMessageChange" }, ngImport: i0, template: "@if (httpMessage()) {\r\n @if (isError) {\r\n <div class=\"group relative mt-3 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 transition-all duration-200 hover:shadow-md\">\r\n <div class=\"flex items-start gap-2\">\r\n <svg class=\"w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n <p class=\"flex-1 text-red-700 dark:text-red-300 text-sm font-medium leading-relaxed\">\r\n {{ httpMessage()?.message }}\r\n </p>\r\n <button\r\n type=\"button\"\r\n (click)=\"clearMessage()\"\r\n class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-200 p-1 rounded hover:bg-red-100 dark:hover:bg-red-800/30\"\r\n aria-label=\"Cerrar mensaje de error\"\r\n >\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n @if (isSuccess) {\r\n <div class=\"group relative mt-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 transition-all duration-200 hover:shadow-md\">\r\n <div class=\"flex items-start gap-2\">\r\n <svg class=\"w-5 h-5 text-green-500 dark:text-green-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n <p class=\"flex-1 text-green-700 dark:text-green-300 text-sm font-medium leading-relaxed\">\r\n {{ httpMessage()?.message }}\r\n </p>\r\n <button\r\n type=\"button\"\r\n (click)=\"clearMessage()\"\r\n class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-green-500 dark:text-green-400 hover:text-green-700 dark:hover:text-green-200 p-1 rounded hover:bg-green-100 dark:hover:bg-green-800/30\"\r\n aria-label=\"Cerrar mensaje de \u00E9xito\"\r\n >\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n}\r\n", styles: [""] });
247
- }
248
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HttpMessageComponent, decorators: [{
249
- type: Component,
250
- args: [{ selector: 'lib-http-message', imports: [], template: "@if (httpMessage()) {\r\n @if (isError) {\r\n <div class=\"group relative mt-3 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 transition-all duration-200 hover:shadow-md\">\r\n <div class=\"flex items-start gap-2\">\r\n <svg class=\"w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n <p class=\"flex-1 text-red-700 dark:text-red-300 text-sm font-medium leading-relaxed\">\r\n {{ httpMessage()?.message }}\r\n </p>\r\n <button\r\n type=\"button\"\r\n (click)=\"clearMessage()\"\r\n class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-200 p-1 rounded hover:bg-red-100 dark:hover:bg-red-800/30\"\r\n aria-label=\"Cerrar mensaje de error\"\r\n >\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n @if (isSuccess) {\r\n <div class=\"group relative mt-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 transition-all duration-200 hover:shadow-md\">\r\n <div class=\"flex items-start gap-2\">\r\n <svg class=\"w-5 h-5 text-green-500 dark:text-green-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n <p class=\"flex-1 text-green-700 dark:text-green-300 text-sm font-medium leading-relaxed\">\r\n {{ httpMessage()?.message }}\r\n </p>\r\n <button\r\n type=\"button\"\r\n (click)=\"clearMessage()\"\r\n class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-green-500 dark:text-green-400 hover:text-green-700 dark:hover:text-green-200 p-1 rounded hover:bg-green-100 dark:hover:bg-green-800/30\"\r\n aria-label=\"Cerrar mensaje de \u00E9xito\"\r\n >\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n}\r\n" }]
251
- }] });
252
-
253
- class FormComponent {
254
- formGroup = model.required();
255
- controls = input.required();
256
- formConfig = input();
257
- httpMessage = model();
258
- formSubmit = output();
259
- formChanges = output();
260
- formChangesDebounced = output();
261
- constructor() {
262
- effect(() => {
263
- const controls = this.controls();
264
- const controlsNames = this.controls().map((controlConfig) => controlConfig.controlName);
265
- const controlsToDelete = Object.keys(this.formGroup().controls).filter(control => !controlsNames.includes(control));
266
- controls.forEach((controlData) => {
267
- this.formGroup.update((formGroup) => {
268
- if (formGroup.contains(controlData.controlName)) {
269
- formGroup.setControl(controlData.controlName, controlData.control);
270
- }
271
- else {
272
- formGroup.addControl(controlData.controlName, controlData.control);
273
- }
274
- controlsToDelete.forEach(controlName => {
275
- formGroup.removeControl(controlName);
276
- });
277
- return formGroup;
278
- });
279
- });
280
- });
281
- effect(() => {
282
- const controlsDataTypeSelect = this.controls().filter((controlData) => controlData.typeInput === ETypeInput.SELECT);
283
- controlsDataTypeSelect.forEach((controlData) => {
284
- const control = this.formGroup().get(controlData.controlName);
285
- const controlValue = control?.value;
286
- if (controlValue) {
287
- const options = controlData.selectConfig?.options ?? [];
288
- const optionSelected = options.find((option) => {
289
- return option.code === controlValue.code;
290
- });
291
- if (optionSelected) {
292
- control?.setValue(optionSelected);
293
- }
294
- }
295
- });
296
- });
297
- effect(() => {
298
- this.formGroup().valueChanges.subscribe(() => {
299
- this.formChanges.emit(this.formGroup());
300
- });
301
- });
302
- const fg$ = toObservable(this.formGroup);
303
- fg$.pipe(switchMap((fg) => fg.valueChanges.pipe(debounceTime(650), filter(() => this.anyInteracted(fg)), map(() => fg))), takeUntilDestroyed())
304
- .subscribe(() => this.formChangesDebounced.emit(this.formGroup()));
305
- }
306
- anyInteracted(formGroup) {
307
- return Object.values(formGroup.controls).some(control => control.touched || control.dirty);
308
- }
309
- submit(formGroup) {
310
- this.formSubmit.emit(formGroup);
311
- }
312
- clearHttpMessage() {
313
- this.httpMessage.set(undefined);
314
- }
315
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
316
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: FormComponent, isStandalone: true, selector: "lib-form", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: true, transformFunction: null }, formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: false, transformFunction: null }, httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formGroup: "formGroupChange", httpMessage: "httpMessageChange", formSubmit: "formSubmit", formChanges: "formChanges", formChangesDebounced: "formChangesDebounced" }, ngImport: i0, template: "<div class=\"w-full p-2 rounded-lg\" [style.backgroundColor]=\"formConfig()?.backgroundColor || 'transparent'\">\r\n <lib-form-child [controlsData]=\"controls()\" [formGroup]=\"formGroup()\" (formSubmit)=\"submit($event)\">\r\n </lib-form-child>\r\n @if (httpMessage()) {\r\n <lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n }\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormChildComponent, selector: "lib-form-child", inputs: ["controlsData", "formGroup"], outputs: ["formSubmit"] }, { kind: "component", type: HttpMessageComponent, selector: "lib-http-message", inputs: ["httpMessage"], outputs: ["httpMessageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
317
- }
318
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormComponent, decorators: [{
319
- type: Component,
320
- args: [{ selector: 'lib-form', imports: [
321
- ReactiveFormsModule,
322
- FormChildComponent,
323
- HttpMessageComponent
324
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full p-2 rounded-lg\" [style.backgroundColor]=\"formConfig()?.backgroundColor || 'transparent'\">\r\n <lib-form-child [controlsData]=\"controls()\" [formGroup]=\"formGroup()\" (formSubmit)=\"submit($event)\">\r\n </lib-form-child>\r\n @if (httpMessage()) {\r\n <lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n }\r\n</div>" }]
325
- }], ctorParameters: () => [] });
326
-
327
- class InlineInputComponent {
328
- config = input({ typeInput: ETypeInput.TEXT });
329
- value = model(null);
330
- outputValue = output();
331
- outputBlur = output();
332
- outputDebounced = output();
333
- // Capturar templates proyectados desde el componente padre
334
- templates;
335
- // Para el manejo de chips
336
- chips = [];
337
- currentInput = '';
338
- showDuplicateMessage = false;
339
- duplicateChips = [];
340
- duplicateMessageTimer = null;
341
- constructor() {
342
- effect(() => {
343
- this.outputValue.emit(this.value());
344
- });
345
- const value$ = toObservable(this.value);
346
- value$
347
- .pipe(debounceTime(300), // <- adjust ms here
348
- distinctUntilChanged(), // avoid repeats for same value
349
- takeUntilDestroyed() // auto-cleanup on destroy
350
- )
351
- .subscribe(v => this.outputDebounced.emit(v));
352
- effect(() => {
353
- this.valueSelect.update((_prev) => {
354
- const options = this.config()?.selectConfig?.options;
355
- const currentValue = this.value();
356
- if (this.isSelection(currentValue))
357
- return currentValue;
358
- if (currentValue === null || currentValue === undefined)
359
- return undefined;
360
- return options?.find(option => option.code === currentValue);
361
- });
362
- });
363
- }
364
- ngOnInit() {
365
- }
366
- onChange = () => { };
367
- onTouched = () => { };
368
- writeValue(value) {
369
- this.value.set(value);
370
- // Si es tipo CHIPS, inicializar los chips desde el valor
371
- if (this.type === ETypeInput.CHIPS && typeof value === 'string') {
372
- this.chips = value ? value.split(' ').filter(chip => chip.trim() !== '') : [];
373
- }
374
- }
375
- registerOnChange(fn) {
376
- this.onChange = fn;
377
- }
378
- registerOnTouched(fn) {
379
- this.onTouched = fn;
380
- }
381
- onChangeValue(value) {
382
- this.value.set(value);
383
- this.onChange(value);
384
- }
385
- onBlur() {
386
- this.onTouched();
387
- this.outputBlur.emit(this.value());
388
- }
389
- /**
390
- * Maneja eventos de teclado para prevenir la navegación de PrimeNG Table
391
- * cuando se usan las flechas izquierda/derecha dentro del input
392
- */
393
- onKeyDown(event) {
394
- // Verificar si son teclas de flecha izquierda o derecha
395
- if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
396
- // Detener la propagación del evento hacia el table
397
- event.stopPropagation();
398
- }
399
- }
400
- isSelection(value) {
401
- return !!value && typeof value === 'object' && 'code' in value && 'name' in value;
402
- }
403
- valueSelect = signal(undefined);
404
- setValueSelect(value) {
405
- this.valueSelect.set(value);
406
- }
407
- get type() {
408
- return this.config()?.typeInput ?? ETypeInput.TEXT;
409
- }
410
- get ETypeInput() {
411
- return ETypeInput;
412
- }
413
- get duplicatesText() {
414
- return this.duplicateChips.join(', ');
415
- }
416
- get currency() {
417
- return this.config()?.currencyConfig?.currency ?? 'COP';
418
- }
419
- get locale() {
420
- return this.config()?.currencyConfig?.locale ?? 'es-CO';
421
- }
422
- get minFractionDigits() {
423
- return this.config()?.currencyConfig?.minFractionDigits ?? 2;
424
- }
425
- get maxFractionDigits() {
426
- return this.config()?.currencyConfig?.maxFractionDigits ?? 2;
427
- }
428
- knobValueInput = computed(() => {
429
- let response = this.value();
430
- const knobConfig = this.config()?.knobConfig ?? { min: 0, max: 100, step: 1 };
431
- response = parseInt(this.value()) ?? 0;
432
- if (response < (knobConfig?.min ?? 0)) {
433
- response = knobConfig.min ?? 0;
434
- }
435
- if (response > (knobConfig?.max ?? 100)) {
436
- response = knobConfig.max ?? 100;
437
- }
438
- return response;
439
- });
440
- knobValueTemplate = computed(() => {
441
- return this.config()?.knobConfig?.valueTemplate ?? '';
442
- });
443
- // Métodos para manejo de chips
444
- onChipInputChange(event) {
445
- const target = event.target;
446
- this.currentInput = target.value;
447
- }
448
- onChipKeydown(event) {
449
- if (event.key === ' ' || event.key === 'Enter') {
450
- event.preventDefault();
451
- this.addChip();
452
- }
453
- else if (event.key === 'Backspace' && this.currentInput === '' && this.chips.length > 0) {
454
- // Si no hay texto y hay chips, eliminar el último chip
455
- this.removeChip(this.chips.length - 1);
456
- }
457
- // No interceptar las flechas aquí ya que se maneja en onKeyDown
458
- }
459
- onChipPaste(event) {
460
- event.preventDefault();
461
- const pastedText = event.clipboardData?.getData('text') || '';
462
- this.processPastedText(pastedText);
463
- }
464
- addChip() {
465
- const trimmedValue = this.currentInput.trim();
466
- if (trimmedValue) {
467
- if (this.chips.includes(trimmedValue)) {
468
- // Mostrar mensaje de duplicado con el chip específico
469
- this.duplicateChips = [trimmedValue];
470
- this.showDuplicateAlert();
471
- }
472
- else {
473
- this.chips.push(trimmedValue);
474
- this.currentInput = '';
475
- this.updateChipsValue();
476
- this.hideDuplicateAlert();
477
- }
478
- }
479
- }
480
- removeChip(index) {
481
- this.chips.splice(index, 1);
482
- this.updateChipsValue();
483
- }
484
- updateChipsValue() {
485
- const chipsValue = this.chips.join(' ');
486
- this.value.set(chipsValue);
487
- this.onChange(chipsValue);
488
- }
489
- showDuplicateAlert() {
490
- this.showDuplicateMessage = true;
491
- // Limpiar timer anterior si existe
492
- if (this.duplicateMessageTimer) {
493
- clearTimeout(this.duplicateMessageTimer);
494
- }
495
- // Ocultar mensaje después de 3 segundos
496
- this.duplicateMessageTimer = setTimeout(() => {
497
- this.hideDuplicateAlert();
498
- }, 3000);
499
- }
500
- hideDuplicateAlert() {
501
- this.showDuplicateMessage = false;
502
- this.duplicateChips = [];
503
- if (this.duplicateMessageTimer) {
504
- clearTimeout(this.duplicateMessageTimer);
505
- this.duplicateMessageTimer = null;
506
- }
507
- }
508
- processPastedText(text) {
509
- // Dividir el texto por espacios y filtrar elementos vacíos
510
- const newChips = text
511
- .split(/\s+/) // Dividir por uno o más espacios
512
- .map(chip => chip.trim()) // Limpiar espacios en cada elemento
513
- .filter(chip => chip !== ''); // Filtrar elementos vacíos
514
- const foundDuplicates = [];
515
- let addedChips = 0;
516
- // Agregar cada chip nuevo y recopilar duplicados
517
- newChips.forEach(chipText => {
518
- if (!this.chips.includes(chipText)) {
519
- this.chips.push(chipText);
520
- addedChips++;
521
- }
522
- else {
523
- // Solo agregar a duplicados si no está ya en la lista
524
- if (!foundDuplicates.includes(chipText)) {
525
- foundDuplicates.push(chipText);
526
- }
527
- }
528
- });
529
- // Limpiar el input actual
530
- this.currentInput = '';
531
- // Actualizar el valor si se agregaron chips
532
- if (addedChips > 0) {
533
- this.updateChipsValue();
534
- }
535
- // Mostrar alerta si hubo duplicados
536
- if (foundDuplicates.length > 0) {
537
- this.duplicateChips = foundDuplicates;
538
- this.showDuplicateAlert();
539
- }
540
- else {
541
- this.hideDuplicateAlert();
542
- }
543
- }
544
- /**
545
- * Método público para establecer chips desde un array externo
546
- * @param chipsArray Array de strings que representan las chips
547
- */
548
- setChipsFromArray(chipsArray) {
549
- if (!Array.isArray(chipsArray)) {
550
- console.warn('setChipsFromArray: El parámetro debe ser un array de strings');
551
- return;
552
- }
553
- // Filtrar elementos válidos (strings no vacíos)
554
- const validChips = chipsArray
555
- .filter(chip => typeof chip === 'string' && chip.trim() !== '')
556
- .map(chip => chip.trim());
557
- // Actualizar el array de chips
558
- this.chips = [...validChips];
559
- // Limpiar el input actual
560
- this.currentInput = '';
561
- // Actualizar el valor del componente
562
- this.updateChipsValue();
563
- // Ocultar cualquier mensaje de duplicado
564
- this.hideDuplicateAlert();
565
- }
566
- /**
567
- * Método público para obtener las chips actuales como array
568
- * @returns Array de strings con las chips actuales
569
- */
570
- getChipsAsArray() {
571
- return [...this.chips];
572
- }
573
- /**
574
- * Método público para limpiar todas las chips
575
- */
576
- clearAllChips() {
577
- this.chips = [];
578
- this.currentInput = '';
579
- this.updateChipsValue();
580
- this.hideDuplicateAlert();
581
- }
582
- /**
583
- * Método público para agregar múltiples chips desde un array
584
- * Evita duplicados y muestra mensajes de alerta si es necesario
585
- * @param chipsArray Array de strings a agregar
586
- */
587
- addChipsFromArray(chipsArray) {
588
- if (!Array.isArray(chipsArray)) {
589
- console.warn('addChipsFromArray: El parámetro debe ser un array de strings');
590
- return;
591
- }
592
- // Filtrar elementos válidos
593
- const validChips = chipsArray
594
- .filter(chip => typeof chip === 'string' && chip.trim() !== '')
595
- .map(chip => chip.trim());
596
- const foundDuplicates = [];
597
- let addedChips = 0;
598
- // Agregar cada chip nuevo y recopilar duplicados
599
- validChips.forEach(chipText => {
600
- if (!this.chips.includes(chipText)) {
601
- this.chips.push(chipText);
602
- addedChips++;
603
- }
604
- else {
605
- // Solo agregar a duplicados si no está ya en la lista
606
- if (!foundDuplicates.includes(chipText)) {
607
- foundDuplicates.push(chipText);
608
- }
609
- }
610
- });
611
- // Actualizar el valor si se agregaron chips
612
- if (addedChips > 0) {
613
- this.updateChipsValue();
614
- }
615
- // Mostrar alerta si hubo duplicados
616
- if (foundDuplicates.length > 0) {
617
- this.duplicateChips = foundDuplicates;
618
- this.showDuplicateAlert();
619
- }
620
- else {
621
- this.hideDuplicateAlert();
622
- }
623
- }
624
- // Limpiar timer al destruir el componente
625
- ngOnDestroy() {
626
- if (this.duplicateMessageTimer) {
627
- clearTimeout(this.duplicateMessageTimer);
628
- }
629
- }
630
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InlineInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
631
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: InlineInputComponent, isStandalone: true, selector: "lib-inline-input", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", outputValue: "outputValue", outputBlur: "outputBlur", outputDebounced: "outputDebounced" }, providers: [
632
- {
633
- provide: NG_VALUE_ACCESSOR,
634
- useExisting: forwardRef(() => InlineInputComponent),
635
- multi: true
636
- }
637
- ], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: "@let valueInput = value();\r\n@let isDisabled = config().isDisabled ?? false;\r\n@let knobConfig = config().knobConfig;\r\n@let textareaConfig = config().textareaConfig;\r\n@let dateConfig = config().dateConfig;\r\n\r\n@switch (type) {\r\n@case (ETypeInput.CURRENCY) {\r\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n (keydown)=\"onKeyDown($event)\" mode=\"currency\" [currency]=\"currency\" [locale]=\"locale\"\r\n [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" class=\"w-full\"\r\n [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.DECIMAL) {\r\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n (keydown)=\"onKeyDown($event)\" mode=\"decimal\" [locale]=\"locale\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\"\r\n [useGrouping]=\"true\" class=\"w-full\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.DATE) {\r\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n (keydown)=\"onKeyDown($event)\" class=\"w-full\" [disabled]=\"isDisabled\" [maxDate]=\"dateConfig?.maxDate || null\"\r\n [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\r\n}\r\n@case (ETypeInput.DATETIME_LOCAL) {\r\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n (keydown)=\"onKeyDown($event)\" class=\"w-full\" [showTime]=\"true\" [hourFormat]=\"'24'\" [disabled]=\"isDisabled\"\r\n [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\r\n}\r\n@case (ETypeInput.SELECT) {\r\n<p-select [options]=\"config().selectConfig?.options ?? []\" [optionLabel]=\"config().selectConfig?.optionLabel ?? 'name'\"\r\n [(ngModel)]=\"valueSelect\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\"\r\n appendTo=\"body\" class=\"w-full inline-input-select\" [disabled]=\"config().isDisabled ?? false\" >\r\n @for (template of templates; track $index) {\r\n <ng-template [pTemplate]=\"template.getType()\" let-item>\r\n <ng-container *ngTemplateOutlet=\"template.template; context: { $implicit: item }\"></ng-container>\r\n </ng-template>\r\n }\r\n</p-select>\r\n}\r\n@case (ETypeInput.MULTISELECT) {\r\n<p-multiselect [options]=\"config().multiSelectConfig?.options ?? []\"\r\n [optionLabel]=\"config().multiSelectConfig?.optionLabel ?? 'name'\" [ngModel]=\"valueInput\"\r\n (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [filter]=\"true\"\r\n appendTo=\"body\" class=\"w-full\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.OTP) {\r\n<p-inputotp class=\"w-full\" [mask]=\"config().otpConfig?.mask ?? false\" [length]=\"config().otpConfig?.length ?? 6\"\r\n [integerOnly]=\"config().otpConfig?.integerOnly ?? false\" [ngModel]=\"valueInput\"\r\n (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.KNOB) {\r\n<p-knob [ngModel]=\"knobValueInput()\" (ngModelChange)=\"onChangeValue($event)\" class=\"w-full\" [min]=\"knobConfig?.min ?? 0\"\r\n [max]=\"knobConfig?.max ?? 100\" [step]=\"knobConfig?.step ?? 1\" [disabled]=\"isDisabled\" [readonly]=\"true\"\r\n [valueTemplate]=\"knobValueTemplate()\" [size]=\"knobConfig?.size ?? 100\" />\r\n}\r\n@case (ETypeInput.TEXTAREA) {\r\n<textarea class=\"w-full h-full p-2 border border-gray-300 rounded-md\" pTextarea [rows]=\"textareaConfig?.rows ?? 3\"\r\n [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n [disabled]=\"isDisabled\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (blur)=\"onBlur()\"\r\n (keydown)=\"onKeyDown($event)\"></textarea>\r\n}\r\n@case (ETypeInput.CHIPS) {\r\n<div class=\"chips-input-wrapper\">\r\n <div\r\n class=\"chips-container w-full p-2 border border-gray-300 rounded-md min-h-[40px] flex flex-wrap items-center gap-2\"\r\n [class.border-red-500]=\"showDuplicateMessage\">\r\n @for (chip of chips; track $index) {\r\n <p-chip [label]=\"chip\" [removable]=\"!isDisabled\" (onRemove)=\"removeChip($index)\" class=\"chip-item\" />\r\n }\r\n <input type=\"text\" class=\"chip-input flex-1 border-0 outline-0 bg-transparent min-w-[100px]\" [value]=\"currentInput\"\r\n (input)=\"onChipInputChange($event)\" (keydown)=\"onChipKeydown($event); onKeyDown($event)\"\r\n (paste)=\"onChipPaste($event)\" [disabled]=\"isDisabled\"\r\n placeholder=\"Escribe o pega elementos separados por espacios...\" />\r\n </div>\r\n @if (showDuplicateMessage) {\r\n <div class=\"duplicate-message text-red-500 text-sm mt-1 flex items-center gap-1\">\r\n <i class=\"pi pi-exclamation-triangle text-red-500\"></i>\r\n <span>\r\n @if (duplicateChips.length === 1) {\r\n El elemento \"<strong>{{ duplicatesText }}</strong>\" ya existe en la lista\r\n } @else {\r\n Los elementos \"<strong>{{ duplicatesText }}</strong>\" ya existen en la lista\r\n }\r\n </span>\r\n </div>\r\n }\r\n</div>\r\n}\r\n@default {\r\n<input pInputText class=\"w-full h-full p-2 border border-gray-300 rounded-md\" [type]=\"type\"\r\n [readOnly]=\"config().readonly ?? false\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\"\r\n (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\r\n}\r\n}", styles: [":host{width:100%;height:100%}.chips-input-wrapper{width:100%}.chips-input-wrapper .chips-container{cursor:text;transition:border-color .2s ease,box-shadow .2s ease}.chips-input-wrapper .chips-container:focus-within{border-color:#007ad9;box-shadow:0 0 0 1px #007ad9}.chips-input-wrapper .chips-container.border-red-500{border-color:#ef4444!important;box-shadow:0 0 0 1px #ef4444!important}.chips-input-wrapper .chips-container .chip-item{margin:0}.chips-input-wrapper .chips-container .chip-input:focus{outline:none}.chips-input-wrapper .chips-container .chip-input::placeholder{color:#6b7280;font-style:italic}.chips-input-wrapper .duplicate-message{animation:slideDown .3s ease-out}.chips-input-wrapper .duplicate-message i{font-size:14px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}::ng-deep p-select.inline-input-select{border:1px solid #d1d5db!important;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:space-between}::ng-deep p-select.inline-input-select .p-select-label{border:none}::ng-deep p-select.inline-input-select .p-select-trigger{border:none}::ng-deep .my-app-dark p-select.inline-input-select{border:1px solid transparent!important;background:transparent;color:#f3f4f6}::ng-deep .my-app-dark p-inputnumber .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}::ng-deep .my-app-dark p-datepicker .p-inputtext{background-color:#374151;color:#f3f4f6}::ng-deep .my-app-dark p-multiselect .p-multiselect-label{background-color:#374151;color:#f3f4f6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i8.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i6.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["invalid", "disabled", "readonly", "variant", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: KnobModule }, { kind: "component", type: i9$1.Knob, selector: "p-knob", inputs: ["styleClass", "style", "ariaLabel", "ariaLabelledBy", "tabindex", "valueColor", "rangeColor", "textColor", "valueTemplate", "name", "size", "step", "min", "max", "strokeWidth", "disabled", "showValue", "readonly"], outputs: ["onChange"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i11.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
638
- }
639
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InlineInputComponent, decorators: [{
640
- type: Component,
641
- args: [{ selector: 'lib-inline-input', standalone: true, imports: [
642
- FormsModule,
643
- InputTextModule,
644
- DatePickerModule,
645
- SelectModule,
646
- MultiSelectModule,
647
- InputMaskModule,
648
- InputNumberModule,
649
- InputOtpModule,
650
- KnobModule,
651
- TextareaModule,
652
- ChipModule,
653
- CommonModule
654
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
655
- {
656
- provide: NG_VALUE_ACCESSOR,
657
- useExisting: forwardRef(() => InlineInputComponent),
658
- multi: true
659
- }
660
- ], template: "@let valueInput = value();\r\n@let isDisabled = config().isDisabled ?? false;\r\n@let knobConfig = config().knobConfig;\r\n@let textareaConfig = config().textareaConfig;\r\n@let dateConfig = config().dateConfig;\r\n\r\n@switch (type) {\r\n@case (ETypeInput.CURRENCY) {\r\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n (keydown)=\"onKeyDown($event)\" mode=\"currency\" [currency]=\"currency\" [locale]=\"locale\"\r\n [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" class=\"w-full\"\r\n [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.DECIMAL) {\r\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n (keydown)=\"onKeyDown($event)\" mode=\"decimal\" [locale]=\"locale\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\"\r\n [useGrouping]=\"true\" class=\"w-full\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.DATE) {\r\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n (keydown)=\"onKeyDown($event)\" class=\"w-full\" [disabled]=\"isDisabled\" [maxDate]=\"dateConfig?.maxDate || null\"\r\n [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\r\n}\r\n@case (ETypeInput.DATETIME_LOCAL) {\r\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n (keydown)=\"onKeyDown($event)\" class=\"w-full\" [showTime]=\"true\" [hourFormat]=\"'24'\" [disabled]=\"isDisabled\"\r\n [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\r\n}\r\n@case (ETypeInput.SELECT) {\r\n<p-select [options]=\"config().selectConfig?.options ?? []\" [optionLabel]=\"config().selectConfig?.optionLabel ?? 'name'\"\r\n [(ngModel)]=\"valueSelect\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\"\r\n appendTo=\"body\" class=\"w-full inline-input-select\" [disabled]=\"config().isDisabled ?? false\" >\r\n @for (template of templates; track $index) {\r\n <ng-template [pTemplate]=\"template.getType()\" let-item>\r\n <ng-container *ngTemplateOutlet=\"template.template; context: { $implicit: item }\"></ng-container>\r\n </ng-template>\r\n }\r\n</p-select>\r\n}\r\n@case (ETypeInput.MULTISELECT) {\r\n<p-multiselect [options]=\"config().multiSelectConfig?.options ?? []\"\r\n [optionLabel]=\"config().multiSelectConfig?.optionLabel ?? 'name'\" [ngModel]=\"valueInput\"\r\n (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [filter]=\"true\"\r\n appendTo=\"body\" class=\"w-full\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.OTP) {\r\n<p-inputotp class=\"w-full\" [mask]=\"config().otpConfig?.mask ?? false\" [length]=\"config().otpConfig?.length ?? 6\"\r\n [integerOnly]=\"config().otpConfig?.integerOnly ?? false\" [ngModel]=\"valueInput\"\r\n (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.KNOB) {\r\n<p-knob [ngModel]=\"knobValueInput()\" (ngModelChange)=\"onChangeValue($event)\" class=\"w-full\" [min]=\"knobConfig?.min ?? 0\"\r\n [max]=\"knobConfig?.max ?? 100\" [step]=\"knobConfig?.step ?? 1\" [disabled]=\"isDisabled\" [readonly]=\"true\"\r\n [valueTemplate]=\"knobValueTemplate()\" [size]=\"knobConfig?.size ?? 100\" />\r\n}\r\n@case (ETypeInput.TEXTAREA) {\r\n<textarea class=\"w-full h-full p-2 border border-gray-300 rounded-md\" pTextarea [rows]=\"textareaConfig?.rows ?? 3\"\r\n [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n [disabled]=\"isDisabled\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (blur)=\"onBlur()\"\r\n (keydown)=\"onKeyDown($event)\"></textarea>\r\n}\r\n@case (ETypeInput.CHIPS) {\r\n<div class=\"chips-input-wrapper\">\r\n <div\r\n class=\"chips-container w-full p-2 border border-gray-300 rounded-md min-h-[40px] flex flex-wrap items-center gap-2\"\r\n [class.border-red-500]=\"showDuplicateMessage\">\r\n @for (chip of chips; track $index) {\r\n <p-chip [label]=\"chip\" [removable]=\"!isDisabled\" (onRemove)=\"removeChip($index)\" class=\"chip-item\" />\r\n }\r\n <input type=\"text\" class=\"chip-input flex-1 border-0 outline-0 bg-transparent min-w-[100px]\" [value]=\"currentInput\"\r\n (input)=\"onChipInputChange($event)\" (keydown)=\"onChipKeydown($event); onKeyDown($event)\"\r\n (paste)=\"onChipPaste($event)\" [disabled]=\"isDisabled\"\r\n placeholder=\"Escribe o pega elementos separados por espacios...\" />\r\n </div>\r\n @if (showDuplicateMessage) {\r\n <div class=\"duplicate-message text-red-500 text-sm mt-1 flex items-center gap-1\">\r\n <i class=\"pi pi-exclamation-triangle text-red-500\"></i>\r\n <span>\r\n @if (duplicateChips.length === 1) {\r\n El elemento \"<strong>{{ duplicatesText }}</strong>\" ya existe en la lista\r\n } @else {\r\n Los elementos \"<strong>{{ duplicatesText }}</strong>\" ya existen en la lista\r\n }\r\n </span>\r\n </div>\r\n }\r\n</div>\r\n}\r\n@default {\r\n<input pInputText class=\"w-full h-full p-2 border border-gray-300 rounded-md\" [type]=\"type\"\r\n [readOnly]=\"config().readonly ?? false\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\"\r\n (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\r\n}\r\n}", styles: [":host{width:100%;height:100%}.chips-input-wrapper{width:100%}.chips-input-wrapper .chips-container{cursor:text;transition:border-color .2s ease,box-shadow .2s ease}.chips-input-wrapper .chips-container:focus-within{border-color:#007ad9;box-shadow:0 0 0 1px #007ad9}.chips-input-wrapper .chips-container.border-red-500{border-color:#ef4444!important;box-shadow:0 0 0 1px #ef4444!important}.chips-input-wrapper .chips-container .chip-item{margin:0}.chips-input-wrapper .chips-container .chip-input:focus{outline:none}.chips-input-wrapper .chips-container .chip-input::placeholder{color:#6b7280;font-style:italic}.chips-input-wrapper .duplicate-message{animation:slideDown .3s ease-out}.chips-input-wrapper .duplicate-message i{font-size:14px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}::ng-deep p-select.inline-input-select{border:1px solid #d1d5db!important;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:space-between}::ng-deep p-select.inline-input-select .p-select-label{border:none}::ng-deep p-select.inline-input-select .p-select-trigger{border:none}::ng-deep .my-app-dark p-select.inline-input-select{border:1px solid transparent!important;background:transparent;color:#f3f4f6}::ng-deep .my-app-dark p-inputnumber .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}::ng-deep .my-app-dark p-datepicker .p-inputtext{background-color:#374151;color:#f3f4f6}::ng-deep .my-app-dark p-multiselect .p-multiselect-label{background-color:#374151;color:#f3f4f6}\n"] }]
661
- }], ctorParameters: () => [], propDecorators: { templates: [{
662
- type: ContentChildren,
663
- args: [PrimeTemplate]
664
- }] } });
665
-
666
- class AppButtonNgService {
667
- buttonConfig = signal({});
668
- constructor() {
669
- // Effect para manejar automáticamente la rotación de mensajes
670
- effect(() => {
671
- const config = this.buttonConfig();
672
- if (config.loading && config.loadingMessages && config.loadingMessages.length > 1) {
673
- this.startMessageRotation();
674
- }
675
- else {
676
- this.stopMessageRotation();
677
- }
678
- });
679
- }
680
- setButtonConfig(buttonConfig) {
681
- this.buttonConfig.set(buttonConfig);
682
- }
683
- // Computed público para acceder al label dinámico
684
- label = computed(() => {
685
- const config = this.buttonConfig();
686
- // Si está cargando y tiene mensajes de carga, rotar entre ellos
687
- if (config.loading && config.loadingMessages && config.loadingMessages.length > 0) {
688
- const messages = config.loadingMessages;
689
- const index = this.messageIndex() % messages.length; // Wrap around
690
- return messages[index];
691
- }
692
- // Si no está cargando, retornar el label normal
693
- return config.label ? config.label : '';
694
- });
695
- //#region Loading Messages
696
- messageIndex = signal(0);
697
- intervalId;
698
- startMessageRotation() {
699
- if (this.intervalId)
700
- return;
701
- this.intervalId = setInterval(() => {
702
- this.messageIndex.update(index => index + 1);
703
- }, 6000);
704
- }
705
- stopMessageRotation() {
706
- if (this.intervalId) {
707
- clearInterval(this.intervalId);
708
- this.intervalId = undefined;
709
- this.messageIndex.set(0);
710
- }
711
- }
712
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AppButtonNgService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
713
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AppButtonNgService, providedIn: 'root' });
714
- }
715
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AppButtonNgService, decorators: [{
716
- type: Injectable,
717
- args: [{
718
- providedIn: 'root'
719
- }]
720
- }], ctorParameters: () => [] });
721
-
722
- class ButtonNgComponent {
723
- appButtonNgService = inject(AppButtonNgService);
724
- buttonConfig = model.required();
725
- onClick = output();
726
- constructor() {
727
- effect(() => {
728
- this.appButtonNgService.setButtonConfig(this.buttonConfig());
729
- });
730
- }
731
- get label() {
732
- return this.appButtonNgService.label();
733
- }
734
- onClickButton() {
735
- if (this.buttonConfig().onClick) {
736
- return;
737
- }
738
- this.onClick.emit();
739
- }
740
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
741
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ButtonNgComponent, isStandalone: true, selector: "lib-button-ng", inputs: { buttonConfig: { classPropertyName: "buttonConfig", publicName: "buttonConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { buttonConfig: "buttonConfigChange", onClick: "onClick" }, providers: [AppButtonNgService], ngImport: i0, template: "@let config = buttonConfig(); @let tooltipConfig = buttonConfig().tooltipConfig;\r\n@if (!config.hideButton) {\r\n <div\r\n [ngClass]=\"{\r\n 'full-width-button': config.fullWidth,\r\n 'full-height-button': config.fullHeight,\r\n 'cursor-pointer': this.onClick\r\n }\"\r\n [class]=\"config.class ?? ''\"\r\n >\r\n <p-button\r\n [label]=\"config.hasTemplate ? undefined : label\"\r\n [icon]=\"config.hasTemplate ? undefined : config.icon\"\r\n [severity]=\"config.hasTemplate ? 'secondary' : config.severity\"\r\n [loading]=\"config.loading || false\"\r\n [disabled]=\"config.disabled || false\"\r\n [rounded]=\"config.rounded || false\"\r\n [raised]=\"config.raised || false\"\r\n [variant]=\"config.hasTemplate ? 'text' : config.variant\"\r\n [badge]=\"config.badge\"\r\n (onClick)=\"config?.onClick?.() ?? onClickButton()\"\r\n [size]=\"config?.size\"\r\n pTooltip=\"{{ tooltipConfig?.pTooltip }}\"\r\n [tooltipPosition]=\"tooltipConfig?.tooltipPosition ?? 'top'\"\r\n [iconPos]=\"config?.iconPos ?? 'left'\"\r\n [ngClass]=\"{\r\n 'cursor-pointer': (config.onClick || config.hasStaticClick) && !config.disabled,\r\n 'cursor-auto': !((config.onClick || config.hasStaticClick) && !config.disabled),\r\n 'no-hover-template': config.hasTemplate\r\n }\"\r\n [outlined]=\"config.outlined || false\"\r\n [text]=\"config.text || false\"\r\n >\r\n @if (config.hasTemplate) {\r\n <ng-content></ng-content>\r\n }\r\n </p-button>\r\n </div>\r\n}\r\n", styles: [".full-width-button ::ng-deep p-button button{width:100%}.full-height-button ::ng-deep p-button button{height:100%}::ng-deep .cursor-auto button{cursor:auto!important}::ng-deep .cursor-pointer button{cursor:pointer!important}::ng-deep .no-hover-template button{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}::ng-deep .no-hover-template button:hover,::ng-deep .no-hover-template button:focus,::ng-deep .no-hover-template button:active{background:transparent!important;border:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
742
- }
743
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonNgComponent, decorators: [{
744
- type: Component,
745
- args: [{ selector: 'lib-button-ng', imports: [
746
- ButtonModule,
747
- TooltipModule,
748
- CommonModule
749
- ], providers: [AppButtonNgService], template: "@let config = buttonConfig(); @let tooltipConfig = buttonConfig().tooltipConfig;\r\n@if (!config.hideButton) {\r\n <div\r\n [ngClass]=\"{\r\n 'full-width-button': config.fullWidth,\r\n 'full-height-button': config.fullHeight,\r\n 'cursor-pointer': this.onClick\r\n }\"\r\n [class]=\"config.class ?? ''\"\r\n >\r\n <p-button\r\n [label]=\"config.hasTemplate ? undefined : label\"\r\n [icon]=\"config.hasTemplate ? undefined : config.icon\"\r\n [severity]=\"config.hasTemplate ? 'secondary' : config.severity\"\r\n [loading]=\"config.loading || false\"\r\n [disabled]=\"config.disabled || false\"\r\n [rounded]=\"config.rounded || false\"\r\n [raised]=\"config.raised || false\"\r\n [variant]=\"config.hasTemplate ? 'text' : config.variant\"\r\n [badge]=\"config.badge\"\r\n (onClick)=\"config?.onClick?.() ?? onClickButton()\"\r\n [size]=\"config?.size\"\r\n pTooltip=\"{{ tooltipConfig?.pTooltip }}\"\r\n [tooltipPosition]=\"tooltipConfig?.tooltipPosition ?? 'top'\"\r\n [iconPos]=\"config?.iconPos ?? 'left'\"\r\n [ngClass]=\"{\r\n 'cursor-pointer': (config.onClick || config.hasStaticClick) && !config.disabled,\r\n 'cursor-auto': !((config.onClick || config.hasStaticClick) && !config.disabled),\r\n 'no-hover-template': config.hasTemplate\r\n }\"\r\n [outlined]=\"config.outlined || false\"\r\n [text]=\"config.text || false\"\r\n >\r\n @if (config.hasTemplate) {\r\n <ng-content></ng-content>\r\n }\r\n </p-button>\r\n </div>\r\n}\r\n", styles: [".full-width-button ::ng-deep p-button button{width:100%}.full-height-button ::ng-deep p-button button{height:100%}::ng-deep .cursor-auto button{cursor:auto!important}::ng-deep .cursor-pointer button{cursor:pointer!important}::ng-deep .no-hover-template button{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}::ng-deep .no-hover-template button:hover,::ng-deep .no-hover-template button:focus,::ng-deep .no-hover-template button:active{background:transparent!important;border:none!important;box-shadow:none!important}\n"] }]
750
- }], ctorParameters: () => [] });
751
-
752
- class KeyToDisplayNamePipe {
753
- transform(key, keysNames) {
754
- return keysNames?.[key] ?? key;
755
- }
756
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KeyToDisplayNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
757
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: KeyToDisplayNamePipe, isStandalone: true, name: "keyToDisplayName" });
758
- }
759
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KeyToDisplayNamePipe, decorators: [{
760
- type: Pipe,
761
- args: [{
762
- name: 'keyToDisplayName'
763
- }]
764
- }] });
765
-
766
- /**
767
- * Utilidades para manejar errores de API según la interfaz IApiError
768
- */
769
- class ApiErrorUtil {
770
- /**
771
- * Procesa errores de API y extrae el mensaje según la interfaz IApiError
772
- * @param error - El error HTTP recibido
773
- * @param fallbackMessage - Mensaje por defecto si no se puede extraer el mensaje del error
774
- * @returns El mensaje de error procesado
775
- */
776
- static handleApiError(error, fallbackMessage) {
777
- const apiError = error.error;
778
- const errorMessage = Array.isArray(apiError?.message)
779
- ? apiError.message.join(', ')
780
- : apiError?.message ?? fallbackMessage;
781
- return errorMessage;
782
- }
783
- /**
784
- * Procesa errores de API con información detallada de campos
785
- * y muestra tanto el mensaje general como los errores específicos de campo
786
- * @param error - El error HTTP recibido
787
- * @param fallbackMessage - Mensaje por defecto si no se puede extraer el mensaje del error
788
- * @returns El mensaje de error procesado con información de campos si está disponible
789
- */
790
- static handleApiErrorWithFields(error, fallbackMessage) {
791
- const apiError = error.error;
792
- let errorMessage = Array.isArray(apiError?.message)
793
- ? apiError.message.join(', ')
794
- : apiError?.message ?? fallbackMessage;
795
- // Si hay errores de campo específicos, los agregamos al mensaje
796
- if (apiError?.errors && apiError.errors.length > 0) {
797
- const fieldErrors = apiError.errors
798
- .map(fieldError => `${fieldError.field}: ${fieldError.message}`)
799
- .join(', ');
800
- errorMessage = `${errorMessage}. Errores de campos: ${fieldErrors}`;
801
- }
802
- return errorMessage;
803
- }
804
- /**
805
- * Obtiene solo los errores de campo específicos
806
- * @param error - El error HTTP recibido
807
- * @returns Array de errores de campo o array vacío si no hay errores
808
- */
809
- static getFieldErrors(error) {
810
- const apiError = error.error;
811
- return apiError?.errors ?? [];
812
- }
813
- /**
814
- * Verifica si el error tiene errores de campo específicos
815
- * @param error - El error HTTP recibido
816
- * @returns true si hay errores de campo, false en caso contrario
817
- */
818
- static hasFieldErrors(error) {
819
- const apiError = error.error;
820
- return apiError?.errors && apiError.errors.length > 0;
821
- }
822
- /**
823
- * Obtiene el código de error específico
824
- * @param error - El error HTTP recibido
825
- * @returns El código de error o undefined si no está disponible
826
- */
827
- static getErrorCode(error) {
828
- const apiError = error.error;
829
- return apiError?.errorCode;
830
- }
831
- /**
832
- * Obtiene el timestamp del error
833
- * @param error - El error HTTP recibido
834
- * @returns El timestamp del error o undefined si no está disponible
835
- */
836
- static getErrorTimestamp(error) {
837
- const apiError = error.error;
838
- return apiError?.timestamp;
839
- }
840
- }
841
-
842
- class CookieUtil {
843
- /**
844
- * Obtiene el valor de una cookie por su nombre
845
- * @param name - Nombre de la cookie
846
- * @returns El valor de la cookie o null si no existe
847
- */
848
- static getCookie(name) {
849
- if (typeof document === 'undefined') {
850
- return null;
851
- }
852
- const nameEQ = name + '=';
853
- const ca = document.cookie.split(';');
854
- for (let i = 0; i < ca.length; i++) {
855
- let c = ca[i];
856
- while (c.charAt(0) === ' ') {
857
- c = c.substring(1, c.length);
858
- }
859
- if (c.indexOf(nameEQ) === 0) {
860
- return c.substring(nameEQ.length, c.length);
861
- }
862
- }
863
- return null;
864
- }
865
- /**
866
- * Establece una cookie
867
- * @param name - Nombre de la cookie
868
- * @param value - Valor de la cookie
869
- * @param days - Días hasta que expire (por defecto 365)
870
- * @param path - Ruta de la cookie (por defecto '/')
871
- */
872
- static setCookie(name, value, days = 365, path = '/') {
873
- if (typeof document === 'undefined') {
874
- return;
875
- }
876
- let expires = '';
877
- if (days) {
878
- const date = new Date();
879
- date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
880
- expires = '; expires=' + date.toUTCString();
881
- }
882
- document.cookie = name + '=' + (value || '') + expires + '; path=' + path;
883
- }
884
- /**
885
- * Elimina una cookie
886
- * @param name - Nombre de la cookie a eliminar
887
- * @param path - Ruta de la cookie (por defecto '/')
888
- */
889
- static eraseCookie(name, path = '/') {
890
- if (typeof document === 'undefined') {
891
- return;
892
- }
893
- document.cookie = name + '=; Path=' + path + '; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
894
- }
895
- /**
896
- * Obtiene un valor booleano desde una cookie
897
- * @param name - Nombre de la cookie
898
- * @param defaultValue - Valor por defecto si la cookie no existe
899
- * @returns El valor booleano
900
- */
901
- static getBooleanCookie(name, defaultValue = false) {
902
- const value = this.getCookie(name);
903
- if (value === null) {
904
- return defaultValue;
905
- }
906
- return value === 'true';
907
- }
908
- /**
909
- * Establece un valor booleano en una cookie
910
- * @param name - Nombre de la cookie
911
- * @param value - Valor booleano
912
- * @param days - Días hasta que expire (por defecto 365)
913
- * @param path - Ruta de la cookie (por defecto '/')
914
- */
915
- static setBooleanCookie(name, value, days = 365, path = '/') {
916
- this.setCookie(name, value.toString(), days, path);
917
- }
918
- }
919
-
920
- const formatCurrency = (amount, currency) => {
921
- return new Intl.NumberFormat('es-CO', {
922
- style: 'currency',
923
- currency: currency || 'COP'
924
- }).format(amount);
925
- };
926
-
927
- const isSameDay = (date1, date2) => {
928
- const date1Copy = new Date(date1.setHours(0, 0, 0, 0));
929
- const date2Copy = new Date(date2.setHours(0, 0, 0, 0));
930
- return date1Copy.getTime() === date2Copy.getTime();
931
- };
932
- const formatDateDMA = (date) => {
933
- return new Date(date).toLocaleDateString('es-CO', {
934
- year: 'numeric',
935
- month: '2-digit',
936
- day: '2-digit'
937
- });
938
- };
939
- // Crea una funcion que tambien muestre la hora
940
- const formatDateDMAWithTime = (date) => {
941
- return new Date(date).toLocaleDateString('es-CO', {
942
- year: 'numeric',
943
- month: '2-digit',
944
- day: '2-digit',
945
- hour: '2-digit',
946
- minute: '2-digit'
947
- });
948
- };
949
-
950
- /**
951
- * Enum con los tipos de archivos más relevantes para la aplicación
952
- */
953
- var EFileType;
954
- (function (EFileType) {
955
- // Documentos
956
- EFileType["PDF"] = "application/pdf";
957
- EFileType["DOC"] = "application/msword";
958
- EFileType["DOCX"] = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
959
- EFileType["XLS"] = "application/vnd.ms-excel";
960
- EFileType["XLSX"] = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
961
- EFileType["PPT"] = "application/vnd.ms-powerpoint";
962
- EFileType["PPTX"] = "application/vnd.openxmlformats-officedocument.presentationml.presentation";
963
- EFileType["TXT"] = "text/plain";
964
- EFileType["RTF"] = "application/rtf";
965
- // Imágenes
966
- EFileType["JPG"] = "image/jpeg";
967
- EFileType["PNG"] = "image/png";
968
- EFileType["GIF"] = "image/gif";
969
- EFileType["BMP"] = "image/bmp";
970
- EFileType["SVG"] = "image/svg+xml";
971
- EFileType["WEBP"] = "image/webp";
972
- // Archivos comprimidos
973
- EFileType["ZIP"] = "application/zip";
974
- EFileType["RAR"] = "application/vnd.rar";
975
- EFileType["TAR"] = "application/x-tar";
976
- EFileType["GZ"] = "application/gzip";
977
- // Archivos de datos
978
- EFileType["CSV"] = "text/csv";
979
- EFileType["JSON"] = "application/json";
980
- EFileType["XML"] = "application/xml";
981
- // Archivos de audio
982
- EFileType["MP3"] = "audio/mpeg";
983
- EFileType["WAV"] = "audio/wav";
984
- EFileType["OGG"] = "audio/ogg";
985
- // Archivos de video
986
- EFileType["MP4"] = "video/mp4";
987
- EFileType["AVI"] = "video/x-msvideo";
988
- EFileType["MOV"] = "video/quicktime";
989
- EFileType["WMV"] = "video/x-ms-wmv";
990
- // Todos los tipos de imagen
991
- EFileType["ALL_IMAGES"] = "image/*";
992
- // Todos los tipos de documento
993
- EFileType["ALL_DOCUMENTS"] = "application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,text/plain,application/rtf";
994
- // Todos los tipos de archivo
995
- EFileType["ALL_FILES"] = "*/*";
996
- })(EFileType || (EFileType = {}));
997
- /**
998
- * Método mejorado para abrir el selector de archivos
999
- * @param options - Opciones para configurar el input de archivo
1000
- */
1001
- const triggerFileInput = (options = {}) => {
1002
- const { accept = EFileType.ALL_FILES, multiple = false, onFileSelected } = options;
1003
- const input = document.createElement('input');
1004
- input.type = 'file';
1005
- input.accept = accept;
1006
- input.multiple = multiple;
1007
- input.style.display = 'none';
1008
- input.onchange = (event) => {
1009
- const target = event.target;
1010
- const files = target.files;
1011
- if (files && files.length > 0 && onFileSelected) {
1012
- if (multiple) {
1013
- // Si es múltiple, llamar al callback con todos los archivos
1014
- Array.from(files).forEach(file => {
1015
- onFileSelected(file);
1016
- });
1017
- }
1018
- else {
1019
- // Si es único, llamar al callback con el primer archivo
1020
- const file = files[0];
1021
- onFileSelected(file);
1022
- }
1023
- }
1024
- document.body.removeChild(input);
1025
- };
1026
- document.body.appendChild(input);
1027
- input.click();
1028
- };
1029
- /**
1030
- * Función para capturar una foto usando la cámara
1031
- */
1032
- const capturePhotoFromCamera = async (options = {}) => {
1033
- const { quality = 0.9, facingMode = 'environment', onPhotoTaken, onError } = options;
1034
- try {
1035
- if (!navigator.mediaDevices?.getUserMedia) {
1036
- throw new Error('Cámara no soportada en este navegador');
1037
- }
1038
- const stream = await navigator.mediaDevices.getUserMedia({
1039
- video: { facingMode }
1040
- });
1041
- const video = document.createElement('video');
1042
- const canvas = document.createElement('canvas');
1043
- const context = canvas.getContext('2d');
1044
- // Crear modal
1045
- const modal = document.createElement('div');
1046
- modal.style.cssText = `
1047
- position: fixed; top: 0; left: 0; width: 100%; height: 100%;
1048
- background: rgba(0,0,0,0.9); display: flex; flex-direction: column;
1049
- align-items: center; justify-content: center; z-index: 10000;
1050
- `;
1051
- video.style.cssText = 'width: 80%; max-width: 500px; border-radius: 8px;';
1052
- video.srcObject = stream;
1053
- video.autoplay = true;
1054
- video.playsInline = true;
1055
- const buttonsDiv = document.createElement('div');
1056
- buttonsDiv.style.cssText = 'display: flex; gap: 20px; margin-top: 20px;';
1057
- const captureBtn = document.createElement('button');
1058
- captureBtn.textContent = 'Tomar Foto';
1059
- captureBtn.style.cssText = `
1060
- padding: 12px 24px; background: #007bff; color: white;
1061
- border: none; border-radius: 6px; cursor: pointer; font-size: 16px;
1062
- `;
1063
- const cancelBtn = document.createElement('button');
1064
- cancelBtn.textContent = 'Cancelar';
1065
- cancelBtn.style.cssText = `
1066
- padding: 12px 24px; background: #6c757d; color: white;
1067
- border: none; border-radius: 6px; cursor: pointer; font-size: 16px;
1068
- `;
1069
- const cleanup = () => {
1070
- stream.getTracks().forEach(track => track.stop());
1071
- modal.remove();
1072
- };
1073
- captureBtn.onclick = () => {
1074
- canvas.width = video.videoWidth;
1075
- canvas.height = video.videoHeight;
1076
- context.drawImage(video, 0, 0);
1077
- canvas.toBlob((blob) => {
1078
- if (blob && onPhotoTaken) {
1079
- const file = new File([blob], `photo-${Date.now()}.jpg`, { type: 'image/jpeg' });
1080
- onPhotoTaken(file);
1081
- }
1082
- cleanup();
1083
- }, 'image/jpeg', quality);
1084
- };
1085
- cancelBtn.onclick = cleanup;
1086
- document.addEventListener('keydown', (e) => {
1087
- if (e.key === 'Escape')
1088
- cleanup();
1089
- });
1090
- buttonsDiv.append(captureBtn, cancelBtn);
1091
- modal.append(video, buttonsDiv);
1092
- document.body.appendChild(modal);
1093
- }
1094
- catch (error) {
1095
- if (onError)
1096
- onError(error);
1097
- }
1098
- };
1099
- var EFileIcons;
1100
- (function (EFileIcons) {
1101
- EFileIcons["FILE"] = "file";
1102
- EFileIcons["IMAGE"] = "image";
1103
- EFileIcons["VIDEO"] = "video";
1104
- EFileIcons["FOLDER"] = "folder";
1105
- EFileIcons["EXCEL"] = "excel";
1106
- EFileIcons["SIGNATURE"] = "signature";
1107
- EFileIcons["CONTRACT"] = "contract";
1108
- EFileIcons["FINGERPRINT"] = "fingerprint";
1109
- EFileIcons["ID_CARD"] = "id_card";
1110
- EFileIcons["FILE_BOX"] = "file_box";
1111
- EFileIcons["SECURE_BUILDING"] = "secure_building";
1112
- EFileIcons["POLICE"] = "police";
1113
- })(EFileIcons || (EFileIcons = {}));
1114
- const DocumentIcon = {
1115
- [EFileIcons.FILE]: 'fa-solid fa-file-lines',
1116
- [EFileIcons.IMAGE]: 'fa-solid fa-file-image',
1117
- [EFileIcons.VIDEO]: 'fa-solid fa-file-video',
1118
- [EFileIcons.FOLDER]: 'fa-solid fa-folder',
1119
- [EFileIcons.EXCEL]: 'fa-solid fa-file-excel',
1120
- [EFileIcons.SIGNATURE]: 'fa-solid fa-signature',
1121
- [EFileIcons.CONTRACT]: 'fa-solid fa-file-contract',
1122
- [EFileIcons.FINGERPRINT]: 'fa-solid fa-fingerprint',
1123
- [EFileIcons.ID_CARD]: 'fa-solid fa-id-card',
1124
- [EFileIcons.SECURE_BUILDING]: 'fa-solid fa-building-shield',
1125
- [EFileIcons.POLICE]: 'fa-solid fa-hand-middle-finger',
1126
- [EFileIcons.FILE_BOX]: 'fa-solid fa-box-archive'
1127
- };
1128
- const downloadFile = (blob, fileName) => {
1129
- const url = window.URL.createObjectURL(blob);
1130
- const link = document.createElement('a');
1131
- link.href = url;
1132
- link.download = fileName;
1133
- document.body.appendChild(link);
1134
- link.click();
1135
- document.body.removeChild(link);
1136
- window.URL.revokeObjectURL(url);
1137
- };
1138
-
1139
- //sin uuid, codigo propio
1140
- const generateId = () => {
1141
- return Date.now().toString(36) + Math.random().toString(36).substring(2, 15);
1142
- };
1143
-
1144
- const formatNumber = (number) => {
1145
- return new Intl.NumberFormat('es-CO', {
1146
- minimumFractionDigits: 2,
1147
- maximumFractionDigits: 2
1148
- }).format(number);
1149
- };
1150
- const fixedNumber = (number) => {
1151
- return Number(number.toFixed(2));
1152
- };
1153
-
1154
- const hasValues = (obj) => {
1155
- return Object.values(obj).some(value => value !== null && value !== undefined);
1156
- };
1157
- /**
1158
- * Elimina las propiedades de un objeto que tengan valores null o undefined.
1159
- * Retorna un nuevo objeto sin mutar el original.
1160
- * @param obj - Objeto del cual se eliminarán las propiedades null/undefined
1161
- * @returns Nuevo objeto sin las propiedades con valores null o undefined
1162
- */
1163
- const removeNullUndefined = (obj) => {
1164
- const result = {};
1165
- Object.keys(obj).forEach(key => {
1166
- const value = obj[key];
1167
- if (value !== null && value !== undefined) {
1168
- result[key] = value;
1169
- }
1170
- });
1171
- return result;
1172
- };
1173
- /**
1174
- * Realiza un upsert en un array de strings. Si el string ya existe, no hace nada.
1175
- * Si no existe, lo agrega al array.
1176
- * @param targetArray - Array de strings donde se realizará el upsert
1177
- * @param value - String o array de strings a insertar
1178
- * @returns Array actualizado con los nuevos valores
1179
- */
1180
- const upsertArrayStrings = (targetArray, value) => {
1181
- // Crear una copia del array original para evitar mutaciones
1182
- const result = [...targetArray];
1183
- // Convertir el valor a array para procesamiento uniforme
1184
- const valuesToInsert = Array.isArray(value) ? value : [value];
1185
- // Procesar cada valor
1186
- valuesToInsert.forEach(stringValue => {
1187
- // Solo agregar si no existe en el array
1188
- if (!result.includes(stringValue)) {
1189
- result.push(stringValue);
1190
- }
1191
- });
1192
- return result;
1193
- };
1194
- const sameArray = (arr1, arr2) => {
1195
- if (arr1.length !== arr2.length)
1196
- return false;
1197
- const sorted1 = Array.from(arr1).sort();
1198
- const sorted2 = Array.from(arr2).sort();
1199
- return sorted1.every((item, index) => item === sorted2[index]);
1200
- };
1201
- const getOptionByCode = (options, code) => {
1202
- if (!code)
1203
- return undefined;
1204
- return options.find((item) => item.code === code);
1205
- };
1206
- const createEnumeratedList = (items) => {
1207
- if (items.length === 0) {
1208
- return '';
1209
- }
1210
- if (items.length === 1) {
1211
- return `1. ${items[0]}`;
1212
- }
1213
- return items
1214
- .map((item, index) => `${index + 1}. ${item}`)
1215
- .join('\n');
1216
- };
1217
-
1218
- class PrimeNgUtil {
1219
- static isPrimeNgSelection(value) {
1220
- return typeof value === 'object' && value !== null && 'name' in value && 'code' in value;
1221
- }
1222
- }
1223
-
1224
- class BadgeNgComponent {
1225
- config = model.required();
1226
- get value() {
1227
- return this.config().value;
1228
- }
1229
- get severity() {
1230
- return this.config().severity;
1231
- }
1232
- get badgeSize() {
1233
- return this.config().badgeSize ?? 'small';
1234
- }
1235
- get fullWidth() {
1236
- return this.config().fullWidth ?? true;
1237
- }
1238
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BadgeNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1239
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: BadgeNgComponent, isStandalone: true, selector: "lib-badge-ng", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { config: "configChange" }, ngImport: i0, template: "<p-badge\r\n [style]=\"{\r\n textAlign: 'center',\r\n width: fullWidth ? '100%' : 'auto'\r\n }\"\r\n [value]=\"value\"\r\n [severity]=\"severity\"\r\n [badgeSize]=\"badgeSize\"\r\n/>\r\n", dependencies: [{ kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i1$3.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] });
1240
- }
1241
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BadgeNgComponent, decorators: [{
1242
- type: Component,
1243
- args: [{ selector: 'lib-badge-ng', imports: [BadgeModule], template: "<p-badge\r\n [style]=\"{\r\n textAlign: 'center',\r\n width: fullWidth ? '100%' : 'auto'\r\n }\"\r\n [value]=\"value\"\r\n [severity]=\"severity\"\r\n [badgeSize]=\"badgeSize\"\r\n/>\r\n" }]
1244
- }] });
1245
-
1246
- class ToolbarNgComponent {
1247
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToolbarNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1248
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ToolbarNgComponent, isStandalone: true, selector: "lib-toolbar-ng", ngImport: i0, template: "<p-toolbar class=\"border-0 bg-transparent\">\r\n <ng-template pTemplate=\"start\">\r\n <ng-content select=\"[toolbarStart]\"></ng-content>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"center\">\r\n <ng-content select=\"[toolbarCenter]\"></ng-content>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"end\">\r\n <ng-content select=\"[toolbarEnd]\"></ng-content>\r\n </ng-template>\r\n</p-toolbar>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i1$4.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] });
1249
- }
1250
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToolbarNgComponent, decorators: [{
1251
- type: Component,
1252
- args: [{ selector: 'lib-toolbar-ng', imports: [
1253
- ToolbarModule
1254
- ], template: "<p-toolbar class=\"border-0 bg-transparent\">\r\n <ng-template pTemplate=\"start\">\r\n <ng-content select=\"[toolbarStart]\"></ng-content>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"center\">\r\n <ng-content select=\"[toolbarCenter]\"></ng-content>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"end\">\r\n <ng-content select=\"[toolbarEnd]\"></ng-content>\r\n </ng-template>\r\n</p-toolbar>\r\n" }]
1255
- }] });
1256
-
1257
- class TableNgEditService {
1258
- editConfig = signal(undefined);
1259
- keysNames = signal({});
1260
- constructor() { }
1261
- setEditConfig(editConfig) {
1262
- this.editConfig.set(editConfig);
1263
- }
1264
- setKeysNames(keysNames) {
1265
- this.keysNames.set(keysNames);
1266
- }
1267
- fb = inject(NonNullableFormBuilder);
1268
- controls = computed(() => {
1269
- const formValues = this.searchFormGroup().value;
1270
- const controls = [
1271
- {
1272
- controlName: 'search',
1273
- control: this.fb.control(formValues.search, { validators: [] }),
1274
- typeInput: ETypeInput.TEXT,
1275
- colSpan: 12,
1276
- label: '-'
1277
- }
1278
- ];
1279
- return controls;
1280
- });
1281
- searchFormGroup = signal(new FormGroup({}));
1282
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgEditService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1283
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgEditService, providedIn: 'root' });
1284
- }
1285
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgEditService, decorators: [{
1286
- type: Injectable,
1287
- args: [{
1288
- providedIn: 'root'
1289
- }]
1290
- }], ctorParameters: () => [] });
1291
-
1292
- class TableNgGeneralService {
1293
- constructor() { }
1294
- MOCK_EMPTY_DATE = new Date(1900, 0, 1);
1295
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgGeneralService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1296
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgGeneralService, providedIn: 'root' });
1297
- }
1298
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgGeneralService, decorators: [{
1299
- type: Injectable,
1300
- args: [{
1301
- providedIn: 'root'
1302
- }]
1303
- }], ctorParameters: () => [] });
1304
-
1305
- // services/dialog.service.ts
1306
- class CustomDialogService {
1307
- dialogRef;
1308
- dialogService = inject(DialogService);
1309
- constructor() { }
1310
- open(component, options = {}) {
1311
- const defaultConfig = {
1312
- closable: true,
1313
- header: options.header || '',
1314
- width: options.width || '50%',
1315
- height: options.height || 'auto',
1316
- closeOnEscape: options.closeOnEscape ?? true,
1317
- baseZIndex: options.baseZIndex || 10000,
1318
- maximizable: options.maximizable ?? true,
1319
- data: options.data || {},
1320
- style: {
1321
- borderRadius: '8px',
1322
- ...options.style
1323
- },
1324
- modal: true
1325
- };
1326
- // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
1327
- this.dialogRef = this.dialogService.open(component, defaultConfig);
1328
- return this.dialogRef;
1329
- }
1330
- close(result) {
1331
- if (this.dialogRef) {
1332
- this.dialogRef.close(result);
1333
- }
1334
- }
1335
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1336
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomDialogService, providedIn: 'root' });
1337
- }
1338
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomDialogService, decorators: [{
1339
- type: Injectable,
1340
- args: [{
1341
- providedIn: 'root'
1342
- }]
1343
- }], ctorParameters: () => [] });
1344
-
1345
- class TableNgService {
1346
- tableNgGeneralService = inject(TableNgGeneralService);
1347
- filterService = inject(FilterService);
1348
- dialogService = inject(CustomDialogService);
1349
- initialValue;
1350
- constructor() {
1351
- this.filterService.register('globalCustomFilter', (rowData, filter) => {
1352
- if (!filter || filter.trim() === '')
1353
- return true;
1354
- const searchTerm = filter.toLowerCase();
1355
- // Si es string
1356
- if (typeof rowData === 'string') {
1357
- return rowData.toLowerCase().includes(searchTerm);
1358
- }
1359
- // Si es array de botones
1360
- if (Array.isArray(rowData)) {
1361
- return rowData.some((button) => {
1362
- const label = button.label || '';
1363
- return label.toLowerCase().includes(searchTerm);
1364
- });
1365
- }
1366
- return false;
1367
- });
1368
- /**
1369
- * Filtro para arrays de strings que verifica si el valor contiene alguno de los strings del filtro.
1370
- * Uso: dt.filter(['valor1', 'valor2'], 'nombreColumna', 'arrayStringFilter')
1371
- * @param rowData - Puede ser un string o array de strings
1372
- * @param filter - Array de strings para filtrar
1373
- * @returns true si encuentra coincidencias parciales (case-insensitive)
1374
- */
1375
- this.filterService.register('arrayStringFilter', (rowData, filter) => {
1376
- // Si no hay filtro o el filtro está vacío, mostrar todos los elementos
1377
- if (!filter || !Array.isArray(filter) || filter.length === 0)
1378
- return true;
1379
- // Si rowData es null, undefined o vacío, no mostrar el elemento
1380
- if (rowData == null || rowData === '')
1381
- return false;
1382
- // Si rowData es un string
1383
- if (typeof rowData === 'string') {
1384
- return filter.some(filterValue => rowData.toLowerCase().includes(filterValue.toLowerCase()));
1385
- }
1386
- // Si rowData es un array de strings
1387
- if (Array.isArray(rowData)) {
1388
- return rowData.some(dataValue => filter.some(filterValue => typeof dataValue === 'string' &&
1389
- dataValue.toLowerCase().includes(filterValue.toLowerCase())));
1390
- }
1391
- // Para otros tipos de datos, convertir a string si es posible
1392
- const stringValue = String(rowData);
1393
- if (stringValue && stringValue !== 'undefined' && stringValue !== 'null') {
1394
- return filter.some(filterValue => stringValue.toLowerCase().includes(filterValue.toLowerCase()));
1395
- }
1396
- return false;
1397
- });
1398
- /**
1399
- * Filtro exacto para arrays de strings que verifica coincidencias exactas.
1400
- * Uso: dt.filter(['valor1', 'valor2'], 'nombreColumna', 'arrayStringExactFilter')
1401
- * @param rowData - Puede ser un string o array de strings
1402
- * @param filter - Array de strings para filtrar
1403
- * @returns true si encuentra coincidencias exactas (case-sensitive)
1404
- */
1405
- this.filterService.register('arrayStringExactFilter', (rowData, filter) => {
1406
- if (!filter || !Array.isArray(filter) || filter.length === 0)
1407
- return true;
1408
- // Si rowData es null, undefined o vacío, no mostrar el elemento
1409
- if (rowData == null || rowData === '')
1410
- return false;
1411
- // Si rowData es un string
1412
- if (typeof rowData === 'string') {
1413
- return filter.includes(rowData);
1414
- }
1415
- // Si rowData es un array de strings
1416
- if (Array.isArray(rowData)) {
1417
- return rowData.some(dataValue => filter.includes(dataValue));
1418
- }
1419
- // Para otros tipos de datos, convertir a string si es posible
1420
- const stringValue = String(rowData);
1421
- if (stringValue && stringValue !== 'undefined' && stringValue !== 'null') {
1422
- return filter.includes(stringValue);
1423
- }
1424
- return false;
1425
- });
1426
- this.filterService.register('customIn', (rowData, filter) => {
1427
- if (!filter || !Array.isArray(filter) || filter.length === 0)
1428
- return true;
1429
- // Si rowData es null, undefined o vacío, no mostrar el elemento
1430
- if (rowData == null || rowData === '')
1431
- return false;
1432
- if (typeof rowData === 'string') {
1433
- return filter.includes(rowData);
1434
- }
1435
- // Para otros tipos de datos, convertir a string si es posible
1436
- const stringValue = String(rowData);
1437
- if (stringValue && stringValue !== 'undefined' && stringValue !== 'null') {
1438
- return filter.includes(stringValue);
1439
- }
1440
- return false;
1441
- });
1442
- }
1443
- get MOCK_EMPTY_DATE() {
1444
- return this.tableNgGeneralService.MOCK_EMPTY_DATE;
1445
- }
1446
- setInitialValue(data) {
1447
- this.initialValue = data;
1448
- }
1449
- //#region SORT
1450
- customSort(event) {
1451
- let field = undefined;
1452
- let order = undefined;
1453
- switch (event.mode) {
1454
- case 'single':
1455
- field = event.field;
1456
- order = event.order;
1457
- break;
1458
- case 'multiple': {
1459
- const multiSortMeta = event.multiSortMeta ?? [];
1460
- const sortMeta = multiSortMeta[0];
1461
- field = sortMeta?.field ?? undefined;
1462
- order = sortMeta?.order ?? undefined;
1463
- break;
1464
- }
1465
- default:
1466
- break;
1467
- }
1468
- if (!field || order === undefined)
1469
- return;
1470
- const data = event.data ?? [];
1471
- if (order === 0) {
1472
- // Sin sorting - restaurar orden original
1473
- data.splice(0, data.length, ...this.initialValue);
1474
- }
1475
- else {
1476
- // Aplicar sorting
1477
- data.sort((a, b) => {
1478
- const valueA = this.getFieldValue(a, field);
1479
- const valueB = this.getFieldValue(b, field);
1480
- const result = this.compareValues(valueA, valueB);
1481
- return order * result; // 1 para ASC, -1 para DESC
1482
- });
1483
- }
1484
- }
1485
- getFieldValue(item, field) {
1486
- const rawValue = item.rowData[field];
1487
- // Si es un array (probablemente IButtonConfig[])
1488
- if (Array.isArray(rawValue) && rawValue.length > 0) {
1489
- // Verificar si tenemos configuración de sorting para este campo
1490
- const buttonKeyToSort = item.sortConfig?.buttonKeyToSort?.[field];
1491
- if (buttonKeyToSort) {
1492
- // Usar la primera configuración de botón del array
1493
- const firstButton = rawValue[0];
1494
- return firstButton[buttonKeyToSort];
1495
- }
1496
- // Si no hay configuración, intentar usar 'label' por defecto
1497
- const firstButton = rawValue[0];
1498
- return firstButton.label || '';
1499
- }
1500
- // Si es un string o cualquier otro tipo
1501
- return rawValue;
1502
- }
1503
- compareValues(a, b) {
1504
- // Manejar valores null/undefined
1505
- if (a == null && b == null)
1506
- return 0;
1507
- if (a == null)
1508
- return -1;
1509
- if (b == null)
1510
- return 1;
1511
- // Si ambos son strings, usar localeCompare para mejor sorting
1512
- if (typeof a === 'string' && typeof b === 'string') {
1513
- return a.toLowerCase().localeCompare(b.toLowerCase());
1514
- }
1515
- // Si ambos son números
1516
- if (typeof a === 'number' && typeof b === 'number') {
1517
- return a - b;
1518
- }
1519
- // Si ambos son booleanos
1520
- if (typeof a === 'boolean' && typeof b === 'boolean') {
1521
- return a === b ? 0 : a ? 1 : -1;
1522
- }
1523
- // Si son fechas
1524
- if (a instanceof Date && b instanceof Date) {
1525
- return a.getTime() - b.getTime();
1526
- }
1527
- // Para otros tipos, convertir a string y comparar
1528
- const strA = String(a).toLowerCase();
1529
- const strB = String(b).toLowerCase();
1530
- return strA.localeCompare(strB);
1531
- }
1532
- //#endregion
1533
- //#region Global Filter
1534
- fb = inject(NonNullableFormBuilder);
1535
- controls = computed(() => {
1536
- const formValues = this.searchFormGroup().value;
1537
- const controls = [
1538
- {
1539
- controlName: 'search',
1540
- control: this.fb.control(formValues.search, { validators: [] }),
1541
- typeInput: ETypeInput.TEXT,
1542
- colSpan: 12,
1543
- label: 'Buscar'
1544
- }
1545
- ];
1546
- return controls;
1547
- });
1548
- searchFormGroup = signal(new FormGroup({}));
1549
- values = toSignal(this.searchFormGroup().valueChanges);
1550
- submitGlobalSearch(formGroup, dt) {
1551
- const search = formGroup.value.search ?? '';
1552
- dt.filterGlobal(search, 'globalCustomFilter');
1553
- }
1554
- clearSearchInput() {
1555
- this.searchFormGroup().get('search')?.setValue('');
1556
- }
1557
- //#endregion
1558
- //#region Selection
1559
- async openModalManagementSelectedItems(selectedItems, config) {
1560
- const { SelectedItemsManagementComponent } = await import('./ln-20-lib-components-selected-items-management.component-BCZwVd3Y.mjs');
1561
- let configSelectedItems = config;
1562
- if (config) {
1563
- configSelectedItems = structuredClone(config);
1564
- const selectionTableConfig = {
1565
- ...(configSelectedItems.selectionTableConfig ?? {}),
1566
- showManagementConfig: false
1567
- };
1568
- delete configSelectedItems.lazyLoadingConfig;
1569
- configSelectedItems.selectionTableConfig = selectionTableConfig;
1570
- }
1571
- const ref = this.dialogService?.open(SelectedItemsManagementComponent, {
1572
- header: 'Gestionar Seleccionados',
1573
- data: {
1574
- selectedItems: selectedItems(),
1575
- config: configSelectedItems
1576
- },
1577
- width: '90%',
1578
- height: '90%',
1579
- styleClass: 'overflow-hidden'
1580
- });
1581
- ref.onClose.subscribe((selectedReturnItems) => {
1582
- if (selectedReturnItems) {
1583
- selectedItems.set(selectedReturnItems);
1584
- }
1585
- });
1586
- }
1587
- //#endregion
1588
- //#region Custom Filter
1589
- //#endregion
1590
- excelButton = computed(() => {
1591
- return {
1592
- label: '',
1593
- icon: 'fa-solid fa-file-excel',
1594
- variant: 'text',
1595
- severity: 'success',
1596
- raised: true,
1597
- size: 'large',
1598
- tooltipConfig: {
1599
- pTooltip: 'Exportar a Excel',
1600
- tooltipPosition: 'top'
1601
- }
1602
- };
1603
- });
1604
- pdfButton = computed(() => {
1605
- return {
1606
- label: '',
1607
- icon: 'fa-solid fa-file-pdf',
1608
- variant: 'text',
1609
- severity: 'danger',
1610
- raised: true,
1611
- size: 'large',
1612
- tooltipConfig: {
1613
- pTooltip: 'Exportar a PDF',
1614
- tooltipPosition: 'top'
1615
- }
1616
- };
1617
- });
1618
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1619
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgService, providedIn: 'root' });
1620
- }
1621
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgService, decorators: [{
1622
- type: Injectable,
1623
- args: [{
1624
- providedIn: 'root'
1625
- }]
1626
- }], ctorParameters: () => [] });
1627
-
1628
- class BaseDialogComponent {
1629
- destroy$ = new Subject();
1630
- data;
1631
- ref = inject(DynamicDialogRef);
1632
- config = inject(DynamicDialogConfig);
1633
- constructor() {
1634
- this.data = this.config.data;
1635
- }
1636
- ngOnDestroy() {
1637
- this.destroy$.next();
1638
- this.destroy$.complete();
1639
- }
1640
- close(result) {
1641
- this.ref.close(result);
1642
- }
1643
- dismiss() {
1644
- this.ref.close({ success: false });
1645
- }
1646
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BaseDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1647
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: BaseDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true });
1648
- }
1649
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BaseDialogComponent, decorators: [{
1650
- type: Component,
1651
- args: [{
1652
- standalone: true,
1653
- template: ''
1654
- }]
1655
- }], ctorParameters: () => [] });
1656
-
1657
- const pickListConstant = (e, element) => {
1658
- if (e.id === element?.id) {
1659
- e.isSelected = !e.isSelected;
1660
- if (e.isSelected) {
1661
- delete e.buttonConfig.variant;
1662
- delete e.buttonConfig.raised;
1663
- }
1664
- else {
1665
- e.buttonConfig.variant = 'outlined';
1666
- e.buttonConfig.raised = true;
1667
- }
1668
- }
1669
- };
1670
-
1671
- class ContainerElementsComponent {
1672
- cols = input(3);
1673
- elements = model([]);
1674
- severityButton = input('contrast');
1675
- outputElements = output();
1676
- constructor() {
1677
- }
1678
- ngOnInit() {
1679
- this.elements.update((elements) => {
1680
- elements.forEach((e) => {
1681
- // Si e.isSelected es true, se elimina el variant y raised
1682
- if (e.isSelected) {
1683
- delete e.buttonConfig.variant;
1684
- delete e.buttonConfig.raised;
1685
- }
1686
- else {
1687
- e.buttonConfig.variant = 'outlined';
1688
- e.buttonConfig.raised = true;
1689
- }
1690
- e.buttonConfig = {
1691
- ...e.buttonConfig,
1692
- fullWidth: true,
1693
- fullHeight: true,
1694
- hasStaticClick: true,
1695
- severity: this.severityButton()
1696
- };
1697
- });
1698
- return [...elements];
1699
- });
1700
- }
1701
- containerClass = computed(() => 'w-[45%] flex flex-col shadow-md bg-white dark:bg-gray-800 rounded-xl h-full overflow-y-auto');
1702
- titleClass = computed(() => 'text-lg font-bold self-center text-center');
1703
- containerElementsClass = computed(() => `grid grid-cols-${this.cols() ?? 3} gap-2 p-2`);
1704
- getButtonConfig(buttonConfig) {
1705
- return { ...buttonConfig, fullWidth: true, severity: this.severityButton(), hasStaticClick: true };
1706
- }
1707
- onButtonClick(element) {
1708
- this.elements.update((elements) => {
1709
- elements.forEach((e) => {
1710
- pickListConstant(e, element);
1711
- });
1712
- return [...elements];
1713
- });
1714
- this.outputElements.emit([...this.elements()]);
1715
- }
1716
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ContainerElementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1717
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ContainerElementsComponent, isStandalone: true, selector: "lib-container-elements", inputs: { cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: false, transformFunction: null }, severityButton: { classPropertyName: "severityButton", publicName: "severityButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elements: "elementsChange", outputElements: "outputElements" }, ngImport: i0, template: "<div class=\"h-full w-full\" [class]=\"containerClass()\">\r\n <div class=\"dynamic-grid\" [style.--grid-cols]=\"cols()\">\r\n @for (element of elements(); track element.id) {\r\n <div class=\"grid-item\">\r\n @if (element.buttonConfig) {\r\n <lib-button-ng [(buttonConfig)]=\"element.buttonConfig\" (onClick)=\"onButtonClick(element)\"></lib-button-ng>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: [".dynamic-grid{display:grid;gap:.5rem;padding:.5rem;grid-template-columns:repeat(var(--grid-cols, 3),1fr)}.grid-item{border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}\n"], dependencies: [{ kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "ngmodule", type: CommonModule }] });
1718
- }
1719
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ContainerElementsComponent, decorators: [{
1720
- type: Component,
1721
- args: [{ selector: 'lib-container-elements', imports: [ButtonNgComponent, CommonModule], template: "<div class=\"h-full w-full\" [class]=\"containerClass()\">\r\n <div class=\"dynamic-grid\" [style.--grid-cols]=\"cols()\">\r\n @for (element of elements(); track element.id) {\r\n <div class=\"grid-item\">\r\n @if (element.buttonConfig) {\r\n <lib-button-ng [(buttonConfig)]=\"element.buttonConfig\" (onClick)=\"onButtonClick(element)\"></lib-button-ng>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: [".dynamic-grid{display:grid;gap:.5rem;padding:.5rem;grid-template-columns:repeat(var(--grid-cols, 3),1fr)}.grid-item{border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}\n"] }]
1722
- }], ctorParameters: () => [] });
1723
-
1724
- class PickListComponent {
1725
- constructor() {
1726
- }
1727
- ngOnInit() { }
1728
- sourceElements = model([]);
1729
- hasAnySourceElementSelected = computed(() => this.sourceElements().some(element => element.isSelected));
1730
- targetElements = model([]);
1731
- hasAnyTargetElementSelected = computed(() => this.targetElements().some(element => element.isSelected));
1732
- config = input();
1733
- outputElements = output();
1734
- sourceSeverityButton = computed(() => this.config()?.sourceSeverityButton ?? 'secondary');
1735
- targetSeverityButton = computed(() => this.config()?.targetSeverityButton ?? 'contrast');
1736
- controlButtons = computed(() => [
1737
- {
1738
- label: '',
1739
- icon: 'pi pi-angle-double-right',
1740
- severity: this.sourceSeverityButton(),
1741
- disabled: this.sourceElements().length === 0,
1742
- tooltipConfig: {
1743
- pTooltip: this.sourceElements().length === 0 ? 'No hay elementos' : 'Mover todos hacia la derecha',
1744
- tooltipPosition: 'top'
1745
- },
1746
- onClick: () => {
1747
- this.moveAllSourceToTarget();
1748
- }
1749
- },
1750
- {
1751
- label: '',
1752
- icon: 'pi pi-angle-right',
1753
- severity: this.sourceSeverityButton(),
1754
- disabled: !this.hasAnySourceElementSelected(),
1755
- tooltipConfig: {
1756
- pTooltip: !this.hasAnySourceElementSelected() ? 'No hay elementos seleccionados' : 'Mover los elementos seleccionados hacia la derecha',
1757
- tooltipPosition: 'top'
1758
- },
1759
- onClick: () => {
1760
- this.moveSelectedSourceToTarget();
1761
- }
1762
- },
1763
- {
1764
- label: '',
1765
- icon: 'pi pi-angle-double-left',
1766
- severity: this.targetSeverityButton(),
1767
- disabled: this.targetElements().length === 0,
1768
- tooltipConfig: {
1769
- pTooltip: this.targetElements().length === 0 ? 'No hay elementos' : 'Mover todos hacia la izquierda',
1770
- tooltipPosition: 'top'
1771
- },
1772
- onClick: () => {
1773
- this.moveAllTargetToSource();
1774
- }
1775
- },
1776
- {
1777
- label: '',
1778
- icon: 'pi pi-angle-left',
1779
- severity: this.targetSeverityButton(),
1780
- disabled: !this.hasAnyTargetElementSelected(),
1781
- tooltipConfig: {
1782
- pTooltip: !this.hasAnyTargetElementSelected() ? 'No hay elementos seleccionados' : 'Mover los elementos seleccionados hacia la izquierda',
1783
- tooltipPosition: 'top'
1784
- },
1785
- onClick: () => {
1786
- this.moveSelectedTargetToSource();
1787
- }
1788
- }
1789
- ]);
1790
- /**
1791
- * Mueve todos los elementos del sourceElements al targetElements,
1792
- * convirtiendo su severidad para que coincida con targetSeverityButton
1793
- */
1794
- moveAllSourceToTarget() {
1795
- const sourceElementsCopy = [...this.sourceElements()];
1796
- if (sourceElementsCopy.length === 0) {
1797
- return;
1798
- }
1799
- // Convertir los elementos para usar targetSeverityButton
1800
- const convertedElements = sourceElementsCopy.map(element => {
1801
- const convertedElement = {
1802
- ...element,
1803
- isSelected: false, // Limpiar selección
1804
- buttonConfig: {
1805
- ...element.buttonConfig,
1806
- severity: this.targetSeverityButton(),
1807
- variant: 'outlined',
1808
- raised: true
1809
- }
1810
- };
1811
- return convertedElement;
1812
- });
1813
- // Agregar elementos convertidos al target
1814
- this.targetElements.update(currentTarget => [
1815
- ...currentTarget,
1816
- ...convertedElements
1817
- ]);
1818
- // Limpiar sourceElements
1819
- this.sourceElements.set([]);
1820
- this.handleOutputElements();
1821
- }
1822
- /**
1823
- * Mueve todos los elementos del targetElements al sourceElements,
1824
- * convirtiendo su severidad para que coincida con sourceSeverityButton
1825
- */
1826
- moveAllTargetToSource() {
1827
- const targetElementsCopy = [...this.targetElements()];
1828
- if (targetElementsCopy.length === 0) {
1829
- return;
1830
- }
1831
- // Convertir los elementos para usar sourceSeverityButton
1832
- const convertedElements = targetElementsCopy.map(element => {
1833
- const convertedElement = {
1834
- ...element,
1835
- isSelected: false, // Limpiar selección
1836
- buttonConfig: {
1837
- ...element.buttonConfig,
1838
- severity: this.sourceSeverityButton(),
1839
- variant: 'outlined',
1840
- raised: true
1841
- }
1842
- };
1843
- return convertedElement;
1844
- });
1845
- // Agregar elementos convertidos al source
1846
- this.sourceElements.update(currentSource => [
1847
- ...currentSource,
1848
- ...convertedElements
1849
- ]);
1850
- // Limpiar targetElements
1851
- this.targetElements.set([]);
1852
- this.handleOutputElements();
1853
- }
1854
- /**
1855
- * Mueve los elementos seleccionados del sourceElements al targetElements,
1856
- * ubicándolos en la primera posición y convirtiendo su severidad
1857
- */
1858
- moveSelectedSourceToTarget() {
1859
- const selectedElements = this.sourceElements().filter(element => element.isSelected);
1860
- const remainingElements = this.sourceElements().filter(element => !element.isSelected);
1861
- if (selectedElements.length === 0) {
1862
- return;
1863
- }
1864
- // Convertir los elementos seleccionados para usar targetSeverityButton
1865
- const convertedElements = selectedElements.map(element => {
1866
- const convertedElement = {
1867
- ...element,
1868
- isSelected: false, // Limpiar selección
1869
- buttonConfig: {
1870
- ...element.buttonConfig,
1871
- severity: this.targetSeverityButton(),
1872
- variant: 'outlined',
1873
- raised: true
1874
- }
1875
- };
1876
- return convertedElement;
1877
- });
1878
- // Agregar elementos convertidos al inicio de targetElements
1879
- this.targetElements.update(currentTarget => [
1880
- ...convertedElements,
1881
- ...currentTarget
1882
- ]);
1883
- // Actualizar sourceElements sin los elementos seleccionados
1884
- this.sourceElements.set(remainingElements);
1885
- this.handleOutputElements();
1886
- }
1887
- /**
1888
- * Mueve los elementos seleccionados del targetElements al sourceElements,
1889
- * ubicándolos en la primera posición y convirtiendo su severidad
1890
- */
1891
- moveSelectedTargetToSource() {
1892
- const selectedElements = this.targetElements().filter(element => element.isSelected);
1893
- const remainingElements = this.targetElements().filter(element => !element.isSelected);
1894
- if (selectedElements.length === 0) {
1895
- return;
1896
- }
1897
- // Convertir los elementos seleccionados para usar sourceSeverityButton
1898
- const convertedElements = selectedElements.map(element => {
1899
- const convertedElement = {
1900
- ...element,
1901
- isSelected: false, // Limpiar selección
1902
- buttonConfig: {
1903
- ...element.buttonConfig,
1904
- severity: this.sourceSeverityButton(),
1905
- variant: 'outlined',
1906
- raised: true
1907
- }
1908
- };
1909
- return convertedElement;
1910
- });
1911
- // Agregar elementos convertidos al inicio de sourceElements
1912
- this.sourceElements.update(currentSource => [
1913
- ...convertedElements,
1914
- ...currentSource
1915
- ]);
1916
- // Actualizar targetElements sin los elementos seleccionados
1917
- this.targetElements.set(remainingElements);
1918
- this.handleOutputElements();
1919
- }
1920
- handleOutputElements() {
1921
- this.outputElements.emit({ sourceElements: this.sourceElements(), targetElements: this.targetElements() });
1922
- }
1923
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PickListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1924
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: PickListComponent, isStandalone: true, selector: "lib-pick-list", inputs: { sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sourceElements: "sourceElementsChange", targetElements: "targetElementsChange", outputElements: "outputElements" }, ngImport: i0, template: "@let cols = config()?.cols ?? 3;\r\n@let sourceSeverityButton = config()?.sourceSeverityButton ?? 'secondary';\r\n@let targetSeverityButton = config()?.targetSeverityButton ?? 'contrast';\r\n<div class=\"flex gap-4 h-80 w-full bg-gray-100 dark:bg-gray-800 rounded-xl p-3\">\r\n <lib-container-elements id=\"source-container\" [cols]=\"cols\" class=\"w-full h-full\" [(elements)]=\"sourceElements\"\r\n #sourceContainer [severityButton]=\"sourceSeverityButton\"\r\n (outputElements)=\"handleOutputElements()\"></lib-container-elements>\r\n\r\n <div class=\"w-[10%] flex flex-col items-center justify-center gap-6 rounded-xl bg-gray-200 dark:bg-gray-800\">\r\n @for (button of controlButtons(); track $index) {\r\n <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n }\r\n </div>\r\n\r\n <lib-container-elements id=\"target-container\" [cols]=\"cols\" class=\"w-full h-full\" [(elements)]=\"targetElements\"\r\n #targetContainer [severityButton]=\"targetSeverityButton\"\r\n (outputElements)=\"handleOutputElements()\"></lib-container-elements>\r\n\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "component", type: ContainerElementsComponent, selector: "lib-container-elements", inputs: ["cols", "elements", "severityButton"], outputs: ["elementsChange", "outputElements"] }] });
1925
- }
1926
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PickListComponent, decorators: [{
1927
- type: Component,
1928
- args: [{ selector: 'lib-pick-list', imports: [ButtonNgComponent, ContainerElementsComponent], template: "@let cols = config()?.cols ?? 3;\r\n@let sourceSeverityButton = config()?.sourceSeverityButton ?? 'secondary';\r\n@let targetSeverityButton = config()?.targetSeverityButton ?? 'contrast';\r\n<div class=\"flex gap-4 h-80 w-full bg-gray-100 dark:bg-gray-800 rounded-xl p-3\">\r\n <lib-container-elements id=\"source-container\" [cols]=\"cols\" class=\"w-full h-full\" [(elements)]=\"sourceElements\"\r\n #sourceContainer [severityButton]=\"sourceSeverityButton\"\r\n (outputElements)=\"handleOutputElements()\"></lib-container-elements>\r\n\r\n <div class=\"w-[10%] flex flex-col items-center justify-center gap-6 rounded-xl bg-gray-200 dark:bg-gray-800\">\r\n @for (button of controlButtons(); track $index) {\r\n <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n }\r\n </div>\r\n\r\n <lib-container-elements id=\"target-container\" [cols]=\"cols\" class=\"w-full h-full\" [(elements)]=\"targetElements\"\r\n #targetContainer [severityButton]=\"targetSeverityButton\"\r\n (outputElements)=\"handleOutputElements()\"></lib-container-elements>\r\n\r\n</div>" }]
1929
- }], ctorParameters: () => [] });
1930
-
1931
- class AdvancedFilterService {
1932
- constructor() {
1933
- // Effect para actualizar isSelected basado en los chips
1934
- effect(() => {
1935
- const chips = [...this.searchChips()];
1936
- this.updateElementSelection(chips);
1937
- });
1938
- }
1939
- configInlineInput = computed(() => ({
1940
- typeInput: ETypeInput.CHIPS
1941
- }));
1942
- _searchChips = signal([]);
1943
- searchChips = this._searchChips.asReadonly();
1944
- setSearchChips(searchChips) {
1945
- this._searchChips.set(searchChips);
1946
- }
1947
- setStringToArrayChips(searchValue) {
1948
- this._searchChips.set(searchValue.split(' ').filter(chip => chip.trim() !== ''));
1949
- }
1950
- _sourceElements = signal([]);
1951
- sourceElements = this._sourceElements.asReadonly();
1952
- setSourceElements(sourceElements) {
1953
- this._sourceElements.set(sourceElements);
1954
- }
1955
- configPickList = computed(() => ({
1956
- cols: 3,
1957
- sourceSeverityButton: 'contrast',
1958
- targetSeverityButton: 'success'
1959
- }));
1960
- /**
1961
- * Actualiza la selección de elementos basándose en los chips del input
1962
- * @param chips Array de strings que representan los chips actuales
1963
- */
1964
- updateElementSelection(chips) {
1965
- this._sourceElements.update(currentElements => {
1966
- return currentElements.map((element) => {
1967
- // Verificar si el label del elemento está en el array de chips
1968
- const shouldBeSelected = chips.includes(element.buttonConfig?.label || '');
1969
- if (shouldBeSelected) {
1970
- delete element.buttonConfig.variant;
1971
- delete element.buttonConfig.raised;
1972
- }
1973
- else {
1974
- element.buttonConfig.variant = 'outlined';
1975
- element.buttonConfig.raised = true;
1976
- }
1977
- return {
1978
- ...element,
1979
- isSelected: shouldBeSelected
1980
- };
1981
- });
1982
- });
1983
- }
1984
- outputElements(event) {
1985
- const { sourceElements } = event;
1986
- this.setSourceElements(sourceElements);
1987
- this.validateAndSyncChipsWithElements(sourceElements);
1988
- }
1989
- /**
1990
- * Valida y sincroniza los chips con los elementos de sourceElements
1991
- * @param sourceElements Array de elementos fuente
1992
- */
1993
- validateAndSyncChipsWithElements(sourceElements) {
1994
- const currentChips = this._searchChips();
1995
- if (sourceElements.length === 0) {
1996
- this.setSearchChips([]);
1997
- return;
1998
- }
1999
- const validChips = [];
2000
- // Iterar sobre cada chip actual
2001
- currentChips.forEach(chip => {
2002
- // Buscar el elemento correspondiente en sourceElements
2003
- const element = sourceElements.find(el => el.buttonConfig?.label === chip);
2004
- if (element) {
2005
- // Si la chip existe en sourceElements
2006
- if (element.isSelected === false) {
2007
- // Si la chip está en isSelected false, NO la incluimos en validChips (la eliminamos)
2008
- return;
2009
- }
2010
- else {
2011
- // Si la chip está seleccionada, la mantenemos
2012
- validChips.push(chip);
2013
- }
2014
- }
2015
- else {
2016
- // Si la chip no está en sourceElements, NO la incluimos en validChips (la eliminamos)
2017
- return;
2018
- }
2019
- });
2020
- // Verificar si hay elementos seleccionados que no tienen chip correspondiente
2021
- sourceElements.forEach(element => {
2022
- if (element.isSelected && element.buttonConfig?.label) {
2023
- const chipExists = currentChips.includes(element.buttonConfig.label);
2024
- if (!chipExists) {
2025
- // Si el elemento está seleccionado pero no tiene chip, agregamos la chip
2026
- validChips.push(element.buttonConfig.label);
2027
- }
2028
- }
2029
- });
2030
- // Actualizar los chips solo si hay cambios
2031
- if (JSON.stringify(validChips.sort()) !== JSON.stringify(currentChips.sort())) {
2032
- this._searchChips.set(validChips);
2033
- }
2034
- }
2035
- /**
2036
- * Método público para establecer chips desde un array externo
2037
- * Útil para gestionar las chips programáticamente
2038
- * @param chipsArray Array de strings que representan las chips
2039
- */
2040
- setChipsFromArray(chipsArray) {
2041
- if (!Array.isArray(chipsArray)) {
2042
- console.warn('setChipsFromArray: El parámetro debe ser un array de strings');
2043
- return;
2044
- }
2045
- // Filtrar elementos válidos (strings no vacíos)
2046
- const validChips = chipsArray
2047
- .filter(chip => typeof chip === 'string' && chip.trim() !== '')
2048
- .map(chip => chip.trim());
2049
- // Actualizar las chips
2050
- this._searchChips.set(validChips);
2051
- }
2052
- /**
2053
- * Método público para limpiar todas las chips
2054
- */
2055
- clearAllChips() {
2056
- this._searchChips.set([]);
2057
- }
2058
- /**
2059
- * Método público para agregar chips desde un array
2060
- * Evita duplicados
2061
- * @param chipsArray Array de strings a agregar
2062
- */
2063
- addChipsFromArray(chipsArray) {
2064
- if (!Array.isArray(chipsArray)) {
2065
- console.warn('addChipsFromArray: El parámetro debe ser un array de strings');
2066
- return;
2067
- }
2068
- const currentChips = this._searchChips();
2069
- // Filtrar elementos válidos y únicos
2070
- const validChips = chipsArray
2071
- .filter(chip => typeof chip === 'string' && chip.trim() !== '')
2072
- .map(chip => chip.trim())
2073
- .filter(chip => !currentChips.includes(chip));
2074
- // Agregar las nuevas chips
2075
- if (validChips.length > 0) {
2076
- this._searchChips.set([...currentChips, ...validChips]);
2077
- }
2078
- }
2079
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AdvancedFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
2080
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AdvancedFilterService, providedIn: 'root' });
2081
- }
2082
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AdvancedFilterService, decorators: [{
2083
- type: Injectable,
2084
- args: [{
2085
- providedIn: 'root'
2086
- }]
2087
- }], ctorParameters: () => [] });
2088
-
2089
- class AdvancedFilterComponent {
2090
- advancedFilterService = inject(AdvancedFilterService);
2091
- sourceElements = model([]);
2092
- targetElements = model([]);
2093
- // Referencia al componente de inline input para gestionar las chips
2094
- inlineInputComponent = viewChild('inlineInputRef');
2095
- constructor() {
2096
- // Sincronizar el service con el model del componente
2097
- effect(() => {
2098
- this.sourceElements.set(this.advancedFilterService.sourceElements());
2099
- });
2100
- // Efecto para sincronizar chips con el inline input
2101
- effect(() => {
2102
- const chips = this.advancedFilterService.searchChips();
2103
- const inlineInput = this.inlineInputComponent();
2104
- if (inlineInput && Array.isArray(chips)) {
2105
- // Usar el nuevo método para establecer las chips
2106
- inlineInput.setChipsFromArray(chips);
2107
- }
2108
- });
2109
- }
2110
- ngOnInit() {
2111
- this.initializeChipsWhitSourceElementsSelected();
2112
- this.advancedFilterService.setSourceElements(this.sourceElements());
2113
- }
2114
- initializeChipsWhitSourceElementsSelected() {
2115
- this.advancedFilterService.setSearchChips(this.sourceElements()
2116
- .filter((element) => element.isSelected)
2117
- .map((element) => element.buttonConfig?.label?.toString() ?? ''));
2118
- }
2119
- get configInlineInput() {
2120
- return this.advancedFilterService.configInlineInput();
2121
- }
2122
- valueChangeInlineInput(value) {
2123
- this.advancedFilterService.setStringToArrayChips(value);
2124
- }
2125
- get configPickList() {
2126
- return this.advancedFilterService.configPickList();
2127
- }
2128
- outputElements(event) {
2129
- this.advancedFilterService.outputElements(event);
2130
- }
2131
- /**
2132
- * Método público para establecer chips desde un array externo
2133
- * @param chipsArray Array de strings que representan las chips
2134
- */
2135
- setChipsFromArray(chipsArray) {
2136
- this.advancedFilterService.setChipsFromArray(chipsArray);
2137
- }
2138
- /**
2139
- * Método público para limpiar todas las chips
2140
- */
2141
- clearAllChips() {
2142
- this.advancedFilterService.clearAllChips();
2143
- }
2144
- /**
2145
- * Método público para agregar chips desde un array
2146
- * @param chipsArray Array de strings a agregar
2147
- */
2148
- addChipsFromArray(chipsArray) {
2149
- this.advancedFilterService.addChipsFromArray(chipsArray);
2150
- }
2151
- /**
2152
- * Método público para obtener las chips actuales como array
2153
- * @returns Array de strings con las chips actuales
2154
- */
2155
- getChipsAsArray() {
2156
- return this.advancedFilterService.searchChips();
2157
- }
2158
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AdvancedFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2159
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.17", type: AdvancedFilterComponent, isStandalone: true, selector: "lib-advanced-filter", inputs: { sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sourceElements: "sourceElementsChange", targetElements: "targetElementsChange" }, providers: [AdvancedFilterService], viewQueries: [{ propertyName: "inlineInputComponent", first: true, predicate: ["inlineInputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\r\n <lib-inline-input #inlineInputRef [config]=\"configInlineInput\" (valueChange)=\"valueChangeInlineInput($event)\">\r\n </lib-inline-input>\r\n <lib-pick-list [(sourceElements)]=\"sourceElements\" [(targetElements)]=\"targetElements\"\r\n (outputElements)=\"outputElements($event)\" [config]=\"configPickList\"></lib-pick-list>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: InlineInputComponent, selector: "lib-inline-input", inputs: ["config", "value"], outputs: ["valueChange", "outputValue", "outputBlur", "outputDebounced"] }, { kind: "component", type: PickListComponent, selector: "lib-pick-list", inputs: ["sourceElements", "targetElements", "config"], outputs: ["sourceElementsChange", "targetElementsChange", "outputElements"] }] });
2160
- }
2161
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AdvancedFilterComponent, decorators: [{
2162
- type: Component,
2163
- args: [{ selector: 'lib-advanced-filter', imports: [InlineInputComponent, PickListComponent], providers: [AdvancedFilterService], template: "<div class=\"flex flex-col gap-4\">\r\n <lib-inline-input #inlineInputRef [config]=\"configInlineInput\" (valueChange)=\"valueChangeInlineInput($event)\">\r\n </lib-inline-input>\r\n <lib-pick-list [(sourceElements)]=\"sourceElements\" [(targetElements)]=\"targetElements\"\r\n (outputElements)=\"outputElements($event)\" [config]=\"configPickList\"></lib-pick-list>\r\n</div>" }]
2164
- }], ctorParameters: () => [] });
2165
-
2166
- class ModalAdvancedFilterComponent extends BaseDialogComponent {
2167
- constructor() {
2168
- super();
2169
- }
2170
- sourceElements = signal([]);
2171
- targetElements = signal([]);
2172
- ngOnInit() {
2173
- if (this.data) {
2174
- this.sourceElements.set(this.data.sourceElements ?? []);
2175
- this.targetElements.set(this.data.targetElements ?? []);
2176
- }
2177
- }
2178
- applyFiltersButton = computed(() => {
2179
- return {
2180
- label: 'Aplicar Filtros',
2181
- severity: 'info',
2182
- onClick: () => {
2183
- this.close({ success: true, data: { sourceElements: this.sourceElements(), targetElements: this.targetElements() } });
2184
- },
2185
- disabled: this.targetElements().length === 0
2186
- };
2187
- });
2188
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ModalAdvancedFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2189
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ModalAdvancedFilterComponent, isStandalone: true, selector: "lib-modal-advanced-filter", usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\r\n <lib-advanced-filter [(sourceElements)]=\"sourceElements\" [(targetElements)]=\"targetElements\"></lib-advanced-filter>\r\n <div class=\"flex justify-end\">\r\n <lib-button-ng [buttonConfig]=\"applyFiltersButton()\"></lib-button-ng>\r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: AdvancedFilterComponent, selector: "lib-advanced-filter", inputs: ["sourceElements", "targetElements"], outputs: ["sourceElementsChange", "targetElementsChange"] }, { kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }] });
2190
- }
2191
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ModalAdvancedFilterComponent, decorators: [{
2192
- type: Component,
2193
- args: [{ selector: 'lib-modal-advanced-filter', imports: [AdvancedFilterComponent, ButtonNgComponent], template: "<div class=\"flex flex-col gap-4\">\r\n <lib-advanced-filter [(sourceElements)]=\"sourceElements\" [(targetElements)]=\"targetElements\"></lib-advanced-filter>\r\n <div class=\"flex justify-end\">\r\n <lib-button-ng [buttonConfig]=\"applyFiltersButton()\"></lib-button-ng>\r\n </div>\r\n</div>" }]
2194
- }], ctorParameters: () => [] });
2195
-
2196
- /* eslint-disable @typescript-eslint/no-unsafe-argument */
2197
- class TableNgComponent {
2198
- tableNgService = inject(TableNgService);
2199
- tableNgEditService = inject(TableNgEditService);
2200
- dialogService = inject(CustomDialogService);
2201
- data = model.required();
2202
- // Loading state management
2203
- loadingTimeout = null;
2204
- isLoading = signal(false);
2205
- timeoutExpired = signal(false);
2206
- config = model();
2207
- editConfig = model();
2208
- footerConfig = model();
2209
- toolbarButtons = model([]);
2210
- sourceElements = model([]);
2211
- targetElements = model([]);
2212
- httpMessage = model();
2213
- lazyLoading = output();
2214
- outputChangeData = output();
2215
- outputHandleEditInitButton = output();
2216
- outputAddRow = output();
2217
- outputDeleteRow = output();
2218
- outputRowInlineChange = output();
2219
- outputRowDataChange = output();
2220
- outputEditData = output();
2221
- outputIsEditing = output();
2222
- resetData() {
2223
- this.data.set([]);
2224
- }
2225
- advancedFiltersPerformed = [];
2226
- advancedFiltersValues = signal({});
2227
- dt;
2228
- fb = inject(NonNullableFormBuilder);
2229
- //#region Labels Configuration
2230
- /** Get pagination report template with default English value */
2231
- getCustomPageReport() {
2232
- return this.config()?.labelsConfig?.customPageReport ?? 'Showing {first} to {last} of {totalRecords} entries';
2233
- }
2234
- /** Get selected items label with default English value */
2235
- getSelectedItemsLabel() {
2236
- return this.config()?.labelsConfig?.selectedItemsLabel ?? 'You have selected';
2237
- }
2238
- /** Get records label with default English value */
2239
- getRecordsLabel() {
2240
- return this.config()?.labelsConfig?.recordsLabel ?? 'records';
2241
- }
2242
- /** Get loading message with default English value */
2243
- getLoadingMessage() {
2244
- return this.config()?.labelsConfig?.loadingMessage ?? 'Loading...';
2245
- }
2246
- /** Get no data message with default English value */
2247
- getNoDataMessage() {
2248
- return this.config()?.labelsConfig?.noDataMessage ?? 'No information available';
2249
- }
2250
- //#endregion
2251
- constructor() {
2252
- this.tableNgEditService.setEditConfig(this.editConfig());
2253
- this.tableNgEditService.setKeysNames(this.config()?.keysNames ?? {});
2254
- effect(() => {
2255
- this.outputChangeData.emit([...this.data()]);
2256
- });
2257
- // Effect para gestionar el loading basado en el estado de data
2258
- effect(() => {
2259
- const currentData = this.data();
2260
- // Limpiar el timeout anterior si existe
2261
- if (this.loadingTimeout) {
2262
- clearTimeout(this.loadingTimeout);
2263
- this.loadingTimeout = null;
2264
- }
2265
- if (currentData.length === 0) {
2266
- // Si data está vacío, activar loading
2267
- this.isLoading.set(true);
2268
- this.loadingTimeout = setTimeout(() => {
2269
- if (this.data().length === 0) {
2270
- this.isLoading.set(false);
2271
- this.timeoutExpired.set(true);
2272
- }
2273
- }, 0);
2274
- }
2275
- else {
2276
- // Si hay data, desactivar loading y resetear timeout
2277
- this.isLoading.set(false);
2278
- this.timeoutExpired.set(false);
2279
- }
2280
- });
2281
- }
2282
- ngOnInit() {
2283
- this.tableNgService.setInitialValue([...this.data()]);
2284
- }
2285
- ngOnDestroy() {
2286
- // Limpiar el timeout al destruir el componente
2287
- if (this.loadingTimeout) {
2288
- clearTimeout(this.loadingTimeout);
2289
- this.loadingTimeout = null;
2290
- }
2291
- }
2292
- get hideToolbar() { return this.config()?.hideToolbar ?? false; }
2293
- /**
2294
- * Calcula el número total de columnas para el colspan del mensaje vacío
2295
- */
2296
- totalColumns = computed(() => {
2297
- const selectedColumns = this.config()?.selectedColumns ?? [];
2298
- const baseColumns = selectedColumns.length > 0 ? selectedColumns.length : this.keys().length;
2299
- const selectionColumn = this.config()?.selectionTableConfig?.isEnabled ? 1 : 0;
2300
- const expansionColumn = this.config()?.rowExpansionConfig?.isEnabled ? 1 : 0;
2301
- const editColumn = (this.editConfig()?.type === 'row' || this.editConfig()?.type === 'cell') && this.editConfig()?.isEnabled ? 1 : 0;
2302
- return baseColumns + selectionColumn + expansionColumn + editColumn;
2303
- });
2304
- isPrimeNgSelection(value) {
2305
- return PrimeNgUtil.isPrimeNgSelection(value);
2306
- }
2307
- hasErrorValues(object) {
2308
- return Object.keys(object).length > 0;
2309
- }
2310
- rowFieldsValue = signal({});
2311
- rowFieldsHasValue = computed(() => {
2312
- return Object.keys(this.rowFieldsValue()).reduce((acc, key) => {
2313
- acc[key] = !!this.rowFieldsValue()[key];
2314
- return acc;
2315
- }, {});
2316
- });
2317
- inlineChange(value, key) {
2318
- this.rowFieldsValue.update((prev) => {
2319
- return { ...prev, [key]: value };
2320
- });
2321
- this.outputRowInlineChange.emit({ ...this.rowFieldsValue() });
2322
- }
2323
- trackById(index, item) {
2324
- return item.id;
2325
- }
2326
- frozenHandle(value) {
2327
- return value ? value : false;
2328
- }
2329
- isDate(value) {
2330
- return value instanceof Date;
2331
- }
2332
- onFilter(event) {
2333
- const filters = event.filters;
2334
- if (!filters)
2335
- return;
2336
- const global = filters['global'];
2337
- if (!global?.['value']) {
2338
- this.handleAdvancedFiltersPerformed(filters);
2339
- }
2340
- }
2341
- resetRowDatas() {
2342
- this.data.update((data) => {
2343
- return data.map((item) => {
2344
- return {
2345
- ...item,
2346
- rowData: {}
2347
- };
2348
- });
2349
- });
2350
- }
2351
- get ETypeInput() {
2352
- return ETypeInput;
2353
- }
2354
- handleAdvancedFiltersPerformed(filters) {
2355
- if (!filters)
2356
- return;
2357
- const entriesFilters = Object.entries(filters);
2358
- const keysColumn = this.config()?.keys ?? [];
2359
- entriesFilters.forEach(([key, value]) => {
2360
- const valueArray = value;
2361
- const hasValue = !!valueArray[0]?.value;
2362
- const keyColumn = key.split('.')[1];
2363
- if (keysColumn.includes(keyColumn)) {
2364
- const index = this.advancedFiltersPerformed.indexOf(keyColumn);
2365
- if (hasValue && index === -1) {
2366
- // Agregar si no existe
2367
- this.advancedFiltersPerformed.push(keyColumn);
2368
- }
2369
- else if (!hasValue && index !== -1) {
2370
- // Quitar si ya no tiene valor
2371
- this.advancedFiltersPerformed.splice(index, 1);
2372
- }
2373
- }
2374
- });
2375
- }
2376
- numberOfRecords = computed(() => {
2377
- return this.data().length ?? 0;
2378
- });
2379
- hasRecords = computed(() => {
2380
- return this.numberOfRecords() > 0;
2381
- });
2382
- /**
2383
- * Computed que valida si al menos una fila tiene datos válidos en rowData.
2384
- * Retorna true si al menos una fila tiene un valor que no sea '', null o undefined.
2385
- * Retorna false si todas las filas tienen valores vacíos, null o undefined.
2386
- */
2387
- hasValidRowData = computed(() => {
2388
- const data = this.data();
2389
- return data.some(item => {
2390
- if (!item?.rowData || typeof item.rowData !== 'object') {
2391
- return false;
2392
- }
2393
- const values = Object.values(item.rowData);
2394
- // Verificar si al menos un valor es válido (no vacío, null o undefined)
2395
- return values.some(value => {
2396
- if (value === null || value === undefined || value === '') {
2397
- return false;
2398
- }
2399
- // Si es string, verificar que no esté vacío después de trim
2400
- if (typeof value === 'string') {
2401
- return value.trim() !== '';
2402
- }
2403
- // Para otros tipos (números, fechas, booleanos, etc.)
2404
- return true;
2405
- });
2406
- });
2407
- });
2408
- keys = computed(() => {
2409
- return this.config()?.keys ?? [];
2410
- });
2411
- onRowClick(item) {
2412
- item.onClick();
2413
- }
2414
- //#region Scroll Config
2415
- scrollHeight = computed(() => {
2416
- const scrollHeightInitial = this.config()?.scrollConfig?.scrollHeight ?? '58vh';
2417
- let res = scrollHeightInitial;
2418
- if (this.showBottomToolbar()) {
2419
- const { number: size, unit } = this.parseValue(scrollHeightInitial);
2420
- res = `${size - 7.6}${unit}`;
2421
- }
2422
- return res;
2423
- });
2424
- parseValue(str) {
2425
- const match = str.match(/^(-?\d+\.?\d*)(.*)$/);
2426
- if (match) {
2427
- return {
2428
- number: parseFloat(match[1]),
2429
- unit: match[2]
2430
- };
2431
- }
2432
- return { number: 0, unit: '' };
2433
- }
2434
- //#endregion
2435
- //#region Paginator Config
2436
- paginatorStyleClass = computed(() => {
2437
- if (this.showBottomToolbar()) {
2438
- return 'p-datatable-paginator p-datatable-paginator-bottom sticky bottom-18 z-10';
2439
- }
2440
- return 'p-datatable-paginator p-datatable-paginator-bottom sticky bottom-2 z-10';
2441
- });
2442
- //#endregion
2443
- //#region toolbar config
2444
- showBottomToolbar = computed(() => {
2445
- return this.showManagementSelectionConfig();
2446
- });
2447
- //#endregion
2448
- //#region Clear Filters
2449
- clearFilters() {
2450
- this.tableNgService.clearSearchInput();
2451
- this.advancedFiltersPerformed = [];
2452
- this.advancedFiltersValues.set({});
2453
- this.dt.clear();
2454
- this.targetElements.set([]);
2455
- this.handleTableValueToSourceElements();
2456
- this.selectedItems.set([]);
2457
- }
2458
- get filteredValue() {
2459
- return !!this.dt?.filteredValue && this.dt.filteredValue.length > 0;
2460
- }
2461
- clearFiltersButton = computed(() => {
2462
- return {
2463
- icon: 'fa-solid fa-filter-circle-xmark',
2464
- rounded: true,
2465
- raised: true,
2466
- severity: 'contrast',
2467
- tooltipConfig: {
2468
- pTooltip: 'Limpiar filtros'
2469
- },
2470
- onClick: () => {
2471
- this.clearFilters();
2472
- }
2473
- };
2474
- });
2475
- //#endregion
2476
- //#region Global Filter
2477
- get controlsGlobalFilter() {
2478
- return this.tableNgService.controls();
2479
- }
2480
- get searchFormGroupGlobalFilter() {
2481
- return this.tableNgService.searchFormGroup();
2482
- }
2483
- submitGlobalSearch(formGroup) {
2484
- this.dt.globalFilterFields = this.config()?.globalFilterConfig?.globalFilterFields ?? [];
2485
- this.tableNgService.submitGlobalSearch(formGroup, this.dt);
2486
- }
2487
- //#endregion
2488
- //#region SORT
2489
- customSort(event) {
2490
- this.tableNgService.customSort(event);
2491
- }
2492
- //#endregion
2493
- //#region Selection
2494
- selectedItems = model([]);
2495
- totalItemsSelected = computed(() => this.selectedItems().length);
2496
- showManagementSelectionConfig = computed(() => this.totalItemsSelected() > 0 && (this.config()?.selectionTableConfig?.showManagementConfig ?? false));
2497
- buttonTotalItemsSelected = computed(() => {
2498
- return {
2499
- label: this.totalItemsSelected().toLocaleString(),
2500
- variant: 'text',
2501
- rounded: true
2502
- };
2503
- });
2504
- showSelectedItemsManagementButton = computed(() => {
2505
- return {
2506
- icon: 'fa-solid fa-eye',
2507
- rounded: true,
2508
- variant: 'text',
2509
- severity: 'secondary',
2510
- onClick: () => {
2511
- this.openModalManagementSelectedItems();
2512
- }
2513
- };
2514
- });
2515
- openModalManagementSelectedItems() {
2516
- this.tableNgService.openModalManagementSelectedItems(this.selectedItems, this.config())
2517
- .then(() => { })
2518
- .catch(() => { });
2519
- }
2520
- //#endregion
2521
- //#region Custom Filter
2522
- inlineFormChanges(inlineValue, filter, typeInput, key) {
2523
- const lazyLoadingConfig = this.config()?.lazyLoadingConfig;
2524
- if (typeInput === ETypeInput.MULTISELECT) {
2525
- const options = inlineValue ? inlineValue : undefined;
2526
- const arrayValue = options ? options.map((data) => lazyLoadingConfig?.isEnabled ? data.code : data.name) : undefined;
2527
- if (Array.isArray(arrayValue) && arrayValue.length === 0) {
2528
- if (key) {
2529
- this.advancedFiltersValues.update((prev) => {
2530
- const { [key]: _value, ...rest } = prev;
2531
- return { ...rest };
2532
- });
2533
- }
2534
- }
2535
- if (inlineValue && (Array.isArray(arrayValue) && arrayValue.length > 0)) {
2536
- filter(arrayValue);
2537
- }
2538
- }
2539
- }
2540
- formChanges(formValue, filter, key) {
2541
- if (Array.isArray(formValue['multiSelect'])) {
2542
- this.advancedFiltersValues.update((prev) => {
2543
- return { ...prev, [key]: formValue };
2544
- });
2545
- }
2546
- if (!Array.isArray(formValue['multiSelect']) && this.advancedFiltersValues()?.[key]) {
2547
- this.advancedFiltersValues.update((prev) => {
2548
- const { [key]: _value, ...rest } = prev;
2549
- return { ...rest };
2550
- });
2551
- }
2552
- const arrayValue = Array.isArray(formValue['multiSelect'])
2553
- ? formValue['multiSelect'].map((data) => data.code)
2554
- : [];
2555
- if (arrayValue.length > 0) {
2556
- filter(arrayValue);
2557
- }
2558
- }
2559
- rowDataKey(key) {
2560
- return `rowData.${key}`;
2561
- }
2562
- //#endregion
2563
- //#region Lazy Loading
2564
- onLazyLoad(event) {
2565
- const filters = event.filters ?? {};
2566
- const filtersWithValue = this.getFiltersWithValue(filters);
2567
- const metaPagination = {
2568
- limit: event.rows ?? undefined,
2569
- skip: event.first ?? undefined
2570
- };
2571
- if (event.sortOrder) {
2572
- metaPagination.sortOrder = event.sortOrder === 1 ? 'ASC' : 'DESC';
2573
- }
2574
- if (event.sortField) {
2575
- metaPagination.sortBy = event.sortField;
2576
- }
2577
- const lazyLoadResponse = {
2578
- filters: filtersWithValue,
2579
- metaPagination
2580
- };
2581
- this.lazyLoading.emit(lazyLoadResponse);
2582
- }
2583
- getFiltersWithValue(filters) {
2584
- const result = {};
2585
- Object.entries(filters).forEach(([key, filter]) => {
2586
- const keyColumn = key.split('.')[1];
2587
- if (!filter)
2588
- return;
2589
- if (Array.isArray(filter)) {
2590
- // Si es un array, filtrar solo los elementos que tienen value
2591
- const filtersWithValue = filter.filter(f => f.value !== undefined && f.value !== null && f.value !== '');
2592
- if (filtersWithValue.length > 0) {
2593
- result[keyColumn] = filtersWithValue;
2594
- }
2595
- }
2596
- else {
2597
- // Si es un objeto único, verificar si tiene value
2598
- if (filter.value !== undefined && filter.value !== null && filter.value !== '') {
2599
- result[keyColumn] = filter;
2600
- }
2601
- }
2602
- });
2603
- return result;
2604
- }
2605
- //#endregion
2606
- //#region Edit
2607
- onCellValueChange() {
2608
- this.updateDataWithTableValue();
2609
- }
2610
- onRowDataChange(_data) {
2611
- }
2612
- onEditData() {
2613
- this.updateDataWithTableValue();
2614
- this.outputEditData.emit([...this.data()]);
2615
- }
2616
- get controlsEdit() {
2617
- return this.tableNgEditService.controls();
2618
- }
2619
- get searchFormGroupEdit() {
2620
- return this.tableNgEditService.searchFormGroup();
2621
- }
2622
- customControlConfig(key, value) {
2623
- return {
2624
- controlName: key,
2625
- control: this.fb.control(value),
2626
- typeInput: ETypeInput.TEXT
2627
- };
2628
- }
2629
- cellFormGroup = this.fb.group({});
2630
- //#region Row
2631
- addRowButton = computed(() => {
2632
- const editConfig = this.editConfig();
2633
- const isDisabled = editConfig?.type === 'cell'
2634
- ? (editConfig?.cellEditConfig?.isDisabledAddButton ?? false)
2635
- : (editConfig?.rowEditConfig?.isDisabledAddButton ?? false) || this.hasRowInEdit;
2636
- const button = {
2637
- icon: 'fa-solid fa-plus',
2638
- rounded: true,
2639
- severity: 'success',
2640
- tooltipConfig: {
2641
- pTooltip: 'Agregar registro',
2642
- tooltipPosition: 'top'
2643
- },
2644
- onClick: () => {
2645
- this.addRow();
2646
- },
2647
- disabled: isDisabled
2648
- };
2649
- return button;
2650
- });
2651
- addRow() {
2652
- const editConfig = this.editConfig();
2653
- // Si es modo cell y hay defaultTableNgData configurado, agregar la fila directamente
2654
- if (editConfig?.type === 'cell' && editConfig?.cellEditConfig?.defaultTableNgData) {
2655
- const newRow = this.editConfig()?.cellEditConfig?.defaultTableNgData;
2656
- if (newRow) {
2657
- this.data.update(currentData => [...currentData, newRow]);
2658
- this.outputChangeData.emit(this.data());
2659
- return;
2660
- }
2661
- }
2662
- // Comportamiento original para modo row o cuando no hay defaultTableNgData
2663
- this.outputAddRow.emit(this.data());
2664
- this.setEditingRowId(null);
2665
- }
2666
- defaultTableNgData = computed(() => {
2667
- const editConfig = this.editConfig();
2668
- let defaultData;
2669
- // Usar la configuración apropiada según el tipo de edición
2670
- if (editConfig?.type === 'cell' && editConfig?.cellEditConfig?.defaultTableNgData) {
2671
- defaultData = editConfig.cellEditConfig.defaultTableNgData;
2672
- }
2673
- else if (editConfig?.type === 'row' && editConfig?.rowEditConfig?.defaultTableNgData) {
2674
- defaultData = editConfig.rowEditConfig.defaultTableNgData;
2675
- }
2676
- const res = { ...defaultData };
2677
- return {
2678
- ...res,
2679
- id: generateId()
2680
- };
2681
- });
2682
- clonedRowData = null;
2683
- editingRowId = signal(null);
2684
- /**
2685
- * Verifica si una fila específica está siendo editada
2686
- */
2687
- isRowEditing(id) {
2688
- return this.editingRowId() === id;
2689
- }
2690
- /**
2691
- * Verifica si hay alguna fila siendo editada actualmente
2692
- */
2693
- get hasRowInEdit() {
2694
- return this.editingRowId() !== null;
2695
- }
2696
- onRowEditInit(data) {
2697
- // Verificar si ya hay una fila en edición
2698
- this.clonedRowData = structuredClone(data.rowData);
2699
- this.setEditingRowId(data.id);
2700
- this.outputHandleEditInitButton.emit(data);
2701
- }
2702
- setEditingRowId(id) {
2703
- this.editingRowId.set(id);
2704
- this.outputIsEditing.emit(true);
2705
- }
2706
- onRowEditSave(_data) {
2707
- this.clonedRowData = null;
2708
- this.editingRowId.set(null);
2709
- this.updateDataWithTableValue();
2710
- this.setEnableErrors(false);
2711
- this.outputIsEditing.emit(false);
2712
- this.outputRowDataChange.emit(_data);
2713
- }
2714
- onRowEditCancel(data, index) {
2715
- if (this.clonedRowData && this.editingRowId() === data.id) {
2716
- const items = [...this.data()];
2717
- items[index] = { ...items[index], rowData: this.clonedRowData };
2718
- this.data.set(items);
2719
- }
2720
- this.clonedRowData = null;
2721
- this.setEditingRowId(null);
2722
- this.setEnableErrors(false);
2723
- this.outputIsEditing.emit(false);
2724
- }
2725
- updateDataWithTableValue() {
2726
- const tableValue = (this.dt.value ?? []);
2727
- this.data.set([...tableValue]);
2728
- }
2729
- editInitButton = computed(() => {
2730
- return {
2731
- icon: 'fa-solid fa-pencil',
2732
- rounded: true,
2733
- variant: 'text',
2734
- severity: 'secondary'
2735
- };
2736
- });
2737
- getEditInitButton(productId) {
2738
- return {
2739
- ...this.editInitButton(),
2740
- disabled: this.hasRowInEdit && !this.isRowEditing(productId)
2741
- };
2742
- }
2743
- editSaveButton = computed(() => {
2744
- return {
2745
- icon: 'fa-solid fa-check',
2746
- rounded: true,
2747
- variant: 'text',
2748
- severity: 'secondary'
2749
- };
2750
- });
2751
- editSaveButtonWithErrors = computed(() => {
2752
- return {
2753
- icon: 'fa-solid fa-check',
2754
- rounded: true,
2755
- variant: 'text',
2756
- severity: 'secondary'
2757
- };
2758
- });
2759
- enableErrors = false;
2760
- setEnableErrors(value) {
2761
- this.enableErrors = value;
2762
- }
2763
- onEditSaveWithErrors() {
2764
- this.setEnableErrors(true);
2765
- }
2766
- editCancelButton = computed(() => {
2767
- return {
2768
- icon: 'fa-solid fa-times',
2769
- rounded: true,
2770
- variant: 'text',
2771
- severity: 'secondary'
2772
- };
2773
- });
2774
- deleteRowButton = computed(() => {
2775
- return {
2776
- icon: 'fa-solid fa-trash',
2777
- rounded: true,
2778
- variant: 'text',
2779
- severity: 'danger'
2780
- };
2781
- });
2782
- getDeleteRowButton() {
2783
- return {
2784
- ...this.deleteRowButton(),
2785
- disabled: this.hasRowInEdit
2786
- };
2787
- }
2788
- removeRowFromData(data) {
2789
- const { id } = data;
2790
- const items = [...this.data()];
2791
- items.splice(items.findIndex(item => item.id === id), 1);
2792
- this.data.set(items);
2793
- this.outputDeleteRow.emit(data);
2794
- }
2795
- deleteRow(data) {
2796
- this.removeRowFromData(data);
2797
- this.outputEditData.emit(this.data());
2798
- }
2799
- //#endregion Row
2800
- get footerRows() {
2801
- return this.footerConfig()?.footerRows || [];
2802
- }
2803
- applyPipe(value, pipeConfig) {
2804
- if (!pipeConfig || !pipeConfig.pipe) {
2805
- return value?.toString() || '';
2806
- }
2807
- switch (pipeConfig.pipe) {
2808
- case 'currency': {
2809
- const currencyCode = pipeConfig.args?.[0] || 'COP';
2810
- return new Intl.NumberFormat('es-CO', {
2811
- style: 'currency',
2812
- currency: currencyCode
2813
- }).format(value);
2814
- }
2815
- case 'number': {
2816
- const digits = pipeConfig.args?.[0] || '1.2-2';
2817
- const [minInteger, fractional] = digits.split('.');
2818
- const [minFractional, maxFractional] = fractional ? fractional.split('-') : ['0', '0'];
2819
- return new Intl.NumberFormat('es-CO', {
2820
- minimumIntegerDigits: parseInt(minInteger),
2821
- minimumFractionDigits: parseInt(minFractional),
2822
- maximumFractionDigits: parseInt(maxFractional || minFractional)
2823
- }).format(value);
2824
- }
2825
- case 'date': {
2826
- if (value instanceof Date) {
2827
- return value.toLocaleDateString('es-CO');
2828
- }
2829
- return value?.toString() || '';
2830
- }
2831
- default:
2832
- return value?.toString() || '';
2833
- }
2834
- }
2835
- // #endregion
2836
- //#region Row Expansion
2837
- rowExpansionButton(isRowExpanded) {
2838
- return computed(() => {
2839
- return {
2840
- icon: isRowExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right',
2841
- rounded: true,
2842
- variant: 'text',
2843
- severity: 'contrast'
2844
- };
2845
- });
2846
- }
2847
- //#endregion
2848
- itemTemplateInput = input(null);
2849
- itemTemplate;
2850
- get currentItemTemplate() {
2851
- return this.itemTemplateInput() || this.itemTemplate || null;
2852
- }
2853
- isThatItemInTheProductSelection(field) {
2854
- const selectedColumns = this.config()?.selectedColumns ?? [];
2855
- if (!selectedColumns.length) {
2856
- return true;
2857
- }
2858
- return selectedColumns.some((column) => column.field === field);
2859
- }
2860
- //#region Advanced Identifier Filters
2861
- advancedIdentifierFiltersButton = computed(() => {
2862
- return {
2863
- icon: 'pi pi-filter',
2864
- rounded: true,
2865
- severity: 'warn',
2866
- raised: true,
2867
- tooltipConfig: {
2868
- pTooltip: this.data().length === 0 ? 'No hay datos para filtrar' : 'Filtros avanzados',
2869
- tooltipPosition: 'top'
2870
- },
2871
- onClick: () => {
2872
- this.openAdvancedIdentifierFilters();
2873
- },
2874
- disabled: this.data().length === 0
2875
- };
2876
- });
2877
- openAdvancedIdentifierFilters() {
2878
- if (this.sourceElements().length === 0) {
2879
- this.handleTableValueToSourceElements();
2880
- }
2881
- this.handleSelectedItemsToSourceElements();
2882
- if (this.data().length === 0) {
2883
- return;
2884
- }
2885
- const ref = this.dialogService.open(ModalAdvancedFilterComponent, {
2886
- header: 'Filtros Avanzados',
2887
- width: '70%',
2888
- height: '70%',
2889
- styleClass: 'overflow-hidden',
2890
- data: {
2891
- sourceElements: this.sourceElements(),
2892
- targetElements: this.targetElements()
2893
- }
2894
- });
2895
- ref.onClose.subscribe((result) => {
2896
- const { sourceElements, targetElements } = result?.data ?? {};
2897
- if (!result?.success) {
2898
- return;
2899
- }
2900
- if (result?.data?.targetElements?.length === 0) {
2901
- return;
2902
- }
2903
- if (sourceElements.length === 0) {
2904
- return;
2905
- }
2906
- this.sourceElements.set(sourceElements ?? []);
2907
- this.targetElements.set(targetElements ?? []);
2908
- this.identifiersSelected.set((this.targetElements() ?? []).filter((element) => element.buttonConfig?.label).map((element) => element.buttonConfig?.label) ?? []);
2909
- this.dt.filter(this.identifiersSelected(), 'rowData.identifier', 'arrayStringFilter');
2910
- });
2911
- }
2912
- handleTableValueToSourceElements() {
2913
- const value = this.data();
2914
- if (!value.some((item) => item.rowData['identifier'])) {
2915
- return;
2916
- }
2917
- const sourceElements = value.map((item) => ({
2918
- id: item.id,
2919
- buttonConfig: {
2920
- label: item.rowData['identifier'],
2921
- fullWidth: true,
2922
- fullHeight: true
2923
- },
2924
- isSelected: false
2925
- }));
2926
- this.sourceElements.set(sourceElements);
2927
- }
2928
- handleSelectedItemsToSourceElements() {
2929
- const selectedItems = this.selectedItems();
2930
- if (!selectedItems.some((item) => item.rowData['identifier'])) {
2931
- return;
2932
- }
2933
- const identifiers = selectedItems.map((item) => item.rowData['identifier']);
2934
- const sourceElements = this.sourceElements().map((item) => ({
2935
- ...item,
2936
- isSelected: identifiers.includes(item.buttonConfig?.label)
2937
- }));
2938
- this.sourceElements.set(sourceElements);
2939
- }
2940
- identifiersSelected = signal([]);
2941
- //#endregion
2942
- get excelButton() {
2943
- return this.tableNgService.excelButton();
2944
- }
2945
- get pdfButton() {
2946
- return this.tableNgService.pdfButton();
2947
- }
2948
- lazyLoadingConfig = computed(() => {
2949
- return this.config()?.lazyLoadingConfig ?? undefined;
2950
- });
2951
- isEnabledLazyLoading = computed(() => {
2952
- return this.lazyLoadingConfig()?.isEnabled ?? false;
2953
- });
2954
- prepareDataForExport(dataToExport) {
2955
- const keys = this.config()?.keys ?? [];
2956
- const keysNames = this.config()?.keysNames ?? {};
2957
- return dataToExport.map((item) => {
2958
- const row = {};
2959
- const rowData = item.rowData;
2960
- keys.forEach((key) => {
2961
- const keyName = keysNames[key] ?? key;
2962
- if (rowData[key]) {
2963
- let value = rowData[key];
2964
- switch (typeof value) {
2965
- case 'number':
2966
- value = formatNumber(value);
2967
- break;
2968
- default:
2969
- break;
2970
- }
2971
- row[keyName] = value;
2972
- }
2973
- });
2974
- return row;
2975
- });
2976
- }
2977
- exportCSV(data) {
2978
- // Create a new workbook
2979
- const workbook = XLSX.utils.book_new();
2980
- const worksheet = XLSX.utils.json_to_sheet(data);
2981
- // Get title from config or use default
2982
- const name = this.config()?.excelConfig?.name ?? 'Report';
2983
- const fileName = name || 'table-export';
2984
- // Excel sheet names cannot exceed 31 characters
2985
- const sheetName = name.substring(0, 31);
2986
- // Add the worksheet to the workbook
2987
- XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
2988
- // Generate Excel file and trigger download
2989
- XLSX.writeFile(workbook, `${fileName}.xlsx`);
2990
- }
2991
- exportData(dt, endpoint) {
2992
- if (this.isEnabledLazyLoading()) {
2993
- const filters = dt.filters ?? {};
2994
- const filterQuery = {};
2995
- Object.entries(filters).forEach(([key, value]) => {
2996
- const keyName = key.split('.')[1];
2997
- const valueFilter = value[0]?.value;
2998
- filterQuery[keyName] = valueFilter;
2999
- });
3000
- this.lazyLoadingConfig()?.excelLazyLoadingConfig?.callback(removeNullUndefined(filterQuery))
3001
- .subscribe((response) => {
3002
- const data = this.prepareDataForExport(response);
3003
- if (endpoint === 'excel') {
3004
- this.exportCSV(data);
3005
- }
3006
- else {
3007
- this.exportPDF(data);
3008
- }
3009
- });
3010
- }
3011
- else {
3012
- const value = dt.value ?? this.data();
3013
- const filteredValue = dt.filteredValue ?? [];
3014
- let dataToExport = [];
3015
- if (filteredValue.length > 0) {
3016
- dataToExport = filteredValue;
3017
- }
3018
- else {
3019
- dataToExport = value;
3020
- }
3021
- const data = this.prepareDataForExport(dataToExport);
3022
- if (endpoint === 'excel') {
3023
- this.exportCSV(data);
3024
- }
3025
- else {
3026
- this.exportPDF(data);
3027
- }
3028
- }
3029
- }
3030
- exportPDF(data) {
3031
- // Get title from config or use default
3032
- const name = this.config()?.pdfConfig?.name ?? this.config()?.excelConfig?.name ?? 'Report';
3033
- const fileName = name || 'table-export';
3034
- // Get keys and column names
3035
- const keys = this.config()?.keys ?? [];
3036
- const keysNames = this.config()?.keysNames ?? {};
3037
- // Prepare headers
3038
- const headers = keys.map((key) => keysNames[key] ?? key);
3039
- // Prepare rows data
3040
- const rows = data.map((row) => {
3041
- return keys.map((key) => {
3042
- const keyName = keysNames[key] ?? key;
3043
- return row[keyName] ?? '';
3044
- });
3045
- });
3046
- // Create PDF document
3047
- const doc = new jsPDF({
3048
- orientation: 'landscape',
3049
- unit: 'mm',
3050
- format: 'a4'
3051
- });
3052
- // Add title
3053
- doc.setFontSize(16);
3054
- doc.text(name, 14, 15);
3055
- // Add table
3056
- autoTable(doc, {
3057
- head: [headers],
3058
- body: rows,
3059
- startY: 20,
3060
- styles: {
3061
- fontSize: 8,
3062
- cellPadding: 2
3063
- },
3064
- headStyles: {
3065
- fillColor: [66, 139, 202],
3066
- textColor: 255,
3067
- fontStyle: 'bold'
3068
- },
3069
- alternateRowStyles: {
3070
- fillColor: [245, 245, 245]
3071
- },
3072
- margin: { top: 20 }
3073
- });
3074
- // Save PDF
3075
- doc.save(`${fileName}.pdf`);
3076
- }
3077
- enableExcelButton = computed(() => {
3078
- return this.config()?.excelConfig?.isEnabled ?? false;
3079
- });
3080
- enablePdfButton = computed(() => {
3081
- return this.config()?.pdfConfig?.isEnabled ?? false;
3082
- });
3083
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3084
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableNgComponent, isStandalone: true, selector: "lib-table-ng", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null }, toolbarButtons: { classPropertyName: "toolbarButtons", publicName: "toolbarButtons", isSignal: true, isRequired: false, transformFunction: null }, sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null }, httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplateInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", config: "configChange", editConfig: "editConfigChange", footerConfig: "footerConfigChange", toolbarButtons: "toolbarButtonsChange", sourceElements: "sourceElementsChange", targetElements: "targetElementsChange", httpMessage: "httpMessageChange", lazyLoading: "lazyLoading", outputChangeData: "outputChangeData", outputHandleEditInitButton: "outputHandleEditInitButton", outputAddRow: "outputAddRow", outputDeleteRow: "outputDeleteRow", outputRowInlineChange: "outputRowInlineChange", outputRowDataChange: "outputRowDataChange", outputEditData: "outputEditData", outputIsEditing: "outputIsEditing", selectedItems: "selectedItemsChange" }, providers: [TableNgService, TableNgEditService], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }], viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "@let paginationConfig = config()?.paginationConfig;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n\r\n<div class=\"p-datatable-wrapper\">\r\n @if (titleConfig?.isEnabled && titleConfig?.title) {\r\n <div class=\"table-title-container\">\r\n <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\r\n </div>\r\n }\r\n @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\r\n <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\r\n <div class=\"flex gap-2\" toolbarStart>\r\n @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\r\n <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\r\n }\r\n @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n <lib-button-ng class=\"animate__animated animate__fadeIn\"\r\n [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\r\n }\r\n @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\r\n }\r\n </div>\r\n <div class=\"flex gap-2\" toolbarEnd>\r\n @if (toolbarButtons().length > 0) {\r\n @for (button of toolbarButtons(); track $index) {\r\n <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n }\r\n }\r\n @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\r\n }\r\n @if (enableExcelButton()) {\r\n <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\r\n }\r\n @if (enablePdfButton()) {\r\n <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\r\n }\r\n </div>\r\n </lib-toolbar-ng>\r\n }\r\n <p-table #dt styleClass=\"p-datatable-sm\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n [editMode]=\"editType\" [totalRecords]=\"\r\n lazyLoadingConfig?.isEnabled\r\n ? (lazyLoadingConfig?.totalRecords ?? 0)\r\n : data().length\r\n \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\r\n <ng-template #header let-columns>\r\n <tr>\r\n @if (rowExpansionConfig?.isEnabled) {\r\n <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n </th>\r\n }\r\n @if (selectionTableConfig?.isEnabled) {\r\n <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n <p-tableHeaderCheckbox />\r\n </th>\r\n }\r\n\r\n @if (selectedColumns) {\r\n @for (column of columns; track $index) {\r\n <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(\r\n frozenColumnConfigByKey?.[column.field]\r\n ),\r\n }\">\r\n <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n {{ column.field | keyToDisplayName: keysNames }}\r\n @if(!editEnabled){\r\n <p-sortIcon [field]=\"column.field\" />\r\n }\r\n @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n 'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n advancedFiltersPerformed.includes(column.field),\r\n }\" [type]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\r\n 'text'\r\n \" [matchMode]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.matchMode\r\n \" [showMatchModes]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showMatchModes ?? false\r\n \" [showOperator]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showOperator ?? false\r\n \" [showAddButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showAddButton ?? false\r\n \" [showApplyButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showApplyButton ?? false\r\n \" [showClearButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showClearButton ?? false\r\n \">\r\n @if (\r\n filterConfigByKey?.[column.field]?.customColumnFilterConfig\r\n ?.isEnabled ?? false\r\n ) {\r\n <ng-template #filter let-value let-filter=\"filterCallback\">\r\n <div style=\"min-width: 20rem\" class=\"\">\r\n <lib-inline-input\r\n (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\r\n (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\r\n [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-columnFilter>\r\n }\r\n </div>\r\n </th>\r\n }\r\n }@else {\r\n @for (key of keys(); track $index) {\r\n <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n }\">\r\n <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n {{ key | keyToDisplayName: keysNames }}\r\n @if(!editEnabled){\r\n <p-sortIcon [field]=\"key\" />\r\n }\r\n @if (filterConfigByKey?.[key]?.isEnabled) {\r\n <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n 'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n advancedFiltersPerformed.includes(key),\r\n }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\r\n [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n @if (\r\n filterConfigByKey?.[key]?.customColumnFilterConfig\r\n ?.isEnabled ?? false\r\n ) {\r\n <ng-template #filter let-value let-filter=\"filterCallback\">\r\n <div style=\"min-width: 20rem\" class=\"\">\r\n <!-- <app-custom-advanced-filter filter\r\n [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\r\n (formChanges)=\"formChanges($event, filter, key)\"\r\n [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\r\n <lib-inline-input\r\n (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\r\n [(ngModel)]=\"advancedFiltersValues()[key]\"\r\n [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-columnFilter>\r\n }\r\n </div>\r\n </th>\r\n }\r\n }\r\n\r\n @if (editType === 'cell' && editEnabled) {\r\n <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n </th>\r\n }\r\n @if (editType === 'row' && editEnabled) {\r\n <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n </th>\r\n }\r\n\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td [attr.colspan]=\"totalColumns()\">\r\n @if (isLoading()) {\r\n <!-- Loading state -->\r\n <div class=\"p-8 text-center\">\r\n <div class=\"flex flex-col items-center justify-center gap-4\">\r\n <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\r\n <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\r\n </div>\r\n </div>\r\n } @else if (timeoutExpired()) {\r\n <!-- No data available -->\r\n <div class=\"p-8 text-center text-gray-500\">\r\n <div class=\"flex flex-col items-center justify-center gap-3\">\r\n <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\r\n <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\r\n </div>\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n @if (hasRecords()) {\r\n @if (editEnabled) {\r\n @switch (editType) {\r\n @case ('cell') {\r\n <ng-template #body let-item let-editing=\"editing\">\r\n <tr class=\"p-datatable-row p-selectable-row\">\r\n @if (selectedColumns) {\r\n @for (column of selectedColumns; track $index){\r\n <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n </lib-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n 'USD' }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[column.field]?.name) {\r\n {{ item.rowData[column.field]?.name }}\r\n } @else {\r\n {{ item.rowData[column.field] }}\r\n }\r\n }\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n </td>\r\n }\r\n } @else {\r\n @for (key of keys(); track $index){\r\n <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n </lib-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n {{ item.rowData[key] }}\r\n </ng-template>\r\n </p-cellEditor>\r\n </td>\r\n }\r\n }\r\n @if (editType === 'cell' && editEnabled) {\r\n <td class=\"px-2 py-1 text-center\">\r\n <div class=\"flex justify-center items-center gap-2\">\r\n <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n }\r\n @case ('row') {\r\n <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\r\n <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\r\n @if (selectedColumns) {\r\n @for (column of selectedColumns; track $index){\r\n <td>\r\n <div class=\"flex flex-col gap-2\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\r\n (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n </lib-inline-input>\r\n\r\n </ng-template>\r\n <ng-template #output>\r\n\r\n @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n 'USD' }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[column.field]?.name) {\r\n {{ item.rowData[column.field]?.name }}\r\n } @else {\r\n {{ item.rowData[column.field] }}\r\n }\r\n }\r\n\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n\r\n @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\r\n <span class=\"text-red-500 italic text-xs\">{{\r\n rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\r\n '' }}</span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n } @else {\r\n @for (key of keys(); track $index){\r\n <td>\r\n <div class=\"flex flex-col gap-2\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n </lib-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n\r\n @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n </div>\r\n }\r\n @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[key]?.name) {\r\n {{ item.rowData[key]?.name }}\r\n } @else {\r\n {{ item.rowData[key] }}\r\n }\r\n }\r\n\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n\r\n @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\r\n <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\r\n '' }}</span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n }\r\n <td>\r\n <div class=\"flex justify-center items-center gap-2\">\r\n @if(!editing){\r\n <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\r\n @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n }\r\n }\r\n @if(editing){\r\n @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\r\n }\r\n @else {\r\n <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\r\n }\r\n <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n }\r\n }\r\n } @else {\r\n\r\n <ng-template #body let-item let-expanded=\"expanded\">\r\n <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\r\n 'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\r\n 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\r\n 'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\r\n 'skeleton-row': item.isLoading\r\n }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n @if (rowExpansionConfig?.isEnabled) {\r\n <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\r\n [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n @if (!item.isLoading) {\r\n <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n [pRowToggler]=\"item\"></lib-button-ng>\r\n } @else {\r\n <div class=\"skeleton-content\"></div>\r\n }\r\n </td>\r\n }\r\n\r\n @if (selectionTableConfig?.isEnabled) {\r\n <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\r\n [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n @if (!item.isLoading) {\r\n <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\r\n } @else {\r\n <div class=\"skeleton-content\"></div>\r\n }\r\n </td>\r\n }\r\n\r\n @for (key of keys(); track $index) {\r\n @if (isThatItemInTheProductSelection(key)) {\r\n <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n 'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\r\n 'skeleton-cell': item.isLoading\r\n }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\r\n @if (item.isLoading) {\r\n <div class=\"skeleton-content\"></div>\r\n } @else {\r\n @if (item.rowDataButtons?.[key]) {\r\n <div class=\"flex gap-4 w-full justify-center items-center\">\r\n @for (btn of item.rowDataButtons[key]; track $index) {\r\n @if (btn) {\r\n <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n @switch (item.typeCell?.[key]) {\r\n @case (ETypeInput.IMAGE) {\r\n <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\r\n }\r\n @case (ETypeInput.DATE) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n }\r\n @case (ETypeInput.DATETIME_LOCAL) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n }\r\n @case (ETypeInput.CURRENCY) {\r\n {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\r\n item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n }\r\n @case (ETypeInput.BADGE) {\r\n <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\r\n }\r\n @case (ETypeInput.COMPONENT) {\r\n <ng-container\r\n *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n }\r\n @default {\r\n @if (isDate(item.rowData[key])) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n } @else if (typeof item.rowData[key] === \"string\") {\r\n {{ item.rowData[key] }}\r\n } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n {{ item.rowData[key].name }}\r\n } @else if(typeof item.rowData[key] === \"number\") {\r\n <p class=\"text-right\">\r\n {{ item.rowData[key] | number: '1.2-2' }}\r\n </p>\r\n }\r\n }\r\n }\r\n }\r\n }\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </ng-template>\r\n }\r\n }\r\n\r\n <ng-template #footer>\r\n @if (footerEnabled) {\r\n @for (row of footerRows; track $index) {\r\n <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n @for (cell of row; track $index) {\r\n <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n applyPipe(cell.value,\r\n cell.pipeConfig) }}</td>\r\n\r\n }\r\n </tr>\r\n }\r\n\r\n }\r\n </ng-template>\r\n <ng-template #expandedrow let-item>\r\n <tr>\r\n <td colspan=\"100%\">\r\n <div class=\"p-datatable-row-expansion\">\r\n <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n @if (showBottomToolbar()) {\r\n <div class=\"p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n <lib-toolbar-ng>\r\n @if (showManagementSelectionConfig()) {\r\n <div toolbarStart\r\n class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\r\n <span class=\"font-medium text-gray-700\">{{ getSelectedItemsLabel() }}</span>\r\n <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n <span class=\"font-semibold text-gray-900\">{{\r\n totalItemsSelected().toLocaleString()\r\n }}</span>\r\n </div>\r\n <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\r\n <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\r\n </div>\r\n }\r\n </lib-toolbar-ng>\r\n </div>\r\n }\r\n</div>\r\n@if (httpMessage()) {\r\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i2$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i2$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i2$2.EditableColumn, selector: "[pEditableColumn]", inputs: ["pEditableColumn", "pEditableColumnField", "pEditableColumnRowIndex", "pEditableColumnDisabled", "pFocusCellSelector"] }, { kind: "component", type: i2$2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i2$2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2$2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2$2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2$2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2$2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "component", type: ToolbarNgComponent, selector: "lib-toolbar-ng" }, { kind: "component", type: FormComponent, selector: "lib-form", inputs: ["formGroup", "controls", "formConfig", "httpMessage"], outputs: ["formGroupChange", "httpMessageChange", "formSubmit", "formChanges", "formChangesDebounced"] }, { kind: "pipe", type: KeyToDisplayNamePipe, name: "keyToDisplayName" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineInputComponent, selector: "lib-inline-input", inputs: ["config", "value"], outputs: ["valueChange", "outputValue", "outputBlur", "outputDebounced"] }, { kind: "component", type: BadgeNgComponent, selector: "lib-badge-ng", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: HttpMessageComponent, selector: "lib-http-message", inputs: ["httpMessage"], outputs: ["httpMessageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3085
- }
3086
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, decorators: [{
3087
- type: Component,
3088
- args: [{ selector: 'lib-table-ng', imports: [
3089
- CommonModule,
3090
- TableModule,
3091
- ButtonNgComponent,
3092
- ToolbarNgComponent,
3093
- FormComponent,
3094
- KeyToDisplayNamePipe,
3095
- FormsModule,
3096
- InlineInputComponent,
3097
- BadgeNgComponent,
3098
- HttpMessageComponent
3099
- ], providers: [TableNgService, TableNgEditService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let paginationConfig = config()?.paginationConfig;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n\r\n<div class=\"p-datatable-wrapper\">\r\n @if (titleConfig?.isEnabled && titleConfig?.title) {\r\n <div class=\"table-title-container\">\r\n <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\r\n </div>\r\n }\r\n @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\r\n <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\r\n <div class=\"flex gap-2\" toolbarStart>\r\n @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\r\n <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\r\n }\r\n @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n <lib-button-ng class=\"animate__animated animate__fadeIn\"\r\n [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\r\n }\r\n @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\r\n }\r\n </div>\r\n <div class=\"flex gap-2\" toolbarEnd>\r\n @if (toolbarButtons().length > 0) {\r\n @for (button of toolbarButtons(); track $index) {\r\n <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n }\r\n }\r\n @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\r\n }\r\n @if (enableExcelButton()) {\r\n <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\r\n }\r\n @if (enablePdfButton()) {\r\n <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\r\n }\r\n </div>\r\n </lib-toolbar-ng>\r\n }\r\n <p-table #dt styleClass=\"p-datatable-sm\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n [editMode]=\"editType\" [totalRecords]=\"\r\n lazyLoadingConfig?.isEnabled\r\n ? (lazyLoadingConfig?.totalRecords ?? 0)\r\n : data().length\r\n \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\r\n <ng-template #header let-columns>\r\n <tr>\r\n @if (rowExpansionConfig?.isEnabled) {\r\n <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n </th>\r\n }\r\n @if (selectionTableConfig?.isEnabled) {\r\n <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n <p-tableHeaderCheckbox />\r\n </th>\r\n }\r\n\r\n @if (selectedColumns) {\r\n @for (column of columns; track $index) {\r\n <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(\r\n frozenColumnConfigByKey?.[column.field]\r\n ),\r\n }\">\r\n <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n {{ column.field | keyToDisplayName: keysNames }}\r\n @if(!editEnabled){\r\n <p-sortIcon [field]=\"column.field\" />\r\n }\r\n @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n 'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n advancedFiltersPerformed.includes(column.field),\r\n }\" [type]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\r\n 'text'\r\n \" [matchMode]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.matchMode\r\n \" [showMatchModes]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showMatchModes ?? false\r\n \" [showOperator]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showOperator ?? false\r\n \" [showAddButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showAddButton ?? false\r\n \" [showApplyButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showApplyButton ?? false\r\n \" [showClearButton]=\"\r\n filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n ?.showClearButton ?? false\r\n \">\r\n @if (\r\n filterConfigByKey?.[column.field]?.customColumnFilterConfig\r\n ?.isEnabled ?? false\r\n ) {\r\n <ng-template #filter let-value let-filter=\"filterCallback\">\r\n <div style=\"min-width: 20rem\" class=\"\">\r\n <lib-inline-input\r\n (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\r\n (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\r\n [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-columnFilter>\r\n }\r\n </div>\r\n </th>\r\n }\r\n }@else {\r\n @for (key of keys(); track $index) {\r\n <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n }\">\r\n <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n {{ key | keyToDisplayName: keysNames }}\r\n @if(!editEnabled){\r\n <p-sortIcon [field]=\"key\" />\r\n }\r\n @if (filterConfigByKey?.[key]?.isEnabled) {\r\n <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n 'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n advancedFiltersPerformed.includes(key),\r\n }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\r\n [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n @if (\r\n filterConfigByKey?.[key]?.customColumnFilterConfig\r\n ?.isEnabled ?? false\r\n ) {\r\n <ng-template #filter let-value let-filter=\"filterCallback\">\r\n <div style=\"min-width: 20rem\" class=\"\">\r\n <!-- <app-custom-advanced-filter filter\r\n [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\r\n (formChanges)=\"formChanges($event, filter, key)\"\r\n [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\r\n <lib-inline-input\r\n (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\r\n [(ngModel)]=\"advancedFiltersValues()[key]\"\r\n [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-columnFilter>\r\n }\r\n </div>\r\n </th>\r\n }\r\n }\r\n\r\n @if (editType === 'cell' && editEnabled) {\r\n <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n </th>\r\n }\r\n @if (editType === 'row' && editEnabled) {\r\n <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n </th>\r\n }\r\n\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td [attr.colspan]=\"totalColumns()\">\r\n @if (isLoading()) {\r\n <!-- Loading state -->\r\n <div class=\"p-8 text-center\">\r\n <div class=\"flex flex-col items-center justify-center gap-4\">\r\n <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\r\n <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\r\n </div>\r\n </div>\r\n } @else if (timeoutExpired()) {\r\n <!-- No data available -->\r\n <div class=\"p-8 text-center text-gray-500\">\r\n <div class=\"flex flex-col items-center justify-center gap-3\">\r\n <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\r\n <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\r\n </div>\r\n </div>\r\n }\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n @if (hasRecords()) {\r\n @if (editEnabled) {\r\n @switch (editType) {\r\n @case ('cell') {\r\n <ng-template #body let-item let-editing=\"editing\">\r\n <tr class=\"p-datatable-row p-selectable-row\">\r\n @if (selectedColumns) {\r\n @for (column of selectedColumns; track $index){\r\n <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n </lib-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n 'USD' }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[column.field]?.name) {\r\n {{ item.rowData[column.field]?.name }}\r\n } @else {\r\n {{ item.rowData[column.field] }}\r\n }\r\n }\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n </td>\r\n }\r\n } @else {\r\n @for (key of keys(); track $index){\r\n <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n </lib-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n {{ item.rowData[key] }}\r\n </ng-template>\r\n </p-cellEditor>\r\n </td>\r\n }\r\n }\r\n @if (editType === 'cell' && editEnabled) {\r\n <td class=\"px-2 py-1 text-center\">\r\n <div class=\"flex justify-center items-center gap-2\">\r\n <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n }\r\n @case ('row') {\r\n <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\r\n <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\r\n @if (selectedColumns) {\r\n @for (column of selectedColumns; track $index){\r\n <td>\r\n <div class=\"flex flex-col gap-2\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\r\n (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\r\n [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n </lib-inline-input>\r\n\r\n </ng-template>\r\n <ng-template #output>\r\n\r\n @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n 'USD' }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n </div>\r\n } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n <div class=\"text-left\">\r\n {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[column.field]?.name) {\r\n {{ item.rowData[column.field]?.name }}\r\n } @else {\r\n {{ item.rowData[column.field] }}\r\n }\r\n }\r\n\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n\r\n @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\r\n <span class=\"text-red-500 italic text-xs\">{{\r\n rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\r\n '' }}</span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n } @else {\r\n @for (key of keys(); track $index){\r\n <td>\r\n <div class=\"flex flex-col gap-2\">\r\n <p-cellEditor>\r\n <ng-template #input>\r\n <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n </lib-inline-input>\r\n </ng-template>\r\n <ng-template #output>\r\n\r\n @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n </div>\r\n }\r\n @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n <div class=\"text-right\">\r\n {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n </div>\r\n } @else {\r\n @if (item.rowData[key]?.name) {\r\n {{ item.rowData[key]?.name }}\r\n } @else {\r\n {{ item.rowData[key] }}\r\n }\r\n }\r\n\r\n\r\n </ng-template>\r\n </p-cellEditor>\r\n\r\n @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\r\n <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\r\n '' }}</span>\r\n }\r\n </div>\r\n </td>\r\n }\r\n }\r\n <td>\r\n <div class=\"flex justify-center items-center gap-2\">\r\n @if(!editing){\r\n <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\r\n @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n }\r\n }\r\n @if(editing){\r\n @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\r\n }\r\n @else {\r\n <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\r\n }\r\n <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n }\r\n }\r\n } @else {\r\n\r\n <ng-template #body let-item let-expanded=\"expanded\">\r\n <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\r\n 'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\r\n 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\r\n 'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\r\n 'skeleton-row': item.isLoading\r\n }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n @if (rowExpansionConfig?.isEnabled) {\r\n <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\r\n [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n @if (!item.isLoading) {\r\n <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n [pRowToggler]=\"item\"></lib-button-ng>\r\n } @else {\r\n <div class=\"skeleton-content\"></div>\r\n }\r\n </td>\r\n }\r\n\r\n @if (selectionTableConfig?.isEnabled) {\r\n <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\r\n [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n @if (!item.isLoading) {\r\n <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\r\n } @else {\r\n <div class=\"skeleton-content\"></div>\r\n }\r\n </td>\r\n }\r\n\r\n @for (key of keys(); track $index) {\r\n @if (isThatItemInTheProductSelection(key)) {\r\n <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\r\n 'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n 'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\r\n 'skeleton-cell': item.isLoading\r\n }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\r\n @if (item.isLoading) {\r\n <div class=\"skeleton-content\"></div>\r\n } @else {\r\n @if (item.rowDataButtons?.[key]) {\r\n <div class=\"flex gap-4 w-full justify-center items-center\">\r\n @for (btn of item.rowDataButtons[key]; track $index) {\r\n @if (btn) {\r\n <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n @switch (item.typeCell?.[key]) {\r\n @case (ETypeInput.IMAGE) {\r\n <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\r\n }\r\n @case (ETypeInput.DATE) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n }\r\n @case (ETypeInput.DATETIME_LOCAL) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n }\r\n @case (ETypeInput.CURRENCY) {\r\n {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\r\n item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n }\r\n @case (ETypeInput.BADGE) {\r\n <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\r\n }\r\n @case (ETypeInput.COMPONENT) {\r\n <ng-container\r\n *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n }\r\n @default {\r\n @if (isDate(item.rowData[key])) {\r\n {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n } @else if (typeof item.rowData[key] === \"string\") {\r\n {{ item.rowData[key] }}\r\n } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n {{ item.rowData[key].name }}\r\n } @else if(typeof item.rowData[key] === \"number\") {\r\n <p class=\"text-right\">\r\n {{ item.rowData[key] | number: '1.2-2' }}\r\n </p>\r\n }\r\n }\r\n }\r\n }\r\n }\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </ng-template>\r\n }\r\n }\r\n\r\n <ng-template #footer>\r\n @if (footerEnabled) {\r\n @for (row of footerRows; track $index) {\r\n <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n @for (cell of row; track $index) {\r\n <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n applyPipe(cell.value,\r\n cell.pipeConfig) }}</td>\r\n\r\n }\r\n </tr>\r\n }\r\n\r\n }\r\n </ng-template>\r\n <ng-template #expandedrow let-item>\r\n <tr>\r\n <td colspan=\"100%\">\r\n <div class=\"p-datatable-row-expansion\">\r\n <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n @if (showBottomToolbar()) {\r\n <div class=\"p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n <lib-toolbar-ng>\r\n @if (showManagementSelectionConfig()) {\r\n <div toolbarStart\r\n class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\r\n <span class=\"font-medium text-gray-700\">{{ getSelectedItemsLabel() }}</span>\r\n <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n <span class=\"font-semibold text-gray-900\">{{\r\n totalItemsSelected().toLocaleString()\r\n }}</span>\r\n </div>\r\n <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\r\n <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\r\n </div>\r\n }\r\n </lib-toolbar-ng>\r\n </div>\r\n }\r\n</div>\r\n@if (httpMessage()) {\r\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
3100
- }], ctorParameters: () => [], propDecorators: { dt: [{
3101
- type: ViewChild,
3102
- args: ['dt']
3103
- }], itemTemplate: [{
3104
- type: ContentChild,
3105
- args: ['item', { static: true }]
3106
- }] } });
3107
-
3108
- /*
3109
- * Public API Surface of lib-components
3110
-
3111
- NPM TOKEN:
3112
- 4f5f941cb6703a2bea326507bd5098aa7dd8224ef4d9b434f6209c73855bf7ac
3113
- 8b61ac2dab0cf90c13878339c755b09f868b34906ad196a1138433f76f41feb4
3114
- 37b8f0500846352a33a9d1e2a8504e8a4332cd035a3819d9dc4b2dcdf557c3f0
3115
- 31f1ccdf0a47736bd3851647d485385323328542c49de9d95498d875e3977f5e
3116
- de13d65e8a0357ce9f2e18c899c8e7f6f728181baa031761ecdd7ef5cb166eb2
3117
- */
3118
-
3119
- /**
3120
- * Generated bundle index. Do not edit.
3121
- */
3122
-
3123
- export { BaseDialogComponent as B, ETypeInput as E, FormComponent as F, InlineInputComponent as I, LibComponentsService as L, TableNgComponent as T, ButtonNgComponent as a, LibComponentsComponent as b };
3124
- //# sourceMappingURL=ln-20-lib-components-ln-20-lib-components-cBRcSsDx.mjs.map