@acontplus/ng-components 2.1.31 → 2.1.32

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Acontplus S.A.S.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/fesm2022/acontplus-ng-components.mjs

@@ -2861,7 +2861,7 @@ class AcpGridCell {
         btn.click?.(rowData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpGridCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpGridCell, isStandalone: true, selector: "acp-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["acpGridCell"], ngImport: i0, template: "@if (summary) {\n<span\n  [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n  [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n  [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n  [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData)\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData)\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n  <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n    {{ colDef.tag[_value].text }}\n  </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n  <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      stroke-width=\"2\"\n      d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n    />\n  </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | number\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | currency\n                  : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n                  : $safeNavigationMigration(colDef.typeParameter?.display)\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n  $safeNavigationMigration(colDef.typeParameter?.display) :\n  $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | percent\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | date\n                  : $safeNavigationMigration(colDef.typeParameter?.format)\n                  : $safeNavigationMigration(colDef.typeParameter?.timezone)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n  $safeNavigationMigration(colDef.typeParameter?.timezone) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n  @if (btn.icon) {\n  <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n  } @else if (btn.fontIcon) {\n  <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n  } @else if (btn.svgIcon) {\n  <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n  }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#6b7280;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AcpGridMenu, selector: "acp-grid-menu", inputs: ["items", "data"], exportAs: ["acpGridMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AcpGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: AcpGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: AcpGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: AcpGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpGridCell, isStandalone: true, selector: "acp-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["acpGridCell"], ngImport: i0, template: "@if (summary) {\n<span\n  [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n  [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n  [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n  [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData)\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData)\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n  <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n    {{ colDef.tag[_value].text }}\n  </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n  <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      stroke-width=\"2\"\n      d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n    />\n  </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | number\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | currency\n                  : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n                  : $safeNavigationMigration(colDef.typeParameter?.display)\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n  $safeNavigationMigration(colDef.typeParameter?.display) :\n  $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | percent\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | date\n                  : $safeNavigationMigration(colDef.typeParameter?.format)\n                  : $safeNavigationMigration(colDef.typeParameter?.timezone)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n  $safeNavigationMigration(colDef.typeParameter?.timezone) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n  @if (btn.icon) {\n  <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n  } @else if (btn.fontIcon) {\n  <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n  } @else if (btn.svgIcon) {\n  <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n  }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#6b7280;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AcpGridMenu, selector: "acp-grid-menu", inputs: ["items", "data"], exportAs: ["acpGridMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AcpGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: AcpGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: AcpGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: AcpGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpGridCell, decorators: [{
             type: Component,
@@ -2887,7 +2887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         AcpGridCellActionTooltipPipe,
                         AcpGridCellActionBadgePipe,
                         AcpGridMenu,
-                    ], template: "@if (summary) {\n<span\n  [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n  [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n  [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n  [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData)\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData)\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n  <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n    {{ colDef.tag[_value].text }}\n  </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n  <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      stroke-width=\"2\"\n      d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n    />\n  </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | number\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | currency\n                  : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n                  : $safeNavigationMigration(colDef.typeParameter?.display)\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n  $safeNavigationMigration(colDef.typeParameter?.display) :\n  $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | percent\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | date\n                  : $safeNavigationMigration(colDef.typeParameter?.format)\n                  : $safeNavigationMigration(colDef.typeParameter?.timezone)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n  $safeNavigationMigration(colDef.typeParameter?.timezone) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n  @if (btn.icon) {\n  <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n  } @else if (btn.fontIcon) {\n  <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n  } @else if (btn.svgIcon) {\n  <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n  }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#6b7280;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"] }]
+                    ], template: "@if (summary) {\n<span\n  [title]=\"_getFormatterTooltip(data | cellSummary: colDef)\"\n  [innerHTML]=\"_getText(data | cellSummary: colDef)\"\n></span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef.formatter) {\n<span\n  [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n  [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\"\n></span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef.type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef.buttons | cellActions : rowData : rowChangeRecord :\n$safeNavigationMigration(rowChangeRecord?.currentValue); track btn ) { @if (!btn.iif ||\nbtn.iif(rowData)) { @if (btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  [matMenuTriggerFor]=\"\n                    btn.children && btn.children.length > 0 ? gridMenu.menu : null\n                  \"\n  (click)=\"$event.stopPropagation()\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n  matIconButton\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData)\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n</button>\n} @else {\n<button\n  [matButton]=\"btn.type || 'text'\"\n  [color]=\"btn.color || 'primary'\"\n  type=\"button\"\n  class=\"acp-grid-action-button\"\n  [class]=\"btn.class\"\n  [disabled]=\"\n                    btn\n                      | cellActionDisable\n                        : rowData\n                        : rowChangeRecord\n                        : $safeNavigationMigration(rowChangeRecord?.currentValue)\n                  \"\n  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n  (click)=\"_onActionClick($event, btn, rowData)\"\n>\n  <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n  <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef.tag && colDef.tag[_value]) {\n<mat-chip-listbox>\n  <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n    {{ colDef.tag[_value].text }}\n  </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"acp-placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"acp-placeholder-box\">\n  <svg class=\"acp-placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      stroke-width=\"2\"\n      d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n    />\n  </svg>\n</div>\n} }\n\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | number\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | number : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | currency\n                  : $safeNavigationMigration(colDef.typeParameter?.currencyCode)\n                  : $safeNavigationMigration(colDef.typeParameter?.display)\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | currency : $safeNavigationMigration(colDef.typeParameter?.currencyCode) :\n  $safeNavigationMigration(colDef.typeParameter?.display) :\n  $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | percent\n                  : $safeNavigationMigration(colDef.typeParameter?.digitsInfo)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | percent : $safeNavigationMigration(colDef.typeParameter?.digitsInfo) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n  [title]=\"\n            _getTooltip(\n              _value\n                | date\n                  : $safeNavigationMigration(colDef.typeParameter?.format)\n                  : $safeNavigationMigration(colDef.typeParameter?.timezone)\n                  : $safeNavigationMigration(colDef.typeParameter?.locale)\n            )\n          \"\n>\n  {{ _getText( _value | date : $safeNavigationMigration(colDef.typeParameter?.format) :\n  $safeNavigationMigration(colDef.typeParameter?.timezone) :\n  $safeNavigationMigration(colDef.typeParameter?.locale) ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n  @if (btn.icon) {\n  <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n  } @else if (btn.fontIcon) {\n  <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n  } @else if (btn.svgIcon) {\n  <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n  }\n</ng-template>\n", styles: [".acp-placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#6b7280;font-size:.85rem;gap:8px}.acp-placeholder-icon{width:32px;height:32px;color:#3b82f6}.acp-placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"] }]
         }], propDecorators: { rowData: [{
                 type: Input
             }], colDef: [{
@@ -8447,6 +8447,258 @@ class AcpSelectDateOption {
     callBackFunction;
 }
 
+class AcpCheckboxBase {
+    label;
+    value;
+    constructor(label, value) {
+        this.label = label;
+        this.value = value;
+    }
+}
+class AcpCheckboxGroup {
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _focusMonitor = inject(FocusMonitor);
+    _elementRef = inject(ElementRef);
+    _checkboxes;
+    get trackBy() {
+        return this._trackByFn;
+    }
+    set trackBy(fn) {
+        if (fn != null && typeof fn !== 'function') {
+            console.warn(`trackBy must be a function, but received ${JSON.stringify(fn)}.`);
+        }
+        this._trackByFn = fn;
+    }
+    _trackByFn;
+    get items() {
+        return this._items;
+    }
+    set items(value) {
+        this._itemsAreUsed = true;
+        // store the original data with deep clone
+        this._originalItems = JSON.parse(JSON.stringify(value));
+        this._items = value.map(option => {
+            return option instanceof Object ? { ...option } : new AcpCheckboxBase(option, option);
+        });
+        // update the state of selectAll when items changed
+        this.writeValue(this.selectedItems);
+    }
+    _items = [];
+    _originalItems = [];
+    _itemsAreUsed = false;
+    bindLabel = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bindLabel" }] : /* istanbul ignore next */ []));
+    bindValue = input('value', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bindValue" }] : /* istanbul ignore next */ []));
+    showSelectAll = false;
+    selectAllLabel = 'Select All';
+    get compareWith() {
+        return this._compareWith;
+    }
+    set compareWith(fn) {
+        if (fn != null && typeof fn !== 'function') {
+            throw Error('`compareWith` must be a function.');
+        }
+        this._compareWith = fn;
+    }
+    _compareWith;
+    disabled = false;
+    selectionChange = output();
+    selectAll = false;
+    selectAllIndeterminate = false;
+    selectedItems = [];
+    _onChange = () => null;
+    _onTouched = () => null;
+    ngAfterViewInit() {
+        this._focusMonitor.monitor(this._elementRef, true).subscribe(focusOrigin => {
+            if (!focusOrigin) {
+                // When a focused element becomes disabled, the browser *immediately* fires a blur event.
+                // Angular does not expect events to be raised during change detection, so any state change
+                // (such as a form control's 'ng-touched') will cause a changed-after-checked error.
+                // See https://github.com/angular/angular/issues/17793. To work around this, we defer
+                // telling the form control it has been touched until the next tick.
+                Promise.resolve().then(() => {
+                    this._onTouched();
+                    this._changeDetectorRef.markForCheck();
+                });
+            }
+        });
+        if (!this._itemsAreUsed) {
+            this._setItemsFromContentCheckboxes();
+        }
+    }
+    _setItemsFromContentCheckboxes() {
+        if (!this._checkboxes?.length) {
+            return;
+        }
+        const items = this._checkboxes.map(cb => ({
+            label: cb._elementRef.nativeElement.textContent?.trim() || '',
+            value: cb.value,
+            disabled: cb.disabled,
+            color: cb.color,
+            disableRipple: cb.disableRipple,
+            labelPosition: cb.labelPosition,
+            required: cb.required,
+            ariaLabel: cb.ariaLabel,
+            ariaLabelledby: cb.ariaLabelledby,
+            ariaDescribedby: cb.ariaDescribedby,
+        }));
+        this.items = items;
+    }
+    ngOnDestroy() {
+        this._focusMonitor.stopMonitoring(this._elementRef);
+    }
+    /**
+     * Finds and selects and option based on its value.
+     * @returns Option that has the corresponding value.
+     */
+    _selectValue(value) {
+        const correspondingOption = this.items.find(option => {
+            try {
+                const compareValue = option[this.bindValue()] === value;
+                return this._compareWith ? this._compareWith(option, value) : compareValue;
+            }
+            catch (error) {
+                console.warn(error);
+                return false;
+            }
+        });
+        if (correspondingOption) {
+            correspondingOption.checked = true;
+        }
+        return correspondingOption;
+    }
+    /**
+     * Sets the model value. Implemented as part of ControlValueAccessor.
+     * @param value New value to be written to the model.
+     */
+    writeValue(value) {
+        this.items.forEach(item => (item.checked = false));
+        if (value) {
+            if (!Array.isArray(value)) {
+                throw Error('Value must be an array.');
+            }
+            value.forEach(currentValue => this._selectValue(currentValue));
+            this.selectedItems = value;
+        }
+        this._checkMasterCheckboxState();
+        this._changeDetectorRef.markForCheck();
+    }
+    /**
+     * Registers a callback to be triggered when the model value changes.
+     * Implemented as part of ControlValueAccessor.
+     * @param fn Callback to be registered.
+     */
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    /**
+     * Registers a callback to be triggered when the control is touched.
+     * Implemented as part of ControlValueAccessor.
+     * @param fn Callback to be registered.
+     */
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /**
+     * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
+     * @param isDisabled Whether the control should be disabled.
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this._changeDetectorRef.markForCheck();
+    }
+    _checkMasterCheckboxState() {
+        if (this.items
+            .filter(option => option.checked || !option.disabled)
+            .every(option => !option.checked)) {
+            this.selectAll = false;
+            this.selectAllIndeterminate = false;
+        }
+        else if (this.items
+            .filter(option => option.checked || !option.disabled)
+            .every(option => option.checked)) {
+            this.selectAll = true;
+            this.selectAllIndeterminate = false;
+        }
+        else {
+            this.selectAllIndeterminate = true;
+        }
+    }
+    _getSelectedItems(index) {
+        this.selectedItems = this.items.filter(option => option.checked);
+        if (this._compareWith) {
+            this.selectedItems = this._originalItems.filter(option => this.selectedItems.find(selectedOption => this._compareWith(option, selectedOption)));
+        }
+        else {
+            this.selectedItems = this.selectedItems.map(option => option[this.bindValue()]);
+        }
+        this._onChange(this.selectedItems);
+        this.selectionChange.emit({ model: this.selectedItems, index });
+    }
+    /** Handle normal checkbox toggle */
+    _updateNormalCheckboxState(e, index) {
+        this._checkMasterCheckboxState();
+        this._getSelectedItems(index);
+    }
+    /** Handle master checkbox toggle */
+    _updateMasterCheckboxState(e, index) {
+        this.selectAll = !this.selectAll;
+        this.selectAllIndeterminate = false;
+        if (this.selectAll) {
+            this.items
+                .filter(option => option.checked || !option.disabled)
+                .forEach(option => (option.checked = true));
+        }
+        else {
+            this.items
+                .filter(option => option.checked || !option.disabled)
+                .forEach(option => (option.checked = !!option.disabled));
+        }
+        this._getSelectedItems(index);
+    }
+    _trackBy = (index, item) => {
+        return this.trackBy ? this.trackBy(index, item) : item;
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpCheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AcpCheckboxGroup, isStandalone: true, selector: "acp-checkbox-group", inputs: { trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { selectionChange: "selectionChange" }, host: { classAttribute: "acp-checkbox-group" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AcpCheckboxGroup),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "_checkboxes", predicate: i0.forwardRef(() => MatCheckbox), descendants: true }], exportAs: ["acpCheckboxGroup"], ngImport: i0, template: "@if (showSelectAll) {\n<mat-checkbox\n  class=\"acp-checkbox-master\"\n  [checked]=\"selectAll\"\n  [(indeterminate)]=\"selectAllIndeterminate\"\n  [disabled]=\"disabled\"\n  (change)=\"_updateMasterCheckboxState($event, -1)\"\n>\n  {{ selectAllLabel }}\n</mat-checkbox>\n} @for (option of items; track _trackBy($index, option); let i = $index) {\n<mat-checkbox\n  class=\"acp-checkbox-normal\"\n  [(ngModel)]=\"option.checked\"\n  [aria-describedby]=\"option.ariaDescribedby\"\n  [aria-label]=\"option.ariaLabel\"\n  [aria-labelledby]=\"option.ariaLabelledby\"\n  [color]=\"option.color\"\n  [disabled]=\"option.disabled || disabled\"\n  [disableRipple]=\"option.disableRipple\"\n  [labelPosition]=\"option.labelPosition\"\n  [required]=\"option.required\"\n  (change)=\"_updateNormalCheckboxState($event, i)\"\n>\n  {{ option[bindLabel()] | toObservable | async }}\n</mat-checkbox>\n}\n", styles: [".acp-checkbox-group{display:flex;flex-direction:column;gap:.5rem}.acp-checkbox-group .acp-checkbox-master{margin-bottom:.5rem;font-weight:500}.acp-checkbox-group .acp-checkbox-normal{margin-left:1rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AcpCheckboxGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'acp-checkbox-group', exportAs: 'acpCheckboxGroup', host: {
+                        class: 'acp-checkbox-group',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AcpCheckboxGroup),
+                            multi: true,
+                        },
+                    ], imports: [FormsModule, MatCheckbox, AcpToObservablePipe, AsyncPipe], 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"] }]
+        }], propDecorators: { _checkboxes: [{
+                type: ContentChildren,
+                args: [forwardRef(() => MatCheckbox), { descendants: true }]
+            }], trackBy: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], showSelectAll: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], selectAllLabel: [{
+                type: Input
+            }], compareWith: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+
 class ToUpperCase {
     el = inject(ElementRef);
     renderer = inject(Renderer2);
@@ -8584,5 +8836,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACP_ACTIVE_DATE_DEBOUNCE, ACP_DATE_OPTION_TYPE, ACP_DEFAULT_DATE_OPTIONS, ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AcpAlert, AcpDateRangeInput, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AcpSelectDateOption, AdvancedDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KeyboardNavigationService, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, _AcpPopoverContentBase, createAutocompleteWrapperConfig };
+export { ACP_ACTIVE_DATE_DEBOUNCE, ACP_DATE_OPTION_TYPE, ACP_DEFAULT_DATE_OPTIONS, ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AcpAlert, AcpCheckboxBase, AcpCheckboxGroup, AcpDateRangeInput, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AcpSelectDateOption, AdvancedDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KeyboardNavigationService, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, _AcpPopoverContentBase, createAutocompleteWrapperConfig };
 //# sourceMappingURL=acontplus-ng-components.mjs.map