@acontplus/ng-components 1.0.10 → 1.0.11
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 +167 -340
- package/fesm2022/acontplus-ng-components.mjs.map +1 -1
- package/index.d.ts +56 -77
- package/package.json +5 -5
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, booleanAttribute, output, Component, inject,
|
|
2
|
+
import { input, booleanAttribute, output, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, ViewEncapsulation, Pipe, ChangeDetectorRef, contentChildren, contentChild, Input, Injectable, signal, computed, ElementRef, Renderer2, HostListener, Directive, InjectionToken } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/card';
|
|
4
4
|
import { MatCardModule } from '@angular/material/card';
|
|
5
5
|
import * as i2 from '@angular/material/button';
|
|
@@ -13,11 +13,11 @@ import { MatChipRow, MatChipGrid, MatChipInput } from '@angular/material/chips';
|
|
|
13
13
|
import { MatFormField, MatLabel, MatHint } from '@angular/material/form-field';
|
|
14
14
|
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
|
15
15
|
import { ENTER, COMMA } from '@angular/cdk/keycodes';
|
|
16
|
-
import { NgClass,
|
|
16
|
+
import { NgClass, NgTemplateOutlet, DatePipe, DecimalPipe, AsyncPipe } from '@angular/common';
|
|
17
17
|
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
18
|
-
import {
|
|
18
|
+
import { Tabulator, PageModule, ReactiveDataModule } from 'tabulator-tables';
|
|
19
19
|
import * as i1$2 from '@angular/material/table';
|
|
20
|
-
import { MatTableDataSource,
|
|
20
|
+
import { MatTableDataSource, MatHeaderRowDef, MatRowDef, MatFooterRowDef, MatColumnDef, MatNoDataRow, MatTable, MatTableModule } from '@angular/material/table';
|
|
21
21
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
22
22
|
import * as i6 from '@angular/material/paginator';
|
|
23
23
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
@@ -36,8 +36,7 @@ import { ComponentPortal } from '@angular/cdk/portal';
|
|
|
36
36
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
37
37
|
import * as i2$2 from '@angular/forms';
|
|
38
38
|
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
39
|
-
import { switchMap, catchError
|
|
40
|
-
import { HttpContextToken, HttpContext } from '@angular/common/http';
|
|
39
|
+
import { switchMap, catchError } from 'rxjs/operators';
|
|
41
40
|
|
|
42
41
|
/**
|
|
43
42
|
* A versatile card component that wraps Angular Material's mat-card with additional functionality
|
|
@@ -158,12 +157,12 @@ class MatDynamicCardComponent {
|
|
|
158
157
|
handleCardClick(event) {
|
|
159
158
|
this.cardClicked.emit(event);
|
|
160
159
|
}
|
|
161
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
162
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
160
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatDynamicCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
161
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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 />\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
162
|
}
|
|
164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
163
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatDynamicCardComponent, decorators: [{
|
|
165
164
|
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
|
|
165
|
+
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 />\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
166
|
}] });
|
|
168
167
|
|
|
169
168
|
/**
|
|
@@ -188,12 +187,12 @@ class DialogWrapperComponent {
|
|
|
188
187
|
* A template reference that acts as an anchor for dynamic content.
|
|
189
188
|
* This is where the component specified in the config will be rendered.
|
|
190
189
|
*/
|
|
191
|
-
contentHost;
|
|
190
|
+
contentHost = viewChild.required('contentHost', { read: ViewContainerRef });
|
|
192
191
|
/**
|
|
193
192
|
* A reference to the header element for the z-index focus logic.
|
|
194
193
|
* Used to bring the dialog to the front when clicked.
|
|
195
194
|
*/
|
|
196
|
-
header;
|
|
195
|
+
header = viewChild('dialogHeader', ...(ngDevMode ? [{ debugName: "header" }] : []));
|
|
197
196
|
/**
|
|
198
197
|
* Static counter to track the highest z-index for multiple dialogs.
|
|
199
198
|
* Ensures that the most recently clicked dialog appears on top.
|
|
@@ -212,8 +211,8 @@ class DialogWrapperComponent {
|
|
|
212
211
|
*/
|
|
213
212
|
ngAfterViewInit() {
|
|
214
213
|
// Dynamically create the content component after the view is ready.
|
|
215
|
-
this.contentHost.clear();
|
|
216
|
-
const componentRef = this.contentHost.createComponent(this.config.component);
|
|
214
|
+
this.contentHost().clear();
|
|
215
|
+
const componentRef = this.contentHost().createComponent(this.config.component);
|
|
217
216
|
// Pass the provided data directly to the new component's instance.
|
|
218
217
|
// This requires the content component to have an @Input() property named 'data'.
|
|
219
218
|
if (this.config.data && componentRef.instance) {
|
|
@@ -232,31 +231,25 @@ class DialogWrapperComponent {
|
|
|
232
231
|
* Called when the dialog header is clicked.
|
|
233
232
|
*/
|
|
234
233
|
bringToFront() {
|
|
235
|
-
const pane = this.header?.nativeElement.closest('.cdk-overlay-pane');
|
|
234
|
+
const pane = this.header()?.nativeElement.closest('.cdk-overlay-pane');
|
|
236
235
|
if (pane) {
|
|
237
236
|
pane.style.zIndex = (++DialogWrapperComponent.lastZIndex).toString();
|
|
238
237
|
}
|
|
239
238
|
}
|
|
240
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
241
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
239
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DialogWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
240
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DialogWrapperComponent, isStandalone: true, selector: "acp-dialog-wrapper", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "header", first: true, predicate: ["dialogHeader"], descendants: true, isSignal: 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\n type=\"button\"\n mat-icon-button\n class=\"close-button\"\n (click)=\"onClose()\"\n aria-label=\"Cerrar di\u00E1logo\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </h6>\n </div>\n}\n\n<ng-template #contentHost />\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
241
|
}
|
|
243
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
242
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DialogWrapperComponent, decorators: [{
|
|
244
243
|
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\n type=\"button\"\n mat-icon-button\n class=\"close-button\"\n (click)=\"onClose()\"\n aria-label=\"Cerrar di\u00E1logo\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </h6>\n </div>\n}\n\n<ng-template #contentHost
|
|
246
|
-
}], ctorParameters: () => []
|
|
247
|
-
type: ViewChild,
|
|
248
|
-
args: ['contentHost', { read: ViewContainerRef, static: true }]
|
|
249
|
-
}], header: [{
|
|
250
|
-
type: ViewChild,
|
|
251
|
-
args: ['dialogHeader', { static: false }]
|
|
252
|
-
}] } });
|
|
244
|
+
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\n type=\"button\"\n mat-icon-button\n class=\"close-button\"\n (click)=\"onClose()\"\n aria-label=\"Cerrar di\u00E1logo\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </h6>\n </div>\n}\n\n<ng-template #contentHost />\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"] }]
|
|
245
|
+
}], ctorParameters: () => [] });
|
|
253
246
|
|
|
254
247
|
class IconUserComponent {
|
|
255
248
|
size = input('35', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
256
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
257
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
249
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: IconUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
250
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", 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
251
|
}
|
|
259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
252
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: IconUserComponent, decorators: [{
|
|
260
253
|
type: Component,
|
|
261
254
|
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
255
|
}] });
|
|
@@ -266,10 +259,10 @@ class SvgIconComponent {
|
|
|
266
259
|
width = input('40px', ...(ngDevMode ? [{ debugName: "width" }] : []));
|
|
267
260
|
height = input('40px', ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
268
261
|
color = input('#414141', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
269
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
270
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
262
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SvgIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
263
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", 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
264
|
}
|
|
272
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
265
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SvgIconComponent, decorators: [{
|
|
273
266
|
type: Component,
|
|
274
267
|
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
268
|
}] });
|
|
@@ -310,10 +303,10 @@ class MatInputChipComponent {
|
|
|
310
303
|
this.chips()[index] = value.replace(/\s+/g, '');
|
|
311
304
|
}
|
|
312
305
|
}
|
|
313
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
314
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
306
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatInputChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
307
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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
308
|
}
|
|
316
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
309
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatInputChipComponent, decorators: [{
|
|
317
310
|
type: Component,
|
|
318
311
|
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
312
|
}] });
|
|
@@ -356,53 +349,53 @@ class MatThemeButtonComponent {
|
|
|
356
349
|
return null;
|
|
357
350
|
}
|
|
358
351
|
}
|
|
359
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
360
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
352
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatThemeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
353
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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 />\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\" />\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 />\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 />\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 />\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 />\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 />\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 />\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\" />\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 />\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
354
|
}
|
|
362
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
355
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatThemeButtonComponent, decorators: [{
|
|
363
356
|
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
|
|
357
|
+
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 />\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\" />\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 />\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 />\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 />\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 />\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 />\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 />\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\" />\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 />\n </button>\n}\n" }]
|
|
365
358
|
}] });
|
|
366
359
|
|
|
367
360
|
class SpinnerComponent {
|
|
368
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
369
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
361
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
362
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: SpinnerComponent, isStandalone: true, selector: "acp-spinner", ngImport: i0, template: "<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
363
|
}
|
|
371
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
372
365
|
type: Component,
|
|
373
|
-
args: [{ selector: 'acp-spinner', imports: [MatProgressSpinner], template: "<mat-spinner
|
|
366
|
+
args: [{ selector: 'acp-spinner', imports: [MatProgressSpinner], template: "<mat-spinner />\n", styles: [":host{display:flex;justify-content:center;align-items:center;height:100%}\n"] }]
|
|
374
367
|
}] });
|
|
375
368
|
|
|
376
369
|
// custom-tabulator.component.ts
|
|
377
|
-
|
|
370
|
+
Tabulator.registerModule([PageModule, ReactiveDataModule]);
|
|
378
371
|
class CustomTabulatorComponent {
|
|
379
372
|
// Data inputs
|
|
380
|
-
data = [];
|
|
381
|
-
columns = [];
|
|
373
|
+
data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
374
|
+
columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
382
375
|
// Layout inputs
|
|
383
|
-
height = '400px';
|
|
384
|
-
layout = 'fitData';
|
|
376
|
+
height = input('400px', ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
377
|
+
layout = input('fitData', ...(ngDevMode ? [{ debugName: "layout" }] : []));
|
|
385
378
|
// Tree structure inputs
|
|
386
|
-
dataTree = false;
|
|
387
|
-
dataTreeChildField = 'children';
|
|
388
|
-
dataTreeStartExpanded = false;
|
|
389
|
-
dataTreeSelectPropagate = false;
|
|
379
|
+
dataTree = input(false, ...(ngDevMode ? [{ debugName: "dataTree" }] : []));
|
|
380
|
+
dataTreeChildField = input('children', ...(ngDevMode ? [{ debugName: "dataTreeChildField" }] : []));
|
|
381
|
+
dataTreeStartExpanded = input(false, ...(ngDevMode ? [{ debugName: "dataTreeStartExpanded" }] : []));
|
|
382
|
+
dataTreeSelectPropagate = input(false, ...(ngDevMode ? [{ debugName: "dataTreeSelectPropagate" }] : []));
|
|
390
383
|
// Behavior inputs
|
|
391
|
-
selectable = true;
|
|
392
|
-
reactiveData = true;
|
|
393
|
-
placeholder = 'No data available';
|
|
394
|
-
autoResize = true;
|
|
384
|
+
selectable = input(true, ...(ngDevMode ? [{ debugName: "selectable" }] : []));
|
|
385
|
+
reactiveData = input(true, ...(ngDevMode ? [{ debugName: "reactiveData" }] : []));
|
|
386
|
+
placeholder = input('No data available', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
387
|
+
autoResize = input(true, ...(ngDevMode ? [{ debugName: "autoResize" }] : []));
|
|
395
388
|
// Theme configuration
|
|
396
|
-
theme = { name: 'default' };
|
|
389
|
+
theme = input({ name: 'default' }, ...(ngDevMode ? [{ debugName: "theme" }] : []));
|
|
397
390
|
// Custom styling
|
|
398
|
-
customClass = '';
|
|
391
|
+
customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : []));
|
|
399
392
|
// Custom options
|
|
400
|
-
options = {};
|
|
393
|
+
options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
401
394
|
// Events
|
|
402
|
-
cellEdited =
|
|
403
|
-
rowClick =
|
|
404
|
-
rowSelected =
|
|
405
|
-
tableReady =
|
|
395
|
+
cellEdited = output();
|
|
396
|
+
rowClick = output();
|
|
397
|
+
rowSelected = output();
|
|
398
|
+
tableReady = output();
|
|
406
399
|
_tabulator;
|
|
407
400
|
// Made public for template access
|
|
408
401
|
containerId = `acp-tabulator-${Math.random().toString(36).substr(2, 9)}`;
|
|
@@ -420,7 +413,7 @@ class CustomTabulatorComponent {
|
|
|
420
413
|
this.applyTheme();
|
|
421
414
|
}
|
|
422
415
|
if (changes['customClass'] && !changes['customClass'].isFirstChange()) {
|
|
423
|
-
this.applyCustomClass(changes['customClass'].previousValue, this.customClass);
|
|
416
|
+
this.applyCustomClass(changes['customClass'].previousValue, this.customClass());
|
|
424
417
|
}
|
|
425
418
|
}
|
|
426
419
|
ngOnDestroy() {
|
|
@@ -436,24 +429,24 @@ class CustomTabulatorComponent {
|
|
|
436
429
|
return;
|
|
437
430
|
}
|
|
438
431
|
const config = {
|
|
439
|
-
data: this.data,
|
|
440
|
-
columns: this.columns,
|
|
441
|
-
height: this.height,
|
|
442
|
-
layout: this.layout,
|
|
443
|
-
dataTree: this.dataTree,
|
|
444
|
-
dataTreeChildField: this.dataTreeChildField,
|
|
445
|
-
dataTreeStartExpanded: this.dataTreeStartExpanded,
|
|
446
|
-
dataTreeSelectPropagate: this.dataTreeSelectPropagate,
|
|
447
|
-
reactiveData: this.reactiveData,
|
|
448
|
-
placeholder: this.placeholder,
|
|
449
|
-
autoResize: this.autoResize,
|
|
450
|
-
selectable: this.selectable,
|
|
432
|
+
data: this.data(),
|
|
433
|
+
columns: this.columns(),
|
|
434
|
+
height: this.height(),
|
|
435
|
+
layout: this.layout(),
|
|
436
|
+
dataTree: this.dataTree(),
|
|
437
|
+
dataTreeChildField: this.dataTreeChildField(),
|
|
438
|
+
dataTreeStartExpanded: this.dataTreeStartExpanded(),
|
|
439
|
+
dataTreeSelectPropagate: this.dataTreeSelectPropagate(),
|
|
440
|
+
reactiveData: this.reactiveData(),
|
|
441
|
+
placeholder: this.placeholder(),
|
|
442
|
+
autoResize: this.autoResize(),
|
|
443
|
+
selectable: this.selectable(),
|
|
451
444
|
renderVertical: 'virtual',
|
|
452
445
|
renderVerticalBuffer: 300,
|
|
453
|
-
...this.options,
|
|
446
|
+
...this.options(),
|
|
454
447
|
};
|
|
455
448
|
try {
|
|
456
|
-
this._tabulator = new
|
|
449
|
+
this._tabulator = new Tabulator(container, config);
|
|
457
450
|
this.applyTheme();
|
|
458
451
|
this.registerEvents();
|
|
459
452
|
this.tableReady.emit(this._tabulator);
|
|
@@ -469,11 +462,12 @@ class CustomTabulatorComponent {
|
|
|
469
462
|
// Remove existing theme classes
|
|
470
463
|
tableElement.classList.remove('tabulator-modern', 'tabulator-midnight', 'tabulator-simple', 'tabulator-site', 'tabulator-site-dark');
|
|
471
464
|
// Add current theme class (skip 'default' as it uses base styles)
|
|
472
|
-
|
|
473
|
-
|
|
465
|
+
const theme = this.theme();
|
|
466
|
+
if (theme.name !== 'default') {
|
|
467
|
+
tableElement.classList.add(`tabulator-${theme.name}`);
|
|
474
468
|
}
|
|
475
469
|
// Apply custom classes
|
|
476
|
-
this.applyCustomClass('', this.customClass);
|
|
470
|
+
this.applyCustomClass('', this.customClass());
|
|
477
471
|
}
|
|
478
472
|
}
|
|
479
473
|
applyCustomClass(previousClass, newClass) {
|
|
@@ -504,12 +498,12 @@ class CustomTabulatorComponent {
|
|
|
504
498
|
}
|
|
505
499
|
updateData() {
|
|
506
500
|
if (this._tabulator) {
|
|
507
|
-
this._tabulator.replaceData(this.data);
|
|
501
|
+
this._tabulator.replaceData(this.data());
|
|
508
502
|
}
|
|
509
503
|
}
|
|
510
504
|
updateColumns() {
|
|
511
505
|
if (this._tabulator) {
|
|
512
|
-
this._tabulator.setColumns(this.columns);
|
|
506
|
+
this._tabulator.setColumns(this.columns());
|
|
513
507
|
}
|
|
514
508
|
}
|
|
515
509
|
destroyTable() {
|
|
@@ -526,51 +520,13 @@ class CustomTabulatorComponent {
|
|
|
526
520
|
this._tabulator.redraw();
|
|
527
521
|
}
|
|
528
522
|
}
|
|
529
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
530
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
523
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CustomTabulatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
524
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: CustomTabulatorComponent, isStandalone: true, selector: "acp-tabulator", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, dataTree: { classPropertyName: "dataTree", publicName: "dataTree", isSignal: true, isRequired: false, transformFunction: null }, dataTreeChildField: { classPropertyName: "dataTreeChildField", publicName: "dataTreeChildField", isSignal: true, isRequired: false, transformFunction: null }, dataTreeStartExpanded: { classPropertyName: "dataTreeStartExpanded", publicName: "dataTreeStartExpanded", isSignal: true, isRequired: false, transformFunction: null }, dataTreeSelectPropagate: { classPropertyName: "dataTreeSelectPropagate", publicName: "dataTreeSelectPropagate", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, reactiveData: { classPropertyName: "reactiveData", publicName: "reactiveData", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellEdited: "cellEdited", rowClick: "rowClick", rowSelected: "rowSelected", tableReady: "tableReady" }, usesOnChanges: true, ngImport: i0, template: "<div [id]=\"containerId\" class=\"acp-tabulator-container\"></div>", styles: [".acp-tabulator-container{width:100%}.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"], encapsulation: i0.ViewEncapsulation.None });
|
|
531
525
|
}
|
|
532
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
526
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CustomTabulatorComponent, decorators: [{
|
|
533
527
|
type: Component,
|
|
534
|
-
args: [{ selector: 'acp-tabulator', standalone: true, imports: [
|
|
535
|
-
}]
|
|
536
|
-
type: Input
|
|
537
|
-
}], columns: [{
|
|
538
|
-
type: Input
|
|
539
|
-
}], height: [{
|
|
540
|
-
type: Input
|
|
541
|
-
}], layout: [{
|
|
542
|
-
type: Input
|
|
543
|
-
}], dataTree: [{
|
|
544
|
-
type: Input
|
|
545
|
-
}], dataTreeChildField: [{
|
|
546
|
-
type: Input
|
|
547
|
-
}], dataTreeStartExpanded: [{
|
|
548
|
-
type: Input
|
|
549
|
-
}], dataTreeSelectPropagate: [{
|
|
550
|
-
type: Input
|
|
551
|
-
}], selectable: [{
|
|
552
|
-
type: Input
|
|
553
|
-
}], reactiveData: [{
|
|
554
|
-
type: Input
|
|
555
|
-
}], placeholder: [{
|
|
556
|
-
type: Input
|
|
557
|
-
}], autoResize: [{
|
|
558
|
-
type: Input
|
|
559
|
-
}], theme: [{
|
|
560
|
-
type: Input
|
|
561
|
-
}], customClass: [{
|
|
562
|
-
type: Input
|
|
563
|
-
}], options: [{
|
|
564
|
-
type: Input
|
|
565
|
-
}], cellEdited: [{
|
|
566
|
-
type: Output
|
|
567
|
-
}], rowClick: [{
|
|
568
|
-
type: Output
|
|
569
|
-
}], rowSelected: [{
|
|
570
|
-
type: Output
|
|
571
|
-
}], tableReady: [{
|
|
572
|
-
type: Output
|
|
573
|
-
}] } });
|
|
528
|
+
args: [{ selector: 'acp-tabulator', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<div [id]=\"containerId\" class=\"acp-tabulator-container\"></div>", styles: [".acp-tabulator-container{width:100%}.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"] }]
|
|
529
|
+
}] });
|
|
574
530
|
|
|
575
531
|
class GetTotalPipe {
|
|
576
532
|
transform(colName, dataSource) {
|
|
@@ -585,10 +541,10 @@ class GetTotalPipe {
|
|
|
585
541
|
.reduce((acc, value) => (value ? acc + Number(value) : acc), 0);
|
|
586
542
|
return total?.toFixed(2);
|
|
587
543
|
}
|
|
588
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
589
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.
|
|
544
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GetTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
545
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: GetTotalPipe, isStandalone: true, name: "getTotal" });
|
|
590
546
|
}
|
|
591
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GetTotalPipe, decorators: [{
|
|
592
548
|
type: Pipe,
|
|
593
549
|
args: [{
|
|
594
550
|
name: 'getTotal',
|
|
@@ -643,10 +599,10 @@ class StatusDisplayPipe {
|
|
|
643
599
|
return gender === 'female' ? 'Inactiva' : 'Inactivo';
|
|
644
600
|
}
|
|
645
601
|
}
|
|
646
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
647
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.
|
|
602
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: StatusDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
603
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: StatusDisplayPipe, isStandalone: true, name: "statusDisplay" });
|
|
648
604
|
}
|
|
649
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
605
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: StatusDisplayPipe, decorators: [{
|
|
650
606
|
type: Pipe,
|
|
651
607
|
args: [{
|
|
652
608
|
name: 'statusDisplay',
|
|
@@ -657,37 +613,37 @@ class MatDynamicTableComponent {
|
|
|
657
613
|
componentRefs = [];
|
|
658
614
|
embeddedViews = [];
|
|
659
615
|
cdr = inject(ChangeDetectorRef);
|
|
660
|
-
showExpand = false;
|
|
661
|
-
showFooter = false;
|
|
662
|
-
locale = 'en-US';
|
|
663
|
-
highlightRowIndex = 0;
|
|
616
|
+
showExpand = input(false, ...(ngDevMode ? [{ debugName: "showExpand" }] : []));
|
|
617
|
+
showFooter = input(false, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
|
|
618
|
+
locale = input('en-US', ...(ngDevMode ? [{ debugName: "locale" }] : []));
|
|
619
|
+
highlightRowIndex = input(0, ...(ngDevMode ? [{ debugName: "highlightRowIndex" }] : []));
|
|
664
620
|
visibleColumns = [];
|
|
665
621
|
columnDefinitions = [];
|
|
666
|
-
showSelectBox = false;
|
|
667
|
-
tableData = [];
|
|
668
|
-
rowTemplate = null;
|
|
622
|
+
showSelectBox = input(false, ...(ngDevMode ? [{ debugName: "showSelectBox" }] : []));
|
|
623
|
+
tableData = input([], ...(ngDevMode ? [{ debugName: "tableData" }] : []));
|
|
624
|
+
rowTemplate = input(null, ...(ngDevMode ? [{ debugName: "rowTemplate" }] : []));
|
|
669
625
|
expandedDetail = null;
|
|
670
|
-
enablePagination = false;
|
|
626
|
+
enablePagination = input(false, ...(ngDevMode ? [{ debugName: "enablePagination" }] : []));
|
|
671
627
|
paginationConfig = null;
|
|
672
|
-
isLoadingData = false;
|
|
673
|
-
rowSelected =
|
|
674
|
-
copyRow =
|
|
675
|
-
showExpanded =
|
|
676
|
-
hideExpanded =
|
|
677
|
-
pageEvent =
|
|
628
|
+
isLoadingData = input(false, ...(ngDevMode ? [{ debugName: "isLoadingData" }] : []));
|
|
629
|
+
rowSelected = output();
|
|
630
|
+
copyRow = output();
|
|
631
|
+
showExpanded = output();
|
|
632
|
+
hideExpanded = output();
|
|
633
|
+
pageEvent = output();
|
|
678
634
|
isNormalRow = (_, row) => this.expandedElement !== row;
|
|
679
635
|
isExpandedRow = (_, row) => this.expandedElement === row;
|
|
680
636
|
dataSource = new MatTableDataSource([]);
|
|
681
637
|
selection = new SelectionModel(true, []);
|
|
682
638
|
expandedElement = null;
|
|
683
639
|
columnsToDisplayWithExpand = [];
|
|
684
|
-
headerRowDefs;
|
|
685
|
-
rowDefs;
|
|
686
|
-
footerRowDefs;
|
|
687
|
-
columnDefs;
|
|
688
|
-
noDataRow;
|
|
689
|
-
table;
|
|
690
|
-
rows;
|
|
640
|
+
headerRowDefs = contentChildren(MatHeaderRowDef, ...(ngDevMode ? [{ debugName: "headerRowDefs" }] : []));
|
|
641
|
+
rowDefs = contentChildren(MatRowDef, ...(ngDevMode ? [{ debugName: "rowDefs" }] : []));
|
|
642
|
+
footerRowDefs = contentChildren(MatFooterRowDef, ...(ngDevMode ? [{ debugName: "footerRowDefs" }] : []));
|
|
643
|
+
columnDefs = contentChildren(MatColumnDef, ...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
|
|
644
|
+
noDataRow = contentChild.required(MatNoDataRow);
|
|
645
|
+
table = viewChild.required(MatTable);
|
|
646
|
+
rows = contentChildren(ViewContainerRef, ...(ngDevMode ? [{ debugName: "rows" }] : []));
|
|
691
647
|
ngOnInit() {
|
|
692
648
|
this.updateColumnsToDisplay();
|
|
693
649
|
this.initializeSelection();
|
|
@@ -714,7 +670,7 @@ class MatDynamicTableComponent {
|
|
|
714
670
|
// Clear selection when new data arrives
|
|
715
671
|
this.selection.clear();
|
|
716
672
|
// Update data source
|
|
717
|
-
this.dataSource.data = this.tableData || [];
|
|
673
|
+
this.dataSource.data = this.tableData() || [];
|
|
718
674
|
// Reset expanded element if it's no longer in the new data
|
|
719
675
|
if (this.expandedElement && !this.dataSource.data.includes(this.expandedElement)) {
|
|
720
676
|
this.expandedElement = null;
|
|
@@ -728,10 +684,10 @@ class MatDynamicTableComponent {
|
|
|
728
684
|
this.columnDefinitions.forEach((col, index) => (col.index = index));
|
|
729
685
|
}
|
|
730
686
|
const newColumns = [...this.visibleColumns];
|
|
731
|
-
if (this.showSelectBox && !newColumns.includes('select')) {
|
|
687
|
+
if (this.showSelectBox() && !newColumns.includes('select')) {
|
|
732
688
|
newColumns.unshift('select');
|
|
733
689
|
}
|
|
734
|
-
if (this.showExpand && this.expandedDetail) {
|
|
690
|
+
if (this.showExpand() && this.expandedDetail) {
|
|
735
691
|
if (!this.columnDefinitions?.some(col => col.key === 'expand')) {
|
|
736
692
|
this.columnDefinitions = [
|
|
737
693
|
...(this.columnDefinitions || []),
|
|
@@ -753,21 +709,22 @@ class MatDynamicTableComponent {
|
|
|
753
709
|
this.selection = new SelectionModel(true, []);
|
|
754
710
|
}
|
|
755
711
|
registerTableContent() {
|
|
756
|
-
this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef));
|
|
757
|
-
this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));
|
|
758
|
-
this.headerRowDefs.forEach(headerRowDef => this.table.addHeaderRowDef(headerRowDef));
|
|
759
|
-
if (this.showFooter) {
|
|
760
|
-
this.footerRowDefs.forEach(footerRowDef => this.table.addFooterRowDef(footerRowDef));
|
|
712
|
+
this.columnDefs().forEach(columnDef => this.table().addColumnDef(columnDef));
|
|
713
|
+
this.rowDefs().forEach(rowDef => this.table().addRowDef(rowDef));
|
|
714
|
+
this.headerRowDefs().forEach(headerRowDef => this.table().addHeaderRowDef(headerRowDef));
|
|
715
|
+
if (this.showFooter()) {
|
|
716
|
+
this.footerRowDefs().forEach(footerRowDef => this.table().addFooterRowDef(footerRowDef));
|
|
761
717
|
}
|
|
762
718
|
else {
|
|
763
|
-
this.footerRowDefs.forEach(footerRowDef => this.table.removeFooterRowDef(footerRowDef));
|
|
719
|
+
this.footerRowDefs().forEach(footerRowDef => this.table().removeFooterRowDef(footerRowDef));
|
|
764
720
|
}
|
|
765
|
-
|
|
766
|
-
|
|
721
|
+
const noDataRow = this.noDataRow();
|
|
722
|
+
if (noDataRow) {
|
|
723
|
+
this.table().setNoDataRow(noDataRow);
|
|
767
724
|
}
|
|
768
725
|
}
|
|
769
726
|
initializeTable() {
|
|
770
|
-
this.dataSource = new MatTableDataSource(this.tableData || []);
|
|
727
|
+
this.dataSource = new MatTableDataSource(this.tableData() || []);
|
|
771
728
|
}
|
|
772
729
|
cleanupDynamicComponents() {
|
|
773
730
|
this.componentRefs.forEach(ref => ref.destroy());
|
|
@@ -808,8 +765,8 @@ class MatDynamicTableComponent {
|
|
|
808
765
|
handlePageEvent(e) {
|
|
809
766
|
this.pageEvent.emit(e);
|
|
810
767
|
}
|
|
811
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
812
|
-
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: [
|
|
768
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatDynamicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
769
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: MatDynamicTableComponent, isStandalone: true, selector: "acp-mat-dynamic-table", inputs: { showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, highlightRowIndex: { classPropertyName: "highlightRowIndex", publicName: "highlightRowIndex", isSignal: true, isRequired: false, transformFunction: null }, visibleColumns: { classPropertyName: "visibleColumns", publicName: "visibleColumns", isSignal: false, isRequired: false, transformFunction: null }, columnDefinitions: { classPropertyName: "columnDefinitions", publicName: "columnDefinitions", isSignal: false, isRequired: false, transformFunction: null }, showSelectBox: { classPropertyName: "showSelectBox", publicName: "showSelectBox", isSignal: true, isRequired: false, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: false, transformFunction: null }, rowTemplate: { classPropertyName: "rowTemplate", publicName: "rowTemplate", isSignal: true, isRequired: false, transformFunction: null }, expandedDetail: { classPropertyName: "expandedDetail", publicName: "expandedDetail", isSignal: false, isRequired: false, transformFunction: null }, enablePagination: { classPropertyName: "enablePagination", publicName: "enablePagination", isSignal: true, isRequired: false, transformFunction: null }, paginationConfig: { classPropertyName: "paginationConfig", publicName: "paginationConfig", isSignal: false, isRequired: false, transformFunction: null }, isLoadingData: { classPropertyName: "isLoadingData", publicName: "isLoadingData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowSelected: "rowSelected", copyRow: "copyRow", showExpanded: "showExpanded", hideExpanded: "hideExpanded", pageEvent: "pageEvent" }, queries: [{ propertyName: "headerRowDefs", predicate: MatHeaderRowDef, isSignal: true }, { propertyName: "rowDefs", predicate: MatRowDef, isSignal: true }, { propertyName: "footerRowDefs", predicate: MatFooterRowDef, isSignal: true }, { propertyName: "columnDefs", predicate: MatColumnDef, isSignal: true }, { propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true, isSignal: true }, { propertyName: "rows", predicate: ViewContainerRef, isSignal: true }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: 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 (change)=\"$event ? masterToggle() : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel()\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n />\n </th>\n <td *matCellDef=\"let row\" mat-cell>\n <mat-checkbox (change)=\"$event ? selection.toggle(row) : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel(row)\"\n [checked]=\"selection.isSelected(row)\"\n />\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 *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: element, index: i }\"\n />\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 *ngTemplateOutlet=\"\n col.templateOutlet;\n context: { $implicit: element, index: i }\n \"\n />\n }\n @case ('custom') {\n <ng-container #dynamicContent />\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 *ngTemplateOutlet=\"expandedDetail; context: { $implicit: element, index: i }\"\n />\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 #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 />\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: [
|
|
813
770
|
trigger('detailExpand', [
|
|
814
771
|
state('collapsed,void', style({ height: '0px', minHeight: '0' })),
|
|
815
772
|
state('expanded', style({ height: '*' })),
|
|
@@ -817,7 +774,7 @@ class MatDynamicTableComponent {
|
|
|
817
774
|
]),
|
|
818
775
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
819
776
|
}
|
|
820
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
777
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatDynamicTableComponent, decorators: [{
|
|
821
778
|
type: Component,
|
|
822
779
|
args: [{ selector: 'acp-mat-dynamic-table', standalone: true, imports: [
|
|
823
780
|
MatTableModule,
|
|
@@ -837,64 +794,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
837
794
|
state('expanded', style({ height: '*' })),
|
|
838
795
|
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
839
796
|
]),
|
|
840
|
-
], 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
|
|
841
|
-
}], propDecorators: {
|
|
842
|
-
type: Input
|
|
843
|
-
}], showFooter: [{
|
|
844
|
-
type: Input
|
|
845
|
-
}], locale: [{
|
|
846
|
-
type: Input
|
|
847
|
-
}], highlightRowIndex: [{
|
|
848
|
-
type: Input
|
|
849
|
-
}], visibleColumns: [{
|
|
797
|
+
], 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 (change)=\"$event ? masterToggle() : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel()\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n />\n </th>\n <td *matCellDef=\"let row\" mat-cell>\n <mat-checkbox (change)=\"$event ? selection.toggle(row) : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel(row)\"\n [checked]=\"selection.isSelected(row)\"\n />\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 *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: element, index: i }\"\n />\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 *ngTemplateOutlet=\"\n col.templateOutlet;\n context: { $implicit: element, index: i }\n \"\n />\n }\n @case ('custom') {\n <ng-container #dynamicContent />\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 *ngTemplateOutlet=\"expandedDetail; context: { $implicit: element, index: i }\"\n />\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 #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 />\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"] }]
|
|
798
|
+
}], propDecorators: { visibleColumns: [{
|
|
850
799
|
type: Input
|
|
851
800
|
}], columnDefinitions: [{
|
|
852
801
|
type: Input
|
|
853
|
-
}], showSelectBox: [{
|
|
854
|
-
type: Input
|
|
855
|
-
}], tableData: [{
|
|
856
|
-
type: Input
|
|
857
|
-
}], rowTemplate: [{
|
|
858
|
-
type: Input
|
|
859
802
|
}], expandedDetail: [{
|
|
860
803
|
type: Input
|
|
861
|
-
}], enablePagination: [{
|
|
862
|
-
type: Input
|
|
863
804
|
}], paginationConfig: [{
|
|
864
805
|
type: Input
|
|
865
|
-
}], isLoadingData: [{
|
|
866
|
-
type: Input
|
|
867
|
-
}], rowSelected: [{
|
|
868
|
-
type: Output
|
|
869
|
-
}], copyRow: [{
|
|
870
|
-
type: Output
|
|
871
|
-
}], showExpanded: [{
|
|
872
|
-
type: Output
|
|
873
|
-
}], hideExpanded: [{
|
|
874
|
-
type: Output
|
|
875
|
-
}], pageEvent: [{
|
|
876
|
-
type: Output
|
|
877
|
-
}], headerRowDefs: [{
|
|
878
|
-
type: ContentChildren,
|
|
879
|
-
args: [MatHeaderRowDef]
|
|
880
|
-
}], rowDefs: [{
|
|
881
|
-
type: ContentChildren,
|
|
882
|
-
args: [MatRowDef]
|
|
883
|
-
}], footerRowDefs: [{
|
|
884
|
-
type: ContentChildren,
|
|
885
|
-
args: [MatFooterRowDef]
|
|
886
|
-
}], columnDefs: [{
|
|
887
|
-
type: ContentChildren,
|
|
888
|
-
args: [MatColumnDef]
|
|
889
|
-
}], noDataRow: [{
|
|
890
|
-
type: ContentChild,
|
|
891
|
-
args: [MatNoDataRow]
|
|
892
|
-
}], table: [{
|
|
893
|
-
type: ViewChild,
|
|
894
|
-
args: [MatTable, { static: true }]
|
|
895
|
-
}], rows: [{
|
|
896
|
-
type: ContentChildren,
|
|
897
|
-
args: [ViewContainerRef]
|
|
898
806
|
}] } });
|
|
899
807
|
|
|
900
808
|
class AdvancedDialogService {
|
|
@@ -1011,10 +919,10 @@ class AdvancedDialogService {
|
|
|
1011
919
|
};
|
|
1012
920
|
return sizeMap[size];
|
|
1013
921
|
}
|
|
1014
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1015
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
922
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AdvancedDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
923
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AdvancedDialogService, providedIn: 'root' });
|
|
1016
924
|
}
|
|
1017
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
925
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AdvancedDialogService, decorators: [{
|
|
1018
926
|
type: Injectable,
|
|
1019
927
|
args: [{
|
|
1020
928
|
providedIn: 'root',
|
|
@@ -1041,10 +949,10 @@ class OverlayService {
|
|
|
1041
949
|
this.overlayRef = null;
|
|
1042
950
|
}
|
|
1043
951
|
}
|
|
1044
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1045
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
952
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
953
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: OverlayService, providedIn: 'root' });
|
|
1046
954
|
}
|
|
1047
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
955
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: OverlayService, decorators: [{
|
|
1048
956
|
type: Injectable,
|
|
1049
957
|
args: [{
|
|
1050
958
|
providedIn: 'root',
|
|
@@ -1081,10 +989,10 @@ class ThemeService {
|
|
|
1081
989
|
document.body.classList.remove('dark-theme');
|
|
1082
990
|
}
|
|
1083
991
|
}
|
|
1084
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1085
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
992
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
993
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ThemeService, providedIn: 'root' });
|
|
1086
994
|
}
|
|
1087
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
995
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ThemeService, decorators: [{
|
|
1088
996
|
type: Injectable,
|
|
1089
997
|
args: [{
|
|
1090
998
|
providedIn: 'root',
|
|
@@ -1511,10 +1419,10 @@ class AutocompleteWrapperService {
|
|
|
1511
1419
|
],
|
|
1512
1420
|
});
|
|
1513
1421
|
}
|
|
1514
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1515
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1422
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AutocompleteWrapperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1423
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AutocompleteWrapperService, providedIn: 'root' });
|
|
1516
1424
|
}
|
|
1517
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1425
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AutocompleteWrapperService, decorators: [{
|
|
1518
1426
|
type: Injectable,
|
|
1519
1427
|
args: [{
|
|
1520
1428
|
providedIn: 'root',
|
|
@@ -1530,10 +1438,10 @@ class ThemeToggleComponent {
|
|
|
1530
1438
|
toggleDarkMode() {
|
|
1531
1439
|
this.themeService.toggleDarkMode();
|
|
1532
1440
|
}
|
|
1533
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1534
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
1441
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1442
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", 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" }] });
|
|
1535
1443
|
}
|
|
1536
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1444
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ThemeToggleComponent, decorators: [{
|
|
1537
1445
|
type: Component,
|
|
1538
1446
|
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" }]
|
|
1539
1447
|
}], ctorParameters: () => [] });
|
|
@@ -1672,11 +1580,11 @@ class Pagination {
|
|
|
1672
1580
|
}
|
|
1673
1581
|
|
|
1674
1582
|
class ReusableAutocompleteComponent {
|
|
1675
|
-
dataSource = []; // Para búsqueda local
|
|
1583
|
+
dataSource = input([], ...(ngDevMode ? [{ debugName: "dataSource" }] : [])); // Para búsqueda local
|
|
1676
1584
|
config = AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG;
|
|
1677
|
-
itemTemplate;
|
|
1678
|
-
searchFunction;
|
|
1679
|
-
notFoundTemplate;
|
|
1585
|
+
itemTemplate = input(...(ngDevMode ? [undefined, { debugName: "itemTemplate" }] : []));
|
|
1586
|
+
searchFunction = input(...(ngDevMode ? [undefined, { debugName: "searchFunction" }] : []));
|
|
1587
|
+
notFoundTemplate = input(...(ngDevMode ? [undefined, { debugName: "notFoundTemplate" }] : []));
|
|
1680
1588
|
overlayWidth = input('auto', ...(ngDevMode ? [{ debugName: "overlayWidth" }] : []));
|
|
1681
1589
|
overlayMaxHeight = input('400px', ...(ngDevMode ? [{ debugName: "overlayMaxHeight" }] : []));
|
|
1682
1590
|
itemSelected = output();
|
|
@@ -1687,9 +1595,9 @@ class ReusableAutocompleteComponent {
|
|
|
1687
1595
|
advancedSearchClicked = output();
|
|
1688
1596
|
allResultsClicked = output();
|
|
1689
1597
|
createClicked = output();
|
|
1690
|
-
searchInput;
|
|
1691
|
-
historyListElement;
|
|
1692
|
-
resultsListElement;
|
|
1598
|
+
searchInput = viewChild.required('searchInput');
|
|
1599
|
+
historyListElement = viewChild('historyListElement', ...(ngDevMode ? [{ debugName: "historyListElement" }] : []));
|
|
1600
|
+
resultsListElement = viewChild('resultsListElement', ...(ngDevMode ? [{ debugName: "resultsListElement" }] : []));
|
|
1693
1601
|
// State
|
|
1694
1602
|
query = '';
|
|
1695
1603
|
isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
|
|
@@ -1788,8 +1696,9 @@ class ReusableAutocompleteComponent {
|
|
|
1788
1696
|
return of({ items: [], totalCount: 0 });
|
|
1789
1697
|
}
|
|
1790
1698
|
// ESTRATEGIA A: Función de búsqueda personalizada
|
|
1791
|
-
|
|
1792
|
-
|
|
1699
|
+
const searchFunction = this.searchFunction();
|
|
1700
|
+
if (searchFunction) {
|
|
1701
|
+
return searchFunction(query, this.filters, this.currentPage(), this.config.itemsPerPage || 10).pipe(catchError(() => of({ items: [], totalCount: 0 })));
|
|
1793
1702
|
}
|
|
1794
1703
|
// ESTRATEGIA B: Emit evento para que el padre maneje
|
|
1795
1704
|
if (this.config.searchMode === 'remote') {
|
|
@@ -1801,7 +1710,7 @@ class ReusableAutocompleteComponent {
|
|
|
1801
1710
|
return of({ items: [], totalCount: 0 }); // El padre actualizará los datos
|
|
1802
1711
|
}
|
|
1803
1712
|
// ESTRATEGIA C: Búsqueda local (fallback)
|
|
1804
|
-
return this.autocompleteService.searchLocal(this.dataSource, query, this.filters, this.config);
|
|
1713
|
+
return this.autocompleteService.searchLocal(this.dataSource(), query, this.filters, this.config);
|
|
1805
1714
|
}
|
|
1806
1715
|
loadHistory() {
|
|
1807
1716
|
this.autocompleteService.history$.pipe(takeUntil(this.destroy$)).subscribe(history => {
|
|
@@ -1914,7 +1823,7 @@ class ReusableAutocompleteComponent {
|
|
|
1914
1823
|
this.autocompleteService.addToHistory(item, this.config.maxHistoryItems);
|
|
1915
1824
|
this.itemSelected.emit(item);
|
|
1916
1825
|
setTimeout(() => {
|
|
1917
|
-
this.searchInput?.nativeElement?.focus();
|
|
1826
|
+
this.searchInput()?.nativeElement?.focus();
|
|
1918
1827
|
}, 100);
|
|
1919
1828
|
}
|
|
1920
1829
|
clearSearch() {
|
|
@@ -1922,7 +1831,7 @@ class ReusableAutocompleteComponent {
|
|
|
1922
1831
|
this.filteredItems.set([]);
|
|
1923
1832
|
this.selectedIndex.set(-1);
|
|
1924
1833
|
this.currentPage.set(1);
|
|
1925
|
-
this.searchInput?.nativeElement?.focus();
|
|
1834
|
+
this.searchInput()?.nativeElement?.focus();
|
|
1926
1835
|
this.searchChanged.emit('');
|
|
1927
1836
|
}
|
|
1928
1837
|
// History Methods
|
|
@@ -2005,8 +1914,8 @@ class ReusableAutocompleteComponent {
|
|
|
2005
1914
|
}
|
|
2006
1915
|
scrollToSelected() {
|
|
2007
1916
|
const listElement = this.isHistoryVisible()
|
|
2008
|
-
? this.historyListElement?.nativeElement
|
|
2009
|
-
: this.resultsListElement?.nativeElement;
|
|
1917
|
+
? this.historyListElement()?.nativeElement
|
|
1918
|
+
: this.resultsListElement()?.nativeElement;
|
|
2010
1919
|
if (listElement) {
|
|
2011
1920
|
const selectedElement = listElement.children[this.selectedIndex()];
|
|
2012
1921
|
if (selectedElement) {
|
|
@@ -2056,12 +1965,12 @@ class ReusableAutocompleteComponent {
|
|
|
2056
1965
|
this.searchChanged.emit(query);
|
|
2057
1966
|
}
|
|
2058
1967
|
focus() {
|
|
2059
|
-
this.searchInput?.nativeElement?.focus();
|
|
1968
|
+
this.searchInput()?.nativeElement?.focus();
|
|
2060
1969
|
}
|
|
2061
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2062
|
-
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"] }] });
|
|
1970
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ReusableAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1971
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: ReusableAutocompleteComponent, isStandalone: true, selector: "acp-autocomplete-wrapper", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, notFoundTemplate: { classPropertyName: "notFoundTemplate", publicName: "notFoundTemplate", isSignal: true, 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, isSignal: true }, { propertyName: "historyListElement", first: true, predicate: ["historyListElement"], descendants: true, isSignal: true }, { propertyName: "resultsListElement", first: true, predicate: ["resultsListElement"], descendants: true, isSignal: 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\" />\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 *ngTemplateOutlet=\"\n itemTemplate() || defaultItemTemplate;\n context: { $implicit: item }\n \"\n />\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 *ngTemplateOutlet=\"\n itemTemplate() || defaultItemTemplate;\n context: { $implicit: item }\n \"\n />\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 *ngTemplateOutlet=\"\n notFoundTemplate() || defaultNotFoundTemplate;\n context: { $implicit: noResultsText() }\n \"\n />\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"] }] });
|
|
2063
1972
|
}
|
|
2064
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1973
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ReusableAutocompleteComponent, decorators: [{
|
|
2065
1974
|
type: Component,
|
|
2066
1975
|
args: [{ selector: 'acp-autocomplete-wrapper', imports: [
|
|
2067
1976
|
MatIcon,
|
|
@@ -2071,26 +1980,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
2071
1980
|
MatProgressSpinner,
|
|
2072
1981
|
FormsModule,
|
|
2073
1982
|
MatIconButton,
|
|
2074
|
-
], 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"] }]
|
|
2075
|
-
}], propDecorators: {
|
|
2076
|
-
type: Input
|
|
2077
|
-
}], config: [{
|
|
2078
|
-
type: Input
|
|
2079
|
-
}], itemTemplate: [{
|
|
2080
|
-
type: Input
|
|
2081
|
-
}], searchFunction: [{
|
|
1983
|
+
], 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\" />\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 *ngTemplateOutlet=\"\n itemTemplate() || defaultItemTemplate;\n context: { $implicit: item }\n \"\n />\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 *ngTemplateOutlet=\"\n itemTemplate() || defaultItemTemplate;\n context: { $implicit: item }\n \"\n />\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 *ngTemplateOutlet=\"\n notFoundTemplate() || defaultNotFoundTemplate;\n context: { $implicit: noResultsText() }\n \"\n />\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"] }]
|
|
1984
|
+
}], propDecorators: { config: [{
|
|
2082
1985
|
type: Input
|
|
2083
|
-
}], notFoundTemplate: [{
|
|
2084
|
-
type: Input
|
|
2085
|
-
}], searchInput: [{
|
|
2086
|
-
type: ViewChild,
|
|
2087
|
-
args: ['searchInput']
|
|
2088
|
-
}], historyListElement: [{
|
|
2089
|
-
type: ViewChild,
|
|
2090
|
-
args: ['historyListElement']
|
|
2091
|
-
}], resultsListElement: [{
|
|
2092
|
-
type: ViewChild,
|
|
2093
|
-
args: ['resultsListElement']
|
|
2094
1986
|
}] } });
|
|
2095
1987
|
|
|
2096
1988
|
class ToUpperCaseDirective {
|
|
@@ -2115,8 +2007,8 @@ class ToUpperCaseDirective {
|
|
|
2115
2007
|
registerOnTouched(fn) {
|
|
2116
2008
|
this.onTouched = fn;
|
|
2117
2009
|
}
|
|
2118
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2119
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
2010
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ToUpperCaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2011
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.2", type: ToUpperCaseDirective, isStandalone: true, selector: "[acpToUpperCase]", host: { listeners: { "input": "onInput()" } }, providers: [
|
|
2120
2012
|
{
|
|
2121
2013
|
provide: NG_VALUE_ACCESSOR,
|
|
2122
2014
|
useExisting: ToUpperCaseDirective,
|
|
@@ -2124,7 +2016,7 @@ class ToUpperCaseDirective {
|
|
|
2124
2016
|
},
|
|
2125
2017
|
], ngImport: i0 });
|
|
2126
2018
|
}
|
|
2127
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2019
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ToUpperCaseDirective, decorators: [{
|
|
2128
2020
|
type: Directive,
|
|
2129
2021
|
args: [{
|
|
2130
2022
|
selector: '[acpToUpperCase]',
|
|
@@ -2146,74 +2038,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
2146
2038
|
*/
|
|
2147
2039
|
const DYNAMIC_INPUT = new InjectionToken('DYNAMIC_INPUT');
|
|
2148
2040
|
|
|
2149
|
-
/**
|
|
2150
|
-
* Token to determine if a request should show spinner
|
|
2151
|
-
* Default is true (show spinner for all requests)
|
|
2152
|
-
*/
|
|
2153
|
-
const SHOW_SPINNER = new HttpContextToken(() => true);
|
|
2154
|
-
const requests = [];
|
|
2155
|
-
/**
|
|
2156
|
-
* Helper function to disable spinner for specific requests
|
|
2157
|
-
* @returns HttpContext with spinner disabled
|
|
2158
|
-
*/
|
|
2159
|
-
function withoutSpinner() {
|
|
2160
|
-
return new HttpContext().set(SHOW_SPINNER, false);
|
|
2161
|
-
}
|
|
2162
|
-
/**
|
|
2163
|
-
* Service to track active HTTP requests
|
|
2164
|
-
*/
|
|
2165
|
-
class ActiveRequestsTracker {
|
|
2166
|
-
get count() {
|
|
2167
|
-
return requests.length;
|
|
2168
|
-
}
|
|
2169
|
-
add(request) {
|
|
2170
|
-
requests.push(request);
|
|
2171
|
-
}
|
|
2172
|
-
remove(request) {
|
|
2173
|
-
const index = requests.indexOf(request);
|
|
2174
|
-
if (index >= 0) {
|
|
2175
|
-
requests.splice(index, 1);
|
|
2176
|
-
}
|
|
2177
|
-
}
|
|
2178
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ActiveRequestsTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2179
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ActiveRequestsTracker, providedIn: 'root' });
|
|
2180
|
-
}
|
|
2181
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ActiveRequestsTracker, decorators: [{
|
|
2182
|
-
type: Injectable,
|
|
2183
|
-
args: [{
|
|
2184
|
-
providedIn: 'root',
|
|
2185
|
-
}]
|
|
2186
|
-
}] });
|
|
2187
|
-
/**
|
|
2188
|
-
* Interceptor that shows/hides a loading spinner based on active HTTP requests
|
|
2189
|
-
*/
|
|
2190
|
-
const spinnerInterceptor = (req, next) => {
|
|
2191
|
-
// Track active requests requiring spinner
|
|
2192
|
-
console.log(requests);
|
|
2193
|
-
const activeRequests = inject(ActiveRequestsTracker);
|
|
2194
|
-
const overlayService = inject(OverlayService);
|
|
2195
|
-
// Skip spinner if disabled for this request
|
|
2196
|
-
if (!req.context.get(SHOW_SPINNER)) {
|
|
2197
|
-
return next(req);
|
|
2198
|
-
}
|
|
2199
|
-
// Add request to tracking
|
|
2200
|
-
activeRequests.add(req);
|
|
2201
|
-
// Show spinner if this is the first active request
|
|
2202
|
-
if (activeRequests.count === 1) {
|
|
2203
|
-
overlayService.showSpinner();
|
|
2204
|
-
}
|
|
2205
|
-
return next(req).pipe(finalize(() => {
|
|
2206
|
-
// Remove request and hide spinner if no more active requests
|
|
2207
|
-
activeRequests.remove(req);
|
|
2208
|
-
if (activeRequests.count === 0) {
|
|
2209
|
-
overlayService.hideSpinner();
|
|
2210
|
-
}
|
|
2211
|
-
}));
|
|
2212
|
-
};
|
|
2213
|
-
|
|
2214
2041
|
/**
|
|
2215
2042
|
* Generated bundle index. Do not edit.
|
|
2216
2043
|
*/
|
|
2217
2044
|
|
|
2218
|
-
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,
|
|
2045
|
+
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, 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 };
|
|
2219
2046
|
//# sourceMappingURL=acontplus-ng-components.mjs.map
|