ui-core-abv 0.3.82 → 0.4.1
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 +852 -682
- package/fesm2022/ui-core-abv.mjs.map +1 -1
- package/lib/components/accordion/accordion.component.d.ts +11 -0
- package/lib/components/item-value/item-value.component.d.ts +22 -0
- package/lib/components/modal/side-modal/side-modal.component.d.ts +0 -1
- package/lib/components/modal/side-modal/sideModalConfig.model.d.ts +1 -0
- package/lib/components/short-table/short-table.component.d.ts +15 -0
- package/lib/components/table/table.component.d.ts +5 -8
- package/lib/components/table/table.models.d.ts +3 -14
- package/lib/components/tabs-button/tabs-button.component.d.ts +1 -0
- package/lib/components/uic-portlet-card/uic-portlet-card.component.d.ts +18 -7
- package/lib/helpers.d.ts +1 -0
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
- package/src/lib/styles/_mixins.scss +2 -2
- package/src/lib/styles/_tokens.scss +4 -1
package/fesm2022/ui-core-abv.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Input, Component, EventEmitter, Output, Directive, forwardRef, inject, ViewContainerRef, ElementRef, ViewChild, HostListener, ViewChildren, Injectable, InjectionToken, TemplateRef, ContentChild, createComponent, Pipe,
|
|
4
|
+
import { Input, Component, EventEmitter, Output, Directive, forwardRef, inject, ViewContainerRef, ElementRef, ViewChild, HostListener, ViewChildren, Injectable, InjectionToken, TemplateRef, ContentChild, createComponent, Pipe, Inject, Injector, EnvironmentInjector } from '@angular/core';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
6
6
|
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
|
|
7
7
|
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
|
|
@@ -31,11 +31,11 @@ class UicButtonComponent {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
34
|
-
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 type=\"button\"\r\n [class]=\"'main-btn ' + buttonTypeClass\"\r\n [disabled]=\"disabled
|
|
34
|
+
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 type=\"button\"\r\n [class]=\"'main-btn ' + buttonTypeClass\"\r\n [disabled]=\"disabled\"\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 (icon!='' && !loading ) {\r\n <i class=\"{{icon}}\"></i>\r\n }\r\n @if (loading) {\r\n <div class=\"loader-container\"> <div class=\"loader\"></div> </div>\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</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:var(--button-radius);padding:0;white-space:nowrap;outline:none}.main-btn:focus,.main-btn:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.noicon{padding-left:1rem}.norighticon{padding-right:1rem}.btn-text{font-weight:500}.btn-tiny{height:calc(2.3 * var(--form-ref));min-width:calc(2.3 * var(--form-ref))}.btn-tiny>.btn-text{font-size:.625rem;line-height:calc(2.3 * var(--form-ref))}.btn-tiny i{font-size:.875rem;line-height:calc(2.3 * var(--form-ref));width:calc(2.3 * var(--form-ref))}.btn-tiny .btn-loader{line-height:.625rem;width:.625rem}.btn-small{height:calc(3 * var(--form-ref));min-width:calc(3 * var(--form-ref))}.btn-small>.btn-text{font-size:.75rem;line-height:calc(3 * var(--form-ref))}.btn-small i{font-size:1rem;line-height:calc(3 * var(--form-ref));width:calc(3 * var(--form-ref))}.btn-small .btn-loader{line-height:.75rem;width:.75rem}.btn-medium{height:calc(4 * var(--form-ref));min-width:calc(4 * var(--form-ref))}.btn-medium>.btn-text{font-size:.875rem;line-height:calc(4 * var(--form-ref))}.btn-medium i{font-size:1.625rem;line-height:calc(4 * var(--form-ref));width:calc(4 * var(--form-ref))}.btn-medium .btn-loader{line-height:.875rem;width:.875rem}.btn-large{height:calc(4.6 * var(--form-ref));min-width:calc(4.6 * var(--form-ref))}.btn-large>.btn-text{font-size:1rem;line-height:calc(4.6 * var(--form-ref))}.btn-large i{font-size:1.625rem;line-height:calc(4.6 * var(--form-ref));width:calc(4.6 * var(--form-ref))}.btn-large .btn-loader{line-height:1rem;width:1rem}.btn-gigant{height:calc(5.4 * var(--form-ref));min-width:calc(5.4 * var(--form-ref))}.btn-gigant>.btn-text{font-size:1.125rem;line-height:calc(5.4 * var(--form-ref))}.btn-gigant i{font-size:1.625rem;line-height:calc(5.4 * var(--form-ref));width:calc(5.4 * var(--form-ref))}.btn-gigant .btn-loader{line-height:1.125rem;width:1.125rem}.btn-filled{color:var(--white);transition:background .3s ease;cursor:pointer}.btn-filled:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-bordered{border:solid 1px var(--grey-200);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-bordered:disabled{cursor:not-allowed;color:var(--grey-300);border-color:var(--grey-300)}.btn-ghost{color:var(--grey-800);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-ghost:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-primary-filled{background-color:var(--primary-400)}.btn-primary-filled:hover{background-color:var(--primary-600)}.btn-primary-filled:active{background-color:var(--primary-900)}.btn-primary-filled:disabled{background-color:var(--primary-100)}.btn-primary-bordered{border-color:var(--primary-400);color:var(--primary-400)}.btn-primary-bordered:hover{background-color:var(--primary-100)}.btn-primary-bordered:active{background-color:var(--primary-300)}.btn-primary-bordered:disabled{background-color:var(--primary-100)}.btn-primary-ghost:hover{background-color:var(--primary-100)}.btn-primary-ghost:active{background-color:var(--primary-300)}.btn-primary-ghost:disabled{background-color:transparent}.btn-black-filled{background-color:var(--grey-950)}.btn-black-filled:hover{background-color:var(--secondary-500)}.btn-black-filled:active{background-color:var(--secondary-800)}.btn-black-filled:disabled{background-color:var(--grey-100)}.btn-black-bordered{color:var(--grey-700)}.btn-black-bordered:hover{background-color:var(--secondary-100)}.btn-black-bordered:active{background-color:var(--secondary-300)}.btn-black-bordered:disabled{background-color:var(--grey-50)}.btn-black-ghost:hover{background-color:var(--secondary-100)}.btn-black-ghost:active{background-color:var(--secondary-300)}.btn-black-ghost:disabled{background-color:transparent}.btn-green-filled{background-color:var(--green-400)}.btn-green-filled:hover{background-color:var(--green-600)}.btn-green-filled:active{background-color:var(--green-900)}.btn-green-filled:disabled{background-color:var(--green-100)}.btn-green-bordered{border-color:var(--green-400);color:var(--green-400)}.btn-green-bordered:hover{background-color:var(--green-100)}.btn-green-bordered:active{background-color:var(--green-300)}.btn-green-bordered:disabled{background-color:var(--green-100)}.btn-green-ghost:hover{background-color:var(--green-100)}.btn-green-ghost:active{background-color:var(--green-300)}.btn-green-ghost:disabled{background-color:transparent}.btn-yellow-filled{background-color:var(--yellow-400)}.btn-yellow-filled:hover{background-color:var(--yellow-600)}.btn-yellow-filled:active{background-color:var(--yellow-900)}.btn-yellow-filled:disabled{background-color:var(--yellow-100)}.btn-yellow-bordered{border-color:var(--yellow-400);color:var(--yellow-400)}.btn-yellow-bordered:hover{background-color:var(--yellow-100)}.btn-yellow-bordered:active{background-color:var(--yellow-300)}.btn-yellow-bordered:disabled{background-color:var(--yellow-100)}.btn-yellow-ghost:hover{background-color:var(--yellow-100)}.btn-yellow-ghost:active{background-color:var(--yellow-300)}.btn-yellow-ghost:disabled{background-color:transparent}.btn-blue-filled{background-color:var(--blue-500)}.btn-blue-filled:hover{background-color:var(--blue-600)}.btn-blue-filled:active{background-color:var(--blue-900)}.btn-blue-filled:disabled{background-color:var(--blue-100)}.btn-blue-bordered{border-color:var(--blue-500);color:var(--blue-500)}.btn-blue-bordered:hover{background-color:var(--blue-100)}.btn-blue-bordered:active{background-color:var(--blue-300)}.btn-blue-bordered:disabled{background-color:var(--blue-100)}.btn-blue-ghost:hover{background-color:var(--blue-100)}.btn-blue-ghost:active{background-color:var(--blue-300)}.btn-blue-ghost:disabled{background-color:transparent}.btn-red-filled{background-color:var(--red-400)}.btn-red-filled:hover{background-color:var(--red-600)}.btn-red-filled:active{background-color:var(--red-900)}.btn-red-filled:disabled{background-color:var(--red-100)}.btn-red-bordered{border-color:var(--primary-500);color:var(--red-500)}.btn-red-bordered:hover{background-color:var(--red-100)}.btn-red-bordered:active{background-color:var(--red-300)}.btn-red-bordered:disabled{background-color:var(--red-100)}.btn-red-ghost:hover{background-color:var(--red-100)}.btn-red-ghost:active{background-color:var(--red-300)}.btn-red-ghost:disabled{background-color:transparent}.btn-grey-filled{background-color:var(--grey-400)}.btn-grey-filled:hover{background-color:var(--grey-600)}.btn-grey-filled:active{background-color:var(--grey-900)}.btn-grey-filled:disabled{background-color:var(--grey-100)}.btn-grey-bordered{border-color:var(--grey-500);color:var(--grey-500)}.btn-grey-bordered:hover{background-color:var(--grey-100)}.btn-grey-bordered:active{background-color:var(--grey-300)}.btn-grey-bordered:disabled{background-color:var(--grey-100)}.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 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-200)}33%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-600)}66%{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-600)}to{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-200)}}.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%)}}.loader{width:20px;aspect-ratio:1;border-radius:50%;border:4px solid rgba(255,255,255,.913);border-right-color:#ffffff5b;animation:l2 1s infinite linear}.loader-container{padding-left:10px}@keyframes l2{to{transform:rotate(1turn)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
35
35
|
}
|
|
36
36
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicButtonComponent, decorators: [{
|
|
37
37
|
type: Component,
|
|
38
|
-
args: [{ selector: 'ui-button', imports: [CommonModule], template: "<button\r\n type=\"button\"\r\n [class]=\"'main-btn ' + buttonTypeClass\"\r\n [disabled]=\"disabled
|
|
38
|
+
args: [{ selector: 'ui-button', imports: [CommonModule], template: "<button\r\n type=\"button\"\r\n [class]=\"'main-btn ' + buttonTypeClass\"\r\n [disabled]=\"disabled\"\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 (icon!='' && !loading ) {\r\n <i class=\"{{icon}}\"></i>\r\n }\r\n @if (loading) {\r\n <div class=\"loader-container\"> <div class=\"loader\"></div> </div>\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</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:var(--button-radius);padding:0;white-space:nowrap;outline:none}.main-btn:focus,.main-btn:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.noicon{padding-left:1rem}.norighticon{padding-right:1rem}.btn-text{font-weight:500}.btn-tiny{height:calc(2.3 * var(--form-ref));min-width:calc(2.3 * var(--form-ref))}.btn-tiny>.btn-text{font-size:.625rem;line-height:calc(2.3 * var(--form-ref))}.btn-tiny i{font-size:.875rem;line-height:calc(2.3 * var(--form-ref));width:calc(2.3 * var(--form-ref))}.btn-tiny .btn-loader{line-height:.625rem;width:.625rem}.btn-small{height:calc(3 * var(--form-ref));min-width:calc(3 * var(--form-ref))}.btn-small>.btn-text{font-size:.75rem;line-height:calc(3 * var(--form-ref))}.btn-small i{font-size:1rem;line-height:calc(3 * var(--form-ref));width:calc(3 * var(--form-ref))}.btn-small .btn-loader{line-height:.75rem;width:.75rem}.btn-medium{height:calc(4 * var(--form-ref));min-width:calc(4 * var(--form-ref))}.btn-medium>.btn-text{font-size:.875rem;line-height:calc(4 * var(--form-ref))}.btn-medium i{font-size:1.625rem;line-height:calc(4 * var(--form-ref));width:calc(4 * var(--form-ref))}.btn-medium .btn-loader{line-height:.875rem;width:.875rem}.btn-large{height:calc(4.6 * var(--form-ref));min-width:calc(4.6 * var(--form-ref))}.btn-large>.btn-text{font-size:1rem;line-height:calc(4.6 * var(--form-ref))}.btn-large i{font-size:1.625rem;line-height:calc(4.6 * var(--form-ref));width:calc(4.6 * var(--form-ref))}.btn-large .btn-loader{line-height:1rem;width:1rem}.btn-gigant{height:calc(5.4 * var(--form-ref));min-width:calc(5.4 * var(--form-ref))}.btn-gigant>.btn-text{font-size:1.125rem;line-height:calc(5.4 * var(--form-ref))}.btn-gigant i{font-size:1.625rem;line-height:calc(5.4 * var(--form-ref));width:calc(5.4 * var(--form-ref))}.btn-gigant .btn-loader{line-height:1.125rem;width:1.125rem}.btn-filled{color:var(--white);transition:background .3s ease;cursor:pointer}.btn-filled:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-bordered{border:solid 1px var(--grey-200);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-bordered:disabled{cursor:not-allowed;color:var(--grey-300);border-color:var(--grey-300)}.btn-ghost{color:var(--grey-800);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-ghost:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-primary-filled{background-color:var(--primary-400)}.btn-primary-filled:hover{background-color:var(--primary-600)}.btn-primary-filled:active{background-color:var(--primary-900)}.btn-primary-filled:disabled{background-color:var(--primary-100)}.btn-primary-bordered{border-color:var(--primary-400);color:var(--primary-400)}.btn-primary-bordered:hover{background-color:var(--primary-100)}.btn-primary-bordered:active{background-color:var(--primary-300)}.btn-primary-bordered:disabled{background-color:var(--primary-100)}.btn-primary-ghost:hover{background-color:var(--primary-100)}.btn-primary-ghost:active{background-color:var(--primary-300)}.btn-primary-ghost:disabled{background-color:transparent}.btn-black-filled{background-color:var(--grey-950)}.btn-black-filled:hover{background-color:var(--secondary-500)}.btn-black-filled:active{background-color:var(--secondary-800)}.btn-black-filled:disabled{background-color:var(--grey-100)}.btn-black-bordered{color:var(--grey-700)}.btn-black-bordered:hover{background-color:var(--secondary-100)}.btn-black-bordered:active{background-color:var(--secondary-300)}.btn-black-bordered:disabled{background-color:var(--grey-50)}.btn-black-ghost:hover{background-color:var(--secondary-100)}.btn-black-ghost:active{background-color:var(--secondary-300)}.btn-black-ghost:disabled{background-color:transparent}.btn-green-filled{background-color:var(--green-400)}.btn-green-filled:hover{background-color:var(--green-600)}.btn-green-filled:active{background-color:var(--green-900)}.btn-green-filled:disabled{background-color:var(--green-100)}.btn-green-bordered{border-color:var(--green-400);color:var(--green-400)}.btn-green-bordered:hover{background-color:var(--green-100)}.btn-green-bordered:active{background-color:var(--green-300)}.btn-green-bordered:disabled{background-color:var(--green-100)}.btn-green-ghost:hover{background-color:var(--green-100)}.btn-green-ghost:active{background-color:var(--green-300)}.btn-green-ghost:disabled{background-color:transparent}.btn-yellow-filled{background-color:var(--yellow-400)}.btn-yellow-filled:hover{background-color:var(--yellow-600)}.btn-yellow-filled:active{background-color:var(--yellow-900)}.btn-yellow-filled:disabled{background-color:var(--yellow-100)}.btn-yellow-bordered{border-color:var(--yellow-400);color:var(--yellow-400)}.btn-yellow-bordered:hover{background-color:var(--yellow-100)}.btn-yellow-bordered:active{background-color:var(--yellow-300)}.btn-yellow-bordered:disabled{background-color:var(--yellow-100)}.btn-yellow-ghost:hover{background-color:var(--yellow-100)}.btn-yellow-ghost:active{background-color:var(--yellow-300)}.btn-yellow-ghost:disabled{background-color:transparent}.btn-blue-filled{background-color:var(--blue-500)}.btn-blue-filled:hover{background-color:var(--blue-600)}.btn-blue-filled:active{background-color:var(--blue-900)}.btn-blue-filled:disabled{background-color:var(--blue-100)}.btn-blue-bordered{border-color:var(--blue-500);color:var(--blue-500)}.btn-blue-bordered:hover{background-color:var(--blue-100)}.btn-blue-bordered:active{background-color:var(--blue-300)}.btn-blue-bordered:disabled{background-color:var(--blue-100)}.btn-blue-ghost:hover{background-color:var(--blue-100)}.btn-blue-ghost:active{background-color:var(--blue-300)}.btn-blue-ghost:disabled{background-color:transparent}.btn-red-filled{background-color:var(--red-400)}.btn-red-filled:hover{background-color:var(--red-600)}.btn-red-filled:active{background-color:var(--red-900)}.btn-red-filled:disabled{background-color:var(--red-100)}.btn-red-bordered{border-color:var(--primary-500);color:var(--red-500)}.btn-red-bordered:hover{background-color:var(--red-100)}.btn-red-bordered:active{background-color:var(--red-300)}.btn-red-bordered:disabled{background-color:var(--red-100)}.btn-red-ghost:hover{background-color:var(--red-100)}.btn-red-ghost:active{background-color:var(--red-300)}.btn-red-ghost:disabled{background-color:transparent}.btn-grey-filled{background-color:var(--grey-400)}.btn-grey-filled:hover{background-color:var(--grey-600)}.btn-grey-filled:active{background-color:var(--grey-900)}.btn-grey-filled:disabled{background-color:var(--grey-100)}.btn-grey-bordered{border-color:var(--grey-500);color:var(--grey-500)}.btn-grey-bordered:hover{background-color:var(--grey-100)}.btn-grey-bordered:active{background-color:var(--grey-300)}.btn-grey-bordered:disabled{background-color:var(--grey-100)}.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 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-200)}33%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-600)}66%{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-600)}to{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-200)}}.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%)}}.loader{width:20px;aspect-ratio:1;border-radius:50%;border:4px solid rgba(255,255,255,.913);border-right-color:#ffffff5b;animation:l2 1s infinite linear}.loader-container{padding-left:10px}@keyframes l2{to{transform:rotate(1turn)}}\n"] }]
|
|
39
39
|
}], propDecorators: { text: [{
|
|
40
40
|
type: Input
|
|
41
41
|
}], icon: [{
|
|
@@ -3468,11 +3468,11 @@ class UicTableUicSearcherComponent {
|
|
|
3468
3468
|
}
|
|
3469
3469
|
}
|
|
3470
3470
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3471
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown", showButtonText: "showButtonText", showSearchButton: "showSearchButton" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"ui-table-searcher\">\r\n <
|
|
3471
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown", showButtonText: "showButtonText", showSearchButton: "showSearchButton" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"ui-table-searcher\">\r\n <ui-input [internalIcon]=\"!showSearchButton?'ri-search-line':''\">\r\n <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n </ui-input>\r\n @if (showSearchButton) {\r\n <ui-button [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"showSearchButton ri-search-2-line\" size=\"m\">{{showButtonText?'Buscar':''}}</ui-button>\r\n }\r\n <ui-button [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?'Limpiar':''}}</ui-button>\r\n</div>", styles: [".ui-table-searcher{display:flex;gap:5px;align-items:center}.ui-table-searcher ui-input{min-width:300px;flex:1 1}@media (max-width: 479px){.ui-table-searcher ui-input{min-width:5px}}.ui-table-searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 479px){.ui-table-searcher .fakeinput{width:100%}}.ui-table-searcher .fakeinput i{font-size:24px;margin-right:8px}.ui-table-searcher .fakeinput input{width:100%;border:none}.ui-table-searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }] });
|
|
3472
3472
|
}
|
|
3473
3473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, decorators: [{
|
|
3474
3474
|
type: Component,
|
|
3475
|
-
args: [{ selector: 'uic-table-searcher', imports: [UicButtonComponent, FormsModule, UicToolTipDirective, UicInputComponent], template: "\r\n<div class=\"ui-table-searcher\">\r\n <
|
|
3475
|
+
args: [{ selector: 'uic-table-searcher', imports: [UicButtonComponent, FormsModule, UicToolTipDirective, UicInputComponent], template: "\r\n<div class=\"ui-table-searcher\">\r\n <ui-input [internalIcon]=\"!showSearchButton?'ri-search-line':''\">\r\n <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n </ui-input>\r\n @if (showSearchButton) {\r\n <ui-button [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"showSearchButton ri-search-2-line\" size=\"m\">{{showButtonText?'Buscar':''}}</ui-button>\r\n }\r\n <ui-button [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?'Limpiar':''}}</ui-button>\r\n</div>", styles: [".ui-table-searcher{display:flex;gap:5px;align-items:center}.ui-table-searcher ui-input{min-width:300px;flex:1 1}@media (max-width: 479px){.ui-table-searcher ui-input{min-width:5px}}.ui-table-searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 479px){.ui-table-searcher .fakeinput{width:100%}}.ui-table-searcher .fakeinput i{font-size:24px;margin-right:8px}.ui-table-searcher .fakeinput input{width:100%;border:none}.ui-table-searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"] }]
|
|
3476
3476
|
}], propDecorators: { placeholder: [{
|
|
3477
3477
|
type: Input
|
|
3478
3478
|
}], label: [{
|
|
@@ -3494,8 +3494,8 @@ class UicTablePaginationComponent {
|
|
|
3494
3494
|
size = 25;
|
|
3495
3495
|
loading = false;
|
|
3496
3496
|
showText = true;
|
|
3497
|
-
nextButtonText = '
|
|
3498
|
-
previousButtonText = '
|
|
3497
|
+
nextButtonText = 'Sig.';
|
|
3498
|
+
previousButtonText = 'Ant.';
|
|
3499
3499
|
visiblePages = 3;
|
|
3500
3500
|
pagesInView = [];
|
|
3501
3501
|
pageChange = new EventEmitter();
|
|
@@ -3527,18 +3527,17 @@ class UicTablePaginationComponent {
|
|
|
3527
3527
|
return pages;
|
|
3528
3528
|
}
|
|
3529
3529
|
changePage(newPage) {
|
|
3530
|
-
console.log(newPage);
|
|
3531
3530
|
if (newPage >= 1 && newPage <= this.totalPages && newPage !== this.currentPage) {
|
|
3532
3531
|
this.currentPage = newPage;
|
|
3533
3532
|
this.pageChange.emit(this.currentPage);
|
|
3534
3533
|
}
|
|
3535
3534
|
}
|
|
3536
3535
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTablePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3537
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTablePaginationComponent, isStandalone: true, selector: "uic-table-pagination", inputs: { buttonSize: "buttonSize", currentPage: "currentPage", totalPages: "totalPages", size: "size", loading: "loading", showText: "showText", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText" }, outputs: { pageChange: "pageChange", sizeChange: "sizeChange" }, ngImport: i0, template: "\r\n<div class=\"table-page\">\r\n <ui-button \r\n [disabled]=\"loading || currentPage == 1\" \r\n (click)=\"changePage(currentPage - 1)\" \r\n [size]=\"buttonSize\" \r\n color=\"black\" \r\n type=\"bordered\" \r\n [text]=\"showText?previousButtonText:''\"\r\n [iconOnly]=\"!showText\" \r\n icon=\"ri-arrow-left-line\" > \r\n </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 </div>\r\n <ui-button \r\n [disabled]=\"loading || currentPage == totalPages\" \r\n (click)=\"changePage(currentPage + 1)\" \r\n [size]=\"buttonSize\" \r\n color=\"black\" \r\n type=\"bordered\" \r\n [text]=\"showText?nextButtonText:''\"\r\n [iconOnly]=\"!showText\" \r\n rightIcon=\"ri-arrow-right-line\" > \r\n </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;background-color:#fff;justify-content:space-between;width:100%;gap:1rem;border-top:solid 1px var(--table-border-color);padding:var(--table-spacing-ref) calc(var(--table-spacing-ref) * 1.5)}.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:var(--grey-500);width:calc(var(--table-spacing-ref) * 4);height:calc(var(--table-spacing-ref) * 4);background-color:var(--white);border-radius:var(--button-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:ease .3s}.number:enabled:hover{background-color:var(--secondary-200)}.selected{background-color:var(--grey-100);font-weight:600;color:var(--secondary-500)}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:.75rem;color:var(--grey-500);align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:var(--grey-500);border:solid 1px var(--primary-500);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 }] });
|
|
3536
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTablePaginationComponent, isStandalone: true, selector: "uic-table-pagination", inputs: { buttonSize: "buttonSize", currentPage: "currentPage", totalPages: "totalPages", size: "size", loading: "loading", showText: "showText", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText" }, outputs: { pageChange: "pageChange", sizeChange: "sizeChange" }, ngImport: i0, template: "\r\n<div class=\"table-page\">\r\n <ui-button \r\n [disabled]=\"loading || currentPage == 1\" \r\n (click)=\"changePage(currentPage - 1)\" \r\n [size]=\"buttonSize\" \r\n color=\"black\" \r\n type=\"bordered\" \r\n [text]=\"showText?previousButtonText:''\"\r\n [iconOnly]=\"!showText\" \r\n icon=\"ri-arrow-left-line\" > \r\n </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 </div>\r\n <div class=\"current-mobile\"> {{currentPage}} </div>\r\n <ui-button \r\n [disabled]=\"loading || currentPage == totalPages\" \r\n (click)=\"changePage(currentPage + 1)\" \r\n [size]=\"buttonSize\" \r\n color=\"black\" \r\n type=\"bordered\" \r\n [text]=\"showText?nextButtonText:''\"\r\n [iconOnly]=\"!showText\" \r\n rightIcon=\"ri-arrow-right-line\" > \r\n </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;background-color:#fff;justify-content:space-between;width:100%;gap:1rem;border-top:solid 1px var(--table-border-color);padding:var(--table-spacing-ref) calc(var(--table-spacing-ref) * 1.5)}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}@media (max-width: 479px){.table-numbers{display:none}}.current-mobile{font-size:14px;display:none}@media (max-width: 479px){.current-mobile{display:block}}.number{border:none;color:var(--grey-500);width:calc(var(--table-spacing-ref) * 4);height:calc(var(--table-spacing-ref) * 4);background-color:var(--white);border-radius:var(--button-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:ease .3s}.number:enabled:hover{background-color:var(--secondary-200)}.selected{background-color:var(--grey-100);font-weight:600;color:var(--secondary-500)}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:.75rem;color:var(--grey-500);align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:var(--grey-500);border:solid 1px var(--primary-500);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 }] });
|
|
3538
3537
|
}
|
|
3539
3538
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTablePaginationComponent, decorators: [{
|
|
3540
3539
|
type: Component,
|
|
3541
|
-
args: [{ selector: 'uic-table-pagination', imports: [CommonModule, UicButtonComponent, FormsModule], template: "\r\n<div class=\"table-page\">\r\n <ui-button \r\n [disabled]=\"loading || currentPage == 1\" \r\n (click)=\"changePage(currentPage - 1)\" \r\n [size]=\"buttonSize\" \r\n color=\"black\" \r\n type=\"bordered\" \r\n [text]=\"showText?previousButtonText:''\"\r\n [iconOnly]=\"!showText\" \r\n icon=\"ri-arrow-left-line\" > \r\n </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 </div>\r\n <ui-button \r\n [disabled]=\"loading || currentPage == totalPages\" \r\n (click)=\"changePage(currentPage + 1)\" \r\n [size]=\"buttonSize\" \r\n color=\"black\" \r\n type=\"bordered\" \r\n [text]=\"showText?nextButtonText:''\"\r\n [iconOnly]=\"!showText\" \r\n rightIcon=\"ri-arrow-right-line\" > \r\n </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;background-color:#fff;justify-content:space-between;width:100%;gap:1rem;border-top:solid 1px var(--table-border-color);padding:var(--table-spacing-ref) calc(var(--table-spacing-ref) * 1.5)}.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:var(--grey-500);width:calc(var(--table-spacing-ref) * 4);height:calc(var(--table-spacing-ref) * 4);background-color:var(--white);border-radius:var(--button-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:ease .3s}.number:enabled:hover{background-color:var(--secondary-200)}.selected{background-color:var(--grey-100);font-weight:600;color:var(--secondary-500)}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:.75rem;color:var(--grey-500);align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:var(--grey-500);border:solid 1px var(--primary-500);border-radius:5px}\n"] }]
|
|
3540
|
+
args: [{ selector: 'uic-table-pagination', imports: [CommonModule, UicButtonComponent, FormsModule], template: "\r\n<div class=\"table-page\">\r\n <ui-button \r\n [disabled]=\"loading || currentPage == 1\" \r\n (click)=\"changePage(currentPage - 1)\" \r\n [size]=\"buttonSize\" \r\n color=\"black\" \r\n type=\"bordered\" \r\n [text]=\"showText?previousButtonText:''\"\r\n [iconOnly]=\"!showText\" \r\n icon=\"ri-arrow-left-line\" > \r\n </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 </div>\r\n <div class=\"current-mobile\"> {{currentPage}} </div>\r\n <ui-button \r\n [disabled]=\"loading || currentPage == totalPages\" \r\n (click)=\"changePage(currentPage + 1)\" \r\n [size]=\"buttonSize\" \r\n color=\"black\" \r\n type=\"bordered\" \r\n [text]=\"showText?nextButtonText:''\"\r\n [iconOnly]=\"!showText\" \r\n rightIcon=\"ri-arrow-right-line\" > \r\n </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;background-color:#fff;justify-content:space-between;width:100%;gap:1rem;border-top:solid 1px var(--table-border-color);padding:var(--table-spacing-ref) calc(var(--table-spacing-ref) * 1.5)}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}@media (max-width: 479px){.table-numbers{display:none}}.current-mobile{font-size:14px;display:none}@media (max-width: 479px){.current-mobile{display:block}}.number{border:none;color:var(--grey-500);width:calc(var(--table-spacing-ref) * 4);height:calc(var(--table-spacing-ref) * 4);background-color:var(--white);border-radius:var(--button-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:ease .3s}.number:enabled:hover{background-color:var(--secondary-200)}.selected{background-color:var(--grey-100);font-weight:600;color:var(--secondary-500)}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:.75rem;color:var(--grey-500);align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:var(--grey-500);border:solid 1px var(--primary-500);border-radius:5px}\n"] }]
|
|
3542
3541
|
}], propDecorators: { buttonSize: [{
|
|
3543
3542
|
type: Input
|
|
3544
3543
|
}], currentPage: [{
|
|
@@ -3561,56 +3560,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3561
3560
|
type: Output
|
|
3562
3561
|
}] } });
|
|
3563
3562
|
|
|
3564
|
-
class UicTableListComponent {
|
|
3565
|
-
list = [];
|
|
3566
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3567
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableListComponent, isStandalone: true, selector: "uic-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}.list-item i{color:var(--grey-500);margin-right:5px}.list-item-data{text-align:left}.list-item-data p{color:var(--grey-300);font-size:13px}\n"] });
|
|
3568
|
-
}
|
|
3569
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableListComponent, decorators: [{
|
|
3570
|
-
type: Component,
|
|
3571
|
-
args: [{ selector: 'uic-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}.list-item i{color:var(--grey-500);margin-right:5px}.list-item-data{text-align:left}.list-item-data p{color:var(--grey-300);font-size:13px}\n"] }]
|
|
3572
|
-
}], propDecorators: { list: [{
|
|
3573
|
-
type: Input
|
|
3574
|
-
}] } });
|
|
3575
|
-
|
|
3576
|
-
class UicNameInitsPipe {
|
|
3577
|
-
transform(value) {
|
|
3578
|
-
if (!value) {
|
|
3579
|
-
return "";
|
|
3580
|
-
}
|
|
3581
|
-
const names = value.split(" ");
|
|
3582
|
-
if (names.length > 1) {
|
|
3583
|
-
return names[0].charAt(0) + names[1].charAt(0).toUpperCase();
|
|
3584
|
-
}
|
|
3585
|
-
else if (names[0].length >= 2) {
|
|
3586
|
-
return names[0].substring(0, 2).toUpperCase();
|
|
3587
|
-
}
|
|
3588
|
-
else {
|
|
3589
|
-
return '';
|
|
3590
|
-
}
|
|
3591
|
-
}
|
|
3592
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicNameInitsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
3593
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: UicNameInitsPipe, isStandalone: true, name: "nameInitials" });
|
|
3594
|
-
}
|
|
3595
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicNameInitsPipe, decorators: [{
|
|
3596
|
-
type: Pipe,
|
|
3597
|
-
args: [{
|
|
3598
|
-
name: 'nameInitials'
|
|
3599
|
-
}]
|
|
3600
|
-
}] });
|
|
3601
|
-
|
|
3602
|
-
class UicTableUserComponent {
|
|
3603
|
-
user;
|
|
3604
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3605
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUserComponent, isStandalone: true, selector: "uic-table-user", inputs: { user: "user" }, ngImport: i0, template: "@if (user) {\r\n <div class=\"user-row\">\r\n @if (!user.hideAvatar) {\r\n <div class=\"user-inits\" [style]=\"user.photo? 'background-image: url('+ user.photo +')' :'' \">\r\n {{ !user.photo? (user.name | nameInitials) :''}}\r\n </div>\r\n }\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 var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:6px;background-repeat:no-repeat;background-size:cover;background-position:top center}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{min-width:150px;flex:1 1;font-weight:600;text-align:left;color:var(--grey-900);font-size:.875rem;line-height:1rem}.user-row-data p{color:var(--grey-500);font-weight:400;margin-bottom:0;font-size:.75rem;line-height:1rem}\n"], dependencies: [{ kind: "pipe", type: UicNameInitsPipe, name: "nameInitials" }] });
|
|
3606
|
-
}
|
|
3607
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUserComponent, decorators: [{
|
|
3608
|
-
type: Component,
|
|
3609
|
-
args: [{ selector: 'uic-table-user', imports: [UicNameInitsPipe], template: "@if (user) {\r\n <div class=\"user-row\">\r\n @if (!user.hideAvatar) {\r\n <div class=\"user-inits\" [style]=\"user.photo? 'background-image: url('+ user.photo +')' :'' \">\r\n {{ !user.photo? (user.name | nameInitials) :''}}\r\n </div>\r\n }\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 var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:6px;background-repeat:no-repeat;background-size:cover;background-position:top center}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{min-width:150px;flex:1 1;font-weight:600;text-align:left;color:var(--grey-900);font-size:.875rem;line-height:1rem}.user-row-data p{color:var(--grey-500);font-weight:400;margin-bottom:0;font-size:.75rem;line-height:1rem}\n"] }]
|
|
3610
|
-
}], propDecorators: { user: [{
|
|
3611
|
-
type: Input
|
|
3612
|
-
}] } });
|
|
3613
|
-
|
|
3614
3563
|
const highlightRow = trigger('highlightRow', [
|
|
3615
3564
|
state('highlighted', style({ backgroundColor: '#efe1f5' })),
|
|
3616
3565
|
transition('* => highlighted', [
|
|
@@ -3632,24 +3581,6 @@ const animatedRow = trigger('animatedRow', [
|
|
|
3632
3581
|
]),
|
|
3633
3582
|
]);
|
|
3634
3583
|
|
|
3635
|
-
class UicStatusLabelComponent {
|
|
3636
|
-
color = 'grey';
|
|
3637
|
-
type = 'status';
|
|
3638
|
-
icon = 'ri-circle-fill';
|
|
3639
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStatusLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3640
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStatusLabelComponent, isStandalone: true, selector: "ui-status-label", inputs: { color: "color", type: "type", icon: "icon" }, ngImport: i0, template: "<div [class]=\"'status-label sl-' + type + ' ' + (type == 'status' ? 'slc-' : 'slt-') + color\" >\r\n @if (type == 'status') {\r\n <i [class]=\"icon\"></i>\r\n }\r\n <div class=\"sl-text\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [".status-label{display:flex;align-items:center;border-radius:6px;white-space:nowrap;padding:0 8px;width:fit-content;border:solid 1px var(--grey-300);font-size:12px;line-height:18px;font-weight:500}.status-label i{font-size:10px;margin-right:6px}.slc-primary{color:var(--primary-500);border-color:var(--primary-500);background-color:var(--primary-50)}.slc-red{color:var(--red-500);border-color:var(--red-500);background-color:var(--red-50)}.slc-blue{border-color:var(--blue-600);color:var(--blue-600);background-color:var(--blue-100)}.slc-green{border-color:var(--green-500);color:var(--green-500);background-color:var(--green-50)}.slc-yellow{border-color:var(--yellow-500);color:var(--yellow-500);background-color:var(--yellow-50)}.slc-black{border-color:var(--grey-900);color:var(--grey-900);background-color:var(--grey-50)}.slc-grey{border-color:var(--grey-300);color:var(--grey-300);background-color:var(--grey-50)}.sl-text{color:var(--grey-600)}.sl-tag{border:none}.sl-tag .sl-text{color:var(--white)}.slt-primary{background-color:var(--primary-600)}.slt-red{background-color:var(--red-600)}.slt-blue{background-color:var(--blue-600)}.slt-green{background-color:var(--green-600)}.slt-yellow{background-color:var(--yellow-600)}.slt-black,.slt-grey{background-color:var(--grey-600)}\n"] });
|
|
3641
|
-
}
|
|
3642
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStatusLabelComponent, decorators: [{
|
|
3643
|
-
type: Component,
|
|
3644
|
-
args: [{ selector: 'ui-status-label', imports: [], template: "<div [class]=\"'status-label sl-' + type + ' ' + (type == 'status' ? 'slc-' : 'slt-') + color\" >\r\n @if (type == 'status') {\r\n <i [class]=\"icon\"></i>\r\n }\r\n <div class=\"sl-text\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [".status-label{display:flex;align-items:center;border-radius:6px;white-space:nowrap;padding:0 8px;width:fit-content;border:solid 1px var(--grey-300);font-size:12px;line-height:18px;font-weight:500}.status-label i{font-size:10px;margin-right:6px}.slc-primary{color:var(--primary-500);border-color:var(--primary-500);background-color:var(--primary-50)}.slc-red{color:var(--red-500);border-color:var(--red-500);background-color:var(--red-50)}.slc-blue{border-color:var(--blue-600);color:var(--blue-600);background-color:var(--blue-100)}.slc-green{border-color:var(--green-500);color:var(--green-500);background-color:var(--green-50)}.slc-yellow{border-color:var(--yellow-500);color:var(--yellow-500);background-color:var(--yellow-50)}.slc-black{border-color:var(--grey-900);color:var(--grey-900);background-color:var(--grey-50)}.slc-grey{border-color:var(--grey-300);color:var(--grey-300);background-color:var(--grey-50)}.sl-text{color:var(--grey-600)}.sl-tag{border:none}.sl-tag .sl-text{color:var(--white)}.slt-primary{background-color:var(--primary-600)}.slt-red{background-color:var(--red-600)}.slt-blue{background-color:var(--blue-600)}.slt-green{background-color:var(--green-600)}.slt-yellow{background-color:var(--yellow-600)}.slt-black,.slt-grey{background-color:var(--grey-600)}\n"] }]
|
|
3645
|
-
}], propDecorators: { color: [{
|
|
3646
|
-
type: Input
|
|
3647
|
-
}], type: [{
|
|
3648
|
-
type: Input
|
|
3649
|
-
}], icon: [{
|
|
3650
|
-
type: Input
|
|
3651
|
-
}] } });
|
|
3652
|
-
|
|
3653
3584
|
class UicActionButtonComponent {
|
|
3654
3585
|
icon = 'ri-more-2-line';
|
|
3655
3586
|
options = [];
|
|
@@ -3752,138 +3683,778 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3752
3683
|
args: ['menuTemplate']
|
|
3753
3684
|
}] } });
|
|
3754
3685
|
|
|
3755
|
-
class
|
|
3756
|
-
|
|
3757
|
-
|
|
3758
|
-
|
|
3759
|
-
|
|
3760
|
-
|
|
3761
|
-
|
|
3762
|
-
|
|
3763
|
-
|
|
3764
|
-
|
|
3765
|
-
|
|
3766
|
-
|
|
3767
|
-
|
|
3768
|
-
|
|
3769
|
-
|
|
3770
|
-
|
|
3771
|
-
searchLabel = 'Buscar';
|
|
3772
|
-
searchPlaceholder = 'Buscar';
|
|
3773
|
-
headerClass = '';
|
|
3774
|
-
headerBackgroundColor = 'grey';
|
|
3775
|
-
striped = false;
|
|
3776
|
-
showPagination = true;
|
|
3777
|
-
searchOnKeydown = false;
|
|
3778
|
-
showEmptyMessage = true;
|
|
3779
|
-
showSearchButton = false;
|
|
3780
|
-
showTextPagination = true;
|
|
3781
|
-
emptyMessage = 'No hay elementos';
|
|
3782
|
-
nextButtonText = 'Siguiente';
|
|
3783
|
-
previousButtonText = 'Anterior';
|
|
3784
|
-
searcherShowButtonText = false;
|
|
3785
|
-
action = new EventEmitter();
|
|
3786
|
-
update = new EventEmitter();
|
|
3787
|
-
checkedChange = new EventEmitter();
|
|
3788
|
-
switchChange = new EventEmitter();
|
|
3789
|
-
clickedRow = new EventEmitter();
|
|
3790
|
-
allSelected = false;
|
|
3791
|
-
checkedIds = new Set();
|
|
3792
|
-
sortKey = '';
|
|
3793
|
-
sortAsc = true;
|
|
3794
|
-
filter = '';
|
|
3795
|
-
page = 1;
|
|
3796
|
-
fullViewRows = [];
|
|
3797
|
-
getValue(data, key) {
|
|
3798
|
-
const col = data.find(col => col.key == key);
|
|
3799
|
-
return col?.value?.toString() ?? '';
|
|
3800
|
-
}
|
|
3801
|
-
getSubtext(data, key) {
|
|
3802
|
-
const col = data.find(col => col.key == key);
|
|
3803
|
-
return col?.subtext?.toString() ?? '';
|
|
3804
|
-
}
|
|
3805
|
-
isChecked(data, key) {
|
|
3806
|
-
const cell = data.find(c => c.key === key);
|
|
3807
|
-
return !!cell?.checked;
|
|
3808
|
-
}
|
|
3809
|
-
getMoreActions(actions, row) {
|
|
3810
|
-
return actions
|
|
3811
|
-
.filter(f => this.isValidRule(row, f.rule))
|
|
3812
|
-
.map(p => ({ id: p.key, label: p.text ?? '', icon: p.icon ?? '' }));
|
|
3813
|
-
}
|
|
3814
|
-
getFontColor(data, key) {
|
|
3815
|
-
const col = data.find(col => col.key == key);
|
|
3816
|
-
return 'ui-trc-' + (col?.textColor ?? 'black');
|
|
3817
|
-
}
|
|
3818
|
-
getBackgroundColor(data, key) {
|
|
3819
|
-
const col = data.find(col => col.key == key);
|
|
3820
|
-
return col?.color ?? 'transparent';
|
|
3821
|
-
}
|
|
3822
|
-
isValidRule(data, key) {
|
|
3823
|
-
if (!key)
|
|
3824
|
-
return true;
|
|
3825
|
-
let valid = true;
|
|
3826
|
-
key.forEach(k => {
|
|
3827
|
-
const col = data.find(col => col.key == k);
|
|
3828
|
-
valid = valid && !!(col?.value);
|
|
3829
|
-
});
|
|
3830
|
-
return valid;
|
|
3831
|
-
}
|
|
3832
|
-
getIcon(data, key, right = false) {
|
|
3833
|
-
const col = data.find(col => col.key == key);
|
|
3834
|
-
if (col && right && col.rightIcon) {
|
|
3835
|
-
return col.rightIcon + ' ui-trc-' + (col?.iconColor ?? 'black');
|
|
3836
|
-
}
|
|
3837
|
-
if (col && !right && col.icon) {
|
|
3838
|
-
return col.icon + ' ui-trc-' + (col?.iconColor ?? 'black');
|
|
3686
|
+
class UicTableListComponent {
|
|
3687
|
+
list = [];
|
|
3688
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3689
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableListComponent, isStandalone: true, selector: "uic-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}.list-item i{color:var(--grey-500);margin-right:5px}.list-item-data{text-align:left}.list-item-data p{color:var(--grey-300);font-size:13px}\n"] });
|
|
3690
|
+
}
|
|
3691
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableListComponent, decorators: [{
|
|
3692
|
+
type: Component,
|
|
3693
|
+
args: [{ selector: 'uic-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}.list-item i{color:var(--grey-500);margin-right:5px}.list-item-data{text-align:left}.list-item-data p{color:var(--grey-300);font-size:13px}\n"] }]
|
|
3694
|
+
}], propDecorators: { list: [{
|
|
3695
|
+
type: Input
|
|
3696
|
+
}] } });
|
|
3697
|
+
|
|
3698
|
+
class UicNameInitsPipe {
|
|
3699
|
+
transform(value) {
|
|
3700
|
+
if (!value) {
|
|
3701
|
+
return "";
|
|
3839
3702
|
}
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
const col = data.find(col => col.key == key);
|
|
3844
|
-
return col?.list ?? [];
|
|
3845
|
-
}
|
|
3846
|
-
getUser(data, key) {
|
|
3847
|
-
const col = data.find(col => col.key == key);
|
|
3848
|
-
return col?.user;
|
|
3849
|
-
}
|
|
3850
|
-
sortClick(key) {
|
|
3851
|
-
if (this.sortKey != key) {
|
|
3852
|
-
this.sortKey = key;
|
|
3853
|
-
this.sortAsc = true;
|
|
3703
|
+
const names = value.split(" ");
|
|
3704
|
+
if (names.length > 1) {
|
|
3705
|
+
return names[0].charAt(0) + names[1].charAt(0).toUpperCase();
|
|
3854
3706
|
}
|
|
3855
|
-
else if (
|
|
3856
|
-
|
|
3707
|
+
else if (names[0].length >= 2) {
|
|
3708
|
+
return names[0].substring(0, 2).toUpperCase();
|
|
3857
3709
|
}
|
|
3858
3710
|
else {
|
|
3859
|
-
|
|
3860
|
-
this.sortAsc = true;
|
|
3711
|
+
return '';
|
|
3861
3712
|
}
|
|
3862
|
-
this.updateData();
|
|
3863
3713
|
}
|
|
3864
|
-
|
|
3865
|
-
|
|
3866
|
-
|
|
3714
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicNameInitsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
3715
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: UicNameInitsPipe, isStandalone: true, name: "nameInitials" });
|
|
3716
|
+
}
|
|
3717
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicNameInitsPipe, decorators: [{
|
|
3718
|
+
type: Pipe,
|
|
3719
|
+
args: [{
|
|
3720
|
+
name: 'nameInitials'
|
|
3721
|
+
}]
|
|
3722
|
+
}] });
|
|
3723
|
+
|
|
3724
|
+
class UicTableUserComponent {
|
|
3725
|
+
user;
|
|
3726
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3727
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUserComponent, isStandalone: true, selector: "uic-table-user", inputs: { user: "user" }, ngImport: i0, template: "@if (user) {\r\n <div class=\"user-row\">\r\n @if (!user.hideAvatar) {\r\n <div class=\"user-inits\" [style]=\"user.photo? 'background-image: url('+ user.photo +')' :'' \">\r\n {{ !user.photo? (user.name | nameInitials) :''}}\r\n </div>\r\n }\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 var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:6px;background-repeat:no-repeat;background-size:cover;background-position:top center}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{min-width:150px;flex:1 1;font-weight:600;text-align:left;color:var(--grey-900);font-size:.875rem;line-height:1rem}.user-row-data p{color:var(--grey-500);font-weight:400;margin-bottom:0;font-size:.75rem;line-height:1rem}\n"], dependencies: [{ kind: "pipe", type: UicNameInitsPipe, name: "nameInitials" }] });
|
|
3728
|
+
}
|
|
3729
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUserComponent, decorators: [{
|
|
3730
|
+
type: Component,
|
|
3731
|
+
args: [{ selector: 'uic-table-user', imports: [UicNameInitsPipe], template: "@if (user) {\r\n <div class=\"user-row\">\r\n @if (!user.hideAvatar) {\r\n <div class=\"user-inits\" [style]=\"user.photo? 'background-image: url('+ user.photo +')' :'' \">\r\n {{ !user.photo? (user.name | nameInitials) :''}}\r\n </div>\r\n }\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 var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:6px;background-repeat:no-repeat;background-size:cover;background-position:top center}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{min-width:150px;flex:1 1;font-weight:600;text-align:left;color:var(--grey-900);font-size:.875rem;line-height:1rem}.user-row-data p{color:var(--grey-500);font-weight:400;margin-bottom:0;font-size:.75rem;line-height:1rem}\n"] }]
|
|
3732
|
+
}], propDecorators: { user: [{
|
|
3733
|
+
type: Input
|
|
3734
|
+
}] } });
|
|
3735
|
+
|
|
3736
|
+
class UicStatusLabelComponent {
|
|
3737
|
+
color = 'grey';
|
|
3738
|
+
type = 'status';
|
|
3739
|
+
icon = 'ri-circle-fill';
|
|
3740
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStatusLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3741
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStatusLabelComponent, isStandalone: true, selector: "ui-status-label", inputs: { color: "color", type: "type", icon: "icon" }, ngImport: i0, template: "<div [class]=\"'status-label sl-' + type + ' ' + (type == 'status' ? 'slc-' : 'slt-') + color\" >\r\n @if (type == 'status') {\r\n <i [class]=\"icon\"></i>\r\n }\r\n <div class=\"sl-text\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [".status-label{display:flex;align-items:center;border-radius:6px;white-space:nowrap;padding:0 8px;width:fit-content;border:solid 1px var(--grey-300);font-size:12px;line-height:18px;font-weight:500}.status-label i{font-size:10px;margin-right:6px}.slc-primary{color:var(--primary-500);border-color:var(--primary-500);background-color:var(--primary-50)}.slc-red{color:var(--red-500);border-color:var(--red-500);background-color:var(--red-50)}.slc-blue{border-color:var(--blue-600);color:var(--blue-600);background-color:var(--blue-100)}.slc-green{border-color:var(--green-500);color:var(--green-500);background-color:var(--green-50)}.slc-yellow{border-color:var(--yellow-500);color:var(--yellow-500);background-color:var(--yellow-50)}.slc-black{border-color:var(--grey-900);color:var(--grey-900);background-color:var(--grey-50)}.slc-grey{border-color:var(--grey-300);color:var(--grey-300);background-color:var(--grey-50)}.sl-text{color:var(--grey-600)}.sl-tag{border:none}.sl-tag .sl-text{color:var(--white)}.slt-primary{background-color:var(--primary-600)}.slt-red{background-color:var(--red-600)}.slt-blue{background-color:var(--blue-600)}.slt-green{background-color:var(--green-600)}.slt-yellow{background-color:var(--yellow-600)}.slt-black,.slt-grey{background-color:var(--grey-600)}\n"] });
|
|
3742
|
+
}
|
|
3743
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStatusLabelComponent, decorators: [{
|
|
3744
|
+
type: Component,
|
|
3745
|
+
args: [{ selector: 'ui-status-label', imports: [], template: "<div [class]=\"'status-label sl-' + type + ' ' + (type == 'status' ? 'slc-' : 'slt-') + color\" >\r\n @if (type == 'status') {\r\n <i [class]=\"icon\"></i>\r\n }\r\n <div class=\"sl-text\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [".status-label{display:flex;align-items:center;border-radius:6px;white-space:nowrap;padding:0 8px;width:fit-content;border:solid 1px var(--grey-300);font-size:12px;line-height:18px;font-weight:500}.status-label i{font-size:10px;margin-right:6px}.slc-primary{color:var(--primary-500);border-color:var(--primary-500);background-color:var(--primary-50)}.slc-red{color:var(--red-500);border-color:var(--red-500);background-color:var(--red-50)}.slc-blue{border-color:var(--blue-600);color:var(--blue-600);background-color:var(--blue-100)}.slc-green{border-color:var(--green-500);color:var(--green-500);background-color:var(--green-50)}.slc-yellow{border-color:var(--yellow-500);color:var(--yellow-500);background-color:var(--yellow-50)}.slc-black{border-color:var(--grey-900);color:var(--grey-900);background-color:var(--grey-50)}.slc-grey{border-color:var(--grey-300);color:var(--grey-300);background-color:var(--grey-50)}.sl-text{color:var(--grey-600)}.sl-tag{border:none}.sl-tag .sl-text{color:var(--white)}.slt-primary{background-color:var(--primary-600)}.slt-red{background-color:var(--red-600)}.slt-blue{background-color:var(--blue-600)}.slt-green{background-color:var(--green-600)}.slt-yellow{background-color:var(--yellow-600)}.slt-black,.slt-grey{background-color:var(--grey-600)}\n"] }]
|
|
3746
|
+
}], propDecorators: { color: [{
|
|
3747
|
+
type: Input
|
|
3748
|
+
}], type: [{
|
|
3749
|
+
type: Input
|
|
3750
|
+
}], icon: [{
|
|
3751
|
+
type: Input
|
|
3752
|
+
}] } });
|
|
3753
|
+
|
|
3754
|
+
const MODAL_DATA = 'MODAL_DATA';
|
|
3755
|
+
const MODAL_COMPONENT = 'MODAL_COMPONENT';
|
|
3756
|
+
const MODAL_CONFIG = 'MODAL_CONFIG';
|
|
3757
|
+
const MODAL_CLOSE_EVENT = 'modalClosed';
|
|
3758
|
+
const MODAL_CLOSE_REQUEST = 'modalCloserRequested';
|
|
3759
|
+
|
|
3760
|
+
class UiModalRef {
|
|
3761
|
+
overlayRef;
|
|
3762
|
+
modalService;
|
|
3763
|
+
_afterClosed = new Subject();
|
|
3764
|
+
constructor(overlayRef, modalService) {
|
|
3765
|
+
this.overlayRef = overlayRef;
|
|
3766
|
+
this.modalService = modalService;
|
|
3867
3767
|
}
|
|
3868
|
-
|
|
3869
|
-
this.
|
|
3870
|
-
this.
|
|
3768
|
+
close(result = null) {
|
|
3769
|
+
this.modalService.close(this.overlayRef, result);
|
|
3770
|
+
this._afterClosed.next({ status: result != null, data: result });
|
|
3771
|
+
this._afterClosed.complete();
|
|
3871
3772
|
}
|
|
3872
|
-
|
|
3873
|
-
this.
|
|
3874
|
-
this.
|
|
3773
|
+
closeFloating(result = null) {
|
|
3774
|
+
this.modalService.closeFloating(this.overlayRef, result);
|
|
3775
|
+
this._afterClosed.next({ status: result != null, data: result });
|
|
3776
|
+
this._afterClosed.complete();
|
|
3875
3777
|
}
|
|
3876
|
-
|
|
3877
|
-
this.
|
|
3878
|
-
sortBy: this.sortKey,
|
|
3879
|
-
isSortAscending: this.sortAsc,
|
|
3880
|
-
pageNumber: this.page,
|
|
3881
|
-
pageSize: this.size,
|
|
3882
|
-
filter: this.filter
|
|
3883
|
-
});
|
|
3778
|
+
afterClosed() {
|
|
3779
|
+
return this._afterClosed.asObservable();
|
|
3884
3780
|
}
|
|
3885
|
-
|
|
3886
|
-
|
|
3781
|
+
}
|
|
3782
|
+
|
|
3783
|
+
class TinyAlertComponent {
|
|
3784
|
+
modalRef;
|
|
3785
|
+
data;
|
|
3786
|
+
constructor(inData, modalRef) {
|
|
3787
|
+
this.modalRef = modalRef;
|
|
3788
|
+
this.data = inData.alert;
|
|
3789
|
+
}
|
|
3790
|
+
response = {};
|
|
3791
|
+
close(value) {
|
|
3792
|
+
this.modalRef.closeFloating(value ? this.response : null);
|
|
3793
|
+
}
|
|
3794
|
+
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 });
|
|
3795
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <h3 [class]=\"'icon-'+data.type\"> {{data.title}} </h3>\r\n <div class=\"alert-body\" [innerHTML]=\"data.body\"> </div>\r\n <div class=\"tinyalert-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" 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}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.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:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
|
|
3796
|
+
}
|
|
3797
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, decorators: [{
|
|
3798
|
+
type: Component,
|
|
3799
|
+
args: [{ selector: 'ui-tiny-alert', imports: [UicButtonComponent], template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <h3 [class]=\"'icon-'+data.type\"> {{data.title}} </h3>\r\n <div class=\"alert-body\" [innerHTML]=\"data.body\"> </div>\r\n <div class=\"tinyalert-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" 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}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.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:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"] }]
|
|
3800
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3801
|
+
type: Inject,
|
|
3802
|
+
args: [MODAL_DATA]
|
|
3803
|
+
}] }, { type: UiModalRef, decorators: [{
|
|
3804
|
+
type: Inject,
|
|
3805
|
+
args: [UiModalRef]
|
|
3806
|
+
}] }] });
|
|
3807
|
+
|
|
3808
|
+
const pushTop = trigger('pushTop', [
|
|
3809
|
+
transition(':enter', [style({ opacity: 0, transform: 'translateY(20px)' }), animate('.3s ease', style({ opacity: 1, transform: 'translateY(0)' }))]),
|
|
3810
|
+
transition(':leave', [animate('.3s ease', style({ opacity: 0, transform: 'translateY(-20px)' }))])
|
|
3811
|
+
]);
|
|
3812
|
+
|
|
3813
|
+
class UicModalComponent {
|
|
3814
|
+
modalRef;
|
|
3815
|
+
component;
|
|
3816
|
+
congif;
|
|
3817
|
+
injector;
|
|
3818
|
+
myConfig = {};
|
|
3819
|
+
ready = false;
|
|
3820
|
+
title = '';
|
|
3821
|
+
portalOutlet;
|
|
3822
|
+
constructor(modalRef, component, congif, injector) {
|
|
3823
|
+
this.modalRef = modalRef;
|
|
3824
|
+
this.component = component;
|
|
3825
|
+
this.congif = congif;
|
|
3826
|
+
this.injector = injector;
|
|
3827
|
+
this.myConfig = congif;
|
|
3828
|
+
}
|
|
3829
|
+
ngAfterViewInit() {
|
|
3830
|
+
const childInjector = Injector.create({
|
|
3831
|
+
providers: [
|
|
3832
|
+
{ provide: UiModalRef, useValue: this.modalRef },
|
|
3833
|
+
{ provide: MODAL_DATA, useValue: this.congif.data }
|
|
3834
|
+
],
|
|
3835
|
+
parent: this.injector
|
|
3836
|
+
});
|
|
3837
|
+
const portal = new ComponentPortal(this.component, null, childInjector);
|
|
3838
|
+
this.portalOutlet.attachComponentPortal(portal);
|
|
3839
|
+
}
|
|
3840
|
+
closeOuside() {
|
|
3841
|
+
if (this.congif.preventCloseingOutside === true)
|
|
3842
|
+
return;
|
|
3843
|
+
this.modalRef.closeFloating(null);
|
|
3844
|
+
}
|
|
3845
|
+
close() {
|
|
3846
|
+
this.modalRef.closeFloating(null);
|
|
3847
|
+
}
|
|
3848
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
3849
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-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: 479px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:var(--white);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:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 479px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 479px){.large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.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] });
|
|
3850
|
+
}
|
|
3851
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
|
|
3852
|
+
type: Component,
|
|
3853
|
+
args: [{ selector: 'ui-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: 479px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:var(--white);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:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 479px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 479px){.large{width:95%}}\n"] }]
|
|
3854
|
+
}], ctorParameters: () => [{ type: UiModalRef, decorators: [{
|
|
3855
|
+
type: Inject,
|
|
3856
|
+
args: [UiModalRef]
|
|
3857
|
+
}] }, { type: i0.Type, decorators: [{
|
|
3858
|
+
type: Inject,
|
|
3859
|
+
args: [MODAL_COMPONENT]
|
|
3860
|
+
}] }, { type: undefined, decorators: [{
|
|
3861
|
+
type: Inject,
|
|
3862
|
+
args: [MODAL_CONFIG]
|
|
3863
|
+
}] }, { type: i0.Injector }], propDecorators: { portalOutlet: [{
|
|
3864
|
+
type: ViewChild,
|
|
3865
|
+
args: [CdkPortalOutlet, { static: true }]
|
|
3866
|
+
}] } });
|
|
3867
|
+
|
|
3868
|
+
const sideModal = trigger('sideModal', [
|
|
3869
|
+
state('visible', style({ transform: 'translateX(0)' })),
|
|
3870
|
+
state('hidden', style({ transform: 'translateX(100%)' })),
|
|
3871
|
+
// animación al CREARSE
|
|
3872
|
+
transition('void => visible', [
|
|
3873
|
+
style({ opacity: .8, transform: 'translateX(100%)' }),
|
|
3874
|
+
animate('.5s ease')
|
|
3875
|
+
]),
|
|
3876
|
+
// animación al CERRAR
|
|
3877
|
+
transition('visible => hidden', [
|
|
3878
|
+
animate('.5s ease')
|
|
3879
|
+
])
|
|
3880
|
+
]);
|
|
3881
|
+
const fadeBackdrop = trigger('fadeBackdrop', [
|
|
3882
|
+
state('visible', style({ opacity: 1 })),
|
|
3883
|
+
state('hidden', style({ opacity: 0 })),
|
|
3884
|
+
transition('void => visible', [
|
|
3885
|
+
style({ opacity: 0 }),
|
|
3886
|
+
animate('300ms ease-out')
|
|
3887
|
+
]),
|
|
3888
|
+
transition('visible => hidden', [
|
|
3889
|
+
animate('300ms ease-in')
|
|
3890
|
+
])
|
|
3891
|
+
]);
|
|
3892
|
+
|
|
3893
|
+
class UicSideModalComponent {
|
|
3894
|
+
modalRef;
|
|
3895
|
+
component;
|
|
3896
|
+
congif;
|
|
3897
|
+
injector;
|
|
3898
|
+
modal;
|
|
3899
|
+
overlayRef; // lo setea el servicio
|
|
3900
|
+
state = 'visible';
|
|
3901
|
+
show = true;
|
|
3902
|
+
myConfig = {};
|
|
3903
|
+
ready = false;
|
|
3904
|
+
portalOutlet;
|
|
3905
|
+
constructor(modalRef, component, congif, injector, modal) {
|
|
3906
|
+
this.modalRef = modalRef;
|
|
3907
|
+
this.component = component;
|
|
3908
|
+
this.congif = congif;
|
|
3909
|
+
this.injector = injector;
|
|
3910
|
+
this.modal = modal;
|
|
3911
|
+
this.myConfig = congif;
|
|
3912
|
+
}
|
|
3913
|
+
ngOnInit() {
|
|
3914
|
+
if (this.overlayRef) {
|
|
3915
|
+
this.overlayRef.hostElement.addEventListener(MODAL_CLOSE_REQUEST, () => {
|
|
3916
|
+
this.close();
|
|
3917
|
+
});
|
|
3918
|
+
}
|
|
3919
|
+
}
|
|
3920
|
+
ngAfterViewInit() {
|
|
3921
|
+
const childInjector = Injector.create({
|
|
3922
|
+
providers: [
|
|
3923
|
+
{ provide: UiModalRef, useValue: this.modalRef },
|
|
3924
|
+
{ provide: MODAL_DATA, useValue: this.congif.data }
|
|
3925
|
+
],
|
|
3926
|
+
parent: this.injector
|
|
3927
|
+
});
|
|
3928
|
+
const portal = new ComponentPortal(this.component, null, childInjector);
|
|
3929
|
+
this.portalOutlet.attachComponentPortal(portal);
|
|
3930
|
+
}
|
|
3931
|
+
closeOuside() {
|
|
3932
|
+
if (this.congif.preventCloseingOutside === true)
|
|
3933
|
+
return;
|
|
3934
|
+
this.close();
|
|
3935
|
+
}
|
|
3936
|
+
close() {
|
|
3937
|
+
this.state = 'hidden';
|
|
3938
|
+
}
|
|
3939
|
+
cancel() {
|
|
3940
|
+
if (this.myConfig.preventCloseOnCancel) {
|
|
3941
|
+
this.modal.triggerSave(false);
|
|
3942
|
+
}
|
|
3943
|
+
else {
|
|
3944
|
+
this.close();
|
|
3945
|
+
}
|
|
3946
|
+
}
|
|
3947
|
+
onAnimationDone(event) {
|
|
3948
|
+
if (event.toState === 'hidden' && event.triggerName === 'sideModal') {
|
|
3949
|
+
this.overlayRef.dispose();
|
|
3950
|
+
}
|
|
3951
|
+
}
|
|
3952
|
+
save() {
|
|
3953
|
+
this.modal.triggerSave();
|
|
3954
|
+
}
|
|
3955
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }, { token: UicModalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3956
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSideModalComponent, isStandalone: true, selector: "ui-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\" \r\n (@sideModal.done)=\"onAnimationDone($event)\" \r\n class=\"sidemodal\" \r\n [style.width]=\"myConfig.width??'60%'\" \r\n (click)=\"$event.stopPropagation()\">\r\n @if (myConfig.headerEnabled) {\r\n <div class=\"modal-header\">\r\n <div class=\"modal-header-title\">\r\n <div class=\"f-title\">{{myConfig.title}}</div>\r\n <div class=\"f-subtitle\">{{myConfig.subtitle}}</div>\r\n </div>\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>\r\n }\r\n <div class=\"sidemodal-body\" [class.nopadding]=\"myConfig.noPadding\" >\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)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n }\r\n <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'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}.modal-header{width:100%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-100);padding:5px}.modal-header-title{font-size:20px;font-weight:600;padding-left:20px}@media (max-width: 479px){.modal-header{right:10px;top:10px}}.f-subtitle{font-weight:400;font-size:16px;color:var(--grey-500)}.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}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 479px){.sidemodal{width:100%!important}}@media (min-width: 480px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:25px}@media (max-width: 479px){.sidemodal-body{padding:10px}}.sidemodal-footer{height:calc(7 * var(--design-size-ref));padding:0 calc(2 * var(--design-size-ref));width:100%;display:flex;align-items:center;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}.nopadding{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.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] });
|
|
3957
|
+
}
|
|
3958
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, decorators: [{
|
|
3959
|
+
type: Component,
|
|
3960
|
+
args: [{ selector: 'ui-side-modal', imports: [PortalModule, UicButtonComponent], animations: [sideModal, fadeBackdrop], template: "<div [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\"> \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n (@sideModal.done)=\"onAnimationDone($event)\" \r\n class=\"sidemodal\" \r\n [style.width]=\"myConfig.width??'60%'\" \r\n (click)=\"$event.stopPropagation()\">\r\n @if (myConfig.headerEnabled) {\r\n <div class=\"modal-header\">\r\n <div class=\"modal-header-title\">\r\n <div class=\"f-title\">{{myConfig.title}}</div>\r\n <div class=\"f-subtitle\">{{myConfig.subtitle}}</div>\r\n </div>\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>\r\n }\r\n <div class=\"sidemodal-body\" [class.nopadding]=\"myConfig.noPadding\" >\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)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n }\r\n <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'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}.modal-header{width:100%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-100);padding:5px}.modal-header-title{font-size:20px;font-weight:600;padding-left:20px}@media (max-width: 479px){.modal-header{right:10px;top:10px}}.f-subtitle{font-weight:400;font-size:16px;color:var(--grey-500)}.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}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 479px){.sidemodal{width:100%!important}}@media (min-width: 480px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:25px}@media (max-width: 479px){.sidemodal-body{padding:10px}}.sidemodal-footer{height:calc(7 * var(--design-size-ref));padding:0 calc(2 * var(--design-size-ref));width:100%;display:flex;align-items:center;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}.nopadding{padding:0}\n"] }]
|
|
3961
|
+
}], ctorParameters: () => [{ type: UiModalRef, decorators: [{
|
|
3962
|
+
type: Inject,
|
|
3963
|
+
args: [UiModalRef]
|
|
3964
|
+
}] }, { type: i0.Type, decorators: [{
|
|
3965
|
+
type: Inject,
|
|
3966
|
+
args: [MODAL_COMPONENT]
|
|
3967
|
+
}] }, { type: undefined, decorators: [{
|
|
3968
|
+
type: Inject,
|
|
3969
|
+
args: [MODAL_CONFIG]
|
|
3970
|
+
}] }, { type: i0.Injector }, { type: UicModalService }], propDecorators: { portalOutlet: [{
|
|
3971
|
+
type: ViewChild,
|
|
3972
|
+
args: [CdkPortalOutlet, { static: true }]
|
|
3973
|
+
}] } });
|
|
3974
|
+
|
|
3975
|
+
class UicModalService {
|
|
3976
|
+
overlay = inject(Overlay);
|
|
3977
|
+
envInjector = inject(EnvironmentInjector);
|
|
3978
|
+
openFloatingModal(component, config = {}) {
|
|
3979
|
+
return this.openModal(component, config, true);
|
|
3980
|
+
}
|
|
3981
|
+
openSideModal(component, config = {}) {
|
|
3982
|
+
return this.openModal(component, config, false);
|
|
3983
|
+
}
|
|
3984
|
+
openModal(component, config = {}, isFloating = false) {
|
|
3985
|
+
const overlayConfig = this.createOverlayConfig(isFloating);
|
|
3986
|
+
const overlayRef = this.overlay.create(overlayConfig);
|
|
3987
|
+
const modalRef = new UiModalRef(overlayRef, this);
|
|
3988
|
+
const injector = this.createModalInjector(overlayRef, modalRef, component, config);
|
|
3989
|
+
if (isFloating) {
|
|
3990
|
+
const modalPortal = new ComponentPortal(UicModalComponent, null, injector);
|
|
3991
|
+
overlayRef.attach(modalPortal);
|
|
3992
|
+
}
|
|
3993
|
+
else {
|
|
3994
|
+
const modalPortal = new ComponentPortal(UicSideModalComponent, null, injector);
|
|
3995
|
+
const componentRef = overlayRef.attach(modalPortal);
|
|
3996
|
+
componentRef.instance.overlayRef = overlayRef;
|
|
3997
|
+
}
|
|
3998
|
+
return modalRef;
|
|
3999
|
+
}
|
|
4000
|
+
close(overlayRef, result = null) {
|
|
4001
|
+
overlayRef.hostElement.dispatchEvent(new CustomEvent(MODAL_CLOSE_REQUEST, { detail: result }));
|
|
4002
|
+
}
|
|
4003
|
+
closeFloating(overlayRef, result = null) {
|
|
4004
|
+
overlayRef.backdropElement?.dispatchEvent(new CustomEvent(MODAL_CLOSE_EVENT, { detail: result }));
|
|
4005
|
+
overlayRef.dispose();
|
|
4006
|
+
}
|
|
4007
|
+
_save$ = new Subject();
|
|
4008
|
+
save$ = this._save$.asObservable();
|
|
4009
|
+
triggerSave(result = true) {
|
|
4010
|
+
this._save$.next(result);
|
|
4011
|
+
}
|
|
4012
|
+
createOverlayConfig(isFloating) {
|
|
4013
|
+
const positionStrategy = isFloating
|
|
4014
|
+
? this.overlay.position().global().left()
|
|
4015
|
+
: this.overlay.position().global().right();
|
|
4016
|
+
return {
|
|
4017
|
+
hasBackdrop: true,
|
|
4018
|
+
backdropClass: 'cdk-overlay-dark-backdrop',
|
|
4019
|
+
positionStrategy,
|
|
4020
|
+
scrollStrategy: this.overlay.scrollStrategies.block(),
|
|
4021
|
+
disposeOnNavigation: true,
|
|
4022
|
+
};
|
|
4023
|
+
}
|
|
4024
|
+
createModalInjector(overlayRef, modalRef, component, config) {
|
|
4025
|
+
return Injector.create({
|
|
4026
|
+
providers: [
|
|
4027
|
+
{ provide: OverlayRef, useValue: overlayRef },
|
|
4028
|
+
{ provide: UiModalRef, useValue: modalRef },
|
|
4029
|
+
{ provide: MODAL_COMPONENT, useValue: component },
|
|
4030
|
+
{ provide: MODAL_CONFIG, useValue: config }
|
|
4031
|
+
],
|
|
4032
|
+
parent: this.envInjector,
|
|
4033
|
+
});
|
|
4034
|
+
}
|
|
4035
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4036
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalService, providedIn: 'root' });
|
|
4037
|
+
}
|
|
4038
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalService, decorators: [{
|
|
4039
|
+
type: Injectable,
|
|
4040
|
+
args: [{
|
|
4041
|
+
providedIn: 'root'
|
|
4042
|
+
}]
|
|
4043
|
+
}] });
|
|
4044
|
+
|
|
4045
|
+
let nextId = 1;
|
|
4046
|
+
function createTinySuccess(body, options) {
|
|
4047
|
+
return {
|
|
4048
|
+
body,
|
|
4049
|
+
title: 'Operación exitosa',
|
|
4050
|
+
type: 'success',
|
|
4051
|
+
iconChar: 'ri-emotion-laugh-line',
|
|
4052
|
+
okButtonColor: 'green',
|
|
4053
|
+
...options,
|
|
4054
|
+
};
|
|
4055
|
+
}
|
|
4056
|
+
function createTinyError(body, options) {
|
|
4057
|
+
return {
|
|
4058
|
+
body,
|
|
4059
|
+
title: 'Se produjo un error',
|
|
4060
|
+
iconChar: 'ri-emotion-unhappy-line',
|
|
4061
|
+
okButtonColor: 'red',
|
|
4062
|
+
okButtonText: 'Cerrar',
|
|
4063
|
+
type: 'error',
|
|
4064
|
+
...options,
|
|
4065
|
+
};
|
|
4066
|
+
}
|
|
4067
|
+
function createTinyDelete(body, options) {
|
|
4068
|
+
return {
|
|
4069
|
+
body,
|
|
4070
|
+
title: 'Cornfirmación de acción',
|
|
4071
|
+
iconChar: 'ri-delete-bin-line',
|
|
4072
|
+
okButtonColor: 'red',
|
|
4073
|
+
okButtonText: 'Sí, eliminar',
|
|
4074
|
+
showCancelButton: true,
|
|
4075
|
+
cancelButtonText: 'Cancelar',
|
|
4076
|
+
type: 'delete',
|
|
4077
|
+
...options,
|
|
4078
|
+
};
|
|
4079
|
+
}
|
|
4080
|
+
function createTinyWarning(body, options) {
|
|
4081
|
+
return {
|
|
4082
|
+
body,
|
|
4083
|
+
title: '¡Cuidado!',
|
|
4084
|
+
iconChar: 'ri-alarm-warning-line',
|
|
4085
|
+
okButtonColor: 'yellow',
|
|
4086
|
+
type: 'warning',
|
|
4087
|
+
...options,
|
|
4088
|
+
};
|
|
4089
|
+
}
|
|
4090
|
+
function createTinyInfo(body, options) {
|
|
4091
|
+
return {
|
|
4092
|
+
body,
|
|
4093
|
+
iconChar: 'ri-information-line',
|
|
4094
|
+
okButtonColor: 'black',
|
|
4095
|
+
type: 'info',
|
|
4096
|
+
...options,
|
|
4097
|
+
};
|
|
4098
|
+
}
|
|
4099
|
+
|
|
4100
|
+
class UicTinyAlertService {
|
|
4101
|
+
modal = inject(UicModalService);
|
|
4102
|
+
showAlert(data) {
|
|
4103
|
+
return new Promise((resolve) => {
|
|
4104
|
+
this.modal.openFloatingModal(TinyAlertComponent, {
|
|
4105
|
+
data: { alert: data }
|
|
4106
|
+
}).afterClosed().subscribe(result => {
|
|
4107
|
+
resolve({
|
|
4108
|
+
value: result?.status,
|
|
4109
|
+
data: result?.data
|
|
4110
|
+
});
|
|
4111
|
+
});
|
|
4112
|
+
});
|
|
4113
|
+
}
|
|
4114
|
+
success(message, options) {
|
|
4115
|
+
return this.showAlert(createTinySuccess(message, options));
|
|
4116
|
+
}
|
|
4117
|
+
error(message, options) {
|
|
4118
|
+
return this.showAlert(createTinyError(message, options));
|
|
4119
|
+
}
|
|
4120
|
+
warning(message, options) {
|
|
4121
|
+
return this.showAlert(createTinyWarning(message, options));
|
|
4122
|
+
}
|
|
4123
|
+
info(message, options) {
|
|
4124
|
+
return this.showAlert(createTinyInfo(message, options));
|
|
4125
|
+
}
|
|
4126
|
+
deleteConfirmation(message, options) {
|
|
4127
|
+
return this.showAlert(createTinyDelete(message, options));
|
|
4128
|
+
}
|
|
4129
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTinyAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4130
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTinyAlertService, providedIn: 'root' });
|
|
4131
|
+
}
|
|
4132
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTinyAlertService, decorators: [{
|
|
4133
|
+
type: Injectable,
|
|
4134
|
+
args: [{
|
|
4135
|
+
providedIn: 'root'
|
|
4136
|
+
}]
|
|
4137
|
+
}] });
|
|
4138
|
+
|
|
4139
|
+
class ItemValueComponent {
|
|
4140
|
+
alers = inject(UicTinyAlertService);
|
|
4141
|
+
key = '';
|
|
4142
|
+
type = 'text';
|
|
4143
|
+
alignment = '';
|
|
4144
|
+
row;
|
|
4145
|
+
disabled = false;
|
|
4146
|
+
data = null;
|
|
4147
|
+
switchValidation = '';
|
|
4148
|
+
switchConfirmed = new EventEmitter();
|
|
4149
|
+
expanded = false;
|
|
4150
|
+
checked = false;
|
|
4151
|
+
ngOnInit() {
|
|
4152
|
+
if (this.row) {
|
|
4153
|
+
this.data = this.row.data.find(f => f.key == this.key) ?? null;
|
|
4154
|
+
this.checked = this.data?.checked ?? false;
|
|
4155
|
+
}
|
|
4156
|
+
}
|
|
4157
|
+
switchHandler(rowId, value) {
|
|
4158
|
+
if (this.data && this.switchValidation != '') {
|
|
4159
|
+
this.alers.warning(this.switchValidation, { showCancelButton: true }).then(r => {
|
|
4160
|
+
if (r.value) {
|
|
4161
|
+
this.switchConfirmed.emit(value);
|
|
4162
|
+
}
|
|
4163
|
+
else {
|
|
4164
|
+
if (this.data) {
|
|
4165
|
+
this.data.checked = !value;
|
|
4166
|
+
this.checked = this.data.checked;
|
|
4167
|
+
}
|
|
4168
|
+
setTimeout(() => {
|
|
4169
|
+
}, 100);
|
|
4170
|
+
}
|
|
4171
|
+
});
|
|
4172
|
+
}
|
|
4173
|
+
this.switchConfirmed.emit(value);
|
|
4174
|
+
}
|
|
4175
|
+
expand(click) {
|
|
4176
|
+
click.stopPropagation();
|
|
4177
|
+
this.expanded = !this.expanded;
|
|
4178
|
+
}
|
|
4179
|
+
copyText(text, click) {
|
|
4180
|
+
click.stopPropagation();
|
|
4181
|
+
navigator.clipboard.writeText(text)
|
|
4182
|
+
.then(() => {
|
|
4183
|
+
console.log('Copiado!');
|
|
4184
|
+
})
|
|
4185
|
+
.catch(err => {
|
|
4186
|
+
console.error('No se pudo copiar: ', err);
|
|
4187
|
+
});
|
|
4188
|
+
}
|
|
4189
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ItemValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4190
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ItemValueComponent, isStandalone: true, selector: "ui-item-value", inputs: { key: "key", type: "type", alignment: "alignment", row: "row", disabled: "disabled", data: "data", switchValidation: "switchValidation" }, outputs: { switchConfirmed: "switchConfirmed" }, ngImport: i0, template: "@if (data) {\r\n @if (type == 'text' || !type) {\r\n @if( data.icon ){ <i [class]=\"data.icon\"></i>}\r\n {{ data.value }} \r\n @if( data.rightIcon ){ <i [class]=\"data.rightIcon\"></i>}\r\n }\r\n @if (type == 'copy') {\r\n <div class=\"copy-div\">\r\n {{ data.value }} \r\n <ui-button (click)=\"copyText((data.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n </div>\r\n }\r\n @if (type == 'money'){\r\n {{ + (data.value??0) | currency: data.currencyCode||''}} \r\n }\r\n @if (type == 'date'){\r\n {{ (data.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n }\r\n @if (type == 'bigtext') {\r\n <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n {{ data.value }} \r\n @if( data.value && data.value.toString().length > 0){\r\n <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n }\r\n @if (!expanded && data.value && data.value.toString().length > 0) {\r\n <div class=\"fade-overlay\"></div>\r\n }\r\n </div>\r\n }\r\n @if (type == 'icon-list') {\r\n @for (alert of data.list; track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n }\r\n }\r\n @else if (type == 'list'){\r\n <uic-table-list [list]=\"data.list??[]\"></uic-table-list> \r\n }\r\n @else if (type == 'user'){\r\n <uic-table-user [user]=\"data.user\"></uic-table-user> \r\n }\r\n @else if (type == 'status'){\r\n <ui-status-label [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label> \r\n }\r\n @else if (type == 'tag'){\r\n <ui-status-label type=\"tag\" [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label> \r\n }\r\n @else if (type == 'switch'){\r\n <div (click)=\"$event.stopPropagation()\">\r\n <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch> \r\n </div>\r\n }\r\n\r\n @if( data.subtext ){\r\n <div [class]=\"'subtext ui-alignment-'+alignment\">{{ data.subtext }}</div>\r\n }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}\n"], dependencies: [{ kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type", "icon"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
4191
|
+
}
|
|
4192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ItemValueComponent, decorators: [{
|
|
4193
|
+
type: Component,
|
|
4194
|
+
args: [{ selector: 'ui-item-value', imports: [
|
|
4195
|
+
UicToolTipDirective,
|
|
4196
|
+
UicTableUserComponent,
|
|
4197
|
+
UicSwichComponent,
|
|
4198
|
+
UicStatusLabelComponent,
|
|
4199
|
+
UicTableListComponent,
|
|
4200
|
+
FormsModule,
|
|
4201
|
+
UicButtonComponent,
|
|
4202
|
+
CurrencyPipe,
|
|
4203
|
+
DatePipe
|
|
4204
|
+
], template: "@if (data) {\r\n @if (type == 'text' || !type) {\r\n @if( data.icon ){ <i [class]=\"data.icon\"></i>}\r\n {{ data.value }} \r\n @if( data.rightIcon ){ <i [class]=\"data.rightIcon\"></i>}\r\n }\r\n @if (type == 'copy') {\r\n <div class=\"copy-div\">\r\n {{ data.value }} \r\n <ui-button (click)=\"copyText((data.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n </div>\r\n }\r\n @if (type == 'money'){\r\n {{ + (data.value??0) | currency: data.currencyCode||''}} \r\n }\r\n @if (type == 'date'){\r\n {{ (data.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n }\r\n @if (type == 'bigtext') {\r\n <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n {{ data.value }} \r\n @if( data.value && data.value.toString().length > 0){\r\n <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n }\r\n @if (!expanded && data.value && data.value.toString().length > 0) {\r\n <div class=\"fade-overlay\"></div>\r\n }\r\n </div>\r\n }\r\n @if (type == 'icon-list') {\r\n @for (alert of data.list; track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n }\r\n }\r\n @else if (type == 'list'){\r\n <uic-table-list [list]=\"data.list??[]\"></uic-table-list> \r\n }\r\n @else if (type == 'user'){\r\n <uic-table-user [user]=\"data.user\"></uic-table-user> \r\n }\r\n @else if (type == 'status'){\r\n <ui-status-label [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label> \r\n }\r\n @else if (type == 'tag'){\r\n <ui-status-label type=\"tag\" [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label> \r\n }\r\n @else if (type == 'switch'){\r\n <div (click)=\"$event.stopPropagation()\">\r\n <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch> \r\n </div>\r\n }\r\n\r\n @if( data.subtext ){\r\n <div [class]=\"'subtext ui-alignment-'+alignment\">{{ data.subtext }}</div>\r\n }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}\n"] }]
|
|
4205
|
+
}], propDecorators: { key: [{
|
|
4206
|
+
type: Input
|
|
4207
|
+
}], type: [{
|
|
4208
|
+
type: Input
|
|
4209
|
+
}], alignment: [{
|
|
4210
|
+
type: Input
|
|
4211
|
+
}], row: [{
|
|
4212
|
+
type: Input
|
|
4213
|
+
}], disabled: [{
|
|
4214
|
+
type: Input
|
|
4215
|
+
}], data: [{
|
|
4216
|
+
type: Input
|
|
4217
|
+
}], switchValidation: [{
|
|
4218
|
+
type: Input
|
|
4219
|
+
}], switchConfirmed: [{
|
|
4220
|
+
type: Output
|
|
4221
|
+
}] } });
|
|
4222
|
+
|
|
4223
|
+
class UicPortletCardComponent {
|
|
4224
|
+
title = '';
|
|
4225
|
+
data = [];
|
|
4226
|
+
layout = 'horizontal';
|
|
4227
|
+
cols = 1;
|
|
4228
|
+
gap = 20;
|
|
4229
|
+
labelWeight = 400;
|
|
4230
|
+
valueWeight = 500;
|
|
4231
|
+
switchValidation = '';
|
|
4232
|
+
finalData = [];
|
|
4233
|
+
ngOnInit() {
|
|
4234
|
+
this.finalData = this.data.map(p => ({ ...p, key: p.label ?? '-' }));
|
|
4235
|
+
}
|
|
4236
|
+
get gridTemplateColumns() {
|
|
4237
|
+
if (this.layout !== 'vertical') {
|
|
4238
|
+
return null;
|
|
4239
|
+
}
|
|
4240
|
+
const columns = Math.max(1, Math.floor(this.cols || 1));
|
|
4241
|
+
return `repeat(${columns}, minmax(0, 1fr))`;
|
|
4242
|
+
}
|
|
4243
|
+
copyText(text) {
|
|
4244
|
+
navigator.clipboard.writeText(text)
|
|
4245
|
+
.then(() => {
|
|
4246
|
+
console.log('Copiado!');
|
|
4247
|
+
})
|
|
4248
|
+
.catch(err => {
|
|
4249
|
+
console.error('No se pudo copiar: ', err);
|
|
4250
|
+
});
|
|
4251
|
+
}
|
|
4252
|
+
switchHandler(key, value) {
|
|
4253
|
+
}
|
|
4254
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPortletCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4255
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicPortletCardComponent, isStandalone: true, selector: "ui-portlet-card", inputs: { title: "title", data: "data", layout: "layout", cols: "cols", gap: "gap", labelWeight: "labelWeight", valueWeight: "valueWeight", switchValidation: "switchValidation" }, ngImport: i0, template: "@if ( title) {\r\n <h2>{{title}}</h2>\r\n}\r\n<div class=\"portlet\" \r\n [class.portlet-vertical]=\"layout === 'vertical'\" \r\n [style.gridTemplateColumns]=\"gridTemplateColumns\"\r\n [style]=\"'gap: ' + gap + 'px;'\" >\r\n @for (item of finalData; track $index) {\r\n <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\r\n <div class=\"portlet-row-label\" [style.fontWeight]=\"labelWeight\">{{item.label}}</div>\r\n <div class=\"portlet-row-value\" [style.fontWeight]=\"valueWeight\">\r\n <ui-item-value\r\n [type]=\"item.type??'text'\"\r\n [data]=\"item\"\r\n [switchValidation]=\"switchValidation\"\r\n (switchConfirmed)=\"switchHandler('xx', $event)\"\r\n ></ui-item-value>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".portlet{display:flex;flex-direction:column}.portlet-vertical{display:grid}.portlet-row{display:flex;justify-content:space-between;font-size:.9rem}.portlet-row-vertical{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:4px}.portlet-row-value{display:flex;justify-content:flex-end;text-align:left;gap:5px}.portlet-row-label{color:var(--grey-400)}.p-type-text{font-size:.9rem;line-height:1.1rem;text-align:right}.p-type-text-sub{text-align:right;color:var(--grey-500);font-size:.8rem;font-weight:300}.portlet-vertical .portlet-row-value{justify-content:flex-start}.portlet-vertical .portlet-row-label,.portlet-vertical .p-type-text,.portlet-vertical .p-type-text-sub{text-align:left}.content-texttype{display:flex;gap:20px;align-items:center;width:100%}h2{width:100%;font-size:20px;font-weight:600;margin-bottom:15px}\n"], dependencies: [{ kind: "component", type: ItemValueComponent, selector: "ui-item-value", inputs: ["key", "type", "alignment", "row", "disabled", "data", "switchValidation"], outputs: ["switchConfirmed"] }] });
|
|
4256
|
+
}
|
|
4257
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPortletCardComponent, decorators: [{
|
|
4258
|
+
type: Component,
|
|
4259
|
+
args: [{ selector: 'ui-portlet-card', imports: [
|
|
4260
|
+
ItemValueComponent
|
|
4261
|
+
], template: "@if ( title) {\r\n <h2>{{title}}</h2>\r\n}\r\n<div class=\"portlet\" \r\n [class.portlet-vertical]=\"layout === 'vertical'\" \r\n [style.gridTemplateColumns]=\"gridTemplateColumns\"\r\n [style]=\"'gap: ' + gap + 'px;'\" >\r\n @for (item of finalData; track $index) {\r\n <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\r\n <div class=\"portlet-row-label\" [style.fontWeight]=\"labelWeight\">{{item.label}}</div>\r\n <div class=\"portlet-row-value\" [style.fontWeight]=\"valueWeight\">\r\n <ui-item-value\r\n [type]=\"item.type??'text'\"\r\n [data]=\"item\"\r\n [switchValidation]=\"switchValidation\"\r\n (switchConfirmed)=\"switchHandler('xx', $event)\"\r\n ></ui-item-value>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".portlet{display:flex;flex-direction:column}.portlet-vertical{display:grid}.portlet-row{display:flex;justify-content:space-between;font-size:.9rem}.portlet-row-vertical{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:4px}.portlet-row-value{display:flex;justify-content:flex-end;text-align:left;gap:5px}.portlet-row-label{color:var(--grey-400)}.p-type-text{font-size:.9rem;line-height:1.1rem;text-align:right}.p-type-text-sub{text-align:right;color:var(--grey-500);font-size:.8rem;font-weight:300}.portlet-vertical .portlet-row-value{justify-content:flex-start}.portlet-vertical .portlet-row-label,.portlet-vertical .p-type-text,.portlet-vertical .p-type-text-sub{text-align:left}.content-texttype{display:flex;gap:20px;align-items:center;width:100%}h2{width:100%;font-size:20px;font-weight:600;margin-bottom:15px}\n"] }]
|
|
4262
|
+
}], propDecorators: { title: [{
|
|
4263
|
+
type: Input
|
|
4264
|
+
}], data: [{
|
|
4265
|
+
type: Input
|
|
4266
|
+
}], layout: [{
|
|
4267
|
+
type: Input
|
|
4268
|
+
}], cols: [{
|
|
4269
|
+
type: Input
|
|
4270
|
+
}], gap: [{
|
|
4271
|
+
type: Input
|
|
4272
|
+
}], labelWeight: [{
|
|
4273
|
+
type: Input
|
|
4274
|
+
}], valueWeight: [{
|
|
4275
|
+
type: Input
|
|
4276
|
+
}], switchValidation: [{
|
|
4277
|
+
type: Input
|
|
4278
|
+
}] } });
|
|
4279
|
+
|
|
4280
|
+
class UicShortTableComponent {
|
|
4281
|
+
columns = [];
|
|
4282
|
+
data;
|
|
4283
|
+
loading = false;
|
|
4284
|
+
disabled = false;
|
|
4285
|
+
cols = 2;
|
|
4286
|
+
portlet = [];
|
|
4287
|
+
ngOnInit() {
|
|
4288
|
+
this.portlet = this.apTableToPortlets(this.columns, this.data);
|
|
4289
|
+
}
|
|
4290
|
+
apTableToPortlets(columns, row) {
|
|
4291
|
+
return columns.filter(f => !!f.hideOn)
|
|
4292
|
+
.map(col => {
|
|
4293
|
+
const cell = row.data.find(d => d.key === col.key);
|
|
4294
|
+
if (!cell)
|
|
4295
|
+
return null;
|
|
4296
|
+
return {
|
|
4297
|
+
type: col.type == 'bigtext' ? 'text' : col.type,
|
|
4298
|
+
label: col.label,
|
|
4299
|
+
...cell
|
|
4300
|
+
};
|
|
4301
|
+
})
|
|
4302
|
+
.filter((p) => p !== null);
|
|
4303
|
+
}
|
|
4304
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicShortTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4305
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicShortTableComponent, isStandalone: true, selector: "ui-short-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", cols: "cols" }, ngImport: i0, template: "<ui-portlet-card \r\n [gap]=\"20\" \r\n layout=\"vertical\" \r\n [cols]=\"cols\" \r\n [data]=\"portlet\">\r\n</ui-portlet-card>", styles: [".row-body{padding:10px;border:solid 1px var(--grey-200)}\n"], dependencies: [{ kind: "component", type: UicPortletCardComponent, selector: "ui-portlet-card", inputs: ["title", "data", "layout", "cols", "gap", "labelWeight", "valueWeight", "switchValidation"] }] });
|
|
4306
|
+
}
|
|
4307
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicShortTableComponent, decorators: [{
|
|
4308
|
+
type: Component,
|
|
4309
|
+
args: [{ selector: 'ui-short-table', imports: [UicPortletCardComponent], template: "<ui-portlet-card \r\n [gap]=\"20\" \r\n layout=\"vertical\" \r\n [cols]=\"cols\" \r\n [data]=\"portlet\">\r\n</ui-portlet-card>", styles: [".row-body{padding:10px;border:solid 1px var(--grey-200)}\n"] }]
|
|
4310
|
+
}], propDecorators: { columns: [{
|
|
4311
|
+
type: Input
|
|
4312
|
+
}], data: [{
|
|
4313
|
+
type: Input
|
|
4314
|
+
}], loading: [{
|
|
4315
|
+
type: Input
|
|
4316
|
+
}], disabled: [{
|
|
4317
|
+
type: Input
|
|
4318
|
+
}], cols: [{
|
|
4319
|
+
type: Input
|
|
4320
|
+
}] } });
|
|
4321
|
+
|
|
4322
|
+
// Mapea datos a tablas (deben tener el mismo nombre)
|
|
4323
|
+
function helperTableMapDatoToColums(data, headers) {
|
|
4324
|
+
const row = [];
|
|
4325
|
+
headers.forEach(head => {
|
|
4326
|
+
if (head.key in data && head.type == 'text') {
|
|
4327
|
+
row.push({
|
|
4328
|
+
key: head.key,
|
|
4329
|
+
value: data[head.key]
|
|
4330
|
+
});
|
|
4331
|
+
}
|
|
4332
|
+
});
|
|
4333
|
+
return row;
|
|
4334
|
+
}
|
|
4335
|
+
// MAPEA EL RESULTADO DE UN FORMULARIO AL DTO
|
|
4336
|
+
function helperFormMapFormdataToObject(formData, defaults) {
|
|
4337
|
+
return {
|
|
4338
|
+
...defaults,
|
|
4339
|
+
...Object.fromEntries(Object.keys(defaults)
|
|
4340
|
+
.filter(key => key in formData)
|
|
4341
|
+
.map(key => [key, formData[key]]))
|
|
4342
|
+
};
|
|
4343
|
+
}
|
|
4344
|
+
function isMobile() {
|
|
4345
|
+
const mobileBP = getComputedStyle(document.documentElement)
|
|
4346
|
+
.getPropertyValue('--bp-mobile');
|
|
4347
|
+
return window.matchMedia(`(max-width: ${mobileBP})`).matches;
|
|
4348
|
+
}
|
|
4349
|
+
|
|
4350
|
+
class UicTableComponent {
|
|
4351
|
+
columns = [];
|
|
4352
|
+
data = [];
|
|
4353
|
+
loading = false;
|
|
4354
|
+
disabled = false;
|
|
4355
|
+
rowClickable = false;
|
|
4356
|
+
rowExpandible = false;
|
|
4357
|
+
pages = 0;
|
|
4358
|
+
size = 25;
|
|
4359
|
+
squeletonRows = 5;
|
|
4360
|
+
buttonSize = 'm';
|
|
4361
|
+
highlightedId = 0;
|
|
4362
|
+
headerText = '';
|
|
4363
|
+
totalItems = 0;
|
|
4364
|
+
alignment = 'center';
|
|
4365
|
+
searchEnabled = true;
|
|
4366
|
+
searchLabel = 'Buscar';
|
|
4367
|
+
searchPlaceholder = 'Buscar';
|
|
4368
|
+
headerClass = '';
|
|
4369
|
+
headerBackgroundColor = 'grey';
|
|
4370
|
+
striped = false;
|
|
4371
|
+
showPagination = true;
|
|
4372
|
+
searchOnKeydown = false;
|
|
4373
|
+
showEmptyMessage = true;
|
|
4374
|
+
showSearchButton = false;
|
|
4375
|
+
showTextPagination = true;
|
|
4376
|
+
emptyMessage = 'No hay elementos';
|
|
4377
|
+
switchValidation = '';
|
|
4378
|
+
nextButtonText = 'Sig.';
|
|
4379
|
+
previousButtonText = 'Ant.';
|
|
4380
|
+
mobilePortletCols = 2;
|
|
4381
|
+
searcherShowButtonText = false;
|
|
4382
|
+
action = new EventEmitter();
|
|
4383
|
+
update = new EventEmitter();
|
|
4384
|
+
checkedChange = new EventEmitter();
|
|
4385
|
+
switchChange = new EventEmitter();
|
|
4386
|
+
clickedRow = new EventEmitter();
|
|
4387
|
+
allSelected = false;
|
|
4388
|
+
checkedIds = new Set();
|
|
4389
|
+
sortKey = '';
|
|
4390
|
+
sortAsc = true;
|
|
4391
|
+
filter = '';
|
|
4392
|
+
page = 1;
|
|
4393
|
+
fullViewRows = [];
|
|
4394
|
+
mobileView = false;
|
|
4395
|
+
ngOnInit() {
|
|
4396
|
+
this.mobileView = isMobile();
|
|
4397
|
+
}
|
|
4398
|
+
getValue(data, key) {
|
|
4399
|
+
const col = data.find(col => col.key == key);
|
|
4400
|
+
return col?.value?.toString() ?? '';
|
|
4401
|
+
}
|
|
4402
|
+
getMoreActions(actions, row) {
|
|
4403
|
+
return actions
|
|
4404
|
+
.filter(f => this.isValidRule(row, f.rule))
|
|
4405
|
+
.map(p => ({ id: p.key, label: p.text ?? '', icon: p.icon ?? '' }));
|
|
4406
|
+
}
|
|
4407
|
+
getFontColor(data, key) {
|
|
4408
|
+
const col = data.find(col => col.key == key);
|
|
4409
|
+
return 'ui-trc-' + (col?.textColor ?? 'black');
|
|
4410
|
+
}
|
|
4411
|
+
isValidRule(data, key) {
|
|
4412
|
+
if (!key)
|
|
4413
|
+
return true;
|
|
4414
|
+
let valid = true;
|
|
4415
|
+
key.forEach(k => {
|
|
4416
|
+
const col = data.find(col => col.key == k);
|
|
4417
|
+
valid = valid && !!(col?.value);
|
|
4418
|
+
});
|
|
4419
|
+
return valid;
|
|
4420
|
+
}
|
|
4421
|
+
sortClick(key) {
|
|
4422
|
+
if (this.sortKey != key) {
|
|
4423
|
+
this.sortKey = key;
|
|
4424
|
+
this.sortAsc = true;
|
|
4425
|
+
}
|
|
4426
|
+
else if (this.sortAsc) {
|
|
4427
|
+
this.sortAsc = false;
|
|
4428
|
+
}
|
|
4429
|
+
else {
|
|
4430
|
+
this.sortKey = '';
|
|
4431
|
+
this.sortAsc = true;
|
|
4432
|
+
}
|
|
4433
|
+
this.updateData();
|
|
4434
|
+
}
|
|
4435
|
+
sizeChabge(newSize) {
|
|
4436
|
+
this.size = newSize;
|
|
4437
|
+
this.updateData();
|
|
4438
|
+
}
|
|
4439
|
+
pageChage(newPage) {
|
|
4440
|
+
this.page = newPage;
|
|
4441
|
+
this.updateData();
|
|
4442
|
+
}
|
|
4443
|
+
search(text) {
|
|
4444
|
+
this.filter = text;
|
|
4445
|
+
this.updateData();
|
|
4446
|
+
}
|
|
4447
|
+
updateData() {
|
|
4448
|
+
this.update.emit({
|
|
4449
|
+
sortBy: this.sortKey,
|
|
4450
|
+
isSortAscending: this.sortAsc,
|
|
4451
|
+
pageNumber: this.page,
|
|
4452
|
+
pageSize: this.size,
|
|
4453
|
+
filter: this.filter
|
|
4454
|
+
});
|
|
4455
|
+
}
|
|
4456
|
+
toggleSelection(id, checked) {
|
|
4457
|
+
if (checked) {
|
|
3887
4458
|
this.checkedIds.add(id);
|
|
3888
4459
|
}
|
|
3889
4460
|
else {
|
|
@@ -3918,10 +4489,6 @@ class UicTableComponent {
|
|
|
3918
4489
|
switchHandler(key, value, columName) {
|
|
3919
4490
|
this.switchChange.emit({ key, value, columName });
|
|
3920
4491
|
}
|
|
3921
|
-
expand(rowRef, event) {
|
|
3922
|
-
rowRef.expanded = !rowRef.expanded;
|
|
3923
|
-
event?.stopPropagation();
|
|
3924
|
-
}
|
|
3925
4492
|
actionsRef;
|
|
3926
4493
|
hasActions = false;
|
|
3927
4494
|
ngAfterContentInit() {
|
|
@@ -3930,7 +4497,7 @@ class UicTableComponent {
|
|
|
3930
4497
|
clickRow(id) {
|
|
3931
4498
|
if (this.rowClickable)
|
|
3932
4499
|
this.clickedRow.emit(id);
|
|
3933
|
-
if (this.rowExpandible) {
|
|
4500
|
+
if (this.rowExpandible && this.mobileView) {
|
|
3934
4501
|
if (this.fullViewRows.includes(id)) {
|
|
3935
4502
|
this.fullViewRows = this.fullViewRows.filter(f => f != id);
|
|
3936
4503
|
}
|
|
@@ -3940,15 +4507,20 @@ class UicTableComponent {
|
|
|
3940
4507
|
}
|
|
3941
4508
|
}
|
|
3942
4509
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3943
|
-
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", disabled: "disabled", rowClickable: "rowClickable", rowExpandible: "rowExpandible", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", searchOnKeydown: "searchOnKeydown", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", showTextPagination: "showTextPagination", emptyMessage: "emptyMessage", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange", clickedRow: "clickedRow" }, queries: [{ propertyName: "actionsRef", first: true, predicate: ["[actions]"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if ( hasActions || searchEnabled){\r\n <div class=\"ui-table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher \r\n [showSearchButton]=\"showSearchButton\" \r\n [showButtonText]=\"searcherShowButtonText\" \r\n [searchOnKeydown]=\"searchOnKeydown\"\r\n (filter)=\"search($event)\" \r\n [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n }\r\n <div class=\"ui-filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n }\r\n <div class=\"ui-table-container\"> \r\n <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n <thead>\r\n <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n @for (header of columns; track $index) {\r\n <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n @if (header.type=='checkbox') {\r\n <div>\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n </div>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-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 </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(squeletonRows); track $index) {\r\n <tr>\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"ui-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\" \r\n [class.ui-tr-highlighted]=\"row.highlighted\"\r\n [class.clickable-row]=\"rowClickable\"\r\n (click)=\"clickRow(row.id)\"\r\n >\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\"\r\n [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'text' || !header.type) {\r\n @let icon = getIcon(row.data,header.key); \r\n @let rightIcon = getIcon(row.data,header.key,true);\r\n @if( icon ){ <i [class]=\"icon\"></i>}\r\n {{ getValue(row.data,header.key) }} \r\n @if( rightIcon ){ <i [class]=\"rightIcon\"></i>}\r\n }\r\n @if (header.type == 'bigtext') {\r\n <div (click)=\"expand(row, $event)\" class=\"expandible-row\" [class.expandedrow]=\"row.expanded\">\r\n {{ getValue(row.data,header.key) }} \r\n <i [class]=\"row.expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n @if (!row.expanded) {\r\n <div class=\"fade-overlay\"></div>\r\n }\r\n </div>\r\n }\r\n @if (header.type == 'icon-list') {\r\n @for (alert of getList(row.data,header.key); track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n }\r\n }\r\n @else if (header.type == 'list'){\r\n <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list> \r\n }\r\n @else if (header.type == 'user'){\r\n <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else if (header.type == 'status'){\r\n <ui-status-label [icon]=\"getIcon(row.data,header.key)??'ri-circle-fill'\" [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label> \r\n }\r\n @else if (header.type == 'tag'){\r\n <ui-status-label type=\"tag\" [icon]=\"getIcon(row.data,header.key)??'ri-circle-fill'\" [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label> \r\n }\r\n @else if (header.type == 'switch'){\r\n <div (click)=\"$event.stopPropagation()\">\r\n <ui-switch [disabled]=\"disabled\" [checked]=\"isChecked(row.data,header.key)\" (checkedChange)=\"switchHandler(row.id,$event,header.key)\"></ui-switch> \r\n </div>\r\n }\r\n @else if (header.type == 'actions') { \r\n <div class=\"ui-centered-cell-content\">\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 [disabled]=\"disabled\"\r\n [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!btn.text\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color??'black'\"\r\n (click)=\"doAction(row.id,btn.key,$event)\">\r\n </ui-button> \r\n }\r\n } \r\n @if ( header.moreActions && header.moreActions.length>0 ) {\r\n @for (ma of header.moreActions; track $index) {\r\n <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n }\r\n }\r\n </div> \r\n }\r\n </div>\r\n @let subtext = getSubtext(row.data,header.key);\r\n @if( subtext ){\r\n <div [class]=\"'subtext ui-alignment-'+alignment\">{{subtext }}</div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n @if (fullViewRows.includes(row.id)) {\r\n <tr style=\"border-top: none ;\">\r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"full-space-row\">\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n @empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [showText]=\"showTextPagination\"\r\n [size]=\"size\"\r\n [nextButtonText]=\"nextButtonText\"\r\n [previousButtonText]=\"previousButtonText\"\r\n [buttonSize]=\"buttonSize\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.subtext{font-size:12px;color:var(--grey-600)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.ui-filter-actions{display:flex;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:30px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type", "icon"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading", "showText", "nextButtonText", "previousButtonText"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
|
|
4510
|
+
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", disabled: "disabled", rowClickable: "rowClickable", rowExpandible: "rowExpandible", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", searchOnKeydown: "searchOnKeydown", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", showTextPagination: "showTextPagination", emptyMessage: "emptyMessage", switchValidation: "switchValidation", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText", mobilePortletCols: "mobilePortletCols", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange", clickedRow: "clickedRow" }, queries: [{ propertyName: "actionsRef", first: true, predicate: ["[actions]"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if ( hasActions || searchEnabled){\r\n <div class=\"ui-table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher \r\n [showSearchButton]=\"showSearchButton\" \r\n [showButtonText]=\"searcherShowButtonText\" \r\n [searchOnKeydown]=\"searchOnKeydown\"\r\n (filter)=\"search($event)\" \r\n [placeholder]=\"searchPlaceholder\" >\r\n </uic-table-searcher>\r\n }\r\n <div class=\"ui-filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n }\r\n <div class=\"ui-table-container\"> \r\n <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n <thead>\r\n <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n @for (header of columns; track $index) {\r\n <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n @if (header.type=='checkbox') {\r\n <div>\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n </div>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-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 </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(squeletonRows); track $index) {\r\n <tr>\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"ui-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\" \r\n [class.ui-tr-highlighted]=\"row.highlighted\"\r\n [class.clickable-row]=\"rowClickable\"\r\n (click)=\"clickRow(row.id)\"\r\n >\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\"\r\n [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n\r\n <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'actions') { \r\n <div class=\"ui-centered-cell-content\">\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 [disabled]=\"disabled\"\r\n [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!btn.text\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color??'black'\"\r\n (click)=\"doAction(row.id,btn.key,$event)\">\r\n </ui-button> \r\n }\r\n } \r\n @if ( header.moreActions && header.moreActions.length>0 ) {\r\n @for (ma of header.moreActions; track $index) {\r\n <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n }\r\n }\r\n </div> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else {\r\n <ui-item-value\r\n [disabled]=\"disabled\"\r\n [key]=\"header.key\"\r\n [type]=\"header.type??'text'\"\r\n [row]=\"row\"\r\n [alignment]=\"alignment\"\r\n [switchValidation]=\"switchValidation\"\r\n (switchConfirmed)=\"switchHandler(header.key, $event, header.label)\"\r\n ></ui-item-value>\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n @if (fullViewRows.includes(row.id)) {\r\n <tr style=\"border-top: none ;\">\r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"full-space-row\">\r\n <ui-short-table [columns]=\"columns\" [cols]=\"mobilePortletCols\" [data]=\"row\"></ui-short-table>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n @empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [showText]=\"showTextPagination\"\r\n [size]=\"size\"\r\n [nextButtonText]=\"nextButtonText\"\r\n [previousButtonText]=\"previousButtonText\"\r\n [buttonSize]=\"buttonSize\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}@media (max-width: 479px){.ui-table-filters{padding:8px 0;flex-direction:column;align-items:normal;gap:8px}}.ui-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}\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: ItemValueComponent, selector: "ui-item-value", inputs: ["key", "type", "alignment", "row", "disabled", "data", "switchValidation"], outputs: ["switchConfirmed"] }, { kind: "component", type: UicShortTableComponent, selector: "ui-short-table", inputs: ["columns", "data", "loading", "disabled", "cols"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading", "showText", "nextButtonText", "previousButtonText"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
|
|
3944
4511
|
}
|
|
3945
4512
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, decorators: [{
|
|
3946
4513
|
type: Component,
|
|
3947
|
-
args: [{ selector: 'ui-table', imports: [CommonModule,
|
|
3948
|
-
|
|
3949
|
-
|
|
3950
|
-
|
|
3951
|
-
UicTablePaginationComponent, UicToolTipDirective, UicCheckboxComponent, FormsModule], animations: [highlightRow, animatedRow], template: "@if ( hasActions || searchEnabled){\r\n <div class=\"ui-table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher \r\n [showSearchButton]=\"showSearchButton\" \r\n [showButtonText]=\"searcherShowButtonText\" \r\n [searchOnKeydown]=\"searchOnKeydown\"\r\n (filter)=\"search($event)\" \r\n [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n }\r\n <div class=\"ui-filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n }\r\n <div class=\"ui-table-container\"> \r\n <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n <thead>\r\n <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n @for (header of columns; track $index) {\r\n <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n @if (header.type=='checkbox') {\r\n <div>\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n </div>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-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 </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(squeletonRows); track $index) {\r\n <tr>\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"ui-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\" \r\n [class.ui-tr-highlighted]=\"row.highlighted\"\r\n [class.clickable-row]=\"rowClickable\"\r\n (click)=\"clickRow(row.id)\"\r\n >\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\"\r\n [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'text' || !header.type) {\r\n @let icon = getIcon(row.data,header.key); \r\n @let rightIcon = getIcon(row.data,header.key,true);\r\n @if( icon ){ <i [class]=\"icon\"></i>}\r\n {{ getValue(row.data,header.key) }} \r\n @if( rightIcon ){ <i [class]=\"rightIcon\"></i>}\r\n }\r\n @if (header.type == 'bigtext') {\r\n <div (click)=\"expand(row, $event)\" class=\"expandible-row\" [class.expandedrow]=\"row.expanded\">\r\n {{ getValue(row.data,header.key) }} \r\n <i [class]=\"row.expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n @if (!row.expanded) {\r\n <div class=\"fade-overlay\"></div>\r\n }\r\n </div>\r\n }\r\n @if (header.type == 'icon-list') {\r\n @for (alert of getList(row.data,header.key); track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n }\r\n }\r\n @else if (header.type == 'list'){\r\n <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list> \r\n }\r\n @else if (header.type == 'user'){\r\n <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else if (header.type == 'status'){\r\n <ui-status-label [icon]=\"getIcon(row.data,header.key)??'ri-circle-fill'\" [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label> \r\n }\r\n @else if (header.type == 'tag'){\r\n <ui-status-label type=\"tag\" [icon]=\"getIcon(row.data,header.key)??'ri-circle-fill'\" [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label> \r\n }\r\n @else if (header.type == 'switch'){\r\n <div (click)=\"$event.stopPropagation()\">\r\n <ui-switch [disabled]=\"disabled\" [checked]=\"isChecked(row.data,header.key)\" (checkedChange)=\"switchHandler(row.id,$event,header.key)\"></ui-switch> \r\n </div>\r\n }\r\n @else if (header.type == 'actions') { \r\n <div class=\"ui-centered-cell-content\">\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 [disabled]=\"disabled\"\r\n [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!btn.text\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color??'black'\"\r\n (click)=\"doAction(row.id,btn.key,$event)\">\r\n </ui-button> \r\n }\r\n } \r\n @if ( header.moreActions && header.moreActions.length>0 ) {\r\n @for (ma of header.moreActions; track $index) {\r\n <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n }\r\n }\r\n </div> \r\n }\r\n </div>\r\n @let subtext = getSubtext(row.data,header.key);\r\n @if( subtext ){\r\n <div [class]=\"'subtext ui-alignment-'+alignment\">{{subtext }}</div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n @if (fullViewRows.includes(row.id)) {\r\n <tr style=\"border-top: none ;\">\r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"full-space-row\">\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n @empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [showText]=\"showTextPagination\"\r\n [size]=\"size\"\r\n [nextButtonText]=\"nextButtonText\"\r\n [previousButtonText]=\"previousButtonText\"\r\n [buttonSize]=\"buttonSize\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.subtext{font-size:12px;color:var(--grey-600)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.ui-filter-actions{display:flex;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:30px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}\n"] }]
|
|
4514
|
+
args: [{ selector: 'ui-table', imports: [CommonModule,
|
|
4515
|
+
UicButtonComponent,
|
|
4516
|
+
ItemValueComponent,
|
|
4517
|
+
UicShortTableComponent,
|
|
4518
|
+
UicActionButtonComponent,
|
|
4519
|
+
UicTableUicSearcherComponent,
|
|
4520
|
+
UicTablePaginationComponent,
|
|
4521
|
+
UicToolTipDirective,
|
|
4522
|
+
UicCheckboxComponent,
|
|
4523
|
+
FormsModule], animations: [highlightRow, animatedRow], template: "@if ( hasActions || searchEnabled){\r\n <div class=\"ui-table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher \r\n [showSearchButton]=\"showSearchButton\" \r\n [showButtonText]=\"searcherShowButtonText\" \r\n [searchOnKeydown]=\"searchOnKeydown\"\r\n (filter)=\"search($event)\" \r\n [placeholder]=\"searchPlaceholder\" >\r\n </uic-table-searcher>\r\n }\r\n <div class=\"ui-filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n }\r\n <div class=\"ui-table-container\"> \r\n <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n <thead>\r\n <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n @for (header of columns; track $index) {\r\n <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n @if (header.type=='checkbox') {\r\n <div>\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n </div>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-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 </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(squeletonRows); track $index) {\r\n <tr>\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"ui-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\" \r\n [class.ui-tr-highlighted]=\"row.highlighted\"\r\n [class.clickable-row]=\"rowClickable\"\r\n (click)=\"clickRow(row.id)\"\r\n >\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\"\r\n [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n\r\n <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'actions') { \r\n <div class=\"ui-centered-cell-content\">\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 [disabled]=\"disabled\"\r\n [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!btn.text\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color??'black'\"\r\n (click)=\"doAction(row.id,btn.key,$event)\">\r\n </ui-button> \r\n }\r\n } \r\n @if ( header.moreActions && header.moreActions.length>0 ) {\r\n @for (ma of header.moreActions; track $index) {\r\n <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n }\r\n }\r\n </div> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else {\r\n <ui-item-value\r\n [disabled]=\"disabled\"\r\n [key]=\"header.key\"\r\n [type]=\"header.type??'text'\"\r\n [row]=\"row\"\r\n [alignment]=\"alignment\"\r\n [switchValidation]=\"switchValidation\"\r\n (switchConfirmed)=\"switchHandler(header.key, $event, header.label)\"\r\n ></ui-item-value>\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n @if (fullViewRows.includes(row.id)) {\r\n <tr style=\"border-top: none ;\">\r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"full-space-row\">\r\n <ui-short-table [columns]=\"columns\" [cols]=\"mobilePortletCols\" [data]=\"row\"></ui-short-table>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n @empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [showText]=\"showTextPagination\"\r\n [size]=\"size\"\r\n [nextButtonText]=\"nextButtonText\"\r\n [previousButtonText]=\"previousButtonText\"\r\n [buttonSize]=\"buttonSize\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}@media (max-width: 479px){.ui-table-filters{padding:8px 0;flex-direction:column;align-items:normal;gap:8px}}.ui-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}\n"] }]
|
|
3952
4524
|
}], propDecorators: { columns: [{
|
|
3953
4525
|
type: Input
|
|
3954
4526
|
}], data: [{
|
|
@@ -4001,10 +4573,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4001
4573
|
type: Input
|
|
4002
4574
|
}], emptyMessage: [{
|
|
4003
4575
|
type: Input
|
|
4576
|
+
}], switchValidation: [{
|
|
4577
|
+
type: Input
|
|
4004
4578
|
}], nextButtonText: [{
|
|
4005
4579
|
type: Input
|
|
4006
4580
|
}], previousButtonText: [{
|
|
4007
4581
|
type: Input
|
|
4582
|
+
}], mobilePortletCols: [{
|
|
4583
|
+
type: Input
|
|
4008
4584
|
}], searcherShowButtonText: [{
|
|
4009
4585
|
type: Input
|
|
4010
4586
|
}], action: [{
|
|
@@ -4233,57 +4809,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4233
4809
|
type: Input
|
|
4234
4810
|
}] } });
|
|
4235
4811
|
|
|
4236
|
-
class UicPortletCardComponent {
|
|
4237
|
-
title = '';
|
|
4238
|
-
data = [];
|
|
4239
|
-
layout = 'horizontal';
|
|
4240
|
-
cols = 1;
|
|
4241
|
-
gap = 20;
|
|
4242
|
-
labelWeight = 400;
|
|
4243
|
-
valueWeight = 500;
|
|
4244
|
-
get gridTemplateColumns() {
|
|
4245
|
-
if (this.layout !== 'vertical') {
|
|
4246
|
-
return null;
|
|
4247
|
-
}
|
|
4248
|
-
const columns = Math.max(1, Math.floor(this.cols || 1));
|
|
4249
|
-
return `repeat(${columns}, minmax(0, 1fr))`;
|
|
4250
|
-
}
|
|
4251
|
-
copyText(text) {
|
|
4252
|
-
navigator.clipboard.writeText(text)
|
|
4253
|
-
.then(() => {
|
|
4254
|
-
console.log('Copiado!');
|
|
4255
|
-
})
|
|
4256
|
-
.catch(err => {
|
|
4257
|
-
console.error('No se pudo copiar: ', err);
|
|
4258
|
-
});
|
|
4259
|
-
}
|
|
4260
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPortletCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4261
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicPortletCardComponent, isStandalone: true, selector: "ui-portlet-card", inputs: { title: "title", data: "data", layout: "layout", cols: "cols", gap: "gap", labelWeight: "labelWeight", valueWeight: "valueWeight" }, ngImport: i0, template: "@if ( title) {\r\n <h2>{{title}}</h2>\r\n}\r\n<div class=\"portlet\" \r\n [class.portlet-vertical]=\"layout === 'vertical'\" \r\n [style.gridTemplateColumns]=\"gridTemplateColumns\"\r\n [style]=\"'gap: ' + gap + 'px;'\" >\r\n @for (item of data; track $index) {\r\n <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\r\n <div class=\"portlet-row-label\" [style.fontWeight]=\"labelWeight\">{{item.label}}</div>\r\n <div class=\"portlet-row-value\" [style.fontWeight]=\"valueWeight\">\r\n @if (item.icon) {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n @if (['text','copy'].includes((item.type??'text'))) {\r\n <div class=\"p-type-text\">\r\n <div class=\"content-texttype\">\r\n {{item.value}} \r\n\r\n @if (item.type == 'copy'){\r\n <ui-button (click)=\"copyText(item.value.toString())\" type=\"bordered\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n }\r\n\r\n </div>\r\n <div class=\"p-type-text-sub\">{{item.subtext}}</div>\r\n </div>\r\n }\r\n @if (item.type == 'money') {\r\n {{ +item.value | currency: item.currencyCode}} \r\n }\r\n \r\n @if (item.type == 'date') {\r\n {{ item.value .toString() | date: 'dd/MM/yyyy'}} \r\n }\r\n @if (item.type == 'status' || item.type == 'tag') {\r\n <ui-status-label [type]=\"item.type\" [color]=\"item.color||'black'\"> {{item.value}}</ui-status-label>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".portlet{display:flex;flex-direction:column}.portlet-vertical{display:grid}.portlet-row{display:flex;justify-content:space-between;font-size:.9rem}.portlet-row-vertical{flex-direction:column;align-items:flex-start;gap:4px}.portlet-row-value{display:flex;justify-content:flex-end;gap:5px}.portlet-row-label{color:var(--grey-400)}.p-type-text{font-size:.9rem;line-height:1.1rem;text-align:right}.p-type-text-sub{text-align:right;color:var(--grey-500);font-size:.8rem;font-weight:300}.portlet-vertical .portlet-row-value{justify-content:flex-start}.portlet-vertical .portlet-row-label,.portlet-vertical .p-type-text,.portlet-vertical .p-type-text-sub{text-align:left}.content-texttype{display:flex;gap:20px;align-items:center;width:100%}h2{width:100%;font-size:20px;font-weight:600;margin-bottom:15px}\n"], dependencies: [{ kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type", "icon"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
4262
|
-
}
|
|
4263
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPortletCardComponent, decorators: [{
|
|
4264
|
-
type: Component,
|
|
4265
|
-
args: [{ selector: 'ui-portlet-card', imports: [
|
|
4266
|
-
UicStatusLabelComponent,
|
|
4267
|
-
CurrencyPipe,
|
|
4268
|
-
UicButtonComponent,
|
|
4269
|
-
DatePipe
|
|
4270
|
-
], template: "@if ( title) {\r\n <h2>{{title}}</h2>\r\n}\r\n<div class=\"portlet\" \r\n [class.portlet-vertical]=\"layout === 'vertical'\" \r\n [style.gridTemplateColumns]=\"gridTemplateColumns\"\r\n [style]=\"'gap: ' + gap + 'px;'\" >\r\n @for (item of data; track $index) {\r\n <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\r\n <div class=\"portlet-row-label\" [style.fontWeight]=\"labelWeight\">{{item.label}}</div>\r\n <div class=\"portlet-row-value\" [style.fontWeight]=\"valueWeight\">\r\n @if (item.icon) {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n @if (['text','copy'].includes((item.type??'text'))) {\r\n <div class=\"p-type-text\">\r\n <div class=\"content-texttype\">\r\n {{item.value}} \r\n\r\n @if (item.type == 'copy'){\r\n <ui-button (click)=\"copyText(item.value.toString())\" type=\"bordered\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n }\r\n\r\n </div>\r\n <div class=\"p-type-text-sub\">{{item.subtext}}</div>\r\n </div>\r\n }\r\n @if (item.type == 'money') {\r\n {{ +item.value | currency: item.currencyCode}} \r\n }\r\n \r\n @if (item.type == 'date') {\r\n {{ item.value .toString() | date: 'dd/MM/yyyy'}} \r\n }\r\n @if (item.type == 'status' || item.type == 'tag') {\r\n <ui-status-label [type]=\"item.type\" [color]=\"item.color||'black'\"> {{item.value}}</ui-status-label>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".portlet{display:flex;flex-direction:column}.portlet-vertical{display:grid}.portlet-row{display:flex;justify-content:space-between;font-size:.9rem}.portlet-row-vertical{flex-direction:column;align-items:flex-start;gap:4px}.portlet-row-value{display:flex;justify-content:flex-end;gap:5px}.portlet-row-label{color:var(--grey-400)}.p-type-text{font-size:.9rem;line-height:1.1rem;text-align:right}.p-type-text-sub{text-align:right;color:var(--grey-500);font-size:.8rem;font-weight:300}.portlet-vertical .portlet-row-value{justify-content:flex-start}.portlet-vertical .portlet-row-label,.portlet-vertical .p-type-text,.portlet-vertical .p-type-text-sub{text-align:left}.content-texttype{display:flex;gap:20px;align-items:center;width:100%}h2{width:100%;font-size:20px;font-weight:600;margin-bottom:15px}\n"] }]
|
|
4271
|
-
}], propDecorators: { title: [{
|
|
4272
|
-
type: Input
|
|
4273
|
-
}], data: [{
|
|
4274
|
-
type: Input
|
|
4275
|
-
}], layout: [{
|
|
4276
|
-
type: Input
|
|
4277
|
-
}], cols: [{
|
|
4278
|
-
type: Input
|
|
4279
|
-
}], gap: [{
|
|
4280
|
-
type: Input
|
|
4281
|
-
}], labelWeight: [{
|
|
4282
|
-
type: Input
|
|
4283
|
-
}], valueWeight: [{
|
|
4284
|
-
type: Input
|
|
4285
|
-
}] } });
|
|
4286
|
-
|
|
4287
4812
|
class UicTabsButtonComponent {
|
|
4288
4813
|
tabs = [];
|
|
4289
4814
|
activeTab = '';
|
|
@@ -4461,11 +4986,11 @@ class UicWorkPanelComponent {
|
|
|
4461
4986
|
return !(this.isMinimized || !this.activeTabId) && this.fullView;
|
|
4462
4987
|
}
|
|
4463
4988
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4464
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWorkPanelComponent, isStandalone: true, selector: "ui-work-panel", inputs: { componentType: "componentType", componentInputs: "componentInputs", tabs: "tabs", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", addTabRequest: "addTabRequest", fullViewChange: "fullViewChange" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n <ui-button (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button (click)=\"changeSizeBtn(false)\" size=\"s\" tip=\"Reducir\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button (click)=\"changeSizeBtn(true)\" size=\"s\" tip=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.mid-panel{position:fixed;width:50vw;height:80vh;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;z-index:
|
|
4989
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWorkPanelComponent, isStandalone: true, selector: "ui-work-panel", inputs: { componentType: "componentType", componentInputs: "componentInputs", tabs: "tabs", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", addTabRequest: "addTabRequest", fullViewChange: "fullViewChange" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" tip=\"Reducir\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" tip=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.mid-panel{position:fixed;width:50vw;height:80vh;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }] });
|
|
4465
4990
|
}
|
|
4466
4991
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, decorators: [{
|
|
4467
4992
|
type: Component,
|
|
4468
|
-
args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective], template: "<div\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n <ui-button (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button (click)=\"changeSizeBtn(false)\" size=\"s\" tip=\"Reducir\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button (click)=\"changeSizeBtn(true)\" size=\"s\" tip=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.mid-panel{position:fixed;width:50vw;height:80vh;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;z-index:
|
|
4993
|
+
args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective], template: "<div\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" tip=\"Reducir\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" tip=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.mid-panel{position:fixed;width:50vw;height:80vh;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"] }]
|
|
4469
4994
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { host: [{
|
|
4470
4995
|
type: ViewChild,
|
|
4471
4996
|
args: ['host', { read: ViewContainerRef, static: true }]
|
|
@@ -4529,412 +5054,80 @@ class UicOverlayCardComponent {
|
|
|
4529
5054
|
this.overlayRef.backdropClick().subscribe(() => this.close());
|
|
4530
5055
|
}
|
|
4531
5056
|
close() {
|
|
4532
|
-
if (this.overlayRef) {
|
|
4533
|
-
this.overlayRef.dispose();
|
|
4534
|
-
this.overlayRef = null;
|
|
4535
|
-
}
|
|
4536
|
-
}
|
|
4537
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicOverlayCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4538
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicOverlayCardComponent, isStandalone: true, selector: "ui-overlay-card", viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: "<!-- Bot\u00F3n -->\r\n <div (click)=\"openMenu()\" class=\"button-container\">\r\n <ng-content select=\"[button]\"></ng-content>\r\n </div>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n <div class=\"action-menu\">\r\n <ng-content select=\"[content]\"></ng-content>\r\n </div>\r\n</ng-template>\r\n", styles: [".action-menu{display:flex;flex-direction:column;min-width:150px;background:#fff;border:1px solid var(--border-color, #ddd);border-radius:10px;box-shadow:0 2px 6px #00000026}.button-container{width:fit-content;height:fit-content;display:block}\n"] });
|
|
4539
|
-
}
|
|
4540
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicOverlayCardComponent, decorators: [{
|
|
4541
|
-
type: Component,
|
|
4542
|
-
args: [{ selector: 'ui-overlay-card', imports: [], template: "<!-- Bot\u00F3n -->\r\n <div (click)=\"openMenu()\" class=\"button-container\">\r\n <ng-content select=\"[button]\"></ng-content>\r\n </div>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n <div class=\"action-menu\">\r\n <ng-content select=\"[content]\"></ng-content>\r\n </div>\r\n</ng-template>\r\n", styles: [".action-menu{display:flex;flex-direction:column;min-width:150px;background:#fff;border:1px solid var(--border-color, #ddd);border-radius:10px;box-shadow:0 2px 6px #00000026}.button-container{width:fit-content;height:fit-content;display:block}\n"] }]
|
|
4543
|
-
}], propDecorators: { menuTemplate: [{
|
|
4544
|
-
type: ViewChild,
|
|
4545
|
-
args: ['menuTemplate']
|
|
4546
|
-
}] } });
|
|
4547
|
-
|
|
4548
|
-
const pushTop = trigger('pushTop', [
|
|
4549
|
-
transition(':enter', [style({ opacity: 0, transform: 'translateY(20px)' }), animate('.3s ease', style({ opacity: 1, transform: 'translateY(0)' }))]),
|
|
4550
|
-
transition(':leave', [animate('.3s ease', style({ opacity: 0, transform: 'translateY(-20px)' }))])
|
|
4551
|
-
]);
|
|
4552
|
-
|
|
4553
|
-
const sideModal = trigger('sideModal', [
|
|
4554
|
-
state('visible', style({ transform: 'translateX(0)' })),
|
|
4555
|
-
state('hidden', style({ transform: 'translateX(100%)' })),
|
|
4556
|
-
// animación al CREARSE
|
|
4557
|
-
transition('void => visible', [
|
|
4558
|
-
style({ opacity: .8, transform: 'translateX(100%)' }),
|
|
4559
|
-
animate('.5s ease')
|
|
4560
|
-
]),
|
|
4561
|
-
// animación al CERRAR
|
|
4562
|
-
transition('visible => hidden', [
|
|
4563
|
-
animate('.5s ease')
|
|
4564
|
-
])
|
|
4565
|
-
]);
|
|
4566
|
-
const fadeBackdrop = trigger('fadeBackdrop', [
|
|
4567
|
-
state('visible', style({ opacity: 1 })),
|
|
4568
|
-
state('hidden', style({ opacity: 0 })),
|
|
4569
|
-
transition('void => visible', [
|
|
4570
|
-
style({ opacity: 0 }),
|
|
4571
|
-
animate('300ms ease-out')
|
|
4572
|
-
]),
|
|
4573
|
-
transition('visible => hidden', [
|
|
4574
|
-
animate('300ms ease-in')
|
|
4575
|
-
])
|
|
4576
|
-
]);
|
|
4577
|
-
|
|
4578
|
-
const simpleFade = trigger('simpleFade', [
|
|
4579
|
-
transition(':enter', [style({ opacity: 0 }), animate('.3s ease', style({ opacity: 1 }))]),
|
|
4580
|
-
transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
|
|
4581
|
-
]);
|
|
4582
|
-
|
|
4583
|
-
const MODAL_DATA = 'MODAL_DATA';
|
|
4584
|
-
const MODAL_COMPONENT = 'MODAL_COMPONENT';
|
|
4585
|
-
const MODAL_CONFIG = 'MODAL_CONFIG';
|
|
4586
|
-
const MODAL_CLOSE_EVENT = 'modalClosed';
|
|
4587
|
-
const MODAL_CLOSE_REQUEST = 'modalCloserRequested';
|
|
4588
|
-
|
|
4589
|
-
class UiModalRef {
|
|
4590
|
-
overlayRef;
|
|
4591
|
-
modalService;
|
|
4592
|
-
_afterClosed = new Subject();
|
|
4593
|
-
constructor(overlayRef, modalService) {
|
|
4594
|
-
this.overlayRef = overlayRef;
|
|
4595
|
-
this.modalService = modalService;
|
|
4596
|
-
}
|
|
4597
|
-
close(result = null) {
|
|
4598
|
-
this.modalService.close(this.overlayRef, result);
|
|
4599
|
-
this._afterClosed.next({ status: result != null, data: result });
|
|
4600
|
-
this._afterClosed.complete();
|
|
4601
|
-
}
|
|
4602
|
-
closeFloating(result = null) {
|
|
4603
|
-
this.modalService.closeFloating(this.overlayRef, result);
|
|
4604
|
-
this._afterClosed.next({ status: result != null, data: result });
|
|
4605
|
-
this._afterClosed.complete();
|
|
4606
|
-
}
|
|
4607
|
-
afterClosed() {
|
|
4608
|
-
return this._afterClosed.asObservable();
|
|
4609
|
-
}
|
|
4610
|
-
}
|
|
4611
|
-
|
|
4612
|
-
class UicModalComponent {
|
|
4613
|
-
modalRef;
|
|
4614
|
-
component;
|
|
4615
|
-
congif;
|
|
4616
|
-
injector;
|
|
4617
|
-
myConfig = {};
|
|
4618
|
-
ready = false;
|
|
4619
|
-
title = '';
|
|
4620
|
-
portalOutlet;
|
|
4621
|
-
constructor(modalRef, component, congif, injector) {
|
|
4622
|
-
this.modalRef = modalRef;
|
|
4623
|
-
this.component = component;
|
|
4624
|
-
this.congif = congif;
|
|
4625
|
-
this.injector = injector;
|
|
4626
|
-
this.myConfig = congif;
|
|
4627
|
-
}
|
|
4628
|
-
ngAfterViewInit() {
|
|
4629
|
-
const childInjector = Injector.create({
|
|
4630
|
-
providers: [
|
|
4631
|
-
{ provide: UiModalRef, useValue: this.modalRef },
|
|
4632
|
-
{ provide: MODAL_DATA, useValue: this.congif.data }
|
|
4633
|
-
],
|
|
4634
|
-
parent: this.injector
|
|
4635
|
-
});
|
|
4636
|
-
const portal = new ComponentPortal(this.component, null, childInjector);
|
|
4637
|
-
this.portalOutlet.attachComponentPortal(portal);
|
|
4638
|
-
}
|
|
4639
|
-
closeOuside() {
|
|
4640
|
-
if (this.congif.preventCloseingOutside === true)
|
|
4641
|
-
return;
|
|
4642
|
-
this.modalRef.closeFloating(null);
|
|
4643
|
-
}
|
|
4644
|
-
close() {
|
|
4645
|
-
this.modalRef.closeFloating(null);
|
|
4646
|
-
}
|
|
4647
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
4648
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-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: 479px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:var(--white);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:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 479px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 479px){.large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.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] });
|
|
4649
|
-
}
|
|
4650
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
|
|
4651
|
-
type: Component,
|
|
4652
|
-
args: [{ selector: 'ui-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: 479px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:var(--white);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:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 479px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 479px){.large{width:95%}}\n"] }]
|
|
4653
|
-
}], ctorParameters: () => [{ type: UiModalRef, decorators: [{
|
|
4654
|
-
type: Inject,
|
|
4655
|
-
args: [UiModalRef]
|
|
4656
|
-
}] }, { type: i0.Type, decorators: [{
|
|
4657
|
-
type: Inject,
|
|
4658
|
-
args: [MODAL_COMPONENT]
|
|
4659
|
-
}] }, { type: undefined, decorators: [{
|
|
4660
|
-
type: Inject,
|
|
4661
|
-
args: [MODAL_CONFIG]
|
|
4662
|
-
}] }, { type: i0.Injector }], propDecorators: { portalOutlet: [{
|
|
4663
|
-
type: ViewChild,
|
|
4664
|
-
args: [CdkPortalOutlet, { static: true }]
|
|
4665
|
-
}] } });
|
|
4666
|
-
|
|
4667
|
-
class UicSideModalComponent {
|
|
4668
|
-
modalRef;
|
|
4669
|
-
component;
|
|
4670
|
-
congif;
|
|
4671
|
-
injector;
|
|
4672
|
-
modal;
|
|
4673
|
-
overlayRef; // lo setea el servicio
|
|
4674
|
-
state = 'visible';
|
|
4675
|
-
show = true;
|
|
4676
|
-
myConfig = {};
|
|
4677
|
-
ready = false;
|
|
4678
|
-
title = '';
|
|
4679
|
-
portalOutlet;
|
|
4680
|
-
constructor(modalRef, component, congif, injector, modal) {
|
|
4681
|
-
this.modalRef = modalRef;
|
|
4682
|
-
this.component = component;
|
|
4683
|
-
this.congif = congif;
|
|
4684
|
-
this.injector = injector;
|
|
4685
|
-
this.modal = modal;
|
|
4686
|
-
this.myConfig = congif;
|
|
4687
|
-
}
|
|
4688
|
-
ngOnInit() {
|
|
4689
|
-
if (this.overlayRef) {
|
|
4690
|
-
this.overlayRef.hostElement.addEventListener(MODAL_CLOSE_REQUEST, () => {
|
|
4691
|
-
this.close();
|
|
4692
|
-
});
|
|
4693
|
-
}
|
|
4694
|
-
}
|
|
4695
|
-
ngAfterViewInit() {
|
|
4696
|
-
const childInjector = Injector.create({
|
|
4697
|
-
providers: [
|
|
4698
|
-
{ provide: UiModalRef, useValue: this.modalRef },
|
|
4699
|
-
{ provide: MODAL_DATA, useValue: this.congif.data }
|
|
4700
|
-
],
|
|
4701
|
-
parent: this.injector
|
|
4702
|
-
});
|
|
4703
|
-
const portal = new ComponentPortal(this.component, null, childInjector);
|
|
4704
|
-
this.portalOutlet.attachComponentPortal(portal);
|
|
4705
|
-
}
|
|
4706
|
-
closeOuside() {
|
|
4707
|
-
if (this.congif.preventCloseingOutside === true)
|
|
4708
|
-
return;
|
|
4709
|
-
this.close();
|
|
4710
|
-
}
|
|
4711
|
-
close() {
|
|
4712
|
-
this.state = 'hidden';
|
|
4713
|
-
}
|
|
4714
|
-
cancel() {
|
|
4715
|
-
if (this.myConfig.preventCloseOnCancel) {
|
|
4716
|
-
this.modal.triggerSave(false);
|
|
4717
|
-
}
|
|
4718
|
-
else {
|
|
4719
|
-
this.close();
|
|
4720
|
-
}
|
|
4721
|
-
}
|
|
4722
|
-
onAnimationDone(event) {
|
|
4723
|
-
if (event.toState === 'hidden' && event.triggerName === 'sideModal') {
|
|
5057
|
+
if (this.overlayRef) {
|
|
4724
5058
|
this.overlayRef.dispose();
|
|
5059
|
+
this.overlayRef = null;
|
|
4725
5060
|
}
|
|
4726
5061
|
}
|
|
4727
|
-
|
|
4728
|
-
|
|
4729
|
-
}
|
|
4730
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }, { token: UicModalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4731
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSideModalComponent, isStandalone: true, selector: "ui-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\" \r\n (@sideModal.done)=\"onAnimationDone($event)\" \r\n class=\"sidemodal\" \r\n [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n [style.width]=\"myConfig.width??'60%'\" \r\n (click)=\"$event.stopPropagation()\">\r\n @if (myConfig.headerEnabled) {\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 }\r\n <div class=\"sidemodal-body\" [class.nopadding]=\"myConfig.noPadding\">\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)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n }\r\n <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'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:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 479px){.sidemodal{width:100%!important}}@media (min-width: 480px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:calc(9 * var(--design-size-ref));padding:0 calc(4 * var(--design-size-ref));width:100%;display:flex;align-items:center;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}.nopadding{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.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] });
|
|
5062
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicOverlayCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5063
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicOverlayCardComponent, isStandalone: true, selector: "ui-overlay-card", viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: "<!-- Bot\u00F3n -->\r\n <div (click)=\"openMenu()\" class=\"button-container\">\r\n <ng-content select=\"[button]\"></ng-content>\r\n </div>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n <div class=\"action-menu\">\r\n <ng-content select=\"[content]\"></ng-content>\r\n </div>\r\n</ng-template>\r\n", styles: [".action-menu{display:flex;flex-direction:column;min-width:150px;background:#fff;border:1px solid var(--border-color, #ddd);border-radius:10px;box-shadow:0 2px 6px #00000026}.button-container{width:fit-content;height:fit-content;display:block}\n"] });
|
|
4732
5064
|
}
|
|
4733
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
5065
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicOverlayCardComponent, decorators: [{
|
|
4734
5066
|
type: Component,
|
|
4735
|
-
args: [{ selector: 'ui-
|
|
4736
|
-
}],
|
|
4737
|
-
type: Inject,
|
|
4738
|
-
args: [UiModalRef]
|
|
4739
|
-
}] }, { type: i0.Type, decorators: [{
|
|
4740
|
-
type: Inject,
|
|
4741
|
-
args: [MODAL_COMPONENT]
|
|
4742
|
-
}] }, { type: undefined, decorators: [{
|
|
4743
|
-
type: Inject,
|
|
4744
|
-
args: [MODAL_CONFIG]
|
|
4745
|
-
}] }, { type: i0.Injector }, { type: UicModalService }], propDecorators: { portalOutlet: [{
|
|
5067
|
+
args: [{ selector: 'ui-overlay-card', imports: [], template: "<!-- Bot\u00F3n -->\r\n <div (click)=\"openMenu()\" class=\"button-container\">\r\n <ng-content select=\"[button]\"></ng-content>\r\n </div>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n <div class=\"action-menu\">\r\n <ng-content select=\"[content]\"></ng-content>\r\n </div>\r\n</ng-template>\r\n", styles: [".action-menu{display:flex;flex-direction:column;min-width:150px;background:#fff;border:1px solid var(--border-color, #ddd);border-radius:10px;box-shadow:0 2px 6px #00000026}.button-container{width:fit-content;height:fit-content;display:block}\n"] }]
|
|
5068
|
+
}], propDecorators: { menuTemplate: [{
|
|
4746
5069
|
type: ViewChild,
|
|
4747
|
-
args: [
|
|
5070
|
+
args: ['menuTemplate']
|
|
4748
5071
|
}] } });
|
|
4749
5072
|
|
|
4750
|
-
class
|
|
4751
|
-
|
|
4752
|
-
|
|
4753
|
-
|
|
4754
|
-
|
|
4755
|
-
|
|
4756
|
-
|
|
4757
|
-
return this.openModal(component, config, false);
|
|
4758
|
-
}
|
|
4759
|
-
openModal(component, config = {}, isFloating = false) {
|
|
4760
|
-
const overlayConfig = this.createOverlayConfig(isFloating);
|
|
4761
|
-
const overlayRef = this.overlay.create(overlayConfig);
|
|
4762
|
-
const modalRef = new UiModalRef(overlayRef, this);
|
|
4763
|
-
const injector = this.createModalInjector(overlayRef, modalRef, component, config);
|
|
4764
|
-
if (isFloating) {
|
|
4765
|
-
const modalPortal = new ComponentPortal(UicModalComponent, null, injector);
|
|
4766
|
-
overlayRef.attach(modalPortal);
|
|
4767
|
-
}
|
|
4768
|
-
else {
|
|
4769
|
-
const modalPortal = new ComponentPortal(UicSideModalComponent, null, injector);
|
|
4770
|
-
const componentRef = overlayRef.attach(modalPortal);
|
|
4771
|
-
componentRef.instance.overlayRef = overlayRef;
|
|
4772
|
-
}
|
|
4773
|
-
return modalRef;
|
|
4774
|
-
}
|
|
4775
|
-
close(overlayRef, result = null) {
|
|
4776
|
-
overlayRef.hostElement.dispatchEvent(new CustomEvent(MODAL_CLOSE_REQUEST, { detail: result }));
|
|
4777
|
-
}
|
|
4778
|
-
closeFloating(overlayRef, result = null) {
|
|
4779
|
-
overlayRef.backdropElement?.dispatchEvent(new CustomEvent(MODAL_CLOSE_EVENT, { detail: result }));
|
|
4780
|
-
overlayRef.dispose();
|
|
4781
|
-
}
|
|
4782
|
-
_save$ = new Subject();
|
|
4783
|
-
save$ = this._save$.asObservable();
|
|
4784
|
-
triggerSave(result = true) {
|
|
4785
|
-
this._save$.next(result);
|
|
4786
|
-
}
|
|
4787
|
-
createOverlayConfig(isFloating) {
|
|
4788
|
-
const positionStrategy = isFloating
|
|
4789
|
-
? this.overlay.position().global().left()
|
|
4790
|
-
: this.overlay.position().global().right();
|
|
4791
|
-
return {
|
|
4792
|
-
hasBackdrop: true,
|
|
4793
|
-
backdropClass: 'cdk-overlay-dark-backdrop',
|
|
4794
|
-
positionStrategy,
|
|
4795
|
-
scrollStrategy: this.overlay.scrollStrategies.block(),
|
|
4796
|
-
disposeOnNavigation: true,
|
|
4797
|
-
};
|
|
4798
|
-
}
|
|
4799
|
-
createModalInjector(overlayRef, modalRef, component, config) {
|
|
4800
|
-
return Injector.create({
|
|
4801
|
-
providers: [
|
|
4802
|
-
{ provide: OverlayRef, useValue: overlayRef },
|
|
4803
|
-
{ provide: UiModalRef, useValue: modalRef },
|
|
4804
|
-
{ provide: MODAL_COMPONENT, useValue: component },
|
|
4805
|
-
{ provide: MODAL_CONFIG, useValue: config }
|
|
4806
|
-
],
|
|
4807
|
-
parent: this.envInjector,
|
|
4808
|
-
});
|
|
4809
|
-
}
|
|
4810
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4811
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalService, providedIn: 'root' });
|
|
4812
|
-
}
|
|
4813
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalService, decorators: [{
|
|
4814
|
-
type: Injectable,
|
|
4815
|
-
args: [{
|
|
4816
|
-
providedIn: 'root'
|
|
4817
|
-
}]
|
|
4818
|
-
}] });
|
|
4819
|
-
|
|
4820
|
-
class TinyAlertComponent {
|
|
4821
|
-
modalRef;
|
|
4822
|
-
data;
|
|
4823
|
-
constructor(inData, modalRef) {
|
|
4824
|
-
this.modalRef = modalRef;
|
|
4825
|
-
this.data = inData.alert;
|
|
4826
|
-
}
|
|
4827
|
-
response = {};
|
|
4828
|
-
close(value) {
|
|
4829
|
-
this.modalRef.closeFloating(value ? this.response : null);
|
|
5073
|
+
class UICAccordionComponent {
|
|
5074
|
+
tabs = [];
|
|
5075
|
+
activeTab = '';
|
|
5076
|
+
activeTabChange = new EventEmitter();
|
|
5077
|
+
changeTab(key) {
|
|
5078
|
+
this.activeTab = key;
|
|
5079
|
+
this.activeTabChange.emit(this.activeTab);
|
|
4830
5080
|
}
|
|
4831
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
4832
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type:
|
|
5081
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UICAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5082
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UICAccordionComponent, isStandalone: true, selector: "ui-accordion", inputs: { tabs: "tabs", activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div class=\"accordion-reel\">\r\n @for (item of tabs; track $index) {\r\n <div class=\"accordion-item\">\r\n <div class=\"accordion-header\" (click)=\"changeTab(item.key)\">\r\n <div class=\"accordion-header-title\"> \r\n @if (item.icon) {\r\n <i [class]=\"item.icon\"></i> \r\n }\r\n {{item.text}} \r\n </div>\r\n @if (item.subtitle) {\r\n <div class=\"accordion-header-subtitle\">{{item.subtitle}}</div>\r\n }\r\n </div>\r\n @if (activeTab == item.key) {\r\n <div class=\"accordion-body\" [@accordionBody]>\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".accordion-reel{display:flex;flex-direction:column;gap:5px}.accordion-item{border-radius:6px;border:solid 1px var(--grey-300);overflow:hidden}.accordion-header{background-color:var(--grey-100);padding:10px}.accordion-header-title{display:flex;align-items:center;gap:10px}.accordion-header-subtitle{font-size:14px;color:var(--grey-400)}.accordion-body{padding:20px 15px;border-top:solid 1px var(--grey-300);overflow:hidden}\n"], animations: [
|
|
5083
|
+
trigger('accordionBody', [
|
|
5084
|
+
transition(':enter', [
|
|
5085
|
+
style({
|
|
5086
|
+
height: 0,
|
|
5087
|
+
opacity: 0,
|
|
5088
|
+
paddingTop: 0,
|
|
5089
|
+
paddingBottom: 0
|
|
5090
|
+
}),
|
|
5091
|
+
animate('200ms ease', style({ height: '*', opacity: 1, paddingTop: '*', paddingBottom: '*' }))
|
|
5092
|
+
]),
|
|
5093
|
+
transition(':leave', [
|
|
5094
|
+
style({ height: '*', opacity: 1, paddingTop: '*', paddingBottom: '*' }),
|
|
5095
|
+
animate('200ms ease', style({ height: 0, opacity: 0, paddingTop: 0, paddingBottom: 0 }))
|
|
5096
|
+
])
|
|
5097
|
+
])
|
|
5098
|
+
] });
|
|
4833
5099
|
}
|
|
4834
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type:
|
|
5100
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UICAccordionComponent, decorators: [{
|
|
4835
5101
|
type: Component,
|
|
4836
|
-
args: [{ selector: 'ui-
|
|
4837
|
-
|
|
4838
|
-
|
|
4839
|
-
|
|
4840
|
-
|
|
4841
|
-
|
|
4842
|
-
|
|
4843
|
-
|
|
4844
|
-
|
|
4845
|
-
|
|
4846
|
-
|
|
4847
|
-
|
|
4848
|
-
|
|
4849
|
-
|
|
4850
|
-
|
|
4851
|
-
|
|
4852
|
-
|
|
4853
|
-
|
|
4854
|
-
|
|
4855
|
-
}
|
|
4856
|
-
|
|
4857
|
-
|
|
4858
|
-
|
|
4859
|
-
|
|
4860
|
-
iconChar: 'ri-emotion-unhappy-line',
|
|
4861
|
-
okButtonColor: 'red',
|
|
4862
|
-
okButtonText: 'Cerrar',
|
|
4863
|
-
type: 'error',
|
|
4864
|
-
...options,
|
|
4865
|
-
};
|
|
4866
|
-
}
|
|
4867
|
-
function createTinyDelete(body, options) {
|
|
4868
|
-
return {
|
|
4869
|
-
body,
|
|
4870
|
-
title: 'Cornfirmación de acción',
|
|
4871
|
-
iconChar: 'ri-delete-bin-line',
|
|
4872
|
-
okButtonColor: 'red',
|
|
4873
|
-
okButtonText: 'Sí, eliminar',
|
|
4874
|
-
showCancelButton: true,
|
|
4875
|
-
cancelButtonText: 'Cancelar',
|
|
4876
|
-
type: 'delete',
|
|
4877
|
-
...options,
|
|
4878
|
-
};
|
|
4879
|
-
}
|
|
4880
|
-
function createTinyWarning(body, options) {
|
|
4881
|
-
return {
|
|
4882
|
-
body,
|
|
4883
|
-
title: '¡Cuidado!',
|
|
4884
|
-
iconChar: 'ri-alarm-warning-line',
|
|
4885
|
-
okButtonColor: 'yellow',
|
|
4886
|
-
type: 'warning',
|
|
4887
|
-
...options,
|
|
4888
|
-
};
|
|
4889
|
-
}
|
|
4890
|
-
function createTinyInfo(body, options) {
|
|
4891
|
-
return {
|
|
4892
|
-
body,
|
|
4893
|
-
iconChar: 'ri-information-line',
|
|
4894
|
-
okButtonColor: 'black',
|
|
4895
|
-
type: 'info',
|
|
4896
|
-
...options,
|
|
4897
|
-
};
|
|
4898
|
-
}
|
|
5102
|
+
args: [{ selector: 'ui-accordion', imports: [], animations: [
|
|
5103
|
+
trigger('accordionBody', [
|
|
5104
|
+
transition(':enter', [
|
|
5105
|
+
style({
|
|
5106
|
+
height: 0,
|
|
5107
|
+
opacity: 0,
|
|
5108
|
+
paddingTop: 0,
|
|
5109
|
+
paddingBottom: 0
|
|
5110
|
+
}),
|
|
5111
|
+
animate('200ms ease', style({ height: '*', opacity: 1, paddingTop: '*', paddingBottom: '*' }))
|
|
5112
|
+
]),
|
|
5113
|
+
transition(':leave', [
|
|
5114
|
+
style({ height: '*', opacity: 1, paddingTop: '*', paddingBottom: '*' }),
|
|
5115
|
+
animate('200ms ease', style({ height: 0, opacity: 0, paddingTop: 0, paddingBottom: 0 }))
|
|
5116
|
+
])
|
|
5117
|
+
])
|
|
5118
|
+
], template: "<div class=\"accordion-reel\">\r\n @for (item of tabs; track $index) {\r\n <div class=\"accordion-item\">\r\n <div class=\"accordion-header\" (click)=\"changeTab(item.key)\">\r\n <div class=\"accordion-header-title\"> \r\n @if (item.icon) {\r\n <i [class]=\"item.icon\"></i> \r\n }\r\n {{item.text}} \r\n </div>\r\n @if (item.subtitle) {\r\n <div class=\"accordion-header-subtitle\">{{item.subtitle}}</div>\r\n }\r\n </div>\r\n @if (activeTab == item.key) {\r\n <div class=\"accordion-body\" [@accordionBody]>\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".accordion-reel{display:flex;flex-direction:column;gap:5px}.accordion-item{border-radius:6px;border:solid 1px var(--grey-300);overflow:hidden}.accordion-header{background-color:var(--grey-100);padding:10px}.accordion-header-title{display:flex;align-items:center;gap:10px}.accordion-header-subtitle{font-size:14px;color:var(--grey-400)}.accordion-body{padding:20px 15px;border-top:solid 1px var(--grey-300);overflow:hidden}\n"] }]
|
|
5119
|
+
}], propDecorators: { tabs: [{
|
|
5120
|
+
type: Input
|
|
5121
|
+
}], activeTab: [{
|
|
5122
|
+
type: Input
|
|
5123
|
+
}], activeTabChange: [{
|
|
5124
|
+
type: Output
|
|
5125
|
+
}] } });
|
|
4899
5126
|
|
|
4900
|
-
|
|
4901
|
-
|
|
4902
|
-
|
|
4903
|
-
|
|
4904
|
-
this.modal.openFloatingModal(TinyAlertComponent, {
|
|
4905
|
-
data: { alert: data }
|
|
4906
|
-
}).afterClosed().subscribe(result => {
|
|
4907
|
-
resolve({
|
|
4908
|
-
value: result?.status,
|
|
4909
|
-
data: result?.data
|
|
4910
|
-
});
|
|
4911
|
-
});
|
|
4912
|
-
});
|
|
4913
|
-
}
|
|
4914
|
-
success(message, options) {
|
|
4915
|
-
return this.showAlert(createTinySuccess(message, options));
|
|
4916
|
-
}
|
|
4917
|
-
error(message, options) {
|
|
4918
|
-
return this.showAlert(createTinyError(message, options));
|
|
4919
|
-
}
|
|
4920
|
-
warning(message, options) {
|
|
4921
|
-
return this.showAlert(createTinyWarning(message, options));
|
|
4922
|
-
}
|
|
4923
|
-
info(message, options) {
|
|
4924
|
-
return this.showAlert(createTinyInfo(message, options));
|
|
4925
|
-
}
|
|
4926
|
-
deleteConfirmation(message, options) {
|
|
4927
|
-
return this.showAlert(createTinyDelete(message, options));
|
|
4928
|
-
}
|
|
4929
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTinyAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4930
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTinyAlertService, providedIn: 'root' });
|
|
4931
|
-
}
|
|
4932
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTinyAlertService, decorators: [{
|
|
4933
|
-
type: Injectable,
|
|
4934
|
-
args: [{
|
|
4935
|
-
providedIn: 'root'
|
|
4936
|
-
}]
|
|
4937
|
-
}] });
|
|
5127
|
+
const simpleFade = trigger('simpleFade', [
|
|
5128
|
+
transition(':enter', [style({ opacity: 0 }), animate('.3s ease', style({ opacity: 1 }))]),
|
|
5129
|
+
transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
|
|
5130
|
+
]);
|
|
4938
5131
|
|
|
4939
5132
|
class FirstCapitalPipe {
|
|
4940
5133
|
transform(str, max = 0) {
|
|
@@ -4963,34 +5156,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4963
5156
|
}]
|
|
4964
5157
|
}] });
|
|
4965
5158
|
|
|
4966
|
-
// Mapea datos a tablas (deben tener el mismo nombre)
|
|
4967
|
-
function helperTableMapDatoToColums(data, headers) {
|
|
4968
|
-
const row = [];
|
|
4969
|
-
headers.forEach(head => {
|
|
4970
|
-
if (head.key in data && head.type == 'text') {
|
|
4971
|
-
row.push({
|
|
4972
|
-
key: head.key,
|
|
4973
|
-
value: data[head.key]
|
|
4974
|
-
});
|
|
4975
|
-
}
|
|
4976
|
-
});
|
|
4977
|
-
return row;
|
|
4978
|
-
}
|
|
4979
|
-
// MAPEA EL RESULTADO DE UN FORMULARIO AL DTO
|
|
4980
|
-
function helperFormMapFormdataToObject(formData, defaults) {
|
|
4981
|
-
return {
|
|
4982
|
-
...defaults,
|
|
4983
|
-
...Object.fromEntries(Object.keys(defaults)
|
|
4984
|
-
.filter(key => key in formData)
|
|
4985
|
-
.map(key => [key, formData[key]]))
|
|
4986
|
-
};
|
|
4987
|
-
}
|
|
4988
|
-
|
|
4989
5159
|
// COMPONENTS
|
|
4990
5160
|
|
|
4991
5161
|
/**
|
|
4992
5162
|
* Generated bundle index. Do not edit.
|
|
4993
5163
|
*/
|
|
4994
5164
|
|
|
4995
|
-
export { DROPDOWN_OVERLAY_CONTROLS, FirstCapitalPipe, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiDropdownCloseDirective, UiModalRef, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicOverlayCardComponent, UicPhoneInputComponent, UicPortletCardComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicSignaturePadComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicWorkPanelComponent, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperTableMapDatoToColums, highlightRow, pushTop, sideModal, simpleFade };
|
|
5165
|
+
export { DROPDOWN_OVERLAY_CONTROLS, FirstCapitalPipe, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UICAccordionComponent, UiDropdownCloseDirective, UiModalRef, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicOverlayCardComponent, UicPhoneInputComponent, UicPortletCardComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicShortTableComponent, UicSignaturePadComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicWorkPanelComponent, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperTableMapDatoToColums, highlightRow, isMobile, pushTop, sideModal, simpleFade };
|
|
4996
5166
|
//# sourceMappingURL=ui-core-abv.mjs.map
|