@acontplus/ng-components 1.0.12 → 1.0.13
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/README.md +17 -0
- package/fesm2022/acontplus-ng-components.mjs +25 -23
- package/fesm2022/acontplus-ng-components.mjs.map +1 -1
- package/index.d.ts +4 -5
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, booleanAttribute, output, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy,
|
|
2
|
+
import { input, booleanAttribute, output, ViewEncapsulation, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, Pipe, ChangeDetectorRef, contentChildren, 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';
|
|
@@ -157,11 +157,11 @@ class MatDynamicCardComponent {
|
|
|
157
157
|
this.cardClicked.emit(event);
|
|
158
158
|
}
|
|
159
159
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatDynamicCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
160
|
-
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"] }] });
|
|
160
|
+
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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
161
161
|
}
|
|
162
162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatDynamicCardComponent, decorators: [{
|
|
163
163
|
type: Component,
|
|
164
|
-
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" }]
|
|
164
|
+
args: [{ selector: 'acp-mat-dynamic-card', standalone: true, imports: [MatCardModule, MatButtonModule, MatIconModule], encapsulation: ViewEncapsulation.None, 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" }]
|
|
165
165
|
}] });
|
|
166
166
|
|
|
167
167
|
/**
|
|
@@ -207,7 +207,9 @@ class DialogWrapperComponent {
|
|
|
207
207
|
* @param dialogRef Reference to the dialog opened via the Material Dialog service
|
|
208
208
|
* @param config Configuration for the dialog wrapper, injected from MAT_DIALOG_DATA
|
|
209
209
|
*/
|
|
210
|
-
constructor() {
|
|
210
|
+
constructor() {
|
|
211
|
+
// Constructor intentionally empty - required by Angular DI
|
|
212
|
+
}
|
|
211
213
|
/**
|
|
212
214
|
* Lifecycle hook that initializes the dynamic content after the view is ready.
|
|
213
215
|
* Creates the component specified in the config and passes data to it.
|
|
@@ -258,21 +260,21 @@ class DialogWrapperComponent {
|
|
|
258
260
|
});
|
|
259
261
|
}
|
|
260
262
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DialogWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
261
|
-
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 });
|
|
263
|
+
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, encapsulation: i0.ViewEncapsulation.None });
|
|
262
264
|
}
|
|
263
265
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DialogWrapperComponent, decorators: [{
|
|
264
266
|
type: Component,
|
|
265
|
-
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"] }]
|
|
267
|
+
args: [{ selector: 'acp-dialog-wrapper', standalone: true, imports: [CdkDrag, CdkDragHandle, MatDialogModule, MatIconModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
|
|
266
268
|
}], ctorParameters: () => [] });
|
|
267
269
|
|
|
268
270
|
class IconUserComponent {
|
|
269
271
|
size = input('35', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
270
272
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: IconUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
271
|
-
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: [""] });
|
|
273
|
+
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: [""], encapsulation: i0.ViewEncapsulation.None });
|
|
272
274
|
}
|
|
273
275
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: IconUserComponent, decorators: [{
|
|
274
276
|
type: Component,
|
|
275
|
-
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" }]
|
|
277
|
+
args: [{ selector: 'acp-icon-user', imports: [], encapsulation: ViewEncapsulation.None, 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" }]
|
|
276
278
|
}] });
|
|
277
279
|
|
|
278
280
|
class SvgIconComponent {
|
|
@@ -281,11 +283,11 @@ class SvgIconComponent {
|
|
|
281
283
|
height = input('40px', ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
282
284
|
color = input('#414141', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
283
285
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SvgIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
284
|
-
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: [""] });
|
|
286
|
+
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: [""], encapsulation: i0.ViewEncapsulation.None });
|
|
285
287
|
}
|
|
286
288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SvgIconComponent, decorators: [{
|
|
287
289
|
type: Component,
|
|
288
|
-
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" }]
|
|
290
|
+
args: [{ selector: 'acp-svg-icon', imports: [], encapsulation: ViewEncapsulation.None, template: "<svg [attr.width]=\"width()\" [attr.height]=\"height()\" [style.color]=\"color()\">\n <use [attr.xlink:href]=\"'./svg-sprite.svg#' + id()\"></use>\n</svg>\n" }]
|
|
289
291
|
}] });
|
|
290
292
|
|
|
291
293
|
class MatInputChipComponent {
|
|
@@ -325,11 +327,11 @@ class MatInputChipComponent {
|
|
|
325
327
|
}
|
|
326
328
|
}
|
|
327
329
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatInputChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
328
|
-
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"] }] });
|
|
330
|
+
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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
329
331
|
}
|
|
330
332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatInputChipComponent, decorators: [{
|
|
331
333
|
type: Component,
|
|
332
|
-
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" }]
|
|
334
|
+
args: [{ selector: 'acp-mat-input-chip', imports: [MatFormField, MatLabel, MatChipRow, MatIcon, MatHint, MatChipGrid, MatChipInput], encapsulation: ViewEncapsulation.None, 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" }]
|
|
333
335
|
}] });
|
|
334
336
|
|
|
335
337
|
class MatThemeButtonComponent {
|
|
@@ -371,20 +373,20 @@ class MatThemeButtonComponent {
|
|
|
371
373
|
}
|
|
372
374
|
}
|
|
373
375
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatThemeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
374
|
-
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"] }] });
|
|
376
|
+
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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
375
377
|
}
|
|
376
378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatThemeButtonComponent, decorators: [{
|
|
377
379
|
type: Component,
|
|
378
|
-
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" }]
|
|
380
|
+
args: [{ selector: 'acp-mat-theme-button', imports: [MatButton, NgClass, MatIcon, MatMiniFabButton, MatIconButton, MatFabButton], encapsulation: ViewEncapsulation.None, 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" }]
|
|
379
381
|
}] });
|
|
380
382
|
|
|
381
383
|
class SpinnerComponent {
|
|
382
384
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
383
|
-
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"] }] });
|
|
385
|
+
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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
384
386
|
}
|
|
385
387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
386
388
|
type: Component,
|
|
387
|
-
args: [{ selector: 'acp-spinner', imports: [MatProgressSpinner], template: "<mat-spinner />\n", styles: [":host{display:flex;justify-content:center;align-items:center;height:100%}\n"] }]
|
|
389
|
+
args: [{ selector: 'acp-spinner', imports: [MatProgressSpinner], encapsulation: ViewEncapsulation.None, template: "<mat-spinner />\n", styles: [":host{display:flex;justify-content:center;align-items:center;height:100%}\n"] }]
|
|
388
390
|
}] });
|
|
389
391
|
|
|
390
392
|
// custom-tabulator.component.ts
|
|
@@ -790,7 +792,7 @@ class MatDynamicTableComponent {
|
|
|
790
792
|
this.pageEvent.emit(e);
|
|
791
793
|
}
|
|
792
794
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatDynamicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
793
|
-
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: "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\n (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\n (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 @if (col.templateOutlet) {\n <ng-container\n *ngTemplateOutlet=\"\n col.templateOutlet;\n context: { $implicit: element, index: i }\n \"\n />\n } @else if (rowTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: element, index: i }\"\n />\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\n *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 class=\"m-0 p-0 detail-expand\" [class.expanded]=\"element === expandedElement\">\n <ng-container\n *ngTemplateOutlet=\"expandedDetail; context: { $implicit: element, index: i }\"\n />\n </div>\n </td>\n </ng-container>\n }\n\n <!-- Header Row -->\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplayWithExpand\"></tr>\n\n <!-- Data Rows -->\n @if (showExpand() && expandedDetail) {\n <!-- Regular Row -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnsToDisplayWithExpand; when: isNormalRow\"\n class=\"mat-dynamic-table-row\"\n [class.mat-dynamic-table-expanded-row]=\"expandedElement === row\"\n [ngStyle]=\"getRowColor(row)\"\n (click)=\"expandedElement = expandedElement === row ? null : row\"\n ></tr>\n\n <!-- Expanded Row -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n class=\"mat-dynamic-table-detail-row\"\n ></tr>\n } @else {\n <!-- Regular Row without expansion -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnsToDisplayWithExpand\"\n [ngStyle]=\"getRowColor(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 />\n }\n</div>\n", styles: [".table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}table{width:100%}tr.mat-dynamic-table-detail-row{height:0}tr.mat-dynamic-table-row:not(.mat-dynamic-table-expanded-row):hover{background:#f5f5f5}tr.mat-dynamic-table-row:not(.mat-dynamic-table-expanded-row):active{background:#efefef}.mat-dynamic-table-row td{border-bottom-width:0}.detail-expand{height:0;overflow:hidden;transition:height .15s ease-in-out}.detail-expand.expanded{height:auto;overflow:visible}@starting-style{.detail-expand.expanded{height: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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
795
|
+
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: "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\n (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\n (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 @if (col.templateOutlet) {\n <ng-container\n *ngTemplateOutlet=\"\n col.templateOutlet;\n context: { $implicit: element, index: i }\n \"\n />\n } @else if (rowTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: element, index: i }\"\n />\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\n *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 class=\"m-0 p-0 detail-expand\" [class.expanded]=\"element === expandedElement\">\n <ng-container\n *ngTemplateOutlet=\"expandedDetail; context: { $implicit: element, index: i }\"\n />\n </div>\n </td>\n </ng-container>\n }\n\n <!-- Header Row -->\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplayWithExpand\"></tr>\n\n <!-- Data Rows -->\n @if (showExpand() && expandedDetail) {\n <!-- Regular Row -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnsToDisplayWithExpand; when: isNormalRow\"\n class=\"mat-dynamic-table-row\"\n [class.mat-dynamic-table-expanded-row]=\"expandedElement === row\"\n [ngStyle]=\"getRowColor(row)\"\n (click)=\"expandedElement = expandedElement === row ? null : row\"\n ></tr>\n\n <!-- Expanded Row -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n class=\"mat-dynamic-table-detail-row\"\n ></tr>\n } @else {\n <!-- Regular Row without expansion -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnsToDisplayWithExpand\"\n [ngStyle]=\"getRowColor(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 />\n }\n</div>\n", styles: [".table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}table{width:100%}tr.mat-dynamic-table-detail-row{height:0}tr.mat-dynamic-table-row:not(.mat-dynamic-table-expanded-row):hover{background:#f5f5f5}tr.mat-dynamic-table-row:not(.mat-dynamic-table-expanded-row):active{background:#efefef}.mat-dynamic-table-row td{border-bottom-width:0}.detail-expand{height:0;overflow:hidden;transition:height .15s ease-in-out}.detail-expand.expanded{height:auto;overflow:visible}@starting-style{.detail-expand.expanded{height: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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
794
796
|
}
|
|
795
797
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MatDynamicTableComponent, decorators: [{
|
|
796
798
|
type: Component,
|
|
@@ -807,7 +809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
|
|
|
807
809
|
DatePipe,
|
|
808
810
|
DecimalPipe,
|
|
809
811
|
NgTemplateOutlet,
|
|
810
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mat-table-container\">\n <div class=\"table-container small-table\">\n <table #sort=\"matSort\" [dataSource]=\"dataSource.data\" mat-table matSort>\n @if (columnDefinitions) {\n <!-- Checkbox Column -->\n @if (showSelectBox()) {\n <ng-container matColumnDef=\"select\">\n <th *matHeaderCellDef mat-header-cell>\n <mat-checkbox\n (change)=\"$event ? masterToggle() : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel()\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n />\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 />\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 @if (col.templateOutlet) {\n <ng-container\n *ngTemplateOutlet=\"\n col.templateOutlet;\n context: { $implicit: element, index: i }\n \"\n />\n } @else if (rowTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: element, index: i }\"\n />\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\n *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 class=\"m-0 p-0 detail-expand\" [class.expanded]=\"element === expandedElement\">\n <ng-container\n *ngTemplateOutlet=\"expandedDetail; context: { $implicit: element, index: i }\"\n />\n </div>\n </td>\n </ng-container>\n }\n\n <!-- Header Row -->\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplayWithExpand\"></tr>\n\n <!-- Data Rows -->\n @if (showExpand() && expandedDetail) {\n <!-- Regular Row -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnsToDisplayWithExpand; when: isNormalRow\"\n class=\"mat-dynamic-table-row\"\n [class.mat-dynamic-table-expanded-row]=\"expandedElement === row\"\n [ngStyle]=\"getRowColor(row)\"\n (click)=\"expandedElement = expandedElement === row ? null : row\"\n ></tr>\n\n <!-- Expanded Row -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n class=\"mat-dynamic-table-detail-row\"\n ></tr>\n } @else {\n <!-- Regular Row without expansion -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnsToDisplayWithExpand\"\n [ngStyle]=\"getRowColor(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 />\n }\n</div>\n", styles: [".table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}table{width:100%}tr.mat-dynamic-table-detail-row{height:0}tr.mat-dynamic-table-row:not(.mat-dynamic-table-expanded-row):hover{background:#f5f5f5}tr.mat-dynamic-table-row:not(.mat-dynamic-table-expanded-row):active{background:#efefef}.mat-dynamic-table-row td{border-bottom-width:0}.detail-expand{height:0;overflow:hidden;transition:height .15s ease-in-out}.detail-expand.expanded{height:auto;overflow:visible}@starting-style{.detail-expand.expanded{height:0}}\n"] }]
|
|
812
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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 />\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 />\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 @if (col.templateOutlet) {\n <ng-container\n *ngTemplateOutlet=\"\n col.templateOutlet;\n context: { $implicit: element, index: i }\n \"\n />\n } @else if (rowTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: element, index: i }\"\n />\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\n *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 class=\"m-0 p-0 detail-expand\" [class.expanded]=\"element === expandedElement\">\n <ng-container\n *ngTemplateOutlet=\"expandedDetail; context: { $implicit: element, index: i }\"\n />\n </div>\n </td>\n </ng-container>\n }\n\n <!-- Header Row -->\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplayWithExpand\"></tr>\n\n <!-- Data Rows -->\n @if (showExpand() && expandedDetail) {\n <!-- Regular Row -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnsToDisplayWithExpand; when: isNormalRow\"\n class=\"mat-dynamic-table-row\"\n [class.mat-dynamic-table-expanded-row]=\"expandedElement === row\"\n [ngStyle]=\"getRowColor(row)\"\n (click)=\"expandedElement = expandedElement === row ? null : row\"\n ></tr>\n\n <!-- Expanded Row -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n class=\"mat-dynamic-table-detail-row\"\n ></tr>\n } @else {\n <!-- Regular Row without expansion -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnsToDisplayWithExpand\"\n [ngStyle]=\"getRowColor(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 />\n }\n</div>\n", styles: [".table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}table{width:100%}tr.mat-dynamic-table-detail-row{height:0}tr.mat-dynamic-table-row:not(.mat-dynamic-table-expanded-row):hover{background:#f5f5f5}tr.mat-dynamic-table-row:not(.mat-dynamic-table-expanded-row):active{background:#efefef}.mat-dynamic-table-row td{border-bottom-width:0}.detail-expand{height:0;overflow:hidden;transition:height .15s ease-in-out}.detail-expand.expanded{height:auto;overflow:visible}@starting-style{.detail-expand.expanded{height:0}}\n"] }]
|
|
811
813
|
}], propDecorators: { visibleColumns: [{
|
|
812
814
|
type: Input
|
|
813
815
|
}], columnDefinitions: [{
|
|
@@ -1451,11 +1453,11 @@ class ThemeToggleComponent {
|
|
|
1451
1453
|
this.themeService.toggleDarkMode();
|
|
1452
1454
|
}
|
|
1453
1455
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1454
|
-
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" }] });
|
|
1456
|
+
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" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1455
1457
|
}
|
|
1456
1458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ThemeToggleComponent, decorators: [{
|
|
1457
1459
|
type: Component,
|
|
1458
|
-
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" }]
|
|
1460
|
+
args: [{ selector: 'acp-theme-toggle', imports: [MatIconButton, MatIcon, AsyncPipe], encapsulation: ViewEncapsulation.None, 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" }]
|
|
1459
1461
|
}], ctorParameters: () => [] });
|
|
1460
1462
|
|
|
1461
1463
|
class FieldDefinition {
|
|
@@ -1904,7 +1906,7 @@ class ReusableAutocompleteComponent {
|
|
|
1904
1906
|
}
|
|
1905
1907
|
}
|
|
1906
1908
|
// Footer Actions
|
|
1907
|
-
onCreateNew($event) {
|
|
1909
|
+
onCreateNew(_$event) {
|
|
1908
1910
|
//$event.stopPropagation();
|
|
1909
1911
|
// this.hideOverlay();
|
|
1910
1912
|
this.createClicked.emit(this.query);
|
|
@@ -1980,7 +1982,7 @@ class ReusableAutocompleteComponent {
|
|
|
1980
1982
|
this.searchInput()?.nativeElement?.focus();
|
|
1981
1983
|
}
|
|
1982
1984
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ReusableAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1983
|
-
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\n *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\n *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\n *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"] }] });
|
|
1985
|
+
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 tabindex=\"0\"\n (click)=\"selectItem(item)\"\n (keydown.enter)=\"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 </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\" for=\"searchBySelect\"\n >Buscar por:</label\n >\n <select\n id=\"searchBySelect\"\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\" for=\"stockSelect\"\n >Stock:</label\n >\n <select\n id=\"stockSelect\"\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 tabindex=\"0\"\n (click)=\"selectItem(item)\"\n (keydown.enter)=\"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 </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 </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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1984
1986
|
}
|
|
1985
1987
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ReusableAutocompleteComponent, decorators: [{
|
|
1986
1988
|
type: Component,
|
|
@@ -1992,7 +1994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
|
|
|
1992
1994
|
MatProgressSpinner,
|
|
1993
1995
|
FormsModule,
|
|
1994
1996
|
MatIconButton,
|
|
1995
|
-
], 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\n *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\n *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\n *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"] }]
|
|
1997
|
+
], encapsulation: ViewEncapsulation.None, 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 tabindex=\"0\"\n (click)=\"selectItem(item)\"\n (keydown.enter)=\"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 </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\" for=\"searchBySelect\"\n >Buscar por:</label\n >\n <select\n id=\"searchBySelect\"\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\" for=\"stockSelect\"\n >Stock:</label\n >\n <select\n id=\"stockSelect\"\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 tabindex=\"0\"\n (click)=\"selectItem(item)\"\n (keydown.enter)=\"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 </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 </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"] }]
|
|
1996
1998
|
}], propDecorators: { config: [{
|
|
1997
1999
|
type: Input
|
|
1998
2000
|
}] } });
|