@acontplus/ng-components 2.1.32 → 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, Injectable, viewChild, ViewContainerRef, effect, computed, PLATFORM_ID, signal, Pipe, TemplateRef, Directive, ViewChild, KeyValueDiffers, InjectionToken, Renderer2, NgZone, CSP_NONCE, DOCUMENT, ElementRef, Injector, ContentChildren, model, forwardRef, ANIMATION_MODULE_TYPE, ApplicationRef, ContentChild, HostListener } from '@angular/core';
-import * as i2 from '@angular/material/button';
+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 * as i3 from '@angular/material/icon';
+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$1 from '@angular/material/dialog';
+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 * as i1$3 from '@angular/forms';
+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$2 from '@ng-select/ng-select';
+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 { MatProgressSpinner } from '@angular/material/progress-spinner';
 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$4 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
@@ -249,7 +439,7 @@ class DynamicCard {
         this.keyPress.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DynamicCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: DynamicCard, isStandalone: true, selector: "acp-dynamic-card", inputs: { cardTitle: { classPropertyName: "cardTitle", publicName: "cardTitle", isSignal: true, isRequired: false, transformFunction: null }, cardSubtitle: { classPropertyName: "cardSubtitle", publicName: "cardSubtitle", isSignal: true, isRequired: false, transformFunction: null }, avatarImageUrl: { classPropertyName: "avatarImageUrl", publicName: "avatarImageUrl", isSignal: true, isRequired: false, transformFunction: null }, isHeaderVisible: { classPropertyName: "isHeaderVisible", publicName: "isHeaderVisible", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, hasDivider: { classPropertyName: "hasDivider", publicName: "hasDivider", isSignal: true, isRequired: false, transformFunction: null }, areActionsVisible: { classPropertyName: "areActionsVisible", publicName: "areActionsVisible", isSignal: true, isRequired: false, transformFunction: null }, primaryButtonText: { classPropertyName: "primaryButtonText", publicName: "primaryButtonText", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonText: { classPropertyName: "secondaryButtonText", publicName: "secondaryButtonText", isSignal: true, isRequired: false, transformFunction: null }, primaryButtonIcon: { classPropertyName: "primaryButtonIcon", publicName: "primaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonIcon: { classPropertyName: "secondaryButtonIcon", publicName: "secondaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, buttonsPosition: { classPropertyName: "buttonsPosition", publicName: "buttonsPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryButtonClicked: "primaryButtonClicked", secondaryButtonClicked: "secondaryButtonClicked", cardClicked: "cardClicked", keyDown: "keyDown", keyUp: "keyUp", keyPress: "keyPress" }, ngImport: i0, template: "<mat-card\n  appearance=\"outlined\"\n  (click)=\"handleCardClick($event)\"\n  (keydown)=\"handleKeyDown($event)\"\n  (keyup)=\"handleKeyUp($event)\"\n  (keypress)=\"handleKeyPress($event)\"\n  [class.mat-card-divider]=\"hasDivider()\"\n>\n  @if (isHeaderVisible()) {\n  <mat-card-header>\n    @if (avatarImageUrl()) {\n    <img mat-card-avatar [src]=\"avatarImageUrl()\" alt=\"Card avatar\" />\n    } @if (cardTitle()) {\n    <mat-card-title>{{ cardTitle() }}</mat-card-title>\n    } @if (cardSubtitle()) {\n    <mat-card-subtitle>{{ cardSubtitle() }}</mat-card-subtitle>\n    }\n  </mat-card-header>\n  }\n\n  <mat-card-content [style.padding]=\"contentPadding()\">\n    <ng-content />\n  </mat-card-content>\n\n  @if (areActionsVisible()) {\n  <mat-card-actions [align]=\"buttonsPosition()\">\n    @if (secondaryButtonText()) {\n    <button mat-button color=\"warn\" (click)=\"handleSecondaryButtonClick($event)\">\n      @if (secondaryButtonIcon()) {\n      <mat-icon>{{ secondaryButtonIcon() }}</mat-icon>\n      } {{ secondaryButtonText() }}\n    </button>\n    } @if (primaryButtonText()) {\n    <button mat-button color=\"primary\" (click)=\"handlePrimaryButtonClick($event)\">\n      @if (primaryButtonIcon()) {\n      <mat-icon>{{ primaryButtonIcon() }}</mat-icon>\n      } {{ primaryButtonText() }}\n    </button>\n    }\n  </mat-card-actions>\n  }\n</mat-card>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: DynamicCard, isStandalone: true, selector: "acp-dynamic-card", inputs: { cardTitle: { classPropertyName: "cardTitle", publicName: "cardTitle", isSignal: true, isRequired: false, transformFunction: null }, cardSubtitle: { classPropertyName: "cardSubtitle", publicName: "cardSubtitle", isSignal: true, isRequired: false, transformFunction: null }, avatarImageUrl: { classPropertyName: "avatarImageUrl", publicName: "avatarImageUrl", isSignal: true, isRequired: false, transformFunction: null }, isHeaderVisible: { classPropertyName: "isHeaderVisible", publicName: "isHeaderVisible", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, hasDivider: { classPropertyName: "hasDivider", publicName: "hasDivider", isSignal: true, isRequired: false, transformFunction: null }, areActionsVisible: { classPropertyName: "areActionsVisible", publicName: "areActionsVisible", isSignal: true, isRequired: false, transformFunction: null }, primaryButtonText: { classPropertyName: "primaryButtonText", publicName: "primaryButtonText", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonText: { classPropertyName: "secondaryButtonText", publicName: "secondaryButtonText", isSignal: true, isRequired: false, transformFunction: null }, primaryButtonIcon: { classPropertyName: "primaryButtonIcon", publicName: "primaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonIcon: { classPropertyName: "secondaryButtonIcon", publicName: "secondaryButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, buttonsPosition: { classPropertyName: "buttonsPosition", publicName: "buttonsPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryButtonClicked: "primaryButtonClicked", secondaryButtonClicked: "secondaryButtonClicked", cardClicked: "cardClicked", keyDown: "keyDown", keyUp: "keyUp", keyPress: "keyPress" }, ngImport: i0, template: "<mat-card\n  appearance=\"outlined\"\n  (click)=\"handleCardClick($event)\"\n  (keydown)=\"handleKeyDown($event)\"\n  (keyup)=\"handleKeyUp($event)\"\n  (keypress)=\"handleKeyPress($event)\"\n  [class.mat-card-divider]=\"hasDivider()\"\n>\n  @if (isHeaderVisible()) {\n  <mat-card-header>\n    @if (avatarImageUrl()) {\n    <img mat-card-avatar [src]=\"avatarImageUrl()\" alt=\"Card avatar\" />\n    } @if (cardTitle()) {\n    <mat-card-title>{{ cardTitle() }}</mat-card-title>\n    } @if (cardSubtitle()) {\n    <mat-card-subtitle>{{ cardSubtitle() }}</mat-card-subtitle>\n    }\n  </mat-card-header>\n  }\n\n  <mat-card-content [style.padding]=\"contentPadding()\">\n    <ng-content />\n  </mat-card-content>\n\n  @if (areActionsVisible()) {\n  <mat-card-actions [align]=\"buttonsPosition()\">\n    @if (secondaryButtonText()) {\n    <button mat-button color=\"warn\" (click)=\"handleSecondaryButtonClick($event)\">\n      @if (secondaryButtonIcon()) {\n      <mat-icon>{{ secondaryButtonIcon() }}</mat-icon>\n      } {{ secondaryButtonText() }}\n    </button>\n    } @if (primaryButtonText()) {\n    <button mat-button color=\"primary\" (click)=\"handlePrimaryButtonClick($event)\">\n      @if (primaryButtonIcon()) {\n      <mat-icon>{{ primaryButtonIcon() }}</mat-icon>\n      } {{ primaryButtonText() }}\n    </button>\n    }\n  </mat-card-actions>\n  }\n</mat-card>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DynamicCard, decorators: [{
             type: Component,
@@ -441,6 +631,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "@switch (matStyle()) { @case ('text') {\n<button\n  matButton\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('elevated') {\n<button\n  matButton=\"elevated\"\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('outlined') {\n<button\n  matButton=\"outlined\"\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('tonal') {\n<button\n  matButton=\"tonal\"\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('icon') {\n<button\n  matIconButton\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('fab') {\n<button\n  matFab\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('mini-fab') {\n<button\n  matMiniFab\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @case ('extended-fab') {\n<button\n  matFab\n  extended\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} @default {\n<button\n  matButton=\"filled\"\n  [ngClass]=\"getButtonClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [title]=\"getTitle()\"\n  [attr.aria-label]=\"ariaLabel() || getTitle()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"id()\"\n  [attr.form]=\"form()\"\n  [attr.tabindex]=\"tabIndex()\"\n  [attr.data-testid]=\"testId()\"\n  (click)=\"handleClick.emit($event)\"\n>\n  <ng-container [ngTemplateOutlet]=\"buttonContent\" />\n</button>\n} }\n\n<ng-template #buttonContent>\n  @if (getIcon()) {\n  <mat-icon>{{ getIcon() }}</mat-icon>\n  } @if (getDisplayText()) { {{ getDisplayText() }} }\n\n  <ng-content />\n</ng-template>\n", styles: [":root{--acp-secondary: #e0e0e0;--acp-secondary-on: #000000;--acp-success: #4caf50;--acp-success-on: #ffffff;--acp-danger: #ba1a1a;--acp-danger-on: #ffffff;--acp-warning: #ff9800;--acp-warning-on: #000000;--acp-info: #2196f3;--acp-info-on: #ffffff;--acp-dark: #212121;--acp-dark-on: #ffffff}.dark-theme{--acp-secondary: #424242;--acp-secondary-on: #ffffff;--acp-success: #81c784;--acp-success-on: #1b5e20;--acp-danger: #ef5350;--acp-danger-on: #b71c1c;--acp-warning: #ffb74d;--acp-warning-on: #e65100;--acp-info: #64b5f6;--acp-info-on: #0d47a1;--acp-dark: #616161;--acp-dark-on: #ffffff}acp-button{display:inline-block}.mat-mdc-button .mdc-button__label,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-outlined-button .mdc-button__label,button[matbutton=tonal] .mdc-button__label,.mat-mdc-fab.mdc-fab--extended .mdc-button__label{display:flex;align-items:center;gap:8px}.mat-mdc-button.mat-btn-secondary,.mat-mdc-unelevated-button.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-button.mat-btn-secondary:hover,.mat-mdc-unelevated-button.mat-btn-secondary:hover{background-color:color-mix(in srgb,var(--acp-secondary) 80%,black)!important}.mat-mdc-button.mat-btn-success,.mat-mdc-unelevated-button.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-button.mat-btn-danger,.mat-mdc-unelevated-button.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-button.mat-btn-warning,.mat-mdc-unelevated-button.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-button.mat-btn-info,.mat-mdc-unelevated-button.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-button.mat-btn-dark,.mat-mdc-unelevated-button.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}button[matbutton=tonal].mat-btn-success{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important;color:var(--acp-success)!important}button[matbutton=tonal].mat-btn-danger{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important;color:var(--acp-danger)!important}button[matbutton=tonal].mat-btn-warning{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important;color:var(--acp-warning)!important}button[matbutton=tonal].mat-btn-info{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important;color:var(--acp-info)!important}button[matbutton=tonal].mat-btn-dark{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important;color:var(--acp-dark)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-success{color:var(--acp-success)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-info{color:var(--acp-info)!important}.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(.mat-mdc-outlined-button).mat-btn-dark{color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-secondary{background-color:var(--mat-sys-surface-container-low)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-raised-button.mat-btn-success{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-success)!important}.mat-mdc-raised-button.mat-btn-success:hover{background-color:color-mix(in srgb,var(--acp-success) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-danger{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-danger)!important}.mat-mdc-raised-button.mat-btn-danger:hover{background-color:color-mix(in srgb,var(--acp-danger) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-warning{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-warning)!important}.mat-mdc-raised-button.mat-btn-warning:hover{background-color:color-mix(in srgb,var(--acp-warning) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-info{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-info)!important}.mat-mdc-raised-button.mat-btn-info:hover{background-color:color-mix(in srgb,var(--acp-info) 12%,transparent)!important}.mat-mdc-raised-button.mat-btn-dark{background-color:var(--mat-sys-surface-container-low)!important;color:var(--acp-dark)!important}.mat-mdc-raised-button.mat-btn-dark:hover{background-color:color-mix(in srgb,var(--acp-dark) 12%,transparent)!important}.mat-mdc-outlined-button.mat-btn-secondary{border-color:var(--mat-sys-outline)!important;color:var(--mat-sys-on-surface)!important}.mat-mdc-outlined-button.mat-btn-success{border-color:var(--acp-success)!important;color:var(--acp-success)!important}.mat-mdc-outlined-button.mat-btn-danger{border-color:var(--acp-danger)!important;color:var(--acp-danger)!important}.mat-mdc-outlined-button.mat-btn-warning{border-color:var(--acp-warning)!important;color:var(--acp-warning)!important}.mat-mdc-outlined-button.mat-btn-info{border-color:var(--acp-info)!important;color:var(--acp-info)!important}.mat-mdc-outlined-button.mat-btn-dark{border-color:var(--acp-dark)!important;color:var(--acp-dark)!important}.mat-mdc-fab.mat-btn-secondary,.mat-mdc-mini-fab.mat-btn-secondary{background-color:var(--acp-secondary)!important;color:var(--acp-secondary-on)!important}.mat-mdc-fab.mat-btn-success,.mat-mdc-mini-fab.mat-btn-success{background-color:var(--acp-success)!important;color:var(--acp-success-on)!important}.mat-mdc-fab.mat-btn-danger,.mat-mdc-mini-fab.mat-btn-danger{background-color:var(--acp-danger)!important;color:var(--acp-danger-on)!important}.mat-mdc-fab.mat-btn-warning,.mat-mdc-mini-fab.mat-btn-warning{background-color:var(--acp-warning)!important;color:var(--acp-warning-on)!important}.mat-mdc-fab.mat-btn-info,.mat-mdc-mini-fab.mat-btn-info{background-color:var(--acp-info)!important;color:var(--acp-info-on)!important}.mat-mdc-fab.mat-btn-dark,.mat-mdc-mini-fab.mat-btn-dark{background-color:var(--acp-dark)!important;color:var(--acp-dark-on)!important}.mat-mdc-icon-button.mat-btn-secondary{color:var(--mat-sys-on-surface)!important}.mat-mdc-icon-button.mat-btn-success{color:var(--acp-success)!important}.mat-mdc-icon-button.mat-btn-danger{color:var(--acp-danger)!important}.mat-mdc-icon-button.mat-btn-warning{color:var(--acp-warning)!important}.mat-mdc-icon-button.mat-btn-info{color:var(--acp-info)!important}.mat-mdc-icon-button.mat-btn-dark{color:var(--acp-dark)!important}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], matStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "matStyle", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], reportFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "reportFormat", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], handleClick: [{ type: i0.Output, args: ["handleClick"] }] } });
 
+class BaseButton {
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    square = input(false, { ...(ngDevMode ? { debugName: "square" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    suffixIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "suffixIcon" }] : /* istanbul ignore next */ []));
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disableRipple = input(false, { ...(ngDevMode ? { debugName: "disableRipple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    variant = input('basic', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    appearance = input('filled', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    type = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    extended = input(false, { ...(ngDevMode ? { debugName: "extended" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    size = input('large', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    text = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
+    hasText = computed(() => !!this.text() && this.text().trim().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasText" }] : /* istanbul ignore next */ []));
+    clicked = output();
+    focused = output();
+    blurred = output();
+    colorClass = computed(() => `acp-${this.color()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colorClass" }] : /* istanbul ignore next */ []));
+    sizeClass = computed(() => `acp-${this.size()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
+    squareClass = computed(() => (this.square() ? 'acp-square' : ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "squareClass" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    pointerEvents = computed(() => (this.isDisabled() ? 'none' : 'auto'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pointerEvents" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BaseButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BaseButton, isStandalone: true, inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", focused: "focused", blurred: "blurred" }, host: { properties: { "style.pointer-events": "pointerEvents()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BaseButton, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[style.pointer-events]': 'pointerEvents()',
+                    },
+                }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], square: [{ type: i0.Input, args: [{ isSignal: true, alias: "square", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
+
+class ButtonLoaderDirective {
+    acpLoading = input(false, { ...(ngDevMode ? { debugName: "acpLoading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    viewContainer = inject(ViewContainerRef);
+    renderer = inject(Renderer2);
+    spinner = null;
+    buttonNativeElement = signal(this.viewContainer.element.nativeElement, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonNativeElement" }] : /* istanbul ignore next */ []));
+    spinnerSize = computed(() => {
+        const buttonHeight = this.buttonNativeElement().clientHeight;
+        return buttonHeight ? Math.trunc(buttonHeight / 1.5) : 20;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spinnerSize" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterRenderEffect({
+            earlyRead: () => {
+                if (this.buttonNativeElement().tagName !== 'BUTTON') {
+                    throw new Error(`ButtonLoaderDirective can only be used on a button element, but used on${this.buttonNativeElement().tagName}`);
+                }
+            },
+            write: () => {
+                const loading = this.acpLoading();
+                untracked(() => {
+                    if (loading) {
+                        this.buttonNativeElement().classList.add('button-loading');
+                        this.createSpinner();
+                    }
+                    else {
+                        this.buttonNativeElement().classList.remove('button-loading');
+                        this.destroySpinner();
+                    }
+                });
+            },
+        });
+    }
+    createSpinner() {
+        if (!this.spinner) {
+            this.spinner = this.viewContainer.createComponent(MatProgressSpinner);
+            this.spinner.instance.diameter = this.spinnerSize();
+            this.spinner.instance.mode = 'indeterminate';
+            this.spinner.instance.strokeWidth = 2;
+            const spinnerElement = this.spinner.location.nativeElement;
+            this.renderer.setStyle(spinnerElement, 'position', 'absolute');
+            this.renderer.appendChild(this.buttonNativeElement(), spinnerElement);
+        }
+    }
+    destroySpinner() {
+        this.spinner?.destroy();
+        this.spinner = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ButtonLoaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ButtonLoaderDirective, isStandalone: true, selector: "button[acpLoading]", inputs: { acpLoading: { classPropertyName: "acpLoading", publicName: "acpLoading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ButtonLoaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[acpLoading]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { acpLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "acpLoading", required: false }] }] } });
+
+class AcpButton extends BaseButton {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpButton, isStandalone: true, selector: "acp-button", usesInheritance: true, ngImport: i0, template: "@if (variant() === 'icon') {\n<button\n  matIconButton\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else if (variant() === 'fab') {\n<button\n  matFab\n  [extended]=\"extended()\"\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [ngClass]=\"[colorClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (extended()) { @if (hasText()) { {{text()}} }\n  @else { <ng-content></ng-content> } }\n</button>\n} @else if (variant() === 'mini-fab') {\n<button\n  matMiniFab\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [ngClass]=\"[colorClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else {\n<button\n  [matButton]=\"appearance()\"\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (hasText()) { {{text()}} } @else {\n  <ng-content></ng-content> } @if (suffixIcon()) {\n  <mat-icon iconPositionEnd>{{suffixIcon()}}</mat-icon> }\n</button>\n}\n", styles: [".acp-primary{--mat-button-filled-container-color: var(--theme-primary-color);--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: var(--theme-primary-color);--mat-button-protected-label-text-color: var(--theme-primary-color);--mat-button-text-label-text-color: var(--theme-primary-color);--mat-button-text-state-layer-color: var(--theme-primary-color)}.acp-secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary)}.acp-accent{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary)}.acp-error{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error)}.acp-success{--mat-button-filled-container-color: #4caf50;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #4caf50;--mat-button-protected-label-text-color: #4caf50;--mat-button-text-label-text-color: #4caf50;--mat-button-text-state-layer-color: #4caf50}.acp-warning{--mat-button-filled-container-color: #f59e0b;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #f59e0b;--mat-button-protected-label-text-color: #f59e0b;--mat-button-text-label-text-color: #f59e0b;--mat-button-text-state-layer-color: #f59e0b}.acp-info{--mat-button-filled-container-color: #3b82f6;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #3b82f6;--mat-button-protected-label-text-color: #3b82f6;--mat-button-text-label-text-color: #3b82f6;--mat-button-text-state-layer-color: #3b82f6}.acp-dark{--mat-button-filled-container-color: #1f2937;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #1f2937;--mat-button-protected-label-text-color: #1f2937;--mat-button-text-label-text-color: #1f2937;--mat-button-text-state-layer-color: #1f2937}[matIconButton].acp-primary{--mat-icon-color: var(--theme-primary-color)}[matIconButton].acp-secondary{--mat-icon-color: var(--mat-sys-secondary)}[matIconButton].acp-accent{--mat-icon-color: var(--mat-sys-tertiary)}[matIconButton].acp-error{--mat-icon-color: var(--mat-sys-error)}[matIconButton].acp-success{--mat-icon-color: #10b981}[matIconButton].acp-warning{--mat-icon-color: #f59e0b}[matIconButton].acp-info{--mat-icon-color: #3b82f6}[matIconButton].acp-dark{--mat-icon-color: #1f2937}.acp-square{--mat-button-filled-container-shape: 8px;--mat-button-outlined-container-shape: 8px;--mat-button-protected-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-button-tonal-container-shape: 8px;--mat-icon-button-container-shape: 8px}.acp-medium{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 36px;--mat-chip-container-height: 28px;--mat-expansion-header-collapsed-state-height: 44px;--mat-expansion-header-expanded-state-height: 60px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: block;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 36px;--mat-button-outlined-container-height: 36px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 36px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 36px;--mat-button-tonal-container-height: 36px;--mat-button-tonal-touch-target-display: block;--mat-form-field-container-height: 52px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 14px;--mat-form-field-filled-with-label-container-padding-top: 22px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 36px;--mat-list-list-item-leading-icon-start-space: 12px;--mat-list-list-item-leading-icon-end-space: 12px;--mat-list-list-item-one-line-container-height: 44px;--mat-list-list-item-two-line-container-height: 60px;--mat-list-list-item-three-line-container-height: 84px;--mat-paginator-container-size: 52px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block;--mat-radio-touch-target-display: block;--mat-radio-state-layer-size: 36px;--mat-tab-container-height: 44px;--mat-select-arrow-transform: translateY(-8px);--mat-button-toggle-height: 40px;--mat-stepper-header-height: 68px;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-toolbar-standard-height: 60px;--mat-toolbar-mobile-height: 52px;--mat-tree-node-min-height: 44px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 20px;--mat-button-outlined-horizontal-padding: 20px;--mat-button-protected-horizontal-padding: 20px;--mat-button-text-horizontal-padding: 20px;--mat-button-tonal-horizontal-padding: 20px;--mat-button-toggle-height: 36px}.acp-small{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 32px;--mat-chip-container-height: 24px;--mat-expansion-header-collapsed-state-height: 40px;--mat-expansion-header-expanded-state-height: 56px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: none;--mat-button-filled-touch-target-display: none;--mat-button-filled-container-height: 32px;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-touch-target-display: none;--mat-button-protected-container-height: 32px;--mat-button-text-touch-target-display: none;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: none;--mat-form-field-container-height: 48px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 12px;--mat-form-field-filled-with-label-container-padding-top: 12px;--mat-form-field-filled-with-label-container-padding-bottom: 12px;--mat-icon-button-touch-target-display: none;--mat-icon-button-state-layer-size: 32px;--mat-list-list-item-leading-icon-start-space: 8px;--mat-list-list-item-leading-icon-end-space: 8px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px;--mat-paginator-container-size: 48px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: none;--mat-radio-touch-target-display: none;--mat-radio-state-layer-size: 32px;--mat-tab-container-height: 40px;--mat-select-arrow-transform: none;--mat-button-toggle-height: 40px;--mat-stepper-header-height: 64px;--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px;--mat-toolbar-standard-height: 56px;--mat-toolbar-mobile-height: 48px;--mat-tree-node-min-height: 40px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 16px;--mat-button-outlined-horizontal-padding: 16px;--mat-button-protected-horizontal-padding: 16px;--mat-button-text-horizontal-padding: 16px;--mat-button-tonal-horizontal-padding: 16px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonLoaderDirective, selector: "button[acpLoading]", inputs: ["acpLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'acp-button', imports: [NgClass, MatButtonModule, MatIconModule, ButtonLoaderDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (variant() === 'icon') {\n<button\n  matIconButton\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else if (variant() === 'fab') {\n<button\n  matFab\n  [extended]=\"extended()\"\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [ngClass]=\"[colorClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (extended()) { @if (hasText()) { {{text()}} }\n  @else { <ng-content></ng-content> } }\n</button>\n} @else if (variant() === 'mini-fab') {\n<button\n  matMiniFab\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [ngClass]=\"[colorClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  <mat-icon>{{icon()}}</mat-icon>\n</button>\n} @else {\n<button\n  [matButton]=\"appearance()\"\n  [disabled]=\"isDisabled()\"\n  [disableRipple]=\"disableRipple()\"\n  [acpLoading]=\"loading()\"\n  [type]=\"type()\"\n  [ngClass]=\"[colorClass(), squareClass(), sizeClass()]\"\n  (click)=\"clicked.emit()\"\n  (focus)=\"focused.emit()\"\n  (blur)=\"blurred.emit()\"\n>\n  @if (icon()) { <mat-icon>{{icon()}}</mat-icon> } @if (hasText()) { {{text()}} } @else {\n  <ng-content></ng-content> } @if (suffixIcon()) {\n  <mat-icon iconPositionEnd>{{suffixIcon()}}</mat-icon> }\n</button>\n}\n", styles: [".acp-primary{--mat-button-filled-container-color: var(--theme-primary-color);--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: var(--theme-primary-color);--mat-button-protected-label-text-color: var(--theme-primary-color);--mat-button-text-label-text-color: var(--theme-primary-color);--mat-button-text-state-layer-color: var(--theme-primary-color)}.acp-secondary{--mat-button-filled-container-color: var(--mat-sys-secondary);--mat-button-filled-label-text-color: var(--mat-sys-on-secondary);--mat-button-outlined-label-text-color: var(--mat-sys-secondary);--mat-button-protected-label-text-color: var(--mat-sys-secondary);--mat-button-text-label-text-color: var(--mat-sys-secondary);--mat-button-text-state-layer-color: var(--mat-sys-secondary)}.acp-accent{--mat-button-filled-container-color: var(--mat-sys-tertiary);--mat-button-filled-label-text-color: var(--mat-sys-on-tertiary);--mat-button-outlined-label-text-color: var(--mat-sys-tertiary);--mat-button-protected-label-text-color: var(--mat-sys-tertiary);--mat-button-text-label-text-color: var(--mat-sys-tertiary);--mat-button-text-state-layer-color: var(--mat-sys-tertiary)}.acp-error{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-protected-label-text-color: var(--mat-sys-error);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error)}.acp-success{--mat-button-filled-container-color: #4caf50;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #4caf50;--mat-button-protected-label-text-color: #4caf50;--mat-button-text-label-text-color: #4caf50;--mat-button-text-state-layer-color: #4caf50}.acp-warning{--mat-button-filled-container-color: #f59e0b;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #f59e0b;--mat-button-protected-label-text-color: #f59e0b;--mat-button-text-label-text-color: #f59e0b;--mat-button-text-state-layer-color: #f59e0b}.acp-info{--mat-button-filled-container-color: #3b82f6;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #3b82f6;--mat-button-protected-label-text-color: #3b82f6;--mat-button-text-label-text-color: #3b82f6;--mat-button-text-state-layer-color: #3b82f6}.acp-dark{--mat-button-filled-container-color: #1f2937;--mat-button-filled-label-text-color: #ffffff;--mat-button-outlined-label-text-color: #1f2937;--mat-button-protected-label-text-color: #1f2937;--mat-button-text-label-text-color: #1f2937;--mat-button-text-state-layer-color: #1f2937}[matIconButton].acp-primary{--mat-icon-color: var(--theme-primary-color)}[matIconButton].acp-secondary{--mat-icon-color: var(--mat-sys-secondary)}[matIconButton].acp-accent{--mat-icon-color: var(--mat-sys-tertiary)}[matIconButton].acp-error{--mat-icon-color: var(--mat-sys-error)}[matIconButton].acp-success{--mat-icon-color: #10b981}[matIconButton].acp-warning{--mat-icon-color: #f59e0b}[matIconButton].acp-info{--mat-icon-color: #3b82f6}[matIconButton].acp-dark{--mat-icon-color: #1f2937}.acp-square{--mat-button-filled-container-shape: 8px;--mat-button-outlined-container-shape: 8px;--mat-button-protected-container-shape: 8px;--mat-button-text-container-shape: 8px;--mat-button-tonal-container-shape: 8px;--mat-icon-button-container-shape: 8px}.acp-medium{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 36px;--mat-chip-container-height: 28px;--mat-expansion-header-collapsed-state-height: 44px;--mat-expansion-header-expanded-state-height: 60px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: block;--mat-button-filled-touch-target-display: block;--mat-button-filled-container-height: 36px;--mat-button-outlined-container-height: 36px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-touch-target-display: block;--mat-button-protected-container-height: 36px;--mat-button-text-touch-target-display: block;--mat-button-text-container-height: 36px;--mat-button-tonal-container-height: 36px;--mat-button-tonal-touch-target-display: block;--mat-form-field-container-height: 52px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 14px;--mat-form-field-filled-with-label-container-padding-top: 22px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-icon-button-touch-target-display: block;--mat-icon-button-state-layer-size: 36px;--mat-list-list-item-leading-icon-start-space: 12px;--mat-list-list-item-leading-icon-end-space: 12px;--mat-list-list-item-one-line-container-height: 44px;--mat-list-list-item-two-line-container-height: 60px;--mat-list-list-item-three-line-container-height: 84px;--mat-paginator-container-size: 52px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block;--mat-radio-touch-target-display: block;--mat-radio-state-layer-size: 36px;--mat-tab-container-height: 44px;--mat-select-arrow-transform: translateY(-8px);--mat-button-toggle-height: 40px;--mat-stepper-header-height: 68px;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-toolbar-standard-height: 60px;--mat-toolbar-mobile-height: 52px;--mat-tree-node-min-height: 44px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 20px;--mat-button-outlined-horizontal-padding: 20px;--mat-button-protected-horizontal-padding: 20px;--mat-button-text-horizontal-padding: 20px;--mat-button-tonal-horizontal-padding: 20px;--mat-button-toggle-height: 36px}.acp-small{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 32px;--mat-chip-container-height: 24px;--mat-expansion-header-collapsed-state-height: 40px;--mat-expansion-header-expanded-state-height: 56px;--mat-fab-small-touch-target-display: ;--mat-fab-touch-target-display: none;--mat-button-filled-touch-target-display: none;--mat-button-filled-container-height: 32px;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-touch-target-display: none;--mat-button-protected-container-height: 32px;--mat-button-text-touch-target-display: none;--mat-button-text-container-height: 32px;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: none;--mat-form-field-container-height: 48px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 12px;--mat-form-field-filled-with-label-container-padding-top: 12px;--mat-form-field-filled-with-label-container-padding-bottom: 12px;--mat-icon-button-touch-target-display: none;--mat-icon-button-state-layer-size: 32px;--mat-list-list-item-leading-icon-start-space: 8px;--mat-list-list-item-leading-icon-end-space: 8px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px;--mat-paginator-container-size: 48px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: none;--mat-radio-touch-target-display: none;--mat-radio-state-layer-size: 32px;--mat-tab-container-height: 40px;--mat-select-arrow-transform: none;--mat-button-toggle-height: 40px;--mat-stepper-header-height: 64px;--mat-table-header-container-height: 48px;--mat-table-footer-container-height: 44px;--mat-table-row-item-container-height: 44px;--mat-toolbar-standard-height: 56px;--mat-toolbar-mobile-height: 48px;--mat-tree-node-min-height: 40px;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--mat-button-filled-horizontal-padding: 16px;--mat-button-outlined-horizontal-padding: 16px;--mat-button-protected-horizontal-padding: 16px;--mat-button-text-horizontal-padding: 16px;--mat-button-tonal-horizontal-padding: 16px}\n"] }]
+        }] });
+
 /**
  * Servicio centralizado para manejar z-index de todos los diálogos
  * Asegura que los diálogos siempre aparezcan en el orden correcto
@@ -649,7 +956,7 @@ class DialogWrapper {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DialogWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: DialogWrapper, isStandalone: true, selector: "acp-dialog-wrapper", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "header", first: true, predicate: ["dialogHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!config.hideHeader) {\n<div\n  class=\"acp-dialog-header\"\n  cdkDrag\n  cdkDragRootElement=\".cdk-overlay-pane\"\n  cdkDragHandle\n  #dialogHeader\n  (mousedown)=\"bringToFront()\"\n>\n  <h6 mat-dialog-title class=\"acp-dialog-title\">\n    @if (config.icon) {\n    <mat-icon class=\"acp-dialog-title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n    }\n    <span>{{ config.title }}</span>\n    @if (config.showCloseButton !== false) {\n    <acp-button\n      [customClass]=\"'acp-dialog-close-btn'\"\n      matStyle=\"icon\"\n      icon=\"close\"\n      (handleClick)=\"onClose()\"\n      ariaLabel=\"Close Dialog\"\n    />\n    }\n  </h6>\n</div>\n}\n\n<ng-template #contentHost />\n", styles: [".acp-dialog-header{cursor:move;border-bottom:1px solid var(--mat-sys-outline-variant, #dee2e6);color:var(--mat-sys-on-surface, #212529);position:relative}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%;padding-right:48px}.acp-dialog-title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}mat-dialog-content{padding:24px}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: DialogWrapper, isStandalone: true, selector: "acp-dialog-wrapper", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "header", first: true, predicate: ["dialogHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!config.hideHeader) {\n<div\n  class=\"acp-dialog-header\"\n  cdkDrag\n  cdkDragRootElement=\".cdk-overlay-pane\"\n  cdkDragHandle\n  #dialogHeader\n  (mousedown)=\"bringToFront()\"\n>\n  <h6 mat-dialog-title class=\"acp-dialog-title\">\n    @if (config.icon) {\n    <mat-icon class=\"acp-dialog-title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n    }\n    <span>{{ config.title }}</span>\n    @if (config.showCloseButton !== false) {\n    <acp-button\n      [customClass]=\"'acp-dialog-close-btn'\"\n      matStyle=\"icon\"\n      icon=\"close\"\n      (handleClick)=\"onClose()\"\n      ariaLabel=\"Close Dialog\"\n    />\n    }\n  </h6>\n</div>\n}\n\n<ng-template #contentHost />\n", styles: [".acp-dialog-header{cursor:move;border-bottom:1px solid var(--mat-sys-outline-variant, #dee2e6);color:var(--mat-sys-on-surface, #212529);position:relative}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%;padding-right:48px}.acp-dialog-title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}mat-dialog-content{padding:24px}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DialogWrapper, decorators: [{
             type: Component,
@@ -762,7 +1069,7 @@ class DynamicSelect {
         this._onDestroy.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DynamicSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: DynamicSelect, isStandalone: true, selector: "acp-dynamic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectOnTab: { classPropertyName: "selectOnTab", publicName: "selectOnTab", isSignal: true, isRequired: false, transformFunction: null }, openOnEnter: { classPropertyName: "openOnEnter", publicName: "openOnEnter", isSignal: true, isRequired: false, transformFunction: null }, selectableGroup: { classPropertyName: "selectableGroup", publicName: "selectableGroup", isSignal: true, isRequired: false, transformFunction: null }, selectableGroupAsModel: { classPropertyName: "selectableGroupAsModel", publicName: "selectableGroupAsModel", isSignal: true, isRequired: false, transformFunction: null }, clearOnBackspace: { classPropertyName: "clearOnBackspace", publicName: "clearOnBackspace", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, searchWhileComposing: { classPropertyName: "searchWhileComposing", publicName: "searchWhileComposing", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, editableSearchTerm: { classPropertyName: "editableSearchTerm", publicName: "editableSearchTerm", isSignal: true, isRequired: false, transformFunction: null }, typeToSearchText: { classPropertyName: "typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null }, addTagText: { classPropertyName: "addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<ng-select\n  [items]=\"filteredOptions\"\n  bindLabel=\"viewValue\"\n  bindValue=\"value\"\n  [searchable]=\"searchable()\"\n  [clearable]=\"clearable()\"\n  [formControl]=\"selectControl\"\n  [placeholder]=\"placeholder() || label()\"\n  [loading]=\"loading\"\n  [virtualScroll]=\"virtualScroll()\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [closeOnSelect]=\"closeOnSelect()\"\n  [hideSelected]=\"hideSelected()\"\n  [multiple]=\"multiple()\"\n  [selectOnTab]=\"selectOnTab()\"\n  [openOnEnter]=\"openOnEnter()\"\n  [selectableGroup]=\"selectableGroup()\"\n  [selectableGroupAsModel]=\"selectableGroupAsModel()\"\n  [clearOnBackspace]=\"clearOnBackspace()\"\n  [readonly]=\"readonly()\"\n  [searchWhileComposing]=\"searchWhileComposing()\"\n  [minTermLength]=\"minTermLength()\"\n  [editableSearchTerm]=\"editableSearchTerm()\"\n  [typeToSearchText]=\"typeToSearchText()\"\n  [addTagText]=\"addTagText()\"\n  [loadingText]=\"loadingText()\"\n  [clearAllText]=\"clearAllText()\"\n  [notFoundText]=\"notFoundText()\"\n  (change)=\"onSelectionChange($event)\"\n  [ngClass]=\"className()\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1$2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: DynamicSelect, isStandalone: true, selector: "acp-dynamic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectOnTab: { classPropertyName: "selectOnTab", publicName: "selectOnTab", isSignal: true, isRequired: false, transformFunction: null }, openOnEnter: { classPropertyName: "openOnEnter", publicName: "openOnEnter", isSignal: true, isRequired: false, transformFunction: null }, selectableGroup: { classPropertyName: "selectableGroup", publicName: "selectableGroup", isSignal: true, isRequired: false, transformFunction: null }, selectableGroupAsModel: { classPropertyName: "selectableGroupAsModel", publicName: "selectableGroupAsModel", isSignal: true, isRequired: false, transformFunction: null }, clearOnBackspace: { classPropertyName: "clearOnBackspace", publicName: "clearOnBackspace", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, searchWhileComposing: { classPropertyName: "searchWhileComposing", publicName: "searchWhileComposing", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, editableSearchTerm: { classPropertyName: "editableSearchTerm", publicName: "editableSearchTerm", isSignal: true, isRequired: false, transformFunction: null }, typeToSearchText: { classPropertyName: "typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null }, addTagText: { classPropertyName: "addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<ng-select\n  [items]=\"filteredOptions\"\n  bindLabel=\"viewValue\"\n  bindValue=\"value\"\n  [searchable]=\"searchable()\"\n  [clearable]=\"clearable()\"\n  [formControl]=\"selectControl\"\n  [placeholder]=\"placeholder() || label()\"\n  [loading]=\"loading\"\n  [virtualScroll]=\"virtualScroll()\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [closeOnSelect]=\"closeOnSelect()\"\n  [hideSelected]=\"hideSelected()\"\n  [multiple]=\"multiple()\"\n  [selectOnTab]=\"selectOnTab()\"\n  [openOnEnter]=\"openOnEnter()\"\n  [selectableGroup]=\"selectableGroup()\"\n  [selectableGroupAsModel]=\"selectableGroupAsModel()\"\n  [clearOnBackspace]=\"clearOnBackspace()\"\n  [readonly]=\"readonly()\"\n  [searchWhileComposing]=\"searchWhileComposing()\"\n  [minTermLength]=\"minTermLength()\"\n  [editableSearchTerm]=\"editableSearchTerm()\"\n  [typeToSearchText]=\"typeToSearchText()\"\n  [addTagText]=\"addTagText()\"\n  [loadingText]=\"loadingText()\"\n  [clearAllText]=\"clearAllText()\"\n  [notFoundText]=\"notFoundText()\"\n  (change)=\"onSelectionChange($event)\"\n  [ngClass]=\"className()\"\n/>\n", dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1$3.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DynamicSelect, decorators: [{
             type: Component,
@@ -773,7 +1080,7 @@ class UserIcon {
     size = input('35', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: UserIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: UserIcon, isStandalone: true, selector: "acp-user-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n  [attr.width]=\"size()\"\n  [attr.height]=\"size()\"\n  version=\"1.1\"\n  id=\"Capa_1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  viewBox=\"0 0 480 480\"\n  xml:space=\"preserve\"\n  fill=\"#000000\"\n>\n  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n  <g id=\"SVGRepo_iconCarrier\">\n    <g>\n      <g>\n        <circle style=\"fill: #b8bac0\" cx=\"240\" cy=\"240\" r=\"240\"></circle>\n      </g>\n      <g>\n        <g>\n          <path\n            style=\"fill: #ffffff\"\n            d=\"M240,360.07c-27.944,0-53.297-11.991-72.003-31.372c-0.014,11.615-0.436,28.379-3.516,40.611 c2.02,1.235,3.588,3.262,3.894,5.784c3.992,32.484,34.781,56.977,71.625,56.977c36.836,0,67.625-24.496,71.625-56.977 c0.31-2.525,1.844-4.549,3.895-5.78c-3.08-12.233-3.503-28.999-3.517-40.615C293.297,348.079,267.944,360.07,240,360.07z\"\n          ></path>\n        </g>\n      </g>\n      <g>\n        <g>\n          <path\n            style=\"fill: #d7dbe0\"\n            d=\"M310.44,330.174c-18.549,18.477-43.242,29.896-70.44,29.896 c-27.944,0-53.297-11.991-72.003-31.372c-0.014,11.615-0.436,28.379-3.516,40.611c2.02,1.235,3.588,3.262,3.894,5.784 c1.765,14.359,8.778,27.144,19.223,36.954C235.766,405.265,290.437,357.702,310.44,330.174z\"\n          ></path>\n        </g>\n      </g>\n      <g>\n        <g>\n          <path\n            style=\"fill: #ffffff\"\n            d=\"M312,160.07H176c-22.055,0-40,17.945-40,40v48c0,61.758,46.656,112,104,112s104-50.242,104-112 v-56C344,174.426,329.648,160.07,312,160.07z\"\n          ></path>\n        </g>\n      </g>\n      <g>\n        <g>\n          <path\n            style=\"fill: #5c546a\"\n            d=\"M296,72.07H192c-15.047,0-27.695,10.438-31.102,24.449C133.359,100.02,112,123.598,112,152.07v40 c0,20.617,8.752,39.851,24,53.52v-45.52c0-22.055,17.945-40,40-40h136c17.648,0,32,14.355,32,32v53.511 c15.251-13.667,24-32.899,24-53.511v-48C368,104.371,335.703,72.07,296,72.07z\"\n          ></path>\n        </g>\n      </g>\n      <g>\n        <path\n          style=\"fill: #5c546a\"\n          d=\"M61.632,400.544C105.562,449.319,169.191,480,240,480s134.438-30.681,178.368-79.456 c-7.66-10.356-18.462-18.77-32.352-22.659c-0.32-0.09-0.641-0.16-0.969-0.207l-63.859-9.582c-0.391-0.059-1.227-0.09-1.625-0.09 c-4.039,0-7.445,3.012-7.938,7.023c-4,32.48-34.789,56.977-71.625,56.977c-36.844,0-67.633-24.492-71.625-56.977 c-0.5-4.129-4.219-7.234-8.141-7.02c-0.469-0.027-0.93,0.012-1.422,0.086l-63.859,9.582c-0.328,0.047-0.648,0.117-0.969,0.207 C80.094,381.775,69.292,390.188,61.632,400.544z\"\n        ></path>\n      </g>\n    </g>\n  </g>\n</svg>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: UserIcon, isStandalone: true, selector: "acp-user-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n  [attr.width]=\"size()\"\n  [attr.height]=\"size()\"\n  version=\"1.1\"\n  id=\"Capa_1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  viewBox=\"0 0 480 480\"\n  xml:space=\"preserve\"\n  fill=\"#000000\"\n>\n  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n  <g id=\"SVGRepo_iconCarrier\">\n    <g>\n      <g>\n        <circle style=\"fill: #b8bac0\" cx=\"240\" cy=\"240\" r=\"240\"></circle>\n      </g>\n      <g>\n        <g>\n          <path\n            style=\"fill: #ffffff\"\n            d=\"M240,360.07c-27.944,0-53.297-11.991-72.003-31.372c-0.014,11.615-0.436,28.379-3.516,40.611 c2.02,1.235,3.588,3.262,3.894,5.784c3.992,32.484,34.781,56.977,71.625,56.977c36.836,0,67.625-24.496,71.625-56.977 c0.31-2.525,1.844-4.549,3.895-5.78c-3.08-12.233-3.503-28.999-3.517-40.615C293.297,348.079,267.944,360.07,240,360.07z\"\n          ></path>\n        </g>\n      </g>\n      <g>\n        <g>\n          <path\n            style=\"fill: #d7dbe0\"\n            d=\"M310.44,330.174c-18.549,18.477-43.242,29.896-70.44,29.896 c-27.944,0-53.297-11.991-72.003-31.372c-0.014,11.615-0.436,28.379-3.516,40.611c2.02,1.235,3.588,3.262,3.894,5.784 c1.765,14.359,8.778,27.144,19.223,36.954C235.766,405.265,290.437,357.702,310.44,330.174z\"\n          ></path>\n        </g>\n      </g>\n      <g>\n        <g>\n          <path\n            style=\"fill: #ffffff\"\n            d=\"M312,160.07H176c-22.055,0-40,17.945-40,40v48c0,61.758,46.656,112,104,112s104-50.242,104-112 v-56C344,174.426,329.648,160.07,312,160.07z\"\n          ></path>\n        </g>\n      </g>\n      <g>\n        <g>\n          <path\n            style=\"fill: #5c546a\"\n            d=\"M296,72.07H192c-15.047,0-27.695,10.438-31.102,24.449C133.359,100.02,112,123.598,112,152.07v40 c0,20.617,8.752,39.851,24,53.52v-45.52c0-22.055,17.945-40,40-40h136c17.648,0,32,14.355,32,32v53.511 c15.251-13.667,24-32.899,24-53.511v-48C368,104.371,335.703,72.07,296,72.07z\"\n          ></path>\n        </g>\n      </g>\n      <g>\n        <path\n          style=\"fill: #5c546a\"\n          d=\"M61.632,400.544C105.562,449.319,169.191,480,240,480s134.438-30.681,178.368-79.456 c-7.66-10.356-18.462-18.77-32.352-22.659c-0.32-0.09-0.641-0.16-0.969-0.207l-63.859-9.582c-0.391-0.059-1.227-0.09-1.625-0.09 c-4.039,0-7.445,3.012-7.938,7.023c-4,32.48-34.789,56.977-71.625,56.977c-36.844,0-67.633-24.492-71.625-56.977 c-0.5-4.129-4.219-7.234-8.141-7.02c-0.469-0.027-0.93,0.012-1.422,0.086l-63.859,9.582c-0.328,0.047-0.648,0.117-0.969,0.207 C80.094,381.775,69.292,390.188,61.632,400.544z\"\n        ></path>\n      </g>\n    </g>\n  </g>\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: UserIcon, decorators: [{
             type: Component,
@@ -1033,7 +1340,7 @@ class InputChip {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: InputChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: InputChip, isStandalone: true, selector: "acp-input-chip", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: true, transformFunction: null }, placelholder: { classPropertyName: "placelholder", publicName: "placelholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field class=\"w-100\" appearance=\"outline\">\n  <mat-label>{{ labelText() }}</mat-label>\n  <mat-chip-grid #chipGrid aria-label=\"Enter fruits\">\n    @for (chip of chips(); track $index) {\n    <mat-chip-row\n      (removed)=\"remove(chip)\"\n      [editable]=\"true\"\n      (edited)=\"edit(chip, $event)\"\n      [aria-description]=\"'press enter to edit ' + chip\"\n    >\n      {{ chip }}\n      <button matChipRemove [attr.aria-label]=\"'remove ' + chip\">\n        <mat-icon>cancel</mat-icon>\n      </button>\n    </mat-chip-row>\n    }\n    <input\n      [placeholder]=\"placelholder()\"\n      [matChipInputFor]=\"chipGrid\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n      [matChipInputAddOnBlur]=\"addOnBlur\"\n      (matChipInputTokenEnd)=\"add($event)\"\n    />\n  </mat-chip-grid>\n  <mat-hint align=\"start\"><strong>Ingrese {{ labelText() }} y dale \"Enter\"</strong> </mat-hint>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: InputChip, isStandalone: true, selector: "acp-input-chip", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: true, transformFunction: null }, placelholder: { classPropertyName: "placelholder", publicName: "placelholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field class=\"w-100\" appearance=\"outline\">\n  <mat-label>{{ labelText() }}</mat-label>\n  <mat-chip-grid #chipGrid aria-label=\"Enter fruits\">\n    @for (chip of chips(); track $index) {\n    <mat-chip-row\n      (removed)=\"remove(chip)\"\n      [editable]=\"true\"\n      (edited)=\"edit(chip, $event)\"\n      [aria-description]=\"'press enter to edit ' + chip\"\n    >\n      {{ chip }}\n      <button matChipRemove [attr.aria-label]=\"'remove ' + chip\">\n        <mat-icon>cancel</mat-icon>\n      </button>\n    </mat-chip-row>\n    }\n    <input\n      [placeholder]=\"placelholder()\"\n      [matChipInputFor]=\"chipGrid\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n      [matChipInputAddOnBlur]=\"addOnBlur\"\n      (matChipInputTokenEnd)=\"add($event)\"\n    />\n  </mat-chip-grid>\n  <mat-hint align=\"start\"><strong>Ingrese {{ labelText() }} y dale \"Enter\"</strong> </mat-hint>\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: InputChip, decorators: [{
             type: Component,
@@ -1114,8 +1421,9 @@ class TabulatorTable {
     rowSelected = output();
     tableReady = output();
     _tabulator;
+    static instanceCounter = 0;
     // Made public for template access
-    containerId = `acp-tabulator-table-${Math.random().toString(36).slice(2, 9)}`;
+    containerId = `acp-tabulator-table-${TabulatorTable.instanceCounter++}`;
     ngAfterViewInit() {
         this.initializeTable();
     }
@@ -1352,11 +1660,14 @@ class AdvancedDialogService {
         dialogConfig.panelClass = ['full-screen-dialog'];
     }
     applyStandardConfig(dialogConfig, config) {
-        dialogConfig.width = config.width ?? this.getDialogWidth(config.size);
+        const width = config.width ?? this.getDialogWidth(config.size);
+        dialogConfig.width = width;
         dialogConfig.height = config.height;
         dialogConfig.minWidth = config.minWidth;
-        dialogConfig.maxWidth = config.maxWidth ?? '95vw';
-        dialogConfig.maxHeight = config.maxHeight ?? 'auto';
+        const maxWidth = config.maxWidth ?? '95vw';
+        dialogConfig.maxWidth = maxWidth;
+        const maxHeight = config.maxHeight ?? 'auto';
+        dialogConfig.maxHeight = maxHeight;
         dialogConfig.position = config.position;
     }
     applyCommonConfig(dialogConfig, config) {
@@ -1453,7 +1764,7 @@ class ThemeSwitcher {
         }
         else {
             // Check system preference
-            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const prefersDark = globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
             this._darkMode.next(prefersDark);
             this.applyTheme(prefersDark);
         }
@@ -1479,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.
@@ -1954,482 +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 hidePageSize Whether to hide the page size selector
-     * @param showPageSizeOptions Whether to show page size options
-     * @param showFirstLastButtons Whether to show first/last buttons
-     * @param disabled Whether the paginator is disabled
-     */
-    constructor(pageIndex = 0, // MatPaginator starts at 0
-    pageSize = 25, totalRecords = 0, pageSizeOptions = [25, 50, 75, 100], hidePageSize = false, showPageSizeOptions = true, showFirstLastButtons = true, disabled = false) {
-        this.pageIndex = pageIndex;
-        this.pageSize = pageSize;
-        this.totalRecords = totalRecords;
-        this.pageSizeOptions = pageSizeOptions;
-        this.hidePageSize = hidePageSize;
-        this.showPageSizeOptions = showPageSizeOptions;
-        this.showFirstLastButtons = showFirstLastButtons;
-        this.disabled = disabled;
-    }
-    /**
-     * 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 {
-    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(() => {
-        // if (!this.config.enablePagination) {
-        // }
-        return this.filteredItems();
-        // return this.autocompleteService.paginateItems(
-        //   this.filteredItems(),
-        //   this.currentPage(),
-        //   this.config.itemsPerPage || 10
-        // );
-    }, /* @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':
-                event.preventDefault();
-                if (maxIndex >= 0) {
-                    const nextIndex = this.selectedIndex() < maxIndex ? this.selectedIndex() + 1 : 0;
-                    this.selectedIndex.set(nextIndex);
-                    this.scrollToSelected();
-                }
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                if (maxIndex >= 0) {
-                    const prevIndex = this.selectedIndex() > 0 ? this.selectedIndex() - 1 : maxIndex;
-                    this.selectedIndex.set(prevIndex);
-                    this.scrollToSelected();
-                }
-                break;
-            case 'Enter':
-                event.preventDefault();
-                if (this.selectedIndex() >= 0 && this.selectedIndex() <= maxIndex) {
-                    this.selectItem(currentList[this.selectedIndex()]);
-                }
-                break;
-            case 'Escape':
-                event.preventDefault();
-                this.hideOverlay();
-                break;
-            case 'PageDown':
-                event.preventDefault();
-                if (!this.isHistoryVisible() && this.config.enablePagination) {
-                    this.goToNextPage();
-                }
-                break;
-            case 'PageUp':
-                event.preventDefault();
-                if (!this.isHistoryVisible() && this.config.enablePagination) {
-                    this.goToPreviousPage();
-                }
-                break;
-        }
-    }
-    onFilterChange() {
-        this.currentPage.set(1);
-        if (this.query.length >= (this.config.minSearchLength || 2)) {
-            this.performSearch(this.query);
-            this.searchSubjectNext();
-        }
-        // this.filterChanged.emit(this.filters);
-    }
-    // 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 = 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) {
-        //$event.stopPropagation();
-        // this.hideOverlay();
-        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  <!-- Input Container -->\n  <div\n    class=\"acp-autocomplete-wrapper-input-container\"\n    cdkOverlayOrigin\n    #overlayPosition=\"cdkOverlayOrigin\"\n  >\n    <div class=\"acp-autocomplete-wrapper-input-wrapper\">\n      <mat-icon class=\"acp-autocomplete-wrapper-search-icon\">search</mat-icon>\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"acp-autocomplete-wrapper-input-field\"\n        [placeholder]=\"config.placeholder\"\n        [(ngModel)]=\"query\"\n        (input)=\"onInput($event)\"\n        (click)=\"showOverlay()\"\n        (keydown)=\"onKeyDown($event)\"\n        [disabled]=\"config.disabled || false\"\n        autocomplete=\"off\"\n      />\n      @if (query && query.length > 0 && !isLoading()) {\n      <button\n        mat-icon-button\n        (click)=\"clearSearch()\"\n        type=\"button\"\n        class=\"acp-autocomplete-wrapper-clear-button\"\n      >\n        <mat-icon>clear</mat-icon>\n      </button>\n      }\n      <button mat-icon-button type=\"button\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n\n    @if (isLoading()) {\n    <div class=\"acp-autocomplete-wrapper-loading-spinner\">\n      <mat-spinner diameter=\"20\" />\n    </div>\n    }\n  </div>\n\n  <!-- Overlay -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"overlayPosition\"\n    [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n    [cdkConnectedOverlayHeight]=\"overlayMaxHeight()\"\n    (overlayOutsideClick)=\"hideOverlay()\"\n    (backdropClick)=\"hideOverlay()\"\n  >\n    <div class=\"autocomplete-wrapper-dropdown\" [class.autocomplete-wrapper-active]=\"overlayOpen()\">\n      <div class=\"autocomplete-wrapper-dropdown-content\">\n        <!-- History Section -->\n        @if (isHistoryVisible() && historyList().length > 0) {\n        <div class=\"autocomplete-wrapper-section\">\n          <div class=\"autocomplete-wrapper-section-header\">\n            <span class=\"autocomplete-wrapper-section-title\">B\u00FAsquedas recientes</span>\n            <button\n              type=\"button\"\n              mat-icon-button\n              (click)=\"clearHistory()\"\n              class=\"autocomplete-wrapper-clear-history-button\"\n            >\n              <mat-icon>delete_outline</mat-icon>\n            </button>\n          </div>\n          <ul\n            class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n            #historyListElement\n          >\n            @for (item of historyList(); track $index) {\n            <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-history-item\">\n              <div\n                class=\"autocomplete-wrapper-item-content\"\n                [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n                tabindex=\"0\"\n                (click)=\"selectItem(item)\"\n                (keydown.enter)=\"selectItem(item)\"\n              >\n                <mat-icon class=\"autocomplete-wrapper-history-icon\">history</mat-icon>\n                <div class=\"autocomplete-wrapper-item-details\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                          itemTemplate() || defaultItemTemplate;\n                          context: { $implicit: item }\n                        \"\n                  />\n                </div>\n              </div>\n              <button\n                type=\"button\"\n                mat-icon-button\n                class=\"autocomplete-wrapper-remove-button\"\n                (click)=\"removeHistoryItem($index, $event)\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </li>\n            }\n          </ul>\n        </div>\n        }\n\n        <!-- Results Section -->\n        @if (!isHistoryVisible()) {\n        <div class=\"autocomplete-wrapper-section\">\n          <!-- Header with filters and pagination -->\n          @if (config.enableFilters || config.enablePagination) {\n          <div class=\"autocomplete-wrapper-section-header\">\n            <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n\n            <!-- Filters -->\n            @if (config.enableFilters) {\n            <div class=\"autocomplete-wrapper-filter-controls\">\n              @if (config.searchFields && config.searchFields.length > 1) {\n              <div class=\"autocomplete-wrapper-filter-group\">\n                <label class=\"autocomplete-wrapper-filter-label\" for=\"searchBySelect\"\n                  >Buscar por:</label\n                >\n                <select\n                  id=\"searchBySelect\"\n                  class=\"autocomplete-wrapper-filter-select\"\n                  [(ngModel)]=\"filters.searchBy\"\n                  (change)=\"onFilterChange()\"\n                >\n                  @for (field of config.searchFields; track $index) {\n                  <option [value]=\"field.value\">{{ field.label }}</option>\n                  }\n                </select>\n              </div>\n              } @if (config.enableStockFilter && config.stockOptions) {\n              <div class=\"autocomplete-wrapper-filter-group\">\n                <label class=\"autocomplete-wrapper-filter-label\" for=\"stockSelect\">Stock:</label>\n                <select\n                  id=\"stockSelect\"\n                  class=\"autocomplete-wrapper-filter-select\"\n                  [(ngModel)]=\"filters.stockFilter\"\n                  (change)=\"onFilterChange()\"\n                >\n                  @for (option of config.stockOptions; track $index) {\n                  <option [value]=\"option.value\">{{ option.label }}</option>\n                  }\n                </select>\n              </div>\n              }\n            </div>\n            }\n\n            <!-- Pagination Controls -->\n            @if (config.enablePagination && totalPages() > 1) {\n            <div class=\"autocomplete-wrapper-pagination-header\">\n              <div class=\"autocomplete-wrapper-pagination-info\">\n                <span>P\u00E1gina {{ currentPage() }} de {{ totalPages() }}</span>\n              </div>\n              <div class=\"autocomplete-wrapper-pagination-controls\">\n                <button\n                  class=\"autocomplete-wrapper-pagination-button\"\n                  (click)=\"goToFirstPage()\"\n                  [disabled]=\"currentPage() === 1\"\n                >\n                  <mat-icon>first_page</mat-icon>\n                </button>\n                <button\n                  class=\"autocomplete-wrapper-pagination-button\"\n                  (click)=\"goToPreviousPage()\"\n                  [disabled]=\"currentPage() === 1\"\n                >\n                  <mat-icon>chevron_left</mat-icon>\n                </button>\n                <input\n                  type=\"number\"\n                  class=\"autocomplete-wrapper-page-input\"\n                  [value]=\"currentPage()\"\n                  [min]=\"1\"\n                  [max]=\"totalPages()\"\n                  (change)=\"goToPage($event)\"\n                />\n                <button\n                  class=\"autocomplete-wrapper-pagination-button\"\n                  (click)=\"goToNextPage()\"\n                  [disabled]=\"currentPage() === totalPages()\"\n                >\n                  <mat-icon>chevron_right</mat-icon>\n                </button>\n                <button\n                  class=\"autocomplete-wrapper-pagination-button\"\n                  (click)=\"goToLastPage()\"\n                  [disabled]=\"currentPage() === totalPages()\"\n                >\n                  <mat-icon>last_page</mat-icon>\n                </button>\n              </div>\n            </div>\n            }\n          </div>\n          } @else {\n          <div class=\"autocomplete-wrapper-section-header\">\n            <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n          </div>\n          }\n\n          <!-- Items List -->\n          @if (totalItems()) {\n          <ul\n            class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n            #resultsListElement\n          >\n            @for (item of currentPageItems(); track $index) {\n            <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-result-item\">\n              <div\n                class=\"autocomplete-wrapper-item-content\"\n                [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n                tabindex=\"0\"\n                (click)=\"selectItem(item)\"\n                (keydown.enter)=\"selectItem(item)\"\n              >\n                <div class=\"autocomplete-wrapper-item-info\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                            itemTemplate() || defaultItemTemplate;\n                            context: { $implicit: item }\n                          \"\n                  />\n                </div>\n              </div>\n            </li>\n            }\n          </ul>\n          }\n        </div>\n        }\n\n        <!-- No Results -->\n        @if (!isLoading() && isNoResults()) {\n        <div class=\"autocomplete-wrapper-no-results\">\n          <mat-icon class=\"autocomplete-wrapper-no-results-icon\">search_off</mat-icon>\n          <div class=\"autocomplete-wrapper-no-results-content\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                  notFoundTemplate() || defaultNotFoundTemplate;\n                  context: { $implicit: noResultsText() }\n                \"\n            />\n          </div>\n        </div>\n        }\n\n        <!-- Footer -->\n        @if (overlayOpen() && totalItems() > 0) {\n        <div class=\"autocomplete-wrapper-footer\">\n          @if (!isHistoryVisible() && totalItems() > 0 && config.enablePagination) {\n          <div class=\"autocomplete-wrapper-pagination-footer\">\n            <div class=\"autocomplete-wrapper-pagination-summary\">\n              Mostrando {{ startItem() }}-{{ endItem() }} de {{ totalCount() }} resultados\n            </div>\n            <div class=\"autocomplete-wrapper-pagination-controls-footer\">\n              <button\n                class=\"autocomplete-wrapper-pagination-button\"\n                (click)=\"goToPreviousPage()\"\n                [disabled]=\"currentPage() === 1\"\n              >\n                <mat-icon>chevron_left</mat-icon>\n              </button>\n              <span class=\"autocomplete-wrapper-page-indicator\"\n                >{{ currentPage() }} / {{ totalPages() }}</span\n              >\n              <button\n                class=\"autocomplete-wrapper-pagination-button\"\n                (click)=\"goToNextPage()\"\n                [disabled]=\"currentPage() === totalPages()\"\n              >\n                <mat-icon>chevron_right</mat-icon>\n              </button>\n            </div>\n          </div>\n          } @if (config.enableFooterActions) {\n          <div class=\"autocomplete-wrapper-footer-actions\">\n            <button\n              class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-create-button\"\n              (click)=\"onCreateNew($event)\"\n            >\n              <mat-icon>add</mat-icon>\n              <span class=\"autocomplete-wrapper-button-text\">Crear</span>\n            </button>\n            <button\n              class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-search-button\"\n              (click)=\"onAdvancedSearch()\"\n            >\n              <mat-icon>tune</mat-icon>\n              <span class=\"autocomplete-wrapper-button-text\">Avanzada</span>\n            </button>\n            @if (!isHistoryVisible() && totalItems() > 0) {\n            <button\n              class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-results-button\"\n              (click)=\"onShowAllResults()\"\n            >\n              <mat-icon>list</mat-icon>\n              <span class=\"autocomplete-wrapper-button-text\">Todos</span>\n            </button>\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Default Templates -->\n  <ng-template #defaultItemTemplate let-item>\n    <div class=\"autocomplete-wrapper-default-item\">\n      <div class=\"autocomplete-wrapper-item-name\">{{ getItemDisplayText(item) }}</div>\n      @if (item.description && typeof item === 'object') {\n      <div class=\"autocomplete-wrapper-item-description\">{{ item.description }}</div>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #defaultNotFoundTemplate let-text>\n    <div class=\"autocomplete-wrapper-default-no-results\">\n      <p>{{ text }}</p>\n      <p>Intenta con otros t\u00E9rminos de b\u00FAsqueda</p>\n    </div>\n  </ng-template>\n</div>\n", styles: [".acp-autocomplete-wrapper{display:block}.acp-autocomplete-wrapper{position:relative;width:100%;max-width:100%}.acp-autocomplete-wrapper.acp-autocomplete-wrapper-active .acp-autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-input-container{position:relative;width:100%}.acp-autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:var(--mat-sys-surface, white);border:1px solid var(--mat-sys-outline-variant, #e0e0e0);border-radius:8px;padding:0 12px;transition:all .3s ease}.acp-autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-search-icon{color:var(--mat-sys-on-surface-variant, #666);margin-right:8px;font-size:20px}.acp-autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-input-field::placeholder{color:var(--mat-sys-on-surface-variant, #999)}.acp-autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.acp-autocomplete-wrapper-clear-button{margin-left:8px;color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.acp-autocomplete-wrapper-dropdown{background:var(--mat-sys-surface-container, white);border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid var(--mat-sys-outline-variant, #e0e0e0);overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.acp-autocomplete-wrapper-dropdown.acp-autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.acp-autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.acp-autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.acp-autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:var(--mat-sys-on-surface-variant, #666);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.acp-autocomplete-wrapper-clear-history-button{color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.acp-autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.acp-autocomplete-wrapper-filter-label{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);font-weight:500;white-space:nowrap}.acp-autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;font-size:12px;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, #333);cursor:pointer;min-width:120px}.acp-autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.acp-autocomplete-wrapper-filter-select:hover{border-color:#bbb}.acp-autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.acp-autocomplete-wrapper-pagination-info{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.acp-autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:var(--mat-sys-on-surface-variant, #666);background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.acp-autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.acp-autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.acp-autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.acp-autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.acp-autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{overflow-y:auto}.acp-autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid var(--mat-sys-outline-variant, #f5f5f5);transition:background-color .2s ease}.acp-autocomplete-wrapper-list-item:last-child{border-bottom:none}.acp-autocomplete-wrapper-list-item:hover{background-color:var(--mat-sys-surface-variant, #f8f9fa)}.acp-autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.acp-autocomplete-wrapper-item-content.acp-autocomplete-wrapper-selected{background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #1976d2)}.acp-autocomplete-wrapper-history-item .acp-autocomplete-wrapper-item-content{padding-left:12px}.acp-autocomplete-wrapper-history-icon{color:var(--mat-sys-on-surface-variant, #999);margin-right:12px;font-size:18px}.acp-autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-remove-button{margin-right:8px}.acp-autocomplete-wrapper-result-item{position:relative}.acp-autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-default-item{flex:1}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-description{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:var(--mat-sys-on-surface-variant, #666)}.acp-autocomplete-wrapper-no-results-icon{font-size:48px;color:var(--mat-sys-outline, #ccc);margin-bottom:16px;width:45px;height:45px}.acp-autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.acp-autocomplete-wrapper-default-no-results{text-align:center}.acp-autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.acp-autocomplete-wrapper-footer{border-top:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.acp-autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.acp-autocomplete-wrapper-pagination-summary{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.acp-autocomplete-wrapper-page-indicator{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);min-width:40px;text-align:center}.acp-autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.acp-autocomplete-wrapper-footer-button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;font-size:13px;text-transform:none;white-space:nowrap;background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button{background-color:#4caf500a;border-color:#4caf50;color:#4caf50}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button:hover{background-color:#4caf5014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button{background-color:#ff98000a;border-color:#ff9800;color:#ff9800}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button:hover{background-color:#ff980014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button{background-color:#3f51b50a;border-color:#3f51b5;color:#3f51b5}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button:hover{background-color:#3f51b514}.acp-autocomplete-wrapper-button-text{display:inline}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}@media(max-width:768px){.acp-autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.acp-autocomplete-wrapper-dropdown-content{max-height:60vh}.acp-autocomplete-wrapper-input-field{font-size:16px}.acp-autocomplete-wrapper-footer{padding:8px 12px}.acp-autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.acp-autocomplete-wrapper-footer-button{width:100%;min-height:44px}.acp-autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.acp-autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.acp-autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.acp-autocomplete-wrapper-filter-label{font-size:11px}.acp-autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.acp-autocomplete-wrapper-pagination-header .acp-autocomplete-wrapper-pagination-info{display:none}.acp-autocomplete-wrapper-pagination-controls{gap:2px}.acp-autocomplete-wrapper-page-input{width:40px}.acp-autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.acp-autocomplete-wrapper-button-text{font-size:12px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:250px}}@media(max-width:480px){.acp-autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.acp-autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.acp-autocomplete-wrapper-filter-controls{gap:8px}.acp-autocomplete-wrapper-filter-group{gap:4px}.acp-autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.acp-autocomplete-wrapper-item-content{padding:14px 12px}.acp-autocomplete-wrapper-pagination-header{gap:8px}.acp-autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.acp-autocomplete-wrapper-page-input{width:35px;height:28px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:200px}.acp-autocomplete-wrapper-footer-actions{gap:4px}.acp-autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.acp-autocomplete-wrapper-button-text{display:none}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
-}
-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  <!-- Input Container -->\n  <div\n    class=\"acp-autocomplete-wrapper-input-container\"\n    cdkOverlayOrigin\n    #overlayPosition=\"cdkOverlayOrigin\"\n  >\n    <div class=\"acp-autocomplete-wrapper-input-wrapper\">\n      <mat-icon class=\"acp-autocomplete-wrapper-search-icon\">search</mat-icon>\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"acp-autocomplete-wrapper-input-field\"\n        [placeholder]=\"config.placeholder\"\n        [(ngModel)]=\"query\"\n        (input)=\"onInput($event)\"\n        (click)=\"showOverlay()\"\n        (keydown)=\"onKeyDown($event)\"\n        [disabled]=\"config.disabled || false\"\n        autocomplete=\"off\"\n      />\n      @if (query && query.length > 0 && !isLoading()) {\n      <button\n        mat-icon-button\n        (click)=\"clearSearch()\"\n        type=\"button\"\n        class=\"acp-autocomplete-wrapper-clear-button\"\n      >\n        <mat-icon>clear</mat-icon>\n      </button>\n      }\n      <button mat-icon-button type=\"button\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n\n    @if (isLoading()) {\n    <div class=\"acp-autocomplete-wrapper-loading-spinner\">\n      <mat-spinner diameter=\"20\" />\n    </div>\n    }\n  </div>\n\n  <!-- Overlay -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"overlayPosition\"\n    [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n    [cdkConnectedOverlayHeight]=\"overlayMaxHeight()\"\n    (overlayOutsideClick)=\"hideOverlay()\"\n    (backdropClick)=\"hideOverlay()\"\n  >\n    <div class=\"autocomplete-wrapper-dropdown\" [class.autocomplete-wrapper-active]=\"overlayOpen()\">\n      <div class=\"autocomplete-wrapper-dropdown-content\">\n        <!-- History Section -->\n        @if (isHistoryVisible() && historyList().length > 0) {\n        <div class=\"autocomplete-wrapper-section\">\n          <div class=\"autocomplete-wrapper-section-header\">\n            <span class=\"autocomplete-wrapper-section-title\">B\u00FAsquedas recientes</span>\n            <button\n              type=\"button\"\n              mat-icon-button\n              (click)=\"clearHistory()\"\n              class=\"autocomplete-wrapper-clear-history-button\"\n            >\n              <mat-icon>delete_outline</mat-icon>\n            </button>\n          </div>\n          <ul\n            class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n            #historyListElement\n          >\n            @for (item of historyList(); track $index) {\n            <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-history-item\">\n              <div\n                class=\"autocomplete-wrapper-item-content\"\n                [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n                tabindex=\"0\"\n                (click)=\"selectItem(item)\"\n                (keydown.enter)=\"selectItem(item)\"\n              >\n                <mat-icon class=\"autocomplete-wrapper-history-icon\">history</mat-icon>\n                <div class=\"autocomplete-wrapper-item-details\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                          itemTemplate() || defaultItemTemplate;\n                          context: { $implicit: item }\n                        \"\n                  />\n                </div>\n              </div>\n              <button\n                type=\"button\"\n                mat-icon-button\n                class=\"autocomplete-wrapper-remove-button\"\n                (click)=\"removeHistoryItem($index, $event)\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </li>\n            }\n          </ul>\n        </div>\n        }\n\n        <!-- Results Section -->\n        @if (!isHistoryVisible()) {\n        <div class=\"autocomplete-wrapper-section\">\n          <!-- Header with filters and pagination -->\n          @if (config.enableFilters || config.enablePagination) {\n          <div class=\"autocomplete-wrapper-section-header\">\n            <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n\n            <!-- Filters -->\n            @if (config.enableFilters) {\n            <div class=\"autocomplete-wrapper-filter-controls\">\n              @if (config.searchFields && config.searchFields.length > 1) {\n              <div class=\"autocomplete-wrapper-filter-group\">\n                <label class=\"autocomplete-wrapper-filter-label\" for=\"searchBySelect\"\n                  >Buscar por:</label\n                >\n                <select\n                  id=\"searchBySelect\"\n                  class=\"autocomplete-wrapper-filter-select\"\n                  [(ngModel)]=\"filters.searchBy\"\n                  (change)=\"onFilterChange()\"\n                >\n                  @for (field of config.searchFields; track $index) {\n                  <option [value]=\"field.value\">{{ field.label }}</option>\n                  }\n                </select>\n              </div>\n              } @if (config.enableStockFilter && config.stockOptions) {\n              <div class=\"autocomplete-wrapper-filter-group\">\n                <label class=\"autocomplete-wrapper-filter-label\" for=\"stockSelect\">Stock:</label>\n                <select\n                  id=\"stockSelect\"\n                  class=\"autocomplete-wrapper-filter-select\"\n                  [(ngModel)]=\"filters.stockFilter\"\n                  (change)=\"onFilterChange()\"\n                >\n                  @for (option of config.stockOptions; track $index) {\n                  <option [value]=\"option.value\">{{ option.label }}</option>\n                  }\n                </select>\n              </div>\n              }\n            </div>\n            }\n\n            <!-- Pagination Controls -->\n            @if (config.enablePagination && totalPages() > 1) {\n            <div class=\"autocomplete-wrapper-pagination-header\">\n              <div class=\"autocomplete-wrapper-pagination-info\">\n                <span>P\u00E1gina {{ currentPage() }} de {{ totalPages() }}</span>\n              </div>\n              <div class=\"autocomplete-wrapper-pagination-controls\">\n                <button\n                  class=\"autocomplete-wrapper-pagination-button\"\n                  (click)=\"goToFirstPage()\"\n                  [disabled]=\"currentPage() === 1\"\n                >\n                  <mat-icon>first_page</mat-icon>\n                </button>\n                <button\n                  class=\"autocomplete-wrapper-pagination-button\"\n                  (click)=\"goToPreviousPage()\"\n                  [disabled]=\"currentPage() === 1\"\n                >\n                  <mat-icon>chevron_left</mat-icon>\n                </button>\n                <input\n                  type=\"number\"\n                  class=\"autocomplete-wrapper-page-input\"\n                  [value]=\"currentPage()\"\n                  [min]=\"1\"\n                  [max]=\"totalPages()\"\n                  (change)=\"goToPage($event)\"\n                />\n                <button\n                  class=\"autocomplete-wrapper-pagination-button\"\n                  (click)=\"goToNextPage()\"\n                  [disabled]=\"currentPage() === totalPages()\"\n                >\n                  <mat-icon>chevron_right</mat-icon>\n                </button>\n                <button\n                  class=\"autocomplete-wrapper-pagination-button\"\n                  (click)=\"goToLastPage()\"\n                  [disabled]=\"currentPage() === totalPages()\"\n                >\n                  <mat-icon>last_page</mat-icon>\n                </button>\n              </div>\n            </div>\n            }\n          </div>\n          } @else {\n          <div class=\"autocomplete-wrapper-section-header\">\n            <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n          </div>\n          }\n\n          <!-- Items List -->\n          @if (totalItems()) {\n          <ul\n            class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n            #resultsListElement\n          >\n            @for (item of currentPageItems(); track $index) {\n            <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-result-item\">\n              <div\n                class=\"autocomplete-wrapper-item-content\"\n                [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n                tabindex=\"0\"\n                (click)=\"selectItem(item)\"\n                (keydown.enter)=\"selectItem(item)\"\n              >\n                <div class=\"autocomplete-wrapper-item-info\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                            itemTemplate() || defaultItemTemplate;\n                            context: { $implicit: item }\n                          \"\n                  />\n                </div>\n              </div>\n            </li>\n            }\n          </ul>\n          }\n        </div>\n        }\n\n        <!-- No Results -->\n        @if (!isLoading() && isNoResults()) {\n        <div class=\"autocomplete-wrapper-no-results\">\n          <mat-icon class=\"autocomplete-wrapper-no-results-icon\">search_off</mat-icon>\n          <div class=\"autocomplete-wrapper-no-results-content\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                  notFoundTemplate() || defaultNotFoundTemplate;\n                  context: { $implicit: noResultsText() }\n                \"\n            />\n          </div>\n        </div>\n        }\n\n        <!-- Footer -->\n        @if (overlayOpen() && totalItems() > 0) {\n        <div class=\"autocomplete-wrapper-footer\">\n          @if (!isHistoryVisible() && totalItems() > 0 && config.enablePagination) {\n          <div class=\"autocomplete-wrapper-pagination-footer\">\n            <div class=\"autocomplete-wrapper-pagination-summary\">\n              Mostrando {{ startItem() }}-{{ endItem() }} de {{ totalCount() }} resultados\n            </div>\n            <div class=\"autocomplete-wrapper-pagination-controls-footer\">\n              <button\n                class=\"autocomplete-wrapper-pagination-button\"\n                (click)=\"goToPreviousPage()\"\n                [disabled]=\"currentPage() === 1\"\n              >\n                <mat-icon>chevron_left</mat-icon>\n              </button>\n              <span class=\"autocomplete-wrapper-page-indicator\"\n                >{{ currentPage() }} / {{ totalPages() }}</span\n              >\n              <button\n                class=\"autocomplete-wrapper-pagination-button\"\n                (click)=\"goToNextPage()\"\n                [disabled]=\"currentPage() === totalPages()\"\n              >\n                <mat-icon>chevron_right</mat-icon>\n              </button>\n            </div>\n          </div>\n          } @if (config.enableFooterActions) {\n          <div class=\"autocomplete-wrapper-footer-actions\">\n            <button\n              class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-create-button\"\n              (click)=\"onCreateNew($event)\"\n            >\n              <mat-icon>add</mat-icon>\n              <span class=\"autocomplete-wrapper-button-text\">Crear</span>\n            </button>\n            <button\n              class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-search-button\"\n              (click)=\"onAdvancedSearch()\"\n            >\n              <mat-icon>tune</mat-icon>\n              <span class=\"autocomplete-wrapper-button-text\">Avanzada</span>\n            </button>\n            @if (!isHistoryVisible() && totalItems() > 0) {\n            <button\n              class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-results-button\"\n              (click)=\"onShowAllResults()\"\n            >\n              <mat-icon>list</mat-icon>\n              <span class=\"autocomplete-wrapper-button-text\">Todos</span>\n            </button>\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Default Templates -->\n  <ng-template #defaultItemTemplate let-item>\n    <div class=\"autocomplete-wrapper-default-item\">\n      <div class=\"autocomplete-wrapper-item-name\">{{ getItemDisplayText(item) }}</div>\n      @if (item.description && typeof item === 'object') {\n      <div class=\"autocomplete-wrapper-item-description\">{{ item.description }}</div>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #defaultNotFoundTemplate let-text>\n    <div class=\"autocomplete-wrapper-default-no-results\">\n      <p>{{ text }}</p>\n      <p>Intenta con otros t\u00E9rminos de b\u00FAsqueda</p>\n    </div>\n  </ng-template>\n</div>\n", styles: [".acp-autocomplete-wrapper{display:block}.acp-autocomplete-wrapper{position:relative;width:100%;max-width:100%}.acp-autocomplete-wrapper.acp-autocomplete-wrapper-active .acp-autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-input-container{position:relative;width:100%}.acp-autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:var(--mat-sys-surface, white);border:1px solid var(--mat-sys-outline-variant, #e0e0e0);border-radius:8px;padding:0 12px;transition:all .3s ease}.acp-autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-search-icon{color:var(--mat-sys-on-surface-variant, #666);margin-right:8px;font-size:20px}.acp-autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-input-field::placeholder{color:var(--mat-sys-on-surface-variant, #999)}.acp-autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.acp-autocomplete-wrapper-clear-button{margin-left:8px;color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.acp-autocomplete-wrapper-dropdown{background:var(--mat-sys-surface-container, white);border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid var(--mat-sys-outline-variant, #e0e0e0);overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.acp-autocomplete-wrapper-dropdown.acp-autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.acp-autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.acp-autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.acp-autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:var(--mat-sys-on-surface-variant, #666);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.acp-autocomplete-wrapper-clear-history-button{color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.acp-autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.acp-autocomplete-wrapper-filter-label{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);font-weight:500;white-space:nowrap}.acp-autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;font-size:12px;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, #333);cursor:pointer;min-width:120px}.acp-autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.acp-autocomplete-wrapper-filter-select:hover{border-color:#bbb}.acp-autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.acp-autocomplete-wrapper-pagination-info{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.acp-autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:var(--mat-sys-on-surface-variant, #666);background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.acp-autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.acp-autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.acp-autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.acp-autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.acp-autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{overflow-y:auto}.acp-autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid var(--mat-sys-outline-variant, #f5f5f5);transition:background-color .2s ease}.acp-autocomplete-wrapper-list-item:last-child{border-bottom:none}.acp-autocomplete-wrapper-list-item:hover{background-color:var(--mat-sys-surface-variant, #f8f9fa)}.acp-autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.acp-autocomplete-wrapper-item-content.acp-autocomplete-wrapper-selected{background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #1976d2)}.acp-autocomplete-wrapper-history-item .acp-autocomplete-wrapper-item-content{padding-left:12px}.acp-autocomplete-wrapper-history-icon{color:var(--mat-sys-on-surface-variant, #999);margin-right:12px;font-size:18px}.acp-autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-remove-button{margin-right:8px}.acp-autocomplete-wrapper-result-item{position:relative}.acp-autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-default-item{flex:1}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-description{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:var(--mat-sys-on-surface-variant, #666)}.acp-autocomplete-wrapper-no-results-icon{font-size:48px;color:var(--mat-sys-outline, #ccc);margin-bottom:16px;width:45px;height:45px}.acp-autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.acp-autocomplete-wrapper-default-no-results{text-align:center}.acp-autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.acp-autocomplete-wrapper-footer{border-top:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.acp-autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.acp-autocomplete-wrapper-pagination-summary{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.acp-autocomplete-wrapper-page-indicator{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);min-width:40px;text-align:center}.acp-autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.acp-autocomplete-wrapper-footer-button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;font-size:13px;text-transform:none;white-space:nowrap;background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button{background-color:#4caf500a;border-color:#4caf50;color:#4caf50}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button:hover{background-color:#4caf5014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button{background-color:#ff98000a;border-color:#ff9800;color:#ff9800}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button:hover{background-color:#ff980014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button{background-color:#3f51b50a;border-color:#3f51b5;color:#3f51b5}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button:hover{background-color:#3f51b514}.acp-autocomplete-wrapper-button-text{display:inline}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}@media(max-width:768px){.acp-autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.acp-autocomplete-wrapper-dropdown-content{max-height:60vh}.acp-autocomplete-wrapper-input-field{font-size:16px}.acp-autocomplete-wrapper-footer{padding:8px 12px}.acp-autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.acp-autocomplete-wrapper-footer-button{width:100%;min-height:44px}.acp-autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.acp-autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.acp-autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.acp-autocomplete-wrapper-filter-label{font-size:11px}.acp-autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.acp-autocomplete-wrapper-pagination-header .acp-autocomplete-wrapper-pagination-info{display:none}.acp-autocomplete-wrapper-pagination-controls{gap:2px}.acp-autocomplete-wrapper-page-input{width:40px}.acp-autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.acp-autocomplete-wrapper-button-text{font-size:12px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:250px}}@media(max-width:480px){.acp-autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.acp-autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.acp-autocomplete-wrapper-filter-controls{gap:8px}.acp-autocomplete-wrapper-filter-group{gap:4px}.acp-autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.acp-autocomplete-wrapper-item-content{padding:14px 12px}.acp-autocomplete-wrapper-pagination-header{gap:8px}.acp-autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.acp-autocomplete-wrapper-page-input{width:35px;height:28px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:200px}.acp-autocomplete-wrapper-footer-actions{gap:4px}.acp-autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.acp-autocomplete-wrapper-button-text{display:none}}\n"] }]
-        }], 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);
@@ -2515,7 +1920,7 @@ class DataGridUtils {
                 tmp = rowData[key];
             }
             else {
-                tmp = tmp && tmp[key];
+                tmp = tmp?.[key];
             }
         });
         return tmp;
@@ -2578,7 +1983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         }] });
 class AcpGridRowClassPipe {
     transform(rowData, index, dataIndex, rowClassFormatter) {
-        const rowIndex = index === undefined ? dataIndex : index;
+        const rowIndex = index ?? dataIndex;
         const classList = rowIndex % 2 === 1 ? ['mat-row-odd'] : [];
         if (rowClassFormatter) {
             for (const key of Object.keys(rowClassFormatter)) {
@@ -2847,7 +2252,11 @@ class AcpGridCell {
         });
     }
     _getText(value) {
-        return value === undefined ? '' : this._utils.isEmpty(value) ? this.placeholder : value;
+        if (value === undefined) {
+            return '';
+        }
+        const isEmpty = this._utils.isEmpty(value);
+        return isEmpty ? this.placeholder : value;
     }
     _getTooltip(value) {
         return this._utils.isEmpty(value) ? '' : value;
@@ -2861,7 +2270,7 @@ class AcpGridCell {
         btn.click?.(rowData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpGridCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpGridCell, isStandalone: true, selector: "acp-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["acpGridCell"], ngImport: i0, template: "@if (summary) {\n<span\n  [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n  [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n  [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n  [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData)\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData)\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n  <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n    {{ colDef.tag[_value].text }}\n  </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n  <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      stroke-width=\"2\"\n      d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n    />\n  </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | number\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | currency\n                  : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n                  : $safeNavigationMigration(colDef.typeParameter?.display)\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n  $safeNavigationMigration(colDef.typeParameter?.display) :\n  $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | percent\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | date\n                  : $safeNavigationMigration(colDef.typeParameter?.format)\n                  : $safeNavigationMigration(colDef.typeParameter?.timezone)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n  $safeNavigationMigration(colDef.typeParameter?.timezone) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n  @if (btn.icon) {\n  <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n  } @else if (btn.fontIcon) {\n  <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n  } @else if (btn.svgIcon) {\n  <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n  }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#6b7280;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AcpGridMenu, selector: "acp-grid-menu", inputs: ["items", "data"], exportAs: ["acpGridMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AcpGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: AcpGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: AcpGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: AcpGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpGridCell, isStandalone: true, selector: "acp-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["acpGridCell"], ngImport: i0, template: "@if (summary) {\n<span\n  [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n  [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n  [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n  [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData)\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData)\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n  <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n    {{ colDef.tag[_value].text }}\n  </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n  <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      stroke-width=\"2\"\n      d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n    />\n  </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | number\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | currency\n                  : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n                  : $safeNavigationMigration(colDef.typeParameter?.display)\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n  $safeNavigationMigration(colDef.typeParameter?.display) :\n  $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | percent\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | date\n                  : $safeNavigationMigration(colDef.typeParameter?.format)\n                  : $safeNavigationMigration(colDef.typeParameter?.timezone)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n  $safeNavigationMigration(colDef.typeParameter?.timezone) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n  @if (btn.icon) {\n  <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n  } @else if (btn.fontIcon) {\n  <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n  } @else if (btn.svgIcon) {\n  <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n  }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4b5563;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AcpGridMenu, selector: "acp-grid-menu", inputs: ["items", "data"], exportAs: ["acpGridMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AcpGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: AcpGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: AcpGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: AcpGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpGridCell, decorators: [{
             type: Component,
@@ -2887,7 +2296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         AcpGridCellActionTooltipPipe,
                         AcpGridCellActionBadgePipe,
                         AcpGridMenu,
-                    ], template: "@if (summary) {\n<span\n  [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n  [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n  [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n  [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData)\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData)\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n  <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n    {{ colDef.tag[_value].text }}\n  </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n  <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      stroke-width=\"2\"\n      d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n    />\n  </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | number\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | currency\n                  : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n                  : $safeNavigationMigration(colDef.typeParameter?.display)\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n  $safeNavigationMigration(colDef.typeParameter?.display) :\n  $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | percent\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | date\n                  : $safeNavigationMigration(colDef.typeParameter?.format)\n                  : $safeNavigationMigration(colDef.typeParameter?.timezone)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n  $safeNavigationMigration(colDef.typeParameter?.timezone) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n  @if (btn.icon) {\n  <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n  } @else if (btn.fontIcon) {\n  <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n  } @else if (btn.svgIcon) {\n  <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n  }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#6b7280;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"] }]
+                    ], template: "@if (summary) {\n<span\n  [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n  [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n  [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n  [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData)\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"((btn | cellActionBadge).description | toObservable | async) || ''\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData)\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n  <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n    {{ colDef.tag[_value].text }}\n  </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n  <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      stroke-width=\"2\"\n      d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n    />\n  </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | number\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | currency\n                  : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n                  : $safeNavigationMigration(colDef.typeParameter?.display)\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n  $safeNavigationMigration(colDef.typeParameter?.display) :\n  $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | percent\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | date\n                  : $safeNavigationMigration(colDef.typeParameter?.format)\n                  : $safeNavigationMigration(colDef.typeParameter?.timezone)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n  $safeNavigationMigration(colDef.typeParameter?.timezone) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n  @if (btn.icon) {\n  <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n  } @else if (btn.fontIcon) {\n  <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n  } @else if (btn.svgIcon) {\n  <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n  }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4b5563;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"] }]
         }], propDecorators: { rowData: [{
                 type: Input
             }], colDef: [{
@@ -2988,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);
@@ -3542,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)
@@ -3560,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 }) => {
@@ -3655,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);
             });
@@ -3683,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) {
@@ -3855,7 +3264,7 @@ class AcpGridColumnMenu {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpGridColumnMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpGridColumnMenu, isStandalone: true, selector: "acp-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", buttonFontIcon: "buttonFontIcon", buttonSvgIcon: "buttonSvgIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: MatMenu, descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["acpGridColumnMenu"], ngImport: i0, template: "@if (buttonType === 'icon') {\n<button\n  [class]=\"buttonClass\"\n  matIconButton\n  type=\"button\"\n  [color]=\"buttonColor\"\n  [matMenuTriggerFor]=\"menu\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n</button>\n} @else {\n<button\n  [class]=\"buttonClass\"\n  [matButton]=\"buttonType\"\n  type=\"button\"\n  [color]=\"buttonColor\"\n  [matMenuTriggerFor]=\"menu\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n  {{ buttonText }}\n</button>\n}\n\n<ng-template #iconTpl>\n  @if (buttonIcon) {\n  <mat-icon>{{buttonIcon}}</mat-icon>\n  } @else if(buttonFontIcon) {\n  <mat-icon [fontIcon]=\"buttonFontIcon\"></mat-icon>\n  } @else if(buttonSvgIcon) {\n  <mat-icon [svgIcon]=\"buttonSvgIcon\"></mat-icon>\n  }\n</ng-template>\n\n<mat-menu #menu=\"matMenu\" class=\"acp-grid-column-menu\">\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"acp-grid-column-menu-content\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown)=\"$event.stopPropagation()\"\n  >\n    @if (showHeader) {\n    <div class=\"acp-grid-column-menu-header\">\n      @if (headerTemplate) {\n      <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n      } @else { {{headerText}} }\n    </div>\n    }\n\n    <div class=\"acp-grid-column-menu-body\">\n      @if (sortable) {\n      <div\n        class=\"acp-grid-column-menu-list\"\n        cdkDropList\n        (cdkDropListDropped)=\"_handleDroped($event)\"\n      >\n        @for (col of columns; track col.field) {\n        <div\n          class=\"acp-grid-column-menu-item\"\n          cdkDrag\n          [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\"\n        >\n          <svg\n            class=\"acp-grid-icon acp-grid-column-drag-handle-icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            height=\"24px\"\n            fill=\"currentColor\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\"\n            />\n          </svg>\n          <ng-template\n            [ngTemplateOutlet]=\"checkboxList\"\n            [ngTemplateOutletContext]=\"{ $implicit: col }\"\n          >\n          </ng-template>\n        </div>\n        }\n      </div>\n      } @if (!sortable) {\n      <div class=\"acp-grid-column-menu-list\">\n        @for (col of columns; track col.field) {\n        <div class=\"acp-grid-column-menu-item\">\n          <ng-template\n            [ngTemplateOutlet]=\"checkboxList\"\n            [ngTemplateOutletContext]=\"{ $implicit: col }\"\n          >\n          </ng-template>\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    @if (showFooter) {\n    <div class=\"acp-grid-column-menu-footer\">\n      @if (footerTemplate) {\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n      } @else { {{footerText}} }\n    </div>\n    }\n  </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n  @if (pinnable) {\n  <button\n    class=\"acp-grid-column-pin-button\"\n    matIconButton\n    type=\"button\"\n    [matMenuTriggerFor]=\"pinList\"\n  >\n    @if (col.pinned) {\n    <svg\n      class=\"acp-grid-icon acp-grid-column-pin-icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      height=\"24px\"\n      fill=\"currentColor\"\n      focusable=\"false\"\n    >\n      <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n    </svg>\n    } @if (!col.pinned) {\n    <svg\n      class=\"acp-grid-icon acp-grid-column-pin-off-icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      height=\"24px\"\n      fill=\"currentColor\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\"\n      />\n    </svg>\n    }\n  </button>\n  <mat-menu #pinList=\"matMenu\" class=\"acp-grid-column-pin-list\">\n    @for (item of pinOptions; track item) {\n    <button\n      class=\"acp-grid-column-pin-option\"\n      type=\"button\"\n      mat-menu-item\n      (click)=\"_handlePinSelect(col, item.value)\"\n    >\n      <span class=\"acp-grid-column-pin-option-placeholder\">\n        <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n        @if (col.pinned==item.value) {\n        <svg\n          class=\"acp-grid-icon acp-grid-column-pin-check-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\"\n        >\n          <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n        </svg>\n        }\n      </span>\n      <span class=\"acp-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n    </button>\n    }\n  </mat-menu>\n  } @if (selectable) {\n  <mat-checkbox\n    class=\"acp-grid-column-menu-item-label\"\n    [(ngModel)]=\"col[selectableChecked]\"\n    [disabled]=\"col.disabled\"\n    (change)=\"_handleChecked(col)\"\n    >{{col.header | toObservable | async}}</mat-checkbox\n  >\n  } @else {\n  <span class=\"acp-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n  }\n</ng-template>\n", styles: [".acp-grid-column-menu,.acp-grid-column-pin-list{color:var(--acp-grid-column-menu-text-color, var(--mat-sys-on-surface-variant))}.acp-grid-column-menu .mat-mdc-menu-content{padding:0}.acp-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.acp-grid-column-menu-header,.acp-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.acp-grid-column-menu-header{top:0;border-bottom:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-footer{bottom:0;border-top:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-list{display:block;max-width:100%}.acp-grid-column-menu-list.cdk-drop-list-dragging .acp-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.acp-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.acp-grid-column-menu-item .cdk-drag-handle{cursor:move}.acp-grid-column-menu-item.cdk-drag-preview{border-radius:4px;box-shadow:0 0 0 1px var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.acp-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.acp-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.acp-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.acp-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.acp-grid-column-drag-handle-icon:hover{cursor:move}.acp-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpGridColumnMenu, isStandalone: true, selector: "acp-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", buttonFontIcon: "buttonFontIcon", buttonSvgIcon: "buttonSvgIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: MatMenu, descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["acpGridColumnMenu"], ngImport: i0, template: "@if (buttonType === 'icon') {\n<button\n  [class]=\"buttonClass\"\n  matIconButton\n  type=\"button\"\n  [color]=\"buttonColor\"\n  [matMenuTriggerFor]=\"menu\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n</button>\n} @else {\n<button\n  [class]=\"buttonClass\"\n  [matButton]=\"buttonType\"\n  type=\"button\"\n  [color]=\"buttonColor\"\n  [matMenuTriggerFor]=\"menu\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl\"></mat-icon>\n  {{ buttonText }}\n</button>\n}\n\n<ng-template #iconTpl>\n  @if (buttonIcon) {\n  <mat-icon>{{buttonIcon}}</mat-icon>\n  } @else if(buttonFontIcon) {\n  <mat-icon [fontIcon]=\"buttonFontIcon\"></mat-icon>\n  } @else if(buttonSvgIcon) {\n  <mat-icon [svgIcon]=\"buttonSvgIcon\"></mat-icon>\n  }\n</ng-template>\n\n<mat-menu #menu=\"matMenu\" class=\"acp-grid-column-menu\">\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"acp-grid-column-menu-content\"\n    (click)=\"$event.stopPropagation()\"\n    (keydown)=\"$event.stopPropagation()\"\n  >\n    @if (showHeader) {\n    <div class=\"acp-grid-column-menu-header\">\n      @if (headerTemplate) {\n      <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n      } @else { {{headerText}} }\n    </div>\n    }\n\n    <div class=\"acp-grid-column-menu-body\">\n      @if (sortable) {\n      <div\n        class=\"acp-grid-column-menu-list\"\n        cdkDropList\n        (cdkDropListDropped)=\"_handleDroped($event)\"\n      >\n        @for (col of columns; track col.field) {\n        <div\n          class=\"acp-grid-column-menu-item\"\n          cdkDrag\n          [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\"\n        >\n          <svg\n            class=\"acp-grid-icon acp-grid-column-drag-handle-icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            height=\"24px\"\n            fill=\"currentColor\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\"\n            />\n          </svg>\n          <ng-template\n            [ngTemplateOutlet]=\"checkboxList\"\n            [ngTemplateOutletContext]=\"{ $implicit: col }\"\n          >\n          </ng-template>\n        </div>\n        }\n      </div>\n      } @if (!sortable) {\n      <div class=\"acp-grid-column-menu-list\">\n        @for (col of columns; track col.field) {\n        <div class=\"acp-grid-column-menu-item\">\n          <ng-template\n            [ngTemplateOutlet]=\"checkboxList\"\n            [ngTemplateOutletContext]=\"{ $implicit: col }\"\n          >\n          </ng-template>\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    @if (showFooter) {\n    <div class=\"acp-grid-column-menu-footer\">\n      @if (footerTemplate) {\n      <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n      } @else { {{footerText}} }\n    </div>\n    }\n  </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n  @if (pinnable) {\n  <button\n    class=\"acp-grid-column-pin-button\"\n    matIconButton\n    type=\"button\"\n    [matMenuTriggerFor]=\"pinList\"\n  >\n    @if (col.pinned) {\n    <svg\n      class=\"acp-grid-icon acp-grid-column-pin-icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      height=\"24px\"\n      fill=\"currentColor\"\n      focusable=\"false\"\n    >\n      <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n    </svg>\n    } @if (!col.pinned) {\n    <svg\n      class=\"acp-grid-icon acp-grid-column-pin-off-icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      height=\"24px\"\n      fill=\"currentColor\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\"\n      />\n    </svg>\n    }\n  </button>\n  <mat-menu #pinList=\"matMenu\" class=\"acp-grid-column-pin-list\">\n    @for (item of pinOptions; track item) {\n    <button\n      class=\"acp-grid-column-pin-option\"\n      type=\"button\"\n      mat-menu-item\n      (click)=\"_handlePinSelect(col, item.value)\"\n    >\n      <span class=\"acp-grid-column-pin-option-placeholder\">\n        <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n        @if (col.pinned==item.value) {\n        <svg\n          class=\"acp-grid-icon acp-grid-column-pin-check-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          height=\"24px\"\n          fill=\"currentColor\"\n          focusable=\"false\"\n        >\n          <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n        </svg>\n        }\n      </span>\n      <span class=\"acp-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n    </button>\n    }\n  </mat-menu>\n  } @if (selectable) {\n  <mat-checkbox\n    class=\"acp-grid-column-menu-item-label\"\n    [(ngModel)]=\"col[selectableChecked]\"\n    [disabled]=\"col.disabled\"\n    (change)=\"_handleChecked(col)\"\n    >{{col.header | toObservable | async}}</mat-checkbox\n  >\n  } @else {\n  <span class=\"acp-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n  }\n</ng-template>\n", styles: [".acp-grid-column-menu,.acp-grid-column-pin-list{color:var(--acp-grid-column-menu-text-color, var(--mat-sys-on-surface-variant))}.acp-grid-column-menu .mat-mdc-menu-content{padding:0}.acp-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.acp-grid-column-menu-header,.acp-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.acp-grid-column-menu-header{top:0;border-bottom:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-footer{bottom:0;border-top:1px solid var(--acp-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-list{display:block;max-width:100%}.acp-grid-column-menu-list.cdk-drop-list-dragging .acp-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.acp-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.acp-grid-column-menu-item .cdk-drag-handle{cursor:move}.acp-grid-column-menu-item.cdk-drag-preview{border-radius:4px;box-shadow:0 0 0 1px var(--acp-grid-outline-color, var(--mat-sys-outline-variant))}.acp-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.acp-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.acp-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.acp-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.acp-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.acp-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.acp-grid-column-drag-handle-icon:hover{cursor:move}.acp-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpGridColumnMenu, decorators: [{
             type: Component,
@@ -4251,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 =====
@@ -4274,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. */
@@ -4291,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 =====
@@ -4313,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. */
@@ -4344,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. */
@@ -4432,7 +3841,13 @@ class DataGrid {
         return this._utils.getColData(data, colDef);
     }
     _isColumnHide(item) {
-        return item.hide !== undefined ? item.hide : item.show !== undefined ? !item.show : false;
+        if (item.hide !== undefined) {
+            return item.hide;
+        }
+        if (item.show !== undefined) {
+            return !item.show;
+        }
+        return false;
     }
     // Waiting for async data
     ngOnChanges(changes) {
@@ -4460,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);
@@ -4471,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));
         }
@@ -4490,7 +3909,7 @@ class DataGrid {
             item.left =
                 pinnedLeftCols
                     .slice(0, idx)
-                    .reduce((acc, cur) => acc + parseFloat(cur.width || '80px'), 0) + 'px';
+                    .reduce((acc, cur) => acc + Number.parseFloat(cur.width || '80px'), 0) + 'px';
         });
         const pinnedRightCols = this.columns
             .filter(col => col.pinned && col.pinned === 'right')
@@ -4499,7 +3918,7 @@ class DataGrid {
             item.right =
                 pinnedRightCols
                     .slice(0, idx)
-                    .reduce((acc, cur) => acc + parseFloat(cur.width || '80px'), 0) + 'px';
+                    .reduce((acc, cur) => acc + Number.parseFloat(cur.width || '80px'), 0) + 'px';
         });
     }
     _getIndex(index, dataIndex) {
@@ -4755,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,
@@ -4774,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: [{
@@ -4814,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: [{
@@ -4851,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,
@@ -4965,15 +4356,15 @@ 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)))
+        fromEvent(element.element?.nativeElement, 'keydown')
+            .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$))
+        fromEvent(element.element?.nativeElement, 'focus')
+            .pipe(takeUntil(this.destroy$))
             .subscribe(() => {
             const index = this.focusableElements.findIndex(e => e.element === element.element);
             this.currentFocusIndex.set(index);
@@ -5381,7 +4772,7 @@ class DateRangePicker {
       [startDate]="startDate()"
       [endDate]="endDate()"
     ></ngx-datex>
-  `, isInline: true, dependencies: [{ kind: "component", type: NgxDatex, selector: "ngx-datex", inputs: ["config", "locale", "theme", "appearance", "floatLabel", "label", "placeholder", "calendarIcon", "showCalendarIcon", "calendarIconPosition", "showCheckbox", "checkboxChecked", "checkboxPosition", "readonly", "disabled", "showHeader", "showFooter", "singleDatePicker", "autoApply", "showDropdowns", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "showCustomRangeLabel", "startDate", "endDate", "minDate", "maxDate", "maxSpan", "showWeekNumbers", "showISOWeekNumbers", "buttonClasses", "applyButtonClasses", "cancelButtonClasses", "isInvalidDate", "isCustomDate", "minYear", "maxYear", "ranges", "opens", "drops", "headerTemplate", "footerTemplate", "dayTemplate", "ariaLabel", "ariaDescribedBy"], outputs: ["dateChange", "rangeChange", "openEvent", "closeEvent", "monthChange", "yearChange", "dateHover", "validationError", "checkboxChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+  `, isInline: true, dependencies: [{ kind: "component", type: NgxDatex, selector: "ngx-datex", inputs: ["config", "locale", "theme", "appearance", "floatLabel", "label", "placeholder", "calendarIcon", "showCalendarIcon", "calendarIconPosition", "showCheckbox", "checkboxChecked", "checkboxPosition", "readonly", "disabled", "showHeader", "showFooter", "singleDatePicker", "autoApply", "showDropdowns", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "showCustomRangeLabel", "startDate", "endDate", "minDate", "maxDate", "maxSpan", "showWeekNumbers", "showISOWeekNumbers", "buttonClasses", "applyButtonClasses", "cancelButtonClasses", "isInvalidDate", "isCustomDate", "minYear", "maxYear", "ranges", "opens", "drops", "headerTemplate", "footerTemplate", "dayTemplate", "ariaLabel", "ariaDescribedBy"], outputs: ["dateChange", "rangeChange", "openEvent", "closeEvent", "monthChange", "yearChange", "dateHover", "validationError", "checkboxChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DateRangePicker, decorators: [{
             type: Component,
@@ -8357,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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i6.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AcpDateRangeCalendar, selector: "acp-date-range-calendar", inputs: ["minDate", "maxDate", "selectedDates"], outputs: ["selectedDatesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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,
@@ -8667,7 +8058,7 @@ class AcpCheckboxGroup {
                 useExisting: forwardRef(() => AcpCheckboxGroup),
                 multi: true,
             },
-        ], queries: [{ propertyName: "_checkboxes", predicate: i0.forwardRef(() => MatCheckbox), descendants: true }], exportAs: ["acpCheckboxGroup"], ngImport: i0, template: "@if (showSelectAll) {\n<mat-checkbox\n  class=\"acp-checkbox-master\"\n  [checked]=\"selectAll\"\n  [(indeterminate)]=\"selectAllIndeterminate\"\n  [disabled]=\"disabled\"\n  (change)=\"_updateMasterCheckboxState($event, -1)\"\n>\n  {{ selectAllLabel }}\n</mat-checkbox>\n} @for (option of items; track _trackBy($index, option); let i = $index) {\n<mat-checkbox\n  class=\"acp-checkbox-normal\"\n  [(ngModel)]=\"option.checked\"\n  [aria-describedby]=\"option.ariaDescribedby\"\n  [aria-label]=\"option.ariaLabel\"\n  [aria-labelledby]=\"option.ariaLabelledby\"\n  [color]=\"option.color\"\n  [disabled]=\"option.disabled || disabled\"\n  [disableRipple]=\"option.disableRipple\"\n  [labelPosition]=\"option.labelPosition\"\n  [required]=\"option.required\"\n  (change)=\"_updateNormalCheckboxState($event, i)\"\n>\n  {{ option[bindLabel()] | toObservable | async }}\n</mat-checkbox>\n}\n", styles: [".acp-checkbox-group{display:flex;flex-direction:column;gap:.5rem}.acp-checkbox-group .acp-checkbox-master{margin-bottom:.5rem;font-weight:500}.acp-checkbox-group .acp-checkbox-normal{margin-left:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "_checkboxes", predicate: i0.forwardRef(() => MatCheckbox), descendants: true }], exportAs: ["acpCheckboxGroup"], ngImport: i0, template: "@if (showSelectAll) {\n<mat-checkbox\n  class=\"acp-checkbox-master\"\n  [checked]=\"selectAll\"\n  [(indeterminate)]=\"selectAllIndeterminate\"\n  [disabled]=\"disabled\"\n  (change)=\"_updateMasterCheckboxState($event, -1)\"\n>\n  {{ selectAllLabel }}\n</mat-checkbox>\n} @for (option of items; track _trackBy($index, option); let i = $index) {\n<mat-checkbox\n  class=\"acp-checkbox-normal\"\n  [(ngModel)]=\"option.checked\"\n  [aria-describedby]=\"option.ariaDescribedby\"\n  [aria-label]=\"option.ariaLabel\"\n  [aria-labelledby]=\"option.ariaLabelledby\"\n  [color]=\"option.color\"\n  [disabled]=\"option.disabled || disabled\"\n  [disableRipple]=\"option.disableRipple\"\n  [labelPosition]=\"option.labelPosition\"\n  [required]=\"option.required\"\n  (change)=\"_updateNormalCheckboxState($event, i)\"\n>\n  {{ option[bindLabel()] | toObservable | async }}\n</mat-checkbox>\n}\n", styles: [".acp-checkbox-group{display:flex;flex-direction:column;gap:.5rem}.acp-checkbox-group .acp-checkbox-master{margin-bottom:.5rem;font-weight:500}.acp-checkbox-group .acp-checkbox-normal{margin-left:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpCheckboxGroup, decorators: [{
             type: Component,
@@ -8699,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);
@@ -8751,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) || '';
@@ -8783,8 +8444,10 @@ class StatusDisplayPipe {
         const text = this.getStatusText(isActive, gender, customActiveText, customInactiveText);
         const icon = isActive ? 'check_circle' : 'cancel';
         const colorClass = isActive ? 'text-green-500' : 'text-red-500';
-        const combinedIconClass = `${colorClass} align-middle mr-1 ${iconClass}`.trim();
-        const combinedTextClass = `align-middle ${textClass}`.trim();
+        const sanitizedIconClass = this.sanitizeClassName(iconClass);
+        const sanitizedTextClass = this.sanitizeClassName(textClass);
+        const combinedIconClass = `${colorClass} align-middle mr-1 ${sanitizedIconClass}`.trim();
+        const combinedTextClass = `align-middle ${sanitizedTextClass}`.trim();
         let html = '';
         if (showIcon) {
             html += `<mat-icon class="${combinedIconClass}" fontIcon="${icon}"></mat-icon>`;
@@ -8793,21 +8456,23 @@ class StatusDisplayPipe {
         return this.sanitizer.bypassSecurityTrustHtml(html);
     }
     getStatusText(isActive, gender, customActive, customInactive) {
-        if (customActive && isActive)
-            return customActive;
-        if (customInactive && !isActive)
-            return customInactive;
+        if (customActive && isActive) {
+            return this.sanitizer.sanitize(SecurityContext.HTML, customActive) || customActive;
+        }
+        if (customInactive && !isActive) {
+            return this.sanitizer.sanitize(SecurityContext.HTML, customInactive) || customInactive;
+        }
         if (!this.transloco)
             return this.getFallbackText(isActive, gender);
         const translationKey = this.getTranslationKey(isActive, gender);
         const translation = this.transloco.translate(translationKey);
-        return translation !== translationKey ? translation : this.getFallbackText(isActive, gender);
+        return translation === translationKey ? this.getFallbackText(isActive, gender) : translation;
     }
     getTranslationKey(isActive, gender) {
         const base = isActive ? 'status.active' : 'status.inactive';
-        return gender !== 'neutral'
-            ? `${base}.${gender}`
-            : base;
+        return gender === 'neutral'
+            ? base
+            : `${base}.${gender}`;
     }
     getFallbackText(isActive, gender) {
         const lang = this.transloco?.getActiveLang() || 'en';
@@ -8822,6 +8487,11 @@ class StatusDisplayPipe {
             return gender === 'female' ? 'Inactiva' : 'Inactivo';
         }
     }
+    sanitizeClassName(className) {
+        // Only allow alphanumeric characters, hyphens, underscores, and spaces
+        // This prevents CSS injection through class names
+        return className.replace(/[^a-zA-Z0-9_-\s]/g, '');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: StatusDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: StatusDisplayPipe, isStandalone: true, name: "statusDisplay" });
 }
@@ -8836,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, 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