@acontplus/ng-components 1.0.6 → 1.0.7
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/acontplus-ng-components.mjs +2192 -0
- package/fesm2022/acontplus-ng-components.mjs.map +1 -0
- package/index.d.ts +993 -0
- package/package.json +17 -13
|
@@ -0,0 +1,2192 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, booleanAttribute, output, Component, inject, ViewContainerRef, ViewChild, ChangeDetectionStrategy, EventEmitter, Output, Input, ViewEncapsulation, Pipe, ChangeDetectorRef, ContentChildren, ContentChild, Injectable, signal, computed, ElementRef, Renderer2, HostListener, Directive, InjectionToken } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/material/card';
|
|
4
|
+
import { MatCardModule } from '@angular/material/card';
|
|
5
|
+
import * as i2 from '@angular/material/button';
|
|
6
|
+
import { MatButtonModule, MatButton, MatMiniFabButton, MatIconButton, MatFabButton } from '@angular/material/button';
|
|
7
|
+
import * as i3 from '@angular/material/icon';
|
|
8
|
+
import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
9
|
+
import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
|
|
10
|
+
import * as i1$1 from '@angular/material/dialog';
|
|
11
|
+
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogConfig } from '@angular/material/dialog';
|
|
12
|
+
import { MatChipRow, MatChipGrid, MatChipInput } from '@angular/material/chips';
|
|
13
|
+
import { MatFormField, MatLabel, MatHint } from '@angular/material/form-field';
|
|
14
|
+
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
|
15
|
+
import { ENTER, COMMA } from '@angular/cdk/keycodes';
|
|
16
|
+
import { NgClass, CommonModule, NgTemplateOutlet, DatePipe, DecimalPipe, AsyncPipe } from '@angular/common';
|
|
17
|
+
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
18
|
+
import { TabulatorFull, PageModule, ReactiveDataModule } from 'tabulator-tables';
|
|
19
|
+
import * as i1$2 from '@angular/material/table';
|
|
20
|
+
import { MatTableDataSource, MatTableModule, MatTable, MatNoDataRow, MatHeaderRowDef, MatRowDef, MatFooterRowDef, MatColumnDef } from '@angular/material/table';
|
|
21
|
+
import { SelectionModel } from '@angular/cdk/collections';
|
|
22
|
+
import * as i6 from '@angular/material/paginator';
|
|
23
|
+
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
24
|
+
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
25
|
+
import * as i2$1 from '@angular/material/checkbox';
|
|
26
|
+
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
27
|
+
import * as i3$1 from '@angular/material/sort';
|
|
28
|
+
import { MatSortModule } from '@angular/material/sort';
|
|
29
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
30
|
+
import { TranslocoService } from '@jsverse/transloco';
|
|
31
|
+
import * as i1$3 from '@angular/cdk/overlay';
|
|
32
|
+
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
|
|
33
|
+
import { map, firstValueFrom, BehaviorSubject, of, delay, Subject, debounceTime, takeUntil } from 'rxjs';
|
|
34
|
+
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
35
|
+
import { ComponentPortal } from '@angular/cdk/portal';
|
|
36
|
+
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
37
|
+
import * as i2$2 from '@angular/forms';
|
|
38
|
+
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
39
|
+
import { switchMap, catchError, finalize } from 'rxjs/operators';
|
|
40
|
+
import { HttpContextToken, HttpContext } from '@angular/common/http';
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* A versatile card component that wraps Angular Material's mat-card with additional functionality
|
|
44
|
+
* and customization options. This component provides a consistent card layout with configurable
|
|
45
|
+
* header, content, and action areas.
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* <acp-mat-dynamic-card
|
|
49
|
+
* [cardTitle]="'Card Title'"
|
|
50
|
+
* [cardSubtitle]="'Card Subtitle'"
|
|
51
|
+
* [isHeaderVisible]="true"
|
|
52
|
+
* [areActionsVisible]="true"
|
|
53
|
+
* (primaryButtonClicked)="onPrimaryAction()">
|
|
54
|
+
* Card content goes here
|
|
55
|
+
* </acp-mat-dynamic-card>
|
|
56
|
+
*/
|
|
57
|
+
class MatDynamicCardComponent {
|
|
58
|
+
// Header inputs
|
|
59
|
+
/**
|
|
60
|
+
* The title text to display in the card header.
|
|
61
|
+
* @default null
|
|
62
|
+
*/
|
|
63
|
+
cardTitle = input(null, ...(ngDevMode ? [{ debugName: "cardTitle" }] : []));
|
|
64
|
+
/**
|
|
65
|
+
* The subtitle text to display in the card header.
|
|
66
|
+
* @default null
|
|
67
|
+
*/
|
|
68
|
+
cardSubtitle = input(null, ...(ngDevMode ? [{ debugName: "cardSubtitle" }] : []));
|
|
69
|
+
/**
|
|
70
|
+
* URL for the avatar image to display in the card header.
|
|
71
|
+
* @default null
|
|
72
|
+
*/
|
|
73
|
+
avatarImageUrl = input(null, ...(ngDevMode ? [{ debugName: "avatarImageUrl" }] : []));
|
|
74
|
+
/**
|
|
75
|
+
* Whether to show the card header section.
|
|
76
|
+
* @default false
|
|
77
|
+
*/
|
|
78
|
+
isHeaderVisible = input(false, ...(ngDevMode ? [{ debugName: "isHeaderVisible", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
79
|
+
// Content inputs
|
|
80
|
+
/**
|
|
81
|
+
* CSS padding value for the card content area.
|
|
82
|
+
* @default '1rem'
|
|
83
|
+
*/
|
|
84
|
+
contentPadding = input('1rem', ...(ngDevMode ? [{ debugName: "contentPadding" }] : []));
|
|
85
|
+
/**
|
|
86
|
+
* Whether to show a divider between the header and content sections.
|
|
87
|
+
* @default false
|
|
88
|
+
*/
|
|
89
|
+
hasDivider = input(false, ...(ngDevMode ? [{ debugName: "hasDivider", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
90
|
+
// Action inputs
|
|
91
|
+
/**
|
|
92
|
+
* Whether to show the action buttons section.
|
|
93
|
+
* @default false
|
|
94
|
+
*/
|
|
95
|
+
areActionsVisible = input(false, ...(ngDevMode ? [{ debugName: "areActionsVisible", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
96
|
+
/**
|
|
97
|
+
* Text for the primary action button.
|
|
98
|
+
* @default 'Confirm'
|
|
99
|
+
*/
|
|
100
|
+
primaryButtonText = input('Confirm', ...(ngDevMode ? [{ debugName: "primaryButtonText" }] : []));
|
|
101
|
+
/**
|
|
102
|
+
* Text for the secondary action button.
|
|
103
|
+
* @default 'Cancel'
|
|
104
|
+
*/
|
|
105
|
+
secondaryButtonText = input('Cancel', ...(ngDevMode ? [{ debugName: "secondaryButtonText" }] : []));
|
|
106
|
+
/**
|
|
107
|
+
* Material icon name for the primary button.
|
|
108
|
+
* @default null
|
|
109
|
+
*/
|
|
110
|
+
primaryButtonIcon = input(null, ...(ngDevMode ? [{ debugName: "primaryButtonIcon" }] : []));
|
|
111
|
+
/**
|
|
112
|
+
* Material icon name for the secondary button.
|
|
113
|
+
* @default null
|
|
114
|
+
*/
|
|
115
|
+
secondaryButtonIcon = input(null, ...(ngDevMode ? [{ debugName: "secondaryButtonIcon" }] : []));
|
|
116
|
+
/**
|
|
117
|
+
* Alignment of the action buttons.
|
|
118
|
+
* @default 'end'
|
|
119
|
+
*/
|
|
120
|
+
buttonsPosition = input('end', ...(ngDevMode ? [{ debugName: "buttonsPosition" }] : []));
|
|
121
|
+
// Output events
|
|
122
|
+
/**
|
|
123
|
+
* Event emitted when the primary button is clicked.
|
|
124
|
+
*/
|
|
125
|
+
primaryButtonClicked = output();
|
|
126
|
+
/**
|
|
127
|
+
* Event emitted when the secondary button is clicked.
|
|
128
|
+
*/
|
|
129
|
+
secondaryButtonClicked = output();
|
|
130
|
+
/**
|
|
131
|
+
* Event emitted when the card is clicked.
|
|
132
|
+
*/
|
|
133
|
+
cardClicked = output();
|
|
134
|
+
// Methods
|
|
135
|
+
/**
|
|
136
|
+
* Handles the primary button click event.
|
|
137
|
+
* Stops event propagation and emits the primaryButtonClicked event.
|
|
138
|
+
* @param event The click event
|
|
139
|
+
*/
|
|
140
|
+
handlePrimaryButtonClick(event) {
|
|
141
|
+
event.stopPropagation();
|
|
142
|
+
this.primaryButtonClicked.emit();
|
|
143
|
+
}
|
|
144
|
+
/**
|
|
145
|
+
* Handles the secondary button click event.
|
|
146
|
+
* Stops event propagation and emits the secondaryButtonClicked event.
|
|
147
|
+
* @param event The click event
|
|
148
|
+
*/
|
|
149
|
+
handleSecondaryButtonClick(event) {
|
|
150
|
+
event.stopPropagation();
|
|
151
|
+
this.secondaryButtonClicked.emit();
|
|
152
|
+
}
|
|
153
|
+
/**
|
|
154
|
+
* Handles the card click event.
|
|
155
|
+
* Emits the cardClicked event with the original event.
|
|
156
|
+
* @param event The click event
|
|
157
|
+
*/
|
|
158
|
+
handleCardClick(event) {
|
|
159
|
+
this.cardClicked.emit(event);
|
|
160
|
+
}
|
|
161
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MatDynamicCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
162
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: MatDynamicCardComponent, isStandalone: true, selector: "acp-mat-dynamic-card", inputs: { cardTitle: { classPropertyName: "cardTitle", publicName: "cardTitle", isSignal: true, isRequired: false, transformFunction: null }, cardSubtitle: { classPropertyName: "cardSubtitle", publicName: "cardSubtitle", isSignal: true, isRequired: false, transformFunction: null }, avatarImageUrl: { classPropertyName: "avatarImageUrl", publicName: "avatarImageUrl", isSignal: true, isRequired: false, transformFunction: null }, isHeaderVisible: { classPropertyName: "isHeaderVisible", publicName: "isHeaderVisible", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, hasDivider: { classPropertyName: "hasDivider", publicName: "hasDivider", isSignal: true, isRequired: false, transformFunction: null }, areActionsVisible: { classPropertyName: "areActionsVisible", publicName: "areActionsVisible", isSignal: true, isRequired: false, transformFunction: null }, primaryButtonText: { classPropertyName: "primaryButtonText", publicName: "primaryButtonText", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonText: { classPropertyName: "secondaryButtonText", publicName: "secondaryButtonText", isSignal: true, isRequired: false, transformFunction: null }, primaryButtonIcon: { classPropertyName: "primaryButtonIcon", publicName: "primaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonIcon: { classPropertyName: "secondaryButtonIcon", publicName: "secondaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, buttonsPosition: { classPropertyName: "buttonsPosition", publicName: "buttonsPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryButtonClicked: "primaryButtonClicked", secondaryButtonClicked: "secondaryButtonClicked", cardClicked: "cardClicked" }, ngImport: i0, template: "<mat-card\n appearance=\"outlined\"\n (click)=\"handleCardClick($event)\"\n [class.mat-card-divider]=\"hasDivider()\"\n>\n @if (isHeaderVisible()) {\n <mat-card-header>\n @if (avatarImageUrl()) {\n <img mat-card-avatar [src]=\"avatarImageUrl()\" alt=\"Card avatar\" />\n }\n @if (cardTitle()) {\n <mat-card-title>{{ cardTitle() }}</mat-card-title>\n }\n @if (cardSubtitle()) {\n <mat-card-subtitle>{{ cardSubtitle() }}</mat-card-subtitle>\n }\n </mat-card-header>\n }\n\n <mat-card-content [style.padding]=\"contentPadding()\">\n <ng-content></ng-content>\n </mat-card-content>\n\n @if (areActionsVisible()) {\n <mat-card-actions [align]=\"buttonsPosition()\">\n @if (secondaryButtonText()) {\n <button mat-button color=\"warn\" (click)=\"handleSecondaryButtonClick($event)\">\n @if (secondaryButtonIcon()) {\n <mat-icon>{{ secondaryButtonIcon() }}</mat-icon>\n }\n {{ secondaryButtonText() }}\n </button>\n }\n\n @if (primaryButtonText()) {\n <button mat-button color=\"primary\" (click)=\"handlePrimaryButtonClick($event)\">\n @if (primaryButtonIcon()) {\n <mat-icon>{{ primaryButtonIcon() }}</mat-icon>\n }\n {{ primaryButtonText() }}\n </button>\n }\n </mat-card-actions>\n }\n</mat-card>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
163
|
+
}
|
|
164
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MatDynamicCardComponent, decorators: [{
|
|
165
|
+
type: Component,
|
|
166
|
+
args: [{ selector: 'acp-mat-dynamic-card', standalone: true, imports: [MatCardModule, MatButtonModule, MatIconModule], template: "<mat-card\n appearance=\"outlined\"\n (click)=\"handleCardClick($event)\"\n [class.mat-card-divider]=\"hasDivider()\"\n>\n @if (isHeaderVisible()) {\n <mat-card-header>\n @if (avatarImageUrl()) {\n <img mat-card-avatar [src]=\"avatarImageUrl()\" alt=\"Card avatar\" />\n }\n @if (cardTitle()) {\n <mat-card-title>{{ cardTitle() }}</mat-card-title>\n }\n @if (cardSubtitle()) {\n <mat-card-subtitle>{{ cardSubtitle() }}</mat-card-subtitle>\n }\n </mat-card-header>\n }\n\n <mat-card-content [style.padding]=\"contentPadding()\">\n <ng-content></ng-content>\n </mat-card-content>\n\n @if (areActionsVisible()) {\n <mat-card-actions [align]=\"buttonsPosition()\">\n @if (secondaryButtonText()) {\n <button mat-button color=\"warn\" (click)=\"handleSecondaryButtonClick($event)\">\n @if (secondaryButtonIcon()) {\n <mat-icon>{{ secondaryButtonIcon() }}</mat-icon>\n }\n {{ secondaryButtonText() }}\n </button>\n }\n\n @if (primaryButtonText()) {\n <button mat-button color=\"primary\" (click)=\"handlePrimaryButtonClick($event)\">\n @if (primaryButtonIcon()) {\n <mat-icon>{{ primaryButtonIcon() }}</mat-icon>\n }\n {{ primaryButtonText() }}\n </button>\n }\n </mat-card-actions>\n }\n</mat-card>\n" }]
|
|
167
|
+
}] });
|
|
168
|
+
|
|
169
|
+
/**
|
|
170
|
+
* A wrapper component for Angular Material dialogs that provides a consistent look and feel,
|
|
171
|
+
* including a draggable header and the ability to dynamically create components inside the dialog.
|
|
172
|
+
*
|
|
173
|
+
* This component is typically used with the AdvancedDialogService's openInWrapper method.
|
|
174
|
+
*
|
|
175
|
+
* @example
|
|
176
|
+
* // In your service or component:
|
|
177
|
+
* this.dialogService.openInWrapper({
|
|
178
|
+
* component: YourDialogContentComponent,
|
|
179
|
+
* title: 'Dialog Title',
|
|
180
|
+
* icon: 'info',
|
|
181
|
+
* data: { message: 'This is some data passed to the dialog content component' }
|
|
182
|
+
* });
|
|
183
|
+
*/
|
|
184
|
+
class DialogWrapperComponent {
|
|
185
|
+
dialogRef = inject(MatDialogRef);
|
|
186
|
+
config = inject(MAT_DIALOG_DATA);
|
|
187
|
+
/**
|
|
188
|
+
* A template reference that acts as an anchor for dynamic content.
|
|
189
|
+
* This is where the component specified in the config will be rendered.
|
|
190
|
+
*/
|
|
191
|
+
contentHost;
|
|
192
|
+
/**
|
|
193
|
+
* A reference to the header element for the z-index focus logic.
|
|
194
|
+
* Used to bring the dialog to the front when clicked.
|
|
195
|
+
*/
|
|
196
|
+
header;
|
|
197
|
+
/**
|
|
198
|
+
* Static counter to track the highest z-index for multiple dialogs.
|
|
199
|
+
* Ensures that the most recently clicked dialog appears on top.
|
|
200
|
+
*/
|
|
201
|
+
static lastZIndex = 1000;
|
|
202
|
+
/**
|
|
203
|
+
* Creates an instance of DialogWrapperComponent.
|
|
204
|
+
*
|
|
205
|
+
* @param dialogRef Reference to the dialog opened via the Material Dialog service
|
|
206
|
+
* @param config Configuration for the dialog wrapper, injected from MAT_DIALOG_DATA
|
|
207
|
+
*/
|
|
208
|
+
constructor() { }
|
|
209
|
+
/**
|
|
210
|
+
* Lifecycle hook that initializes the dynamic content after the view is ready.
|
|
211
|
+
* Creates the component specified in the config and passes data to it.
|
|
212
|
+
*/
|
|
213
|
+
ngAfterViewInit() {
|
|
214
|
+
// Dynamically create the content component after the view is ready.
|
|
215
|
+
this.contentHost.clear();
|
|
216
|
+
const componentRef = this.contentHost.createComponent(this.config.component);
|
|
217
|
+
// Pass the provided data directly to the new component's instance.
|
|
218
|
+
// This requires the content component to have an @Input() property named 'data'.
|
|
219
|
+
if (this.config.data && componentRef.instance) {
|
|
220
|
+
componentRef.instance.data = this.config.data;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
/**
|
|
224
|
+
* Closes the dialog.
|
|
225
|
+
* Called when the close button in the header is clicked.
|
|
226
|
+
*/
|
|
227
|
+
onClose() {
|
|
228
|
+
this.dialogRef.close();
|
|
229
|
+
}
|
|
230
|
+
/**
|
|
231
|
+
* Brings the dialog to the front by adjusting its z-index.
|
|
232
|
+
* Called when the dialog header is clicked.
|
|
233
|
+
*/
|
|
234
|
+
bringToFront() {
|
|
235
|
+
const pane = this.header?.nativeElement.closest('.cdk-overlay-pane');
|
|
236
|
+
if (pane) {
|
|
237
|
+
pane.style.zIndex = (++DialogWrapperComponent.lastZIndex).toString();
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DialogWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
241
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: DialogWrapperComponent, isStandalone: true, selector: "acp-dialog-wrapper", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "header", first: true, predicate: ["dialogHeader"], descendants: true }], ngImport: i0, template: "@if (!config.hideHeader) {\n <div\n class=\"dialog-header\"\n cdkDrag\n cdkDragRootElement=\".cdk-overlay-pane\"\n cdkDragHandle\n #dialogHeader\n (mousedown)=\"bringToFront()\"\n >\n <h6 mat-dialog-title>\n @if (config.icon) {\n <mat-icon class=\"title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n }\n <span>{{ config.title }}</span>\n <button mat-icon-button class=\"close-button\" (click)=\"onClose()\" aria-label=\"Cerrar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </h6>\n </div>\n}\n\n<ng-template #contentHost></ng-template>\n", styles: [".dialog-header{cursor:move;padding:12px 24px;border-bottom:1px solid #dee2e6;color:#212529}h6[mat-dialog-title]{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%}.title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title] span{flex-grow:1}.close-button{margin-left:auto}mat-dialog-content{padding:24px}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
242
|
+
}
|
|
243
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DialogWrapperComponent, decorators: [{
|
|
244
|
+
type: Component,
|
|
245
|
+
args: [{ selector: 'acp-dialog-wrapper', standalone: true, imports: [CdkDrag, CdkDragHandle, MatDialogModule, MatIconModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!config.hideHeader) {\n <div\n class=\"dialog-header\"\n cdkDrag\n cdkDragRootElement=\".cdk-overlay-pane\"\n cdkDragHandle\n #dialogHeader\n (mousedown)=\"bringToFront()\"\n >\n <h6 mat-dialog-title>\n @if (config.icon) {\n <mat-icon class=\"title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n }\n <span>{{ config.title }}</span>\n <button mat-icon-button class=\"close-button\" (click)=\"onClose()\" aria-label=\"Cerrar di\u00E1logo\">\n <mat-icon>close</mat-icon>\n </button>\n </h6>\n </div>\n}\n\n<ng-template #contentHost></ng-template>\n", styles: [".dialog-header{cursor:move;padding:12px 24px;border-bottom:1px solid #dee2e6;color:#212529}h6[mat-dialog-title]{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%}.title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title] span{flex-grow:1}.close-button{margin-left:auto}mat-dialog-content{padding:24px}\n"] }]
|
|
246
|
+
}], ctorParameters: () => [], propDecorators: { contentHost: [{
|
|
247
|
+
type: ViewChild,
|
|
248
|
+
args: ['contentHost', { read: ViewContainerRef, static: true }]
|
|
249
|
+
}], header: [{
|
|
250
|
+
type: ViewChild,
|
|
251
|
+
args: ['dialogHeader', { static: false }]
|
|
252
|
+
}] } });
|
|
253
|
+
|
|
254
|
+
class IconUserComponent {
|
|
255
|
+
size = input('35', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
256
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IconUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
257
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: IconUserComponent, isStandalone: true, selector: "acp-icon-user", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n [attr.width]=\"size()\"\n [attr.height]=\"size()\"\n version=\"1.1\"\n id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 0 480 480\"\n xml:space=\"preserve\"\n fill=\"#000000\"\n>\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <g>\n <g>\n <circle style=\"fill: #b8bac0\" cx=\"240\" cy=\"240\" r=\"240\"></circle>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #ffffff\"\n d=\"M240,360.07c-27.944,0-53.297-11.991-72.003-31.372c-0.014,11.615-0.436,28.379-3.516,40.611 c2.02,1.235,3.588,3.262,3.894,5.784c3.992,32.484,34.781,56.977,71.625,56.977c36.836,0,67.625-24.496,71.625-56.977 c0.31-2.525,1.844-4.549,3.895-5.78c-3.08-12.233-3.503-28.999-3.517-40.615C293.297,348.079,267.944,360.07,240,360.07z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #d7dbe0\"\n d=\"M310.44,330.174c-18.549,18.477-43.242,29.896-70.44,29.896 c-27.944,0-53.297-11.991-72.003-31.372c-0.014,11.615-0.436,28.379-3.516,40.611c2.02,1.235,3.588,3.262,3.894,5.784 c1.765,14.359,8.778,27.144,19.223,36.954C235.766,405.265,290.437,357.702,310.44,330.174z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #ffffff\"\n d=\"M312,160.07H176c-22.055,0-40,17.945-40,40v48c0,61.758,46.656,112,104,112s104-50.242,104-112 v-56C344,174.426,329.648,160.07,312,160.07z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #5c546a\"\n d=\"M296,72.07H192c-15.047,0-27.695,10.438-31.102,24.449C133.359,100.02,112,123.598,112,152.07v40 c0,20.617,8.752,39.851,24,53.52v-45.52c0-22.055,17.945-40,40-40h136c17.648,0,32,14.355,32,32v53.511 c15.251-13.667,24-32.899,24-53.511v-48C368,104.371,335.703,72.07,296,72.07z\"\n ></path>\n </g>\n </g>\n <g>\n <path\n style=\"fill: #5c546a\"\n d=\"M61.632,400.544C105.562,449.319,169.191,480,240,480s134.438-30.681,178.368-79.456 c-7.66-10.356-18.462-18.77-32.352-22.659c-0.32-0.09-0.641-0.16-0.969-0.207l-63.859-9.582c-0.391-0.059-1.227-0.09-1.625-0.09 c-4.039,0-7.445,3.012-7.938,7.023c-4,32.48-34.789,56.977-71.625,56.977c-36.844,0-67.633-24.492-71.625-56.977 c-0.5-4.129-4.219-7.234-8.141-7.02c-0.469-0.027-0.93,0.012-1.422,0.086l-63.859,9.582c-0.328,0.047-0.648,0.117-0.969,0.207 C80.094,381.775,69.292,390.188,61.632,400.544z\"\n ></path>\n </g>\n </g>\n </g>\n</svg>\n", styles: [""] });
|
|
258
|
+
}
|
|
259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IconUserComponent, decorators: [{
|
|
260
|
+
type: Component,
|
|
261
|
+
args: [{ selector: 'acp-icon-user', imports: [], template: "<svg\n [attr.width]=\"size()\"\n [attr.height]=\"size()\"\n version=\"1.1\"\n id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 0 480 480\"\n xml:space=\"preserve\"\n fill=\"#000000\"\n>\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <g>\n <g>\n <circle style=\"fill: #b8bac0\" cx=\"240\" cy=\"240\" r=\"240\"></circle>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #ffffff\"\n d=\"M240,360.07c-27.944,0-53.297-11.991-72.003-31.372c-0.014,11.615-0.436,28.379-3.516,40.611 c2.02,1.235,3.588,3.262,3.894,5.784c3.992,32.484,34.781,56.977,71.625,56.977c36.836,0,67.625-24.496,71.625-56.977 c0.31-2.525,1.844-4.549,3.895-5.78c-3.08-12.233-3.503-28.999-3.517-40.615C293.297,348.079,267.944,360.07,240,360.07z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #d7dbe0\"\n d=\"M310.44,330.174c-18.549,18.477-43.242,29.896-70.44,29.896 c-27.944,0-53.297-11.991-72.003-31.372c-0.014,11.615-0.436,28.379-3.516,40.611c2.02,1.235,3.588,3.262,3.894,5.784 c1.765,14.359,8.778,27.144,19.223,36.954C235.766,405.265,290.437,357.702,310.44,330.174z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #ffffff\"\n d=\"M312,160.07H176c-22.055,0-40,17.945-40,40v48c0,61.758,46.656,112,104,112s104-50.242,104-112 v-56C344,174.426,329.648,160.07,312,160.07z\"\n ></path>\n </g>\n </g>\n <g>\n <g>\n <path\n style=\"fill: #5c546a\"\n d=\"M296,72.07H192c-15.047,0-27.695,10.438-31.102,24.449C133.359,100.02,112,123.598,112,152.07v40 c0,20.617,8.752,39.851,24,53.52v-45.52c0-22.055,17.945-40,40-40h136c17.648,0,32,14.355,32,32v53.511 c15.251-13.667,24-32.899,24-53.511v-48C368,104.371,335.703,72.07,296,72.07z\"\n ></path>\n </g>\n </g>\n <g>\n <path\n style=\"fill: #5c546a\"\n d=\"M61.632,400.544C105.562,449.319,169.191,480,240,480s134.438-30.681,178.368-79.456 c-7.66-10.356-18.462-18.77-32.352-22.659c-0.32-0.09-0.641-0.16-0.969-0.207l-63.859-9.582c-0.391-0.059-1.227-0.09-1.625-0.09 c-4.039,0-7.445,3.012-7.938,7.023c-4,32.48-34.789,56.977-71.625,56.977c-36.844,0-67.633-24.492-71.625-56.977 c-0.5-4.129-4.219-7.234-8.141-7.02c-0.469-0.027-0.93,0.012-1.422,0.086l-63.859,9.582c-0.328,0.047-0.648,0.117-0.969,0.207 C80.094,381.775,69.292,390.188,61.632,400.544z\"\n ></path>\n </g>\n </g>\n </g>\n</svg>\n" }]
|
|
262
|
+
}] });
|
|
263
|
+
|
|
264
|
+
class SvgIconComponent {
|
|
265
|
+
id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
266
|
+
width = input('40px', ...(ngDevMode ? [{ debugName: "width" }] : []));
|
|
267
|
+
height = input('40px', ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
268
|
+
color = input('#414141', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
269
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SvgIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
270
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: SvgIconComponent, isStandalone: true, selector: "acp-svg-icon", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg [attr.width]=\"width()\" [attr.height]=\"height()\" [style.color]=\"color()\">\n <use [attr.xlink:href]=\"'./svg-sprite.svg#' + id()\"></use>\n</svg>\n", styles: [""] });
|
|
271
|
+
}
|
|
272
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SvgIconComponent, decorators: [{
|
|
273
|
+
type: Component,
|
|
274
|
+
args: [{ selector: 'acp-svg-icon', imports: [], template: "<svg [attr.width]=\"width()\" [attr.height]=\"height()\" [style.color]=\"color()\">\n <use [attr.xlink:href]=\"'./svg-sprite.svg#' + id()\"></use>\n</svg>\n" }]
|
|
275
|
+
}] });
|
|
276
|
+
|
|
277
|
+
class MatInputChipComponent {
|
|
278
|
+
chips = input.required(...(ngDevMode ? [{ debugName: "chips" }] : []));
|
|
279
|
+
labelText = input.required(...(ngDevMode ? [{ debugName: "labelText" }] : []));
|
|
280
|
+
placelholder = input('', ...(ngDevMode ? [{ debugName: "placelholder" }] : []));
|
|
281
|
+
addOnBlur = true;
|
|
282
|
+
separatorKeysCodes = [ENTER, COMMA];
|
|
283
|
+
announcer = inject(LiveAnnouncer);
|
|
284
|
+
add(event) {
|
|
285
|
+
const value = (event.value || '').trim();
|
|
286
|
+
// Add our fruit
|
|
287
|
+
if (value) {
|
|
288
|
+
this.chips().push(value);
|
|
289
|
+
}
|
|
290
|
+
// Clear the input value
|
|
291
|
+
event.chipInput.clear();
|
|
292
|
+
}
|
|
293
|
+
remove(value) {
|
|
294
|
+
const index = this.chips().indexOf(value);
|
|
295
|
+
if (index >= 0) {
|
|
296
|
+
this.chips().splice(index, 1);
|
|
297
|
+
this.announcer.announce(`Removed ${value}`);
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
edit(inputRaw, event) {
|
|
301
|
+
const value = event.value.trim();
|
|
302
|
+
// Remove fruit if it no longer has a name
|
|
303
|
+
if (!value) {
|
|
304
|
+
this.remove(inputRaw);
|
|
305
|
+
return;
|
|
306
|
+
}
|
|
307
|
+
// Edit existing fruit
|
|
308
|
+
const index = this.chips().indexOf(inputRaw);
|
|
309
|
+
if (index >= 0) {
|
|
310
|
+
this.chips()[index] = value.replace(/\s+/g, '');
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MatInputChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
314
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: MatInputChipComponent, isStandalone: true, selector: "acp-mat-input-chip", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: true, transformFunction: null }, placelholder: { classPropertyName: "placelholder", publicName: "placelholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field class=\"w-100\" appearance=\"outline\">\n <mat-label>{{ labelText() }}</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Enter fruits\">\n @for (chip of chips(); track $index) {\n <mat-chip-row\n (removed)=\"remove(chip)\"\n [editable]=\"true\"\n (edited)=\"edit(chip, $event)\"\n [aria-description]=\"'press enter to edit ' + chip\"\n >\n {{ chip }}\n <button matChipRemove [attr.aria-label]=\"'remove ' + chip\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input\n [placeholder]=\"placelholder()\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"add($event)\"\n />\n </mat-chip-grid>\n <mat-hint align=\"start\"\n ><strong>Ingrese {{ labelText() }} y dale \"Enter\"</strong>\n </mat-hint>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }] });
|
|
315
|
+
}
|
|
316
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MatInputChipComponent, decorators: [{
|
|
317
|
+
type: Component,
|
|
318
|
+
args: [{ selector: 'acp-mat-input-chip', imports: [MatFormField, MatLabel, MatChipRow, MatIcon, MatHint, MatChipGrid, MatChipInput], template: "<mat-form-field class=\"w-100\" appearance=\"outline\">\n <mat-label>{{ labelText() }}</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Enter fruits\">\n @for (chip of chips(); track $index) {\n <mat-chip-row\n (removed)=\"remove(chip)\"\n [editable]=\"true\"\n (edited)=\"edit(chip, $event)\"\n [aria-description]=\"'press enter to edit ' + chip\"\n >\n {{ chip }}\n <button matChipRemove [attr.aria-label]=\"'remove ' + chip\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input\n [placeholder]=\"placelholder()\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"add($event)\"\n />\n </mat-chip-grid>\n <mat-hint align=\"start\"\n ><strong>Ingrese {{ labelText() }} y dale \"Enter\"</strong>\n </mat-hint>\n</mat-form-field>\n" }]
|
|
319
|
+
}] });
|
|
320
|
+
|
|
321
|
+
class MatThemeButtonComponent {
|
|
322
|
+
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
323
|
+
text = input('', ...(ngDevMode ? [{ debugName: "text" }] : []));
|
|
324
|
+
icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
325
|
+
outlined = input(false, ...(ngDevMode ? [{ debugName: "outlined" }] : []));
|
|
326
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
327
|
+
useThemeColor = input(false, ...(ngDevMode ? [{ debugName: "useThemeColor" }] : [])); // Use theme color based on variant
|
|
328
|
+
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
329
|
+
matStyle = input('raised', ...(ngDevMode ? [{ debugName: "matStyle" }] : []));
|
|
330
|
+
// Additional common button properties
|
|
331
|
+
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : [])); // Tooltip text shown on hover
|
|
332
|
+
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : [])); // Accessibility label
|
|
333
|
+
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : [])); // Name attribute for form submission
|
|
334
|
+
id = input('', ...(ngDevMode ? [{ debugName: "id" }] : [])); // ID for element reference
|
|
335
|
+
form = input('', ...(ngDevMode ? [{ debugName: "form" }] : [])); // Associated form ID
|
|
336
|
+
tabIndex = input(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : [])); // Tab order
|
|
337
|
+
testId = input('', ...(ngDevMode ? [{ debugName: "testId" }] : [])); // For testing purposes
|
|
338
|
+
handleClick = output();
|
|
339
|
+
getButtonClasses() {
|
|
340
|
+
return {
|
|
341
|
+
[`btn-${this.variant()}`]: true,
|
|
342
|
+
'btn-outlined': this.outlined() && this.matStyle() !== 'stroked', // Stroked buttons are already outlined
|
|
343
|
+
};
|
|
344
|
+
}
|
|
345
|
+
getThemeColor() {
|
|
346
|
+
if (!this.useThemeColor)
|
|
347
|
+
return null;
|
|
348
|
+
switch (this.variant()) {
|
|
349
|
+
case 'primary':
|
|
350
|
+
return 'primary';
|
|
351
|
+
case 'secondary':
|
|
352
|
+
return 'accent';
|
|
353
|
+
case 'danger':
|
|
354
|
+
return 'warn';
|
|
355
|
+
default:
|
|
356
|
+
return null;
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MatThemeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
360
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: MatThemeButtonComponent, isStandalone: true, selector: "acp-mat-theme-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, useThemeColor: { classPropertyName: "useThemeColor", publicName: "useThemeColor", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, matStyle: { classPropertyName: "matStyle", publicName: "matStyle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleClick: "handleClick" }, ngImport: i0, template: "@if (matStyle() === 'basic') {\n <button\n mat-button\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"getThemeColor()\"\n [type]=\"type()\"\n [title]=\"title()\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n >\n @if (icon()) {\n <mat-icon class=\"button-icon\">{{ icon() }}</mat-icon>\n }\n @if (text()) {\n <span class=\"button-text\">{{ text() }}</span>\n }\n <ng-content></ng-content>\n </button>\n} @else if (matStyle() === 'raised') {\n <button\n mat-raised-button\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"getThemeColor()\"\n [type]=\"type()\"\n [title]=\"title()\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n >\n <ng-content select=\"svgIcon\"></ng-content>\n @if (icon()) {\n <mat-icon class=\"button-icon\">{{ icon() }}</mat-icon>\n }\n @if (text()) {\n <span class=\"button-text\">{{ text() }}</span>\n }\n <ng-content></ng-content>\n </button>\n} @else if (matStyle() === 'flat') {\n <button\n mat-flat-button\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"getThemeColor()\"\n [type]=\"type()\"\n [title]=\"title()\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n >\n @if (icon()) {\n <mat-icon class=\"button-icon\">{{ icon() }}</mat-icon>\n }\n @if (text()) {\n <span class=\"button-text\">{{ text() }}</span>\n }\n <ng-content></ng-content>\n </button>\n} @else if (matStyle() === 'stroked') {\n <button\n mat-stroked-button\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"getThemeColor()\"\n [type]=\"type()\"\n [title]=\"title()\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n >\n @if (icon()) {\n <mat-icon class=\"button-icon\">{{ icon() }}</mat-icon>\n }\n @if (text()) {\n <span class=\"button-text\">{{ text() }}</span>\n }\n <ng-content></ng-content>\n </button>\n} @else if (matStyle() === 'icon') {\n <button\n mat-icon-button\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"getThemeColor()\"\n [type]=\"type()\"\n [title]=\"title()\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n >\n @if (icon()) {\n <mat-icon>{{ icon() }}</mat-icon>\n }\n <ng-content></ng-content>\n </button>\n} @else if (matStyle() === 'fab') {\n <button\n mat-fab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"getThemeColor()\"\n [type]=\"type()\"\n [title]=\"title()\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n >\n @if (icon()) {\n <mat-icon>{{ icon() }}</mat-icon>\n }\n @if (text()) {\n <span class=\"button-text\">{{ text() }}</span>\n }\n <ng-content></ng-content>\n </button>\n} @else if (matStyle() === 'mini-fab') {\n <button\n mat-mini-fab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"getThemeColor()\"\n [type]=\"type()\"\n [title]=\"title()\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n >\n @if (icon()) {\n <mat-icon>{{ icon() }}</mat-icon>\n }\n <ng-content></ng-content>\n </button>\n} @else {\n <button\n mat-raised-button\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"getThemeColor()\"\n [type]=\"type()\"\n [title]=\"title()\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n >\n <ng-content select=\"svgIcon\"></ng-content>\n\n @if (icon()) {\n <mat-icon class=\"button-icon\">{{ icon() }}</mat-icon>\n }\n @if (text()) {\n <span class=\"button-text\">{{ text() }}</span>\n }\n <ng-content></ng-content>\n </button>\n}\n", styles: [""], dependencies: [{ kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }] });
|
|
361
|
+
}
|
|
362
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MatThemeButtonComponent, decorators: [{
|
|
363
|
+
type: Component,
|
|
364
|
+
args: [{ selector: 'acp-mat-theme-button', imports: [MatButton, NgClass, MatIcon, MatMiniFabButton, MatIconButton, MatFabButton], template: "@if (matStyle() === 'basic') {\n <button\n mat-button\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"getThemeColor()\"\n [type]=\"type()\"\n [title]=\"title()\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n >\n @if (icon()) {\n <mat-icon class=\"button-icon\">{{ icon() }}</mat-icon>\n }\n @if (text()) {\n <span class=\"button-text\">{{ text() }}</span>\n }\n <ng-content></ng-content>\n </button>\n} @else if (matStyle() === 'raised') {\n <button\n mat-raised-button\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"getThemeColor()\"\n [type]=\"type()\"\n [title]=\"title()\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n >\n <ng-content select=\"svgIcon\"></ng-content>\n @if (icon()) {\n <mat-icon class=\"button-icon\">{{ icon() }}</mat-icon>\n }\n @if (text()) {\n <span class=\"button-text\">{{ text() }}</span>\n }\n <ng-content></ng-content>\n </button>\n} @else if (matStyle() === 'flat') {\n <button\n mat-flat-button\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"getThemeColor()\"\n [type]=\"type()\"\n [title]=\"title()\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n >\n @if (icon()) {\n <mat-icon class=\"button-icon\">{{ icon() }}</mat-icon>\n }\n @if (text()) {\n <span class=\"button-text\">{{ text() }}</span>\n }\n <ng-content></ng-content>\n </button>\n} @else if (matStyle() === 'stroked') {\n <button\n mat-stroked-button\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"getThemeColor()\"\n [type]=\"type()\"\n [title]=\"title()\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n >\n @if (icon()) {\n <mat-icon class=\"button-icon\">{{ icon() }}</mat-icon>\n }\n @if (text()) {\n <span class=\"button-text\">{{ text() }}</span>\n }\n <ng-content></ng-content>\n </button>\n} @else if (matStyle() === 'icon') {\n <button\n mat-icon-button\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"getThemeColor()\"\n [type]=\"type()\"\n [title]=\"title()\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n >\n @if (icon()) {\n <mat-icon>{{ icon() }}</mat-icon>\n }\n <ng-content></ng-content>\n </button>\n} @else if (matStyle() === 'fab') {\n <button\n mat-fab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"getThemeColor()\"\n [type]=\"type()\"\n [title]=\"title()\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n >\n @if (icon()) {\n <mat-icon>{{ icon() }}</mat-icon>\n }\n @if (text()) {\n <span class=\"button-text\">{{ text() }}</span>\n }\n <ng-content></ng-content>\n </button>\n} @else if (matStyle() === 'mini-fab') {\n <button\n mat-mini-fab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"getThemeColor()\"\n [type]=\"type()\"\n [title]=\"title()\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n >\n @if (icon()) {\n <mat-icon>{{ icon() }}</mat-icon>\n }\n <ng-content></ng-content>\n </button>\n} @else {\n <button\n mat-raised-button\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"getThemeColor()\"\n [type]=\"type()\"\n [title]=\"title()\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n [attr.name]=\"name()\"\n [attr.id]=\"id()\"\n [attr.form]=\"form()\"\n [attr.tabindex]=\"tabIndex()\"\n [attr.data-testid]=\"testId()\"\n (click)=\"handleClick.emit($event)\"\n >\n <ng-content select=\"svgIcon\"></ng-content>\n\n @if (icon()) {\n <mat-icon class=\"button-icon\">{{ icon() }}</mat-icon>\n }\n @if (text()) {\n <span class=\"button-text\">{{ text() }}</span>\n }\n <ng-content></ng-content>\n </button>\n}\n" }]
|
|
365
|
+
}] });
|
|
366
|
+
|
|
367
|
+
class SpinnerComponent {
|
|
368
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
369
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: SpinnerComponent, isStandalone: true, selector: "acp-spinner", ngImport: i0, template: "<mat-spinner></mat-spinner>\n", styles: [":host{display:flex;justify-content:center;align-items:center;height:100%}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
|
|
370
|
+
}
|
|
371
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
372
|
+
type: Component,
|
|
373
|
+
args: [{ selector: 'acp-spinner', imports: [MatProgressSpinner], template: "<mat-spinner></mat-spinner>\n", styles: [":host{display:flex;justify-content:center;align-items:center;height:100%}\n"] }]
|
|
374
|
+
}] });
|
|
375
|
+
|
|
376
|
+
// custom-tabulator.component.ts
|
|
377
|
+
TabulatorFull.registerModule([PageModule, ReactiveDataModule]);
|
|
378
|
+
class CustomTabulatorComponent {
|
|
379
|
+
// Data inputs
|
|
380
|
+
data = [];
|
|
381
|
+
columns = [];
|
|
382
|
+
// Layout inputs
|
|
383
|
+
height = '400px';
|
|
384
|
+
layout = 'fitData';
|
|
385
|
+
// Tree structure inputs
|
|
386
|
+
dataTree = false;
|
|
387
|
+
dataTreeChildField = 'children';
|
|
388
|
+
dataTreeStartExpanded = false;
|
|
389
|
+
dataTreeSelectPropagate = false;
|
|
390
|
+
// Behavior inputs
|
|
391
|
+
selectable = true;
|
|
392
|
+
reactiveData = true;
|
|
393
|
+
placeholder = 'No data available';
|
|
394
|
+
autoResize = true;
|
|
395
|
+
// Theme configuration
|
|
396
|
+
theme = { name: 'default' };
|
|
397
|
+
// Custom options
|
|
398
|
+
options = {};
|
|
399
|
+
// Events
|
|
400
|
+
cellEdited = new EventEmitter();
|
|
401
|
+
rowClick = new EventEmitter();
|
|
402
|
+
rowSelected = new EventEmitter();
|
|
403
|
+
tableReady = new EventEmitter();
|
|
404
|
+
_tabulator;
|
|
405
|
+
// Made public for template access
|
|
406
|
+
containerId = `acp-tabulator-${Math.random().toString(36).substr(2, 9)}`;
|
|
407
|
+
ngAfterViewInit() {
|
|
408
|
+
this.initializeTable();
|
|
409
|
+
}
|
|
410
|
+
ngOnChanges(changes) {
|
|
411
|
+
if (changes['data'] && !changes['data'].isFirstChange()) {
|
|
412
|
+
this.updateData();
|
|
413
|
+
}
|
|
414
|
+
if (changes['columns'] && !changes['columns'].isFirstChange()) {
|
|
415
|
+
this.updateColumns();
|
|
416
|
+
}
|
|
417
|
+
if (changes['theme'] && !changes['theme'].isFirstChange()) {
|
|
418
|
+
this.applyTheme();
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
ngOnDestroy() {
|
|
422
|
+
this.destroyTable();
|
|
423
|
+
}
|
|
424
|
+
initializeTable() {
|
|
425
|
+
if (this._tabulator) {
|
|
426
|
+
this.destroyTable();
|
|
427
|
+
}
|
|
428
|
+
const container = document.getElementById(this.containerId);
|
|
429
|
+
if (!container) {
|
|
430
|
+
console.warn('Tabulator container not found');
|
|
431
|
+
return;
|
|
432
|
+
}
|
|
433
|
+
const config = {
|
|
434
|
+
data: this.data,
|
|
435
|
+
columns: this.columns,
|
|
436
|
+
height: this.height,
|
|
437
|
+
layout: this.layout,
|
|
438
|
+
dataTree: this.dataTree,
|
|
439
|
+
dataTreeChildField: this.dataTreeChildField,
|
|
440
|
+
dataTreeStartExpanded: this.dataTreeStartExpanded,
|
|
441
|
+
dataTreeSelectPropagate: this.dataTreeSelectPropagate,
|
|
442
|
+
reactiveData: this.reactiveData,
|
|
443
|
+
placeholder: this.placeholder,
|
|
444
|
+
autoResize: this.autoResize,
|
|
445
|
+
selectable: this.selectable,
|
|
446
|
+
renderVertical: 'virtual',
|
|
447
|
+
renderVerticalBuffer: 300,
|
|
448
|
+
...this.options,
|
|
449
|
+
};
|
|
450
|
+
try {
|
|
451
|
+
this._tabulator = new TabulatorFull(container, config);
|
|
452
|
+
this.applyTheme();
|
|
453
|
+
this.registerEvents();
|
|
454
|
+
this.tableReady.emit(this._tabulator);
|
|
455
|
+
}
|
|
456
|
+
catch (error) {
|
|
457
|
+
console.error('Error initializing Tabulator:', error);
|
|
458
|
+
}
|
|
459
|
+
}
|
|
460
|
+
applyTheme() {
|
|
461
|
+
const container = document.getElementById(this.containerId);
|
|
462
|
+
if (container) {
|
|
463
|
+
// Remove existing theme classes
|
|
464
|
+
container.classList.remove('tabulator-default', 'tabulator-bootstrap5', 'tabulator-semanticui');
|
|
465
|
+
// Add current theme class
|
|
466
|
+
container.classList.add(`tabulator-${this.theme.name}`);
|
|
467
|
+
}
|
|
468
|
+
}
|
|
469
|
+
registerEvents() {
|
|
470
|
+
this._tabulator.on('cellEdited', cell => {
|
|
471
|
+
this.cellEdited.emit(cell);
|
|
472
|
+
});
|
|
473
|
+
this._tabulator.on('rowClick', (e, row) => {
|
|
474
|
+
this.rowClick.emit(row);
|
|
475
|
+
});
|
|
476
|
+
this._tabulator.on('rowSelected', row => {
|
|
477
|
+
this.rowSelected.emit(row);
|
|
478
|
+
});
|
|
479
|
+
}
|
|
480
|
+
updateData() {
|
|
481
|
+
if (this._tabulator) {
|
|
482
|
+
this._tabulator.replaceData(this.data);
|
|
483
|
+
}
|
|
484
|
+
}
|
|
485
|
+
updateColumns() {
|
|
486
|
+
if (this._tabulator) {
|
|
487
|
+
this._tabulator.setColumns(this.columns);
|
|
488
|
+
}
|
|
489
|
+
}
|
|
490
|
+
destroyTable() {
|
|
491
|
+
if (this._tabulator) {
|
|
492
|
+
this._tabulator.destroy();
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
// Public API methods
|
|
496
|
+
getInstance() {
|
|
497
|
+
return this._tabulator;
|
|
498
|
+
}
|
|
499
|
+
redraw() {
|
|
500
|
+
if (this._tabulator) {
|
|
501
|
+
this._tabulator.redraw();
|
|
502
|
+
}
|
|
503
|
+
}
|
|
504
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CustomTabulatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
505
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: CustomTabulatorComponent, isStandalone: true, selector: "acp-tabulator", inputs: { data: "data", columns: "columns", height: "height", layout: "layout", dataTree: "dataTree", dataTreeChildField: "dataTreeChildField", dataTreeStartExpanded: "dataTreeStartExpanded", dataTreeSelectPropagate: "dataTreeSelectPropagate", selectable: "selectable", reactiveData: "reactiveData", placeholder: "placeholder", autoResize: "autoResize", theme: "theme", options: "options" }, outputs: { cellEdited: "cellEdited", rowClick: "rowClick", rowSelected: "rowSelected", tableReady: "tableReady" }, usesOnChanges: true, ngImport: i0, template: "<div [id]=\"containerId\" class=\"acp-tabulator-container\"></div>", styles: [".tabulator{background-color:#888;border:1px solid #999;font-size:14px;overflow:hidden;position:relative;text-align:left;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.tabulator .tabulator-header{background-color:#e6e6e6;border-bottom:1px solid #999;box-sizing:border-box;color:#555;font-weight:700;outline:none;overflow:hidden;position:relative;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap;width:100%}.tabulator .tabulator-header .tabulator-col{background:#e6e6e6;border-right:1px solid #aaa;box-sizing:border-box;display:inline-flex;flex-direction:column;justify-content:flex-start;overflow:hidden;position:relative;text-align:left;vertical-align:bottom}.tabulator .tabulator-header .tabulator-col.tabulator-moving{background:#cdcdcd;border:1px solid #999;pointer-events:none;position:absolute}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{background-color:#cdcdcd;cursor:pointer}}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left{border-right:2px solid #aaa}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right{border-left:2px solid #aaa}.tabulator .tabulator-header .tabulator-calcs-holder{background:#f3f3f3!important;border-bottom:1px solid #aaa;border-top:1px solid #aaa;box-sizing:border-box;display:inline-block}.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row{background:#f3f3f3!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top{border-bottom:2px solid #aaa}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom{border-top:2px solid #aaa}.tabulator .tabulator-footer{background-color:#e6e6e6;border-top:1px solid #999;color:#555;font-weight:700;user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab{border:1px solid #999;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top:none;display:inline-block;font-size:.9em;padding:5px}.tabulator .tabulator-footer .tabulator-calcs-holder{background:#f3f3f3!important;border-bottom:1px solid #aaa;border-top:1px solid #aaa;box-sizing:border-box;overflow:hidden;text-align:left;width:100%}.tabulator-row.tabulator-moving{border-bottom:1px solid #aaa;border-top:1px solid #aaa;pointer-events:none;position:absolute;z-index:15}.tabulator-row .tabulator-responsive-collapse{border-bottom:1px solid #aaa;border-top:1px solid #aaa;box-sizing:border-box;padding:5px}.tabulator-row .tabulator-cell{border-right:1px solid #aaa;box-sizing:border-box;display:inline-block;outline:none;overflow:hidden;padding:4px;position:relative;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.tabulator-row .tabulator-cell.tabulator-row-header{background:#e6e6e6;border-bottom:1px solid #aaa;border-right:1px solid #999}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-right:2px solid #aaa}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-left:2px solid #aaa}.tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom:2px solid #aaa;border-bottom-left-radius:1px;border-left:2px solid #aaa;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-row.tabulator-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #aaa;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}.tabulator-popup-container{-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #aaa;box-shadow:0 0 5px #0003;box-sizing:border-box;display:inline-block;font-size:14px;overflow-y:auto;position:absolute;z-index:10000}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu:after{border-color:#aaa;border-style:solid;border-width:1px 1px 0 0;content:\"\";display:inline-block;height:7px;position:absolute;right:10px;top:calc(5px + .4em);transform:rotate(45deg);vertical-align:top;width:7px}.tabulator-menu .tabulator-menu-separator{border-top:1px solid #aaa}.tabulator-edit-list .tabulator-edit-list-group{border-bottom:1px solid #aaa;color:#333;font-weight:700;padding:6px 4px 4px}.tabulator.tabulator-rtl .tabulator-header .tabulator-col{border-left:1px solid #aaa;border-right:initial;text-align:initial}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell{border-left:1px solid #aaa;border-right:initial}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom-left-radius:0;border-bottom-right-radius:1px;border-left:initial;border-right:2px solid #aaa;margin-left:5px;margin-right:0}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-left:2px solid #aaa}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-right:2px solid #aaa}.tabulator-print-table .tabulator-data-tree-branch{border-bottom:2px solid #aaa;border-bottom-left-radius:1px;border-left:2px solid #aaa;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-print-table .tabulator-print-table-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #aaa;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}.tabulator{border:1px solid #dee2e6;font-size:16px;overflow:hidden;position:relative;text-align:left;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.tabulator .tabulator-header{background-color:#fff;border-bottom:1px solid #dee2e6;box-sizing:border-box;color:#555;font-weight:700;outline:none;overflow:hidden;position:relative;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap;width:100%}.tabulator .tabulator-header .tabulator-col{background:#fff;border-right:1px solid #aaa;box-sizing:border-box;display:inline-flex;flex-direction:column;justify-content:flex-start;overflow:hidden;position:relative;text-align:left;vertical-align:bottom}.tabulator .tabulator-header .tabulator-col.tabulator-moving{background:#e6e6e6;border:1px solid #dee2e6;pointer-events:none;position:absolute}.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{border-top:1px solid #aaa;display:flex;margin-right:-1px;overflow:hidden;position:relative}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{background-color:#e6e6e6;cursor:pointer}}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left{border-right:2px solid #dee2e6}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right{border-left:2px solid #dee2e6}.tabulator .tabulator-header .tabulator-calcs-holder{background:#fff!important;border-bottom:1px solid #aaa;border-top:1px solid #dee2e6;box-sizing:border-box;display:inline-block}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs{background:#dadfe4!important;font-weight:700}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top{border-bottom:2px solid #dee2e6}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom{border-top:2px solid #dee2e6}.tabulator .tabulator-footer{background-color:#e6e6e6;border-top:1px solid #dee2e6;color:#555;font-weight:700;user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab{border:1px solid #dee2e6;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top:none;display:inline-block;font-size:.9em;padding:5px}.tabulator .tabulator-footer .tabulator-calcs-holder{background:#f3f3f3!important;border-bottom:1px solid #dee2e6;border-top:1px solid #dee2e6;box-sizing:border-box;overflow:hidden;text-align:left;width:100%}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row{background:#f3f3f3!important;display:inline-block}.tabulator .tabulator-footer .tabulator-calcs-holder:only-child{border-bottom:none;margin-bottom:-5px}.tabulator .tabulator-footer .tabulator-page-size{border:1px solid #dee2e6;border-radius:3px;display:inline-block;margin:0 5px;padding:2px 5px}.tabulator .tabulator-footer .tabulator-page{background:#fff3;border:1px solid #dee2e6;border-radius:3px;display:inline-block;margin:0 2px;padding:2px 5px}.tabulator-row{background-color:#fff;box-sizing:border-box;min-height:24px;position:relative}.tabulator-row.tabulator-row-even{background-color:#e9ecef}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selectable:hover{background-color:#ced4da;cursor:pointer}}.tabulator-row.tabulator-moving{border-bottom:1px solid #dee2e6;border-top:1px solid #dee2e6;pointer-events:none;position:absolute;z-index:15}.tabulator-row .tabulator-responsive-collapse{border-bottom:1px solid #dee2e6;border-top:1px solid #dee2e6;box-sizing:border-box;padding:5px}.tabulator-row .tabulator-responsive-collapse table{font-size:16px}.tabulator-row .tabulator-cell{border-right:1px solid #dee2e6;box-sizing:border-box;display:inline-block;outline:none;overflow:hidden;padding:4px;position:relative;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.tabulator-row .tabulator-cell.tabulator-row-header{border-bottom:1px solid #dee2e6}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-right:2px solid #dee2e6}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-left:2px solid #dee2e6}.tabulator-row .tabulator-cell.tabulator-validation-fail{border:1px solid #d00}.tabulator-row .tabulator-cell.tabulator-validation-fail input,.tabulator-row .tabulator-cell.tabulator-validation-fail select{background:transparent;border:1px;color:#d00}.tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom:2px solid #dee2e6;border-bottom-left-radius:1px;border-left:2px solid #dee2e6;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle{align-items:center;background:#666;border-radius:20px;color:#fff;display:inline-flex;font-size:1.1em;font-weight:700;height:15px;justify-content:center;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;width:15px}.tabulator-row.tabulator-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #dee2e6;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}.tabulator-popup-container{-webkit-overflow-scrolling:touch;border:1px solid #dee2e6;box-shadow:0 0 5px #0003;box-sizing:border-box;display:inline-block;font-size:16px;overflow-y:auto;position:absolute;z-index:10000}@media (hover:hover) and (pointer:fine){.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover{background:#e9ecef;cursor:pointer}}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu:after{border-color:#dee2e6;border-style:solid;border-width:1px 1px 0 0;content:\"\";display:inline-block;height:7px;position:absolute;right:10px;top:calc(5px + .4em);transform:rotate(45deg);vertical-align:top;width:7px}.tabulator-menu .tabulator-menu-separator{border-top:1px solid #dee2e6}.tabulator-edit-list{-webkit-overflow-scrolling:touch;font-size:16px;max-height:200px;overflow-y:auto}.tabulator-edit-list .tabulator-edit-list-item.active{background:#1d68cd}.tabulator-edit-list .tabulator-edit-list-group{border-bottom:1px solid #dee2e6;color:#333;font-weight:700;padding:6px 4px 4px}.tabulator.tabulator-rtl .tabulator-header .tabulator-col{border-left:1px solid #aaa;border-right:initial}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell{border-left:1px solid #dee2e6;border-right:initial}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom-left-radius:0;border-bottom-right-radius:1px;border-left:initial;border-right:2px solid #dee2e6;margin-left:5px;margin-right:0}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-left:2px solid #dee2e6}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-right:2px solid #dee2e6}.tabulator-print-table .tabulator-data-tree-branch{border-bottom:2px solid #dee2e6;border-bottom-left-radius:1px;border-left:2px solid #dee2e6;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-print-table .tabulator-print-table-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #dee2e6;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}.tabulator{background-color:#fff;border:none}.tabulator .tabulator-header{border-bottom:2px solid #dee2e6;border-top:1px solid #dee2e6;color:inherit}.tabulator .tabulator-header .tabulator-col{background-color:#fff;border-right:none}.tabulator .tabulator-header .tabulator-col .tabulator-col-content{padding:12px}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{right:0}.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{border-top:1px solid #dee2e6}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input{background-clip:padding-box;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;color:#495057;font-size:1rem;line-height:1.5;padding:.375rem .75rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input:focus{background-color:#fff;border:1px solid #1d68cd;color:#495057;outline:0}.tabulator .tabulator-header .tabulator-calcs-holder{border-bottom:1px solid #dee2e6;width:100%}.tabulator .tabulator-tableholder .tabulator-placeholder span{color:#000}.tabulator .tabulator-footer,.tabulator .tabulator-tableholder .tabulator-table{color:inherit}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab{background-color:#fff;font-weight:400}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab.tabulator-spreadsheet-tab-active{background-color:#0d6efd;color:#fff}.tabulator .tabulator-footer .tabulator-paginator{color:inherit}.tabulator .tabulator-footer .tabulator-pages{margin:0}.tabulator .tabulator-footer .tabulator-page{margin:5px 0 0;padding:8px 12px}.tabulator .tabulator-footer .tabulator-page[data-page=first]{border-bottom-left-radius:4px;border-top-left-radius:4px}.tabulator .tabulator-footer .tabulator-page[data-page=last]{border:1px solid #dee2e6;border-bottom-right-radius:4px;border-top-right-radius:4px}.tabulator .tabulator-footer .tabulator-page.active{background-color:#0d6efd;border-color:#0d6efd;color:#fff}.tabulator .tabulator-footer .tabulator-page:disabled{background:#fff;border-color:#dee2e6;color:#6c757d}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover{background:#e9ecef;border-color:#dee2e6;color:#0a58ca}}.tabulator.thead-dark .tabulator-header,.tabulator.thead-dark .tabulator-header .tabulator-col{background-color:#fff;border-color:#dee2e6;color:#212529}.tabulator.table{background-color:#fff}.tabulator.table:not(.thead-light) .tabulator-header,.tabulator.table:not(.thead-light) .tabulator-header .tabulator-col{background-color:#fff;border-color:#dee2e6;color:#212529}.tabulator.table .tabulator-tableholder{color:#212529}.tabulator.table .tabulator-row{background-color:#fff;border-color:#dee2e6;color:#212529}@media (hover:hover) and (pointer:fine){.tabulator.table .tabulator-row:hover{background-color:#dee2e6}.tabulator.table .tabulator-row:hover .tabulator-cell{background-color:#ced4da}}.tabulator.table .tabulator-row.tabulator-selected{background-color:#9abcea}.tabulator.table .tabulator-footer{border-color:#dee2e6!important}.tabulator.table .tabulator-footer .tabulator-calcs-holder{background:#fff!important;border-color:#dee2e6!important}.tabulator.table .tabulator-footer .tabulator-calcs-holder .tabulator-row{background-color:#fff!important;border-color:#dee2e6!important;color:#212529!important}.tabulator.table-striped:not(.table) .tabulator-row.tabulator-row-even{background-color:#e9ecef}.tabulator.table-striped:not(.table) .tabulator-row.tabulator-row-even.tabulator-selected{background-color:#9abcea}@media (hover:hover) and (pointer:fine){.tabulator.table-striped:not(.table) .tabulator-row.tabulator-row-even.tabulator-selectable:hover{background-color:#ced4da;cursor:pointer}.tabulator.table-striped:not(.table) .tabulator-row.tabulator-row-even.tabulator-selected:hover{background-color:#769bcc;cursor:pointer}}.tabulator.table-striped.table .tabulator-row:nth-child(2n) .tabulator-cell{background-color:transparent}.tabulator.table-bordered{border:1px solid #dee2e6}.tabulator.table-bordered .tabulator-header .tabulator-col,.tabulator.table-bordered .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{border-right:1px solid #dee2e6}.tabulator.table-borderless .tabulator-header,.tabulator.table-borderless .tabulator-row{border:none}.tabulator.table-sm .tabulator-header .tabulator-col .tabulator-col-content{padding:5px!important}.tabulator.table-sm .tabulator-tableholder .tabulator-table .tabulator-row{min-height:26px}.tabulator.table-sm .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{padding:5px!important}.tabulator.table-sm .tabulator-row{padding-bottom:0;padding-top:0}.tabulator.table-sm .tabulator-col-resize-handle{padding:0}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table-primary{background:#cfe2ff!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table-secondary{background:#e2e3e5!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table-success{background:#d1e7dd!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table-info{background:#cff4fc!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table-warning{background:#fff3cd!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table-danger{background:#f8d7da!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table-light{background:#f8f9fa!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table{background:#212529!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table-active{background:#6c757d!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-primary{background:#cfe2ff!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-secondary{background:#e2e3e5!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-success{background:#d1e7dd!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-info{background:#cff4fc!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-warning{background:#fff3cd!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-danger{background:#f8d7da!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-light{background:#f8f9fa!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-dark{background:#212529!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-active{background:#6c757d!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table-primary{background:#cfe2ff!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table-secondary{background:#e2e3e5!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table-success{background:#d1e7dd!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table-info{background:#cff4fc!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table-warning{background:#fff3cd!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table-danger{background:#f8d7da!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table-light{background:#f8f9fa!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table{background:#212529!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table-active{background:#6c757d!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-primary{background:#cfe2ff!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-secondary{background:#e2e3e5!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-success{background:#d1e7dd!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-info{background:#cff4fc!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-warning{background:#fff3cd!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-danger{background:#f8d7da!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-light{background:#f8f9fa!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-dark{background:#212529!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-active{background:#6c757d!important}.tabulator-row{border-bottom:1px solid #dee2e6;min-height:40px}.tabulator-row .tabulator-cell{border-right:none;padding:12px}.tabulator-row .tabulator-cell.tabulator-row-header{background:#fff;border-bottom:none;border-right:1px solid #dee2e6}.tabulator-row .tabulator-cell .tabulator-data-tree-control{border:1px solid #ccc}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after,.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand,.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{background:#ccc}.tabulator-edit-select-list .tabulator-edit-select-list-group,.tabulator-edit-select-list .tabulator-edit-select-list-notice{color:inherit}.tabulator.tabulator-rtl .tabulator-header .tabulator-col{border-left:initial;text-align:initial}.tabulator-print-table .tabulator-data-tree-control{color:inherit}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after,.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand,.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{background:#ccc}.tabulator-popup-container{background:#fff}.tabulator-edit-list .tabulator-edit-list-item.active{color:#fff}@media (hover:hover) and (pointer:fine){.tabulator-edit-list .tabulator-edit-list-item:hover{color:#fff}}.tabulator{background-color:#fff;font-size:14px;overflow:hidden;position:relative;text-align:left;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.tabulator[tabulator-layout=fitDataFill] .tabulator-tableholder .tabulator-table{min-width:100%}.tabulator[tabulator-layout=fitDataTable]{display:inline-block}.tabulator.tabulator-block-select,.tabulator.tabulator-ranges .tabulator-cell:not(.tabulator-editing){-webkit-user-select:none;user-select:none}.tabulator .tabulator-header{border-bottom:1px solid #999;box-sizing:border-box;outline:none;overflow:hidden;position:relative;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap;width:100%}.tabulator .tabulator-header.tabulator-header-hidden{display:none}.tabulator .tabulator-header .tabulator-header-contents{overflow:hidden;position:relative}.tabulator .tabulator-header .tabulator-header-contents .tabulator-headers{display:inline-block}.tabulator .tabulator-header .tabulator-col{background:#f9fafb;border-right:1px solid #ddd;box-sizing:border-box;display:inline-flex;flex-direction:column;justify-content:flex-start;overflow:hidden;position:relative;text-align:left;vertical-align:bottom}.tabulator .tabulator-header .tabulator-col.tabulator-moving{background:#dae1e7;border:1px solid #999;pointer-events:none;position:absolute}.tabulator .tabulator-header .tabulator-col.tabulator-range-highlight{background-color:#d6d6d6;color:#000}.tabulator .tabulator-header .tabulator-col.tabulator-range-selected{background-color:#3876ca;color:#fff}.tabulator .tabulator-header .tabulator-col .tabulator-col-content{box-sizing:border-box;padding:4px;position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button{padding:0 8px}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button:hover{cursor:pointer;opacity:.6}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title-holder{position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title.tabulator-col-title-wrap{text-overflow:clip;white-space:normal}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor{background:#fff;border:1px solid #999;box-sizing:border-box;padding:1px;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-header-popup-button+.tabulator-title-editor{width:calc(100% - 22px)}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{align-items:center;bottom:0;display:flex;position:absolute;right:4px;top:0}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #bbb;border-left:6px solid transparent;border-right:6px solid transparent;height:0;width:0}.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{border-top:1px solid #ddd;display:flex;margin-right:-1px;overflow:hidden;position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter{box-sizing:border-box;margin-top:2px;position:relative;text-align:center;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea{height:auto!important}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg{margin-top:3px}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input::-ms-clear{height:0;width:0}.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding-right:25px}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{background-color:#dae1e7;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter{color:#bbb}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{border-bottom:6px solid #555;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #bbb;border-top:none}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter{color:#666}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{border-bottom:6px solid #555;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #666;border-top:none}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter{color:#666}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{border-top:6px solid #555;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:none;border-top:6px solid #666;color:#666}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical .tabulator-col-content .tabulator-col-title{align-items:center;display:flex;justify-content:center;text-orientation:mixed;writing-mode:vertical-rl}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-col-vertical-flip .tabulator-col-title{transform:rotate(180deg)}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-title{padding-right:0;padding-top:20px}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable.tabulator-col-vertical-flip .tabulator-col-title{padding-bottom:20px;padding-right:0}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-sorter{justify-content:center;inset:4px 0 auto}.tabulator .tabulator-header .tabulator-frozen{left:0;position:sticky;z-index:11}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left{border-right:2px solid #ddd}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right{border-left:2px solid #ddd}.tabulator .tabulator-header .tabulator-calcs-holder{background:#fff!important;border-bottom:1px solid #ddd;border-top:1px solid #ddd;box-sizing:border-box;display:inline-block}.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row{background:#fff!important}.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle{display:none}.tabulator .tabulator-header .tabulator-frozen-rows-holder{display:inline-block}.tabulator .tabulator-header .tabulator-frozen-rows-holder:empty{display:none}.tabulator .tabulator-tableholder{-webkit-overflow-scrolling:touch;overflow:auto;position:relative;white-space:nowrap;width:100%}.tabulator .tabulator-tableholder:focus{outline:none}.tabulator .tabulator-tableholder .tabulator-placeholder{align-items:center;box-sizing:border-box;display:flex;justify-content:center;min-width:100%;width:100%}.tabulator .tabulator-tableholder .tabulator-placeholder[tabulator-render-mode=virtual]{min-height:100%}.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents{color:#ccc;display:inline-block;font-size:20px;font-weight:700;padding:10px;text-align:center;white-space:normal}.tabulator .tabulator-tableholder .tabulator-table{background-color:#fff;color:#333;display:inline-block;overflow:visible;position:relative;white-space:nowrap}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs{background:#e2e2e2!important;font-weight:700}.tabulator .tabulator-tableholder .tabulator-range-overlay{inset:0;pointer-events:none;position:absolute;z-index:10}.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range{border:1px solid #2975dd;box-sizing:border-box;position:absolute}.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range.tabulator-range-active:after{background-color:#2975dd;border-radius:999px;bottom:-3px;content:\"\";height:6px;position:absolute;right:-3px;width:6px}.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range-cell-active{border:2px solid #2975dd;box-sizing:border-box;position:absolute}.tabulator .tabulator-footer{background-color:#fff;border-top:1px solid #999;color:#555;font-weight:700;user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap}.tabulator .tabulator-footer .tabulator-footer-contents{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:5px 10px}.tabulator .tabulator-footer .tabulator-footer-contents:empty{display:none}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs{margin-top:-5px;overflow-x:auto}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab{border:1px solid rgba(34,36,38,.15);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top:none;display:inline-block;font-size:.9em;padding:5px}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab:hover{cursor:pointer;opacity:.7}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab.tabulator-spreadsheet-tab-active{background:#fff}.tabulator .tabulator-footer .tabulator-calcs-holder{border-bottom:1px solid #ddd;border-top:1px solid #ddd;box-sizing:border-box;overflow:hidden;text-align:left;width:100%}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row{display:inline-block}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle{display:none}.tabulator .tabulator-footer .tabulator-calcs-holder:only-child{margin-bottom:-5px}.tabulator .tabulator-footer>*+.tabulator-page-counter{margin-left:10px}.tabulator .tabulator-footer .tabulator-page-counter{font-weight:400}.tabulator .tabulator-footer .tabulator-paginator{color:#555;flex:1;font-family:inherit;font-size:inherit;font-weight:inherit;text-align:right}.tabulator .tabulator-footer .tabulator-page-size{border:1px solid #aaa;border-radius:3px;display:inline-block;margin:0 5px;padding:2px 5px}.tabulator .tabulator-footer .tabulator-pages{margin:0 7px}.tabulator .tabulator-footer .tabulator-page{background:#fff3;border:1px solid #aaa;border-radius:3px;display:inline-block;margin:0 2px;padding:2px 5px}.tabulator .tabulator-footer .tabulator-page.active{color:#d00}.tabulator .tabulator-footer .tabulator-page:disabled{opacity:.5}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-footer .tabulator-page:not(disabled):hover{background:#0003;color:#fff;cursor:pointer}}.tabulator .tabulator-col-resize-handle{display:inline-block;margin-left:-3px;margin-right:-3px;position:relative;vertical-align:middle;width:6px;z-index:11}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-col-resize-handle:hover{cursor:ew-resize}}.tabulator .tabulator-col-resize-handle:last-of-type{margin-right:0;width:3px}.tabulator .tabulator-col-resize-guide{background-color:#999;height:100%;margin-left:-.5px;opacity:.5;position:absolute;top:0;width:4px}.tabulator .tabulator-row-resize-guide{background-color:#999;height:4px;left:0;margin-top:-.5px;opacity:.5;position:absolute;width:100%}.tabulator .tabulator-alert{align-items:center;background:#0006;display:flex;height:100%;left:0;position:absolute;text-align:center;top:0;width:100%;z-index:100}.tabulator .tabulator-alert .tabulator-alert-msg{background:#fff;border-radius:10px;display:inline-block;font-size:16px;font-weight:700;margin:0 auto;padding:10px 20px}.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg{border:4px solid #333;color:#000}.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error{border:4px solid #d00;color:#590000}.tabulator-row{background-color:#fff;box-sizing:border-box;min-height:22px;position:relative}.tabulator-row.tabulator-row-even{background-color:#efefef}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selectable:hover{background-color:#bbb;cursor:pointer}}.tabulator-row.tabulator-selected{background-color:#9abcea}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selected:hover{background-color:#769bcc;cursor:pointer}}.tabulator-row.tabulator-row-moving{background:#fff;border:1px solid #000}.tabulator-row.tabulator-moving{border-bottom:1px solid #ddd;border-top:1px solid #ddd;pointer-events:none;position:absolute;z-index:15}.tabulator-row.tabulator-range-highlight .tabulator-cell.tabulator-range-row-header{background-color:#d6d6d6;color:#000}.tabulator-row.tabulator-range-highlight.tabulator-range-selected .tabulator-cell.tabulator-range-row-header,.tabulator-row.tabulator-range-selected .tabulator-cell.tabulator-range-row-header{background-color:#3876ca;color:#fff}.tabulator-row .tabulator-row-resize-handle{bottom:0;height:5px;left:0;position:absolute;right:0}.tabulator-row .tabulator-row-resize-handle.prev{bottom:auto;top:0}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-row-resize-handle:hover{cursor:ns-resize}}.tabulator-row .tabulator-responsive-collapse{border-bottom:1px solid #ddd;border-top:1px solid #ddd;box-sizing:border-box;padding:5px}.tabulator-row .tabulator-responsive-collapse:empty{display:none}.tabulator-row .tabulator-responsive-collapse table{font-size:14px}.tabulator-row .tabulator-responsive-collapse table tr td{position:relative}.tabulator-row .tabulator-responsive-collapse table tr td:first-of-type{padding-right:10px}.tabulator-row .tabulator-cell{border-right:1px solid #ddd;box-sizing:border-box;display:inline-block;outline:none;overflow:hidden;padding:4px;position:relative;text-overflow:ellipsis;white-space:nowrap}.tabulator-row .tabulator-cell.tabulator-row-header{background:#f9fafb;border-bottom:1px solid #ddd;border-right:1px solid rgba(34,36,38,.15)}.tabulator-row .tabulator-cell.tabulator-frozen{background-color:inherit;display:inline-block;left:0;position:sticky;z-index:11}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-right:2px solid #ddd}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-left:2px solid #ddd}.tabulator-row .tabulator-cell.tabulator-editing{border:1px solid #1d68cd;outline:none;padding:0}.tabulator-row .tabulator-cell.tabulator-editing input,.tabulator-row .tabulator-cell.tabulator-editing select{background:transparent;border:1px;outline:none}.tabulator-row .tabulator-cell.tabulator-validation-fail{border:1px solid #db2828}.tabulator-row .tabulator-cell.tabulator-validation-fail input,.tabulator-row .tabulator-cell.tabulator-validation-fail select{background:transparent;border:1px;color:#db2828}.tabulator-row .tabulator-cell.tabulator-row-handle{align-items:center;display:inline-flex;justify-content:center;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none}.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box{width:80%}.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar{background:#666;height:3px;margin-top:2px;width:100%}.tabulator-row .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(.tabulator-range-row-header){background-color:#9abcea}.tabulator-row .tabulator-cell .tabulator-data-tree-branch-empty{display:inline-block;width:7px}.tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom:2px solid #ddd;border-bottom-left-radius:1px;border-left:2px solid #ddd;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-row .tabulator-cell .tabulator-data-tree-control{align-items:center;background:#0000001a;border:1px solid #333;border-radius:2px;display:inline-flex;height:11px;justify-content:center;margin-right:5px;overflow:hidden;vertical-align:middle;width:11px}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-cell .tabulator-data-tree-control:hover{background:#0003;cursor:pointer}}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse{background:transparent;display:inline-block;height:7px;position:relative;width:1px}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after{background:#333;content:\"\";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand{background:#333;display:inline-block;height:7px;position:relative;width:1px}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{background:#333;content:\"\";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle{align-items:center;background:#666;border-radius:20px;display:inline-flex;font-size:1.1em;font-weight:700;height:15px;justify-content:center;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;width:15px}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:hover{cursor:pointer;opacity:.7}}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-close{display:initial}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-open{display:none}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg{stroke:#fff}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-close{display:none}.tabulator-row .tabulator-cell .tabulator-traffic-light{border-radius:14px;display:inline-block;height:14px;width:14px}.tabulator-row.tabulator-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #ddd;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-group:hover{background-color:#0000001a;cursor:pointer}}.tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow{border-bottom:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #666;margin-right:10px}.tabulator-row.tabulator-group.tabulator-group-level-1{padding-left:30px}.tabulator-row.tabulator-group.tabulator-group-level-2{padding-left:50px}.tabulator-row.tabulator-group.tabulator-group-level-3{padding-left:70px}.tabulator-row.tabulator-group.tabulator-group-level-4{padding-left:90px}.tabulator-row.tabulator-group.tabulator-group-level-5{padding-left:110px}.tabulator-row.tabulator-group .tabulator-group-toggle{display:inline-block}.tabulator-row.tabulator-group .tabulator-arrow{border-bottom:6px solid transparent;border-left:6px solid #666;border-right:0;border-top:6px solid transparent;display:inline-block;height:0;margin-right:16px;vertical-align:middle;width:0}.tabulator-row.tabulator-group span{color:#d00;margin-left:10px}.tabulator-toggle{background:#dcdcdc;border:1px solid #ccc;box-sizing:border-box;display:flex;flex-direction:row}.tabulator-toggle.tabulator-toggle-on{background:#1c6cc2}.tabulator-toggle .tabulator-toggle-switch{background:#fff;border:1px solid #ccc;box-sizing:border-box}.tabulator-popup-container{-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #ddd;box-shadow:0 0 5px #0003;box-sizing:border-box;display:inline-block;font-size:14px;overflow-y:auto;position:absolute;z-index:10000}.tabulator-popup{border-radius:3px;padding:5px}.tabulator-tooltip{border-radius:2px;box-shadow:none;font-size:12px;max-width:Min(500px,100%);padding:3px 5px;pointer-events:none}.tabulator-menu .tabulator-menu-item{box-sizing:border-box;padding:5px 10px;position:relative;-webkit-user-select:none;user-select:none}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-disabled{opacity:.5}@media (hover:hover) and (pointer:fine){.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover{background:#efefef;cursor:pointer}}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu{padding-right:25px}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu:after{border-color:#ddd;border-style:solid;border-width:1px 1px 0 0;content:\"\";display:inline-block;height:7px;position:absolute;right:10px;top:calc(5px + .4em);transform:rotate(45deg);vertical-align:top;width:7px}.tabulator-menu .tabulator-menu-separator{border-top:1px solid #ddd}.tabulator-edit-list{-webkit-overflow-scrolling:touch;font-size:14px;max-height:200px;overflow-y:auto}.tabulator-edit-list .tabulator-edit-list-item{color:#333;outline:none;padding:4px}.tabulator-edit-list .tabulator-edit-list-item.active{background:#1d68cd;color:#fff}.tabulator-edit-list .tabulator-edit-list-item.active.focused{outline:1px solid hsla(0,0%,100%,.5)}.tabulator-edit-list .tabulator-edit-list-item.focused{outline:1px solid #1d68cd}@media (hover:hover) and (pointer:fine){.tabulator-edit-list .tabulator-edit-list-item:hover{background:#1d68cd;color:#fff;cursor:pointer}}.tabulator-edit-list .tabulator-edit-list-placeholder{color:#333;padding:4px;text-align:center}.tabulator-edit-list .tabulator-edit-list-group{border-bottom:1px solid #ddd;color:#333;font-weight:700;padding:6px 4px 4px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-2,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-2{padding-left:12px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-3,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-3{padding-left:20px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-4,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-4{padding-left:28px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-5,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-5{padding-left:36px}.tabulator.tabulator-ltr{direction:ltr}.tabulator.tabulator-rtl{direction:rtl;text-align:initial}.tabulator.tabulator-rtl .tabulator-header .tabulator-col{border-left:1px solid #ddd;border-right:initial;text-align:initial}.tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{margin-left:-1px;margin-right:0}.tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding-left:25px;padding-right:0}.tabulator.tabulator-rtl .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{left:8px;right:auto}.tabulator.tabulator-rtl .tabulator-tableholder .tabulator-range-overlay .tabulator-range.tabulator-range-active:after{background-color:#2975dd;border-radius:999px;bottom:-3px;content:\"\";height:6px;left:-3px;position:absolute;right:auto;width:6px}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell{border-left:1px solid #ddd;border-right:initial}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom-left-radius:0;border-bottom-right-radius:1px;border-left:initial;border-right:2px solid #ddd;margin-left:5px;margin-right:0}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-control{margin-left:5px;margin-right:0}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-left:2px solid #ddd}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-right:2px solid #ddd}.tabulator.tabulator-rtl .tabulator-row .tabulator-col-resize-handle:last-of-type{margin-left:0;margin-right:-3px;width:3px}.tabulator.tabulator-rtl .tabulator-footer .tabulator-calcs-holder{text-align:initial}.tabulator-print-fullscreen{inset:0;position:absolute;z-index:10000}body.tabulator-print-fullscreen-hide>:not(.tabulator-print-fullscreen){display:none!important}.tabulator-print-table{border-collapse:collapse}.tabulator-print-table .tabulator-data-tree-branch{border-bottom:2px solid #ddd;border-bottom-left-radius:1px;border-left:2px solid #ddd;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-print-table .tabulator-print-table-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #ddd;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}@media (hover:hover) and (pointer:fine){.tabulator-print-table .tabulator-print-table-group:hover{background-color:#0000001a;cursor:pointer}}.tabulator-print-table .tabulator-print-table-group.tabulator-group-visible .tabulator-arrow{border-bottom:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #666;margin-right:10px}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-1 td{padding-left:30px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-2 td{padding-left:50px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-3 td{padding-left:70px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-4 td{padding-left:90px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-5 td{padding-left:110px!important}.tabulator-print-table .tabulator-print-table-group .tabulator-group-toggle{display:inline-block}.tabulator-print-table .tabulator-print-table-group .tabulator-arrow{border-bottom:6px solid transparent;border-left:6px solid #666;border-right:0;border-top:6px solid transparent;display:inline-block;height:0;margin-right:16px;vertical-align:middle;width:0}.tabulator-print-table .tabulator-print-table-group span{color:#d00;margin-left:10px}.tabulator-print-table .tabulator-data-tree-control{align-items:center;background:#0000001a;border:1px solid #333;border-radius:2px;display:inline-flex;height:11px;justify-content:center;margin-right:5px;overflow:hidden;vertical-align:middle;width:11px}@media (hover:hover) and (pointer:fine){.tabulator-print-table .tabulator-data-tree-control:hover{background:#0003;cursor:pointer}}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse{background:transparent;display:inline-block;height:7px;position:relative;width:1px}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after{background:#333;content:\"\";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand{background:#333;display:inline-block;height:7px;position:relative;width:1px}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{background:#333;content:\"\";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator{border:1px solid rgba(34,36,38,.15);border-radius:.28571rem;box-shadow:none;color:#000000de;margin:1em 0;width:100%}.tabulator .tabulator-header{border-bottom:1px solid rgba(34,36,38,.1);box-shadow:none;color:#000000de;font-style:none;font-weight:700;text-transform:none}.tabulator .tabulator-header,.tabulator .tabulator-header .tabulator-col{background-color:#f9fafb;border-right:none}.tabulator .tabulator-header .tabulator-col .tabulator-col-content{padding:.92857em .78571em}.tabulator .tabulator-tableholder .tabulator-table{background-color:transparent}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs{background:#f2f2f2!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top{border-bottom:2px solid #ddd}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom{border-top:2px solid #ddd}.tabulator .tabulator-footer{background:#f9fafb;border-top:1px solid rgba(34,36,38,.15);box-shadow:none;color:#000000de;font-style:normal;font-weight:400;padding:.78571em;text-align:right;text-transform:none}.tabulator .tabulator-footer .tabulator-calcs-holder{background:#fff!important;margin:-.78571em -.78571em .78571em}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row{background:#fff!important}.tabulator .tabulator-footer .tabulator-calcs-holder:only-child{border-bottom:none;margin-bottom:-.78571em}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs{margin-top:calc(-.78571em - 5px)}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab.tabulator-spreadsheet-tab-active{color:#d00}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.positive,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.positive{background:#fcfff5!important;box-shadow:inset 0 0 #a3c293;color:#21ba45!important}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.positive:hover,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.positive:hover{background:#f7ffe6!important;color:#13ae38!important}}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.negative,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.negative{background:#fff6f6!important;box-shadow:inset 0 0 #e0b4b4;color:#db2828!important}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.negative:hover,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.negative:hover{background:#ffe7e7!important;color:#d41616!important}}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.error,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.error{background:#fff6f6!important;box-shadow:inset 0 0 #e0b4b4;color:#db2828!important}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.error:hover,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.error:hover{background:#ffe7e7!important;color:#d12323!important}}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.warning,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.warning{background:#fffaf3!important;box-shadow:inset 0 0 #c9ba9b;color:#f2c037!important}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.warning:hover,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.warning:hover{background:#fff4e4!important;color:#f1bb29!important}}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.active,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.active{background:#e0e0e0!important;box-shadow:inset 0 0 #000000de;color:#000000de!important}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.active:hover,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.active:hover{background:#f7ffe6!important;color:#13ae38!important}}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.active,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.active{color:#0003;pointer-events:none}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.disabled:hover{color:#0003;pointer-events:none}}.tabulator.inverted{background:#333;border:none;color:#ffffffe6}.tabulator.inverted .tabulator-header{background-color:#00000026;color:#ffffffe6}.tabulator.inverted .tabulator-header,.tabulator.inverted .tabulator-header .tabulator-col{border-color:#ffffff1a!important}.tabulator.inverted .tabulator-tableholder .tabulator-table .tabulator-row{border:none;color:#ffffffe6}.tabulator.inverted .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{border-color:#ffffff1a!important}.tabulator.inverted .tabulator-footer{background:#fff}.tabulator.striped .tabulator-row:nth-child(2n){background-color:#f2f2f2}.tabulator.celled{border:1px solid rgba(34,36,38,.15)}.tabulator.celled .tabulator-header .tabulator-col,.tabulator.celled .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{border-right:1px solid rgba(34,36,38,.1)}.tabulator[class*=\"single line\"] .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{border-right:none}.tabulator.red{border-top:.2em solid #db2828}.tabulator.inverted.red{background-color:#db2828!important;color:#fff!important}.tabulator.orange{border-top:.2em solid #f2711c}.tabulator.inverted.orange{background-color:#f2711c!important;color:#fff!important}.tabulator.yellow{border-top:.2em solid #fbbd08}.tabulator.inverted.yellow{background-color:#fbbd08!important;color:#fff!important}.tabulator.olive{border-top:.2em solid #b5cc18}.tabulator.inverted.olive{background-color:#b5cc18!important;color:#fff!important}.tabulator.green{border-top:.2em solid #21ba45}.tabulator.inverted.green{background-color:#21ba45!important;color:#fff!important}.tabulator.teal{border-top:.2em solid #00b5ad}.tabulator.inverted.teal{background-color:#00b5ad!important;color:#fff!important}.tabulator.blue{border-top:.2em solid #2185d0}.tabulator.inverted.blue{background-color:#2185d0!important;color:#fff!important}.tabulator.violet{border-top:.2em solid #6435c9}.tabulator.inverted.violet{background-color:#6435c9!important;color:#fff!important}.tabulator.purple{border-top:.2em solid #a333c8}.tabulator.inverted.purple{background-color:#a333c8!important;color:#fff!important}.tabulator.pink{border-top:.2em solid #e03997}.tabulator.inverted.pink{background-color:#e03997!important;color:#fff!important}.tabulator.brown{border-top:.2em solid #a5673f}.tabulator.inverted.brown{background-color:#a5673f!important;color:#fff!important}.tabulator.grey{border-top:.2em solid #767676}.tabulator.inverted.grey{background-color:#767676!important;color:#fff!important}.tabulator.black{border-top:.2em solid #1b1c1d}.tabulator.inverted.black{background-color:#1b1c1d!important;color:#fff!important}.tabulator.padded .tabulator-header .tabulator-col .tabulator-col-content{padding:1em}.tabulator.padded .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow{top:20px}.tabulator.padded .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{padding:1em}.tabulator.padded.very .tabulator-header .tabulator-col .tabulator-col-content{padding:1.5em}.tabulator.padded.very .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow{top:26px}.tabulator.padded.very .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{padding:1.5em}.tabulator.compact .tabulator-header .tabulator-col .tabulator-col-content{padding:.5em .7em}.tabulator.compact .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow{top:12px}.tabulator.compact .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{padding:.5em .7em}.tabulator.compact.very .tabulator-header .tabulator-col .tabulator-col-content{padding:.4em .6em}.tabulator.compact.very .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow{top:10px}.tabulator.compact.very .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{padding:.4em .6em}.tabulator-row{border-bottom:1px solid rgba(34,36,38,.1)}.tabulator-row.tabulator-row-even{background-color:#fff}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selectable:hover{background:#e0e0e0!important;box-shadow:inset 0 0 #000000de;color:#000000de!important}}.tabulator-row.tabulator-selected{background-color:#9abcea!important}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selected:hover{background-color:#769bcc!important;cursor:pointer}}.tabulator-row.tabulator-moving{pointer-events:none!important}.tabulator-row .tabulator-cell{border-right:none;padding:.78571em;vertical-align:middle}.tabulator-row .tabulator-cell:last-of-type{border-right:none}.tabulator-row .tabulator-cell.tabulator-row-header{border-bottom:none}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle{color:#fff}.tabulator-row.tabulator-group{background:#fafafa}.tabulator-row.tabulator-group span{color:#666}.tabulator-menu{background:#fff}@media (hover:hover) and (pointer:fine){.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover{background:#f9fafb}}.tabulator-edit-select-list{background:#fff}.tabulator-edit-select-list .tabulator-edit-select-list-item.active{color:#fff}.tabulator-edit-select-list .tabulator-edit-select-list-item.active.focused{outline:1px solid hsla(0,0%,100%,.5)}@media (hover:hover) and (pointer:fine){.tabulator-edit-select-list .tabulator-edit-select-list-item:hover{color:#fff}}.tabulator-edit-select-list .tabulator-edit-select-list-notice{color:inherit}.tabulator-print-table .tabulator-print-table-group{background:#fafafa}.tabulator-print-table .tabulator-print-table-group span{color:#666}.acp-tabulator-container{width:100%}.acp-tabulator-container:not(.tabulator-bootstrap5):not(.tabulator-semanticui) .tabulator{display:block}.acp-tabulator-container.tabulator-bootstrap5 .tabulator{border-radius:.375rem}.acp-tabulator-container.tabulator-semanticui .tabulator{font-family:Lato,Helvetica Neue,Arial,Helvetica,sans-serif}.acp-tabulator-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-container .tabulator-row.tabulator-selected{background-color:#1976d21f}@media (max-width: 768px){.acp-tabulator-container .tabulator-header{font-size:.875rem}.acp-tabulator-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-container .tabulator-loader{background:#fffc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:#a8a8a8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
506
|
+
}
|
|
507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CustomTabulatorComponent, decorators: [{
|
|
508
|
+
type: Component,
|
|
509
|
+
args: [{ selector: 'acp-tabulator', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div [id]=\"containerId\" class=\"acp-tabulator-container\"></div>", styles: [".tabulator{background-color:#888;border:1px solid #999;font-size:14px;overflow:hidden;position:relative;text-align:left;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.tabulator .tabulator-header{background-color:#e6e6e6;border-bottom:1px solid #999;box-sizing:border-box;color:#555;font-weight:700;outline:none;overflow:hidden;position:relative;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap;width:100%}.tabulator .tabulator-header .tabulator-col{background:#e6e6e6;border-right:1px solid #aaa;box-sizing:border-box;display:inline-flex;flex-direction:column;justify-content:flex-start;overflow:hidden;position:relative;text-align:left;vertical-align:bottom}.tabulator .tabulator-header .tabulator-col.tabulator-moving{background:#cdcdcd;border:1px solid #999;pointer-events:none;position:absolute}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{background-color:#cdcdcd;cursor:pointer}}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left{border-right:2px solid #aaa}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right{border-left:2px solid #aaa}.tabulator .tabulator-header .tabulator-calcs-holder{background:#f3f3f3!important;border-bottom:1px solid #aaa;border-top:1px solid #aaa;box-sizing:border-box;display:inline-block}.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row{background:#f3f3f3!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top{border-bottom:2px solid #aaa}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom{border-top:2px solid #aaa}.tabulator .tabulator-footer{background-color:#e6e6e6;border-top:1px solid #999;color:#555;font-weight:700;user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab{border:1px solid #999;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top:none;display:inline-block;font-size:.9em;padding:5px}.tabulator .tabulator-footer .tabulator-calcs-holder{background:#f3f3f3!important;border-bottom:1px solid #aaa;border-top:1px solid #aaa;box-sizing:border-box;overflow:hidden;text-align:left;width:100%}.tabulator-row.tabulator-moving{border-bottom:1px solid #aaa;border-top:1px solid #aaa;pointer-events:none;position:absolute;z-index:15}.tabulator-row .tabulator-responsive-collapse{border-bottom:1px solid #aaa;border-top:1px solid #aaa;box-sizing:border-box;padding:5px}.tabulator-row .tabulator-cell{border-right:1px solid #aaa;box-sizing:border-box;display:inline-block;outline:none;overflow:hidden;padding:4px;position:relative;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.tabulator-row .tabulator-cell.tabulator-row-header{background:#e6e6e6;border-bottom:1px solid #aaa;border-right:1px solid #999}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-right:2px solid #aaa}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-left:2px solid #aaa}.tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom:2px solid #aaa;border-bottom-left-radius:1px;border-left:2px solid #aaa;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-row.tabulator-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #aaa;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}.tabulator-popup-container{-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #aaa;box-shadow:0 0 5px #0003;box-sizing:border-box;display:inline-block;font-size:14px;overflow-y:auto;position:absolute;z-index:10000}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu:after{border-color:#aaa;border-style:solid;border-width:1px 1px 0 0;content:\"\";display:inline-block;height:7px;position:absolute;right:10px;top:calc(5px + .4em);transform:rotate(45deg);vertical-align:top;width:7px}.tabulator-menu .tabulator-menu-separator{border-top:1px solid #aaa}.tabulator-edit-list .tabulator-edit-list-group{border-bottom:1px solid #aaa;color:#333;font-weight:700;padding:6px 4px 4px}.tabulator.tabulator-rtl .tabulator-header .tabulator-col{border-left:1px solid #aaa;border-right:initial;text-align:initial}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell{border-left:1px solid #aaa;border-right:initial}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom-left-radius:0;border-bottom-right-radius:1px;border-left:initial;border-right:2px solid #aaa;margin-left:5px;margin-right:0}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-left:2px solid #aaa}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-right:2px solid #aaa}.tabulator-print-table .tabulator-data-tree-branch{border-bottom:2px solid #aaa;border-bottom-left-radius:1px;border-left:2px solid #aaa;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-print-table .tabulator-print-table-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #aaa;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}.tabulator{border:1px solid #dee2e6;font-size:16px;overflow:hidden;position:relative;text-align:left;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.tabulator .tabulator-header{background-color:#fff;border-bottom:1px solid #dee2e6;box-sizing:border-box;color:#555;font-weight:700;outline:none;overflow:hidden;position:relative;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap;width:100%}.tabulator .tabulator-header .tabulator-col{background:#fff;border-right:1px solid #aaa;box-sizing:border-box;display:inline-flex;flex-direction:column;justify-content:flex-start;overflow:hidden;position:relative;text-align:left;vertical-align:bottom}.tabulator .tabulator-header .tabulator-col.tabulator-moving{background:#e6e6e6;border:1px solid #dee2e6;pointer-events:none;position:absolute}.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{border-top:1px solid #aaa;display:flex;margin-right:-1px;overflow:hidden;position:relative}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{background-color:#e6e6e6;cursor:pointer}}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left{border-right:2px solid #dee2e6}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right{border-left:2px solid #dee2e6}.tabulator .tabulator-header .tabulator-calcs-holder{background:#fff!important;border-bottom:1px solid #aaa;border-top:1px solid #dee2e6;box-sizing:border-box;display:inline-block}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs{background:#dadfe4!important;font-weight:700}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top{border-bottom:2px solid #dee2e6}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom{border-top:2px solid #dee2e6}.tabulator .tabulator-footer{background-color:#e6e6e6;border-top:1px solid #dee2e6;color:#555;font-weight:700;user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab{border:1px solid #dee2e6;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top:none;display:inline-block;font-size:.9em;padding:5px}.tabulator .tabulator-footer .tabulator-calcs-holder{background:#f3f3f3!important;border-bottom:1px solid #dee2e6;border-top:1px solid #dee2e6;box-sizing:border-box;overflow:hidden;text-align:left;width:100%}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row{background:#f3f3f3!important;display:inline-block}.tabulator .tabulator-footer .tabulator-calcs-holder:only-child{border-bottom:none;margin-bottom:-5px}.tabulator .tabulator-footer .tabulator-page-size{border:1px solid #dee2e6;border-radius:3px;display:inline-block;margin:0 5px;padding:2px 5px}.tabulator .tabulator-footer .tabulator-page{background:#fff3;border:1px solid #dee2e6;border-radius:3px;display:inline-block;margin:0 2px;padding:2px 5px}.tabulator-row{background-color:#fff;box-sizing:border-box;min-height:24px;position:relative}.tabulator-row.tabulator-row-even{background-color:#e9ecef}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selectable:hover{background-color:#ced4da;cursor:pointer}}.tabulator-row.tabulator-moving{border-bottom:1px solid #dee2e6;border-top:1px solid #dee2e6;pointer-events:none;position:absolute;z-index:15}.tabulator-row .tabulator-responsive-collapse{border-bottom:1px solid #dee2e6;border-top:1px solid #dee2e6;box-sizing:border-box;padding:5px}.tabulator-row .tabulator-responsive-collapse table{font-size:16px}.tabulator-row .tabulator-cell{border-right:1px solid #dee2e6;box-sizing:border-box;display:inline-block;outline:none;overflow:hidden;padding:4px;position:relative;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.tabulator-row .tabulator-cell.tabulator-row-header{border-bottom:1px solid #dee2e6}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-right:2px solid #dee2e6}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-left:2px solid #dee2e6}.tabulator-row .tabulator-cell.tabulator-validation-fail{border:1px solid #d00}.tabulator-row .tabulator-cell.tabulator-validation-fail input,.tabulator-row .tabulator-cell.tabulator-validation-fail select{background:transparent;border:1px;color:#d00}.tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom:2px solid #dee2e6;border-bottom-left-radius:1px;border-left:2px solid #dee2e6;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle{align-items:center;background:#666;border-radius:20px;color:#fff;display:inline-flex;font-size:1.1em;font-weight:700;height:15px;justify-content:center;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;width:15px}.tabulator-row.tabulator-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #dee2e6;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}.tabulator-popup-container{-webkit-overflow-scrolling:touch;border:1px solid #dee2e6;box-shadow:0 0 5px #0003;box-sizing:border-box;display:inline-block;font-size:16px;overflow-y:auto;position:absolute;z-index:10000}@media (hover:hover) and (pointer:fine){.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover{background:#e9ecef;cursor:pointer}}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu:after{border-color:#dee2e6;border-style:solid;border-width:1px 1px 0 0;content:\"\";display:inline-block;height:7px;position:absolute;right:10px;top:calc(5px + .4em);transform:rotate(45deg);vertical-align:top;width:7px}.tabulator-menu .tabulator-menu-separator{border-top:1px solid #dee2e6}.tabulator-edit-list{-webkit-overflow-scrolling:touch;font-size:16px;max-height:200px;overflow-y:auto}.tabulator-edit-list .tabulator-edit-list-item.active{background:#1d68cd}.tabulator-edit-list .tabulator-edit-list-group{border-bottom:1px solid #dee2e6;color:#333;font-weight:700;padding:6px 4px 4px}.tabulator.tabulator-rtl .tabulator-header .tabulator-col{border-left:1px solid #aaa;border-right:initial}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell{border-left:1px solid #dee2e6;border-right:initial}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom-left-radius:0;border-bottom-right-radius:1px;border-left:initial;border-right:2px solid #dee2e6;margin-left:5px;margin-right:0}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-left:2px solid #dee2e6}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-right:2px solid #dee2e6}.tabulator-print-table .tabulator-data-tree-branch{border-bottom:2px solid #dee2e6;border-bottom-left-radius:1px;border-left:2px solid #dee2e6;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-print-table .tabulator-print-table-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #dee2e6;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}.tabulator{background-color:#fff;border:none}.tabulator .tabulator-header{border-bottom:2px solid #dee2e6;border-top:1px solid #dee2e6;color:inherit}.tabulator .tabulator-header .tabulator-col{background-color:#fff;border-right:none}.tabulator .tabulator-header .tabulator-col .tabulator-col-content{padding:12px}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{right:0}.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{border-top:1px solid #dee2e6}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input{background-clip:padding-box;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;color:#495057;font-size:1rem;line-height:1.5;padding:.375rem .75rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input:focus{background-color:#fff;border:1px solid #1d68cd;color:#495057;outline:0}.tabulator .tabulator-header .tabulator-calcs-holder{border-bottom:1px solid #dee2e6;width:100%}.tabulator .tabulator-tableholder .tabulator-placeholder span{color:#000}.tabulator .tabulator-footer,.tabulator .tabulator-tableholder .tabulator-table{color:inherit}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab{background-color:#fff;font-weight:400}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab.tabulator-spreadsheet-tab-active{background-color:#0d6efd;color:#fff}.tabulator .tabulator-footer .tabulator-paginator{color:inherit}.tabulator .tabulator-footer .tabulator-pages{margin:0}.tabulator .tabulator-footer .tabulator-page{margin:5px 0 0;padding:8px 12px}.tabulator .tabulator-footer .tabulator-page[data-page=first]{border-bottom-left-radius:4px;border-top-left-radius:4px}.tabulator .tabulator-footer .tabulator-page[data-page=last]{border:1px solid #dee2e6;border-bottom-right-radius:4px;border-top-right-radius:4px}.tabulator .tabulator-footer .tabulator-page.active{background-color:#0d6efd;border-color:#0d6efd;color:#fff}.tabulator .tabulator-footer .tabulator-page:disabled{background:#fff;border-color:#dee2e6;color:#6c757d}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover{background:#e9ecef;border-color:#dee2e6;color:#0a58ca}}.tabulator.thead-dark .tabulator-header,.tabulator.thead-dark .tabulator-header .tabulator-col{background-color:#fff;border-color:#dee2e6;color:#212529}.tabulator.table{background-color:#fff}.tabulator.table:not(.thead-light) .tabulator-header,.tabulator.table:not(.thead-light) .tabulator-header .tabulator-col{background-color:#fff;border-color:#dee2e6;color:#212529}.tabulator.table .tabulator-tableholder{color:#212529}.tabulator.table .tabulator-row{background-color:#fff;border-color:#dee2e6;color:#212529}@media (hover:hover) and (pointer:fine){.tabulator.table .tabulator-row:hover{background-color:#dee2e6}.tabulator.table .tabulator-row:hover .tabulator-cell{background-color:#ced4da}}.tabulator.table .tabulator-row.tabulator-selected{background-color:#9abcea}.tabulator.table .tabulator-footer{border-color:#dee2e6!important}.tabulator.table .tabulator-footer .tabulator-calcs-holder{background:#fff!important;border-color:#dee2e6!important}.tabulator.table .tabulator-footer .tabulator-calcs-holder .tabulator-row{background-color:#fff!important;border-color:#dee2e6!important;color:#212529!important}.tabulator.table-striped:not(.table) .tabulator-row.tabulator-row-even{background-color:#e9ecef}.tabulator.table-striped:not(.table) .tabulator-row.tabulator-row-even.tabulator-selected{background-color:#9abcea}@media (hover:hover) and (pointer:fine){.tabulator.table-striped:not(.table) .tabulator-row.tabulator-row-even.tabulator-selectable:hover{background-color:#ced4da;cursor:pointer}.tabulator.table-striped:not(.table) .tabulator-row.tabulator-row-even.tabulator-selected:hover{background-color:#769bcc;cursor:pointer}}.tabulator.table-striped.table .tabulator-row:nth-child(2n) .tabulator-cell{background-color:transparent}.tabulator.table-bordered{border:1px solid #dee2e6}.tabulator.table-bordered .tabulator-header .tabulator-col,.tabulator.table-bordered .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{border-right:1px solid #dee2e6}.tabulator.table-borderless .tabulator-header,.tabulator.table-borderless .tabulator-row{border:none}.tabulator.table-sm .tabulator-header .tabulator-col .tabulator-col-content{padding:5px!important}.tabulator.table-sm .tabulator-tableholder .tabulator-table .tabulator-row{min-height:26px}.tabulator.table-sm .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{padding:5px!important}.tabulator.table-sm .tabulator-row{padding-bottom:0;padding-top:0}.tabulator.table-sm .tabulator-col-resize-handle{padding:0}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table-primary{background:#cfe2ff!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table-secondary{background:#e2e3e5!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table-success{background:#d1e7dd!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table-info{background:#cff4fc!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table-warning{background:#fff3cd!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table-danger{background:#f8d7da!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table-light{background:#f8f9fa!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table{background:#212529!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.table-active{background:#6c757d!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-primary{background:#cfe2ff!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-secondary{background:#e2e3e5!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-success{background:#d1e7dd!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-info{background:#cff4fc!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-warning{background:#fff3cd!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-danger{background:#f8d7da!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-light{background:#f8f9fa!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-dark{background:#212529!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.bg-active{background:#6c757d!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table-primary{background:#cfe2ff!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table-secondary{background:#e2e3e5!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table-success{background:#d1e7dd!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table-info{background:#cff4fc!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table-warning{background:#fff3cd!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table-danger{background:#f8d7da!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table-light{background:#f8f9fa!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table{background:#212529!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.table-active{background:#6c757d!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-primary{background:#cfe2ff!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-secondary{background:#e2e3e5!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-success{background:#d1e7dd!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-info{background:#cff4fc!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-warning{background:#fff3cd!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-danger{background:#f8d7da!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-light{background:#f8f9fa!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-dark{background:#212529!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.bg-active{background:#6c757d!important}.tabulator-row{border-bottom:1px solid #dee2e6;min-height:40px}.tabulator-row .tabulator-cell{border-right:none;padding:12px}.tabulator-row .tabulator-cell.tabulator-row-header{background:#fff;border-bottom:none;border-right:1px solid #dee2e6}.tabulator-row .tabulator-cell .tabulator-data-tree-control{border:1px solid #ccc}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after,.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand,.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{background:#ccc}.tabulator-edit-select-list .tabulator-edit-select-list-group,.tabulator-edit-select-list .tabulator-edit-select-list-notice{color:inherit}.tabulator.tabulator-rtl .tabulator-header .tabulator-col{border-left:initial;text-align:initial}.tabulator-print-table .tabulator-data-tree-control{color:inherit}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after,.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand,.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{background:#ccc}.tabulator-popup-container{background:#fff}.tabulator-edit-list .tabulator-edit-list-item.active{color:#fff}@media (hover:hover) and (pointer:fine){.tabulator-edit-list .tabulator-edit-list-item:hover{color:#fff}}.tabulator{background-color:#fff;font-size:14px;overflow:hidden;position:relative;text-align:left;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.tabulator[tabulator-layout=fitDataFill] .tabulator-tableholder .tabulator-table{min-width:100%}.tabulator[tabulator-layout=fitDataTable]{display:inline-block}.tabulator.tabulator-block-select,.tabulator.tabulator-ranges .tabulator-cell:not(.tabulator-editing){-webkit-user-select:none;user-select:none}.tabulator .tabulator-header{border-bottom:1px solid #999;box-sizing:border-box;outline:none;overflow:hidden;position:relative;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap;width:100%}.tabulator .tabulator-header.tabulator-header-hidden{display:none}.tabulator .tabulator-header .tabulator-header-contents{overflow:hidden;position:relative}.tabulator .tabulator-header .tabulator-header-contents .tabulator-headers{display:inline-block}.tabulator .tabulator-header .tabulator-col{background:#f9fafb;border-right:1px solid #ddd;box-sizing:border-box;display:inline-flex;flex-direction:column;justify-content:flex-start;overflow:hidden;position:relative;text-align:left;vertical-align:bottom}.tabulator .tabulator-header .tabulator-col.tabulator-moving{background:#dae1e7;border:1px solid #999;pointer-events:none;position:absolute}.tabulator .tabulator-header .tabulator-col.tabulator-range-highlight{background-color:#d6d6d6;color:#000}.tabulator .tabulator-header .tabulator-col.tabulator-range-selected{background-color:#3876ca;color:#fff}.tabulator .tabulator-header .tabulator-col .tabulator-col-content{box-sizing:border-box;padding:4px;position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button{padding:0 8px}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button:hover{cursor:pointer;opacity:.6}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title-holder{position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title.tabulator-col-title-wrap{text-overflow:clip;white-space:normal}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor{background:#fff;border:1px solid #999;box-sizing:border-box;padding:1px;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-header-popup-button+.tabulator-title-editor{width:calc(100% - 22px)}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{align-items:center;bottom:0;display:flex;position:absolute;right:4px;top:0}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #bbb;border-left:6px solid transparent;border-right:6px solid transparent;height:0;width:0}.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{border-top:1px solid #ddd;display:flex;margin-right:-1px;overflow:hidden;position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter{box-sizing:border-box;margin-top:2px;position:relative;text-align:center;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea{height:auto!important}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg{margin-top:3px}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input::-ms-clear{height:0;width:0}.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding-right:25px}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{background-color:#dae1e7;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter{color:#bbb}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{border-bottom:6px solid #555;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #bbb;border-top:none}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter{color:#666}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{border-bottom:6px solid #555;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #666;border-top:none}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter{color:#666}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{border-top:6px solid #555;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:none;border-top:6px solid #666;color:#666}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical .tabulator-col-content .tabulator-col-title{align-items:center;display:flex;justify-content:center;text-orientation:mixed;writing-mode:vertical-rl}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-col-vertical-flip .tabulator-col-title{transform:rotate(180deg)}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-title{padding-right:0;padding-top:20px}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable.tabulator-col-vertical-flip .tabulator-col-title{padding-bottom:20px;padding-right:0}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-sorter{justify-content:center;inset:4px 0 auto}.tabulator .tabulator-header .tabulator-frozen{left:0;position:sticky;z-index:11}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left{border-right:2px solid #ddd}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right{border-left:2px solid #ddd}.tabulator .tabulator-header .tabulator-calcs-holder{background:#fff!important;border-bottom:1px solid #ddd;border-top:1px solid #ddd;box-sizing:border-box;display:inline-block}.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row{background:#fff!important}.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle{display:none}.tabulator .tabulator-header .tabulator-frozen-rows-holder{display:inline-block}.tabulator .tabulator-header .tabulator-frozen-rows-holder:empty{display:none}.tabulator .tabulator-tableholder{-webkit-overflow-scrolling:touch;overflow:auto;position:relative;white-space:nowrap;width:100%}.tabulator .tabulator-tableholder:focus{outline:none}.tabulator .tabulator-tableholder .tabulator-placeholder{align-items:center;box-sizing:border-box;display:flex;justify-content:center;min-width:100%;width:100%}.tabulator .tabulator-tableholder .tabulator-placeholder[tabulator-render-mode=virtual]{min-height:100%}.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents{color:#ccc;display:inline-block;font-size:20px;font-weight:700;padding:10px;text-align:center;white-space:normal}.tabulator .tabulator-tableholder .tabulator-table{background-color:#fff;color:#333;display:inline-block;overflow:visible;position:relative;white-space:nowrap}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs{background:#e2e2e2!important;font-weight:700}.tabulator .tabulator-tableholder .tabulator-range-overlay{inset:0;pointer-events:none;position:absolute;z-index:10}.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range{border:1px solid #2975dd;box-sizing:border-box;position:absolute}.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range.tabulator-range-active:after{background-color:#2975dd;border-radius:999px;bottom:-3px;content:\"\";height:6px;position:absolute;right:-3px;width:6px}.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range-cell-active{border:2px solid #2975dd;box-sizing:border-box;position:absolute}.tabulator .tabulator-footer{background-color:#fff;border-top:1px solid #999;color:#555;font-weight:700;user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap}.tabulator .tabulator-footer .tabulator-footer-contents{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:5px 10px}.tabulator .tabulator-footer .tabulator-footer-contents:empty{display:none}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs{margin-top:-5px;overflow-x:auto}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab{border:1px solid rgba(34,36,38,.15);border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top:none;display:inline-block;font-size:.9em;padding:5px}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab:hover{cursor:pointer;opacity:.7}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab.tabulator-spreadsheet-tab-active{background:#fff}.tabulator .tabulator-footer .tabulator-calcs-holder{border-bottom:1px solid #ddd;border-top:1px solid #ddd;box-sizing:border-box;overflow:hidden;text-align:left;width:100%}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row{display:inline-block}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle{display:none}.tabulator .tabulator-footer .tabulator-calcs-holder:only-child{margin-bottom:-5px}.tabulator .tabulator-footer>*+.tabulator-page-counter{margin-left:10px}.tabulator .tabulator-footer .tabulator-page-counter{font-weight:400}.tabulator .tabulator-footer .tabulator-paginator{color:#555;flex:1;font-family:inherit;font-size:inherit;font-weight:inherit;text-align:right}.tabulator .tabulator-footer .tabulator-page-size{border:1px solid #aaa;border-radius:3px;display:inline-block;margin:0 5px;padding:2px 5px}.tabulator .tabulator-footer .tabulator-pages{margin:0 7px}.tabulator .tabulator-footer .tabulator-page{background:#fff3;border:1px solid #aaa;border-radius:3px;display:inline-block;margin:0 2px;padding:2px 5px}.tabulator .tabulator-footer .tabulator-page.active{color:#d00}.tabulator .tabulator-footer .tabulator-page:disabled{opacity:.5}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-footer .tabulator-page:not(disabled):hover{background:#0003;color:#fff;cursor:pointer}}.tabulator .tabulator-col-resize-handle{display:inline-block;margin-left:-3px;margin-right:-3px;position:relative;vertical-align:middle;width:6px;z-index:11}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-col-resize-handle:hover{cursor:ew-resize}}.tabulator .tabulator-col-resize-handle:last-of-type{margin-right:0;width:3px}.tabulator .tabulator-col-resize-guide{background-color:#999;height:100%;margin-left:-.5px;opacity:.5;position:absolute;top:0;width:4px}.tabulator .tabulator-row-resize-guide{background-color:#999;height:4px;left:0;margin-top:-.5px;opacity:.5;position:absolute;width:100%}.tabulator .tabulator-alert{align-items:center;background:#0006;display:flex;height:100%;left:0;position:absolute;text-align:center;top:0;width:100%;z-index:100}.tabulator .tabulator-alert .tabulator-alert-msg{background:#fff;border-radius:10px;display:inline-block;font-size:16px;font-weight:700;margin:0 auto;padding:10px 20px}.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg{border:4px solid #333;color:#000}.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error{border:4px solid #d00;color:#590000}.tabulator-row{background-color:#fff;box-sizing:border-box;min-height:22px;position:relative}.tabulator-row.tabulator-row-even{background-color:#efefef}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selectable:hover{background-color:#bbb;cursor:pointer}}.tabulator-row.tabulator-selected{background-color:#9abcea}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selected:hover{background-color:#769bcc;cursor:pointer}}.tabulator-row.tabulator-row-moving{background:#fff;border:1px solid #000}.tabulator-row.tabulator-moving{border-bottom:1px solid #ddd;border-top:1px solid #ddd;pointer-events:none;position:absolute;z-index:15}.tabulator-row.tabulator-range-highlight .tabulator-cell.tabulator-range-row-header{background-color:#d6d6d6;color:#000}.tabulator-row.tabulator-range-highlight.tabulator-range-selected .tabulator-cell.tabulator-range-row-header,.tabulator-row.tabulator-range-selected .tabulator-cell.tabulator-range-row-header{background-color:#3876ca;color:#fff}.tabulator-row .tabulator-row-resize-handle{bottom:0;height:5px;left:0;position:absolute;right:0}.tabulator-row .tabulator-row-resize-handle.prev{bottom:auto;top:0}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-row-resize-handle:hover{cursor:ns-resize}}.tabulator-row .tabulator-responsive-collapse{border-bottom:1px solid #ddd;border-top:1px solid #ddd;box-sizing:border-box;padding:5px}.tabulator-row .tabulator-responsive-collapse:empty{display:none}.tabulator-row .tabulator-responsive-collapse table{font-size:14px}.tabulator-row .tabulator-responsive-collapse table tr td{position:relative}.tabulator-row .tabulator-responsive-collapse table tr td:first-of-type{padding-right:10px}.tabulator-row .tabulator-cell{border-right:1px solid #ddd;box-sizing:border-box;display:inline-block;outline:none;overflow:hidden;padding:4px;position:relative;text-overflow:ellipsis;white-space:nowrap}.tabulator-row .tabulator-cell.tabulator-row-header{background:#f9fafb;border-bottom:1px solid #ddd;border-right:1px solid rgba(34,36,38,.15)}.tabulator-row .tabulator-cell.tabulator-frozen{background-color:inherit;display:inline-block;left:0;position:sticky;z-index:11}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-right:2px solid #ddd}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-left:2px solid #ddd}.tabulator-row .tabulator-cell.tabulator-editing{border:1px solid #1d68cd;outline:none;padding:0}.tabulator-row .tabulator-cell.tabulator-editing input,.tabulator-row .tabulator-cell.tabulator-editing select{background:transparent;border:1px;outline:none}.tabulator-row .tabulator-cell.tabulator-validation-fail{border:1px solid #db2828}.tabulator-row .tabulator-cell.tabulator-validation-fail input,.tabulator-row .tabulator-cell.tabulator-validation-fail select{background:transparent;border:1px;color:#db2828}.tabulator-row .tabulator-cell.tabulator-row-handle{align-items:center;display:inline-flex;justify-content:center;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none}.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box{width:80%}.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar{background:#666;height:3px;margin-top:2px;width:100%}.tabulator-row .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(.tabulator-range-row-header){background-color:#9abcea}.tabulator-row .tabulator-cell .tabulator-data-tree-branch-empty{display:inline-block;width:7px}.tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom:2px solid #ddd;border-bottom-left-radius:1px;border-left:2px solid #ddd;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-row .tabulator-cell .tabulator-data-tree-control{align-items:center;background:#0000001a;border:1px solid #333;border-radius:2px;display:inline-flex;height:11px;justify-content:center;margin-right:5px;overflow:hidden;vertical-align:middle;width:11px}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-cell .tabulator-data-tree-control:hover{background:#0003;cursor:pointer}}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse{background:transparent;display:inline-block;height:7px;position:relative;width:1px}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after{background:#333;content:\"\";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand{background:#333;display:inline-block;height:7px;position:relative;width:1px}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{background:#333;content:\"\";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle{align-items:center;background:#666;border-radius:20px;display:inline-flex;font-size:1.1em;font-weight:700;height:15px;justify-content:center;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;width:15px}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:hover{cursor:pointer;opacity:.7}}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-close{display:initial}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-open{display:none}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg{stroke:#fff}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-close{display:none}.tabulator-row .tabulator-cell .tabulator-traffic-light{border-radius:14px;display:inline-block;height:14px;width:14px}.tabulator-row.tabulator-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #ddd;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-group:hover{background-color:#0000001a;cursor:pointer}}.tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow{border-bottom:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #666;margin-right:10px}.tabulator-row.tabulator-group.tabulator-group-level-1{padding-left:30px}.tabulator-row.tabulator-group.tabulator-group-level-2{padding-left:50px}.tabulator-row.tabulator-group.tabulator-group-level-3{padding-left:70px}.tabulator-row.tabulator-group.tabulator-group-level-4{padding-left:90px}.tabulator-row.tabulator-group.tabulator-group-level-5{padding-left:110px}.tabulator-row.tabulator-group .tabulator-group-toggle{display:inline-block}.tabulator-row.tabulator-group .tabulator-arrow{border-bottom:6px solid transparent;border-left:6px solid #666;border-right:0;border-top:6px solid transparent;display:inline-block;height:0;margin-right:16px;vertical-align:middle;width:0}.tabulator-row.tabulator-group span{color:#d00;margin-left:10px}.tabulator-toggle{background:#dcdcdc;border:1px solid #ccc;box-sizing:border-box;display:flex;flex-direction:row}.tabulator-toggle.tabulator-toggle-on{background:#1c6cc2}.tabulator-toggle .tabulator-toggle-switch{background:#fff;border:1px solid #ccc;box-sizing:border-box}.tabulator-popup-container{-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #ddd;box-shadow:0 0 5px #0003;box-sizing:border-box;display:inline-block;font-size:14px;overflow-y:auto;position:absolute;z-index:10000}.tabulator-popup{border-radius:3px;padding:5px}.tabulator-tooltip{border-radius:2px;box-shadow:none;font-size:12px;max-width:Min(500px,100%);padding:3px 5px;pointer-events:none}.tabulator-menu .tabulator-menu-item{box-sizing:border-box;padding:5px 10px;position:relative;-webkit-user-select:none;user-select:none}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-disabled{opacity:.5}@media (hover:hover) and (pointer:fine){.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover{background:#efefef;cursor:pointer}}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu{padding-right:25px}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu:after{border-color:#ddd;border-style:solid;border-width:1px 1px 0 0;content:\"\";display:inline-block;height:7px;position:absolute;right:10px;top:calc(5px + .4em);transform:rotate(45deg);vertical-align:top;width:7px}.tabulator-menu .tabulator-menu-separator{border-top:1px solid #ddd}.tabulator-edit-list{-webkit-overflow-scrolling:touch;font-size:14px;max-height:200px;overflow-y:auto}.tabulator-edit-list .tabulator-edit-list-item{color:#333;outline:none;padding:4px}.tabulator-edit-list .tabulator-edit-list-item.active{background:#1d68cd;color:#fff}.tabulator-edit-list .tabulator-edit-list-item.active.focused{outline:1px solid hsla(0,0%,100%,.5)}.tabulator-edit-list .tabulator-edit-list-item.focused{outline:1px solid #1d68cd}@media (hover:hover) and (pointer:fine){.tabulator-edit-list .tabulator-edit-list-item:hover{background:#1d68cd;color:#fff;cursor:pointer}}.tabulator-edit-list .tabulator-edit-list-placeholder{color:#333;padding:4px;text-align:center}.tabulator-edit-list .tabulator-edit-list-group{border-bottom:1px solid #ddd;color:#333;font-weight:700;padding:6px 4px 4px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-2,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-2{padding-left:12px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-3,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-3{padding-left:20px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-4,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-4{padding-left:28px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-5,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-5{padding-left:36px}.tabulator.tabulator-ltr{direction:ltr}.tabulator.tabulator-rtl{direction:rtl;text-align:initial}.tabulator.tabulator-rtl .tabulator-header .tabulator-col{border-left:1px solid #ddd;border-right:initial;text-align:initial}.tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{margin-left:-1px;margin-right:0}.tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding-left:25px;padding-right:0}.tabulator.tabulator-rtl .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{left:8px;right:auto}.tabulator.tabulator-rtl .tabulator-tableholder .tabulator-range-overlay .tabulator-range.tabulator-range-active:after{background-color:#2975dd;border-radius:999px;bottom:-3px;content:\"\";height:6px;left:-3px;position:absolute;right:auto;width:6px}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell{border-left:1px solid #ddd;border-right:initial}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom-left-radius:0;border-bottom-right-radius:1px;border-left:initial;border-right:2px solid #ddd;margin-left:5px;margin-right:0}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-control{margin-left:5px;margin-right:0}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-left:2px solid #ddd}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-right:2px solid #ddd}.tabulator.tabulator-rtl .tabulator-row .tabulator-col-resize-handle:last-of-type{margin-left:0;margin-right:-3px;width:3px}.tabulator.tabulator-rtl .tabulator-footer .tabulator-calcs-holder{text-align:initial}.tabulator-print-fullscreen{inset:0;position:absolute;z-index:10000}body.tabulator-print-fullscreen-hide>:not(.tabulator-print-fullscreen){display:none!important}.tabulator-print-table{border-collapse:collapse}.tabulator-print-table .tabulator-data-tree-branch{border-bottom:2px solid #ddd;border-bottom-left-radius:1px;border-left:2px solid #ddd;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-print-table .tabulator-print-table-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #ddd;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}@media (hover:hover) and (pointer:fine){.tabulator-print-table .tabulator-print-table-group:hover{background-color:#0000001a;cursor:pointer}}.tabulator-print-table .tabulator-print-table-group.tabulator-group-visible .tabulator-arrow{border-bottom:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #666;margin-right:10px}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-1 td{padding-left:30px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-2 td{padding-left:50px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-3 td{padding-left:70px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-4 td{padding-left:90px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-5 td{padding-left:110px!important}.tabulator-print-table .tabulator-print-table-group .tabulator-group-toggle{display:inline-block}.tabulator-print-table .tabulator-print-table-group .tabulator-arrow{border-bottom:6px solid transparent;border-left:6px solid #666;border-right:0;border-top:6px solid transparent;display:inline-block;height:0;margin-right:16px;vertical-align:middle;width:0}.tabulator-print-table .tabulator-print-table-group span{color:#d00;margin-left:10px}.tabulator-print-table .tabulator-data-tree-control{align-items:center;background:#0000001a;border:1px solid #333;border-radius:2px;display:inline-flex;height:11px;justify-content:center;margin-right:5px;overflow:hidden;vertical-align:middle;width:11px}@media (hover:hover) and (pointer:fine){.tabulator-print-table .tabulator-data-tree-control:hover{background:#0003;cursor:pointer}}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse{background:transparent;display:inline-block;height:7px;position:relative;width:1px}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after{background:#333;content:\"\";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand{background:#333;display:inline-block;height:7px;position:relative;width:1px}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{background:#333;content:\"\";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator{border:1px solid rgba(34,36,38,.15);border-radius:.28571rem;box-shadow:none;color:#000000de;margin:1em 0;width:100%}.tabulator .tabulator-header{border-bottom:1px solid rgba(34,36,38,.1);box-shadow:none;color:#000000de;font-style:none;font-weight:700;text-transform:none}.tabulator .tabulator-header,.tabulator .tabulator-header .tabulator-col{background-color:#f9fafb;border-right:none}.tabulator .tabulator-header .tabulator-col .tabulator-col-content{padding:.92857em .78571em}.tabulator .tabulator-tableholder .tabulator-table{background-color:transparent}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs{background:#f2f2f2!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top{border-bottom:2px solid #ddd}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom{border-top:2px solid #ddd}.tabulator .tabulator-footer{background:#f9fafb;border-top:1px solid rgba(34,36,38,.15);box-shadow:none;color:#000000de;font-style:normal;font-weight:400;padding:.78571em;text-align:right;text-transform:none}.tabulator .tabulator-footer .tabulator-calcs-holder{background:#fff!important;margin:-.78571em -.78571em .78571em}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row{background:#fff!important}.tabulator .tabulator-footer .tabulator-calcs-holder:only-child{border-bottom:none;margin-bottom:-.78571em}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs{margin-top:calc(-.78571em - 5px)}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab.tabulator-spreadsheet-tab-active{color:#d00}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.positive,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.positive{background:#fcfff5!important;box-shadow:inset 0 0 #a3c293;color:#21ba45!important}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.positive:hover,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.positive:hover{background:#f7ffe6!important;color:#13ae38!important}}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.negative,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.negative{background:#fff6f6!important;box-shadow:inset 0 0 #e0b4b4;color:#db2828!important}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.negative:hover,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.negative:hover{background:#ffe7e7!important;color:#d41616!important}}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.error,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.error{background:#fff6f6!important;box-shadow:inset 0 0 #e0b4b4;color:#db2828!important}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.error:hover,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.error:hover{background:#ffe7e7!important;color:#d12323!important}}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.warning,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.warning{background:#fffaf3!important;box-shadow:inset 0 0 #c9ba9b;color:#f2c037!important}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.warning:hover,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.warning:hover{background:#fff4e4!important;color:#f1bb29!important}}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.active,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.active{background:#e0e0e0!important;box-shadow:inset 0 0 #000000de;color:#000000de!important}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.active:hover,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.active:hover{background:#f7ffe6!important;color:#13ae38!important}}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.active,.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.active{color:#0003;pointer-events:none}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.disabled:hover{color:#0003;pointer-events:none}}.tabulator.inverted{background:#333;border:none;color:#ffffffe6}.tabulator.inverted .tabulator-header{background-color:#00000026;color:#ffffffe6}.tabulator.inverted .tabulator-header,.tabulator.inverted .tabulator-header .tabulator-col{border-color:#ffffff1a!important}.tabulator.inverted .tabulator-tableholder .tabulator-table .tabulator-row{border:none;color:#ffffffe6}.tabulator.inverted .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{border-color:#ffffff1a!important}.tabulator.inverted .tabulator-footer{background:#fff}.tabulator.striped .tabulator-row:nth-child(2n){background-color:#f2f2f2}.tabulator.celled{border:1px solid rgba(34,36,38,.15)}.tabulator.celled .tabulator-header .tabulator-col,.tabulator.celled .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{border-right:1px solid rgba(34,36,38,.1)}.tabulator[class*=\"single line\"] .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{border-right:none}.tabulator.red{border-top:.2em solid #db2828}.tabulator.inverted.red{background-color:#db2828!important;color:#fff!important}.tabulator.orange{border-top:.2em solid #f2711c}.tabulator.inverted.orange{background-color:#f2711c!important;color:#fff!important}.tabulator.yellow{border-top:.2em solid #fbbd08}.tabulator.inverted.yellow{background-color:#fbbd08!important;color:#fff!important}.tabulator.olive{border-top:.2em solid #b5cc18}.tabulator.inverted.olive{background-color:#b5cc18!important;color:#fff!important}.tabulator.green{border-top:.2em solid #21ba45}.tabulator.inverted.green{background-color:#21ba45!important;color:#fff!important}.tabulator.teal{border-top:.2em solid #00b5ad}.tabulator.inverted.teal{background-color:#00b5ad!important;color:#fff!important}.tabulator.blue{border-top:.2em solid #2185d0}.tabulator.inverted.blue{background-color:#2185d0!important;color:#fff!important}.tabulator.violet{border-top:.2em solid #6435c9}.tabulator.inverted.violet{background-color:#6435c9!important;color:#fff!important}.tabulator.purple{border-top:.2em solid #a333c8}.tabulator.inverted.purple{background-color:#a333c8!important;color:#fff!important}.tabulator.pink{border-top:.2em solid #e03997}.tabulator.inverted.pink{background-color:#e03997!important;color:#fff!important}.tabulator.brown{border-top:.2em solid #a5673f}.tabulator.inverted.brown{background-color:#a5673f!important;color:#fff!important}.tabulator.grey{border-top:.2em solid #767676}.tabulator.inverted.grey{background-color:#767676!important;color:#fff!important}.tabulator.black{border-top:.2em solid #1b1c1d}.tabulator.inverted.black{background-color:#1b1c1d!important;color:#fff!important}.tabulator.padded .tabulator-header .tabulator-col .tabulator-col-content{padding:1em}.tabulator.padded .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow{top:20px}.tabulator.padded .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{padding:1em}.tabulator.padded.very .tabulator-header .tabulator-col .tabulator-col-content{padding:1.5em}.tabulator.padded.very .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow{top:26px}.tabulator.padded.very .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{padding:1.5em}.tabulator.compact .tabulator-header .tabulator-col .tabulator-col-content{padding:.5em .7em}.tabulator.compact .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow{top:12px}.tabulator.compact .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{padding:.5em .7em}.tabulator.compact.very .tabulator-header .tabulator-col .tabulator-col-content{padding:.4em .6em}.tabulator.compact.very .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow{top:10px}.tabulator.compact.very .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell{padding:.4em .6em}.tabulator-row{border-bottom:1px solid rgba(34,36,38,.1)}.tabulator-row.tabulator-row-even{background-color:#fff}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selectable:hover{background:#e0e0e0!important;box-shadow:inset 0 0 #000000de;color:#000000de!important}}.tabulator-row.tabulator-selected{background-color:#9abcea!important}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selected:hover{background-color:#769bcc!important;cursor:pointer}}.tabulator-row.tabulator-moving{pointer-events:none!important}.tabulator-row .tabulator-cell{border-right:none;padding:.78571em;vertical-align:middle}.tabulator-row .tabulator-cell:last-of-type{border-right:none}.tabulator-row .tabulator-cell.tabulator-row-header{border-bottom:none}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle{color:#fff}.tabulator-row.tabulator-group{background:#fafafa}.tabulator-row.tabulator-group span{color:#666}.tabulator-menu{background:#fff}@media (hover:hover) and (pointer:fine){.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover{background:#f9fafb}}.tabulator-edit-select-list{background:#fff}.tabulator-edit-select-list .tabulator-edit-select-list-item.active{color:#fff}.tabulator-edit-select-list .tabulator-edit-select-list-item.active.focused{outline:1px solid hsla(0,0%,100%,.5)}@media (hover:hover) and (pointer:fine){.tabulator-edit-select-list .tabulator-edit-select-list-item:hover{color:#fff}}.tabulator-edit-select-list .tabulator-edit-select-list-notice{color:inherit}.tabulator-print-table .tabulator-print-table-group{background:#fafafa}.tabulator-print-table .tabulator-print-table-group span{color:#666}.acp-tabulator-container{width:100%}.acp-tabulator-container:not(.tabulator-bootstrap5):not(.tabulator-semanticui) .tabulator{display:block}.acp-tabulator-container.tabulator-bootstrap5 .tabulator{border-radius:.375rem}.acp-tabulator-container.tabulator-semanticui .tabulator{font-family:Lato,Helvetica Neue,Arial,Helvetica,sans-serif}.acp-tabulator-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-container .tabulator-row.tabulator-selected{background-color:#1976d21f}@media (max-width: 768px){.acp-tabulator-container .tabulator-header{font-size:.875rem}.acp-tabulator-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-container .tabulator-loader{background:#fffc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:#a8a8a8}\n"] }]
|
|
510
|
+
}], propDecorators: { data: [{
|
|
511
|
+
type: Input
|
|
512
|
+
}], columns: [{
|
|
513
|
+
type: Input
|
|
514
|
+
}], height: [{
|
|
515
|
+
type: Input
|
|
516
|
+
}], layout: [{
|
|
517
|
+
type: Input
|
|
518
|
+
}], dataTree: [{
|
|
519
|
+
type: Input
|
|
520
|
+
}], dataTreeChildField: [{
|
|
521
|
+
type: Input
|
|
522
|
+
}], dataTreeStartExpanded: [{
|
|
523
|
+
type: Input
|
|
524
|
+
}], dataTreeSelectPropagate: [{
|
|
525
|
+
type: Input
|
|
526
|
+
}], selectable: [{
|
|
527
|
+
type: Input
|
|
528
|
+
}], reactiveData: [{
|
|
529
|
+
type: Input
|
|
530
|
+
}], placeholder: [{
|
|
531
|
+
type: Input
|
|
532
|
+
}], autoResize: [{
|
|
533
|
+
type: Input
|
|
534
|
+
}], theme: [{
|
|
535
|
+
type: Input
|
|
536
|
+
}], options: [{
|
|
537
|
+
type: Input
|
|
538
|
+
}], cellEdited: [{
|
|
539
|
+
type: Output
|
|
540
|
+
}], rowClick: [{
|
|
541
|
+
type: Output
|
|
542
|
+
}], rowSelected: [{
|
|
543
|
+
type: Output
|
|
544
|
+
}], tableReady: [{
|
|
545
|
+
type: Output
|
|
546
|
+
}] } });
|
|
547
|
+
|
|
548
|
+
class GetTotalPipe {
|
|
549
|
+
transform(colName, dataSource) {
|
|
550
|
+
return this.getTotal(colName, dataSource) || '';
|
|
551
|
+
}
|
|
552
|
+
/**
|
|
553
|
+
* Calculate and return the total (sum) of all the column --> the column must be number
|
|
554
|
+
*/
|
|
555
|
+
getTotal(colName, dataSource) {
|
|
556
|
+
const total = dataSource
|
|
557
|
+
.map(row => row[colName])
|
|
558
|
+
.reduce((acc, value) => (value ? acc + Number(value) : acc), 0);
|
|
559
|
+
return total?.toFixed(2);
|
|
560
|
+
}
|
|
561
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: GetTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
562
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: GetTotalPipe, isStandalone: true, name: "getTotal" });
|
|
563
|
+
}
|
|
564
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: GetTotalPipe, decorators: [{
|
|
565
|
+
type: Pipe,
|
|
566
|
+
args: [{
|
|
567
|
+
name: 'getTotal',
|
|
568
|
+
standalone: true,
|
|
569
|
+
}]
|
|
570
|
+
}] });
|
|
571
|
+
|
|
572
|
+
class StatusDisplayPipe {
|
|
573
|
+
sanitizer = inject(DomSanitizer);
|
|
574
|
+
transloco = inject(TranslocoService, { optional: true });
|
|
575
|
+
transform(isActive, options = {}) {
|
|
576
|
+
const { gender = 'neutral', showIcon = true, customActiveText, customInactiveText, textClass = '', iconClass = '', } = options;
|
|
577
|
+
const text = this.getStatusText(isActive, gender, customActiveText, customInactiveText);
|
|
578
|
+
const icon = isActive ? 'check_circle' : 'cancel';
|
|
579
|
+
const colorClass = isActive ? 'text-green-500' : 'text-red-500';
|
|
580
|
+
const combinedIconClass = `${colorClass} align-middle mr-1 ${iconClass}`.trim();
|
|
581
|
+
const combinedTextClass = `align-middle ${textClass}`.trim();
|
|
582
|
+
let html = '';
|
|
583
|
+
if (showIcon) {
|
|
584
|
+
html += `<mat-icon class="${combinedIconClass}" fontIcon="${icon}"></mat-icon>`;
|
|
585
|
+
}
|
|
586
|
+
html += `<span class="${combinedTextClass}">${text}</span>`;
|
|
587
|
+
return this.sanitizer.bypassSecurityTrustHtml(html);
|
|
588
|
+
}
|
|
589
|
+
getStatusText(isActive, gender, customActive, customInactive) {
|
|
590
|
+
if (customActive && isActive)
|
|
591
|
+
return customActive;
|
|
592
|
+
if (customInactive && !isActive)
|
|
593
|
+
return customInactive;
|
|
594
|
+
if (!this.transloco)
|
|
595
|
+
return this.getFallbackText(isActive, gender);
|
|
596
|
+
const translationKey = this.getTranslationKey(isActive, gender);
|
|
597
|
+
const translation = this.transloco.translate(translationKey);
|
|
598
|
+
return translation !== translationKey ? translation : this.getFallbackText(isActive, gender);
|
|
599
|
+
}
|
|
600
|
+
getTranslationKey(isActive, gender) {
|
|
601
|
+
const base = isActive ? 'status.active' : 'status.inactive';
|
|
602
|
+
return gender !== 'neutral'
|
|
603
|
+
? `${base}.${gender}`
|
|
604
|
+
: base;
|
|
605
|
+
}
|
|
606
|
+
getFallbackText(isActive, gender) {
|
|
607
|
+
const lang = this.transloco?.getActiveLang() || 'en';
|
|
608
|
+
const isSpanish = lang.startsWith('es');
|
|
609
|
+
if (!isSpanish) {
|
|
610
|
+
return isActive ? 'Active' : 'Inactive';
|
|
611
|
+
}
|
|
612
|
+
if (isActive) {
|
|
613
|
+
return gender === 'female' ? 'Activa' : 'Activo';
|
|
614
|
+
}
|
|
615
|
+
else {
|
|
616
|
+
return gender === 'female' ? 'Inactiva' : 'Inactivo';
|
|
617
|
+
}
|
|
618
|
+
}
|
|
619
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: StatusDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
620
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: StatusDisplayPipe, isStandalone: true, name: "statusDisplay" });
|
|
621
|
+
}
|
|
622
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: StatusDisplayPipe, decorators: [{
|
|
623
|
+
type: Pipe,
|
|
624
|
+
args: [{
|
|
625
|
+
name: 'statusDisplay',
|
|
626
|
+
}]
|
|
627
|
+
}] });
|
|
628
|
+
|
|
629
|
+
class MatDynamicTableComponent {
|
|
630
|
+
componentRefs = [];
|
|
631
|
+
embeddedViews = [];
|
|
632
|
+
cdr = inject(ChangeDetectorRef);
|
|
633
|
+
showExpand = false;
|
|
634
|
+
showFooter = false;
|
|
635
|
+
locale = 'en-US';
|
|
636
|
+
highlightRowIndex = 0;
|
|
637
|
+
visibleColumns = [];
|
|
638
|
+
columnDefinitions = [];
|
|
639
|
+
showSelectBox = false;
|
|
640
|
+
tableData = [];
|
|
641
|
+
rowTemplate = null;
|
|
642
|
+
expandedDetail = null;
|
|
643
|
+
enablePagination = false;
|
|
644
|
+
paginationConfig = null;
|
|
645
|
+
isLoadingData = false;
|
|
646
|
+
rowSelected = new EventEmitter();
|
|
647
|
+
copyRow = new EventEmitter();
|
|
648
|
+
showExpanded = new EventEmitter();
|
|
649
|
+
hideExpanded = new EventEmitter();
|
|
650
|
+
pageEvent = new EventEmitter();
|
|
651
|
+
isNormalRow = (_, row) => this.expandedElement !== row;
|
|
652
|
+
isExpandedRow = (_, row) => this.expandedElement === row;
|
|
653
|
+
dataSource = new MatTableDataSource([]);
|
|
654
|
+
selection = new SelectionModel(true, []);
|
|
655
|
+
expandedElement = null;
|
|
656
|
+
columnsToDisplayWithExpand = [];
|
|
657
|
+
headerRowDefs;
|
|
658
|
+
rowDefs;
|
|
659
|
+
footerRowDefs;
|
|
660
|
+
columnDefs;
|
|
661
|
+
noDataRow;
|
|
662
|
+
table;
|
|
663
|
+
rows;
|
|
664
|
+
ngOnInit() {
|
|
665
|
+
this.updateColumnsToDisplay();
|
|
666
|
+
this.initializeSelection();
|
|
667
|
+
}
|
|
668
|
+
ngOnChanges(changes) {
|
|
669
|
+
if (changes['tableData']) {
|
|
670
|
+
this.updateTableData();
|
|
671
|
+
}
|
|
672
|
+
if (changes['showExpand'] || changes['visibleColumns'] || changes['columnDefinitions']) {
|
|
673
|
+
this.updateColumnsToDisplay();
|
|
674
|
+
}
|
|
675
|
+
// Trigger change detection for OnPush strategy
|
|
676
|
+
this.cdr.markForCheck();
|
|
677
|
+
}
|
|
678
|
+
ngAfterContentInit() {
|
|
679
|
+
this.registerTableContent();
|
|
680
|
+
this.initializeTable();
|
|
681
|
+
this.cdr.markForCheck();
|
|
682
|
+
}
|
|
683
|
+
ngOnDestroy() {
|
|
684
|
+
this.cleanupDynamicComponents();
|
|
685
|
+
}
|
|
686
|
+
updateTableData() {
|
|
687
|
+
// Clear selection when new data arrives
|
|
688
|
+
this.selection.clear();
|
|
689
|
+
// Update data source
|
|
690
|
+
this.dataSource.data = this.tableData || [];
|
|
691
|
+
// Reset expanded element if it's no longer in the new data
|
|
692
|
+
if (this.expandedElement && !this.dataSource.data.includes(this.expandedElement)) {
|
|
693
|
+
this.expandedElement = null;
|
|
694
|
+
}
|
|
695
|
+
// Trigger change detection
|
|
696
|
+
this.cdr.markForCheck();
|
|
697
|
+
}
|
|
698
|
+
updateColumnsToDisplay() {
|
|
699
|
+
if (!this.visibleColumns.length && this.columnDefinitions) {
|
|
700
|
+
this.visibleColumns = this.columnDefinitions.map(col => col.key);
|
|
701
|
+
this.columnDefinitions.forEach((col, index) => (col.index = index));
|
|
702
|
+
}
|
|
703
|
+
const newColumns = [...this.visibleColumns];
|
|
704
|
+
if (this.showSelectBox && !newColumns.includes('select')) {
|
|
705
|
+
newColumns.unshift('select');
|
|
706
|
+
}
|
|
707
|
+
if (this.showExpand && this.expandedDetail) {
|
|
708
|
+
if (!this.columnDefinitions?.some(col => col.key === 'expand')) {
|
|
709
|
+
this.columnDefinitions = [
|
|
710
|
+
...(this.columnDefinitions || []),
|
|
711
|
+
{
|
|
712
|
+
key: 'expand',
|
|
713
|
+
label: '',
|
|
714
|
+
type: 'expand',
|
|
715
|
+
index: this.columnDefinitions?.length || 0,
|
|
716
|
+
},
|
|
717
|
+
];
|
|
718
|
+
}
|
|
719
|
+
if (!newColumns.includes('expand')) {
|
|
720
|
+
newColumns.push('expand');
|
|
721
|
+
}
|
|
722
|
+
}
|
|
723
|
+
this.columnsToDisplayWithExpand = newColumns;
|
|
724
|
+
}
|
|
725
|
+
initializeSelection() {
|
|
726
|
+
this.selection = new SelectionModel(true, []);
|
|
727
|
+
}
|
|
728
|
+
registerTableContent() {
|
|
729
|
+
this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef));
|
|
730
|
+
this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));
|
|
731
|
+
this.headerRowDefs.forEach(headerRowDef => this.table.addHeaderRowDef(headerRowDef));
|
|
732
|
+
if (this.showFooter) {
|
|
733
|
+
this.footerRowDefs.forEach(footerRowDef => this.table.addFooterRowDef(footerRowDef));
|
|
734
|
+
}
|
|
735
|
+
else {
|
|
736
|
+
this.footerRowDefs.forEach(footerRowDef => this.table.removeFooterRowDef(footerRowDef));
|
|
737
|
+
}
|
|
738
|
+
if (this.noDataRow) {
|
|
739
|
+
this.table.setNoDataRow(this.noDataRow);
|
|
740
|
+
}
|
|
741
|
+
}
|
|
742
|
+
initializeTable() {
|
|
743
|
+
this.dataSource = new MatTableDataSource(this.tableData || []);
|
|
744
|
+
}
|
|
745
|
+
cleanupDynamicComponents() {
|
|
746
|
+
this.componentRefs.forEach(ref => ref.destroy());
|
|
747
|
+
this.embeddedViews.forEach(view => view.destroy());
|
|
748
|
+
}
|
|
749
|
+
isAllSelected() {
|
|
750
|
+
const numSelected = this.selection.selected.length;
|
|
751
|
+
const numRows = this.dataSource.data.length;
|
|
752
|
+
return numSelected === numRows && numRows > 0;
|
|
753
|
+
}
|
|
754
|
+
masterToggle() {
|
|
755
|
+
this.isAllSelected()
|
|
756
|
+
? this.selection.clear()
|
|
757
|
+
: this.dataSource.data.forEach(row => this.selection.select(row));
|
|
758
|
+
this.rowSelected.emit(this.selection.selected);
|
|
759
|
+
this.cdr.markForCheck();
|
|
760
|
+
}
|
|
761
|
+
checkboxLabel(row) {
|
|
762
|
+
if (!row) {
|
|
763
|
+
return `${this.isAllSelected() ? 'deselect' : 'select'} all`;
|
|
764
|
+
}
|
|
765
|
+
return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row`;
|
|
766
|
+
}
|
|
767
|
+
selectRow(row) {
|
|
768
|
+
this.selection.toggle(row);
|
|
769
|
+
this.rowSelected.emit(this.selection.selected);
|
|
770
|
+
this.cdr.markForCheck();
|
|
771
|
+
}
|
|
772
|
+
onExpand(event, element) {
|
|
773
|
+
event.stopPropagation();
|
|
774
|
+
this.expandedElement = this.expandedElement === element ? null : element;
|
|
775
|
+
this.expandedElement ? this.showExpanded.emit(element) : this.hideExpanded.emit(element);
|
|
776
|
+
this.cdr.markForCheck();
|
|
777
|
+
}
|
|
778
|
+
getRowColor(element) {
|
|
779
|
+
return element.colorRow ? { 'background-color': element.colorRow } : {};
|
|
780
|
+
}
|
|
781
|
+
handlePageEvent(e) {
|
|
782
|
+
this.pageEvent.emit(e);
|
|
783
|
+
}
|
|
784
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MatDynamicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
785
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: MatDynamicTableComponent, isStandalone: true, selector: "acp-mat-dynamic-table", inputs: { showExpand: "showExpand", showFooter: "showFooter", locale: "locale", highlightRowIndex: "highlightRowIndex", visibleColumns: "visibleColumns", columnDefinitions: "columnDefinitions", showSelectBox: "showSelectBox", tableData: "tableData", rowTemplate: "rowTemplate", expandedDetail: "expandedDetail", enablePagination: "enablePagination", paginationConfig: "paginationConfig", isLoadingData: "isLoadingData" }, outputs: { rowSelected: "rowSelected", copyRow: "copyRow", showExpanded: "showExpanded", hideExpanded: "hideExpanded", pageEvent: "pageEvent" }, queries: [{ propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "footerRowDefs", predicate: MatFooterRowDef }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "rows", predicate: ViewContainerRef }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"mat-table-container\">\n <div class=\"table-container small-table\">\n <table #sort=\"matSort\" [dataSource]=\"dataSource.data\" mat-table matSort>\n @if (columnDefinitions) {\n <!-- Checkbox Column -->\n @if (showSelectBox) {\n <ng-container matColumnDef=\"select\">\n <th *matHeaderCellDef mat-header-cell>\n <mat-checkbox\n (change)=\"$event ? masterToggle() : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel()\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n ></mat-checkbox>\n </th>\n <td *matCellDef=\"let row\" mat-cell>\n <mat-checkbox\n (change)=\"$event ? selection.toggle(row) : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel(row)\"\n [checked]=\"selection.isSelected(row)\"\n ></mat-checkbox>\n </td>\n <td *matFooterCellDef mat-footer-cell></td>\n </ng-container>\n }\n\n <!-- Dynamic Columns -->\n @for (col of columnDefinitions; track col.key) {\n <ng-container [matColumnDef]=\"col.key\">\n <th *matHeaderCellDef mat-header-cell>\n {{ col.label }}\n </th>\n\n <td\n mat-cell\n *matCellDef=\"let element; let i = index\"\n [ngClass]=\"{ highlighted: highlightRowIndex === i }\"\n >\n @if (col.key === 'op') {\n <div class=\"d-flex flex-row gap-1\">\n <ng-container\n *ngTemplateOutlet=\"rowTemplate; context: { $implicit: element, index: i }\"\n ></ng-container>\n </div>\n } @else {\n @switch (col.type) {\n @case ('image') {\n <img\n [src]=\"element[col.key]\"\n class=\"img-fluid img-thumbnail my-1\"\n width=\"50\"\n alt=\"\"\n />\n }\n @case ('number') {\n <div>{{ element[col.key] | number: '1.2' : locale }}</div>\n }\n @case ('date') {\n <div>{{ element[col.key] | date: 'dd.MM.yyyy' }}</div>\n }\n @case ('expand') {\n <button\n mat-icon-button\n aria-label=\"expand row\"\n (click)=\"onExpand($event, element)\"\n >\n @if (expandedElement === element) {\n <mat-icon>keyboard_arrow_up</mat-icon>\n } @else {\n <mat-icon>keyboard_arrow_down</mat-icon>\n }\n </button>\n }\n @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n col.templateOutlet;\n context: { $implicit: element, index: i }\n \"\n ></ng-container>\n }\n @case ('custom') {\n <ng-container #dynamicContent></ng-container>\n }\n @default {\n <div>{{ element[col.key] }}</div>\n }\n }\n }\n </td>\n\n <td *matFooterCellDef mat-footer-cell>\n @if (col.index === 0) {\n <div>Total</div>\n }\n @if (col.hasFooter) {\n <div>{{ col.key | getTotal: dataSource.data }}</div>\n }\n </td>\n </ng-container>\n }\n\n <!-- Expanded Detail Row -->\n @if (showExpand && expandedDetail) {\n <ng-container matColumnDef=\"expandedDetail\">\n <td\n mat-cell\n *matCellDef=\"let element; let i = index\"\n [attr.colspan]=\"columnsToDisplayWithExpand.length\"\n >\n <div\n class=\"m-0 p-0\"\n [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\"\n >\n <ng-container\n *ngTemplateOutlet=\"expandedDetail; context: { $implicit: element, index: i }\"\n ></ng-container>\n </div>\n </td>\n </ng-container>\n }\n\n <!-- Header -->\n <tr\n mat-header-row\n *matHeaderRowDef=\"columnsToDisplayWithExpand; sticky: true\"\n class=\"small-header\"\n ></tr>\n\n <!-- Normal Rows -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnsToDisplayWithExpand; when: isNormalRow\"\n [class.example-expanded-row]=\"expandedElement === row\"\n (click)=\"selectRow(row)\"\n [style]=\"getRowColor(row)\"\n ></tr>\n\n <!-- Expanded Row -->\n @if (showExpand && expandedDetail) {\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n class=\"example-detail-row\"\n ></tr>\n }\n\n <!-- No Data Row -->\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell text-center\" [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n No records found\n </td>\n </tr>\n\n <!-- Footer -->\n @if (showFooter && dataSource.data.length > 0) {\n <tr mat-footer-row *matFooterRowDef=\"columnsToDisplayWithExpand\"></tr>\n }\n }\n </table>\n </div>\n\n @if (enablePagination && paginationConfig) {\n <mat-paginator\n #paginator\n [disabled]=\"isLoadingData\"\n (page)=\"handlePageEvent($event)\"\n [length]=\"paginationConfig.totalRecords\"\n [pageSize]=\"paginationConfig.pageSize\"\n [pageSizeOptions]=\"paginationConfig.pageSizeOptions || []\"\n [showFirstLastButtons]=\"true\"\n [pageIndex]=\"paginationConfig.pageIndex\"\n aria-label=\"Select page\"\n ></mat-paginator>\n }\n</div>\n", styles: [".table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}table{width:100%}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$2.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: GetTotalPipe, name: "getTotal" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }], animations: [
|
|
786
|
+
trigger('detailExpand', [
|
|
787
|
+
state('collapsed,void', style({ height: '0px', minHeight: '0' })),
|
|
788
|
+
state('expanded', style({ height: '*' })),
|
|
789
|
+
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
790
|
+
]),
|
|
791
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
792
|
+
}
|
|
793
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MatDynamicTableComponent, decorators: [{
|
|
794
|
+
type: Component,
|
|
795
|
+
args: [{ selector: 'acp-mat-dynamic-table', standalone: true, imports: [
|
|
796
|
+
MatTableModule,
|
|
797
|
+
MatCheckboxModule,
|
|
798
|
+
MatSortModule,
|
|
799
|
+
MatIconModule,
|
|
800
|
+
MatButtonModule,
|
|
801
|
+
MatPaginatorModule,
|
|
802
|
+
NgClass,
|
|
803
|
+
GetTotalPipe,
|
|
804
|
+
DatePipe,
|
|
805
|
+
DecimalPipe,
|
|
806
|
+
NgTemplateOutlet,
|
|
807
|
+
], animations: [
|
|
808
|
+
trigger('detailExpand', [
|
|
809
|
+
state('collapsed,void', style({ height: '0px', minHeight: '0' })),
|
|
810
|
+
state('expanded', style({ height: '*' })),
|
|
811
|
+
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
812
|
+
]),
|
|
813
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mat-table-container\">\n <div class=\"table-container small-table\">\n <table #sort=\"matSort\" [dataSource]=\"dataSource.data\" mat-table matSort>\n @if (columnDefinitions) {\n <!-- Checkbox Column -->\n @if (showSelectBox) {\n <ng-container matColumnDef=\"select\">\n <th *matHeaderCellDef mat-header-cell>\n <mat-checkbox\n (change)=\"$event ? masterToggle() : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel()\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n ></mat-checkbox>\n </th>\n <td *matCellDef=\"let row\" mat-cell>\n <mat-checkbox\n (change)=\"$event ? selection.toggle(row) : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel(row)\"\n [checked]=\"selection.isSelected(row)\"\n ></mat-checkbox>\n </td>\n <td *matFooterCellDef mat-footer-cell></td>\n </ng-container>\n }\n\n <!-- Dynamic Columns -->\n @for (col of columnDefinitions; track col.key) {\n <ng-container [matColumnDef]=\"col.key\">\n <th *matHeaderCellDef mat-header-cell>\n {{ col.label }}\n </th>\n\n <td\n mat-cell\n *matCellDef=\"let element; let i = index\"\n [ngClass]=\"{ highlighted: highlightRowIndex === i }\"\n >\n @if (col.key === 'op') {\n <div class=\"d-flex flex-row gap-1\">\n <ng-container\n *ngTemplateOutlet=\"rowTemplate; context: { $implicit: element, index: i }\"\n ></ng-container>\n </div>\n } @else {\n @switch (col.type) {\n @case ('image') {\n <img\n [src]=\"element[col.key]\"\n class=\"img-fluid img-thumbnail my-1\"\n width=\"50\"\n alt=\"\"\n />\n }\n @case ('number') {\n <div>{{ element[col.key] | number: '1.2' : locale }}</div>\n }\n @case ('date') {\n <div>{{ element[col.key] | date: 'dd.MM.yyyy' }}</div>\n }\n @case ('expand') {\n <button\n mat-icon-button\n aria-label=\"expand row\"\n (click)=\"onExpand($event, element)\"\n >\n @if (expandedElement === element) {\n <mat-icon>keyboard_arrow_up</mat-icon>\n } @else {\n <mat-icon>keyboard_arrow_down</mat-icon>\n }\n </button>\n }\n @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n col.templateOutlet;\n context: { $implicit: element, index: i }\n \"\n ></ng-container>\n }\n @case ('custom') {\n <ng-container #dynamicContent></ng-container>\n }\n @default {\n <div>{{ element[col.key] }}</div>\n }\n }\n }\n </td>\n\n <td *matFooterCellDef mat-footer-cell>\n @if (col.index === 0) {\n <div>Total</div>\n }\n @if (col.hasFooter) {\n <div>{{ col.key | getTotal: dataSource.data }}</div>\n }\n </td>\n </ng-container>\n }\n\n <!-- Expanded Detail Row -->\n @if (showExpand && expandedDetail) {\n <ng-container matColumnDef=\"expandedDetail\">\n <td\n mat-cell\n *matCellDef=\"let element; let i = index\"\n [attr.colspan]=\"columnsToDisplayWithExpand.length\"\n >\n <div\n class=\"m-0 p-0\"\n [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\"\n >\n <ng-container\n *ngTemplateOutlet=\"expandedDetail; context: { $implicit: element, index: i }\"\n ></ng-container>\n </div>\n </td>\n </ng-container>\n }\n\n <!-- Header -->\n <tr\n mat-header-row\n *matHeaderRowDef=\"columnsToDisplayWithExpand; sticky: true\"\n class=\"small-header\"\n ></tr>\n\n <!-- Normal Rows -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnsToDisplayWithExpand; when: isNormalRow\"\n [class.example-expanded-row]=\"expandedElement === row\"\n (click)=\"selectRow(row)\"\n [style]=\"getRowColor(row)\"\n ></tr>\n\n <!-- Expanded Row -->\n @if (showExpand && expandedDetail) {\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n class=\"example-detail-row\"\n ></tr>\n }\n\n <!-- No Data Row -->\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell text-center\" [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n No records found\n </td>\n </tr>\n\n <!-- Footer -->\n @if (showFooter && dataSource.data.length > 0) {\n <tr mat-footer-row *matFooterRowDef=\"columnsToDisplayWithExpand\"></tr>\n }\n }\n </table>\n </div>\n\n @if (enablePagination && paginationConfig) {\n <mat-paginator\n #paginator\n [disabled]=\"isLoadingData\"\n (page)=\"handlePageEvent($event)\"\n [length]=\"paginationConfig.totalRecords\"\n [pageSize]=\"paginationConfig.pageSize\"\n [pageSizeOptions]=\"paginationConfig.pageSizeOptions || []\"\n [showFirstLastButtons]=\"true\"\n [pageIndex]=\"paginationConfig.pageIndex\"\n aria-label=\"Select page\"\n ></mat-paginator>\n }\n</div>\n", styles: [".table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}table{width:100%}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}\n"] }]
|
|
814
|
+
}], propDecorators: { showExpand: [{
|
|
815
|
+
type: Input
|
|
816
|
+
}], showFooter: [{
|
|
817
|
+
type: Input
|
|
818
|
+
}], locale: [{
|
|
819
|
+
type: Input
|
|
820
|
+
}], highlightRowIndex: [{
|
|
821
|
+
type: Input
|
|
822
|
+
}], visibleColumns: [{
|
|
823
|
+
type: Input
|
|
824
|
+
}], columnDefinitions: [{
|
|
825
|
+
type: Input
|
|
826
|
+
}], showSelectBox: [{
|
|
827
|
+
type: Input
|
|
828
|
+
}], tableData: [{
|
|
829
|
+
type: Input
|
|
830
|
+
}], rowTemplate: [{
|
|
831
|
+
type: Input
|
|
832
|
+
}], expandedDetail: [{
|
|
833
|
+
type: Input
|
|
834
|
+
}], enablePagination: [{
|
|
835
|
+
type: Input
|
|
836
|
+
}], paginationConfig: [{
|
|
837
|
+
type: Input
|
|
838
|
+
}], isLoadingData: [{
|
|
839
|
+
type: Input
|
|
840
|
+
}], rowSelected: [{
|
|
841
|
+
type: Output
|
|
842
|
+
}], copyRow: [{
|
|
843
|
+
type: Output
|
|
844
|
+
}], showExpanded: [{
|
|
845
|
+
type: Output
|
|
846
|
+
}], hideExpanded: [{
|
|
847
|
+
type: Output
|
|
848
|
+
}], pageEvent: [{
|
|
849
|
+
type: Output
|
|
850
|
+
}], headerRowDefs: [{
|
|
851
|
+
type: ContentChildren,
|
|
852
|
+
args: [MatHeaderRowDef]
|
|
853
|
+
}], rowDefs: [{
|
|
854
|
+
type: ContentChildren,
|
|
855
|
+
args: [MatRowDef]
|
|
856
|
+
}], footerRowDefs: [{
|
|
857
|
+
type: ContentChildren,
|
|
858
|
+
args: [MatFooterRowDef]
|
|
859
|
+
}], columnDefs: [{
|
|
860
|
+
type: ContentChildren,
|
|
861
|
+
args: [MatColumnDef]
|
|
862
|
+
}], noDataRow: [{
|
|
863
|
+
type: ContentChild,
|
|
864
|
+
args: [MatNoDataRow]
|
|
865
|
+
}], table: [{
|
|
866
|
+
type: ViewChild,
|
|
867
|
+
args: [MatTable, { static: true }]
|
|
868
|
+
}], rows: [{
|
|
869
|
+
type: ContentChildren,
|
|
870
|
+
args: [ViewContainerRef]
|
|
871
|
+
}] } });
|
|
872
|
+
|
|
873
|
+
class AdvancedDialogService {
|
|
874
|
+
dialog = inject(MatDialog);
|
|
875
|
+
overlay = inject(Overlay);
|
|
876
|
+
breakpointObserver = inject(BreakpointObserver);
|
|
877
|
+
// An observable that emits true if the viewport matches mobile dimensions.
|
|
878
|
+
isMobile$ = this.breakpointObserver
|
|
879
|
+
.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape])
|
|
880
|
+
.pipe(map(result => result.matches));
|
|
881
|
+
/**
|
|
882
|
+
* Main method to open any component in a dialog.
|
|
883
|
+
* This provides maximum flexibility.
|
|
884
|
+
* @param component The component to render.
|
|
885
|
+
* @param config The detailed configuration for the dialog.
|
|
886
|
+
* @returns A MatDialogRef instance.
|
|
887
|
+
*/
|
|
888
|
+
async open(component, config = {}) {
|
|
889
|
+
const dialogConfig = await this.buildDialogConfig(config);
|
|
890
|
+
return this.dialog.open(component, dialogConfig);
|
|
891
|
+
}
|
|
892
|
+
/**
|
|
893
|
+
* A powerful helper to open a component inside our standard, branded "wrapper".
|
|
894
|
+
* This provides maximum consistency.
|
|
895
|
+
* @param wrapperConfig Configuration for the title, icon, and the content component.
|
|
896
|
+
* @param matDialogConfig Standard MatDialog configuration (size, position, etc.).
|
|
897
|
+
* @returns A MatDialogRef instance pointing to the wrapper.
|
|
898
|
+
*/
|
|
899
|
+
async openInWrapper(wrapperConfig, matDialogConfig = {}) {
|
|
900
|
+
// Package the wrapper config into the `data` property for the DialogWrapperComponent to consume.
|
|
901
|
+
const configWithWrapperData = {
|
|
902
|
+
...matDialogConfig,
|
|
903
|
+
data: wrapperConfig,
|
|
904
|
+
};
|
|
905
|
+
const dialogConfig = await this.buildDialogConfig(configWithWrapperData);
|
|
906
|
+
return this.dialog.open(DialogWrapperComponent, dialogConfig);
|
|
907
|
+
}
|
|
908
|
+
/**
|
|
909
|
+
* Helper to open a dialog and only get an observable of the result.
|
|
910
|
+
*/
|
|
911
|
+
async openAndGetResult(component, config = {}) {
|
|
912
|
+
const dialogRef = await this.open(component, config);
|
|
913
|
+
return firstValueFrom(dialogRef.afterClosed());
|
|
914
|
+
}
|
|
915
|
+
/**
|
|
916
|
+
* Closes all currently open dialogs.
|
|
917
|
+
*/
|
|
918
|
+
closeAll() {
|
|
919
|
+
this.dialog.closeAll();
|
|
920
|
+
}
|
|
921
|
+
// --- Private Configuration Builder ---
|
|
922
|
+
async buildDialogConfig(config) {
|
|
923
|
+
const dialogConfig = new MatDialogConfig();
|
|
924
|
+
// Asynchronously check for mobile state to prevent memory leaks from dangling subscriptions.
|
|
925
|
+
const isMobile = await firstValueFrom(this.isMobile$);
|
|
926
|
+
// Apply fullscreen if 'full' size is set OR if mobile fullscreen is enabled on a mobile device.
|
|
927
|
+
if (config.size === 'full' || (config.isMobileFullScreen && isMobile)) {
|
|
928
|
+
this.applyFullScreenConfig(dialogConfig);
|
|
929
|
+
}
|
|
930
|
+
else {
|
|
931
|
+
this.applyStandardConfig(dialogConfig, config);
|
|
932
|
+
}
|
|
933
|
+
// Apply all other common configurations.
|
|
934
|
+
this.applyCommonConfig(dialogConfig, config);
|
|
935
|
+
return dialogConfig;
|
|
936
|
+
}
|
|
937
|
+
applyFullScreenConfig(dialogConfig) {
|
|
938
|
+
dialogConfig.width = '100vw';
|
|
939
|
+
dialogConfig.height = '100vh';
|
|
940
|
+
dialogConfig.maxWidth = '100vw';
|
|
941
|
+
dialogConfig.panelClass = ['full-screen-dialog'];
|
|
942
|
+
}
|
|
943
|
+
applyStandardConfig(dialogConfig, config) {
|
|
944
|
+
dialogConfig.width = config.width ?? this.getDialogWidth(config.size);
|
|
945
|
+
dialogConfig.height = config.height;
|
|
946
|
+
dialogConfig.minWidth = config.minWidth;
|
|
947
|
+
dialogConfig.maxWidth = config.maxWidth ?? '95vw';
|
|
948
|
+
dialogConfig.maxHeight = config.maxHeight ?? 'auto';
|
|
949
|
+
dialogConfig.position = config.position;
|
|
950
|
+
}
|
|
951
|
+
applyCommonConfig(dialogConfig, config) {
|
|
952
|
+
dialogConfig.data = config.data;
|
|
953
|
+
dialogConfig.hasBackdrop = config.hasBackdrop ?? true;
|
|
954
|
+
dialogConfig.backdropClass = config.backdropClass;
|
|
955
|
+
const panelClasses = Array.isArray(config.panelClass)
|
|
956
|
+
? [...config.panelClass]
|
|
957
|
+
: config.panelClass
|
|
958
|
+
? [config.panelClass]
|
|
959
|
+
: [];
|
|
960
|
+
if (config.size) {
|
|
961
|
+
panelClasses.push(`dialog-${config.size}`);
|
|
962
|
+
}
|
|
963
|
+
dialogConfig.panelClass = panelClasses;
|
|
964
|
+
dialogConfig.disableClose = !(config.backdropClickClosable ?? true);
|
|
965
|
+
// Note: escapeKeyClosable is handled by MatDialog separately and doesn't affect disableClose directly.
|
|
966
|
+
dialogConfig.autoFocus = config.autoFocus ?? 'first-tabbable';
|
|
967
|
+
dialogConfig.scrollStrategy = config.scrollStrategy ?? this.overlay.scrollStrategies.block();
|
|
968
|
+
dialogConfig.enterAnimationDuration = config.enterAnimationDuration ?? '300ms';
|
|
969
|
+
dialogConfig.exitAnimationDuration = config.exitAnimationDuration ?? '200ms';
|
|
970
|
+
dialogConfig.ariaLabel = config.ariaLabel;
|
|
971
|
+
dialogConfig.ariaLabelledBy = config.ariaLabelledBy;
|
|
972
|
+
dialogConfig.ariaDescribedBy = config.ariaDescribedBy;
|
|
973
|
+
dialogConfig.role = config.role;
|
|
974
|
+
}
|
|
975
|
+
getDialogWidth(size = 'md') {
|
|
976
|
+
const sizeMap = {
|
|
977
|
+
xs: '320px',
|
|
978
|
+
sm: '450px',
|
|
979
|
+
md: '600px',
|
|
980
|
+
lg: '800px',
|
|
981
|
+
xl: '1000px',
|
|
982
|
+
xxl: '1280px',
|
|
983
|
+
full: '100vw',
|
|
984
|
+
};
|
|
985
|
+
return sizeMap[size];
|
|
986
|
+
}
|
|
987
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AdvancedDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
988
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AdvancedDialogService, providedIn: 'root' });
|
|
989
|
+
}
|
|
990
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AdvancedDialogService, decorators: [{
|
|
991
|
+
type: Injectable,
|
|
992
|
+
args: [{
|
|
993
|
+
providedIn: 'root',
|
|
994
|
+
}]
|
|
995
|
+
}] });
|
|
996
|
+
|
|
997
|
+
class OverlayService {
|
|
998
|
+
overlay = inject(Overlay);
|
|
999
|
+
overlayRef;
|
|
1000
|
+
constructor() { }
|
|
1001
|
+
showSpinner() {
|
|
1002
|
+
if (!this.overlayRef) {
|
|
1003
|
+
this.overlayRef = this.overlay.create({
|
|
1004
|
+
hasBackdrop: true,
|
|
1005
|
+
positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
|
|
1006
|
+
});
|
|
1007
|
+
const spinnerPortal = new ComponentPortal(SpinnerComponent);
|
|
1008
|
+
this.overlayRef.attach(spinnerPortal);
|
|
1009
|
+
}
|
|
1010
|
+
}
|
|
1011
|
+
hideSpinner() {
|
|
1012
|
+
if (this.overlayRef) {
|
|
1013
|
+
this.overlayRef.detach();
|
|
1014
|
+
this.overlayRef = null;
|
|
1015
|
+
}
|
|
1016
|
+
}
|
|
1017
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1018
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OverlayService, providedIn: 'root' });
|
|
1019
|
+
}
|
|
1020
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: OverlayService, decorators: [{
|
|
1021
|
+
type: Injectable,
|
|
1022
|
+
args: [{
|
|
1023
|
+
providedIn: 'root',
|
|
1024
|
+
}]
|
|
1025
|
+
}], ctorParameters: () => [] });
|
|
1026
|
+
|
|
1027
|
+
class ThemeService {
|
|
1028
|
+
_darkMode = new BehaviorSubject(false);
|
|
1029
|
+
isDarkMode$ = this._darkMode.asObservable();
|
|
1030
|
+
loadMode() {
|
|
1031
|
+
const savedTheme = localStorage.getItem('theme');
|
|
1032
|
+
if (savedTheme) {
|
|
1033
|
+
this._darkMode.next(savedTheme === 'dark');
|
|
1034
|
+
this.applyTheme(savedTheme === 'dark');
|
|
1035
|
+
}
|
|
1036
|
+
else {
|
|
1037
|
+
// Check system preference
|
|
1038
|
+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
1039
|
+
this._darkMode.next(prefersDark);
|
|
1040
|
+
this.applyTheme(prefersDark);
|
|
1041
|
+
}
|
|
1042
|
+
}
|
|
1043
|
+
toggleDarkMode() {
|
|
1044
|
+
const newValue = !this._darkMode.value;
|
|
1045
|
+
this._darkMode.next(newValue);
|
|
1046
|
+
this.applyTheme(newValue);
|
|
1047
|
+
localStorage.setItem('theme', newValue ? 'dark' : 'light');
|
|
1048
|
+
}
|
|
1049
|
+
applyTheme(isDark) {
|
|
1050
|
+
if (isDark) {
|
|
1051
|
+
document.body.classList.add('dark-theme');
|
|
1052
|
+
}
|
|
1053
|
+
else {
|
|
1054
|
+
document.body.classList.remove('dark-theme');
|
|
1055
|
+
}
|
|
1056
|
+
}
|
|
1057
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1058
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThemeService, providedIn: 'root' });
|
|
1059
|
+
}
|
|
1060
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThemeService, decorators: [{
|
|
1061
|
+
type: Injectable,
|
|
1062
|
+
args: [{
|
|
1063
|
+
providedIn: 'root',
|
|
1064
|
+
}]
|
|
1065
|
+
}] });
|
|
1066
|
+
|
|
1067
|
+
// Configuraciones predefinidas mejoradas
|
|
1068
|
+
const AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG = {
|
|
1069
|
+
placeholder: 'Buscar...',
|
|
1070
|
+
disabled: false,
|
|
1071
|
+
debounceTime: 300,
|
|
1072
|
+
minSearchLength: 2,
|
|
1073
|
+
maxHistoryItems: 10,
|
|
1074
|
+
itemsPerPage: 10,
|
|
1075
|
+
enableStockFilter: true,
|
|
1076
|
+
stockProperty: 'stock',
|
|
1077
|
+
enablePagination: true,
|
|
1078
|
+
enableFilters: true,
|
|
1079
|
+
enableFooterActions: true,
|
|
1080
|
+
overlayWidth: '100%',
|
|
1081
|
+
overlayMaxHeight: '500px',
|
|
1082
|
+
noResultsText: 'No se encontraron resultados',
|
|
1083
|
+
sectionTitle: 'Resultados',
|
|
1084
|
+
searchMode: 'remote',
|
|
1085
|
+
searchFields: [
|
|
1086
|
+
{ value: 'description', label: 'Descripción', property: 'description' },
|
|
1087
|
+
{ value: 'code', label: 'Código', property: 'code' },
|
|
1088
|
+
{ value: 'barcode', label: 'Código de Barras', property: 'barcode' },
|
|
1089
|
+
{ value: 'auxCode', label: 'Código Auxiliar', property: 'auxCode' },
|
|
1090
|
+
],
|
|
1091
|
+
stockOptions: [
|
|
1092
|
+
{ value: 'all', label: 'Todos' },
|
|
1093
|
+
{ value: 'with-stock', label: 'Con Stock' },
|
|
1094
|
+
{ value: 'without-stock', label: 'Sin Stock' },
|
|
1095
|
+
],
|
|
1096
|
+
};
|
|
1097
|
+
const AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG = {
|
|
1098
|
+
...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG,
|
|
1099
|
+
placeholder: 'Buscar productos...',
|
|
1100
|
+
enableStockFilter: true,
|
|
1101
|
+
enableFooterActions: true,
|
|
1102
|
+
sectionTitle: 'Productos',
|
|
1103
|
+
noResultsText: 'No se encontraron productos',
|
|
1104
|
+
};
|
|
1105
|
+
const AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG = {
|
|
1106
|
+
...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG,
|
|
1107
|
+
placeholder: 'Buscar clientes...',
|
|
1108
|
+
enableStockFilter: false,
|
|
1109
|
+
enableFooterActions: false,
|
|
1110
|
+
sectionTitle: 'Clientes',
|
|
1111
|
+
noResultsText: 'No se encontraron clientes',
|
|
1112
|
+
searchFields: [
|
|
1113
|
+
{ value: 'name', label: 'Nombre', property: 'name' },
|
|
1114
|
+
{ value: 'email', label: 'Email', property: 'email' },
|
|
1115
|
+
{ value: 'phone', label: 'Teléfono', property: 'phone' },
|
|
1116
|
+
{ value: 'document', label: 'Documento', property: 'document' },
|
|
1117
|
+
],
|
|
1118
|
+
};
|
|
1119
|
+
const AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG = {
|
|
1120
|
+
...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG,
|
|
1121
|
+
placeholder: 'Buscar...',
|
|
1122
|
+
enableStockFilter: false,
|
|
1123
|
+
enableFilters: false,
|
|
1124
|
+
enableFooterActions: false,
|
|
1125
|
+
enablePagination: false,
|
|
1126
|
+
itemsPerPage: 50,
|
|
1127
|
+
sectionTitle: 'Resultados',
|
|
1128
|
+
overlayMaxHeight: '300px',
|
|
1129
|
+
};
|
|
1130
|
+
// Configuración para búsqueda local
|
|
1131
|
+
const AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG = {
|
|
1132
|
+
...AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG,
|
|
1133
|
+
searchMode: 'local',
|
|
1134
|
+
debounceTime: 150, // Menos tiempo para búsqueda local
|
|
1135
|
+
minSearchLength: 1,
|
|
1136
|
+
};
|
|
1137
|
+
// Configuración para listas grandes con paginación
|
|
1138
|
+
const AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG = {
|
|
1139
|
+
...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG,
|
|
1140
|
+
itemsPerPage: 20,
|
|
1141
|
+
enablePagination: true,
|
|
1142
|
+
overlayMaxHeight: '400px',
|
|
1143
|
+
};
|
|
1144
|
+
// Helper para crear configuración personalizada
|
|
1145
|
+
function createAutocompleteWrapperConfig(overrides) {
|
|
1146
|
+
return {
|
|
1147
|
+
...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG,
|
|
1148
|
+
...overrides,
|
|
1149
|
+
};
|
|
1150
|
+
}
|
|
1151
|
+
|
|
1152
|
+
class AutocompleteWrapperService {
|
|
1153
|
+
historySubject = new BehaviorSubject([]);
|
|
1154
|
+
history$ = this.historySubject.asObservable();
|
|
1155
|
+
constructor() {
|
|
1156
|
+
this.loadHistoryFromStorage();
|
|
1157
|
+
}
|
|
1158
|
+
// Búsqueda local (sin API)
|
|
1159
|
+
searchLocal(items, query, filters, config) {
|
|
1160
|
+
const filtered = this.filterItems(items, query, filters, config);
|
|
1161
|
+
const page = 1; // Para búsqueda local, asumimos página 1
|
|
1162
|
+
const pageSize = config.itemsPerPage || 10;
|
|
1163
|
+
const startIndex = (page - 1) * pageSize;
|
|
1164
|
+
const pageItems = filtered.slice(startIndex, startIndex + pageSize);
|
|
1165
|
+
return of({
|
|
1166
|
+
items: pageItems,
|
|
1167
|
+
totalCount: filtered.length,
|
|
1168
|
+
hasMore: filtered.length > startIndex + pageSize,
|
|
1169
|
+
});
|
|
1170
|
+
}
|
|
1171
|
+
// Filtrar elementos basado en query y filtros
|
|
1172
|
+
filterItems(items, query, filters, config = AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG) {
|
|
1173
|
+
if (!query || query.length < (config.minSearchLength || 2)) {
|
|
1174
|
+
return [];
|
|
1175
|
+
}
|
|
1176
|
+
let filteredItems = items.filter(item => {
|
|
1177
|
+
if (item && typeof item === 'string') {
|
|
1178
|
+
return true;
|
|
1179
|
+
}
|
|
1180
|
+
// Buscar por el campo seleccionado
|
|
1181
|
+
const searchValue = this.getSearchValue(item, filters.searchBy, config);
|
|
1182
|
+
return searchValue.toLowerCase().includes(query.toLowerCase());
|
|
1183
|
+
});
|
|
1184
|
+
// Aplicar filtro de stock si está habilitado
|
|
1185
|
+
if (config.enableStockFilter && filters.stockFilter !== 'all') {
|
|
1186
|
+
filteredItems = filteredItems.filter(item => {
|
|
1187
|
+
if (typeof item === 'string')
|
|
1188
|
+
return true;
|
|
1189
|
+
const stockValue = item[config.stockProperty || 'stock'];
|
|
1190
|
+
const hasStock = stockValue !== undefined && stockValue !== null && stockValue > 0;
|
|
1191
|
+
return filters.stockFilter === 'with-stock' ? hasStock : !hasStock;
|
|
1192
|
+
});
|
|
1193
|
+
}
|
|
1194
|
+
return filteredItems;
|
|
1195
|
+
}
|
|
1196
|
+
// Simular búsqueda asíncrona
|
|
1197
|
+
searchAsync(items, query, filters, config = AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG) {
|
|
1198
|
+
const results = this.filterItems(items, query, filters, config);
|
|
1199
|
+
return of(results).pipe(delay(100)); // Simular delay de API
|
|
1200
|
+
}
|
|
1201
|
+
// Obtener valor de búsqueda según el campo seleccionado
|
|
1202
|
+
getSearchValue(item, searchBy, config) {
|
|
1203
|
+
const searchField = config.searchFields?.find(field => field.value === searchBy);
|
|
1204
|
+
if (searchField) {
|
|
1205
|
+
return item[searchField.property] || '';
|
|
1206
|
+
}
|
|
1207
|
+
// Fallback a la lógica anterior
|
|
1208
|
+
switch (searchBy) {
|
|
1209
|
+
case 'description':
|
|
1210
|
+
return item['description'] || '';
|
|
1211
|
+
case 'code':
|
|
1212
|
+
return item['code'] || item.id?.toString() || '';
|
|
1213
|
+
case 'barcode':
|
|
1214
|
+
return item['barcode'] || '';
|
|
1215
|
+
case 'auxCode':
|
|
1216
|
+
return item['auxCode'] || '';
|
|
1217
|
+
case 'email':
|
|
1218
|
+
return item['email'] || '';
|
|
1219
|
+
case 'phone':
|
|
1220
|
+
return item['phone'] || '';
|
|
1221
|
+
case 'document':
|
|
1222
|
+
return item['document'] || '';
|
|
1223
|
+
case 'name':
|
|
1224
|
+
default:
|
|
1225
|
+
return item.name || item.value || '';
|
|
1226
|
+
}
|
|
1227
|
+
}
|
|
1228
|
+
// Gestión de historial específico del wrapper
|
|
1229
|
+
addToHistory(item, maxItems = 10) {
|
|
1230
|
+
const currentHistory = this.historySubject.value;
|
|
1231
|
+
// Remover si ya existe
|
|
1232
|
+
const filteredHistory = currentHistory.filter(historyItem => {
|
|
1233
|
+
if (typeof item === 'string' && typeof historyItem === 'string') {
|
|
1234
|
+
return item !== historyItem;
|
|
1235
|
+
}
|
|
1236
|
+
else if (typeof item === 'object' && typeof historyItem === 'object') {
|
|
1237
|
+
return (item.id || item.name) !== (historyItem.id || historyItem.name);
|
|
1238
|
+
}
|
|
1239
|
+
return true;
|
|
1240
|
+
});
|
|
1241
|
+
// Agregar al inicio
|
|
1242
|
+
const newHistory = [item, ...filteredHistory].slice(0, maxItems);
|
|
1243
|
+
this.historySubject.next(newHistory);
|
|
1244
|
+
this.saveHistoryToStorage(newHistory);
|
|
1245
|
+
}
|
|
1246
|
+
removeFromHistory(index) {
|
|
1247
|
+
const currentHistory = this.historySubject.value;
|
|
1248
|
+
currentHistory.splice(index, 1);
|
|
1249
|
+
this.historySubject.next([...currentHistory]);
|
|
1250
|
+
this.saveHistoryToStorage(currentHistory);
|
|
1251
|
+
}
|
|
1252
|
+
clearHistory() {
|
|
1253
|
+
this.historySubject.next([]);
|
|
1254
|
+
this.saveHistoryToStorage([]);
|
|
1255
|
+
}
|
|
1256
|
+
getHistory() {
|
|
1257
|
+
return this.historySubject.value;
|
|
1258
|
+
}
|
|
1259
|
+
// Gestión de almacenamiento específico del wrapper
|
|
1260
|
+
loadHistoryFromStorage() {
|
|
1261
|
+
try {
|
|
1262
|
+
const stored = localStorage.getItem('autocomplete_wrapper_history');
|
|
1263
|
+
if (stored) {
|
|
1264
|
+
const history = JSON.parse(stored);
|
|
1265
|
+
this.historySubject.next(history);
|
|
1266
|
+
}
|
|
1267
|
+
}
|
|
1268
|
+
catch (error) {
|
|
1269
|
+
console.warn('Error loading autocomplete wrapper history:', error);
|
|
1270
|
+
}
|
|
1271
|
+
}
|
|
1272
|
+
saveHistoryToStorage(history) {
|
|
1273
|
+
try {
|
|
1274
|
+
localStorage.setItem('autocomplete_wrapper_history', JSON.stringify(history));
|
|
1275
|
+
}
|
|
1276
|
+
catch (error) {
|
|
1277
|
+
console.warn('Error saving autocomplete wrapper history:', error);
|
|
1278
|
+
}
|
|
1279
|
+
}
|
|
1280
|
+
// Paginación
|
|
1281
|
+
paginateItems(items, page, itemsPerPage) {
|
|
1282
|
+
const startIndex = (page - 1) * itemsPerPage;
|
|
1283
|
+
const endIndex = startIndex + itemsPerPage;
|
|
1284
|
+
return items.slice(startIndex, endIndex);
|
|
1285
|
+
}
|
|
1286
|
+
getTotalPages(totalItems, itemsPerPage) {
|
|
1287
|
+
return Math.ceil(totalItems / itemsPerPage) || 1;
|
|
1288
|
+
}
|
|
1289
|
+
// Validaciones
|
|
1290
|
+
isValidPage(page, totalPages) {
|
|
1291
|
+
return page >= 1 && page <= totalPages;
|
|
1292
|
+
}
|
|
1293
|
+
// Utilidades para templates
|
|
1294
|
+
highlightText(text, query) {
|
|
1295
|
+
if (!query || !text)
|
|
1296
|
+
return text;
|
|
1297
|
+
const regex = new RegExp(`(${query})`, 'gi');
|
|
1298
|
+
return text.replace(regex, '<mark>$1</mark>');
|
|
1299
|
+
}
|
|
1300
|
+
getItemDisplayText(item, displayField = 'nombre') {
|
|
1301
|
+
if (typeof item === 'string')
|
|
1302
|
+
return item;
|
|
1303
|
+
return item[displayField] || item.name || item.value || item.id?.toString() || '';
|
|
1304
|
+
}
|
|
1305
|
+
// Configuración dinámica
|
|
1306
|
+
mergeConfig(userConfig) {
|
|
1307
|
+
return { ...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, ...userConfig };
|
|
1308
|
+
}
|
|
1309
|
+
// Factory para crear función de búsqueda genérica
|
|
1310
|
+
createGenericSearchFunction(config) {
|
|
1311
|
+
return (query, filters, page = 1, pageSize = 10) => {
|
|
1312
|
+
const { searchBy, ...rest } = filters;
|
|
1313
|
+
const params = {
|
|
1314
|
+
[config.queryParam || 'q']: query,
|
|
1315
|
+
[config.searchByParam || 'searchBy']: searchBy,
|
|
1316
|
+
[config.pageParam || 'page']: page,
|
|
1317
|
+
[config.pageSizeParam || 'pageSize']: pageSize,
|
|
1318
|
+
...rest,
|
|
1319
|
+
};
|
|
1320
|
+
return config.search(params).pipe(map(response => {
|
|
1321
|
+
if (config.responseMapper) {
|
|
1322
|
+
return config.responseMapper(response);
|
|
1323
|
+
}
|
|
1324
|
+
// Mapper por defecto
|
|
1325
|
+
const items = response.data || response.items || response;
|
|
1326
|
+
const totalRecords = response.totalRecords || response.totalCount || response.total || 0;
|
|
1327
|
+
return {
|
|
1328
|
+
items,
|
|
1329
|
+
totalCount: totalRecords,
|
|
1330
|
+
hasMore: response.hasMore || false,
|
|
1331
|
+
};
|
|
1332
|
+
}));
|
|
1333
|
+
};
|
|
1334
|
+
}
|
|
1335
|
+
// Función para crear datos de ejemplo/mock específicos del wrapper
|
|
1336
|
+
createMockData() {
|
|
1337
|
+
return [
|
|
1338
|
+
{
|
|
1339
|
+
id: 1,
|
|
1340
|
+
name: 'iPhone 14 Pro 128GB',
|
|
1341
|
+
description: 'Smartphone Apple con chip A16 Bionic y cámara Pro',
|
|
1342
|
+
code: 'IP14P-128',
|
|
1343
|
+
barcode: '1234567890123',
|
|
1344
|
+
auxCode: 'APL-IP14P-128',
|
|
1345
|
+
stock: 15,
|
|
1346
|
+
category: 'Smartphones',
|
|
1347
|
+
brand: 'Apple',
|
|
1348
|
+
unit: 'unidad',
|
|
1349
|
+
prices: [
|
|
1350
|
+
{
|
|
1351
|
+
id: 1,
|
|
1352
|
+
type: 'retail',
|
|
1353
|
+
label: 'Público',
|
|
1354
|
+
value: 999,
|
|
1355
|
+
currency: 'USD',
|
|
1356
|
+
includesTax: true,
|
|
1357
|
+
isDefault: true,
|
|
1358
|
+
isActive: true,
|
|
1359
|
+
},
|
|
1360
|
+
{
|
|
1361
|
+
id: 2,
|
|
1362
|
+
type: 'wholesale',
|
|
1363
|
+
label: 'Mayorista',
|
|
1364
|
+
value: 850,
|
|
1365
|
+
currency: 'USD',
|
|
1366
|
+
minQuantity: 5,
|
|
1367
|
+
includesTax: false,
|
|
1368
|
+
isActive: true,
|
|
1369
|
+
},
|
|
1370
|
+
{
|
|
1371
|
+
id: 3,
|
|
1372
|
+
type: 'vip',
|
|
1373
|
+
label: 'VIP',
|
|
1374
|
+
value: 899,
|
|
1375
|
+
currency: 'USD',
|
|
1376
|
+
includesTax: true,
|
|
1377
|
+
isActive: true,
|
|
1378
|
+
},
|
|
1379
|
+
{
|
|
1380
|
+
id: 4,
|
|
1381
|
+
type: 'promotional',
|
|
1382
|
+
label: 'Black Friday',
|
|
1383
|
+
value: 749,
|
|
1384
|
+
currency: 'USD',
|
|
1385
|
+
validFrom: new Date('2024-11-24'),
|
|
1386
|
+
validTo: new Date('2024-11-30'),
|
|
1387
|
+
includesTax: true,
|
|
1388
|
+
isActive: true,
|
|
1389
|
+
},
|
|
1390
|
+
],
|
|
1391
|
+
},
|
|
1392
|
+
{
|
|
1393
|
+
id: 2,
|
|
1394
|
+
name: 'Samsung Galaxy S23 256GB',
|
|
1395
|
+
description: 'Flagship Android con cámara de 200MP',
|
|
1396
|
+
code: 'SGS23-256',
|
|
1397
|
+
barcode: '2345678901234',
|
|
1398
|
+
auxCode: 'SAM-GS23-256',
|
|
1399
|
+
stock: 0,
|
|
1400
|
+
category: 'Smartphones',
|
|
1401
|
+
brand: 'Samsung',
|
|
1402
|
+
unit: 'unidad',
|
|
1403
|
+
images: [
|
|
1404
|
+
{
|
|
1405
|
+
id: 1,
|
|
1406
|
+
url: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400',
|
|
1407
|
+
thumbnailUrl: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=200',
|
|
1408
|
+
alt: 'Samsung Galaxy S23 frontal',
|
|
1409
|
+
type: 'main',
|
|
1410
|
+
isPrimary: true,
|
|
1411
|
+
order: 1,
|
|
1412
|
+
},
|
|
1413
|
+
{
|
|
1414
|
+
id: 2,
|
|
1415
|
+
url: 'https://images.unsplash.com/photo-1574755393849-623942496936?w=400',
|
|
1416
|
+
thumbnailUrl: 'https://images.unsplash.com/photo-1574755393849-623942496936?w=200',
|
|
1417
|
+
alt: 'Samsung Galaxy S23 trasero',
|
|
1418
|
+
type: 'gallery',
|
|
1419
|
+
order: 2,
|
|
1420
|
+
},
|
|
1421
|
+
],
|
|
1422
|
+
badges: [{ type: 'new', text: 'NUEVO' }, { type: 'bestseller' }],
|
|
1423
|
+
prices: [
|
|
1424
|
+
{
|
|
1425
|
+
id: 5,
|
|
1426
|
+
type: 'retail',
|
|
1427
|
+
label: 'Público',
|
|
1428
|
+
value: 799,
|
|
1429
|
+
currency: 'USD',
|
|
1430
|
+
includesTax: true,
|
|
1431
|
+
isDefault: true,
|
|
1432
|
+
isActive: true,
|
|
1433
|
+
},
|
|
1434
|
+
{
|
|
1435
|
+
id: 6,
|
|
1436
|
+
type: 'wholesale',
|
|
1437
|
+
label: 'Mayorista',
|
|
1438
|
+
value: 679,
|
|
1439
|
+
currency: 'USD',
|
|
1440
|
+
minQuantity: 3,
|
|
1441
|
+
includesTax: false,
|
|
1442
|
+
isActive: true,
|
|
1443
|
+
},
|
|
1444
|
+
],
|
|
1445
|
+
},
|
|
1446
|
+
];
|
|
1447
|
+
}
|
|
1448
|
+
// Métodos específicos para diferentes tipos de búsqueda
|
|
1449
|
+
searchProducts(query, filters = {}) {
|
|
1450
|
+
const defaultFilters = {
|
|
1451
|
+
searchBy: 'description',
|
|
1452
|
+
stockFilter: 'all',
|
|
1453
|
+
...filters,
|
|
1454
|
+
};
|
|
1455
|
+
const mockData = this.createMockData();
|
|
1456
|
+
return this.searchLocal(mockData, query, defaultFilters, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG);
|
|
1457
|
+
}
|
|
1458
|
+
// Crear configuración específica para diferentes casos de uso
|
|
1459
|
+
createProductSearchConfig() {
|
|
1460
|
+
return this.mergeConfig({
|
|
1461
|
+
placeholder: 'Buscar productos...',
|
|
1462
|
+
enableStockFilter: true,
|
|
1463
|
+
enableFooterActions: true,
|
|
1464
|
+
sectionTitle: 'Productos',
|
|
1465
|
+
searchFields: [
|
|
1466
|
+
{ value: 'description', label: 'Descripción', property: 'description' },
|
|
1467
|
+
{ value: 'code', label: 'Código', property: 'code' },
|
|
1468
|
+
{ value: 'barcode', label: 'Código de Barras', property: 'barcode' },
|
|
1469
|
+
{ value: 'auxCode', label: 'Código Auxiliar', property: 'auxCode' },
|
|
1470
|
+
],
|
|
1471
|
+
});
|
|
1472
|
+
}
|
|
1473
|
+
createCustomerSearchConfig() {
|
|
1474
|
+
return this.mergeConfig({
|
|
1475
|
+
placeholder: 'Buscar clientes...',
|
|
1476
|
+
enableStockFilter: false,
|
|
1477
|
+
enableFooterActions: false,
|
|
1478
|
+
sectionTitle: 'Clientes',
|
|
1479
|
+
searchFields: [
|
|
1480
|
+
{ value: 'name', label: 'Nombre', property: 'name' },
|
|
1481
|
+
{ value: 'email', label: 'Email', property: 'email' },
|
|
1482
|
+
{ value: 'phone', label: 'Teléfono', property: 'phone' },
|
|
1483
|
+
{ value: 'document', label: 'Documento', property: 'document' },
|
|
1484
|
+
],
|
|
1485
|
+
});
|
|
1486
|
+
}
|
|
1487
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AutocompleteWrapperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1488
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AutocompleteWrapperService, providedIn: 'root' });
|
|
1489
|
+
}
|
|
1490
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AutocompleteWrapperService, decorators: [{
|
|
1491
|
+
type: Injectable,
|
|
1492
|
+
args: [{
|
|
1493
|
+
providedIn: 'root',
|
|
1494
|
+
}]
|
|
1495
|
+
}], ctorParameters: () => [] });
|
|
1496
|
+
|
|
1497
|
+
class ThemeToggleComponent {
|
|
1498
|
+
themeService = inject(ThemeService);
|
|
1499
|
+
darkMode$;
|
|
1500
|
+
constructor() {
|
|
1501
|
+
this.darkMode$ = this.themeService.isDarkMode$;
|
|
1502
|
+
}
|
|
1503
|
+
toggleDarkMode() {
|
|
1504
|
+
this.themeService.toggleDarkMode();
|
|
1505
|
+
}
|
|
1506
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1507
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ThemeToggleComponent, isStandalone: true, selector: "acp-theme-toggle", ngImport: i0, template: "<button\n mat-icon-button\n (click)=\"toggleDarkMode()\"\n title=\"{{ (darkMode$ | async) ? 'Modo D\u00EDa' : 'Modo Noche' }}\"\n>\n <mat-icon>{{ (darkMode$ | async) ? 'light_mode' : 'dark_mode' }}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
|
|
1508
|
+
}
|
|
1509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ThemeToggleComponent, decorators: [{
|
|
1510
|
+
type: Component,
|
|
1511
|
+
args: [{ selector: 'acp-theme-toggle', imports: [MatIconButton, MatIcon, AsyncPipe], template: "<button\n mat-icon-button\n (click)=\"toggleDarkMode()\"\n title=\"{{ (darkMode$ | async) ? 'Modo D\u00EDa' : 'Modo Noche' }}\"\n>\n <mat-icon>{{ (darkMode$ | async) ? 'light_mode' : 'dark_mode' }}</mat-icon>\n</button>\n" }]
|
|
1512
|
+
}], ctorParameters: () => [] });
|
|
1513
|
+
|
|
1514
|
+
class FieldDefinition {
|
|
1515
|
+
value;
|
|
1516
|
+
valueLabel;
|
|
1517
|
+
defaultValue;
|
|
1518
|
+
defaultValueLabel;
|
|
1519
|
+
key;
|
|
1520
|
+
label;
|
|
1521
|
+
dateRangeConfig;
|
|
1522
|
+
isDefaultSearchField;
|
|
1523
|
+
required;
|
|
1524
|
+
disabled;
|
|
1525
|
+
order;
|
|
1526
|
+
icon;
|
|
1527
|
+
controlType = 'textbox';
|
|
1528
|
+
type = 'string';
|
|
1529
|
+
editor; // this attribut is for Kendo-Grid
|
|
1530
|
+
options;
|
|
1531
|
+
valueOptions;
|
|
1532
|
+
valuePrimitive; // for kendo dropdown
|
|
1533
|
+
textField; // for kendo dropdown
|
|
1534
|
+
valueField; // for kendo dropdown
|
|
1535
|
+
errorMessage;
|
|
1536
|
+
width;
|
|
1537
|
+
valueChangeCallback;
|
|
1538
|
+
columnType;
|
|
1539
|
+
body;
|
|
1540
|
+
constructor(options = {}) {
|
|
1541
|
+
this.value = options.value;
|
|
1542
|
+
this.valueLabel = options.valueLabel;
|
|
1543
|
+
this.defaultValue = options.defaultValue;
|
|
1544
|
+
this.defaultValueLabel = options.defaultValueLabel;
|
|
1545
|
+
this.key = options.key || '';
|
|
1546
|
+
this.label = options.label || '';
|
|
1547
|
+
this.dateRangeConfig = options.dateRangeConfig;
|
|
1548
|
+
this.isDefaultSearchField = options.isDefaultSearchField;
|
|
1549
|
+
this.required = !!options.required;
|
|
1550
|
+
this.disabled = options.disabled;
|
|
1551
|
+
this.order = options.order === undefined ? 1 : options.order;
|
|
1552
|
+
this.icon = options.icon;
|
|
1553
|
+
this.controlType = options.controlType || 'textbox';
|
|
1554
|
+
this.type = options.type || 'string';
|
|
1555
|
+
this.editor = options.editor || '';
|
|
1556
|
+
this.options = options.options || [];
|
|
1557
|
+
this.valueOptions = options.valueOptions || [];
|
|
1558
|
+
this.valuePrimitive = options.valuePrimitive;
|
|
1559
|
+
this.textField = options.textField;
|
|
1560
|
+
this.valueField = options.valueField;
|
|
1561
|
+
this.errorMessage = options.errorMessage || '';
|
|
1562
|
+
this.width = options.width;
|
|
1563
|
+
this.valueChangeCallback = options.valueChangeCallback;
|
|
1564
|
+
this.columnType = options.columnType;
|
|
1565
|
+
this.body = options.body;
|
|
1566
|
+
}
|
|
1567
|
+
}
|
|
1568
|
+
|
|
1569
|
+
class ColumnDefinition extends FieldDefinition {
|
|
1570
|
+
index; // if the list of columns will be displayed in material edit-grid (angular material grid), index must be given
|
|
1571
|
+
format; // it could be: { style: 'currency', currency: 'EUR' }, { date: 'short' }
|
|
1572
|
+
hasFooter;
|
|
1573
|
+
hideInOverlay;
|
|
1574
|
+
// optionsAttribut is used in stock-receipt maintenance: StockReceiptItem.Unit has options for StockReceiptItem.Birimi
|
|
1575
|
+
optionsAttribut; // name of the attribut that has the options list for dropdown
|
|
1576
|
+
templateOutlet;
|
|
1577
|
+
constructor(options = {}) {
|
|
1578
|
+
super(options);
|
|
1579
|
+
this.index = options.index;
|
|
1580
|
+
this.format = options.format;
|
|
1581
|
+
this.hasFooter = options.hasFooter;
|
|
1582
|
+
this.hideInOverlay = options.hideInOverlay;
|
|
1583
|
+
this.optionsAttribut = options.optionsAttribut;
|
|
1584
|
+
this.templateOutlet = options.templateOutlet;
|
|
1585
|
+
}
|
|
1586
|
+
}
|
|
1587
|
+
|
|
1588
|
+
class TableCellIndex {
|
|
1589
|
+
row;
|
|
1590
|
+
column;
|
|
1591
|
+
constructor(row, column) {
|
|
1592
|
+
this.row = row;
|
|
1593
|
+
this.column = column;
|
|
1594
|
+
}
|
|
1595
|
+
}
|
|
1596
|
+
|
|
1597
|
+
class Pagination {
|
|
1598
|
+
pageIndex;
|
|
1599
|
+
pageSize;
|
|
1600
|
+
maxSize;
|
|
1601
|
+
totalRecords;
|
|
1602
|
+
pageSizeOptions;
|
|
1603
|
+
/**
|
|
1604
|
+
* @param pageIndex Current page index (0-based for MatPagination compatibility)
|
|
1605
|
+
* @param pageSize Number of records per page
|
|
1606
|
+
* @param maxSize Maximum number of pages displayed in the pagination control
|
|
1607
|
+
* @param totalRecords Total number of records
|
|
1608
|
+
* @param pageSizeOptions Available page size options
|
|
1609
|
+
*/
|
|
1610
|
+
constructor(pageIndex = 0, // MatPagination starts at 0
|
|
1611
|
+
pageSize = 25, maxSize = 5, totalRecords = 0, pageSizeOptions = [25, 50, 75, 100]) {
|
|
1612
|
+
this.pageIndex = pageIndex;
|
|
1613
|
+
this.pageSize = pageSize;
|
|
1614
|
+
this.maxSize = maxSize;
|
|
1615
|
+
this.totalRecords = totalRecords;
|
|
1616
|
+
this.pageSizeOptions = pageSizeOptions;
|
|
1617
|
+
}
|
|
1618
|
+
/**
|
|
1619
|
+
* Calculates the total number of pages.
|
|
1620
|
+
*/
|
|
1621
|
+
getTotalPages() {
|
|
1622
|
+
return Math.ceil(this.totalRecords / this.pageSize);
|
|
1623
|
+
}
|
|
1624
|
+
/**
|
|
1625
|
+
* Updates the page size and resets the page index to the first page.
|
|
1626
|
+
* @param newPageSize The new page size
|
|
1627
|
+
*/
|
|
1628
|
+
updatePageSize(newPageSize) {
|
|
1629
|
+
if (this.pageSizeOptions.includes(newPageSize)) {
|
|
1630
|
+
this.pageSize = newPageSize;
|
|
1631
|
+
this.pageIndex = 0; // Reset to first page
|
|
1632
|
+
}
|
|
1633
|
+
else {
|
|
1634
|
+
throw new Error(`Invalid page size: ${newPageSize}`);
|
|
1635
|
+
}
|
|
1636
|
+
}
|
|
1637
|
+
/**
|
|
1638
|
+
* Updates pagination data based on paginator event.
|
|
1639
|
+
* @param event MatPaginator event
|
|
1640
|
+
*/
|
|
1641
|
+
updateFromPaginatorEvent(event) {
|
|
1642
|
+
this.pageIndex = event.pageIndex;
|
|
1643
|
+
this.pageSize = event.pageSize;
|
|
1644
|
+
}
|
|
1645
|
+
}
|
|
1646
|
+
|
|
1647
|
+
class ReusableAutocompleteComponent {
|
|
1648
|
+
dataSource = []; // Para búsqueda local
|
|
1649
|
+
config = AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG;
|
|
1650
|
+
itemTemplate;
|
|
1651
|
+
searchFunction;
|
|
1652
|
+
notFoundTemplate;
|
|
1653
|
+
overlayWidth = input('auto', ...(ngDevMode ? [{ debugName: "overlayWidth" }] : []));
|
|
1654
|
+
overlayMaxHeight = input('400px', ...(ngDevMode ? [{ debugName: "overlayMaxHeight" }] : []));
|
|
1655
|
+
itemSelected = output();
|
|
1656
|
+
searchChanged = output();
|
|
1657
|
+
searchRequested = output(); // Nuevo evento
|
|
1658
|
+
pageChanged = output();
|
|
1659
|
+
filterChanged = output();
|
|
1660
|
+
advancedSearchClicked = output();
|
|
1661
|
+
allResultsClicked = output();
|
|
1662
|
+
createClicked = output();
|
|
1663
|
+
searchInput;
|
|
1664
|
+
historyListElement;
|
|
1665
|
+
resultsListElement;
|
|
1666
|
+
// State
|
|
1667
|
+
query = '';
|
|
1668
|
+
isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
|
|
1669
|
+
overlayOpen = signal(false, ...(ngDevMode ? [{ debugName: "overlayOpen" }] : []));
|
|
1670
|
+
selectedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
|
|
1671
|
+
currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
|
|
1672
|
+
filteredItems = signal([], ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
|
|
1673
|
+
historyList = signal([], ...(ngDevMode ? [{ debugName: "historyList" }] : []));
|
|
1674
|
+
totalCount = signal(0, ...(ngDevMode ? [{ debugName: "totalCount" }] : []));
|
|
1675
|
+
// Filters
|
|
1676
|
+
filters = {
|
|
1677
|
+
searchBy: 'name',
|
|
1678
|
+
stockFilter: 'all',
|
|
1679
|
+
};
|
|
1680
|
+
// Computed properties
|
|
1681
|
+
isHistoryVisible = computed(() => {
|
|
1682
|
+
return this.query.length < (this.config.minSearchLength || 2) && this.historyList().length > 0;
|
|
1683
|
+
}, ...(ngDevMode ? [{ debugName: "isHistoryVisible" }] : []));
|
|
1684
|
+
totalItems = computed(() => this.filteredItems().length, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
|
|
1685
|
+
totalPages = computed(() => {
|
|
1686
|
+
const total = this.totalCount();
|
|
1687
|
+
return total > 0 ? Math.ceil(total / (this.config.itemsPerPage || 10)) : 1;
|
|
1688
|
+
}, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
|
|
1689
|
+
currentPageItems = computed(() => {
|
|
1690
|
+
// if (!this.config.enablePagination) {
|
|
1691
|
+
// }
|
|
1692
|
+
return this.filteredItems();
|
|
1693
|
+
// return this.autocompleteService.paginateItems(
|
|
1694
|
+
// this.filteredItems(),
|
|
1695
|
+
// this.currentPage(),
|
|
1696
|
+
// this.config.itemsPerPage || 10
|
|
1697
|
+
// );
|
|
1698
|
+
}, ...(ngDevMode ? [{ debugName: "currentPageItems" }] : []));
|
|
1699
|
+
startItem = computed(() => {
|
|
1700
|
+
const total = this.totalItems();
|
|
1701
|
+
if (total === 0)
|
|
1702
|
+
return 0;
|
|
1703
|
+
return (this.currentPage() - 1) * (this.config.itemsPerPage || 10) + 1;
|
|
1704
|
+
}, ...(ngDevMode ? [{ debugName: "startItem" }] : []));
|
|
1705
|
+
endItem = computed(() => {
|
|
1706
|
+
const total = this.totalItems();
|
|
1707
|
+
const calculated = this.currentPage() * (this.config.itemsPerPage || 10);
|
|
1708
|
+
return Math.min(calculated, total);
|
|
1709
|
+
}, ...(ngDevMode ? [{ debugName: "endItem" }] : []));
|
|
1710
|
+
sectionTitle = computed(() => {
|
|
1711
|
+
const total = this.totalItems();
|
|
1712
|
+
return `Resultados (${total})`;
|
|
1713
|
+
}, ...(ngDevMode ? [{ debugName: "sectionTitle" }] : []));
|
|
1714
|
+
isNoResults = computed(() => {
|
|
1715
|
+
return (this.totalItems() === 0 &&
|
|
1716
|
+
!this.isLoading() &&
|
|
1717
|
+
this.query.length >= (this.config.minSearchLength || 2));
|
|
1718
|
+
}, ...(ngDevMode ? [{ debugName: "isNoResults" }] : []));
|
|
1719
|
+
// Private
|
|
1720
|
+
destroy$ = new Subject();
|
|
1721
|
+
searchSubject = new Subject();
|
|
1722
|
+
autocompleteService = inject(AutocompleteWrapperService);
|
|
1723
|
+
ngOnInit() {
|
|
1724
|
+
this.mergeDefaultConfig();
|
|
1725
|
+
this.setupSearch();
|
|
1726
|
+
this.loadHistory();
|
|
1727
|
+
}
|
|
1728
|
+
ngOnDestroy() {
|
|
1729
|
+
this.destroy$.next();
|
|
1730
|
+
this.destroy$.complete();
|
|
1731
|
+
}
|
|
1732
|
+
mergeDefaultConfig() {
|
|
1733
|
+
this.config = this.autocompleteService.mergeConfig(this.config);
|
|
1734
|
+
this.filters.searchBy = this.config.searchFields?.[0]?.value || 'name';
|
|
1735
|
+
this.filters.stockFilter = this.config.stockOptions?.[0]?.value || 'all';
|
|
1736
|
+
}
|
|
1737
|
+
setupSearch() {
|
|
1738
|
+
this.filteredItems.set([]);
|
|
1739
|
+
this.searchSubject
|
|
1740
|
+
.pipe(debounceTime(this.config.debounceTime || 300),
|
|
1741
|
+
// distinctUntilChanged(),
|
|
1742
|
+
// distinctUntilChanged((prev, curr) => {
|
|
1743
|
+
// console.log(prev);
|
|
1744
|
+
// console.log(curr);
|
|
1745
|
+
// return prev.query === curr.query &&
|
|
1746
|
+
// JSON.stringify(prev.filters) === JSON.stringify(curr.filters) &&
|
|
1747
|
+
// prev.page === curr.page
|
|
1748
|
+
//
|
|
1749
|
+
// }
|
|
1750
|
+
//
|
|
1751
|
+
// ),
|
|
1752
|
+
takeUntil(this.destroy$), switchMap(({ query }) => this.performSearch(query)))
|
|
1753
|
+
.subscribe(result => {
|
|
1754
|
+
this.filteredItems.set(result.items);
|
|
1755
|
+
this.totalCount.set(result.totalCount);
|
|
1756
|
+
this.isLoading.set(false);
|
|
1757
|
+
});
|
|
1758
|
+
}
|
|
1759
|
+
performSearch(query) {
|
|
1760
|
+
if (query.length < (this.config.minSearchLength || 2)) {
|
|
1761
|
+
return of({ items: [], totalCount: 0 });
|
|
1762
|
+
}
|
|
1763
|
+
// ESTRATEGIA A: Función de búsqueda personalizada
|
|
1764
|
+
if (this.searchFunction) {
|
|
1765
|
+
return this.searchFunction(query, this.filters, this.currentPage(), this.config.itemsPerPage || 10).pipe(catchError(() => of({ items: [], totalCount: 0 })));
|
|
1766
|
+
}
|
|
1767
|
+
// ESTRATEGIA B: Emit evento para que el padre maneje
|
|
1768
|
+
if (this.config.searchMode === 'remote') {
|
|
1769
|
+
this.searchRequested.emit({
|
|
1770
|
+
query,
|
|
1771
|
+
filters: this.filters,
|
|
1772
|
+
page: this.currentPage(),
|
|
1773
|
+
});
|
|
1774
|
+
return of({ items: [], totalCount: 0 }); // El padre actualizará los datos
|
|
1775
|
+
}
|
|
1776
|
+
// ESTRATEGIA C: Búsqueda local (fallback)
|
|
1777
|
+
return this.autocompleteService.searchLocal(this.dataSource, query, this.filters, this.config);
|
|
1778
|
+
}
|
|
1779
|
+
loadHistory() {
|
|
1780
|
+
this.autocompleteService.history$.pipe(takeUntil(this.destroy$)).subscribe(history => {
|
|
1781
|
+
this.historyList.set(history);
|
|
1782
|
+
});
|
|
1783
|
+
}
|
|
1784
|
+
searchSubjectNext() {
|
|
1785
|
+
this.searchSubject.next({
|
|
1786
|
+
query: this.query,
|
|
1787
|
+
filters: this.filters,
|
|
1788
|
+
page: this.currentPage(),
|
|
1789
|
+
});
|
|
1790
|
+
}
|
|
1791
|
+
// Event Handlers
|
|
1792
|
+
onInput(event) {
|
|
1793
|
+
const target = event.target;
|
|
1794
|
+
this.query = target.value;
|
|
1795
|
+
this.selectedIndex.set(-1);
|
|
1796
|
+
this.currentPage.set(1);
|
|
1797
|
+
if (this.query.length >= (this.config.minSearchLength || 2)) {
|
|
1798
|
+
this.isLoading.set(true);
|
|
1799
|
+
this.searchSubjectNext();
|
|
1800
|
+
}
|
|
1801
|
+
else {
|
|
1802
|
+
this.filteredItems.set([]);
|
|
1803
|
+
this.isLoading.set(false);
|
|
1804
|
+
}
|
|
1805
|
+
this.showOverlay();
|
|
1806
|
+
this.searchChanged.emit(this.query);
|
|
1807
|
+
}
|
|
1808
|
+
onKeyDown(event) {
|
|
1809
|
+
const currentList = this.isHistoryVisible() ? this.historyList() : this.currentPageItems();
|
|
1810
|
+
const maxIndex = currentList.length - 1;
|
|
1811
|
+
switch (event.key) {
|
|
1812
|
+
case 'ArrowDown':
|
|
1813
|
+
event.preventDefault();
|
|
1814
|
+
if (maxIndex >= 0) {
|
|
1815
|
+
const nextIndex = this.selectedIndex() < maxIndex ? this.selectedIndex() + 1 : 0;
|
|
1816
|
+
this.selectedIndex.set(nextIndex);
|
|
1817
|
+
this.scrollToSelected();
|
|
1818
|
+
}
|
|
1819
|
+
break;
|
|
1820
|
+
case 'ArrowUp':
|
|
1821
|
+
event.preventDefault();
|
|
1822
|
+
if (maxIndex >= 0) {
|
|
1823
|
+
const prevIndex = this.selectedIndex() > 0 ? this.selectedIndex() - 1 : maxIndex;
|
|
1824
|
+
this.selectedIndex.set(prevIndex);
|
|
1825
|
+
this.scrollToSelected();
|
|
1826
|
+
}
|
|
1827
|
+
break;
|
|
1828
|
+
case 'Enter':
|
|
1829
|
+
event.preventDefault();
|
|
1830
|
+
if (this.selectedIndex() >= 0 && this.selectedIndex() <= maxIndex) {
|
|
1831
|
+
this.selectItem(currentList[this.selectedIndex()]);
|
|
1832
|
+
}
|
|
1833
|
+
break;
|
|
1834
|
+
case 'Escape':
|
|
1835
|
+
event.preventDefault();
|
|
1836
|
+
this.hideOverlay();
|
|
1837
|
+
break;
|
|
1838
|
+
case 'PageDown':
|
|
1839
|
+
event.preventDefault();
|
|
1840
|
+
if (!this.isHistoryVisible() && this.config.enablePagination) {
|
|
1841
|
+
this.goToNextPage();
|
|
1842
|
+
}
|
|
1843
|
+
break;
|
|
1844
|
+
case 'PageUp':
|
|
1845
|
+
event.preventDefault();
|
|
1846
|
+
if (!this.isHistoryVisible() && this.config.enablePagination) {
|
|
1847
|
+
this.goToPreviousPage();
|
|
1848
|
+
}
|
|
1849
|
+
break;
|
|
1850
|
+
}
|
|
1851
|
+
}
|
|
1852
|
+
onFilterChange() {
|
|
1853
|
+
this.currentPage.set(1);
|
|
1854
|
+
if (this.query.length >= (this.config.minSearchLength || 2)) {
|
|
1855
|
+
this.performSearch(this.query);
|
|
1856
|
+
this.searchSubjectNext();
|
|
1857
|
+
}
|
|
1858
|
+
// this.filterChanged.emit(this.filters);
|
|
1859
|
+
}
|
|
1860
|
+
// Método público para actualizar resultados desde el padre
|
|
1861
|
+
updateSearchResults(result) {
|
|
1862
|
+
this.filteredItems.set(result.items);
|
|
1863
|
+
this.totalCount.set(result.totalCount);
|
|
1864
|
+
this.isLoading.set(false);
|
|
1865
|
+
}
|
|
1866
|
+
// Overlay Methods
|
|
1867
|
+
showOverlay() {
|
|
1868
|
+
this.overlayOpen.set(true);
|
|
1869
|
+
}
|
|
1870
|
+
hideOverlay() {
|
|
1871
|
+
this.overlayOpen.set(false);
|
|
1872
|
+
this.selectedIndex.set(-1);
|
|
1873
|
+
}
|
|
1874
|
+
isType(item) {
|
|
1875
|
+
return typeof item === 'string';
|
|
1876
|
+
}
|
|
1877
|
+
// Selection Methods
|
|
1878
|
+
selectItem(item) {
|
|
1879
|
+
if (this.config.clearInput) {
|
|
1880
|
+
this.query = '';
|
|
1881
|
+
}
|
|
1882
|
+
else {
|
|
1883
|
+
this.query = this.getItemDisplayText(item);
|
|
1884
|
+
}
|
|
1885
|
+
this.hideOverlay();
|
|
1886
|
+
this.currentPage.set(1);
|
|
1887
|
+
this.autocompleteService.addToHistory(item, this.config.maxHistoryItems);
|
|
1888
|
+
this.itemSelected.emit(item);
|
|
1889
|
+
setTimeout(() => {
|
|
1890
|
+
this.searchInput?.nativeElement?.focus();
|
|
1891
|
+
}, 100);
|
|
1892
|
+
}
|
|
1893
|
+
clearSearch() {
|
|
1894
|
+
this.query = '';
|
|
1895
|
+
this.filteredItems.set([]);
|
|
1896
|
+
this.selectedIndex.set(-1);
|
|
1897
|
+
this.currentPage.set(1);
|
|
1898
|
+
this.searchInput?.nativeElement?.focus();
|
|
1899
|
+
this.searchChanged.emit('');
|
|
1900
|
+
}
|
|
1901
|
+
// History Methods
|
|
1902
|
+
removeHistoryItem(index, event) {
|
|
1903
|
+
event.stopPropagation();
|
|
1904
|
+
this.autocompleteService.removeFromHistory(index);
|
|
1905
|
+
}
|
|
1906
|
+
clearHistory() {
|
|
1907
|
+
this.autocompleteService.clearHistory();
|
|
1908
|
+
}
|
|
1909
|
+
// Pagination Methods
|
|
1910
|
+
goToPage(event) {
|
|
1911
|
+
const target = event.target;
|
|
1912
|
+
const page = parseInt(target.value);
|
|
1913
|
+
if (this.autocompleteService.isValidPage(page, this.totalPages())) {
|
|
1914
|
+
this.currentPage.set(page);
|
|
1915
|
+
this.selectedIndex.set(-1);
|
|
1916
|
+
this.pageChanged.emit(page);
|
|
1917
|
+
this.searchSubjectNext();
|
|
1918
|
+
}
|
|
1919
|
+
else {
|
|
1920
|
+
target.value = this.currentPage().toString();
|
|
1921
|
+
}
|
|
1922
|
+
}
|
|
1923
|
+
goToFirstPage() {
|
|
1924
|
+
if (this.currentPage() !== 1) {
|
|
1925
|
+
this.currentPage.set(1);
|
|
1926
|
+
this.selectedIndex.set(-1);
|
|
1927
|
+
this.pageChanged.emit(1);
|
|
1928
|
+
this.searchSubjectNext();
|
|
1929
|
+
}
|
|
1930
|
+
}
|
|
1931
|
+
goToPreviousPage() {
|
|
1932
|
+
const prevPage = this.currentPage() - 1;
|
|
1933
|
+
if (prevPage >= 1) {
|
|
1934
|
+
this.currentPage.set(prevPage);
|
|
1935
|
+
this.selectedIndex.set(-1);
|
|
1936
|
+
this.pageChanged.emit(prevPage);
|
|
1937
|
+
this.searchSubjectNext();
|
|
1938
|
+
}
|
|
1939
|
+
}
|
|
1940
|
+
goToNextPage() {
|
|
1941
|
+
const nextPage = this.currentPage() + 1;
|
|
1942
|
+
if (nextPage <= this.totalPages()) {
|
|
1943
|
+
this.currentPage.set(nextPage);
|
|
1944
|
+
this.selectedIndex.set(-1);
|
|
1945
|
+
this.pageChanged.emit(nextPage);
|
|
1946
|
+
this.searchSubjectNext();
|
|
1947
|
+
}
|
|
1948
|
+
}
|
|
1949
|
+
goToLastPage() {
|
|
1950
|
+
const lastPage = this.totalPages();
|
|
1951
|
+
if (this.currentPage() !== lastPage) {
|
|
1952
|
+
this.currentPage.set(lastPage);
|
|
1953
|
+
this.selectedIndex.set(-1);
|
|
1954
|
+
this.pageChanged.emit(lastPage);
|
|
1955
|
+
this.searchSubjectNext();
|
|
1956
|
+
}
|
|
1957
|
+
}
|
|
1958
|
+
// Footer Actions
|
|
1959
|
+
onCreateNew($event) {
|
|
1960
|
+
//$event.stopPropagation();
|
|
1961
|
+
// this.hideOverlay();
|
|
1962
|
+
this.createClicked.emit(this.query);
|
|
1963
|
+
}
|
|
1964
|
+
onAdvancedSearch() {
|
|
1965
|
+
this.hideOverlay();
|
|
1966
|
+
this.advancedSearchClicked.emit();
|
|
1967
|
+
}
|
|
1968
|
+
onShowAllResults() {
|
|
1969
|
+
this.hideOverlay();
|
|
1970
|
+
this.allResultsClicked.emit(this.query);
|
|
1971
|
+
}
|
|
1972
|
+
// Utility Methods
|
|
1973
|
+
getItemDisplayText(item) {
|
|
1974
|
+
return this.autocompleteService.getItemDisplayText(item);
|
|
1975
|
+
}
|
|
1976
|
+
noResultsText() {
|
|
1977
|
+
return `No se encontraron resultados para "${this.query}"`;
|
|
1978
|
+
}
|
|
1979
|
+
scrollToSelected() {
|
|
1980
|
+
const listElement = this.isHistoryVisible()
|
|
1981
|
+
? this.historyListElement?.nativeElement
|
|
1982
|
+
: this.resultsListElement?.nativeElement;
|
|
1983
|
+
if (listElement) {
|
|
1984
|
+
const selectedElement = listElement.children[this.selectedIndex()];
|
|
1985
|
+
if (selectedElement) {
|
|
1986
|
+
selectedElement.scrollIntoView({
|
|
1987
|
+
block: 'nearest',
|
|
1988
|
+
behavior: 'smooth',
|
|
1989
|
+
});
|
|
1990
|
+
}
|
|
1991
|
+
}
|
|
1992
|
+
}
|
|
1993
|
+
// Public API
|
|
1994
|
+
getState() {
|
|
1995
|
+
return {
|
|
1996
|
+
query: this.query,
|
|
1997
|
+
isLoading: this.isLoading(),
|
|
1998
|
+
overlayOpen: this.overlayOpen(),
|
|
1999
|
+
selectedIndex: this.selectedIndex(),
|
|
2000
|
+
pagination: {
|
|
2001
|
+
currentPage: this.currentPage(),
|
|
2002
|
+
totalPages: this.totalPages(),
|
|
2003
|
+
totalItems: this.totalItems(),
|
|
2004
|
+
itemsPerPage: this.config.itemsPerPage || 10,
|
|
2005
|
+
startItem: this.startItem(),
|
|
2006
|
+
endItem: this.endItem(),
|
|
2007
|
+
hasNextPage: this.currentPage() < this.totalPages(),
|
|
2008
|
+
hasPreviousPage: this.currentPage() > 1,
|
|
2009
|
+
},
|
|
2010
|
+
hasResults: this.totalItems() > 0,
|
|
2011
|
+
isHistoryVisible: this.isHistoryVisible(),
|
|
2012
|
+
historyCount: this.historyList().length,
|
|
2013
|
+
filters: this.filters,
|
|
2014
|
+
};
|
|
2015
|
+
}
|
|
2016
|
+
setQuery(query) {
|
|
2017
|
+
this.query = query;
|
|
2018
|
+
this.currentPage.set(1);
|
|
2019
|
+
if (query.length >= (this.config.minSearchLength || 2)) {
|
|
2020
|
+
this.performSearch(query);
|
|
2021
|
+
this.showOverlay();
|
|
2022
|
+
}
|
|
2023
|
+
else {
|
|
2024
|
+
this.filteredItems.set([]);
|
|
2025
|
+
if (query.length === 0) {
|
|
2026
|
+
this.hideOverlay();
|
|
2027
|
+
}
|
|
2028
|
+
}
|
|
2029
|
+
this.searchChanged.emit(query);
|
|
2030
|
+
}
|
|
2031
|
+
focus() {
|
|
2032
|
+
this.searchInput?.nativeElement?.focus();
|
|
2033
|
+
}
|
|
2034
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ReusableAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2035
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ReusableAutocompleteComponent, isStandalone: true, selector: "acp-autocomplete-wrapper", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: false, isRequired: false, transformFunction: null }, notFoundTemplate: { classPropertyName: "notFoundTemplate", publicName: "notFoundTemplate", isSignal: false, isRequired: false, transformFunction: null }, overlayWidth: { classPropertyName: "overlayWidth", publicName: "overlayWidth", isSignal: true, isRequired: false, transformFunction: null }, overlayMaxHeight: { classPropertyName: "overlayMaxHeight", publicName: "overlayMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", searchChanged: "searchChanged", searchRequested: "searchRequested", pageChanged: "pageChanged", filterChanged: "filterChanged", advancedSearchClicked: "advancedSearchClicked", allResultsClicked: "allResultsClicked", createClicked: "createClicked" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "historyListElement", first: true, predicate: ["historyListElement"], descendants: true }, { propertyName: "resultsListElement", first: true, predicate: ["resultsListElement"], descendants: true }], ngImport: i0, template: "<div class=\"autocomplete-wrapper-wrapper\" [class.autocomplete-wrapper-active]=\"overlayOpen()\">\n <!-- Input Container -->\n <div\n class=\"autocomplete-wrapper-input-container\"\n cdkOverlayOrigin\n #overlayPosition=\"cdkOverlayOrigin\"\n >\n <div class=\"autocomplete-wrapper-input-wrapper\">\n <mat-icon class=\"autocomplete-wrapper-search-icon\">search</mat-icon>\n <input\n #searchInput\n type=\"text\"\n class=\"autocomplete-wrapper-input-field\"\n [placeholder]=\"config.placeholder\"\n [(ngModel)]=\"query\"\n (input)=\"onInput($event)\"\n (click)=\"showOverlay()\"\n (keydown)=\"onKeyDown($event)\"\n [disabled]=\"config.disabled || false\"\n autocomplete=\"off\"\n />\n @if (query && query.length > 0 && !isLoading()) {\n <button\n mat-icon-button\n (click)=\"clearSearch()\"\n type=\"button\"\n class=\"autocomplete-wrapper-clear-button\"\n >\n <mat-icon>clear</mat-icon>\n </button>\n }\n <button mat-icon-button type=\"button\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n @if (isLoading()) {\n <div class=\"autocomplete-wrapper-loading-spinner\">\n <mat-spinner diameter=\"20\"></mat-spinner>\n </div>\n }\n </div>\n\n <!-- Overlay -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayPosition\"\n [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n [cdkConnectedOverlayHeight]=\"overlayMaxHeight()\"\n (overlayOutsideClick)=\"hideOverlay()\"\n (backdropClick)=\"hideOverlay()\"\n >\n <div class=\"autocomplete-wrapper-dropdown\" [class.autocomplete-wrapper-active]=\"overlayOpen()\">\n <div class=\"autocomplete-wrapper-dropdown-content\">\n <!-- History Section -->\n @if (isHistoryVisible() && historyList().length > 0) {\n <div class=\"autocomplete-wrapper-section\">\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">B\u00FAsquedas recientes</span>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"clearHistory()\"\n class=\"autocomplete-wrapper-clear-history-button\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n </div>\n <ul\n class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n #historyListElement\n >\n @for (item of historyList(); track $index) {\n <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-history-item\">\n <div\n class=\"autocomplete-wrapper-item-content\"\n [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n (click)=\"selectItem(item)\"\n >\n <mat-icon class=\"autocomplete-wrapper-history-icon\">history</mat-icon>\n <div class=\"autocomplete-wrapper-item-details\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: item }\n \"\n >\n </ng-container>\n </div>\n </div>\n <button\n type=\"button\"\n mat-icon-button\n class=\"autocomplete-wrapper-remove-button\"\n (click)=\"removeHistoryItem($index, $event)\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </li>\n }\n </ul>\n </div>\n }\n\n <!-- Results Section -->\n @if (!isHistoryVisible()) {\n <div class=\"autocomplete-wrapper-section\">\n <!-- Header with filters and pagination -->\n @if (config.enableFilters || config.enablePagination) {\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n\n <!-- Filters -->\n @if (config.enableFilters) {\n <div class=\"autocomplete-wrapper-filter-controls\">\n @if (config.searchFields && config.searchFields.length > 1) {\n <div class=\"autocomplete-wrapper-filter-group\">\n <label class=\"autocomplete-wrapper-filter-label\">Buscar por:</label>\n <select\n class=\"autocomplete-wrapper-filter-select\"\n [(ngModel)]=\"filters.searchBy\"\n (change)=\"onFilterChange()\"\n >\n @for (field of config.searchFields; track $index) {\n <option [value]=\"field.value\">{{ field.label }}</option>\n }\n </select>\n </div>\n }\n\n @if (config.enableStockFilter && config.stockOptions) {\n <div class=\"autocomplete-wrapper-filter-group\">\n <label class=\"autocomplete-wrapper-filter-label\">Stock:</label>\n <select\n class=\"autocomplete-wrapper-filter-select\"\n [(ngModel)]=\"filters.stockFilter\"\n (change)=\"onFilterChange()\"\n >\n @for (option of config.stockOptions; track $index) {\n <option [value]=\"option.value\">{{ option.label }}</option>\n }\n </select>\n </div>\n }\n </div>\n }\n\n <!-- Pagination Controls -->\n @if (config.enablePagination && totalPages() > 1) {\n <div class=\"autocomplete-wrapper-pagination-header\">\n <div class=\"autocomplete-wrapper-pagination-info\">\n <span>P\u00E1gina {{ currentPage() }} de {{ totalPages() }}</span>\n </div>\n <div class=\"autocomplete-wrapper-pagination-controls\">\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToFirstPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>first_page</mat-icon>\n </button>\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <input\n type=\"number\"\n class=\"autocomplete-wrapper-page-input\"\n [value]=\"currentPage()\"\n [min]=\"1\"\n [max]=\"totalPages()\"\n (change)=\"goToPage($event)\"\n />\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToNextPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToLastPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>last_page</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n </div>\n }\n\n <!-- Items List -->\n @if (totalItems()) {\n <ul\n class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n #resultsListElement\n >\n @for (item of currentPageItems(); track $index) {\n <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-result-item\">\n <div\n class=\"autocomplete-wrapper-item-content\"\n [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n (click)=\"selectItem(item)\"\n >\n <div class=\"autocomplete-wrapper-item-info\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: item }\n \"\n >\n </ng-container>\n </div>\n </div>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n <!-- No Results -->\n @if (!isLoading() && isNoResults()) {\n <div class=\"autocomplete-wrapper-no-results\">\n <mat-icon class=\"autocomplete-wrapper-no-results-icon\">search_off</mat-icon>\n <div class=\"autocomplete-wrapper-no-results-content\">\n <ng-container\n *ngTemplateOutlet=\"\n notFoundTemplate || defaultNotFoundTemplate;\n context: { $implicit: noResultsText() }\n \"\n >\n </ng-container>\n </div>\n </div>\n }\n\n <!-- Footer -->\n @if (overlayOpen() && totalItems() > 0) {\n <div class=\"autocomplete-wrapper-footer\">\n @if (!isHistoryVisible() && totalItems() > 0 && config.enablePagination) {\n <div class=\"autocomplete-wrapper-pagination-footer\">\n <div class=\"autocomplete-wrapper-pagination-summary\">\n Mostrando {{ startItem() }}-{{ endItem() }} de {{ totalCount() }} resultados\n </div>\n <div class=\"autocomplete-wrapper-pagination-controls-footer\">\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <span class=\"autocomplete-wrapper-page-indicator\"\n >{{ currentPage() }} / {{ totalPages() }}</span\n >\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToNextPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n </div>\n </div>\n }\n\n @if (config.enableFooterActions) {\n <div class=\"autocomplete-wrapper-footer-actions\">\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-create-button\"\n (click)=\"onCreateNew($event)\"\n >\n <mat-icon>add</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Crear</span>\n </button>\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-search-button\"\n (click)=\"onAdvancedSearch()\"\n >\n <mat-icon>tune</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Avanzada</span>\n </button>\n @if (!isHistoryVisible() && totalItems() > 0) {\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-results-button\"\n (click)=\"onShowAllResults()\"\n >\n <mat-icon>list</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Todos</span>\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Default Templates -->\n <ng-template #defaultItemTemplate let-item>\n <div class=\"autocomplete-wrapper-default-item\">\n <div class=\"autocomplete-wrapper-item-name\">{{ getItemDisplayText(item) }}</div>\n @if (item.description && typeof item === 'object') {\n <div class=\"autocomplete-wrapper-item-description\">{{ item.description }}</div>\n }\n </div>\n </ng-template>\n\n <ng-template #defaultNotFoundTemplate let-text>\n <div class=\"autocomplete-wrapper-default-no-results\">\n <p>{{ text }}</p>\n <p>Intenta con otros t\u00E9rminos de b\u00FAsqueda</p>\n </div>\n </ng-template>\n</div>\n", styles: [".autocomplete-wrapper{position:relative;width:100%;max-width:100%}.autocomplete-wrapper.autocomplete-wrapper-active .autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.autocomplete-wrapper-input-container{position:relative;width:100%}.autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:0 12px;transition:all .3s ease}.autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.autocomplete-wrapper-search-icon{color:#666;margin-right:8px;font-size:20px}.autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:#333}.autocomplete-wrapper-input-field::placeholder{color:#999}.autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.autocomplete-wrapper-clear-button{margin-left:8px;color:#666;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:#333}.autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.autocomplete-wrapper-dropdown{background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid #e0e0e0;overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.autocomplete-wrapper-dropdown.autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid #f0f0f0;background:#fafafa;flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:#666;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.autocomplete-wrapper-clear-history-button{color:#666;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:#333}.autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.autocomplete-wrapper-filter-label{font-size:12px;color:#666;font-weight:500;white-space:nowrap}.autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px;background:#fff;color:#333;cursor:pointer;min-width:120px}.autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.autocomplete-wrapper-filter-select:hover{border-color:#bbb}.autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.autocomplete-wrapper-pagination-info{font-size:12px;color:#666;white-space:nowrap}.autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:#666;background:none;border:1px solid #ddd;border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:#333}.autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid #ddd;border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{overflow-y:auto}.autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid #f5f5f5;transition:background-color .2s ease}.autocomplete-wrapper-list-item:last-child{border-bottom:none}.autocomplete-wrapper-list-item:hover{background-color:#f8f9fa}.autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.autocomplete-wrapper-item-content.autocomplete-wrapper-selected{background-color:#e3f2fd;color:#1976d2}.autocomplete-wrapper-history-item .autocomplete-wrapper-item-content{padding-left:12px}.autocomplete-wrapper-history-icon{color:#999;margin-right:12px;font-size:18px}.autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.autocomplete-wrapper-remove-button{margin-right:8px}.autocomplete-wrapper-result-item{position:relative}.autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.autocomplete-wrapper-default-item{flex:1}.autocomplete-wrapper-default-item .autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:#333}.autocomplete-wrapper-default-item .autocomplete-wrapper-item-description{font-size:12px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:#666}.autocomplete-wrapper-no-results-icon{font-size:48px;color:#ccc;margin-bottom:16px;width:45px;height:45px}.autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.autocomplete-wrapper-default-no-results{text-align:center}.autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.autocomplete-wrapper-footer{border-top:1px solid #f0f0f0;background:#fafafa;flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.autocomplete-wrapper-pagination-summary{font-size:12px;color:#666;white-space:nowrap}.autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.autocomplete-wrapper-page-indicator{font-size:12px;color:#666;min-width:40px;text-align:center}.autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.autocomplete-wrapper-footer-button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;font-size:13px;text-transform:none;white-space:nowrap;background:none;border:1px solid #ddd;border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.autocomplete-wrapper-footer-button.autocomplete-wrapper-create-button{background-color:#4caf500a;border-color:#4caf50;color:#4caf50}.autocomplete-wrapper-footer-button.autocomplete-wrapper-create-button:hover{background-color:#4caf5014}.autocomplete-wrapper-footer-button.autocomplete-wrapper-search-button{background-color:#ff98000a;border-color:#ff9800;color:#ff9800}.autocomplete-wrapper-footer-button.autocomplete-wrapper-search-button:hover{background-color:#ff980014}.autocomplete-wrapper-footer-button.autocomplete-wrapper-results-button{background-color:#3f51b50a;border-color:#3f51b5;color:#3f51b5}.autocomplete-wrapper-footer-button.autocomplete-wrapper-results-button:hover{background-color:#3f51b514}.autocomplete-wrapper-button-text{display:inline}.autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.autocomplete-wrapper-dropdown-content{max-height:60vh}.autocomplete-wrapper-input-field{font-size:16px}.autocomplete-wrapper-footer{padding:8px 12px}.autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.autocomplete-wrapper-footer-button{width:100%;min-height:44px}.autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.autocomplete-wrapper-filter-label{font-size:11px}.autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.autocomplete-wrapper-pagination-header .autocomplete-wrapper-pagination-info{display:none}.autocomplete-wrapper-pagination-controls{gap:2px}.autocomplete-wrapper-page-input{width:40px}.autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.autocomplete-wrapper-button-text{font-size:12px}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{max-height:250px}}@media (max-width: 480px){.autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.autocomplete-wrapper-filter-controls{gap:8px}.autocomplete-wrapper-filter-group{gap:4px}.autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.autocomplete-wrapper-item-content{padding:14px 12px}.autocomplete-wrapper-pagination-header{gap:8px}.autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.autocomplete-wrapper-page-input{width:35px;height:28px}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{max-height:200px}.autocomplete-wrapper-footer-actions{gap:4px}.autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.autocomplete-wrapper-button-text{display:none}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.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$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
|
|
2036
|
+
}
|
|
2037
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ReusableAutocompleteComponent, decorators: [{
|
|
2038
|
+
type: Component,
|
|
2039
|
+
args: [{ selector: 'acp-autocomplete-wrapper', imports: [
|
|
2040
|
+
MatIcon,
|
|
2041
|
+
NgTemplateOutlet,
|
|
2042
|
+
OverlayModule,
|
|
2043
|
+
MatProgressBarModule,
|
|
2044
|
+
MatProgressSpinner,
|
|
2045
|
+
FormsModule,
|
|
2046
|
+
MatIconButton,
|
|
2047
|
+
], template: "<div class=\"autocomplete-wrapper-wrapper\" [class.autocomplete-wrapper-active]=\"overlayOpen()\">\n <!-- Input Container -->\n <div\n class=\"autocomplete-wrapper-input-container\"\n cdkOverlayOrigin\n #overlayPosition=\"cdkOverlayOrigin\"\n >\n <div class=\"autocomplete-wrapper-input-wrapper\">\n <mat-icon class=\"autocomplete-wrapper-search-icon\">search</mat-icon>\n <input\n #searchInput\n type=\"text\"\n class=\"autocomplete-wrapper-input-field\"\n [placeholder]=\"config.placeholder\"\n [(ngModel)]=\"query\"\n (input)=\"onInput($event)\"\n (click)=\"showOverlay()\"\n (keydown)=\"onKeyDown($event)\"\n [disabled]=\"config.disabled || false\"\n autocomplete=\"off\"\n />\n @if (query && query.length > 0 && !isLoading()) {\n <button\n mat-icon-button\n (click)=\"clearSearch()\"\n type=\"button\"\n class=\"autocomplete-wrapper-clear-button\"\n >\n <mat-icon>clear</mat-icon>\n </button>\n }\n <button mat-icon-button type=\"button\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n @if (isLoading()) {\n <div class=\"autocomplete-wrapper-loading-spinner\">\n <mat-spinner diameter=\"20\"></mat-spinner>\n </div>\n }\n </div>\n\n <!-- Overlay -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayPosition\"\n [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n [cdkConnectedOverlayHeight]=\"overlayMaxHeight()\"\n (overlayOutsideClick)=\"hideOverlay()\"\n (backdropClick)=\"hideOverlay()\"\n >\n <div class=\"autocomplete-wrapper-dropdown\" [class.autocomplete-wrapper-active]=\"overlayOpen()\">\n <div class=\"autocomplete-wrapper-dropdown-content\">\n <!-- History Section -->\n @if (isHistoryVisible() && historyList().length > 0) {\n <div class=\"autocomplete-wrapper-section\">\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">B\u00FAsquedas recientes</span>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"clearHistory()\"\n class=\"autocomplete-wrapper-clear-history-button\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n </div>\n <ul\n class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n #historyListElement\n >\n @for (item of historyList(); track $index) {\n <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-history-item\">\n <div\n class=\"autocomplete-wrapper-item-content\"\n [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n (click)=\"selectItem(item)\"\n >\n <mat-icon class=\"autocomplete-wrapper-history-icon\">history</mat-icon>\n <div class=\"autocomplete-wrapper-item-details\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: item }\n \"\n >\n </ng-container>\n </div>\n </div>\n <button\n type=\"button\"\n mat-icon-button\n class=\"autocomplete-wrapper-remove-button\"\n (click)=\"removeHistoryItem($index, $event)\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </li>\n }\n </ul>\n </div>\n }\n\n <!-- Results Section -->\n @if (!isHistoryVisible()) {\n <div class=\"autocomplete-wrapper-section\">\n <!-- Header with filters and pagination -->\n @if (config.enableFilters || config.enablePagination) {\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n\n <!-- Filters -->\n @if (config.enableFilters) {\n <div class=\"autocomplete-wrapper-filter-controls\">\n @if (config.searchFields && config.searchFields.length > 1) {\n <div class=\"autocomplete-wrapper-filter-group\">\n <label class=\"autocomplete-wrapper-filter-label\">Buscar por:</label>\n <select\n class=\"autocomplete-wrapper-filter-select\"\n [(ngModel)]=\"filters.searchBy\"\n (change)=\"onFilterChange()\"\n >\n @for (field of config.searchFields; track $index) {\n <option [value]=\"field.value\">{{ field.label }}</option>\n }\n </select>\n </div>\n }\n\n @if (config.enableStockFilter && config.stockOptions) {\n <div class=\"autocomplete-wrapper-filter-group\">\n <label class=\"autocomplete-wrapper-filter-label\">Stock:</label>\n <select\n class=\"autocomplete-wrapper-filter-select\"\n [(ngModel)]=\"filters.stockFilter\"\n (change)=\"onFilterChange()\"\n >\n @for (option of config.stockOptions; track $index) {\n <option [value]=\"option.value\">{{ option.label }}</option>\n }\n </select>\n </div>\n }\n </div>\n }\n\n <!-- Pagination Controls -->\n @if (config.enablePagination && totalPages() > 1) {\n <div class=\"autocomplete-wrapper-pagination-header\">\n <div class=\"autocomplete-wrapper-pagination-info\">\n <span>P\u00E1gina {{ currentPage() }} de {{ totalPages() }}</span>\n </div>\n <div class=\"autocomplete-wrapper-pagination-controls\">\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToFirstPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>first_page</mat-icon>\n </button>\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <input\n type=\"number\"\n class=\"autocomplete-wrapper-page-input\"\n [value]=\"currentPage()\"\n [min]=\"1\"\n [max]=\"totalPages()\"\n (change)=\"goToPage($event)\"\n />\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToNextPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToLastPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>last_page</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n </div>\n }\n\n <!-- Items List -->\n @if (totalItems()) {\n <ul\n class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n #resultsListElement\n >\n @for (item of currentPageItems(); track $index) {\n <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-result-item\">\n <div\n class=\"autocomplete-wrapper-item-content\"\n [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n (click)=\"selectItem(item)\"\n >\n <div class=\"autocomplete-wrapper-item-info\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: item }\n \"\n >\n </ng-container>\n </div>\n </div>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n <!-- No Results -->\n @if (!isLoading() && isNoResults()) {\n <div class=\"autocomplete-wrapper-no-results\">\n <mat-icon class=\"autocomplete-wrapper-no-results-icon\">search_off</mat-icon>\n <div class=\"autocomplete-wrapper-no-results-content\">\n <ng-container\n *ngTemplateOutlet=\"\n notFoundTemplate || defaultNotFoundTemplate;\n context: { $implicit: noResultsText() }\n \"\n >\n </ng-container>\n </div>\n </div>\n }\n\n <!-- Footer -->\n @if (overlayOpen() && totalItems() > 0) {\n <div class=\"autocomplete-wrapper-footer\">\n @if (!isHistoryVisible() && totalItems() > 0 && config.enablePagination) {\n <div class=\"autocomplete-wrapper-pagination-footer\">\n <div class=\"autocomplete-wrapper-pagination-summary\">\n Mostrando {{ startItem() }}-{{ endItem() }} de {{ totalCount() }} resultados\n </div>\n <div class=\"autocomplete-wrapper-pagination-controls-footer\">\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <span class=\"autocomplete-wrapper-page-indicator\"\n >{{ currentPage() }} / {{ totalPages() }}</span\n >\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToNextPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n </div>\n </div>\n }\n\n @if (config.enableFooterActions) {\n <div class=\"autocomplete-wrapper-footer-actions\">\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-create-button\"\n (click)=\"onCreateNew($event)\"\n >\n <mat-icon>add</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Crear</span>\n </button>\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-search-button\"\n (click)=\"onAdvancedSearch()\"\n >\n <mat-icon>tune</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Avanzada</span>\n </button>\n @if (!isHistoryVisible() && totalItems() > 0) {\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-results-button\"\n (click)=\"onShowAllResults()\"\n >\n <mat-icon>list</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Todos</span>\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Default Templates -->\n <ng-template #defaultItemTemplate let-item>\n <div class=\"autocomplete-wrapper-default-item\">\n <div class=\"autocomplete-wrapper-item-name\">{{ getItemDisplayText(item) }}</div>\n @if (item.description && typeof item === 'object') {\n <div class=\"autocomplete-wrapper-item-description\">{{ item.description }}</div>\n }\n </div>\n </ng-template>\n\n <ng-template #defaultNotFoundTemplate let-text>\n <div class=\"autocomplete-wrapper-default-no-results\">\n <p>{{ text }}</p>\n <p>Intenta con otros t\u00E9rminos de b\u00FAsqueda</p>\n </div>\n </ng-template>\n</div>\n", styles: [".autocomplete-wrapper{position:relative;width:100%;max-width:100%}.autocomplete-wrapper.autocomplete-wrapper-active .autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.autocomplete-wrapper-input-container{position:relative;width:100%}.autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:0 12px;transition:all .3s ease}.autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.autocomplete-wrapper-search-icon{color:#666;margin-right:8px;font-size:20px}.autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:#333}.autocomplete-wrapper-input-field::placeholder{color:#999}.autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.autocomplete-wrapper-clear-button{margin-left:8px;color:#666;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:#333}.autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.autocomplete-wrapper-dropdown{background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid #e0e0e0;overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.autocomplete-wrapper-dropdown.autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid #f0f0f0;background:#fafafa;flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:#666;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.autocomplete-wrapper-clear-history-button{color:#666;background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:#333}.autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.autocomplete-wrapper-filter-label{font-size:12px;color:#666;font-weight:500;white-space:nowrap}.autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px;background:#fff;color:#333;cursor:pointer;min-width:120px}.autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.autocomplete-wrapper-filter-select:hover{border-color:#bbb}.autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.autocomplete-wrapper-pagination-info{font-size:12px;color:#666;white-space:nowrap}.autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:#666;background:none;border:1px solid #ddd;border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:#333}.autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid #ddd;border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{overflow-y:auto}.autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid #f5f5f5;transition:background-color .2s ease}.autocomplete-wrapper-list-item:last-child{border-bottom:none}.autocomplete-wrapper-list-item:hover{background-color:#f8f9fa}.autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.autocomplete-wrapper-item-content.autocomplete-wrapper-selected{background-color:#e3f2fd;color:#1976d2}.autocomplete-wrapper-history-item .autocomplete-wrapper-item-content{padding-left:12px}.autocomplete-wrapper-history-icon{color:#999;margin-right:12px;font-size:18px}.autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.autocomplete-wrapper-remove-button{margin-right:8px}.autocomplete-wrapper-result-item{position:relative}.autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.autocomplete-wrapper-default-item{flex:1}.autocomplete-wrapper-default-item .autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:#333}.autocomplete-wrapper-default-item .autocomplete-wrapper-item-description{font-size:12px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:#666}.autocomplete-wrapper-no-results-icon{font-size:48px;color:#ccc;margin-bottom:16px;width:45px;height:45px}.autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.autocomplete-wrapper-default-no-results{text-align:center}.autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.autocomplete-wrapper-footer{border-top:1px solid #f0f0f0;background:#fafafa;flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.autocomplete-wrapper-pagination-summary{font-size:12px;color:#666;white-space:nowrap}.autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.autocomplete-wrapper-page-indicator{font-size:12px;color:#666;min-width:40px;text-align:center}.autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.autocomplete-wrapper-footer-button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;font-size:13px;text-transform:none;white-space:nowrap;background:none;border:1px solid #ddd;border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.autocomplete-wrapper-footer-button.autocomplete-wrapper-create-button{background-color:#4caf500a;border-color:#4caf50;color:#4caf50}.autocomplete-wrapper-footer-button.autocomplete-wrapper-create-button:hover{background-color:#4caf5014}.autocomplete-wrapper-footer-button.autocomplete-wrapper-search-button{background-color:#ff98000a;border-color:#ff9800;color:#ff9800}.autocomplete-wrapper-footer-button.autocomplete-wrapper-search-button:hover{background-color:#ff980014}.autocomplete-wrapper-footer-button.autocomplete-wrapper-results-button{background-color:#3f51b50a;border-color:#3f51b5;color:#3f51b5}.autocomplete-wrapper-footer-button.autocomplete-wrapper-results-button:hover{background-color:#3f51b514}.autocomplete-wrapper-button-text{display:inline}.autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.autocomplete-wrapper-dropdown-content{max-height:60vh}.autocomplete-wrapper-input-field{font-size:16px}.autocomplete-wrapper-footer{padding:8px 12px}.autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.autocomplete-wrapper-footer-button{width:100%;min-height:44px}.autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.autocomplete-wrapper-filter-label{font-size:11px}.autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.autocomplete-wrapper-pagination-header .autocomplete-wrapper-pagination-info{display:none}.autocomplete-wrapper-pagination-controls{gap:2px}.autocomplete-wrapper-page-input{width:40px}.autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.autocomplete-wrapper-button-text{font-size:12px}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{max-height:250px}}@media (max-width: 480px){.autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.autocomplete-wrapper-filter-controls{gap:8px}.autocomplete-wrapper-filter-group{gap:4px}.autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.autocomplete-wrapper-item-content{padding:14px 12px}.autocomplete-wrapper-pagination-header{gap:8px}.autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.autocomplete-wrapper-page-input{width:35px;height:28px}.autocomplete-wrapper-items-list.autocomplete-wrapper-scrollable-list{max-height:200px}.autocomplete-wrapper-footer-actions{gap:4px}.autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.autocomplete-wrapper-button-text{display:none}}\n"] }]
|
|
2048
|
+
}], propDecorators: { dataSource: [{
|
|
2049
|
+
type: Input
|
|
2050
|
+
}], config: [{
|
|
2051
|
+
type: Input
|
|
2052
|
+
}], itemTemplate: [{
|
|
2053
|
+
type: Input
|
|
2054
|
+
}], searchFunction: [{
|
|
2055
|
+
type: Input
|
|
2056
|
+
}], notFoundTemplate: [{
|
|
2057
|
+
type: Input
|
|
2058
|
+
}], searchInput: [{
|
|
2059
|
+
type: ViewChild,
|
|
2060
|
+
args: ['searchInput']
|
|
2061
|
+
}], historyListElement: [{
|
|
2062
|
+
type: ViewChild,
|
|
2063
|
+
args: ['historyListElement']
|
|
2064
|
+
}], resultsListElement: [{
|
|
2065
|
+
type: ViewChild,
|
|
2066
|
+
args: ['resultsListElement']
|
|
2067
|
+
}] } });
|
|
2068
|
+
|
|
2069
|
+
class ToUpperCaseDirective {
|
|
2070
|
+
el = inject(ElementRef);
|
|
2071
|
+
renderer = inject(Renderer2);
|
|
2072
|
+
onInput() {
|
|
2073
|
+
const value = this.el.nativeElement.value;
|
|
2074
|
+
this.el.nativeElement.value = value.toUpperCase();
|
|
2075
|
+
this.onChange(value.toUpperCase()); // Llamar a la función que actualiza el valor del modelo
|
|
2076
|
+
}
|
|
2077
|
+
// Funciones de ControlValueAccessor
|
|
2078
|
+
onChange = (_) => { };
|
|
2079
|
+
onTouched = () => { };
|
|
2080
|
+
writeValue(value) {
|
|
2081
|
+
if (value) {
|
|
2082
|
+
this.el.nativeElement.value = value.toUpperCase();
|
|
2083
|
+
}
|
|
2084
|
+
}
|
|
2085
|
+
registerOnChange(fn) {
|
|
2086
|
+
this.onChange = fn;
|
|
2087
|
+
}
|
|
2088
|
+
registerOnTouched(fn) {
|
|
2089
|
+
this.onTouched = fn;
|
|
2090
|
+
}
|
|
2091
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToUpperCaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2092
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: ToUpperCaseDirective, isStandalone: true, selector: "[acpToUpperCase]", host: { listeners: { "input": "onInput()" } }, providers: [
|
|
2093
|
+
{
|
|
2094
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2095
|
+
useExisting: ToUpperCaseDirective,
|
|
2096
|
+
multi: true,
|
|
2097
|
+
},
|
|
2098
|
+
], ngImport: i0 });
|
|
2099
|
+
}
|
|
2100
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ToUpperCaseDirective, decorators: [{
|
|
2101
|
+
type: Directive,
|
|
2102
|
+
args: [{
|
|
2103
|
+
selector: '[acpToUpperCase]',
|
|
2104
|
+
providers: [
|
|
2105
|
+
{
|
|
2106
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2107
|
+
useExisting: ToUpperCaseDirective,
|
|
2108
|
+
multi: true,
|
|
2109
|
+
},
|
|
2110
|
+
],
|
|
2111
|
+
}]
|
|
2112
|
+
}], propDecorators: { onInput: [{
|
|
2113
|
+
type: HostListener,
|
|
2114
|
+
args: ['input']
|
|
2115
|
+
}] } });
|
|
2116
|
+
|
|
2117
|
+
/*
|
|
2118
|
+
InjectionToken is a generic class provided by Angular for creating custom injection tokens.
|
|
2119
|
+
*/
|
|
2120
|
+
const DYNAMIC_INPUT = new InjectionToken('DYNAMIC_INPUT');
|
|
2121
|
+
|
|
2122
|
+
/**
|
|
2123
|
+
* Token to determine if a request should show spinner
|
|
2124
|
+
* Default is true (show spinner for all requests)
|
|
2125
|
+
*/
|
|
2126
|
+
const SHOW_SPINNER = new HttpContextToken(() => true);
|
|
2127
|
+
const requests = [];
|
|
2128
|
+
/**
|
|
2129
|
+
* Helper function to disable spinner for specific requests
|
|
2130
|
+
* @returns HttpContext with spinner disabled
|
|
2131
|
+
*/
|
|
2132
|
+
function withoutSpinner() {
|
|
2133
|
+
return new HttpContext().set(SHOW_SPINNER, false);
|
|
2134
|
+
}
|
|
2135
|
+
/**
|
|
2136
|
+
* Service to track active HTTP requests
|
|
2137
|
+
*/
|
|
2138
|
+
class ActiveRequestsTracker {
|
|
2139
|
+
get count() {
|
|
2140
|
+
return requests.length;
|
|
2141
|
+
}
|
|
2142
|
+
add(request) {
|
|
2143
|
+
requests.push(request);
|
|
2144
|
+
}
|
|
2145
|
+
remove(request) {
|
|
2146
|
+
const index = requests.indexOf(request);
|
|
2147
|
+
if (index >= 0) {
|
|
2148
|
+
requests.splice(index, 1);
|
|
2149
|
+
}
|
|
2150
|
+
}
|
|
2151
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ActiveRequestsTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2152
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ActiveRequestsTracker, providedIn: 'root' });
|
|
2153
|
+
}
|
|
2154
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ActiveRequestsTracker, decorators: [{
|
|
2155
|
+
type: Injectable,
|
|
2156
|
+
args: [{
|
|
2157
|
+
providedIn: 'root',
|
|
2158
|
+
}]
|
|
2159
|
+
}] });
|
|
2160
|
+
/**
|
|
2161
|
+
* Interceptor that shows/hides a loading spinner based on active HTTP requests
|
|
2162
|
+
*/
|
|
2163
|
+
const spinnerInterceptor = (req, next) => {
|
|
2164
|
+
// Track active requests requiring spinner
|
|
2165
|
+
console.log(requests);
|
|
2166
|
+
const activeRequests = inject(ActiveRequestsTracker);
|
|
2167
|
+
const overlayService = inject(OverlayService);
|
|
2168
|
+
// Skip spinner if disabled for this request
|
|
2169
|
+
if (!req.context.get(SHOW_SPINNER)) {
|
|
2170
|
+
return next(req);
|
|
2171
|
+
}
|
|
2172
|
+
// Add request to tracking
|
|
2173
|
+
activeRequests.add(req);
|
|
2174
|
+
// Show spinner if this is the first active request
|
|
2175
|
+
if (activeRequests.count === 1) {
|
|
2176
|
+
overlayService.showSpinner();
|
|
2177
|
+
}
|
|
2178
|
+
return next(req).pipe(finalize(() => {
|
|
2179
|
+
// Remove request and hide spinner if no more active requests
|
|
2180
|
+
activeRequests.remove(req);
|
|
2181
|
+
if (activeRequests.count === 0) {
|
|
2182
|
+
overlayService.hideSpinner();
|
|
2183
|
+
}
|
|
2184
|
+
}));
|
|
2185
|
+
};
|
|
2186
|
+
|
|
2187
|
+
/**
|
|
2188
|
+
* Generated bundle index. Do not edit.
|
|
2189
|
+
*/
|
|
2190
|
+
|
|
2191
|
+
export { AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, ActiveRequestsTracker, AdvancedDialogService, AutocompleteWrapperService, ColumnDefinition, CustomTabulatorComponent, DYNAMIC_INPUT, DialogWrapperComponent, FieldDefinition, GetTotalPipe, IconUserComponent, MatDynamicCardComponent, MatDynamicTableComponent, MatInputChipComponent, MatThemeButtonComponent, OverlayService, Pagination, ReusableAutocompleteComponent, SpinnerComponent, StatusDisplayPipe, SvgIconComponent, TableCellIndex, ThemeService, ThemeToggleComponent, ToUpperCaseDirective, createAutocompleteWrapperConfig, spinnerInterceptor, withoutSpinner };
|
|
2192
|
+
//# sourceMappingURL=acontplus-ng-components.mjs.map
|