@acontplus/ng-components 2.3.0 → 2.4.0

package/fesm2022/acontplus-ng-components.mjs

@@ -1,46 +1,49 @@
 import * as i0 from '@angular/core';
-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';
+import { inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, output, contentChild, TemplateRef, computed, Directive, ViewContainerRef, Renderer2, signal, afterRenderEffect, untracked, Injectable, viewChild, effect, PLATFORM_ID, Pipe, ViewChild, KeyValueDiffers, InjectionToken, NgZone, CSP_NONCE, DOCUMENT, ElementRef, Injector, ContentChildren, model, forwardRef, ANIMATION_MODULE_TYPE, ApplicationRef, ContentChild, HostListener, SecurityContext } from '@angular/core';
 import * as i1$1 from '@angular/material/button';
 import { MatIconButton, MatButtonModule, MatButton, MatMiniFabButton, MatFabButton } from '@angular/material/button';
-import * as i1 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
+import { NgClass, NgTemplateOutlet, isPlatformBrowser, AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe, PercentPipe } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { MatChipSet, MatChip, MatChipAvatar, MatChipTrailingIcon, MatChipRemove, MatChipRow, MatChipGrid, MatChipInput, MatChipListbox } from '@angular/material/chips';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
+import * as i1 from '@angular/material/card';
+import { MatCardModule, MatCard, MatCardHeader, MatCardContent } from '@angular/material/card';
 import { CdkDrag, CdkDragHandle, moveItemInArray, CdkDropList } from '@angular/cdk/drag-drop';
 import * as i1$2 from '@angular/material/dialog';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogConfig } from '@angular/material/dialog';
-import { NgClass, NgTemplateOutlet, isPlatformBrowser, AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe, PercentPipe } from '@angular/common';
 import { REPORT_FORMAT, DEFAULT_ICONS, FALLBACK_ICON } from '@acontplus/ui-kit';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import * as i1$4 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR, FormGroup, Validators } from '@angular/forms';
 import * as i1$3 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { Subject, firstValueFrom, catchError, of, map, BehaviorSubject, delay, debounceTime, takeUntil, isObservable, merge, combineLatest, Observable, fromEvent, defer, Subscription } from 'rxjs';
+import { Subject, firstValueFrom, catchError, of, map, BehaviorSubject, isObservable, merge, combineLatest, Observable, fromEvent, defer, Subscription } from 'rxjs';
 import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
-import { MatChipRow, MatChipGrid, MatChipInput, MatChipListbox, MatChip } from '@angular/material/chips';
 import { MatFormField, MatLabel, MatHint, MatFormFieldModule } from '@angular/material/form-field';
 import { LiveAnnouncer, _IdGenerator, CdkTrapFocus, FocusMonitor, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
 import { ENTER, COMMA, ESCAPE, hasModifierKey, SPACE } from '@angular/cdk/keycodes';
 import { Tabulator, PageModule, ReactiveDataModule, FormatModule, EditModule, ValidateModule, ColumnCalcsModule, SortModule, TooltipModule, DataTreeModule, MoveRowsModule, SelectRowModule, PopupModule, InteractionModule } from 'tabulator-tables';
 import { toSignal } from '@angular/core/rxjs-interop';
-import * as i1$5 from '@angular/cdk/overlay';
-import { Overlay, OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
+import * as i3 from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { ComponentPortal, CdkPortalOutlet, TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
 import * as i7 from '@angular/material/tooltip';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
-import { MatProgressBarModule, MatProgressBar } from '@angular/material/progress-bar';
-import { switchMap, catchError as catchError$1, mapTo, take, takeUntil as takeUntil$1, startWith, pairwise, distinctUntilChanged, share, map as map$1, skip, filter } from 'rxjs/operators';
 import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRowDef, MatFooterRow, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4 from '@angular/material/progress-bar';
+import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
 import { SelectionModel } from '@angular/cdk/collections';
 import { MatBadge } from '@angular/material/badge';
-import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import * as i3$1 from '@angular/material/menu';
+import { MatMenu, MatMenuItem, MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
 import { _animationsDisabled, MatNativeDateModule } from '@angular/material/core';
+import { mapTo, take, takeUntil, startWith, pairwise, distinctUntilChanged, share, map as map$1, skip, filter } from 'rxjs/operators';
 import { CdkTable, CdkColumnDef } from '@angular/cdk/table';
 import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { Directionality } from '@angular/cdk/bidi';
@@ -54,6 +57,7 @@ import * as i2$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i6 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
+import { MatDividerModule } from '@angular/material/divider';
 import { TranslocoService } from '@jsverse/transloco';
 
 class AcpAlert {
@@ -94,6 +98,192 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 type: Output
             }] } });
 
+const TREND_CONFIGS = {
+    up: { value: '↑', icon: 'trending_up', color: 'success' },
+    down: { value: '↓', icon: 'trending_down', color: 'danger' },
+    neutral: { value: '→', icon: 'trending_flat', color: 'neutral' },
+    none: { value: '', icon: '', color: 'neutral' },
+};
+
+class AcpBadge {
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    variant = input('filled', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    shape = input('rounded', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    trailingIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "trailingIcon" }] : /* istanbul ignore next */ []));
+    svgIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "svgIcon" }] : /* istanbul ignore next */ []));
+    trailingSvgIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "trailingSvgIcon" }] : /* istanbul ignore next */ []));
+    trend = input('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []));
+    clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    highlighted = input(false, { ...(ngDevMode ? { debugName: "highlighted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    routerLink = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
+    href = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    ariaLabelOverride = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabelOverride" }] : /* istanbul ignore next */ []));
+    clicked = output();
+    removed = output();
+    iconTemplate = contentChild('icon', { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    trailingIconTemplate = contentChild('trailingIcon', { ...(ngDevMode ? { debugName: "trailingIconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    isTrending = computed(() => this.trend() !== 'none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTrending" }] : /* istanbul ignore next */ []));
+    trendConfig = computed(() => TREND_CONFIGS[this.trend()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trendConfig" }] : /* istanbul ignore next */ []));
+    effectiveColor = computed(() => {
+        if (this.isTrending())
+            return this.trendConfig().color;
+        return this.color();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveColor" }] : /* istanbul ignore next */ []));
+    effectiveIcon = computed(() => {
+        if (this.isTrending())
+            return this.trendConfig().icon;
+        return this.icon();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveIcon" }] : /* istanbul ignore next */ []));
+    effectiveSvgIcon = computed(() => {
+        if (this.isTrending())
+            return undefined;
+        return this.svgIcon();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSvgIcon" }] : /* istanbul ignore next */ []));
+    effectiveTrailingIcon = computed(() => {
+        if (this.removable())
+            return undefined;
+        return this.trailingIcon();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveTrailingIcon" }] : /* istanbul ignore next */ []));
+    effectiveTrailingSvgIcon = computed(() => {
+        if (this.removable())
+            return undefined;
+        return this.trailingSvgIcon();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveTrailingSvgIcon" }] : /* istanbul ignore next */ []));
+    effectiveValue = computed(() => {
+        if (this.isTrending())
+            return this.value() ?? this.trendConfig().value;
+        return this.value();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveValue" }] : /* istanbul ignore next */ []));
+    isLink = computed(() => this.href() !== null || this.routerLink() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLink" }] : /* istanbul ignore next */ []));
+    isInteractive = computed(() => this.clickable() || this.removable() || this.isLink(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isHighlighted = computed(() => this.highlighted() || this.selected(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHighlighted" }] : /* istanbul ignore next */ []));
+    chipClasses = computed(() => [
+        `acp-badge--${this.variant()}`,
+        `acp-badge--${this.size()}`,
+        `acp-badge--${this.shape()}`,
+    ].join(' '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipClasses" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const classes = [
+            'acp-badge',
+            `acp-badge--${this.variant()}`,
+            `acp-badge--${this.effectiveColor()}`,
+            `acp-badge--${this.size()}`,
+            `acp-badge--${this.shape()}`,
+        ];
+        if (this.isInteractive())
+            classes.push('acp-badge--interactive');
+        if (this.isDisabled())
+            classes.push('acp-badge--disabled');
+        if (this.selected())
+            classes.push('acp-badge--selected');
+        if (this.loading())
+            classes.push('acp-badge--loading');
+        if (this.removable())
+            classes.push('acp-badge--removable');
+        if (this.isTrending())
+            classes.push('acp-badge--trend');
+        return classes.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => {
+        const override = this.ariaLabelOverride();
+        if (override)
+            return override;
+        const label = this.label() ?? '';
+        const value = this.effectiveValue() ?? '';
+        const separator = label && value ? ' ' : '';
+        return `${label}${separator}${value}`.trim() || null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    onChipClick(event) {
+        if (this.isDisabled()) {
+            event.preventDefault();
+            return;
+        }
+        this.clicked.emit();
+    }
+    onRemove(_event) {
+        if (this.isDisabled())
+            return;
+        this.removed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpBadge, isStandalone: true, selector: "acp-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingSvgIcon: { classPropertyName: "trailingSvgIcon", publicName: "trailingSvgIcon", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelOverride: { classPropertyName: "ariaLabelOverride", publicName: "ariaLabelOverride", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", removed: "removed" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "trailingIconTemplate", first: true, predicate: ["trailingIcon"], descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["acpBadge"], ngImport: i0, template: "<mat-chip-set\n  class=\"acp-badge__set\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-disabled]=\"isDisabled() || null\"\n>\n  <mat-chip\n    class=\"acp-badge__chip\"\n    [ngClass]=\"chipClasses()\"\n    [disabled]=\"isDisabled()\"\n    [removable]=\"removable()\"\n    [highlighted]=\"isHighlighted()\"\n    [value]=\"value()\"\n    [routerLink]=\"routerLink()\"\n    [attr.href]=\"href()\"\n    (removed)=\"onRemove($event)\"\n    (click)=\"onChipClick($event)\"\n  >\n    @if (loading()) {\n    <span class=\"acp-badge__loader\" aria-hidden=\"true\"></span>\n    } @if (iconTemplate()) {\n    <span matChipAvatar class=\"acp-badge__avatar\">\n      <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n    </span>\n    } @else if (effectiveSvgIcon()) {\n    <mat-icon\n      matChipAvatar\n      class=\"acp-badge__icon\"\n      [svgIcon]=\"effectiveSvgIcon()!\"\n      aria-hidden=\"true\"\n    ></mat-icon>\n    } @else if (effectiveIcon()) {\n    <mat-icon matChipAvatar class=\"acp-badge__icon\" aria-hidden=\"true\"\n      >{{ effectiveIcon() }}</mat-icon\n    >\n    } @if (label()) {\n    <span class=\"acp-badge__label\">{{ label() }}</span>\n    } @if (label() && effectiveValue()) {\n    <span class=\"acp-badge__separator\" aria-hidden=\"true\">|</span>\n    } @if (effectiveValue()) {\n    <span class=\"acp-badge__value\">{{ effectiveValue() }}</span>\n    } @if (trailingIconTemplate()) {\n    <span matChipTrailingIcon class=\"acp-badge__trailing-icon\">\n      <ng-container [ngTemplateOutlet]=\"trailingIconTemplate()!\"></ng-container>\n    </span>\n    } @else if (effectiveTrailingSvgIcon()) {\n    <mat-icon\n      matChipTrailingIcon\n      class=\"acp-badge__trailing-icon\"\n      [svgIcon]=\"effectiveTrailingSvgIcon()!\"\n      aria-hidden=\"true\"\n    ></mat-icon>\n    } @else if (effectiveTrailingIcon()) {\n    <mat-icon matChipTrailingIcon class=\"acp-badge__trailing-icon\" aria-hidden=\"true\"\n      >{{ effectiveTrailingIcon() }}</mat-icon\n    >\n    } @if (removable()) {\n    <button\n      matChipRemove\n      type=\"button\"\n      class=\"acp-badge__remove\"\n      aria-label=\"Remove\"\n      (click)=\"onRemove($event)\"\n    >\n      <mat-icon aria-hidden=\"true\">cancel</mat-icon>\n    </button>\n    }\n  </mat-chip>\n</mat-chip-set>\n", styles: [".acp-badge{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary));display:inline-flex;vertical-align:middle;max-width:100%}.acp-badge__set{display:inline-flex;max-width:100%}.acp-badge__chip.mat-mdc-chip{position:relative;max-width:100%}.acp-badge__label,.acp-badge__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-badge__separator{margin:0 6px;opacity:.6}.acp-badge__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:inherit;border-radius:inherit;z-index:1}.acp-badge__loader:after{content:\"\";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:acp-badge-spin .75s linear infinite}.acp-badge__remove{cursor:pointer}.acp-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:1px}@keyframes acp-badge-spin{to{transform:rotate(360deg)}}.acp-badge.acp-badge--primary{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary))}.acp-badge.acp-badge--secondary{--acp-badge-bg: var(--acp-badge-secondary-bg, var(--mat-sys-secondary));--acp-badge-fg: var(--acp-badge-secondary-color, var(--mat-sys-on-secondary))}.acp-badge.acp-badge--tertiary{--acp-badge-bg: var(--acp-badge-tertiary-bg, var(--mat-sys-tertiary));--acp-badge-fg: var(--acp-badge-tertiary-color, var(--mat-sys-on-tertiary))}.acp-badge.acp-badge--success{--acp-badge-bg: var(--acp-badge-success-bg, light-dark(#026e00, #02e600));--acp-badge-fg: var(--acp-badge-success-fg, light-dark(#cbffb8, #013a00))}.acp-badge.acp-badge--warning{--acp-badge-bg: var(--acp-badge-warning-bg, light-dark(#964900, #ffb787));--acp-badge-fg: var(--acp-badge-warning-fg, light-dark(#ffede4, #502400))}.acp-badge.acp-badge--danger{--acp-badge-bg: var(--acp-badge-danger-bg, light-dark(#c00100, #ffb4a8));--acp-badge-fg: var(--acp-badge-danger-fg, light-dark(#ffedea, #690100))}.acp-badge.acp-badge--info{--acp-badge-bg: var(--acp-badge-info-bg, light-dark(#005cbb, #abc7ff));--acp-badge-fg: var(--acp-badge-info-fg, light-dark(#ecf0ff, #002f65))}.acp-badge.acp-badge--neutral{--acp-badge-bg: var(--acp-badge-neutral-bg, var(--mat-sys-surface-variant));--acp-badge-fg: var(--acp-badge-neutral-color, var(--mat-sys-on-surface-variant))}.acp-badge.acp-badge--custom{--acp-badge-bg: var(--acp-badge-custom-bg, var(--acp-badge-custom-bg, var(--mat-sys-surface-container)));--acp-badge-fg: var(--acp-badge-custom-fg, var(--acp-badge-custom-color, var(--mat-sys-on-surface)))}.acp-badge.acp-badge--filled .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: var(--acp-badge-bg);--mat-chip-elevated-selected-container-color: var(--acp-badge-bg);--mat-chip-label-text-color: var(--acp-badge-fg);--mat-chip-selected-label-text-color: var(--acp-badge-fg);--mat-chip-with-icon-icon-color: var(--acp-badge-fg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-fg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-fg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-fg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--outlined .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: var(--acp-badge-bg);--mat-chip-outline-width: 1px}.acp-badge.acp-badge--soft .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--tonal .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--text .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 20px;--mat-chip-label-text-size: 10px}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 12px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 24px;--mat-chip-label-text-size: 11px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 14px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 28px;--mat-chip-label-text-size: 12px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 16px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 32px;--mat-chip-label-text-size: 14px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 18px}.acp-badge.acp-badge--rounded .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-container-shape, var(--mat-sys-corner-small))}.acp-badge.acp-badge--pill .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-pill-shape, var(--mat-sys-corner-full))}.acp-badge.acp-badge--square .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: 0}.acp-badge__chip.mat-mdc-chip .mat-icon{width:var(--acp-badge-icon-size, 18px);height:var(--acp-badge-icon-size, 18px);font-size:var(--acp-badge-icon-size, 18px);line-height:var(--acp-badge-icon-size, 18px)}.acp-badge.acp-badge--interactive .acp-badge__chip.mat-mdc-chip{cursor:pointer}.acp-badge.acp-badge--disabled .acp-badge__chip.mat-mdc-chip{cursor:not-allowed;opacity:.5}.acp-badge.acp-badge--loading .acp-badge__chip.mat-mdc-chip{pointer-events:none}.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mdc-evolution-chip--selected,.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mat-mdc-chip-highlighted{box-shadow:inset 0 0 0 2px currentColor}@media(prefers-reduced-motion:reduce){.acp-badge__loader:after{animation:none}}@media(prefers-contrast:more){.acp-badge__chip.mat-mdc-chip{outline:2px solid currentColor;outline-offset:1px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpBadge, decorators: [{
+            type: Component,
+            args: [{ selector: 'acp-badge', exportAs: 'acpBadge', standalone: true, imports: [
+                        NgClass,
+                        NgTemplateOutlet,
+                        RouterLink,
+                        MatChipSet,
+                        MatChip,
+                        MatChipAvatar,
+                        MatChipTrailingIcon,
+                        MatChipRemove,
+                        MatIconModule,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                    }, template: "<mat-chip-set\n  class=\"acp-badge__set\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-disabled]=\"isDisabled() || null\"\n>\n  <mat-chip\n    class=\"acp-badge__chip\"\n    [ngClass]=\"chipClasses()\"\n    [disabled]=\"isDisabled()\"\n    [removable]=\"removable()\"\n    [highlighted]=\"isHighlighted()\"\n    [value]=\"value()\"\n    [routerLink]=\"routerLink()\"\n    [attr.href]=\"href()\"\n    (removed)=\"onRemove($event)\"\n    (click)=\"onChipClick($event)\"\n  >\n    @if (loading()) {\n    <span class=\"acp-badge__loader\" aria-hidden=\"true\"></span>\n    } @if (iconTemplate()) {\n    <span matChipAvatar class=\"acp-badge__avatar\">\n      <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n    </span>\n    } @else if (effectiveSvgIcon()) {\n    <mat-icon\n      matChipAvatar\n      class=\"acp-badge__icon\"\n      [svgIcon]=\"effectiveSvgIcon()!\"\n      aria-hidden=\"true\"\n    ></mat-icon>\n    } @else if (effectiveIcon()) {\n    <mat-icon matChipAvatar class=\"acp-badge__icon\" aria-hidden=\"true\"\n      >{{ effectiveIcon() }}</mat-icon\n    >\n    } @if (label()) {\n    <span class=\"acp-badge__label\">{{ label() }}</span>\n    } @if (label() && effectiveValue()) {\n    <span class=\"acp-badge__separator\" aria-hidden=\"true\">|</span>\n    } @if (effectiveValue()) {\n    <span class=\"acp-badge__value\">{{ effectiveValue() }}</span>\n    } @if (trailingIconTemplate()) {\n    <span matChipTrailingIcon class=\"acp-badge__trailing-icon\">\n      <ng-container [ngTemplateOutlet]=\"trailingIconTemplate()!\"></ng-container>\n    </span>\n    } @else if (effectiveTrailingSvgIcon()) {\n    <mat-icon\n      matChipTrailingIcon\n      class=\"acp-badge__trailing-icon\"\n      [svgIcon]=\"effectiveTrailingSvgIcon()!\"\n      aria-hidden=\"true\"\n    ></mat-icon>\n    } @else if (effectiveTrailingIcon()) {\n    <mat-icon matChipTrailingIcon class=\"acp-badge__trailing-icon\" aria-hidden=\"true\"\n      >{{ effectiveTrailingIcon() }}</mat-icon\n    >\n    } @if (removable()) {\n    <button\n      matChipRemove\n      type=\"button\"\n      class=\"acp-badge__remove\"\n      aria-label=\"Remove\"\n      (click)=\"onRemove($event)\"\n    >\n      <mat-icon aria-hidden=\"true\">cancel</mat-icon>\n    </button>\n    }\n  </mat-chip>\n</mat-chip-set>\n", styles: [".acp-badge{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary));display:inline-flex;vertical-align:middle;max-width:100%}.acp-badge__set{display:inline-flex;max-width:100%}.acp-badge__chip.mat-mdc-chip{position:relative;max-width:100%}.acp-badge__label,.acp-badge__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-badge__separator{margin:0 6px;opacity:.6}.acp-badge__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:inherit;border-radius:inherit;z-index:1}.acp-badge__loader:after{content:\"\";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:acp-badge-spin .75s linear infinite}.acp-badge__remove{cursor:pointer}.acp-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:1px}@keyframes acp-badge-spin{to{transform:rotate(360deg)}}.acp-badge.acp-badge--primary{--acp-badge-bg: var(--acp-badge-primary-bg, var(--mat-sys-primary));--acp-badge-fg: var(--acp-badge-primary-color, var(--mat-sys-on-primary))}.acp-badge.acp-badge--secondary{--acp-badge-bg: var(--acp-badge-secondary-bg, var(--mat-sys-secondary));--acp-badge-fg: var(--acp-badge-secondary-color, var(--mat-sys-on-secondary))}.acp-badge.acp-badge--tertiary{--acp-badge-bg: var(--acp-badge-tertiary-bg, var(--mat-sys-tertiary));--acp-badge-fg: var(--acp-badge-tertiary-color, var(--mat-sys-on-tertiary))}.acp-badge.acp-badge--success{--acp-badge-bg: var(--acp-badge-success-bg, light-dark(#026e00, #02e600));--acp-badge-fg: var(--acp-badge-success-fg, light-dark(#cbffb8, #013a00))}.acp-badge.acp-badge--warning{--acp-badge-bg: var(--acp-badge-warning-bg, light-dark(#964900, #ffb787));--acp-badge-fg: var(--acp-badge-warning-fg, light-dark(#ffede4, #502400))}.acp-badge.acp-badge--danger{--acp-badge-bg: var(--acp-badge-danger-bg, light-dark(#c00100, #ffb4a8));--acp-badge-fg: var(--acp-badge-danger-fg, light-dark(#ffedea, #690100))}.acp-badge.acp-badge--info{--acp-badge-bg: var(--acp-badge-info-bg, light-dark(#005cbb, #abc7ff));--acp-badge-fg: var(--acp-badge-info-fg, light-dark(#ecf0ff, #002f65))}.acp-badge.acp-badge--neutral{--acp-badge-bg: var(--acp-badge-neutral-bg, var(--mat-sys-surface-variant));--acp-badge-fg: var(--acp-badge-neutral-color, var(--mat-sys-on-surface-variant))}.acp-badge.acp-badge--custom{--acp-badge-bg: var(--acp-badge-custom-bg, var(--acp-badge-custom-bg, var(--mat-sys-surface-container)));--acp-badge-fg: var(--acp-badge-custom-fg, var(--acp-badge-custom-color, var(--mat-sys-on-surface)))}.acp-badge.acp-badge--filled .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: var(--acp-badge-bg);--mat-chip-elevated-selected-container-color: var(--acp-badge-bg);--mat-chip-label-text-color: var(--acp-badge-fg);--mat-chip-selected-label-text-color: var(--acp-badge-fg);--mat-chip-with-icon-icon-color: var(--acp-badge-fg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-fg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-fg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-fg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--outlined .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: var(--acp-badge-bg);--mat-chip-outline-width: 1px}.acp-badge.acp-badge--soft .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--tonal .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent);--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--text .acp-badge__chip.mat-mdc-chip{--mat-chip-elevated-container-color: transparent;--mat-chip-elevated-selected-container-color: transparent;--mat-chip-label-text-color: var(--acp-badge-bg);--mat-chip-selected-label-text-color: var(--acp-badge-bg);--mat-chip-with-icon-icon-color: var(--acp-badge-bg);--mat-chip-with-icon-selected-icon-color: var(--acp-badge-bg);--mat-chip-with-trailing-icon-trailing-icon-color: var(--acp-badge-bg);--mat-chip-selected-trailing-icon-color: var(--acp-badge-bg);--mat-chip-outline-color: transparent}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 20px;--mat-chip-label-text-size: 10px}.acp-badge.acp-badge--xs .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 12px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 24px;--mat-chip-label-text-size: 11px}.acp-badge.acp-badge--sm .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 14px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 28px;--mat-chip-label-text-size: 12px}.acp-badge.acp-badge--md .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 16px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip{--mat-chip-container-height: 32px;--mat-chip-label-text-size: 14px}.acp-badge.acp-badge--lg .acp-badge__chip.mat-mdc-chip .mat-icon{--acp-badge-icon-size: 18px}.acp-badge.acp-badge--rounded .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-container-shape, var(--mat-sys-corner-small))}.acp-badge.acp-badge--pill .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: var(--acp-badge-pill-shape, var(--mat-sys-corner-full))}.acp-badge.acp-badge--square .acp-badge__chip.mat-mdc-chip{--mat-chip-container-shape-radius: 0}.acp-badge__chip.mat-mdc-chip .mat-icon{width:var(--acp-badge-icon-size, 18px);height:var(--acp-badge-icon-size, 18px);font-size:var(--acp-badge-icon-size, 18px);line-height:var(--acp-badge-icon-size, 18px)}.acp-badge.acp-badge--interactive .acp-badge__chip.mat-mdc-chip{cursor:pointer}.acp-badge.acp-badge--disabled .acp-badge__chip.mat-mdc-chip{cursor:not-allowed;opacity:.5}.acp-badge.acp-badge--loading .acp-badge__chip.mat-mdc-chip{pointer-events:none}.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mdc-evolution-chip--selected,.acp-badge.acp-badge--selected .acp-badge__chip.mat-mdc-chip.mat-mdc-chip-highlighted{box-shadow:inset 0 0 0 2px currentColor}@media(prefers-reduced-motion:reduce){.acp-badge__loader:after{animation:none}}@media(prefers-contrast:more){.acp-badge__chip.mat-mdc-chip{outline:2px solid currentColor;outline-offset:1px}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], svgIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgIcon", required: false }] }], trailingSvgIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingSvgIcon", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], highlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighted", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], ariaLabelOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelOverride", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], removed: [{ type: i0.Output, args: ["removed"] }], iconTemplate: [{ type: i0.ContentChild, args: ['icon', { ...{ read: TemplateRef }, isSignal: true }] }], trailingIconTemplate: [{ type: i0.ContentChild, args: ['trailingIcon', { ...{ read: TemplateRef }, isSignal: true }] }] } });
+
+const ACP_BADGE_COLORS = [
+    'primary',
+    'secondary',
+    'tertiary',
+    'success',
+    'warning',
+    'danger',
+    'info',
+    'neutral',
+    'custom',
+];
+const ACP_BADGE_VARIANTS = [
+    'filled',
+    'outlined',
+    'soft',
+    'tonal',
+    'text',
+];
+const ACP_BADGE_SIZES = ['xs', 'sm', 'md', 'lg'];
+const ACP_BADGE_SHAPES = ['rounded', 'pill', 'square'];
+
 /**
  * A versatile card component that wraps Angular Material's mat-card with additional functionality
  * and customization options. This component provides a consistent card layout with configurable
@@ -1600,436 +1790,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-// Configuraciones predefinidas mejoradas
-const AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG = {
-    placeholder: 'Buscar...',
-    disabled: false,
-    debounceTime: 300,
-    minSearchLength: 2,
-    maxHistoryItems: 10,
-    itemsPerPage: 10,
-    enableStockFilter: true,
-    stockProperty: 'stock',
-    enablePagination: true,
-    enableFilters: true,
-    enableFooterActions: true,
-    overlayWidth: '100%',
-    overlayMaxHeight: '500px',
-    noResultsText: 'No se encontraron resultados',
-    sectionTitle: 'Resultados',
-    searchMode: 'remote',
-    searchFields: [
-        { value: 'description', label: 'Descripción', property: 'description' },
-        { value: 'code', label: 'Código', property: 'code' },
-        { value: 'barcode', label: 'Código de Barras', property: 'barcode' },
-        { value: 'auxCode', label: 'Código Auxiliar', property: 'auxCode' },
-    ],
-    stockOptions: [
-        { value: 'all', label: 'Todos' },
-        { value: 'with-stock', label: 'Con Stock' },
-        { value: 'without-stock', label: 'Sin Stock' },
-    ],
-};
-const AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG = {
-    ...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG,
-    placeholder: 'Buscar productos...',
-    enableStockFilter: true,
-    enableFooterActions: true,
-    sectionTitle: 'Productos',
-    noResultsText: 'No se encontraron productos',
-};
-const AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG = {
-    ...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG,
-    placeholder: 'Buscar clientes...',
-    enableStockFilter: false,
-    enableFooterActions: false,
-    sectionTitle: 'Clientes',
-    noResultsText: 'No se encontraron clientes',
-    searchFields: [
-        { value: 'name', label: 'Nombre', property: 'name' },
-        { value: 'email', label: 'Email', property: 'email' },
-        { value: 'phone', label: 'Teléfono', property: 'phone' },
-        { value: 'document', label: 'Documento', property: 'document' },
-    ],
-};
-const AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG = {
-    ...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG,
-    placeholder: 'Buscar...',
-    enableStockFilter: false,
-    enableFilters: false,
-    enableFooterActions: false,
-    enablePagination: false,
-    itemsPerPage: 50,
-    sectionTitle: 'Resultados',
-    overlayMaxHeight: '300px',
-};
-// Configuración para búsqueda local
-const AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG = {
-    ...AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG,
-    searchMode: 'local',
-    debounceTime: 150, // Menos tiempo para búsqueda local
-    minSearchLength: 1,
-};
-// Configuración para listas grandes con paginación
-const AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG = {
-    ...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG,
-    itemsPerPage: 20,
-    enablePagination: true,
-    overlayMaxHeight: '400px',
-};
-// Helper para crear configuración personalizada
-function createAutocompleteWrapperConfig(overrides) {
-    return {
-        ...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG,
-        ...overrides,
-    };
-}
-
-class AutocompleteWrapperService {
-    historySubject = new BehaviorSubject([]);
-    history$ = this.historySubject.asObservable();
-    constructor() {
-        this.loadHistoryFromStorage();
-    }
-    // Búsqueda local (sin API)
-    searchLocal(items, query, filters, config) {
-        const filtered = this.filterItems(items, query, filters, config);
-        const page = 1; // Para búsqueda local, asumimos página 1
-        const pageSize = config.itemsPerPage || 10;
-        const startIndex = (page - 1) * pageSize;
-        const pageItems = filtered.slice(startIndex, startIndex + pageSize);
-        return of({
-            items: pageItems,
-            totalCount: filtered.length,
-            hasMore: filtered.length > startIndex + pageSize,
-        });
-    }
-    // Filtrar elementos basado en query y filtros
-    filterItems(items, query, filters, config = AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG) {
-        if (!query || query.length < (config.minSearchLength || 2)) {
-            return [];
-        }
-        let filteredItems = items.filter(item => {
-            if (item && typeof item === 'string') {
-                return true;
-            }
-            // Buscar por el campo seleccionado
-            const searchValue = this.getSearchValue(item, filters.searchBy, config);
-            return searchValue.toLowerCase().includes(query.toLowerCase());
-        });
-        // Aplicar filtro de stock si está habilitado
-        if (config.enableStockFilter && filters.stockFilter !== 'all') {
-            filteredItems = filteredItems.filter(item => {
-                if (typeof item === 'string')
-                    return true;
-                const stockValue = item[config.stockProperty || 'stock'];
-                const hasStock = stockValue !== undefined && stockValue !== null && stockValue > 0;
-                return filters.stockFilter === 'with-stock' ? hasStock : !hasStock;
-            });
-        }
-        return filteredItems;
-    }
-    // Simular búsqueda asíncrona
-    searchAsync(items, query, filters, config = AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG) {
-        const results = this.filterItems(items, query, filters, config);
-        return of(results).pipe(delay(100)); // Simular delay de API
-    }
-    // Obtener valor de búsqueda según el campo seleccionado
-    getSearchValue(item, searchBy, config) {
-        const searchField = config.searchFields?.find(field => field.value === searchBy);
-        if (searchField) {
-            return item[searchField.property] || '';
-        }
-        // Fallback a la lógica anterior
-        switch (searchBy) {
-            case 'description':
-                return item['description'] || '';
-            case 'code':
-                return item['code'] || item.id?.toString() || '';
-            case 'barcode':
-                return item['barcode'] || '';
-            case 'auxCode':
-                return item['auxCode'] || '';
-            case 'email':
-                return item['email'] || '';
-            case 'phone':
-                return item['phone'] || '';
-            case 'document':
-                return item['document'] || '';
-            case 'name':
-            default:
-                return item.name || item.value || '';
-        }
-    }
-    // Gestión de historial específico del wrapper
-    addToHistory(item, maxItems = 10) {
-        const currentHistory = this.historySubject.value;
-        // Remover si ya existe
-        const filteredHistory = currentHistory.filter(historyItem => {
-            if (typeof item === 'string' && typeof historyItem === 'string') {
-                return item !== historyItem;
-            }
-            else if (typeof item === 'object' && typeof historyItem === 'object') {
-                return (item.id || item.name) !== (historyItem.id || historyItem.name);
-            }
-            return true;
-        });
-        // Agregar al inicio
-        const newHistory = [item, ...filteredHistory].slice(0, maxItems);
-        this.historySubject.next(newHistory);
-        this.saveHistoryToStorage(newHistory);
-    }
-    removeFromHistory(index) {
-        const currentHistory = this.historySubject.value;
-        currentHistory.splice(index, 1);
-        this.historySubject.next([...currentHistory]);
-        this.saveHistoryToStorage(currentHistory);
-    }
-    clearHistory() {
-        this.historySubject.next([]);
-        this.saveHistoryToStorage([]);
-    }
-    getHistory() {
-        return this.historySubject.value;
-    }
-    // Gestión de almacenamiento específico del wrapper
-    loadHistoryFromStorage() {
-        try {
-            const stored = localStorage.getItem('autocomplete_wrapper_history');
-            if (stored) {
-                const history = JSON.parse(stored);
-                this.historySubject.next(history);
-            }
-        }
-        catch (error) {
-            console.warn('Error loading autocomplete wrapper history:', error);
-        }
-    }
-    saveHistoryToStorage(history) {
-        try {
-            localStorage.setItem('autocomplete_wrapper_history', JSON.stringify(history));
-        }
-        catch (error) {
-            console.warn('Error saving autocomplete wrapper history:', error);
-        }
-    }
-    // Paginación
-    paginateItems(items, page, itemsPerPage) {
-        const startIndex = (page - 1) * itemsPerPage;
-        const endIndex = startIndex + itemsPerPage;
-        return items.slice(startIndex, endIndex);
-    }
-    getTotalPages(totalItems, itemsPerPage) {
-        return Math.ceil(totalItems / itemsPerPage) || 1;
-    }
-    // Validaciones
-    isValidPage(page, totalPages) {
-        return page >= 1 && page <= totalPages;
-    }
-    // Utilidades para templates
-    highlightText(text, query) {
-        if (!query || !text)
-            return text;
-        const regex = new RegExp(`(${query})`, 'gi');
-        return text.replace(regex, '<mark>$1</mark>');
-    }
-    getItemDisplayText(item, displayField = 'nombre') {
-        if (typeof item === 'string')
-            return item;
-        return item[displayField] || item.name || item.value || item.id?.toString() || '';
-    }
-    // Configuración dinámica
-    mergeConfig(userConfig) {
-        return { ...AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, ...userConfig };
-    }
-    // Factory para crear función de búsqueda genérica
-    createGenericSearchFunction(config) {
-        return (query, filters, page = 1, pageSize = 10) => {
-            const { searchBy, ...rest } = filters;
-            const params = {
-                [config.queryParam || 'q']: query,
-                [config.searchByParam || 'searchBy']: searchBy,
-                [config.pageParam || 'page']: page,
-                [config.pageSizeParam || 'pageSize']: pageSize,
-                ...rest,
-            };
-            return config.search(params).pipe(map(response => {
-                if (config.responseMapper) {
-                    return config.responseMapper(response);
-                }
-                // Mapper por defecto
-                const items = response.data || response.items || response;
-                const totalRecords = response.totalRecords || response.totalCount || response.total || 0;
-                return {
-                    items,
-                    totalCount: totalRecords,
-                    hasMore: response.hasMore || false,
-                };
-            }));
-        };
-    }
-    // Función para crear datos de ejemplo/mock específicos del wrapper
-    createMockData() {
-        return [
-            {
-                id: 1,
-                name: 'iPhone 14 Pro 128GB',
-                description: 'Smartphone Apple con chip A16 Bionic y cámara Pro',
-                code: 'IP14P-128',
-                barcode: '1234567890123',
-                auxCode: 'APL-IP14P-128',
-                stock: 15,
-                category: 'Smartphones',
-                brand: 'Apple',
-                unit: 'unidad',
-                prices: [
-                    {
-                        id: 1,
-                        type: 'retail',
-                        label: 'Público',
-                        value: 999,
-                        currency: 'USD',
-                        includesTax: true,
-                        isDefault: true,
-                        isActive: true,
-                    },
-                    {
-                        id: 2,
-                        type: 'wholesale',
-                        label: 'Mayorista',
-                        value: 850,
-                        currency: 'USD',
-                        minQuantity: 5,
-                        includesTax: false,
-                        isActive: true,
-                    },
-                    {
-                        id: 3,
-                        type: 'vip',
-                        label: 'VIP',
-                        value: 899,
-                        currency: 'USD',
-                        includesTax: true,
-                        isActive: true,
-                    },
-                    {
-                        id: 4,
-                        type: 'promotional',
-                        label: 'Black Friday',
-                        value: 749,
-                        currency: 'USD',
-                        validFrom: new Date('2024-11-24'),
-                        validTo: new Date('2024-11-30'),
-                        includesTax: true,
-                        isActive: true,
-                    },
-                ],
-            },
-            {
-                id: 2,
-                name: 'Samsung Galaxy S23 256GB',
-                description: 'Flagship Android con cámara de 200MP',
-                code: 'SGS23-256',
-                barcode: '2345678901234',
-                auxCode: 'SAM-GS23-256',
-                stock: 0,
-                category: 'Smartphones',
-                brand: 'Samsung',
-                unit: 'unidad',
-                images: [
-                    {
-                        id: 1,
-                        url: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400',
-                        thumbnailUrl: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=200',
-                        alt: 'Samsung Galaxy S23 frontal',
-                        type: 'main',
-                        isPrimary: true,
-                        order: 1,
-                    },
-                    {
-                        id: 2,
-                        url: 'https://images.unsplash.com/photo-1574755393849-623942496936?w=400',
-                        thumbnailUrl: 'https://images.unsplash.com/photo-1574755393849-623942496936?w=200',
-                        alt: 'Samsung Galaxy S23 trasero',
-                        type: 'gallery',
-                        order: 2,
-                    },
-                ],
-                badges: [{ type: 'new', text: 'NUEVO' }, { type: 'bestseller' }],
-                prices: [
-                    {
-                        id: 5,
-                        type: 'retail',
-                        label: 'Público',
-                        value: 799,
-                        currency: 'USD',
-                        includesTax: true,
-                        isDefault: true,
-                        isActive: true,
-                    },
-                    {
-                        id: 6,
-                        type: 'wholesale',
-                        label: 'Mayorista',
-                        value: 679,
-                        currency: 'USD',
-                        minQuantity: 3,
-                        includesTax: false,
-                        isActive: true,
-                    },
-                ],
-            },
-        ];
-    }
-    // Métodos específicos para diferentes tipos de búsqueda
-    searchProducts(query, filters = {}) {
-        const defaultFilters = {
-            searchBy: 'description',
-            stockFilter: 'all',
-            ...filters,
-        };
-        const mockData = this.createMockData();
-        return this.searchLocal(mockData, query, defaultFilters, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG);
-    }
-    // Crear configuración específica para diferentes casos de uso
-    createProductSearchConfig() {
-        return this.mergeConfig({
-            placeholder: 'Buscar productos...',
-            enableStockFilter: true,
-            enableFooterActions: true,
-            sectionTitle: 'Productos',
-            searchFields: [
-                { value: 'description', label: 'Descripción', property: 'description' },
-                { value: 'code', label: 'Código', property: 'code' },
-                { value: 'barcode', label: 'Código de Barras', property: 'barcode' },
-                { value: 'auxCode', label: 'Código Auxiliar', property: 'auxCode' },
-            ],
-        });
-    }
-    createCustomerSearchConfig() {
-        return this.mergeConfig({
-            placeholder: 'Buscar clientes...',
-            enableStockFilter: false,
-            enableFooterActions: false,
-            sectionTitle: 'Clientes',
-            searchFields: [
-                { value: 'name', label: 'Nombre', property: 'name' },
-                { value: 'email', label: 'Email', property: 'email' },
-                { value: 'phone', label: 'Teléfono', property: 'phone' },
-                { value: 'document', label: 'Documento', property: 'document' },
-            ],
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AutocompleteWrapperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AutocompleteWrapperService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AutocompleteWrapperService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
 /**
  * A theme toggle button component that allows users to switch between
  * light and dark modes. Follows WAI-ARIA best practices for toggle buttons.
@@ -2075,489 +1835,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     }, template: "<button\n  mat-icon-button\n  type=\"button\"\n  (click)=\"toggleDarkMode()\"\n  [attr.aria-label]=\"currentLabel()\"\n  [attr.aria-pressed]=\"isDarkMode()\"\n  [matTooltip]=\"currentLabel()\"\n  [attr.data-testid]=\"testId() || null\"\n>\n  <mat-icon>{{ currentIcon() }}</mat-icon>\n</button>\n", styles: [".acp-theme-toggle{display:inline-block}\n"] }]
         }], propDecorators: { lightModeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "lightModeIcon", required: false }] }], darkModeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkModeIcon", required: false }] }], lightModeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lightModeLabel", required: false }] }], darkModeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkModeLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }] } });
 
-class Pagination {
-    totalRecords;
-    pageSize;
-    pageIndex;
-    pageSizeOptions;
-    hidePageSize;
-    showPageSizeOptions;
-    showFirstLastButtons;
-    disabled;
-    /**
-     * @param pageIndex Current page index (0-based for MatPaginator compatibility)
-     * @param pageSize Number of records per page
-     * @param totalRecords Total number of records
-     * @param pageSizeOptions Available page size options
-     * @param options Display and behavior options
-     */
-    constructor(pageIndex = 0, // MatPaginator starts at 0
-    pageSize = 25, totalRecords = 0, pageSizeOptions = [25, 50, 75, 100], options = {}) {
-        this.pageIndex = pageIndex;
-        this.pageSize = pageSize;
-        this.totalRecords = totalRecords;
-        this.pageSizeOptions = pageSizeOptions;
-        this.hidePageSize = options.hidePageSize ?? false;
-        this.showPageSizeOptions = options.showPageSizeOptions ?? true;
-        this.showFirstLastButtons = options.showFirstLastButtons ?? true;
-        this.disabled = options.disabled ?? false;
-    }
-    /**
-     * Calculates the total number of pages.
-     */
-    getTotalPages() {
-        return Math.ceil(this.totalRecords / this.pageSize);
-    }
-    /**
-     * Handles page event similar to Angular Material example.
-     * @param event MatPaginator PageEvent
-     */
-    handlePageEvent(event) {
-        this.totalRecords = event.length;
-        this.pageSize = event.pageSize;
-        this.pageIndex = event.pageIndex;
-    }
-}
-
-class ReusableAutocompleteComponent {
-    static inputIdCounter = 0;
-    inputId = `acp-autocomplete-search-input-${++ReusableAutocompleteComponent.inputIdCounter}`;
-    dataSource = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ [])); // Para búsqueda local
-    config = AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG;
-    itemTemplate = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
-    searchFunction = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "searchFunction" }] : /* istanbul ignore next */ []));
-    notFoundTemplate = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "notFoundTemplate" }] : /* istanbul ignore next */ []));
-    overlayWidth = input('auto', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "overlayWidth" }] : /* istanbul ignore next */ []));
-    overlayMaxHeight = input('400px', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "overlayMaxHeight" }] : /* istanbul ignore next */ []));
-    itemSelected = output();
-    searchChanged = output();
-    searchRequested = output(); // Nuevo evento
-    pageChanged = output();
-    filterChanged = output();
-    advancedSearchClicked = output();
-    allResultsClicked = output();
-    createClicked = output();
-    searchInput = viewChild.required('searchInput');
-    historyListElement = viewChild('historyListElement', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "historyListElement" }] : /* istanbul ignore next */ []));
-    resultsListElement = viewChild('resultsListElement', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resultsListElement" }] : /* istanbul ignore next */ []));
-    // State
-    query = '';
-    isLoading = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
-    overlayOpen = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "overlayOpen" }] : /* istanbul ignore next */ []));
-    selectedIndex = signal(-1, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
-    currentPage = signal(1, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
-    filteredItems = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
-    historyList = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "historyList" }] : /* istanbul ignore next */ []));
-    totalCount = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "totalCount" }] : /* istanbul ignore next */ []));
-    // Filters
-    filters = {
-        searchBy: 'name',
-        stockFilter: 'all',
-    };
-    // Computed properties
-    isHistoryVisible = computed(() => {
-        return this.query.length < (this.config.minSearchLength || 2) && this.historyList().length > 0;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isHistoryVisible" }] : /* istanbul ignore next */ []));
-    totalItems = computed(() => this.filteredItems().length, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
-    totalPages = computed(() => {
-        const total = this.totalCount();
-        return total > 0 ? Math.ceil(total / (this.config.itemsPerPage || 10)) : 1;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
-    currentPageItems = computed(() => {
-        return this.filteredItems();
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentPageItems" }] : /* istanbul ignore next */ []));
-    startItem = computed(() => {
-        const total = this.totalItems();
-        if (total === 0)
-            return 0;
-        return (this.currentPage() - 1) * (this.config.itemsPerPage || 10) + 1;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "startItem" }] : /* istanbul ignore next */ []));
-    endItem = computed(() => {
-        const total = this.totalItems();
-        const calculated = this.currentPage() * (this.config.itemsPerPage || 10);
-        return Math.min(calculated, total);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "endItem" }] : /* istanbul ignore next */ []));
-    sectionTitle = computed(() => {
-        const total = this.totalItems();
-        return `Resultados (${total})`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "sectionTitle" }] : /* istanbul ignore next */ []));
-    isNoResults = computed(() => {
-        return (this.totalItems() === 0 &&
-            !this.isLoading() &&
-            this.query.length >= (this.config.minSearchLength || 2));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isNoResults" }] : /* istanbul ignore next */ []));
-    // Private
-    destroy$ = new Subject();
-    searchSubject = new Subject();
-    autocompleteService = inject(AutocompleteWrapperService);
-    ngOnInit() {
-        this.mergeDefaultConfig();
-        this.setupSearch();
-        this.loadHistory();
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    mergeDefaultConfig() {
-        this.config = this.autocompleteService.mergeConfig(this.config);
-        this.filters.searchBy = this.config.searchFields?.[0]?.value || 'name';
-        this.filters.stockFilter = this.config.stockOptions?.[0]?.value || 'all';
-    }
-    setupSearch() {
-        this.filteredItems.set([]);
-        this.searchSubject
-            .pipe(debounceTime(this.config.debounceTime || 300), 
-        // distinctUntilChanged(),
-        //  distinctUntilChanged((prev, curr) => {
-        //    console.log(prev);
-        //    console.log(curr);
-        //      return  prev.query === curr.query &&
-        //        JSON.stringify(prev.filters) === JSON.stringify(curr.filters) &&
-        //        prev.page === curr.page
-        //
-        //    }
-        //
-        //  ),
-        takeUntil(this.destroy$), switchMap(({ query }) => this.performSearch(query)))
-            .subscribe(result => {
-            this.filteredItems.set(result.items);
-            this.totalCount.set(result.totalCount);
-            this.isLoading.set(false);
-        });
-    }
-    performSearch(query) {
-        if (query.length < (this.config.minSearchLength || 2)) {
-            return of({ items: [], totalCount: 0 });
-        }
-        // ESTRATEGIA A: Función de búsqueda personalizada
-        const searchFunction = this.searchFunction();
-        if (searchFunction) {
-            return searchFunction(query, this.filters, this.currentPage(), this.config.itemsPerPage || 10).pipe(catchError$1(() => of({ items: [], totalCount: 0 })));
-        }
-        // ESTRATEGIA B: Emit evento para que el padre maneje
-        if (this.config.searchMode === 'remote') {
-            this.searchRequested.emit({
-                query,
-                filters: this.filters,
-                page: this.currentPage(),
-            });
-            return of({ items: [], totalCount: 0 }); // El padre actualizará los datos
-        }
-        // ESTRATEGIA C: Búsqueda local (fallback)
-        return this.autocompleteService.searchLocal(this.dataSource(), query, this.filters, this.config);
-    }
-    loadHistory() {
-        this.autocompleteService.history$.pipe(takeUntil(this.destroy$)).subscribe(history => {
-            this.historyList.set(history);
-        });
-    }
-    searchSubjectNext() {
-        this.searchSubject.next({
-            query: this.query,
-            filters: this.filters,
-            page: this.currentPage(),
-        });
-    }
-    // Event Handlers
-    onInput(event) {
-        const target = event.target;
-        this.query = target.value;
-        this.selectedIndex.set(-1);
-        this.currentPage.set(1);
-        if (this.query.length >= (this.config.minSearchLength || 2)) {
-            this.isLoading.set(true);
-            this.searchSubjectNext();
-        }
-        else {
-            this.filteredItems.set([]);
-            this.isLoading.set(false);
-        }
-        this.showOverlay();
-        this.searchChanged.emit(this.query);
-    }
-    onKeyDown(event) {
-        const currentList = this.isHistoryVisible() ? this.historyList() : this.currentPageItems();
-        const maxIndex = currentList.length - 1;
-        switch (event.key) {
-            case 'ArrowDown':
-                this.handleArrowDown(maxIndex, event);
-                break;
-            case 'ArrowUp':
-                this.handleArrowUp(maxIndex, event);
-                break;
-            case 'Enter':
-                this.handleEnter(currentList, maxIndex, event);
-                break;
-            case 'Escape':
-                this.handleEscape(event);
-                break;
-            case 'PageDown':
-                this.handlePageDown(event);
-                break;
-            case 'PageUp':
-                this.handlePageUp(event);
-                break;
-        }
-    }
-    handleArrowDown(maxIndex, event) {
-        event?.preventDefault();
-        if (maxIndex >= 0) {
-            const nextIndex = this.selectedIndex() < maxIndex ? this.selectedIndex() + 1 : 0;
-            this.selectedIndex.set(nextIndex);
-            this.scrollToSelected();
-        }
-    }
-    handleArrowUp(maxIndex, event) {
-        event?.preventDefault();
-        if (maxIndex >= 0) {
-            const prevIndex = this.selectedIndex() > 0 ? this.selectedIndex() - 1 : maxIndex;
-            this.selectedIndex.set(prevIndex);
-            this.scrollToSelected();
-        }
-    }
-    handleEnter(currentList, maxIndex, event) {
-        event?.preventDefault();
-        if (this.selectedIndex() >= 0 && this.selectedIndex() <= maxIndex) {
-            this.selectItem(currentList[this.selectedIndex()]);
-        }
-    }
-    handleEscape(event) {
-        event?.preventDefault();
-        this.hideOverlay();
-    }
-    handlePageDown(event) {
-        event?.preventDefault();
-        if (!this.isHistoryVisible() && this.config.enablePagination) {
-            this.goToNextPage();
-        }
-    }
-    handlePageUp(event) {
-        event?.preventDefault();
-        if (!this.isHistoryVisible() && this.config.enablePagination) {
-            this.goToPreviousPage();
-        }
-    }
-    onFilterChange() {
-        this.currentPage.set(1);
-        if (this.query.length >= (this.config.minSearchLength || 2)) {
-            this.performSearch(this.query);
-            this.searchSubjectNext();
-        }
-    }
-    // Método público para actualizar resultados desde el padre
-    updateSearchResults(result) {
-        this.filteredItems.set(result.items);
-        this.totalCount.set(result.totalCount);
-        this.isLoading.set(false);
-    }
-    // Overlay Methods
-    showOverlay() {
-        this.overlayOpen.set(true);
-    }
-    hideOverlay() {
-        this.overlayOpen.set(false);
-        this.selectedIndex.set(-1);
-    }
-    isType(item) {
-        return typeof item === 'string';
-    }
-    // Selection Methods
-    selectItem(item) {
-        if (this.config.clearInput) {
-            this.query = '';
-        }
-        else {
-            this.query = this.getItemDisplayText(item);
-        }
-        this.hideOverlay();
-        this.currentPage.set(1);
-        this.autocompleteService.addToHistory(item, this.config.maxHistoryItems);
-        this.itemSelected.emit(item);
-        setTimeout(() => {
-            this.searchInput()?.nativeElement?.focus();
-        }, 100);
-    }
-    clearSearch() {
-        this.query = '';
-        this.filteredItems.set([]);
-        this.selectedIndex.set(-1);
-        this.currentPage.set(1);
-        this.searchInput()?.nativeElement?.focus();
-        this.searchChanged.emit('');
-    }
-    // History Methods
-    removeHistoryItem(index, event) {
-        event.stopPropagation();
-        this.autocompleteService.removeFromHistory(index);
-    }
-    clearHistory() {
-        this.autocompleteService.clearHistory();
-    }
-    // Pagination Methods
-    goToPage(event) {
-        const target = event.target;
-        const page = Number.parseInt(target.value);
-        if (this.autocompleteService.isValidPage(page, this.totalPages())) {
-            this.currentPage.set(page);
-            this.selectedIndex.set(-1);
-            this.pageChanged.emit(page);
-            this.searchSubjectNext();
-        }
-        else {
-            target.value = this.currentPage().toString();
-        }
-    }
-    goToFirstPage() {
-        if (this.currentPage() !== 1) {
-            this.currentPage.set(1);
-            this.selectedIndex.set(-1);
-            this.pageChanged.emit(1);
-            this.searchSubjectNext();
-        }
-    }
-    goToPreviousPage() {
-        const prevPage = this.currentPage() - 1;
-        if (prevPage >= 1) {
-            this.currentPage.set(prevPage);
-            this.selectedIndex.set(-1);
-            this.pageChanged.emit(prevPage);
-            this.searchSubjectNext();
-        }
-    }
-    goToNextPage() {
-        const nextPage = this.currentPage() + 1;
-        if (nextPage <= this.totalPages()) {
-            this.currentPage.set(nextPage);
-            this.selectedIndex.set(-1);
-            this.pageChanged.emit(nextPage);
-            this.searchSubjectNext();
-        }
-    }
-    goToLastPage() {
-        const lastPage = this.totalPages();
-        if (this.currentPage() !== lastPage) {
-            this.currentPage.set(lastPage);
-            this.selectedIndex.set(-1);
-            this.pageChanged.emit(lastPage);
-            this.searchSubjectNext();
-        }
-    }
-    // Footer Actions
-    onCreateNew(_$event) {
-        this.createClicked.emit(this.query);
-    }
-    onAdvancedSearch() {
-        this.hideOverlay();
-        this.advancedSearchClicked.emit();
-    }
-    onShowAllResults() {
-        this.hideOverlay();
-        this.allResultsClicked.emit(this.query);
-    }
-    // Utility Methods
-    getItemDisplayText(item) {
-        return this.autocompleteService.getItemDisplayText(item);
-    }
-    noResultsText() {
-        return `No se encontraron resultados para "${this.query}"`;
-    }
-    scrollToSelected() {
-        const listElement = this.isHistoryVisible()
-            ? this.historyListElement()?.nativeElement
-            : this.resultsListElement()?.nativeElement;
-        if (listElement) {
-            const selectedElement = listElement.children[this.selectedIndex()];
-            if (selectedElement) {
-                selectedElement.scrollIntoView({
-                    block: 'nearest',
-                    behavior: 'smooth',
-                });
-            }
-        }
-    }
-    // Public API
-    getState() {
-        return {
-            query: this.query,
-            isLoading: this.isLoading(),
-            overlayOpen: this.overlayOpen(),
-            selectedIndex: this.selectedIndex(),
-            pagination: {
-                currentPage: this.currentPage(),
-                totalPages: this.totalPages(),
-                totalItems: this.totalItems(),
-                itemsPerPage: this.config.itemsPerPage || 10,
-                startItem: this.startItem(),
-                endItem: this.endItem(),
-                hasNextPage: this.currentPage() < this.totalPages(),
-                hasPreviousPage: this.currentPage() > 1,
-            },
-            hasResults: this.totalItems() > 0,
-            isHistoryVisible: this.isHistoryVisible(),
-            historyCount: this.historyList().length,
-            filters: this.filters,
-        };
-    }
-    setQuery(query) {
-        this.query = query;
-        this.currentPage.set(1);
-        if (query.length >= (this.config.minSearchLength || 2)) {
-            this.performSearch(query);
-            this.showOverlay();
-        }
-        else {
-            this.filteredItems.set([]);
-            if (query.length === 0) {
-                this.hideOverlay();
-            }
-        }
-        this.searchChanged.emit(query);
-    }
-    focus() {
-        this.searchInput()?.nativeElement?.focus();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ReusableAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ReusableAutocompleteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'acp-autocomplete-wrapper', imports: [
-                        MatIcon,
-                        NgTemplateOutlet,
-                        OverlayModule,
-                        MatProgressBarModule,
-                        MatProgressSpinner,
-                        FormsModule,
-                        MatIconButton,
-                    ], 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"] }]
-        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], config: [{
-                type: Input
-            }], 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 }] }] } });
-
 class AcpToObservablePipe {
     transform(value) {
         return isObservable(value) ? value : of(value);
@@ -3120,14 +2397,14 @@ class ColumnResize {
     }
     _listenForResizeActivity() {
         merge(this.eventDispatcher.overlayHandleActiveForCell.pipe(mapTo(undefined)), this.notifier.triggerResize.pipe(mapTo(undefined)), this.notifier.resizeCompleted.pipe(mapTo(undefined)))
-            .pipe(take(1), takeUntil$1(this.destroyed))
+            .pipe(take(1), takeUntil(this.destroyed))
             .subscribe(() => {
             this.setResized();
         });
     }
     _listenForHoverActivity() {
         this.eventDispatcher.headerRowHoveredOrActiveDistinct
-            .pipe(startWith(null), pairwise(), takeUntil$1(this.destroyed))
+            .pipe(startWith(null), pairwise(), takeUntil(this.destroyed))
             .subscribe(([previousRow, hoveredRow]) => {
             if (hoveredRow) {
                 hoveredRow.classList.add(HOVER_OR_ACTIVE_CLASS);
@@ -3674,7 +2951,7 @@ class Resizable {
     }
     _listenForRowHoverEvents() {
         const element = this.elementRef.nativeElement;
-        const takeUntilDestroyed = takeUntil$1(this.destroyed);
+        const takeUntilDestroyed = takeUntil(this.destroyed);
         this.eventDispatcher
             .resizeOverlayVisibleForHeaderRow(closest(element, HEADER_ROW_SELECTOR))
             .pipe(takeUntilDestroyed)
@@ -3692,7 +2969,7 @@ class Resizable {
         });
     }
     _listenForResizeEvents() {
-        const takeUntilDestroyed = takeUntil$1(this.destroyed);
+        const takeUntilDestroyed = takeUntil(this.destroyed);
         merge(this.resizeNotifier.resizeCanceled, this.resizeNotifier.triggerResize)
             .pipe(takeUntilDestroyed, filter(columnSize => columnSize.columnId === this.columnDef.name))
             .subscribe(({ size, previousSize, completeImmediately }) => {
@@ -3787,13 +3064,13 @@ class ResizeOverlayHandle {
     _listenForMouseEvents() {
         this.ngZone.runOutsideAngular(() => {
             this._observableFromEvent(this.elementRef.nativeElement, 'mouseenter')
-                .pipe(mapTo(this.resizeRef.origin.nativeElement), takeUntil$1(this.destroyed))
+                .pipe(mapTo(this.resizeRef.origin.nativeElement), takeUntil(this.destroyed))
                 .subscribe(cell => this.eventDispatcher.headerCellHovered.next(cell));
             this._observableFromEvent(this.elementRef.nativeElement, 'mouseleave')
-                .pipe(map$1(event => event.relatedTarget && closest(event.relatedTarget, HEADER_CELL_SELECTOR)), takeUntil$1(this.destroyed))
+                .pipe(map$1(event => event.relatedTarget && closest(event.relatedTarget, HEADER_CELL_SELECTOR)), takeUntil(this.destroyed))
                 .subscribe(cell => this.eventDispatcher.headerCellHovered.next(cell));
             this._observableFromEvent(this.elementRef.nativeElement, 'mousedown')
-                .pipe(takeUntil$1(this.destroyed))
+                .pipe(takeUntil(this.destroyed))
                 .subscribe(mousedownEvent => {
                 this._dragStarted(mousedownEvent);
             });
@@ -3815,16 +3092,16 @@ class ResizeOverlayHandle {
         let overshot = 0;
         this._cumulativeDeltaX = 0;
         this.updateResizeActive(true);
-        mouseup.pipe(takeUntil$1(merge(escape, this.destroyed))).subscribe(({ screenX }) => {
+        mouseup.pipe(takeUntil(merge(escape, this.destroyed))).subscribe(({ screenX }) => {
             this.styleScheduler.scheduleEnd(() => {
                 this._notifyResizeEnded(size, screenX !== startX);
             });
         });
-        escape.pipe(takeUntil$1(merge(mouseup, this.destroyed))).subscribe(() => {
+        escape.pipe(takeUntil(merge(mouseup, this.destroyed))).subscribe(() => {
             this._notifyResizeEnded(initialSize);
         });
         mousemove
-            .pipe(map$1(({ screenX }) => screenX), startWith(startX), distinctUntilChanged(), pairwise(), takeUntil$1(merge(mouseup, escape, this.destroyed)))
+            .pipe(map$1(({ screenX }) => screenX), startWith(startX), distinctUntilChanged(), pairwise(), takeUntil(merge(mouseup, escape, this.destroyed)))
             .subscribe(([prevX, currX]) => {
             let deltaX = currX - prevX;
             if (!this.resizeRef.liveUpdates) {
@@ -4383,7 +3660,7 @@ class DataGrid {
     /** Whether to hide the page size selection UI from the user. */
     hidePageSize = this._defaultOptions?.hidePageSize ?? false;
     /** Event emitted when the paginator changes the page size or page index. */
-    page = new EventEmitter();
+    page = output();
     /** The template for the pagination. */
     paginationTemplate;
     // ===== Sort =====
@@ -4406,16 +3683,16 @@ class DataGrid {
      */
     sortStart = this._defaultOptions?.sortStart ?? 'asc';
     /** Event emitted when the user changes either the active sort or sort direction. */
-    sortChange = new EventEmitter();
+    sortChange = output();
     // ===== Row =====
     /** Whether to use the row hover style. */
     rowHover = this._defaultOptions?.rowHover ?? false;
     /** Whether to use the row striped style. */
     rowStriped = this._defaultOptions?.rowStriped ?? false;
     /** Event emitted when the user clicks the row. */
-    rowClick = new EventEmitter();
+    rowClick = output();
     /** Event emitted when the user attempts to open a context menu. */
-    rowContextMenu = new EventEmitter();
+    rowContextMenu = output();
     // ===== Expandable Row =====
     expansionRowStates = [];
     /** Whether the row is expandable. */
@@ -4423,7 +3700,7 @@ class DataGrid {
     /** The template for the expandable row. */
     expansionTemplate;
     /** Event emitted when the user toggles the expandable row. */
-    expansionChange = new EventEmitter();
+    expansionChange = output();
     closeOthersOnExpand = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "closeOthersOnExpand" }] : /* istanbul ignore next */ []));
     // ===== Row Selection =====
@@ -4445,19 +3722,19 @@ class DataGrid {
     /** The selected row items. */
     rowSelected = [];
     /** Event emitted when the row is selected. */
-    rowSelectedChange = new EventEmitter();
-    checkboxKeyDown = new EventEmitter();
-    checkboxKeyUp = new EventEmitter();
-    checkboxKeyPress = new EventEmitter();
-    rowKeyDown = new EventEmitter();
-    rowKeyUp = new EventEmitter();
-    rowKeyPress = new EventEmitter();
+    rowSelectedChange = output();
+    checkboxKeyDown = output();
+    checkboxKeyUp = output();
+    checkboxKeyPress = output();
+    rowKeyDown = output();
+    rowKeyUp = output();
+    rowKeyPress = output();
     // ===== Cell Selection =====
     cellSelection = [];
     /** Whether the cell is selectable. */
     cellSelectable = this._defaultOptions?.cellSelectable ?? true;
     /** Event emitted when the cell is selected. */
-    cellSelectedChange = new EventEmitter();
+    cellSelectedChange = output();
     _selectedCell;
     // ===== Toolbar =====
     /** Whether to show the toolbar. */
@@ -4476,7 +3753,7 @@ class DataGrid {
     /** Whether the column is pinnable. */
     columnPinnable = this._defaultOptions?.columnPinnable ?? true;
     /** Event emitted when the column is hided or is sorted. */
-    columnChange = new EventEmitter();
+    columnChange = output();
     /** The options for the column pin list. */
     columnPinOptions = this._defaultOptions?.columnPinOptions ?? [];
     /** Whether to show the column menu button. */
@@ -4598,8 +3875,6 @@ class DataGrid {
             this.rowSelection = new SelectionModel(this.multiSelectable, this.rowSelected);
         }
         this.dataSource = new MatTableDataSource(this.data);
-        this.dataSource.paginator = this.pageOnFront ? this.paginator : null;
-        this.dataSource.sort = this.sortOnFront ? this.sort : null;
         // Only scroll top with data change
         if (changes['data']) {
             this.scrollTop(0);
@@ -4609,9 +3884,15 @@ class DataGrid {
         if (this.pageOnFront) {
             this.dataSource.paginator = this.paginator;
         }
+        else {
+            this.dataSource.paginator = null;
+        }
         if (this.sortOnFront) {
             this.dataSource.sort = this.sort;
         }
+        else {
+            this.dataSource.sort = null;
+        }
         if (this.rowDefs?.length > 0 && this.useContentRowTemplate) {
             this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));
         }
@@ -4893,9 +4174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             }], hidePageSize: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], page: [{
-                type: Output
-            }], paginationTemplate: [{
+            }], page: [{ type: i0.Output, args: ["page"] }], paginationTemplate: [{
                 type: Input
             }], sortOnFront: [{
                 type: Input,
@@ -4912,26 +4191,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 args: [{ transform: booleanAttribute }]
             }], sortStart: [{
                 type: Input
-            }], sortChange: [{
-                type: Output
-            }], rowHover: [{
+            }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], rowHover: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], rowStriped: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], rowClick: [{
-                type: Output
-            }], rowContextMenu: [{
-                type: Output
-            }], expandable: [{
+            }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowContextMenu: [{ type: i0.Output, args: ["rowContextMenu"] }], expandable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], expansionTemplate: [{
                 type: Input
-            }], expansionChange: [{
-                type: Output
-            }], closeOthersOnExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOthersOnExpand", required: false }] }], multiSelectable: [{
+            }], expansionChange: [{ type: i0.Output, args: ["expansionChange"] }], closeOthersOnExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOthersOnExpand", required: false }] }], multiSelectable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], multiSelectionWithClick: [{
@@ -4952,26 +4223,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 type: Input
             }], rowSelected: [{
                 type: Input
-            }], rowSelectedChange: [{
-                type: Output
-            }], checkboxKeyDown: [{
-                type: Output
-            }], checkboxKeyUp: [{
-                type: Output
-            }], checkboxKeyPress: [{
-                type: Output
-            }], rowKeyDown: [{
-                type: Output
-            }], rowKeyUp: [{
-                type: Output
-            }], rowKeyPress: [{
-                type: Output
-            }], cellSelectable: [{
+            }], rowSelectedChange: [{ type: i0.Output, args: ["rowSelectedChange"] }], checkboxKeyDown: [{ type: i0.Output, args: ["checkboxKeyDown"] }], checkboxKeyUp: [{ type: i0.Output, args: ["checkboxKeyUp"] }], checkboxKeyPress: [{ type: i0.Output, args: ["checkboxKeyPress"] }], rowKeyDown: [{ type: i0.Output, args: ["rowKeyDown"] }], rowKeyUp: [{ type: i0.Output, args: ["rowKeyUp"] }], rowKeyPress: [{ type: i0.Output, args: ["rowKeyPress"] }], cellSelectable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], cellSelectedChange: [{
-                type: Output
-            }], showToolbar: [{
+            }], cellSelectedChange: [{ type: i0.Output, args: ["cellSelectedChange"] }], showToolbar: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], toolbarTitle: [{
@@ -4989,9 +4244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             }], columnPinnable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], columnChange: [{
-                type: Output
-            }], columnPinOptions: [{
+            }], columnChange: [{ type: i0.Output, args: ["columnChange"] }], columnPinOptions: [{
                 type: Input
             }], showColumnMenuButton: [{
                 type: Input,
@@ -5104,14 +4357,14 @@ class KeyboardNavigationService {
         this.focusableElements.push(element);
         // Configurar eventos de teclado para este elemento
         fromEvent(element.element?.nativeElement, 'keydown')
-            .pipe(takeUntil$1(this.destroy$), filter(event => ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)))
+            .pipe(takeUntil(this.destroy$), filter(event => ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)))
             .subscribe(event => {
             event.preventDefault(); // Prevenir el comportamiento por defecto del navegador (scroll, etc.)
             this.handleKeyNavigation(event.key);
         });
         // Configurar eventos de foco para este elemento
         fromEvent(element.element?.nativeElement, 'focus')
-            .pipe(takeUntil$1(this.destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe(() => {
             const index = this.focusableElements.findIndex(e => e.element === element.element);
             this.currentFocusIndex.set(index);
@@ -8495,7 +7748,7 @@ class AcpDateRangeInput {
         this._dateOptions.set(options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpDateRangeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 });
+    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: i3.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: i3.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpDateRangeInput, decorators: [{
             type: Component,
@@ -8837,6 +8090,232 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 args: [{ transform: booleanAttribute }]
             }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
+const KPI_CARD_TREND_CONFIGS = {
+    up: {
+        icon: 'trending_up',
+        color: 'success',
+        ariaLabel: 'Trending up',
+    },
+    down: {
+        icon: 'trending_down',
+        color: 'error',
+        ariaLabel: 'Trending down',
+    },
+    neutral: {
+        icon: 'trending_flat',
+        color: 'info',
+        ariaLabel: 'Neutral trend',
+    },
+    none: {
+        icon: '',
+        color: 'neutral',
+        ariaLabel: '',
+    },
+};
+function formatValue(value, format) {
+    if (typeof value === 'string')
+        return value;
+    if (!format)
+        return value.toString();
+    switch (format) {
+        case 'currency':
+            return new Intl.NumberFormat('en-US', {
+                style: 'currency',
+                currency: 'USD',
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 0,
+            }).format(value);
+        case 'percent':
+            return `${value.toFixed(1)}%`;
+        case 'number':
+            return new Intl.NumberFormat('en-US').format(value);
+        case 'decimal':
+            return value.toFixed(2);
+        default:
+            return value.toString();
+    }
+}
+
+class AcpKpiCard {
+    // Content
+    title = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    description = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
+    footer = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "footer" }] : /* istanbul ignore next */ []));
+    // Styling
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    // Icons & Avatar
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    svgIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "svgIcon" }] : /* istanbul ignore next */ []));
+    avatar = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "avatar" }] : /* istanbul ignore next */ []));
+    avatarInitials = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "avatarInitials" }] : /* istanbul ignore next */ []));
+    // Trend & Metrics
+    trend = input('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []));
+    percentage = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "percentage" }] : /* istanbul ignore next */ []));
+    percentageFormat = input('percent', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "percentageFormat" }] : /* istanbul ignore next */ []));
+    // Progress
+    progress = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "progress" }] : /* istanbul ignore next */ []));
+    progressColor = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progressColor" }] : /* istanbul ignore next */ []));
+    // States
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    // Navigation
+    routerLink = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
+    href = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    // Aria
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // Tooltip
+    tooltip = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    // Outputs
+    clicked = output();
+    actionClicked = output();
+    // Internal state for hover
+    isHovered = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHovered" }] : /* istanbul ignore next */ []));
+    // Content children
+    iconTemplate = contentChild('icon', { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    avatarTemplate = contentChild('avatar', { ...(ngDevMode ? { debugName: "avatarTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    footerTemplate = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    actionsTemplate = contentChild('actions', { ...(ngDevMode ? { debugName: "actionsTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    // Computed properties
+    isTrending = computed(() => this.trend() !== 'none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTrending" }] : /* istanbul ignore next */ []));
+    trendConfig = computed(() => KPI_CARD_TREND_CONFIGS[this.trend()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trendConfig" }] : /* istanbul ignore next */ []));
+    // Effective icon shows trend icon if trending, otherwise shows provided icon
+    effectiveIcon = computed(() => {
+        if (this.isTrending())
+            return this.trendConfig().icon;
+        return this.icon();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveIcon" }] : /* istanbul ignore next */ []));
+    // Trend color is only for the trend indicator (icon and percentage)
+    trendColor = computed(() => {
+        if (this.isTrending())
+            return this.trendConfig().color;
+        return this.color();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trendColor" }] : /* istanbul ignore next */ []));
+    hasHeader = computed(() => !!(this.title() || this.subtitle() || this.icon() || this.avatar()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
+    hasFooter = computed(() => !!(this.footer() || this.footerTemplate() || this.progress() !== undefined), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+    hasActions = computed(() => !!this.actionsTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const classes = [
+            'acp-kpi-card',
+            `acp-kpi-card--${this.variant()}`,
+            `acp-kpi-card--${this.color()}`,
+            `acp-kpi-card--${this.size()}`,
+        ];
+        if (this.clickable())
+            classes.push('acp-kpi-card--clickable');
+        if (this.disabled())
+            classes.push('acp-kpi-card--disabled');
+        if (this.loading())
+            classes.push('acp-kpi-card--loading');
+        if (this.selected())
+            classes.push('acp-kpi-card--selected');
+        return classes.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    onCardClick() {
+        if (!this.disabled() && this.clickable()) {
+            this.clicked.emit();
+        }
+    }
+    onActionClick(action, event) {
+        event.stopPropagation();
+        this.actionClicked.emit(action);
+    }
+    onMouseEnter() {
+        if (this.clickable()) {
+            this.isHovered.set(true);
+        }
+    }
+    onMouseLeave() {
+        this.isHovered.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpKpiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpKpiCard, isStandalone: true, selector: "acp-kpi-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: true, isRequired: false, transformFunction: null }, percentageFormat: { classPropertyName: "percentageFormat", publicName: "percentageFormat", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressColor: { classPropertyName: "progressColor", publicName: "progressColor", 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 }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", actionClicked: "actionClicked" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "avatarTemplate", first: true, predicate: ["avatar"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actions"], descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["acpKpiCard"], ngImport: i0, template: "<mat-card\n  class=\"acp-kpi-card__card\"\n  [routerLink]=\"routerLink()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [matTooltip]=\"tooltip()\"\n  [matTooltipDisabled]=\"!tooltip()\"\n  (click)=\"onCardClick()\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n>\n  <!-- Loading Skeleton -->\n  @if (loading()) {\n  <div class=\"acp-kpi-card__skeleton\">\n    <div class=\"acp-kpi-card__skeleton-header\"></div>\n    <div class=\"acp-kpi-card__skeleton-value\"></div>\n    <div class=\"acp-kpi-card__skeleton-text\"></div>\n  </div>\n  } @else {\n  <!-- Header -->\n  @if (hasHeader()) {\n  <mat-card-header class=\"acp-kpi-card__header\">\n    <div class=\"acp-kpi-card__header-content\">\n      <!-- Icon or Avatar -->\n      <div class=\"acp-kpi-card__icon-container\">\n        @if (iconTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n        } @else if (svgIcon()) {\n        <mat-icon class=\"acp-kpi-card__icon\" [svgIcon]=\"svgIcon()!\" aria-hidden=\"true\"></mat-icon>\n        } @else if (effectiveIcon()) {\n        <mat-icon class=\"acp-kpi-card__icon\" aria-hidden=\"true\">{{ effectiveIcon() }}</mat-icon>\n        } @else if (avatarTemplate()) {\n        <div class=\"acp-kpi-card__avatar\">\n          <ng-container [ngTemplateOutlet]=\"avatarTemplate()!\"></ng-container>\n        </div>\n        } @else if (avatar()) {\n        <img class=\"acp-kpi-card__avatar-image\" [src]=\"avatar()\" [alt]=\"title() || 'Avatar'\" />\n        } @else if (avatarInitials()) {\n        <div class=\"acp-kpi-card__avatar-initials\">{{ avatarInitials() }}</div>\n        }\n      </div>\n\n      <!-- Title & Subtitle -->\n      <div class=\"acp-kpi-card__title-container\">\n        @if (title()) {\n        <h3 class=\"acp-kpi-card__title\">{{ title() }}</h3>\n        } @if (subtitle()) {\n        <p class=\"acp-kpi-card__subtitle\">{{ subtitle() }}</p>\n        }\n      </div>\n    </div>\n\n    <!-- Menu Button (optional) - Only show if actions template exists -->\n    @if (hasActions()) {\n    <button\n      mat-icon-button\n      [matMenuTriggerFor]=\"menu\"\n      class=\"acp-kpi-card__menu-button\"\n      aria-label=\"More options\"\n    >\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <mat-menu #menu=\"matMenu\" class=\"acp-kpi-card__menu\">\n      <ng-container [ngTemplateOutlet]=\"actionsTemplate()!\"></ng-container>\n    </mat-menu>\n    }\n  </mat-card-header>\n  }\n\n  <!-- Content -->\n  <mat-card-content class=\"acp-kpi-card__content\">\n    <!-- Main Value -->\n    @if (value()) {\n    <div class=\"acp-kpi-card__value-section\">\n      <div class=\"acp-kpi-card__value\">{{ value() }}</div>\n\n      <!-- Percentage & Trend -->\n      @if (percentage() !== undefined) {\n      <div class=\"acp-kpi-card__metric\">\n        @if (isTrending()) {\n        <mat-icon class=\"acp-kpi-card__trend-icon\" [attr.aria-label]=\"trendConfig().ariaLabel\">\n          {{ trendConfig().icon }}\n        </mat-icon>\n        }\n        <span class=\"acp-kpi-card__percentage\">\n          {{ percentageFormat() === 'percent' ? (percentage() + '%') : percentage() }}\n        </span>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Description -->\n    @if (description()) {\n    <p class=\"acp-kpi-card__description\">{{ description() }}</p>\n    }\n\n    <!-- Progress Bar -->\n    @if (progress() !== undefined) {\n    <mat-progress-bar\n      class=\"acp-kpi-card__progress\"\n      mode=\"determinate\"\n      [value]=\"progress()\"\n      [color]=\"progressColor()\"\n    ></mat-progress-bar>\n    }\n  </mat-card-content>\n\n  <!-- Footer -->\n  @if (hasFooter()) {\n  <mat-divider></mat-divider>\n  <div class=\"acp-kpi-card__footer\">\n    @if (footerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"footerTemplate()!\"></ng-container>\n    } @else if (footer()) {\n    <p class=\"acp-kpi-card__footer-text\">{{ footer() }}</p>\n    }\n  </div>\n  } }\n</mat-card>\n", styles: [".acp-kpi-card{--acp-kpi-card-bg: var(--acp-kpi-card-primary-bg, var(--mat-sys-primary));--acp-kpi-card-fg: var(--acp-kpi-card-primary-color, var(--mat-sys-on-primary));display:flex;vertical-align:middle;width:100%;max-width:100%}.acp-kpi-card__card{width:100%;display:flex;flex-direction:column;border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;background-color:#fff}.acp-kpi-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px;gap:12px}.acp-kpi-card__header-content{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.acp-kpi-card__icon-container{display:flex;align-items:center;justify-content:center;flex-shrink:0}.acp-kpi-card__icon{font-size:24px;width:24px;height:24px;color:var(--acp-kpi-card-fg)}.acp-kpi-card__avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acp-kpi-card-bg) 30%,transparent);color:var(--acp-kpi-card-fg);font-weight:500;font-size:14px;flex-shrink:0}.acp-kpi-card__avatar-image{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}.acp-kpi-card__avatar-initials{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acp-kpi-card-bg) 30%,transparent);color:var(--acp-kpi-card-fg);font-weight:500;font-size:14px;flex-shrink:0}.acp-kpi-card__title-container{flex:1;min-width:0}.acp-kpi-card__title{margin:0;font-size:14px;font-weight:500;letter-spacing:.25px;color:var(--acp-kpi-card-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-kpi-card__subtitle{margin:2px 0 0;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-kpi-card__menu-button{flex-shrink:0;opacity:.7;transition:opacity .2s ease-in-out}.acp-kpi-card__menu-button:hover{opacity:1}.acp-kpi-card__menu-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.acp-kpi-card__menu{will-change:transform}.acp-kpi-card__content{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px}.acp-kpi-card__value-section{display:flex;align-items:baseline;gap:8px}.acp-kpi-card__value{font-size:28px;font-weight:600;letter-spacing:-.5px;color:var(--acp-kpi-card-fg);line-height:1.2}.acp-kpi-card__metric{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:500;letter-spacing:.25px;color:rgba(var(--acp-kpi-card-fg),.8)}.acp-kpi-card__trend-icon{font-size:16px;width:16px;height:16px}.acp-kpi-card__percentage{white-space:nowrap}.acp-kpi-card.acp-kpi-card--success .acp-kpi-card__metric{color:var(--acp-kpi-card-success-color, light-dark(#ffffff, #013a00))}.acp-kpi-card.acp-kpi-card--success-light .acp-kpi-card__metric{color:var(--acp-kpi-card-success-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--warning .acp-kpi-card__metric{color:var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400))}.acp-kpi-card.acp-kpi-card--warning-light .acp-kpi-card__metric{color:var(--acp-kpi-card-warning-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--error .acp-kpi-card__metric{color:var(--acp-kpi-card-error-color, var(--mat-sys-on-error))}.acp-kpi-card.acp-kpi-card--error-light .acp-kpi-card__metric{color:var(--acp-kpi-card-error-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--info .acp-kpi-card__metric{color:var(--acp-kpi-card-info-color, light-dark(#ffffff, #002f65))}.acp-kpi-card.acp-kpi-card--info-light .acp-kpi-card__metric{color:var(--acp-kpi-card-info-light-color, var(--mat-sys-on-surface))}.acp-kpi-card__description{margin:0;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6);line-height:1.5}.acp-kpi-card__progress{height:4px;border-radius:2px;background-color:rgba(var(--acp-kpi-card-fg),.12)}.acp-kpi-card__footer{padding:12px 16px;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6)}.acp-kpi-card__footer-text{margin:0}.acp-kpi-card__skeleton{padding:16px;display:flex;flex-direction:column;gap:12px}.acp-kpi-card__skeleton-header{width:60%;height:16px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}.acp-kpi-card__skeleton-value{width:40%;height:28px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}.acp-kpi-card__skeleton-text{width:80%;height:12px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.acp-kpi-card.acp-kpi-card--primary{--acp-kpi-card-bg: var(--acp-kpi-card-primary-bg, var(--mat-sys-primary));--acp-kpi-card-fg: var(--acp-kpi-card-primary-color, var(--mat-sys-on-primary))}.acp-kpi-card.acp-kpi-card--secondary{--acp-kpi-card-bg: var(--acp-kpi-card-secondary-bg, var(--mat-sys-secondary));--acp-kpi-card-fg: var(--acp-kpi-card-secondary-color, var(--mat-sys-on-secondary))}.acp-kpi-card.acp-kpi-card--success{--acp-kpi-card-bg: var(--acp-kpi-card-success-bg, light-dark(#038b00, #03c700));--acp-kpi-card-fg: var(--acp-kpi-card-success-color, light-dark(#ffffff, #013a00))}.acp-kpi-card.acp-kpi-card--success-light{--acp-kpi-card-bg: var(--acp-kpi-card-success-light-bg, light-dark(#cbffb8, #014600));--acp-kpi-card-fg: var(--acp-kpi-card-success-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--warning{--acp-kpi-card-bg: var(--acp-kpi-card-warning-bg, light-dark(#e37100, #ffb787));--acp-kpi-card-fg: var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400))}.acp-kpi-card.acp-kpi-card--warning-light{--acp-kpi-card-bg: var(--acp-kpi-card-warning-light-bg, light-dark(#ffede4, #612d00));--acp-kpi-card-fg: var(--acp-kpi-card-warning-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--error{--acp-kpi-card-bg: var(--acp-kpi-card-error-bg, var(--mat-sys-error));--acp-kpi-card-fg: var(--acp-kpi-card-error-color, var(--mat-sys-on-error))}.acp-kpi-card.acp-kpi-card--error-light{--acp-kpi-card-bg: var(--acp-kpi-card-error-light-bg, light-dark(#ffedea, #7e0100));--acp-kpi-card-fg: var(--acp-kpi-card-error-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--info{--acp-kpi-card-bg: var(--acp-kpi-card-info-bg, light-dark(#0074e9, #7cabff));--acp-kpi-card-fg: var(--acp-kpi-card-info-color, light-dark(#ffffff, #002f65))}.acp-kpi-card.acp-kpi-card--info-light{--acp-kpi-card-bg: var(--acp-kpi-card-info-light-bg, light-dark(#ecf0ff, #003a7a));--acp-kpi-card-fg: var(--acp-kpi-card-info-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--neutral{--acp-kpi-card-bg: var(--acp-kpi-card-neutral-bg, var(--mat-sys-surface-variant));--acp-kpi-card-fg: var(--acp-kpi-card-neutral-color, var(--mat-sys-on-surface-variant))}.acp-kpi-card.acp-kpi-card--white{--acp-kpi-card-bg: #ffffff;--acp-kpi-card-fg: #1f2937}.acp-kpi-card.acp-kpi-card--custom{--acp-kpi-card-bg: var( --acp-kpi-card-custom-bg, var(--acp-kpi-card-custom-bg, var(--mat-sys-surface-container)) );--acp-kpi-card-fg: var( --acp-kpi-card-custom-fg, var(--acp-kpi-card-custom-color, var(--mat-sys-on-surface)) )}.acp-kpi-card.acp-kpi-card--default .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);border:1px solid rgba(var(--acp-kpi-card-fg),.12)}.acp-kpi-card.acp-kpi-card--elevated .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);box-shadow:0 3px 8px #00000014,0 1px 3px #0000000a}.acp-kpi-card.acp-kpi-card--outlined .acp-kpi-card__card{background:transparent;color:var(--acp-kpi-card-fg);border:2px solid rgba(var(--acp-kpi-card-fg),.2)}.acp-kpi-card.acp-kpi-card--filled .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg)}.acp-kpi-card.acp-kpi-card--tonal .acp-kpi-card__card{background:color-mix(in srgb,var(--acp-kpi-card-bg) 12%,transparent);color:var(--acp-kpi-card-fg);border:1px solid rgba(var(--acp-kpi-card-fg),.08)}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card{cursor:pointer}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:hover{box-shadow:0 6px 12px #0000001a,0 2px 4px #0000000f;transform:translateY(-1px)}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:active{transform:translateY(0);box-shadow:0 2px 4px #00000014}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:focus-visible{outline:2px solid currentColor;outline-offset:2px}.acp-kpi-card.acp-kpi-card--disabled .acp-kpi-card__card{opacity:.6;cursor:not-allowed;pointer-events:none}.acp-kpi-card.acp-kpi-card--selected .acp-kpi-card__card{border:2px solid var(--acp-kpi-card-fg)}.acp-kpi-card.acp-kpi-card--loading .acp-kpi-card__card{pointer-events:none;opacity:.8}@media(max-width:768px){.acp-kpi-card__header,.acp-kpi-card__content{padding:12px}.acp-kpi-card__value{font-size:24px}.acp-kpi-card__title{font-size:13px}}@media(prefers-reduced-motion:reduce){.acp-kpi-card__card{transition:none}.acp-kpi-card__skeleton-header,.acp-kpi-card__skeleton-value,.acp-kpi-card__skeleton-text{animation:none}}@media(prefers-contrast:more){.acp-kpi-card__card{border-width:2px}}@media(max-width:768px){.acp-kpi-card__header,.acp-kpi-card__content{padding:12px;gap:8px}.acp-kpi-card__footer{padding:12px}.acp-kpi-card__icon{font-size:20px;width:20px;height:20px}.acp-kpi-card__avatar,.acp-kpi-card__avatar-image,.acp-kpi-card__avatar-initials{width:32px;height:32px;font-size:12px}.acp-kpi-card__title{font-size:13px}.acp-kpi-card__subtitle{font-size:11px}.acp-kpi-card__value{font-size:24px}}.acp-kpi-card__card.acp-kpi-card--xs{min-height:96px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__content{padding:8px;gap:6px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__footer{padding:8px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__icon{font-size:16px;width:16px;height:16px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar-initials{width:28px;height:28px;font-size:11px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__title{font-size:12px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__subtitle{font-size:10px;margin-top:1px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__value{font-size:18px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__percentage{font-size:10px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__description{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm{min-height:128px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__content{padding:12px;gap:8px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__footer{padding:12px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__icon{font-size:20px;width:20px;height:20px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar-initials{width:32px;height:32px;font-size:12px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__title{font-size:13px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__subtitle{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__value{font-size:22px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__percentage{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__description{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md{min-height:160px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__content{padding:16px;gap:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__footer{padding:16px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__icon{font-size:24px;width:24px;height:24px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar-initials{width:40px;height:40px;font-size:14px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__title{font-size:14px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__subtitle{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__value{font-size:28px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__percentage{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__description{font-size:13px}.acp-kpi-card__card.acp-kpi-card--lg{min-height:224px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__content{padding:20px;gap:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__footer{padding:20px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__icon{font-size:32px;width:32px;height:32px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar-initials{width:48px;height:48px;font-size:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__title{font-size:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__subtitle{font-size:13px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__value{font-size:36px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__percentage,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__description{font-size:14px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { 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: MatMenuModule }, { kind: "component", type: i3$1.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: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpKpiCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'acp-kpi-card', exportAs: 'acpKpiCard', standalone: true, imports: [
+                        NgTemplateOutlet,
+                        RouterLink,
+                        MatCard,
+                        MatCardHeader,
+                        MatCardContent,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatMenuModule,
+                        MatProgressBarModule,
+                        MatDividerModule,
+                        MatTooltipModule,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                    }, template: "<mat-card\n  class=\"acp-kpi-card__card\"\n  [routerLink]=\"routerLink()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [matTooltip]=\"tooltip()\"\n  [matTooltipDisabled]=\"!tooltip()\"\n  (click)=\"onCardClick()\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n>\n  <!-- Loading Skeleton -->\n  @if (loading()) {\n  <div class=\"acp-kpi-card__skeleton\">\n    <div class=\"acp-kpi-card__skeleton-header\"></div>\n    <div class=\"acp-kpi-card__skeleton-value\"></div>\n    <div class=\"acp-kpi-card__skeleton-text\"></div>\n  </div>\n  } @else {\n  <!-- Header -->\n  @if (hasHeader()) {\n  <mat-card-header class=\"acp-kpi-card__header\">\n    <div class=\"acp-kpi-card__header-content\">\n      <!-- Icon or Avatar -->\n      <div class=\"acp-kpi-card__icon-container\">\n        @if (iconTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"iconTemplate()!\"></ng-container>\n        } @else if (svgIcon()) {\n        <mat-icon class=\"acp-kpi-card__icon\" [svgIcon]=\"svgIcon()!\" aria-hidden=\"true\"></mat-icon>\n        } @else if (effectiveIcon()) {\n        <mat-icon class=\"acp-kpi-card__icon\" aria-hidden=\"true\">{{ effectiveIcon() }}</mat-icon>\n        } @else if (avatarTemplate()) {\n        <div class=\"acp-kpi-card__avatar\">\n          <ng-container [ngTemplateOutlet]=\"avatarTemplate()!\"></ng-container>\n        </div>\n        } @else if (avatar()) {\n        <img class=\"acp-kpi-card__avatar-image\" [src]=\"avatar()\" [alt]=\"title() || 'Avatar'\" />\n        } @else if (avatarInitials()) {\n        <div class=\"acp-kpi-card__avatar-initials\">{{ avatarInitials() }}</div>\n        }\n      </div>\n\n      <!-- Title & Subtitle -->\n      <div class=\"acp-kpi-card__title-container\">\n        @if (title()) {\n        <h3 class=\"acp-kpi-card__title\">{{ title() }}</h3>\n        } @if (subtitle()) {\n        <p class=\"acp-kpi-card__subtitle\">{{ subtitle() }}</p>\n        }\n      </div>\n    </div>\n\n    <!-- Menu Button (optional) - Only show if actions template exists -->\n    @if (hasActions()) {\n    <button\n      mat-icon-button\n      [matMenuTriggerFor]=\"menu\"\n      class=\"acp-kpi-card__menu-button\"\n      aria-label=\"More options\"\n    >\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <mat-menu #menu=\"matMenu\" class=\"acp-kpi-card__menu\">\n      <ng-container [ngTemplateOutlet]=\"actionsTemplate()!\"></ng-container>\n    </mat-menu>\n    }\n  </mat-card-header>\n  }\n\n  <!-- Content -->\n  <mat-card-content class=\"acp-kpi-card__content\">\n    <!-- Main Value -->\n    @if (value()) {\n    <div class=\"acp-kpi-card__value-section\">\n      <div class=\"acp-kpi-card__value\">{{ value() }}</div>\n\n      <!-- Percentage & Trend -->\n      @if (percentage() !== undefined) {\n      <div class=\"acp-kpi-card__metric\">\n        @if (isTrending()) {\n        <mat-icon class=\"acp-kpi-card__trend-icon\" [attr.aria-label]=\"trendConfig().ariaLabel\">\n          {{ trendConfig().icon }}\n        </mat-icon>\n        }\n        <span class=\"acp-kpi-card__percentage\">\n          {{ percentageFormat() === 'percent' ? (percentage() + '%') : percentage() }}\n        </span>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Description -->\n    @if (description()) {\n    <p class=\"acp-kpi-card__description\">{{ description() }}</p>\n    }\n\n    <!-- Progress Bar -->\n    @if (progress() !== undefined) {\n    <mat-progress-bar\n      class=\"acp-kpi-card__progress\"\n      mode=\"determinate\"\n      [value]=\"progress()\"\n      [color]=\"progressColor()\"\n    ></mat-progress-bar>\n    }\n  </mat-card-content>\n\n  <!-- Footer -->\n  @if (hasFooter()) {\n  <mat-divider></mat-divider>\n  <div class=\"acp-kpi-card__footer\">\n    @if (footerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"footerTemplate()!\"></ng-container>\n    } @else if (footer()) {\n    <p class=\"acp-kpi-card__footer-text\">{{ footer() }}</p>\n    }\n  </div>\n  } }\n</mat-card>\n", styles: [".acp-kpi-card{--acp-kpi-card-bg: var(--acp-kpi-card-primary-bg, var(--mat-sys-primary));--acp-kpi-card-fg: var(--acp-kpi-card-primary-color, var(--mat-sys-on-primary));display:flex;vertical-align:middle;width:100%;max-width:100%}.acp-kpi-card__card{width:100%;display:flex;flex-direction:column;border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;background-color:#fff}.acp-kpi-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px;gap:12px}.acp-kpi-card__header-content{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.acp-kpi-card__icon-container{display:flex;align-items:center;justify-content:center;flex-shrink:0}.acp-kpi-card__icon{font-size:24px;width:24px;height:24px;color:var(--acp-kpi-card-fg)}.acp-kpi-card__avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acp-kpi-card-bg) 30%,transparent);color:var(--acp-kpi-card-fg);font-weight:500;font-size:14px;flex-shrink:0}.acp-kpi-card__avatar-image{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}.acp-kpi-card__avatar-initials{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acp-kpi-card-bg) 30%,transparent);color:var(--acp-kpi-card-fg);font-weight:500;font-size:14px;flex-shrink:0}.acp-kpi-card__title-container{flex:1;min-width:0}.acp-kpi-card__title{margin:0;font-size:14px;font-weight:500;letter-spacing:.25px;color:var(--acp-kpi-card-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-kpi-card__subtitle{margin:2px 0 0;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.acp-kpi-card__menu-button{flex-shrink:0;opacity:.7;transition:opacity .2s ease-in-out}.acp-kpi-card__menu-button:hover{opacity:1}.acp-kpi-card__menu-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}.acp-kpi-card__menu{will-change:transform}.acp-kpi-card__content{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px}.acp-kpi-card__value-section{display:flex;align-items:baseline;gap:8px}.acp-kpi-card__value{font-size:28px;font-weight:600;letter-spacing:-.5px;color:var(--acp-kpi-card-fg);line-height:1.2}.acp-kpi-card__metric{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:500;letter-spacing:.25px;color:rgba(var(--acp-kpi-card-fg),.8)}.acp-kpi-card__trend-icon{font-size:16px;width:16px;height:16px}.acp-kpi-card__percentage{white-space:nowrap}.acp-kpi-card.acp-kpi-card--success .acp-kpi-card__metric{color:var(--acp-kpi-card-success-color, light-dark(#ffffff, #013a00))}.acp-kpi-card.acp-kpi-card--success-light .acp-kpi-card__metric{color:var(--acp-kpi-card-success-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--warning .acp-kpi-card__metric{color:var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400))}.acp-kpi-card.acp-kpi-card--warning-light .acp-kpi-card__metric{color:var(--acp-kpi-card-warning-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--error .acp-kpi-card__metric{color:var(--acp-kpi-card-error-color, var(--mat-sys-on-error))}.acp-kpi-card.acp-kpi-card--error-light .acp-kpi-card__metric{color:var(--acp-kpi-card-error-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--info .acp-kpi-card__metric{color:var(--acp-kpi-card-info-color, light-dark(#ffffff, #002f65))}.acp-kpi-card.acp-kpi-card--info-light .acp-kpi-card__metric{color:var(--acp-kpi-card-info-light-color, var(--mat-sys-on-surface))}.acp-kpi-card__description{margin:0;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6);line-height:1.5}.acp-kpi-card__progress{height:4px;border-radius:2px;background-color:rgba(var(--acp-kpi-card-fg),.12)}.acp-kpi-card__footer{padding:12px 16px;font-size:12px;font-weight:400;letter-spacing:.4px;color:rgba(var(--acp-kpi-card-fg),.6)}.acp-kpi-card__footer-text{margin:0}.acp-kpi-card__skeleton{padding:16px;display:flex;flex-direction:column;gap:12px}.acp-kpi-card__skeleton-header{width:60%;height:16px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}.acp-kpi-card__skeleton-value{width:40%;height:28px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}.acp-kpi-card__skeleton-text{width:80%;height:12px;background:linear-gradient(90deg,#0000001a 25%,#0000000d,#0000001a 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:4px}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.acp-kpi-card.acp-kpi-card--primary{--acp-kpi-card-bg: var(--acp-kpi-card-primary-bg, var(--mat-sys-primary));--acp-kpi-card-fg: var(--acp-kpi-card-primary-color, var(--mat-sys-on-primary))}.acp-kpi-card.acp-kpi-card--secondary{--acp-kpi-card-bg: var(--acp-kpi-card-secondary-bg, var(--mat-sys-secondary));--acp-kpi-card-fg: var(--acp-kpi-card-secondary-color, var(--mat-sys-on-secondary))}.acp-kpi-card.acp-kpi-card--success{--acp-kpi-card-bg: var(--acp-kpi-card-success-bg, light-dark(#038b00, #03c700));--acp-kpi-card-fg: var(--acp-kpi-card-success-color, light-dark(#ffffff, #013a00))}.acp-kpi-card.acp-kpi-card--success-light{--acp-kpi-card-bg: var(--acp-kpi-card-success-light-bg, light-dark(#cbffb8, #014600));--acp-kpi-card-fg: var(--acp-kpi-card-success-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--warning{--acp-kpi-card-bg: var(--acp-kpi-card-warning-bg, light-dark(#e37100, #ffb787));--acp-kpi-card-fg: var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400))}.acp-kpi-card.acp-kpi-card--warning-light{--acp-kpi-card-bg: var(--acp-kpi-card-warning-light-bg, light-dark(#ffede4, #612d00));--acp-kpi-card-fg: var(--acp-kpi-card-warning-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--error{--acp-kpi-card-bg: var(--acp-kpi-card-error-bg, var(--mat-sys-error));--acp-kpi-card-fg: var(--acp-kpi-card-error-color, var(--mat-sys-on-error))}.acp-kpi-card.acp-kpi-card--error-light{--acp-kpi-card-bg: var(--acp-kpi-card-error-light-bg, light-dark(#ffedea, #7e0100));--acp-kpi-card-fg: var(--acp-kpi-card-error-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--info{--acp-kpi-card-bg: var(--acp-kpi-card-info-bg, light-dark(#0074e9, #7cabff));--acp-kpi-card-fg: var(--acp-kpi-card-info-color, light-dark(#ffffff, #002f65))}.acp-kpi-card.acp-kpi-card--info-light{--acp-kpi-card-bg: var(--acp-kpi-card-info-light-bg, light-dark(#ecf0ff, #003a7a));--acp-kpi-card-fg: var(--acp-kpi-card-info-light-color, var(--mat-sys-on-surface))}.acp-kpi-card.acp-kpi-card--neutral{--acp-kpi-card-bg: var(--acp-kpi-card-neutral-bg, var(--mat-sys-surface-variant));--acp-kpi-card-fg: var(--acp-kpi-card-neutral-color, var(--mat-sys-on-surface-variant))}.acp-kpi-card.acp-kpi-card--white{--acp-kpi-card-bg: #ffffff;--acp-kpi-card-fg: #1f2937}.acp-kpi-card.acp-kpi-card--custom{--acp-kpi-card-bg: var( --acp-kpi-card-custom-bg, var(--acp-kpi-card-custom-bg, var(--mat-sys-surface-container)) );--acp-kpi-card-fg: var( --acp-kpi-card-custom-fg, var(--acp-kpi-card-custom-color, var(--mat-sys-on-surface)) )}.acp-kpi-card.acp-kpi-card--default .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);border:1px solid rgba(var(--acp-kpi-card-fg),.12)}.acp-kpi-card.acp-kpi-card--elevated .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);box-shadow:0 3px 8px #00000014,0 1px 3px #0000000a}.acp-kpi-card.acp-kpi-card--outlined .acp-kpi-card__card{background:transparent;color:var(--acp-kpi-card-fg);border:2px solid rgba(var(--acp-kpi-card-fg),.2)}.acp-kpi-card.acp-kpi-card--filled .acp-kpi-card__card{background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg)}.acp-kpi-card.acp-kpi-card--tonal .acp-kpi-card__card{background:color-mix(in srgb,var(--acp-kpi-card-bg) 12%,transparent);color:var(--acp-kpi-card-fg);border:1px solid rgba(var(--acp-kpi-card-fg),.08)}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card{cursor:pointer}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:hover{box-shadow:0 6px 12px #0000001a,0 2px 4px #0000000f;transform:translateY(-1px)}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:active{transform:translateY(0);box-shadow:0 2px 4px #00000014}.acp-kpi-card.acp-kpi-card--clickable .acp-kpi-card__card:focus-visible{outline:2px solid currentColor;outline-offset:2px}.acp-kpi-card.acp-kpi-card--disabled .acp-kpi-card__card{opacity:.6;cursor:not-allowed;pointer-events:none}.acp-kpi-card.acp-kpi-card--selected .acp-kpi-card__card{border:2px solid var(--acp-kpi-card-fg)}.acp-kpi-card.acp-kpi-card--loading .acp-kpi-card__card{pointer-events:none;opacity:.8}@media(max-width:768px){.acp-kpi-card__header,.acp-kpi-card__content{padding:12px}.acp-kpi-card__value{font-size:24px}.acp-kpi-card__title{font-size:13px}}@media(prefers-reduced-motion:reduce){.acp-kpi-card__card{transition:none}.acp-kpi-card__skeleton-header,.acp-kpi-card__skeleton-value,.acp-kpi-card__skeleton-text{animation:none}}@media(prefers-contrast:more){.acp-kpi-card__card{border-width:2px}}@media(max-width:768px){.acp-kpi-card__header,.acp-kpi-card__content{padding:12px;gap:8px}.acp-kpi-card__footer{padding:12px}.acp-kpi-card__icon{font-size:20px;width:20px;height:20px}.acp-kpi-card__avatar,.acp-kpi-card__avatar-image,.acp-kpi-card__avatar-initials{width:32px;height:32px;font-size:12px}.acp-kpi-card__title{font-size:13px}.acp-kpi-card__subtitle{font-size:11px}.acp-kpi-card__value{font-size:24px}}.acp-kpi-card__card.acp-kpi-card--xs{min-height:96px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__content{padding:8px;gap:6px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__footer{padding:8px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__icon{font-size:16px;width:16px;height:16px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__avatar-initials{width:28px;height:28px;font-size:11px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__title{font-size:12px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__subtitle{font-size:10px;margin-top:1px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__value{font-size:18px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__percentage{font-size:10px}.acp-kpi-card__card.acp-kpi-card--xs .acp-kpi-card__description{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm{min-height:128px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__content{padding:12px;gap:8px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__footer{padding:12px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__icon{font-size:20px;width:20px;height:20px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__avatar-initials{width:32px;height:32px;font-size:12px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__title{font-size:13px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__subtitle{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__value{font-size:22px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__percentage{font-size:11px}.acp-kpi-card__card.acp-kpi-card--sm .acp-kpi-card__description{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md{min-height:160px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__content{padding:16px;gap:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__footer{padding:16px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__icon{font-size:24px;width:24px;height:24px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__avatar-initials{width:40px;height:40px;font-size:14px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__title{font-size:14px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__subtitle{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__value{font-size:28px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__percentage{font-size:12px}.acp-kpi-card__card.acp-kpi-card--md .acp-kpi-card__description{font-size:13px}.acp-kpi-card__card.acp-kpi-card--lg{min-height:224px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__header,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__content{padding:20px;gap:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__footer{padding:20px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__icon{font-size:32px;width:32px;height:32px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar-image,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__avatar-initials{width:48px;height:48px;font-size:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__title{font-size:16px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__subtitle{font-size:13px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__value{font-size:36px}.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__percentage,.acp-kpi-card__card.acp-kpi-card--lg .acp-kpi-card__description{font-size:14px}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], svgIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgIcon", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], percentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentage", required: false }] }], percentageFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentageFormat", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], progressColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressColor", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], actionClicked: [{ type: i0.Output, args: ["actionClicked"] }], iconTemplate: [{ type: i0.ContentChild, args: ['icon', { ...{ read: TemplateRef }, isSignal: true }] }], avatarTemplate: [{ type: i0.ContentChild, args: ['avatar', { ...{ read: TemplateRef }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footer', { ...{ read: TemplateRef }, isSignal: true }] }], actionsTemplate: [{ type: i0.ContentChild, args: ['actions', { ...{ read: TemplateRef }, isSignal: true }] }] } });
+
+const KPI_CARD_TOKENS = {
+    // Sizes
+    SIZE_SM: 'sm',
+    SIZE_MD: 'md',
+    SIZE_LG: 'lg',
+    // Variants
+    VARIANT_DEFAULT: 'default',
+    VARIANT_ELEVATED: 'elevated',
+    VARIANT_OUTLINED: 'outlined',
+    VARIANT_FILLED: 'filled',
+    VARIANT_TONAL: 'tonal',
+    // Colors
+    COLOR_PRIMARY: 'primary',
+    COLOR_SECONDARY: 'secondary',
+    COLOR_SUCCESS: 'success',
+    COLOR_SUCCESS_LIGHT: 'success-light',
+    COLOR_WARNING: 'warning',
+    COLOR_WARNING_LIGHT: 'warning-light',
+    COLOR_ERROR: 'error',
+    COLOR_ERROR_LIGHT: 'error-light',
+    COLOR_INFO: 'info',
+    COLOR_INFO_LIGHT: 'info-light',
+    COLOR_NEUTRAL: 'neutral',
+    COLOR_CUSTOM: 'custom',
+    // Trends
+    TREND_UP: 'up',
+    TREND_DOWN: 'down',
+    TREND_NEUTRAL: 'neutral',
+    TREND_NONE: 'none',
+};
+
 class ToUpperCase {
     el = inject(ElementRef);
     renderer = inject(Renderer2);
@@ -8889,6 +8368,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 args: ['input']
             }] } });
 
+class Pagination {
+    totalRecords;
+    pageSize;
+    pageIndex;
+    pageSizeOptions;
+    hidePageSize;
+    showPageSizeOptions;
+    showFirstLastButtons;
+    disabled;
+    /**
+     * @param pageIndex Current page index (0-based for MatPaginator compatibility)
+     * @param pageSize Number of records per page
+     * @param totalRecords Total number of records
+     * @param pageSizeOptions Available page size options
+     * @param options Display and behavior options
+     */
+    constructor(pageIndex = 0, // MatPaginator starts at 0
+    pageSize = 25, totalRecords = 0, pageSizeOptions = [25, 50, 75, 100], options = {}) {
+        this.pageIndex = pageIndex;
+        this.pageSize = pageSize;
+        this.totalRecords = totalRecords;
+        this.pageSizeOptions = pageSizeOptions;
+        this.hidePageSize = options.hidePageSize ?? false;
+        this.showPageSizeOptions = options.showPageSizeOptions ?? true;
+        this.showFirstLastButtons = options.showFirstLastButtons ?? true;
+        this.disabled = options.disabled ?? false;
+    }
+    /**
+     * Calculates the total number of pages.
+     */
+    getTotalPages() {
+        return Math.ceil(this.totalRecords / this.pageSize);
+    }
+    /**
+     * Handles page event similar to Angular Material example.
+     * @param event MatPaginator PageEvent
+     */
+    handlePageEvent(event) {
+        this.totalRecords = event.length;
+        this.pageSize = event.pageSize;
+        this.pageIndex = event.pageIndex;
+    }
+}
+
 class GetTotalPipe {
     transform(colName, dataSource) {
         return this.getTotal(colName, dataSource) || '';
@@ -8983,5 +8506,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { ACP_ACTIVE_DATE_DEBOUNCE, ACP_BADGE_COLORS, ACP_BADGE_SHAPES, ACP_BADGE_SIZES, ACP_BADGE_VARIANTS, 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, AcpAlert, AcpBadge, AcpButton, AcpCheckboxBase, AcpCheckboxGroup, AcpDateRangeInput, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpKpiCard, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AcpSelectDateOption, AdvancedDialogService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KPI_CARD_TOKENS, KPI_CARD_TREND_CONFIGS, KeyboardNavigationService, OverlayService, Pagination, Spinner, StatusDisplayPipe, SvgIcon, TREND_CONFIGS, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, _AcpPopoverContentBase, formatValue };
 //# sourceMappingURL=acontplus-ng-components.mjs.map