ui-core-abv 0.3.29 → 0.3.71
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 +523 -60
- package/fesm2022/ui-core-abv.mjs.map +1 -1
- package/lib/components/inputs/select/select.component.d.ts +3 -1
- package/lib/components/kpi-card/kpi-card.component.d.ts +2 -1
- package/lib/components/overlay-card/overlay-card.component.d.ts +17 -0
- package/lib/components/signature-pad/signature-pad.component.d.ts +36 -0
- package/lib/components/table/table-pagination/table-pagination.component.d.ts +3 -1
- package/lib/components/table/table.component.d.ts +8 -2
- package/lib/components/table/table.models.d.ts +1 -0
- package/lib/components/tabs-button/tabs-button.component.d.ts +6 -1
- package/lib/components/tooltip/tooltip.component.d.ts +1 -0
- package/lib/components/uic-portlet-card/uic-portlet-card.component.d.ts +5 -2
- package/lib/components/work-panel/work-panel.component.d.ts +53 -0
- package/lib/pipes/first-capital.pipe.d.ts +7 -0
- package/package.json +1 -1
- package/public-api.d.ts +4 -0
- package/src/lib/styles/_mixins.scss +3 -3
package/fesm2022/ui-core-abv.mjs
CHANGED
|
@@ -120,8 +120,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
120
120
|
type: Input
|
|
121
121
|
}] } });
|
|
122
122
|
|
|
123
|
-
const base$
|
|
124
|
-
class UicCheckboxComponent extends base$
|
|
123
|
+
const base$b = createValueAccessor();
|
|
124
|
+
class UicCheckboxComponent extends base$b {
|
|
125
125
|
icon = ''; // Icono externo
|
|
126
126
|
iconColor = 'black';
|
|
127
127
|
label = '';
|
|
@@ -204,8 +204,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
204
204
|
type: Input
|
|
205
205
|
}] } });
|
|
206
206
|
|
|
207
|
-
const base$
|
|
208
|
-
class UicSelectComponent extends base$
|
|
207
|
+
const base$a = createValueAccessor();
|
|
208
|
+
class UicSelectComponent extends base$a {
|
|
209
209
|
icon = ''; // Icono externo
|
|
210
210
|
iconColor = 'black';
|
|
211
211
|
internalIcon = ''; //Icono interno
|
|
@@ -217,7 +217,9 @@ class UicSelectComponent extends base$9 {
|
|
|
217
217
|
tip = '';
|
|
218
218
|
showSubtitle = false;
|
|
219
219
|
disabled = false;
|
|
220
|
-
|
|
220
|
+
nonSelectedText = '- Seleccionar -';
|
|
221
|
+
noneText = '- Ninguno -';
|
|
222
|
+
emptyText = 'No hay elementos para mostrar';
|
|
221
223
|
// FUNCTIONS
|
|
222
224
|
loading = false;
|
|
223
225
|
nullable = false;
|
|
@@ -280,13 +282,13 @@ class UicSelectComponent extends base$9 {
|
|
|
280
282
|
this.selectedOption = this.options.find(opt => opt.id === value) ?? null;
|
|
281
283
|
}
|
|
282
284
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
283
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSelectComponent, isStandalone: true, selector: "ui-select", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", internalIconColor: "internalIconColor", size: "size", label: "label", error: "error", tip: "tip", showSubtitle: "showSubtitle", disabled: "disabled", loading: "loading", nullable: "nullable", options: "options" }, providers: [
|
|
285
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSelectComponent, isStandalone: true, selector: "ui-select", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", internalIconColor: "internalIconColor", size: "size", label: "label", error: "error", tip: "tip", showSubtitle: "showSubtitle", disabled: "disabled", nonSelectedText: "nonSelectedText", noneText: "noneText", emptyText: "emptyText", loading: "loading", nullable: "nullable", options: "options" }, providers: [
|
|
284
286
|
{
|
|
285
287
|
provide: NG_VALUE_ACCESSOR,
|
|
286
288
|
useExisting: forwardRef(() => UicSelectComponent),
|
|
287
289
|
multi: true
|
|
288
290
|
}
|
|
289
|
-
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\" > \r\n <!-- INPUT -->\r\n <div (click)=\"openList()\" class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >{{(selectedOption?.text ||
|
|
291
|
+
], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\" > \r\n <!-- INPUT -->\r\n <div (click)=\"openList()\" class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >{{(selectedOption?.text || nonSelectedText)}}</div>\r\n @if (!disabled && !loading) {\r\n <i class=\"ri-arrow-down-s-line\"></i>\r\n }\r\n </div> \r\n <!-- DESPLEGABLE -->\r\n <ng-template #dropdownTemplate >\r\n <div class=\"input-options\">\r\n <!-- OPCIONES -->\r\n <div class=\"input-option-scroll\">\r\n @if (options.length > 0 && nullable) {\r\n <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >{{noneText}}</div>\r\n <div class=\"option-divider\"></div>\r\n }\r\n \r\n \r\n @for (option of options; track $index) {\r\n <div (click)=\"selectOption(option)\" class=\"input-option\">\r\n <div style=\"padding: 2px;\" >\r\n <div class=\"f-medium\" >{{option.text }}</div>\r\n <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\r\n {{option.detail}}\r\n </div>\r\n </div>\r\n </div>\r\n @if ( $index < (options.length - 1) ) {\r\n <span class=\"option-divider\"></span>\r\n }\r\n \r\n }\r\n \r\n @if (options.length == 0) {\r\n <div class=\"fakeinput-alert t-disabled\">{{emptyText}}</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n \r\n </div>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
290
292
|
}
|
|
291
293
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, decorators: [{
|
|
292
294
|
type: Component,
|
|
@@ -296,7 +298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
296
298
|
useExisting: forwardRef(() => UicSelectComponent),
|
|
297
299
|
multi: true
|
|
298
300
|
}
|
|
299
|
-
], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\" > \r\n <!-- INPUT -->\r\n <div (click)=\"openList()\" class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >{{(selectedOption?.text ||
|
|
301
|
+
], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\" > \r\n <!-- INPUT -->\r\n <div (click)=\"openList()\" class=\"fakeinput\" #fakeinput \r\n [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >{{(selectedOption?.text || nonSelectedText)}}</div>\r\n @if (!disabled && !loading) {\r\n <i class=\"ri-arrow-down-s-line\"></i>\r\n }\r\n </div> \r\n <!-- DESPLEGABLE -->\r\n <ng-template #dropdownTemplate >\r\n <div class=\"input-options\">\r\n <!-- OPCIONES -->\r\n <div class=\"input-option-scroll\">\r\n @if (options.length > 0 && nullable) {\r\n <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >{{noneText}}</div>\r\n <div class=\"option-divider\"></div>\r\n }\r\n \r\n \r\n @for (option of options; track $index) {\r\n <div (click)=\"selectOption(option)\" class=\"input-option\">\r\n <div style=\"padding: 2px;\" >\r\n <div class=\"f-medium\" >{{option.text }}</div>\r\n <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\r\n {{option.detail}}\r\n </div>\r\n </div>\r\n </div>\r\n @if ( $index < (options.length - 1) ) {\r\n <span class=\"option-divider\"></span>\r\n }\r\n \r\n }\r\n \r\n @if (options.length == 0) {\r\n <div class=\"fakeinput-alert t-disabled\">{{emptyText}}</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n \r\n </div>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
|
|
300
302
|
}], propDecorators: { icon: [{
|
|
301
303
|
type: Input
|
|
302
304
|
}], iconColor: [{
|
|
@@ -317,6 +319,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
317
319
|
type: Input
|
|
318
320
|
}], disabled: [{
|
|
319
321
|
type: Input
|
|
322
|
+
}], nonSelectedText: [{
|
|
323
|
+
type: Input
|
|
324
|
+
}], noneText: [{
|
|
325
|
+
type: Input
|
|
326
|
+
}], emptyText: [{
|
|
327
|
+
type: Input
|
|
320
328
|
}], loading: [{
|
|
321
329
|
type: Input
|
|
322
330
|
}], nullable: [{
|
|
@@ -380,8 +388,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
380
388
|
type: Output
|
|
381
389
|
}] } });
|
|
382
390
|
|
|
383
|
-
const base$
|
|
384
|
-
class UicRadioComponent extends base$
|
|
391
|
+
const base$9 = createValueAccessor();
|
|
392
|
+
class UicRadioComponent extends base$9 {
|
|
385
393
|
icon = '';
|
|
386
394
|
iconColor = 'black';
|
|
387
395
|
label = '';
|
|
@@ -449,8 +457,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
449
457
|
type: Input
|
|
450
458
|
}] } });
|
|
451
459
|
|
|
452
|
-
const base$
|
|
453
|
-
class UicSliderComponent extends base$
|
|
460
|
+
const base$8 = createValueAccessor();
|
|
461
|
+
class UicSliderComponent extends base$8 {
|
|
454
462
|
icon = ''; // Icono externo
|
|
455
463
|
iconColor = 'black';
|
|
456
464
|
label = '';
|
|
@@ -550,8 +558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
550
558
|
args: ['document:mouseup']
|
|
551
559
|
}] } });
|
|
552
560
|
|
|
553
|
-
const base$
|
|
554
|
-
class UicDatePickerComponent extends base$
|
|
561
|
+
const base$7 = createValueAccessor();
|
|
562
|
+
class UicDatePickerComponent extends base$7 {
|
|
555
563
|
icon = ''; // Icono externo
|
|
556
564
|
iconColor = 'black';
|
|
557
565
|
internalIcon = ''; //Icono interno
|
|
@@ -1016,8 +1024,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1016
1024
|
args: ['calendarTemplate']
|
|
1017
1025
|
}] } });
|
|
1018
1026
|
|
|
1019
|
-
const base$
|
|
1020
|
-
class UicPoolOptionsComponent extends base$
|
|
1027
|
+
const base$6 = createValueAccessor();
|
|
1028
|
+
class UicPoolOptionsComponent extends base$6 {
|
|
1021
1029
|
icon = ''; // Icono externo
|
|
1022
1030
|
iconColor = 'primary'; //color de ícono externo
|
|
1023
1031
|
size = 'm'; // tamaño general del input
|
|
@@ -1140,8 +1148,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1140
1148
|
type: Input
|
|
1141
1149
|
}] } });
|
|
1142
1150
|
|
|
1143
|
-
const base$
|
|
1144
|
-
class UicSearcherComponent extends base$
|
|
1151
|
+
const base$5 = createValueAccessor();
|
|
1152
|
+
class UicSearcherComponent extends base$5 {
|
|
1145
1153
|
icon = ''; // Icono externo
|
|
1146
1154
|
iconColor = 'primary'; //color de ícono externo
|
|
1147
1155
|
internalIcon = 'ri-search-2-line'; //Icono interno
|
|
@@ -1334,8 +1342,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1334
1342
|
args: ['dropdownTemplate']
|
|
1335
1343
|
}] } });
|
|
1336
1344
|
|
|
1337
|
-
const base$
|
|
1338
|
-
class UicMultySelectComponent extends base$
|
|
1345
|
+
const base$4 = createValueAccessor();
|
|
1346
|
+
class UicMultySelectComponent extends base$4 {
|
|
1339
1347
|
icon = ''; // Icono externo
|
|
1340
1348
|
iconColor = 'primary'; //color de ícono externo
|
|
1341
1349
|
internalIcon = ''; //Icono interno
|
|
@@ -1479,8 +1487,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1479
1487
|
args: ['dropdownTemplate']
|
|
1480
1488
|
}] } });
|
|
1481
1489
|
|
|
1482
|
-
const base$
|
|
1483
|
-
class UicTimePickerComponent extends base$
|
|
1490
|
+
const base$3 = createValueAccessor();
|
|
1491
|
+
class UicTimePickerComponent extends base$3 {
|
|
1484
1492
|
// Iconos y estado
|
|
1485
1493
|
icon = '';
|
|
1486
1494
|
iconColor = 'primary';
|
|
@@ -1811,8 +1819,8 @@ const PHONE_COUNTRIES = [
|
|
|
1811
1819
|
{ name: 'Venezuela', iso2: 've', dialCode: '58' }
|
|
1812
1820
|
];
|
|
1813
1821
|
|
|
1814
|
-
const base$
|
|
1815
|
-
class UicPhoneInputComponent extends base$
|
|
1822
|
+
const base$2 = createValueAccessor();
|
|
1823
|
+
class UicPhoneInputComponent extends base$2 {
|
|
1816
1824
|
icon = '';
|
|
1817
1825
|
iconColor = 'black';
|
|
1818
1826
|
internalIcon = '';
|
|
@@ -2106,8 +2114,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2106
2114
|
args: ['dropdownTemplate']
|
|
2107
2115
|
}] } });
|
|
2108
2116
|
|
|
2109
|
-
const base = createValueAccessor();
|
|
2110
|
-
class UicFileInputComponent extends base {
|
|
2117
|
+
const base$1 = createValueAccessor();
|
|
2118
|
+
class UicFileInputComponent extends base$1 {
|
|
2111
2119
|
icon = ''; // Icono externo
|
|
2112
2120
|
iconColor = 'black';
|
|
2113
2121
|
internalIcon = ''; //Icono interno
|
|
@@ -2577,7 +2585,7 @@ class UicDynamicFormComponent {
|
|
|
2577
2585
|
recognition.start();
|
|
2578
2586
|
}
|
|
2579
2587
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2580
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", disabled: "disabled", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n \r\n @if ( ['text','number'].includes(field.type) ) {\n @let currentValue = form.get(field.name)?.value ?? '';\n @let inputColor = getInputColor(field, currentValue);\n <ui-input \n [error]=\"getErrorMessages(field)[0]\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [icon]=\"field.icon??''\"\n [disabled]=\"!!form.get(field.name)?.disabled\"\n [internalIconColor]=\"inputColor\"\n [internalIcon]=\"field.internalIcon || (currentValue != '' ? getIconByColor(field, inputColor) : '')\"\n [loading]=\"field.loading??false\"\n [tip]=\"field.tip??''\" >\n <input #inp\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [step]=\"field.step\"\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"/>\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'textarea' ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <textarea #ta\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"\r\n cols=\"4\"\r\n ></textarea>\r\n @if (field.voiceToTextEnabled && !form.get(field.name)?.disabled) {\r\n @let listening = isListening(field.name);\r\n <ui-button\r\n [disabled]=\"listening\"\r\n style=\"margin-bottom: 2px;\"\r\n (click)=\"voiceToText(ta, field.name)\"\r\n [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n [type]=\"listening?'filled':'bordered'\"\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n ></ui-button>\r\n }\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'phone' ) {\r\n <ui-phone-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" \r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [placeholder]=\"field.placeholder||field.label||''\"\r\n >\r\n </ui-phone-input>\r\n }\r\n @else if (field.type === 'date') {\r\n <ui-date-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [justMonth]=\"!!field.monthMode\"\r\n [min]=\"field.minDate??''\"\r\n [max]=\"field.maxDate??''\"\r\n [monthDay]=\"field.monthDay||'first'\"\r\n [formControlName]=\"field.name\"\r\n ></ui-date-picker>\r\n }\r\n @else if (field.type === 'time') {\r\n <ui-time-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [interval]=\"field.timeInterval??5\"\r\n [formControlName]=\"field.name\"\r\n ></ui-time-picker>\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n @else if (field.type === 'multyselect') {\r\n <ui-multy-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-multy-select>\r\n }\r\n @else if (field.type === 'searcher') {\r\n <ui-searcher\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [searchFn]=\"field.searchFn\"\r\n [itemDisplayFn]=\"field.searchDisplayFn\"\r\n [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n [placeholder]=\"field.placeholder??'Buscar...'\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n ></ui-searcher>\r\n }\r\n @else if (field.type === 'file') {\r\n <ui-file-input\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [fileTypes]=\"field.fileTypes??null\"\r\n [formControlName]=\"field.name\"\r\n ></ui-file-input>\r\n }\r\n @else if ( ['checkbox','switch'].includes(field.type)) {\r\n <ui-checkbox\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [tip]=\"field.tip??''\"\r\n [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n ></ui-checkbox>\r\n }\r\n @else if (field.type === 'radio') {\r\n <ui-radio\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [loading]=\"field.loading??false\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [options]=\"field.options || []\"\r\n ></ui-radio>\r\n }\r\n @else if (field.type === 'slider') {\r\n <ui-slider\r\n [min]=\"field.min??0\"\r\n [max]=\"field.max??100\"\r\n [step]=\"field.sliderInterval??1\"\r\n [markerCount]=\"field.sliderMarks??5\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n ></ui-slider>\r\n }\r\n @else if (field.type === 'pool') {\r\n <ui-pool-options\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [listViewTitle]=\"field.poolTitle??'Elementos seleccionados'\"\r\n [enabledListView]=\"field.poolEnabledListView||false\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-pool-options>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.new-line{grid-column-start:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "enabledListView", "listViewTitle", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicRadioComponent, selector: "ui-radio", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled", "loading", "options", "emptyText", "direction"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch", "stateless"], outputs: ["pickedItem"] }, { kind: "component", type: UicMultySelectComponent, selector: "ui-multy-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "options"] }, { kind: "component", type: UicFileInputComponent, selector: "ui-file-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "fileTypes"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "nullable", "options"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2588
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", disabled: "disabled", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n \r\n @if ( ['text','number'].includes(field.type) ) {\r\n @let currentValue = form.get(field.name)?.value ?? '';\r\n @let inputColor = getInputColor(field, currentValue);\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [internalIconColor]=\"inputColor\"\r\n [internalIcon]=\"field.internalIcon || (currentValue != '' ? getIconByColor(field, inputColor) : '')\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <input #inp\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [step]=\"field.step\"\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"/>\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'textarea' ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <textarea #ta\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n exp\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"\r\n cols=\"4\"\r\n ></textarea>\r\n @if (field.voiceToTextEnabled && !form.get(field.name)?.disabled) {\r\n @let listening = isListening(field.name);\r\n <ui-button\r\n [disabled]=\"listening\"\r\n style=\"margin-bottom: 2px;\"\r\n (click)=\"voiceToText(ta, field.name)\"\r\n [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n [type]=\"listening?'filled':'bordered'\"\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n ></ui-button>\r\n }\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'phone' ) {\r\n <ui-phone-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" \r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [placeholder]=\"field.placeholder||field.label||''\"\r\n >\r\n </ui-phone-input>\r\n }\r\n @else if (field.type === 'date') {\r\n <ui-date-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [justMonth]=\"!!field.monthMode\"\r\n [min]=\"field.minDate??''\"\r\n [max]=\"field.maxDate??''\"\r\n [monthDay]=\"field.monthDay||'first'\"\r\n [formControlName]=\"field.name\"\r\n ></ui-date-picker>\r\n }\r\n @else if (field.type === 'time') {\r\n <ui-time-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [interval]=\"field.timeInterval??5\"\r\n [formControlName]=\"field.name\"\r\n ></ui-time-picker>\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n @else if (field.type === 'multyselect') {\r\n <ui-multy-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-multy-select>\r\n }\r\n @else if (field.type === 'searcher') {\r\n <ui-searcher\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [searchFn]=\"field.searchFn\"\r\n [itemDisplayFn]=\"field.searchDisplayFn\"\r\n [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n [placeholder]=\"field.placeholder??'Buscar...'\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n ></ui-searcher>\r\n }\r\n @else if (field.type === 'file') {\r\n <ui-file-input\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [fileTypes]=\"field.fileTypes??null\"\r\n [formControlName]=\"field.name\"\r\n ></ui-file-input>\r\n }\r\n @else if ( ['checkbox','switch'].includes(field.type)) {\r\n <ui-checkbox\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [tip]=\"field.tip??''\"\r\n [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n ></ui-checkbox>\r\n }\r\n @else if (field.type === 'radio') {\r\n <ui-radio\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [loading]=\"field.loading??false\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [options]=\"field.options || []\"\r\n ></ui-radio>\r\n }\r\n @else if (field.type === 'slider') {\r\n <ui-slider\r\n [min]=\"field.min??0\"\r\n [max]=\"field.max??100\"\r\n [step]=\"field.sliderInterval??1\"\r\n [markerCount]=\"field.sliderMarks??5\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n ></ui-slider>\r\n }\r\n @else if (field.type === 'pool') {\r\n <ui-pool-options\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [listViewTitle]=\"field.poolTitle??'Elementos seleccionados'\"\r\n [enabledListView]=\"field.poolEnabledListView||false\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-pool-options>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 479px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.new-line{grid-column-start:1}textarea{resize:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "enabledListView", "listViewTitle", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicRadioComponent, selector: "ui-radio", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled", "loading", "options", "emptyText", "direction"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch", "stateless"], outputs: ["pickedItem"] }, { kind: "component", type: UicMultySelectComponent, selector: "ui-multy-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "options"] }, { kind: "component", type: UicFileInputComponent, selector: "ui-file-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "fileTypes"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "loading", "nullable", "options"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2581
2589
|
}
|
|
2582
2590
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
|
|
2583
2591
|
type: Component,
|
|
@@ -2597,7 +2605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2597
2605
|
UicCheckboxComponent,
|
|
2598
2606
|
UicRadioComponent,
|
|
2599
2607
|
UicPhoneInputComponent,
|
|
2600
|
-
FormsModule], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n \r\n @if ( ['text','number'].includes(field.type) ) {\n @let currentValue = form.get(field.name)?.value ?? '';\n @let inputColor = getInputColor(field, currentValue);\n <ui-input \n [error]=\"getErrorMessages(field)[0]\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [icon]=\"field.icon??''\"\n [disabled]=\"!!form.get(field.name)?.disabled\"\n [internalIconColor]=\"inputColor\"\n [internalIcon]=\"field.internalIcon || (currentValue != '' ? getIconByColor(field, inputColor) : '')\"\n [loading]=\"field.loading??false\"\n [tip]=\"field.tip??''\" >\n <input #inp\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [step]=\"field.step\"\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"/>\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'textarea' ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <textarea #ta\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"\r\n cols=\"4\"\r\n ></textarea>\r\n @if (field.voiceToTextEnabled && !form.get(field.name)?.disabled) {\r\n @let listening = isListening(field.name);\r\n <ui-button\r\n [disabled]=\"listening\"\r\n style=\"margin-bottom: 2px;\"\r\n (click)=\"voiceToText(ta, field.name)\"\r\n [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n [type]=\"listening?'filled':'bordered'\"\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n ></ui-button>\r\n }\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'phone' ) {\r\n <ui-phone-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" \r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [placeholder]=\"field.placeholder||field.label||''\"\r\n >\r\n </ui-phone-input>\r\n }\r\n @else if (field.type === 'date') {\r\n <ui-date-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [justMonth]=\"!!field.monthMode\"\r\n [min]=\"field.minDate??''\"\r\n [max]=\"field.maxDate??''\"\r\n [monthDay]=\"field.monthDay||'first'\"\r\n [formControlName]=\"field.name\"\r\n ></ui-date-picker>\r\n }\r\n @else if (field.type === 'time') {\r\n <ui-time-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [interval]=\"field.timeInterval??5\"\r\n [formControlName]=\"field.name\"\r\n ></ui-time-picker>\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n @else if (field.type === 'multyselect') {\r\n <ui-multy-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-multy-select>\r\n }\r\n @else if (field.type === 'searcher') {\r\n <ui-searcher\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [searchFn]=\"field.searchFn\"\r\n [itemDisplayFn]=\"field.searchDisplayFn\"\r\n [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n [placeholder]=\"field.placeholder??'Buscar...'\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n ></ui-searcher>\r\n }\r\n @else if (field.type === 'file') {\r\n <ui-file-input\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [fileTypes]=\"field.fileTypes??null\"\r\n [formControlName]=\"field.name\"\r\n ></ui-file-input>\r\n }\r\n @else if ( ['checkbox','switch'].includes(field.type)) {\r\n <ui-checkbox\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [tip]=\"field.tip??''\"\r\n [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n ></ui-checkbox>\r\n }\r\n @else if (field.type === 'radio') {\r\n <ui-radio\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [loading]=\"field.loading??false\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [options]=\"field.options || []\"\r\n ></ui-radio>\r\n }\r\n @else if (field.type === 'slider') {\r\n <ui-slider\r\n [min]=\"field.min??0\"\r\n [max]=\"field.max??100\"\r\n [step]=\"field.sliderInterval??1\"\r\n [markerCount]=\"field.sliderMarks??5\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n ></ui-slider>\r\n }\r\n @else if (field.type === 'pool') {\r\n <ui-pool-options\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [listViewTitle]=\"field.poolTitle??'Elementos seleccionados'\"\r\n [enabledListView]=\"field.poolEnabledListView||false\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-pool-options>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.new-line{grid-column-start:1}\n"] }]
|
|
2608
|
+
FormsModule], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n \r\n @if ( ['text','number'].includes(field.type) ) {\r\n @let currentValue = form.get(field.name)?.value ?? '';\r\n @let inputColor = getInputColor(field, currentValue);\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [internalIconColor]=\"inputColor\"\r\n [internalIcon]=\"field.internalIcon || (currentValue != '' ? getIconByColor(field, inputColor) : '')\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <input #inp\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [step]=\"field.step\"\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"/>\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'textarea' ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <textarea #ta\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n exp\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"\r\n cols=\"4\"\r\n ></textarea>\r\n @if (field.voiceToTextEnabled && !form.get(field.name)?.disabled) {\r\n @let listening = isListening(field.name);\r\n <ui-button\r\n [disabled]=\"listening\"\r\n style=\"margin-bottom: 2px;\"\r\n (click)=\"voiceToText(ta, field.name)\"\r\n [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n [type]=\"listening?'filled':'bordered'\"\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n ></ui-button>\r\n }\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'phone' ) {\r\n <ui-phone-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" \r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [placeholder]=\"field.placeholder||field.label||''\"\r\n >\r\n </ui-phone-input>\r\n }\r\n @else if (field.type === 'date') {\r\n <ui-date-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [justMonth]=\"!!field.monthMode\"\r\n [min]=\"field.minDate??''\"\r\n [max]=\"field.maxDate??''\"\r\n [monthDay]=\"field.monthDay||'first'\"\r\n [formControlName]=\"field.name\"\r\n ></ui-date-picker>\r\n }\r\n @else if (field.type === 'time') {\r\n <ui-time-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [interval]=\"field.timeInterval??5\"\r\n [formControlName]=\"field.name\"\r\n ></ui-time-picker>\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n @else if (field.type === 'multyselect') {\r\n <ui-multy-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-multy-select>\r\n }\r\n @else if (field.type === 'searcher') {\r\n <ui-searcher\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [searchFn]=\"field.searchFn\"\r\n [itemDisplayFn]=\"field.searchDisplayFn\"\r\n [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n [placeholder]=\"field.placeholder??'Buscar...'\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n ></ui-searcher>\r\n }\r\n @else if (field.type === 'file') {\r\n <ui-file-input\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [fileTypes]=\"field.fileTypes??null\"\r\n [formControlName]=\"field.name\"\r\n ></ui-file-input>\r\n }\r\n @else if ( ['checkbox','switch'].includes(field.type)) {\r\n <ui-checkbox\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [tip]=\"field.tip??''\"\r\n [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n ></ui-checkbox>\r\n }\r\n @else if (field.type === 'radio') {\r\n <ui-radio\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [loading]=\"field.loading??false\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [options]=\"field.options || []\"\r\n ></ui-radio>\r\n }\r\n @else if (field.type === 'slider') {\r\n <ui-slider\r\n [min]=\"field.min??0\"\r\n [max]=\"field.max??100\"\r\n [step]=\"field.sliderInterval??1\"\r\n [markerCount]=\"field.sliderMarks??5\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n ></ui-slider>\r\n }\r\n @else if (field.type === 'pool') {\r\n <ui-pool-options\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [listViewTitle]=\"field.poolTitle??'Elementos seleccionados'\"\r\n [enabledListView]=\"field.poolEnabledListView||false\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-pool-options>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 479px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.new-line{grid-column-start:1}textarea{resize:none}\n"] }]
|
|
2601
2609
|
}], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { fields: [{
|
|
2602
2610
|
type: Input
|
|
2603
2611
|
}], form: [{
|
|
@@ -3342,12 +3350,13 @@ class UicTooltipComponent {
|
|
|
3342
3350
|
tooltip = '';
|
|
3343
3351
|
left = 0;
|
|
3344
3352
|
top = 0;
|
|
3353
|
+
placement = 'bottom';
|
|
3345
3354
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3346
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicTooltipComponent, isStandalone: true, selector: "ui-tooltip", ngImport: i0, template: "<div @fadeAndRise class=\"tooltip\" \
|
|
3355
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicTooltipComponent, isStandalone: true, selector: "ui-tooltip", ngImport: i0, template: "<div @fadeAndRise class=\"tooltip\" \n [class.tooltip--top]=\"placement === 'top'\"\n [class.tooltip--bottom]=\"placement === 'bottom'\"\n [style.left]=\"left + 'px'\" [style.top]=\"top + 'px'\" [innerHTML]=\"tooltip\">\n</div>\n", styles: [".tooltip{position:fixed;background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;max-width:400px;color:var(--grey-950);-webkit-user-select:none;user-select:none;padding:5px 10px;border-radius:4px;font-size:14px;transform:translate(-50%);z-index:1000}.tooltip:before{content:\"\";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;position:absolute;left:calc(50% - 8px)}.tooltip.tooltip--bottom:before{top:-8px;border-bottom:8px solid var(--white);border-top:0}.tooltip.tooltip--top:before{bottom:-8px;top:auto;border-top:8px solid var(--white);border-bottom:0}\n"], animations: [fadeAndRise] });
|
|
3347
3356
|
}
|
|
3348
3357
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTooltipComponent, decorators: [{
|
|
3349
3358
|
type: Component,
|
|
3350
|
-
args: [{ selector: 'ui-tooltip', imports: [], animations: [fadeAndRise], template: "<div @fadeAndRise class=\"tooltip\" \
|
|
3359
|
+
args: [{ selector: 'ui-tooltip', imports: [], animations: [fadeAndRise], template: "<div @fadeAndRise class=\"tooltip\" \n [class.tooltip--top]=\"placement === 'top'\"\n [class.tooltip--bottom]=\"placement === 'bottom'\"\n [style.left]=\"left + 'px'\" [style.top]=\"top + 'px'\" [innerHTML]=\"tooltip\">\n</div>\n", styles: [".tooltip{position:fixed;background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;max-width:400px;color:var(--grey-950);-webkit-user-select:none;user-select:none;padding:5px 10px;border-radius:4px;font-size:14px;transform:translate(-50%);z-index:1000}.tooltip:before{content:\"\";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;position:absolute;left:calc(50% - 8px)}.tooltip.tooltip--bottom:before{top:-8px;border-bottom:8px solid var(--white);border-top:0}.tooltip.tooltip--top:before{bottom:-8px;top:auto;border-top:8px solid var(--white);border-bottom:0}\n"] }]
|
|
3351
3360
|
}] });
|
|
3352
3361
|
|
|
3353
3362
|
class UicToolTipDirective {
|
|
@@ -3376,9 +3385,38 @@ class UicToolTipDirective {
|
|
|
3376
3385
|
setTooltipComponentProperties() {
|
|
3377
3386
|
if (this.componentRef !== null) {
|
|
3378
3387
|
this.componentRef.instance.tooltip = this.tip;
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
|
|
3388
|
+
this.componentRef.changeDetectorRef.detectChanges();
|
|
3389
|
+
requestAnimationFrame(() => {
|
|
3390
|
+
if (!this.componentRef) {
|
|
3391
|
+
return;
|
|
3392
|
+
}
|
|
3393
|
+
const tooltipElement = this.componentRef.hostView
|
|
3394
|
+
.rootNodes[0];
|
|
3395
|
+
const targetRect = this.elementRef.nativeElement.getBoundingClientRect();
|
|
3396
|
+
const tooltipRect = tooltipElement.getBoundingClientRect();
|
|
3397
|
+
const spacing = 8;
|
|
3398
|
+
const viewportWidth = window.innerWidth;
|
|
3399
|
+
const viewportHeight = window.innerHeight;
|
|
3400
|
+
const availableAbove = targetRect.top;
|
|
3401
|
+
const availableBelow = viewportHeight - targetRect.bottom;
|
|
3402
|
+
let placement = 'bottom';
|
|
3403
|
+
let top = targetRect.bottom + spacing;
|
|
3404
|
+
if (availableBelow < tooltipRect.height + spacing && availableAbove > availableBelow) {
|
|
3405
|
+
placement = 'top';
|
|
3406
|
+
top = Math.max(spacing, targetRect.top - tooltipRect.height - spacing);
|
|
3407
|
+
}
|
|
3408
|
+
else {
|
|
3409
|
+
top = Math.min(top, viewportHeight - tooltipRect.height - spacing);
|
|
3410
|
+
}
|
|
3411
|
+
const centerX = targetRect.left + (targetRect.width / 2);
|
|
3412
|
+
const maxLeft = viewportWidth - (tooltipRect.width / 2) - spacing;
|
|
3413
|
+
const minLeft = (tooltipRect.width / 2) + spacing;
|
|
3414
|
+
const left = Math.min(Math.max(centerX, minLeft), maxLeft);
|
|
3415
|
+
this.componentRef.instance.left = left;
|
|
3416
|
+
this.componentRef.instance.top = top;
|
|
3417
|
+
this.componentRef.instance.placement = placement;
|
|
3418
|
+
this.componentRef.changeDetectorRef.detectChanges();
|
|
3419
|
+
});
|
|
3382
3420
|
}
|
|
3383
3421
|
}
|
|
3384
3422
|
onMouseLeave() {
|
|
@@ -3430,11 +3468,11 @@ class UicTableUicSearcherComponent {
|
|
|
3430
3468
|
}
|
|
3431
3469
|
}
|
|
3432
3470
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3433
|
-
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 <div style=\"width: 300px;\">\r\n <ui-input internalIcon=\"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 </div>\r\n @if (showSearchButton) {\r\n <ui-button
|
|
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 <div style=\"width: 300px;\">\r\n <ui-input internalIcon=\"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 </div>\r\n @if (showSearchButton) {\r\n <ui-button [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"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:8px;align-items:center;flex-wrap:wrap}@media (max-width: 479px){.ui-table-searcher{margin-bottom:16px}}.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"] }] });
|
|
3434
3472
|
}
|
|
3435
3473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, decorators: [{
|
|
3436
3474
|
type: Component,
|
|
3437
|
-
args: [{ selector: 'uic-table-searcher', imports: [UicButtonComponent, FormsModule, UicToolTipDirective, UicInputComponent], template: "\r\n<div class=\"ui-table-searcher\">\r\n <div style=\"width: 300px;\">\r\n <ui-input internalIcon=\"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 </div>\r\n @if (showSearchButton) {\r\n <ui-button
|
|
3475
|
+
args: [{ selector: 'uic-table-searcher', imports: [UicButtonComponent, FormsModule, UicToolTipDirective, UicInputComponent], template: "\r\n<div class=\"ui-table-searcher\">\r\n <div style=\"width: 300px;\">\r\n <ui-input internalIcon=\"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 </div>\r\n @if (showSearchButton) {\r\n <ui-button [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"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:8px;align-items:center;flex-wrap:wrap}@media (max-width: 479px){.ui-table-searcher{margin-bottom:16px}}.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"] }]
|
|
3438
3476
|
}], propDecorators: { placeholder: [{
|
|
3439
3477
|
type: Input
|
|
3440
3478
|
}], label: [{
|
|
@@ -3456,6 +3494,8 @@ class UicTablePaginationComponent {
|
|
|
3456
3494
|
size = 25;
|
|
3457
3495
|
loading = false;
|
|
3458
3496
|
showText = true;
|
|
3497
|
+
nextButtonText = 'Siguiente';
|
|
3498
|
+
previousButtonText = 'Anterior';
|
|
3459
3499
|
visiblePages = 3;
|
|
3460
3500
|
pagesInView = [];
|
|
3461
3501
|
pageChange = new EventEmitter();
|
|
@@ -3494,11 +3534,11 @@ class UicTablePaginationComponent {
|
|
|
3494
3534
|
}
|
|
3495
3535
|
}
|
|
3496
3536
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTablePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3497
|
-
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" }, 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?
|
|
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 }] });
|
|
3498
3538
|
}
|
|
3499
3539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTablePaginationComponent, decorators: [{
|
|
3500
3540
|
type: Component,
|
|
3501
|
-
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?
|
|
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"] }]
|
|
3502
3542
|
}], propDecorators: { buttonSize: [{
|
|
3503
3543
|
type: Input
|
|
3504
3544
|
}], currentPage: [{
|
|
@@ -3511,6 +3551,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3511
3551
|
type: Input
|
|
3512
3552
|
}], showText: [{
|
|
3513
3553
|
type: Input
|
|
3554
|
+
}], nextButtonText: [{
|
|
3555
|
+
type: Input
|
|
3556
|
+
}], previousButtonText: [{
|
|
3557
|
+
type: Input
|
|
3514
3558
|
}], pageChange: [{
|
|
3515
3559
|
type: Output
|
|
3516
3560
|
}], sizeChange: [{
|
|
@@ -3520,11 +3564,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3520
3564
|
class UicTableListComponent {
|
|
3521
3565
|
list = [];
|
|
3522
3566
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3523
|
-
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 p{color:var(--grey-300);font-size:13px}\n"] });
|
|
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"] });
|
|
3524
3568
|
}
|
|
3525
3569
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableListComponent, decorators: [{
|
|
3526
3570
|
type: Component,
|
|
3527
|
-
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 p{color:var(--grey-300);font-size:13px}\n"] }]
|
|
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"] }]
|
|
3528
3572
|
}], propDecorators: { list: [{
|
|
3529
3573
|
type: Input
|
|
3530
3574
|
}] } });
|
|
@@ -3730,6 +3774,8 @@ class UicTableComponent {
|
|
|
3730
3774
|
showSearchButton = false;
|
|
3731
3775
|
showTextPagination = true;
|
|
3732
3776
|
emptyMessage = 'No hay elementos';
|
|
3777
|
+
nextButtonText = 'Siguiente';
|
|
3778
|
+
previousButtonText = 'Anterior';
|
|
3733
3779
|
searcherShowButtonText = false;
|
|
3734
3780
|
action = new EventEmitter();
|
|
3735
3781
|
update = new EventEmitter();
|
|
@@ -3745,6 +3791,10 @@ class UicTableComponent {
|
|
|
3745
3791
|
const col = data.find(col => col.key == key);
|
|
3746
3792
|
return col?.value?.toString() ?? '';
|
|
3747
3793
|
}
|
|
3794
|
+
getSubtext(data, key) {
|
|
3795
|
+
const col = data.find(col => col.key == key);
|
|
3796
|
+
return col?.subtext?.toString() ?? '';
|
|
3797
|
+
}
|
|
3748
3798
|
isChecked(data, key) {
|
|
3749
3799
|
const cell = data.find(c => c.key === key);
|
|
3750
3800
|
return !!cell?.checked;
|
|
@@ -3848,9 +3898,6 @@ class UicTableComponent {
|
|
|
3848
3898
|
}
|
|
3849
3899
|
ngOnChanges(change) {
|
|
3850
3900
|
this.areAllSelected();
|
|
3851
|
-
if (change['data']) {
|
|
3852
|
-
console.log("cambiado");
|
|
3853
|
-
}
|
|
3854
3901
|
}
|
|
3855
3902
|
doAction(rowId, key) {
|
|
3856
3903
|
this.action.emit({ rowId, key });
|
|
@@ -3862,8 +3909,13 @@ class UicTableComponent {
|
|
|
3862
3909
|
switchHandler(key, value, columName) {
|
|
3863
3910
|
this.switchChange.emit({ key, value, columName });
|
|
3864
3911
|
}
|
|
3912
|
+
actionsRef;
|
|
3913
|
+
hasActions = false;
|
|
3914
|
+
ngAfterContentInit() {
|
|
3915
|
+
this.hasActions = !!this.actionsRef;
|
|
3916
|
+
}
|
|
3865
3917
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3866
|
-
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", 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", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange" }, usesOnChanges: true, ngImport: i0, template: "<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<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>\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 class=\"\">\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\" [class.ui-tr-highlighted]=\"row.highlighted\">\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\">\r\n <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') {\r\n @if( getIcon(row.data,header.key) ){\r\n <i [class]=\"getIcon(row.data,header.key)\"></i>\r\n }\r\n {{ getValue(row.data,header.key) }} \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 [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>\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)\">\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 </td>\r\n }\r\n </tr>\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 [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{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.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{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}.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}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-500)}.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)}.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)}\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"] }, { 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"], 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] });
|
|
3918
|
+
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", 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" }, 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>\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 class=\"\">\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\" [class.ui-tr-highlighted]=\"row.highlighted\">\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\">\r\n <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') {\r\n @if( getIcon(row.data,header.key) ){\r\n <i [class]=\"getIcon(row.data,header.key)\"></i>\r\n }\r\n {{ getValue(row.data,header.key) }} \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 [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>\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)\">\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 }\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;border-bottom:solid 1px var(--table-border-color)}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.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{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-500)}.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)}.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)}\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"] }, { 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] });
|
|
3867
3919
|
}
|
|
3868
3920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, decorators: [{
|
|
3869
3921
|
type: Component,
|
|
@@ -3871,7 +3923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3871
3923
|
UicTableUserComponent, UicTableListComponent, UicActionButtonComponent,
|
|
3872
3924
|
UicTableUicSearcherComponent, UicStatusLabelComponent,
|
|
3873
3925
|
UicSwichComponent,
|
|
3874
|
-
UicTablePaginationComponent, UicToolTipDirective, UicCheckboxComponent, FormsModule], animations: [highlightRow, animatedRow], template: "<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<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>\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 class=\"\">\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\" [class.ui-tr-highlighted]=\"row.highlighted\">\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\">\r\n <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') {\r\n @if( getIcon(row.data,header.key) ){\r\n <i [class]=\"getIcon(row.data,header.key)\"></i>\r\n }\r\n {{ getValue(row.data,header.key) }} \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 [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>\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)\">\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 </td>\r\n }\r\n </tr>\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 [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{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.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{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}.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}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-500)}.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)}.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)}\n"] }]
|
|
3926
|
+
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>\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 class=\"\">\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\" [class.ui-tr-highlighted]=\"row.highlighted\">\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\">\r\n <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') {\r\n @if( getIcon(row.data,header.key) ){\r\n <i [class]=\"getIcon(row.data,header.key)\"></i>\r\n }\r\n {{ getValue(row.data,header.key) }} \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 [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>\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)\">\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 }\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;border-bottom:solid 1px var(--table-border-color)}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.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{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-500)}.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)}.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)}\n"] }]
|
|
3875
3927
|
}], propDecorators: { columns: [{
|
|
3876
3928
|
type: Input
|
|
3877
3929
|
}], data: [{
|
|
@@ -3920,6 +3972,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3920
3972
|
type: Input
|
|
3921
3973
|
}], emptyMessage: [{
|
|
3922
3974
|
type: Input
|
|
3975
|
+
}], nextButtonText: [{
|
|
3976
|
+
type: Input
|
|
3977
|
+
}], previousButtonText: [{
|
|
3978
|
+
type: Input
|
|
3923
3979
|
}], searcherShowButtonText: [{
|
|
3924
3980
|
type: Input
|
|
3925
3981
|
}], action: [{
|
|
@@ -3930,6 +3986,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3930
3986
|
type: Output
|
|
3931
3987
|
}], switchChange: [{
|
|
3932
3988
|
type: Output
|
|
3989
|
+
}], actionsRef: [{
|
|
3990
|
+
type: ContentChild,
|
|
3991
|
+
args: ['[actions]']
|
|
3933
3992
|
}] } });
|
|
3934
3993
|
|
|
3935
3994
|
;
|
|
@@ -3996,24 +4055,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3996
4055
|
args: [{ selector: 'ui-alert-container', imports: [UiAlertComponent], template: "<div class=\"alert-container\">\r\n @for (alert of alerts; track alert.id){\r\n <ui-alert\r\n (closeAlert)=\"dismis($event)\"\r\n [alert]=\"alert\">\r\n </ui-alert>\r\n } \r\n</div>\r\n", styles: [".alert-container{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999}\n"] }]
|
|
3997
4056
|
}], ctorParameters: () => [{ type: UicPushAlertService }] });
|
|
3998
4057
|
|
|
4058
|
+
const base = createValueAccessor();
|
|
4059
|
+
class UicSignaturePadComponent extends base {
|
|
4060
|
+
width = 400;
|
|
4061
|
+
height = 200;
|
|
4062
|
+
strokeColor = '#111827';
|
|
4063
|
+
strokeWidth = 2;
|
|
4064
|
+
disabled = false;
|
|
4065
|
+
imageChange = new EventEmitter();
|
|
4066
|
+
canvasRef;
|
|
4067
|
+
ctx = null;
|
|
4068
|
+
drawing = false;
|
|
4069
|
+
ngAfterViewInit() {
|
|
4070
|
+
const canvas = this.canvasRef.nativeElement;
|
|
4071
|
+
canvas.width = this.width;
|
|
4072
|
+
canvas.height = this.height;
|
|
4073
|
+
this.ctx = canvas.getContext('2d');
|
|
4074
|
+
if (this.ctx) {
|
|
4075
|
+
this.ctx.lineWidth = this.strokeWidth;
|
|
4076
|
+
this.ctx.lineCap = 'round';
|
|
4077
|
+
this.ctx.lineJoin = 'round';
|
|
4078
|
+
this.ctx.strokeStyle = this.strokeColor;
|
|
4079
|
+
}
|
|
4080
|
+
}
|
|
4081
|
+
startDraw(event) {
|
|
4082
|
+
if (!this.ctx || this.disabled)
|
|
4083
|
+
return;
|
|
4084
|
+
this.drawing = true;
|
|
4085
|
+
const { x, y } = this.relativePosition(event);
|
|
4086
|
+
this.ctx.beginPath();
|
|
4087
|
+
this.ctx.moveTo(x, y);
|
|
4088
|
+
this.canvasRef.nativeElement.setPointerCapture(event.pointerId);
|
|
4089
|
+
event.preventDefault();
|
|
4090
|
+
}
|
|
4091
|
+
draw(event) {
|
|
4092
|
+
if (!this.drawing || !this.ctx || this.disabled)
|
|
4093
|
+
return;
|
|
4094
|
+
const { x, y } = this.relativePosition(event);
|
|
4095
|
+
this.ctx.lineTo(x, y);
|
|
4096
|
+
this.ctx.stroke();
|
|
4097
|
+
event.preventDefault();
|
|
4098
|
+
}
|
|
4099
|
+
endDraw(event) {
|
|
4100
|
+
if (!this.drawing || !this.ctx || this.disabled)
|
|
4101
|
+
return;
|
|
4102
|
+
this.ctx.closePath();
|
|
4103
|
+
this.drawing = false;
|
|
4104
|
+
this.canvasRef.nativeElement.releasePointerCapture(event.pointerId);
|
|
4105
|
+
this.emitSignature();
|
|
4106
|
+
event.preventDefault();
|
|
4107
|
+
}
|
|
4108
|
+
clear() {
|
|
4109
|
+
if (!this.ctx)
|
|
4110
|
+
return;
|
|
4111
|
+
this.resetCanvas();
|
|
4112
|
+
this.notifyChange(null);
|
|
4113
|
+
this.imageChange.emit(null);
|
|
4114
|
+
}
|
|
4115
|
+
emitSignature() {
|
|
4116
|
+
if (this.disabled)
|
|
4117
|
+
return;
|
|
4118
|
+
const canvas = this.canvasRef.nativeElement;
|
|
4119
|
+
canvas.toBlob((blob) => {
|
|
4120
|
+
if (!blob)
|
|
4121
|
+
return;
|
|
4122
|
+
this.notifyChange(blob);
|
|
4123
|
+
this.imageChange.emit(blob);
|
|
4124
|
+
}, 'image/png');
|
|
4125
|
+
}
|
|
4126
|
+
relativePosition(event) {
|
|
4127
|
+
const rect = this.canvasRef.nativeElement.getBoundingClientRect();
|
|
4128
|
+
return {
|
|
4129
|
+
x: event.clientX - rect.left,
|
|
4130
|
+
y: event.clientY - rect.top,
|
|
4131
|
+
};
|
|
4132
|
+
}
|
|
4133
|
+
writeValue(value) {
|
|
4134
|
+
super.writeValue(value);
|
|
4135
|
+
if (!this.ctx)
|
|
4136
|
+
return;
|
|
4137
|
+
if (!value) {
|
|
4138
|
+
this.resetCanvas();
|
|
4139
|
+
return;
|
|
4140
|
+
}
|
|
4141
|
+
const url = URL.createObjectURL(value);
|
|
4142
|
+
const img = new Image();
|
|
4143
|
+
img.onload = () => {
|
|
4144
|
+
this.resetCanvas();
|
|
4145
|
+
this.ctx.drawImage(img, 0, 0, this.width, this.height);
|
|
4146
|
+
URL.revokeObjectURL(url);
|
|
4147
|
+
};
|
|
4148
|
+
img.src = url;
|
|
4149
|
+
}
|
|
4150
|
+
resetCanvas() {
|
|
4151
|
+
if (this.ctx) {
|
|
4152
|
+
this.ctx.clearRect(0, 0, this.width, this.height);
|
|
4153
|
+
}
|
|
4154
|
+
}
|
|
4155
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSignaturePadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4156
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicSignaturePadComponent, isStandalone: true, selector: "ui-signature-pad", inputs: { width: "width", height: "height", strokeColor: "strokeColor", strokeWidth: "strokeWidth", disabled: "disabled" }, outputs: { imageChange: "imageChange" }, providers: [
|
|
4157
|
+
{
|
|
4158
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4159
|
+
useExisting: forwardRef(() => UicSignaturePadComponent),
|
|
4160
|
+
multi: true,
|
|
4161
|
+
},
|
|
4162
|
+
], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"signature-pad\" [style.width.px]=\"width\">\r\n <canvas\r\n #canvas\r\n class=\"signature-canvas\"\r\n [attr.width]=\"width\"\r\n [attr.height]=\"height\"\r\n (pointerdown)=\"startDraw($event)\"\r\n (pointermove)=\"draw($event)\"\r\n (pointerup)=\"endDraw($event)\"\r\n (pointerleave)=\"endDraw($event)\"\r\n ></canvas>\r\n <div class=\"signature-actions\">\r\n <ui-button size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" (click)=\"clear()\">Limpiar</ui-button>\r\n </div>\r\n</div>\r\n", styles: [".signature-pad{border-radius:8px;padding:8px}.signature-canvas{background-color:#fff;width:100%;display:block;border:1px solid var(--grey-200, #e5e7eb);border-radius:6px;touch-action:none}.signature-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
|
|
4163
|
+
}
|
|
4164
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSignaturePadComponent, decorators: [{
|
|
4165
|
+
type: Component,
|
|
4166
|
+
args: [{ selector: 'ui-signature-pad', imports: [CommonModule, UicButtonComponent], providers: [
|
|
4167
|
+
{
|
|
4168
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4169
|
+
useExisting: forwardRef(() => UicSignaturePadComponent),
|
|
4170
|
+
multi: true,
|
|
4171
|
+
},
|
|
4172
|
+
], template: "<div class=\"signature-pad\" [style.width.px]=\"width\">\r\n <canvas\r\n #canvas\r\n class=\"signature-canvas\"\r\n [attr.width]=\"width\"\r\n [attr.height]=\"height\"\r\n (pointerdown)=\"startDraw($event)\"\r\n (pointermove)=\"draw($event)\"\r\n (pointerup)=\"endDraw($event)\"\r\n (pointerleave)=\"endDraw($event)\"\r\n ></canvas>\r\n <div class=\"signature-actions\">\r\n <ui-button size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" (click)=\"clear()\">Limpiar</ui-button>\r\n </div>\r\n</div>\r\n", styles: [".signature-pad{border-radius:8px;padding:8px}.signature-canvas{background-color:#fff;width:100%;display:block;border:1px solid var(--grey-200, #e5e7eb);border-radius:6px;touch-action:none}.signature-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"] }]
|
|
4173
|
+
}], propDecorators: { width: [{
|
|
4174
|
+
type: Input
|
|
4175
|
+
}], height: [{
|
|
4176
|
+
type: Input
|
|
4177
|
+
}], strokeColor: [{
|
|
4178
|
+
type: Input
|
|
4179
|
+
}], strokeWidth: [{
|
|
4180
|
+
type: Input
|
|
4181
|
+
}], disabled: [{
|
|
4182
|
+
type: Input
|
|
4183
|
+
}], imageChange: [{
|
|
4184
|
+
type: Output
|
|
4185
|
+
}], canvasRef: [{
|
|
4186
|
+
type: ViewChild,
|
|
4187
|
+
args: ['canvas', { static: true }]
|
|
4188
|
+
}] } });
|
|
4189
|
+
|
|
3999
4190
|
class UicKpiCardComponent {
|
|
4000
4191
|
data;
|
|
4192
|
+
loading = false;
|
|
4001
4193
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicKpiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4002
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicKpiCardComponent, isStandalone: true, selector: "ui-kpi-card", inputs: { data: "data" }, ngImport: i0, template: "@if (data) {\r\n <div class=\"kpi-card\">\r\n <div
|
|
4194
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicKpiCardComponent, isStandalone: true, selector: "ui-kpi-card", inputs: { data: "data", loading: "loading" }, ngImport: i0, template: "@if (data) {\r\n <div class=\"kpi-card\">\r\n <div >\r\n <div class=\"kpi-card-label\">{{data.label}}</div>\r\n @if (loading) {\r\n <div class=\"kpi-card-value-loading\"></div>\r\n }@else {\r\n\r\n <div [class]=\"'kpi-card-value ui-trc-' + data.textColor\">{{data.value}}</div>\r\n }\r\n </div>\r\n <i [class]=\"data.icon + ' ui-trc-' + data.iconColor\"></i>\r\n </div>\r\n}", styles: [".kpi-card{border:solid 1px var(--table-border-color);background-color:#fff;padding:20px;border-radius:10px;display:flex;justify-content:space-between;align-items:center;font-size:2rem;gap:20px}.kpi-card-label{font-size:.9rem;line-height:1.2rem;color:var(--grey-500)}.kpi-card-value{font-size:1.6rem;font-weight:500;display:flex;padding-top:5px}.kpi-card-value-loading{height:1.6rem;border-radius:5px;animation:shimmer 1.5s infinite;background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%}.ui-trc-primary{color:var(--primary-600)}.ui-trc-red{color:var(--red-600)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-600)}.ui-trc-yellow{color:var(--yellow-600)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-400)}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] });
|
|
4003
4195
|
}
|
|
4004
4196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicKpiCardComponent, decorators: [{
|
|
4005
4197
|
type: Component,
|
|
4006
|
-
args: [{ selector: 'ui-kpi-card', imports: [], template: "@if (data) {\r\n <div class=\"kpi-card\">\r\n <div
|
|
4198
|
+
args: [{ selector: 'ui-kpi-card', imports: [], template: "@if (data) {\r\n <div class=\"kpi-card\">\r\n <div >\r\n <div class=\"kpi-card-label\">{{data.label}}</div>\r\n @if (loading) {\r\n <div class=\"kpi-card-value-loading\"></div>\r\n }@else {\r\n\r\n <div [class]=\"'kpi-card-value ui-trc-' + data.textColor\">{{data.value}}</div>\r\n }\r\n </div>\r\n <i [class]=\"data.icon + ' ui-trc-' + data.iconColor\"></i>\r\n </div>\r\n}", styles: [".kpi-card{border:solid 1px var(--table-border-color);background-color:#fff;padding:20px;border-radius:10px;display:flex;justify-content:space-between;align-items:center;font-size:2rem;gap:20px}.kpi-card-label{font-size:.9rem;line-height:1.2rem;color:var(--grey-500)}.kpi-card-value{font-size:1.6rem;font-weight:500;display:flex;padding-top:5px}.kpi-card-value-loading{height:1.6rem;border-radius:5px;animation:shimmer 1.5s infinite;background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%}.ui-trc-primary{color:var(--primary-600)}.ui-trc-red{color:var(--red-600)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-600)}.ui-trc-yellow{color:var(--yellow-600)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-400)}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
|
|
4007
4199
|
}], propDecorators: { data: [{
|
|
4008
4200
|
type: Input
|
|
4201
|
+
}], loading: [{
|
|
4202
|
+
type: Input
|
|
4009
4203
|
}] } });
|
|
4010
4204
|
|
|
4011
4205
|
class UicPortletCardComponent {
|
|
4206
|
+
title = 'El título de la sección';
|
|
4012
4207
|
data = [];
|
|
4013
4208
|
/** Layout mode: horizontal keeps label/value in a row; vertical stacks label over value. */
|
|
4014
4209
|
layout = 'horizontal';
|
|
4015
4210
|
/** Columns for vertical grid layout. */
|
|
4016
4211
|
cols = 1;
|
|
4212
|
+
gap = 20;
|
|
4017
4213
|
get gridTemplateColumns() {
|
|
4018
4214
|
if (this.layout !== 'vertical') {
|
|
4019
4215
|
return null;
|
|
@@ -4021,38 +4217,52 @@ class UicPortletCardComponent {
|
|
|
4021
4217
|
const columns = Math.max(1, Math.floor(this.cols || 1));
|
|
4022
4218
|
return `repeat(${columns}, minmax(0, 1fr))`;
|
|
4023
4219
|
}
|
|
4220
|
+
copyText(text) {
|
|
4221
|
+
navigator.clipboard.writeText(text)
|
|
4222
|
+
.then(() => {
|
|
4223
|
+
console.log('Copiado!');
|
|
4224
|
+
})
|
|
4225
|
+
.catch(err => {
|
|
4226
|
+
console.error('No se pudo copiar: ', err);
|
|
4227
|
+
});
|
|
4228
|
+
}
|
|
4024
4229
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPortletCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4025
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicPortletCardComponent, isStandalone: true, selector: "ui-portlet-card", inputs: { data: "data", layout: "layout", cols: "cols" }, ngImport: i0, template: "<div class=\"portlet\" [class.portlet-vertical]=\"layout === 'vertical'\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n @for (item of data; track $index) {\n <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\n <div class=\"portlet-row-label\">{{item.label}}</div>\n <div class=\"portlet-row-value\">\n @if (item.icon) {\n <i [class]=\"item.icon\"></i>\n }\n @if (item.type
|
|
4230
|
+
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" }, 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\">{{item.label}}</div>\r\n <div class=\"portlet-row-value\">\r\n @if (item.icon) {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n @if (['text','copy'].includes(item.type)) {\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-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{font-weight:500;display:flex;justify-content:flex-end;gap:5px}.portlet-row-label{font-weight:400;color:var(--grey-500)}.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"] }, { 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" }] });
|
|
4026
4231
|
}
|
|
4027
4232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPortletCardComponent, decorators: [{
|
|
4028
4233
|
type: Component,
|
|
4029
4234
|
args: [{ selector: 'ui-portlet-card', imports: [
|
|
4030
4235
|
UicStatusLabelComponent,
|
|
4031
4236
|
CurrencyPipe,
|
|
4237
|
+
UicButtonComponent,
|
|
4032
4238
|
DatePipe
|
|
4033
|
-
], template: "<div class=\"portlet\" [class.portlet-vertical]=\"layout === 'vertical'\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n @for (item of data; track $index) {\n <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\n <div class=\"portlet-row-label\">{{item.label}}</div>\n <div class=\"portlet-row-value\">\n @if (item.icon) {\n <i [class]=\"item.icon\"></i>\n }\n @if (item.type
|
|
4034
|
-
}], propDecorators: {
|
|
4239
|
+
], 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\">{{item.label}}</div>\r\n <div class=\"portlet-row-value\">\r\n @if (item.icon) {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n @if (['text','copy'].includes(item.type)) {\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-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{font-weight:500;display:flex;justify-content:flex-end;gap:5px}.portlet-row-label{font-weight:400;color:var(--grey-500)}.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"] }]
|
|
4240
|
+
}], propDecorators: { title: [{
|
|
4241
|
+
type: Input
|
|
4242
|
+
}], data: [{
|
|
4035
4243
|
type: Input
|
|
4036
4244
|
}], layout: [{
|
|
4037
4245
|
type: Input
|
|
4038
4246
|
}], cols: [{
|
|
4039
4247
|
type: Input
|
|
4248
|
+
}], gap: [{
|
|
4249
|
+
type: Input
|
|
4040
4250
|
}] } });
|
|
4041
4251
|
|
|
4042
4252
|
class UicTabsButtonComponent {
|
|
4043
|
-
tabs = [
|
|
4044
|
-
activeTab = '
|
|
4253
|
+
tabs = [];
|
|
4254
|
+
activeTab = '';
|
|
4045
4255
|
activeTabChange = new EventEmitter();
|
|
4046
4256
|
selectTab(tab) {
|
|
4047
4257
|
this.activeTab = tab;
|
|
4048
4258
|
this.activeTabChange.emit(this.activeTab);
|
|
4049
4259
|
}
|
|
4050
4260
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTabsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4051
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTabsButtonComponent, isStandalone: true, selector: "ui-tabs-button", inputs: { tabs: "tabs", activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div class=\"tabs\">\r\n @for (tab of tabs; track $index) {\r\n <div (click)=\"selectTab(tab)\" [class.active-tab]=\"tab == activeTab\" class=\"tab\"> <i class=\"
|
|
4261
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTabsButtonComponent, isStandalone: true, selector: "ui-tabs-button", inputs: { tabs: "tabs", activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div class=\"tabs\">\r\n @for (tab of tabs; track $index) {\r\n <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n <i [class]=\"tab.icon\"></i> {{tab.text}}</div>\r\n }\r\n</div>", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;border-radius:10px}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.active-tab{background-color:#fff}\n"] });
|
|
4052
4262
|
}
|
|
4053
4263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTabsButtonComponent, decorators: [{
|
|
4054
4264
|
type: Component,
|
|
4055
|
-
args: [{ selector: 'ui-tabs-button', imports: [], template: "<div class=\"tabs\">\r\n @for (tab of tabs; track $index) {\r\n <div (click)=\"selectTab(tab)\" [class.active-tab]=\"tab == activeTab\" class=\"tab\"> <i class=\"
|
|
4265
|
+
args: [{ selector: 'ui-tabs-button', imports: [], template: "<div class=\"tabs\">\r\n @for (tab of tabs; track $index) {\r\n <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n <i [class]=\"tab.icon\"></i> {{tab.text}}</div>\r\n }\r\n</div>", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;border-radius:10px}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.active-tab{background-color:#fff}\n"] }]
|
|
4056
4266
|
}], propDecorators: { tabs: [{
|
|
4057
4267
|
type: Input
|
|
4058
4268
|
}], activeTab: [{
|
|
@@ -4061,6 +4271,232 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4061
4271
|
type: Output
|
|
4062
4272
|
}] } });
|
|
4063
4273
|
|
|
4274
|
+
class UicWorkPanelComponent {
|
|
4275
|
+
cdr;
|
|
4276
|
+
host;
|
|
4277
|
+
/**
|
|
4278
|
+
* Compatibilidad con la version previa (un unico componente inicial).
|
|
4279
|
+
* Si se envia, se crea como primera pestana.
|
|
4280
|
+
*/
|
|
4281
|
+
componentType;
|
|
4282
|
+
componentInputs = {};
|
|
4283
|
+
/**
|
|
4284
|
+
* Lista inicial de pestanas a renderizar.
|
|
4285
|
+
*/
|
|
4286
|
+
tabs = [];
|
|
4287
|
+
tabsChange = new EventEmitter();
|
|
4288
|
+
tabClosed = new EventEmitter();
|
|
4289
|
+
tabSelected = new EventEmitter();
|
|
4290
|
+
tabAdded = new EventEmitter();
|
|
4291
|
+
addTabRequest = new EventEmitter();
|
|
4292
|
+
minPosition = 1;
|
|
4293
|
+
showAddButton = true;
|
|
4294
|
+
fullView = true;
|
|
4295
|
+
isMinimized = false;
|
|
4296
|
+
activeTabId;
|
|
4297
|
+
tabInstances = [];
|
|
4298
|
+
idCounter = 0;
|
|
4299
|
+
initialized = false;
|
|
4300
|
+
constructor(cdr) {
|
|
4301
|
+
this.cdr = cdr;
|
|
4302
|
+
}
|
|
4303
|
+
ngAfterViewInit() {
|
|
4304
|
+
this.initialized = true;
|
|
4305
|
+
this.initializeTabs();
|
|
4306
|
+
this.renderActiveTab();
|
|
4307
|
+
// Evita ExpressionChanged en el primer ciclo al crear dinamicamente.
|
|
4308
|
+
this.cdr.detectChanges();
|
|
4309
|
+
}
|
|
4310
|
+
initializeTabs() {
|
|
4311
|
+
if (this.tabs?.length) {
|
|
4312
|
+
this.tabs.forEach(tab => this.createTab(tab, false));
|
|
4313
|
+
}
|
|
4314
|
+
else if (this.componentType) {
|
|
4315
|
+
this.createTab({
|
|
4316
|
+
label: this.componentInputs['title'] ?? 'Panel',
|
|
4317
|
+
componentType: this.componentType,
|
|
4318
|
+
componentInputs: this.componentInputs
|
|
4319
|
+
}, false);
|
|
4320
|
+
}
|
|
4321
|
+
}
|
|
4322
|
+
addTab(tabConfig) {
|
|
4323
|
+
// Si el host aun no esta listo, guardamos la definicion para crearla luego.
|
|
4324
|
+
if (!this.initialized || !this.host) {
|
|
4325
|
+
const id = tabConfig.id ?? `tab-${++this.idCounter}`;
|
|
4326
|
+
this.tabs.push({ ...tabConfig, id });
|
|
4327
|
+
this.activeTabId = id;
|
|
4328
|
+
this.isMinimized = false;
|
|
4329
|
+
return id;
|
|
4330
|
+
}
|
|
4331
|
+
const instance = this.createTab(tabConfig, true);
|
|
4332
|
+
this.activeTabId = instance.id;
|
|
4333
|
+
this.isMinimized = false;
|
|
4334
|
+
this.renderActiveTab();
|
|
4335
|
+
this.tabAdded.emit(instance.id);
|
|
4336
|
+
this.tabSelected.emit(instance.id);
|
|
4337
|
+
return instance.id;
|
|
4338
|
+
}
|
|
4339
|
+
requestNewTab() {
|
|
4340
|
+
this.addTabRequest.emit();
|
|
4341
|
+
}
|
|
4342
|
+
selectTab(id) {
|
|
4343
|
+
this.isMinimized = false;
|
|
4344
|
+
if (this.activeTabId === id) {
|
|
4345
|
+
this.minimizePanel();
|
|
4346
|
+
return;
|
|
4347
|
+
}
|
|
4348
|
+
this.activeTabId = id;
|
|
4349
|
+
this.renderActiveTab();
|
|
4350
|
+
this.tabSelected.emit(id);
|
|
4351
|
+
}
|
|
4352
|
+
closeTab(id) {
|
|
4353
|
+
const index = this.tabInstances.findIndex(tab => tab.id === id);
|
|
4354
|
+
if (index === -1) {
|
|
4355
|
+
return;
|
|
4356
|
+
}
|
|
4357
|
+
const [tab] = this.tabInstances.splice(index, 1);
|
|
4358
|
+
const viewIndex = this.host.indexOf(tab.componentRef.hostView);
|
|
4359
|
+
if (viewIndex > -1) {
|
|
4360
|
+
this.host.detach(viewIndex);
|
|
4361
|
+
}
|
|
4362
|
+
tab.componentRef.destroy();
|
|
4363
|
+
if (this.activeTabId === id) {
|
|
4364
|
+
const next = this.tabInstances[index] ?? this.tabInstances[index - 1];
|
|
4365
|
+
this.activeTabId = next?.id;
|
|
4366
|
+
}
|
|
4367
|
+
if (!this.activeTabId) {
|
|
4368
|
+
this.isMinimized = true;
|
|
4369
|
+
}
|
|
4370
|
+
this.renderActiveTab();
|
|
4371
|
+
this.emitTabsChange();
|
|
4372
|
+
this.tabClosed.emit(id);
|
|
4373
|
+
}
|
|
4374
|
+
close() {
|
|
4375
|
+
if (this.activeTabId) {
|
|
4376
|
+
this.closeTab(this.activeTabId);
|
|
4377
|
+
}
|
|
4378
|
+
}
|
|
4379
|
+
minimizePanel() {
|
|
4380
|
+
this.isMinimized = true;
|
|
4381
|
+
this.activeTabId = '';
|
|
4382
|
+
}
|
|
4383
|
+
createTab(tabConfig, emitChange = true) {
|
|
4384
|
+
if (!this.host) {
|
|
4385
|
+
throw new Error('WorkPanel host ViewContainerRef not ready');
|
|
4386
|
+
}
|
|
4387
|
+
const id = tabConfig.id ?? `tab-${++this.idCounter}`;
|
|
4388
|
+
const componentRef = this.host.createComponent(tabConfig.componentType);
|
|
4389
|
+
Object.assign(componentRef.instance, tabConfig.componentInputs ?? {});
|
|
4390
|
+
const viewIndex = this.host.indexOf(componentRef.hostView);
|
|
4391
|
+
if (viewIndex > -1) {
|
|
4392
|
+
this.host.detach(viewIndex);
|
|
4393
|
+
}
|
|
4394
|
+
const instance = { ...tabConfig, id, componentRef };
|
|
4395
|
+
this.tabInstances.push(instance);
|
|
4396
|
+
if (!this.activeTabId) {
|
|
4397
|
+
this.activeTabId = id;
|
|
4398
|
+
}
|
|
4399
|
+
if (emitChange) {
|
|
4400
|
+
this.emitTabsChange();
|
|
4401
|
+
}
|
|
4402
|
+
return instance;
|
|
4403
|
+
}
|
|
4404
|
+
renderActiveTab() {
|
|
4405
|
+
while (this.host.length) {
|
|
4406
|
+
this.host.detach(0);
|
|
4407
|
+
}
|
|
4408
|
+
const active = this.tabInstances.find(tab => tab.id === this.activeTabId);
|
|
4409
|
+
if (active) {
|
|
4410
|
+
this.host.insert(active.componentRef.hostView);
|
|
4411
|
+
}
|
|
4412
|
+
}
|
|
4413
|
+
emitTabsChange() {
|
|
4414
|
+
const snapshot = this.tabInstances.map(({ componentRef, ...tab }) => ({ ...tab }));
|
|
4415
|
+
this.tabsChange.emit(snapshot);
|
|
4416
|
+
}
|
|
4417
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4418
|
+
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" }, 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)=\"fullView = 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)=\"fullView = 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:0;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:fit-content;position:fixed;bottom:0;right:0;z-index:100;padding:4px 8px 4px 20px;display:flex;gap:8px}.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;border:solid 1px var(--grey-300);border-radius:9px;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{background-color:var(--primary-500);border-color:var(--primary-400);color:var(--white)}.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%;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:2000}}\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"] }] });
|
|
4419
|
+
}
|
|
4420
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, decorators: [{
|
|
4421
|
+
type: Component,
|
|
4422
|
+
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)=\"fullView = 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)=\"fullView = 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:0;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:fit-content;position:fixed;bottom:0;right:0;z-index:100;padding:4px 8px 4px 20px;display:flex;gap:8px}.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;border:solid 1px var(--grey-300);border-radius:9px;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{background-color:var(--primary-500);border-color:var(--primary-400);color:var(--white)}.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%;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:2000}}\n"] }]
|
|
4423
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { host: [{
|
|
4424
|
+
type: ViewChild,
|
|
4425
|
+
args: ['host', { read: ViewContainerRef, static: true }]
|
|
4426
|
+
}], componentType: [{
|
|
4427
|
+
type: Input
|
|
4428
|
+
}], componentInputs: [{
|
|
4429
|
+
type: Input
|
|
4430
|
+
}], tabs: [{
|
|
4431
|
+
type: Input
|
|
4432
|
+
}], tabsChange: [{
|
|
4433
|
+
type: Output
|
|
4434
|
+
}], tabClosed: [{
|
|
4435
|
+
type: Output
|
|
4436
|
+
}], tabSelected: [{
|
|
4437
|
+
type: Output
|
|
4438
|
+
}], tabAdded: [{
|
|
4439
|
+
type: Output
|
|
4440
|
+
}], addTabRequest: [{
|
|
4441
|
+
type: Output
|
|
4442
|
+
}], minPosition: [{
|
|
4443
|
+
type: Input
|
|
4444
|
+
}], showAddButton: [{
|
|
4445
|
+
type: Input
|
|
4446
|
+
}] } });
|
|
4447
|
+
|
|
4448
|
+
class UicOverlayCardComponent {
|
|
4449
|
+
menuTemplate;
|
|
4450
|
+
overlayRef;
|
|
4451
|
+
overlay = inject(Overlay);
|
|
4452
|
+
vcr = inject(ViewContainerRef);
|
|
4453
|
+
host = inject((ElementRef));
|
|
4454
|
+
selectedSet = new Set();
|
|
4455
|
+
allSelected = false;
|
|
4456
|
+
overlayPositions = [
|
|
4457
|
+
{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
|
|
4458
|
+
{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
|
|
4459
|
+
{ originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
|
|
4460
|
+
{ originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
|
|
4461
|
+
];
|
|
4462
|
+
openMenu() {
|
|
4463
|
+
if (this.overlayRef) {
|
|
4464
|
+
this.close();
|
|
4465
|
+
return;
|
|
4466
|
+
}
|
|
4467
|
+
const origin = this.host.nativeElement.querySelector('.button-container');
|
|
4468
|
+
const positionStrategy = this.overlay.position()
|
|
4469
|
+
.flexibleConnectedTo(origin)
|
|
4470
|
+
.withPositions(this.overlayPositions)
|
|
4471
|
+
.withFlexibleDimensions(false)
|
|
4472
|
+
.withPush(true);
|
|
4473
|
+
this.overlayRef = this.overlay.create({
|
|
4474
|
+
positionStrategy,
|
|
4475
|
+
hasBackdrop: true,
|
|
4476
|
+
backdropClass: 'cdk-overlay-transparent-backdrop',
|
|
4477
|
+
scrollStrategy: this.overlay.scrollStrategies.reposition(),
|
|
4478
|
+
});
|
|
4479
|
+
const portal = new TemplatePortal(this.menuTemplate, this.vcr);
|
|
4480
|
+
this.overlayRef.attach(portal);
|
|
4481
|
+
this.overlayRef.backdropClick().subscribe(() => this.close());
|
|
4482
|
+
}
|
|
4483
|
+
close() {
|
|
4484
|
+
if (this.overlayRef) {
|
|
4485
|
+
this.overlayRef.dispose();
|
|
4486
|
+
this.overlayRef = null;
|
|
4487
|
+
}
|
|
4488
|
+
}
|
|
4489
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicOverlayCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4490
|
+
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"] });
|
|
4491
|
+
}
|
|
4492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicOverlayCardComponent, decorators: [{
|
|
4493
|
+
type: Component,
|
|
4494
|
+
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"] }]
|
|
4495
|
+
}], propDecorators: { menuTemplate: [{
|
|
4496
|
+
type: ViewChild,
|
|
4497
|
+
args: ['menuTemplate']
|
|
4498
|
+
}] } });
|
|
4499
|
+
|
|
4064
4500
|
const pushTop = trigger('pushTop', [
|
|
4065
4501
|
transition(':enter', [style({ opacity: 0, transform: 'translateY(20px)' }), animate('.3s ease', style({ opacity: 1, transform: 'translateY(0)' }))]),
|
|
4066
4502
|
transition(':leave', [animate('.3s ease', style({ opacity: 0, transform: 'translateY(-20px)' }))])
|
|
@@ -4161,11 +4597,11 @@ class UicModalComponent {
|
|
|
4161
4597
|
this.modalRef.closeFloating(null);
|
|
4162
4598
|
}
|
|
4163
4599
|
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 });
|
|
4164
|
-
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:
|
|
4600
|
+
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] });
|
|
4165
4601
|
}
|
|
4166
4602
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
|
|
4167
4603
|
type: Component,
|
|
4168
|
-
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:
|
|
4604
|
+
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"] }]
|
|
4169
4605
|
}], ctorParameters: () => [{ type: UiModalRef, decorators: [{
|
|
4170
4606
|
type: Inject,
|
|
4171
4607
|
args: [UiModalRef]
|
|
@@ -4244,11 +4680,11 @@ class UicSideModalComponent {
|
|
|
4244
4680
|
this.modal.triggerSave();
|
|
4245
4681
|
}
|
|
4246
4682
|
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 });
|
|
4247
|
-
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:
|
|
4683
|
+
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] });
|
|
4248
4684
|
}
|
|
4249
4685
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, decorators: [{
|
|
4250
4686
|
type: Component,
|
|
4251
|
-
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.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:
|
|
4687
|
+
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.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"] }]
|
|
4252
4688
|
}], ctorParameters: () => [{ type: UiModalRef, decorators: [{
|
|
4253
4689
|
type: Inject,
|
|
4254
4690
|
args: [UiModalRef]
|
|
@@ -4345,11 +4781,11 @@ class TinyAlertComponent {
|
|
|
4345
4781
|
this.modalRef.closeFloating(value ? this.response : null);
|
|
4346
4782
|
}
|
|
4347
4783
|
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 });
|
|
4348
|
-
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;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:
|
|
4784
|
+
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;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"] }] });
|
|
4349
4785
|
}
|
|
4350
4786
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, decorators: [{
|
|
4351
4787
|
type: Component,
|
|
4352
|
-
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;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:
|
|
4788
|
+
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;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"] }]
|
|
4353
4789
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4354
4790
|
type: Inject,
|
|
4355
4791
|
args: [MODAL_DATA]
|
|
@@ -4452,6 +4888,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4452
4888
|
}]
|
|
4453
4889
|
}] });
|
|
4454
4890
|
|
|
4891
|
+
class FirstCapitalPipe {
|
|
4892
|
+
transform(str, max = 0) {
|
|
4893
|
+
if (str == null) {
|
|
4894
|
+
return '-';
|
|
4895
|
+
}
|
|
4896
|
+
if (str.length < 4) {
|
|
4897
|
+
return str;
|
|
4898
|
+
}
|
|
4899
|
+
if (max != 0 && str.length > max) {
|
|
4900
|
+
str = str.substring(0, max) + '...';
|
|
4901
|
+
}
|
|
4902
|
+
return str.replace(/\b(\p{L}+)(\p{L}*)/gu, (match, firstChar, rest) => {
|
|
4903
|
+
const capitalizedFirstChar = firstChar.normalize('NFD').charAt(0).toUpperCase() + firstChar.slice(1).toLowerCase();
|
|
4904
|
+
const lowerRest = rest.toLowerCase();
|
|
4905
|
+
return capitalizedFirstChar + lowerRest;
|
|
4906
|
+
});
|
|
4907
|
+
}
|
|
4908
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FirstCapitalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
4909
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: FirstCapitalPipe, isStandalone: true, name: "firstCapital" });
|
|
4910
|
+
}
|
|
4911
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FirstCapitalPipe, decorators: [{
|
|
4912
|
+
type: Pipe,
|
|
4913
|
+
args: [{
|
|
4914
|
+
name: 'firstCapital'
|
|
4915
|
+
}]
|
|
4916
|
+
}] });
|
|
4917
|
+
|
|
4455
4918
|
// Mapea datos a tablas (deben tener el mismo nombre)
|
|
4456
4919
|
function helperTableMapDatoToColums(data, headers) {
|
|
4457
4920
|
const row = [];
|
|
@@ -4481,5 +4944,5 @@ function helperFormMapFormdataToObject(formData, defaults) {
|
|
|
4481
4944
|
* Generated bundle index. Do not edit.
|
|
4482
4945
|
*/
|
|
4483
4946
|
|
|
4484
|
-
export { DROPDOWN_OVERLAY_CONTROLS, 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, UicPhoneInputComponent, UicPortletCardComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperTableMapDatoToColums, highlightRow, pushTop, sideModal, simpleFade };
|
|
4947
|
+
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 };
|
|
4485
4948
|
//# sourceMappingURL=ui-core-abv.mjs.map
|