ui-core-abv 0.1.0 → 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 +126 -98
- 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/dynamic-form.component.d.ts +2 -1
- package/lib/components/dynamic-form/form-wrapper/form-wrapper.component.d.ts +18 -16
- package/lib/components/dynamic-form/form.models.d.ts +2 -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,21 +107,22 @@ 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),
|
|
111
123
|
multi: true
|
|
112
124
|
}
|
|
113
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\">\r\n {{label}} \r\n </div>\r\n }\r\n <div class=\"check-form-container\">\r\n <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n @if (type=='check') {\r\n <button\r\n type=\"button\"\r\n class=\"checkbox\"\r\n [disabled]=\"disabled\"\r\n [class.checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle()\"\r\n >\r\n <span class=\"icon\">\r\n @if (value) {\r\n \u2714\r\n }@else {\r\n \u2212\r\n }\r\n </span>\r\n </button>\r\n }@else{\r\n <button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"thumb\"></span>\r\n </button>\r\n } \r\n {{placeholder}}\r\n </div>\r\n </div>\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n", styles: [".check-form-container{height:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-wrapper button{margin-right:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--grey-
|
|
125
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\">\r\n {{label}} \r\n </div>\r\n }\r\n <div class=\"check-form-container\">\r\n <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n @if (type=='check') {\r\n <button\r\n type=\"button\"\r\n class=\"checkbox\"\r\n [disabled]=\"disabled\"\r\n [class.checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle()\"\r\n >\r\n <span class=\"icon\">\r\n @if (value) {\r\n \u2714\r\n }@else {\r\n \u2212\r\n }\r\n </span>\r\n </button>\r\n }@else{\r\n <button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"thumb\"></span>\r\n </button>\r\n } \r\n {{placeholder}}\r\n </div>\r\n </div>\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n", styles: [".check-form-container{height:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-wrapper button{margin-right:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--grey-200);border-color:var(--grey-200);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}.toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] });
|
|
114
126
|
}
|
|
115
127
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicCheckboxComponent, decorators: [{
|
|
116
128
|
type: Component,
|
|
@@ -120,7 +132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
120
132
|
useExisting: forwardRef(() => UicCheckboxComponent),
|
|
121
133
|
multi: true
|
|
122
134
|
}
|
|
123
|
-
], template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\">\r\n {{label}} \r\n </div>\r\n }\r\n <div class=\"check-form-container\">\r\n <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n @if (type=='check') {\r\n <button\r\n type=\"button\"\r\n class=\"checkbox\"\r\n [disabled]=\"disabled\"\r\n [class.checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle()\"\r\n >\r\n <span class=\"icon\">\r\n @if (value) {\r\n \u2714\r\n }@else {\r\n \u2212\r\n }\r\n </span>\r\n </button>\r\n }@else{\r\n <button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"thumb\"></span>\r\n </button>\r\n } \r\n {{placeholder}}\r\n </div>\r\n </div>\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n", styles: [".check-form-container{height:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-wrapper button{margin-right:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--grey-
|
|
135
|
+
], template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\">\r\n {{label}} \r\n </div>\r\n }\r\n <div class=\"check-form-container\">\r\n <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n @if (type=='check') {\r\n <button\r\n type=\"button\"\r\n class=\"checkbox\"\r\n [disabled]=\"disabled\"\r\n [class.checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"toggle()\"\r\n >\r\n <span class=\"icon\">\r\n @if (value) {\r\n \u2714\r\n }@else {\r\n \u2212\r\n }\r\n </span>\r\n </button>\r\n }@else{\r\n <button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n >\r\n <span class=\"thumb\"></span>\r\n </button>\r\n } \r\n {{placeholder}}\r\n </div>\r\n </div>\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n", styles: [".check-form-container{height:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-wrapper button{margin-right:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--grey-200);border-color:var(--grey-200);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}.toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
|
|
124
136
|
}], propDecorators: { icon: [{
|
|
125
137
|
type: Input
|
|
126
138
|
}], iconColor: [{
|
|
@@ -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) {
|
|
@@ -394,7 +408,7 @@ class UicSliderComponent extends base$1 {
|
|
|
394
408
|
useExisting: forwardRef(() => UicSliderComponent),
|
|
395
409
|
multi: true
|
|
396
410
|
}
|
|
397
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\">\r\n {{label}} \r\n </div>\r\n }\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider\" #track\r\n (click)=\"updateFromClientX($event.clientX, track)\">\r\n <!-- barra -->\r\n <div class=\"slider-track\"></div>\r\n <div class=\"slider-filled\" [style.width.%]=\"percent\"></div>\r\n \r\n <!-- thumb -->\r\n <div class=\"slider-thumb\"\r\n [style.left.%]=\"percent\"\r\n (mousedown)=\"onMouseDown($event, track)\"\r\n #thumb>\r\n <div class=\"slider-thumb-legend\">{{value}}</div>\r\n </div>\r\n \r\n <!-- markers -->\r\n <div class=\"slider-markers\">\r\n @for(m of markers; track $index){\r\n <div class=\"marker\" \r\n [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n {{ m }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".slider-wrapper{width:100%;padding:0 8px 10px;height:calc(4 * var(--form-ref));display:flex;align-items:center}.slider{position:relative;width:100%;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:12px;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] });
|
|
411
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\">\r\n {{label}} \r\n </div>\r\n }\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider\" #track\r\n (click)=\"updateFromClientX($event.clientX, track)\">\r\n <!-- barra -->\r\n <div class=\"slider-track\"></div>\r\n <div class=\"slider-filled\" [style.width.%]=\"percent\"></div>\r\n \r\n <!-- thumb -->\r\n <div class=\"slider-thumb\"\r\n [style.left.%]=\"percent\"\r\n [class.disabled-thumb]=\"disabled\"\r\n (mousedown)=\"onMouseDown($event, track)\"\r\n #thumb>\r\n <div class=\"slider-thumb-legend\">{{value}}</div>\r\n </div>\r\n \r\n <!-- markers -->\r\n <div class=\"slider-markers\">\r\n @for(m of markers; track $index){\r\n <div class=\"marker\" \r\n [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n {{ m }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".slider-wrapper{width:100%;padding:0 8px 10px;height:calc(4 * var(--form-ref));display:flex;align-items:center}.slider{position:relative;width:100%;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:enabled:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:12px;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}.disabled-thumb{border-color:var(--grey-300)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] });
|
|
398
412
|
}
|
|
399
413
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSliderComponent, decorators: [{
|
|
400
414
|
type: Component,
|
|
@@ -404,7 +418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
404
418
|
useExisting: forwardRef(() => UicSliderComponent),
|
|
405
419
|
multi: true
|
|
406
420
|
}
|
|
407
|
-
], template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\">\r\n {{label}} \r\n </div>\r\n }\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider\" #track\r\n (click)=\"updateFromClientX($event.clientX, track)\">\r\n <!-- barra -->\r\n <div class=\"slider-track\"></div>\r\n <div class=\"slider-filled\" [style.width.%]=\"percent\"></div>\r\n \r\n <!-- thumb -->\r\n <div class=\"slider-thumb\"\r\n [style.left.%]=\"percent\"\r\n (mousedown)=\"onMouseDown($event, track)\"\r\n #thumb>\r\n <div class=\"slider-thumb-legend\">{{value}}</div>\r\n </div>\r\n \r\n <!-- markers -->\r\n <div class=\"slider-markers\">\r\n @for(m of markers; track $index){\r\n <div class=\"marker\" \r\n [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n {{ m }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".slider-wrapper{width:100%;padding:0 8px 10px;height:calc(4 * var(--form-ref));display:flex;align-items:center}.slider{position:relative;width:100%;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:12px;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
|
|
421
|
+
], template: "<div class=\"input-wrapper\">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\">\r\n {{label}} \r\n </div>\r\n }\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider\" #track\r\n (click)=\"updateFromClientX($event.clientX, track)\">\r\n <!-- barra -->\r\n <div class=\"slider-track\"></div>\r\n <div class=\"slider-filled\" [style.width.%]=\"percent\"></div>\r\n \r\n <!-- thumb -->\r\n <div class=\"slider-thumb\"\r\n [style.left.%]=\"percent\"\r\n [class.disabled-thumb]=\"disabled\"\r\n (mousedown)=\"onMouseDown($event, track)\"\r\n #thumb>\r\n <div class=\"slider-thumb-legend\">{{value}}</div>\r\n </div>\r\n \r\n <!-- markers -->\r\n <div class=\"slider-markers\">\r\n @for(m of markers; track $index){\r\n <div class=\"marker\" \r\n [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n {{ m }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".slider-wrapper{width:100%;padding:0 8px 10px;height:calc(4 * var(--form-ref));display:flex;align-items:center}.slider{position:relative;width:100%;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:enabled:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:12px;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}.disabled-thumb{border-color:var(--grey-300)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--grey-400)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--grey-200);color:var(--red-500)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.t-disabled{color:var(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-100);color:var(--grey-400)}.disabledinput ::ng-deep input{color:var(--grey-800)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
|
|
408
422
|
}], propDecorators: { icon: [{
|
|
409
423
|
type: Input
|
|
410
424
|
}], iconColor: [{
|
|
@@ -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']
|
|
@@ -696,6 +712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
696
712
|
class UicDynamicFormComponent {
|
|
697
713
|
fields = [];
|
|
698
714
|
form;
|
|
715
|
+
disabled = false;
|
|
699
716
|
flag = false;
|
|
700
717
|
cols = 2;
|
|
701
718
|
// MANEJO DE ERRORES
|
|
@@ -720,17 +737,19 @@ class UicDynamicFormComponent {
|
|
|
720
737
|
pattern: (_err, field) => `${field.label ?? field.name} no tiene el formato correcto.`
|
|
721
738
|
};
|
|
722
739
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
723
|
-
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", 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 [tip]=\"field.tip??''\"
|
|
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 }] });
|
|
724
741
|
}
|
|
725
742
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
|
|
726
743
|
type: Component,
|
|
727
744
|
args: [{ selector: 'ui-dynamic-form', imports: [CommonModule, UicDatePickerComponent,
|
|
728
|
-
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 [tip]=\"field.tip??''\"
|
|
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"] }]
|
|
729
746
|
}], propDecorators: { fields: [{
|
|
730
747
|
type: Input
|
|
731
748
|
}], form: [{
|
|
732
749
|
type: Input,
|
|
733
750
|
args: [{ required: true }]
|
|
751
|
+
}], disabled: [{
|
|
752
|
+
type: Input
|
|
734
753
|
}], cols: [{
|
|
735
754
|
type: Input
|
|
736
755
|
}] } });
|
|
@@ -756,72 +775,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
756
775
|
}] } });
|
|
757
776
|
|
|
758
777
|
class UicFormWrapperComponent {
|
|
778
|
+
fb = inject(FormBuilder);
|
|
779
|
+
form = this.fb.group({});
|
|
780
|
+
useSteps = false;
|
|
781
|
+
currentStep = 0;
|
|
759
782
|
schema;
|
|
760
783
|
externalData = {};
|
|
761
784
|
loading = false;
|
|
785
|
+
disabled = false;
|
|
762
786
|
initialValues = {};
|
|
763
|
-
useSteps = false;
|
|
764
787
|
formSubmit = new EventEmitter();
|
|
765
|
-
|
|
766
|
-
form = this.fb.group({});
|
|
767
|
-
currentStep = 0;
|
|
768
|
-
ngOnInit() {
|
|
769
|
-
this.buildForm();
|
|
770
|
-
this.useSteps = !!this.schema.steps && this.schema.steps.length > 0;
|
|
771
|
-
}
|
|
788
|
+
formChange = new EventEmitter();
|
|
772
789
|
ngOnChanges(changes) {
|
|
790
|
+
if (changes['disabled']) {
|
|
791
|
+
this.updateDisabledState();
|
|
792
|
+
}
|
|
773
793
|
if (changes['schema']) {
|
|
774
|
-
this.
|
|
794
|
+
this.handleNgOnChange();
|
|
775
795
|
}
|
|
776
|
-
if (changes['externalData']
|
|
777
|
-
this.updateExtenalData();
|
|
778
|
-
this.
|
|
796
|
+
if (changes['externalData']) {
|
|
797
|
+
this.updateExtenalData(); // Agrega OPTIOS lazy a los SELECT
|
|
798
|
+
this.handleNgOnChange(); // BUILD FORM
|
|
779
799
|
}
|
|
780
800
|
}
|
|
781
|
-
|
|
801
|
+
handleNgOnChange() {
|
|
782
802
|
this.buildForm();
|
|
783
803
|
this.useSteps = !!this.schema?.steps?.length;
|
|
784
804
|
if (this.useSteps && this.schema?.steps) {
|
|
785
805
|
this.currentStep = Math.min(this.currentStep, this.schema.steps.length - 1);
|
|
786
806
|
}
|
|
787
807
|
}
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
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();
|
|
791
829
|
}
|
|
792
830
|
else {
|
|
793
|
-
|
|
794
|
-
this.form.markAllAsTouched();
|
|
795
|
-
this.formSubmit.emit({ result: false, form: null });
|
|
796
|
-
}
|
|
797
|
-
}
|
|
798
|
-
collectAllFields() {
|
|
799
|
-
if (!this.schema)
|
|
800
|
-
return [];
|
|
801
|
-
if (this.useSteps && this.schema.steps) {
|
|
802
|
-
return this.schema.steps.flatMap(step => (step.blocks ?? []).flatMap(b => b.fields ?? []));
|
|
831
|
+
this.form.enable();
|
|
803
832
|
}
|
|
804
|
-
return (this.schema.blocks ?? []).flatMap(b => b.fields ?? []);
|
|
805
|
-
}
|
|
806
|
-
logFormErrors(form, parentKey = '') {
|
|
807
|
-
Object.keys(form.controls).forEach(key => {
|
|
808
|
-
const control = form.get(key);
|
|
809
|
-
const controlPath = parentKey ? `${parentKey}.${key}` : key;
|
|
810
|
-
if (control instanceof FormGroup || control instanceof FormArray) {
|
|
811
|
-
// Recursión para anidar grupos
|
|
812
|
-
this.logFormErrors(control, controlPath);
|
|
813
|
-
}
|
|
814
|
-
else if (control?.errors) {
|
|
815
|
-
console.warn(`❌ Errores en [${controlPath}]:`, control.errors);
|
|
816
|
-
}
|
|
817
|
-
});
|
|
818
833
|
}
|
|
819
834
|
updateExtenalData() {
|
|
835
|
+
if (!this.externalData)
|
|
836
|
+
return;
|
|
820
837
|
if (this.useSteps) {
|
|
821
838
|
this.schema.steps?.forEach(step => {
|
|
822
|
-
step.blocks.forEach(block => {
|
|
823
|
-
block.fields = this.updateFieldOptions(block);
|
|
824
|
-
});
|
|
839
|
+
step.blocks.forEach(block => { block.fields = this.updateFieldOptions(block); });
|
|
825
840
|
});
|
|
826
841
|
}
|
|
827
842
|
else {
|
|
@@ -830,34 +845,6 @@ class UicFormWrapperComponent {
|
|
|
830
845
|
});
|
|
831
846
|
}
|
|
832
847
|
}
|
|
833
|
-
updateFieldOptions(block) {
|
|
834
|
-
return block.fields.map(f => {
|
|
835
|
-
if (f.type === 'select') {
|
|
836
|
-
let options = f.options ?? [];
|
|
837
|
-
Object.keys(this.externalData).forEach(key => {
|
|
838
|
-
if (key === f.name) {
|
|
839
|
-
options = this.externalData[key] ?? [];
|
|
840
|
-
}
|
|
841
|
-
});
|
|
842
|
-
return { ...f, options: options };
|
|
843
|
-
}
|
|
844
|
-
return f;
|
|
845
|
-
});
|
|
846
|
-
}
|
|
847
|
-
buildForm() {
|
|
848
|
-
const fields = this.collectAllFields();
|
|
849
|
-
const newForm = this.fb.group({});
|
|
850
|
-
fields.forEach(f => {
|
|
851
|
-
const validators = this.mapValidatorsFromField(f);
|
|
852
|
-
let initial = this.initialValues[f.name] ?? null;
|
|
853
|
-
if ((f.type === 'checkbox' || f.type === 'switch') && initial == null)
|
|
854
|
-
initial = false;
|
|
855
|
-
if (f.type === 'slider' && initial == null)
|
|
856
|
-
initial = f.min ?? 0;
|
|
857
|
-
newForm.addControl(f.name, this.fb.control(initial, validators));
|
|
858
|
-
});
|
|
859
|
-
this.form = newForm;
|
|
860
|
-
}
|
|
861
848
|
mapValidatorsFromField(f) {
|
|
862
849
|
const validators = [];
|
|
863
850
|
if (f.required)
|
|
@@ -874,6 +861,43 @@ class UicFormWrapperComponent {
|
|
|
874
861
|
validators.push(Validators.pattern(f.pattern));
|
|
875
862
|
return validators;
|
|
876
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
|
|
877
901
|
getCurrentBlocks() {
|
|
878
902
|
if (!this.schema)
|
|
879
903
|
return [];
|
|
@@ -898,21 +922,25 @@ class UicFormWrapperComponent {
|
|
|
898
922
|
return this.schema.steps?.[this.currentStep]?.title ?? '';
|
|
899
923
|
}
|
|
900
924
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
901
|
-
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
|
|
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"] }] });
|
|
902
926
|
}
|
|
903
927
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, decorators: [{
|
|
904
928
|
type: Component,
|
|
905
|
-
args: [{ selector: 'ui-form-wrapper', imports: [UicDynamicFormComponent, UicSkeletonLoaderComponent, ReactiveFormsModule], template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\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"] }]
|
|
906
930
|
}], propDecorators: { schema: [{
|
|
907
931
|
type: Input
|
|
908
932
|
}], externalData: [{
|
|
909
933
|
type: Input
|
|
910
934
|
}], loading: [{
|
|
911
935
|
type: Input
|
|
936
|
+
}], disabled: [{
|
|
937
|
+
type: Input
|
|
912
938
|
}], initialValues: [{
|
|
913
939
|
type: Input
|
|
914
940
|
}], formSubmit: [{
|
|
915
941
|
type: Output
|
|
942
|
+
}], formChange: [{
|
|
943
|
+
type: Output
|
|
916
944
|
}] } });
|
|
917
945
|
|
|
918
946
|
class UicSearcherComponent {
|
|
@@ -1462,7 +1490,7 @@ class UicTableComponent {
|
|
|
1462
1490
|
this.checkedChange.emit([]);
|
|
1463
1491
|
}
|
|
1464
1492
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1465
|
-
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] });
|
|
1466
1494
|
}
|
|
1467
1495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, decorators: [{
|
|
1468
1496
|
type: Component,
|
|
@@ -1540,11 +1568,11 @@ class UiAlertComponent {
|
|
|
1540
1568
|
this.closeAlert.emit(this.id);
|
|
1541
1569
|
}
|
|
1542
1570
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1543
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UiAlertComponent, isStandalone: true, selector: "ui-alert", inputs: { alert: "alert" }, outputs: { closeAlert: "closeAlert" }, ngImport: i0, template: "<div [class]=\"'alert ' + alert.type + ' ' + (alert.style??'filled')\" >\r\n @if (alert.showProgressBar) {\r\n <div class=\"alert-process\">\r\n <div class=\"alert-process-bar\" [style.width.%]=\"progressValue\"></div>\r\n </div>\r\n }\r\n <div class=\"alert-body\">\r\n <button class=\"close\" (click)=\"close()\"> \u2715 </button>\r\n @if (alert.icon) {\r\n <i [class]=\"'highlighted ' + alert.icon\"></i>\r\n }\r\n <div>\r\n <div class=\"toast-title highlighted\">{{alert.title}}</div>\r\n <div class=\"toast-body\">{{alert.message}}</div>\r\n @if ( alert.okButtonText || alert.cancelButtonText){\r\n <div class=\"toast-buttons \">\r\n @if ( alert.okButtonText ) {\r\n <button style=\"font-weight: 500;\">{{alert.okButtonText}}</button>\r\n }\r\n @if ( alert.cancelButtonText ){\r\n <button (click)=\"close()\">{{alert.cancelButtonText}}</button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".alert{display:flex;flex-direction:column;min-width:250px;max-width:
|
|
1571
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UiAlertComponent, isStandalone: true, selector: "ui-alert", inputs: { alert: "alert" }, outputs: { closeAlert: "closeAlert" }, ngImport: i0, template: "<div [class]=\"'alert ' + alert.type + ' ' + (alert.style??'filled')\" >\r\n @if (alert.showProgressBar) {\r\n <div class=\"alert-process\">\r\n <div class=\"alert-process-bar\" [style.width.%]=\"progressValue\"></div>\r\n </div>\r\n }\r\n <div class=\"alert-body\">\r\n <button class=\"close\" (click)=\"close()\"> \u2715 </button>\r\n @if (alert.icon) {\r\n <i [class]=\"'highlighted ' + alert.icon\"></i>\r\n }\r\n <div>\r\n <div class=\"toast-title highlighted\">{{alert.title}}</div>\r\n <div class=\"toast-body\">{{alert.message}}</div>\r\n @if ( alert.okButtonText || alert.cancelButtonText){\r\n <div class=\"toast-buttons \">\r\n @if ( alert.okButtonText ) {\r\n <button style=\"font-weight: 500;\">{{alert.okButtonText}}</button>\r\n }\r\n @if ( alert.cancelButtonText ){\r\n <button (click)=\"close()\">{{alert.cancelButtonText}}</button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".alert{display:flex;flex-direction:column;min-width:250px;max-width:calc(var(--design-size-ref) * 45);overflow:hidden;animation:fadeIn .3s ease;border-radius:calc(var(--border-radius-md) * 1.5)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert-process{width:100%;height:2px;background-color:#0000004f;display:flex}.alert-process-bar{background-color:#ffffff69;height:2px}.alert-body{position:relative;padding:calc(var(--design-size-ref) * 1.5);display:flex;padding-right:calc(var(--design-size-ref) * 3)}.alert-body i{font-size:20;width:22px;height:22px;margin-right:calc(var(--design-size-ref) * 1.2)}.toast-title{font-weight:500;font-size:16px;line-height:24px}.toast-body{font-weight:400;font-size:14px;line-height:20px}.toast-buttons{margin-top:calc(var(--design-size-ref) * 1.5);display:flex;gap:calc(var(--design-size-ref) * 1.5)}.toast-buttons button{color:var(--white);border:none;background-color:transparent;font-size:calc(var(--design-size-ref) * 1.5);line-height:calc(var(--design-size-ref) * 2);padding:0}.toast-buttons button:hover{text-decoration:underline;cursor:pointer}.close{background:transparent;border:none;color:inherit;font-size:calc(var(--design-size-ref) * 1.5);cursor:pointer;position:absolute;right:5px;top:5px}.filled{color:var(--white)}.filled.success{background:var(--green-600)}.filled.error{background:var(--red-600)}.filled.warning{background:var(--yellow-600)}.filled.info{background:var(--blue-600)}.bordered{border:solid 1px;color:var(--grey-500)}.bordered.success{border-color:var(--green-600);background:var(--green-100)}.bordered.success .highlighted,.bordered.success button{color:var(--green-600)}.bordered.error{border-color:var(--red-600);background:var(--red-100)}.bordered.error .highlighted,.bordered.error button{color:var(--red-600)}.bordered.warning{border-color:var(--yellow-600);background:var(--yellow-100)}.bordered.warning .highlighted,.bordered.warning button{color:var(--yellow-600)}.bordered.info{border-color:var(--blue-600);background:var(--blue-100)}.bordered.info .highlighted,.bordered.info button{color:var(--blue-600)}\n"] });
|
|
1544
1572
|
}
|
|
1545
1573
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiAlertComponent, decorators: [{
|
|
1546
1574
|
type: Component,
|
|
1547
|
-
args: [{ selector: 'ui-alert', imports: [], template: "<div [class]=\"'alert ' + alert.type + ' ' + (alert.style??'filled')\" >\r\n @if (alert.showProgressBar) {\r\n <div class=\"alert-process\">\r\n <div class=\"alert-process-bar\" [style.width.%]=\"progressValue\"></div>\r\n </div>\r\n }\r\n <div class=\"alert-body\">\r\n <button class=\"close\" (click)=\"close()\"> \u2715 </button>\r\n @if (alert.icon) {\r\n <i [class]=\"'highlighted ' + alert.icon\"></i>\r\n }\r\n <div>\r\n <div class=\"toast-title highlighted\">{{alert.title}}</div>\r\n <div class=\"toast-body\">{{alert.message}}</div>\r\n @if ( alert.okButtonText || alert.cancelButtonText){\r\n <div class=\"toast-buttons \">\r\n @if ( alert.okButtonText ) {\r\n <button style=\"font-weight: 500;\">{{alert.okButtonText}}</button>\r\n }\r\n @if ( alert.cancelButtonText ){\r\n <button (click)=\"close()\">{{alert.cancelButtonText}}</button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".alert{display:flex;flex-direction:column;min-width:250px;max-width:
|
|
1575
|
+
args: [{ selector: 'ui-alert', imports: [], template: "<div [class]=\"'alert ' + alert.type + ' ' + (alert.style??'filled')\" >\r\n @if (alert.showProgressBar) {\r\n <div class=\"alert-process\">\r\n <div class=\"alert-process-bar\" [style.width.%]=\"progressValue\"></div>\r\n </div>\r\n }\r\n <div class=\"alert-body\">\r\n <button class=\"close\" (click)=\"close()\"> \u2715 </button>\r\n @if (alert.icon) {\r\n <i [class]=\"'highlighted ' + alert.icon\"></i>\r\n }\r\n <div>\r\n <div class=\"toast-title highlighted\">{{alert.title}}</div>\r\n <div class=\"toast-body\">{{alert.message}}</div>\r\n @if ( alert.okButtonText || alert.cancelButtonText){\r\n <div class=\"toast-buttons \">\r\n @if ( alert.okButtonText ) {\r\n <button style=\"font-weight: 500;\">{{alert.okButtonText}}</button>\r\n }\r\n @if ( alert.cancelButtonText ){\r\n <button (click)=\"close()\">{{alert.cancelButtonText}}</button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".alert{display:flex;flex-direction:column;min-width:250px;max-width:calc(var(--design-size-ref) * 45);overflow:hidden;animation:fadeIn .3s ease;border-radius:calc(var(--border-radius-md) * 1.5)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert-process{width:100%;height:2px;background-color:#0000004f;display:flex}.alert-process-bar{background-color:#ffffff69;height:2px}.alert-body{position:relative;padding:calc(var(--design-size-ref) * 1.5);display:flex;padding-right:calc(var(--design-size-ref) * 3)}.alert-body i{font-size:20;width:22px;height:22px;margin-right:calc(var(--design-size-ref) * 1.2)}.toast-title{font-weight:500;font-size:16px;line-height:24px}.toast-body{font-weight:400;font-size:14px;line-height:20px}.toast-buttons{margin-top:calc(var(--design-size-ref) * 1.5);display:flex;gap:calc(var(--design-size-ref) * 1.5)}.toast-buttons button{color:var(--white);border:none;background-color:transparent;font-size:calc(var(--design-size-ref) * 1.5);line-height:calc(var(--design-size-ref) * 2);padding:0}.toast-buttons button:hover{text-decoration:underline;cursor:pointer}.close{background:transparent;border:none;color:inherit;font-size:calc(var(--design-size-ref) * 1.5);cursor:pointer;position:absolute;right:5px;top:5px}.filled{color:var(--white)}.filled.success{background:var(--green-600)}.filled.error{background:var(--red-600)}.filled.warning{background:var(--yellow-600)}.filled.info{background:var(--blue-600)}.bordered{border:solid 1px;color:var(--grey-500)}.bordered.success{border-color:var(--green-600);background:var(--green-100)}.bordered.success .highlighted,.bordered.success button{color:var(--green-600)}.bordered.error{border-color:var(--red-600);background:var(--red-100)}.bordered.error .highlighted,.bordered.error button{color:var(--red-600)}.bordered.warning{border-color:var(--yellow-600);background:var(--yellow-100)}.bordered.warning .highlighted,.bordered.warning button{color:var(--yellow-600)}.bordered.info{border-color:var(--blue-600);background:var(--blue-100)}.bordered.info .highlighted,.bordered.info button{color:var(--blue-600)}\n"] }]
|
|
1548
1576
|
}], propDecorators: { alert: [{
|
|
1549
1577
|
type: Input
|
|
1550
1578
|
}], closeAlert: [{
|