@acontplus/ng-components 3.2.1 → 4.0.0

package/fesm2022/acontplus-ng-components.mjs

@@ -1,17 +1,15 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, output, contentChild, TemplateRef, computed, InjectionToken, NgZone, Injector, signal, Service, ElementRef, HostListener, Directive, ViewChild, ViewContainerRef, Renderer2, afterRenderEffect, untracked, makeEnvironmentProviders, viewChild, isSignal, effect, Injectable, Pipe, KeyValueDiffers, CSP_NONCE, DOCUMENT as DOCUMENT$1, ContentChildren, model, forwardRef, ANIMATION_MODULE_TYPE, ApplicationRef, ContentChild, HostBinding, PLATFORM_ID, DestroyRef, SecurityContext } from '@angular/core';
+import { inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, output, contentChild, TemplateRef, computed, InjectionToken, NgZone, Injector, signal, Service, ElementRef, HostListener, Directive, ViewChild, ViewContainerRef, Renderer2, afterRenderEffect, untracked, makeEnvironmentProviders, viewChild, isSignal, effect, Injectable, model, Pipe, KeyValueDiffers, CSP_NONCE, DOCUMENT as DOCUMENT$1, ContentChildren, forwardRef, ANIMATION_MODULE_TYPE, ApplicationRef, ContentChild, LOCALE_ID, PLATFORM_ID, DestroyRef, 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$2 from '@angular/common';
+import { MatIconButton, MatButton, MatMiniFabButton, MatFabButton, MatButtonModule } from '@angular/material/button';
+import * as i1 from '@angular/common';
 import { NgClass, NgTemplateOutlet, DOCUMENT, CommonModule, AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe, PercentPipe, NgStyle, isPlatformBrowser, SlicePipe } from '@angular/common';
-import * as i1$7 from '@angular/router';
+import * as i1$8 from '@angular/router';
 import { RouterLink, RouterModule, Router, NavigationEnd, RouterLinkActive, RouterOutlet } 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 * as i3$1 from '@angular/cdk/overlay';
+import * as i4 from '@angular/cdk/overlay';
 import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal, CdkPortalOutlet, TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
 import { Subject, firstValueFrom, from, isObservable, catchError, of, merge, combineLatest, Observable, fromEvent, defer, Subscription, map as map$1, BehaviorSubject, filter as filter$1, tap, debounceTime } from 'rxjs';
@@ -19,59 +17,62 @@ import { takeUntil, take, switchMap, mapTo, startWith, pairwise, distinctUntilCh
 import * as i3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
 import { CdkTrapFocus, LiveAnnouncer, _IdGenerator, FocusMonitor, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
-import * as i1$3 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 { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { REPORT_FORMAT, DEFAULT_ICONS, FALLBACK_ICON } from '@acontplus/ui-kit';
 import { CdkDrag, CdkDragHandle, moveItemInArray, CdkDropList } from '@angular/cdk/drag-drop';
-import * as i1$5 from '@angular/forms';
-import { FormControl, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR, FormGroup, Validators } from '@angular/forms';
-import * as i1$4 from '@ng-select/ng-select';
+import * as i1$4 from '@angular/forms';
+import { FormControl, ReactiveFormsModule, NgControl, NgForm, FormGroupDirective, FormsModule, NG_VALUE_ACCESSOR, FormGroup, Validators } from '@angular/forms';
+import * as i1$3 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
+import * as i3$1 from '@angular/material/autocomplete';
+import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i1$5 from '@angular/material/form-field';
+import { MatFormFieldModule, MatFormField, MatLabel, MatHint } from '@angular/material/form-field';
+import * as i2$1 from '@angular/material/input';
+import { MatInput, MatInputModule } from '@angular/material/input';
 import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
-import { MatFormField, MatLabel, MatHint, MatFormFieldModule } from '@angular/material/form-field';
 import { ENTER, COMMA, ESCAPE, hasModifierKey, SPACE } from '@angular/cdk/keycodes';
 import { Tabulator, PageModule, ReactiveDataModule, FormatModule, EditModule, ValidateModule, ColumnCalcsModule, SortModule, TooltipModule, DataTreeModule, MoveRowsModule, SelectRowModule, PopupModule, InteractionModule } from 'tabulator-tables';
 import { 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 * as i4$1 from '@angular/material/progress-bar';
 import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
 import { SelectionModel } from '@angular/cdk/collections';
 import { MatBadge, MatBadgeModule } from '@angular/material/badge';
 import * as i3$2 from '@angular/material/menu';
 import { MatMenu, MatMenuItem, MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
-import * as i7 from '@angular/material/tooltip';
+import * as i8 from '@angular/material/tooltip';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import * as i3$3 from '@angular/material/core';
 import { _animationsDisabled, MatNativeDateModule, MatRippleModule } from '@angular/material/core';
 import { CdkTable, CdkColumnDef } from '@angular/cdk/table';
 import { coerceCssPixelValue } from '@angular/cdk/coercion';
-import * as i1$a from '@angular/cdk/bidi';
+import * as i1$b from '@angular/cdk/bidi';
 import { Directionality, BidiModule } from '@angular/cdk/bidi';
 import { SPANISH_LOCALE, MATERIAL_LIGHT_THEME, NgxDatex } from 'ngx-datex';
 export { MATERIAL_LIGHT_THEME, NgxDatex, SPANISH_LOCALE } from 'ngx-datex';
 import { tzDate, format, monthStart, addDay, monthEnd, weekStart, weekEnd } from '@formkit/tempo';
 import { CdkDialogContainer, Dialog, DialogConfig } from '@angular/cdk/dialog';
 import { DateRange, MatCalendar, MatDatepickerModule } from '@angular/material/datepicker';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i2$1 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i6 from '@angular/material/list';
+import * as i7 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import { MatDividerModule } from '@angular/material/divider';
-import * as i1$6 from '@angular/material/toolbar';
+import * as i1$6 from '@angular/material/card';
+import { MatCardModule, MatCard, MatCardHeader, MatCardContent } from '@angular/material/card';
+import * as i1$7 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i1$8 from 'ngx-permissions';
+import * as i1$9 from 'ngx-permissions';
 import { NgxPermissionsModule } from 'ngx-permissions';
-import * as i1$9 from '@angular/material/slide-toggle';
+import * as i1$a from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i2$2 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i4$1 from '@angular/material/tabs';
+import * as i4$2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { TranslocoService } from '@jsverse/transloco';
 
@@ -299,168 +300,6 @@ const ACP_BADGE_VARIANTS = [
 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
- * header, content, and action areas.
- */
-class DynamicCard {
-    // Header inputs
-    /**
-     * The title text to display in the card header.
-     * @default null
-     */
-    cardTitle = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "cardTitle" }] : /* istanbul ignore next */ []));
-    /**
-     * The subtitle text to display in the card header.
-     * @default null
-     */
-    cardSubtitle = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "cardSubtitle" }] : /* istanbul ignore next */ []));
-    /**
-     * URL for the avatar image to display in the card header.
-     * @default null
-     */
-    avatarImageUrl = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "avatarImageUrl" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether to show the card header section.
-     * @default false
-     */
-    isHeaderVisible = input(false, { ...(ngDevMode ? { debugName: "isHeaderVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    // Content inputs
-    /**
-     * CSS padding value for the card content area.
-     * @default '1rem'
-     */
-    contentPadding = input('1rem', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentPadding" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether to show a divider between the header and content sections.
-     * @default false
-     */
-    hasDivider = input(false, { ...(ngDevMode ? { debugName: "hasDivider" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    // Action inputs
-    /**
-     * Whether to show the action buttons section.
-     * @default false
-     */
-    areActionsVisible = input(false, { ...(ngDevMode ? { debugName: "areActionsVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Text for the primary action button.
-     * @default 'Confirm'
-     */
-    primaryButtonText = input('Confirm', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "primaryButtonText" }] : /* istanbul ignore next */ []));
-    /**
-     * Text for the secondary action button.
-     * @default 'Cancel'
-     */
-    secondaryButtonText = input('Cancel', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "secondaryButtonText" }] : /* istanbul ignore next */ []));
-    /**
-     * Material icon name for the primary button.
-     * @default null
-     */
-    primaryButtonIcon = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "primaryButtonIcon" }] : /* istanbul ignore next */ []));
-    /**
-     * Material icon name for the secondary button.
-     * @default null
-     */
-    secondaryButtonIcon = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "secondaryButtonIcon" }] : /* istanbul ignore next */ []));
-    /**
-     * Alignment of the action buttons.
-     * @default 'end'
-     */
-    buttonsPosition = input('end', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "buttonsPosition" }] : /* istanbul ignore next */ []));
-    // Output events
-    /**
-     * Event emitted when the primary button is clicked.
-     */
-    primaryButtonClicked = output();
-    /**
-     * Event emitted when the secondary button is clicked.
-     */
-    secondaryButtonClicked = output();
-    /**
-     * Event emitted when the card is clicked.
-     */
-    cardClicked = output();
-    /**
-     * Event emitted when a key is pressed down on the card.
-     */
-    keyDown = output();
-    /**
-     * Event emitted when a key is released on the card.
-     */
-    keyUp = output();
-    /**
-     * Event emitted when a key is pressed on the card.
-     */
-    keyPress = output();
-    // Methods
-    /**
-     * Handles the primary button click event.
-     * Stops event propagation and emits the primaryButtonClicked event.
-     * @param event The click event
-     */
-    handlePrimaryButtonClick(event) {
-        event.stopPropagation();
-        this.primaryButtonClicked.emit();
-    }
-    /**
-     * Handles the secondary button click event.
-     * Stops event propagation and emits the secondaryButtonClicked event.
-     * @param event The click event
-     */
-    handleSecondaryButtonClick(event) {
-        event.stopPropagation();
-        this.secondaryButtonClicked.emit();
-    }
-    /**
-     * Handles the card click event.
-     * Emits the cardClicked event with the original event.
-     * @param event The click event
-     */
-    handleCardClick(event) {
-        this.cardClicked.emit(event);
-    }
-    /**
-     * Handles the key down event on the card.
-     * Emits the keyDown event with the original keyboard event.
-     * @param event The keyboard event
-     */
-    handleKeyDown(event) {
-        this.keyDown.emit(event);
-    }
-    /**
-     * Handles the key up event on the card.
-     * Emits the keyUp event with the original keyboard event.
-     * @param event The keyboard event
-     */
-    handleKeyUp(event) {
-        this.keyUp.emit(event);
-    }
-    /**
-     * Handles the key press event on the card.
-     * Emits the keyPress event with the original keyboard event.
-     * @param event The keyboard event
-     */
-    handleKeyPress(event) {
-        this.keyPress.emit(event);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DynamicCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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.1.0", ngImport: i0, type: DynamicCard, decorators: [{
-            type: Component,
-            args: [{ selector: 'acp-dynamic-card', standalone: true, imports: [MatCardModule, MatButtonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, 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" }]
-        }], propDecorators: { cardTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardTitle", required: false }] }], cardSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardSubtitle", required: false }] }], avatarImageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarImageUrl", required: false }] }], isHeaderVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHeaderVisible", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], hasDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDivider", required: false }] }], areActionsVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "areActionsVisible", required: false }] }], primaryButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryButtonText", required: false }] }], secondaryButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonText", required: false }] }], primaryButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryButtonIcon", required: false }] }], secondaryButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButtonIcon", required: false }] }], buttonsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonsPosition", required: false }] }], primaryButtonClicked: [{ type: i0.Output, args: ["primaryButtonClicked"] }], secondaryButtonClicked: [{ type: i0.Output, args: ["secondaryButtonClicked"] }], cardClicked: [{ type: i0.Output, args: ["cardClicked"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], keyUp: [{ type: i0.Output, args: ["keyUp"] }], keyPress: [{ type: i0.Output, args: ["keyPress"] }] } });
-
 /**
  * Context Menu Types and Interfaces
  * Defines the API contract for the ContextMenu component
@@ -1068,7 +907,7 @@ class AcpContextMenuPanel {
         return index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpContextMenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpContextMenuPanel, isStandalone: true, selector: "acp-context-menu-panel", host: { attributes: { "role": "menu" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.aria-label": "\"Context Menu\"" }, classAttribute: "acp-context-menu-panel-host" }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  #menuContainer\n  class=\"acp-context-menu-container\"\n  role=\"menu\"\n  tabindex=\"0\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n>\n  <div class=\"acp-context-menu-list\">\n    @for (item of visibleItems(); track $index; let i = $index) { @if (item.separator) {\n    <div class=\"acp-context-menu-separator\" role=\"separator\" aria-orientation=\"horizontal\"></div>\n    } @if (!item.separator) {\n    <button\n      [ngClass]=\"getItemClasses(item, i)\"\n      (click)=\"onItemClick(item, $event)\"\n      (mouseenter)=\"onItemHover(i)\"\n      [disabled]=\"item.disabled || false\"\n      [attr.aria-label]=\"item.label\"\n      [attr.aria-disabled]=\"item.disabled || false\"\n      [attr.aria-haspopup]=\"hasChildren(item) ? 'menu' : 'false'\"\n      [attr.aria-expanded]=\"expandedIndex() === i && hasChildren(item)\"\n      [title]=\"item.tooltip || null\"\n      role=\"menuitem\"\n      type=\"button\"\n    >\n      @if (item.icon) {\n      <span class=\"acp-context-menu-item-icon\">\n        @if (!item.icon.includes('/')) {\n        <mat-icon [attr.aria-hidden]=\"true\"> {{ item.icon }} </mat-icon>\n        } @if (item.icon.includes('/')) {\n        <img [src]=\"item.icon\" alt=\"\" aria-hidden=\"true\" />\n        }\n      </span>\n      }\n\n      <span class=\"acp-context-menu-item-label\"> {{ item.label }} </span>\n\n      @if (item.badge) {\n      <span class=\"acp-context-menu-item-badge\"> {{ item.badge }} </span>\n      } @if (item.shortcut) {\n      <span class=\"acp-context-menu-item-shortcut\"> {{ item.shortcut }} </span>\n      } @if (item.loading) {\n      <mat-spinner class=\"acp-context-menu-item-loader\" [diameter]=\"16\" [strokeWidth]=\"2\">\n      </mat-spinner>\n      } @if (hasChildren(item)) {\n      <mat-icon class=\"acp-context-menu-item-arrow\" [attr.aria-hidden]=\"true\">\n        chevron_right\n      </mat-icon>\n      }\n    </button>\n    } @if (hasChildren(item) && expandedIndex() === i) {\n    <div class=\"acp-context-menu-submenu\" role=\"menu\">\n      @for (subitem of item.children; track $index; let j = $index) { @if (subitem.separator) {\n      <div class=\"acp-context-menu-separator\" role=\"separator\" aria-orientation=\"horizontal\"></div>\n      } @if (!subitem.separator) {\n      <button\n        class=\"acp-context-menu-item\"\n        [class.acp-context-menu-item--disabled]=\"subitem.disabled || false\"\n        [class.acp-context-menu-item--danger]=\"subitem.danger || false\"\n        [class.acp-context-menu-item--selected]=\"false\"\n        (click)=\"onItemClick(subitem, $event)\"\n        [disabled]=\"subitem.disabled || false\"\n        [attr.aria-label]=\"subitem.label\"\n        [attr.aria-disabled]=\"subitem.disabled || false\"\n        [title]=\"subitem.tooltip || null\"\n        role=\"menuitem\"\n        type=\"button\"\n      >\n        @if (subitem.icon) {\n        <span class=\"acp-context-menu-item-icon\">\n          @if (!subitem.icon.includes('/')) {\n          <mat-icon [attr.aria-hidden]=\"true\"> {{ subitem.icon }} </mat-icon>\n          } @if (subitem.icon.includes('/')) {\n          <img [src]=\"subitem.icon\" alt=\"\" aria-hidden=\"true\" />\n          }\n        </span>\n        }\n\n        <span class=\"acp-context-menu-item-label\"> {{ subitem.label }} </span>\n\n        @if (subitem.badge) {\n        <span class=\"acp-context-menu-item-badge\"> {{ subitem.badge }} </span>\n        } @if (subitem.shortcut) {\n        <span class=\"acp-context-menu-item-shortcut\"> {{ subitem.shortcut }} </span>\n        } @if (subitem.loading) {\n        <mat-spinner class=\"acp-context-menu-item-loader\" [diameter]=\"16\" [strokeWidth]=\"2\">\n        </mat-spinner>\n        }\n      </button>\n      } }\n    </div>\n    } }\n  </div>\n</div>\n", styles: [".acp-context-menu-panel-host{display:block;outline:none}.acp-context-menu-container{display:flex;flex-direction:column;min-width:200px;max-width:400px;max-height:80vh;background-color:var(--mat-sys-surface-container);border-radius:var(--acp-context-menu-border-radius, 4px);box-shadow:var(--acp-context-menu-shadow, 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12));outline:none;animation:acp-context-menu-enter .2s cubic-bezier(.4,0,.2,1);overflow:hidden}@media(prefers-reduced-motion:reduce){.acp-context-menu-container{animation:none}}@media(max-width:600px){.acp-context-menu-container{min-width:180px;max-width:300px}}@media(max-width:480px){.acp-context-menu-container{min-width:160px;max-width:280px}}.acp-context-menu-list{display:flex;flex-direction:column;padding:var(--acp-context-menu-padding, 8px 0);list-style:none;margin:0;overflow-y:auto;max-height:calc(80vh - 16px)}.acp-context-menu-list::-webkit-scrollbar{width:6px}.acp-context-menu-list::-webkit-scrollbar-track{background:transparent}.acp-context-menu-list::-webkit-scrollbar-thumb{background:var(--acp-context-menu-scrollbar-color, #bdbdbd);border-radius:3px}.acp-context-menu-list::-webkit-scrollbar-thumb:hover{background:var(--acp-context-menu-scrollbar-hover-color, #9e9e9e)}.acp-context-menu-item{display:flex;align-items:center;gap:12px;padding:var(--acp-context-menu-item-padding, 8px 16px);min-height:40px;background:none;border:none;color:var(--mat-sys-on-surface);font-size:var(--acp-context-menu-item-font-size, 14px);font-weight:500;text-align:left;cursor:pointer;transition:background-color .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;position:relative}@media(prefers-reduced-motion:reduce){.acp-context-menu-item{transition:none}}@media(max-width:600px){.acp-context-menu-item{padding:6px 12px;min-height:36px;font-size:13px;gap:10px}}@media(max-width:480px){.acp-context-menu-item{padding:6px 10px;min-height:34px;font-size:12px;gap:8px}}.acp-context-menu-item:hover:not(.acp-context-menu-item--disabled){background-color:var(--mat-sys-surface-container-highest)}.acp-context-menu-item:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:-2px}.acp-context-menu-item--selected:not(.acp-context-menu-item--disabled){background-color:var(--mat-sys-surface-container-highest)}.acp-context-menu-item--disabled{color:var(--mat-sys-on-surface-variant);cursor:not-allowed;opacity:.6}.acp-context-menu-item--disabled:hover{background-color:transparent}.acp-context-menu-item--danger{color:var(--mat-sys-error)}.acp-context-menu-item--danger:hover:not(.acp-context-menu-item--disabled){background-color:var(--mat-sys-error-container)}.acp-context-menu-item--separator{padding:0;min-height:auto;cursor:default;background:none}.acp-context-menu-item--separator:hover{background:none}.acp-context-menu-item--expanded{background-color:var(--mat-sys-surface-container-highest)}.acp-context-menu-item-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0}.acp-context-menu-item-icon mat-icon{font-size:20px;width:20px;height:20px}.acp-context-menu-item-icon img{width:100%;height:100%;object-fit:contain}.acp-context-menu-item-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-context-menu-item-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);border-radius:10px;font-size:12px;font-weight:600;flex-shrink:0}.acp-context-menu-item-shortcut{display:inline-block;color:var(--mat-sys-on-surface-variant);font-size:12px;font-weight:400;margin-left:12px;flex-shrink:0}.acp-context-menu-item-loader{display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:8px;flex-shrink:0}.acp-context-menu-item-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:8px;flex-shrink:0;color:var(--mat-sys-on-surface-variant);font-size:20px}.acp-context-menu-separator{height:1px;background-color:var(--mat-sys-outline-variant);margin:4px 0}.acp-context-menu-submenu{display:flex;flex-direction:column;padding:4px 0;background-color:var(--mat-sys-surface-container-high);border-left:2px solid var(--mat-sys-outline-variant);margin-left:8px;animation:acp-context-menu-slide-in .15s cubic-bezier(.4,0,.2,1)}@media(prefers-reduced-motion:reduce){.acp-context-menu-submenu{animation:none}}.acp-context-menu-submenu .acp-context-menu-item{padding-left:12px;font-size:13px}@keyframes acp-context-menu-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes acp-context-menu-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpContextMenuPanel, isStandalone: true, selector: "acp-context-menu-panel", host: { attributes: { "role": "menu" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.aria-label": "\"Context Menu\"" }, classAttribute: "acp-context-menu-panel-host" }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  #menuContainer\n  class=\"acp-context-menu-container\"\n  role=\"menu\"\n  tabindex=\"0\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n>\n  <div class=\"acp-context-menu-list\">\n    @for (item of visibleItems(); track $index; let i = $index) { @if (item.separator) {\n    <div class=\"acp-context-menu-separator\" role=\"separator\" aria-orientation=\"horizontal\"></div>\n    } @if (!item.separator) {\n    <button\n      [ngClass]=\"getItemClasses(item, i)\"\n      (click)=\"onItemClick(item, $event)\"\n      (mouseenter)=\"onItemHover(i)\"\n      [disabled]=\"item.disabled || false\"\n      [attr.aria-label]=\"item.label\"\n      [attr.aria-disabled]=\"item.disabled || false\"\n      [attr.aria-haspopup]=\"hasChildren(item) ? 'menu' : 'false'\"\n      [attr.aria-expanded]=\"expandedIndex() === i && hasChildren(item)\"\n      [title]=\"item.tooltip || null\"\n      role=\"menuitem\"\n      type=\"button\"\n    >\n      @if (item.icon) {\n      <span class=\"acp-context-menu-item-icon\">\n        @if (!item.icon.includes('/')) {\n        <mat-icon [attr.aria-hidden]=\"true\"> {{ item.icon }} </mat-icon>\n        } @if (item.icon.includes('/')) {\n        <img [src]=\"item.icon\" alt=\"\" aria-hidden=\"true\" />\n        }\n      </span>\n      }\n\n      <span class=\"acp-context-menu-item-label\"> {{ item.label }} </span>\n\n      @if (item.badge) {\n      <span class=\"acp-context-menu-item-badge\"> {{ item.badge }} </span>\n      } @if (item.shortcut) {\n      <span class=\"acp-context-menu-item-shortcut\"> {{ item.shortcut }} </span>\n      } @if (item.loading) {\n      <mat-spinner class=\"acp-context-menu-item-loader\" [diameter]=\"16\" [strokeWidth]=\"2\">\n      </mat-spinner>\n      } @if (hasChildren(item)) {\n      <mat-icon class=\"acp-context-menu-item-arrow\" [attr.aria-hidden]=\"true\">\n        chevron_right\n      </mat-icon>\n      }\n    </button>\n    } @if (hasChildren(item) && expandedIndex() === i) {\n    <div class=\"acp-context-menu-submenu\" role=\"menu\">\n      @for (subitem of item.children; track $index; let j = $index) { @if (subitem.separator) {\n      <div class=\"acp-context-menu-separator\" role=\"separator\" aria-orientation=\"horizontal\"></div>\n      } @if (!subitem.separator) {\n      <button\n        class=\"acp-context-menu-item\"\n        [class.acp-context-menu-item--disabled]=\"subitem.disabled || false\"\n        [class.acp-context-menu-item--danger]=\"subitem.danger || false\"\n        [class.acp-context-menu-item--selected]=\"false\"\n        (click)=\"onItemClick(subitem, $event)\"\n        [disabled]=\"subitem.disabled || false\"\n        [attr.aria-label]=\"subitem.label\"\n        [attr.aria-disabled]=\"subitem.disabled || false\"\n        [title]=\"subitem.tooltip || null\"\n        role=\"menuitem\"\n        type=\"button\"\n      >\n        @if (subitem.icon) {\n        <span class=\"acp-context-menu-item-icon\">\n          @if (!subitem.icon.includes('/')) {\n          <mat-icon [attr.aria-hidden]=\"true\"> {{ subitem.icon }} </mat-icon>\n          } @if (subitem.icon.includes('/')) {\n          <img [src]=\"subitem.icon\" alt=\"\" aria-hidden=\"true\" />\n          }\n        </span>\n        }\n\n        <span class=\"acp-context-menu-item-label\"> {{ subitem.label }} </span>\n\n        @if (subitem.badge) {\n        <span class=\"acp-context-menu-item-badge\"> {{ subitem.badge }} </span>\n        } @if (subitem.shortcut) {\n        <span class=\"acp-context-menu-item-shortcut\"> {{ subitem.shortcut }} </span>\n        } @if (subitem.loading) {\n        <mat-spinner class=\"acp-context-menu-item-loader\" [diameter]=\"16\" [strokeWidth]=\"2\">\n        </mat-spinner>\n        }\n      </button>\n      } }\n    </div>\n    } }\n  </div>\n</div>\n", styles: [".acp-context-menu-panel-host{display:block;outline:none}.acp-context-menu-container{display:flex;flex-direction:column;min-width:200px;max-width:400px;max-height:80vh;background-color:var(--mat-sys-surface-container);border-radius:var(--acp-context-menu-border-radius, 4px);box-shadow:var(--acp-context-menu-shadow, 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12));outline:none;animation:acp-context-menu-enter .2s cubic-bezier(.4,0,.2,1);overflow:hidden}@media(prefers-reduced-motion:reduce){.acp-context-menu-container{animation:none}}@media(max-width:600px){.acp-context-menu-container{min-width:180px;max-width:300px}}@media(max-width:480px){.acp-context-menu-container{min-width:160px;max-width:280px}}.acp-context-menu-list{display:flex;flex-direction:column;padding:var(--acp-context-menu-padding, 8px 0);list-style:none;margin:0;overflow-y:auto;max-height:calc(80vh - 16px)}.acp-context-menu-list::-webkit-scrollbar{width:6px}.acp-context-menu-list::-webkit-scrollbar-track{background:transparent}.acp-context-menu-list::-webkit-scrollbar-thumb{background:var(--acp-context-menu-scrollbar-color, #bdbdbd);border-radius:3px}.acp-context-menu-list::-webkit-scrollbar-thumb:hover{background:var(--acp-context-menu-scrollbar-hover-color, #9e9e9e)}.acp-context-menu-item{display:flex;align-items:center;gap:12px;padding:var(--acp-context-menu-item-padding, 8px 16px);min-height:40px;background:none;border:none;color:var(--mat-sys-on-surface);font-size:var(--acp-context-menu-item-font-size, 14px);font-weight:500;text-align:left;cursor:pointer;transition:background-color .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;position:relative}@media(prefers-reduced-motion:reduce){.acp-context-menu-item{transition:none}}@media(max-width:600px){.acp-context-menu-item{padding:6px 12px;min-height:36px;font-size:13px;gap:10px}}@media(max-width:480px){.acp-context-menu-item{padding:6px 10px;min-height:34px;font-size:12px;gap:8px}}.acp-context-menu-item:hover:not(.acp-context-menu-item--disabled){background-color:var(--mat-sys-surface-container-highest)}.acp-context-menu-item:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:-2px}.acp-context-menu-item--selected:not(.acp-context-menu-item--disabled){background-color:var(--mat-sys-surface-container-highest)}.acp-context-menu-item--disabled{color:var(--mat-sys-on-surface-variant);cursor:not-allowed;opacity:.6}.acp-context-menu-item--disabled:hover{background-color:transparent}.acp-context-menu-item--danger{color:var(--mat-sys-error)}.acp-context-menu-item--danger:hover:not(.acp-context-menu-item--disabled){background-color:var(--mat-sys-error-container)}.acp-context-menu-item--separator{padding:0;min-height:auto;cursor:default;background:none}.acp-context-menu-item--separator:hover{background:none}.acp-context-menu-item--expanded{background-color:var(--mat-sys-surface-container-highest)}.acp-context-menu-item-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0}.acp-context-menu-item-icon mat-icon{font-size:20px;width:20px;height:20px}.acp-context-menu-item-icon img{width:100%;height:100%;object-fit:contain}.acp-context-menu-item-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-context-menu-item-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);border-radius:10px;font-size:12px;font-weight:600;flex-shrink:0}.acp-context-menu-item-shortcut{display:inline-block;color:var(--mat-sys-on-surface-variant);font-size:12px;font-weight:400;margin-left:12px;flex-shrink:0}.acp-context-menu-item-loader{display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:8px;flex-shrink:0}.acp-context-menu-item-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:8px;flex-shrink:0;color:var(--mat-sys-on-surface-variant);font-size:20px}.acp-context-menu-separator{height:1px;background-color:var(--mat-sys-outline-variant);margin:4px 0}.acp-context-menu-submenu{display:flex;flex-direction:column;padding:4px 0;background-color:var(--mat-sys-surface-container-high);border-left:2px solid var(--mat-sys-outline-variant);margin-left:8px;animation:acp-context-menu-slide-in .15s cubic-bezier(.4,0,.2,1)}@media(prefers-reduced-motion:reduce){.acp-context-menu-submenu{animation:none}}.acp-context-menu-submenu .acp-context-menu-item{padding-left:12px;font-size:13px}@keyframes acp-context-menu-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes acp-context-menu-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpContextMenuPanel, decorators: [{
             type: Component,
@@ -1864,7 +1703,7 @@ class AcpDialogActions {
         <ng-container [ngTemplateOutlet]="actionsTemplate" />
       </mat-dialog-actions>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: AcpButton, selector: "acp-button" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: AcpButton, selector: "acp-button" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogActions, decorators: [{
             type: Component,
@@ -2060,7 +1899,7 @@ class AcpDialogTitlebar {
     @if (renderInline()) {
       <ng-container [ngTemplateOutlet]="titlebarTemplate" />
     }
-  `, isInline: true, 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$3.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: AcpButton, selector: "acp-button" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, 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: AcpButton, selector: "acp-button" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogTitlebar, decorators: [{
             type: Component,
@@ -2259,7 +2098,7 @@ class AcpDialogContainer {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpDialogContainer, isStandalone: true, selector: "acp-dialog-container", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "actionOutlet", first: true, predicate: ["actionOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "titlebarOutletRef", first: true, predicate: ["titlebarOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "stringTemplate", first: true, predicate: ["stringContent"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (headerConfig(); as header) { @if (config.showHeader !== false && !hasDeclarativeTitlebar()) {\n<acp-dialog-titlebar\n  [title]=\"header.title\"\n  [subtitle]=\"header.subtitle\"\n  [icon]=\"header.icon\"\n  [closable]=\"header.closable ?? true\"\n  [closeLabel]=\"header.closeLabel ?? 'Close dialog'\"\n  [draggable]=\"header.draggable ?? true\"\n  [color]=\"header.color\"\n  [colorClass]=\"header.colorClass\"\n  [closeColor]=\"header.closeColor\"\n/>\n} }\n\n<ng-template #titlebarOutlet />\n\n<mat-dialog-content class=\"acp-dialog-content\">\n  <ng-template #contentHost />\n  <ng-template #stringContent let-content>\n    <div class=\"acp-dialog-message\">{{ content }}</div>\n  </ng-template>\n</mat-dialog-content>\n\n@if ((config.actions?.length && config.showActions !== false) || hasDeclarativeActions()) {\n<acp-dialog-actions\n  [align]=\"resolvedActionsAlign()\"\n  [actions]=\"hasDeclarativeActions() ? undefined : config.actions\"\n  [dialogTitle]=\"resolvedDialogTitle()\"\n>\n  <ng-template #actionOutlet />\n</acp-dialog-actions>\n}\n", styles: [".acp-dialog-header{cursor:move;border-bottom:1px solid var(--acp-dialog-header-border-color, var(--mat-sys-outline-variant, #dee2e6));color:var(--acp-dialog-header-text-color, var(--mat-sys-on-surface, #212529));position:relative}.acp-dialog-header.acp-dialog-header--primary{background-color:var(--acp-dialog-primary-header-background-color, var(--mat-sys-primary, #1976d2));color:var(--acp-dialog-primary-header-text-color, var(--mat-sys-on-primary, #fff))}.acp-dialog-header.acp-dialog-header--secondary{background-color:var(--acp-dialog-secondary-header-background-color, var(--mat-sys-secondary, #9c27b0));color:var(--acp-dialog-secondary-header-text-color, var(--mat-sys-on-secondary, #fff))}.acp-dialog-header.acp-dialog-header--accent{background-color:var(--acp-dialog-accent-header-background-color, var(--mat-sys-tertiary, #7c4dff));color:var(--acp-dialog-accent-header-text-color, var(--mat-sys-on-tertiary, #fff))}.acp-dialog-header.acp-dialog-header--error,.acp-dialog-header.acp-dialog-header--danger{background-color:var(--acp-dialog-error-header-background-color, var(--mat-sys-error, #b3261e));color:var(--acp-dialog-error-header-text-color, var(--mat-sys-on-error, #fff))}.acp-dialog-header.acp-dialog-header--success{background-color:var(--acp-dialog-success-header-background-color, #22c55e);color:var(--acp-dialog-success-header-text-color, #fff)}.acp-dialog-header.acp-dialog-header--warning{background-color:var(--acp-dialog-warning-header-background-color, #f59e0b);color:var(--acp-dialog-warning-header-text-color, #212529)}.acp-dialog-header.acp-dialog-header--info{background-color:var(--acp-dialog-info-header-background-color, #0ea5e9);color:var(--acp-dialog-info-header-text-color, #fff)}.acp-dialog-header.acp-dialog-header--dark{background-color:var(--acp-dialog-dark-header-background-color, #212529);color:var(--acp-dialog-dark-header-text-color, #fff)}.acp-dialog-header[class*=acp-dialog-header--] .acp-dialog-subtitle{color:inherit;opacity:.85}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:var(--acp-dialog-title-font-size, 1.2rem);font-weight:var(--acp-dialog-title-font-weight, 500);margin:0;width:100%;padding-right:48px;color:currentColor}.acp-dialog-title-icon{margin-right:var(--acp-dialog-title-icon-gap, 12px);vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}.acp-dialog-subtitle{margin:0;padding:0 var(--acp-dialog-subtitle-padding, 24px) var(--acp-dialog-subtitle-padding, 16px);font-size:var(--acp-dialog-subtitle-font-size, .875rem);color:var(--acp-dialog-subtitle-color, var(--mat-sys-on-surface-variant, #6c757d))}.acp-dialog-message{padding:var(--acp-dialog-message-padding, 24px);color:var(--acp-dialog-message-text-color, var(--mat-sys-on-surface, #212529))}.acp-dialog-message-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 var(--acp-dialog-message-padding, 24px) var(--acp-dialog-message-padding, 24px)}.acp-dialog-actions{display:flex;align-items:center;gap:var(--acp-dialog-actions-gap, 8px);padding:var(--acp-dialog-actions-padding, 16px 24px);border-top:1px solid var(--acp-dialog-actions-border-color, var(--mat-sys-outline-variant, #dee2e6))}.acp-dialog-full-screen .mat-mdc-dialog-surface{height:100vh}.acp-dialog-full-screen acp-dialog-container{min-height:100vh}.acp-dialog-full-screen .acp-dialog-content.mat-mdc-dialog-content{max-height:100%;height:100%}.acp-dialog-full-screen .acp-dialog-actions,.acp-dialog-full-screen .mat-mdc-dialog-actions{margin-top:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: AcpDialogTitlebar, selector: "acp-dialog-titlebar", inputs: ["title", "subtitle", "icon", "closable", "closeLabel", "draggable", "color", "colorClass", "closeColor"], outputs: ["closed"] }, { kind: "component", type: AcpDialogActions, selector: "acp-dialog-actions", inputs: ["align", "actions", "dialogTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpDialogContainer, isStandalone: true, selector: "acp-dialog-container", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "actionOutlet", first: true, predicate: ["actionOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "titlebarOutletRef", first: true, predicate: ["titlebarOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "stringTemplate", first: true, predicate: ["stringContent"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (headerConfig(); as header) { @if (config.showHeader !== false && !hasDeclarativeTitlebar()) {\n<acp-dialog-titlebar\n  [title]=\"header.title\"\n  [subtitle]=\"header.subtitle\"\n  [icon]=\"header.icon\"\n  [closable]=\"header.closable ?? true\"\n  [closeLabel]=\"header.closeLabel ?? 'Close dialog'\"\n  [draggable]=\"header.draggable ?? true\"\n  [color]=\"header.color\"\n  [colorClass]=\"header.colorClass\"\n  [closeColor]=\"header.closeColor\"\n/>\n} }\n\n<ng-template #titlebarOutlet />\n\n<mat-dialog-content class=\"acp-dialog-content\">\n  <ng-template #contentHost />\n  <ng-template #stringContent let-content>\n    <div class=\"acp-dialog-message\">{{ content }}</div>\n  </ng-template>\n</mat-dialog-content>\n\n@if ((config.actions?.length && config.showActions !== false) || hasDeclarativeActions()) {\n<acp-dialog-actions\n  [align]=\"resolvedActionsAlign()\"\n  [actions]=\"hasDeclarativeActions() ? undefined : config.actions\"\n  [dialogTitle]=\"resolvedDialogTitle()\"\n>\n  <ng-template #actionOutlet />\n</acp-dialog-actions>\n}\n", styles: [".acp-dialog-header{cursor:move;border-bottom:1px solid var(--acp-dialog-header-border-color, var(--mat-sys-outline-variant, #dee2e6));color:var(--acp-dialog-header-text-color, var(--mat-sys-on-surface, #212529));position:relative}.acp-dialog-header.acp-dialog-header--primary{background-color:var(--acp-dialog-primary-header-background-color, var(--mat-sys-primary, #1976d2));color:var(--acp-dialog-primary-header-text-color, var(--mat-sys-on-primary, #fff))}.acp-dialog-header.acp-dialog-header--secondary{background-color:var(--acp-dialog-secondary-header-background-color, var(--mat-sys-secondary, #9c27b0));color:var(--acp-dialog-secondary-header-text-color, var(--mat-sys-on-secondary, #fff))}.acp-dialog-header.acp-dialog-header--accent{background-color:var(--acp-dialog-accent-header-background-color, var(--mat-sys-tertiary, #7c4dff));color:var(--acp-dialog-accent-header-text-color, var(--mat-sys-on-tertiary, #fff))}.acp-dialog-header.acp-dialog-header--error,.acp-dialog-header.acp-dialog-header--danger{background-color:var(--acp-dialog-error-header-background-color, var(--mat-sys-error, #b3261e));color:var(--acp-dialog-error-header-text-color, var(--mat-sys-on-error, #fff))}.acp-dialog-header.acp-dialog-header--success{background-color:var(--acp-dialog-success-header-background-color, #22c55e);color:var(--acp-dialog-success-header-text-color, #fff)}.acp-dialog-header.acp-dialog-header--warning{background-color:var(--acp-dialog-warning-header-background-color, #f59e0b);color:var(--acp-dialog-warning-header-text-color, #212529)}.acp-dialog-header.acp-dialog-header--info{background-color:var(--acp-dialog-info-header-background-color, #0ea5e9);color:var(--acp-dialog-info-header-text-color, #fff)}.acp-dialog-header.acp-dialog-header--dark{background-color:var(--acp-dialog-dark-header-background-color, #212529);color:var(--acp-dialog-dark-header-text-color, #fff)}.acp-dialog-header[class*=acp-dialog-header--] .acp-dialog-subtitle{color:inherit;opacity:.85}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:var(--acp-dialog-title-font-size, 1.2rem);font-weight:var(--acp-dialog-title-font-weight, 500);margin:0;width:100%;padding-right:48px;color:currentColor}.acp-dialog-title-icon{margin-right:var(--acp-dialog-title-icon-gap, 12px);vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}.acp-dialog-subtitle{margin:0;padding:0 var(--acp-dialog-subtitle-padding, 24px) var(--acp-dialog-subtitle-padding, 16px);font-size:var(--acp-dialog-subtitle-font-size, .875rem);color:var(--acp-dialog-subtitle-color, var(--mat-sys-on-surface-variant, #6c757d))}.acp-dialog-message{padding:var(--acp-dialog-message-padding, 24px);color:var(--acp-dialog-message-text-color, var(--mat-sys-on-surface, #212529))}.acp-dialog-message-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 var(--acp-dialog-message-padding, 24px) var(--acp-dialog-message-padding, 24px)}.acp-dialog-actions{display:flex;align-items:center;gap:var(--acp-dialog-actions-gap, 8px);padding:var(--acp-dialog-actions-padding, 16px 24px);border-top:1px solid var(--acp-dialog-actions-border-color, var(--mat-sys-outline-variant, #dee2e6))}.acp-dialog-full-screen .mat-mdc-dialog-surface{height:100vh}.acp-dialog-full-screen acp-dialog-container{min-height:100vh}.acp-dialog-full-screen .acp-dialog-content.mat-mdc-dialog-content{max-height:100%;height:100%}.acp-dialog-full-screen .acp-dialog-actions,.acp-dialog-full-screen .mat-mdc-dialog-actions{margin-top:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: AcpDialogTitlebar, selector: "acp-dialog-titlebar", inputs: ["title", "subtitle", "icon", "closable", "closeLabel", "draggable", "color", "colorClass", "closeColor"], outputs: ["closed"] }, { kind: "component", type: AcpDialogActions, selector: "acp-dialog-actions", inputs: ["align", "actions", "dialogTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDialogContainer, decorators: [{
             type: Component,
@@ -2727,7 +2566,7 @@ class DialogWrapper {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DialogWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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]=\"config.closeAriaLabel ?? '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}.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$3.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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]=\"config.closeAriaLabel ?? '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}.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.1.0", ngImport: i0, type: DialogWrapper, decorators: [{
             type: Component,
@@ -2840,13 +2679,246 @@ class DynamicSelect {
         this._onDestroy.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DynamicSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", 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$4.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "removeText", "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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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.1.0", 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", "removeText", "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.1.0", ngImport: i0, type: DynamicSelect, decorators: [{
             type: Component,
             args: [{ selector: 'acp-dynamic-select', imports: [NgSelectModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], hideSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelected", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectOnTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnTab", required: false }] }], openOnEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnEnter", required: false }] }], selectableGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableGroup", required: false }] }], selectableGroupAsModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableGroupAsModel", required: false }] }], clearOnBackspace: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearOnBackspace", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], searchWhileComposing: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchWhileComposing", required: false }] }], minTermLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTermLength", required: false }] }], editableSearchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "editableSearchTerm", required: false }] }], typeToSearchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeToSearchText", required: false }] }], addTagText: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTagText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllText", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
+const read = (item, accessor) => typeof accessor === 'function' ? accessor(item) : item[accessor];
+const toKey = (v) => typeof v === 'string' || typeof v === 'number' ? String(v).trim() : null;
+/** Matches `1` with `'1'`, useful when ids come as strings from forms or query params. */
+const acpSearchSelectLooseEquals = (a, b) => a === b || (toKey(a) !== null && toKey(a) === toKey(b));
+/** Lowercase and strip accents, so "camion" matches "Camión". */
+const acpSearchSelectNormalize = (text) => text.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase().trim();
+/**
+ * Searchable select built on `mat-autocomplete`. Accepts flat or one-level tree lists:
+ * an item whose `children` is an array renders as a group.
+ * Works with `ngModel`, reactive forms and `[(value)]`.
+ */
+class AcpSearchSelect {
+    document = inject(DOCUMENT);
+    ngControl = inject(NgControl, { self: true, optional: true });
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    // Data
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    bindLabel = input('value', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bindLabel" }] : /* istanbul ignore next */ []));
+    bindValue = input('id', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bindValue" }] : /* istanbul ignore next */ []));
+    children = input('children', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+    groupLabel = input('value', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupLabel" }] : /* istanbul ignore next */ []));
+    compareWith = input(acpSearchSelectLooseEquals, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    /** Custom match. Receives the item and the normalized query. */
+    filterFn = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterFn" }] : /* istanbul ignore next */ []));
+    /** Set to `false` when `items` already come filtered from the server (see `searchChange`). */
+    localFilter = input(true, { ...(ngDevMode ? { debugName: "localFilter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Value written when the field is cleared, e.g. `0` for "all". */
+    emptyValue = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyValue" }] : /* istanbul ignore next */ []));
+    // Field
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('Buscar...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    hint = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    errorText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    noResultsText = input('Sin resultados', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noResultsText" }] : /* istanbul ignore next */ []));
+    loadingText = input('Buscando...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
+    clearLabel = input('Limpiar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    appearance = input('outline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    clearable = input(true, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    optionSelected = output();
+    cleared = output();
+    /** Raw text typed by the user; debounce it in the consumer for server-side search. */
+    searchChange = output();
+    input = viewChild(MatInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
+    trigger = viewChild(MatAutocompleteTrigger, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    inputEl = viewChild('field', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+    optionTemplate = contentChild('option', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
+    /** Text typed by the user; `null` while not searching. */
+    query = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    errorStateMatcher = {
+        isErrorState: () => {
+            const control = this.ngControl;
+            if (!control?.invalid)
+                return false;
+            const submitted = this.parentFormGroup?.submitted || this.parentForm?.submitted;
+            return !!(control.touched || submitted);
+        },
+    };
+    constructor() {
+        if (this.ngControl)
+            this.ngControl.valueAccessor = this;
+    }
+    /** The inner `matInput` has no `NgControl`, so it never refreshes its error state by itself. */
+    ngDoCheck() {
+        this.input()?.updateErrorState();
+    }
+    groups = computed(() => {
+        const children = this.children();
+        const groupLabel = this.groupLabel();
+        const bindLabel = this.bindLabel();
+        const bindValue = this.bindValue();
+        const toOption = (item, group, index) => {
+            const value = read(item, bindValue);
+            return {
+                key: toKey(value) ?? `#${index}`,
+                label: String(read(item, bindLabel) ?? ''),
+                value,
+                source: item,
+                group,
+            };
+        };
+        const result = [];
+        let index = 0;
+        for (const item of this.items() ?? []) {
+            const nested = read(item, children);
+            if (Array.isArray(nested)) {
+                result.push({
+                    label: String(read(item, groupLabel) ?? ''),
+                    options: nested.map(child => toOption(child, item, index++)),
+                });
+                continue;
+            }
+            const last = result.at(-1);
+            const option = toOption(item, null, index++);
+            if (last && last.label === null)
+                last.options.push(option);
+            else
+                result.push({ label: null, options: [option] });
+        }
+        return result;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    filteredGroups = computed(() => {
+        const query = acpSearchSelectNormalize(this.query() ?? '');
+        if (!query || !this.localFilter())
+            return this.groups();
+        const custom = this.filterFn();
+        const match = (option) => custom
+            ? custom(option.source, query)
+            : acpSearchSelectNormalize(option.label).includes(query);
+        return this.groups()
+            .map(group => ({ ...group, options: group.options.filter(match) }))
+            .filter(group => group.options.length > 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredGroups" }] : /* istanbul ignore next */ []));
+    selected = computed(() => {
+        const value = this.value();
+        const compare = this.compareWith();
+        return this.groups()
+            .flatMap(group => group.options)
+            .find(option => compare(option.value, value));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    text = computed(() => this.query() ?? this.selected()?.label ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => {
+        const value = this.value();
+        return value !== null && value !== undefined && value !== this.emptyValue();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    displayWith = (option) => typeof option === 'string' ? option : (option?.label ?? '');
+    /** Clears the selection and the search text. */
+    clear() {
+        this.query.set(null);
+        this.setValue(this.emptyValue());
+        this.cleared.emit();
+    }
+    selectAll(event) {
+        event.target.select();
+    }
+    onInput(event) {
+        const text = event.target.value;
+        this.query.set(text);
+        this.searchChange.emit(text);
+        if (!text.trim() && this.hasValue()) {
+            this.setValue(this.emptyValue());
+            this.cleared.emit();
+        }
+    }
+    /** Leaving the field without picking drops the typed text and shows the selection again. */
+    onBlur() {
+        this.onTouched();
+        if (!this.trigger()?.panelOpen)
+            this.query.set(null);
+    }
+    /** The panel also closes while typing (e.g. no results yet); keep the text in that case. */
+    onClosed() {
+        if (this.document.activeElement !== this.inputEl()?.nativeElement)
+            this.query.set(null);
+    }
+    onSelected(event) {
+        const option = event.option.value;
+        this.query.set(null);
+        this.setValue(option.value);
+        this.optionSelected.emit({ value: option.value, item: option.source, group: option.group });
+    }
+    writeValue(value) {
+        this.query.set(null);
+        this.value.set(value ?? this.emptyValue());
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    setValue(value) {
+        if (value === this.value())
+            return;
+        this.value.set(value);
+        this.onChange(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpSearchSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpSearchSelect, isStandalone: true, selector: "acp-search-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, groupLabel: { classPropertyName: "groupLabel", publicName: "groupLabel", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, localFilter: { classPropertyName: "localFilter", publicName: "localFilter", isSignal: true, isRequired: false, transformFunction: null }, emptyValue: { classPropertyName: "emptyValue", publicName: "emptyValue", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", optionSelected: "optionSelected", cleared: "cleared", searchChange: "searchChange" }, host: { properties: { "attr.title": "null" }, classAttribute: "acp-search-select" }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["field"], descendants: true, isSignal: true }], exportAs: ["acpSearchSelect"], ngImport: i0, template: "<mat-form-field class=\"acp-search-select__field\" [appearance]=\"appearance()\">\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n  <input\n    #field\n    matInput\n    type=\"text\"\n    autocomplete=\"off\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"text()\"\n    [required]=\"required()\"\n    [disabled]=\"isDisabled()\"\n    [errorStateMatcher]=\"errorStateMatcher\"\n    [matAutocomplete]=\"auto\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    (click)=\"selectAll($event)\"\n  />\n\n  @if (loading()) {\n  <mat-spinner matSuffix diameter=\"18\" />\n  } @else if (clearable() && hasValue() && !isDisabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    type=\"button\"\n    [attr.aria-label]=\"clearLabel()\"\n    (click)=\"clear()\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n  } @if (hint()) {\n  <mat-hint>{{ hint() }}</mat-hint>\n  } @if (errorText()) {\n  <mat-error>{{ errorText() }}</mat-error>\n  }\n\n  <mat-autocomplete\n    #auto=\"matAutocomplete\"\n    autoActiveFirstOption\n    [displayWith]=\"displayWith\"\n    (optionSelected)=\"onSelected($event)\"\n    (closed)=\"onClosed()\"\n  >\n    @for (group of filteredGroups(); track (group.label ?? $index)) { @if (group.label === null) { @for (option of\n    group.options; track option.key) {\n    <mat-option [value]=\"option\">\n      <ng-container\n        [ngTemplateOutlet]=\"optionContent\"\n        [ngTemplateOutletContext]=\"{ $implicit: option }\"\n      />\n    </mat-option>\n    } } @else {\n    <mat-optgroup [label]=\"group.label\">\n      @for (option of group.options; track option.key) {\n      <mat-option [value]=\"option\">\n        <ng-container\n          [ngTemplateOutlet]=\"optionContent\"\n          [ngTemplateOutletContext]=\"{ $implicit: option }\"\n        />\n      </mat-option>\n      }\n    </mat-optgroup>\n    } } @empty {\n    <mat-option disabled>{{ loading() ? loadingText() : noResultsText() }}</mat-option>\n    }\n  </mat-autocomplete>\n</mat-form-field>\n\n<ng-template #optionContent let-option>\n  @if (optionTemplate(); as tpl) {\n  <ng-container\n    [ngTemplateOutlet]=\"tpl\"\n    [ngTemplateOutletContext]=\"{ $implicit: option.source, group: option.group }\"\n  />\n  } @else { {{ option.label }} }\n</ng-template>\n", styles: [":host{display:block}.acp-search-select__field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpSearchSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'acp-search-select', exportAs: 'acpSearchSelect', imports: [
+                        NgTemplateOutlet,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatAutocompleteModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'acp-search-select', '[attr.title]': 'null' }, template: "<mat-form-field class=\"acp-search-select__field\" [appearance]=\"appearance()\">\n  @if (label()) {\n  <mat-label>{{ label() }}</mat-label>\n  }\n  <input\n    #field\n    matInput\n    type=\"text\"\n    autocomplete=\"off\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"text()\"\n    [required]=\"required()\"\n    [disabled]=\"isDisabled()\"\n    [errorStateMatcher]=\"errorStateMatcher\"\n    [matAutocomplete]=\"auto\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    (click)=\"selectAll($event)\"\n  />\n\n  @if (loading()) {\n  <mat-spinner matSuffix diameter=\"18\" />\n  } @else if (clearable() && hasValue() && !isDisabled()) {\n  <button\n    mat-icon-button\n    matSuffix\n    type=\"button\"\n    [attr.aria-label]=\"clearLabel()\"\n    (click)=\"clear()\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n  } @if (hint()) {\n  <mat-hint>{{ hint() }}</mat-hint>\n  } @if (errorText()) {\n  <mat-error>{{ errorText() }}</mat-error>\n  }\n\n  <mat-autocomplete\n    #auto=\"matAutocomplete\"\n    autoActiveFirstOption\n    [displayWith]=\"displayWith\"\n    (optionSelected)=\"onSelected($event)\"\n    (closed)=\"onClosed()\"\n  >\n    @for (group of filteredGroups(); track (group.label ?? $index)) { @if (group.label === null) { @for (option of\n    group.options; track option.key) {\n    <mat-option [value]=\"option\">\n      <ng-container\n        [ngTemplateOutlet]=\"optionContent\"\n        [ngTemplateOutletContext]=\"{ $implicit: option }\"\n      />\n    </mat-option>\n    } } @else {\n    <mat-optgroup [label]=\"group.label\">\n      @for (option of group.options; track option.key) {\n      <mat-option [value]=\"option\">\n        <ng-container\n          [ngTemplateOutlet]=\"optionContent\"\n          [ngTemplateOutletContext]=\"{ $implicit: option }\"\n        />\n      </mat-option>\n      }\n    </mat-optgroup>\n    } } @empty {\n    <mat-option disabled>{{ loading() ? loadingText() : noResultsText() }}</mat-option>\n    }\n  </mat-autocomplete>\n</mat-form-field>\n\n<ng-template #optionContent let-option>\n  @if (optionTemplate(); as tpl) {\n  <ng-container\n    [ngTemplateOutlet]=\"tpl\"\n    [ngTemplateOutletContext]=\"{ $implicit: option.source, group: option.group }\"\n  />\n  } @else { {{ option.label }} }\n</ng-template>\n", styles: [":host{display:block}.acp-search-select__field{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], children: [{ type: i0.Input, args: [{ isSignal: true, alias: "children", required: false }] }], groupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupLabel", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], localFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "localFilter", required: false }] }], emptyValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyValue", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], input: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatInput), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatAutocompleteTrigger), { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: ['option', { isSignal: true }] }] } });
+
 class UserIcon {
     size = input('35', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -4782,7 +4854,7 @@ class AcpGridColumnMenu {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpGridColumnMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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.1.0", 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.1.0", ngImport: i0, type: AcpGridColumnMenu, decorators: [{
             type: Component,
@@ -6297,7 +6369,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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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.1.0", ngImport: i0, type: DateRangePicker, decorators: [{
             type: Component,
@@ -9275,7 +9347,7 @@ class AcpDateRangeInput {
         this._dateOptions.set(options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDateRangeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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 (calendar.selectedDates?.end)\n            {\n            <span> - {{ calendar.selectedDates?.end | date: dateFormat }} </span>\n            }\n          </span>\n          }\n          <div class=\"buttons\">\n            <acp-button\n              type=\"button\"\n              appearance=\"filled\"\n              color=\"primary\"\n              size=\"small\"\n              [class.disabled]=\"\n                enableEditableDates\n                  ? editableForm.invalid\n                  : !(calendar.selectedDates?.start && calendar.selectedDates?.end)\n              \"\n              (clicked)=\"\n                enableEditableDates && commitEditableDates(calendar);\n                updateCustomRange(dateInput, calendar.selectedDates)\n              \"\n            >\n              &nbsp;Aplicar&nbsp;\n            </acp-button>\n            <acp-button\n              type=\"button\"\n              appearance=\"text\"\n              color=\"error\"\n              size=\"small\"\n              (clicked)=\"isCustomRange = false\"\n              >Cancelar</acp-button\n            >\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: ["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:0;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}.ndp-range-label-text{color:var(--mat-sys-on-surface)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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$1.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$1.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: AcpButton, selector: "acp-button" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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 (calendar.selectedDates?.end)\n            {\n            <span> - {{ calendar.selectedDates?.end | date: dateFormat }} </span>\n            }\n          </span>\n          }\n          <div class=\"buttons\">\n            <acp-button\n              type=\"button\"\n              appearance=\"filled\"\n              color=\"primary\"\n              size=\"small\"\n              [class.disabled]=\"\n                enableEditableDates\n                  ? editableForm.invalid\n                  : !(calendar.selectedDates?.start && calendar.selectedDates?.end)\n              \"\n              (clicked)=\"\n                enableEditableDates && commitEditableDates(calendar);\n                updateCustomRange(dateInput, calendar.selectedDates)\n              \"\n            >\n              &nbsp;Aplicar&nbsp;\n            </acp-button>\n            <acp-button\n              type=\"button\"\n              appearance=\"text\"\n              color=\"error\"\n              size=\"small\"\n              (clicked)=\"isCustomRange = false\"\n              >Cancelar</acp-button\n            >\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: ["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:0;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}.ndp-range-label-text{color:var(--mat-sys-on-surface)}\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: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i4.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: i4.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: i7.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i7.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: i8.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: AcpButton, selector: "acp-button" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpDateRangeInput, decorators: [{
             type: Component,
@@ -9585,7 +9657,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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.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.1.0", ngImport: i0, type: AcpCheckboxGroup, decorators: [{
             type: Component,
@@ -9617,170 +9689,314 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 args: [{ transform: booleanAttribute }]
             }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
+/**
+ * Defaults for every `acp-card` in the injector tree. Mirrors `MAT_CARD_CONFIG`.
+ * Can also be provided at component level: `providers: [{ provide: ACP_CARD_DEFAULT_OPTIONS, useValue }]`.
+ */
+const ACP_CARD_DEFAULT_OPTIONS = new InjectionToken('ACP_CARD_DEFAULT_OPTIONS');
+/**
+ * Registers application-wide card defaults, e.g.:
+ * `provideAcpCardDefaults({ appearance: 'outlined', rounded: 16 })`.
+ */
+function provideAcpCardDefaults(defaults) {
+    return makeEnvironmentProviders([{ provide: ACP_CARD_DEFAULT_OPTIONS, useValue: defaults }]);
+}
+
+/**
+ * Typed slot directives for `acp-card`. Preferred over `#title`-style template refs:
+ * they are type-checked, discoverable and never collide with refs of nested components.
+ *
+ * @example
+ * ```html
+ * <acp-card>
+ *   <ng-template acpCardTitle>Order #123</ng-template>
+ *   <p>Body</p>
+ *   <ng-template acpCardActions><acp-button text="Open" /></ng-template>
+ * </acp-card>
+ * ```
+ */
+class AcpCardHeader {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpCardHeader, isStandalone: true, selector: "ng-template[acpCardHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardHeader, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[acpCardHeader]' }]
+        }] });
+class AcpCardMedia {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardMedia, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpCardMedia, isStandalone: true, selector: "ng-template[acpCardMedia]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardMedia, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[acpCardMedia]' }]
+        }] });
+class AcpCardAvatar {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpCardAvatar, isStandalone: true, selector: "ng-template[acpCardAvatar]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardAvatar, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[acpCardAvatar]' }]
+        }] });
+class AcpCardTitle {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpCardTitle, isStandalone: true, selector: "ng-template[acpCardTitle]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardTitle, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[acpCardTitle]' }]
+        }] });
+class AcpCardSubtitle {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardSubtitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpCardSubtitle, isStandalone: true, selector: "ng-template[acpCardSubtitle]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardSubtitle, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[acpCardSubtitle]' }]
+        }] });
+class AcpCardActions {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpCardActions, isStandalone: true, selector: "ng-template[acpCardActions]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardActions, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[acpCardActions]' }]
+        }] });
+class AcpCardFooter {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AcpCardFooter, isStandalone: true, selector: "ng-template[acpCardFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCardFooter, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[acpCardFooter]' }]
+        }] });
+const ACP_CARD_SLOTS = [
+    AcpCardHeader,
+    AcpCardMedia,
+    AcpCardAvatar,
+    AcpCardTitle,
+    AcpCardSubtitle,
+    AcpCardActions,
+    AcpCardFooter,
+];
+
+const optionalBoolean = (value) => value == null ? undefined : booleanAttribute(value);
 class AcpCard {
-    // Appearance variant
-    appearance = input('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    // Elevation level (0-5)
-    elevation = input(1, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "elevation" }] : /* istanbul ignore next */ []));
-    // Border radius (true for default, or specific pixel value)
-    rounded = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
-    // Hover effect
-    hover = input(false, { ...(ngDevMode ? { debugName: "hover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    // Clickable card
+    defaults = inject(ACP_CARD_DEFAULT_OPTIONS, { optional: true }) ?? {};
+    // Content shortcuts (use the slot directives for rich content)
+    title = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    // Appearance
+    appearance = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "appearance" }] : /* istanbul ignore next */ []));
+    color = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    elevation = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "elevation" }] : /* istanbul ignore next */ []));
+    /** `true` = theme radius, `false` = square, number = radius in px. */
+    rounded = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rounded" }] : /* istanbul ignore next */ []));
+    padding = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "padding" }] : /* istanbul ignore next */ []));
+    hoverable = input(undefined, { ...(ngDevMode ? { debugName: "hoverable" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    actionsAlign = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "actionsAlign" }] : /* istanbul ignore next */ []));
+    /** Aspect ratio applied to the media slot. Media keeps its natural size when unset. */
+    imageRatio = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "imageRatio" }] : /* istanbul ignore next */ []));
+    // State
     clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    // Outlined style
-    outlined = input(false, { ...(ngDevMode ? { debugName: "outlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    // Disabled state
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    // Padding size
-    padding = input('medium', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
-    // Image aspect ratio
-    imageRatio = input('16:9', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "imageRatio" }] : /* istanbul ignore next */ []));
-    // Full height
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    // Layout
     fullHeight = input(false, { ...(ngDevMode ? { debugName: "fullHeight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    // Full width
     fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    // Background color variant
-    backgroundColor = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
-    // Pass Through options for styling customization
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     passThrough = input({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "passThrough" }] : /* istanbul ignore next */ []));
-    // Slots
-    headerTemplate;
-    mediaTemplate;
-    avatarTemplate;
-    titleTemplate;
-    subtitleTemplate;
-    actionsTemplate;
-    footerTemplate;
-    get role() {
-        return this.clickable() ? 'button' : 'article';
-    }
-    get tabindex() {
-        return this.clickable() && !this.disabled() ? '0' : null;
+    /** Emitted on click, Enter or Space when `clickable` and not disabled/loading. */
+    clicked = output();
+    // Slots: directive (`<ng-template acpCardTitle>`) first, legacy `#title` ref as fallback
+    headerDir = contentChild(AcpCardHeader, { ...(ngDevMode ? { debugName: "headerDir" } : /* istanbul ignore next */ {}), descendants: false });
+    mediaDir = contentChild(AcpCardMedia, { ...(ngDevMode ? { debugName: "mediaDir" } : /* istanbul ignore next */ {}), descendants: false });
+    avatarDir = contentChild(AcpCardAvatar, { ...(ngDevMode ? { debugName: "avatarDir" } : /* istanbul ignore next */ {}), descendants: false });
+    titleDir = contentChild(AcpCardTitle, { ...(ngDevMode ? { debugName: "titleDir" } : /* istanbul ignore next */ {}), descendants: false });
+    subtitleDir = contentChild(AcpCardSubtitle, { ...(ngDevMode ? { debugName: "subtitleDir" } : /* istanbul ignore next */ {}), descendants: false });
+    actionsDir = contentChild(AcpCardActions, { ...(ngDevMode ? { debugName: "actionsDir" } : /* istanbul ignore next */ {}), descendants: false });
+    footerDir = contentChild(AcpCardFooter, { ...(ngDevMode ? { debugName: "footerDir" } : /* istanbul ignore next */ {}), descendants: false });
+    headerRef = contentChild('header', { ...(ngDevMode ? { debugName: "headerRef" } : /* istanbul ignore next */ {}), read: TemplateRef, descendants: false });
+    mediaRef = contentChild('media', { ...(ngDevMode ? { debugName: "mediaRef" } : /* istanbul ignore next */ {}), read: TemplateRef, descendants: false });
+    avatarRef = contentChild('avatar', { ...(ngDevMode ? { debugName: "avatarRef" } : /* istanbul ignore next */ {}), read: TemplateRef, descendants: false });
+    titleRef = contentChild('title', { ...(ngDevMode ? { debugName: "titleRef" } : /* istanbul ignore next */ {}), read: TemplateRef, descendants: false });
+    subtitleRef = contentChild('subtitle', { ...(ngDevMode ? { debugName: "subtitleRef" } : /* istanbul ignore next */ {}), read: TemplateRef,
+        descendants: false });
+    actionsRef = contentChild('actions', { ...(ngDevMode ? { debugName: "actionsRef" } : /* istanbul ignore next */ {}), read: TemplateRef, descendants: false });
+    footerRef = contentChild('footer', { ...(ngDevMode ? { debugName: "footerRef" } : /* istanbul ignore next */ {}), read: TemplateRef, descendants: false });
+    headerTpl = computed(() => this.headerDir()?.templateRef ?? this.headerRef(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerTpl" }] : /* istanbul ignore next */ []));
+    mediaTpl = computed(() => this.mediaDir()?.templateRef ?? this.mediaRef(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mediaTpl" }] : /* istanbul ignore next */ []));
+    avatarTpl = computed(() => this.avatarDir()?.templateRef ?? this.avatarRef(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "avatarTpl" }] : /* istanbul ignore next */ []));
+    titleTpl = computed(() => this.titleDir()?.templateRef ?? this.titleRef(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleTpl" }] : /* istanbul ignore next */ []));
+    subtitleTpl = computed(() => this.subtitleDir()?.templateRef ?? this.subtitleRef(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitleTpl" }] : /* istanbul ignore next */ []));
+    actionsTpl = computed(() => this.actionsDir()?.templateRef ?? this.actionsRef(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionsTpl" }] : /* istanbul ignore next */ []));
+    footerTpl = computed(() => this.footerDir()?.templateRef ?? this.footerRef(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerTpl" }] : /* istanbul ignore next */ []));
+    hasTitleGroup = computed(() => !!(this.avatarTpl() ||
+        this.titleTpl() ||
+        this.subtitleTpl() ||
+        this.title() ||
+        this.subtitle()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasTitleGroup" }] : /* istanbul ignore next */ []));
+    resolvedAppearance = computed(() => this.appearance() ?? this.defaults.appearance ?? 'elevated', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
+    matAppearance = computed(() => {
+        const appearance = this.resolvedAppearance();
+        return appearance === 'elevated' ? 'raised' : appearance;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matAppearance" }] : /* istanbul ignore next */ []));
+    resolvedPadding = computed(() => this.padding() ?? this.defaults.padding ?? 'medium', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPadding" }] : /* istanbul ignore next */ []));
+    resolvedColor = computed(() => this.color() ?? this.defaults.color, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
+    resolvedHoverable = computed(() => this.hoverable() ?? this.defaults.hoverable ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedHoverable" }] : /* istanbul ignore next */ []));
+    resolvedActionsAlign = computed(() => this.actionsAlign() ?? this.defaults.actionsAlign ?? 'start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedActionsAlign" }] : /* istanbul ignore next */ []));
+    mediaRatio = computed(() => (this.imageRatio() ?? this.defaults.imageRatio)?.replace(':', ' / '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mediaRatio" }] : /* istanbul ignore next */ []));
+    interactive = computed(() => this.clickable() && !this.disabled() && !this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    shape = computed(() => {
+        const rounded = this.rounded() ?? this.defaults.rounded ?? true;
+        if (rounded === true)
+            return null;
+        return rounded === false ? '0px' : `${rounded}px`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    elevationShadow = computed(() => {
+        const level = this.elevation() ?? this.defaults.elevation;
+        if (level === undefined)
+            return null;
+        return level === 0 ? 'none' : `var(--mat-sys-level${level})`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "elevationShadow" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const classes = [
+            'acp-card-wrapper',
+            `acp-card--${this.resolvedAppearance()}`,
+            `acp-card--padding-${this.resolvedPadding()}`,
+        ];
+        const color = this.resolvedColor();
+        if (color)
+            classes.push(`acp-card--${color}`);
+        if (this.resolvedHoverable())
+            classes.push('acp-card--hover');
+        if (this.clickable())
+            classes.push('acp-card--clickable');
+        if (this.disabled())
+            classes.push('acp-card--disabled');
+        if (this.loading())
+            classes.push('acp-card--loading');
+        if (this.fullHeight())
+            classes.push('acp-card--full-height');
+        if (this.fullWidth())
+            classes.push('acp-card--full-width');
+        return classes.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    onActivate(event) {
+        if (!this.interactive())
+            return;
+        const host = event.currentTarget;
+        const nested = event.target?.closest('.mat-mdc-card-actions, a, button, input, select, textarea');
+        if (nested && nested !== host && host.contains(nested))
+            return;
+        this.clicked.emit(event);
     }
-    get ariaDisabled() {
-        return this.disabled() ? 'true' : null;
+    onKeyActivate(event) {
+        if (!this.interactive() || event.target !== event.currentTarget)
+            return;
+        event.preventDefault();
+        this.clicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpCard, isStandalone: true, selector: "acp-card", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, imageRatio: { classPropertyName: "imageRatio", publicName: "imageRatio", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, passThrough: { classPropertyName: "passThrough", publicName: "passThrough", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.acp-card--rounded": "rounded() === true", "class.acp-card--rounded-4": "rounded() === 4", "class.acp-card--rounded-8": "rounded() === 8", "class.acp-card--rounded-12": "rounded() === 12", "class.acp-card--rounded-16": "rounded() === 16", "class.acp-card--rounded-20": "rounded() === 20", "class.acp-card--rounded-24": "rounded() === 24", "class.acp-card--hover": "hover()", "class.acp-card--clickable": "clickable()", "class.acp-card--disabled": "disabled()", "class.acp-card--padding-small": "padding() === \"small\"", "class.acp-card--padding-medium": "padding() === \"medium\"", "class.acp-card--padding-large": "padding() === \"large\"", "class.acp-card--full-height": "fullHeight()", "class.acp-card--full-width": "fullWidth()", "attr.role": "this.role", "attr.tabindex": "this.tabindex", "attr.aria-disabled": "this.ariaDisabled" }, classAttribute: "acp-card-wrapper" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, read: TemplateRef }, { propertyName: "mediaTemplate", first: true, predicate: ["media"], descendants: true, read: TemplateRef }, { propertyName: "avatarTemplate", first: true, predicate: ["avatar"], descendants: true, read: TemplateRef }, { propertyName: "titleTemplate", first: true, predicate: ["title"], descendants: true, read: TemplateRef }, { propertyName: "subtitleTemplate", first: true, predicate: ["subtitle"], descendants: true, read: TemplateRef }, { propertyName: "actionsTemplate", first: true, predicate: ["actions"], descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<mat-card\n  class=\"acp-card\"\n  [ngClass]=\"passThrough().root?.class\"\n  [ngStyle]=\"passThrough().root?.style\"\n  [class]=\"backgroundColor() ? 'acp-card--' + backgroundColor() : ''\"\n>\n  @if (headerTemplate) {\n  <mat-card-header [ngClass]=\"passThrough().header?.class\" [ngStyle]=\"passThrough().header?.style\">\n    <ng-template [ngTemplateOutlet]=\"headerTemplate\" />\n  </mat-card-header>\n  } @if (mediaTemplate) {\n  <ng-template [ngTemplateOutlet]=\"mediaTemplate\" />\n  } @if (titleTemplate || subtitleTemplate || avatarTemplate) {\n  <mat-card-header [ngClass]=\"passThrough().header?.class\" [ngStyle]=\"passThrough().header?.style\">\n    @if (avatarTemplate) {\n    <div\n      mat-card-avatar\n      [ngClass]=\"passThrough().avatar?.class\"\n      [ngStyle]=\"passThrough().avatar?.style\"\n    >\n      <ng-template [ngTemplateOutlet]=\"avatarTemplate\" />\n    </div>\n    } @if (titleTemplate) {\n    <mat-card-title [ngClass]=\"passThrough().title?.class\" [ngStyle]=\"passThrough().title?.style\">\n      <ng-template [ngTemplateOutlet]=\"titleTemplate\" />\n    </mat-card-title>\n    } @if (subtitleTemplate) {\n    <mat-card-subtitle\n      [ngClass]=\"passThrough().subtitle?.class\"\n      [ngStyle]=\"passThrough().subtitle?.style\"\n    >\n      <ng-template [ngTemplateOutlet]=\"subtitleTemplate\" />\n    </mat-card-subtitle>\n    }\n  </mat-card-header>\n  }\n\n  <mat-card-content\n    [ngClass]=\"passThrough().content?.class\"\n    [ngStyle]=\"passThrough().content?.style\"\n  >\n    <ng-content />\n  </mat-card-content>\n\n  @if (actionsTemplate) {\n  <mat-card-actions\n    [ngClass]=\"passThrough().actions?.class\"\n    [ngStyle]=\"passThrough().actions?.style\"\n  >\n    <ng-template [ngTemplateOutlet]=\"actionsTemplate\" />\n  </mat-card-actions>\n  } @if (footerTemplate) {\n  <mat-card-footer [ngClass]=\"passThrough().footer?.class\" [ngStyle]=\"passThrough().footer?.style\">\n    <ng-template [ngTemplateOutlet]=\"footerTemplate\" />\n  </mat-card-footer>\n  }\n</mat-card>\n", styles: [".acp-card{--mat-card-elevated-container-color: light-dark(#ffffff, #1a1b1f);--mat-card-outlined-container-color: light-dark(#ffffff, #1a1b1f);--mat-card-title-text-line-height: 1.6rem;--mat-card-title-text-weight: 500;--mat-card-subtitle-text-weight: 400;--mat-card-elevated-container-shape: var(--mat-sys-corner-small);--mat-card-outlined-container-shape: var(--mat-sys-corner-small);--mat-card-outlined-outline-color: var(--mat-sys-outline-variant);--mat-card-filled-container-color: var(--mat-sys-surface-container-highest);--mat-card-title-text-size: var(--mat-sys-title-large);--mat-card-subtitle-text-size: var(--mat-sys-body-medium);--mat-card-subtitle-text-color: var(--mat-sys-on-surface-variant);--mat-card-elevated-container-elevation: 0 4px 12px rgba(0, 0, 0, .08)}.acp-card-media{width:100%;object-fit:cover;border-radius:var(--mat-sys-corner-large) var(--mat-sys-corner-large) 0 0}.mat-mdc-card-footer{padding:16px}.mat-mdc-card-actions{gap:8px}.acp-card-wrapper{display:block;transition:box-shadow .2s ease-in-out}.acp-card-wrapper.acp-card--hover:hover{box-shadow:var(--mat-sys-level3)}.acp-card-wrapper.acp-card--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.acp-card-wrapper.acp-card--clickable:hover{box-shadow:var(--mat-sys-level2)}.acp-card-wrapper.acp-card--clickable:active{box-shadow:var(--mat-sys-level1)}.acp-card-wrapper.acp-card--disabled{opacity:.6;pointer-events:none}.acp-card-wrapper.acp-card--rounded-4 .acp-card,.acp-card-wrapper.acp-card--rounded-4 .acp-card-media{border-radius:4px}.acp-card-wrapper.acp-card--rounded-8 .acp-card,.acp-card-wrapper.acp-card--rounded-8 .acp-card-media{border-radius:8px}.acp-card-wrapper.acp-card--rounded-12 .acp-card,.acp-card-wrapper.acp-card--rounded-12 .acp-card-media{border-radius:12px}.acp-card-wrapper.acp-card--rounded-16 .acp-card,.acp-card-wrapper.acp-card--rounded-16 .acp-card-media{border-radius:16px}.acp-card-wrapper.acp-card--rounded-20 .acp-card,.acp-card-wrapper.acp-card--rounded-20 .acp-card-media{border-radius:20px}.acp-card-wrapper.acp-card--rounded-24 .acp-card,.acp-card-wrapper.acp-card--rounded-24 .acp-card-media{border-radius:24px}.acp-card-wrapper.acp-card--padding-small .mat-mdc-card-content{padding:12px}.acp-card-wrapper.acp-card--padding-medium .mat-mdc-card-content{padding:16px}.acp-card-wrapper.acp-card--padding-large .mat-mdc-card-content{padding:24px}.acp-card-wrapper.acp-card--full-height{height:100%}.acp-card-wrapper.acp-card--full-width{width:100%}.acp-card--primary{color:var(--mat-sys-on-primary);background-color:var(--mat-sys-primary)}.acp-card--primary-container{color:var(--mat-sys-on-primary-container);background-color:var(--mat-sys-primary-container)}.acp-card--secondary{color:var(--mat-sys-on-secondary);background-color:var(--mat-sys-secondary)}.acp-card--secondary-container{color:var(--mat-sys-on-secondary-container);background-color:var(--mat-sys-secondary-container)}.acp-card--error{color:var(--mat-sys-on-error);background-color:var(--mat-sys-error)}.acp-card--error-container{color:var(--mat-sys-on-error-container);background-color:var(--mat-sys-error-container)}.acp-card--surface{color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface)}.acp-card--surface-variant{color:var(--mat-sys-on-surface-variant);background-color:var(--mat-sys-surface-variant)}.acp-card--surface-container-highest{color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface-container-highest)}.acp-card--surface-container-high{color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface-container-high)}.acp-card--surface-container{color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface-container)}.acp-card--surface-container-low{color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface-container-low)}.acp-card--surface-container-lowest{background-color:var(--mat-sys-surface-container-lowest)}.acp-card--inverse-surface{color:var(--mat-sys-inverse-on-surface);background-color:var(--mat-sys-inverse-surface)}.acp-card--disabled-bg{background-color:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}\n"], 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: "directive", type: i1.MatCardFooter, selector: "mat-card-footer" }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpCard, isStandalone: true, selector: "acp-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, actionsAlign: { classPropertyName: "actionsAlign", publicName: "actionsAlign", isSignal: true, isRequired: false, transformFunction: null }, imageRatio: { classPropertyName: "imageRatio", publicName: "imageRatio", 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 }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, passThrough: { classPropertyName: "passThrough", publicName: "passThrough", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onActivate($event)", "keydown.enter": "onKeyActivate($event)", "keydown.space": "onKeyActivate($event)" }, properties: { "class": "hostClasses()", "style.--acp-card-shape": "shape()", "style.--acp-card-elevation": "elevationShadow()", "attr.title": "null", "attr.role": "clickable() ? \"button\" : \"article\"", "attr.tabindex": "interactive() ? 0 : null", "attr.aria-label": "ariaLabel() ?? null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-busy": "loading() ? \"true\" : null" } }, queries: [{ propertyName: "headerDir", first: true, predicate: AcpCardHeader, isSignal: true }, { propertyName: "mediaDir", first: true, predicate: AcpCardMedia, isSignal: true }, { propertyName: "avatarDir", first: true, predicate: AcpCardAvatar, isSignal: true }, { propertyName: "titleDir", first: true, predicate: AcpCardTitle, isSignal: true }, { propertyName: "subtitleDir", first: true, predicate: AcpCardSubtitle, isSignal: true }, { propertyName: "actionsDir", first: true, predicate: AcpCardActions, isSignal: true }, { propertyName: "footerDir", first: true, predicate: AcpCardFooter, isSignal: true }, { propertyName: "headerRef", first: true, predicate: ["header"], read: TemplateRef, isSignal: true }, { propertyName: "mediaRef", first: true, predicate: ["media"], read: TemplateRef, isSignal: true }, { propertyName: "avatarRef", first: true, predicate: ["avatar"], read: TemplateRef, isSignal: true }, { propertyName: "titleRef", first: true, predicate: ["title"], read: TemplateRef, isSignal: true }, { propertyName: "subtitleRef", first: true, predicate: ["subtitle"], read: TemplateRef, isSignal: true }, { propertyName: "actionsRef", first: true, predicate: ["actions"], read: TemplateRef, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], read: TemplateRef, isSignal: true }], exportAs: ["acpCard"], ngImport: i0, template: "<mat-card\n  class=\"acp-card\"\n  [appearance]=\"matAppearance()\"\n  [ngClass]=\"passThrough().root?.class\"\n  [ngStyle]=\"passThrough().root?.style\"\n>\n  @if (loading()) {\n  <mat-progress-bar class=\"acp-card__progress\" mode=\"indeterminate\" />\n  } @if (headerTpl(); as header) {\n  <mat-card-header [ngClass]=\"passThrough().header?.class\" [ngStyle]=\"passThrough().header?.style\">\n    <ng-container [ngTemplateOutlet]=\"header\" />\n  </mat-card-header>\n  } @if (mediaTpl(); as media) {\n  <div\n    class=\"acp-card__media\"\n    [class.acp-card__media--ratio]=\"!!mediaRatio()\"\n    [style.aspect-ratio]=\"mediaRatio()\"\n    [ngClass]=\"passThrough().media?.class\"\n    [ngStyle]=\"passThrough().media?.style\"\n  >\n    <ng-container [ngTemplateOutlet]=\"media\" />\n  </div>\n  } @if (hasTitleGroup()) {\n  <mat-card-header [ngClass]=\"passThrough().header?.class\" [ngStyle]=\"passThrough().header?.style\">\n    @if (avatarTpl(); as avatar) {\n    <div\n      mat-card-avatar\n      [ngClass]=\"passThrough().avatar?.class\"\n      [ngStyle]=\"passThrough().avatar?.style\"\n    >\n      <ng-container [ngTemplateOutlet]=\"avatar\" />\n    </div>\n    } @if (titleTpl() || title()) {\n    <mat-card-title [ngClass]=\"passThrough().title?.class\" [ngStyle]=\"passThrough().title?.style\">\n      @if (titleTpl(); as titleTemplate) {\n      <ng-container [ngTemplateOutlet]=\"titleTemplate\" />\n      } @else { {{ title() }} }\n    </mat-card-title>\n    } @if (subtitleTpl() || subtitle()) {\n    <mat-card-subtitle\n      [ngClass]=\"passThrough().subtitle?.class\"\n      [ngStyle]=\"passThrough().subtitle?.style\"\n    >\n      @if (subtitleTpl(); as subtitleTemplate) {\n      <ng-container [ngTemplateOutlet]=\"subtitleTemplate\" />\n      } @else { {{ subtitle() }} }\n    </mat-card-subtitle>\n    }\n  </mat-card-header>\n  }\n\n  <mat-card-content\n    [ngClass]=\"passThrough().content?.class\"\n    [ngStyle]=\"passThrough().content?.style\"\n  >\n    <ng-content />\n  </mat-card-content>\n\n  @if (actionsTpl(); as actions) {\n  <mat-card-actions\n    [align]=\"resolvedActionsAlign()\"\n    [ngClass]=\"passThrough().actions?.class\"\n    [ngStyle]=\"passThrough().actions?.style\"\n  >\n    <ng-container [ngTemplateOutlet]=\"actions\" />\n  </mat-card-actions>\n  } @if (footerTpl(); as footer) {\n  <mat-card-footer [ngClass]=\"passThrough().footer?.class\" [ngStyle]=\"passThrough().footer?.style\">\n    <ng-container [ngTemplateOutlet]=\"footer\" />\n  </mat-card-footer>\n  }\n</mat-card>\n", styles: [":host{--acp-card-padding: 16px;display:block;border-radius:var(--acp-card-shape, var(--mat-sys-corner-small))}:host:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.acp-card{--mat-card-elevated-container-color: var(--acp-card-container-color, var(--mat-sys-surface-container-low));--mat-card-outlined-container-color: var(--acp-card-container-color, var(--mat-sys-surface));--mat-card-filled-container-color: var(--acp-card-container-color, var(--mat-sys-surface-container-highest));--mat-card-elevated-container-shape: var(--acp-card-shape, var(--mat-sys-corner-small));--mat-card-outlined-container-shape: var(--acp-card-shape, var(--mat-sys-corner-small));--mat-card-filled-container-shape: var(--acp-card-shape, var(--mat-sys-corner-small));--mat-card-elevated-container-elevation: var(--acp-card-elevation, var(--mat-sys-level1));--mat-card-outlined-outline-color: var(--acp-card-outline-color, var(--mat-sys-outline-variant));--mat-card-title-text-size: var(--mat-sys-title-large-size);--mat-card-title-text-line-height: var(--mat-sys-title-large-line-height);--mat-card-title-text-weight: 500;--mat-card-subtitle-text-size: var(--mat-sys-body-medium-size);--mat-card-subtitle-text-weight: 400;--mat-card-subtitle-text-color: var(--acp-card-subtitle-color, var(--mat-sys-on-surface-variant));color:var(--acp-card-on-color, var(--mat-sys-on-surface));transition:box-shadow .2s ease-in-out}.acp-card .mat-mdc-card-content{padding:var(--acp-card-padding)}.acp-card .mat-mdc-card-actions{gap:8px}.acp-card .mat-mdc-card-footer{padding:16px}.acp-card__progress{position:absolute;inset:0 0 auto;z-index:1;border-top-left-radius:inherit;border-top-right-radius:inherit;overflow:hidden}.acp-card__media{overflow:hidden}.acp-card__media:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.acp-card__media--ratio>:is(img,video,picture,iframe){display:block;width:100%;height:100%;object-fit:cover}:host(.acp-card--padding-none){--acp-card-padding: 0}:host(.acp-card--padding-small){--acp-card-padding: 12px}:host(.acp-card--padding-large){--acp-card-padding: 24px}:host(.acp-card--hover) .acp-card:hover{box-shadow:var(--mat-sys-level3)}:host(.acp-card--clickable){cursor:pointer;-webkit-user-select:none;user-select:none}:host(.acp-card--clickable) .acp-card:hover{box-shadow:var(--mat-sys-level2)}:host(.acp-card--clickable) .acp-card:active{box-shadow:var(--mat-sys-level1)}:host(.acp-card--disabled){opacity:.6;pointer-events:none}:host(.acp-card--loading){cursor:progress}:host(.acp-card--full-height){height:100%}:host(.acp-card--full-height) .acp-card{height:100%}:host(.acp-card--full-width){width:100%}:host(.acp-card--primary){--acp-card-container-color: var(--mat-sys-primary);--acp-card-on-color: var(--mat-sys-on-primary);--acp-card-subtitle-color: var(--mat-sys-on-primary);--acp-card-outline-color: transparent}:host(.acp-card--primary-container){--acp-card-container-color: var(--mat-sys-primary-container);--acp-card-on-color: var(--mat-sys-on-primary-container);--acp-card-subtitle-color: var(--mat-sys-on-primary-container);--acp-card-outline-color: transparent}:host(.acp-card--secondary){--acp-card-container-color: var(--mat-sys-secondary);--acp-card-on-color: var(--mat-sys-on-secondary);--acp-card-subtitle-color: var(--mat-sys-on-secondary);--acp-card-outline-color: transparent}:host(.acp-card--secondary-container){--acp-card-container-color: var(--mat-sys-secondary-container);--acp-card-on-color: var(--mat-sys-on-secondary-container);--acp-card-subtitle-color: var(--mat-sys-on-secondary-container);--acp-card-outline-color: transparent}:host(.acp-card--tertiary){--acp-card-container-color: var(--mat-sys-tertiary);--acp-card-on-color: var(--mat-sys-on-tertiary);--acp-card-subtitle-color: var(--mat-sys-on-tertiary);--acp-card-outline-color: transparent}:host(.acp-card--tertiary-container){--acp-card-container-color: var(--mat-sys-tertiary-container);--acp-card-on-color: var(--mat-sys-on-tertiary-container);--acp-card-subtitle-color: var(--mat-sys-on-tertiary-container);--acp-card-outline-color: transparent}:host(.acp-card--error){--acp-card-container-color: var(--mat-sys-error);--acp-card-on-color: var(--mat-sys-on-error);--acp-card-subtitle-color: var(--mat-sys-on-error);--acp-card-outline-color: transparent}:host(.acp-card--error-container){--acp-card-container-color: var(--mat-sys-error-container);--acp-card-on-color: var(--mat-sys-on-error-container);--acp-card-subtitle-color: var(--mat-sys-on-error-container);--acp-card-outline-color: transparent}:host(.acp-card--surface){--acp-card-container-color: var(--mat-sys-surface);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-variant){--acp-card-container-color: var(--mat-sys-surface-variant);--acp-card-on-color: var(--mat-sys-on-surface-variant);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container-highest){--acp-card-container-color: var(--mat-sys-surface-container-highest);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container-high){--acp-card-container-color: var(--mat-sys-surface-container-high);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container){--acp-card-container-color: var(--mat-sys-surface-container);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container-low){--acp-card-container-color: var(--mat-sys-surface-container-low);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container-lowest){--acp-card-container-color: var(--mat-sys-surface-container-lowest);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--inverse-surface){--acp-card-container-color: var(--mat-sys-inverse-surface);--acp-card-on-color: var(--mat-sys-inverse-on-surface);--acp-card-subtitle-color: var(--mat-sys-inverse-on-surface);--acp-card-outline-color: transparent}:host(.acp-card--disabled-bg){--acp-card-container-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);--acp-card-on-color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);--acp-card-subtitle-color: var(--acp-card-on-color)}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$6.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$6.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$6.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i1$6.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$6.MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: i1$6.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1$6.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1$6.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpCard, decorators: [{
             type: Component,
-            args: [{ selector: 'acp-card', standalone: true, imports: [MatCardModule, NgTemplateOutlet, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'acp-card-wrapper',
-                        '[class.acp-card--rounded]': 'rounded() === true',
-                        '[class.acp-card--rounded-4]': 'rounded() === 4',
-                        '[class.acp-card--rounded-8]': 'rounded() === 8',
-                        '[class.acp-card--rounded-12]': 'rounded() === 12',
-                        '[class.acp-card--rounded-16]': 'rounded() === 16',
-                        '[class.acp-card--rounded-20]': 'rounded() === 20',
-                        '[class.acp-card--rounded-24]': 'rounded() === 24',
-                        '[class.acp-card--hover]': 'hover()',
-                        '[class.acp-card--clickable]': 'clickable()',
-                        '[class.acp-card--disabled]': 'disabled()',
-                        '[class.acp-card--padding-small]': 'padding() === "small"',
-                        '[class.acp-card--padding-medium]': 'padding() === "medium"',
-                        '[class.acp-card--padding-large]': 'padding() === "large"',
-                        '[class.acp-card--full-height]': 'fullHeight()',
-                        '[class.acp-card--full-width]': 'fullWidth()',
-                    }, template: "<mat-card\n  class=\"acp-card\"\n  [ngClass]=\"passThrough().root?.class\"\n  [ngStyle]=\"passThrough().root?.style\"\n  [class]=\"backgroundColor() ? 'acp-card--' + backgroundColor() : ''\"\n>\n  @if (headerTemplate) {\n  <mat-card-header [ngClass]=\"passThrough().header?.class\" [ngStyle]=\"passThrough().header?.style\">\n    <ng-template [ngTemplateOutlet]=\"headerTemplate\" />\n  </mat-card-header>\n  } @if (mediaTemplate) {\n  <ng-template [ngTemplateOutlet]=\"mediaTemplate\" />\n  } @if (titleTemplate || subtitleTemplate || avatarTemplate) {\n  <mat-card-header [ngClass]=\"passThrough().header?.class\" [ngStyle]=\"passThrough().header?.style\">\n    @if (avatarTemplate) {\n    <div\n      mat-card-avatar\n      [ngClass]=\"passThrough().avatar?.class\"\n      [ngStyle]=\"passThrough().avatar?.style\"\n    >\n      <ng-template [ngTemplateOutlet]=\"avatarTemplate\" />\n    </div>\n    } @if (titleTemplate) {\n    <mat-card-title [ngClass]=\"passThrough().title?.class\" [ngStyle]=\"passThrough().title?.style\">\n      <ng-template [ngTemplateOutlet]=\"titleTemplate\" />\n    </mat-card-title>\n    } @if (subtitleTemplate) {\n    <mat-card-subtitle\n      [ngClass]=\"passThrough().subtitle?.class\"\n      [ngStyle]=\"passThrough().subtitle?.style\"\n    >\n      <ng-template [ngTemplateOutlet]=\"subtitleTemplate\" />\n    </mat-card-subtitle>\n    }\n  </mat-card-header>\n  }\n\n  <mat-card-content\n    [ngClass]=\"passThrough().content?.class\"\n    [ngStyle]=\"passThrough().content?.style\"\n  >\n    <ng-content />\n  </mat-card-content>\n\n  @if (actionsTemplate) {\n  <mat-card-actions\n    [ngClass]=\"passThrough().actions?.class\"\n    [ngStyle]=\"passThrough().actions?.style\"\n  >\n    <ng-template [ngTemplateOutlet]=\"actionsTemplate\" />\n  </mat-card-actions>\n  } @if (footerTemplate) {\n  <mat-card-footer [ngClass]=\"passThrough().footer?.class\" [ngStyle]=\"passThrough().footer?.style\">\n    <ng-template [ngTemplateOutlet]=\"footerTemplate\" />\n  </mat-card-footer>\n  }\n</mat-card>\n", styles: [".acp-card{--mat-card-elevated-container-color: light-dark(#ffffff, #1a1b1f);--mat-card-outlined-container-color: light-dark(#ffffff, #1a1b1f);--mat-card-title-text-line-height: 1.6rem;--mat-card-title-text-weight: 500;--mat-card-subtitle-text-weight: 400;--mat-card-elevated-container-shape: var(--mat-sys-corner-small);--mat-card-outlined-container-shape: var(--mat-sys-corner-small);--mat-card-outlined-outline-color: var(--mat-sys-outline-variant);--mat-card-filled-container-color: var(--mat-sys-surface-container-highest);--mat-card-title-text-size: var(--mat-sys-title-large);--mat-card-subtitle-text-size: var(--mat-sys-body-medium);--mat-card-subtitle-text-color: var(--mat-sys-on-surface-variant);--mat-card-elevated-container-elevation: 0 4px 12px rgba(0, 0, 0, .08)}.acp-card-media{width:100%;object-fit:cover;border-radius:var(--mat-sys-corner-large) var(--mat-sys-corner-large) 0 0}.mat-mdc-card-footer{padding:16px}.mat-mdc-card-actions{gap:8px}.acp-card-wrapper{display:block;transition:box-shadow .2s ease-in-out}.acp-card-wrapper.acp-card--hover:hover{box-shadow:var(--mat-sys-level3)}.acp-card-wrapper.acp-card--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.acp-card-wrapper.acp-card--clickable:hover{box-shadow:var(--mat-sys-level2)}.acp-card-wrapper.acp-card--clickable:active{box-shadow:var(--mat-sys-level1)}.acp-card-wrapper.acp-card--disabled{opacity:.6;pointer-events:none}.acp-card-wrapper.acp-card--rounded-4 .acp-card,.acp-card-wrapper.acp-card--rounded-4 .acp-card-media{border-radius:4px}.acp-card-wrapper.acp-card--rounded-8 .acp-card,.acp-card-wrapper.acp-card--rounded-8 .acp-card-media{border-radius:8px}.acp-card-wrapper.acp-card--rounded-12 .acp-card,.acp-card-wrapper.acp-card--rounded-12 .acp-card-media{border-radius:12px}.acp-card-wrapper.acp-card--rounded-16 .acp-card,.acp-card-wrapper.acp-card--rounded-16 .acp-card-media{border-radius:16px}.acp-card-wrapper.acp-card--rounded-20 .acp-card,.acp-card-wrapper.acp-card--rounded-20 .acp-card-media{border-radius:20px}.acp-card-wrapper.acp-card--rounded-24 .acp-card,.acp-card-wrapper.acp-card--rounded-24 .acp-card-media{border-radius:24px}.acp-card-wrapper.acp-card--padding-small .mat-mdc-card-content{padding:12px}.acp-card-wrapper.acp-card--padding-medium .mat-mdc-card-content{padding:16px}.acp-card-wrapper.acp-card--padding-large .mat-mdc-card-content{padding:24px}.acp-card-wrapper.acp-card--full-height{height:100%}.acp-card-wrapper.acp-card--full-width{width:100%}.acp-card--primary{color:var(--mat-sys-on-primary);background-color:var(--mat-sys-primary)}.acp-card--primary-container{color:var(--mat-sys-on-primary-container);background-color:var(--mat-sys-primary-container)}.acp-card--secondary{color:var(--mat-sys-on-secondary);background-color:var(--mat-sys-secondary)}.acp-card--secondary-container{color:var(--mat-sys-on-secondary-container);background-color:var(--mat-sys-secondary-container)}.acp-card--error{color:var(--mat-sys-on-error);background-color:var(--mat-sys-error)}.acp-card--error-container{color:var(--mat-sys-on-error-container);background-color:var(--mat-sys-error-container)}.acp-card--surface{color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface)}.acp-card--surface-variant{color:var(--mat-sys-on-surface-variant);background-color:var(--mat-sys-surface-variant)}.acp-card--surface-container-highest{color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface-container-highest)}.acp-card--surface-container-high{color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface-container-high)}.acp-card--surface-container{color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface-container)}.acp-card--surface-container-low{color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface-container-low)}.acp-card--surface-container-lowest{background-color:var(--mat-sys-surface-container-lowest)}.acp-card--inverse-surface{color:var(--mat-sys-inverse-on-surface);background-color:var(--mat-sys-inverse-surface)}.acp-card--disabled-bg{background-color:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}\n"] }]
-        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], imageRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageRatio", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], passThrough: [{ type: i0.Input, args: [{ isSignal: true, alias: "passThrough", required: false }] }], headerTemplate: [{
-                type: ContentChild,
-                args: ['header', { read: TemplateRef }]
-            }], mediaTemplate: [{
-                type: ContentChild,
-                args: ['media', { read: TemplateRef }]
-            }], avatarTemplate: [{
-                type: ContentChild,
-                args: ['avatar', { read: TemplateRef }]
-            }], titleTemplate: [{
-                type: ContentChild,
-                args: ['title', { read: TemplateRef }]
-            }], subtitleTemplate: [{
-                type: ContentChild,
-                args: ['subtitle', { read: TemplateRef }]
-            }], actionsTemplate: [{
-                type: ContentChild,
-                args: ['actions', { read: TemplateRef }]
-            }], footerTemplate: [{
-                type: ContentChild,
-                args: ['footer', { read: TemplateRef }]
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], ariaDisabled: [{
-                type: HostBinding,
-                args: ['attr.aria-disabled']
-            }] } });
+            args: [{ selector: 'acp-card', exportAs: 'acpCard', standalone: true, imports: [MatCardModule, MatProgressBar, NgTemplateOutlet, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[style.--acp-card-shape]': 'shape()',
+                        '[style.--acp-card-elevation]': 'elevationShadow()',
+                        '[attr.title]': 'null',
+                        '[attr.role]': 'clickable() ? "button" : "article"',
+                        '[attr.tabindex]': 'interactive() ? 0 : null',
+                        '[attr.aria-label]': 'ariaLabel() ?? null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-busy]': 'loading() ? "true" : null',
+                        '(click)': 'onActivate($event)',
+                        '(keydown.enter)': 'onKeyActivate($event)',
+                        '(keydown.space)': 'onKeyActivate($event)',
+                    }, template: "<mat-card\n  class=\"acp-card\"\n  [appearance]=\"matAppearance()\"\n  [ngClass]=\"passThrough().root?.class\"\n  [ngStyle]=\"passThrough().root?.style\"\n>\n  @if (loading()) {\n  <mat-progress-bar class=\"acp-card__progress\" mode=\"indeterminate\" />\n  } @if (headerTpl(); as header) {\n  <mat-card-header [ngClass]=\"passThrough().header?.class\" [ngStyle]=\"passThrough().header?.style\">\n    <ng-container [ngTemplateOutlet]=\"header\" />\n  </mat-card-header>\n  } @if (mediaTpl(); as media) {\n  <div\n    class=\"acp-card__media\"\n    [class.acp-card__media--ratio]=\"!!mediaRatio()\"\n    [style.aspect-ratio]=\"mediaRatio()\"\n    [ngClass]=\"passThrough().media?.class\"\n    [ngStyle]=\"passThrough().media?.style\"\n  >\n    <ng-container [ngTemplateOutlet]=\"media\" />\n  </div>\n  } @if (hasTitleGroup()) {\n  <mat-card-header [ngClass]=\"passThrough().header?.class\" [ngStyle]=\"passThrough().header?.style\">\n    @if (avatarTpl(); as avatar) {\n    <div\n      mat-card-avatar\n      [ngClass]=\"passThrough().avatar?.class\"\n      [ngStyle]=\"passThrough().avatar?.style\"\n    >\n      <ng-container [ngTemplateOutlet]=\"avatar\" />\n    </div>\n    } @if (titleTpl() || title()) {\n    <mat-card-title [ngClass]=\"passThrough().title?.class\" [ngStyle]=\"passThrough().title?.style\">\n      @if (titleTpl(); as titleTemplate) {\n      <ng-container [ngTemplateOutlet]=\"titleTemplate\" />\n      } @else { {{ title() }} }\n    </mat-card-title>\n    } @if (subtitleTpl() || subtitle()) {\n    <mat-card-subtitle\n      [ngClass]=\"passThrough().subtitle?.class\"\n      [ngStyle]=\"passThrough().subtitle?.style\"\n    >\n      @if (subtitleTpl(); as subtitleTemplate) {\n      <ng-container [ngTemplateOutlet]=\"subtitleTemplate\" />\n      } @else { {{ subtitle() }} }\n    </mat-card-subtitle>\n    }\n  </mat-card-header>\n  }\n\n  <mat-card-content\n    [ngClass]=\"passThrough().content?.class\"\n    [ngStyle]=\"passThrough().content?.style\"\n  >\n    <ng-content />\n  </mat-card-content>\n\n  @if (actionsTpl(); as actions) {\n  <mat-card-actions\n    [align]=\"resolvedActionsAlign()\"\n    [ngClass]=\"passThrough().actions?.class\"\n    [ngStyle]=\"passThrough().actions?.style\"\n  >\n    <ng-container [ngTemplateOutlet]=\"actions\" />\n  </mat-card-actions>\n  } @if (footerTpl(); as footer) {\n  <mat-card-footer [ngClass]=\"passThrough().footer?.class\" [ngStyle]=\"passThrough().footer?.style\">\n    <ng-container [ngTemplateOutlet]=\"footer\" />\n  </mat-card-footer>\n  }\n</mat-card>\n", styles: [":host{--acp-card-padding: 16px;display:block;border-radius:var(--acp-card-shape, var(--mat-sys-corner-small))}:host:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.acp-card{--mat-card-elevated-container-color: var(--acp-card-container-color, var(--mat-sys-surface-container-low));--mat-card-outlined-container-color: var(--acp-card-container-color, var(--mat-sys-surface));--mat-card-filled-container-color: var(--acp-card-container-color, var(--mat-sys-surface-container-highest));--mat-card-elevated-container-shape: var(--acp-card-shape, var(--mat-sys-corner-small));--mat-card-outlined-container-shape: var(--acp-card-shape, var(--mat-sys-corner-small));--mat-card-filled-container-shape: var(--acp-card-shape, var(--mat-sys-corner-small));--mat-card-elevated-container-elevation: var(--acp-card-elevation, var(--mat-sys-level1));--mat-card-outlined-outline-color: var(--acp-card-outline-color, var(--mat-sys-outline-variant));--mat-card-title-text-size: var(--mat-sys-title-large-size);--mat-card-title-text-line-height: var(--mat-sys-title-large-line-height);--mat-card-title-text-weight: 500;--mat-card-subtitle-text-size: var(--mat-sys-body-medium-size);--mat-card-subtitle-text-weight: 400;--mat-card-subtitle-text-color: var(--acp-card-subtitle-color, var(--mat-sys-on-surface-variant));color:var(--acp-card-on-color, var(--mat-sys-on-surface));transition:box-shadow .2s ease-in-out}.acp-card .mat-mdc-card-content{padding:var(--acp-card-padding)}.acp-card .mat-mdc-card-actions{gap:8px}.acp-card .mat-mdc-card-footer{padding:16px}.acp-card__progress{position:absolute;inset:0 0 auto;z-index:1;border-top-left-radius:inherit;border-top-right-radius:inherit;overflow:hidden}.acp-card__media{overflow:hidden}.acp-card__media:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.acp-card__media--ratio>:is(img,video,picture,iframe){display:block;width:100%;height:100%;object-fit:cover}:host(.acp-card--padding-none){--acp-card-padding: 0}:host(.acp-card--padding-small){--acp-card-padding: 12px}:host(.acp-card--padding-large){--acp-card-padding: 24px}:host(.acp-card--hover) .acp-card:hover{box-shadow:var(--mat-sys-level3)}:host(.acp-card--clickable){cursor:pointer;-webkit-user-select:none;user-select:none}:host(.acp-card--clickable) .acp-card:hover{box-shadow:var(--mat-sys-level2)}:host(.acp-card--clickable) .acp-card:active{box-shadow:var(--mat-sys-level1)}:host(.acp-card--disabled){opacity:.6;pointer-events:none}:host(.acp-card--loading){cursor:progress}:host(.acp-card--full-height){height:100%}:host(.acp-card--full-height) .acp-card{height:100%}:host(.acp-card--full-width){width:100%}:host(.acp-card--primary){--acp-card-container-color: var(--mat-sys-primary);--acp-card-on-color: var(--mat-sys-on-primary);--acp-card-subtitle-color: var(--mat-sys-on-primary);--acp-card-outline-color: transparent}:host(.acp-card--primary-container){--acp-card-container-color: var(--mat-sys-primary-container);--acp-card-on-color: var(--mat-sys-on-primary-container);--acp-card-subtitle-color: var(--mat-sys-on-primary-container);--acp-card-outline-color: transparent}:host(.acp-card--secondary){--acp-card-container-color: var(--mat-sys-secondary);--acp-card-on-color: var(--mat-sys-on-secondary);--acp-card-subtitle-color: var(--mat-sys-on-secondary);--acp-card-outline-color: transparent}:host(.acp-card--secondary-container){--acp-card-container-color: var(--mat-sys-secondary-container);--acp-card-on-color: var(--mat-sys-on-secondary-container);--acp-card-subtitle-color: var(--mat-sys-on-secondary-container);--acp-card-outline-color: transparent}:host(.acp-card--tertiary){--acp-card-container-color: var(--mat-sys-tertiary);--acp-card-on-color: var(--mat-sys-on-tertiary);--acp-card-subtitle-color: var(--mat-sys-on-tertiary);--acp-card-outline-color: transparent}:host(.acp-card--tertiary-container){--acp-card-container-color: var(--mat-sys-tertiary-container);--acp-card-on-color: var(--mat-sys-on-tertiary-container);--acp-card-subtitle-color: var(--mat-sys-on-tertiary-container);--acp-card-outline-color: transparent}:host(.acp-card--error){--acp-card-container-color: var(--mat-sys-error);--acp-card-on-color: var(--mat-sys-on-error);--acp-card-subtitle-color: var(--mat-sys-on-error);--acp-card-outline-color: transparent}:host(.acp-card--error-container){--acp-card-container-color: var(--mat-sys-error-container);--acp-card-on-color: var(--mat-sys-on-error-container);--acp-card-subtitle-color: var(--mat-sys-on-error-container);--acp-card-outline-color: transparent}:host(.acp-card--surface){--acp-card-container-color: var(--mat-sys-surface);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-variant){--acp-card-container-color: var(--mat-sys-surface-variant);--acp-card-on-color: var(--mat-sys-on-surface-variant);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container-highest){--acp-card-container-color: var(--mat-sys-surface-container-highest);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container-high){--acp-card-container-color: var(--mat-sys-surface-container-high);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container){--acp-card-container-color: var(--mat-sys-surface-container);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container-low){--acp-card-container-color: var(--mat-sys-surface-container-low);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--surface-container-lowest){--acp-card-container-color: var(--mat-sys-surface-container-lowest);--acp-card-on-color: var(--mat-sys-on-surface);--acp-card-subtitle-color: var(--mat-sys-on-surface-variant);--acp-card-outline-color: transparent}:host(.acp-card--inverse-surface){--acp-card-container-color: var(--mat-sys-inverse-surface);--acp-card-on-color: var(--mat-sys-inverse-on-surface);--acp-card-subtitle-color: var(--mat-sys-inverse-on-surface);--acp-card-outline-color: transparent}:host(.acp-card--disabled-bg){--acp-card-container-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);--acp-card-on-color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);--acp-card-subtitle-color: var(--acp-card-on-color)}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], actionsAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsAlign", required: false }] }], imageRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageRatio", 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 }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], passThrough: [{ type: i0.Input, args: [{ isSignal: true, alias: "passThrough", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], headerDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AcpCardHeader), { ...{ descendants: false }, isSignal: true }] }], mediaDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AcpCardMedia), { ...{ descendants: false }, isSignal: true }] }], avatarDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AcpCardAvatar), { ...{ descendants: false }, isSignal: true }] }], titleDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AcpCardTitle), { ...{ descendants: false }, isSignal: true }] }], subtitleDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AcpCardSubtitle), { ...{ descendants: false }, isSignal: true }] }], actionsDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AcpCardActions), { ...{ descendants: false }, isSignal: true }] }], footerDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AcpCardFooter), { ...{ descendants: false }, isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { ...{ read: TemplateRef, descendants: false }, isSignal: true }] }], mediaRef: [{ type: i0.ContentChild, args: ['media', { ...{ read: TemplateRef, descendants: false }, isSignal: true }] }], avatarRef: [{ type: i0.ContentChild, args: ['avatar', { ...{ read: TemplateRef, descendants: false }, isSignal: true }] }], titleRef: [{ type: i0.ContentChild, args: ['title', { ...{ read: TemplateRef, descendants: false }, isSignal: true }] }], subtitleRef: [{ type: i0.ContentChild, args: ['subtitle', { ...{
+                            read: TemplateRef,
+                            descendants: false,
+                        }, isSignal: true }] }], actionsRef: [{ type: i0.ContentChild, args: ['actions', { ...{ read: TemplateRef, descendants: false }, isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { ...{ read: TemplateRef, descendants: false }, isSignal: true }] }] } });
 
 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: '',
-    },
+    up: { icon: 'trending_up', ariaLabel: 'Increase' },
+    down: { icon: 'trending_down', ariaLabel: 'Decrease' },
+    neutral: { icon: 'trending_flat', ariaLabel: 'No change' },
+    none: { icon: '', 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();
-    }
+/** Infers the trend direction from a numeric or numeric-string delta (`'+12.5'`, `-3`). */
+function inferKpiTrend(delta) {
+    const n = typeof delta === 'number' ? delta : Number.parseFloat(String(delta ?? ''));
+    if (Number.isNaN(n))
+        return 'none';
+    return n > 0 ? 'up' : n < 0 ? 'down' : 'neutral';
 }
 
+const isBlank = (value) => value === null || value === undefined || value === '';
 class AcpKpiCard {
+    defaultLocale = inject(LOCALE_ID);
     // Content
     title = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
     subtitle = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    /** Numbers are formatted with `Intl.NumberFormat`; strings are shown as-is. */
     value = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    valueFormat = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+    prefix = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
+    suffix = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "suffix" }] : /* 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 */ []));
+    /** BCP 47 locale for number formatting. Defaults to the app `LOCALE_ID`. */
+    locale = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
     // Styling
     variant = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -9788,7 +10004,9 @@ class AcpKpiCard {
     ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    // Icons & Avatar
+    align = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    // Icons & avatar
     icon = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
     svgIcon = input(/* @ts-ignore */
@@ -9797,18 +10015,26 @@ class AcpKpiCard {
     ...(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 */ []));
+    // Change vs. previous period
     percentage = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "percentage" }] : /* istanbul ignore next */ []));
     percentageFormat = input('percent', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "percentageFormat" }] : /* istanbul ignore next */ []));
+    /** Direction of the change. Inferred from the sign of `percentage` when unset. */
+    trend = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "trend" }] : /* istanbul ignore next */ []));
+    /** Invert the badge color for metrics where a decrease is good (costs, churn, errors). */
+    lowerIsBetter = input(false, { ...(ngDevMode ? { debugName: "lowerIsBetter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Comparison context shown next to the change, e.g. "vs last month". */
+    trendLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "trendLabel" }] : /* istanbul ignore next */ []));
+    /** Show the trend arrow inside the change badge. */
+    showTrendIcon = input(true, { ...(ngDevMode ? { debugName: "showTrendIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     // Progress
     progress = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "progress" }] : /* istanbul ignore next */ []));
-    progressColor = input('primary', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "progressColor" }] : /* istanbul ignore next */ []));
+    progressColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { 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 });
@@ -9817,56 +10043,78 @@ class AcpKpiCard {
     // Navigation
     routerLink = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
-    href = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
-    // Aria
+    // Accessibility
     ariaLabel = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    // Tooltip
+    menuAriaLabel = input('More options', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuAriaLabel" }] : /* istanbul ignore next */ []));
     tooltip = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
-    // Outputs
+    /** Emitted on click, Enter or Space when `clickable`. */
     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();
+    resolvedLocale = computed(() => this.locale() ?? this.defaultLocale, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []));
+    formattedValue = computed(() => {
+        const value = this.value();
+        if (isBlank(value))
+            return null;
+        if (typeof value !== 'number')
+            return String(value);
+        return new Intl.NumberFormat(this.resolvedLocale(), this.valueFormat()).format(value);
     }, /* @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();
+    ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
+    formattedDelta = computed(() => {
+        const delta = this.percentage();
+        if (isBlank(delta))
+            return null;
+        const isPercent = this.percentageFormat() === 'percent';
+        if (typeof delta !== 'number') {
+            const text = String(delta);
+            return isPercent && !text.endsWith('%') ? `${text}%` : text;
+        }
+        return new Intl.NumberFormat(this.resolvedLocale(), {
+            style: isPercent ? 'percent' : 'decimal',
+            maximumFractionDigits: 2,
+            signDisplay: 'exceptZero',
+        }).format(isPercent ? delta / 100 : delta);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedDelta" }] : /* istanbul ignore next */ []));
+    resolvedTrend = computed(() => this.trend() ?? inferKpiTrend(this.percentage()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTrend" }] : /* istanbul ignore next */ []));
+    trendConfig = computed(() => KPI_CARD_TREND_CONFIGS[this.resolvedTrend()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trendConfig" }] : /* istanbul ignore next */ []));
+    sentiment = computed(() => {
+        const trend = this.resolvedTrend();
+        if (trend !== 'up' && trend !== 'down')
+            return 'neutral';
+        return (trend === 'up') !== this.lowerIsBetter() ? 'positive' : 'negative';
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "trendColor" }] : /* istanbul ignore next */ []));
-    hasHeader = computed(() => !!(this.title() || this.subtitle() || this.icon() || this.avatar()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sentiment" }] : /* istanbul ignore next */ []));
+    hasHeader = computed(() => !!(this.title() ||
+        this.subtitle() ||
+        this.icon() ||
+        this.svgIcon() ||
+        this.iconTemplate() ||
+        this.avatar() ||
+        this.avatarInitials() ||
+        this.avatarTemplate() ||
+        this.actionsTemplate()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
-    hasFooter = computed(() => !!(this.footer() || this.footerTemplate() || this.progress() !== undefined), /* @ts-ignore */
+    hasFooter = computed(() => !!(this.footer() || this.footerTemplate()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
-    hasActions = computed(() => !!this.actionsTemplate(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
+    interactive = computed(() => this.clickable() && !this.disabled() && !this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactive" }] : /* 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()}`,
+            `acp-kpi-card--align-${this.align()}`,
         ];
         if (this.clickable())
             classes.push('acp-kpi-card--clickable');
@@ -9880,24 +10128,17 @@ class AcpKpiCard {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     onCardClick() {
-        if (!this.disabled() && this.clickable()) {
+        if (this.interactive())
             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);
+    onCardKey(event) {
+        if (!this.interactive() || event.target !== event.currentTarget)
+            return;
+        event.preventDefault();
+        this.clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpKpiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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$2.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$2.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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 }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", 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 }, locale: { classPropertyName: "locale", publicName: "locale", 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 }, align: { classPropertyName: "align", publicName: "align", 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 }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: true, isRequired: false, transformFunction: null }, percentageFormat: { classPropertyName: "percentageFormat", publicName: "percentageFormat", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, lowerIsBetter: { classPropertyName: "lowerIsBetter", publicName: "lowerIsBetter", isSignal: true, isRequired: false, transformFunction: null }, trendLabel: { classPropertyName: "trendLabel", publicName: "trendLabel", isSignal: true, isRequired: false, transformFunction: null }, showTrendIcon: { classPropertyName: "showTrendIcon", publicName: "showTrendIcon", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuAriaLabel: { classPropertyName: "menuAriaLabel", publicName: "menuAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class": "hostClasses()", "attr.title": "null", "attr.aria-busy": "loading() ? \"true\" : null" } }, 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.role]=\"clickable() ? 'button' : null\"\n  [attr.tabindex]=\"interactive() ? 0 : null\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-pressed]=\"clickable() && selected() ? 'true' : null\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [matTooltip]=\"tooltip() ?? ''\"\n  [matTooltipDisabled]=\"!tooltip()\"\n  (click)=\"onCardClick()\"\n  (keydown.enter)=\"onCardKey($event)\"\n  (keydown.space)=\"onCardKey($event)\"\n>\n  @if (loading()) {\n  <div class=\"acp-kpi-card__skeleton\" aria-hidden=\"true\">\n    <span></span>\n    <span></span>\n    <span></span>\n  </div>\n  } @else { @if (hasHeader()) {\n  <mat-card-header class=\"acp-kpi-card__header\">\n    <div class=\"acp-kpi-card__header-content\">\n      <div class=\"acp-kpi-card__icon-container\">\n        @if (iconTemplate(); as tpl) {\n        <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else if (svgIcon()) {\n        <mat-icon class=\"acp-kpi-card__icon\" [svgIcon]=\"svgIcon()!\" aria-hidden=\"true\" />\n        } @else if (icon()) {\n        <mat-icon class=\"acp-kpi-card__icon\" aria-hidden=\"true\">{{ icon() }}</mat-icon>\n        } @else if (avatarTemplate(); as tpl) {\n        <div class=\"acp-kpi-card__avatar\">\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n        } @else if (avatar()) {\n        <img class=\"acp-kpi-card__avatar-image\" [src]=\"avatar()\" alt=\"\" />\n        } @else if (avatarInitials()) {\n        <div class=\"acp-kpi-card__avatar-initials\" aria-hidden=\"true\">{{ avatarInitials() }}</div>\n        }\n      </div>\n\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    @if (actionsTemplate(); as actions) {\n    <button\n      mat-icon-button\n      class=\"acp-kpi-card__menu-button\"\n      [matMenuTriggerFor]=\"menu\"\n      [attr.aria-label]=\"menuAriaLabel()\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <mat-menu #menu=\"matMenu\" class=\"acp-kpi-card__menu\">\n      <ng-container [ngTemplateOutlet]=\"actions\" />\n    </mat-menu>\n    }\n  </mat-card-header>\n  }\n\n  <mat-card-content class=\"acp-kpi-card__content\">\n    @if (formattedValue() !== null || formattedDelta() !== null) {\n    <div class=\"acp-kpi-card__value-section\">\n      @if (formattedValue() !== null) {\n      <span class=\"acp-kpi-card__value\">\n        @if (prefix()) {\n        <span class=\"acp-kpi-card__affix\">{{ prefix() }}</span>\n        } {{ formattedValue() }} @if (suffix()) {\n        <span class=\"acp-kpi-card__affix\">{{ suffix() }}</span>\n        }\n      </span>\n      } @if (formattedDelta() !== null) {\n      <span class=\"acp-kpi-card__delta\" [class]=\"'acp-kpi-card__delta--' + sentiment()\">\n        @if (showTrendIcon() && trendConfig().icon) {\n        <mat-icon class=\"acp-kpi-card__trend-icon\" aria-hidden=\"true\">\n          {{ trendConfig().icon }}\n        </mat-icon>\n        } @if (trendConfig().ariaLabel) {\n        <span class=\"cdk-visually-hidden\">{{ trendConfig().ariaLabel }}</span>\n        } {{ formattedDelta() }}\n      </span>\n      @if (trendLabel()) {\n      <span class=\"acp-kpi-card__trend-label\">{{ trendLabel() }}</span>\n      } }\n    </div>\n    } @if (description()) {\n    <p class=\"acp-kpi-card__description\">{{ description() }}</p>\n    } @if (progress() !== undefined) {\n    <mat-progress-bar\n      class=\"acp-kpi-card__progress\"\n      [class]=\"progressColor() ? 'acp-kpi-card__progress--' + progressColor() : ''\"\n      mode=\"determinate\"\n      [value]=\"progress()\"\n      [attr.aria-label]=\"title() ?? null\"\n    />\n    }\n  </mat-card-content>\n\n  @if (hasFooter()) {\n  <div class=\"acp-kpi-card__footer\">\n    @if (footerTemplate(); as tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" />\n    } @else {\n    <p class=\"acp-kpi-card__footer-text\">{{ footer() }}</p>\n    }\n  </div>\n  } }\n</mat-card>\n", styles: [".acp-kpi-card{display:block;width:100%;container:acp-kpi-card/inline-size}.acp-kpi-card .acp-kpi-card__card{--acp-kpi-card-emphasis: var(--acp-kpi-card-fg);--acp-kpi-card-muted: color-mix(in srgb, currentColor 72%, transparent);display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:var(--acp-kpi-card-container-shape, var(--mat-sys-corner-medium));border:1px solid transparent;background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);transition:box-shadow .2s cubic-bezier(.2,0,0,1),transform .2s cubic-bezier(.2,0,0,1)}.acp-kpi-card__header .mat-mdc-card-header-text{display:none}.acp-kpi-card .acp-kpi-card__card .acp-kpi-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--acp-kpi-card-gap);padding:var(--acp-kpi-card-padding) var(--acp-kpi-card-padding) 0}.acp-kpi-card__header-content{display:flex;flex:1;align-items:center;justify-content:var(--acp-kpi-card-justify);gap:var(--acp-kpi-card-gap);min-width:0}.acp-kpi-card__icon-container{display:flex;flex-shrink:0;align-items:center;justify-content:center;color:var(--acp-kpi-card-emphasis)}.acp-kpi-card__icon-container:empty{display:none}.acp-kpi-card__icon{width:var(--acp-kpi-card-icon-size);height:var(--acp-kpi-card-icon-size);font-size:var(--acp-kpi-card-icon-size)}.acp-kpi-card__avatar,.acp-kpi-card__avatar-image,.acp-kpi-card__avatar-initials{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--acp-kpi-card-avatar-size);height:var(--acp-kpi-card-avatar-size);border-radius:50%;font-size:var(--acp-kpi-card-meta-size);font-weight:500}.acp-kpi-card__avatar,.acp-kpi-card__avatar-initials{background:color-mix(in srgb,var(--acp-kpi-card-emphasis) 16%,transparent)}.acp-kpi-card__avatar-image{object-fit:cover}.acp-kpi-card__title-container{min-width:0}.acp-kpi-card__title,.acp-kpi-card__subtitle{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.acp-kpi-card__title{margin:0;font:var(--mat-sys-title-small);font-size:var(--acp-kpi-card-title-size)}.acp-kpi-card__subtitle{margin:2px 0 0;font:var(--mat-sys-body-small);font-size:var(--acp-kpi-card-subtitle-size);color:var(--acp-kpi-card-muted)}.acp-kpi-card__menu-button{flex-shrink:0;color:inherit}.acp-kpi-card .acp-kpi-card__card .acp-kpi-card__content{display:flex;flex:1;flex-direction:column;gap:var(--acp-kpi-card-gap);padding:var(--acp-kpi-card-padding)}.acp-kpi-card__value-section{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:var(--acp-kpi-card-justify);gap:4px 8px}.acp-kpi-card__value{font-family:var(--mat-sys-headline-small-font);font-size:min(var(--acp-kpi-card-value-size),14cqi);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2;letter-spacing:-.5px;color:var(--acp-kpi-card-emphasis)}.acp-kpi-card__affix{font-size:.6em;font-weight:500}.acp-kpi-card__delta{display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:999px;font:var(--mat-sys-label-medium);font-size:var(--acp-kpi-card-meta-size);font-variant-numeric:tabular-nums;white-space:nowrap}.acp-kpi-card__delta--positive{background:var(--acp-kpi-card-delta-positive-bg, color-mix(in srgb, light-dark(#026e00, #02e600) 16%, var(--mat-sys-surface-container-lowest)));color:var(--acp-kpi-card-delta-positive-color, light-dark(#015300, #77ff61))}.acp-kpi-card__delta--negative{background:var(--acp-kpi-card-delta-negative-bg, var(--mat-sys-error-container));color:var(--acp-kpi-card-delta-negative-color, var(--mat-sys-on-error-container))}.acp-kpi-card__delta--neutral{background:var(--acp-kpi-card-delta-neutral-bg, var(--mat-sys-surface-container-highest));color:var(--acp-kpi-card-delta-neutral-color, var(--mat-sys-on-surface-variant))}.acp-kpi-card__trend-icon{width:16px;height:16px;font-size:16px}.acp-kpi-card__trend-label{font-size:var(--acp-kpi-card-meta-size);color:var(--acp-kpi-card-muted)}.acp-kpi-card__description{margin:0;font:var(--mat-sys-body-small);font-size:var(--acp-kpi-card-meta-size);color:var(--acp-kpi-card-muted)}.acp-kpi-card__progress{--mat-progress-bar-active-indicator-color: var(--acp-kpi-card-emphasis);--mat-progress-bar-track-color: color-mix(in srgb, currentColor 16%, transparent);--mat-progress-bar-track-shape: 2px}.acp-kpi-card__progress[class*=acp-kpi-card__progress--]{--mat-progress-bar-active-indicator-color: var(--acp-kpi-card-accent)}.acp-kpi-card__footer{padding:calc(var(--acp-kpi-card-padding) * .75) var(--acp-kpi-card-padding);border-top:1px solid color-mix(in srgb,currentColor 12%,transparent);font:var(--mat-sys-body-small);font-size:var(--acp-kpi-card-meta-size);color:var(--acp-kpi-card-muted)}.acp-kpi-card__footer-text{margin:0}.acp-kpi-card__skeleton{display:flex;flex-direction:column;gap:var(--acp-kpi-card-gap);padding:var(--acp-kpi-card-padding)}.acp-kpi-card__skeleton>span{display:block;height:12px;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,currentColor 14%,transparent) 25%,color-mix(in srgb,currentColor 6%,transparent),color-mix(in srgb,currentColor 14%,transparent) 75%);background-size:200% 100%;animation:acp-kpi-card-shimmer 1.5s infinite}.acp-kpi-card__skeleton>span:nth-child(1){width:60%;height:16px}.acp-kpi-card__skeleton>span:nth-child(2){width:40%;height:var(--acp-kpi-card-value-size)}.acp-kpi-card__skeleton>span:nth-child(3){width:80%}.acp-kpi-card--xs{--acp-kpi-card-padding: 8px;--acp-kpi-card-gap: 6px;--acp-kpi-card-icon-size: 16px;--acp-kpi-card-avatar-size: 28px;--acp-kpi-card-title-size: 12px;--acp-kpi-card-subtitle-size: 10px;--acp-kpi-card-value-size: 18px;--acp-kpi-card-meta-size: 11px}.acp-kpi-card--sm{--acp-kpi-card-padding: 12px;--acp-kpi-card-gap: 8px;--acp-kpi-card-icon-size: 20px;--acp-kpi-card-avatar-size: 32px;--acp-kpi-card-title-size: 13px;--acp-kpi-card-subtitle-size: 11px;--acp-kpi-card-value-size: 22px;--acp-kpi-card-meta-size: 12px}.acp-kpi-card--md{--acp-kpi-card-padding: 16px;--acp-kpi-card-gap: 12px;--acp-kpi-card-icon-size: 24px;--acp-kpi-card-avatar-size: 40px;--acp-kpi-card-title-size: 14px;--acp-kpi-card-subtitle-size: 12px;--acp-kpi-card-value-size: 28px;--acp-kpi-card-meta-size: 13px}.acp-kpi-card--lg{--acp-kpi-card-padding: 20px;--acp-kpi-card-gap: 16px;--acp-kpi-card-icon-size: 32px;--acp-kpi-card-avatar-size: 48px;--acp-kpi-card-title-size: 16px;--acp-kpi-card-subtitle-size: 13px;--acp-kpi-card-value-size: 36px;--acp-kpi-card-meta-size: 14px}.acp-kpi-card--align-start{--acp-kpi-card-justify: flex-start}.acp-kpi-card--align-center{--acp-kpi-card-justify: center;text-align:center}.acp-kpi-card--align-end{--acp-kpi-card-justify: flex-end;text-align:end}.acp-kpi-card--primary,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-primary-accent, var(--mat-sys-primary))}.acp-kpi-card--secondary,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-secondary-accent, var(--mat-sys-secondary))}.acp-kpi-card--success,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-success-accent, light-dark(#026e00, #02e600))}.acp-kpi-card--success-light,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-success-accent, light-dark(#026e00, #02e600))}.acp-kpi-card--warning,.acp-kpi-card__progress--warning{--acp-kpi-card-bg: var(--acp-kpi-card-warning-bg, light-dark(#bc5d00, #ff8e36));--acp-kpi-card-fg: var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400));--acp-kpi-card-accent: var(--acp-kpi-card-warning-accent, light-dark(#964900, #ffb787))}.acp-kpi-card--warning-light,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-warning-accent, light-dark(#964900, #ffb787))}.acp-kpi-card--error,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-error-accent, var(--mat-sys-error))}.acp-kpi-card--error-light,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-error-accent, var(--mat-sys-error))}.acp-kpi-card--info,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-info-accent, light-dark(#005cbb, #abc7ff))}.acp-kpi-card--info-light,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-info-accent, light-dark(#005cbb, #abc7ff))}.acp-kpi-card--neutral,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-neutral-accent, var(--mat-sys-on-surface-variant))}.acp-kpi-card--surface,.acp-kpi-card__progress--surface{--acp-kpi-card-bg: var(--acp-kpi-card-surface-bg, var(--mat-sys-surface-container-lowest));--acp-kpi-card-fg: var(--acp-kpi-card-surface-color, var(--mat-sys-on-surface));--acp-kpi-card-accent: var(--acp-kpi-card-surface-accent, var(--mat-sys-primary))}.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-accent: var(--acp-kpi-card-custom-accent, var(--acp-kpi-card-custom-accent, var(--mat-sys-primary)))}.acp-kpi-card--default .acp-kpi-card__card{box-shadow:var(--mat-sys-level1)}.acp-kpi-card--elevated .acp-kpi-card__card{box-shadow:var(--mat-sys-level2)}.acp-kpi-card--filled .acp-kpi-card__card{box-shadow:none}.acp-kpi-card--outlined .acp-kpi-card__card,.acp-kpi-card--tonal .acp-kpi-card__card{--acp-kpi-card-emphasis: var(--acp-kpi-card-accent);box-shadow:none;color:var(--mat-sys-on-surface)}.acp-kpi-card--outlined .acp-kpi-card__card{background:var(--mat-sys-surface);border-color:color-mix(in srgb,var(--acp-kpi-card-accent) 40%,transparent)}.acp-kpi-card--tonal .acp-kpi-card__card{background:color-mix(in srgb,var(--acp-kpi-card-accent) 12%,var(--mat-sys-surface))}.acp-kpi-card--clickable .acp-kpi-card__card{cursor:pointer}.acp-kpi-card--clickable .acp-kpi-card__card:hover{box-shadow:var(--mat-sys-level3);transform:translateY(-1px)}.acp-kpi-card--clickable .acp-kpi-card__card:active{box-shadow:var(--mat-sys-level1);transform:none}.acp-kpi-card__card:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.acp-kpi-card--selected .acp-kpi-card__card{border-color:var(--acp-kpi-card-emphasis);box-shadow:inset 0 0 0 1px var(--acp-kpi-card-emphasis)}.acp-kpi-card--disabled .acp-kpi-card__card{opacity:.6;pointer-events:none}@media(prefers-reduced-motion:reduce){.acp-kpi-card__card{transition:none}.acp-kpi-card--clickable .acp-kpi-card__card:hover{transform:none}.acp-kpi-card__skeleton>span{animation:none}}@keyframes acp-kpi-card-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\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$2.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$2.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$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.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.1.0", ngImport: i0, type: AcpKpiCard, decorators: [{
             type: Component,
@@ -9911,43 +10152,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         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',
-};
+                        '[attr.title]': 'null',
+                        '[attr.aria-busy]': 'loading() ? "true" : null',
+                    }, template: "<mat-card\n  class=\"acp-kpi-card__card\"\n  [routerLink]=\"routerLink()\"\n  [attr.role]=\"clickable() ? 'button' : null\"\n  [attr.tabindex]=\"interactive() ? 0 : null\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-pressed]=\"clickable() && selected() ? 'true' : null\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [matTooltip]=\"tooltip() ?? ''\"\n  [matTooltipDisabled]=\"!tooltip()\"\n  (click)=\"onCardClick()\"\n  (keydown.enter)=\"onCardKey($event)\"\n  (keydown.space)=\"onCardKey($event)\"\n>\n  @if (loading()) {\n  <div class=\"acp-kpi-card__skeleton\" aria-hidden=\"true\">\n    <span></span>\n    <span></span>\n    <span></span>\n  </div>\n  } @else { @if (hasHeader()) {\n  <mat-card-header class=\"acp-kpi-card__header\">\n    <div class=\"acp-kpi-card__header-content\">\n      <div class=\"acp-kpi-card__icon-container\">\n        @if (iconTemplate(); as tpl) {\n        <ng-container [ngTemplateOutlet]=\"tpl\" />\n        } @else if (svgIcon()) {\n        <mat-icon class=\"acp-kpi-card__icon\" [svgIcon]=\"svgIcon()!\" aria-hidden=\"true\" />\n        } @else if (icon()) {\n        <mat-icon class=\"acp-kpi-card__icon\" aria-hidden=\"true\">{{ icon() }}</mat-icon>\n        } @else if (avatarTemplate(); as tpl) {\n        <div class=\"acp-kpi-card__avatar\">\n          <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n        } @else if (avatar()) {\n        <img class=\"acp-kpi-card__avatar-image\" [src]=\"avatar()\" alt=\"\" />\n        } @else if (avatarInitials()) {\n        <div class=\"acp-kpi-card__avatar-initials\" aria-hidden=\"true\">{{ avatarInitials() }}</div>\n        }\n      </div>\n\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    @if (actionsTemplate(); as actions) {\n    <button\n      mat-icon-button\n      class=\"acp-kpi-card__menu-button\"\n      [matMenuTriggerFor]=\"menu\"\n      [attr.aria-label]=\"menuAriaLabel()\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <mat-menu #menu=\"matMenu\" class=\"acp-kpi-card__menu\">\n      <ng-container [ngTemplateOutlet]=\"actions\" />\n    </mat-menu>\n    }\n  </mat-card-header>\n  }\n\n  <mat-card-content class=\"acp-kpi-card__content\">\n    @if (formattedValue() !== null || formattedDelta() !== null) {\n    <div class=\"acp-kpi-card__value-section\">\n      @if (formattedValue() !== null) {\n      <span class=\"acp-kpi-card__value\">\n        @if (prefix()) {\n        <span class=\"acp-kpi-card__affix\">{{ prefix() }}</span>\n        } {{ formattedValue() }} @if (suffix()) {\n        <span class=\"acp-kpi-card__affix\">{{ suffix() }}</span>\n        }\n      </span>\n      } @if (formattedDelta() !== null) {\n      <span class=\"acp-kpi-card__delta\" [class]=\"'acp-kpi-card__delta--' + sentiment()\">\n        @if (showTrendIcon() && trendConfig().icon) {\n        <mat-icon class=\"acp-kpi-card__trend-icon\" aria-hidden=\"true\">\n          {{ trendConfig().icon }}\n        </mat-icon>\n        } @if (trendConfig().ariaLabel) {\n        <span class=\"cdk-visually-hidden\">{{ trendConfig().ariaLabel }}</span>\n        } {{ formattedDelta() }}\n      </span>\n      @if (trendLabel()) {\n      <span class=\"acp-kpi-card__trend-label\">{{ trendLabel() }}</span>\n      } }\n    </div>\n    } @if (description()) {\n    <p class=\"acp-kpi-card__description\">{{ description() }}</p>\n    } @if (progress() !== undefined) {\n    <mat-progress-bar\n      class=\"acp-kpi-card__progress\"\n      [class]=\"progressColor() ? 'acp-kpi-card__progress--' + progressColor() : ''\"\n      mode=\"determinate\"\n      [value]=\"progress()\"\n      [attr.aria-label]=\"title() ?? null\"\n    />\n    }\n  </mat-card-content>\n\n  @if (hasFooter()) {\n  <div class=\"acp-kpi-card__footer\">\n    @if (footerTemplate(); as tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" />\n    } @else {\n    <p class=\"acp-kpi-card__footer-text\">{{ footer() }}</p>\n    }\n  </div>\n  } }\n</mat-card>\n", styles: [".acp-kpi-card{display:block;width:100%;container:acp-kpi-card/inline-size}.acp-kpi-card .acp-kpi-card__card{--acp-kpi-card-emphasis: var(--acp-kpi-card-fg);--acp-kpi-card-muted: color-mix(in srgb, currentColor 72%, transparent);display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:var(--acp-kpi-card-container-shape, var(--mat-sys-corner-medium));border:1px solid transparent;background:var(--acp-kpi-card-bg);color:var(--acp-kpi-card-fg);transition:box-shadow .2s cubic-bezier(.2,0,0,1),transform .2s cubic-bezier(.2,0,0,1)}.acp-kpi-card__header .mat-mdc-card-header-text{display:none}.acp-kpi-card .acp-kpi-card__card .acp-kpi-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--acp-kpi-card-gap);padding:var(--acp-kpi-card-padding) var(--acp-kpi-card-padding) 0}.acp-kpi-card__header-content{display:flex;flex:1;align-items:center;justify-content:var(--acp-kpi-card-justify);gap:var(--acp-kpi-card-gap);min-width:0}.acp-kpi-card__icon-container{display:flex;flex-shrink:0;align-items:center;justify-content:center;color:var(--acp-kpi-card-emphasis)}.acp-kpi-card__icon-container:empty{display:none}.acp-kpi-card__icon{width:var(--acp-kpi-card-icon-size);height:var(--acp-kpi-card-icon-size);font-size:var(--acp-kpi-card-icon-size)}.acp-kpi-card__avatar,.acp-kpi-card__avatar-image,.acp-kpi-card__avatar-initials{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--acp-kpi-card-avatar-size);height:var(--acp-kpi-card-avatar-size);border-radius:50%;font-size:var(--acp-kpi-card-meta-size);font-weight:500}.acp-kpi-card__avatar,.acp-kpi-card__avatar-initials{background:color-mix(in srgb,var(--acp-kpi-card-emphasis) 16%,transparent)}.acp-kpi-card__avatar-image{object-fit:cover}.acp-kpi-card__title-container{min-width:0}.acp-kpi-card__title,.acp-kpi-card__subtitle{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.acp-kpi-card__title{margin:0;font:var(--mat-sys-title-small);font-size:var(--acp-kpi-card-title-size)}.acp-kpi-card__subtitle{margin:2px 0 0;font:var(--mat-sys-body-small);font-size:var(--acp-kpi-card-subtitle-size);color:var(--acp-kpi-card-muted)}.acp-kpi-card__menu-button{flex-shrink:0;color:inherit}.acp-kpi-card .acp-kpi-card__card .acp-kpi-card__content{display:flex;flex:1;flex-direction:column;gap:var(--acp-kpi-card-gap);padding:var(--acp-kpi-card-padding)}.acp-kpi-card__value-section{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:var(--acp-kpi-card-justify);gap:4px 8px}.acp-kpi-card__value{font-family:var(--mat-sys-headline-small-font);font-size:min(var(--acp-kpi-card-value-size),14cqi);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2;letter-spacing:-.5px;color:var(--acp-kpi-card-emphasis)}.acp-kpi-card__affix{font-size:.6em;font-weight:500}.acp-kpi-card__delta{display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:999px;font:var(--mat-sys-label-medium);font-size:var(--acp-kpi-card-meta-size);font-variant-numeric:tabular-nums;white-space:nowrap}.acp-kpi-card__delta--positive{background:var(--acp-kpi-card-delta-positive-bg, color-mix(in srgb, light-dark(#026e00, #02e600) 16%, var(--mat-sys-surface-container-lowest)));color:var(--acp-kpi-card-delta-positive-color, light-dark(#015300, #77ff61))}.acp-kpi-card__delta--negative{background:var(--acp-kpi-card-delta-negative-bg, var(--mat-sys-error-container));color:var(--acp-kpi-card-delta-negative-color, var(--mat-sys-on-error-container))}.acp-kpi-card__delta--neutral{background:var(--acp-kpi-card-delta-neutral-bg, var(--mat-sys-surface-container-highest));color:var(--acp-kpi-card-delta-neutral-color, var(--mat-sys-on-surface-variant))}.acp-kpi-card__trend-icon{width:16px;height:16px;font-size:16px}.acp-kpi-card__trend-label{font-size:var(--acp-kpi-card-meta-size);color:var(--acp-kpi-card-muted)}.acp-kpi-card__description{margin:0;font:var(--mat-sys-body-small);font-size:var(--acp-kpi-card-meta-size);color:var(--acp-kpi-card-muted)}.acp-kpi-card__progress{--mat-progress-bar-active-indicator-color: var(--acp-kpi-card-emphasis);--mat-progress-bar-track-color: color-mix(in srgb, currentColor 16%, transparent);--mat-progress-bar-track-shape: 2px}.acp-kpi-card__progress[class*=acp-kpi-card__progress--]{--mat-progress-bar-active-indicator-color: var(--acp-kpi-card-accent)}.acp-kpi-card__footer{padding:calc(var(--acp-kpi-card-padding) * .75) var(--acp-kpi-card-padding);border-top:1px solid color-mix(in srgb,currentColor 12%,transparent);font:var(--mat-sys-body-small);font-size:var(--acp-kpi-card-meta-size);color:var(--acp-kpi-card-muted)}.acp-kpi-card__footer-text{margin:0}.acp-kpi-card__skeleton{display:flex;flex-direction:column;gap:var(--acp-kpi-card-gap);padding:var(--acp-kpi-card-padding)}.acp-kpi-card__skeleton>span{display:block;height:12px;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,currentColor 14%,transparent) 25%,color-mix(in srgb,currentColor 6%,transparent),color-mix(in srgb,currentColor 14%,transparent) 75%);background-size:200% 100%;animation:acp-kpi-card-shimmer 1.5s infinite}.acp-kpi-card__skeleton>span:nth-child(1){width:60%;height:16px}.acp-kpi-card__skeleton>span:nth-child(2){width:40%;height:var(--acp-kpi-card-value-size)}.acp-kpi-card__skeleton>span:nth-child(3){width:80%}.acp-kpi-card--xs{--acp-kpi-card-padding: 8px;--acp-kpi-card-gap: 6px;--acp-kpi-card-icon-size: 16px;--acp-kpi-card-avatar-size: 28px;--acp-kpi-card-title-size: 12px;--acp-kpi-card-subtitle-size: 10px;--acp-kpi-card-value-size: 18px;--acp-kpi-card-meta-size: 11px}.acp-kpi-card--sm{--acp-kpi-card-padding: 12px;--acp-kpi-card-gap: 8px;--acp-kpi-card-icon-size: 20px;--acp-kpi-card-avatar-size: 32px;--acp-kpi-card-title-size: 13px;--acp-kpi-card-subtitle-size: 11px;--acp-kpi-card-value-size: 22px;--acp-kpi-card-meta-size: 12px}.acp-kpi-card--md{--acp-kpi-card-padding: 16px;--acp-kpi-card-gap: 12px;--acp-kpi-card-icon-size: 24px;--acp-kpi-card-avatar-size: 40px;--acp-kpi-card-title-size: 14px;--acp-kpi-card-subtitle-size: 12px;--acp-kpi-card-value-size: 28px;--acp-kpi-card-meta-size: 13px}.acp-kpi-card--lg{--acp-kpi-card-padding: 20px;--acp-kpi-card-gap: 16px;--acp-kpi-card-icon-size: 32px;--acp-kpi-card-avatar-size: 48px;--acp-kpi-card-title-size: 16px;--acp-kpi-card-subtitle-size: 13px;--acp-kpi-card-value-size: 36px;--acp-kpi-card-meta-size: 14px}.acp-kpi-card--align-start{--acp-kpi-card-justify: flex-start}.acp-kpi-card--align-center{--acp-kpi-card-justify: center;text-align:center}.acp-kpi-card--align-end{--acp-kpi-card-justify: flex-end;text-align:end}.acp-kpi-card--primary,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-primary-accent, var(--mat-sys-primary))}.acp-kpi-card--secondary,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-secondary-accent, var(--mat-sys-secondary))}.acp-kpi-card--success,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-success-accent, light-dark(#026e00, #02e600))}.acp-kpi-card--success-light,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-success-accent, light-dark(#026e00, #02e600))}.acp-kpi-card--warning,.acp-kpi-card__progress--warning{--acp-kpi-card-bg: var(--acp-kpi-card-warning-bg, light-dark(#bc5d00, #ff8e36));--acp-kpi-card-fg: var(--acp-kpi-card-warning-color, light-dark(#ffffff, #502400));--acp-kpi-card-accent: var(--acp-kpi-card-warning-accent, light-dark(#964900, #ffb787))}.acp-kpi-card--warning-light,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-warning-accent, light-dark(#964900, #ffb787))}.acp-kpi-card--error,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-error-accent, var(--mat-sys-error))}.acp-kpi-card--error-light,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-error-accent, var(--mat-sys-error))}.acp-kpi-card--info,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-info-accent, light-dark(#005cbb, #abc7ff))}.acp-kpi-card--info-light,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-info-accent, light-dark(#005cbb, #abc7ff))}.acp-kpi-card--neutral,.acp-kpi-card__progress--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-accent: var(--acp-kpi-card-neutral-accent, var(--mat-sys-on-surface-variant))}.acp-kpi-card--surface,.acp-kpi-card__progress--surface{--acp-kpi-card-bg: var(--acp-kpi-card-surface-bg, var(--mat-sys-surface-container-lowest));--acp-kpi-card-fg: var(--acp-kpi-card-surface-color, var(--mat-sys-on-surface));--acp-kpi-card-accent: var(--acp-kpi-card-surface-accent, var(--mat-sys-primary))}.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-accent: var(--acp-kpi-card-custom-accent, var(--acp-kpi-card-custom-accent, var(--mat-sys-primary)))}.acp-kpi-card--default .acp-kpi-card__card{box-shadow:var(--mat-sys-level1)}.acp-kpi-card--elevated .acp-kpi-card__card{box-shadow:var(--mat-sys-level2)}.acp-kpi-card--filled .acp-kpi-card__card{box-shadow:none}.acp-kpi-card--outlined .acp-kpi-card__card,.acp-kpi-card--tonal .acp-kpi-card__card{--acp-kpi-card-emphasis: var(--acp-kpi-card-accent);box-shadow:none;color:var(--mat-sys-on-surface)}.acp-kpi-card--outlined .acp-kpi-card__card{background:var(--mat-sys-surface);border-color:color-mix(in srgb,var(--acp-kpi-card-accent) 40%,transparent)}.acp-kpi-card--tonal .acp-kpi-card__card{background:color-mix(in srgb,var(--acp-kpi-card-accent) 12%,var(--mat-sys-surface))}.acp-kpi-card--clickable .acp-kpi-card__card{cursor:pointer}.acp-kpi-card--clickable .acp-kpi-card__card:hover{box-shadow:var(--mat-sys-level3);transform:translateY(-1px)}.acp-kpi-card--clickable .acp-kpi-card__card:active{box-shadow:var(--mat-sys-level1);transform:none}.acp-kpi-card__card:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.acp-kpi-card--selected .acp-kpi-card__card{border-color:var(--acp-kpi-card-emphasis);box-shadow:inset 0 0 0 1px var(--acp-kpi-card-emphasis)}.acp-kpi-card--disabled .acp-kpi-card__card{opacity:.6;pointer-events:none}@media(prefers-reduced-motion:reduce){.acp-kpi-card__card{transition:none}.acp-kpi-card--clickable .acp-kpi-card__card:hover{transform:none}.acp-kpi-card__skeleton>span{animation:none}}@keyframes acp-kpi-card-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\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 }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", 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 }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", 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 }] }], percentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentage", required: false }] }], percentageFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentageFormat", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], lowerIsBetter: [{ type: i0.Input, args: [{ isSignal: true, alias: "lowerIsBetter", required: false }] }], trendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendLabel", required: false }] }], showTrendIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrendIcon", 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], menuAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuAriaLabel", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], 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 }] }] } });
 
 class Branding {
     logo = input(null, /* @ts-ignore */
@@ -10018,7 +10229,7 @@ class AcpHeader {
       <div class="acp-header__spacer"></div>
       <ng-content select="acp-header-end" />
     </mat-toolbar>
-  `, isInline: true, styles: [".acontplus-header{--mat-toolbar-container-background-color: transparent;position:relative;z-index:200;display:block;height:60px;background-color:var(--acp-header-background-color, var(--mat-sys-surface));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);--mat-icon-color: #ffffff}.acp-header__region{display:flex;align-items:center;gap:8px}.acp-header__region--left{flex:0 0 auto}.acp-header__region--center{flex:0 1 auto;justify-content:center}.acp-header__region--end{display:flex;flex:0 0 auto;margin-left:auto}.acp-header__spacer{flex:1 1 auto}.acp-header__branding{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;transition:opacity .2s ease}.acp-header__branding:hover{opacity:.8}.acp-header__logo{height:32px;width:auto;max-width:120px;object-fit:contain}.acp-header__brand-name{font-size:1.125rem;font-weight:500;line-height:1.2}.acp-header__avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.acp-header__badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:600;line-height:16px;text-align:center;border-radius:8px;background-color:var(--mat-sys-error);color:var(--mat-sys-on-error)}.acp-header__user-menu{position:relative}.acp-header__search{display:flex;align-items:center;gap:8px;padding:0 8px;background-color:#ffffff1a;border-radius:4px;transition:background-color .2s ease}.acp-header__search:hover{background-color:#ffffff26}.acp-header__search-icon{font-size:20px;color:#ffffffb3}.acp-header__search-input{background:transparent;border:none;outline:none;color:#fff;font-size:14px;width:200px;padding:4px 0}.acp-header__search-input::placeholder{color:#ffffff80}.acp-header__search-clear{width:24px;height:24px}.acp-header__search-clear .mat-icon{font-size:18px}@media(max-width:768px){.acp-header{padding:0 12px;min-height:56px}.acp-header__brand-name{display:none}.acp-header__logo{max-width:100px}.acp-header__search-input{width:120px}}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$6.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".acontplus-header{--mat-toolbar-container-background-color: transparent;position:relative;z-index:200;display:block;height:60px;background-color:var(--acp-header-background-color, var(--mat-sys-surface));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);--mat-icon-color: #ffffff}.acp-header__region{display:flex;align-items:center;gap:8px}.acp-header__region--left{flex:0 0 auto}.acp-header__region--center{flex:0 1 auto;justify-content:center}.acp-header__region--end{display:flex;flex:0 0 auto;margin-left:auto}.acp-header__spacer{flex:1 1 auto}.acp-header__branding{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;transition:opacity .2s ease}.acp-header__branding:hover{opacity:.8}.acp-header__logo{height:32px;width:auto;max-width:120px;object-fit:contain}.acp-header__brand-name{font-size:1.125rem;font-weight:500;line-height:1.2}.acp-header__avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.acp-header__badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:600;line-height:16px;text-align:center;border-radius:8px;background-color:var(--mat-sys-error);color:var(--mat-sys-on-error)}.acp-header__user-menu{position:relative}.acp-header__search{display:flex;align-items:center;gap:8px;padding:0 8px;background-color:#ffffff1a;border-radius:4px;transition:background-color .2s ease}.acp-header__search:hover{background-color:#ffffff26}.acp-header__search-icon{font-size:20px;color:#ffffffb3}.acp-header__search-input{background:transparent;border:none;outline:none;color:#fff;font-size:14px;width:200px;padding:4px 0}.acp-header__search-input::placeholder{color:#ffffff80}.acp-header__search-clear{width:24px;height:24px}.acp-header__search-clear .mat-icon{font-size:18px}@media(max-width:768px){.acp-header{padding:0 12px;min-height:56px}.acp-header__brand-name{display:none}.acp-header__logo{max-width:100px}.acp-header__search-input{width:120px}}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpHeader, decorators: [{
             type: Component,
@@ -10231,7 +10442,7 @@ class AcpHeaderActions {
         </button>
       }
     }
-  `, isInline: true, dependencies: [{ 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: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+  `, isInline: true, dependencies: [{ 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: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpHeaderActions, decorators: [{
             type: Component,
@@ -11025,7 +11236,7 @@ class UserMenu {
         </div>
       </div>
     </mat-menu>
-  `, isInline: true, styles: [".acp-user-menu__trigger{width:40px;height:40px;border-radius:50%;overflow:hidden}.acp-user-menu__avatar{width:100%;height:100%;object-fit:cover;border-radius:calc(infinity * 1px)}.acp-user-menu__panel .mat-mdc-menu-panel{border-radius:20px!important;background:var(--mat-sys-surface-container)!important;box-shadow:0 8px 32px #0000001f!important;min-width:280px;max-width:320px;padding:0;overflow:hidden}.acp-user-menu__panel .mat-mdc-menu-content{padding:0!important}.acp-user-menu__content{display:flex;flex-direction:column;color:var(--mat-sys-on-surface)}.acp-user-menu__items{display:flex;flex-direction:column;padding:var(--mat-sys-spacing-small, 8px);gap:4px}@media(prefers-color-scheme:dark){.acp-user-menu__panel .mat-mdc-menu-panel{background:var(--mat-sys-surface-container-high)!important;box-shadow:0 8px 32px #0006!important}}.acp-user-menu-header__content{padding-block:calc(var(--acp-spacing, .25rem) * 4);padding-inline:calc(var(--acp-spacing, .25rem) * 5);display:flex;align-items:center;gap:calc(var(--acp-spacing) * 4)}.acp-user-menu-header__avatar{flex-shrink:0;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--mat-sys-surface-container-highest)}.acp-user-menu-header__avatar-img{width:100%;height:100%;object-fit:cover}.acp-user-menu-header__info{flex:1;min-width:0}.acp-user-menu-header__name-row{display:flex;align-items:center;gap:var(--mat-sys-spacing-small, 8px);margin-bottom:2px}.acp-user-menu-header__name{margin:0;font:var(--mat-sys-typescale-body-large);color:var(--mat-sys-on-surface);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-user-menu-header__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:12px;font:var(--mat-sys-typescale-label-small);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);text-transform:uppercase;letter-spacing:.5px;font-size:10px}.acp-user-menu-header__email{margin:0;font:var(--mat-sys-typescale-body-small);color:var(--mat-sys-on-surface-variant);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-user-menu-header__divider{height:1px;margin-top:var(--mat-sys-spacing-medium, 16px);background:var(--acp-color-border, var(--mat-sys-outline-variant))}.acp-user-menu-item{width:100%}.acp-user-menu-item__link{display:flex;align-items:center;gap:var(--mat-sys-spacing-medium, 16px);width:100%;padding:var(--mat-sys-spacing-medium, 8px);border:none;background:transparent;cursor:pointer;text-decoration:none;font:var(--mat-sys-typescale-body-large);color:var(--mat-sys-on-surface);border-radius:12px;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.acp-user-menu-item__link:hover{background:var(--mat-sys-surface-container-highest)}.acp-user-menu-item__link:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.acp-user-menu-item__link--danger{color:var(--mat-sys-error)}.acp-user-menu-item__link--danger:hover{background:var(--mat-sys-error-container);color:var(--mat-sys-on-error-container)}.acp-user-menu-item__icon{font-size:20px;width:20px;height:20px;color:var(--mat-sys-on-surface-variant)}.acp-user-menu-item__label{flex:1;text-align:left}.acp-user-menu-item__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;font:var(--mat-sys-typescale-label-small);font-weight:600;background:var(--mat-sys-error);color:var(--mat-sys-on-error)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { 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: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.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$2.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: AcpButton, selector: "acp-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".acp-user-menu__trigger{width:40px;height:40px;border-radius:50%;overflow:hidden}.acp-user-menu__avatar{width:100%;height:100%;object-fit:cover;border-radius:calc(infinity * 1px)}.acp-user-menu__panel .mat-mdc-menu-panel{border-radius:20px!important;background:var(--mat-sys-surface-container)!important;box-shadow:0 8px 32px #0000001f!important;min-width:280px;max-width:320px;padding:0;overflow:hidden}.acp-user-menu__panel .mat-mdc-menu-content{padding:0!important}.acp-user-menu__content{display:flex;flex-direction:column;color:var(--mat-sys-on-surface)}.acp-user-menu__items{display:flex;flex-direction:column;padding:var(--mat-sys-spacing-small, 8px);gap:4px}@media(prefers-color-scheme:dark){.acp-user-menu__panel .mat-mdc-menu-panel{background:var(--mat-sys-surface-container-high)!important;box-shadow:0 8px 32px #0006!important}}.acp-user-menu-header__content{padding-block:calc(var(--acp-spacing, .25rem) * 4);padding-inline:calc(var(--acp-spacing, .25rem) * 5);display:flex;align-items:center;gap:calc(var(--acp-spacing) * 4)}.acp-user-menu-header__avatar{flex-shrink:0;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--mat-sys-surface-container-highest)}.acp-user-menu-header__avatar-img{width:100%;height:100%;object-fit:cover}.acp-user-menu-header__info{flex:1;min-width:0}.acp-user-menu-header__name-row{display:flex;align-items:center;gap:var(--mat-sys-spacing-small, 8px);margin-bottom:2px}.acp-user-menu-header__name{margin:0;font:var(--mat-sys-typescale-body-large);color:var(--mat-sys-on-surface);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-user-menu-header__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:12px;font:var(--mat-sys-typescale-label-small);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);text-transform:uppercase;letter-spacing:.5px;font-size:10px}.acp-user-menu-header__email{margin:0;font:var(--mat-sys-typescale-body-small);color:var(--mat-sys-on-surface-variant);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-user-menu-header__divider{height:1px;margin-top:var(--mat-sys-spacing-medium, 16px);background:var(--acp-color-border, var(--mat-sys-outline-variant))}.acp-user-menu-item{width:100%}.acp-user-menu-item__link{display:flex;align-items:center;gap:var(--mat-sys-spacing-medium, 16px);width:100%;padding:var(--mat-sys-spacing-medium, 8px);border:none;background:transparent;cursor:pointer;text-decoration:none;font:var(--mat-sys-typescale-body-large);color:var(--mat-sys-on-surface);border-radius:12px;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.acp-user-menu-item__link:hover{background:var(--mat-sys-surface-container-highest)}.acp-user-menu-item__link:focus-visible{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.acp-user-menu-item__link--danger{color:var(--mat-sys-error)}.acp-user-menu-item__link--danger:hover{background:var(--mat-sys-error-container);color:var(--mat-sys-on-error-container)}.acp-user-menu-item__icon{font-size:20px;width:20px;height:20px;color:var(--mat-sys-on-surface-variant)}.acp-user-menu-item__label{flex:1;text-align:left}.acp-user-menu-item__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;font:var(--mat-sys-typescale-label-small);font-weight:600;background:var(--mat-sys-error);color:var(--mat-sys-on-error)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$8.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { 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: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.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$2.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: AcpButton, selector: "acp-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UserMenu, decorators: [{
             type: Component,
@@ -11337,7 +11548,7 @@ class SidemenuComponent {
         }}</mat-icon>
       }
     </ng-template>
-  `, isInline: true, styles: [".acp-sidemenu{padding:0;margin:0;list-style:none}.acp-sidemenu .menu-item{overflow:hidden;border-radius:1.5rem;transition:background 225ms cubic-bezier(.4,0,.2,1)}.acp-sidemenu .menu-item>.submenu{visibility:hidden;height:0;transition:all 225ms cubic-bezier(.4,0,.2,1)}.acp-sidemenu .menu-item>.menu-heading:hover,.acp-sidemenu .menu-item>.menu-heading:focus{background-color:var(--acp-sidemenu-heading-hover-background-color)}.acp-sidemenu .menu-item.active>.menu-heading{color:var(--acp-sidemenu-active-heading-text-color);background-color:var(--acp-sidemenu-active-heading-background-color)}.acp-sidemenu .menu-item.active>.menu-heading:hover,.acp-sidemenu .menu-item.active>.menu-heading:focus{background-color:var(--acp-sidemenu-active-heading-hover-background-color)}.acp-sidemenu .menu-item.expanded{background-color:var(--acp-sidemenu-expanded-background-color)}.acp-sidemenu .menu-item.expanded>.submenu{visibility:visible;height:auto;height:calc-size(auto,size)}.acp-sidemenu .menu-item.expanded>.menu-toggle>.menu-caret{transform:rotate(-180deg)}.acp-sidemenu .menu-item:has(.active)>.menu-heading{color:var(--acp-sidemenu-active-heading-text-color)}.acp-sidemenu .menu-heading{position:relative;display:flex;align-items:center;width:calc(var(--acp-sidenav-width) - 1rem);padding:.75rem;font-size:inherit;color:inherit;text-decoration:none;cursor:pointer;outline:none;background-color:transparent;border:none;border-radius:1.5rem}.acp-sidemenu .menu-icon{width:1.5rem;height:1.5rem;margin-right:.75rem;font-size:1.25rem;line-height:1.5rem;text-align:center}[dir=rtl] .acp-sidemenu .menu-icon{margin-right:0;margin-left:.75rem}.acp-sidemenu .menu-icon.submenu-icon{position:absolute;left:.75rem;width:1.5rem;height:1.5rem;font-size:1rem;line-height:1.5rem;opacity:0}[dir=rtl] .acp-sidemenu .menu-icon.submenu-icon{right:.75rem;left:0}.acp-sidemenu .menu-caret{display:block;width:1.5rem;height:1.5rem;font-size:1.5rem;line-height:1.5rem;text-align:center;transition:transform .4s cubic-bezier(.25,.8,.25,1)}.acp-sidemenu .menu-name{flex:1;overflow:hidden;text-overflow:ellipsis;text-align:initial}.acp-sidemenu .menu-icon,.acp-sidemenu .menu-name,.acp-sidemenu .menu-label,.acp-sidemenu .menu-badge{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.acp-sidemenu .menu-label,.acp-sidemenu .menu-badge{padding:.25rem .5rem;font-size:.75rem;font-weight:700;line-height:1;color:#fff;background-color:#757575;border-radius:.375rem}.acp-sidemenu .menu-badge{border-radius:50rem}.acp-sidemenu.level-1>li>.menu-heading{padding-left:3rem}[dir=rtl] .acp-sidemenu.level-1>li>.menu-heading{padding-right:3rem;padding-left:1rem}.acp-sidemenu.level-2>li>.menu-heading{padding-left:4rem}[dir=rtl] .acp-sidemenu.level-2>li>.menu-heading{padding-right:4rem;padding-left:1rem}.acp-sidemenu.level-2 [class^=level-]>li>.menu-heading{padding-left:5rem}[dir=rtl] .acp-sidemenu.level-2 [class^=level-]>li>.menu-heading{padding-right:5rem;padding-left:1rem}\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: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i1$8.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NavAccordionDirective, selector: "[acpNavAccordion]", exportAs: ["acpNavAccordion"] }, { kind: "directive", type: NavAccordionItemDirective, selector: "[acpNavAccordionItem]", inputs: ["route"], exportAs: ["acpNavAccordionItem"] }, { kind: "directive", type: NavAccordionToggleDirective, selector: "[acpNavAccordionToggle]", exportAs: ["acpNavAccordionToggle"] }, { kind: "pipe", type: SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".acp-sidemenu{padding:0;margin:0;list-style:none}.acp-sidemenu .menu-item{overflow:hidden;border-radius:1.5rem;transition:background 225ms cubic-bezier(.4,0,.2,1)}.acp-sidemenu .menu-item>.submenu{visibility:hidden;height:0;transition:all 225ms cubic-bezier(.4,0,.2,1)}.acp-sidemenu .menu-item>.menu-heading:hover,.acp-sidemenu .menu-item>.menu-heading:focus{background-color:var(--acp-sidemenu-heading-hover-background-color)}.acp-sidemenu .menu-item.active>.menu-heading{color:var(--acp-sidemenu-active-heading-text-color);background-color:var(--acp-sidemenu-active-heading-background-color)}.acp-sidemenu .menu-item.active>.menu-heading:hover,.acp-sidemenu .menu-item.active>.menu-heading:focus{background-color:var(--acp-sidemenu-active-heading-hover-background-color)}.acp-sidemenu .menu-item.expanded{background-color:var(--acp-sidemenu-expanded-background-color)}.acp-sidemenu .menu-item.expanded>.submenu{visibility:visible;height:auto;height:calc-size(auto,size)}.acp-sidemenu .menu-item.expanded>.menu-toggle>.menu-caret{transform:rotate(-180deg)}.acp-sidemenu .menu-item:has(.active)>.menu-heading{color:var(--acp-sidemenu-active-heading-text-color)}.acp-sidemenu .menu-heading{position:relative;display:flex;align-items:center;width:calc(var(--acp-sidenav-width) - 1rem);padding:.75rem;font-size:inherit;color:inherit;text-decoration:none;cursor:pointer;outline:none;background-color:transparent;border:none;border-radius:1.5rem}.acp-sidemenu .menu-icon{width:1.5rem;height:1.5rem;margin-right:.75rem;font-size:1.25rem;line-height:1.5rem;text-align:center}[dir=rtl] .acp-sidemenu .menu-icon{margin-right:0;margin-left:.75rem}.acp-sidemenu .menu-icon.submenu-icon{position:absolute;left:.75rem;width:1.5rem;height:1.5rem;font-size:1rem;line-height:1.5rem;opacity:0}[dir=rtl] .acp-sidemenu .menu-icon.submenu-icon{right:.75rem;left:0}.acp-sidemenu .menu-caret{display:block;width:1.5rem;height:1.5rem;font-size:1.5rem;line-height:1.5rem;text-align:center;transition:transform .4s cubic-bezier(.25,.8,.25,1)}.acp-sidemenu .menu-name{flex:1;overflow:hidden;text-overflow:ellipsis;text-align:initial}.acp-sidemenu .menu-icon,.acp-sidemenu .menu-name,.acp-sidemenu .menu-label,.acp-sidemenu .menu-badge{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.acp-sidemenu .menu-label,.acp-sidemenu .menu-badge{padding:.25rem .5rem;font-size:.75rem;font-weight:700;line-height:1;color:#fff;background-color:#757575;border-radius:.375rem}.acp-sidemenu .menu-badge{border-radius:50rem}.acp-sidemenu.level-1>li>.menu-heading{padding-left:3rem}[dir=rtl] .acp-sidemenu.level-1>li>.menu-heading{padding-right:3rem;padding-left:1rem}.acp-sidemenu.level-2>li>.menu-heading{padding-left:4rem}[dir=rtl] .acp-sidemenu.level-2>li>.menu-heading{padding-right:4rem;padding-left:1rem}.acp-sidemenu.level-2 [class^=level-]>li>.menu-heading{padding-left:5rem}[dir=rtl] .acp-sidemenu.level-2 [class^=level-]>li>.menu-heading{padding-right:5rem;padding-left:1rem}\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: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i1$9.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NavAccordionDirective, selector: "[acpNavAccordion]", exportAs: ["acpNavAccordion"] }, { kind: "directive", type: NavAccordionItemDirective, selector: "[acpNavAccordionItem]", inputs: ["route"], exportAs: ["acpNavAccordionItem"] }, { kind: "directive", type: NavAccordionToggleDirective, selector: "[acpNavAccordionToggle]", exportAs: ["acpNavAccordionToggle"] }, { kind: "pipe", type: SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SidemenuComponent, decorators: [{
             type: Component,
@@ -11515,7 +11726,7 @@ class AcpSidebarHeader {
 
       <ng-content select="[end]"></ng-content>
     </mat-toolbar>
-  `, isInline: true, styles: [".acontplus-sidebar-header{overflow:hidden}.acontplus-sidebar-header mat-toolbar{width:var(--acp-sidenav-width);padding:0 .5rem}.acontplus-sidebar-header mat-slide-toggle .mdc-label{display:none}.acp-spacer{flex:1 1 auto!important}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$6.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] });
+  `, isInline: true, styles: [".acontplus-sidebar-header{overflow:hidden}.acontplus-sidebar-header mat-toolbar{width:var(--acp-sidenav-width);padding:0 .5rem}.acontplus-sidebar-header mat-slide-toggle .mdc-label{display:none}.acp-spacer{flex:1 1 auto!important}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpSidebarHeader, decorators: [{
             type: Component,
@@ -11648,7 +11859,7 @@ class AcpSidebarToggle {
         <mat-icon>close</mat-icon>
       </button>
     }
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "fullWidth", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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: MatToolbarModule }] });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$a.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "fullWidth", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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: MatToolbarModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpSidebarToggle, decorators: [{
             type: Component,
@@ -11935,7 +12146,7 @@ class AcpShellLayout {
         this.content().scrollTo({ top: 0 });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpShellLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpShellLayout, isStandalone: true, selector: "acp-shell-layout", inputs: { navPos: { classPropertyName: "navPos", publicName: "navPos", isSignal: true, isRequired: false, transformFunction: null }, headerPos: { classPropertyName: "headerPos", publicName: "headerPos", isSignal: true, isRequired: false, transformFunction: null }, sidenavOpened: { classPropertyName: "sidenavOpened", publicName: "sidenavOpened", isSignal: true, isRequired: false, transformFunction: null }, sidenavCollapsed: { classPropertyName: "sidenavCollapsed", publicName: "sidenavCollapsed", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidenavOpenedChange: "sidenavOpenedChange" }, host: { classAttribute: "acp-shell-layout-host" }, queries: [{ propertyName: "headerSlot", first: true, predicate: AcpShellSlotHeader, descendants: true, isSignal: true }, { propertyName: "sidebarSlot", first: true, predicate: AcpShellSlotSidebar, descendants: true, isSignal: true }, { propertyName: "sidebarFooterSlot", first: true, predicate: AcpShellSlotSidebarFooter, descendants: true, isSignal: true }, { propertyName: "toolbarSlot", first: true, predicate: AcpShellSlotToolbar, descendants: true, isSignal: true }, { propertyName: "topmenuSlot", first: true, predicate: AcpShellSlotTopmenu, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"acontplus-container-wrap\"\n  [class.acontplus-sidenav-collapsed]=\"sidenavCollapsed() && navPos() !== 'top'\"\n  [class.acontplus-navbar-side]=\"navPos() === 'side'\"\n  [class.acontplus-navbar-top]=\"navPos() === 'top'\"\n  [class.acontplus-header-above]=\"headerPos() === 'above'\"\n  [class.acontplus-header-fixed]=\"headerPos() === 'fixed'\"\n  [dir]=\"dir()\"\n>\n  <!-- \u2500\u2500 SLOT: Header ABOVE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Rendered outside the sidenav container so it spans the full width.\n       Only active when headerPos === 'above'.\n       The app projects its own header via <ng-template acpShellHeader>.\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (showHeaderAbove() && headerSlot()) {\n  <ng-container *ngTemplateOutlet=\"headerSlot()!.templateRef\" />\n  }\n\n  <!-- \u2500\u2500 Sidenav container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <mat-sidenav-container class=\"acontplus-container\" autosize autoFocus>\n    <!-- Primary sidenav -->\n    <mat-sidenav\n      #sidenav\n      class=\"acontplus-sidenav\"\n      [mode]=\"sidenavMode()\"\n      [opened]=\"navPos() === 'side' && sidenavOpened() && !isMobile()\"\n      (openedChange)=\"sidenavOpenedChange.emit($event)\"\n    >\n      <!-- \u2500\u2500 SLOT: Sidebar body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n           The app projects its own sidebar via <ng-template acpShellSidebar>.\n           If no slot is provided the sidenav is still rendered (empty).\n      \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (sidebarSlot()) {\n      <ng-container *ngTemplateOutlet=\"sidebarSlot()!.templateRef\" />\n      }\n\n      <!-- \u2500\u2500 SLOT: Sidebar footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n             Optional content pinned to the bottom of the sidebar.\n             Project via <ng-template acpShellSidebarFooter>.\n        \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (sidebarFooterSlot()) {\n      <div class=\"acp-shell-sidebar-footer\">\n        <ng-container *ngTemplateOutlet=\"sidebarFooterSlot()!.templateRef\" />\n      </div>\n      }\n    </mat-sidenav>\n\n    <!-- \u2500\u2500 Main content area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <mat-sidenav-content #content class=\"acontplus-content\">\n      <!-- \u2500\u2500 SLOT: Header inside content (fixed / below) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n           Rendered inside the scrollable content area.\n           Only active when headerPos !== 'above'.\n      \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (showHeaderInContent() && headerSlot()) {\n      <ng-container *ngTemplateOutlet=\"headerSlot()!.templateRef\" />\n      }\n\n      <!-- \u2500\u2500 SLOT: Toolbar (center region inside header) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n           Optional extra content (breadcrumb, search bar\u2026) rendered\n           below the header bar, above the page content.\n           Project via <ng-template acpShellToolbar>.\n      \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (toolbarSlot()) {\n      <ng-container *ngTemplateOutlet=\"toolbarSlot()!.templateRef\" />\n      }\n\n      <!-- \u2500\u2500 SLOT: Top menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n           Optional horizontal top navigation projected above page content.\n           Project via <ng-template acpShellTopmenu>.\n      \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (topmenuSlot() && navPos() === 'top') {\n      <ng-container *ngTemplateOutlet=\"topmenuSlot()!.templateRef\" />\n      }\n\n      <!-- \u2500\u2500 DEFAULT SLOT: Page content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n           Plain children (e.g. <router-outlet />) land here.\n      \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <main class=\"acontplus-page-content\">\n        <router-outlet />\n      </main>\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n</div>\n", styles: [".acontplus-container-wrap,.acontplus-container{--mat-sidenav-content-background-color: transparent;height:100%}.acontplus-sidenav{--mat-sidenav-container-width: var(--acp-sidenav-width);position:absolute;overflow-x:hidden;border-width:0!important;transition-property:transform,width!important}.acontplus-header-above .acontplus-container{height:calc(100% - var(--mat-toolbar-standard-height))!important}@media(max-width:599px){.acontplus-header-above .acontplus-container{height:calc(100% - var(--mat-toolbar-mobile-height))!important}}.acontplus-header-above .acontplus-sidebar-main{height:100%!important;padding-top:.5rem}.acontplus-sidenav-collapsed .acontplus-sidenav{width:var(--acp-sidenav-collapsed-width)}.acontplus-sidenav-collapsed .acontplus-sidenav .menu-name,.acontplus-sidenav-collapsed .acontplus-sidenav .menu-label,.acontplus-sidenav-collapsed .acontplus-sidenav .menu-badge,.acontplus-sidenav-collapsed .acontplus-sidenav .menu-caret,.acontplus-sidenav-collapsed .acontplus-sidenav .acontplus-user-panel-info{opacity:0}.acontplus-sidenav-collapsed .acontplus-sidenav .menu-icon.submenu-icon{opacity:1}.acontplus-sidenav-collapsed .acontplus-sidenav .acontplus-user-panel-avatar{transform:scale(.5)}.acontplus-sidenav-collapsed .acontplus-sidenav:hover{width:var(--acp-sidenav-width)}.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-name,.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-label,.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-badge,.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-caret,.acontplus-sidenav-collapsed .acontplus-sidenav:hover .acontplus-user-panel-info{opacity:1}.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-icon.submenu-icon{opacity:0}.acontplus-sidenav-collapsed .acontplus-sidenav:hover .acontplus-user-panel-avatar{transform:scale(1)}.acontplus-sidenav-collapsed .acontplus-content{margin-left:var(--acp-sidenav-collapsed-width)!important}[dir=rtl] .acontplus-sidenav-collapsed .acontplus-content,.acontplus-sidenav-collapsed[dir=rtl] .acontplus-content{margin-right:var(--acp-sidenav-collapsed-width)!important;margin-left:auto!important}.acontplus-navbar-top .acontplus-topmenu{top:0}.acontplus-navbar-top .acontplus-branding{margin-left:1rem}[dir=rtl] .acontplus-navbar-top .acontplus-branding{margin-right:1rem;margin-left:auto}.acontplus-header-fixed .acontplus-header{position:sticky;top:0}.acontplus-header-fixed .acontplus-topmenu{top:var(--mat-toolbar-standard-height)}@media(max-width:599px){.acontplus-header-fixed .acontplus-topmenu{top:var(--mat-toolbar-mobile-height)}}.acontplus-page-content{position:relative;padding:var(--acp-gutter)}.acontplus-header+.acontplus-page-content,.acontplus-header-above .acontplus-page-content,.acontplus-navbar-top .acontplus-page-content{padding-top:0}.acp-shell-content{display:flex;flex-direction:column;height:100%}.acp-shell-page-content{position:relative;flex:1 1 auto;padding:var(--acp-gutter, 1rem);overflow:auto}.acp-shell--header-above{display:flex;flex-direction:column}.acp-shell--header-above .acp-shell-sidenav-container{flex:1 1 auto;height:calc(100% - var(--mat-toolbar-standard-height))}@media(max-width:599px){.acp-shell--header-above .acp-shell-sidenav-container{height:calc(100% - var(--mat-toolbar-mobile-height))}}.acp-shell--header-above .acp-shell-page-content{padding-top:0}.acp-shell--sidenav-collapsed .acp-shell-sidenav{width:var(--acp-sidenav-collapsed-width)}.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-name,.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-label,.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-badge,.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-caret,.acp-shell--sidenav-collapsed .acp-shell-sidenav .acp-sidebar-user-panel-info{opacity:0;pointer-events:none}.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-icon.submenu-icon{opacity:1}.acp-shell--sidenav-collapsed .acp-shell-sidenav .acp-sidebar-user-panel-avatar{transform:scale(.5)}.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover{width:var(--acp-sidenav-width)}.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-name,.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-label,.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-badge,.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-caret,.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .acp-sidebar-user-panel-info{opacity:1;pointer-events:auto}.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-icon.submenu-icon{opacity:0}.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .acp-sidebar-user-panel-avatar{transform:scale(1)}.acp-shell--sidenav-collapsed .acp-shell-content{margin-left:var(--acp-sidenav-collapsed-width)!important}[dir=rtl] .acp-shell--sidenav-collapsed .acp-shell-content{margin-right:var(--acp-sidenav-collapsed-width)!important;margin-left:auto!important}.acp-shell--navbar-top .acp-shell-page-content,.acp-shell--header-fixed .acp-shell-page-content{padding-top:0}\n"], dependencies: [{ kind: "ngmodule", type: BidiModule }, { kind: "directive", type: i1$a.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$2.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpShellLayout, isStandalone: true, selector: "acp-shell-layout", inputs: { navPos: { classPropertyName: "navPos", publicName: "navPos", isSignal: true, isRequired: false, transformFunction: null }, headerPos: { classPropertyName: "headerPos", publicName: "headerPos", isSignal: true, isRequired: false, transformFunction: null }, sidenavOpened: { classPropertyName: "sidenavOpened", publicName: "sidenavOpened", isSignal: true, isRequired: false, transformFunction: null }, sidenavCollapsed: { classPropertyName: "sidenavCollapsed", publicName: "sidenavCollapsed", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidenavOpenedChange: "sidenavOpenedChange" }, host: { classAttribute: "acp-shell-layout-host" }, queries: [{ propertyName: "headerSlot", first: true, predicate: AcpShellSlotHeader, descendants: true, isSignal: true }, { propertyName: "sidebarSlot", first: true, predicate: AcpShellSlotSidebar, descendants: true, isSignal: true }, { propertyName: "sidebarFooterSlot", first: true, predicate: AcpShellSlotSidebarFooter, descendants: true, isSignal: true }, { propertyName: "toolbarSlot", first: true, predicate: AcpShellSlotToolbar, descendants: true, isSignal: true }, { propertyName: "topmenuSlot", first: true, predicate: AcpShellSlotTopmenu, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"acontplus-container-wrap\"\n  [class.acontplus-sidenav-collapsed]=\"sidenavCollapsed() && navPos() !== 'top'\"\n  [class.acontplus-navbar-side]=\"navPos() === 'side'\"\n  [class.acontplus-navbar-top]=\"navPos() === 'top'\"\n  [class.acontplus-header-above]=\"headerPos() === 'above'\"\n  [class.acontplus-header-fixed]=\"headerPos() === 'fixed'\"\n  [dir]=\"dir()\"\n>\n  <!-- \u2500\u2500 SLOT: Header ABOVE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Rendered outside the sidenav container so it spans the full width.\n       Only active when headerPos === 'above'.\n       The app projects its own header via <ng-template acpShellHeader>.\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (showHeaderAbove() && headerSlot()) {\n  <ng-container *ngTemplateOutlet=\"headerSlot()!.templateRef\" />\n  }\n\n  <!-- \u2500\u2500 Sidenav container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <mat-sidenav-container class=\"acontplus-container\" autosize autoFocus>\n    <!-- Primary sidenav -->\n    <mat-sidenav\n      #sidenav\n      class=\"acontplus-sidenav\"\n      [mode]=\"sidenavMode()\"\n      [opened]=\"navPos() === 'side' && sidenavOpened() && !isMobile()\"\n      (openedChange)=\"sidenavOpenedChange.emit($event)\"\n    >\n      <!-- \u2500\u2500 SLOT: Sidebar body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n           The app projects its own sidebar via <ng-template acpShellSidebar>.\n           If no slot is provided the sidenav is still rendered (empty).\n      \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (sidebarSlot()) {\n      <ng-container *ngTemplateOutlet=\"sidebarSlot()!.templateRef\" />\n      }\n\n      <!-- \u2500\u2500 SLOT: Sidebar footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n             Optional content pinned to the bottom of the sidebar.\n             Project via <ng-template acpShellSidebarFooter>.\n        \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (sidebarFooterSlot()) {\n      <div class=\"acp-shell-sidebar-footer\">\n        <ng-container *ngTemplateOutlet=\"sidebarFooterSlot()!.templateRef\" />\n      </div>\n      }\n    </mat-sidenav>\n\n    <!-- \u2500\u2500 Main content area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <mat-sidenav-content #content class=\"acontplus-content\">\n      <!-- \u2500\u2500 SLOT: Header inside content (fixed / below) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n           Rendered inside the scrollable content area.\n           Only active when headerPos !== 'above'.\n      \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (showHeaderInContent() && headerSlot()) {\n      <ng-container *ngTemplateOutlet=\"headerSlot()!.templateRef\" />\n      }\n\n      <!-- \u2500\u2500 SLOT: Toolbar (center region inside header) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n           Optional extra content (breadcrumb, search bar\u2026) rendered\n           below the header bar, above the page content.\n           Project via <ng-template acpShellToolbar>.\n      \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (toolbarSlot()) {\n      <ng-container *ngTemplateOutlet=\"toolbarSlot()!.templateRef\" />\n      }\n\n      <!-- \u2500\u2500 SLOT: Top menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n           Optional horizontal top navigation projected above page content.\n           Project via <ng-template acpShellTopmenu>.\n      \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (topmenuSlot() && navPos() === 'top') {\n      <ng-container *ngTemplateOutlet=\"topmenuSlot()!.templateRef\" />\n      }\n\n      <!-- \u2500\u2500 DEFAULT SLOT: Page content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n           Plain children (e.g. <router-outlet />) land here.\n      \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <main class=\"acontplus-page-content\">\n        <router-outlet />\n      </main>\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n</div>\n", styles: [".acontplus-container-wrap,.acontplus-container{--mat-sidenav-content-background-color: transparent;height:100%}.acontplus-sidenav{--mat-sidenav-container-width: var(--acp-sidenav-width);position:absolute;overflow-x:hidden;border-width:0!important;transition-property:transform,width!important}.acontplus-header-above .acontplus-container{height:calc(100% - var(--mat-toolbar-standard-height))!important}@media(max-width:599px){.acontplus-header-above .acontplus-container{height:calc(100% - var(--mat-toolbar-mobile-height))!important}}.acontplus-header-above .acontplus-sidebar-main{height:100%!important;padding-top:.5rem}.acontplus-sidenav-collapsed .acontplus-sidenav{width:var(--acp-sidenav-collapsed-width)}.acontplus-sidenav-collapsed .acontplus-sidenav .menu-name,.acontplus-sidenav-collapsed .acontplus-sidenav .menu-label,.acontplus-sidenav-collapsed .acontplus-sidenav .menu-badge,.acontplus-sidenav-collapsed .acontplus-sidenav .menu-caret,.acontplus-sidenav-collapsed .acontplus-sidenav .acontplus-user-panel-info{opacity:0}.acontplus-sidenav-collapsed .acontplus-sidenav .menu-icon.submenu-icon{opacity:1}.acontplus-sidenav-collapsed .acontplus-sidenav .acontplus-user-panel-avatar{transform:scale(.5)}.acontplus-sidenav-collapsed .acontplus-sidenav:hover{width:var(--acp-sidenav-width)}.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-name,.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-label,.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-badge,.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-caret,.acontplus-sidenav-collapsed .acontplus-sidenav:hover .acontplus-user-panel-info{opacity:1}.acontplus-sidenav-collapsed .acontplus-sidenav:hover .menu-icon.submenu-icon{opacity:0}.acontplus-sidenav-collapsed .acontplus-sidenav:hover .acontplus-user-panel-avatar{transform:scale(1)}.acontplus-sidenav-collapsed .acontplus-content{margin-left:var(--acp-sidenav-collapsed-width)!important}[dir=rtl] .acontplus-sidenav-collapsed .acontplus-content,.acontplus-sidenav-collapsed[dir=rtl] .acontplus-content{margin-right:var(--acp-sidenav-collapsed-width)!important;margin-left:auto!important}.acontplus-navbar-top .acontplus-topmenu{top:0}.acontplus-navbar-top .acontplus-branding{margin-left:1rem}[dir=rtl] .acontplus-navbar-top .acontplus-branding{margin-right:1rem;margin-left:auto}.acontplus-header-fixed .acontplus-header{position:sticky;top:0}.acontplus-header-fixed .acontplus-topmenu{top:var(--mat-toolbar-standard-height)}@media(max-width:599px){.acontplus-header-fixed .acontplus-topmenu{top:var(--mat-toolbar-mobile-height)}}.acontplus-page-content{position:relative;padding:var(--acp-gutter)}.acontplus-header+.acontplus-page-content,.acontplus-header-above .acontplus-page-content,.acontplus-navbar-top .acontplus-page-content{padding-top:0}.acp-shell-content{display:flex;flex-direction:column;height:100%}.acp-shell-page-content{position:relative;flex:1 1 auto;padding:var(--acp-gutter, 1rem);overflow:auto}.acp-shell--header-above{display:flex;flex-direction:column}.acp-shell--header-above .acp-shell-sidenav-container{flex:1 1 auto;height:calc(100% - var(--mat-toolbar-standard-height))}@media(max-width:599px){.acp-shell--header-above .acp-shell-sidenav-container{height:calc(100% - var(--mat-toolbar-mobile-height))}}.acp-shell--header-above .acp-shell-page-content{padding-top:0}.acp-shell--sidenav-collapsed .acp-shell-sidenav{width:var(--acp-sidenav-collapsed-width)}.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-name,.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-label,.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-badge,.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-caret,.acp-shell--sidenav-collapsed .acp-shell-sidenav .acp-sidebar-user-panel-info{opacity:0;pointer-events:none}.acp-shell--sidenav-collapsed .acp-shell-sidenav .menu-icon.submenu-icon{opacity:1}.acp-shell--sidenav-collapsed .acp-shell-sidenav .acp-sidebar-user-panel-avatar{transform:scale(.5)}.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover{width:var(--acp-sidenav-width)}.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-name,.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-label,.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-badge,.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-caret,.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .acp-sidebar-user-panel-info{opacity:1;pointer-events:auto}.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .menu-icon.submenu-icon{opacity:0}.acp-shell--sidenav-collapsed .acp-shell-sidenav:hover .acp-sidebar-user-panel-avatar{transform:scale(1)}.acp-shell--sidenav-collapsed .acp-shell-content{margin-left:var(--acp-sidenav-collapsed-width)!important}[dir=rtl] .acp-shell--sidenav-collapsed .acp-shell-content{margin-right:var(--acp-sidenav-collapsed-width)!important;margin-left:auto!important}.acp-shell--navbar-top .acp-shell-page-content,.acp-shell--header-fixed .acp-shell-page-content{padding-top:0}\n"], dependencies: [{ kind: "ngmodule", type: BidiModule }, { kind: "directive", type: i1$b.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$2.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpShellLayout, decorators: [{
             type: Component,
@@ -11982,7 +12193,7 @@ class AcpTopmenuPanel {
             .subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpTopmenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpTopmenuPanel, isStandalone: true, selector: "acp-topmenu-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, parentRoute: { classPropertyName: "parentRoute", publicName: "parentRoute", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, buildRoute: { classPropertyName: "buildRoute", publicName: "buildRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeChange: "routeChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-menu class=\"acontplus-topmenu-panel\">\n  @for (item of items(); track $index) {\n  <ng-template\n    [ngxPermissionsOnly]=\"$safeNavigationMigration(item.permissions?.only)!\"\n    [ngxPermissionsExcept]=\"$safeNavigationMigration(item.permissions?.except)!\"\n  >\n    @if (item.type === 'link') {\n    <a\n      mat-menu-item\n      [routerLink]=\"buildRoute()(parentRoute().concat([item.route]))\"\n      routerLinkActive=\"active\"\n      #rla=\"routerLinkActive\"\n      (click)=\"onRouterLinkClick(rla)\"\n    >\n      {{ item.name }}\n    </a>\n    } @if (item.type === 'extLink') {\n    <a mat-menu-item [href]=\"item.route\">\n      <span class=\"menu-name\">{{ item.name }}</span>\n      <mat-icon>launch</mat-icon>\n    </a>\n    } @if (item.type === 'extTabLink') {\n    <a mat-menu-item [href]=\"item.route\" target=\"_blank\">\n      <span class=\"menu-name\">{{ item.name }}</span>\n      <mat-icon>launch</mat-icon>\n    </a>\n    } @if (item.type === 'sub') {\n    <button\n      mat-menu-item\n      [matMenuTriggerFor]=\"submenu.menuPanel()\"\n      [class.active]=\"item.active?.()\"\n    >\n      {{ item.name }}\n\n      <acp-topmenu-panel\n        #submenu\n        [items]=\"item.children || []\"\n        [parentRoute]=\"parentRoute().concat([item.route])\"\n        [level]=\"level() + 1\"\n        [buildRoute]=\"buildRoute()\"\n        (routeChange)=\"onRouteChange($event.rla, item)\"\n      />\n    </button>\n    }\n  </ng-template>\n  }\n</mat-menu>\n", dependencies: [{ kind: "component", type: AcpTopmenuPanel, selector: "acp-topmenu-panel", inputs: ["items", "parentRoute", "level", "buildRoute"], outputs: ["routeChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.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: NgxPermissionsModule }, { kind: "directive", type: i1$8.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpTopmenuPanel, isStandalone: true, selector: "acp-topmenu-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, parentRoute: { classPropertyName: "parentRoute", publicName: "parentRoute", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, buildRoute: { classPropertyName: "buildRoute", publicName: "buildRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeChange: "routeChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-menu class=\"acontplus-topmenu-panel\">\n  @for (item of items(); track $index) {\n  <ng-template\n    [ngxPermissionsOnly]=\"$safeNavigationMigration(item.permissions?.only)!\"\n    [ngxPermissionsExcept]=\"$safeNavigationMigration(item.permissions?.except)!\"\n  >\n    @if (item.type === 'link') {\n    <a\n      mat-menu-item\n      [routerLink]=\"buildRoute()(parentRoute().concat([item.route]))\"\n      routerLinkActive=\"active\"\n      #rla=\"routerLinkActive\"\n      (click)=\"onRouterLinkClick(rla)\"\n    >\n      {{ item.name }}\n    </a>\n    } @if (item.type === 'extLink') {\n    <a mat-menu-item [href]=\"item.route\">\n      <span class=\"menu-name\">{{ item.name }}</span>\n      <mat-icon>launch</mat-icon>\n    </a>\n    } @if (item.type === 'extTabLink') {\n    <a mat-menu-item [href]=\"item.route\" target=\"_blank\">\n      <span class=\"menu-name\">{{ item.name }}</span>\n      <mat-icon>launch</mat-icon>\n    </a>\n    } @if (item.type === 'sub') {\n    <button\n      mat-menu-item\n      [matMenuTriggerFor]=\"submenu.menuPanel()\"\n      [class.active]=\"item.active?.()\"\n    >\n      {{ item.name }}\n\n      <acp-topmenu-panel\n        #submenu\n        [items]=\"item.children || []\"\n        [parentRoute]=\"parentRoute().concat([item.route])\"\n        [level]=\"level() + 1\"\n        [buildRoute]=\"buildRoute()\"\n        (routeChange)=\"onRouteChange($event.rla, item)\"\n      />\n    </button>\n    }\n  </ng-template>\n  }\n</mat-menu>\n", dependencies: [{ kind: "component", type: AcpTopmenuPanel, selector: "acp-topmenu-panel", inputs: ["items", "parentRoute", "level", "buildRoute"], outputs: ["routeChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.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: NgxPermissionsModule }, { kind: "directive", type: i1$9.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpTopmenuPanel, decorators: [{
             type: Component,
@@ -12020,7 +12231,7 @@ class AcpTopmenu {
             .subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpTopmenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpTopmenu, isStandalone: true, selector: "acp-topmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, buildRoute: { classPropertyName: "buildRoute", publicName: "buildRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeChange: "routeChange" }, host: { classAttribute: "acp-topmenu" }, ngImport: i0, template: "<nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n  @for (menuItem of items(); track $index) {\n  <ng-template\n    [ngxPermissionsOnly]=\"$safeNavigationMigration(menuItem.permissions?.only)!\"\n    [ngxPermissionsExcept]=\"$safeNavigationMigration(menuItem.permissions?.except)!\"\n  >\n    @if (menuItem.type === 'link') {\n    <a matButton [routerLink]=\"buildRoute()([menuItem.route])\" routerLinkActive=\"active\">\n      <ng-container\n        [ngTemplateOutlet]=\"linkTypeTpl\"\n        [ngTemplateOutletContext]=\"{ item: menuItem }\"\n      />\n    </a>\n    } @if (menuItem.type === 'extLink') {\n    <a matButton [href]=\"menuItem.route\">\n      <ng-container\n        [ngTemplateOutlet]=\"linkTypeTpl\"\n        [ngTemplateOutletContext]=\"{ item: menuItem }\"\n      />\n    </a>\n    } @if (menuItem.type === 'extTabLink') {\n    <a matButton [href]=\"menuItem.route\" target=\"_blank\">\n      <ng-container\n        [ngTemplateOutlet]=\"linkTypeTpl\"\n        [ngTemplateOutletContext]=\"{ item: menuItem }\"\n      />\n    </a>\n    } @if (menuItem.type === 'sub') {\n    <button\n      matButton\n      [matMenuTriggerFor]=\"submenu.menuPanel()\"\n      [class.active]=\"menuItem.active?.()\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"linkTypeTpl\"\n        [ngTemplateOutletContext]=\"{ item: menuItem }\"\n      />\n\n      <acp-topmenu-panel\n        #submenu\n        [items]=\"menuItem.children || []\"\n        [parentRoute]=\"[menuItem.route]\"\n        [level]=\"1\"\n        [buildRoute]=\"buildRoute()\"\n        (routeChange)=\"onRouteChange($event.rla, menuItem)\"\n      />\n    </button>\n    }\n  </ng-template>\n  }\n</nav>\n\n<mat-tab-nav-panel #tabPanel />\n\n<ng-template #linkTypeTpl let-item=\"item\" let-level=\"level\">\n  <mat-icon class=\"menu-icon\">{{ item.icon }}</mat-icon>\n  <span class=\"menu-name\">{{ item.name }}</span>\n  @if (item.label) {\n  <span class=\"menu-label bg-{{ item.label.color }}\">{{ item.label.value }}</span>\n  } @if (item.badge) {\n  <span class=\"menu-badge bg-{{ item.badge.color }}\">{{ item.badge.value }}</span>\n  } @if (item.type !== 'link') {\n  <mat-icon class=\"menu-caret\">{{ item.type === 'sub' ? 'arrow_drop_down' : 'launch' }}</mat-icon>\n  }\n</ng-template>\n", styles: [".acp-topmenu{--mat-tab-divider-height: 0;--mat-button-text-label-text-color: var(--acp-topmenu-text-color);position:sticky;z-index:200;display:block;padding:.5rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.acp-topmenu .mat-mdc-button{padding:0 1rem;white-space:nowrap}.acp-topmenu .mat-mdc-button.active{background-color:var(--acp-topmenu-item-active-background-color)}.acp-topmenu .menu-icon,.acp-topmenu .menu-caret,.acp-topmenu .menu-name{vertical-align:middle}.acp-topmenu .mat-icon.menu-icon{width:1.125rem;height:1.125rem;margin-right:.5rem;font-size:1.125rem;line-height:1.125rem}[dir=rtl] .acp-topmenu .mat-icon.menu-icon{margin-right:auto;margin-left:.5rem}.acp-topmenu .mat-icon.menu-caret{margin-right:-.5rem}[dir=rtl] .acp-topmenu .mat-icon.menu-caret{margin-right:auto;margin-left:-.5rem}.acp-topmenu .menu-label,.acp-topmenu .menu-badge{padding:.25rem .5rem;margin-left:.5rem;font-size:.75rem;font-weight:700;line-height:1;color:#fff;background-color:#757575;border-radius:.375rem}[dir=rtl] .acp-topmenu .menu-label,[dir=rtl] .acp-topmenu .menu-badge{margin-right:.5rem;margin-left:auto}.acp-topmenu .menu-badge{border-radius:50rem}.acp-topmenu .mat-tab-nav-bar,.acp-topmenu .mat-tab-header{border-bottom:none}.acontplus-topmenu-panel .mat-mdc-menu-item.active{color:var(--acp-topmenu-dropdown-item-active-text-color)}\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: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i3$2.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: MatTabsModule }, { kind: "component", type: i4$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$1.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i1$8.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }, { kind: "component", type: AcpTopmenuPanel, selector: "acp-topmenu-panel", inputs: ["items", "parentRoute", "level", "buildRoute"], outputs: ["routeChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AcpTopmenu, isStandalone: true, selector: "acp-topmenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, buildRoute: { classPropertyName: "buildRoute", publicName: "buildRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeChange: "routeChange" }, host: { classAttribute: "acp-topmenu" }, ngImport: i0, template: "<nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n  @for (menuItem of items(); track $index) {\n  <ng-template\n    [ngxPermissionsOnly]=\"$safeNavigationMigration(menuItem.permissions?.only)!\"\n    [ngxPermissionsExcept]=\"$safeNavigationMigration(menuItem.permissions?.except)!\"\n  >\n    @if (menuItem.type === 'link') {\n    <a matButton [routerLink]=\"buildRoute()([menuItem.route])\" routerLinkActive=\"active\">\n      <ng-container\n        [ngTemplateOutlet]=\"linkTypeTpl\"\n        [ngTemplateOutletContext]=\"{ item: menuItem }\"\n      />\n    </a>\n    } @if (menuItem.type === 'extLink') {\n    <a matButton [href]=\"menuItem.route\">\n      <ng-container\n        [ngTemplateOutlet]=\"linkTypeTpl\"\n        [ngTemplateOutletContext]=\"{ item: menuItem }\"\n      />\n    </a>\n    } @if (menuItem.type === 'extTabLink') {\n    <a matButton [href]=\"menuItem.route\" target=\"_blank\">\n      <ng-container\n        [ngTemplateOutlet]=\"linkTypeTpl\"\n        [ngTemplateOutletContext]=\"{ item: menuItem }\"\n      />\n    </a>\n    } @if (menuItem.type === 'sub') {\n    <button\n      matButton\n      [matMenuTriggerFor]=\"submenu.menuPanel()\"\n      [class.active]=\"menuItem.active?.()\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"linkTypeTpl\"\n        [ngTemplateOutletContext]=\"{ item: menuItem }\"\n      />\n\n      <acp-topmenu-panel\n        #submenu\n        [items]=\"menuItem.children || []\"\n        [parentRoute]=\"[menuItem.route]\"\n        [level]=\"1\"\n        [buildRoute]=\"buildRoute()\"\n        (routeChange)=\"onRouteChange($event.rla, menuItem)\"\n      />\n    </button>\n    }\n  </ng-template>\n  }\n</nav>\n\n<mat-tab-nav-panel #tabPanel />\n\n<ng-template #linkTypeTpl let-item=\"item\" let-level=\"level\">\n  <mat-icon class=\"menu-icon\">{{ item.icon }}</mat-icon>\n  <span class=\"menu-name\">{{ item.name }}</span>\n  @if (item.label) {\n  <span class=\"menu-label bg-{{ item.label.color }}\">{{ item.label.value }}</span>\n  } @if (item.badge) {\n  <span class=\"menu-badge bg-{{ item.badge.color }}\">{{ item.badge.value }}</span>\n  } @if (item.type !== 'link') {\n  <mat-icon class=\"menu-caret\">{{ item.type === 'sub' ? 'arrow_drop_down' : 'launch' }}</mat-icon>\n  }\n</ng-template>\n", styles: [".acp-topmenu{--mat-tab-divider-height: 0;--mat-button-text-label-text-color: var(--acp-topmenu-text-color);position:sticky;z-index:200;display:block;padding:.5rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.acp-topmenu .mat-mdc-button{padding:0 1rem;white-space:nowrap}.acp-topmenu .mat-mdc-button.active{background-color:var(--acp-topmenu-item-active-background-color)}.acp-topmenu .menu-icon,.acp-topmenu .menu-caret,.acp-topmenu .menu-name{vertical-align:middle}.acp-topmenu .mat-icon.menu-icon{width:1.125rem;height:1.125rem;margin-right:.5rem;font-size:1.125rem;line-height:1.125rem}[dir=rtl] .acp-topmenu .mat-icon.menu-icon{margin-right:auto;margin-left:.5rem}.acp-topmenu .mat-icon.menu-caret{margin-right:-.5rem}[dir=rtl] .acp-topmenu .mat-icon.menu-caret{margin-right:auto;margin-left:-.5rem}.acp-topmenu .menu-label,.acp-topmenu .menu-badge{padding:.25rem .5rem;margin-left:.5rem;font-size:.75rem;font-weight:700;line-height:1;color:#fff;background-color:#757575;border-radius:.375rem}[dir=rtl] .acp-topmenu .menu-label,[dir=rtl] .acp-topmenu .menu-badge{margin-right:.5rem;margin-left:auto}.acp-topmenu .menu-badge{border-radius:50rem}.acp-topmenu .mat-tab-nav-bar,.acp-topmenu .mat-tab-header{border-bottom:none}.acontplus-topmenu-panel .mat-mdc-menu-item.active{color:var(--acp-topmenu-dropdown-item-active-text-color)}\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: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i3$2.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: MatTabsModule }, { kind: "component", type: i4$2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$2.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i1$9.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }, { kind: "component", type: AcpTopmenuPanel, selector: "acp-topmenu-panel", inputs: ["items", "parentRoute", "level", "buildRoute"], outputs: ["routeChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AcpTopmenu, decorators: [{
             type: Component,
@@ -12229,5 +12440,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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_DIALOG_ACTIONS, ACP_DIALOG_DATA, ACP_DIALOG_DEFAULT_OPTIONS, ACP_DIALOG_TITLEBAR, ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AcpAlert, AcpBadge, AcpButton, AcpCard, AcpCheckboxBase, AcpCheckboxGroup, AcpContextMenu, AcpContextMenuDirective, AcpContextMenuPanel, AcpContextMenuService, AcpDateRangeInput, AcpDialog, AcpDialogActions, AcpDialogContainer, AcpDialogContent, AcpDialogRef, AcpDialogService, AcpDialogTitlebar, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpHeader, AcpHeaderActions, AcpHeaderBranding, AcpHeaderCenter, AcpHeaderEnd, AcpHeaderLanguage, AcpHeaderNotifications, AcpHeaderStart, AcpHeaderTheme, AcpHeaderWorkspace, AcpKpiCard, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AcpSelectDateOption, AcpShellLayout, AcpShellSlotHeader, AcpShellSlotSidebar, AcpShellSlotSidebarFooter, AcpShellSlotToolbar, AcpShellSlotTopmenu, AcpSidebar, AcpSidebarBranding, AcpSidebarContent, AcpSidebarHeader, AcpSidebarToggle, AcpSidebarUserPanel, AcpTopmenu, AcpTopmenuPanel, AdvancedDialogService, Branding, Button, CONTEXT_MENU_DATA, CONTEXT_MENU_ITEMS, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KPI_CARD_TOKENS, KPI_CARD_TREND_CONFIGS, KeyboardNavigationService, NavAccordionDirective, NavAccordionItemDirective, NavAccordionToggleDirective, OverlayService, Pagination, SidemenuComponent, Spinner, StatusDisplayPipe, SvgIcon, TREND_CONFIGS, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, UserMenu, UserPanel, _AcpPopoverContentBase, formatValue, provideAcpDialogDefaults };
+export { ACP_ACTIVE_DATE_DEBOUNCE, ACP_BADGE_COLORS, ACP_BADGE_SHAPES, ACP_BADGE_SIZES, ACP_BADGE_VARIANTS, ACP_CARD_DEFAULT_OPTIONS, ACP_CARD_SLOTS, ACP_DATE_OPTION_TYPE, ACP_DEFAULT_DATE_OPTIONS, ACP_DIALOG_ACTIONS, ACP_DIALOG_DATA, ACP_DIALOG_DEFAULT_OPTIONS, ACP_DIALOG_TITLEBAR, ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AcpAlert, AcpBadge, AcpButton, AcpCard, AcpCardActions, AcpCardAvatar, AcpCardFooter, AcpCardHeader, AcpCardMedia, AcpCardSubtitle, AcpCardTitle, AcpCheckboxBase, AcpCheckboxGroup, AcpContextMenu, AcpContextMenuDirective, AcpContextMenuPanel, AcpContextMenuService, AcpDateRangeInput, AcpDialog, AcpDialogActions, AcpDialogContainer, AcpDialogContent, AcpDialogRef, AcpDialogService, AcpDialogTitlebar, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpHeader, AcpHeaderActions, AcpHeaderBranding, AcpHeaderCenter, AcpHeaderEnd, AcpHeaderLanguage, AcpHeaderNotifications, AcpHeaderStart, AcpHeaderTheme, AcpHeaderWorkspace, AcpKpiCard, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AcpSearchSelect, AcpSelectDateOption, AcpShellLayout, AcpShellSlotHeader, AcpShellSlotSidebar, AcpShellSlotSidebarFooter, AcpShellSlotToolbar, AcpShellSlotTopmenu, AcpSidebar, AcpSidebarBranding, AcpSidebarContent, AcpSidebarHeader, AcpSidebarToggle, AcpSidebarUserPanel, AcpTopmenu, AcpTopmenuPanel, AdvancedDialogService, Branding, Button, CONTEXT_MENU_DATA, CONTEXT_MENU_ITEMS, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KPI_CARD_TREND_CONFIGS, KeyboardNavigationService, NavAccordionDirective, NavAccordionItemDirective, NavAccordionToggleDirective, OverlayService, Pagination, SidemenuComponent, Spinner, StatusDisplayPipe, SvgIcon, TREND_CONFIGS, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, UserMenu, UserPanel, _AcpPopoverContentBase, acpSearchSelectLooseEquals, acpSearchSelectNormalize, inferKpiTrend, provideAcpCardDefaults, provideAcpDialogDefaults };
 //# sourceMappingURL=acontplus-ng-components.mjs.map