ui-core-abv 0.0.1 → 0.0.2
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 +105 -105
- package/fesm2022/ui-core-abv.mjs.map +1 -1
- package/lib/button/button.component.d.ts +3 -3
- package/lib/checkbox/checkbox.component.d.ts +3 -3
- package/lib/dynamic-form/form/dynamic-form.component.d.ts +3 -3
- package/lib/dynamic-form/form-wrapper/form-wrapper.component.d.ts +3 -3
- package/lib/inputs/input/input.component.d.ts +3 -3
- package/lib/inputs/searcher/searcher.component.d.ts +3 -3
- package/lib/inputs/select/select.component.d.ts +3 -3
- package/lib/modal/modaRef.d.ts +2 -2
- package/lib/modal/modal.service.d.ts +3 -3
- package/lib/modal/side-modal/side-modal.component.d.ts +2 -2
- package/lib/pipes/name-inits.pipe.d.ts +3 -3
- package/lib/push-alerts/alert-container/alert-container.component.d.ts +2 -2
- package/lib/push-alerts/push-alert.service.d.ts +3 -3
- package/lib/skeleton-loader/skeleton-loader.component.d.ts +3 -3
- package/lib/table/table-list/table-list.component.d.ts +3 -3
- package/lib/table/table-pagination/table-pagination.component.d.ts +3 -3
- package/lib/table/table-searcher/table-searcher.component.d.ts +3 -3
- package/lib/table/table-user/table-user.component.d.ts +3 -3
- package/lib/table/table.component.d.ts +3 -3
- package/lib/tiny-alert/tiny-alert.service.d.ts +3 -3
- package/lib/toggle-button/toggle-button.component.d.ts +3 -3
- package/lib/tooltip/tool-tip.directive.d.ts +4 -4
- package/package.json +1 -1
package/fesm2022/ui-core-abv.mjs
CHANGED
|
@@ -49,7 +49,7 @@ function createValueAccessor() {
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
const base$1 = createValueAccessor();
|
|
52
|
-
class
|
|
52
|
+
class UicCheckboxComponent extends base$1 {
|
|
53
53
|
label = '';
|
|
54
54
|
placeholder = '';
|
|
55
55
|
disabled = false;
|
|
@@ -59,21 +59,21 @@ class CheckboxComponent extends base$1 {
|
|
|
59
59
|
this.notifyChange(!this.value);
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
63
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type:
|
|
62
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
63
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicCheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { label: "label", placeholder: "placeholder", disabled: "disabled", loading: "loading" }, providers: [
|
|
64
64
|
{
|
|
65
65
|
provide: NG_VALUE_ACCESSOR,
|
|
66
|
-
useExisting: forwardRef(() =>
|
|
66
|
+
useExisting: forwardRef(() => UicCheckboxComponent),
|
|
67
67
|
multi: true
|
|
68
68
|
}
|
|
69
69
|
], usesInheritance: true, ngImport: i0, template: "@if (label){\r\n <label for=\"\">{{label}} </label>\r\n}\r\n<div class=\"check-wrapper\">\r\n <button\r\n type=\"button\"\r\n class=\"checkbox\"\r\n [disabled]=\"disabled\"\r\n [class.checked]=\"value\"\r\n (click)=\"toggle()\"\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 {{placeholder}}\r\n</div>", styles: [".check-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.check-wrapper button{margin-right:8px}.checkbox{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:2px solid #717680;border-radius:6px;background:#fff;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:#8230c4}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px #8230c466}.checkbox:disabled{background:#d5d7da;border-color:#d5d7da;cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:#752bb0;border-color:#752bb0}.checkbox.checked:hover:not(:disabled){background:#8230c4;border-color:#8230c4}.checkbox.checked .icon{color:#fff}.checkbox.indeterminate{background:#752bb0;border-color:#752bb0}.checkbox.indeterminate .icon{color:#fff}.checkbox .icon{font-size:16px;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}\n"] });
|
|
70
70
|
}
|
|
71
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
71
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicCheckboxComponent, decorators: [{
|
|
72
72
|
type: Component,
|
|
73
73
|
args: [{ selector: 'ui-checkbox', imports: [], providers: [
|
|
74
74
|
{
|
|
75
75
|
provide: NG_VALUE_ACCESSOR,
|
|
76
|
-
useExisting: forwardRef(() =>
|
|
76
|
+
useExisting: forwardRef(() => UicCheckboxComponent),
|
|
77
77
|
multi: true
|
|
78
78
|
}
|
|
79
79
|
], template: "@if (label){\r\n <label for=\"\">{{label}} </label>\r\n}\r\n<div class=\"check-wrapper\">\r\n <button\r\n type=\"button\"\r\n class=\"checkbox\"\r\n [disabled]=\"disabled\"\r\n [class.checked]=\"value\"\r\n (click)=\"toggle()\"\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 {{placeholder}}\r\n</div>", styles: [".check-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.check-wrapper button{margin-right:8px}.checkbox{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:2px solid #717680;border-radius:6px;background:#fff;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:#8230c4}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px #8230c466}.checkbox:disabled{background:#d5d7da;border-color:#d5d7da;cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:#752bb0;border-color:#752bb0}.checkbox.checked:hover:not(:disabled){background:#8230c4;border-color:#8230c4}.checkbox.checked .icon{color:#fff}.checkbox.indeterminate{background:#752bb0;border-color:#752bb0}.checkbox.indeterminate .icon{color:#fff}.checkbox .icon{font-size:16px;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}\n"] }]
|
|
@@ -87,7 +87,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
87
87
|
type: Input
|
|
88
88
|
}] } });
|
|
89
89
|
|
|
90
|
-
class
|
|
90
|
+
class UicSwichComponent {
|
|
91
91
|
checked = false;
|
|
92
92
|
checkedChange = new EventEmitter();
|
|
93
93
|
disabled = false;
|
|
@@ -98,10 +98,10 @@ class ToggleButtonComponent {
|
|
|
98
98
|
this.checked = !this.checked;
|
|
99
99
|
this.checkedChange.emit(this.checked);
|
|
100
100
|
}
|
|
101
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
102
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type:
|
|
101
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
102
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicSwichComponent, isStandalone: true, selector: "ui-switch", inputs: { checked: "checked", disabled: "disabled", placeholder: "placeholder" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div class=\"toggle-wrapper\" [class.disabled]=\"disabled\">\r\n <button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggle()\"\r\n >\r\n <span class=\"thumb\"></span>\r\n </button>\r\n {{placeholder}}\r\n</div>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:#d5d7da}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:#e9eaeb;cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:#d5d7da;cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:#8230c4}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px #8230c466}.toggle.checked{background:#752bb0}.toggle.checked:hover:not(:disabled){background:#8230c4}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n"] });
|
|
103
103
|
}
|
|
104
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
104
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, decorators: [{
|
|
105
105
|
type: Component,
|
|
106
106
|
args: [{ selector: 'ui-switch', imports: [], template: "<div class=\"toggle-wrapper\" [class.disabled]=\"disabled\">\r\n <button\r\n type=\"button\"\r\n class=\"toggle\"\r\n [class.checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggle()\"\r\n >\r\n <span class=\"thumb\"></span>\r\n </button>\r\n {{placeholder}}\r\n</div>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:#d5d7da}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:#e9eaeb;cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:#d5d7da;cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:#8230c4}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px #8230c466}.toggle.checked{background:#752bb0}.toggle.checked:hover:not(:disabled){background:#8230c4}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n"] }]
|
|
107
107
|
}], propDecorators: { checked: [{
|
|
@@ -114,7 +114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
114
114
|
type: Input
|
|
115
115
|
}] } });
|
|
116
116
|
|
|
117
|
-
class
|
|
117
|
+
class UicSkeletonLoaderComponent {
|
|
118
118
|
inputs = 3;
|
|
119
119
|
cols = 3;
|
|
120
120
|
get gridStyle() {
|
|
@@ -122,10 +122,10 @@ class SkeletonLoaderComponent {
|
|
|
122
122
|
'grid-template-columns': `repeat(${this.cols}, 1fr)`
|
|
123
123
|
};
|
|
124
124
|
}
|
|
125
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
126
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type:
|
|
125
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
126
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSkeletonLoaderComponent, isStandalone: true, selector: "ui-skeleton-loader", inputs: { inputs: "inputs", cols: "cols" }, ngImport: i0, template: "<div class=\"skeleton-form\" [ngStyle]=\"gridStyle\">\r\n @for (r of [].constructor(inputs); track $index) {\r\n <div class=\"skeleton-input-container\">\r\n <div class=\"skeleton-input-label\"></div>\r\n <div class=\"skeleton-input\"></div>\r\n </div>\r\n }\r\n</div>", styles: [".skeleton-form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:16px;padding:24px 0}.skeleton-input-label{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:20px;width:80%;margin-bottom:8px}.skeleton-input{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:40px;width:100%}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
127
127
|
}
|
|
128
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonLoaderComponent, decorators: [{
|
|
129
129
|
type: Component,
|
|
130
130
|
args: [{ selector: 'ui-skeleton-loader', imports: [CommonModule], template: "<div class=\"skeleton-form\" [ngStyle]=\"gridStyle\">\r\n @for (r of [].constructor(inputs); track $index) {\r\n <div class=\"skeleton-input-container\">\r\n <div class=\"skeleton-input-label\"></div>\r\n <div class=\"skeleton-input\"></div>\r\n </div>\r\n }\r\n</div>", styles: [".skeleton-form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:16px;padding:24px 0}.skeleton-input-label{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:20px;width:80%;margin-bottom:8px}.skeleton-input{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:40px;width:100%}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
|
|
131
131
|
}], propDecorators: { inputs: [{
|
|
@@ -172,7 +172,7 @@ function createInfoAlert(message, options) {
|
|
|
172
172
|
};
|
|
173
173
|
}
|
|
174
174
|
|
|
175
|
-
class
|
|
175
|
+
class UicPushAlertService {
|
|
176
176
|
autoIncId = 0;
|
|
177
177
|
alerts$ = new Subject();
|
|
178
178
|
get stream() {
|
|
@@ -189,10 +189,10 @@ class PushAlertService {
|
|
|
189
189
|
error(message, options) {
|
|
190
190
|
this.show(createErrorAlert(message, options));
|
|
191
191
|
}
|
|
192
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
193
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
192
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
193
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, providedIn: 'root' });
|
|
194
194
|
}
|
|
195
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, decorators: [{
|
|
196
196
|
type: Injectable,
|
|
197
197
|
args: [{
|
|
198
198
|
providedIn: 'root'
|
|
@@ -252,15 +252,15 @@ class AlertContainerComponent {
|
|
|
252
252
|
const idx = this.alerts.findIndex(f => f.id == id);
|
|
253
253
|
this.alerts.splice(idx, 1);
|
|
254
254
|
}
|
|
255
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertContainerComponent, deps: [{ token:
|
|
255
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertContainerComponent, deps: [{ token: UicPushAlertService }], target: i0.ɵɵFactoryTarget.Component });
|
|
256
256
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: AlertContainerComponent, isStandalone: true, selector: "lib-alert-container", ngImport: i0, template: "<div class=\"alert-container\">\r\n @for (alert of alerts; track alert.id){\r\n <lib-alert\r\n (closeAlert)=\"dismis($event)\"\r\n [alert]=\"alert\">\r\n </lib-alert>\r\n } \r\n</div>\r\n", styles: [".alert-container{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999}\n"], dependencies: [{ kind: "component", type: AlertComponent, selector: "lib-alert", inputs: ["alert"], outputs: ["closeAlert"] }] });
|
|
257
257
|
}
|
|
258
258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertContainerComponent, decorators: [{
|
|
259
259
|
type: Component,
|
|
260
260
|
args: [{ selector: 'lib-alert-container', imports: [AlertComponent], template: "<div class=\"alert-container\">\r\n @for (alert of alerts; track alert.id){\r\n <lib-alert\r\n (closeAlert)=\"dismis($event)\"\r\n [alert]=\"alert\">\r\n </lib-alert>\r\n } \r\n</div>\r\n", styles: [".alert-container{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999}\n"] }]
|
|
261
|
-
}], ctorParameters: () => [{ type:
|
|
261
|
+
}], ctorParameters: () => [{ type: UicPushAlertService }] });
|
|
262
262
|
|
|
263
|
-
class
|
|
263
|
+
class UicButtonComponent {
|
|
264
264
|
text = '';
|
|
265
265
|
icon = '';
|
|
266
266
|
rightIcon = '';
|
|
@@ -274,10 +274,10 @@ class ButtonComponent {
|
|
|
274
274
|
ngOnInit() {
|
|
275
275
|
this.buttonTypeClass = 'btn-' + this.type + ' btn-' + this.color + "-" + this.type;
|
|
276
276
|
}
|
|
277
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
278
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type:
|
|
277
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
278
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicButtonComponent, isStandalone: true, selector: "ui-button", inputs: { text: "text", icon: "icon", rightIcon: "rightIcon", iconOnly: "iconOnly", disabled: "disabled", loading: "loading", size: "size", type: "type", color: "color" }, ngImport: i0, template: "<button\r\n [class]=\"'main-btn ' + buttonTypeClass\"\r\n [disabled]=\"disabled || loading\"\r\n [ngClass]=\"{\r\n 'btn-tiny' :size=='t',\r\n 'btn-small' :size=='s', \r\n 'btn-medium' :size=='m',\r\n 'btn-large' :size=='l', \r\n 'btn-gigant' :size=='g'\r\n }\" >\r\n \r\n @if (!loading) {\r\n @if (icon!='' ) {\r\n <i class=\"{{icon}}\"></i>\r\n }\r\n @if (!iconOnly) {\r\n <div class=\"btn-text\" [class.norighticon]=\"rightIcon==''\" [class.noicon]=\"icon==''\">\r\n {{text}}\r\n <ng-content ></ng-content>\r\n </div>\r\n }\r\n @if (rightIcon!='' ) {\r\n <i class=\"{{rightIcon}}\"></i>\r\n }\r\n } @else {\r\n <div class=\"btn-loader-container\"> <div class=\"btn-loader\"></div> </div>\r\n }\r\n</button>", styles: [":host{width:fit-content;display:block}.main-btn{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border:none;text-align:center;border-radius:8px;padding:0;white-space:nowrap;outline:none}.main-btn:focus,.main-btn:focus-visible{box-shadow:0 0 0 3px #8230c466}.noicon{padding-left:16px}.norighticon{padding-right:16px}.btn-text{font-weight:500}.btn-tiny{height:22px;min-width:22px}.btn-tiny>.btn-text{font-size:10px;line-height:22px}.btn-tiny i{font-size:14px;line-height:22px;width:22px}.btn-tiny .btn-loader{line-height:10px;width:10px}.btn-small{height:30px;min-width:30px}.btn-small>.btn-text{font-size:12px;line-height:30px}.btn-small i{font-size:16px;line-height:30px;width:30px}.btn-small .btn-loader{line-height:12px;width:12px}.btn-medium{height:38px;min-width:38px}.btn-medium>.btn-text{font-size:14px;line-height:38px}.btn-medium i{font-size:24px;line-height:38px;width:38px}.btn-medium .btn-loader{line-height:14px;width:14px}.btn-large{height:46px;min-width:46px}.btn-large>.btn-text{font-size:16px;line-height:46px}.btn-large i{font-size:24px;line-height:46px;width:46px}.btn-large .btn-loader{line-height:16px;width:16px}.btn-gigant{height:54px;min-width:54px}.btn-gigant>.btn-text{font-size:18px;line-height:54px}.btn-gigant i{font-size:24px;line-height:54px;width:54px}.btn-gigant .btn-loader{line-height:18px;width:18px}.btn-filled{color:#fff;transition:background .3s ease;cursor:pointer}.btn-filled:disabled{cursor:not-allowed;color:#d5d7da}.btn-bordered{border:solid 1px #e9eaeb;background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-bordered:disabled{cursor:not-allowed;color:#d5d7da;border-color:#d5d7da}.btn-ghost{color:#252b37;background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-ghost:disabled{cursor:not-allowed;color:#d5d7da}.btn-primary-filled{background-color:#63277d}.btn-primary-filled:hover{background-color:#4f1f64}.btn-primary-filled:active{background-color:#2d1238}.btn-primary-filled:disabled{background-color:#efe9f2}.btn-primary-bordered{color:#63277d}.btn-primary-bordered:hover{background-color:#efe9f2}.btn-primary-bordered:active{background-color:#cfbcd7}.btn-primary-bordered:disabled{background-color:#efe9f2}.btn-primary-ghost:hover{background-color:#efe9f2}.btn-primary-ghost:active{background-color:#cfbcd7}.btn-primary-ghost:disabled{background-color:transparent}.btn-black-filled{background-color:#0a0d12}.btn-black-filled:hover{background-color:#752bb0}.btn-black-filled:active{background-color:#4e1d76}.btn-black-filled:disabled{background-color:#f5f5f5}.btn-black-bordered{color:#414651}.btn-black-bordered:hover{background-color:#f3eaf9}.btn-black-bordered:active{background-color:#d8bfed}.btn-black-bordered:disabled{background-color:#fafafa}.btn-black-ghost:hover{background-color:#f3eaf9}.btn-black-ghost:active{background-color:#d8bfed}.btn-black-ghost:disabled{background-color:transparent}.btn-green-filled{background-color:#22c55e}.btn-green-filled:hover{background-color:#15803d}.btn-green-filled:active{background-color:#1a2e21}.btn-green-filled:disabled{background-color:#bbf7d0}.btn-green-bordered{color:#22c55e}.btn-green-bordered:hover{background-color:#bbf7d0}.btn-green-bordered:active{background-color:#4ade80}.btn-green-bordered:disabled{background-color:#bbf7d0}.btn-green-ghost:hover{background-color:#bbf7d0}.btn-green-ghost:active{background-color:#4ade80}.btn-green-ghost:disabled{background-color:transparent}.btn-yellow-filled{background-color:#fdb022}.btn-yellow-filled:hover{background-color:#dc6803}.btn-yellow-filled:active{background-color:#792e0d}.btn-yellow-filled:disabled{background-color:#fef0c7}.btn-yellow-bordered{color:#fdb022}.btn-yellow-bordered:hover{background-color:#fef0c7}.btn-yellow-bordered:active{background-color:#fec84b}.btn-yellow-bordered:disabled{background-color:#fef0c7}.btn-yellow-ghost:hover{background-color:#fef0c7}.btn-yellow-ghost:active{background-color:#fec84b}.btn-yellow-ghost:disabled{background-color:transparent}.btn-blue-filled{background-color:#93bbf0}.btn-blue-filled:hover{background-color:#6193d5}.btn-blue-filled:active{background-color:#273b55}.btn-blue-filled:disabled{background-color:#e4eefb}.btn-blue-bordered{color:#93bbf0}.btn-blue-bordered:hover{background-color:#e4eefb}.btn-blue-bordered:active{background-color:#aeccf4}.btn-blue-bordered:disabled{background-color:#e4eefb}.btn-blue-ghost:hover{background-color:#e4eefb}.btn-blue-ghost:active{background-color:#aeccf4}.btn-blue-ghost:disabled{background-color:transparent}.btn-red-filled{background-color:#f97066}.btn-red-filled:hover{background-color:#d92d20}.btn-red-filled:active{background-color:#7a271a}.btn-red-filled:disabled{background-color:#fee4e2}.btn-red-bordered{color:#f97066}.btn-red-bordered:hover{background-color:#fee4e2}.btn-red-bordered:active{background-color:#fda29b}.btn-red-bordered:disabled{background-color:#fee4e2}.btn-red-ghost:hover{background-color:#fee4e2}.btn-red-ghost:active{background-color:#fda29b}.btn-red-ghost:disabled{background-color:transparent}.btn-loader{width:14px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;margin:2px}.btn-loader-container{line-height:14px;margin:3px 0;display:flex;justify-content:center;width:65px}@keyframes l5{0%{box-shadow:20px 0 #e8dfec,-20px 0 #4f1f64;background:#e8dfec}33%{box-shadow:20px 0 #e8dfec,-20px 0 #4f1f64;background:#4f1f64}66%{box-shadow:20px 0 #4f1f64,-20px 0 #e8dfec;background:#4f1f64}to{box-shadow:20px 0 #4f1f64,-20px 0 #e8dfec;background:#e8dfec}}.btn-loader:before,.btn-loader:after{content:\"\";grid-area:1/1;margin:15%;border-radius:50%;background:inherit;transform:rotate(0) translate(150%);animation:l22 1s infinite}.btn-loader:after{animation-delay:-.5s}@keyframes l22-0{to{transform:rotate(1turn)}}@keyframes l22{to{transform:rotate(1turn) translate(150%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
279
279
|
}
|
|
280
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
280
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicButtonComponent, decorators: [{
|
|
281
281
|
type: Component,
|
|
282
282
|
args: [{ selector: 'ui-button', imports: [CommonModule], template: "<button\r\n [class]=\"'main-btn ' + buttonTypeClass\"\r\n [disabled]=\"disabled || loading\"\r\n [ngClass]=\"{\r\n 'btn-tiny' :size=='t',\r\n 'btn-small' :size=='s', \r\n 'btn-medium' :size=='m',\r\n 'btn-large' :size=='l', \r\n 'btn-gigant' :size=='g'\r\n }\" >\r\n \r\n @if (!loading) {\r\n @if (icon!='' ) {\r\n <i class=\"{{icon}}\"></i>\r\n }\r\n @if (!iconOnly) {\r\n <div class=\"btn-text\" [class.norighticon]=\"rightIcon==''\" [class.noicon]=\"icon==''\">\r\n {{text}}\r\n <ng-content ></ng-content>\r\n </div>\r\n }\r\n @if (rightIcon!='' ) {\r\n <i class=\"{{rightIcon}}\"></i>\r\n }\r\n } @else {\r\n <div class=\"btn-loader-container\"> <div class=\"btn-loader\"></div> </div>\r\n }\r\n</button>", styles: [":host{width:fit-content;display:block}.main-btn{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border:none;text-align:center;border-radius:8px;padding:0;white-space:nowrap;outline:none}.main-btn:focus,.main-btn:focus-visible{box-shadow:0 0 0 3px #8230c466}.noicon{padding-left:16px}.norighticon{padding-right:16px}.btn-text{font-weight:500}.btn-tiny{height:22px;min-width:22px}.btn-tiny>.btn-text{font-size:10px;line-height:22px}.btn-tiny i{font-size:14px;line-height:22px;width:22px}.btn-tiny .btn-loader{line-height:10px;width:10px}.btn-small{height:30px;min-width:30px}.btn-small>.btn-text{font-size:12px;line-height:30px}.btn-small i{font-size:16px;line-height:30px;width:30px}.btn-small .btn-loader{line-height:12px;width:12px}.btn-medium{height:38px;min-width:38px}.btn-medium>.btn-text{font-size:14px;line-height:38px}.btn-medium i{font-size:24px;line-height:38px;width:38px}.btn-medium .btn-loader{line-height:14px;width:14px}.btn-large{height:46px;min-width:46px}.btn-large>.btn-text{font-size:16px;line-height:46px}.btn-large i{font-size:24px;line-height:46px;width:46px}.btn-large .btn-loader{line-height:16px;width:16px}.btn-gigant{height:54px;min-width:54px}.btn-gigant>.btn-text{font-size:18px;line-height:54px}.btn-gigant i{font-size:24px;line-height:54px;width:54px}.btn-gigant .btn-loader{line-height:18px;width:18px}.btn-filled{color:#fff;transition:background .3s ease;cursor:pointer}.btn-filled:disabled{cursor:not-allowed;color:#d5d7da}.btn-bordered{border:solid 1px #e9eaeb;background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-bordered:disabled{cursor:not-allowed;color:#d5d7da;border-color:#d5d7da}.btn-ghost{color:#252b37;background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-ghost:disabled{cursor:not-allowed;color:#d5d7da}.btn-primary-filled{background-color:#63277d}.btn-primary-filled:hover{background-color:#4f1f64}.btn-primary-filled:active{background-color:#2d1238}.btn-primary-filled:disabled{background-color:#efe9f2}.btn-primary-bordered{color:#63277d}.btn-primary-bordered:hover{background-color:#efe9f2}.btn-primary-bordered:active{background-color:#cfbcd7}.btn-primary-bordered:disabled{background-color:#efe9f2}.btn-primary-ghost:hover{background-color:#efe9f2}.btn-primary-ghost:active{background-color:#cfbcd7}.btn-primary-ghost:disabled{background-color:transparent}.btn-black-filled{background-color:#0a0d12}.btn-black-filled:hover{background-color:#752bb0}.btn-black-filled:active{background-color:#4e1d76}.btn-black-filled:disabled{background-color:#f5f5f5}.btn-black-bordered{color:#414651}.btn-black-bordered:hover{background-color:#f3eaf9}.btn-black-bordered:active{background-color:#d8bfed}.btn-black-bordered:disabled{background-color:#fafafa}.btn-black-ghost:hover{background-color:#f3eaf9}.btn-black-ghost:active{background-color:#d8bfed}.btn-black-ghost:disabled{background-color:transparent}.btn-green-filled{background-color:#22c55e}.btn-green-filled:hover{background-color:#15803d}.btn-green-filled:active{background-color:#1a2e21}.btn-green-filled:disabled{background-color:#bbf7d0}.btn-green-bordered{color:#22c55e}.btn-green-bordered:hover{background-color:#bbf7d0}.btn-green-bordered:active{background-color:#4ade80}.btn-green-bordered:disabled{background-color:#bbf7d0}.btn-green-ghost:hover{background-color:#bbf7d0}.btn-green-ghost:active{background-color:#4ade80}.btn-green-ghost:disabled{background-color:transparent}.btn-yellow-filled{background-color:#fdb022}.btn-yellow-filled:hover{background-color:#dc6803}.btn-yellow-filled:active{background-color:#792e0d}.btn-yellow-filled:disabled{background-color:#fef0c7}.btn-yellow-bordered{color:#fdb022}.btn-yellow-bordered:hover{background-color:#fef0c7}.btn-yellow-bordered:active{background-color:#fec84b}.btn-yellow-bordered:disabled{background-color:#fef0c7}.btn-yellow-ghost:hover{background-color:#fef0c7}.btn-yellow-ghost:active{background-color:#fec84b}.btn-yellow-ghost:disabled{background-color:transparent}.btn-blue-filled{background-color:#93bbf0}.btn-blue-filled:hover{background-color:#6193d5}.btn-blue-filled:active{background-color:#273b55}.btn-blue-filled:disabled{background-color:#e4eefb}.btn-blue-bordered{color:#93bbf0}.btn-blue-bordered:hover{background-color:#e4eefb}.btn-blue-bordered:active{background-color:#aeccf4}.btn-blue-bordered:disabled{background-color:#e4eefb}.btn-blue-ghost:hover{background-color:#e4eefb}.btn-blue-ghost:active{background-color:#aeccf4}.btn-blue-ghost:disabled{background-color:transparent}.btn-red-filled{background-color:#f97066}.btn-red-filled:hover{background-color:#d92d20}.btn-red-filled:active{background-color:#7a271a}.btn-red-filled:disabled{background-color:#fee4e2}.btn-red-bordered{color:#f97066}.btn-red-bordered:hover{background-color:#fee4e2}.btn-red-bordered:active{background-color:#fda29b}.btn-red-bordered:disabled{background-color:#fee4e2}.btn-red-ghost:hover{background-color:#fee4e2}.btn-red-ghost:active{background-color:#fda29b}.btn-red-ghost:disabled{background-color:transparent}.btn-loader{width:14px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;margin:2px}.btn-loader-container{line-height:14px;margin:3px 0;display:flex;justify-content:center;width:65px}@keyframes l5{0%{box-shadow:20px 0 #e8dfec,-20px 0 #4f1f64;background:#e8dfec}33%{box-shadow:20px 0 #e8dfec,-20px 0 #4f1f64;background:#4f1f64}66%{box-shadow:20px 0 #4f1f64,-20px 0 #e8dfec;background:#4f1f64}to{box-shadow:20px 0 #4f1f64,-20px 0 #e8dfec;background:#e8dfec}}.btn-loader:before,.btn-loader:after{content:\"\";grid-area:1/1;margin:15%;border-radius:50%;background:inherit;transform:rotate(0) translate(150%);animation:l22 1s infinite}.btn-loader:after{animation-delay:-.5s}@keyframes l22-0{to{transform:rotate(1turn)}}@keyframes l22{to{transform:rotate(1turn) translate(150%)}}\n"] }]
|
|
283
283
|
}], propDecorators: { text: [{
|
|
@@ -300,7 +300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
300
300
|
type: Input
|
|
301
301
|
}] } });
|
|
302
302
|
|
|
303
|
-
class
|
|
303
|
+
class UicTableUicSearcherComponent {
|
|
304
304
|
placeholder = '';
|
|
305
305
|
label = 'Buscar';
|
|
306
306
|
searchOnKeydown = false;
|
|
@@ -315,12 +315,12 @@ class TableSearcherComponent {
|
|
|
315
315
|
this.search.emit(this.text);
|
|
316
316
|
}
|
|
317
317
|
}
|
|
318
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
319
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type:
|
|
318
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
319
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown" }, outputs: { search: "search" }, ngImport: i0, template: "\r\n<div class=\"searcher\">\r\n <div class=\"fakeinput\">\r\n <i class=\"ri-search-line\"></i>\r\n <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"search.emit(text)\" placeholder=\"{{placeholder}}\">\r\n </div>\r\n <ui-button (click)=\"search.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">Buscar</ui-button>\r\n <ui-button (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-circle-line\" size=\"m\">Limpiar</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 767px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px #e9eaeb;height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 767px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{border:none}.searcher .fakeinput:focus-within{border-color:#4f1f64}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
320
320
|
}
|
|
321
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, decorators: [{
|
|
322
322
|
type: Component,
|
|
323
|
-
args: [{ selector: 'table-searcher', imports: [
|
|
323
|
+
args: [{ selector: 'table-searcher', imports: [UicButtonComponent, FormsModule], template: "\r\n<div class=\"searcher\">\r\n <div class=\"fakeinput\">\r\n <i class=\"ri-search-line\"></i>\r\n <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"search.emit(text)\" placeholder=\"{{placeholder}}\">\r\n </div>\r\n <ui-button (click)=\"search.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">Buscar</ui-button>\r\n <ui-button (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-circle-line\" size=\"m\">Limpiar</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 767px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px #e9eaeb;height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 767px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{border:none}.searcher .fakeinput:focus-within{border-color:#4f1f64}\n"] }]
|
|
324
324
|
}], propDecorators: { placeholder: [{
|
|
325
325
|
type: Input
|
|
326
326
|
}], label: [{
|
|
@@ -331,7 +331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
331
331
|
type: Output
|
|
332
332
|
}] } });
|
|
333
333
|
|
|
334
|
-
class
|
|
334
|
+
class UicTablePaginationComponent {
|
|
335
335
|
currentPage = 1;
|
|
336
336
|
totalPages = 1;
|
|
337
337
|
size = 25;
|
|
@@ -372,12 +372,12 @@ class TablePaginationComponent {
|
|
|
372
372
|
this.pageChange.emit(this.currentPage);
|
|
373
373
|
}
|
|
374
374
|
}
|
|
375
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
376
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type:
|
|
375
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTablePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
376
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTablePaginationComponent, isStandalone: true, selector: "app-table-pagination", inputs: { currentPage: "currentPage", totalPages: "totalPages", size: "size", loading: "loading" }, outputs: { pageChange: "pageChange", sizeChange: "sizeChange" }, ngImport: i0, template: "\r\n<div class=\"table-page\">\r\n <ui-button [disabled]=\"loading || currentPage == 1\" (click)=\"changePage(currentPage - 1)\" size=\"m\" color=\"black\" type=\"bordered\" text=\"Anterior\" icon=\"ri-arrow-left-line\" > </ui-button> \r\n <div class=\"table-numbers\">\r\n @for (p of pages; track $index) {\r\n @if ( p!= '...' ){\r\n <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n } @else {\r\n <div class=\"space\">...</div>\r\n }\r\n \r\n }\r\n </div>\r\n <ui-button [disabled]=\"loading || currentPage == totalPages\" (click)=\"changePage(currentPage + 1)\" size=\"m\" color=\"black\" type=\"bordered\" text=\"Siguiente\" rightIcon=\"ri-arrow-right-line\" > </ui-button>\r\n <!-- <div class=\"page-size\">\r\n <select [(ngModel)]=\"size\" (ngModelChange)=\"sizeChange.emit(+size)\" [disabled]=\"loading\">\r\n <option value=\"25\">25</option>\r\n <option value=\"50\">50</option>\r\n <option value=\"100\">100</option>\r\n </select>\r\n elementos por p\u00E1gina\r\n </div> -->\r\n</div>", styles: [".table-page{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px;padding:16px 24px}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}.number{border:none;color:#717680;width:40px;height:40px;background-color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer}.number:hover{background-color:#752bb0}.selected{background-color:#f5f5f5;font-weight:600;color:#752bb0}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:13px;color:#717680;align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:#717680;border:solid 1px #592371;border-radius:5px}\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: "ngmodule", type: FormsModule }] });
|
|
377
377
|
}
|
|
378
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
378
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTablePaginationComponent, decorators: [{
|
|
379
379
|
type: Component,
|
|
380
|
-
args: [{ selector: 'app-table-pagination', imports: [CommonModule,
|
|
380
|
+
args: [{ selector: 'app-table-pagination', imports: [CommonModule, UicButtonComponent, FormsModule], template: "\r\n<div class=\"table-page\">\r\n <ui-button [disabled]=\"loading || currentPage == 1\" (click)=\"changePage(currentPage - 1)\" size=\"m\" color=\"black\" type=\"bordered\" text=\"Anterior\" icon=\"ri-arrow-left-line\" > </ui-button> \r\n <div class=\"table-numbers\">\r\n @for (p of pages; track $index) {\r\n @if ( p!= '...' ){\r\n <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n } @else {\r\n <div class=\"space\">...</div>\r\n }\r\n \r\n }\r\n </div>\r\n <ui-button [disabled]=\"loading || currentPage == totalPages\" (click)=\"changePage(currentPage + 1)\" size=\"m\" color=\"black\" type=\"bordered\" text=\"Siguiente\" rightIcon=\"ri-arrow-right-line\" > </ui-button>\r\n <!-- <div class=\"page-size\">\r\n <select [(ngModel)]=\"size\" (ngModelChange)=\"sizeChange.emit(+size)\" [disabled]=\"loading\">\r\n <option value=\"25\">25</option>\r\n <option value=\"50\">50</option>\r\n <option value=\"100\">100</option>\r\n </select>\r\n elementos por p\u00E1gina\r\n </div> -->\r\n</div>", styles: [".table-page{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px;padding:16px 24px}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}.number{border:none;color:#717680;width:40px;height:40px;background-color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer}.number:hover{background-color:#752bb0}.selected{background-color:#f5f5f5;font-weight:600;color:#752bb0}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:13px;color:#717680;align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:#717680;border:solid 1px #592371;border-radius:5px}\n"] }]
|
|
381
381
|
}], propDecorators: { currentPage: [{
|
|
382
382
|
type: Input
|
|
383
383
|
}], totalPages: [{
|
|
@@ -392,19 +392,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
392
392
|
type: Output
|
|
393
393
|
}] } });
|
|
394
394
|
|
|
395
|
-
class
|
|
395
|
+
class UicTableListComponent {
|
|
396
396
|
list = [];
|
|
397
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
398
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type:
|
|
397
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
398
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableListComponent, isStandalone: true, selector: "app-table-list", inputs: { list: "list" }, ngImport: i0, template: "@for (item of list; track $index) {\r\n <div class=\"list-item\">\r\n <i [class]=\"item.icon??'ri-capsule-fill'\"></i>\r\n <div class=\"list-item-data\">\r\n <div>{{item.text}}</div>\r\n <p>{{item.subtext}}</p>\r\n </div> \r\n </div>\r\n\r\n}\r\n", styles: [".list-item{display:flex;margin-bottom:5px;align-items:center}.list-item i{color:#717680;margin-right:5px}.list-item-data p{color:#d5d7da;font-size:13px}\n"] });
|
|
399
399
|
}
|
|
400
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
400
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableListComponent, decorators: [{
|
|
401
401
|
type: Component,
|
|
402
402
|
args: [{ selector: 'app-table-list', imports: [], template: "@for (item of list; track $index) {\r\n <div class=\"list-item\">\r\n <i [class]=\"item.icon??'ri-capsule-fill'\"></i>\r\n <div class=\"list-item-data\">\r\n <div>{{item.text}}</div>\r\n <p>{{item.subtext}}</p>\r\n </div> \r\n </div>\r\n\r\n}\r\n", styles: [".list-item{display:flex;margin-bottom:5px;align-items:center}.list-item i{color:#717680;margin-right:5px}.list-item-data p{color:#d5d7da;font-size:13px}\n"] }]
|
|
403
403
|
}], propDecorators: { list: [{
|
|
404
404
|
type: Input
|
|
405
405
|
}] } });
|
|
406
406
|
|
|
407
|
-
class
|
|
407
|
+
class UicNameInitsPipe {
|
|
408
408
|
transform(value) {
|
|
409
409
|
if (!value) {
|
|
410
410
|
return "";
|
|
@@ -420,24 +420,24 @@ class NameInitsPipe {
|
|
|
420
420
|
return '';
|
|
421
421
|
}
|
|
422
422
|
}
|
|
423
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
424
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type:
|
|
423
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicNameInitsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
424
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: UicNameInitsPipe, isStandalone: true, name: "nameInitials" });
|
|
425
425
|
}
|
|
426
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
426
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicNameInitsPipe, decorators: [{
|
|
427
427
|
type: Pipe,
|
|
428
428
|
args: [{
|
|
429
429
|
name: 'nameInitials'
|
|
430
430
|
}]
|
|
431
431
|
}] });
|
|
432
432
|
|
|
433
|
-
class
|
|
433
|
+
class UicTableUserComponent {
|
|
434
434
|
user;
|
|
435
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
436
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type:
|
|
435
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
436
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUserComponent, isStandalone: true, selector: "app-table-user", inputs: { user: "user" }, ngImport: i0, template: "@if (user) {\r\n <div class=\"user-row\">\r\n <div class=\"user-inits\">\r\n {{user.name | nameInitials}}\r\n </div>\r\n <div class=\"user-row-data\">\r\n <div>{{user.name}}</div>\r\n <p>{{user.id}}</p>\r\n </div>\r\n </div>\r\n}@else{\r\n -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px #68269d;background-color:#d8bfed;color:#68269d;display:flex;justify-content:center;align-items:center;margin-right:12px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{flex:1 1;font-weight:600;color:#181d27;font-size:14px}.user-row-data p{color:#717680;font-weight:400;font-size:12px;line-height:16px}\n"], dependencies: [{ kind: "pipe", type: UicNameInitsPipe, name: "nameInitials" }] });
|
|
437
437
|
}
|
|
438
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
438
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUserComponent, decorators: [{
|
|
439
439
|
type: Component,
|
|
440
|
-
args: [{ selector: 'app-table-user', imports: [
|
|
440
|
+
args: [{ selector: 'app-table-user', imports: [UicNameInitsPipe], template: "@if (user) {\r\n <div class=\"user-row\">\r\n <div class=\"user-inits\">\r\n {{user.name | nameInitials}}\r\n </div>\r\n <div class=\"user-row-data\">\r\n <div>{{user.name}}</div>\r\n <p>{{user.id}}</p>\r\n </div>\r\n </div>\r\n}@else{\r\n -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px #68269d;background-color:#d8bfed;color:#68269d;display:flex;justify-content:center;align-items:center;margin-right:12px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{flex:1 1;font-weight:600;color:#181d27;font-size:14px}.user-row-data p{color:#717680;font-weight:400;font-size:12px;line-height:16px}\n"] }]
|
|
441
441
|
}], propDecorators: { user: [{
|
|
442
442
|
type: Input
|
|
443
443
|
}] } });
|
|
@@ -459,11 +459,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
459
459
|
args: [{ selector: 'app-tooltip', imports: [], animations: [fadeAndRise], template: "<div @fadeAndRise class=\"tooltip\" \r\n [style.left]=\"left + 'px'\" [style.top]=\"top + 'px'\" [innerHTML]=\"tooltip\">\r\n</div>", styles: [".tooltip{position:fixed;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;max-width:400px;color:#0a0d12;-webkit-user-select:none;user-select:none;padding:5px 10px;border-radius:4px;font-size:14px;margin-top:5px;transform:translate(-50%);z-index:1000}.tooltip:before{content:\"\";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #ffffff;position:absolute;left:calc(50% - 8px);top:-8px}\n"] }]
|
|
460
460
|
}] });
|
|
461
461
|
|
|
462
|
-
class
|
|
462
|
+
class UicToolTipDirective {
|
|
463
463
|
elementRef;
|
|
464
464
|
appRef;
|
|
465
465
|
injector;
|
|
466
|
-
|
|
466
|
+
tip = '';
|
|
467
467
|
componentRef = null;
|
|
468
468
|
constructor(elementRef, appRef, injector) {
|
|
469
469
|
this.elementRef = elementRef;
|
|
@@ -471,7 +471,7 @@ class ToolTipDirective {
|
|
|
471
471
|
this.injector = injector;
|
|
472
472
|
}
|
|
473
473
|
onMouseEnter() {
|
|
474
|
-
if (this.componentRef === null && this.
|
|
474
|
+
if (this.componentRef === null && this.tip != '' && this.tip != null) {
|
|
475
475
|
this.componentRef = createComponent(TooltipComponent, {
|
|
476
476
|
environmentInjector: this.injector
|
|
477
477
|
});
|
|
@@ -484,7 +484,7 @@ class ToolTipDirective {
|
|
|
484
484
|
}
|
|
485
485
|
setTooltipComponentProperties() {
|
|
486
486
|
if (this.componentRef !== null) {
|
|
487
|
-
this.componentRef.instance.tooltip = this.
|
|
487
|
+
this.componentRef.instance.tooltip = this.tip;
|
|
488
488
|
const { left, right, bottom } = this.elementRef.nativeElement.getBoundingClientRect();
|
|
489
489
|
this.componentRef.instance.left = (right - left) / 2 + left;
|
|
490
490
|
this.componentRef.instance.top = bottom;
|
|
@@ -503,15 +503,15 @@ class ToolTipDirective {
|
|
|
503
503
|
this.componentRef = null;
|
|
504
504
|
}
|
|
505
505
|
}
|
|
506
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
507
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type:
|
|
506
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicToolTipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Directive });
|
|
507
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: UicToolTipDirective, isStandalone: true, selector: "[tip]", inputs: { tip: "tip" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
|
|
508
508
|
}
|
|
509
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicToolTipDirective, decorators: [{
|
|
510
510
|
type: Directive,
|
|
511
511
|
args: [{
|
|
512
|
-
selector: '[
|
|
512
|
+
selector: '[tip]'
|
|
513
513
|
}]
|
|
514
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }], propDecorators: {
|
|
514
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }], propDecorators: { tip: [{
|
|
515
515
|
type: Input
|
|
516
516
|
}], onMouseEnter: [{
|
|
517
517
|
type: HostListener,
|
|
@@ -542,7 +542,7 @@ const animatedRow = trigger('animatedRow', [
|
|
|
542
542
|
]),
|
|
543
543
|
]);
|
|
544
544
|
|
|
545
|
-
class
|
|
545
|
+
class UicTableComponent {
|
|
546
546
|
columns = [];
|
|
547
547
|
data = [];
|
|
548
548
|
loading = false;
|
|
@@ -668,13 +668,13 @@ class TableComponent {
|
|
|
668
668
|
this.checkedIds.clear();
|
|
669
669
|
this.checkedChange.emit([]);
|
|
670
670
|
}
|
|
671
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
672
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", pages: "pages", size: "size", 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 <table-searcher (search)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></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(10); 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 \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 [tooltip]=\"alert.text\" [class]=\"alert.icon + ' alert'\" ></i>\r\n }\r\n </div>\r\n }\r\n @else if (header.type == 'list'){\r\n <app-table-list [list]=\"getList(row.data,header.key)\"></app-table-list> \r\n }\r\n @else if (header.type == 'user'){\r\n <app-table-user [user]=\"getUser(row.data,header.key)\"></app-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 [tooltip]=\"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 <app-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [size]=\"size\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </app-table-pagination>\r\n }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px #e9eaeb;border-radius:12px}table{width:100%;font-weight:400;color:#535862}table th{font-size:12px;height:44px;font-weight:500;background-color:#fafafa;border-left:solid 6px #fafafa}table th .th-wrap{white-space:nowrap;display:flex;align-items: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:#a4a7ae}table th .th-wrap div:hover{color:#592371}table td{font-size:14px;height:64px}table td,table th{padding:4px 24px;vertical-align:middle;border-bottom:solid 1px #e9eaeb}table tr{transition:ease .3s}table tr:hover{background-color:#fafafa}.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:#181d27;border-bottom:solid 1px #e9eaeb}.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:#752bb0!important;border:solid 1px}.empty{text-align:center;color:#d5d7da}.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:#f04438;color:#fff;border-radius:50%;padding:3px}.loader{height:5px;width:100%;--c:no-repeat linear-gradient(#592371 0 0);background:var(--c),var(--c),#592371;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:#fafafa;transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:#592371}.tr-highlighted{border-left:solid 6px #16a34a}.trc-primary{color:#592371}.trc-red{color:#f04438}.trc-blue{color:#78aaec}.trc-green{color:#16a34a}.trc-yellow{color:#f79009}.trc-black{color:#181d27}.trc-grey{color:#d5d7da}.row-loader{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 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: ButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: TableUserComponent, selector: "app-table-user", inputs: ["user"] }, { kind: "component", type: TableListComponent, selector: "app-table-list", inputs: ["list"] }, { kind: "component", type: TableSearcherComponent, selector: "table-searcher", inputs: ["placeholder", "label", "searchOnKeydown"], outputs: ["search"] }, { kind: "component", type: TablePaginationComponent, selector: "app-table-pagination", inputs: ["currentPage", "totalPages", "size", "loading"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: ToolTipDirective, selector: "[tooltip]", inputs: ["tooltip"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["label", "placeholder", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
|
|
671
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
672
|
+
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", 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 <table-searcher (search)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></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(10); 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 \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 <app-table-list [list]=\"getList(row.data,header.key)\"></app-table-list> \r\n }\r\n @else if (header.type == 'user'){\r\n <app-table-user [user]=\"getUser(row.data,header.key)\"></app-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 <app-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [size]=\"size\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </app-table-pagination>\r\n }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px #e9eaeb;border-radius:12px}table{width:100%;font-weight:400;color:#535862}table th{font-size:12px;height:44px;font-weight:500;background-color:#fafafa;border-left:solid 6px #fafafa}table th .th-wrap{white-space:nowrap;display:flex;align-items: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:#a4a7ae}table th .th-wrap div:hover{color:#592371}table td{font-size:14px;height:64px}table td,table th{padding:4px 24px;vertical-align:middle;border-bottom:solid 1px #e9eaeb}table tr{transition:ease .3s}table tr:hover{background-color:#fafafa}.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:#181d27;border-bottom:solid 1px #e9eaeb}.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:#752bb0!important;border:solid 1px}.empty{text-align:center;color:#d5d7da}.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:#f04438;color:#fff;border-radius:50%;padding:3px}.loader{height:5px;width:100%;--c:no-repeat linear-gradient(#592371 0 0);background:var(--c),var(--c),#592371;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:#fafafa;transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:#592371}.tr-highlighted{border-left:solid 6px #16a34a}.trc-primary{color:#592371}.trc-red{color:#f04438}.trc-blue{color:#78aaec}.trc-green{color:#16a34a}.trc-yellow{color:#f79009}.trc-black{color:#181d27}.trc-grey{color:#d5d7da}.row-loader{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 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: "app-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "app-table-list", inputs: ["list"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "table-searcher", inputs: ["placeholder", "label", "searchOnKeydown"], outputs: ["search"] }, { kind: "component", type: UicTablePaginationComponent, selector: "app-table-pagination", inputs: ["currentPage", "totalPages", "size", "loading"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["label", "placeholder", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
|
|
673
673
|
}
|
|
674
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
674
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, decorators: [{
|
|
675
675
|
type: Component,
|
|
676
|
-
args: [{ selector: 'ui-table', imports: [CommonModule,
|
|
677
|
-
|
|
676
|
+
args: [{ selector: 'ui-table', imports: [CommonModule, UicButtonComponent, UicTableUserComponent, UicTableListComponent, UicTableUicSearcherComponent,
|
|
677
|
+
UicTablePaginationComponent, UicToolTipDirective, UicCheckboxComponent, FormsModule], animations: [highlightRow, animatedRow], template: "<div class=\"table-filters\">\r\n @if (searchEnabled) {\r\n <table-searcher (search)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></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(10); 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 \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 <app-table-list [list]=\"getList(row.data,header.key)\"></app-table-list> \r\n }\r\n @else if (header.type == 'user'){\r\n <app-table-user [user]=\"getUser(row.data,header.key)\"></app-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 <app-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [size]=\"size\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </app-table-pagination>\r\n }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px #e9eaeb;border-radius:12px}table{width:100%;font-weight:400;color:#535862}table th{font-size:12px;height:44px;font-weight:500;background-color:#fafafa;border-left:solid 6px #fafafa}table th .th-wrap{white-space:nowrap;display:flex;align-items: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:#a4a7ae}table th .th-wrap div:hover{color:#592371}table td{font-size:14px;height:64px}table td,table th{padding:4px 24px;vertical-align:middle;border-bottom:solid 1px #e9eaeb}table tr{transition:ease .3s}table tr:hover{background-color:#fafafa}.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:#181d27;border-bottom:solid 1px #e9eaeb}.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:#752bb0!important;border:solid 1px}.empty{text-align:center;color:#d5d7da}.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:#f04438;color:#fff;border-radius:50%;padding:3px}.loader{height:5px;width:100%;--c:no-repeat linear-gradient(#592371 0 0);background:var(--c),var(--c),#592371;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:#fafafa;transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:#592371}.tr-highlighted{border-left:solid 6px #16a34a}.trc-primary{color:#592371}.trc-red{color:#f04438}.trc-blue{color:#78aaec}.trc-green{color:#16a34a}.trc-yellow{color:#f79009}.trc-black{color:#181d27}.trc-grey{color:#d5d7da}.row-loader{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 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"] }]
|
|
678
678
|
}], propDecorators: { columns: [{
|
|
679
679
|
type: Input
|
|
680
680
|
}], data: [{
|
|
@@ -752,7 +752,7 @@ const simpleFade = trigger('simpleFade', [
|
|
|
752
752
|
]);
|
|
753
753
|
|
|
754
754
|
const base = createValueAccessor();
|
|
755
|
-
class
|
|
755
|
+
class UicSelectComponent extends base {
|
|
756
756
|
icon = ''; // Icono externo
|
|
757
757
|
iconColor = 'primary'; //color de ícono externo
|
|
758
758
|
internalIcon = ''; //Icono interno
|
|
@@ -815,21 +815,21 @@ class SelectComponent extends base {
|
|
|
815
815
|
this.open = !this.open;
|
|
816
816
|
}
|
|
817
817
|
}
|
|
818
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
819
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type:
|
|
818
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
819
|
+
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", disabled: "disabled", nullable: "nullable", options: "options", showSubtitle: "showSubtitle" }, providers: [
|
|
820
820
|
{
|
|
821
821
|
provide: NG_VALUE_ACCESSOR,
|
|
822
|
-
useExisting: forwardRef(() =>
|
|
822
|
+
useExisting: forwardRef(() => UicSelectComponent),
|
|
823
823
|
multi: true
|
|
824
824
|
}
|
|
825
825
|
], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["inputwrapp"], descendants: true }], 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\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n }\r\n <div class=\"fakeinput-wrapp\" #inputwrapp cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" > \r\n\r\n <!-- INPUT -->\r\n <div (click)=\"openList()\" class=\"fakeinput\" [ngClass]=\"{'activeselect':open, 'errorinput':error, 'disabledinput':disabled}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-content\">{{(value?.text || emptyText)}}</div>\r\n @if (!disabled) {\r\n <i class=\"ri-arrow-down-s-line\"></i>\r\n }\r\n </div> \r\n <!-- DESPLEGABLE -->\r\n @if (open) {\r\n\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"open\"\r\n [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n (backdropClick)=\"closeList()\"\r\n [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n >\r\n\r\n <div class=\"input-options\" @fadeAndRise >\r\n <!-- OPCIONES -->\r\n <div class=\"input-option-scroll\">\r\n @if (options.length > 0 && nullable) {\r\n <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >- Ninguno -</div>\r\n }\r\n\r\n @for (option of options; track $index) {\r\n <div (click)=\"selectOption(option)\" class=\"input-option\">\r\n <div style=\"padding: 2px;\">\r\n <div class=\"f-medium\">{{option.text }}</div>\r\n <div *ngIf=\"showSubtitle\" class=\"f-extralight\">{{option.detail}}</div>\r\n </div>\r\n </div>\r\n }\r\n @if (options.length == 0) {\r\n <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n }\r\n\r\n </div>\r\n <!-- ALERTS -->\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n @if (error) {\r\n <div class=\"fakeinput-alert font-error\">{{error}}</div>\r\n }\r\n </div>\r\n</div>", styles: [":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], animations: [fadeAndRise] });
|
|
826
826
|
}
|
|
827
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
827
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, decorators: [{
|
|
828
828
|
type: Component,
|
|
829
829
|
args: [{ selector: 'ui-select', imports: [CommonModule, OverlayModule], providers: [
|
|
830
830
|
{
|
|
831
831
|
provide: NG_VALUE_ACCESSOR,
|
|
832
|
-
useExisting: forwardRef(() =>
|
|
832
|
+
useExisting: forwardRef(() => UicSelectComponent),
|
|
833
833
|
multi: true
|
|
834
834
|
}
|
|
835
835
|
], animations: [fadeAndRise], 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\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n }\r\n <div class=\"fakeinput-wrapp\" #inputwrapp cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" > \r\n\r\n <!-- INPUT -->\r\n <div (click)=\"openList()\" class=\"fakeinput\" [ngClass]=\"{'activeselect':open, 'errorinput':error, 'disabledinput':disabled}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-content\">{{(value?.text || emptyText)}}</div>\r\n @if (!disabled) {\r\n <i class=\"ri-arrow-down-s-line\"></i>\r\n }\r\n </div> \r\n <!-- DESPLEGABLE -->\r\n @if (open) {\r\n\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"open\"\r\n [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n (backdropClick)=\"closeList()\"\r\n [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n >\r\n\r\n <div class=\"input-options\" @fadeAndRise >\r\n <!-- OPCIONES -->\r\n <div class=\"input-option-scroll\">\r\n @if (options.length > 0 && nullable) {\r\n <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >- Ninguno -</div>\r\n }\r\n\r\n @for (option of options; track $index) {\r\n <div (click)=\"selectOption(option)\" class=\"input-option\">\r\n <div style=\"padding: 2px;\">\r\n <div class=\"f-medium\">{{option.text }}</div>\r\n <div *ngIf=\"showSubtitle\" class=\"f-extralight\">{{option.detail}}</div>\r\n </div>\r\n </div>\r\n }\r\n @if (options.length == 0) {\r\n <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n }\r\n\r\n </div>\r\n <!-- ALERTS -->\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n @if (error) {\r\n <div class=\"fakeinput-alert font-error\">{{error}}</div>\r\n }\r\n </div>\r\n</div>", styles: [":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"] }]
|
|
@@ -860,7 +860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
860
860
|
args: ['inputwrapp']
|
|
861
861
|
}] } });
|
|
862
862
|
|
|
863
|
-
class
|
|
863
|
+
class UicInputComponent {
|
|
864
864
|
icon = ''; // Icono externo
|
|
865
865
|
iconColor = 'secondary'; //color de ícono externo
|
|
866
866
|
internalIcon = ''; //Icono interno
|
|
@@ -880,10 +880,10 @@ class InputComponent {
|
|
|
880
880
|
this.disableBtn = false;
|
|
881
881
|
}, 200);
|
|
882
882
|
}
|
|
883
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
884
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type:
|
|
883
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
884
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicInputComponent, isStandalone: true, selector: "ui-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled" }, outputs: { clickButton: "clickButton" }, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n \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 \r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n }\r\n \r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container pad-{{size}}\" >\r\n <ng-content class=\"myinput\"></ng-content>\r\n </div> \r\n </div>\r\n\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n @if (error) {\r\n <div class=\"fakeinput-alert font-error\">{{error}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
885
885
|
}
|
|
886
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
886
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, decorators: [{
|
|
887
887
|
type: Component,
|
|
888
888
|
args: [{ selector: 'ui-input', imports: [CommonModule], template: "<div class=\"input-wrapper\">\r\n \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 \r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n }\r\n \r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container pad-{{size}}\" >\r\n <ng-content class=\"myinput\"></ng-content>\r\n </div> \r\n </div>\r\n\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n @if (error) {\r\n <div class=\"fakeinput-alert font-error\">{{error}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"] }]
|
|
889
889
|
}], propDecorators: { icon: [{
|
|
@@ -906,16 +906,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
906
906
|
type: Output
|
|
907
907
|
}] } });
|
|
908
908
|
|
|
909
|
-
class
|
|
909
|
+
class UicDynamicFormComponent {
|
|
910
910
|
fields = [];
|
|
911
911
|
form;
|
|
912
912
|
flag = false;
|
|
913
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
914
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type:
|
|
913
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
914
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { fields: "fields", form: "form" }, ngImport: i0, template: "<div class=\"form\" [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','date'].includes(field.type) ) {\r\n <ui-input \r\n [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n [label]=\"field.label\">\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 />\r\n </ui-input>\r\n\r\n }\r\n\r\n @if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n [label]=\"field.label\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n\r\n @if (field.type === 'checkbox') {\r\n <ui-checkbox\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [label]=\"field.label\"\r\n ></ui-checkbox>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:16px;padding-bottom:24px}h2{margin-top:24px}.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: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled", "nullable", "options", "showSubtitle"] }, { 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: ["label", "placeholder", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
915
915
|
}
|
|
916
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
916
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
|
|
917
917
|
type: Component,
|
|
918
|
-
args: [{ selector: 'app-dynamic-form', imports: [ReactiveFormsModule,
|
|
918
|
+
args: [{ selector: 'app-dynamic-form', imports: [ReactiveFormsModule, UicSelectComponent, UicInputComponent, UicCheckboxComponent, FormsModule], template: "<div class=\"form\" [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','date'].includes(field.type) ) {\r\n <ui-input \r\n [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n [label]=\"field.label\">\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 />\r\n </ui-input>\r\n\r\n }\r\n\r\n @if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n [label]=\"field.label\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n\r\n @if (field.type === 'checkbox') {\r\n <ui-checkbox\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [label]=\"field.label\"\r\n ></ui-checkbox>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:16px;padding-bottom:24px}h2{margin-top:24px}.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"] }]
|
|
919
919
|
}], propDecorators: { fields: [{
|
|
920
920
|
type: Input
|
|
921
921
|
}], form: [{
|
|
@@ -923,7 +923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
923
923
|
args: [{ required: true }]
|
|
924
924
|
}] } });
|
|
925
925
|
|
|
926
|
-
class
|
|
926
|
+
class UicFormWrapperComponent {
|
|
927
927
|
schema;
|
|
928
928
|
loading = false;
|
|
929
929
|
initialValues = {};
|
|
@@ -1017,12 +1017,12 @@ class FormWrapperComponent {
|
|
|
1017
1017
|
getStepTitle() {
|
|
1018
1018
|
return this.schema.steps?.[this.currentStep]?.title ?? '';
|
|
1019
1019
|
}
|
|
1020
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
1021
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type:
|
|
1020
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1021
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", loading: "loading", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n\r\n @if (useSteps) {\r\n @if (schema.steps?.length) {\r\n\r\n <div class=\"step-title\">{{ getStepTitle()}}</div>\r\n\r\n <!-- cuerpo: loader o bloques del step -->\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 <div class=\"block-title\">{{ block.title }}</div>\r\n <!-- pasamos solo fields y el formGroup -->\r\n <app-dynamic-form\r\n [fields]=\"block.fields\"\r\n [form]=\"form\">\r\n </app-dynamic-form>\r\n </section>\r\n }\r\n }\r\n\r\n <!-- controles de navegaci\u00F3n -->\r\n <div class=\"step-controls\">\r\n <button type=\"button\" (click)=\"prevStep()\" [disabled]=\"currentStep === 0\">Anterior</button>\r\n\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 <app-dynamic-form\r\n [fields]=\"block.fields\"\r\n [form]=\"form\">\r\n </app-dynamic-form>\r\n }\r\n </section>\r\n }\r\n }\r\n</form>\r\n", styles: [":host{display:block;padding:4px 0}.block-title{font-weight:600;margin:24px 0;font-size:24px;line-height:28px;color:#0a0d12}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "app-dynamic-form", inputs: ["fields", "form"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
1022
1022
|
}
|
|
1023
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
1023
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, decorators: [{
|
|
1024
1024
|
type: Component,
|
|
1025
|
-
args: [{ selector: 'ui-form-wrapper', imports: [
|
|
1025
|
+
args: [{ selector: 'ui-form-wrapper', imports: [UicDynamicFormComponent, UicSkeletonLoaderComponent, ReactiveFormsModule], template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n\r\n @if (useSteps) {\r\n @if (schema.steps?.length) {\r\n\r\n <div class=\"step-title\">{{ getStepTitle()}}</div>\r\n\r\n <!-- cuerpo: loader o bloques del step -->\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 <div class=\"block-title\">{{ block.title }}</div>\r\n <!-- pasamos solo fields y el formGroup -->\r\n <app-dynamic-form\r\n [fields]=\"block.fields\"\r\n [form]=\"form\">\r\n </app-dynamic-form>\r\n </section>\r\n }\r\n }\r\n\r\n <!-- controles de navegaci\u00F3n -->\r\n <div class=\"step-controls\">\r\n <button type=\"button\" (click)=\"prevStep()\" [disabled]=\"currentStep === 0\">Anterior</button>\r\n\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 <app-dynamic-form\r\n [fields]=\"block.fields\"\r\n [form]=\"form\">\r\n </app-dynamic-form>\r\n }\r\n </section>\r\n }\r\n }\r\n</form>\r\n", styles: [":host{display:block;padding:4px 0}.block-title{font-weight:600;margin:24px 0;font-size:24px;line-height:28px;color:#0a0d12}\n"] }]
|
|
1026
1026
|
}], propDecorators: { schema: [{
|
|
1027
1027
|
type: Input
|
|
1028
1028
|
}], loading: [{
|
|
@@ -1033,7 +1033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1033
1033
|
type: Output
|
|
1034
1034
|
}] } });
|
|
1035
1035
|
|
|
1036
|
-
class
|
|
1036
|
+
class UicSearcherComponent {
|
|
1037
1037
|
renderer;
|
|
1038
1038
|
overlay;
|
|
1039
1039
|
positionBuilder;
|
|
@@ -1160,12 +1160,12 @@ class SearcherComponent {
|
|
|
1160
1160
|
this.overlayRef.backdropClick().subscribe(() => this.closeOverlay());
|
|
1161
1161
|
this.overlayRef.overlayElement.style.width = `${width}px`;
|
|
1162
1162
|
}
|
|
1163
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
1164
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SearcherComponent, isStandalone: true, selector: "ui-searcher", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", showSelected: "showSelected", placeholder: "placeholder", searchFn: "searchFn", itemDisplayFn: "itemDisplayFn", itemIsEnabledFn: "itemIsEnabledFn", manualSearch: "manualSearch", selectedItem: "selectedItem" }, outputs: { selectedItemChange: "selectedItemChange" }, viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["inputwrapp"], descendants: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true }], ngImport: i0, template: "\r\n<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 <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n \r\n <div class=\"fakeinput-wrapp\" #inputwrapp >\r\n <!-- INPUT -->\r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (selectedItem == null) { \r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container pad-{{size}}\" >\r\n <input\r\n (focus)=\"openList()\"\r\n type=\"text\"\r\n (keydown.enter)=\"triggerSearch()\"\r\n (keydown.escape)=\"clearSearch()\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"onSearchChange($event)\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n </div> \r\n @if (manualSearch) {\r\n <ui-button (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n }\r\n <ui-button size=\"t\" icon=\"ri-close-large-line\" (click)=\"clearSearch()\"></ui-button>\r\n }@else {\r\n <div class=\"input-container pad-{{size}}\" >\r\n <div class=\"selected-item\" >\r\n <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn(selectedItem)\"></div> \r\n <ui-button (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n @if (error) {\r\n <div class=\"fakeinput-alert font-error\">{{error}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n @if (results$ | async; as items){\r\n <div class=\"results\">\r\n @if (isLoading) {\r\n <div class=\"loader\"></div>\r\n }\r\n <div class=\"input-option-scroll\">\r\n @for (item of items; track $index) {\r\n <div class=\"input-option\" [class.item-disabled]=\"!itemIsEnabledFn(item)\" (click)=\"selectItem(item)\" [innerHTML]=\"itemDisplayFn(item)\">\r\n </div>\r\n }@empty {\r\n <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".loader{height:4px;width:100%;--c:no-repeat linear-gradient(#6100ee 0 0);background:var(--c),var(--c),#d7b8fc;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}}.wrapp-fakeinput{position:relative}.selected-item{border-radius:5px;background-color:#592371;padding-left:10px;height:25px;display:flex;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}.results{background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px #e9eaeb;border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
|
|
1163
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, deps: [{ token: i0.Renderer2 }, { token: i1$2.Overlay }, { token: i1$2.OverlayPositionBuilder }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSearcherComponent, isStandalone: true, selector: "ui-searcher", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", showSelected: "showSelected", placeholder: "placeholder", searchFn: "searchFn", itemDisplayFn: "itemDisplayFn", itemIsEnabledFn: "itemIsEnabledFn", manualSearch: "manualSearch", selectedItem: "selectedItem" }, outputs: { selectedItemChange: "selectedItemChange" }, viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["inputwrapp"], descendants: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true }], ngImport: i0, template: "\r\n<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 <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n \r\n <div class=\"fakeinput-wrapp\" #inputwrapp >\r\n <!-- INPUT -->\r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (selectedItem == null) { \r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container pad-{{size}}\" >\r\n <input\r\n (focus)=\"openList()\"\r\n type=\"text\"\r\n (keydown.enter)=\"triggerSearch()\"\r\n (keydown.escape)=\"clearSearch()\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"onSearchChange($event)\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n </div> \r\n @if (manualSearch) {\r\n <ui-button (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n }\r\n <ui-button size=\"t\" icon=\"ri-close-large-line\" (click)=\"clearSearch()\"></ui-button>\r\n }@else {\r\n <div class=\"input-container pad-{{size}}\" >\r\n <div class=\"selected-item\" >\r\n <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn(selectedItem)\"></div> \r\n <ui-button (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n @if (error) {\r\n <div class=\"fakeinput-alert font-error\">{{error}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n @if (results$ | async; as items){\r\n <div class=\"results\">\r\n @if (isLoading) {\r\n <div class=\"loader\"></div>\r\n }\r\n <div class=\"input-option-scroll\">\r\n @for (item of items; track $index) {\r\n <div class=\"input-option\" [class.item-disabled]=\"!itemIsEnabledFn(item)\" (click)=\"selectItem(item)\" [innerHTML]=\"itemDisplayFn(item)\">\r\n </div>\r\n }@empty {\r\n <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".loader{height:4px;width:100%;--c:no-repeat linear-gradient(#6100ee 0 0);background:var(--c),var(--c),#d7b8fc;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}}.wrapp-fakeinput{position:relative}.selected-item{border-radius:5px;background-color:#592371;padding-left:10px;height:25px;display:flex;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}.results{background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px #e9eaeb;border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
|
|
1165
1165
|
}
|
|
1166
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
1166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, decorators: [{
|
|
1167
1167
|
type: Component,
|
|
1168
|
-
args: [{ selector: 'ui-searcher', imports: [CommonModule, FormsModule, AsyncPipe,
|
|
1168
|
+
args: [{ selector: 'ui-searcher', imports: [CommonModule, FormsModule, AsyncPipe, UicButtonComponent], template: "\r\n<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 <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n \r\n <div class=\"fakeinput-wrapp\" #inputwrapp >\r\n <!-- INPUT -->\r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (selectedItem == null) { \r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"input-container pad-{{size}}\" >\r\n <input\r\n (focus)=\"openList()\"\r\n type=\"text\"\r\n (keydown.enter)=\"triggerSearch()\"\r\n (keydown.escape)=\"clearSearch()\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"onSearchChange($event)\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n </div> \r\n @if (manualSearch) {\r\n <ui-button (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n }\r\n <ui-button size=\"t\" icon=\"ri-close-large-line\" (click)=\"clearSearch()\"></ui-button>\r\n }@else {\r\n <div class=\"input-container pad-{{size}}\" >\r\n <div class=\"selected-item\" >\r\n <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn(selectedItem)\"></div> \r\n <ui-button (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n @if (error) {\r\n <div class=\"fakeinput-alert font-error\">{{error}}</div>\r\n }\r\n \r\n </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n @if (results$ | async; as items){\r\n <div class=\"results\">\r\n @if (isLoading) {\r\n <div class=\"loader\"></div>\r\n }\r\n <div class=\"input-option-scroll\">\r\n @for (item of items; track $index) {\r\n <div class=\"input-option\" [class.item-disabled]=\"!itemIsEnabledFn(item)\" (click)=\"selectItem(item)\" [innerHTML]=\"itemDisplayFn(item)\">\r\n </div>\r\n }@empty {\r\n <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".loader{height:4px;width:100%;--c:no-repeat linear-gradient(#6100ee 0 0);background:var(--c),var(--c),#d7b8fc;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}}.wrapp-fakeinput{position:relative}.selected-item{border-radius:5px;background-color:#592371;padding-left:10px;height:25px;display:flex;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}.results{background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px #e9eaeb;border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"] }]
|
|
1169
1169
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1$2.Overlay }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ViewContainerRef }], propDecorators: { icon: [{
|
|
1170
1170
|
type: Input
|
|
1171
1171
|
}], iconColor: [{
|
|
@@ -1290,12 +1290,12 @@ class SideModalComponent {
|
|
|
1290
1290
|
save() {
|
|
1291
1291
|
this.modal.triggerSave();
|
|
1292
1292
|
}
|
|
1293
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SideModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }, { token:
|
|
1294
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SideModalComponent, isStandalone: true, selector: "app-side-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\"> \r\n</div>\r\n<div [@sideModal]=\"state\" (@sideModal.done)=\"onAnimationDone($event)\" class=\"sidemodal\" [style.width]=\"myConfig.width??'60%'\" (click)=\"$event.stopPropagation()\">\r\n <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n @if (myConfig.footerEnabled) {\r\n <div class=\"sidemodal-footer\">\r\n @if (myConfig.showCancelButton) {\r\n <ui-button (click)=\"close()\" color=\"black\" size=\"l\" type=\"bordered\" icon=\"ri-close-line\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n }\r\n <ui-button (click)=\"save()\" color=\"black\" size=\"l\" rightIcon=\"ri-check-line\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n </div>\r\n }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:32px;height:32px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:#fff;display:flex;flex-direction:column;padding-top:28px}.sidemodal-header{height:32px;width:100%;padding:0 32px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:96px;padding:24px 40px;width:100%;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid #d5d7da}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type:
|
|
1293
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SideModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }, { token: UicModalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1294
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SideModalComponent, isStandalone: true, selector: "app-side-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\"> \r\n</div>\r\n<div [@sideModal]=\"state\" (@sideModal.done)=\"onAnimationDone($event)\" class=\"sidemodal\" [style.width]=\"myConfig.width??'60%'\" (click)=\"$event.stopPropagation()\">\r\n <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n @if (myConfig.footerEnabled) {\r\n <div class=\"sidemodal-footer\">\r\n @if (myConfig.showCancelButton) {\r\n <ui-button (click)=\"close()\" color=\"black\" size=\"l\" type=\"bordered\" icon=\"ri-close-line\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n }\r\n <ui-button (click)=\"save()\" color=\"black\" size=\"l\" rightIcon=\"ri-check-line\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n </div>\r\n }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:32px;height:32px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:#fff;display:flex;flex-direction:column;padding-top:28px}.sidemodal-header{height:32px;width:100%;padding:0 32px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:96px;padding:24px 40px;width:100%;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid #d5d7da}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [sideModal, fadeBackdrop] });
|
|
1295
1295
|
}
|
|
1296
1296
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SideModalComponent, decorators: [{
|
|
1297
1297
|
type: Component,
|
|
1298
|
-
args: [{ selector: 'app-side-modal', imports: [PortalModule,
|
|
1298
|
+
args: [{ selector: 'app-side-modal', imports: [PortalModule, UicButtonComponent], animations: [sideModal, fadeBackdrop], template: "<div [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\"> \r\n</div>\r\n<div [@sideModal]=\"state\" (@sideModal.done)=\"onAnimationDone($event)\" class=\"sidemodal\" [style.width]=\"myConfig.width??'60%'\" (click)=\"$event.stopPropagation()\">\r\n <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n @if (myConfig.footerEnabled) {\r\n <div class=\"sidemodal-footer\">\r\n @if (myConfig.showCancelButton) {\r\n <ui-button (click)=\"close()\" color=\"black\" size=\"l\" type=\"bordered\" icon=\"ri-close-line\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n }\r\n <ui-button (click)=\"save()\" color=\"black\" size=\"l\" rightIcon=\"ri-check-line\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n </div>\r\n }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:32px;height:32px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:#fff;display:flex;flex-direction:column;padding-top:28px}.sidemodal-header{height:32px;width:100%;padding:0 32px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:96px;padding:24px 40px;width:100%;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid #d5d7da}\n"] }]
|
|
1299
1299
|
}], ctorParameters: () => [{ type: UiModalRef, decorators: [{
|
|
1300
1300
|
type: Inject,
|
|
1301
1301
|
args: [UiModalRef]
|
|
@@ -1305,7 +1305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1305
1305
|
}] }, { type: undefined, decorators: [{
|
|
1306
1306
|
type: Inject,
|
|
1307
1307
|
args: [MODAL_CONFIG]
|
|
1308
|
-
}] }, { type: i0.Injector }, { type:
|
|
1308
|
+
}] }, { type: i0.Injector }, { type: UicModalService }], propDecorators: { portalOutlet: [{
|
|
1309
1309
|
type: ViewChild,
|
|
1310
1310
|
args: [CdkPortalOutlet, { static: true }]
|
|
1311
1311
|
}] } });
|
|
@@ -1346,11 +1346,11 @@ class ModalComponent {
|
|
|
1346
1346
|
this.modalRef.closeFloating(null);
|
|
1347
1347
|
}
|
|
1348
1348
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
1349
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ModalComponent, isStandalone: true, selector: "app-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"backdrop\" (click)=\"closeOuside()\"> \r\n <div @pushTop class=\"modal\" \r\n [class]=\"myConfig.size\"\r\n (click)=\"$event.stopPropagation()\">\r\n \r\n @if ( myConfig.title) {\r\n <div class=\"modal-header\">\r\n {{myConfig.title}}\r\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n </div>\r\n }\r\n <div class=\"modal-body\" [class.body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n\r\n </div>\r\n</div>", styles: [".backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 767px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:#fff;border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;padding:0 10px;display:flex;flex-direction:column}.modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:#592371;height:63px;border-bottom:solid 1px #592371}@media (max-width: 767px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 767px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 767px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 767px){.large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type:
|
|
1349
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ModalComponent, isStandalone: true, selector: "app-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"backdrop\" (click)=\"closeOuside()\"> \r\n <div @pushTop class=\"modal\" \r\n [class]=\"myConfig.size\"\r\n (click)=\"$event.stopPropagation()\">\r\n \r\n @if ( myConfig.title) {\r\n <div class=\"modal-header\">\r\n {{myConfig.title}}\r\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n </div>\r\n }\r\n <div class=\"modal-body\" [class.body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n\r\n </div>\r\n</div>", styles: [".backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 767px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:#fff;border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;padding:0 10px;display:flex;flex-direction:column}.modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:#592371;height:63px;border-bottom:solid 1px #592371}@media (max-width: 767px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 767px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 767px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 767px){.large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
|
|
1350
1350
|
}
|
|
1351
1351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalComponent, decorators: [{
|
|
1352
1352
|
type: Component,
|
|
1353
|
-
args: [{ selector: 'app-modal', imports: [CommonModule, PortalModule,
|
|
1353
|
+
args: [{ selector: 'app-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div class=\"backdrop\" (click)=\"closeOuside()\"> \r\n <div @pushTop class=\"modal\" \r\n [class]=\"myConfig.size\"\r\n (click)=\"$event.stopPropagation()\">\r\n \r\n @if ( myConfig.title) {\r\n <div class=\"modal-header\">\r\n {{myConfig.title}}\r\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n </div>\r\n }\r\n <div class=\"modal-body\" [class.body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n\r\n </div>\r\n</div>", styles: [".backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 767px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:#fff;border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;padding:0 10px;display:flex;flex-direction:column}.modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:#592371;height:63px;border-bottom:solid 1px #592371}@media (max-width: 767px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 767px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 767px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 767px){.large{width:95%}}\n"] }]
|
|
1354
1354
|
}], ctorParameters: () => [{ type: UiModalRef, decorators: [{
|
|
1355
1355
|
type: Inject,
|
|
1356
1356
|
args: [UiModalRef]
|
|
@@ -1365,7 +1365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1365
1365
|
args: [CdkPortalOutlet, { static: true }]
|
|
1366
1366
|
}] } });
|
|
1367
1367
|
|
|
1368
|
-
class
|
|
1368
|
+
class UicModalService {
|
|
1369
1369
|
overlay = inject(Overlay);
|
|
1370
1370
|
envInjector = inject(EnvironmentInjector);
|
|
1371
1371
|
openFloatingModal(component, config = {}) {
|
|
@@ -1425,10 +1425,10 @@ class UiModalService {
|
|
|
1425
1425
|
parent: this.envInjector,
|
|
1426
1426
|
});
|
|
1427
1427
|
}
|
|
1428
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
1429
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
1428
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1429
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalService, providedIn: 'root' });
|
|
1430
1430
|
}
|
|
1431
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
1431
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalService, decorators: [{
|
|
1432
1432
|
type: Injectable,
|
|
1433
1433
|
args: [{
|
|
1434
1434
|
providedIn: 'root'
|
|
@@ -1447,11 +1447,11 @@ class TinyAlertComponent {
|
|
|
1447
1447
|
this.modalRef.closeFloating(value ? this.response : null);
|
|
1448
1448
|
}
|
|
1449
1449
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, deps: [{ token: MODAL_DATA }, { token: UiModalRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1450
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "lib-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath != '') {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }\r\n <h3> {{data.title}} </h3>\r\n <div class=\"alert-body\" [innerHTML]=\"data.body\"> </div>\r\n <div class=\"card-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'primary'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n </div>\r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:700;line-height:24px;text-align:center;color:#717680}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:#f04438}@media (max-width: 767px){.floating-close{top:0;right:-5px}}\n"], dependencies: [{ kind: "component", type:
|
|
1450
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "lib-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath != '') {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }\r\n <h3> {{data.title}} </h3>\r\n <div class=\"alert-body\" [innerHTML]=\"data.body\"> </div>\r\n <div class=\"card-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'primary'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n </div>\r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:700;line-height:24px;text-align:center;color:#717680}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:#f04438}@media (max-width: 767px){.floating-close{top:0;right:-5px}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
|
|
1451
1451
|
}
|
|
1452
1452
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, decorators: [{
|
|
1453
1453
|
type: Component,
|
|
1454
|
-
args: [{ selector: 'lib-tiny-alert', imports: [
|
|
1454
|
+
args: [{ selector: 'lib-tiny-alert', imports: [UicButtonComponent], template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath != '') {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }\r\n <h3> {{data.title}} </h3>\r\n <div class=\"alert-body\" [innerHTML]=\"data.body\"> </div>\r\n <div class=\"card-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'primary'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n </div>\r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:700;line-height:24px;text-align:center;color:#717680}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:#f04438}@media (max-width: 767px){.floating-close{top:0;right:-5px}}\n"] }]
|
|
1455
1455
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1456
1456
|
type: Inject,
|
|
1457
1457
|
args: [MODAL_DATA]
|
|
@@ -1460,8 +1460,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1460
1460
|
args: [UiModalRef]
|
|
1461
1461
|
}] }] });
|
|
1462
1462
|
|
|
1463
|
-
class
|
|
1464
|
-
modal = inject(
|
|
1463
|
+
class UicTinyAlertService {
|
|
1464
|
+
modal = inject(UicModalService);
|
|
1465
1465
|
showAlert(data) {
|
|
1466
1466
|
return new Promise((resolve) => {
|
|
1467
1467
|
this.modal.openFloatingModal(TinyAlertComponent, {
|
|
@@ -1474,10 +1474,10 @@ class TinyAlertService {
|
|
|
1474
1474
|
});
|
|
1475
1475
|
});
|
|
1476
1476
|
}
|
|
1477
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
1478
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
1477
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTinyAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1478
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTinyAlertService, providedIn: 'root' });
|
|
1479
1479
|
}
|
|
1480
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
1480
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTinyAlertService, decorators: [{
|
|
1481
1481
|
type: Injectable,
|
|
1482
1482
|
args: [{
|
|
1483
1483
|
providedIn: 'root'
|
|
@@ -1488,5 +1488,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1488
1488
|
* Generated bundle index. Do not edit.
|
|
1489
1489
|
*/
|
|
1490
1490
|
|
|
1491
|
-
export { AlertContainerComponent,
|
|
1491
|
+
export { AlertContainerComponent, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiModalRef, UicButtonComponent, UicCheckboxComponent, UicFormWrapperComponent, UicInputComponent, UicModalService, UicNameInitsPipe, UicPushAlertService, UicSearcherComponent, UicSelectComponent, UicSkeletonLoaderComponent, UicSwichComponent, UicTableComponent, UicTinyAlertService, UicToolTipDirective, animatedRow, fadeAndRise, fadeBackdrop, highlightRow, pushTop, sideModal, simpleFade };
|
|
1492
1492
|
//# sourceMappingURL=ui-core-abv.mjs.map
|