intelica-library-ui 0.1.153 → 0.1.155
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/intelica-library-ui.mjs +188 -56
- package/fesm2022/intelica-library-ui.mjs.map +1 -1
- package/lib/components/actions-menu/actions-menu.component.d.ts +1 -1
- package/lib/components/filter-chips/filter-chips.component.d.ts +17 -0
- package/lib/components/filter-chips/model/filter.model.d.ts +9 -0
- package/lib/components/table-fetch/table-fetch.component.d.ts +1 -0
- package/lib/components/template-menu/template-menu.component.d.ts +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -143,7 +143,8 @@ function sleep$1(ms) {
|
|
|
143
143
|
class TermPipe {
|
|
144
144
|
globalTermService = inject(GlobalTermService);
|
|
145
145
|
transform(termName, language, mode = 1) {
|
|
146
|
-
let term = this.globalTermService.terms.find(x => x.termName == termName)
|
|
146
|
+
let term = this.globalTermService.terms.find((x) => x.termName == termName)
|
|
147
|
+
?.termValue ?? "-";
|
|
147
148
|
if (mode == 2)
|
|
148
149
|
term = term.substring(0, 1);
|
|
149
150
|
if (mode == 3)
|
|
@@ -2423,9 +2424,6 @@ class ActionsMenuComponent {
|
|
|
2423
2424
|
this.ShowActionsMenu = true;
|
|
2424
2425
|
// Muestra u oculta el menú de selección de acciones.
|
|
2425
2426
|
this.ShowSelectActions = true;
|
|
2426
|
-
this.Popover.nativeElement.style.display = "block";
|
|
2427
|
-
this.MenuButton.nativeElement.classList.add("active");
|
|
2428
|
-
this.PopoverContainer.nativeElement.classList.add("backdrop-visible");
|
|
2429
2427
|
}
|
|
2430
2428
|
closePopover() {
|
|
2431
2429
|
this.IsPopoverOpen = false;
|
|
@@ -2433,9 +2431,6 @@ class ActionsMenuComponent {
|
|
|
2433
2431
|
this.ShowActionsMenu = false;
|
|
2434
2432
|
// Muestra u oculta el menú de selección de acciones.
|
|
2435
2433
|
this.ShowSelectActions = true;
|
|
2436
|
-
this.Popover.nativeElement.style.display = "none";
|
|
2437
|
-
this.MenuButton.nativeElement.classList.remove("active");
|
|
2438
|
-
this.PopoverContainer.nativeElement.classList.remove("backdrop-visible");
|
|
2439
2434
|
}
|
|
2440
2435
|
/** Método para alternar el estado del popover */
|
|
2441
2436
|
togglePopover(event) {
|
|
@@ -2560,11 +2555,11 @@ class ActionsMenuComponent {
|
|
|
2560
2555
|
this.ShowSelectActions = true;
|
|
2561
2556
|
}
|
|
2562
2557
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ActionsMenuComponent, deps: [{ token: TermPipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
2563
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: ActionsMenuComponent, isStandalone: true, selector: "intelica-actions-menu", host: { listeners: { "mousedown": "onMouseDown($event)", "window:mousedown": "onMouseDownOutsideBody($event)", "mouseup": "onMouseUp($event)", "document:click": "closeAll($event)" } }, queries: [{ propertyName: "actions", predicate: ActionDirective }], viewQueries: [{ propertyName: "Popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "MenuButton", first: true, predicate: ["menuButton"], descendants: true }, { propertyName: "PopoverContainer", first: true, predicate: ["popoverContainer"], descendants: true }], ngImport: i0, template: "<div #popoverContainer
|
|
2558
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: ActionsMenuComponent, isStandalone: true, selector: "intelica-actions-menu", host: { listeners: { "mousedown": "onMouseDown($event)", "window:mousedown": "onMouseDownOutsideBody($event)", "mouseup": "onMouseUp($event)", "document:click": "closeAll($event)" } }, queries: [{ propertyName: "actions", predicate: ActionDirective }], viewQueries: [{ propertyName: "Popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "MenuButton", first: true, predicate: ["menuButton"], descendants: true }, { propertyName: "PopoverContainer", first: true, predicate: ["popoverContainer"], descendants: true }], ngImport: i0, template: "<div class=\"grPopoverContainer\" #popoverContainer [ngClass]=\"{ 'backdrop-visible': IsPopoverOpen }\">\r\n\t<button #menuButton class=\"grMenuAction\" (click)=\"togglePopover($event)\" [ngClass]=\"{ 'active': IsPopoverOpen }\">\r\n\t\t<span class=\"grMenuAction__ico\"><i class=\"icon icon-filter-option\"></i></span>\r\n\t\t<span class=\"grMenuAction__txt\">{{ \"Actions\" | term : GlobalTermService.languageCode }}</span>\r\n\t</button>\r\n\t<div class=\"grPopover\" #popover [style.display]=\"IsPopoverOpen ? 'block' : 'none'\">\r\n\t\t<!-- Men\u00FA -->\r\n\t\t<div class=\"grPopoverMenu\" *ngIf=\"ShowActionsMenu\" [ngClass]=\"{ hidden: !ShowSelectActions }\">\r\n\t\t\t<div class=\"grPopoverHeader\">\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t<span>{{ \"SelectAction\" | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</h3>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"grPopoverBody\">\r\n\t\t\t\t<button pRipple class=\"grButtonActions\" *ngFor=\"let item of actions; let $index = index\" (click)=\"showTemplate(item)\">\r\n\t\t\t\t\t<span class=\"formRowInputNumber\">{{ $index + 1 }}</span>\r\n\t\t\t\t\t<span class=\"grButtonActionName\">{{ item.name | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<!-- Sub Men\u00FA -->\r\n\t\t<div class=\"grPopoverSubMenu\" [ngClass]=\"{ hidden: !item.active }\" *ngFor=\"let item of actions\">\r\n\t\t\t<div class=\"grPopoverHeader\">\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t<button class=\"backButton\" (click)=\"returnSelectActions(item)\">\r\n\t\t\t\t\t\t<i class=\"icon icon-arrow-left\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<span>{{ item.name | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</h3>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"grPopoverBody\">\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3$2.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: TermPipe, name: "term" }] });
|
|
2564
2559
|
}
|
|
2565
2560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ActionsMenuComponent, decorators: [{
|
|
2566
2561
|
type: Component,
|
|
2567
|
-
args: [{ selector: "intelica-actions-menu", imports: [ButtonModule, InputGroupAddonModule, CommonModule, RippleModule, TermPipe], template: "<div #popoverContainer
|
|
2562
|
+
args: [{ selector: "intelica-actions-menu", imports: [ButtonModule, InputGroupAddonModule, CommonModule, RippleModule, TermPipe], template: "<div class=\"grPopoverContainer\" #popoverContainer [ngClass]=\"{ 'backdrop-visible': IsPopoverOpen }\">\r\n\t<button #menuButton class=\"grMenuAction\" (click)=\"togglePopover($event)\" [ngClass]=\"{ 'active': IsPopoverOpen }\">\r\n\t\t<span class=\"grMenuAction__ico\"><i class=\"icon icon-filter-option\"></i></span>\r\n\t\t<span class=\"grMenuAction__txt\">{{ \"Actions\" | term : GlobalTermService.languageCode }}</span>\r\n\t</button>\r\n\t<div class=\"grPopover\" #popover [style.display]=\"IsPopoverOpen ? 'block' : 'none'\">\r\n\t\t<!-- Men\u00FA -->\r\n\t\t<div class=\"grPopoverMenu\" *ngIf=\"ShowActionsMenu\" [ngClass]=\"{ hidden: !ShowSelectActions }\">\r\n\t\t\t<div class=\"grPopoverHeader\">\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t<span>{{ \"SelectAction\" | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</h3>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"grPopoverBody\">\r\n\t\t\t\t<button pRipple class=\"grButtonActions\" *ngFor=\"let item of actions; let $index = index\" (click)=\"showTemplate(item)\">\r\n\t\t\t\t\t<span class=\"formRowInputNumber\">{{ $index + 1 }}</span>\r\n\t\t\t\t\t<span class=\"grButtonActionName\">{{ item.name | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<!-- Sub Men\u00FA -->\r\n\t\t<div class=\"grPopoverSubMenu\" [ngClass]=\"{ hidden: !item.active }\" *ngFor=\"let item of actions\">\r\n\t\t\t<div class=\"grPopoverHeader\">\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t<button class=\"backButton\" (click)=\"returnSelectActions(item)\">\r\n\t\t\t\t\t\t<i class=\"icon icon-arrow-left\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<span>{{ item.name | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</h3>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"grPopoverBody\">\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n" }]
|
|
2568
2563
|
}], ctorParameters: () => [{ type: TermPipe }], propDecorators: { Popover: [{
|
|
2569
2564
|
type: ViewChild,
|
|
2570
2565
|
args: ["popover"]
|
|
@@ -2591,6 +2586,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
2591
2586
|
args: [ActionDirective]
|
|
2592
2587
|
}] } });
|
|
2593
2588
|
|
|
2589
|
+
class FilterChipsComponent {
|
|
2590
|
+
filters = [];
|
|
2591
|
+
remove = new EventEmitter();
|
|
2592
|
+
openPopUp = new EventEmitter();
|
|
2593
|
+
GlobalTermService = inject(GlobalTermService);
|
|
2594
|
+
onRemove(filter) {
|
|
2595
|
+
this.remove.emit(filter);
|
|
2596
|
+
}
|
|
2597
|
+
onTapChip(filter) {
|
|
2598
|
+
this.openPopUp.emit(filter);
|
|
2599
|
+
}
|
|
2600
|
+
isBooleanTrue(value) {
|
|
2601
|
+
return typeof value === "boolean" && value === true;
|
|
2602
|
+
}
|
|
2603
|
+
isDateRange(value) {
|
|
2604
|
+
return (Array.isArray(value) &&
|
|
2605
|
+
value.length === 2 &&
|
|
2606
|
+
value.every((v) => typeof v === "string" && !isNaN(Date.parse(v))));
|
|
2607
|
+
}
|
|
2608
|
+
sortList(list) {
|
|
2609
|
+
if (!Array.isArray(list)) {
|
|
2610
|
+
return [];
|
|
2611
|
+
}
|
|
2612
|
+
const stringList = list.map((item) => typeof item === "string"
|
|
2613
|
+
? item
|
|
2614
|
+
: item?.name || item?.text || JSON.stringify(item));
|
|
2615
|
+
const sorted = [...stringList].sort();
|
|
2616
|
+
if (sorted.length > 5) {
|
|
2617
|
+
return sorted
|
|
2618
|
+
.slice(0, 5)
|
|
2619
|
+
.map((item, index) => `${index + 1}. ${item}`)
|
|
2620
|
+
.concat("...");
|
|
2621
|
+
}
|
|
2622
|
+
else {
|
|
2623
|
+
return sorted.map((item, index) => `${index + 1}. ${item}`);
|
|
2624
|
+
}
|
|
2625
|
+
}
|
|
2626
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2627
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: FilterChipsComponent, isStandalone: true, selector: "filter-chips", inputs: { filters: "filters" }, outputs: { remove: "remove", openPopUp: "openPopUp" }, ngImport: i0, template: "<div class=\"d-flex gap-2\">\r\n @for (item of filters; track $index) {\r\n <button\r\n class=\"prPill\"\r\n pInputText\r\n [pTooltip]=\"\r\n item.isTooltipForm\r\n ? tooltipFormContent\r\n : item.valueName!.length > 1\r\n ? tooltipContent\r\n : item.title ?? ''\r\n \"\r\n tooltipPosition=\"top\"\r\n >\r\n <ng-template #tooltipFormContent>\r\n <span>{{ item.text?.toString() }}</span\r\n ><br />\r\n <ul\r\n *ngIf=\"item.valueName!.length > 1\"\r\n class=\"tooltip-list list-unlisted text-start filterChipsList\"\r\n >\r\n <li *ngFor=\"let value of item.valueName\">{{ value }}</li>\r\n </ul>\r\n </ng-template>\r\n <ng-template #tooltipContent>\r\n <ul\r\n *ngIf=\"item.valueName!.length > 1\"\r\n class=\"tooltip-list list-unlisted text-start filterChipsList\"\r\n >\r\n <li *ngFor=\"let value of sortList(item.valueName)\">\r\n {{ value }}\r\n </li>\r\n </ul>\r\n </ng-template>\r\n <span\r\n *ngIf=\"isBooleanTrue(item.value)\"\r\n class=\"prPill__value\"\r\n (click)=\"onTapChip(item)\"\r\n >\r\n {{ item.title }}\r\n </span>\r\n <span\r\n *ngIf=\"item.name === 'dateFilterRange'\"\r\n class=\"prPill__value\"\r\n (click)=\"onTapChip(item)\"\r\n >\r\n {{ item.text }}\r\n </span>\r\n\r\n <span\r\n *ngIf=\"\r\n (!item.valueName || item.valueName.length === 0) &&\r\n (item.value && (typeof item.value === 'string' ? item.value.length > 0 : false))\r\n \"\r\n class=\"prPill__value\"\r\n (click)=\"onTapChip(item)\"\r\n >\r\n {{ item.text?.toString() | slice : 0 : 15\r\n }}{{ item.text && item.text.length > 15 ? \"...\" : \"\" }}\r\n </span>\r\n <span\r\n *ngIf=\"item.valueName?.length === 1\"\r\n class=\"prPill__value\"\r\n (click)=\"onTapChip(item)\"\r\n >\r\n {{ item.text?.toString() | slice : 0 : 15\r\n }}{{ item.text!.length > 15 ? \"...\" : \"\" }}\r\n </span>\r\n <span\r\n *ngIf=\"item.valueName!.length > 1\"\r\n class=\"prPill__value\"\r\n (click)=\"onTapChip(item)\"\r\n >\r\n {{ item.name | slice : 0 : 15\r\n }}{{ item.name!.length > 15 ? \"...\" : \"\" }}</span\r\n >\r\n <span\r\n *ngIf=\"item.valueName!.length > 1 && !item.isTooltipForm\"\r\n class=\"prPill__value\"\r\n (click)=\"onTapChip(item)\"\r\n >\r\n ({{ item.valueName?.length }})\r\n </span>\r\n <i class=\"icon-close1\" (click)=\"onRemove(item)\"></i>\r\n </button>\r\n }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
|
|
2628
|
+
}
|
|
2629
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FilterChipsComponent, decorators: [{
|
|
2630
|
+
type: Component,
|
|
2631
|
+
args: [{ selector: "filter-chips", imports: [CommonModule, TooltipModule], template: "<div class=\"d-flex gap-2\">\r\n @for (item of filters; track $index) {\r\n <button\r\n class=\"prPill\"\r\n pInputText\r\n [pTooltip]=\"\r\n item.isTooltipForm\r\n ? tooltipFormContent\r\n : item.valueName!.length > 1\r\n ? tooltipContent\r\n : item.title ?? ''\r\n \"\r\n tooltipPosition=\"top\"\r\n >\r\n <ng-template #tooltipFormContent>\r\n <span>{{ item.text?.toString() }}</span\r\n ><br />\r\n <ul\r\n *ngIf=\"item.valueName!.length > 1\"\r\n class=\"tooltip-list list-unlisted text-start filterChipsList\"\r\n >\r\n <li *ngFor=\"let value of item.valueName\">{{ value }}</li>\r\n </ul>\r\n </ng-template>\r\n <ng-template #tooltipContent>\r\n <ul\r\n *ngIf=\"item.valueName!.length > 1\"\r\n class=\"tooltip-list list-unlisted text-start filterChipsList\"\r\n >\r\n <li *ngFor=\"let value of sortList(item.valueName)\">\r\n {{ value }}\r\n </li>\r\n </ul>\r\n </ng-template>\r\n <span\r\n *ngIf=\"isBooleanTrue(item.value)\"\r\n class=\"prPill__value\"\r\n (click)=\"onTapChip(item)\"\r\n >\r\n {{ item.title }}\r\n </span>\r\n <span\r\n *ngIf=\"item.name === 'dateFilterRange'\"\r\n class=\"prPill__value\"\r\n (click)=\"onTapChip(item)\"\r\n >\r\n {{ item.text }}\r\n </span>\r\n\r\n <span\r\n *ngIf=\"\r\n (!item.valueName || item.valueName.length === 0) &&\r\n (item.value && (typeof item.value === 'string' ? item.value.length > 0 : false))\r\n \"\r\n class=\"prPill__value\"\r\n (click)=\"onTapChip(item)\"\r\n >\r\n {{ item.text?.toString() | slice : 0 : 15\r\n }}{{ item.text && item.text.length > 15 ? \"...\" : \"\" }}\r\n </span>\r\n <span\r\n *ngIf=\"item.valueName?.length === 1\"\r\n class=\"prPill__value\"\r\n (click)=\"onTapChip(item)\"\r\n >\r\n {{ item.text?.toString() | slice : 0 : 15\r\n }}{{ item.text!.length > 15 ? \"...\" : \"\" }}\r\n </span>\r\n <span\r\n *ngIf=\"item.valueName!.length > 1\"\r\n class=\"prPill__value\"\r\n (click)=\"onTapChip(item)\"\r\n >\r\n {{ item.name | slice : 0 : 15\r\n }}{{ item.name!.length > 15 ? \"...\" : \"\" }}</span\r\n >\r\n <span\r\n *ngIf=\"item.valueName!.length > 1 && !item.isTooltipForm\"\r\n class=\"prPill__value\"\r\n (click)=\"onTapChip(item)\"\r\n >\r\n ({{ item.valueName?.length }})\r\n </span>\r\n <i class=\"icon-close1\" (click)=\"onRemove(item)\"></i>\r\n </button>\r\n }\r\n</div>\r\n" }]
|
|
2632
|
+
}], propDecorators: { filters: [{
|
|
2633
|
+
type: Input
|
|
2634
|
+
}], remove: [{
|
|
2635
|
+
type: Output
|
|
2636
|
+
}], openPopUp: [{
|
|
2637
|
+
type: Output
|
|
2638
|
+
}] } });
|
|
2639
|
+
|
|
2594
2640
|
var FilterTypeEnum;
|
|
2595
2641
|
(function (FilterTypeEnum) {
|
|
2596
2642
|
FilterTypeEnum[FilterTypeEnum["Select"] = 0] = "Select";
|
|
@@ -3063,24 +3109,27 @@ class FiltersComponent {
|
|
|
3063
3109
|
}
|
|
3064
3110
|
}
|
|
3065
3111
|
ngOnDestroy() {
|
|
3066
|
-
this.subscriptions.forEach(subscription => {
|
|
3112
|
+
this.subscriptions.forEach((subscription) => {
|
|
3067
3113
|
subscription.unsubscribe();
|
|
3068
3114
|
});
|
|
3069
3115
|
}
|
|
3070
3116
|
ngAfterViewInit() {
|
|
3071
3117
|
this.filters = this.filterDirectives.toArray();
|
|
3072
3118
|
// Vincula hijos con sus padres
|
|
3073
|
-
this.filters.forEach(filter => {
|
|
3119
|
+
this.filters.forEach((filter) => {
|
|
3074
3120
|
if (filter.parent) {
|
|
3075
|
-
const parent = this.filters.find(f => f.name === filter.parent);
|
|
3121
|
+
const parent = this.filters.find((f) => f.name === filter.parent);
|
|
3076
3122
|
if (parent) {
|
|
3077
3123
|
parent.children.push(filter);
|
|
3078
3124
|
}
|
|
3079
3125
|
}
|
|
3080
3126
|
});
|
|
3081
3127
|
this.subscriptions = [];
|
|
3082
|
-
this.filterDirectives.forEach(filter => {
|
|
3083
|
-
if ((filter.value === undefined ||
|
|
3128
|
+
this.filterDirectives.forEach((filter) => {
|
|
3129
|
+
if ((filter.value === undefined ||
|
|
3130
|
+
filter.value === null ||
|
|
3131
|
+
filter.value === "") &&
|
|
3132
|
+
filter.defaultValue != null) {
|
|
3084
3133
|
filter.value = filter.defaultValue;
|
|
3085
3134
|
this.toggleChildrenVisibility(filter);
|
|
3086
3135
|
}
|
|
@@ -3113,11 +3162,13 @@ class FiltersComponent {
|
|
|
3113
3162
|
if (!filter.visibilityRules?.length)
|
|
3114
3163
|
return;
|
|
3115
3164
|
const allFilters = this.filterDirectives.toArray();
|
|
3116
|
-
filter.visibilityRules.forEach(rule => {
|
|
3117
|
-
const child = allFilters.find(f => f.name === rule.child);
|
|
3165
|
+
filter.visibilityRules.forEach((rule) => {
|
|
3166
|
+
const child = allFilters.find((f) => f.name === rule.child);
|
|
3118
3167
|
if (child) {
|
|
3119
3168
|
const value = filter.value;
|
|
3120
|
-
const shouldShow = Array.isArray(value)
|
|
3169
|
+
const shouldShow = Array.isArray(value)
|
|
3170
|
+
? value.some((v) => rule.allowedValues.includes(v))
|
|
3171
|
+
: rule.allowedValues.includes(value);
|
|
3121
3172
|
child.visible = shouldShow;
|
|
3122
3173
|
child.$changes.next({ visible: { currentValue: shouldShow } });
|
|
3123
3174
|
}
|
|
@@ -3152,9 +3203,9 @@ class FiltersComponent {
|
|
|
3152
3203
|
}
|
|
3153
3204
|
// Si es padre, limpiar hijos
|
|
3154
3205
|
if (!filter.parent) {
|
|
3155
|
-
const children = this.filterDirectives.filter(f => f.parent === filter.name);
|
|
3206
|
+
const children = this.filterDirectives.filter((f) => f.parent === filter.name);
|
|
3156
3207
|
const shouldHideChildren = !(filter.defaultValue !== undefined && filter.defaultValue !== null); // solo ocultar si el padre NO tiene defaultValue
|
|
3157
|
-
children.forEach(child => {
|
|
3208
|
+
children.forEach((child) => {
|
|
3158
3209
|
if (child.defaultValue !== undefined && child.defaultValue !== null) {
|
|
3159
3210
|
child.value = child.defaultValue;
|
|
3160
3211
|
}
|
|
@@ -3184,7 +3235,7 @@ class FiltersComponent {
|
|
|
3184
3235
|
}
|
|
3185
3236
|
});
|
|
3186
3237
|
}
|
|
3187
|
-
const index = this._filtersApplied.findIndex(x => x.name === filter.name);
|
|
3238
|
+
const index = this._filtersApplied.findIndex((x) => x.name === filter.name);
|
|
3188
3239
|
if (index !== -1)
|
|
3189
3240
|
this._filtersApplied.splice(index, 1);
|
|
3190
3241
|
if (filter.change) {
|
|
@@ -3208,21 +3259,24 @@ class FiltersComponent {
|
|
|
3208
3259
|
if (selectFilter.multiple) {
|
|
3209
3260
|
text = "";
|
|
3210
3261
|
filter.value.forEach((f) => {
|
|
3211
|
-
let filterSelect = selectFilter.options.filter(x => x[selectFilter.optionValue] === f);
|
|
3262
|
+
let filterSelect = selectFilter.options.filter((x) => x[selectFilter.optionValue] === f);
|
|
3212
3263
|
if (filterSelect.length)
|
|
3213
|
-
valueName = [
|
|
3264
|
+
valueName = [
|
|
3265
|
+
...valueName,
|
|
3266
|
+
filterSelect[0][selectFilter.optionLabel],
|
|
3267
|
+
];
|
|
3214
3268
|
if (filterSelect.length > 0)
|
|
3215
3269
|
text = text + filterSelect[0][selectFilter.optionLabel] + "-";
|
|
3216
3270
|
});
|
|
3217
3271
|
text = text.slice(0, -1);
|
|
3218
3272
|
}
|
|
3219
3273
|
else {
|
|
3220
|
-
let filterSelect = selectFilter.options.filter(x => x[selectFilter.optionValue] === filter.value);
|
|
3274
|
+
let filterSelect = selectFilter.options.filter((x) => x[selectFilter.optionValue] === filter.value);
|
|
3221
3275
|
if (filterSelect.length > 0)
|
|
3222
3276
|
text = filterSelect[0][selectFilter.optionLabel];
|
|
3223
3277
|
}
|
|
3224
3278
|
}
|
|
3225
|
-
let filterApplied = this._filtersApplied.filter(x => x.name === filter.name)[0];
|
|
3279
|
+
let filterApplied = this._filtersApplied.filter((x) => x.name === filter.name)[0];
|
|
3226
3280
|
if (!filterApplied) {
|
|
3227
3281
|
this._filtersApplied.push({
|
|
3228
3282
|
name: filter.name,
|
|
@@ -3244,7 +3298,9 @@ class FiltersComponent {
|
|
|
3244
3298
|
* @returns {string} - El índice del filtro en formato de numeración o letras.
|
|
3245
3299
|
*/
|
|
3246
3300
|
getIndex(filter, parentFilter) {
|
|
3247
|
-
const filters = [
|
|
3301
|
+
const filters = [
|
|
3302
|
+
...this.filterDirectives.filter((x) => !x.parent && x.visible),
|
|
3303
|
+
];
|
|
3248
3304
|
// Verifica si el filtro está en la lista principal de filtros visibles
|
|
3249
3305
|
if (filters.indexOf(filter) > -1) {
|
|
3250
3306
|
// Retorna el índice en formato de letras si está definido, de lo contrario, utiliza la numeración
|
|
@@ -3254,7 +3310,9 @@ class FiltersComponent {
|
|
|
3254
3310
|
}
|
|
3255
3311
|
// Si hay un filtro padre proporcionado
|
|
3256
3312
|
if (parentFilter) {
|
|
3257
|
-
const children = [
|
|
3313
|
+
const children = [
|
|
3314
|
+
...this.filterDirectives.filter((x) => x.parent === parentFilter?.name && x.visible),
|
|
3315
|
+
];
|
|
3258
3316
|
let index = "";
|
|
3259
3317
|
// Concatena el índice del filtro padre en formato de letras o numeración
|
|
3260
3318
|
if (parentFilter.letterIndex)
|
|
@@ -3281,12 +3339,14 @@ class FiltersComponent {
|
|
|
3281
3339
|
// Limpia la lista de filtros aplicados
|
|
3282
3340
|
this._filtersApplied = [];
|
|
3283
3341
|
// Itera sobre todas las directivas de filtro
|
|
3284
|
-
this.filterDirectives.forEach(filterDirective => {
|
|
3342
|
+
this.filterDirectives.forEach((filterDirective) => {
|
|
3285
3343
|
if (this.validateFilter(filterDirective)) {
|
|
3286
3344
|
// Verifica si el tipo de filtro es de texto
|
|
3287
3345
|
if (filterDirective.type === FilterTypeEnum.Text) {
|
|
3288
3346
|
// Comprueba si el valor de texto no está vacío y agrega el filtro aplicado
|
|
3289
|
-
if (filterDirective.value !== undefined &&
|
|
3347
|
+
if (filterDirective.value !== undefined &&
|
|
3348
|
+
filterDirective.value !== null &&
|
|
3349
|
+
filterDirective.value.trim() !== "") {
|
|
3290
3350
|
this.builderFiltersApplied(filterDirective);
|
|
3291
3351
|
}
|
|
3292
3352
|
}
|
|
@@ -3298,26 +3358,37 @@ class FiltersComponent {
|
|
|
3298
3358
|
// Comprueba si el valor del filtro es válido y no está vacío, luego agrega el filtro aplicado
|
|
3299
3359
|
if (filterDirective.value !== undefined &&
|
|
3300
3360
|
filterDirective.value !== null &&
|
|
3301
|
-
(this.validStringValue(filterDirective.value, filterDirective.defaultValue) ||
|
|
3361
|
+
(this.validStringValue(filterDirective.value, filterDirective.defaultValue) ||
|
|
3362
|
+
filterDirective.value > -1 ||
|
|
3363
|
+
Array.isArray(filterDirective.value)) &&
|
|
3302
3364
|
filterDirective.value.toString().length > 0) {
|
|
3303
3365
|
this.builderFiltersApplied(filterDirective);
|
|
3304
3366
|
}
|
|
3305
3367
|
}
|
|
3306
3368
|
}
|
|
3369
|
+
else {
|
|
3370
|
+
if (filterDirective instanceof SelectFilterDirective) {
|
|
3371
|
+
if (filterDirective.options.length == filterDirective.value.length) {
|
|
3372
|
+
filterDirective.value = [];
|
|
3373
|
+
}
|
|
3374
|
+
}
|
|
3375
|
+
}
|
|
3307
3376
|
});
|
|
3308
3377
|
this.EmitApply.emit(this._filtersApplied);
|
|
3309
3378
|
}
|
|
3310
3379
|
validateFilter(filter) {
|
|
3311
3380
|
if (filter instanceof SelectFilterDirective) {
|
|
3312
|
-
return filter.options && filter.value
|
|
3381
|
+
return filter.options && filter.value
|
|
3382
|
+
? filter.options.length !== filter.value.length
|
|
3383
|
+
: true;
|
|
3313
3384
|
}
|
|
3314
3385
|
return true;
|
|
3315
3386
|
}
|
|
3316
3387
|
validStringValue(value, defaultValue) {
|
|
3317
|
-
return typeof (value == "string" || value === "Object") && value != defaultValue;
|
|
3388
|
+
return (typeof (value == "string" || value === "Object") && value != defaultValue);
|
|
3318
3389
|
}
|
|
3319
3390
|
clickCancel() {
|
|
3320
|
-
this.filterDirectives.forEach(filter => {
|
|
3391
|
+
this.filterDirectives.forEach((filter) => {
|
|
3321
3392
|
// Restaurar valor por default o limpiar
|
|
3322
3393
|
if (filter.defaultValue !== undefined && filter.defaultValue !== null) {
|
|
3323
3394
|
filter.value = filter.defaultValue;
|
|
@@ -3345,7 +3416,7 @@ class FiltersComponent {
|
|
|
3345
3416
|
}
|
|
3346
3417
|
// Ocultar hijos si su padre no tiene defaultValue
|
|
3347
3418
|
if (filter.parent) {
|
|
3348
|
-
const parent = this.filterDirectives.find(f => f.name === filter.parent);
|
|
3419
|
+
const parent = this.filterDirectives.find((f) => f.name === filter.parent);
|
|
3349
3420
|
const parentHasDefault = parent?.defaultValue !== undefined && parent?.defaultValue !== null;
|
|
3350
3421
|
if (!parentHasDefault) {
|
|
3351
3422
|
filter.visible = false;
|
|
@@ -3367,8 +3438,12 @@ class FiltersComponent {
|
|
|
3367
3438
|
evaluatecleanvalue(filter) {
|
|
3368
3439
|
let isContinue = filter.value != filter.defaultValue;
|
|
3369
3440
|
// Si el tipo de filtro es de fecha y el valor predeterminado es un objeto de fecha, compara las fechas en milisegundos
|
|
3370
|
-
if (filter.type === FilterTypeEnum.Date &&
|
|
3371
|
-
|
|
3441
|
+
if (filter.type === FilterTypeEnum.Date &&
|
|
3442
|
+
typeof filter.defaultValue === "object" &&
|
|
3443
|
+
filter.defaultValue != null) {
|
|
3444
|
+
isContinue =
|
|
3445
|
+
filter.value.getTime() !=
|
|
3446
|
+
filter.defaultValue.getTime();
|
|
3372
3447
|
}
|
|
3373
3448
|
// Si el tipo de filtro es SelectDetail, compara los primeros elementos de los arreglos
|
|
3374
3449
|
if (filter.type === FilterTypeEnum.SelectDetail) {
|
|
@@ -3382,13 +3457,22 @@ class FiltersComponent {
|
|
|
3382
3457
|
* @returns {boolean} - `true` si el valor actual cumple con las condiciones para ser diferente al valor predeterminado, `false` de lo contrario.
|
|
3383
3458
|
*/
|
|
3384
3459
|
evaluatecleanvaluetext(filter) {
|
|
3385
|
-
let isContinue = filter.value != null &&
|
|
3460
|
+
let isContinue = filter.value != null &&
|
|
3461
|
+
filter.value != 0 &&
|
|
3462
|
+
filter.value != -1 &&
|
|
3463
|
+
filter.value != filter.defaultValue &&
|
|
3464
|
+
filter.showClass;
|
|
3386
3465
|
if (filter.defaultValue) {
|
|
3387
3466
|
isContinue = filter.value != null && filter.value != filter.defaultValue;
|
|
3388
3467
|
}
|
|
3389
3468
|
// Si el tipo de filtro es de fecha y el valor predeterminado es un objeto de fecha, compara las fechas en milisegundos
|
|
3390
|
-
if (filter.value != null &&
|
|
3391
|
-
|
|
3469
|
+
if (filter.value != null &&
|
|
3470
|
+
filter.type === FilterTypeEnum.Date &&
|
|
3471
|
+
typeof filter.defaultValue === "object" &&
|
|
3472
|
+
filter.defaultValue != null) {
|
|
3473
|
+
isContinue =
|
|
3474
|
+
filter.value.getTime() !=
|
|
3475
|
+
filter.defaultValue.getTime();
|
|
3392
3476
|
}
|
|
3393
3477
|
if (filter.type === FilterTypeEnum.Select) {
|
|
3394
3478
|
if (Array.isArray(filter.value) && Array.isArray(filter.defaultValue)) {
|
|
@@ -3411,11 +3495,12 @@ class FiltersComponent {
|
|
|
3411
3495
|
if (type === this.filterTypeEnum.Select && Array.isArray(value)) {
|
|
3412
3496
|
has = value.length > 0;
|
|
3413
3497
|
}
|
|
3414
|
-
else if (type === this.filterTypeEnum.Text ||
|
|
3498
|
+
else if (type === this.filterTypeEnum.Text ||
|
|
3499
|
+
type === this.filterTypeEnum.TextArea) {
|
|
3415
3500
|
has = !!value && value.trim() !== "";
|
|
3416
3501
|
}
|
|
3417
3502
|
else if (type === this.filterTypeEnum.Date && Array.isArray(value)) {
|
|
3418
|
-
has = value.some(v => !!v);
|
|
3503
|
+
has = value.some((v) => !!v);
|
|
3419
3504
|
}
|
|
3420
3505
|
else {
|
|
3421
3506
|
has = !!value;
|
|
@@ -3430,13 +3515,23 @@ class FiltersComponent {
|
|
|
3430
3515
|
if (defaultValue === undefined || defaultValue === null) {
|
|
3431
3516
|
return false;
|
|
3432
3517
|
}
|
|
3433
|
-
if (type === this.filterTypeEnum.Select &&
|
|
3434
|
-
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
}
|
|
3439
|
-
if (type === this.filterTypeEnum.Date &&
|
|
3518
|
+
if (type === this.filterTypeEnum.Select &&
|
|
3519
|
+
Array.isArray(value) &&
|
|
3520
|
+
Array.isArray(defaultValue)) {
|
|
3521
|
+
return (value.length === defaultValue.length &&
|
|
3522
|
+
value.every((v, i) => v === defaultValue[i]));
|
|
3523
|
+
}
|
|
3524
|
+
if (type === this.filterTypeEnum.Date &&
|
|
3525
|
+
Array.isArray(value) &&
|
|
3526
|
+
Array.isArray(defaultValue)) {
|
|
3527
|
+
return (value.length === defaultValue.length &&
|
|
3528
|
+
value.every((v, i) => v instanceof Date &&
|
|
3529
|
+
defaultValue[i] instanceof Date &&
|
|
3530
|
+
v.getTime() === defaultValue[i].getTime()));
|
|
3531
|
+
}
|
|
3532
|
+
if (type === this.filterTypeEnum.Date &&
|
|
3533
|
+
value instanceof Date &&
|
|
3534
|
+
defaultValue instanceof Date) {
|
|
3440
3535
|
return value.getTime() === defaultValue.getTime();
|
|
3441
3536
|
}
|
|
3442
3537
|
return value === defaultValue;
|
|
@@ -3466,7 +3561,20 @@ class FiltersComponent {
|
|
|
3466
3561
|
}
|
|
3467
3562
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FiltersComponent, decorators: [{
|
|
3468
3563
|
type: Component,
|
|
3469
|
-
args: [{ selector: "intelica-filters", imports: [
|
|
3564
|
+
args: [{ selector: "intelica-filters", imports: [
|
|
3565
|
+
CommonModule,
|
|
3566
|
+
DatePickerModule,
|
|
3567
|
+
FormsModule,
|
|
3568
|
+
TermPipe,
|
|
3569
|
+
ButtonModule,
|
|
3570
|
+
InputTextModule,
|
|
3571
|
+
CheckboxModule,
|
|
3572
|
+
SelectModule,
|
|
3573
|
+
MultiSelectModule,
|
|
3574
|
+
TextareaModule,
|
|
3575
|
+
RippleModule,
|
|
3576
|
+
MultiSelectComponent,
|
|
3577
|
+
], template: "<div class=\"inputColumns\" [ngClass]=\"customClass\">\r\n\t@for (filter of filterDirectives; track filter) {\r\n\t<!-- BEGIN filters -->\r\n\t@if (filter.visible && !filter.parent) {\r\n\t<ng-container *ngTemplateOutlet=\"template; context: { item: filter, index: getIndex(filter) }\"></ng-container>\r\n\t@for (child of filterDirectives; track child) { @if (child.parent && child.parent === filter.name && child.visible) {\r\n\t<ng-container *ngTemplateOutlet=\"template; context: { item: child, index: getIndex(child, filter) }\"></ng-container>\r\n\t} } }\r\n\t<!-- END filters -->\r\n\t}\r\n</div>\r\n\r\n@if (showButtons) {\r\n<div class=\"btnBox btnBox--center mt-4\">\r\n\t<button pRipple class=\"grButton grButton--primary applyAnalytics\" (click)=\"clickApply()\">\r\n\t\t<span>{{ \"Apply\" | term : GlobalTermService.languageCode }}</span>\r\n\t</button>\r\n\t<button pRipple class=\"grButton grButton--secondary cleanAnalytics\" (click)=\"clickCancel()\">\r\n\t\t<span>{{ \"Clear\" | term : GlobalTermService.languageCode }}</span>\r\n\t</button>\r\n</div>\r\n}\r\n\r\n<!-- Template general -->\r\n<ng-template #template let-item=\"item\" let-index=\"index\">\r\n\t@if (item.visible) {\r\n\t<div class=\"formRowInput {{ item.filterClass }}\" [ngClass]=\"{ required: item.required }\">\r\n\t\t@if (item.label && item.label.length > 0) {\r\n\t\t<div class=\"formRowInputLeft align-items-baseline\">\r\n\t\t\t<div class=\"formRowInputNumber\">\r\n\t\t\t\t<span>{{ index }}</span>\r\n\t\t\t</div>\r\n\t\t\t<label [for]=\"item.name\">\r\n\t\t\t\t<span>{{ item.label }}</span>\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t\t}\r\n\t\t<div class=\"formRowInputWrap align-items-center\">\r\n\t\t\t@if (item.type === filterTypeEnum.Select) {\r\n\t\t\t<ng-container *ngTemplateOutlet=\"select; context: { item: item, index: index }\"></ng-container>\r\n\t\t\t}\r\n\t\t\t<!---->\r\n\t\t\t@if (item.type === filterTypeEnum.Text) {\r\n\t\t\t<ng-container *ngTemplateOutlet=\"text; context: { item: item, index: index }\"></ng-container>\r\n\t\t\t}\r\n\t\t\t<!---->\r\n\t\t\t@if (item.type === filterTypeEnum.Checkbox) {\r\n\t\t\t<ng-container *ngTemplateOutlet=\"checkbox; context: { item: item, index: index }\"></ng-container>\r\n\t\t\t}\r\n\t\t\t<!---->\r\n\t\t\t@if (item.type === filterTypeEnum.Date) {\r\n\t\t\t<ng-container *ngTemplateOutlet=\"date; context: { item: item, index: index }\"></ng-container>\r\n\t\t\t}\r\n\t\t\t<!---->\r\n\t\t\t@if (item.type === filterTypeEnum.Template) {\r\n\t\t\t<ng-container *ngTemplateOutlet=\"template_filter; context: { item: item, index: index }\"></ng-container>\r\n\t\t\t}\r\n\t\t\t<!---->\r\n\t\t\t@if (item.type === filterTypeEnum.TextArea) {\r\n\t\t\t<ng-container *ngTemplateOutlet=\"text_area; context: { item: item, index: index }\"></ng-container>\r\n\t\t\t}\r\n\t\t</div>\r\n\t\t@if (item.showClean && hasValue(item)) {\r\n\t\t<button class=\"desactive formRowInputClear\" (click)=\"cleanValue(item)\">\r\n\t\t\t<i class=\"icon-times\"></i>\r\n\t\t</button>\r\n\t\t}\r\n\t</div>\r\n\t}\r\n</ng-template>\r\n\r\n<!-- Tipos de filtros -->\r\n<ng-template #select let-item=\"item\" let-index=\"index\">\r\n\t@if (item.multiple) {\r\n\t<intelica-multi-select\r\n\t\t[placeholder]=\"item.placeholder\"\r\n\t\t[options]=\"item.options\"\r\n\t\t[showFilter]=\"item.showFilter\"\r\n\t\t[showAll]=\"item.showAll\"\r\n\t\t[optionLabel]=\"item.optionLabel\"\r\n\t\t[optionValue]=\"item.optionValue\"\r\n\t\t[disabled]=\"!item.enabled\"\r\n\t\t[(ngModel)]=\"item.value\"\r\n\t\t(onChange)=\"onChangeMultiple($event, item)\"\r\n\t\t[appendTo]=\"item.appendTo\"\r\n\t\t[panelStyleClass]=\"item.panelStyleClass\"\r\n\t\t[allText]=\"item.allText\"\r\n\t\t[maxSelectedLabels]=\"item.maxSelectedLabels\"\r\n\t\t[virtualScroll]=\"item.virtualScroll\"\r\n\t\t[selectedItemsLabel]=\"item.selectedItemsLabel\"\r\n\t\tclass=\"fullWidth\"\r\n\t></intelica-multi-select>\r\n\t} @else {\r\n\t<p-select\r\n\t\t[options]=\"item.options\"\r\n\t\t[(ngModel)]=\"item.value\"\r\n\t\t[optionLabel]=\"item.optionLabel\"\r\n\t\t[optionValue]=\"item.optionValue\"\r\n\t\t[placeholder]=\"item.placeholder\"\r\n\t\t[disabled]=\"!item.enabled\"\r\n\t\t(onChange)=\"onChange($event, item)\"\r\n\t\t[filter]=\"item.showfilter\"\r\n\t\t[appendTo]=\"item.appendTo\"\r\n\t\t[panelStyleClass]=\"item.panelStyleClass\"\r\n\t\t[virtualScroll]=\"item.virtualScroll\"\r\n\t\t[virtualScrollItemSize]=\"25\"\r\n\t\tclass=\"prSelect\"\r\n\t\tappendTo=\"body\"\r\n\t\tpanelStyleClass=\"prSelect\"\r\n\t></p-select>\r\n\t}\r\n</ng-template>\r\n\r\n<ng-template #text let-item=\"item\" let-index=\"index\">\r\n\t<input pInputText class=\"prInputText\" type=\"text\" [disabled]=\"!item.enabled\" [(ngModel)]=\"item.value\" [placeholder]=\"item.placeholder\" (keyup)=\"onKeyUp($event, item)\" [maxlength]=\"item.maxlength\" />\r\n</ng-template>\r\n\r\n<ng-template #checkbox let-item=\"item\" let-index=\"index\">\r\n\t<p-checkbox class=\"prCheckbox\" [(ngModel)]=\"item.value\" [binary]=\"true\" [disabled]=\"!item.enabled\" (onChange)=\"onChangeCheck($event, item)\"></p-checkbox>\r\n</ng-template>\r\n\r\n<ng-template #date let-item=\"item\" let-index=\"index\">\r\n\t<p-datepicker\r\n\t\t[(ngModel)]=\"item.value\"\r\n\t\t[selectionMode]=\"item.range ? 'range' : 'single'\"\r\n\t\t[disabled]=\"!item.enabled\"\r\n\t\t[iconDisplay]=\"'input'\"\r\n\t\t[showIcon]=\"true\"\r\n\t\t(ngModelChange)=\"onChange($event, item)\"\r\n\t\t[view]=\"getDateView(item.dateMode)\"\r\n\t\t[dateFormat]=\"getDateFormat(item.dateMode)\"\r\n\t\tclass=\"prDatePicker\"\r\n\t\tappendTo=\"body\"\r\n\t\tpanelStyleClass=\"prDatePicker\"\r\n\t\t[placeholder]=\"getDateFormat(item.dateMode)\"\r\n\t></p-datepicker>\r\n</ng-template>\r\n\r\n<ng-template #template_filter let-item=\"item\" let-index=\"index\">\r\n\t<ng-container *ngTemplateOutlet=\"item.content\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #text_area let-item=\"item\" let-index=\"index\">\r\n\t<textarea pTextarea class=\"prInputText\" [disabled]=\"!item.enabled\" [(ngModel)]=\"item.value\" [placeholder]=\"item.placeholder\" (keyup)=\"onKeyUp($event, item)\"></textarea>\r\n</ng-template>\r\n" }]
|
|
3470
3578
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { showButtons: [{
|
|
3471
3579
|
type: Input
|
|
3472
3580
|
}], customClass: [{
|
|
@@ -4318,6 +4426,7 @@ class TableFetchComponent {
|
|
|
4318
4426
|
FilteredList = [];
|
|
4319
4427
|
TotalItems = 0;
|
|
4320
4428
|
TotalRecords = 0;
|
|
4429
|
+
IsPaginatorInputSearch = false;
|
|
4321
4430
|
EmitQueryParametersChange = new EventEmitter();
|
|
4322
4431
|
PaginatorTable;
|
|
4323
4432
|
SearchTable;
|
|
@@ -4339,22 +4448,29 @@ class TableFetchComponent {
|
|
|
4339
4448
|
ListDataTable = [];
|
|
4340
4449
|
ngOnChanges(changes) {
|
|
4341
4450
|
this.LoadSearchOptions();
|
|
4342
|
-
if (changes["FilteredList"] ||
|
|
4451
|
+
if (changes["FilteredList"] ||
|
|
4452
|
+
changes["RowsPerPage"] ||
|
|
4453
|
+
changes["CurrentPage"]) {
|
|
4343
4454
|
this.UpdatePages();
|
|
4344
4455
|
}
|
|
4345
4456
|
if (changes["sortField"] || changes["SortOrder"]) {
|
|
4346
|
-
this.EmitSortEvent.emit([
|
|
4457
|
+
this.EmitSortEvent.emit([
|
|
4458
|
+
{
|
|
4459
|
+
sortOrder: this.SortOrder,
|
|
4460
|
+
sortField: this.SortField?.toString() ?? "",
|
|
4461
|
+
},
|
|
4462
|
+
]);
|
|
4347
4463
|
}
|
|
4348
4464
|
}
|
|
4349
4465
|
ngAfterContentInit() {
|
|
4350
4466
|
this.ColumnList = this.Columns.toArray();
|
|
4351
4467
|
this.ColumnGroupList = this.ColumnGroups.toArray();
|
|
4352
4468
|
this.RowResumenList = this.RowResumenGroups.toArray();
|
|
4353
|
-
this.MaxLevel = Math.max(...this.ColumnGroupList.map(c => c.level)) + 1;
|
|
4469
|
+
this.MaxLevel = Math.max(...this.ColumnGroupList.map((c) => c.level)) + 1;
|
|
4354
4470
|
this.Levels = Array.from({ length: this.MaxLevel }, (_, i) => i);
|
|
4355
4471
|
}
|
|
4356
4472
|
LoadSearchOptions() {
|
|
4357
|
-
this.ListSearchOptionsSimple = this.ListSearchOptions.map(item => ({
|
|
4473
|
+
this.ListSearchOptionsSimple = this.ListSearchOptions.map((item) => ({
|
|
4358
4474
|
id: item.id,
|
|
4359
4475
|
value: item.name,
|
|
4360
4476
|
}));
|
|
@@ -4382,6 +4498,7 @@ class TableFetchComponent {
|
|
|
4382
4498
|
}
|
|
4383
4499
|
OnPageChange(pageIndex) {
|
|
4384
4500
|
this.CurrentPage = pageIndex;
|
|
4501
|
+
this.IsPaginatorInputSearch = true;
|
|
4385
4502
|
this.ExecuteSearch({});
|
|
4386
4503
|
}
|
|
4387
4504
|
ResetTable() {
|
|
@@ -4399,8 +4516,11 @@ class TableFetchComponent {
|
|
|
4399
4516
|
if (event?.fieldText !== undefined && event?.fieldText !== "") {
|
|
4400
4517
|
this.SearchInput = event;
|
|
4401
4518
|
}
|
|
4402
|
-
const field = this.ListSearchOptions.find(item => item.id === this.SearchInput.fieldId)?.field;
|
|
4403
|
-
if (this.SearchInput?.searchText !== undefined &&
|
|
4519
|
+
const field = this.ListSearchOptions.find((item) => item.id === this.SearchInput.fieldId)?.field;
|
|
4520
|
+
if (this.SearchInput?.searchText !== undefined &&
|
|
4521
|
+
this.SearchInput?.searchText !== "" &&
|
|
4522
|
+
this.ListSearchOptions.length > 0 &&
|
|
4523
|
+
!this.IsPaginatorInputSearch) {
|
|
4404
4524
|
if (this.PaginatorTable) {
|
|
4405
4525
|
this.PaginatorTable.CurrentPage = 1;
|
|
4406
4526
|
this.CurrentPage = 1;
|
|
@@ -4417,6 +4537,7 @@ class TableFetchComponent {
|
|
|
4417
4537
|
};
|
|
4418
4538
|
this.EmitQueryParametersChange.emit(newQueryParameters);
|
|
4419
4539
|
this.UpdatePages();
|
|
4540
|
+
this.IsPaginatorInputSearch = false;
|
|
4420
4541
|
}
|
|
4421
4542
|
OnRowsPerPageChange(value) {
|
|
4422
4543
|
this.RowsPerPage = value;
|
|
@@ -4428,7 +4549,18 @@ class TableFetchComponent {
|
|
|
4428
4549
|
}
|
|
4429
4550
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableFetchComponent, decorators: [{
|
|
4430
4551
|
type: Component,
|
|
4431
|
-
args: [{ selector: "intelica-table-fetch", standalone: true, imports: [
|
|
4552
|
+
args: [{ selector: "intelica-table-fetch", standalone: true, imports: [
|
|
4553
|
+
CommonModule,
|
|
4554
|
+
TableModule,
|
|
4555
|
+
Select,
|
|
4556
|
+
BadgeModule,
|
|
4557
|
+
TooltipModule,
|
|
4558
|
+
TermPipe,
|
|
4559
|
+
CheckboxModule,
|
|
4560
|
+
FormsModule,
|
|
4561
|
+
SearchComponent,
|
|
4562
|
+
PaginatorComponent,
|
|
4563
|
+
], template: "<div class=\"prTable\">\r\n\t<div class=\"prTableTools\">\r\n\t\t<div class=\"prTableTools__new prTableTools__new--left\">\r\n\t\t\t@if (AdditionalTemplate) {\r\n\t\t\t<ng-container *ngTemplateOutlet=\"AdditionalTemplate\"></ng-container>\r\n\t\t\t}\r\n\t\t</div>\r\n\r\n\t\t@if (ShowSearch) {\r\n\t\t<intelica-search\r\n\t\t\t#searchTable\r\n\t\t\t[ComponentId]=\"ComponentId + 'Search'\"\r\n\t\t\t(OnSearch)=\"ExecuteSearch($event)\"\r\n\t\t\t[SearchFieldOptions]=\"ListSearchOptionsSimple\"\r\n\t\t\t[SearchOnKeyup]=\"false\"\r\n\t\t\t[SimpleSearchInput]=\"false\"\r\n\t\t\t[ShowTooltip]=\"ShowSearchTooltip\"\r\n\t\t></intelica-search>\r\n\t\t} @if (AdditionalCentralTemplate) {\r\n\t\t<div class=\"prTableTools__new prTableTools__new--right\">\r\n\t\t\t<ng-container *ngTemplateOutlet=\"AdditionalCentralTemplate\"></ng-container>\r\n\t\t</div>\r\n\t\t}\r\n\t</div>\r\n\r\n\t<!-- Tabla que muestra FilteredList -->\r\n\t<p-table\r\n\t\tclass=\"prTableBasic\"\r\n\t\t[ngClass]=\"ClassName\"\r\n\t\t[value]=\"FilteredList\"\r\n\t\tresponsiveLayout=\"scroll\"\r\n\t\t[sortField]=\"DefaultSortField\"\r\n\t\t[sortOrder]=\"SortOrder\"\r\n\t\t[scrollable]=\"scrollable\"\r\n\t\t[scrollHeight]=\"scrollable ? scrollHeight : 'auto'\"\r\n\t\t[tableStyle]=\"tableStyle\"\r\n\t>\r\n\t\t<!-- Cabecera con columnas agrupadas -->\r\n\t\t<ng-template pTemplate=\"header\">\r\n\t\t\t@for (level of Levels; track $index) {\r\n\t\t\t<tr>\r\n\t\t\t\t@for (col of ColumnGroupList; track $index) { @if (col.level === level) {\r\n\t\t\t\t<th [attr.colspan]=\"col.colspan\" [attr.rowspan]=\"col.rowspan\" [pSortableColumn]=\"col.sortable ? col.field : ''\" [style.min-width]=\"col.minWidth\" (click)=\"col.sortable && OnSort(col.field)\">\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<span pTooltip=\"{{ col.header }}\">{{ col.header }}</span>\r\n\t\t\t\t\t\t<p-sortIcon *ngIf=\"col.sortable\" [field]=\"col.field\"></p-sortIcon>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</th>\r\n\t\t\t\t} } @if (ShowCheckbox && level === 0 && ColumnGroupList.length != 0) {\r\n\t\t\t\t<th class=\"text-center\" style=\"width: 4%\" [attr.rowspan]=\"MaxLevel === 1 ? 2 : MaxLevel\">\r\n\t\t\t\t\t<p-tableHeaderCheckbox class=\"prCheckbox\" />\r\n\t\t\t\t</th>\r\n\t\t\t\t}\r\n\t\t\t</tr>\r\n\t\t\t}\r\n\r\n\t\t\t<tr>\r\n\t\t\t\t@for (col of ColumnList; track $index) { @if (col.showHeader) {\r\n\t\t\t\t<th\r\n\t\t\t\t\t[class]=\"col.className\"\r\n\t\t\t\t\t[pSortableColumn]=\"!col.isChecboxColumn && col.sortable ? col.field : ''\"\r\n\t\t\t\t\t[style.width]=\"col.width\"\r\n\t\t\t\t\t[style.min-width]=\"col.minWidth\"\r\n\t\t\t\t\t(click)=\"!col.isChecboxColumn && col.sortable && OnSort(col.field)\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<span pTooltip=\"{{ col.headerTooltip }}\" tooltipPosition=\"{{ col.headerTooltipPosition }}\">\r\n\t\t\t\t\t\t\t{{ col.header }}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t@if (!col.showIndex) {\r\n\t\t\t\t\t\t<p-sortIcon *ngIf=\"col.sortable\" [field]=\"col.field\"></p-sortIcon>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</th>\r\n\t\t\t\t} } @if (ShowCheckbox && ColumnGroupList.length == 0) {\r\n\t\t\t\t<th class=\"text-center\" style=\"width: 4%\">\r\n\t\t\t\t\t<p-tableHeaderCheckbox class=\"prCheckbox\" />\r\n\t\t\t\t</th>\r\n\t\t\t\t}\r\n\t\t\t</tr>\r\n\r\n\t\t\t@if (FilteredList.length > 0 && RowResumenList.length > 0) {\r\n\t\t\t<tr class=\"fixedRow\">\r\n\t\t\t\t@for (col of RowResumenList; track $index) {\r\n\t\t\t\t<td [ngClass]=\"col.className\" [attr.colspan]=\"col.colspan\" [attr.rowspan]=\"col.rowspan\">\r\n\t\t\t\t\t@if (col.templateRef) {\r\n\t\t\t\t\t<span>\r\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"col.templateRef\"></ng-container>\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t}\r\n\t\t\t\t</td>\r\n\t\t\t\t}\r\n\t\t\t</tr>\r\n\t\t\t}\r\n\t\t</ng-template>\r\n\r\n\t\t<!-- Cuerpo de la tabla -->\r\n\t\t<ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\">\r\n\t\t\t<tr>\r\n\t\t\t\t@for (col of ColumnList; track $index) {\r\n\t\t\t\t<td [ngClass]=\"col.className\">\r\n\t\t\t\t\t@if (col.showIndex) {\r\n\t\t\t\t\t{{ rowIndex + 1 + (CurrentPage - 1) * RowsPerPage }}\r\n\t\t\t\t\t} @else { @if (col.templateRef) {\r\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"col.templateRef; context: { $implicit: rowData }\"></ng-container>\r\n\t\t\t\t\t} @else {\r\n\t\t\t\t\t<span class=\"text-breakWord\" pTooltip=\"{{ col.tooltip }}\" tooltipPosition=\"{{ col.tooltipPosition }}\">\r\n\t\t\t\t\t\t{{ rowData[col.field] }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t} }\r\n\t\t\t\t</td>\r\n\t\t\t\t} @if (ShowCheckbox) {\r\n\t\t\t\t<td class=\"text-center\">\r\n\t\t\t\t\t<p-tableCheckbox [value]=\"rowData\" class=\"prCheckbox\" />\r\n\t\t\t\t</td>\r\n\t\t\t\t}\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\r\n\t\t<!-- Mensaje cuando no hay datos -->\r\n\t\t<ng-template pTemplate=\"emptymessage\">\r\n\t\t\t<tr>\r\n\t\t\t\t<td [attr.colspan]=\"ColumnList.length + (ShowCheckbox ? 1 : 0)\" class=\"text-center\">\r\n\t\t\t\t\t{{ \"Nodata\" | term : GlobalTermService.languageCode }}\r\n\t\t\t\t</td>\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\t</p-table>\r\n\r\n\t<!-- Paginaci\u00F3n y control de elementos por p\u00E1gina -->\r\n\t<div class=\"prTableToolsBottom\">\r\n\t\t@if(ShowRowPerPage){\r\n\t\t<div class=\"prTableToolsBottom__itemPerPage\">\r\n\t\t\t{{ \"ItemPerPage\" | term : GlobalTermService.languageCode }}\r\n\t\t\t<p-select [options]=\"AllowedPageSizes\" [ngModel]=\"RowsPerPage\" appendTo=\"body\" (onChange)=\"OnRowsPerPageChange($event.value)\" />\r\n\t\t\t<label for=\"pageSize\" class=\"control-label\">\r\n\t\t\t\t{{ 1 + RowsPerPage * (CurrentPage - 1) }} - {{ CurrentPage * RowsPerPage >= TotalRecords ? TotalRecords : CurrentPage * RowsPerPage }} {{ \"Of\" | term : GlobalTermService.languageCode }}\r\n\t\t\t\t{{ TotalRecords }} {{ \"Items\" | term : GlobalTermService.languageCode }}\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t\t} @if (ShowPagination) {\r\n\t\t<intelica-paginator #paginatorTable [TotalItems]=\"TotalRecords\" [CurrentPage]=\"CurrentPage\" [ItemsPerPage]=\"RowsPerPage\" (PageChange)=\"OnPageChange($event)\"></intelica-paginator>\r\n\t\t}\r\n\t</div>\r\n</div>\r\n" }]
|
|
4432
4564
|
}], propDecorators: { ComponentId: [{
|
|
4433
4565
|
type: Input
|
|
4434
4566
|
}], ShowRowPerPage: [{
|
|
@@ -8129,5 +8261,5 @@ const IntelicaTheme = definePreset(Aura, {
|
|
|
8129
8261
|
* Generated bundle index. Do not edit.
|
|
8130
8262
|
*/
|
|
8131
8263
|
|
|
8132
|
-
export { ActionDirective, ActionsMenuComponent, ButtonSplitComponent, CheckboxFilterDirective, Color, ColumnComponent, ColumnGroupComponent, CompareByField, ConfigService, CookieAttributesGeneral, DataDirective, DateFilterDirective, DateModeOptions, DynamicInputValidation, EchartComponent, EchartService, ElementService, EmailInputValidation, ErrorInterceptor, FeatureFlagService, FiltersComponent, FormatAmountPipe, GetCookieAttributes, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, IntelicaTheme, ItemSplitDirective, LanguageService, MatrixColumnComponent, MatrixColumnGroupComponent, MatrixTableComponent, ModalDialogComponent, MultiSelectComponent, OrderConstants, PaginatorComponent, Patterns, PopoverComponent, ProfileService, RecordPerPageComponent, RefreshTokenInterceptor, RouteGuard, RowResumenComponent, RowResumenTreeComponent, SearchComponent, SelectDetailFilterDirective, SelectFilterDirective, SharedService, SkeletonChartComponent, SkeletonComponent, SkeletonService, SkeletonTableComponent, SortingComponent, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TableFetchComponent, TemplateDirective, TemplateMenuComponent, TermGuard, TermPipe, TermService, TextAreaFilterDirective, TextFilterDirective, TextRangeFilterDirective, TreeColumnComponent, TreeColumnGroupComponent, TreeTableComponent, TruncatePipe, decryptData, encryptData, getColor };
|
|
8264
|
+
export { ActionDirective, ActionsMenuComponent, ButtonSplitComponent, CheckboxFilterDirective, Color, ColumnComponent, ColumnGroupComponent, CompareByField, ConfigService, CookieAttributesGeneral, DataDirective, DateFilterDirective, DateModeOptions, DynamicInputValidation, EchartComponent, EchartService, ElementService, EmailInputValidation, ErrorInterceptor, FeatureFlagService, FilterChipsComponent, FiltersComponent, FormatAmountPipe, GetCookieAttributes, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, IntelicaTheme, ItemSplitDirective, LanguageService, MatrixColumnComponent, MatrixColumnGroupComponent, MatrixTableComponent, ModalDialogComponent, MultiSelectComponent, OrderConstants, PaginatorComponent, Patterns, PopoverComponent, ProfileService, RecordPerPageComponent, RefreshTokenInterceptor, RouteGuard, RowResumenComponent, RowResumenTreeComponent, SearchComponent, SelectDetailFilterDirective, SelectFilterDirective, SharedService, SkeletonChartComponent, SkeletonComponent, SkeletonService, SkeletonTableComponent, SortingComponent, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TableFetchComponent, TemplateDirective, TemplateMenuComponent, TermGuard, TermPipe, TermService, TextAreaFilterDirective, TextFilterDirective, TextRangeFilterDirective, TreeColumnComponent, TreeColumnGroupComponent, TreeTableComponent, TruncatePipe, decryptData, encryptData, getColor };
|
|
8133
8265
|
//# sourceMappingURL=intelica-library-ui.mjs.map
|