@acontplus/ng-components 2.1.32 → 2.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.
Files changed (14) hide show
  1. package/fesm2022/acontplus-ng-components.mjs +238 -91
  2. package/fesm2022/acontplus-ng-components.mjs.map +1 -1
  3. package/package.json +2 -2
  4. package/src/lib/components/autocomplete-wrapper/autocomplete-wrapper.scss +22 -12
  5. package/src/lib/components/button/v2/button.scss +221 -0
  6. package/src/lib/components/cards/dynamic-card/dynamic-card.scss +0 -131
  7. package/src/lib/components/dialog-wrapper/dialog-wrapper.scss +0 -1
  8. package/src/lib/components/grid/cell/cell.scss +1 -8
  9. package/src/styles/index.scss +0 -1
  10. package/types/acontplus-ng-components.d.ts +75 -24
  11. package/LICENSE +0 -21
  12. package/src/lib/components/icons/user-icon/user-icon.scss +0 -0
  13. package/src/lib/components/input-chip/input-chip.scss +0 -0
  14. package/src/styles/_variables.scss +0 -0
package/fesm2022/acontplus-ng-components.mjs CHANGED
@@ -1,19 +1,20 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, output, Injectable, viewChild, ViewContainerRef, effect, computed, PLATFORM_ID, signal, Pipe, TemplateRef, Directive, ViewChild, KeyValueDiffers, InjectionToken, Renderer2, NgZone, CSP_NONCE, DOCUMENT, ElementRef, Injector, ContentChildren, model, forwardRef, ANIMATION_MODULE_TYPE, ApplicationRef, ContentChild, HostListener } from '@angular/core';
3
- import * as i2 from '@angular/material/button';
2
+ import { inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, output, computed, Directive, ViewContainerRef, Renderer2, signal, afterRenderEffect, untracked, Injectable, viewChild, effect, PLATFORM_ID, Pipe, TemplateRef, ViewChild, KeyValueDiffers, InjectionToken, NgZone, CSP_NONCE, DOCUMENT, ElementRef, Injector, ContentChildren, model, forwardRef, ANIMATION_MODULE_TYPE, ApplicationRef, ContentChild, HostListener, SecurityContext } from '@angular/core';
3
+ import * as i1$1 from '@angular/material/button';
4
4
  import { MatIconButton, MatButtonModule, MatButton, MatMiniFabButton, MatFabButton } from '@angular/material/button';
5
5
  import * as i1 from '@angular/material/card';
6
6
  import { MatCardModule } from '@angular/material/card';
7
- import * as i3 from '@angular/material/icon';
7
+ import * as i2 from '@angular/material/icon';
8
8
  import { MatIconModule, MatIcon } from '@angular/material/icon';
9
9
  import { CdkDrag, CdkDragHandle, moveItemInArray, CdkDropList } from '@angular/cdk/drag-drop';
10
- import * as i1$1 from '@angular/material/dialog';
10
+ import * as i1$2 from '@angular/material/dialog';
11
11
  import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogConfig } from '@angular/material/dialog';
12
12
  import { NgClass, NgTemplateOutlet, isPlatformBrowser, AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe, PercentPipe } from '@angular/common';
13
13
  import { REPORT_FORMAT, DEFAULT_ICONS, FALLBACK_ICON } from '@acontplus/ui-kit';
14
- import * as i1$3 from '@angular/forms';
14
+ import { MatProgressSpinner } from '@angular/material/progress-spinner';
15
+ import * as i1$4 from '@angular/forms';
15
16
  import { FormControl, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR, FormGroup, Validators } from '@angular/forms';
16
- import * as i1$2 from '@ng-select/ng-select';
17
+ import * as i1$3 from '@ng-select/ng-select';
17
18
  import { NgSelectModule } from '@ng-select/ng-select';
18
19
  import { Subject, firstValueFrom, catchError, of, map, BehaviorSubject, delay, debounceTime, takeUntil, isObservable, merge, combineLatest, Observable, fromEvent, defer, Subscription } from 'rxjs';
19
20
  import { DomSanitizer } from '@angular/platform-browser';
@@ -22,10 +23,9 @@ import { MatChipRow, MatChipGrid, MatChipInput, MatChipListbox, MatChip } from '
22
23
  import { MatFormField, MatLabel, MatHint, MatFormFieldModule } from '@angular/material/form-field';
23
24
  import { LiveAnnouncer, _IdGenerator, CdkTrapFocus, FocusMonitor, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
24
25
  import { ENTER, COMMA, ESCAPE, hasModifierKey, SPACE } from '@angular/cdk/keycodes';
25
- import { MatProgressSpinner } from '@angular/material/progress-spinner';
26
26
  import { Tabulator, PageModule, ReactiveDataModule, FormatModule, EditModule, ValidateModule, ColumnCalcsModule, SortModule, TooltipModule, DataTreeModule, MoveRowsModule, SelectRowModule, PopupModule, InteractionModule } from 'tabulator-tables';
27
27
  import { toSignal } from '@angular/core/rxjs-interop';
28
- import * as i1$4 from '@angular/cdk/overlay';
28
+ import * as i1$5 from '@angular/cdk/overlay';
29
29
  import { Overlay, OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
30
30
  import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
31
31
  import { ComponentPortal, CdkPortalOutlet, TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
@@ -249,7 +249,7 @@ class DynamicCard {
249
249
  this.keyPress.emit(event);
250
250
  }
251
251
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DynamicCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
252
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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", keyDown: "keyDown", keyUp: "keyUp", keyPress: "keyPress" }, ngImport: i0, template: "<mat-card\n appearance=\"outlined\"\n (click)=\"handleCardClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (keyup)=\"handleKeyUp($event)\"\n (keypress)=\"handleKeyPress($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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
252
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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", keyDown: "keyDown", keyUp: "keyUp", keyPress: "keyPress" }, ngImport: i0, template: "<mat-card\n appearance=\"outlined\"\n (click)=\"handleCardClick($event)\"\n (keydown)=\"handleKeyDown($event)\"\n (keyup)=\"handleKeyUp($event)\"\n (keypress)=\"handleKeyPress($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: i1$1.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
253
253
  }
254
254
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DynamicCard, decorators: [{
255
255
  type: Component,
@@ -441,6 +441,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
441
441
  ], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "@switch (matStyle()) { @case ('text') {\n<button\n matButton\n [ngClass]=\"getButtonClasses()\"\n [disabled]=\"disabled()\"\n [type]=\"type()\"\n [title]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\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]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\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]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\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]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\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]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\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]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\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]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\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]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\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]=\"getTitle()\"\n [attr.aria-label]=\"ariaLabel() || getTitle()\"\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 (getIcon()) {\n <mat-icon>{{ getIcon() }}</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}.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"] }]
442
442
  }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], matStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "matStyle", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], reportFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "reportFormat", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], handleClick: [{ type: i0.Output, args: ["handleClick"] }] } });
443
443
 
444
+ class BaseButton {
445
+ color = input('primary', /* @ts-ignore */
446
+ ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
447
+ square = input(false, { ...(ngDevMode ? { debugName: "square" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
448
+ icon = input(/* @ts-ignore */
449
+ ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
450
+ suffixIcon = input(/* @ts-ignore */
451
+ ...(ngDevMode ? [undefined, { debugName: "suffixIcon" }] : /* istanbul ignore next */ []));
452
+ loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
453
+ disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
454
+ disableRipple = input(false, { ...(ngDevMode ? { debugName: "disableRipple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
455
+ variant = input('basic', /* @ts-ignore */
456
+ ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
457
+ appearance = input('filled', /* @ts-ignore */
458
+ ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
459
+ type = input('button', /* @ts-ignore */
460
+ ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
461
+ extended = input(false, { ...(ngDevMode ? { debugName: "extended" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
462
+ size = input('large', /* @ts-ignore */
463
+ ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
464
+ text = input(/* @ts-ignore */
465
+ ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
466
+ hasText = computed(() => !!this.text() && this.text().trim().length > 0, /* @ts-ignore */
467
+ ...(ngDevMode ? [{ debugName: "hasText" }] : /* istanbul ignore next */ []));
468
+ clicked = output();
469
+ focused = output();
470
+ blurred = output();
471
+ colorClass = computed(() => `acp-${this.color()}`, /* @ts-ignore */
472
+ ...(ngDevMode ? [{ debugName: "colorClass" }] : /* istanbul ignore next */ []));
473
+ sizeClass = computed(() => `acp-${this.size()}`, /* @ts-ignore */
474
+ ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
475
+ squareClass = computed(() => (this.square() ? 'acp-square' : ''), /* @ts-ignore */
476
+ ...(ngDevMode ? [{ debugName: "squareClass" }] : /* istanbul ignore next */ []));
477
+ isDisabled = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
478
+ ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
479
+ pointerEvents = computed(() => (this.isDisabled() ? 'none' : 'auto'), /* @ts-ignore */
480
+ ...(ngDevMode ? [{ debugName: "pointerEvents" }] : /* istanbul ignore next */ []));
481
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BaseButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
482
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BaseButton, isStandalone: true, inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", focused: "focused", blurred: "blurred" }, host: { properties: { "style.pointer-events": "pointerEvents()" } }, ngImport: i0 });
483
+ }
484
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BaseButton, decorators: [{
485
+ type: Directive,
486
+ args: [{
487
+ host: {
488
+ '[style.pointer-events]': 'pointerEvents()',
489
+ },
490
+ }]
491
+ }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], square: [{ type: i0.Input, args: [{ isSignal: true, alias: "square", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
492
+
493
+ class ButtonLoaderDirective {
494
+ acpLoading = input(false, { ...(ngDevMode ? { debugName: "acpLoading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
495
+ viewContainer = inject(ViewContainerRef);
496
+ renderer = inject(Renderer2);
497
+ spinner = null;
498
+ buttonNativeElement = signal(this.viewContainer.element.nativeElement, /* @ts-ignore */
499
+ ...(ngDevMode ? [{ debugName: "buttonNativeElement" }] : /* istanbul ignore next */ []));
500
+ spinnerSize = computed(() => {
501
+ const buttonHeight = this.buttonNativeElement().clientHeight;
502
+ return buttonHeight ? Math.trunc(buttonHeight / 1.5) : 20;
503
+ }, /* @ts-ignore */
504
+ ...(ngDevMode ? [{ debugName: "spinnerSize" }] : /* istanbul ignore next */ []));
505
+ constructor() {
506
+ afterRenderEffect({
507
+ earlyRead: () => {
508
+ if (this.buttonNativeElement().tagName !== 'BUTTON') {
509
+ throw new Error(`ButtonLoaderDirective can only be used on a button element, but used on${this.buttonNativeElement().tagName}`);
510
+ }
511
+ },
512
+ write: () => {
513
+ const loading = this.acpLoading();
514
+ untracked(() => {
515
+ if (loading) {
516
+ this.buttonNativeElement().classList.add('button-loading');
517
+ this.createSpinner();
518
+ }
519
+ else {
520
+ this.buttonNativeElement().classList.remove('button-loading');
521
+ this.destroySpinner();
522
+ }
523
+ });
524
+ },
525
+ });
526
+ }
527
+ createSpinner() {
528
+ if (!this.spinner) {
529
+ this.spinner = this.viewContainer.createComponent(MatProgressSpinner);
530
+ this.spinner.instance.diameter = this.spinnerSize();
531
+ this.spinner.instance.mode = 'indeterminate';
532
+ this.spinner.instance.strokeWidth = 2;
533
+ const spinnerElement = this.spinner.location.nativeElement;
534
+ this.renderer.setStyle(spinnerElement, 'position', 'absolute');
535
+ this.renderer.appendChild(this.buttonNativeElement(), spinnerElement);
536
+ }
537
+ }
538
+ destroySpinner() {
539
+ this.spinner?.destroy();
540
+ this.spinner = null;
541
+ }
542
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ButtonLoaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
543
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ButtonLoaderDirective, isStandalone: true, selector: "button[acpLoading]", inputs: { acpLoading: { classPropertyName: "acpLoading", publicName: "acpLoading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
544
+ }
545
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ButtonLoaderDirective, decorators: [{
546
+ type: Directive,
547
+ args: [{
548
+ selector: 'button[acpLoading]',
549
+ }]
550
+ }], ctorParameters: () => [], propDecorators: { acpLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "acpLoading", required: false }] }] } });
551
+
552
+ class AcpButton extends BaseButton {
553
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
554
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpButton, isStandalone: true, selector: "acp-button", usesInheritance: true, ngImport: i0, template: "@if (variant() === 'icon') {\n<button\n matIconButton\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else if (variant() === 'fab') {\n<button\n matFab\n [extended]=\"extended()\"\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (extended()) { @if (hasText()) { {{text()}} }\n @else { <ng-content></ng-content> } }\n</button>\n} @else if (variant() === 'mini-fab') {\n<button\n matMiniFab\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"appearance()\"\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (hasText()) { {{text()}} } @else {\n <ng-content></ng-content> } @if (suffixIcon()) {\n <mat-icon iconPositionEnd>{{suffixIcon()}}</mat-icon> }\n</button>\n}\n", styles: [".acp-primary{--mat-button-filled-container-color: var(--theme-primary-color);--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: var(--theme-primary-color);--mat-button-protected-label-text-color: var(--theme-primary-color);--mat-button-text-label-text-color: var(--theme-primary-color);--mat-button-text-state-layer-color: var(--theme-primary-color)}.acp-secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary)}.acp-accent{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary)}.acp-error{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error)}.acp-success{--mat-button-filled-container-color: #4caf50;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #4caf50;--mat-button-protected-label-text-color: #4caf50;--mat-button-text-label-text-color: #4caf50;--mat-button-text-state-layer-color: #4caf50}.acp-warning{--mat-button-filled-container-color: #f59e0b;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #f59e0b;--mat-button-protected-label-text-color: #f59e0b;--mat-button-text-label-text-color: #f59e0b;--mat-button-text-state-layer-color: #f59e0b}.acp-info{--mat-button-filled-container-color: #3b82f6;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #3b82f6;--mat-button-protected-label-text-color: #3b82f6;--mat-button-text-label-text-color: #3b82f6;--mat-button-text-state-layer-color: #3b82f6}.acp-dark{--mat-button-filled-container-color: #1f2937;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #1f2937;--mat-button-protected-label-text-color: #1f2937;--mat-button-text-label-text-color: #1f2937;--mat-button-text-state-layer-color: #1f2937}[matIconButton].acp-primary{--mat-icon-color: var(--theme-primary-color)}[matIconButton].acp-secondary{--mat-icon-color: var(--mat-sys-secondary)}[matIconButton].acp-accent{--mat-icon-color: var(--mat-sys-tertiary)}[matIconButton].acp-error{--mat-icon-color: var(--mat-sys-error)}[matIconButton].acp-success{--mat-icon-color: #10b981}[matIconButton].acp-warning{--mat-icon-color: #f59e0b}[matIconButton].acp-info{--mat-icon-color: #3b82f6}[matIconButton].acp-dark{--mat-icon-color: #1f2937}.acp-square{--mat-button-filled-container-shape: 8px;--mat-button-outlined-container-shape: 8px;--mat-button-protected-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-button-tonal-container-shape: 8px;--mat-icon-button-container-shape: 8px}.acp-medium{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 36px;--mat-chip-container-height: 28px;--mat-expansion-header-collapsed-state-height: 44px;--mat-expansion-header-expanded-state-height: 60px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: block;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 36px;--mat-button-outlined-container-height: 36px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 36px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 36px;--mat-button-tonal-container-height: 36px;--mat-button-tonal-touch-target-display: block;--mat-form-field-container-height: 52px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 14px;--mat-form-field-filled-with-label-container-padding-top: 22px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 36px;--mat-list-list-item-leading-icon-start-space: 12px;--mat-list-list-item-leading-icon-end-space: 12px;--mat-list-list-item-one-line-container-height: 44px;--mat-list-list-item-two-line-container-height: 60px;--mat-list-list-item-three-line-container-height: 84px;--mat-paginator-container-size: 52px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block;--mat-radio-touch-target-display: block;--mat-radio-state-layer-size: 36px;--mat-tab-container-height: 44px;--mat-select-arrow-transform: translateY(-8px);--mat-button-toggle-height: 40px;--mat-stepper-header-height: 68px;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-toolbar-standard-height: 60px;--mat-toolbar-mobile-height: 52px;--mat-tree-node-min-height: 44px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 20px;--mat-button-outlined-horizontal-padding: 20px;--mat-button-protected-horizontal-padding: 20px;--mat-button-text-horizontal-padding: 20px;--mat-button-tonal-horizontal-padding: 20px;--mat-button-toggle-height: 36px}.acp-small{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 32px;--mat-chip-container-height: 24px;--mat-expansion-header-collapsed-state-height: 40px;--mat-expansion-header-expanded-state-height: 56px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: none;--mat-button-filled-touch-target-display: none;--mat-button-filled-container-height: 32px;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-touch-target-display: none;--mat-button-protected-container-height: 32px;--mat-button-text-touch-target-display: none;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: none;--mat-form-field-container-height: 48px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 12px;--mat-form-field-filled-with-label-container-padding-top: 12px;--mat-form-field-filled-with-label-container-padding-bottom: 12px;--mat-icon-button-touch-target-display: none;--mat-icon-button-state-layer-size: 32px;--mat-list-list-item-leading-icon-start-space: 8px;--mat-list-list-item-leading-icon-end-space: 8px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px;--mat-paginator-container-size: 48px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: none;--mat-radio-touch-target-display: none;--mat-radio-state-layer-size: 32px;--mat-tab-container-height: 40px;--mat-select-arrow-transform: none;--mat-button-toggle-height: 40px;--mat-stepper-header-height: 64px;--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px;--mat-toolbar-standard-height: 56px;--mat-toolbar-mobile-height: 48px;--mat-tree-node-min-height: 40px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 16px;--mat-button-outlined-horizontal-padding: 16px;--mat-button-protected-horizontal-padding: 16px;--mat-button-text-horizontal-padding: 16px;--mat-button-tonal-horizontal-padding: 16px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.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: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonLoaderDirective, selector: "button[acpLoading]", inputs: ["acpLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
555
+ }
556
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpButton, decorators: [{
557
+ type: Component,
558
+ args: [{ selector: 'acp-button', imports: [NgClass, MatButtonModule, MatIconModule, ButtonLoaderDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (variant() === 'icon') {\n<button\n matIconButton\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else if (variant() === 'fab') {\n<button\n matFab\n [extended]=\"extended()\"\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (extended()) { @if (hasText()) { {{text()}} }\n @else { <ng-content></ng-content> } }\n</button>\n} @else if (variant() === 'mini-fab') {\n<button\n matMiniFab\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"appearance()\"\n [disabled]=\"isDisabled()\"\n [disableRipple]=\"disableRipple()\"\n [acpLoading]=\"loading()\"\n [type]=\"type()\"\n [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n (click)=\"clicked.emit()\"\n (focus)=\"focused.emit()\"\n (blur)=\"blurred.emit()\"\n>\n @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (hasText()) { {{text()}} } @else {\n <ng-content></ng-content> } @if (suffixIcon()) {\n <mat-icon iconPositionEnd>{{suffixIcon()}}</mat-icon> }\n</button>\n}\n", styles: [".acp-primary{--mat-button-filled-container-color: var(--theme-primary-color);--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: var(--theme-primary-color);--mat-button-protected-label-text-color: var(--theme-primary-color);--mat-button-text-label-text-color: var(--theme-primary-color);--mat-button-text-state-layer-color: var(--theme-primary-color)}.acp-secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary)}.acp-accent{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary)}.acp-error{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error)}.acp-success{--mat-button-filled-container-color: #4caf50;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #4caf50;--mat-button-protected-label-text-color: #4caf50;--mat-button-text-label-text-color: #4caf50;--mat-button-text-state-layer-color: #4caf50}.acp-warning{--mat-button-filled-container-color: #f59e0b;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #f59e0b;--mat-button-protected-label-text-color: #f59e0b;--mat-button-text-label-text-color: #f59e0b;--mat-button-text-state-layer-color: #f59e0b}.acp-info{--mat-button-filled-container-color: #3b82f6;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #3b82f6;--mat-button-protected-label-text-color: #3b82f6;--mat-button-text-label-text-color: #3b82f6;--mat-button-text-state-layer-color: #3b82f6}.acp-dark{--mat-button-filled-container-color: #1f2937;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #1f2937;--mat-button-protected-label-text-color: #1f2937;--mat-button-text-label-text-color: #1f2937;--mat-button-text-state-layer-color: #1f2937}[matIconButton].acp-primary{--mat-icon-color: var(--theme-primary-color)}[matIconButton].acp-secondary{--mat-icon-color: var(--mat-sys-secondary)}[matIconButton].acp-accent{--mat-icon-color: var(--mat-sys-tertiary)}[matIconButton].acp-error{--mat-icon-color: var(--mat-sys-error)}[matIconButton].acp-success{--mat-icon-color: #10b981}[matIconButton].acp-warning{--mat-icon-color: #f59e0b}[matIconButton].acp-info{--mat-icon-color: #3b82f6}[matIconButton].acp-dark{--mat-icon-color: #1f2937}.acp-square{--mat-button-filled-container-shape: 8px;--mat-button-outlined-container-shape: 8px;--mat-button-protected-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-button-tonal-container-shape: 8px;--mat-icon-button-container-shape: 8px}.acp-medium{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 36px;--mat-chip-container-height: 28px;--mat-expansion-header-collapsed-state-height: 44px;--mat-expansion-header-expanded-state-height: 60px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: block;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 36px;--mat-button-outlined-container-height: 36px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 36px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 36px;--mat-button-tonal-container-height: 36px;--mat-button-tonal-touch-target-display: block;--mat-form-field-container-height: 52px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 14px;--mat-form-field-filled-with-label-container-padding-top: 22px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 36px;--mat-list-list-item-leading-icon-start-space: 12px;--mat-list-list-item-leading-icon-end-space: 12px;--mat-list-list-item-one-line-container-height: 44px;--mat-list-list-item-two-line-container-height: 60px;--mat-list-list-item-three-line-container-height: 84px;--mat-paginator-container-size: 52px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block;--mat-radio-touch-target-display: block;--mat-radio-state-layer-size: 36px;--mat-tab-container-height: 44px;--mat-select-arrow-transform: translateY(-8px);--mat-button-toggle-height: 40px;--mat-stepper-header-height: 68px;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-toolbar-standard-height: 60px;--mat-toolbar-mobile-height: 52px;--mat-tree-node-min-height: 44px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 20px;--mat-button-outlined-horizontal-padding: 20px;--mat-button-protected-horizontal-padding: 20px;--mat-button-text-horizontal-padding: 20px;--mat-button-tonal-horizontal-padding: 20px;--mat-button-toggle-height: 36px}.acp-small{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 32px;--mat-chip-container-height: 24px;--mat-expansion-header-collapsed-state-height: 40px;--mat-expansion-header-expanded-state-height: 56px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: none;--mat-button-filled-touch-target-display: none;--mat-button-filled-container-height: 32px;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-touch-target-display: none;--mat-button-protected-container-height: 32px;--mat-button-text-touch-target-display: none;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: none;--mat-form-field-container-height: 48px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 12px;--mat-form-field-filled-with-label-container-padding-top: 12px;--mat-form-field-filled-with-label-container-padding-bottom: 12px;--mat-icon-button-touch-target-display: none;--mat-icon-button-state-layer-size: 32px;--mat-list-list-item-leading-icon-start-space: 8px;--mat-list-list-item-leading-icon-end-space: 8px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px;--mat-paginator-container-size: 48px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: none;--mat-radio-touch-target-display: none;--mat-radio-state-layer-size: 32px;--mat-tab-container-height: 40px;--mat-select-arrow-transform: none;--mat-button-toggle-height: 40px;--mat-stepper-header-height: 64px;--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px;--mat-toolbar-standard-height: 56px;--mat-toolbar-mobile-height: 48px;--mat-tree-node-min-height: 40px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 16px;--mat-button-outlined-horizontal-padding: 16px;--mat-button-protected-horizontal-padding: 16px;--mat-button-text-horizontal-padding: 16px;--mat-button-tonal-horizontal-padding: 16px}\n"] }]
559
+ }] });
560
+
444
561
  /**
445
562
  * Servicio centralizado para manejar z-index de todos los diálogos
446
563
  * Asegura que los diálogos siempre aparezcan en el orden correcto
@@ -649,7 +766,7 @@ class DialogWrapper {
649
766
  }
650
767
  }
651
768
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DialogWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component });
652
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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;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", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
769
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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;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$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.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", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
653
770
  }
654
771
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DialogWrapper, decorators: [{
655
772
  type: Component,
@@ -762,7 +879,7 @@ class DynamicSelect {
762
879
  this._onDestroy.complete();
763
880
  }
764
881
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DynamicSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
765
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: DynamicSelect, isStandalone: true, selector: "acp-dynamic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectOnTab: { classPropertyName: "selectOnTab", publicName: "selectOnTab", isSignal: true, isRequired: false, transformFunction: null }, openOnEnter: { classPropertyName: "openOnEnter", publicName: "openOnEnter", isSignal: true, isRequired: false, transformFunction: null }, selectableGroup: { classPropertyName: "selectableGroup", publicName: "selectableGroup", isSignal: true, isRequired: false, transformFunction: null }, selectableGroupAsModel: { classPropertyName: "selectableGroupAsModel", publicName: "selectableGroupAsModel", isSignal: true, isRequired: false, transformFunction: null }, clearOnBackspace: { classPropertyName: "clearOnBackspace", publicName: "clearOnBackspace", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, searchWhileComposing: { classPropertyName: "searchWhileComposing", publicName: "searchWhileComposing", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, editableSearchTerm: { classPropertyName: "editableSearchTerm", publicName: "editableSearchTerm", isSignal: true, isRequired: false, transformFunction: null }, typeToSearchText: { classPropertyName: "typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null }, addTagText: { classPropertyName: "addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<ng-select\n [items]=\"filteredOptions\"\n bindLabel=\"viewValue\"\n bindValue=\"value\"\n [searchable]=\"searchable()\"\n [clearable]=\"clearable()\"\n [formControl]=\"selectControl\"\n [placeholder]=\"placeholder() || label()\"\n [loading]=\"loading\"\n [virtualScroll]=\"virtualScroll()\"\n [dropdownPosition]=\"dropdownPosition()\"\n [closeOnSelect]=\"closeOnSelect()\"\n [hideSelected]=\"hideSelected()\"\n [multiple]=\"multiple()\"\n [selectOnTab]=\"selectOnTab()\"\n [openOnEnter]=\"openOnEnter()\"\n [selectableGroup]=\"selectableGroup()\"\n [selectableGroupAsModel]=\"selectableGroupAsModel()\"\n [clearOnBackspace]=\"clearOnBackspace()\"\n [readonly]=\"readonly()\"\n [searchWhileComposing]=\"searchWhileComposing()\"\n [minTermLength]=\"minTermLength()\"\n [editableSearchTerm]=\"editableSearchTerm()\"\n [typeToSearchText]=\"typeToSearchText()\"\n [addTagText]=\"addTagText()\"\n [loadingText]=\"loadingText()\"\n [clearAllText]=\"clearAllText()\"\n [notFoundText]=\"notFoundText()\"\n (change)=\"onSelectionChange($event)\"\n [ngClass]=\"className()\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1$2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
882
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: DynamicSelect, isStandalone: true, selector: "acp-dynamic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectOnTab: { classPropertyName: "selectOnTab", publicName: "selectOnTab", isSignal: true, isRequired: false, transformFunction: null }, openOnEnter: { classPropertyName: "openOnEnter", publicName: "openOnEnter", isSignal: true, isRequired: false, transformFunction: null }, selectableGroup: { classPropertyName: "selectableGroup", publicName: "selectableGroup", isSignal: true, isRequired: false, transformFunction: null }, selectableGroupAsModel: { classPropertyName: "selectableGroupAsModel", publicName: "selectableGroupAsModel", isSignal: true, isRequired: false, transformFunction: null }, clearOnBackspace: { classPropertyName: "clearOnBackspace", publicName: "clearOnBackspace", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, searchWhileComposing: { classPropertyName: "searchWhileComposing", publicName: "searchWhileComposing", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, editableSearchTerm: { classPropertyName: "editableSearchTerm", publicName: "editableSearchTerm", isSignal: true, isRequired: false, transformFunction: null }, typeToSearchText: { classPropertyName: "typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null }, addTagText: { classPropertyName: "addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<ng-select\n [items]=\"filteredOptions\"\n bindLabel=\"viewValue\"\n bindValue=\"value\"\n [searchable]=\"searchable()\"\n [clearable]=\"clearable()\"\n [formControl]=\"selectControl\"\n [placeholder]=\"placeholder() || label()\"\n [loading]=\"loading\"\n [virtualScroll]=\"virtualScroll()\"\n [dropdownPosition]=\"dropdownPosition()\"\n [closeOnSelect]=\"closeOnSelect()\"\n [hideSelected]=\"hideSelected()\"\n [multiple]=\"multiple()\"\n [selectOnTab]=\"selectOnTab()\"\n [openOnEnter]=\"openOnEnter()\"\n [selectableGroup]=\"selectableGroup()\"\n [selectableGroupAsModel]=\"selectableGroupAsModel()\"\n [clearOnBackspace]=\"clearOnBackspace()\"\n [readonly]=\"readonly()\"\n [searchWhileComposing]=\"searchWhileComposing()\"\n [minTermLength]=\"minTermLength()\"\n [editableSearchTerm]=\"editableSearchTerm()\"\n [typeToSearchText]=\"typeToSearchText()\"\n [addTagText]=\"addTagText()\"\n [loadingText]=\"loadingText()\"\n [clearAllText]=\"clearAllText()\"\n [notFoundText]=\"notFoundText()\"\n (change)=\"onSelectionChange($event)\"\n [ngClass]=\"className()\"\n/>\n", dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1$3.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
766
883
  }
767
884
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DynamicSelect, decorators: [{
768
885
  type: Component,
@@ -773,7 +890,7 @@ class UserIcon {
773
890
  size = input('35', /* @ts-ignore */
774
891
  ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
775
892
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: UserIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
776
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", 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: [""], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
893
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", 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", changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
777
894
  }
778
895
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: UserIcon, decorators: [{
779
896
  type: Component,
@@ -1033,7 +1150,7 @@ class InputChip {
1033
1150
  }
1034
1151
  }
1035
1152
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: InputChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
1036
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
1153
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
1037
1154
  }
1038
1155
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: InputChip, decorators: [{
1039
1156
  type: Component,
@@ -1114,8 +1231,9 @@ class TabulatorTable {
1114
1231
  rowSelected = output();
1115
1232
  tableReady = output();
1116
1233
  _tabulator;
1234
+ static instanceCounter = 0;
1117
1235
  // Made public for template access
1118
- containerId = `acp-tabulator-table-${Math.random().toString(36).slice(2, 9)}`;
1236
+ containerId = `acp-tabulator-table-${TabulatorTable.instanceCounter++}`;
1119
1237
  ngAfterViewInit() {
1120
1238
  this.initializeTable();
1121
1239
  }
@@ -1352,11 +1470,14 @@ class AdvancedDialogService {
1352
1470
  dialogConfig.panelClass = ['full-screen-dialog'];
1353
1471
  }
1354
1472
  applyStandardConfig(dialogConfig, config) {
1355
- dialogConfig.width = config.width ?? this.getDialogWidth(config.size);
1473
+ const width = config.width ?? this.getDialogWidth(config.size);
1474
+ dialogConfig.width = width;
1356
1475
  dialogConfig.height = config.height;
1357
1476
  dialogConfig.minWidth = config.minWidth;
1358
- dialogConfig.maxWidth = config.maxWidth ?? '95vw';
1359
- dialogConfig.maxHeight = config.maxHeight ?? 'auto';
1477
+ const maxWidth = config.maxWidth ?? '95vw';
1478
+ dialogConfig.maxWidth = maxWidth;
1479
+ const maxHeight = config.maxHeight ?? 'auto';
1480
+ dialogConfig.maxHeight = maxHeight;
1360
1481
  dialogConfig.position = config.position;
1361
1482
  }
1362
1483
  applyCommonConfig(dialogConfig, config) {
@@ -1453,7 +1574,7 @@ class ThemeSwitcher {
1453
1574
  }
1454
1575
  else {
1455
1576
  // Check system preference
1456
- const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
1577
+ const prefersDark = globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
1457
1578
  this._darkMode.next(prefersDark);
1458
1579
  this.applyTheme(prefersDark);
1459
1580
  }
@@ -1968,21 +2089,18 @@ class Pagination {
1968
2089
  * @param pageSize Number of records per page
1969
2090
  * @param totalRecords Total number of records
1970
2091
  * @param pageSizeOptions Available page size options
1971
- * @param hidePageSize Whether to hide the page size selector
1972
- * @param showPageSizeOptions Whether to show page size options
1973
- * @param showFirstLastButtons Whether to show first/last buttons
1974
- * @param disabled Whether the paginator is disabled
2092
+ * @param options Display and behavior options
1975
2093
  */
1976
2094
  constructor(pageIndex = 0, // MatPaginator starts at 0
1977
- pageSize = 25, totalRecords = 0, pageSizeOptions = [25, 50, 75, 100], hidePageSize = false, showPageSizeOptions = true, showFirstLastButtons = true, disabled = false) {
2095
+ pageSize = 25, totalRecords = 0, pageSizeOptions = [25, 50, 75, 100], options = {}) {
1978
2096
  this.pageIndex = pageIndex;
1979
2097
  this.pageSize = pageSize;
1980
2098
  this.totalRecords = totalRecords;
1981
2099
  this.pageSizeOptions = pageSizeOptions;
1982
- this.hidePageSize = hidePageSize;
1983
- this.showPageSizeOptions = showPageSizeOptions;
1984
- this.showFirstLastButtons = showFirstLastButtons;
1985
- this.disabled = disabled;
2100
+ this.hidePageSize = options.hidePageSize ?? false;
2101
+ this.showPageSizeOptions = options.showPageSizeOptions ?? true;
2102
+ this.showFirstLastButtons = options.showFirstLastButtons ?? true;
2103
+ this.disabled = options.disabled ?? false;
1986
2104
  }
1987
2105
  /**
1988
2106
  * Calculates the total number of pages.
@@ -2002,6 +2120,8 @@ class Pagination {
2002
2120
  }
2003
2121
 
2004
2122
  class ReusableAutocompleteComponent {
2123
+ static inputIdCounter = 0;
2124
+ inputId = `acp-autocomplete-search-input-${++ReusableAutocompleteComponent.inputIdCounter}`;
2005
2125
  dataSource = input([], /* @ts-ignore */
2006
2126
  ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ [])); // Para búsqueda local
2007
2127
  config = AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG;
@@ -2062,14 +2182,7 @@ class ReusableAutocompleteComponent {
2062
2182
  }, /* @ts-ignore */
2063
2183
  ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
2064
2184
  currentPageItems = computed(() => {
2065
- // if (!this.config.enablePagination) {
2066
- // }
2067
2185
  return this.filteredItems();
2068
- // return this.autocompleteService.paginateItems(
2069
- // this.filteredItems(),
2070
- // this.currentPage(),
2071
- // this.config.itemsPerPage || 10
2072
- // );
2073
2186
  }, /* @ts-ignore */
2074
2187
  ...(ngDevMode ? [{ debugName: "currentPageItems" }] : /* istanbul ignore next */ []));
2075
2188
  startItem = computed(() => {
@@ -2191,52 +2304,69 @@ class ReusableAutocompleteComponent {
2191
2304
  const maxIndex = currentList.length - 1;
2192
2305
  switch (event.key) {
2193
2306
  case 'ArrowDown':
2194
- event.preventDefault();
2195
- if (maxIndex >= 0) {
2196
- const nextIndex = this.selectedIndex() < maxIndex ? this.selectedIndex() + 1 : 0;
2197
- this.selectedIndex.set(nextIndex);
2198
- this.scrollToSelected();
2199
- }
2307
+ this.handleArrowDown(maxIndex, event);
2200
2308
  break;
2201
2309
  case 'ArrowUp':
2202
- event.preventDefault();
2203
- if (maxIndex >= 0) {
2204
- const prevIndex = this.selectedIndex() > 0 ? this.selectedIndex() - 1 : maxIndex;
2205
- this.selectedIndex.set(prevIndex);
2206
- this.scrollToSelected();
2207
- }
2310
+ this.handleArrowUp(maxIndex, event);
2208
2311
  break;
2209
2312
  case 'Enter':
2210
- event.preventDefault();
2211
- if (this.selectedIndex() >= 0 && this.selectedIndex() <= maxIndex) {
2212
- this.selectItem(currentList[this.selectedIndex()]);
2213
- }
2313
+ this.handleEnter(currentList, maxIndex, event);
2214
2314
  break;
2215
2315
  case 'Escape':
2216
- event.preventDefault();
2217
- this.hideOverlay();
2316
+ this.handleEscape(event);
2218
2317
  break;
2219
2318
  case 'PageDown':
2220
- event.preventDefault();
2221
- if (!this.isHistoryVisible() && this.config.enablePagination) {
2222
- this.goToNextPage();
2223
- }
2319
+ this.handlePageDown(event);
2224
2320
  break;
2225
2321
  case 'PageUp':
2226
- event.preventDefault();
2227
- if (!this.isHistoryVisible() && this.config.enablePagination) {
2228
- this.goToPreviousPage();
2229
- }
2322
+ this.handlePageUp(event);
2230
2323
  break;
2231
2324
  }
2232
2325
  }
2326
+ handleArrowDown(maxIndex, event) {
2327
+ event?.preventDefault();
2328
+ if (maxIndex >= 0) {
2329
+ const nextIndex = this.selectedIndex() < maxIndex ? this.selectedIndex() + 1 : 0;
2330
+ this.selectedIndex.set(nextIndex);
2331
+ this.scrollToSelected();
2332
+ }
2333
+ }
2334
+ handleArrowUp(maxIndex, event) {
2335
+ event?.preventDefault();
2336
+ if (maxIndex >= 0) {
2337
+ const prevIndex = this.selectedIndex() > 0 ? this.selectedIndex() - 1 : maxIndex;
2338
+ this.selectedIndex.set(prevIndex);
2339
+ this.scrollToSelected();
2340
+ }
2341
+ }
2342
+ handleEnter(currentList, maxIndex, event) {
2343
+ event?.preventDefault();
2344
+ if (this.selectedIndex() >= 0 && this.selectedIndex() <= maxIndex) {
2345
+ this.selectItem(currentList[this.selectedIndex()]);
2346
+ }
2347
+ }
2348
+ handleEscape(event) {
2349
+ event?.preventDefault();
2350
+ this.hideOverlay();
2351
+ }
2352
+ handlePageDown(event) {
2353
+ event?.preventDefault();
2354
+ if (!this.isHistoryVisible() && this.config.enablePagination) {
2355
+ this.goToNextPage();
2356
+ }
2357
+ }
2358
+ handlePageUp(event) {
2359
+ event?.preventDefault();
2360
+ if (!this.isHistoryVisible() && this.config.enablePagination) {
2361
+ this.goToPreviousPage();
2362
+ }
2363
+ }
2233
2364
  onFilterChange() {
2234
2365
  this.currentPage.set(1);
2235
2366
  if (this.query.length >= (this.config.minSearchLength || 2)) {
2236
2367
  this.performSearch(this.query);
2237
2368
  this.searchSubjectNext();
2238
2369
  }
2239
- // this.filterChanged.emit(this.filters);
2240
2370
  }
2241
2371
  // Método público para actualizar resultados desde el padre
2242
2372
  updateSearchResults(result) {
@@ -2290,7 +2420,7 @@ class ReusableAutocompleteComponent {
2290
2420
  // Pagination Methods
2291
2421
  goToPage(event) {
2292
2422
  const target = event.target;
2293
- const page = parseInt(target.value);
2423
+ const page = Number.parseInt(target.value);
2294
2424
  if (this.autocompleteService.isValidPage(page, this.totalPages())) {
2295
2425
  this.currentPage.set(page);
2296
2426
  this.selectedIndex.set(-1);
@@ -2338,8 +2468,6 @@ class ReusableAutocompleteComponent {
2338
2468
  }
2339
2469
  // Footer Actions
2340
2470
  onCreateNew(_$event) {
2341
- //$event.stopPropagation();
2342
- // this.hideOverlay();
2343
2471
  this.createClicked.emit(this.query);
2344
2472
  }
2345
2473
  onAdvancedSearch() {
@@ -2413,7 +2541,7 @@ class ReusableAutocompleteComponent {
2413
2541
  this.searchInput()?.nativeElement?.focus();
2414
2542
  }
2415
2543
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ReusableAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2416
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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 } @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$4.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$4.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: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
2544
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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 @if (config.label) {\n <label class=\"acp-autocomplete-wrapper-label\" [for]=\"inputId\">{{ config.label }}</label>\n }\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 [id]=\"inputId\"\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 <button\n type=\"button\"\n class=\"autocomplete-wrapper-item-content\"\n [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\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 </button>\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 <label class=\"acp-autocomplete-wrapper-page-label\" [for]=\"inputId + '-page'\"\n >P\u00E1gina</label\n >\n <input\n [id]=\"inputId + '-page'\"\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 <button\n type=\"button\"\n class=\"autocomplete-wrapper-item-content\"\n [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\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 </button>\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;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-label{display:block;font-size:12px;color:var(--mat-sys-on-surface-variant, #666);margin-bottom:4px}.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-label{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);margin-right:4px}.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:#4caf501f;border-color:#4caf50;color:#2e7d32}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button:hover{background-color:#4caf5033}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button{background-color:#ff98001f;border-color:#ff9800;color:#e65100}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button:hover{background-color:#ff980033}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button{background-color:#3f51b51f;border-color:#3f51b5;color:#283593}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button:hover{background-color:#3f51b533}.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$5.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$5.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: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
2417
2545
  }
2418
2546
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ReusableAutocompleteComponent, decorators: [{
2419
2547
  type: Component,
@@ -2425,7 +2553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
2425
2553
  MatProgressSpinner,
2426
2554
  FormsModule,
2427
2555
  MatIconButton,
2428
- ], changeDetection: ChangeDetectionStrategy.Eager, 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"] }]
2556
+ ], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<div class=\"acp-autocomplete-wrapper\" [class.acp-autocomplete-wrapper-active]=\"overlayOpen()\">\n @if (config.label) {\n <label class=\"acp-autocomplete-wrapper-label\" [for]=\"inputId\">{{ config.label }}</label>\n }\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 [id]=\"inputId\"\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 <button\n type=\"button\"\n class=\"autocomplete-wrapper-item-content\"\n [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\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 </button>\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 <label class=\"acp-autocomplete-wrapper-page-label\" [for]=\"inputId + '-page'\"\n >P\u00E1gina</label\n >\n <input\n [id]=\"inputId + '-page'\"\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 <button\n type=\"button\"\n class=\"autocomplete-wrapper-item-content\"\n [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\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 </button>\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;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-label{display:block;font-size:12px;color:var(--mat-sys-on-surface-variant, #666);margin-bottom:4px}.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-label{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);margin-right:4px}.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:#4caf501f;border-color:#4caf50;color:#2e7d32}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button:hover{background-color:#4caf5033}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button{background-color:#ff98001f;border-color:#ff9800;color:#e65100}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button:hover{background-color:#ff980033}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button{background-color:#3f51b51f;border-color:#3f51b5;color:#283593}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button:hover{background-color:#3f51b533}.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"] }]
2429
2557
  }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], config: [{
2430
2558
  type: Input
2431
2559
  }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], searchFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFunction", required: false }] }], notFoundTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundTemplate", required: false }] }], overlayWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayWidth", required: false }] }], overlayMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayMaxHeight", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], searchChanged: [{ type: i0.Output, args: ["searchChanged"] }], searchRequested: [{ type: i0.Output, args: ["searchRequested"] }], pageChanged: [{ type: i0.Output, args: ["pageChanged"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], advancedSearchClicked: [{ type: i0.Output, args: ["advancedSearchClicked"] }], allResultsClicked: [{ type: i0.Output, args: ["allResultsClicked"] }], createClicked: [{ type: i0.Output, args: ["createClicked"] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], historyListElement: [{ type: i0.ViewChild, args: ['historyListElement', { isSignal: true }] }], resultsListElement: [{ type: i0.ViewChild, args: ['resultsListElement', { isSignal: true }] }] } });
@@ -2515,7 +2643,7 @@ class DataGridUtils {
2515
2643
  tmp = rowData[key];
2516
2644
  }
2517
2645
  else {
2518
- tmp = tmp && tmp[key];
2646
+ tmp = tmp?.[key];
2519
2647
  }
2520
2648
  });
2521
2649
  return tmp;
@@ -2578,7 +2706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
2578
2706
  }] });
2579
2707
  class AcpGridRowClassPipe {
2580
2708
  transform(rowData, index, dataIndex, rowClassFormatter) {
2581
- const rowIndex = index === undefined ? dataIndex : index;
2709
+ const rowIndex = index ?? dataIndex;
2582
2710
  const classList = rowIndex % 2 === 1 ? ['mat-row-odd'] : [];
2583
2711
  if (rowClassFormatter) {
2584
2712
  for (const key of Object.keys(rowClassFormatter)) {
@@ -2847,7 +2975,11 @@ class AcpGridCell {
2847
2975
  });
2848
2976
  }
2849
2977
  _getText(value) {
2850
- return value === undefined ? '' : this._utils.isEmpty(value) ? this.placeholder : value;
2978
+ if (value === undefined) {
2979
+ return '';
2980
+ }
2981
+ const isEmpty = this._utils.isEmpty(value);
2982
+ return isEmpty ? this.placeholder : value;
2851
2983
  }
2852
2984
  _getTooltip(value) {
2853
2985
  return this._utils.isEmpty(value) ? '' : value;
@@ -2861,7 +2993,7 @@ class AcpGridCell {
2861
2993
  btn.click?.(rowData);
2862
2994
  }
2863
2995
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpGridCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
2864
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpGridCell, isStandalone: true, selector: "acp-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["acpGridCell"], ngImport: i0, template: "@if (summary) {\n<span\n [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n {{ colDef.tag[_value].text }}\n </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n />\n </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | number\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | currency\n : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n : $safeNavigationMigration(colDef.typeParameter?.display)\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n $safeNavigationMigration(colDef.typeParameter?.display) :\n $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | percent\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : $safeNavigationMigration(colDef.typeParameter?.format)\n : $safeNavigationMigration(colDef.typeParameter?.timezone)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n $safeNavigationMigration(colDef.typeParameter?.timezone) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#6b7280;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "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: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AcpGridMenu, selector: "acp-grid-menu", inputs: ["items", "data"], exportAs: ["acpGridMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AcpGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: AcpGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: AcpGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: AcpGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2996
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpGridCell, isStandalone: true, selector: "acp-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["acpGridCell"], ngImport: i0, template: "@if (summary) {\n<span\n [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n {{ colDef.tag[_value].text }}\n </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n />\n </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | number\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | currency\n : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n : $safeNavigationMigration(colDef.typeParameter?.display)\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n $safeNavigationMigration(colDef.typeParameter?.display) :\n $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | percent\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : $safeNavigationMigration(colDef.typeParameter?.format)\n : $safeNavigationMigration(colDef.typeParameter?.timezone)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n $safeNavigationMigration(colDef.typeParameter?.timezone) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4b5563;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "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: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AcpGridMenu, selector: "acp-grid-menu", inputs: ["items", "data"], exportAs: ["acpGridMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AcpGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: AcpGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: AcpGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: AcpGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2865
2997
  }
2866
2998
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpGridCell, decorators: [{
2867
2999
  type: Component,
@@ -2887,7 +3019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
2887
3019
  AcpGridCellActionTooltipPipe,
2888
3020
  AcpGridCellActionBadgePipe,
2889
3021
  AcpGridMenu,
2890
- ], template: "@if (summary) {\n<span\n [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n {{ colDef.tag[_value].text }}\n </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n />\n </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | number\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | currency\n : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n : $safeNavigationMigration(colDef.typeParameter?.display)\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n $safeNavigationMigration(colDef.typeParameter?.display) :\n $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | percent\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : $safeNavigationMigration(colDef.typeParameter?.format)\n : $safeNavigationMigration(colDef.typeParameter?.timezone)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n $safeNavigationMigration(colDef.typeParameter?.timezone) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#6b7280;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"] }]
3022
+ ], template: "@if (summary) {\n<span\n [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData\n : rowChangeRecord\n : $safeNavigationMigration(rowChangeRecord?.currentValue)\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n {{ colDef.tag[_value].text }}\n </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n />\n </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | number\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | currency\n : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n : $safeNavigationMigration(colDef.typeParameter?.display)\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n $safeNavigationMigration(colDef.typeParameter?.display) :\n $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | percent\n : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : $safeNavigationMigration(colDef.typeParameter?.format)\n : $safeNavigationMigration(colDef.typeParameter?.timezone)\n : $safeNavigationMigration(colDef.typeParameter?.locale)\n )\n \"\n>\n {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n $safeNavigationMigration(colDef.typeParameter?.timezone) :\n $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4b5563;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"] }]
2891
3023
  }], propDecorators: { rowData: [{
2892
3024
  type: Input
2893
3025
  }], colDef: [{
@@ -3855,7 +3987,7 @@ class AcpGridColumnMenu {
3855
3987
  }
3856
3988
  }
3857
3989
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpGridColumnMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
3858
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpGridColumnMenu, isStandalone: true, selector: "acp-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", buttonFontIcon: "buttonFontIcon", buttonSvgIcon: "buttonSvgIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: MatMenu, descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["acpGridColumnMenu"], ngImport: i0, template: "@if (buttonType === 'icon') {\n<button\n [class]=\"buttonClass\"\n matIconButton\n type=\"button\"\n [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n</button>\n} @else {\n<button\n [class]=\"buttonClass\"\n [matButton]=\"buttonType\"\n type=\"button\"\n [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n {{ buttonText }}\n</button>\n}\n\n<ng-template #iconTpl>\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n } @else if(buttonFontIcon) {\n <mat-icon [fontIcon]=\"buttonFontIcon\"></mat-icon>\n } @else if(buttonSvgIcon) {\n <mat-icon [svgIcon]=\"buttonSvgIcon\"></mat-icon>\n }\n</ng-template>\n\n<mat-menu #menu=\"matMenu\" class=\"acp-grid-column-menu\">\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n <div\n class=\"acp-grid-column-menu-content\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n >\n @if (showHeader) {\n <div class=\"acp-grid-column-menu-header\">\n @if (headerTemplate) {\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n } @else { {{headerText}} }\n </div>\n }\n\n <div class=\"acp-grid-column-menu-body\">\n @if (sortable) {\n <div\n class=\"acp-grid-column-menu-list\"\n cdkDropList\n (cdkDropListDropped)=\"_handleDroped($event)\"\n >\n @for (col of columns; track col.field) {\n <div\n class=\"acp-grid-column-menu-item\"\n cdkDrag\n [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-column-drag-handle-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\"\n />\n </svg>\n <ng-template\n [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\"\n >\n </ng-template>\n </div>\n }\n </div>\n } @if (!sortable) {\n <div class=\"acp-grid-column-menu-list\">\n @for (col of columns; track col.field) {\n <div class=\"acp-grid-column-menu-item\">\n <ng-template\n [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\"\n >\n </ng-template>\n </div>\n }\n </div>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"acp-grid-column-menu-footer\">\n @if (footerTemplate) {\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n } @else { {{footerText}} }\n </div>\n }\n </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n @if (pinnable) {\n <button\n class=\"acp-grid-column-pin-button\"\n matIconButton\n type=\"button\"\n [matMenuTriggerFor]=\"pinList\"\n >\n @if (col.pinned) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n </svg>\n } @if (!col.pinned) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-off-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\"\n />\n </svg>\n }\n </button>\n <mat-menu #pinList=\"matMenu\" class=\"acp-grid-column-pin-list\">\n @for (item of pinOptions; track item) {\n <button\n class=\"acp-grid-column-pin-option\"\n type=\"button\"\n mat-menu-item\n (click)=\"_handlePinSelect(col, item.value)\"\n >\n <span class=\"acp-grid-column-pin-option-placeholder\">\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n @if (col.pinned==item.value) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-check-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </svg>\n }\n </span>\n <span class=\"acp-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n </button>\n }\n </mat-menu>\n } @if (selectable) {\n <mat-checkbox\n class=\"acp-grid-column-menu-item-label\"\n [(ngModel)]=\"col[selectableChecked]\"\n [disabled]=\"col.disabled\"\n (change)=\"_handleChecked(col)\"\n >{{col.header | toObservable | async}}</mat-checkbox\n >\n } @else {\n <span class=\"acp-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n }\n</ng-template>\n", styles: [".acp-grid-column-menu,.acp-grid-column-pin-list{color:var(--acp-grid-column-menu-text-color, var(--mat-sys-on-surface-variant))}.acp-grid-column-menu .mat-mdc-menu-content{padding:0}.acp-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.acp-grid-column-menu-header,.acp-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.acp-grid-column-menu-header{top:0;border-bottom:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-footer{bottom:0;border-top:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-list{display:block;max-width:100%}.acp-grid-column-menu-list.cdk-drop-list-dragging .acp-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.acp-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.acp-grid-column-menu-item .cdk-drag-handle{cursor:move}.acp-grid-column-menu-item.cdk-drag-preview{border-radius:4px;box-shadow:0 0 0 1px var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.acp-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.acp-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.acp-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.acp-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.acp-grid-column-drag-handle-icon:hover{cursor:move}.acp-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "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: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: 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: "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: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
3990
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpGridColumnMenu, isStandalone: true, selector: "acp-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", buttonFontIcon: "buttonFontIcon", buttonSvgIcon: "buttonSvgIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: MatMenu, descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["acpGridColumnMenu"], ngImport: i0, template: "@if (buttonType === 'icon') {\n<button\n [class]=\"buttonClass\"\n matIconButton\n type=\"button\"\n [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n</button>\n} @else {\n<button\n [class]=\"buttonClass\"\n [matButton]=\"buttonType\"\n type=\"button\"\n [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n {{ buttonText }}\n</button>\n}\n\n<ng-template #iconTpl>\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n } @else if(buttonFontIcon) {\n <mat-icon [fontIcon]=\"buttonFontIcon\"></mat-icon>\n } @else if(buttonSvgIcon) {\n <mat-icon [svgIcon]=\"buttonSvgIcon\"></mat-icon>\n }\n</ng-template>\n\n<mat-menu #menu=\"matMenu\" class=\"acp-grid-column-menu\">\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n <div\n class=\"acp-grid-column-menu-content\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n >\n @if (showHeader) {\n <div class=\"acp-grid-column-menu-header\">\n @if (headerTemplate) {\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n } @else { {{headerText}} }\n </div>\n }\n\n <div class=\"acp-grid-column-menu-body\">\n @if (sortable) {\n <div\n class=\"acp-grid-column-menu-list\"\n cdkDropList\n (cdkDropListDropped)=\"_handleDroped($event)\"\n >\n @for (col of columns; track col.field) {\n <div\n class=\"acp-grid-column-menu-item\"\n cdkDrag\n [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\"\n >\n <svg\n class=\"acp-grid-icon acp-grid-column-drag-handle-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\"\n />\n </svg>\n <ng-template\n [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\"\n >\n </ng-template>\n </div>\n }\n </div>\n } @if (!sortable) {\n <div class=\"acp-grid-column-menu-list\">\n @for (col of columns; track col.field) {\n <div class=\"acp-grid-column-menu-item\">\n <ng-template\n [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\"\n >\n </ng-template>\n </div>\n }\n </div>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"acp-grid-column-menu-footer\">\n @if (footerTemplate) {\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n } @else { {{footerText}} }\n </div>\n }\n </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n @if (pinnable) {\n <button\n class=\"acp-grid-column-pin-button\"\n matIconButton\n type=\"button\"\n [matMenuTriggerFor]=\"pinList\"\n >\n @if (col.pinned) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n </svg>\n } @if (!col.pinned) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-off-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\"\n />\n </svg>\n }\n </button>\n <mat-menu #pinList=\"matMenu\" class=\"acp-grid-column-pin-list\">\n @for (item of pinOptions; track item) {\n <button\n class=\"acp-grid-column-pin-option\"\n type=\"button\"\n mat-menu-item\n (click)=\"_handlePinSelect(col, item.value)\"\n >\n <span class=\"acp-grid-column-pin-option-placeholder\">\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n @if (col.pinned==item.value) {\n <svg\n class=\"acp-grid-icon acp-grid-column-pin-check-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </svg>\n }\n </span>\n <span class=\"acp-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n </button>\n }\n </mat-menu>\n } @if (selectable) {\n <mat-checkbox\n class=\"acp-grid-column-menu-item-label\"\n [(ngModel)]=\"col[selectableChecked]\"\n [disabled]=\"col.disabled\"\n (change)=\"_handleChecked(col)\"\n >{{col.header | toObservable | async}}</mat-checkbox\n >\n } @else {\n <span class=\"acp-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n }\n</ng-template>\n", styles: [".acp-grid-column-menu,.acp-grid-column-pin-list{color:var(--acp-grid-column-menu-text-color, var(--mat-sys-on-surface-variant))}.acp-grid-column-menu .mat-mdc-menu-content{padding:0}.acp-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.acp-grid-column-menu-header,.acp-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.acp-grid-column-menu-header{top:0;border-bottom:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-footer{bottom:0;border-top:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-list{display:block;max-width:100%}.acp-grid-column-menu-list.cdk-drop-list-dragging .acp-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.acp-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.acp-grid-column-menu-item .cdk-drag-handle{cursor:move}.acp-grid-column-menu-item.cdk-drag-preview{border-radius:4px;box-shadow:0 0 0 1px var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.acp-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.acp-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.acp-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.acp-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.acp-grid-column-drag-handle-icon:hover{cursor:move}.acp-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "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: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: 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: "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: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
3859
3991
  }
3860
3992
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpGridColumnMenu, decorators: [{
3861
3993
  type: Component,
@@ -4432,7 +4564,13 @@ class DataGrid {
4432
4564
  return this._utils.getColData(data, colDef);
4433
4565
  }
4434
4566
  _isColumnHide(item) {
4435
- return item.hide !== undefined ? item.hide : item.show !== undefined ? !item.show : false;
4567
+ if (item.hide !== undefined) {
4568
+ return item.hide;
4569
+ }
4570
+ if (item.show !== undefined) {
4571
+ return !item.show;
4572
+ }
4573
+ return false;
4436
4574
  }
4437
4575
  // Waiting for async data
4438
4576
  ngOnChanges(changes) {
@@ -4490,7 +4628,7 @@ class DataGrid {
4490
4628
  item.left =
4491
4629
  pinnedLeftCols
4492
4630
  .slice(0, idx)
4493
- .reduce((acc, cur) => acc + parseFloat(cur.width || '80px'), 0) + 'px';
4631
+ .reduce((acc, cur) => acc + Number.parseFloat(cur.width || '80px'), 0) + 'px';
4494
4632
  });
4495
4633
  const pinnedRightCols = this.columns
4496
4634
  .filter(col => col.pinned && col.pinned === 'right')
@@ -4499,7 +4637,7 @@ class DataGrid {
4499
4637
  item.right =
4500
4638
  pinnedRightCols
4501
4639
  .slice(0, idx)
4502
- .reduce((acc, cur) => acc + parseFloat(cur.width || '80px'), 0) + 'px';
4640
+ .reduce((acc, cur) => acc + Number.parseFloat(cur.width || '80px'), 0) + 'px';
4503
4641
  });
4504
4642
  }
4505
4643
  _getIndex(index, dataIndex) {
@@ -4965,14 +5103,14 @@ class KeyboardNavigationService {
4965
5103
  }
4966
5104
  this.focusableElements.push(element);
4967
5105
  // Configurar eventos de teclado para este elemento
4968
- fromEvent(element.element.nativeElement, 'keydown')
5106
+ fromEvent(element.element?.nativeElement, 'keydown')
4969
5107
  .pipe(takeUntil$1(this.destroy$), filter(event => ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)))
4970
5108
  .subscribe(event => {
4971
5109
  event.preventDefault(); // Prevenir el comportamiento por defecto del navegador (scroll, etc.)
4972
5110
  this.handleKeyNavigation(event.key);
4973
5111
  });
4974
5112
  // Configurar eventos de foco para este elemento
4975
- fromEvent(element.element.nativeElement, 'focus')
5113
+ fromEvent(element.element?.nativeElement, 'focus')
4976
5114
  .pipe(takeUntil$1(this.destroy$))
4977
5115
  .subscribe(() => {
4978
5116
  const index = this.focusableElements.findIndex(e => e.element === element.element);
@@ -5381,7 +5519,7 @@ class DateRangePicker {
5381
5519
  [startDate]="startDate()"
5382
5520
  [endDate]="endDate()"
5383
5521
  ></ngx-datex>
5384
- `, isInline: true, dependencies: [{ kind: "component", type: NgxDatex, selector: "ngx-datex", inputs: ["config", "locale", "theme", "appearance", "floatLabel", "label", "placeholder", "calendarIcon", "showCalendarIcon", "calendarIconPosition", "showCheckbox", "checkboxChecked", "checkboxPosition", "readonly", "disabled", "showHeader", "showFooter", "singleDatePicker", "autoApply", "showDropdowns", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "showCustomRangeLabel", "startDate", "endDate", "minDate", "maxDate", "maxSpan", "showWeekNumbers", "showISOWeekNumbers", "buttonClasses", "applyButtonClasses", "cancelButtonClasses", "isInvalidDate", "isCustomDate", "minYear", "maxYear", "ranges", "opens", "drops", "headerTemplate", "footerTemplate", "dayTemplate", "ariaLabel", "ariaDescribedBy"], outputs: ["dateChange", "rangeChange", "openEvent", "closeEvent", "monthChange", "yearChange", "dateHover", "validationError", "checkboxChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
5522
+ `, isInline: true, dependencies: [{ kind: "component", type: NgxDatex, selector: "ngx-datex", inputs: ["config", "locale", "theme", "appearance", "floatLabel", "label", "placeholder", "calendarIcon", "showCalendarIcon", "calendarIconPosition", "showCheckbox", "checkboxChecked", "checkboxPosition", "readonly", "disabled", "showHeader", "showFooter", "singleDatePicker", "autoApply", "showDropdowns", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "showCustomRangeLabel", "startDate", "endDate", "minDate", "maxDate", "maxSpan", "showWeekNumbers", "showISOWeekNumbers", "buttonClasses", "applyButtonClasses", "cancelButtonClasses", "isInvalidDate", "isCustomDate", "minYear", "maxYear", "ranges", "opens", "drops", "headerTemplate", "footerTemplate", "dayTemplate", "ariaLabel", "ariaDescribedBy"], outputs: ["dateChange", "rangeChange", "openEvent", "closeEvent", "monthChange", "yearChange", "dateHover", "validationError", "checkboxChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
5385
5523
  }
5386
5524
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DateRangePicker, decorators: [{
5387
5525
  type: Component,
@@ -8357,7 +8495,7 @@ class AcpDateRangeInput {
8357
8495
  this._dateOptions.set(options);
8358
8496
  }
8359
8497
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpDateRangeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
8360
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpDateRangeInput, isStandalone: true, selector: "acp-date-range-input", inputs: { inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: false, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showRangeRequired: { classPropertyName: "showRangeRequired", publicName: "showRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, isRangeRequired: { classPropertyName: "isRangeRequired", publicName: "isRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, staticOptionId: { classPropertyName: "staticOptionId", publicName: "staticOptionId", isSignal: false, isRequired: false, transformFunction: null }, dynamicOptionId: { classPropertyName: "dynamicOptionId", publicName: "dynamicOptionId", isSignal: false, isRequired: false, transformFunction: null }, calendarId: { classPropertyName: "calendarId", publicName: "calendarId", isSignal: false, isRequired: false, transformFunction: null }, enableDefaultOptions: { classPropertyName: "enableDefaultOptions", publicName: "enableDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: false, isRequired: false, transformFunction: null }, isShowStaticDefaultOptions: { classPropertyName: "isShowStaticDefaultOptions", publicName: "isShowStaticDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, hideDefaultOptions: { classPropertyName: "hideDefaultOptions", publicName: "hideDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetX: { classPropertyName: "cdkConnectedOverlayOffsetX", publicName: "cdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetY: { classPropertyName: "cdkConnectedOverlayOffsetY", publicName: "cdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetY: { classPropertyName: "listCdkConnectedOverlayOffsetY", publicName: "listCdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetX: { classPropertyName: "listCdkConnectedOverlayOffsetX", publicName: "listCdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, selectedOptionIndex: { classPropertyName: "selectedOptionIndex", publicName: "selectedOptionIndex", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedLabel: { classPropertyName: "displaySelectedLabel", publicName: "displaySelectedLabel", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedExpression: { classPropertyName: "displaySelectedExpression", publicName: "displaySelectedExpression", isSignal: false, isRequired: false, transformFunction: null }, enableEditableDates: { classPropertyName: "enableEditableDates", publicName: "enableEditableDates", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPush: { classPropertyName: "cdkConnectedOverlayPush", publicName: "cdkConnectedOverlayPush", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPositions: { classPropertyName: "cdkConnectedOverlayPositions", publicName: "cdkConnectedOverlayPositions", isSignal: false, isRequired: false, transformFunction: null }, allowSingleDateSelection: { classPropertyName: "allowSingleDateSelection", publicName: "allowSingleDateSelection", isSignal: false, isRequired: false, transformFunction: null }, autoSelectOption: { classPropertyName: "autoSelectOption", publicName: "autoSelectOption", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateDropDownOptions: { classPropertyName: "dateDropDownOptions", publicName: "dateDropDownOptions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateSelectionChanged: "dateSelectionChanged", dateListOptions: "dateListOptions", rangeRequiredChange: "rangeRequiredChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!--\n AcpDateRangeInput Component Template\n @author AcontPlus S.A.S\n @version 1.0.0\n\n Comprehensive date range picker with predefined options, custom calendar selection,\n and support for human-readable date expressions.\n-->\n<div class=\"date-picker-main ndp-main\" cdkOverlayOrigin #trigger>\n <mat-form-field\n class=\"w-full\"\n [class]=\"{ 'display-hidden': isShowStaticDefaultOptions }\"\n (click)=\"toggleDateOptionSelectionList($event)\"\n >\n <mat-label (click)=\"toggleDateOptionSelectionList($event)\">{{ inputLabel }}</mat-label>\n <input\n matInput\n #dateInput\n class=\"cursor-pointer\"\n id=\"date-input-field\"\n (input)=\"onMainInputChange(dateInput)\"\n />\n <ng-container matSuffix>\n @if (showClearButton() && !!dateInput.value) {\n <button\n mat-icon-button\n class=\"cursor-pointer pe-0 ps-0\"\n matTooltip=\"Clear\"\n (click)=\"clearSelection($event)\"\n >\n <mat-icon>clear</mat-icon>\n </button>\n } @if (showCalendarIcon()) {\n <button mat-icon-button class=\"cursor-pointer\">\n <mat-icon>date_range</mat-icon>\n </button>\n } @if (showRangeRequired()) {\n <button\n mat-icon-button\n class=\"cursor-pointer\"\n [class.checked]=\"isRangeRequired()\"\n (click)=\"toggleRangeSelection($event)\"\n matTooltip=\"Rango de fechas obligatorio\"\n >\n <mat-icon [color]=\"isRangeRequired() ? 'accent' : ''\">\n {{ isRangeRequired() ? 'check_box' : 'check_box_outline_blank' }}\n </mat-icon>\n </button>\n }\n </ng-container>\n </mat-form-field>\n\n @if (dateDropDownOptions.length && isShowStaticDefaultOptions) {\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n optionId: staticOptionId,\n className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n }\n \"\n />\n }\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isDateOptionList\"\n [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n [cdkConnectedOverlayOffsetX]=\"listCdkConnectedOverlayOffsetX\"\n [cdkConnectedOverlayOffsetY]=\"listCdkConnectedOverlayOffsetY\"\n (backdropClick)=\"isDateOptionList = false\"\n >\n @if (dateDropDownOptions.length && !isShowStaticDefaultOptions) {\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n optionId: dynamicOptionId,\n className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n }\n \"\n />\n }\n </ng-template>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isCustomRange\"\n [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n [cdkConnectedOverlayPositions]=\"cdkConnectedOverlayPositions\"\n [cdkConnectedOverlayOffsetX]=\"cdkConnectedOverlayOffsetX\"\n [cdkConnectedOverlayOffsetY]=\"cdkConnectedOverlayOffsetY\"\n (backdropClick)=\"isCustomRange = false\"\n >\n <div\n class=\"custom-ckd-container ndp-cdk-container custom-calendar-container ndp-calendar-container\"\n [class]=\"{ 'without-default-opt': hideDefaultOptions }\"\n >\n <div class=\"row-1\">\n @if (!hideDefaultOptions) {\n <div class=\"pt-custom column-1\">\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n }\n \"\n />\n </div>\n <div class=\"ndp-column-separator\"></div>\n }\n <div class=\"mt-2 column-2\">\n <acp-date-range-calendar\n [selectedDates]=\"selectedDates\"\n #calendar\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (selectedDatesChange)=\"onCalendarSelectionChange($event)\"\n />\n </div>\n </div>\n <div class=\"row-2 br-top\">\n <div class=\"footer-content ndp-footer-content\">\n @if (enableEditableDates) {\n <form class=\"ndp-date-inputs\" [formGroup]=\"editableForm\">\n <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n <mat-label>Start</mat-label>\n <input\n matInput\n formControlName=\"start\"\n placeholder=\"e.g. now-7d\"\n (blur)=\"commitEditableDates(calendar)\"\n (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n />\n @if (editableForm.controls.start.hasError('required')) {\n <mat-error>Required</mat-error>\n } @else if (editableForm.controls.start.hasError('invalidDate')) {\n <mat-error>Invalid date or expression</mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n <mat-label>End</mat-label>\n <input\n matInput\n formControlName=\"end\"\n placeholder=\"e.g. now\"\n (blur)=\"commitEditableDates(calendar)\"\n (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n />\n @if (editableForm.controls.end.hasError('required')) {\n <mat-error>Required</mat-error>\n } @else if (editableForm.controls.end.hasError('invalidDate')) {\n <mat-error>Invalid date or expression</mat-error>\n } @else if (editableForm.hasError('rangeOrder')) {\n <mat-error>Start must be before end</mat-error>\n }\n </mat-form-field>\n </form>\n } @else {\n <span id=\"range-label-text\" class=\"ndp-range-label-text\">\n {{ calendar?.selectedDates?.start | date: dateFormat }} @if\n (calendar?.selectedDates?.end) {\n <span> - {{ calendar.selectedDates?.end | date: dateFormat }} </span>\n }\n </span>\n }\n <div class=\"buttons\">\n <acp-button\n type=\"button\"\n variant=\"danger\"\n matStyle=\"filled\"\n (handleClick)=\"isCustomRange = false\"\n >Cancelar</acp-button\n >\n <acp-button\n type=\"button\"\n variant=\"primary\"\n matStyle=\"filled\"\n [class.disabled]=\"\n enableEditableDates\n ? editableForm.invalid\n : !(calendar?.selectedDates?.start && calendar?.selectedDates?.end)\n \"\n (handleClick)=\"\n enableEditableDates && commitEditableDates(calendar);\n updateCustomRange(dateInput, calendar.selectedDates)\n \"\n >\n &nbsp;Aplicar&nbsp;\n </acp-button>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n</div>\n\n<ng-template\n #dateOptionList\n let-options\n let-input=\"dateInput\"\n let-optionId=\"optionId\"\n let-className=\"className\"\n>\n <mat-action-list [ngClass]=\"className\" [id]=\"optionId\">\n @for (option of options; track option.optionLabel) {\n <mat-list-item [activated]=\"option.isSelected\" (click)=\"updateSelection(option, input)\">\n {{ option.optionLabel }}\n </mat-list-item>\n }\n </mat-action-list>\n</ng-template>\n", styles: ["::ng-deep .cdk-overlay-dark-backdrop{background:none}mat-list-item.mat-mdc-list-item{height:40px}mat-list-item.mdc-list-item--activated{background-color:var(--ndp-selected-option-bg, var(--mat-sys-secondary-container, rgba(0, 0, 0, .08)))}::ng-deep .cdk-overlay-pane:has(.custom-ckd-container),::ng-deep .cdk-overlay-pane:has(.ndp-cdk-container){width:100%;background-color:var(--mat-sys-surface-container);max-height:100vh;overflow-y:auto;overflow-x:hidden;max-width:700px;margin-top:-22px;border:1px solid var(--mat-sys-surface-container)}::ng-deep .cdk-overlay-pane:has(.range-input){max-width:250px}.br-top{border-top:1px solid var(--mat-sys-surface-container)}.br-right{border-right:1px solid var(--mat-sys-surface-container)}.disabled{pointer-events:none;opacity:.5}.mat-button,.mdc-button{font-family:var(--mat-list-list-item-label-text-font);line-height:var(--mat-list-list-item-label-text-line-height);font-size:var(--mat-list-list-item-label-text-size);font-weight:var(--mat-list-list-item-label-text-weight);letter-spacing:var(--mat-list-list-item-label-text-tracking)}.w-full{width:100%}.display-hidden{display:none}.custom-calendar-container,.ndp-calendar-container{width:100%}.row-1,.row-2{width:100%;box-sizing:border-box}.row-1{display:flex;align-items:stretch}.row-2{padding:16px}.ndp-column-separator{flex:0 0 1px;background-color:var(--mat-sys-surface-container)}.footer-content,.ndp-footer-content{align-items:center;display:flex;text-align:right;justify-content:end;gap:16px;text-overflow:ellipsis}.footer-content .buttons,.ndp-footer-content .buttons{display:flex;gap:8px}.ndp-date-inputs{display:flex;gap:8px;margin-right:auto;align-items:flex-start}.ndp-date-field{width:150px}.column-1{flex:0 0 25%;overflow:auto}.column-2{flex:1 1 auto;min-width:0}.without-default-opt .column-1{display:none}@media(max-width:400px){.footer-content,.ndp-footer-content{display:block}.footer-content .buttons,.ndp-footer-content .buttons{justify-content:flex-end;margin-top:20px}#range-label-text{margin-right:1.5rem}}@media(max-width:650px){.row-1{flex-direction:column}.column-1{flex-basis:auto}.column-separator{display:none}}.pe-0{padding-right:0}.ps-0{padding-left:0}button.checked{color:var(--mat-sys-primary);border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$4.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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: MatListModule }, { kind: "component", type: i6.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AcpDateRangeCalendar, selector: "acp-date-range-calendar", inputs: ["minDate", "maxDate", "selectedDates"], outputs: ["selectedDatesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8498
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpDateRangeInput, isStandalone: true, selector: "acp-date-range-input", inputs: { inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: false, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showRangeRequired: { classPropertyName: "showRangeRequired", publicName: "showRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, isRangeRequired: { classPropertyName: "isRangeRequired", publicName: "isRangeRequired", isSignal: true, isRequired: false, transformFunction: null }, staticOptionId: { classPropertyName: "staticOptionId", publicName: "staticOptionId", isSignal: false, isRequired: false, transformFunction: null }, dynamicOptionId: { classPropertyName: "dynamicOptionId", publicName: "dynamicOptionId", isSignal: false, isRequired: false, transformFunction: null }, calendarId: { classPropertyName: "calendarId", publicName: "calendarId", isSignal: false, isRequired: false, transformFunction: null }, enableDefaultOptions: { classPropertyName: "enableDefaultOptions", publicName: "enableDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, selectedDates: { classPropertyName: "selectedDates", publicName: "selectedDates", isSignal: false, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: false, isRequired: false, transformFunction: null }, isShowStaticDefaultOptions: { classPropertyName: "isShowStaticDefaultOptions", publicName: "isShowStaticDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, hideDefaultOptions: { classPropertyName: "hideDefaultOptions", publicName: "hideDefaultOptions", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetX: { classPropertyName: "cdkConnectedOverlayOffsetX", publicName: "cdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayOffsetY: { classPropertyName: "cdkConnectedOverlayOffsetY", publicName: "cdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetY: { classPropertyName: "listCdkConnectedOverlayOffsetY", publicName: "listCdkConnectedOverlayOffsetY", isSignal: false, isRequired: false, transformFunction: null }, listCdkConnectedOverlayOffsetX: { classPropertyName: "listCdkConnectedOverlayOffsetX", publicName: "listCdkConnectedOverlayOffsetX", isSignal: false, isRequired: false, transformFunction: null }, selectedOptionIndex: { classPropertyName: "selectedOptionIndex", publicName: "selectedOptionIndex", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedLabel: { classPropertyName: "displaySelectedLabel", publicName: "displaySelectedLabel", isSignal: false, isRequired: false, transformFunction: null }, displaySelectedExpression: { classPropertyName: "displaySelectedExpression", publicName: "displaySelectedExpression", isSignal: false, isRequired: false, transformFunction: null }, enableEditableDates: { classPropertyName: "enableEditableDates", publicName: "enableEditableDates", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPush: { classPropertyName: "cdkConnectedOverlayPush", publicName: "cdkConnectedOverlayPush", isSignal: false, isRequired: false, transformFunction: null }, cdkConnectedOverlayPositions: { classPropertyName: "cdkConnectedOverlayPositions", publicName: "cdkConnectedOverlayPositions", isSignal: false, isRequired: false, transformFunction: null }, allowSingleDateSelection: { classPropertyName: "allowSingleDateSelection", publicName: "allowSingleDateSelection", isSignal: false, isRequired: false, transformFunction: null }, autoSelectOption: { classPropertyName: "autoSelectOption", publicName: "autoSelectOption", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateDropDownOptions: { classPropertyName: "dateDropDownOptions", publicName: "dateDropDownOptions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dateSelectionChanged: "dateSelectionChanged", dateListOptions: "dateListOptions", rangeRequiredChange: "rangeRequiredChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: "<!--\n AcpDateRangeInput Component Template\n @author AcontPlus S.A.S\n @version 1.0.0\n\n Comprehensive date range picker with predefined options, custom calendar selection,\n and support for human-readable date expressions.\n-->\n<div class=\"date-picker-main ndp-main\" cdkOverlayOrigin #trigger>\n <mat-form-field\n class=\"w-full\"\n [class]=\"{ 'display-hidden': isShowStaticDefaultOptions }\"\n (click)=\"toggleDateOptionSelectionList($event)\"\n >\n <mat-label (click)=\"toggleDateOptionSelectionList($event)\">{{ inputLabel }}</mat-label>\n <input\n matInput\n #dateInput\n class=\"cursor-pointer\"\n id=\"date-input-field\"\n (input)=\"onMainInputChange(dateInput)\"\n />\n <ng-container matSuffix>\n @if (showClearButton() && !!dateInput.value) {\n <button\n mat-icon-button\n class=\"cursor-pointer pe-0 ps-0\"\n matTooltip=\"Clear\"\n (click)=\"clearSelection($event)\"\n >\n <mat-icon>clear</mat-icon>\n </button>\n } @if (showCalendarIcon()) {\n <button mat-icon-button class=\"cursor-pointer\">\n <mat-icon>date_range</mat-icon>\n </button>\n } @if (showRangeRequired()) {\n <button\n mat-icon-button\n class=\"cursor-pointer\"\n [class.checked]=\"isRangeRequired()\"\n (click)=\"toggleRangeSelection($event)\"\n matTooltip=\"Rango de fechas obligatorio\"\n >\n <mat-icon [color]=\"isRangeRequired() ? 'accent' : ''\">\n {{ isRangeRequired() ? 'check_box' : 'check_box_outline_blank' }}\n </mat-icon>\n </button>\n }\n </ng-container>\n </mat-form-field>\n\n @if (dateDropDownOptions.length && isShowStaticDefaultOptions) {\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n optionId: staticOptionId,\n className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n }\n \"\n />\n }\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isDateOptionList\"\n [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n [cdkConnectedOverlayOffsetX]=\"listCdkConnectedOverlayOffsetX\"\n [cdkConnectedOverlayOffsetY]=\"listCdkConnectedOverlayOffsetY\"\n (backdropClick)=\"isDateOptionList = false\"\n >\n @if (dateDropDownOptions.length && !isShowStaticDefaultOptions) {\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n optionId: dynamicOptionId,\n className: 'w-full custom-ckd-container ndp-cdk-container range-input',\n }\n \"\n />\n }\n </ng-template>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isCustomRange\"\n [cdkConnectedOverlayPush]=\"cdkConnectedOverlayPush\"\n [cdkConnectedOverlayPositions]=\"cdkConnectedOverlayPositions\"\n [cdkConnectedOverlayOffsetX]=\"cdkConnectedOverlayOffsetX\"\n [cdkConnectedOverlayOffsetY]=\"cdkConnectedOverlayOffsetY\"\n (backdropClick)=\"isCustomRange = false\"\n >\n <div\n class=\"custom-ckd-container ndp-cdk-container custom-calendar-container ndp-calendar-container\"\n [class]=\"{ 'without-default-opt': hideDefaultOptions }\"\n >\n <div class=\"row-1\">\n @if (!hideDefaultOptions) {\n <div class=\"pt-custom column-1\">\n <ng-container\n *ngTemplateOutlet=\"\n dateOptionList;\n context: {\n $implicit: visibleOptions(),\n dateInput: dateInput,\n }\n \"\n />\n </div>\n <div class=\"ndp-column-separator\"></div>\n }\n <div class=\"mt-2 column-2\">\n <acp-date-range-calendar\n [selectedDates]=\"selectedDates\"\n #calendar\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n (selectedDatesChange)=\"onCalendarSelectionChange($event)\"\n />\n </div>\n </div>\n <div class=\"row-2 br-top\">\n <div class=\"footer-content ndp-footer-content\">\n @if (enableEditableDates) {\n <form class=\"ndp-date-inputs\" [formGroup]=\"editableForm\">\n <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n <mat-label>Start</mat-label>\n <input\n matInput\n formControlName=\"start\"\n placeholder=\"e.g. now-7d\"\n (blur)=\"commitEditableDates(calendar)\"\n (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n />\n @if (editableForm.controls.start.hasError('required')) {\n <mat-error>Required</mat-error>\n } @else if (editableForm.controls.start.hasError('invalidDate')) {\n <mat-error>Invalid date or expression</mat-error>\n }\n </mat-form-field>\n <mat-form-field class=\"ndp-date-field\" subscriptSizing=\"dynamic\">\n <mat-label>End</mat-label>\n <input\n matInput\n formControlName=\"end\"\n placeholder=\"e.g. now\"\n (blur)=\"commitEditableDates(calendar)\"\n (keydown.enter)=\"applyEditableDates(dateInput, calendar)\"\n />\n @if (editableForm.controls.end.hasError('required')) {\n <mat-error>Required</mat-error>\n } @else if (editableForm.controls.end.hasError('invalidDate')) {\n <mat-error>Invalid date or expression</mat-error>\n } @else if (editableForm.hasError('rangeOrder')) {\n <mat-error>Start must be before end</mat-error>\n }\n </mat-form-field>\n </form>\n } @else {\n <span id=\"range-label-text\" class=\"ndp-range-label-text\">\n {{ calendar?.selectedDates?.start | date: dateFormat }} @if\n (calendar?.selectedDates?.end) {\n <span> - {{ calendar.selectedDates?.end | date: dateFormat }} </span>\n }\n </span>\n }\n <div class=\"buttons\">\n <acp-button\n type=\"button\"\n variant=\"danger\"\n matStyle=\"filled\"\n (handleClick)=\"isCustomRange = false\"\n >Cancelar</acp-button\n >\n <acp-button\n type=\"button\"\n variant=\"primary\"\n matStyle=\"filled\"\n [class.disabled]=\"\n enableEditableDates\n ? editableForm.invalid\n : !(calendar?.selectedDates?.start && calendar?.selectedDates?.end)\n \"\n (handleClick)=\"\n enableEditableDates && commitEditableDates(calendar);\n updateCustomRange(dateInput, calendar.selectedDates)\n \"\n >\n &nbsp;Aplicar&nbsp;\n </acp-button>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n</div>\n\n<ng-template\n #dateOptionList\n let-options\n let-input=\"dateInput\"\n let-optionId=\"optionId\"\n let-className=\"className\"\n>\n <mat-action-list [ngClass]=\"className\" [id]=\"optionId\">\n @for (option of options; track option.optionLabel) {\n <mat-list-item [activated]=\"option.isSelected\" (click)=\"updateSelection(option, input)\">\n {{ option.optionLabel }}\n </mat-list-item>\n }\n </mat-action-list>\n</ng-template>\n", styles: ["::ng-deep .cdk-overlay-dark-backdrop{background:none}mat-list-item.mat-mdc-list-item{height:40px}mat-list-item.mdc-list-item--activated{background-color:var(--ndp-selected-option-bg, var(--mat-sys-secondary-container, rgba(0, 0, 0, .08)))}::ng-deep .cdk-overlay-pane:has(.custom-ckd-container),::ng-deep .cdk-overlay-pane:has(.ndp-cdk-container){width:100%;background-color:var(--mat-sys-surface-container);max-height:100vh;overflow-y:auto;overflow-x:hidden;max-width:700px;margin-top:-22px;border:1px solid var(--mat-sys-surface-container)}::ng-deep .cdk-overlay-pane:has(.range-input){max-width:250px}.br-top{border-top:1px solid var(--mat-sys-surface-container)}.br-right{border-right:1px solid var(--mat-sys-surface-container)}.disabled{pointer-events:none;opacity:.5}.mat-button,.mdc-button{font-family:var(--mat-list-list-item-label-text-font);line-height:var(--mat-list-list-item-label-text-line-height);font-size:var(--mat-list-list-item-label-text-size);font-weight:var(--mat-list-list-item-label-text-weight);letter-spacing:var(--mat-list-list-item-label-text-tracking)}.w-full{width:100%}.display-hidden{display:none}.custom-calendar-container,.ndp-calendar-container{width:100%}.row-1,.row-2{width:100%;box-sizing:border-box}.row-1{display:flex;align-items:stretch}.row-2{padding:16px}.ndp-column-separator{flex:0 0 1px;background-color:var(--mat-sys-surface-container)}.footer-content,.ndp-footer-content{align-items:center;display:flex;text-align:right;justify-content:end;gap:16px;text-overflow:ellipsis}.footer-content .buttons,.ndp-footer-content .buttons{display:flex;gap:8px}.ndp-date-inputs{display:flex;gap:8px;margin-right:auto;align-items:flex-start}.ndp-date-field{width:150px}.column-1{flex:0 0 25%;overflow:auto}.column-2{flex:1 1 auto;min-width:0}.without-default-opt .column-1{display:none}@media(max-width:400px){.footer-content,.ndp-footer-content{display:block}.footer-content .buttons,.ndp-footer-content .buttons{justify-content:flex-end;margin-top:20px}#range-label-text{margin-right:1.5rem}}@media(max-width:650px){.row-1{flex-direction:column}.column-1{flex-basis:auto}.column-separator{display:none}}.pe-0{padding-right:0}.ps-0{padding-left:0}button.checked{color:var(--mat-sys-primary);border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$5.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i6.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AcpDateRangeCalendar, selector: "acp-date-range-calendar", inputs: ["minDate", "maxDate", "selectedDates"], outputs: ["selectedDatesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8361
8499
  }
8362
8500
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpDateRangeInput, decorators: [{
8363
8501
  type: Component,
@@ -8667,7 +8805,7 @@ class AcpCheckboxGroup {
8667
8805
  useExisting: forwardRef(() => AcpCheckboxGroup),
8668
8806
  multi: true,
8669
8807
  },
8670
- ], queries: [{ propertyName: "_checkboxes", predicate: i0.forwardRef(() => MatCheckbox), descendants: true }], exportAs: ["acpCheckboxGroup"], ngImport: i0, template: "@if (showSelectAll) {\n<mat-checkbox\n class=\"acp-checkbox-master\"\n [checked]=\"selectAll\"\n [(indeterminate)]=\"selectAllIndeterminate\"\n [disabled]=\"disabled\"\n (change)=\"_updateMasterCheckboxState($event, -1)\"\n>\n {{ selectAllLabel }}\n</mat-checkbox>\n} @for (option of items; track _trackBy($index, option); let i = $index) {\n<mat-checkbox\n class=\"acp-checkbox-normal\"\n [(ngModel)]=\"option.checked\"\n [aria-describedby]=\"option.ariaDescribedby\"\n [aria-label]=\"option.ariaLabel\"\n [aria-labelledby]=\"option.ariaLabelledby\"\n [color]=\"option.color\"\n [disabled]=\"option.disabled || disabled\"\n [disableRipple]=\"option.disableRipple\"\n [labelPosition]=\"option.labelPosition\"\n [required]=\"option.required\"\n (change)=\"_updateNormalCheckboxState($event, i)\"\n>\n {{ option[bindLabel()] | toObservable | async }}\n</mat-checkbox>\n}\n", styles: [".acp-checkbox-group{display:flex;flex-direction:column;gap:.5rem}.acp-checkbox-group .acp-checkbox-master{margin-bottom:.5rem;font-weight:500}.acp-checkbox-group .acp-checkbox-normal{margin-left:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
8808
+ ], queries: [{ propertyName: "_checkboxes", predicate: i0.forwardRef(() => MatCheckbox), descendants: true }], exportAs: ["acpCheckboxGroup"], ngImport: i0, template: "@if (showSelectAll) {\n<mat-checkbox\n class=\"acp-checkbox-master\"\n [checked]=\"selectAll\"\n [(indeterminate)]=\"selectAllIndeterminate\"\n [disabled]=\"disabled\"\n (change)=\"_updateMasterCheckboxState($event, -1)\"\n>\n {{ selectAllLabel }}\n</mat-checkbox>\n} @for (option of items; track _trackBy($index, option); let i = $index) {\n<mat-checkbox\n class=\"acp-checkbox-normal\"\n [(ngModel)]=\"option.checked\"\n [aria-describedby]=\"option.ariaDescribedby\"\n [aria-label]=\"option.ariaLabel\"\n [aria-labelledby]=\"option.ariaLabelledby\"\n [color]=\"option.color\"\n [disabled]=\"option.disabled || disabled\"\n [disableRipple]=\"option.disableRipple\"\n [labelPosition]=\"option.labelPosition\"\n [required]=\"option.required\"\n (change)=\"_updateNormalCheckboxState($event, i)\"\n>\n {{ option[bindLabel()] | toObservable | async }}\n</mat-checkbox>\n}\n", styles: [".acp-checkbox-group{display:flex;flex-direction:column;gap:.5rem}.acp-checkbox-group .acp-checkbox-master{margin-bottom:.5rem;font-weight:500}.acp-checkbox-group .acp-checkbox-normal{margin-left:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
8671
8809
  }
8672
8810
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpCheckboxGroup, decorators: [{
8673
8811
  type: Component,
@@ -8783,8 +8921,10 @@ class StatusDisplayPipe {
8783
8921
  const text = this.getStatusText(isActive, gender, customActiveText, customInactiveText);
8784
8922
  const icon = isActive ? 'check_circle' : 'cancel';
8785
8923
  const colorClass = isActive ? 'text-green-500' : 'text-red-500';
8786
- const combinedIconClass = `${colorClass} align-middle mr-1 ${iconClass}`.trim();
8787
- const combinedTextClass = `align-middle ${textClass}`.trim();
8924
+ const sanitizedIconClass = this.sanitizeClassName(iconClass);
8925
+ const sanitizedTextClass = this.sanitizeClassName(textClass);
8926
+ const combinedIconClass = `${colorClass} align-middle mr-1 ${sanitizedIconClass}`.trim();
8927
+ const combinedTextClass = `align-middle ${sanitizedTextClass}`.trim();
8788
8928
  let html = '';
8789
8929
  if (showIcon) {
8790
8930
  html += `<mat-icon class="${combinedIconClass}" fontIcon="${icon}"></mat-icon>`;
@@ -8793,21 +8933,23 @@ class StatusDisplayPipe {
8793
8933
  return this.sanitizer.bypassSecurityTrustHtml(html);
8794
8934
  }
8795
8935
  getStatusText(isActive, gender, customActive, customInactive) {
8796
- if (customActive && isActive)
8797
- return customActive;
8798
- if (customInactive && !isActive)
8799
- return customInactive;
8936
+ if (customActive && isActive) {
8937
+ return this.sanitizer.sanitize(SecurityContext.HTML, customActive) || customActive;
8938
+ }
8939
+ if (customInactive && !isActive) {
8940
+ return this.sanitizer.sanitize(SecurityContext.HTML, customInactive) || customInactive;
8941
+ }
8800
8942
  if (!this.transloco)
8801
8943
  return this.getFallbackText(isActive, gender);
8802
8944
  const translationKey = this.getTranslationKey(isActive, gender);
8803
8945
  const translation = this.transloco.translate(translationKey);
8804
- return translation !== translationKey ? translation : this.getFallbackText(isActive, gender);
8946
+ return translation === translationKey ? this.getFallbackText(isActive, gender) : translation;
8805
8947
  }
8806
8948
  getTranslationKey(isActive, gender) {
8807
8949
  const base = isActive ? 'status.active' : 'status.inactive';
8808
- return gender !== 'neutral'
8809
- ? `${base}.${gender}`
8810
- : base;
8950
+ return gender === 'neutral'
8951
+ ? base
8952
+ : `${base}.${gender}`;
8811
8953
  }
8812
8954
  getFallbackText(isActive, gender) {
8813
8955
  const lang = this.transloco?.getActiveLang() || 'en';
@@ -8822,6 +8964,11 @@ class StatusDisplayPipe {
8822
8964
  return gender === 'female' ? 'Inactiva' : 'Inactivo';
8823
8965
  }
8824
8966
  }
8967
+ sanitizeClassName(className) {
8968
+ // Only allow alphanumeric characters, hyphens, underscores, and spaces
8969
+ // This prevents CSS injection through class names
8970
+ return className.replace(/[^a-zA-Z0-9_-\s]/g, '');
8971
+ }
8825
8972
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: StatusDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
8826
8973
  static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: StatusDisplayPipe, isStandalone: true, name: "statusDisplay" });
8827
8974
  }
@@ -8836,5 +8983,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
8836
8983
  * Generated bundle index. Do not edit.
8837
8984
  */
8838
8985
 
8839
- export { ACP_ACTIVE_DATE_DEBOUNCE, ACP_DATE_OPTION_TYPE, ACP_DEFAULT_DATE_OPTIONS, ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AcpAlert, AcpCheckboxBase, AcpCheckboxGroup, AcpDateRangeInput, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AcpSelectDateOption, AdvancedDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KeyboardNavigationService, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, _AcpPopoverContentBase, createAutocompleteWrapperConfig };
8986
+ export { ACP_ACTIVE_DATE_DEBOUNCE, ACP_DATE_OPTION_TYPE, ACP_DEFAULT_DATE_OPTIONS, ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AcpAlert, AcpButton, AcpCheckboxBase, AcpCheckboxGroup, AcpDateRangeInput, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AcpSelectDateOption, AdvancedDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KeyboardNavigationService, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, _AcpPopoverContentBase, createAutocompleteWrapperConfig };
8840
8987
  //# sourceMappingURL=acontplus-ng-components.mjs.map