ui-core-abv 0.1.12 → 0.1.14
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 +13 -28
- package/fesm2022/ui-core-abv.mjs.map +1 -1
- package/lib/components/dynamic-form/base-value-accessot.d.ts +0 -2
- package/lib/components/inputs/checkbox/checkbox.component.d.ts +1 -4
- package/lib/components/inputs/date-picker/date-picker.component.d.ts +2 -5
- package/lib/components/inputs/select/select.component.d.ts +2 -5
- package/lib/components/inputs/ui-slider/ui-slider.component.d.ts +1 -4
- package/package.json +1 -1
package/fesm2022/ui-core-abv.mjs
CHANGED
|
@@ -54,14 +54,7 @@ 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;
|
|
58
57
|
valueChange = new EventEmitter();
|
|
59
|
-
get disabled() {
|
|
60
|
-
return this._disabled;
|
|
61
|
-
}
|
|
62
|
-
set disabled(value) {
|
|
63
|
-
this._disabled = value;
|
|
64
|
-
}
|
|
65
58
|
onChange = () => { };
|
|
66
59
|
onTouched = () => { };
|
|
67
60
|
writeValue(obj) {
|
|
@@ -74,7 +67,7 @@ function createValueAccessor() {
|
|
|
74
67
|
this.onTouched = fn;
|
|
75
68
|
}
|
|
76
69
|
setDisabledState(isDisabled) {
|
|
77
|
-
this.
|
|
70
|
+
this.disabled = isDisabled;
|
|
78
71
|
}
|
|
79
72
|
notifyChange(value) {
|
|
80
73
|
this.value = value;
|
|
@@ -83,18 +76,14 @@ function createValueAccessor() {
|
|
|
83
76
|
this.onTouched();
|
|
84
77
|
}
|
|
85
78
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
86
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BaseValueAccessor, isStandalone: true, inputs: { value: "value"
|
|
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 });
|
|
87
80
|
}
|
|
88
81
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseValueAccessor, decorators: [{
|
|
89
82
|
type: Directive
|
|
90
83
|
}], propDecorators: { value: [{
|
|
91
84
|
type: Input
|
|
92
|
-
}], _disabled: [{
|
|
93
|
-
type: Input
|
|
94
85
|
}], valueChange: [{
|
|
95
86
|
type: Output
|
|
96
|
-
}], disabled: [{
|
|
97
|
-
type: Input
|
|
98
87
|
}] } });
|
|
99
88
|
return BaseValueAccessor;
|
|
100
89
|
}
|
|
@@ -108,8 +97,7 @@ class UicCheckboxComponent extends base$3 {
|
|
|
108
97
|
type = 'check';
|
|
109
98
|
placeholder = '';
|
|
110
99
|
loading = false;
|
|
111
|
-
|
|
112
|
-
set disabled(value) { super.disabled = value; }
|
|
100
|
+
disabled = false;
|
|
113
101
|
toggle() {
|
|
114
102
|
if (!this.disabled && !this.loading) {
|
|
115
103
|
this.notifyChange(!this.value);
|
|
@@ -192,12 +180,11 @@ class UicSelectComponent extends base$2 {
|
|
|
192
180
|
error = '';
|
|
193
181
|
tip = '';
|
|
194
182
|
showSubtitle = false;
|
|
183
|
+
disabled = false;
|
|
195
184
|
emptyText = '- Seleccionar -';
|
|
196
185
|
// FUNCTIONS
|
|
197
186
|
nullable = false;
|
|
198
187
|
options = [];
|
|
199
|
-
get disabled() { return super.disabled; }
|
|
200
|
-
set disabled(value) { super.disabled = value; }
|
|
201
188
|
dropdownTemplate;
|
|
202
189
|
overlayRef;
|
|
203
190
|
overlayPositions = [
|
|
@@ -257,7 +244,7 @@ class UicSelectComponent extends base$2 {
|
|
|
257
244
|
this.selectedOption = this.options.find(opt => opt.id === value) ?? null;
|
|
258
245
|
}
|
|
259
246
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
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",
|
|
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", disabled: "disabled", nullable: "nullable", options: "options" }, providers: [
|
|
261
248
|
{
|
|
262
249
|
provide: NG_VALUE_ACCESSOR,
|
|
263
250
|
useExisting: forwardRef(() => UicSelectComponent),
|
|
@@ -290,12 +277,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
290
277
|
type: Input
|
|
291
278
|
}], showSubtitle: [{
|
|
292
279
|
type: Input
|
|
280
|
+
}], disabled: [{
|
|
281
|
+
type: Input
|
|
293
282
|
}], nullable: [{
|
|
294
283
|
type: Input
|
|
295
284
|
}], options: [{
|
|
296
285
|
type: Input
|
|
297
|
-
}], disabled: [{
|
|
298
|
-
type: Input
|
|
299
286
|
}], dropdownTemplate: [{
|
|
300
287
|
type: ViewChild,
|
|
301
288
|
args: ['dropdownTemplate']
|
|
@@ -359,8 +346,7 @@ class UicSliderComponent extends base$1 {
|
|
|
359
346
|
step = 1;
|
|
360
347
|
markerCount = 0;
|
|
361
348
|
markers = [];
|
|
362
|
-
|
|
363
|
-
set disabled(value) { super.disabled = value; }
|
|
349
|
+
disabled = false;
|
|
364
350
|
loading = false;
|
|
365
351
|
ngOnInit() {
|
|
366
352
|
if (this.markerCount > 1) {
|
|
@@ -454,6 +440,7 @@ class UicDatePickerComponent extends base {
|
|
|
454
440
|
icon = ''; // Icono externo
|
|
455
441
|
iconColor = 'black';
|
|
456
442
|
internalIcon = ''; //Icono interno
|
|
443
|
+
disabled = false;
|
|
457
444
|
// TEXTO
|
|
458
445
|
label = '';
|
|
459
446
|
error = '';
|
|
@@ -461,8 +448,6 @@ class UicDatePickerComponent extends base {
|
|
|
461
448
|
// FUNCTIONS
|
|
462
449
|
max = '';
|
|
463
450
|
min = '';
|
|
464
|
-
get disabled() { return super.disabled; }
|
|
465
|
-
set disabled(value) { super.disabled = value; }
|
|
466
451
|
calendarTemplate;
|
|
467
452
|
overlayRef;
|
|
468
453
|
// Fijos
|
|
@@ -669,7 +654,7 @@ class UicDatePickerComponent extends base {
|
|
|
669
654
|
this.closeCalendar();
|
|
670
655
|
}
|
|
671
656
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
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"
|
|
657
|
+
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", disabled: "disabled", label: "label", error: "error", tip: "tip", max: "max", min: "min" }, providers: [
|
|
673
658
|
{
|
|
674
659
|
provide: NG_VALUE_ACCESSOR,
|
|
675
660
|
useExisting: forwardRef(() => UicDatePickerComponent),
|
|
@@ -692,6 +677,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
692
677
|
type: Input
|
|
693
678
|
}], internalIcon: [{
|
|
694
679
|
type: Input
|
|
680
|
+
}], disabled: [{
|
|
681
|
+
type: Input
|
|
695
682
|
}], label: [{
|
|
696
683
|
type: Input
|
|
697
684
|
}], error: [{
|
|
@@ -702,8 +689,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
702
689
|
type: Input
|
|
703
690
|
}], min: [{
|
|
704
691
|
type: Input
|
|
705
|
-
}], disabled: [{
|
|
706
|
-
type: Input
|
|
707
692
|
}], calendarTemplate: [{
|
|
708
693
|
type: ViewChild,
|
|
709
694
|
args: ['calendarTemplate']
|
|
@@ -737,7 +722,7 @@ class UicDynamicFormComponent {
|
|
|
737
722
|
pattern: (_err, field) => `${field.label ?? field.name} no tiene el formato correcto.`
|
|
738
723
|
};
|
|
739
724
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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"
|
|
725
|
+
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", "disabled", "label", "error", "tip", "max", "min"] }, { 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", "disabled", "nullable", "options"] }, { 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 }] });
|
|
741
726
|
}
|
|
742
727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
|
|
743
728
|
type: Component,
|