@acontplus/ng-components 1.1.0 → 1.3.0
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 +284 -49
- package/fesm2022/acontplus-ng-components.mjs +280 -252
- package/fesm2022/acontplus-ng-components.mjs.map +1 -1
- package/index.d.ts +178 -170
- package/package.json +23 -20
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, booleanAttribute, output, ViewEncapsulation, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, Pipe, ChangeDetectorRef, contentChildren, Input, Injectable, PLATFORM_ID, signal, computed, ElementRef, Renderer2, HostListener, Directive
|
|
2
|
+
import { input, booleanAttribute, output, ViewEncapsulation, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, Pipe, ChangeDetectorRef, contentChildren, Input, Injectable, PLATFORM_ID, signal, computed, ElementRef, Renderer2, HostListener, Directive } 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';
|
|
@@ -15,7 +15,6 @@ import { MatFormField, MatLabel, MatHint } from '@angular/material/form-field';
|
|
|
15
15
|
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
|
16
16
|
import { ENTER, COMMA } from '@angular/cdk/keycodes';
|
|
17
17
|
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
18
|
-
import { Tabulator, PageModule, ReactiveDataModule } from 'tabulator-tables';
|
|
19
18
|
import * as i1$2 from '@angular/material/table';
|
|
20
19
|
import { MatTableDataSource, MatHeaderRowDef, MatRowDef, MatFooterRowDef, MatColumnDef, MatTable, MatTableModule } from '@angular/material/table';
|
|
21
20
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
@@ -27,6 +26,7 @@ import * as i3$1 from '@angular/material/sort';
|
|
|
27
26
|
import { MatSortModule } from '@angular/material/sort';
|
|
28
27
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
29
28
|
import { TranslocoService } from '@jsverse/transloco';
|
|
29
|
+
import { Tabulator, PageModule, ReactiveDataModule } from 'tabulator-tables';
|
|
30
30
|
import * as i1$3 from '@angular/cdk/overlay';
|
|
31
31
|
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
|
|
32
32
|
import { map, firstValueFrom, BehaviorSubject, of, delay, Subject, debounceTime, takeUntil } from 'rxjs';
|
|
@@ -52,7 +52,7 @@ import { switchMap, catchError } from 'rxjs/operators';
|
|
|
52
52
|
* Card content goes here
|
|
53
53
|
* </acp-dynamic-card>
|
|
54
54
|
*/
|
|
55
|
-
class
|
|
55
|
+
class DynamicCard {
|
|
56
56
|
// Header inputs
|
|
57
57
|
/**
|
|
58
58
|
* The title text to display in the card header.
|
|
@@ -156,15 +156,15 @@ class DynamicCardComponent {
|
|
|
156
156
|
handleCardClick(event) {
|
|
157
157
|
this.cardClicked.emit(event);
|
|
158
158
|
}
|
|
159
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
160
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
159
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
160
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DynamicCard, isStandalone: true, selector: "acp-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 } @if (cardTitle()) {\n <mat-card-title>{{ cardTitle() }}</mat-card-title>\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 } {{ secondaryButtonText() }}\n </button>\n } @if (primaryButtonText()) {\n <button mat-button color=\"primary\" (click)=\"handlePrimaryButtonClick($event)\">\n @if (primaryButtonIcon()) {\n <mat-icon>{{ primaryButtonIcon() }}</mat-icon>\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
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
162
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicCard, decorators: [{
|
|
163
163
|
type: Component,
|
|
164
|
-
args: [{ selector: 'acp-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
|
|
164
|
+
args: [{ selector: 'acp-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 } @if (cardTitle()) {\n <mat-card-title>{{ cardTitle() }}</mat-card-title>\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 } {{ secondaryButtonText() }}\n </button>\n } @if (primaryButtonText()) {\n <button mat-button color=\"primary\" (click)=\"handlePrimaryButtonClick($event)\">\n @if (primaryButtonIcon()) {\n <mat-icon>{{ primaryButtonIcon() }}</mat-icon>\n } {{ primaryButtonText() }}\n </button>\n }\n </mat-card-actions>\n }\n</mat-card>\n" }]
|
|
165
165
|
}] });
|
|
166
166
|
|
|
167
|
-
class
|
|
167
|
+
class Button {
|
|
168
168
|
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
169
169
|
text = input('', ...(ngDevMode ? [{ debugName: "text" }] : []));
|
|
170
170
|
icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
@@ -198,10 +198,10 @@ class ButtonComponent {
|
|
|
198
198
|
}
|
|
199
199
|
return this.text();
|
|
200
200
|
}
|
|
201
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
202
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: ButtonComponent, isStandalone: true, selector: "acp-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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", 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: "@switch (matStyle()) {\n @case ('text') {\n <button\n matButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n @case ('elevated') {\n <button\n matButton=\"elevated\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n @case ('outlined') {\n <button\n matButton=\"outlined\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n @case ('tonal') {\n <button\n matButton=\"tonal\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n @case ('icon') {\n <button\n matIconButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n @case ('fab') {\n <button\n matFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n @case ('mini-fab') {\n <button\n matMiniFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n @case ('extended-fab') {\n <button\n matFab\n extended\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n @default {\n <button\n matButton=\"filled\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n}\n\n<ng-template #buttonContent>\n @if (icon()) {\n <mat-icon>{{ icon() }}</mat-icon>\n }\n\n @if (getDisplayText()) {\n {{ getDisplayText() }}\n }\n\n <ng-content />\n</ng-template>\n", styles: [":root{--acp-secondary: #e0e0e0;--acp-secondary-on: #000000;--acp-success: #4caf50;--acp-success-on: #ffffff;--acp-danger: #ba1a1a;--acp-danger-on: #ffffff;--acp-warning: #ff9800;--acp-warning-on: #000000;--acp-info: #2196f3;--acp-info-on: #ffffff;--acp-dark: #212121;--acp-dark-on: #ffffff}.dark-theme{--acp-secondary: #424242;--acp-secondary-on: #ffffff;--acp-success: #81c784;--acp-success-on: #1b5e20;--acp-danger: #ef5350;--acp-danger-on: #b71c1c;--acp-warning: #ffb74d;--acp-warning-on: #e65100;--acp-info: #64b5f6;--acp-info-on: #0d47a1;--acp-dark: #616161;--acp-dark-on: #ffffff}acp-button{display:inline-block;margin:4px}.mat-mdc-button .mdc-button__label,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-outlined-button .mdc-button__label,button[matbutton=tonal] .mdc-button__label,.mat-mdc-fab.mdc-fab--extended .mdc-button__label{display:flex;align-items:center;gap:8px}.mat-mdc-button.mat-btn-secondary,.mat-mdc-unelevated-button.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-button.mat-btn-secondary:hover,.mat-mdc-unelevated-button.mat-btn-secondary:hover{background-color:color-mix(in srgb,var(--acp-secondary) 80%,black)!important}.mat-mdc-button.mat-btn-success,.mat-mdc-unelevated-button.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-button.mat-btn-danger,.mat-mdc-unelevated-button.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-button.mat-btn-warning,.mat-mdc-unelevated-button.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-button.mat-btn-info,.mat-mdc-unelevated-button.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-button.mat-btn-dark,.mat-mdc-unelevated-button.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}button[matbutton=tonal].mat-btn-success{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important;color:var(--acp-success)!important}button[matbutton=tonal].mat-btn-danger{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important;color:var(--acp-danger)!important}button[matbutton=tonal].mat-btn-warning{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important;color:var(--acp-warning)!important}button[matbutton=tonal].mat-btn-info{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important;color:var(--acp-info)!important}button[matbutton=tonal].mat-btn-dark{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important;color:var(--acp-dark)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-success{color:var(--acp-success)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-info{color:var(--acp-info)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-dark{color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-secondary{background-color:var(--mat-sys-surface-container-low)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-raised-button.mat-btn-success{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-success)!important}.mat-mdc-raised-button.mat-btn-success:hover{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-danger{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-danger)!important}.mat-mdc-raised-button.mat-btn-danger:hover{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-warning{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-warning)!important}.mat-mdc-raised-button.mat-btn-warning:hover{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-info{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-info)!important}.mat-mdc-raised-button.mat-btn-info:hover{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-dark{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-dark:hover{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important}.mat-mdc-outlined-button.mat-btn-secondary{border-color:var(--mat-sys-outline)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-outlined-button.mat-btn-success{border-color:var(--acp-success)!important;color:var(--acp-success)!important}.mat-mdc-outlined-button.mat-btn-danger{border-color:var(--acp-danger)!important;color:var(--acp-danger)!important}.mat-mdc-outlined-button.mat-btn-warning{border-color:var(--acp-warning)!important;color:var(--acp-warning)!important}.mat-mdc-outlined-button.mat-btn-info{border-color:var(--acp-info)!important;color:var(--acp-info)!important}.mat-mdc-outlined-button.mat-btn-dark{border-color:var(--acp-dark)!important;color:var(--acp-dark)!important}.mat-mdc-fab.mat-btn-secondary,.mat-mdc-mini-fab.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-fab.mat-btn-success,.mat-mdc-mini-fab.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-fab.mat-btn-danger,.mat-mdc-mini-fab.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-fab.mat-btn-warning,.mat-mdc-mini-fab.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-fab.mat-btn-info,.mat-mdc-mini-fab.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-fab.mat-btn-dark,.mat-mdc-mini-fab.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}.mat-mdc-icon-button.mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-icon-button.mat-btn-success{color:var(--acp-success)!important}.mat-mdc-icon-button.mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-icon-button.mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-icon-button.mat-btn-info{color:var(--acp-info)!important}.mat-mdc-icon-button.mat-btn-dark{color:var(--acp-dark)!important}\n"], 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
201
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: Button, isStandalone: true, selector: "acp-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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", 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: "@switch (matStyle()) { @case ('text') {\n<button\n matButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('elevated') {\n<button\n matButton=\"elevated\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('outlined') {\n<button\n matButton=\"outlined\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('tonal') {\n<button\n matButton=\"tonal\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('icon') {\n<button\n matIconButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('fab') {\n<button\n matFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('mini-fab') {\n<button\n matMiniFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('extended-fab') {\n<button\n matFab\n extended\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @default {\n<button\n matButton=\"filled\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} }\n\n<ng-template #buttonContent>\n @if (icon()) {\n <mat-icon>{{ icon() }}</mat-icon>\n } @if (getDisplayText()) { {{ getDisplayText() }} }\n\n <ng-content />\n</ng-template>\n", styles: [":root{--acp-secondary: #e0e0e0;--acp-secondary-on: #000000;--acp-success: #4caf50;--acp-success-on: #ffffff;--acp-danger: #ba1a1a;--acp-danger-on: #ffffff;--acp-warning: #ff9800;--acp-warning-on: #000000;--acp-info: #2196f3;--acp-info-on: #ffffff;--acp-dark: #212121;--acp-dark-on: #ffffff}.dark-theme{--acp-secondary: #424242;--acp-secondary-on: #ffffff;--acp-success: #81c784;--acp-success-on: #1b5e20;--acp-danger: #ef5350;--acp-danger-on: #b71c1c;--acp-warning: #ffb74d;--acp-warning-on: #e65100;--acp-info: #64b5f6;--acp-info-on: #0d47a1;--acp-dark: #616161;--acp-dark-on: #ffffff}acp-button{display:inline-block;margin:4px}.mat-mdc-button .mdc-button__label,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-outlined-button .mdc-button__label,button[matbutton=tonal] .mdc-button__label,.mat-mdc-fab.mdc-fab--extended .mdc-button__label{display:flex;align-items:center;gap:8px}.mat-mdc-button.mat-btn-secondary,.mat-mdc-unelevated-button.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-button.mat-btn-secondary:hover,.mat-mdc-unelevated-button.mat-btn-secondary:hover{background-color:color-mix(in srgb,var(--acp-secondary) 80%,black)!important}.mat-mdc-button.mat-btn-success,.mat-mdc-unelevated-button.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-button.mat-btn-danger,.mat-mdc-unelevated-button.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-button.mat-btn-warning,.mat-mdc-unelevated-button.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-button.mat-btn-info,.mat-mdc-unelevated-button.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-button.mat-btn-dark,.mat-mdc-unelevated-button.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}button[matbutton=tonal].mat-btn-success{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important;color:var(--acp-success)!important}button[matbutton=tonal].mat-btn-danger{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important;color:var(--acp-danger)!important}button[matbutton=tonal].mat-btn-warning{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important;color:var(--acp-warning)!important}button[matbutton=tonal].mat-btn-info{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important;color:var(--acp-info)!important}button[matbutton=tonal].mat-btn-dark{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important;color:var(--acp-dark)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-success{color:var(--acp-success)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-info{color:var(--acp-info)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-dark{color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-secondary{background-color:var(--mat-sys-surface-container-low)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-raised-button.mat-btn-success{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-success)!important}.mat-mdc-raised-button.mat-btn-success:hover{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-danger{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-danger)!important}.mat-mdc-raised-button.mat-btn-danger:hover{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-warning{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-warning)!important}.mat-mdc-raised-button.mat-btn-warning:hover{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-info{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-info)!important}.mat-mdc-raised-button.mat-btn-info:hover{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-dark{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-dark:hover{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important}.mat-mdc-outlined-button.mat-btn-secondary{border-color:var(--mat-sys-outline)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-outlined-button.mat-btn-success{border-color:var(--acp-success)!important;color:var(--acp-success)!important}.mat-mdc-outlined-button.mat-btn-danger{border-color:var(--acp-danger)!important;color:var(--acp-danger)!important}.mat-mdc-outlined-button.mat-btn-warning{border-color:var(--acp-warning)!important;color:var(--acp-warning)!important}.mat-mdc-outlined-button.mat-btn-info{border-color:var(--acp-info)!important;color:var(--acp-info)!important}.mat-mdc-outlined-button.mat-btn-dark{border-color:var(--acp-dark)!important;color:var(--acp-dark)!important}.mat-mdc-fab.mat-btn-secondary,.mat-mdc-mini-fab.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-fab.mat-btn-success,.mat-mdc-mini-fab.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-fab.mat-btn-danger,.mat-mdc-mini-fab.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-fab.mat-btn-warning,.mat-mdc-mini-fab.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-fab.mat-btn-info,.mat-mdc-mini-fab.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-fab.mat-btn-dark,.mat-mdc-mini-fab.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}.mat-mdc-icon-button.mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-icon-button.mat-btn-success{color:var(--acp-success)!important}.mat-mdc-icon-button.mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-icon-button.mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-icon-button.mat-btn-info{color:var(--acp-info)!important}.mat-mdc-icon-button.mat-btn-dark{color:var(--acp-dark)!important}\n"], 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
203
203
|
}
|
|
204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Button, decorators: [{
|
|
205
205
|
type: Component,
|
|
206
206
|
args: [{ selector: 'acp-button', imports: [
|
|
207
207
|
MatButton,
|
|
@@ -211,7 +211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
|
|
|
211
211
|
MatIconButton,
|
|
212
212
|
MatFabButton,
|
|
213
213
|
NgTemplateOutlet,
|
|
214
|
-
], encapsulation: ViewEncapsulation.None, template: "@switch (matStyle()) {\n @case ('text') {\n <button\n matButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n @case ('elevated') {\n <button\n matButton=\"elevated\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n @case ('outlined') {\n <button\n matButton=\"outlined\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n @case ('tonal') {\n <button\n matButton=\"tonal\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n @case ('icon') {\n <button\n matIconButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n @case ('fab') {\n <button\n matFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n @case ('mini-fab') {\n <button\n matMiniFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n @case ('extended-fab') {\n <button\n matFab\n extended\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n @default {\n <button\n matButton=\"filled\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n </button>\n }\n}\n\n<ng-template #buttonContent>\n @if (icon()) {\n <mat-icon>{{ icon() }}</mat-icon>\n }\n\n @if (getDisplayText()) {\n {{ getDisplayText() }}\n }\n\n <ng-content />\n</ng-template>\n", styles: [":root{--acp-secondary: #e0e0e0;--acp-secondary-on: #000000;--acp-success: #4caf50;--acp-success-on: #ffffff;--acp-danger: #ba1a1a;--acp-danger-on: #ffffff;--acp-warning: #ff9800;--acp-warning-on: #000000;--acp-info: #2196f3;--acp-info-on: #ffffff;--acp-dark: #212121;--acp-dark-on: #ffffff}.dark-theme{--acp-secondary: #424242;--acp-secondary-on: #ffffff;--acp-success: #81c784;--acp-success-on: #1b5e20;--acp-danger: #ef5350;--acp-danger-on: #b71c1c;--acp-warning: #ffb74d;--acp-warning-on: #e65100;--acp-info: #64b5f6;--acp-info-on: #0d47a1;--acp-dark: #616161;--acp-dark-on: #ffffff}acp-button{display:inline-block;margin:4px}.mat-mdc-button .mdc-button__label,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-outlined-button .mdc-button__label,button[matbutton=tonal] .mdc-button__label,.mat-mdc-fab.mdc-fab--extended .mdc-button__label{display:flex;align-items:center;gap:8px}.mat-mdc-button.mat-btn-secondary,.mat-mdc-unelevated-button.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-button.mat-btn-secondary:hover,.mat-mdc-unelevated-button.mat-btn-secondary:hover{background-color:color-mix(in srgb,var(--acp-secondary) 80%,black)!important}.mat-mdc-button.mat-btn-success,.mat-mdc-unelevated-button.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-button.mat-btn-danger,.mat-mdc-unelevated-button.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-button.mat-btn-warning,.mat-mdc-unelevated-button.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-button.mat-btn-info,.mat-mdc-unelevated-button.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-button.mat-btn-dark,.mat-mdc-unelevated-button.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}button[matbutton=tonal].mat-btn-success{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important;color:var(--acp-success)!important}button[matbutton=tonal].mat-btn-danger{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important;color:var(--acp-danger)!important}button[matbutton=tonal].mat-btn-warning{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important;color:var(--acp-warning)!important}button[matbutton=tonal].mat-btn-info{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important;color:var(--acp-info)!important}button[matbutton=tonal].mat-btn-dark{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important;color:var(--acp-dark)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-success{color:var(--acp-success)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-info{color:var(--acp-info)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-dark{color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-secondary{background-color:var(--mat-sys-surface-container-low)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-raised-button.mat-btn-success{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-success)!important}.mat-mdc-raised-button.mat-btn-success:hover{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-danger{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-danger)!important}.mat-mdc-raised-button.mat-btn-danger:hover{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-warning{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-warning)!important}.mat-mdc-raised-button.mat-btn-warning:hover{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-info{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-info)!important}.mat-mdc-raised-button.mat-btn-info:hover{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-dark{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-dark:hover{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important}.mat-mdc-outlined-button.mat-btn-secondary{border-color:var(--mat-sys-outline)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-outlined-button.mat-btn-success{border-color:var(--acp-success)!important;color:var(--acp-success)!important}.mat-mdc-outlined-button.mat-btn-danger{border-color:var(--acp-danger)!important;color:var(--acp-danger)!important}.mat-mdc-outlined-button.mat-btn-warning{border-color:var(--acp-warning)!important;color:var(--acp-warning)!important}.mat-mdc-outlined-button.mat-btn-info{border-color:var(--acp-info)!important;color:var(--acp-info)!important}.mat-mdc-outlined-button.mat-btn-dark{border-color:var(--acp-dark)!important;color:var(--acp-dark)!important}.mat-mdc-fab.mat-btn-secondary,.mat-mdc-mini-fab.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-fab.mat-btn-success,.mat-mdc-mini-fab.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-fab.mat-btn-danger,.mat-mdc-mini-fab.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-fab.mat-btn-warning,.mat-mdc-mini-fab.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-fab.mat-btn-info,.mat-mdc-mini-fab.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-fab.mat-btn-dark,.mat-mdc-mini-fab.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}.mat-mdc-icon-button.mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-icon-button.mat-btn-success{color:var(--acp-success)!important}.mat-mdc-icon-button.mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-icon-button.mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-icon-button.mat-btn-info{color:var(--acp-info)!important}.mat-mdc-icon-button.mat-btn-dark{color:var(--acp-dark)!important}\n"] }]
|
|
214
|
+
], encapsulation: ViewEncapsulation.None, template: "@switch (matStyle()) { @case ('text') {\n<button\n matButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('elevated') {\n<button\n matButton=\"elevated\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('outlined') {\n<button\n matButton=\"outlined\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('tonal') {\n<button\n matButton=\"tonal\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('icon') {\n<button\n matIconButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('fab') {\n<button\n matFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('mini-fab') {\n<button\n matMiniFab\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('extended-fab') {\n<button\n matFab\n extended\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @default {\n<button\n matButton=\"filled\"\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\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-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} }\n\n<ng-template #buttonContent>\n @if (icon()) {\n <mat-icon>{{ icon() }}</mat-icon>\n } @if (getDisplayText()) { {{ getDisplayText() }} }\n\n <ng-content />\n</ng-template>\n", styles: [":root{--acp-secondary: #e0e0e0;--acp-secondary-on: #000000;--acp-success: #4caf50;--acp-success-on: #ffffff;--acp-danger: #ba1a1a;--acp-danger-on: #ffffff;--acp-warning: #ff9800;--acp-warning-on: #000000;--acp-info: #2196f3;--acp-info-on: #ffffff;--acp-dark: #212121;--acp-dark-on: #ffffff}.dark-theme{--acp-secondary: #424242;--acp-secondary-on: #ffffff;--acp-success: #81c784;--acp-success-on: #1b5e20;--acp-danger: #ef5350;--acp-danger-on: #b71c1c;--acp-warning: #ffb74d;--acp-warning-on: #e65100;--acp-info: #64b5f6;--acp-info-on: #0d47a1;--acp-dark: #616161;--acp-dark-on: #ffffff}acp-button{display:inline-block;margin:4px}.mat-mdc-button .mdc-button__label,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-outlined-button .mdc-button__label,button[matbutton=tonal] .mdc-button__label,.mat-mdc-fab.mdc-fab--extended .mdc-button__label{display:flex;align-items:center;gap:8px}.mat-mdc-button.mat-btn-secondary,.mat-mdc-unelevated-button.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-button.mat-btn-secondary:hover,.mat-mdc-unelevated-button.mat-btn-secondary:hover{background-color:color-mix(in srgb,var(--acp-secondary) 80%,black)!important}.mat-mdc-button.mat-btn-success,.mat-mdc-unelevated-button.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-button.mat-btn-danger,.mat-mdc-unelevated-button.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-button.mat-btn-warning,.mat-mdc-unelevated-button.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-button.mat-btn-info,.mat-mdc-unelevated-button.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-button.mat-btn-dark,.mat-mdc-unelevated-button.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}button[matbutton=tonal].mat-btn-success{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important;color:var(--acp-success)!important}button[matbutton=tonal].mat-btn-danger{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important;color:var(--acp-danger)!important}button[matbutton=tonal].mat-btn-warning{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important;color:var(--acp-warning)!important}button[matbutton=tonal].mat-btn-info{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important;color:var(--acp-info)!important}button[matbutton=tonal].mat-btn-dark{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important;color:var(--acp-dark)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-success{color:var(--acp-success)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-info{color:var(--acp-info)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-dark{color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-secondary{background-color:var(--mat-sys-surface-container-low)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-raised-button.mat-btn-success{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-success)!important}.mat-mdc-raised-button.mat-btn-success:hover{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-danger{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-danger)!important}.mat-mdc-raised-button.mat-btn-danger:hover{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-warning{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-warning)!important}.mat-mdc-raised-button.mat-btn-warning:hover{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-info{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-info)!important}.mat-mdc-raised-button.mat-btn-info:hover{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-dark{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-dark:hover{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important}.mat-mdc-outlined-button.mat-btn-secondary{border-color:var(--mat-sys-outline)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-outlined-button.mat-btn-success{border-color:var(--acp-success)!important;color:var(--acp-success)!important}.mat-mdc-outlined-button.mat-btn-danger{border-color:var(--acp-danger)!important;color:var(--acp-danger)!important}.mat-mdc-outlined-button.mat-btn-warning{border-color:var(--acp-warning)!important;color:var(--acp-warning)!important}.mat-mdc-outlined-button.mat-btn-info{border-color:var(--acp-info)!important;color:var(--acp-info)!important}.mat-mdc-outlined-button.mat-btn-dark{border-color:var(--acp-dark)!important;color:var(--acp-dark)!important}.mat-mdc-fab.mat-btn-secondary,.mat-mdc-mini-fab.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-fab.mat-btn-success,.mat-mdc-mini-fab.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-fab.mat-btn-danger,.mat-mdc-mini-fab.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-fab.mat-btn-warning,.mat-mdc-mini-fab.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-fab.mat-btn-info,.mat-mdc-mini-fab.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-fab.mat-btn-dark,.mat-mdc-mini-fab.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}.mat-mdc-icon-button.mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-icon-button.mat-btn-success{color:var(--acp-success)!important}.mat-mdc-icon-button.mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-icon-button.mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-icon-button.mat-btn-info{color:var(--acp-info)!important}.mat-mdc-icon-button.mat-btn-dark{color:var(--acp-dark)!important}\n"] }]
|
|
215
215
|
}] });
|
|
216
216
|
|
|
217
217
|
/**
|
|
@@ -229,7 +229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
|
|
|
229
229
|
* data: { message: 'This is some data passed to the dialog content component' }
|
|
230
230
|
* });
|
|
231
231
|
*/
|
|
232
|
-
class
|
|
232
|
+
class DialogWrapper {
|
|
233
233
|
dialogRef = inject(MatDialogRef);
|
|
234
234
|
config = inject(MAT_DIALOG_DATA);
|
|
235
235
|
/**
|
|
@@ -252,7 +252,7 @@ class DialogWrapperComponent {
|
|
|
252
252
|
*/
|
|
253
253
|
bringToFrontTimeoutId = null;
|
|
254
254
|
/**
|
|
255
|
-
* Creates an instance of
|
|
255
|
+
* Creates an instance of DialogWrapper.
|
|
256
256
|
*
|
|
257
257
|
* @param dialogRef Reference to the dialog opened via the Material Dialog service
|
|
258
258
|
* @param config Configuration for the dialog wrapper, injected from MAT_DIALOG_DATA
|
|
@@ -304,43 +304,43 @@ class DialogWrapperComponent {
|
|
|
304
304
|
this.bringToFrontTimeoutId = requestAnimationFrame(() => {
|
|
305
305
|
const pane = this.header()?.nativeElement.closest('.cdk-overlay-pane');
|
|
306
306
|
if (pane) {
|
|
307
|
-
pane.style.zIndex = (++
|
|
307
|
+
pane.style.zIndex = (++DialogWrapper.lastZIndex).toString();
|
|
308
308
|
}
|
|
309
309
|
this.bringToFrontTimeoutId = null;
|
|
310
310
|
});
|
|
311
311
|
}
|
|
312
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
313
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
312
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DialogWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
313
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DialogWrapper, 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=\"acp-dialog-header\"\n cdkDrag\n cdkDragRootElement=\".cdk-overlay-pane\"\n cdkDragHandle\n #dialogHeader\n (mousedown)=\"bringToFront()\"\n>\n <h6 mat-dialog-title class=\"acp-dialog-title\">\n @if (config.icon) {\n <mat-icon class=\"acp-dialog-title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n }\n <span>{{ config.title }}</span>\n @if (config.showCloseButton !== false) {\n <acp-button\n [customClass]=\"'acp-dialog-close-btn'\"\n matStyle=\"icon\"\n icon=\"close\"\n (handleClick)=\"onClose()\"\n ariaLabel=\"Close Dialog\"\n />\n }\n </h6>\n</div>\n}\n\n<ng-template #contentHost />\n", styles: [".acp-dialog-header{cursor:move;padding:12px 24px;border-bottom:1px solid var(--mat-sys-outline-variant, #dee2e6);color:var(--mat-sys-on-surface, #212529);position:relative}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%;padding-right:48px}.acp-dialog-title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}mat-dialog-content{padding:24px}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}\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: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
314
314
|
}
|
|
315
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
315
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DialogWrapper, decorators: [{
|
|
316
316
|
type: Component,
|
|
317
|
-
args: [{ selector: 'acp-dialog-wrapper', standalone: true, imports: [CdkDrag, CdkDragHandle, MatDialogModule, MatIconModule,
|
|
317
|
+
args: [{ selector: 'acp-dialog-wrapper', standalone: true, imports: [CdkDrag, CdkDragHandle, MatDialogModule, MatIconModule, Button], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (!config.hideHeader) {\n<div\n class=\"acp-dialog-header\"\n cdkDrag\n cdkDragRootElement=\".cdk-overlay-pane\"\n cdkDragHandle\n #dialogHeader\n (mousedown)=\"bringToFront()\"\n>\n <h6 mat-dialog-title class=\"acp-dialog-title\">\n @if (config.icon) {\n <mat-icon class=\"acp-dialog-title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n }\n <span>{{ config.title }}</span>\n @if (config.showCloseButton !== false) {\n <acp-button\n [customClass]=\"'acp-dialog-close-btn'\"\n matStyle=\"icon\"\n icon=\"close\"\n (handleClick)=\"onClose()\"\n ariaLabel=\"Close Dialog\"\n />\n }\n </h6>\n</div>\n}\n\n<ng-template #contentHost />\n", styles: [".acp-dialog-header{cursor:move;padding:12px 24px;border-bottom:1px solid var(--mat-sys-outline-variant, #dee2e6);color:var(--mat-sys-on-surface, #212529);position:relative}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%;padding-right:48px}.acp-dialog-title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}mat-dialog-content{padding:24px}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}\n"] }]
|
|
318
318
|
}], ctorParameters: () => [] });
|
|
319
319
|
|
|
320
|
-
class
|
|
320
|
+
class UserIcon {
|
|
321
321
|
size = input('35', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
322
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
323
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
322
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UserIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
323
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: UserIcon, isStandalone: true, selector: "acp-user-icon", 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 });
|
|
324
324
|
}
|
|
325
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
325
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UserIcon, decorators: [{
|
|
326
326
|
type: Component,
|
|
327
327
|
args: [{ selector: 'acp-user-icon', 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" }]
|
|
328
328
|
}] });
|
|
329
329
|
|
|
330
|
-
class
|
|
330
|
+
class SvgIcon {
|
|
331
331
|
id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
332
332
|
width = input('40px', ...(ngDevMode ? [{ debugName: "width" }] : []));
|
|
333
333
|
height = input('40px', ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
334
334
|
color = input('#414141', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
335
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
336
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
335
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SvgIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
336
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: SvgIcon, 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 });
|
|
337
337
|
}
|
|
338
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
338
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SvgIcon, decorators: [{
|
|
339
339
|
type: Component,
|
|
340
340
|
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" }]
|
|
341
341
|
}] });
|
|
342
342
|
|
|
343
|
-
class
|
|
343
|
+
class InputChip {
|
|
344
344
|
chips = input.required(...(ngDevMode ? [{ debugName: "chips" }] : []));
|
|
345
345
|
labelText = input.required(...(ngDevMode ? [{ debugName: "labelText" }] : []));
|
|
346
346
|
placelholder = input('', ...(ngDevMode ? [{ debugName: "placelholder" }] : []));
|
|
@@ -376,185 +376,23 @@ class InputChipComponent {
|
|
|
376
376
|
this.chips()[index] = value.replace(/\s+/g, '');
|
|
377
377
|
}
|
|
378
378
|
}
|
|
379
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
380
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
379
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
380
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: InputChip, isStandalone: true, selector: "acp-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\"><strong>Ingrese {{ labelText() }} y dale \"Enter\"</strong> </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 });
|
|
381
381
|
}
|
|
382
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputChip, decorators: [{
|
|
383
383
|
type: Component,
|
|
384
|
-
args: [{ selector: 'acp-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
|
|
384
|
+
args: [{ selector: 'acp-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\"><strong>Ingrese {{ labelText() }} y dale \"Enter\"</strong> </mat-hint>\n</mat-form-field>\n" }]
|
|
385
385
|
}] });
|
|
386
386
|
|
|
387
|
-
class
|
|
388
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
389
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
387
|
+
class Spinner {
|
|
388
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
389
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: Spinner, isStandalone: true, selector: "acp-spinner", ngImport: i0, template: "<div class=\"acp-spinner\">\n <mat-spinner />\n</div>\n", styles: [".acp-spinner{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 });
|
|
390
390
|
}
|
|
391
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
391
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Spinner, decorators: [{
|
|
392
392
|
type: Component,
|
|
393
393
|
args: [{ selector: 'acp-spinner', imports: [MatProgressSpinner], encapsulation: ViewEncapsulation.None, template: "<div class=\"acp-spinner\">\n <mat-spinner />\n</div>\n", styles: [".acp-spinner{display:flex;justify-content:center;align-items:center;height:100%}\n"] }]
|
|
394
394
|
}] });
|
|
395
395
|
|
|
396
|
-
// tabulator-table.component.ts
|
|
397
|
-
Tabulator.registerModule([PageModule, ReactiveDataModule]);
|
|
398
|
-
class TabulatorTableComponent {
|
|
399
|
-
// Data inputs
|
|
400
|
-
data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
401
|
-
columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
402
|
-
// Layout inputs
|
|
403
|
-
height = input('400px', ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
404
|
-
layout = input('fitData', ...(ngDevMode ? [{ debugName: "layout" }] : []));
|
|
405
|
-
// Tree structure inputs
|
|
406
|
-
dataTree = input(false, ...(ngDevMode ? [{ debugName: "dataTree" }] : []));
|
|
407
|
-
dataTreeChildField = input('children', ...(ngDevMode ? [{ debugName: "dataTreeChildField" }] : []));
|
|
408
|
-
dataTreeStartExpanded = input(false, ...(ngDevMode ? [{ debugName: "dataTreeStartExpanded" }] : []));
|
|
409
|
-
dataTreeSelectPropagate = input(false, ...(ngDevMode ? [{ debugName: "dataTreeSelectPropagate" }] : []));
|
|
410
|
-
// Behavior inputs
|
|
411
|
-
selectable = input(true, ...(ngDevMode ? [{ debugName: "selectable" }] : []));
|
|
412
|
-
reactiveData = input(true, ...(ngDevMode ? [{ debugName: "reactiveData" }] : []));
|
|
413
|
-
placeholder = input('No data available', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
414
|
-
autoResize = input(true, ...(ngDevMode ? [{ debugName: "autoResize" }] : []));
|
|
415
|
-
// Theme configuration
|
|
416
|
-
theme = input({ name: 'default' }, ...(ngDevMode ? [{ debugName: "theme" }] : []));
|
|
417
|
-
// Custom styling
|
|
418
|
-
customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : []));
|
|
419
|
-
// Custom options
|
|
420
|
-
options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
421
|
-
// Events
|
|
422
|
-
cellEdited = output();
|
|
423
|
-
rowClick = output();
|
|
424
|
-
rowSelected = output();
|
|
425
|
-
tableReady = output();
|
|
426
|
-
_tabulator;
|
|
427
|
-
// Made public for template access
|
|
428
|
-
containerId = `acp-tabulator-${Math.random().toString(36).substr(2, 9)}`;
|
|
429
|
-
ngAfterViewInit() {
|
|
430
|
-
this.initializeTable();
|
|
431
|
-
}
|
|
432
|
-
ngOnChanges(changes) {
|
|
433
|
-
if (changes['data'] && !changes['data'].isFirstChange()) {
|
|
434
|
-
this.updateData();
|
|
435
|
-
}
|
|
436
|
-
if (changes['columns'] && !changes['columns'].isFirstChange()) {
|
|
437
|
-
this.updateColumns();
|
|
438
|
-
}
|
|
439
|
-
if (changes['theme'] && !changes['theme'].isFirstChange()) {
|
|
440
|
-
this.applyTheme();
|
|
441
|
-
}
|
|
442
|
-
if (changes['customClass'] && !changes['customClass'].isFirstChange()) {
|
|
443
|
-
this.applyCustomClass(changes['customClass'].previousValue, this.customClass());
|
|
444
|
-
}
|
|
445
|
-
}
|
|
446
|
-
ngOnDestroy() {
|
|
447
|
-
this.destroyTable();
|
|
448
|
-
}
|
|
449
|
-
initializeTable() {
|
|
450
|
-
if (this._tabulator) {
|
|
451
|
-
this.destroyTable();
|
|
452
|
-
}
|
|
453
|
-
const container = document.getElementById(this.containerId);
|
|
454
|
-
if (!container) {
|
|
455
|
-
console.warn('Tabulator container not found');
|
|
456
|
-
return;
|
|
457
|
-
}
|
|
458
|
-
const config = {
|
|
459
|
-
data: this.data(),
|
|
460
|
-
columns: this.columns(),
|
|
461
|
-
height: this.height(),
|
|
462
|
-
layout: this.layout(),
|
|
463
|
-
dataTree: this.dataTree(),
|
|
464
|
-
dataTreeChildField: this.dataTreeChildField(),
|
|
465
|
-
dataTreeStartExpanded: this.dataTreeStartExpanded(),
|
|
466
|
-
dataTreeSelectPropagate: this.dataTreeSelectPropagate(),
|
|
467
|
-
reactiveData: this.reactiveData(),
|
|
468
|
-
placeholder: this.placeholder(),
|
|
469
|
-
autoResize: this.autoResize(),
|
|
470
|
-
selectable: this.selectable(),
|
|
471
|
-
renderVertical: 'virtual',
|
|
472
|
-
renderVerticalBuffer: 300,
|
|
473
|
-
...this.options(),
|
|
474
|
-
};
|
|
475
|
-
try {
|
|
476
|
-
this._tabulator = new Tabulator(container, config);
|
|
477
|
-
this.applyTheme();
|
|
478
|
-
this.registerEvents();
|
|
479
|
-
this.tableReady.emit(this._tabulator);
|
|
480
|
-
}
|
|
481
|
-
catch (error) {
|
|
482
|
-
console.error('Error initializing Tabulator:', error);
|
|
483
|
-
}
|
|
484
|
-
}
|
|
485
|
-
applyTheme() {
|
|
486
|
-
if (this._tabulator) {
|
|
487
|
-
// Tabulator themes are applied via CSS classes on the table element
|
|
488
|
-
const tableElement = this._tabulator.element;
|
|
489
|
-
// Remove existing theme classes
|
|
490
|
-
tableElement.classList.remove('tabulator-modern', 'tabulator-midnight', 'tabulator-simple', 'tabulator-site', 'tabulator-site-dark');
|
|
491
|
-
// Add current theme class (skip 'default' as it uses base styles)
|
|
492
|
-
const theme = this.theme();
|
|
493
|
-
if (theme.name !== 'default') {
|
|
494
|
-
tableElement.classList.add(`tabulator-${theme.name}`);
|
|
495
|
-
}
|
|
496
|
-
// Apply custom classes
|
|
497
|
-
this.applyCustomClass('', this.customClass());
|
|
498
|
-
}
|
|
499
|
-
}
|
|
500
|
-
applyCustomClass(previousClass, newClass) {
|
|
501
|
-
if (this._tabulator) {
|
|
502
|
-
const tableElement = this._tabulator.element;
|
|
503
|
-
// Remove previous custom classes
|
|
504
|
-
if (previousClass) {
|
|
505
|
-
const prevClasses = previousClass.split(' ').filter(cls => cls.trim());
|
|
506
|
-
prevClasses.forEach(cls => tableElement.classList.remove(cls));
|
|
507
|
-
}
|
|
508
|
-
// Add new custom classes
|
|
509
|
-
if (newClass) {
|
|
510
|
-
const newClasses = newClass.split(' ').filter(cls => cls.trim());
|
|
511
|
-
newClasses.forEach(cls => tableElement.classList.add(cls));
|
|
512
|
-
}
|
|
513
|
-
}
|
|
514
|
-
}
|
|
515
|
-
registerEvents() {
|
|
516
|
-
this._tabulator.on('cellEdited', cell => {
|
|
517
|
-
this.cellEdited.emit(cell);
|
|
518
|
-
});
|
|
519
|
-
this._tabulator.on('rowClick', (e, row) => {
|
|
520
|
-
this.rowClick.emit(row);
|
|
521
|
-
});
|
|
522
|
-
this._tabulator.on('rowSelected', row => {
|
|
523
|
-
this.rowSelected.emit(row);
|
|
524
|
-
});
|
|
525
|
-
}
|
|
526
|
-
updateData() {
|
|
527
|
-
if (this._tabulator) {
|
|
528
|
-
this._tabulator.replaceData(this.data());
|
|
529
|
-
}
|
|
530
|
-
}
|
|
531
|
-
updateColumns() {
|
|
532
|
-
if (this._tabulator) {
|
|
533
|
-
this._tabulator.setColumns(this.columns());
|
|
534
|
-
}
|
|
535
|
-
}
|
|
536
|
-
destroyTable() {
|
|
537
|
-
if (this._tabulator) {
|
|
538
|
-
this._tabulator.destroy();
|
|
539
|
-
}
|
|
540
|
-
}
|
|
541
|
-
// Public API methods
|
|
542
|
-
getInstance() {
|
|
543
|
-
return this._tabulator;
|
|
544
|
-
}
|
|
545
|
-
redraw() {
|
|
546
|
-
if (this._tabulator) {
|
|
547
|
-
this._tabulator.redraw();
|
|
548
|
-
}
|
|
549
|
-
}
|
|
550
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TabulatorTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
551
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: TabulatorTableComponent, isStandalone: true, selector: "acp-tabulator", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, dataTree: { classPropertyName: "dataTree", publicName: "dataTree", isSignal: true, isRequired: false, transformFunction: null }, dataTreeChildField: { classPropertyName: "dataTreeChildField", publicName: "dataTreeChildField", isSignal: true, isRequired: false, transformFunction: null }, dataTreeStartExpanded: { classPropertyName: "dataTreeStartExpanded", publicName: "dataTreeStartExpanded", isSignal: true, isRequired: false, transformFunction: null }, dataTreeSelectPropagate: { classPropertyName: "dataTreeSelectPropagate", publicName: "dataTreeSelectPropagate", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, reactiveData: { classPropertyName: "reactiveData", publicName: "reactiveData", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellEdited: "cellEdited", rowClick: "rowClick", rowSelected: "rowSelected", tableReady: "tableReady" }, usesOnChanges: true, ngImport: i0, template: "<div [id]=\"containerId\" class=\"acp-tabulator-container\"></div>\n", styles: [".acp-tabulator-table{display:block}.acp-tabulator-container{width:100%}.acp-tabulator-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-container .tabulator-row.tabulator-selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .12))}@media (max-width: 768px){.acp-tabulator-container .tabulator-header{font-size:.875rem}.acp-tabulator-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-container .tabulator-loader{background:var(--mat-sys-surface-container, rgba(255, 255, 255, .8));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
552
|
-
}
|
|
553
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TabulatorTableComponent, decorators: [{
|
|
554
|
-
type: Component,
|
|
555
|
-
args: [{ selector: 'acp-tabulator', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<div [id]=\"containerId\" class=\"acp-tabulator-container\"></div>\n", styles: [".acp-tabulator-table{display:block}.acp-tabulator-container{width:100%}.acp-tabulator-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-container .tabulator-row.tabulator-selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .12))}@media (max-width: 768px){.acp-tabulator-container .tabulator-header{font-size:.875rem}.acp-tabulator-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-container .tabulator-loader{background:var(--mat-sys-surface-container, rgba(255, 255, 255, .8));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}\n"] }]
|
|
556
|
-
}] });
|
|
557
|
-
|
|
558
396
|
class GetTotalPipe {
|
|
559
397
|
transform(colName, dataSource) {
|
|
560
398
|
return this.getTotal(colName, dataSource) || '';
|
|
@@ -568,10 +406,10 @@ class GetTotalPipe {
|
|
|
568
406
|
.reduce((acc, value) => (value ? acc + Number(value) : acc), 0);
|
|
569
407
|
return total?.toFixed(2);
|
|
570
408
|
}
|
|
571
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
572
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.
|
|
409
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GetTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
410
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: GetTotalPipe, isStandalone: true, name: "getTotal" });
|
|
573
411
|
}
|
|
574
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
412
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GetTotalPipe, decorators: [{
|
|
575
413
|
type: Pipe,
|
|
576
414
|
args: [{
|
|
577
415
|
name: 'getTotal',
|
|
@@ -626,17 +464,17 @@ class StatusDisplayPipe {
|
|
|
626
464
|
return gender === 'female' ? 'Inactiva' : 'Inactivo';
|
|
627
465
|
}
|
|
628
466
|
}
|
|
629
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
630
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.
|
|
467
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StatusDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
468
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: StatusDisplayPipe, isStandalone: true, name: "statusDisplay" });
|
|
631
469
|
}
|
|
632
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
470
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StatusDisplayPipe, decorators: [{
|
|
633
471
|
type: Pipe,
|
|
634
472
|
args: [{
|
|
635
473
|
name: 'statusDisplay',
|
|
636
474
|
}]
|
|
637
475
|
}] });
|
|
638
476
|
|
|
639
|
-
class
|
|
477
|
+
class DynamicTable {
|
|
640
478
|
componentRefs = [];
|
|
641
479
|
embeddedViews = [];
|
|
642
480
|
cdr = inject(ChangeDetectorRef);
|
|
@@ -647,6 +485,7 @@ class DynamicTableComponent {
|
|
|
647
485
|
visibleColumns = [];
|
|
648
486
|
columnDefinitions = [];
|
|
649
487
|
showSelectBox = input(false, ...(ngDevMode ? [{ debugName: "showSelectBox" }] : []));
|
|
488
|
+
multipleSelection = input(true, ...(ngDevMode ? [{ debugName: "multipleSelection" }] : []));
|
|
650
489
|
tableData = input([], ...(ngDevMode ? [{ debugName: "tableData" }] : []));
|
|
651
490
|
rowTemplate = input(null, ...(ngDevMode ? [{ debugName: "rowTemplate" }] : []));
|
|
652
491
|
expandedDetail = null;
|
|
@@ -732,7 +571,7 @@ class DynamicTableComponent {
|
|
|
732
571
|
this.columnsToDisplayWithExpand = newColumns;
|
|
733
572
|
}
|
|
734
573
|
initializeSelection() {
|
|
735
|
-
this.selection = new SelectionModel(
|
|
574
|
+
this.selection = new SelectionModel(this.multipleSelection(), []);
|
|
736
575
|
}
|
|
737
576
|
registerTableContent() {
|
|
738
577
|
this.columnDefs().forEach(columnDef => this.table().addColumnDef(columnDef));
|
|
@@ -754,15 +593,19 @@ class DynamicTableComponent {
|
|
|
754
593
|
}
|
|
755
594
|
isAllSelected() {
|
|
756
595
|
const numSelected = this.selection.selected.length;
|
|
757
|
-
const
|
|
758
|
-
return numSelected ===
|
|
596
|
+
const selectableRows = this.dataSource.data.filter(row => !row.disableSelection);
|
|
597
|
+
return numSelected === selectableRows.length && selectableRows.length > 0;
|
|
759
598
|
}
|
|
760
599
|
masterToggle() {
|
|
600
|
+
if (!this.multipleSelection())
|
|
601
|
+
return;
|
|
761
602
|
if (this.isAllSelected()) {
|
|
762
603
|
this.selection.clear();
|
|
763
604
|
}
|
|
764
605
|
else {
|
|
765
|
-
this.dataSource.data
|
|
606
|
+
this.dataSource.data
|
|
607
|
+
.filter(row => !row.disableSelection)
|
|
608
|
+
.forEach(row => this.selection.select(row));
|
|
766
609
|
}
|
|
767
610
|
this.rowSelected.emit(this.selection.selected);
|
|
768
611
|
this.cdr.markForCheck();
|
|
@@ -774,6 +617,8 @@ class DynamicTableComponent {
|
|
|
774
617
|
return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row`;
|
|
775
618
|
}
|
|
776
619
|
selectRow(row) {
|
|
620
|
+
if (row.disableSelection)
|
|
621
|
+
return;
|
|
777
622
|
this.selection.toggle(row);
|
|
778
623
|
this.rowSelected.emit(this.selection.selected);
|
|
779
624
|
this.cdr.markForCheck();
|
|
@@ -789,16 +634,16 @@ class DynamicTableComponent {
|
|
|
789
634
|
}
|
|
790
635
|
this.cdr.markForCheck();
|
|
791
636
|
}
|
|
792
|
-
|
|
793
|
-
return element.
|
|
637
|
+
getRowStyle(element) {
|
|
638
|
+
return element.rowStyle || {};
|
|
794
639
|
}
|
|
795
640
|
handlePageEvent(e) {
|
|
796
641
|
this.pageEvent.emit(e);
|
|
797
642
|
}
|
|
798
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
799
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DynamicTableComponent, isStandalone: true, selector: "acp-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=\"acp-dynamic-table\">\n <div class=\"acp-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\n class=\"m-0 p-0 acp-detail-expand\"\n [class.acp-expanded]=\"element === expandedElement\"\n >\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=\"acp-dynamic-table-row\"\n [class.acp-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=\"acp-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: [".acp-dynamic-table{display:block}.acp-dynamic-table .acp-table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}.acp-dynamic-table table{width:100%}.acp-dynamic-table tr.acp-dynamic-table-detail-row{height:0}.acp-dynamic-table tr.acp-dynamic-table-row:not(.acp-dynamic-table-expanded-row):hover{background:var(--mat-sys-surface-variant, whitesmoke)}.acp-dynamic-table tr.acp-dynamic-table-row:not(.acp-dynamic-table-expanded-row):active{background:var(--mat-sys-surface-container, #efefef)}.acp-dynamic-table .acp-dynamic-table-row td{border-bottom-width:0}.acp-dynamic-table .acp-detail-expand{height:0;overflow:hidden;transition:height .15s ease-in-out}.acp-dynamic-table .acp-detail-expand.acp-expanded{height:auto;overflow:visible}@starting-style{.acp-dynamic-table .acp-detail-expand.acp-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 });
|
|
643
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
644
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DynamicTable, isStandalone: true, selector: "acp-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 }, multipleSelection: { classPropertyName: "multipleSelection", publicName: "multipleSelection", 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=\"acp-dynamic-table\">\n <div class=\"acp-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 @if (multipleSelection()) {\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 }\n </th>\n <td *matCellDef=\"let row\" mat-cell>\n <mat-checkbox\n (change)=\"$event ? selectRow(row) : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"row.disableSelection\"\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>{{ col.label }}</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 { @switch (col.type) { @case ('image') {\n <img [src]=\"element[col.key]\" class=\"img-fluid img-thumbnail my-1\" width=\"50\" alt=\"\" />\n } @case ('number') {\n <div>{{ element[col.key] | number: '1.2' : locale() }}</div>\n } @case ('date') {\n <div>{{ element[col.key] | date: 'dd.MM.yyyy' }}</div>\n } @case ('expand') {\n <button mat-icon-button aria-label=\"expand row\" (click)=\"onExpand($event, element)\">\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 } @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n col.templateOutlet;\n context: { $implicit: element, index: i }\n \"\n />\n } @case ('custom') {\n <ng-container #dynamicContent />\n } @default {\n <div>{{ element[col.key] }}</div>\n } } }\n </td>\n\n <td *matFooterCellDef mat-footer-cell>\n @if (col.index === 0) {\n <div>Total</div>\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 acp-detail-expand\" [class.acp-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=\"acp-dynamic-table-row\"\n [class.acp-dynamic-table-expanded-row]=\"expandedElement === row\"\n [ngStyle]=\"getRowStyle(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=\"acp-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]=\"getRowStyle(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 </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: [".acp-dynamic-table{display:block}.acp-dynamic-table .acp-table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}.acp-dynamic-table table{width:100%}.acp-dynamic-table tr.acp-dynamic-table-detail-row{height:0}.acp-dynamic-table tr.acp-dynamic-table-row:not(.acp-dynamic-table-expanded-row):hover{background:var(--mat-sys-surface-variant, whitesmoke)}.acp-dynamic-table tr.acp-dynamic-table-row:not(.acp-dynamic-table-expanded-row):active{background:var(--mat-sys-surface-container, #efefef)}.acp-dynamic-table .acp-dynamic-table-row td{border-bottom-width:0}.acp-dynamic-table .acp-detail-expand{height:0;overflow:hidden;transition:height .15s ease-in-out}.acp-dynamic-table .acp-detail-expand.acp-expanded{height:auto;overflow:visible}@starting-style{.acp-dynamic-table .acp-detail-expand.acp-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 });
|
|
800
645
|
}
|
|
801
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
646
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicTable, decorators: [{
|
|
802
647
|
type: Component,
|
|
803
648
|
args: [{ selector: 'acp-dynamic-table', standalone: true, imports: [
|
|
804
649
|
MatTableModule,
|
|
@@ -813,7 +658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
|
|
|
813
658
|
DatePipe,
|
|
814
659
|
DecimalPipe,
|
|
815
660
|
NgTemplateOutlet,
|
|
816
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"acp-dynamic-table\">\n <div class=\"acp-table-container small-table\">\n <table #sort=\"matSort\" [dataSource]=\"dataSource.data\" mat-table matSort>\n @if (columnDefinitions) {\n
|
|
661
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"acp-dynamic-table\">\n <div class=\"acp-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 @if (multipleSelection()) {\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 }\n </th>\n <td *matCellDef=\"let row\" mat-cell>\n <mat-checkbox\n (change)=\"$event ? selectRow(row) : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"row.disableSelection\"\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>{{ col.label }}</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 { @switch (col.type) { @case ('image') {\n <img [src]=\"element[col.key]\" class=\"img-fluid img-thumbnail my-1\" width=\"50\" alt=\"\" />\n } @case ('number') {\n <div>{{ element[col.key] | number: '1.2' : locale() }}</div>\n } @case ('date') {\n <div>{{ element[col.key] | date: 'dd.MM.yyyy' }}</div>\n } @case ('expand') {\n <button mat-icon-button aria-label=\"expand row\" (click)=\"onExpand($event, element)\">\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 } @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n col.templateOutlet;\n context: { $implicit: element, index: i }\n \"\n />\n } @case ('custom') {\n <ng-container #dynamicContent />\n } @default {\n <div>{{ element[col.key] }}</div>\n } } }\n </td>\n\n <td *matFooterCellDef mat-footer-cell>\n @if (col.index === 0) {\n <div>Total</div>\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 acp-detail-expand\" [class.acp-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=\"acp-dynamic-table-row\"\n [class.acp-dynamic-table-expanded-row]=\"expandedElement === row\"\n [ngStyle]=\"getRowStyle(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=\"acp-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]=\"getRowStyle(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 </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: [".acp-dynamic-table{display:block}.acp-dynamic-table .acp-table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}.acp-dynamic-table table{width:100%}.acp-dynamic-table tr.acp-dynamic-table-detail-row{height:0}.acp-dynamic-table tr.acp-dynamic-table-row:not(.acp-dynamic-table-expanded-row):hover{background:var(--mat-sys-surface-variant, whitesmoke)}.acp-dynamic-table tr.acp-dynamic-table-row:not(.acp-dynamic-table-expanded-row):active{background:var(--mat-sys-surface-container, #efefef)}.acp-dynamic-table .acp-dynamic-table-row td{border-bottom-width:0}.acp-dynamic-table .acp-detail-expand{height:0;overflow:hidden;transition:height .15s ease-in-out}.acp-dynamic-table .acp-detail-expand.acp-expanded{height:auto;overflow:visible}@starting-style{.acp-dynamic-table .acp-detail-expand.acp-expanded{height:0}}\n"] }]
|
|
817
662
|
}], propDecorators: { visibleColumns: [{
|
|
818
663
|
type: Input
|
|
819
664
|
}], columnDefinitions: [{
|
|
@@ -824,6 +669,194 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
|
|
|
824
669
|
type: Input
|
|
825
670
|
}] } });
|
|
826
671
|
|
|
672
|
+
// tabulator-table.ts
|
|
673
|
+
Tabulator.registerModule([PageModule, ReactiveDataModule]);
|
|
674
|
+
class TabulatorTable {
|
|
675
|
+
// Data inputs
|
|
676
|
+
data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
677
|
+
columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
678
|
+
// Layout inputs
|
|
679
|
+
height = input('400px', ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
680
|
+
layout = input('fitData', ...(ngDevMode ? [{ debugName: "layout" }] : []));
|
|
681
|
+
// Tree structure inputs
|
|
682
|
+
dataTree = input(false, ...(ngDevMode ? [{ debugName: "dataTree" }] : []));
|
|
683
|
+
dataTreeChildField = input('children', ...(ngDevMode ? [{ debugName: "dataTreeChildField" }] : []));
|
|
684
|
+
dataTreeStartExpanded = input(false, ...(ngDevMode ? [{ debugName: "dataTreeStartExpanded" }] : []));
|
|
685
|
+
dataTreeSelectPropagate = input(false, ...(ngDevMode ? [{ debugName: "dataTreeSelectPropagate" }] : []));
|
|
686
|
+
// Behavior inputs
|
|
687
|
+
selectable = input(true, ...(ngDevMode ? [{ debugName: "selectable" }] : []));
|
|
688
|
+
reactiveData = input(true, ...(ngDevMode ? [{ debugName: "reactiveData" }] : []));
|
|
689
|
+
placeholder = input('No data available', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
690
|
+
autoResize = input(true, ...(ngDevMode ? [{ debugName: "autoResize" }] : []));
|
|
691
|
+
// Theme configuration
|
|
692
|
+
theme = input({ name: 'default' }, ...(ngDevMode ? [{ debugName: "theme" }] : []));
|
|
693
|
+
// Custom styling
|
|
694
|
+
customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : []));
|
|
695
|
+
rowFormatter = input(...(ngDevMode ? [undefined, { debugName: "rowFormatter" }] : []));
|
|
696
|
+
// Custom options
|
|
697
|
+
options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
698
|
+
// Events
|
|
699
|
+
cellEdited = output();
|
|
700
|
+
rowClick = output();
|
|
701
|
+
rowSelected = output();
|
|
702
|
+
tableReady = output();
|
|
703
|
+
_tabulator;
|
|
704
|
+
// Made public for template access
|
|
705
|
+
containerId = `acp-tabulator-table-${Math.random().toString(36).substr(2, 9)}`;
|
|
706
|
+
ngAfterViewInit() {
|
|
707
|
+
this.initializeTable();
|
|
708
|
+
}
|
|
709
|
+
ngOnChanges(changes) {
|
|
710
|
+
if (changes['data'] && !changes['data'].isFirstChange()) {
|
|
711
|
+
this.updateData();
|
|
712
|
+
}
|
|
713
|
+
if (changes['columns'] && !changes['columns'].isFirstChange()) {
|
|
714
|
+
this.updateColumns();
|
|
715
|
+
}
|
|
716
|
+
if (changes['theme'] && !changes['theme'].isFirstChange()) {
|
|
717
|
+
this.applyTheme();
|
|
718
|
+
}
|
|
719
|
+
if (changes['customClass'] && !changes['customClass'].isFirstChange()) {
|
|
720
|
+
this.applyCustomClass(changes['customClass'].previousValue, this.customClass());
|
|
721
|
+
}
|
|
722
|
+
if (changes['rowFormatter'] && !changes['rowFormatter'].isFirstChange()) {
|
|
723
|
+
this.updateRowFormatter();
|
|
724
|
+
}
|
|
725
|
+
}
|
|
726
|
+
ngOnDestroy() {
|
|
727
|
+
this.destroyTable();
|
|
728
|
+
}
|
|
729
|
+
initializeTable() {
|
|
730
|
+
if (this._tabulator) {
|
|
731
|
+
this.destroyTable();
|
|
732
|
+
}
|
|
733
|
+
const container = document.getElementById(this.containerId);
|
|
734
|
+
if (!container) {
|
|
735
|
+
console.warn('Tabulator container not found');
|
|
736
|
+
return;
|
|
737
|
+
}
|
|
738
|
+
const config = {
|
|
739
|
+
data: this.data(),
|
|
740
|
+
columns: this.columns(),
|
|
741
|
+
height: this.height(),
|
|
742
|
+
layout: this.layout(),
|
|
743
|
+
dataTree: this.dataTree(),
|
|
744
|
+
dataTreeChildField: this.dataTreeChildField(),
|
|
745
|
+
dataTreeStartExpanded: this.dataTreeStartExpanded(),
|
|
746
|
+
dataTreeSelectPropagate: this.dataTreeSelectPropagate(),
|
|
747
|
+
reactiveData: this.reactiveData(),
|
|
748
|
+
placeholder: this.placeholder(),
|
|
749
|
+
autoResize: this.autoResize(),
|
|
750
|
+
selectable: this.selectable(),
|
|
751
|
+
renderVertical: 'virtual',
|
|
752
|
+
renderVerticalBuffer: 300,
|
|
753
|
+
rowFormatter: this.getRowFormatter(),
|
|
754
|
+
...this.options(),
|
|
755
|
+
};
|
|
756
|
+
try {
|
|
757
|
+
this._tabulator = new Tabulator(container, config);
|
|
758
|
+
this.applyTheme();
|
|
759
|
+
this.registerEvents();
|
|
760
|
+
this.tableReady.emit(this._tabulator);
|
|
761
|
+
}
|
|
762
|
+
catch (error) {
|
|
763
|
+
console.error('Error initializing Tabulator:', error);
|
|
764
|
+
}
|
|
765
|
+
}
|
|
766
|
+
applyTheme() {
|
|
767
|
+
if (this._tabulator) {
|
|
768
|
+
// Tabulator themes are applied via CSS classes on the table element
|
|
769
|
+
const tableElement = this._tabulator.element;
|
|
770
|
+
// Remove existing theme classes
|
|
771
|
+
tableElement.classList.remove('tabulator-modern', 'tabulator-midnight', 'tabulator-simple', 'tabulator-site', 'tabulator-site-dark');
|
|
772
|
+
// Add current theme class (skip 'default' as it uses base styles)
|
|
773
|
+
const theme = this.theme();
|
|
774
|
+
if (theme.name !== 'default') {
|
|
775
|
+
tableElement.classList.add(`tabulator-${theme.name}`);
|
|
776
|
+
}
|
|
777
|
+
// Apply custom classes
|
|
778
|
+
this.applyCustomClass('', this.customClass());
|
|
779
|
+
}
|
|
780
|
+
}
|
|
781
|
+
applyCustomClass(previousClass, newClass) {
|
|
782
|
+
if (this._tabulator) {
|
|
783
|
+
const tableElement = this._tabulator.element;
|
|
784
|
+
// Remove previous custom classes
|
|
785
|
+
if (previousClass) {
|
|
786
|
+
const prevClasses = previousClass.split(' ').filter(cls => cls.trim());
|
|
787
|
+
prevClasses.forEach(cls => tableElement.classList.remove(cls));
|
|
788
|
+
}
|
|
789
|
+
// Add new custom classes
|
|
790
|
+
if (newClass) {
|
|
791
|
+
const newClasses = newClass.split(' ').filter(cls => cls.trim());
|
|
792
|
+
newClasses.forEach(cls => tableElement.classList.add(cls));
|
|
793
|
+
}
|
|
794
|
+
}
|
|
795
|
+
}
|
|
796
|
+
registerEvents() {
|
|
797
|
+
this._tabulator.on('cellEdited', cell => {
|
|
798
|
+
this.cellEdited.emit(cell);
|
|
799
|
+
});
|
|
800
|
+
this._tabulator.on('rowClick', (e, row) => {
|
|
801
|
+
this.rowClick.emit(row);
|
|
802
|
+
});
|
|
803
|
+
this._tabulator.on('rowSelected', row => {
|
|
804
|
+
this.rowSelected.emit(row);
|
|
805
|
+
});
|
|
806
|
+
}
|
|
807
|
+
updateData() {
|
|
808
|
+
if (this._tabulator) {
|
|
809
|
+
this._tabulator.replaceData(this.data());
|
|
810
|
+
}
|
|
811
|
+
}
|
|
812
|
+
updateColumns() {
|
|
813
|
+
if (this._tabulator) {
|
|
814
|
+
this._tabulator.setColumns(this.columns());
|
|
815
|
+
}
|
|
816
|
+
}
|
|
817
|
+
destroyTable() {
|
|
818
|
+
if (this._tabulator) {
|
|
819
|
+
this._tabulator.destroy();
|
|
820
|
+
}
|
|
821
|
+
}
|
|
822
|
+
updateRowFormatter() {
|
|
823
|
+
if (this._tabulator) {
|
|
824
|
+
this._tabulator.redraw(true);
|
|
825
|
+
}
|
|
826
|
+
}
|
|
827
|
+
// Public API methods
|
|
828
|
+
getInstance() {
|
|
829
|
+
return this._tabulator;
|
|
830
|
+
}
|
|
831
|
+
redraw() {
|
|
832
|
+
if (this._tabulator) {
|
|
833
|
+
this._tabulator.redraw();
|
|
834
|
+
}
|
|
835
|
+
}
|
|
836
|
+
getRowFormatter() {
|
|
837
|
+
return (row) => {
|
|
838
|
+
const data = row.getData();
|
|
839
|
+
const element = row.getElement();
|
|
840
|
+
// Apply custom row formatter if provided
|
|
841
|
+
const customFormatter = this.rowFormatter();
|
|
842
|
+
if (customFormatter) {
|
|
843
|
+
customFormatter(row);
|
|
844
|
+
return;
|
|
845
|
+
}
|
|
846
|
+
// Apply rowStyle if present in data
|
|
847
|
+
if (data.rowStyle) {
|
|
848
|
+
Object.assign(element.style, data.rowStyle);
|
|
849
|
+
}
|
|
850
|
+
};
|
|
851
|
+
}
|
|
852
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabulatorTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
853
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: TabulatorTable, isStandalone: true, selector: "acp-tabulator-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, dataTree: { classPropertyName: "dataTree", publicName: "dataTree", isSignal: true, isRequired: false, transformFunction: null }, dataTreeChildField: { classPropertyName: "dataTreeChildField", publicName: "dataTreeChildField", isSignal: true, isRequired: false, transformFunction: null }, dataTreeStartExpanded: { classPropertyName: "dataTreeStartExpanded", publicName: "dataTreeStartExpanded", isSignal: true, isRequired: false, transformFunction: null }, dataTreeSelectPropagate: { classPropertyName: "dataTreeSelectPropagate", publicName: "dataTreeSelectPropagate", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, reactiveData: { classPropertyName: "reactiveData", publicName: "reactiveData", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, rowFormatter: { classPropertyName: "rowFormatter", publicName: "rowFormatter", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellEdited: "cellEdited", rowClick: "rowClick", rowSelected: "rowSelected", tableReady: "tableReady" }, usesOnChanges: true, ngImport: i0, template: "<div [id]=\"containerId\" class=\"acp-tabulator-table-container\"></div>\n", styles: [".acp-tabulator-table{display:block}.acp-tabulator-table-container{width:100%}.acp-tabulator-table-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-table-container .tabulator-row.tabulator-selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .12))}@media (max-width: 768px){.acp-tabulator-table-container .tabulator-header{font-size:.875rem}.acp-tabulator-table-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-table-container .tabulator-loader{background:var(--mat-sys-surface-container, rgba(255, 255, 255, .8));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
854
|
+
}
|
|
855
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabulatorTable, decorators: [{
|
|
856
|
+
type: Component,
|
|
857
|
+
args: [{ selector: 'acp-tabulator-table', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<div [id]=\"containerId\" class=\"acp-tabulator-table-container\"></div>\n", styles: [".acp-tabulator-table{display:block}.acp-tabulator-table-container{width:100%}.acp-tabulator-table-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-table-container .tabulator-row.tabulator-selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .12))}@media (max-width: 768px){.acp-tabulator-table-container .tabulator-header{font-size:.875rem}.acp-tabulator-table-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-table-container .tabulator-loader{background:var(--mat-sys-surface-container, rgba(255, 255, 255, .8));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}\n"] }]
|
|
858
|
+
}] });
|
|
859
|
+
|
|
827
860
|
class AdvancedDialogService {
|
|
828
861
|
dialog = inject(MatDialog);
|
|
829
862
|
overlay = inject(Overlay);
|
|
@@ -851,13 +884,13 @@ class AdvancedDialogService {
|
|
|
851
884
|
* @returns A MatDialogRef instance pointing to the wrapper.
|
|
852
885
|
*/
|
|
853
886
|
async openInWrapper(wrapperConfig, matDialogConfig = {}) {
|
|
854
|
-
// Package the wrapper config into the `data` property for the
|
|
887
|
+
// Package the wrapper config into the `data` property for the DialogWrapper to consume.
|
|
855
888
|
const configWithWrapperData = {
|
|
856
889
|
...matDialogConfig,
|
|
857
890
|
data: wrapperConfig,
|
|
858
891
|
};
|
|
859
892
|
const dialogConfig = await this.buildDialogConfig(configWithWrapperData);
|
|
860
|
-
return this.dialog.open(
|
|
893
|
+
return this.dialog.open(DialogWrapper, dialogConfig);
|
|
861
894
|
}
|
|
862
895
|
/**
|
|
863
896
|
* Helper to open a dialog and only get an observable of the result.
|
|
@@ -938,10 +971,10 @@ class AdvancedDialogService {
|
|
|
938
971
|
};
|
|
939
972
|
return sizeMap[size];
|
|
940
973
|
}
|
|
941
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
942
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
974
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AdvancedDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
975
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AdvancedDialogService, providedIn: 'root' });
|
|
943
976
|
}
|
|
944
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
977
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AdvancedDialogService, decorators: [{
|
|
945
978
|
type: Injectable,
|
|
946
979
|
args: [{
|
|
947
980
|
providedIn: 'root',
|
|
@@ -957,7 +990,7 @@ class OverlayService {
|
|
|
957
990
|
hasBackdrop: true,
|
|
958
991
|
positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
|
|
959
992
|
});
|
|
960
|
-
const spinnerPortal = new ComponentPortal(
|
|
993
|
+
const spinnerPortal = new ComponentPortal(Spinner);
|
|
961
994
|
this.overlayRef.attach(spinnerPortal);
|
|
962
995
|
}
|
|
963
996
|
}
|
|
@@ -967,17 +1000,17 @@ class OverlayService {
|
|
|
967
1000
|
this.overlayRef = null;
|
|
968
1001
|
}
|
|
969
1002
|
}
|
|
970
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
971
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1003
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1004
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayService, providedIn: 'root' });
|
|
972
1005
|
}
|
|
973
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1006
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayService, decorators: [{
|
|
974
1007
|
type: Injectable,
|
|
975
1008
|
args: [{
|
|
976
1009
|
providedIn: 'root',
|
|
977
1010
|
}]
|
|
978
1011
|
}] });
|
|
979
1012
|
|
|
980
|
-
class
|
|
1013
|
+
class ThemeSwitcher {
|
|
981
1014
|
_darkMode = new BehaviorSubject(false);
|
|
982
1015
|
platformId = inject(PLATFORM_ID);
|
|
983
1016
|
isDarkMode$ = this._darkMode.asObservable();
|
|
@@ -1012,10 +1045,10 @@ class ThemeService {
|
|
|
1012
1045
|
return;
|
|
1013
1046
|
document.documentElement.classList.toggle('dark-theme', isDark);
|
|
1014
1047
|
}
|
|
1015
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1016
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1048
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ThemeSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1049
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ThemeSwitcher, providedIn: 'root' });
|
|
1017
1050
|
}
|
|
1018
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1051
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ThemeSwitcher, decorators: [{
|
|
1019
1052
|
type: Injectable,
|
|
1020
1053
|
args: [{
|
|
1021
1054
|
providedIn: 'root',
|
|
@@ -1442,18 +1475,18 @@ class AutocompleteWrapperService {
|
|
|
1442
1475
|
],
|
|
1443
1476
|
});
|
|
1444
1477
|
}
|
|
1445
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1446
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1478
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteWrapperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1479
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteWrapperService, providedIn: 'root' });
|
|
1447
1480
|
}
|
|
1448
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1481
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteWrapperService, decorators: [{
|
|
1449
1482
|
type: Injectable,
|
|
1450
1483
|
args: [{
|
|
1451
1484
|
providedIn: 'root',
|
|
1452
1485
|
}]
|
|
1453
1486
|
}], ctorParameters: () => [] });
|
|
1454
1487
|
|
|
1455
|
-
class
|
|
1456
|
-
themeService = inject(
|
|
1488
|
+
class ThemeToggle {
|
|
1489
|
+
themeService = inject(ThemeSwitcher);
|
|
1457
1490
|
darkMode$;
|
|
1458
1491
|
constructor() {
|
|
1459
1492
|
this.darkMode$ = this.themeService.isDarkMode$;
|
|
@@ -1461,10 +1494,10 @@ class ThemeToggleComponent {
|
|
|
1461
1494
|
toggleDarkMode() {
|
|
1462
1495
|
this.themeService.toggleDarkMode();
|
|
1463
1496
|
}
|
|
1464
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1465
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
1497
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ThemeToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1498
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ThemeToggle, 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 });
|
|
1466
1499
|
}
|
|
1467
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1500
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ThemeToggle, decorators: [{
|
|
1468
1501
|
type: Component,
|
|
1469
1502
|
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" }]
|
|
1470
1503
|
}], ctorParameters: () => [] });
|
|
@@ -1990,10 +2023,10 @@ class ReusableAutocompleteComponent {
|
|
|
1990
2023
|
focus() {
|
|
1991
2024
|
this.searchInput()?.nativeElement?.focus();
|
|
1992
2025
|
}
|
|
1993
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1994
|
-
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=\"acp-autocomplete-wrapper\" [class.acp-autocomplete-wrapper-active]=\"overlayOpen()\">\n <!-- Input Container -->\n <div\n class=\"acp-autocomplete-wrapper-input-container\"\n cdkOverlayOrigin\n #overlayPosition=\"cdkOverlayOrigin\"\n >\n <div class=\"acp-autocomplete-wrapper-input-wrapper\">\n <mat-icon class=\"acp-autocomplete-wrapper-search-icon\">search</mat-icon>\n <input\n #searchInput\n type=\"text\"\n class=\"acp-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=\"acp-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=\"acp-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: [".acp-autocomplete-wrapper{display:block}.acp-autocomplete-wrapper{position:relative;width:100%;max-width:100%}.acp-autocomplete-wrapper.acp-autocomplete-wrapper-active .acp-autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-input-container{position:relative;width:100%}.acp-autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:var(--mat-sys-surface, white);border:1px solid var(--mat-sys-outline-variant, #e0e0e0);border-radius:8px;padding:0 12px;transition:all .3s ease}.acp-autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-search-icon{color:var(--mat-sys-on-surface-variant, #666);margin-right:8px;font-size:20px}.acp-autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-input-field::placeholder{color:var(--mat-sys-on-surface-variant, #999)}.acp-autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.acp-autocomplete-wrapper-clear-button{margin-left:8px;color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.acp-autocomplete-wrapper-dropdown{background:var(--mat-sys-surface-container, white);border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid var(--mat-sys-outline-variant, #e0e0e0);overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.acp-autocomplete-wrapper-dropdown.acp-autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.acp-autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.acp-autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.acp-autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:var(--mat-sys-on-surface-variant, #666);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.acp-autocomplete-wrapper-clear-history-button{color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.acp-autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.acp-autocomplete-wrapper-filter-label{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);font-weight:500;white-space:nowrap}.acp-autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;font-size:12px;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, #333);cursor:pointer;min-width:120px}.acp-autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.acp-autocomplete-wrapper-filter-select:hover{border-color:#bbb}.acp-autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.acp-autocomplete-wrapper-pagination-info{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.acp-autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:var(--mat-sys-on-surface-variant, #666);background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.acp-autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.acp-autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.acp-autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.acp-autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.acp-autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{overflow-y:auto}.acp-autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid var(--mat-sys-outline-variant, #f5f5f5);transition:background-color .2s ease}.acp-autocomplete-wrapper-list-item:last-child{border-bottom:none}.acp-autocomplete-wrapper-list-item:hover{background-color:var(--mat-sys-surface-variant, #f8f9fa)}.acp-autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.acp-autocomplete-wrapper-item-content.acp-autocomplete-wrapper-selected{background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #1976d2)}.acp-autocomplete-wrapper-history-item .acp-autocomplete-wrapper-item-content{padding-left:12px}.acp-autocomplete-wrapper-history-icon{color:var(--mat-sys-on-surface-variant, #999);margin-right:12px;font-size:18px}.acp-autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-remove-button{margin-right:8px}.acp-autocomplete-wrapper-result-item{position:relative}.acp-autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-default-item{flex:1}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-description{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:var(--mat-sys-on-surface-variant, #666)}.acp-autocomplete-wrapper-no-results-icon{font-size:48px;color:var(--mat-sys-outline, #ccc);margin-bottom:16px;width:45px;height:45px}.acp-autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.acp-autocomplete-wrapper-default-no-results{text-align:center}.acp-autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.acp-autocomplete-wrapper-footer{border-top:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.acp-autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.acp-autocomplete-wrapper-pagination-summary{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.acp-autocomplete-wrapper-page-indicator{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);min-width:40px;text-align:center}.acp-autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.acp-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 var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button{background-color:#4caf500a;border-color:#4caf50;color:#4caf50}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button:hover{background-color:#4caf5014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button{background-color:#ff98000a;border-color:#ff9800;color:#ff9800}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button:hover{background-color:#ff980014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button{background-color:#3f51b50a;border-color:#3f51b5;color:#3f51b5}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button:hover{background-color:#3f51b514}.acp-autocomplete-wrapper-button-text{display:inline}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}@media (max-width: 768px){.acp-autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.acp-autocomplete-wrapper-dropdown-content{max-height:60vh}.acp-autocomplete-wrapper-input-field{font-size:16px}.acp-autocomplete-wrapper-footer{padding:8px 12px}.acp-autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.acp-autocomplete-wrapper-footer-button{width:100%;min-height:44px}.acp-autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.acp-autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.acp-autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.acp-autocomplete-wrapper-filter-label{font-size:11px}.acp-autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.acp-autocomplete-wrapper-pagination-header .acp-autocomplete-wrapper-pagination-info{display:none}.acp-autocomplete-wrapper-pagination-controls{gap:2px}.acp-autocomplete-wrapper-page-input{width:40px}.acp-autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.acp-autocomplete-wrapper-button-text{font-size:12px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:250px}}@media (max-width: 480px){.acp-autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.acp-autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.acp-autocomplete-wrapper-filter-controls{gap:8px}.acp-autocomplete-wrapper-filter-group{gap:4px}.acp-autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.acp-autocomplete-wrapper-item-content{padding:14px 12px}.acp-autocomplete-wrapper-pagination-header{gap:8px}.acp-autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.acp-autocomplete-wrapper-page-input{width:35px;height:28px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:200px}.acp-autocomplete-wrapper-footer-actions{gap:4px}.acp-autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.acp-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 });
|
|
2026
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ReusableAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2027
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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=\"acp-autocomplete-wrapper\" [class.acp-autocomplete-wrapper-active]=\"overlayOpen()\">\n <!-- Input Container -->\n <div\n class=\"acp-autocomplete-wrapper-input-container\"\n cdkOverlayOrigin\n #overlayPosition=\"cdkOverlayOrigin\"\n >\n <div class=\"acp-autocomplete-wrapper-input-wrapper\">\n <mat-icon class=\"acp-autocomplete-wrapper-search-icon\">search</mat-icon>\n <input\n #searchInput\n type=\"text\"\n class=\"acp-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=\"acp-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=\"acp-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 } @if (config.enableStockFilter && config.stockOptions) {\n <div class=\"autocomplete-wrapper-filter-group\">\n <label class=\"autocomplete-wrapper-filter-label\" for=\"stockSelect\">Stock:</label>\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 } @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: [".acp-autocomplete-wrapper{display:block}.acp-autocomplete-wrapper{position:relative;width:100%;max-width:100%}.acp-autocomplete-wrapper.acp-autocomplete-wrapper-active .acp-autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-input-container{position:relative;width:100%}.acp-autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:var(--mat-sys-surface, white);border:1px solid var(--mat-sys-outline-variant, #e0e0e0);border-radius:8px;padding:0 12px;transition:all .3s ease}.acp-autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-search-icon{color:var(--mat-sys-on-surface-variant, #666);margin-right:8px;font-size:20px}.acp-autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-input-field::placeholder{color:var(--mat-sys-on-surface-variant, #999)}.acp-autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.acp-autocomplete-wrapper-clear-button{margin-left:8px;color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.acp-autocomplete-wrapper-dropdown{background:var(--mat-sys-surface-container, white);border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid var(--mat-sys-outline-variant, #e0e0e0);overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.acp-autocomplete-wrapper-dropdown.acp-autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.acp-autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.acp-autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.acp-autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:var(--mat-sys-on-surface-variant, #666);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.acp-autocomplete-wrapper-clear-history-button{color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.acp-autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.acp-autocomplete-wrapper-filter-label{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);font-weight:500;white-space:nowrap}.acp-autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;font-size:12px;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, #333);cursor:pointer;min-width:120px}.acp-autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.acp-autocomplete-wrapper-filter-select:hover{border-color:#bbb}.acp-autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.acp-autocomplete-wrapper-pagination-info{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.acp-autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:var(--mat-sys-on-surface-variant, #666);background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.acp-autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.acp-autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.acp-autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.acp-autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.acp-autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{overflow-y:auto}.acp-autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid var(--mat-sys-outline-variant, #f5f5f5);transition:background-color .2s ease}.acp-autocomplete-wrapper-list-item:last-child{border-bottom:none}.acp-autocomplete-wrapper-list-item:hover{background-color:var(--mat-sys-surface-variant, #f8f9fa)}.acp-autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.acp-autocomplete-wrapper-item-content.acp-autocomplete-wrapper-selected{background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #1976d2)}.acp-autocomplete-wrapper-history-item .acp-autocomplete-wrapper-item-content{padding-left:12px}.acp-autocomplete-wrapper-history-icon{color:var(--mat-sys-on-surface-variant, #999);margin-right:12px;font-size:18px}.acp-autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-remove-button{margin-right:8px}.acp-autocomplete-wrapper-result-item{position:relative}.acp-autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-default-item{flex:1}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-description{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:var(--mat-sys-on-surface-variant, #666)}.acp-autocomplete-wrapper-no-results-icon{font-size:48px;color:var(--mat-sys-outline, #ccc);margin-bottom:16px;width:45px;height:45px}.acp-autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.acp-autocomplete-wrapper-default-no-results{text-align:center}.acp-autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.acp-autocomplete-wrapper-footer{border-top:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.acp-autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.acp-autocomplete-wrapper-pagination-summary{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.acp-autocomplete-wrapper-page-indicator{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);min-width:40px;text-align:center}.acp-autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.acp-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 var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button{background-color:#4caf500a;border-color:#4caf50;color:#4caf50}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button:hover{background-color:#4caf5014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button{background-color:#ff98000a;border-color:#ff9800;color:#ff9800}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button:hover{background-color:#ff980014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button{background-color:#3f51b50a;border-color:#3f51b5;color:#3f51b5}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button:hover{background-color:#3f51b514}.acp-autocomplete-wrapper-button-text{display:inline}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}@media (max-width: 768px){.acp-autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.acp-autocomplete-wrapper-dropdown-content{max-height:60vh}.acp-autocomplete-wrapper-input-field{font-size:16px}.acp-autocomplete-wrapper-footer{padding:8px 12px}.acp-autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.acp-autocomplete-wrapper-footer-button{width:100%;min-height:44px}.acp-autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.acp-autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.acp-autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.acp-autocomplete-wrapper-filter-label{font-size:11px}.acp-autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.acp-autocomplete-wrapper-pagination-header .acp-autocomplete-wrapper-pagination-info{display:none}.acp-autocomplete-wrapper-pagination-controls{gap:2px}.acp-autocomplete-wrapper-page-input{width:40px}.acp-autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.acp-autocomplete-wrapper-button-text{font-size:12px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:250px}}@media (max-width: 480px){.acp-autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.acp-autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.acp-autocomplete-wrapper-filter-controls{gap:8px}.acp-autocomplete-wrapper-filter-group{gap:4px}.acp-autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.acp-autocomplete-wrapper-item-content{padding:14px 12px}.acp-autocomplete-wrapper-pagination-header{gap:8px}.acp-autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.acp-autocomplete-wrapper-page-input{width:35px;height:28px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:200px}.acp-autocomplete-wrapper-footer-actions{gap:4px}.acp-autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.acp-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 });
|
|
1995
2028
|
}
|
|
1996
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2029
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ReusableAutocompleteComponent, decorators: [{
|
|
1997
2030
|
type: Component,
|
|
1998
2031
|
args: [{ selector: 'acp-autocomplete-wrapper', imports: [
|
|
1999
2032
|
MatIcon,
|
|
@@ -2003,12 +2036,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
|
|
|
2003
2036
|
MatProgressSpinner,
|
|
2004
2037
|
FormsModule,
|
|
2005
2038
|
MatIconButton,
|
|
2006
|
-
], encapsulation: ViewEncapsulation.None, template: "<div class=\"acp-autocomplete-wrapper\" [class.acp-autocomplete-wrapper-active]=\"overlayOpen()\">\n <!-- Input Container -->\n <div\n class=\"acp-autocomplete-wrapper-input-container\"\n cdkOverlayOrigin\n #overlayPosition=\"cdkOverlayOrigin\"\n >\n <div class=\"acp-autocomplete-wrapper-input-wrapper\">\n <mat-icon class=\"acp-autocomplete-wrapper-search-icon\">search</mat-icon>\n <input\n #searchInput\n type=\"text\"\n class=\"acp-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=\"acp-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=\"acp-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: [".acp-autocomplete-wrapper{display:block}.acp-autocomplete-wrapper{position:relative;width:100%;max-width:100%}.acp-autocomplete-wrapper.acp-autocomplete-wrapper-active .acp-autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-input-container{position:relative;width:100%}.acp-autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:var(--mat-sys-surface, white);border:1px solid var(--mat-sys-outline-variant, #e0e0e0);border-radius:8px;padding:0 12px;transition:all .3s ease}.acp-autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-search-icon{color:var(--mat-sys-on-surface-variant, #666);margin-right:8px;font-size:20px}.acp-autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-input-field::placeholder{color:var(--mat-sys-on-surface-variant, #999)}.acp-autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.acp-autocomplete-wrapper-clear-button{margin-left:8px;color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.acp-autocomplete-wrapper-dropdown{background:var(--mat-sys-surface-container, white);border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid var(--mat-sys-outline-variant, #e0e0e0);overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.acp-autocomplete-wrapper-dropdown.acp-autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.acp-autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.acp-autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.acp-autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:var(--mat-sys-on-surface-variant, #666);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.acp-autocomplete-wrapper-clear-history-button{color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.acp-autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.acp-autocomplete-wrapper-filter-label{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);font-weight:500;white-space:nowrap}.acp-autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;font-size:12px;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, #333);cursor:pointer;min-width:120px}.acp-autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.acp-autocomplete-wrapper-filter-select:hover{border-color:#bbb}.acp-autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.acp-autocomplete-wrapper-pagination-info{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.acp-autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:var(--mat-sys-on-surface-variant, #666);background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.acp-autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.acp-autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.acp-autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.acp-autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.acp-autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{overflow-y:auto}.acp-autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid var(--mat-sys-outline-variant, #f5f5f5);transition:background-color .2s ease}.acp-autocomplete-wrapper-list-item:last-child{border-bottom:none}.acp-autocomplete-wrapper-list-item:hover{background-color:var(--mat-sys-surface-variant, #f8f9fa)}.acp-autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.acp-autocomplete-wrapper-item-content.acp-autocomplete-wrapper-selected{background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #1976d2)}.acp-autocomplete-wrapper-history-item .acp-autocomplete-wrapper-item-content{padding-left:12px}.acp-autocomplete-wrapper-history-icon{color:var(--mat-sys-on-surface-variant, #999);margin-right:12px;font-size:18px}.acp-autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-remove-button{margin-right:8px}.acp-autocomplete-wrapper-result-item{position:relative}.acp-autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-default-item{flex:1}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-description{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:var(--mat-sys-on-surface-variant, #666)}.acp-autocomplete-wrapper-no-results-icon{font-size:48px;color:var(--mat-sys-outline, #ccc);margin-bottom:16px;width:45px;height:45px}.acp-autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.acp-autocomplete-wrapper-default-no-results{text-align:center}.acp-autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.acp-autocomplete-wrapper-footer{border-top:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.acp-autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.acp-autocomplete-wrapper-pagination-summary{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.acp-autocomplete-wrapper-page-indicator{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);min-width:40px;text-align:center}.acp-autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.acp-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 var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button{background-color:#4caf500a;border-color:#4caf50;color:#4caf50}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button:hover{background-color:#4caf5014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button{background-color:#ff98000a;border-color:#ff9800;color:#ff9800}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button:hover{background-color:#ff980014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button{background-color:#3f51b50a;border-color:#3f51b5;color:#3f51b5}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button:hover{background-color:#3f51b514}.acp-autocomplete-wrapper-button-text{display:inline}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}@media (max-width: 768px){.acp-autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.acp-autocomplete-wrapper-dropdown-content{max-height:60vh}.acp-autocomplete-wrapper-input-field{font-size:16px}.acp-autocomplete-wrapper-footer{padding:8px 12px}.acp-autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.acp-autocomplete-wrapper-footer-button{width:100%;min-height:44px}.acp-autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.acp-autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.acp-autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.acp-autocomplete-wrapper-filter-label{font-size:11px}.acp-autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.acp-autocomplete-wrapper-pagination-header .acp-autocomplete-wrapper-pagination-info{display:none}.acp-autocomplete-wrapper-pagination-controls{gap:2px}.acp-autocomplete-wrapper-page-input{width:40px}.acp-autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.acp-autocomplete-wrapper-button-text{font-size:12px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:250px}}@media (max-width: 480px){.acp-autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.acp-autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.acp-autocomplete-wrapper-filter-controls{gap:8px}.acp-autocomplete-wrapper-filter-group{gap:4px}.acp-autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.acp-autocomplete-wrapper-item-content{padding:14px 12px}.acp-autocomplete-wrapper-pagination-header{gap:8px}.acp-autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.acp-autocomplete-wrapper-page-input{width:35px;height:28px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:200px}.acp-autocomplete-wrapper-footer-actions{gap:4px}.acp-autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.acp-autocomplete-wrapper-button-text{display:none}}\n"] }]
|
|
2039
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"acp-autocomplete-wrapper\" [class.acp-autocomplete-wrapper-active]=\"overlayOpen()\">\n <!-- Input Container -->\n <div\n class=\"acp-autocomplete-wrapper-input-container\"\n cdkOverlayOrigin\n #overlayPosition=\"cdkOverlayOrigin\"\n >\n <div class=\"acp-autocomplete-wrapper-input-wrapper\">\n <mat-icon class=\"acp-autocomplete-wrapper-search-icon\">search</mat-icon>\n <input\n #searchInput\n type=\"text\"\n class=\"acp-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=\"acp-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=\"acp-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 } @if (config.enableStockFilter && config.stockOptions) {\n <div class=\"autocomplete-wrapper-filter-group\">\n <label class=\"autocomplete-wrapper-filter-label\" for=\"stockSelect\">Stock:</label>\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 } @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: [".acp-autocomplete-wrapper{display:block}.acp-autocomplete-wrapper{position:relative;width:100%;max-width:100%}.acp-autocomplete-wrapper.acp-autocomplete-wrapper-active .acp-autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-input-container{position:relative;width:100%}.acp-autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:var(--mat-sys-surface, white);border:1px solid var(--mat-sys-outline-variant, #e0e0e0);border-radius:8px;padding:0 12px;transition:all .3s ease}.acp-autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-search-icon{color:var(--mat-sys-on-surface-variant, #666);margin-right:8px;font-size:20px}.acp-autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-input-field::placeholder{color:var(--mat-sys-on-surface-variant, #999)}.acp-autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.acp-autocomplete-wrapper-clear-button{margin-left:8px;color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.acp-autocomplete-wrapper-dropdown{background:var(--mat-sys-surface-container, white);border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid var(--mat-sys-outline-variant, #e0e0e0);overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.acp-autocomplete-wrapper-dropdown.acp-autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.acp-autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.acp-autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.acp-autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:var(--mat-sys-on-surface-variant, #666);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.acp-autocomplete-wrapper-clear-history-button{color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.acp-autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.acp-autocomplete-wrapper-filter-label{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);font-weight:500;white-space:nowrap}.acp-autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;font-size:12px;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, #333);cursor:pointer;min-width:120px}.acp-autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.acp-autocomplete-wrapper-filter-select:hover{border-color:#bbb}.acp-autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.acp-autocomplete-wrapper-pagination-info{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.acp-autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:var(--mat-sys-on-surface-variant, #666);background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.acp-autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.acp-autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.acp-autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.acp-autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.acp-autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{overflow-y:auto}.acp-autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid var(--mat-sys-outline-variant, #f5f5f5);transition:background-color .2s ease}.acp-autocomplete-wrapper-list-item:last-child{border-bottom:none}.acp-autocomplete-wrapper-list-item:hover{background-color:var(--mat-sys-surface-variant, #f8f9fa)}.acp-autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.acp-autocomplete-wrapper-item-content.acp-autocomplete-wrapper-selected{background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #1976d2)}.acp-autocomplete-wrapper-history-item .acp-autocomplete-wrapper-item-content{padding-left:12px}.acp-autocomplete-wrapper-history-icon{color:var(--mat-sys-on-surface-variant, #999);margin-right:12px;font-size:18px}.acp-autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-remove-button{margin-right:8px}.acp-autocomplete-wrapper-result-item{position:relative}.acp-autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-default-item{flex:1}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-description{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:var(--mat-sys-on-surface-variant, #666)}.acp-autocomplete-wrapper-no-results-icon{font-size:48px;color:var(--mat-sys-outline, #ccc);margin-bottom:16px;width:45px;height:45px}.acp-autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.acp-autocomplete-wrapper-default-no-results{text-align:center}.acp-autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.acp-autocomplete-wrapper-footer{border-top:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.acp-autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.acp-autocomplete-wrapper-pagination-summary{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.acp-autocomplete-wrapper-page-indicator{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);min-width:40px;text-align:center}.acp-autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.acp-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 var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button{background-color:#4caf500a;border-color:#4caf50;color:#4caf50}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button:hover{background-color:#4caf5014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button{background-color:#ff98000a;border-color:#ff9800;color:#ff9800}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button:hover{background-color:#ff980014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button{background-color:#3f51b50a;border-color:#3f51b5;color:#3f51b5}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button:hover{background-color:#3f51b514}.acp-autocomplete-wrapper-button-text{display:inline}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}@media (max-width: 768px){.acp-autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.acp-autocomplete-wrapper-dropdown-content{max-height:60vh}.acp-autocomplete-wrapper-input-field{font-size:16px}.acp-autocomplete-wrapper-footer{padding:8px 12px}.acp-autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.acp-autocomplete-wrapper-footer-button{width:100%;min-height:44px}.acp-autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.acp-autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.acp-autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.acp-autocomplete-wrapper-filter-label{font-size:11px}.acp-autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.acp-autocomplete-wrapper-pagination-header .acp-autocomplete-wrapper-pagination-info{display:none}.acp-autocomplete-wrapper-pagination-controls{gap:2px}.acp-autocomplete-wrapper-page-input{width:40px}.acp-autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.acp-autocomplete-wrapper-button-text{font-size:12px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:250px}}@media (max-width: 480px){.acp-autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.acp-autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.acp-autocomplete-wrapper-filter-controls{gap:8px}.acp-autocomplete-wrapper-filter-group{gap:4px}.acp-autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.acp-autocomplete-wrapper-item-content{padding:14px 12px}.acp-autocomplete-wrapper-pagination-header{gap:8px}.acp-autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.acp-autocomplete-wrapper-page-input{width:35px;height:28px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:200px}.acp-autocomplete-wrapper-footer-actions{gap:4px}.acp-autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.acp-autocomplete-wrapper-button-text{display:none}}\n"] }]
|
|
2007
2040
|
}], propDecorators: { config: [{
|
|
2008
2041
|
type: Input
|
|
2009
2042
|
}] } });
|
|
2010
2043
|
|
|
2011
|
-
class
|
|
2044
|
+
class ToUpperCase {
|
|
2012
2045
|
el = inject(ElementRef);
|
|
2013
2046
|
renderer = inject(Renderer2);
|
|
2014
2047
|
onInput() {
|
|
@@ -2034,23 +2067,23 @@ class ToUpperCaseDirective {
|
|
|
2034
2067
|
registerOnTouched(fn) {
|
|
2035
2068
|
this.onTouched = fn;
|
|
2036
2069
|
}
|
|
2037
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2038
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
2070
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToUpperCase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2071
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: ToUpperCase, isStandalone: true, selector: "[acpToUpperCase]", host: { listeners: { "input": "onInput()" } }, providers: [
|
|
2039
2072
|
{
|
|
2040
2073
|
provide: NG_VALUE_ACCESSOR,
|
|
2041
|
-
useExisting:
|
|
2074
|
+
useExisting: ToUpperCase,
|
|
2042
2075
|
multi: true,
|
|
2043
2076
|
},
|
|
2044
2077
|
], ngImport: i0 });
|
|
2045
2078
|
}
|
|
2046
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2079
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToUpperCase, decorators: [{
|
|
2047
2080
|
type: Directive,
|
|
2048
2081
|
args: [{
|
|
2049
2082
|
selector: '[acpToUpperCase]',
|
|
2050
2083
|
providers: [
|
|
2051
2084
|
{
|
|
2052
2085
|
provide: NG_VALUE_ACCESSOR,
|
|
2053
|
-
useExisting:
|
|
2086
|
+
useExisting: ToUpperCase,
|
|
2054
2087
|
multi: true,
|
|
2055
2088
|
},
|
|
2056
2089
|
],
|
|
@@ -2060,14 +2093,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
|
|
|
2060
2093
|
args: ['input']
|
|
2061
2094
|
}] } });
|
|
2062
2095
|
|
|
2063
|
-
/*
|
|
2064
|
-
InjectionToken is a generic class provided by Angular for creating custom injection tokens.
|
|
2065
|
-
*/
|
|
2066
|
-
const DYNAMIC_INPUT = new InjectionToken('DYNAMIC_INPUT');
|
|
2067
|
-
|
|
2068
2096
|
/**
|
|
2069
2097
|
* Generated bundle index. Do not edit.
|
|
2070
2098
|
*/
|
|
2071
2099
|
|
|
2072
|
-
export { AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AdvancedDialogService, AutocompleteWrapperService,
|
|
2100
|
+
export { AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AdvancedDialogService, AutocompleteWrapperService, Button, ColumnDefinition, DialogWrapper, DynamicCard, DynamicTable, FieldDefinition, GetTotalPipe, InputChip, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TableCellIndex, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, createAutocompleteWrapperConfig };
|
|
2073
2101
|
//# sourceMappingURL=acontplus-ng-components.mjs.map
|