ui-core-abv 0.1.1 → 0.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ui-core-abv.mjs +116 -87
- package/fesm2022/ui-core-abv.mjs.map +1 -1
- package/lib/components/dynamic-form/base-value-accessot.d.ts +2 -0
- package/lib/components/dynamic-form/form-wrapper/form-wrapper.component.d.ts +16 -13
- package/lib/components/dynamic-form/form.models.d.ts +0 -1
- package/lib/components/inputs/checkbox/checkbox.component.d.ts +5 -2
- package/lib/components/inputs/date-picker/date-picker.component.d.ts +5 -2
- package/lib/components/inputs/select/select.component.d.ts +5 -2
- package/lib/components/inputs/ui-slider/ui-slider.component.d.ts +4 -1
- package/package.json +1 -1
package/fesm2022/ui-core-abv.mjs
CHANGED
|
@@ -3,7 +3,7 @@ import { CommonModule, DatePipe, AsyncPipe } from '@angular/common';
|
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { Input, Component, EventEmitter, Output, Directive, forwardRef, inject, ViewContainerRef, ElementRef, ViewChild, HostListener, Pipe, createComponent, Injectable, Injector, Inject, EnvironmentInjector } from '@angular/core';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
6
|
-
import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormBuilder,
|
|
6
|
+
import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormBuilder, Validators } from '@angular/forms';
|
|
7
7
|
import * as i1$1 from '@angular/cdk/overlay';
|
|
8
8
|
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
|
|
9
9
|
import * as i1$2 from '@angular/cdk/portal';
|
|
@@ -54,7 +54,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
54
54
|
function createValueAccessor() {
|
|
55
55
|
class BaseValueAccessor {
|
|
56
56
|
value;
|
|
57
|
+
_disabled = false;
|
|
57
58
|
valueChange = new EventEmitter();
|
|
59
|
+
get disabled() {
|
|
60
|
+
return this._disabled;
|
|
61
|
+
}
|
|
62
|
+
set disabled(value) {
|
|
63
|
+
this._disabled = value;
|
|
64
|
+
}
|
|
58
65
|
onChange = () => { };
|
|
59
66
|
onTouched = () => { };
|
|
60
67
|
writeValue(obj) {
|
|
@@ -67,7 +74,7 @@ function createValueAccessor() {
|
|
|
67
74
|
this.onTouched = fn;
|
|
68
75
|
}
|
|
69
76
|
setDisabledState(isDisabled) {
|
|
70
|
-
|
|
77
|
+
this._disabled = isDisabled;
|
|
71
78
|
}
|
|
72
79
|
notifyChange(value) {
|
|
73
80
|
this.value = value;
|
|
@@ -76,14 +83,18 @@ function createValueAccessor() {
|
|
|
76
83
|
this.onTouched();
|
|
77
84
|
}
|
|
78
85
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
79
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BaseValueAccessor, isStandalone: true, inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0 });
|
|
86
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BaseValueAccessor, isStandalone: true, inputs: { value: "value", _disabled: "_disabled", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0 });
|
|
80
87
|
}
|
|
81
88
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseValueAccessor, decorators: [{
|
|
82
89
|
type: Directive
|
|
83
90
|
}], propDecorators: { value: [{
|
|
84
91
|
type: Input
|
|
92
|
+
}], _disabled: [{
|
|
93
|
+
type: Input
|
|
85
94
|
}], valueChange: [{
|
|
86
95
|
type: Output
|
|
96
|
+
}], disabled: [{
|
|
97
|
+
type: Input
|
|
87
98
|
}] } });
|
|
88
99
|
return BaseValueAccessor;
|
|
89
100
|
}
|
|
@@ -96,15 +107,16 @@ class UicCheckboxComponent extends base$3 {
|
|
|
96
107
|
tip = '';
|
|
97
108
|
type = 'check';
|
|
98
109
|
placeholder = '';
|
|
99
|
-
disabled = false;
|
|
100
110
|
loading = false;
|
|
111
|
+
set disabled(value) { super.disabled = value; }
|
|
112
|
+
get disabled() { return super.disabled; }
|
|
101
113
|
toggle() {
|
|
102
114
|
if (!this.disabled && !this.loading) {
|
|
103
115
|
this.notifyChange(!this.value);
|
|
104
116
|
}
|
|
105
117
|
}
|
|
106
118
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicCheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { icon: "icon", iconColor: "iconColor", label: "label", tip: "tip", type: "type", placeholder: "placeholder",
|
|
119
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicCheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { icon: "icon", iconColor: "iconColor", label: "label", tip: "tip", type: "type", placeholder: "placeholder", loading: "loading", disabled: "disabled" }, providers: [
|
|
108
120
|
{
|
|
109
121
|
provide: NG_VALUE_ACCESSOR,
|
|
110
122
|
useExisting: forwardRef(() => UicCheckboxComponent),
|
|
@@ -133,10 +145,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
133
145
|
type: Input
|
|
134
146
|
}], placeholder: [{
|
|
135
147
|
type: Input
|
|
136
|
-
}], disabled: [{
|
|
137
|
-
type: Input
|
|
138
148
|
}], loading: [{
|
|
139
149
|
type: Input
|
|
150
|
+
}], disabled: [{
|
|
151
|
+
type: Input
|
|
140
152
|
}] } });
|
|
141
153
|
|
|
142
154
|
class UicSwichComponent {
|
|
@@ -182,9 +194,10 @@ class UicSelectComponent extends base$2 {
|
|
|
182
194
|
showSubtitle = false;
|
|
183
195
|
emptyText = '- Seleccionar -';
|
|
184
196
|
// FUNCTIONS
|
|
185
|
-
disabled = false;
|
|
186
197
|
nullable = false;
|
|
187
198
|
options = [];
|
|
199
|
+
set disabled(value) { super.disabled = value; }
|
|
200
|
+
get disabled() { return super.disabled; }
|
|
188
201
|
dropdownTemplate;
|
|
189
202
|
overlayRef;
|
|
190
203
|
overlayPositions = [
|
|
@@ -244,7 +257,7 @@ class UicSelectComponent extends base$2 {
|
|
|
244
257
|
this.selectedOption = this.options.find(opt => opt.id === value) ?? null;
|
|
245
258
|
}
|
|
246
259
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
247
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSelectComponent, isStandalone: true, selector: "ui-select", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", showSubtitle: "showSubtitle",
|
|
260
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSelectComponent, isStandalone: true, selector: "ui-select", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", showSubtitle: "showSubtitle", nullable: "nullable", options: "options", disabled: "disabled" }, providers: [
|
|
248
261
|
{
|
|
249
262
|
provide: NG_VALUE_ACCESSOR,
|
|
250
263
|
useExisting: forwardRef(() => UicSelectComponent),
|
|
@@ -277,12 +290,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
277
290
|
type: Input
|
|
278
291
|
}], showSubtitle: [{
|
|
279
292
|
type: Input
|
|
280
|
-
}], disabled: [{
|
|
281
|
-
type: Input
|
|
282
293
|
}], nullable: [{
|
|
283
294
|
type: Input
|
|
284
295
|
}], options: [{
|
|
285
296
|
type: Input
|
|
297
|
+
}], disabled: [{
|
|
298
|
+
type: Input
|
|
286
299
|
}], dropdownTemplate: [{
|
|
287
300
|
type: ViewChild,
|
|
288
301
|
args: ['dropdownTemplate']
|
|
@@ -346,7 +359,8 @@ class UicSliderComponent extends base$1 {
|
|
|
346
359
|
step = 1;
|
|
347
360
|
markerCount = 0;
|
|
348
361
|
markers = [];
|
|
349
|
-
disabled =
|
|
362
|
+
set disabled(value) { super.disabled = value; }
|
|
363
|
+
get disabled() { return super.disabled; }
|
|
350
364
|
loading = false;
|
|
351
365
|
ngOnInit() {
|
|
352
366
|
if (this.markerCount > 1) {
|
|
@@ -445,9 +459,10 @@ class UicDatePickerComponent extends base {
|
|
|
445
459
|
error = '';
|
|
446
460
|
tip = '';
|
|
447
461
|
// FUNCTIONS
|
|
448
|
-
disabled = false;
|
|
449
462
|
max = '';
|
|
450
463
|
min = '';
|
|
464
|
+
set disabled(value) { super.disabled = value; }
|
|
465
|
+
get disabled() { return super.disabled; }
|
|
451
466
|
calendarTemplate;
|
|
452
467
|
overlayRef;
|
|
453
468
|
// Fijos
|
|
@@ -502,6 +517,7 @@ class UicDatePickerComponent extends base {
|
|
|
502
517
|
}
|
|
503
518
|
closeCalendar() {
|
|
504
519
|
if (this.overlayRef) {
|
|
520
|
+
this.onTouched();
|
|
505
521
|
this.overlayRef.dispose();
|
|
506
522
|
this.overlayRef = null;
|
|
507
523
|
}
|
|
@@ -653,7 +669,7 @@ class UicDatePickerComponent extends base {
|
|
|
653
669
|
this.closeCalendar();
|
|
654
670
|
}
|
|
655
671
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
656
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDatePickerComponent, isStandalone: true, selector: "ui-date-picker", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", label: "label", error: "error", tip: "tip",
|
|
672
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDatePickerComponent, isStandalone: true, selector: "ui-date-picker", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", label: "label", error: "error", tip: "tip", max: "max", min: "min", disabled: "disabled" }, providers: [
|
|
657
673
|
{
|
|
658
674
|
provide: NG_VALUE_ACCESSOR,
|
|
659
675
|
useExisting: forwardRef(() => UicDatePickerComponent),
|
|
@@ -682,12 +698,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
682
698
|
type: Input
|
|
683
699
|
}], tip: [{
|
|
684
700
|
type: Input
|
|
685
|
-
}], disabled: [{
|
|
686
|
-
type: Input
|
|
687
701
|
}], max: [{
|
|
688
702
|
type: Input
|
|
689
703
|
}], min: [{
|
|
690
704
|
type: Input
|
|
705
|
+
}], disabled: [{
|
|
706
|
+
type: Input
|
|
691
707
|
}], calendarTemplate: [{
|
|
692
708
|
type: ViewChild,
|
|
693
709
|
args: ['calendarTemplate']
|
|
@@ -721,12 +737,12 @@ class UicDynamicFormComponent {
|
|
|
721
737
|
pattern: (_err, field) => `${field.label ?? field.name} no tiene el formato correcto.`
|
|
722
738
|
};
|
|
723
739
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
724
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", disabled: "disabled", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\">\r\n \r\n @if ( ['text','number'].includes(field.type) ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"
|
|
740
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", disabled: "disabled", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\">\r\n \r\n @if ( ['text','number'].includes(field.type) ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [tip]=\"field.tip??''\" >\r\n <input \r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [placeholder]=\"field.placeholder??field.label\"/>\r\n </ui-input>\r\n\r\n }\r\n @else if (field.type === 'date') {\r\n <ui-date-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n ></ui-date-picker>\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n @else if (field.type === 'checkbox') {\r\n <ui-checkbox\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [tip]=\"field.tip??''\"\r\n ></ui-checkbox>\r\n }\r\n @else if (field.type === 'slider') {\r\n <ui-slider\r\n [min]=\"field.min??0\"\r\n [max]=\"field.max??100\"\r\n [step]=\"field.sliderInterval??1\"\r\n [markerCount]=\"field.sliderMarks??5\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n ></ui-slider>\r\n }\r\n @else if (field.type === 'switch') {\r\n <ui-checkbox\r\n type=\"switch\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [formControlName]=\"field.name\"\r\n [tip]=\"field.tip??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n >\r\n </ui-checkbox>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "label", "error", "tip", "max", "min", "disabled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "nullable", "options", "disabled"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "disabled"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
725
741
|
}
|
|
726
742
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
|
|
727
743
|
type: Component,
|
|
728
744
|
args: [{ selector: 'ui-dynamic-form', imports: [CommonModule, UicDatePickerComponent,
|
|
729
|
-
ReactiveFormsModule, UicSliderComponent, UicSelectComponent, UicInputComponent, UicCheckboxComponent, FormsModule], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\">\r\n \r\n @if ( ['text','number'].includes(field.type) ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"
|
|
745
|
+
ReactiveFormsModule, UicSliderComponent, UicSelectComponent, UicInputComponent, UicCheckboxComponent, FormsModule], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\">\r\n \r\n @if ( ['text','number'].includes(field.type) ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [tip]=\"field.tip??''\" >\r\n <input \r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [placeholder]=\"field.placeholder??field.label\"/>\r\n </ui-input>\r\n\r\n }\r\n @else if (field.type === 'date') {\r\n <ui-date-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n ></ui-date-picker>\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n @else if (field.type === 'checkbox') {\r\n <ui-checkbox\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [tip]=\"field.tip??''\"\r\n ></ui-checkbox>\r\n }\r\n @else if (field.type === 'slider') {\r\n <ui-slider\r\n [min]=\"field.min??0\"\r\n [max]=\"field.max??100\"\r\n [step]=\"field.sliderInterval??1\"\r\n [markerCount]=\"field.sliderMarks??5\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n ></ui-slider>\r\n }\r\n @else if (field.type === 'switch') {\r\n <ui-checkbox\r\n type=\"switch\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [formControlName]=\"field.name\"\r\n [tip]=\"field.tip??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n >\r\n </ui-checkbox>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}\n"] }]
|
|
730
746
|
}], propDecorators: { fields: [{
|
|
731
747
|
type: Input
|
|
732
748
|
}], form: [{
|
|
@@ -759,68 +775,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
759
775
|
}] } });
|
|
760
776
|
|
|
761
777
|
class UicFormWrapperComponent {
|
|
778
|
+
fb = inject(FormBuilder);
|
|
779
|
+
form = this.fb.group({});
|
|
780
|
+
useSteps = false;
|
|
781
|
+
currentStep = 0;
|
|
762
782
|
schema;
|
|
763
783
|
externalData = {};
|
|
764
784
|
loading = false;
|
|
785
|
+
disabled = false;
|
|
765
786
|
initialValues = {};
|
|
766
|
-
useSteps = false;
|
|
767
787
|
formSubmit = new EventEmitter();
|
|
768
|
-
|
|
769
|
-
form = this.fb.group({});
|
|
770
|
-
currentStep = 0;
|
|
788
|
+
formChange = new EventEmitter();
|
|
771
789
|
ngOnChanges(changes) {
|
|
790
|
+
if (changes['disabled']) {
|
|
791
|
+
this.updateDisabledState();
|
|
792
|
+
}
|
|
772
793
|
if (changes['schema']) {
|
|
773
|
-
this.
|
|
794
|
+
this.handleNgOnChange();
|
|
774
795
|
}
|
|
775
796
|
if (changes['externalData']) {
|
|
776
|
-
this.updateExtenalData();
|
|
777
|
-
this.
|
|
797
|
+
this.updateExtenalData(); // Agrega OPTIOS lazy a los SELECT
|
|
798
|
+
this.handleNgOnChange(); // BUILD FORM
|
|
778
799
|
}
|
|
779
800
|
}
|
|
780
|
-
|
|
801
|
+
handleNgOnChange() {
|
|
781
802
|
this.buildForm();
|
|
782
803
|
this.useSteps = !!this.schema?.steps?.length;
|
|
783
804
|
if (this.useSteps && this.schema?.steps) {
|
|
784
805
|
this.currentStep = Math.min(this.currentStep, this.schema.steps.length - 1);
|
|
785
806
|
}
|
|
786
807
|
}
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
808
|
+
buildForm() {
|
|
809
|
+
const fields = this.collectAllFields();
|
|
810
|
+
const newForm = this.fb.group({});
|
|
811
|
+
fields.forEach(f => {
|
|
812
|
+
const validators = this.mapValidatorsFromField(f);
|
|
813
|
+
let initial = this.initialValues[f.name] ?? null;
|
|
814
|
+
if ((f.type === 'checkbox' || f.type === 'switch') && initial == null)
|
|
815
|
+
initial = false;
|
|
816
|
+
if (f.type === 'slider' && initial == null)
|
|
817
|
+
initial = f.min ?? 0;
|
|
818
|
+
const controlState = {
|
|
819
|
+
value: initial,
|
|
820
|
+
disabled: !!f.disabled || !!this.disabled
|
|
821
|
+
};
|
|
822
|
+
newForm.addControl(f.name, this.fb.control(controlState, validators));
|
|
823
|
+
});
|
|
824
|
+
this.form = newForm;
|
|
825
|
+
}
|
|
826
|
+
updateDisabledState() {
|
|
827
|
+
if (this.disabled) {
|
|
828
|
+
this.form.disable();
|
|
790
829
|
}
|
|
791
830
|
else {
|
|
792
|
-
|
|
793
|
-
this.form.markAllAsTouched();
|
|
794
|
-
this.formSubmit.emit({ result: false, form: null });
|
|
831
|
+
this.form.enable();
|
|
795
832
|
}
|
|
796
833
|
}
|
|
797
|
-
collectAllFields() {
|
|
798
|
-
if (!this.schema)
|
|
799
|
-
return [];
|
|
800
|
-
if (this.useSteps && this.schema.steps) {
|
|
801
|
-
return this.schema.steps.flatMap(step => (step.blocks ?? []).flatMap(b => b.fields ?? []));
|
|
802
|
-
}
|
|
803
|
-
return (this.schema.blocks ?? []).flatMap(b => b.fields ?? []);
|
|
804
|
-
}
|
|
805
|
-
logFormErrors(form, parentKey = '') {
|
|
806
|
-
Object.keys(form.controls).forEach(key => {
|
|
807
|
-
const control = form.get(key);
|
|
808
|
-
const controlPath = parentKey ? `${parentKey}.${key}` : key;
|
|
809
|
-
if (control instanceof FormGroup || control instanceof FormArray) {
|
|
810
|
-
// Recursión para anidar grupos
|
|
811
|
-
this.logFormErrors(control, controlPath);
|
|
812
|
-
}
|
|
813
|
-
else if (control?.errors) {
|
|
814
|
-
console.warn(`❌ Errores en [${controlPath}]:`, control.errors);
|
|
815
|
-
}
|
|
816
|
-
});
|
|
817
|
-
}
|
|
818
834
|
updateExtenalData() {
|
|
835
|
+
if (!this.externalData)
|
|
836
|
+
return;
|
|
819
837
|
if (this.useSteps) {
|
|
820
838
|
this.schema.steps?.forEach(step => {
|
|
821
|
-
step.blocks.forEach(block => {
|
|
822
|
-
block.fields = this.updateFieldOptions(block);
|
|
823
|
-
});
|
|
839
|
+
step.blocks.forEach(block => { block.fields = this.updateFieldOptions(block); });
|
|
824
840
|
});
|
|
825
841
|
}
|
|
826
842
|
else {
|
|
@@ -829,34 +845,6 @@ class UicFormWrapperComponent {
|
|
|
829
845
|
});
|
|
830
846
|
}
|
|
831
847
|
}
|
|
832
|
-
updateFieldOptions(block) {
|
|
833
|
-
return block.fields.map(f => {
|
|
834
|
-
if (f.type === 'select') {
|
|
835
|
-
let options = f.options ?? [];
|
|
836
|
-
Object.keys(this.externalData).forEach(key => {
|
|
837
|
-
if (key === f.name) {
|
|
838
|
-
options = this.externalData[key] ?? [];
|
|
839
|
-
}
|
|
840
|
-
});
|
|
841
|
-
return { ...f, options: options };
|
|
842
|
-
}
|
|
843
|
-
return f;
|
|
844
|
-
});
|
|
845
|
-
}
|
|
846
|
-
buildForm() {
|
|
847
|
-
const fields = this.collectAllFields();
|
|
848
|
-
const newForm = this.fb.group({});
|
|
849
|
-
fields.forEach(f => {
|
|
850
|
-
const validators = this.mapValidatorsFromField(f);
|
|
851
|
-
let initial = this.initialValues[f.name] ?? null;
|
|
852
|
-
if ((f.type === 'checkbox' || f.type === 'switch') && initial == null)
|
|
853
|
-
initial = false;
|
|
854
|
-
if (f.type === 'slider' && initial == null)
|
|
855
|
-
initial = f.min ?? 0;
|
|
856
|
-
newForm.addControl(f.name, this.fb.control(initial, validators));
|
|
857
|
-
});
|
|
858
|
-
this.form = newForm;
|
|
859
|
-
}
|
|
860
848
|
mapValidatorsFromField(f) {
|
|
861
849
|
const validators = [];
|
|
862
850
|
if (f.required)
|
|
@@ -873,6 +861,43 @@ class UicFormWrapperComponent {
|
|
|
873
861
|
validators.push(Validators.pattern(f.pattern));
|
|
874
862
|
return validators;
|
|
875
863
|
}
|
|
864
|
+
// FUNCIONES
|
|
865
|
+
handleSubmit() {
|
|
866
|
+
if (this.form.valid) {
|
|
867
|
+
this.formSubmit.emit({ result: true, form: this.form.value });
|
|
868
|
+
}
|
|
869
|
+
else {
|
|
870
|
+
this.form.markAllAsTouched();
|
|
871
|
+
this.formSubmit.emit({ result: false, form: null });
|
|
872
|
+
}
|
|
873
|
+
}
|
|
874
|
+
handleFormChange() {
|
|
875
|
+
this.formChange.emit(this.form.value);
|
|
876
|
+
}
|
|
877
|
+
// UTILITARIOS
|
|
878
|
+
updateFieldOptions(block) {
|
|
879
|
+
return block.fields.map(f => {
|
|
880
|
+
if (f.type === 'select') {
|
|
881
|
+
let options = f.options ?? [];
|
|
882
|
+
Object.keys(this.externalData).forEach(key => {
|
|
883
|
+
if (key === f.name) {
|
|
884
|
+
options = this.externalData[key] ?? [];
|
|
885
|
+
}
|
|
886
|
+
});
|
|
887
|
+
return { ...f, options: options };
|
|
888
|
+
}
|
|
889
|
+
return f;
|
|
890
|
+
});
|
|
891
|
+
}
|
|
892
|
+
collectAllFields() {
|
|
893
|
+
if (!this.schema)
|
|
894
|
+
return [];
|
|
895
|
+
if (this.useSteps && this.schema.steps) {
|
|
896
|
+
return this.schema.steps.flatMap(step => (step.blocks ?? []).flatMap(b => b.fields ?? []));
|
|
897
|
+
}
|
|
898
|
+
return (this.schema.blocks ?? []).flatMap(b => b.fields ?? []);
|
|
899
|
+
}
|
|
900
|
+
// STEP MANAGEMENT
|
|
876
901
|
getCurrentBlocks() {
|
|
877
902
|
if (!this.schema)
|
|
878
903
|
return [];
|
|
@@ -897,21 +922,25 @@ class UicFormWrapperComponent {
|
|
|
897
922
|
return this.schema.steps?.[this.currentStep]?.title ?? '';
|
|
898
923
|
}
|
|
899
924
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
900
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", externalData: "externalData", loading: "loading", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n @if (useSteps) {\r\n @if (schema.steps?.length) {\r\n <div class=\"step-title\">{{ getStepTitle()}}</div>\r\n @if (loading) {\r\n <ui-skeleton-loader\r\n [cols]=\"schema.cols\"\r\n [inputs]=\"(schema.steps?.[currentStep]?.blocks?.[0]?.fields?.length) ?? 0\"\r\n ></ui-skeleton-loader>\r\n } \r\n @else {\r\n @for (block of getCurrentBlocks(); track block.title) {\r\n <section class=\"form-block\">\r\n @if (block.title) {\r\n <div class=\"block-title\">{{ block.title }}</div>\r\n }\r\n <ui-dynamic-form\r\n [cols]=\"schema.cols\"\r\n [fields]=\"block.fields\"\r\n [
|
|
925
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", externalData: "externalData", loading: "loading", disabled: "disabled", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n @if (useSteps) {\r\n @if (schema.steps?.length) {\r\n <div class=\"step-title\">{{ getStepTitle()}}</div>\r\n @if (loading) {\r\n <ui-skeleton-loader\r\n [cols]=\"schema.cols\"\r\n [inputs]=\"(schema.steps?.[currentStep]?.blocks?.[0]?.fields?.length) ?? 0\"\r\n ></ui-skeleton-loader>\r\n } \r\n @else {\r\n @for (block of getCurrentBlocks(); track block.title) {\r\n <section class=\"form-block\">\r\n @if (block.title) {\r\n <div class=\"block-title\">{{ block.title }}</div>\r\n }\r\n <ui-dynamic-form\r\n [cols]=\"schema.cols\"\r\n [fields]=\"block.fields\"\r\n [form]=\"form\">\r\n </ui-dynamic-form>\r\n </section>\r\n }\r\n }\r\n <div class=\"step-controls\">\r\n <button type=\"button\" (click)=\"prevStep()\" [disabled]=\"currentStep === 0\">Anterior</button>\r\n @if ((schema.steps?.length ?? 0) > 0 && currentStep < ((schema.steps?.length ?? 1) - 1)) {\r\n <button type=\"button\" (click)=\"nextStep()\">Siguiente</button>\r\n } @else {\r\n <button type=\"submit\">Guardar</button>\r\n }\r\n </div>\r\n } \r\n } \r\n @else {\r\n @for (block of getCurrentBlocks(); track block.title) {\r\n <section class=\"form-block\">\r\n @if (block.title){\r\n <div class=\"block-title\">{{ block.title }}</div>\r\n }\r\n @if (loading) {\r\n <ui-skeleton-loader\r\n [cols]=\"schema.cols\"\r\n [inputs]=\"block.fields.length\"\r\n ></ui-skeleton-loader>\r\n } @else {\r\n <ui-dynamic-form\r\n [cols]=\"schema.cols\"\r\n [fields]=\"block.fields\"\r\n [form]=\"form\">\r\n </ui-dynamic-form>\r\n }\r\n </section>\r\n }\r\n }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form", "disabled", "cols"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
901
926
|
}
|
|
902
927
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, decorators: [{
|
|
903
928
|
type: Component,
|
|
904
|
-
args: [{ selector: 'ui-form-wrapper', imports: [UicDynamicFormComponent, UicSkeletonLoaderComponent, ReactiveFormsModule], template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n @if (useSteps) {\r\n @if (schema.steps?.length) {\r\n <div class=\"step-title\">{{ getStepTitle()}}</div>\r\n @if (loading) {\r\n <ui-skeleton-loader\r\n [cols]=\"schema.cols\"\r\n [inputs]=\"(schema.steps?.[currentStep]?.blocks?.[0]?.fields?.length) ?? 0\"\r\n ></ui-skeleton-loader>\r\n } \r\n @else {\r\n @for (block of getCurrentBlocks(); track block.title) {\r\n <section class=\"form-block\">\r\n @if (block.title) {\r\n <div class=\"block-title\">{{ block.title }}</div>\r\n }\r\n <ui-dynamic-form\r\n [cols]=\"schema.cols\"\r\n [fields]=\"block.fields\"\r\n [
|
|
929
|
+
args: [{ selector: 'ui-form-wrapper', imports: [UicDynamicFormComponent, UicSkeletonLoaderComponent, ReactiveFormsModule], template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n @if (useSteps) {\r\n @if (schema.steps?.length) {\r\n <div class=\"step-title\">{{ getStepTitle()}}</div>\r\n @if (loading) {\r\n <ui-skeleton-loader\r\n [cols]=\"schema.cols\"\r\n [inputs]=\"(schema.steps?.[currentStep]?.blocks?.[0]?.fields?.length) ?? 0\"\r\n ></ui-skeleton-loader>\r\n } \r\n @else {\r\n @for (block of getCurrentBlocks(); track block.title) {\r\n <section class=\"form-block\">\r\n @if (block.title) {\r\n <div class=\"block-title\">{{ block.title }}</div>\r\n }\r\n <ui-dynamic-form\r\n [cols]=\"schema.cols\"\r\n [fields]=\"block.fields\"\r\n [form]=\"form\">\r\n </ui-dynamic-form>\r\n </section>\r\n }\r\n }\r\n <div class=\"step-controls\">\r\n <button type=\"button\" (click)=\"prevStep()\" [disabled]=\"currentStep === 0\">Anterior</button>\r\n @if ((schema.steps?.length ?? 0) > 0 && currentStep < ((schema.steps?.length ?? 1) - 1)) {\r\n <button type=\"button\" (click)=\"nextStep()\">Siguiente</button>\r\n } @else {\r\n <button type=\"submit\">Guardar</button>\r\n }\r\n </div>\r\n } \r\n } \r\n @else {\r\n @for (block of getCurrentBlocks(); track block.title) {\r\n <section class=\"form-block\">\r\n @if (block.title){\r\n <div class=\"block-title\">{{ block.title }}</div>\r\n }\r\n @if (loading) {\r\n <ui-skeleton-loader\r\n [cols]=\"schema.cols\"\r\n [inputs]=\"block.fields.length\"\r\n ></ui-skeleton-loader>\r\n } @else {\r\n <ui-dynamic-form\r\n [cols]=\"schema.cols\"\r\n [fields]=\"block.fields\"\r\n [form]=\"form\">\r\n </ui-dynamic-form>\r\n }\r\n </section>\r\n }\r\n }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}\n"] }]
|
|
905
930
|
}], propDecorators: { schema: [{
|
|
906
931
|
type: Input
|
|
907
932
|
}], externalData: [{
|
|
908
933
|
type: Input
|
|
909
934
|
}], loading: [{
|
|
910
935
|
type: Input
|
|
936
|
+
}], disabled: [{
|
|
937
|
+
type: Input
|
|
911
938
|
}], initialValues: [{
|
|
912
939
|
type: Input
|
|
913
940
|
}], formSubmit: [{
|
|
914
941
|
type: Output
|
|
942
|
+
}], formChange: [{
|
|
943
|
+
type: Output
|
|
915
944
|
}] } });
|
|
916
945
|
|
|
917
946
|
class UicSearcherComponent {
|
|
@@ -1461,7 +1490,7 @@ class UicTableComponent {
|
|
|
1461
1490
|
this.checkedChange.emit([]);
|
|
1462
1491
|
}
|
|
1463
1492
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1464
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", striped: "striped", showPagination: "showPagination", showEmptyMessage: "showEmptyMessage", emptyMessage: "emptyMessage" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher (filter)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n }\r\n <div class=\"filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n }\r\n <div class=\"table-container\"> \r\n <table [class.striped]=\"striped\">\r\n <thead>\r\n <tr>\r\n @for (header of columns; track $index) {\r\n <th>\r\n <div class=\"th-wrap\">{{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div (click)=\"sortClick(header.key)\" [ngClass]=\"{'sort-active':header.key == sortKey}\">\r\n <i [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n </div>\r\n }\r\n @if (header.type=='checkbox') {\r\n <ui-checkbox [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n }\r\n </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(squeletonRows); track $index) {\r\n <tr class=\"\">\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"row-loader\"></div> </td>\r\n }\r\n </tr> \r\n }\r\n } @else {\r\n @for (row of data; track row.id) {\r\n <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\" [class.tr-highlighted]=\"row.highlighted\">\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\">\r\n @if (header.type == 'text') {\r\n {{ getValue(row.data,header.key) }} \r\n }\r\n @if (header.type == 'icon-list') {\r\n <div class=\"table-icon-wrap\">\r\n @for (alert of getList(row.data,header.key); track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' alert'\" ></i>\r\n }\r\n </div>\r\n }\r\n @else if (header.type == 'list'){\r\n <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list> \r\n }\r\n @else if (header.type == 'user'){\r\n <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [ngModel]=\"checkedIds.has(row.id)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else if (header.type == 'actions') { \r\n <div class=\"table-actions\">\r\n @for (btn of header.actions; track $index) {\r\n @if (isValidRule(row.data,btn.rule)) {\r\n <ui-button \r\n [disabled]=\"loading\"\r\n [tip]=\"btn.tooltip??''\"\r\n size=\"s\"\r\n [iconOnly]=\"btn.text==null\"\r\n [text]=\"btn.text??''\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color\"\r\n (click)=\"doAction(row.id,btn.key)\">\r\n </ui-button> \r\n }\r\n } \r\n </div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }@empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"empty\">{{emptyMessage}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [size]=\"size\"\r\n [buttonSize]=\"buttonSize\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}table{width:100%;font-weight:400}table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500;color:var(--table-header-color);background-color:var(--table-header-background)}table th .th-wrap{white-space:nowrap;display:flex;align-items:center;justify-content:center}table th .th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}table th .th-wrap div:hover{color:var(--primary-500)}table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}table td,table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border-bottom:solid 1px var(--table-border-color)}table tr{transition:ease .3s}table tr:hover{background-color:var(--grey-50)}.table-container{width:100%;overflow-x:auto}.table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.table-actions{display:flex;gap:2px}.table-icon-wrap{display:flex;justify-content:center;gap:8px;font-size:18px;margin-right:5px}.loader-tr{border-bottom:none!important}.loader-tr td{padding:0}.sort-active{color:var(--secondary-500)!important;border:solid 1px}.empty{text-align:center;color:var(--grey-300)}.table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.filter-actions{display:flex;gap:8px}.alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.tr-highlighted{border-left:solid 6px var(--green-500)}.trc-primary{color:var(--primary-500)}.trc-red{color:var(--red-500)}.trc-blue{color:var(--blue-500)}.trc-green{color:var(--green-500)}.trc-yellow{color:var(--yellow-500)}.trc-black{color:var(--grey-900)}.trc-grey{color:var(--grey-300)}.row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown"], outputs: ["filter"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
|
|
1493
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", striped: "striped", showPagination: "showPagination", showEmptyMessage: "showEmptyMessage", emptyMessage: "emptyMessage" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher (filter)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n }\r\n <div class=\"filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n }\r\n <div class=\"table-container\"> \r\n <table [class.striped]=\"striped\">\r\n <thead>\r\n <tr>\r\n @for (header of columns; track $index) {\r\n <th>\r\n <div class=\"th-wrap\">{{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div (click)=\"sortClick(header.key)\" [ngClass]=\"{'sort-active':header.key == sortKey}\">\r\n <i [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n </div>\r\n }\r\n @if (header.type=='checkbox') {\r\n <ui-checkbox [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n }\r\n </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(squeletonRows); track $index) {\r\n <tr class=\"\">\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"row-loader\"></div> </td>\r\n }\r\n </tr> \r\n }\r\n } @else {\r\n @for (row of data; track row.id) {\r\n <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\" [class.tr-highlighted]=\"row.highlighted\">\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\">\r\n @if (header.type == 'text') {\r\n {{ getValue(row.data,header.key) }} \r\n }\r\n @if (header.type == 'icon-list') {\r\n <div class=\"table-icon-wrap\">\r\n @for (alert of getList(row.data,header.key); track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' alert'\" ></i>\r\n }\r\n </div>\r\n }\r\n @else if (header.type == 'list'){\r\n <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list> \r\n }\r\n @else if (header.type == 'user'){\r\n <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [ngModel]=\"checkedIds.has(row.id)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else if (header.type == 'actions') { \r\n <div class=\"table-actions\">\r\n @for (btn of header.actions; track $index) {\r\n @if (isValidRule(row.data,btn.rule)) {\r\n <ui-button \r\n [disabled]=\"loading\"\r\n [tip]=\"btn.tooltip??''\"\r\n size=\"s\"\r\n [iconOnly]=\"btn.text==null\"\r\n [text]=\"btn.text??''\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color\"\r\n (click)=\"doAction(row.id,btn.key)\">\r\n </ui-button> \r\n }\r\n } \r\n </div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }@empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"empty\">{{emptyMessage}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [size]=\"size\"\r\n [buttonSize]=\"buttonSize\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}table{width:100%;font-weight:400}table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500;color:var(--table-header-color);background-color:var(--table-header-background)}table th .th-wrap{white-space:nowrap;display:flex;align-items:center;justify-content:center}table th .th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}table th .th-wrap div:hover{color:var(--primary-500)}table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}table td,table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border-bottom:solid 1px var(--table-border-color)}table tr{transition:ease .3s}table tr:hover{background-color:var(--grey-50)}.table-container{width:100%;overflow-x:auto}.table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.table-actions{display:flex;gap:2px}.table-icon-wrap{display:flex;justify-content:center;gap:8px;font-size:18px;margin-right:5px}.loader-tr{border-bottom:none!important}.loader-tr td{padding:0}.sort-active{color:var(--secondary-500)!important;border:solid 1px}.empty{text-align:center;color:var(--grey-300)}.table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.filter-actions{display:flex;gap:8px}.alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.tr-highlighted{border-left:solid 6px var(--green-500)}.trc-primary{color:var(--primary-500)}.trc-red{color:var(--red-500)}.trc-blue{color:var(--blue-500)}.trc-green{color:var(--green-500)}.trc-yellow{color:var(--yellow-500)}.trc-black{color:var(--grey-900)}.trc-grey{color:var(--grey-300)}.row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown"], outputs: ["filter"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
|
|
1465
1494
|
}
|
|
1466
1495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, decorators: [{
|
|
1467
1496
|
type: Component,
|